import { jsx as t, jsxs as m } from "react/jsx-runtime";
import { useRef as p } from "react";
import { c as s } from "./index.CfM2L_w0.js";
import { a as C } from "./index.CfQlFjZU.js";
import { n as _, o as h } from "./index.dWlEA7uO.js";
import { B as x } from "./Button.CpTwUWVr.js";
const F = "creator_container_8YPJ2", k = "creator_container__disabled_keehB", b = "creator_input_FJLDP", a = { container: F, container__disabled: k, input: b }, S = ({ ...n }) => {
  const e = p(null);
  function o(r) {
    r.target !== e.current && e.current?.click();
  }
  function c(r) {
    r.target !== e.current && e.current?.focus();
  }
  function i() {
    n.onChange?.({
      target: { value: "" }
    });
  }
  return {
    ...n,
    inputRef: e,
    prefixIcon: /* @__PURE__ */ t(_, { size: 24 }),
    suffixIcon: n.value ? /* @__PURE__ */ t(B, { onClick: i }) : void 0,
    onContainerClick: o,
    onContainerFocus: c
  };
}, g = ({
  prefixIcon: n,
  suffixIcon: e,
  isDisabled: o,
  isError: c,
  inputClassName: i,
  inputContainerClassName: r,
  inputRef: l,
  onContainerClick: u,
  onContainerFocus: f,
  ...d
}) => /* @__PURE__ */ m(
  "div",
  {
    className: s(a.container, r, {
      [a.container__disabled]: o
    }),
    onClick: u,
    onFocus: f,
    tabIndex: 0,
    children: [
      n,
      /* @__PURE__ */ t(
        "input",
        {
          ref: l,
          type: "search",
          className: s(a.input, i),
          disabled: o,
          ...d
        }
      ),
      e
    ]
  }
);
function B({ onClick: n }) {
  return /* @__PURE__ */ t(
    x,
    {
      onClick: n,
      size: "2xsmall",
      prefixIcon: /* @__PURE__ */ t(h, { size: 24 }),
      label: "Clear input selection"
    }
  );
}
const J = C(g, S);
export {
  J as S
};
