import { jsxs as u, jsx as e } from "react/jsx-runtime";
import { forwardRef as O, useState as p, useCallback as n } from "react";
import { cx as v } from "../../utils/classNames.js";
import { useArrowTheme as R } from "../../hooks/useArrowTheme.js";
import { IconButton as T } from "../icon-button/IconButton.js";
function q() {
  return /* @__PURE__ */ e("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M10.5 4a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13Zm0 2a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Zm8.9 11.5L22 20.1 20.1 22l-2.6-2.5 1.9-2Z" }) });
}
function B() {
  return /* @__PURE__ */ e("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm-3.7 5.3L7.3 8.3 11 12l-3.7 3.7 1.4 1.4L12.4 13.4l3.7 3.7 1.4-1.4L13.8 12l3.7-3.7-1.4-1.4-3.7 3.7-3.7-3.7Z" }) });
}
const D = O(
  ({
    id: o,
    inverse: x,
    disabled: a = !1,
    active: I,
    value: t,
    defaultValue: S = "",
    className: w,
    clearButtonLabel: g = "Clear",
    searchAriaLabel: L = "Search",
    placeholder: Z = "Search...",
    onChange: c,
    onFocus: i,
    onBlur: s,
    onClear: l,
    ...y
  }, N) => {
    const V = R(), b = x ?? V.inverse, [j, d] = p(String(S)), [h, f] = p(!1), m = t !== void 0 ? t : j, k = I ?? (h || m.length > 0), A = n(
      (r) => {
        t === void 0 && d(r.target.value), c == null || c(r);
      },
      [c, t]
    ), M = n(
      (r) => {
        f(!0), i == null || i(r);
      },
      [i]
    ), z = n(
      (r) => {
        f(!1), s == null || s(r);
      },
      [s]
    ), H = n(() => {
      a || (t === void 0 && d(""), l == null || l());
    }, [a, l, t]);
    return /* @__PURE__ */ u(
      "div",
      {
        className: v("tdds-search--container", w),
        ...b ? { "data-inverse": "true" } : {},
        children: [
          /* @__PURE__ */ u(
            "label",
            {
              htmlFor: o,
              "data-active": k ? "true" : "false",
              className: v("tdds-search", { "force-focus": h }),
              children: [
                /* @__PURE__ */ e("span", { className: "tdds-search--icon", children: /* @__PURE__ */ e(q, {}) }),
                /* @__PURE__ */ e(
                  "input",
                  {
                    ref: N,
                    id: o,
                    type: "text",
                    placeholder: Z,
                    "aria-disabled": a || void 0,
                    readOnly: a,
                    value: m,
                    "aria-label": L,
                    onChange: A,
                    onFocus: M,
                    onBlur: z,
                    ...y
                  }
                )
              ]
            }
          ),
          /* @__PURE__ */ e(
            T,
            {
              a11yLabel: g,
              icon: /* @__PURE__ */ e(B, {}),
              size: "large",
              tabIndex: -1,
              ariaHidden: !0,
              disabled: a,
              onClick: H
            }
          )
        ]
      }
    );
  }
);
D.displayName = "Search";
export {
  D as Search
};
//# sourceMappingURL=Search.js.map
