@yourbestsoft/studio-screen-ui-kit 0.0.16 → 0.0.18

package/dist/ToolIconButton-COS9gEWi.js

@@ -0,0 +1,775 @@
+import { jsx as c, jsxs as T, Fragment as G } from "react/jsx-runtime";
+import m from "classnames";
+import H, { forwardRef as E, useEffect as C, useState as $, useCallback as x, useLayoutEffect as rt, createContext as j, useRef as K, useMemo as J, useContext as R } from "react";
+import { createPortal as Q } from "react-dom";
+import { Eye as it, EyeOff as ct, X as at, Search as lt } from "lucide-react";
+const dt = "_text_4m304_1", ut = "_tertiary_4m304_1", ht = "_secondary_4m304_1", _t = "_primary_4m304_1", mt = "_fullWidth_4m304_50", pt = "_buttonWithIcon_4m304_54", ft = "_content_4m304_61", gt = "_shortcut_4m304_70", bt = "_disabled_4m304_82", S = {
+  text: dt,
+  tertiary: ut,
+  secondary: ht,
+  primary: _t,
+  fullWidth: mt,
+  buttonWithIcon: pt,
+  content: ft,
+  shortcut: gt,
+  disabled: bt
+}, wt = ({
+  children: t,
+  className: e,
+  component: o = "button",
+  disabled: n,
+  fullWidth: i,
+  icon: s,
+  shortcut: r,
+  variant: a = "primary",
+  ...h
+}, l) => {
+  const u = /* @__PURE__ */ T("div", { className: S.buttonWithIcon, children: [
+    /* @__PURE__ */ T("div", { className: S.content, children: [
+      s,
+      t
+    ] }),
+    /* @__PURE__ */ c("div", { className: S.shortcut, children: r })
+  ] });
+  return /* @__PURE__ */ c(
+    o,
+    {
+      className: m(
+        S[a],
+        i && S.fullWidth,
+        n && S.disabled,
+        s && S.icon,
+        e
+      ),
+      children: s ? u : t,
+      disabled: n,
+      ref: l,
+      ...h
+    }
+  );
+}, ho = E(wt), yt = "_content_23x5h_1", vt = "_header_23x5h_1", Ct = "_root_23x5h_7", kt = "_contentAfterHeader_23x5h_22", B = {
+  content: yt,
+  header: vt,
+  root: Ct,
+  contentAfterHeader: kt
+}, Y = E(
+  ({ className: t, ...e }, o) => /* @__PURE__ */ c("div", { className: m(B.root, t), ref: o, ...e })
+), xt = E(
+  ({ className: t, ignoreHeader: e, ...o }, n) => /* @__PURE__ */ c(
+    "div",
+    {
+      className: m(
+        B.content,
+        !e && B.contentAfterHeader,
+        t
+      ),
+      ref: n,
+      ...o
+    }
+  )
+), Nt = E(
+  ({ className: t, ...e }, o) => /* @__PURE__ */ c("div", { className: m(B.header, t), ref: o, ...e })
+), _o = Object.assign(Y, {
+  Content: xt,
+  Header: Nt,
+  Root: Y
+}), Tt = (t, e = {}) => {
+  const {
+    enabled: o = !0,
+    preventDefault: n = !1,
+    stopPropagation: i = !1
+  } = e;
+  C(() => {
+    if (!o) return;
+    const s = (r) => {
+      n && r.preventDefault(), i && r.stopPropagation(), t.forEach((a) => a(r));
+    };
+    return window.addEventListener("keydown", s), () => {
+      window.removeEventListener("keydown", s);
+    };
+  }, [t, o, n, i]);
+}, Et = (t, e, o = {}) => (n) => {
+  const {
+    ctrlKey: i = !1,
+    shiftKey: s = !1,
+    altKey: r = !1,
+    metaKey: a = !1
+  } = o;
+  n.key === t && n.ctrlKey === i && n.shiftKey === s && n.altKey === r && n.metaKey === a && e(n);
+}, Dt = (t) => Et("Escape", t), St = (t, e = !0) => (o) => {
+  if (!e || o.key !== "Tab" || !t.current) return;
+  const n = t.current.querySelectorAll(
+    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+  ), i = n[0], s = n[n.length - 1];
+  o.shiftKey ? document.activeElement === i && (o.preventDefault(), s?.focus()) : document.activeElement === s && (o.preventDefault(), i?.focus());
+}, $t = (t, e, o) => {
+  C(() => {
+    if (!e) return;
+    const n = (i) => {
+      i.key === "Escape" && o() && t();
+    };
+    return document.addEventListener("keydown", n), () => {
+      document.removeEventListener("keydown", n);
+    };
+  }, [t, e, o]);
+}, qt = (t, e, o) => {
+  C(() => {
+    if (o)
+      return window.addEventListener("resize", t), window.addEventListener("scroll", e, !0), () => {
+        window.removeEventListener("resize", t), window.removeEventListener("scroll", e, !0);
+      };
+  }, [t, e, o]);
+}, Ot = "_root_ibcdq_1", Pt = "_dropdownContent_ibcdq_6", Rt = "_left_ibcdq_30", Wt = "_center_ibcdq_34", Lt = "_right_ibcdq_39", It = "_top_ibcdq_43", Ht = "_bottom_ibcdq_47", Kt = "_fixedPosition_ibcdq_51", Z = {
+  root: Ot,
+  dropdownContent: Pt,
+  left: Rt,
+  center: Wt,
+  right: Lt,
+  top: It,
+  bottom: Ht,
+  fixedPosition: Kt
+}, Bt = (t, e, o, n = "left", i = "bottom", s = 8) => {
+  const [r, a] = $({
+    horizontal: n,
+    left: 0,
+    top: 0,
+    vertical: i
+  }), h = x(() => {
+    const l = t.current, u = e.current;
+    if (!l || !u) return;
+    const d = u.getBoundingClientRect(), _ = l.getBoundingClientRect(), w = window.innerWidth, g = window.innerHeight, p = 16;
+    let v = i, y = n, k = 0, f = 0;
+    const q = g - d.bottom, I = d.top;
+    i === "bottom" ? q >= _.height + s + p ? (v = "bottom", k = d.bottom + s) : I >= _.height + s + p ? (v = "top", k = d.top - _.height - s) : (v = q > I ? "bottom" : "top", k = v === "bottom" ? d.bottom + s : d.top - _.height - s) : I >= _.height + s + p ? (v = "top", k = d.top - _.height - s) : q >= _.height + s + p ? (v = "bottom", k = d.bottom + s) : (v = I > q ? "top" : "bottom", k = v === "top" ? d.top - _.height - s : d.bottom + s), n === "left" ? (f = d.left, f + _.width > w - p && (f = w - _.width - p, y = "right"), f < p && (f = p, y = "left")) : n === "right" ? (f = d.right - _.width, f < p && (f = p, y = "left"), f + _.width > w - p && (f = w - _.width - p, y = "right")) : (f = d.left + (d.width - _.width) / 2, f < p ? (f = p, y = "left") : f + _.width > w - p && (f = w - _.width - p, y = "right")), k = Math.max(
+      p,
+      Math.min(k, g - _.height - p)
+    ), a({
+      horizontal: y,
+      left: f,
+      top: k,
+      vertical: v
+    });
+  }, [t, e, i, n, s]);
+  return rt(() => {
+    o && h();
+  }, [o, h]), { calculatePosition: h, position: r };
+}, W = [], Ft = (t, e) => (C(() => {
+  if (e && t.current)
+    return W.push(t.current), () => {
+      const n = W.indexOf(t.current);
+      n !== -1 && W.splice(n, 1);
+    };
+}, [e, t]), { isTopOfStack: x(() => t.current ? W[W.length - 1] === t.current : !1, [t]) }), O = (t) => {
+  t.stopPropagation(), t.nativeEvent?.stopImmediatePropagation?.();
+}, At = (t, e) => t ? e ? `${t} ${e}` : t : e, Mt = (t, e) => t ? e ? { ...t, ...e } : t : e;
+function Vt(...t) {
+  return (e) => {
+    t.forEach((o) => {
+      o && (typeof o == "function" ? o(e) : o.current = e);
+    });
+  };
+}
+const F = H.forwardRef(
+  ({ children: t, className: e, style: o, ...n }, i) => {
+    if (!H.isValidElement(t)) return null;
+    const s = t.props, r = { ...s, ...n };
+    for (const a of Object.keys(n)) {
+      if (!a.startsWith("on")) continue;
+      const h = n[a], l = s[a];
+      typeof h == "function" && typeof l == "function" && (r[a] = (u) => {
+        l(u), h(u);
+      });
+    }
+    return r.className = At(s.className, e), r.style = Mt(s.style, o), r.ref = Vt(t.ref, i), H.cloneElement(t, r);
+  }
+);
+F.displayName = "Slot";
+const tt = j(
+  void 0
+), z = () => {
+  const t = R(tt);
+  if (!t)
+    throw new Error("useDropDownContext must be used within a DropDown.Root");
+  return t;
+}, jt = ({
+  children: t,
+  closeOnEsc: e = !0,
+  closeOnOutsideClick: o = !0,
+  consumeOutsideClick: n = !0,
+  defaultVisible: i = !1
+}) => {
+  const [s, r] = $(i), a = K(null), h = K(null), l = x(() => r(!1), []), u = x(() => r((w) => !w), []), { isTopOfStack: d } = Ft(a, s);
+  C(() => {
+    if (!s || !o) return;
+    const w = (g) => {
+      if (!d || typeof g.button == "number" && g.button !== 0) return;
+      const p = a.current, v = h.current, y = g.target, k = g.composedPath?.() ?? [], f = !!p && (k.includes(p) || !!y && p.contains(y)), q = !!v && (k.includes(v) || !!y && v.contains(y));
+      f || q || (n && (g.preventDefault(), g.stopPropagation(), g.stopImmediatePropagation?.()), l());
+    };
+    return document.addEventListener("pointerdown", w, !0), () => {
+      document.removeEventListener("pointerdown", w, !0);
+    };
+  }, [s, o, n, l, d]), $t(l, e && s, d);
+  const _ = J(
+    () => ({ close: l, contentRef: h, rootRef: a, toggle: u, visible: s }),
+    [l, u, s]
+  );
+  return /* @__PURE__ */ c(tt.Provider, { value: _, children: /* @__PURE__ */ c("div", { ref: a, className: Z.root, children: t }) });
+}, zt = ({ asChild: t = !1, children: e }) => {
+  const { toggle: o } = z(), n = x((r) => {
+    O(r);
+  }, []), i = x(
+    (r) => {
+      O(r), o();
+    },
+    [o]
+  ), s = x(
+    (r) => {
+      (r.key === "Enter" || r.key === " ") && (r.preventDefault(), O(r), o());
+    },
+    [o]
+  );
+  return t ? /* @__PURE__ */ c(F, { onPointerDown: n, onClick: i, children: e }) : /* @__PURE__ */ c(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      onPointerDown: n,
+      onClick: i,
+      onKeyDown: s,
+      children: e
+    }
+  );
+}, Yt = ({
+  asChild: t = !1,
+  children: e,
+  className: o,
+  horizontal: n = "left",
+  offset: i = 8,
+  vertical: s = "bottom"
+}) => {
+  const { close: r, contentRef: a, rootRef: h, visible: l } = z(), { calculatePosition: u, position: d } = Bt(
+    a,
+    h,
+    l,
+    n,
+    s,
+    i
+  );
+  if (C(() => {
+    const w = a.current;
+    if (!w) return;
+    const g = new ResizeObserver(() => u());
+    return g.observe(w), () => g.disconnect();
+  }, [u]), qt(u, r, l), !l) return null;
+  const _ = {
+    className: m(Z.dropdownContent, o),
+    onClick: O,
+    onPointerDown: O,
+    style: { left: `${d.left}px`, top: `${d.top}px` },
+    tabIndex: -1
+  };
+  return Q(
+    t ? /* @__PURE__ */ c(F, { ref: a, ..._, children: e }) : /* @__PURE__ */ c("div", { ref: a, ..._, children: e }),
+    document.body
+  );
+}, Ut = ({ asChild: t = !1, children: e, onClick: o }) => {
+  const { close: n } = z(), i = x(
+    (s) => {
+      O(s), o?.(s), n();
+    },
+    [o, n]
+  );
+  return t ? /* @__PURE__ */ c(F, { onClick: i, children: e }) : /* @__PURE__ */ c("div", { onClick: i, children: e });
+}, mo = { Close: Ut, Content: Yt, Root: jt, Trigger: zt }, Xt = "_dialogOverlay_1h2c4_1", Gt = "_dialogTrigger_1h2c4_13", Jt = "_dialogContent_1h2c4_21", Qt = "_dialogClose_1h2c4_34", Zt = "_dialogTitle_1h2c4_42", te = "_dialogSeparator_1h2c4_47", P = {
+  dialogOverlay: Xt,
+  dialogTrigger: Gt,
+  dialogContent: Jt,
+  dialogClose: Qt,
+  dialogTitle: Zt,
+  dialogSeparator: te
+}, A = H.createContext(null), ee = ({
+  children: t,
+  isOpen: e,
+  onStateChange: o
+}) => {
+  const n = K(null), [i, s] = $(!1), r = e !== void 0 ? e : i, a = (l) => {
+    e === void 0 && s(l), o && o(l);
+  }, h = [
+    Dt(() => a(!1)),
+    St(n, r)
+  ];
+  return Tt(h, { enabled: r }), C(() => (r ? document.body.style.overflow = "hidden" : document.body.style.overflow = "unset", () => {
+    document.body.style.overflow = "unset";
+  }), [r]), C(() => {
+    if (r && n.current) {
+      const u = n.current.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      )[0];
+      u && u.focus();
+    }
+  }, [r]), /* @__PURE__ */ c(A.Provider, { value: { dialogRef: n, isOpen: r, setIsOpen: a }, children: /* @__PURE__ */ c("div", { children: t }) });
+}, oe = ({
+  as: t,
+  children: e,
+  ...o
+}) => {
+  const n = R(A);
+  if (!n) throw new Error("Trigger must be used within a Dialog.Root");
+  const { setIsOpen: i } = n;
+  return /* @__PURE__ */ c(
+    t || "button",
+    {
+      onClick: () => {
+        i(!0);
+      },
+      ...o,
+      className: P.dialogTrigger,
+      role: t && t !== "button" ? "button" : void 0,
+      children: e
+    }
+  );
+}, ne = E(
+  ({ children: t, classNameOverlay: e, className: o, closeOnBackdropClick: n = !0 }, i) => {
+    const s = R(A);
+    if (!s) throw new Error("Content must be used within a Dialog.Root");
+    const { dialogRef: r, isOpen: a, setIsOpen: h } = s, l = (u) => {
+      n && u.target === u.currentTarget && h(!1);
+    };
+    return a ? /* @__PURE__ */ c(
+      "div",
+      {
+        ref: r,
+        className: m(P.dialogOverlay, e),
+        onClick: l,
+        role: "dialog",
+        "aria-modal": "true",
+        children: /* @__PURE__ */ c(
+          "div",
+          {
+            className: m(P.dialogContent, o),
+            onClick: (u) => u.stopPropagation(),
+            children: t
+          }
+        )
+      }
+    ) : null;
+  }
+), se = ({
+  as: t,
+  children: e,
+  ...o
+}) => {
+  const n = R(A);
+  if (!n) throw new Error("Close must be used within a Dialog.Root");
+  const { setIsOpen: i } = n;
+  return /* @__PURE__ */ c(
+    t || "button",
+    {
+      onClick: () => {
+        i(!1);
+      },
+      ...o,
+      className: m(P.dialogClose, o.className),
+      role: t && t !== "button" ? "button" : void 0,
+      children: e
+    }
+  );
+}, re = ({ children: t, className: e }) => /* @__PURE__ */ c("h2", { className: m(P.dialogTitle, e), children: t }), ie = ({}) => /* @__PURE__ */ c("div", { className: P.dialogSeparator }), po = {
+  Close: se,
+  Content: ne,
+  Root: ee,
+  Separator: ie,
+  Title: re,
+  Trigger: oe
+}, ce = "_trigger_8raq4_13", ae = "_overlay_8raq4_22", le = "_overlayOpen_8raq4_32", de = "_content_8raq4_37", ue = "_left_8raq4_51", he = "_isOpen_8raq4_55", _e = "_right_8raq4_59", me = "_bottom_8raq4_67", pe = "_top_8raq4_80", fe = "_closeButton_8raq4_93", N = {
+  trigger: ce,
+  overlay: ae,
+  overlayOpen: le,
+  content: de,
+  left: ue,
+  isOpen: he,
+  right: _e,
+  bottom: me,
+  top: pe,
+  closeButton: fe
+}, et = j(
+  void 0
+), M = () => {
+  const t = R(et);
+  if (!t)
+    throw new Error("useSidebarContext must be used within a SidebarProvider");
+  return t;
+}, ot = typeof window < "u" && typeof document < "u", ge = (t) => {
+  C(() => {
+    if (!ot || !t) return;
+    const e = document.body, o = window.scrollY, n = {
+      left: e.style.left,
+      overflow: e.style.overflow,
+      paddingRight: e.style.paddingRight,
+      position: e.style.position,
+      right: e.style.right,
+      top: e.style.top,
+      width: e.style.width
+    }, i = window.innerWidth - document.documentElement.clientWidth;
+    return e.style.position = "fixed", e.style.top = `-${o}px`, e.style.left = "0", e.style.right = "0", e.style.width = "100%", e.style.overflow = "hidden", i > 0 && (e.style.paddingRight = `${i}px`), () => {
+      e.style.position = n.position, e.style.top = n.top, e.style.left = n.left, e.style.right = n.right, e.style.width = n.width, e.style.paddingRight = n.paddingRight, e.style.overflow = n.overflow, window.scrollTo(0, o);
+    };
+  }, [t]);
+}, be = ({
+  children: t,
+  isOpen: e,
+  position: o = "right",
+  setIsOpen: n
+}) => {
+  const [i, s] = $(o);
+  C(() => {
+    s(o);
+  }, [o]), ge(e);
+  const r = x(
+    (d) => {
+      n(d);
+    },
+    [n]
+  ), a = x(() => r(!0), [r]), h = x(() => r(!1), [r]), l = x(() => r(!e), [r, e]), u = J(
+    () => ({
+      close: h,
+      isOpen: e,
+      open: a,
+      position: i,
+      setOpen: r,
+      setPosition: s,
+      toggle: l
+    }),
+    [e, i, s, r, a, h, l]
+  );
+  return /* @__PURE__ */ c(et.Provider, { value: u, children: t });
+}, we = ({ children: t, className: e }) => {
+  const { open: o } = M();
+  return /* @__PURE__ */ c(
+    "button",
+    {
+      type: "button",
+      className: m(N.trigger, e),
+      onClick: o,
+      "aria-haspopup": "dialog",
+      children: t
+    }
+  );
+}, ye = ({
+  children: t,
+  className: e,
+  closeOnClick: o = !0
+}) => {
+  const { close: n, isOpen: i, position: s } = M();
+  if (!ot) return null;
+  const r = /* @__PURE__ */ c(
+    "div",
+    {
+      className: m(
+        N.overlay,
+        N[`overlay_${s}`],
+        { [N.overlayOpen]: i },
+        e
+      ),
+      onMouseDown: (a) => {
+        a.preventDefault(), o && n();
+      },
+      "aria-hidden": !i,
+      children: t
+    }
+  );
+  return Q(r, document.body);
+}, ve = ({
+  children: t,
+  className: e,
+  closeOnEsc: o = !0,
+  position: n
+}) => {
+  const {
+    close: i,
+    isOpen: s,
+    position: r,
+    setPosition: a
+  } = M(), h = n ?? r, l = K(null);
+  return C(() => {
+    a(h);
+  }, [h, a]), C(() => {
+    if (!o || !s) return;
+    const u = (d) => {
+      d.key === "Escape" && i();
+    };
+    return document.addEventListener("keydown", u), () => document.removeEventListener("keydown", u);
+  }, [s, o, i]), C(() => {
+    s && l.current?.focus();
+  }, [s]), /* @__PURE__ */ c(
+    "div",
+    {
+      ref: l,
+      tabIndex: -1,
+      role: "dialog",
+      "aria-modal": "true",
+      className: m(
+        N.content,
+        N[h],
+        {
+          [N.isClosed]: !s,
+          [N.isOpen]: s
+        },
+        e
+      ),
+      children: t
+    }
+  );
+}, Ce = ({ children: t, className: e }) => {
+  const { close: o } = M();
+  return /* @__PURE__ */ c(
+    "button",
+    {
+      type: "button",
+      className: m(N.closeButton, e),
+      onClick: o,
+      children: t
+    }
+  );
+}, fo = {
+  Close: Ce,
+  Content: ve,
+  Overlay: ye,
+  Root: be,
+  Trigger: we
+}, ke = "_switcher_k6tdq_1", xe = "_buttons_k6tdq_6", Ne = "_separator_k6tdq_10", V = {
+  switcher: ke,
+  buttons: xe,
+  separator: Ne
+}, go = E(
+  ({
+    className: t,
+    component: e,
+    componentValues: o,
+    containerProps: n,
+    onChange: i,
+    selectedValue: s,
+    slot: r
+  }, a) => {
+    const [h, l] = $(
+      s || o[0].value
+    ), u = (d) => {
+      l(d), i && i(d);
+    };
+    return /* @__PURE__ */ T("div", { ref: a, className: V.switcher, ...n, children: [
+      /* @__PURE__ */ c("div", { className: m(V.buttons, t), children: o.map((d, _) => /* @__PURE__ */ c(
+        e,
+        {
+          ...d,
+          selected: h === d.value,
+          onClick: () => u(d.value)
+        },
+        _
+      )) }),
+      r && /* @__PURE__ */ T(G, { children: [
+        /* @__PURE__ */ c("div", { className: V.separator }),
+        r
+      ] })
+    ] });
+  }
+), Te = "_root_1b0i5_13", Ee = "_header_1b0i5_19", De = "_footer_1b0i5_23", Se = "_row_1b0i5_28", $e = "_body_1b0i5_41", qe = "_head_1b0i5_19", Oe = "_cell_1b0i5_48", Pe = "_caption_1b0i5_65", Re = "_storiesFooterCellOne_1b0i5_70", We = "_storiesFooterCellTwo_1b0i5_73", D = {
+  root: Te,
+  header: Ee,
+  footer: De,
+  row: Se,
+  body: $e,
+  head: qe,
+  cell: Oe,
+  caption: Pe,
+  storiesFooterCellOne: Re,
+  storiesFooterCellTwo: We
+}, U = ({ children: t, className: e }) => /* @__PURE__ */ c("table", { className: m(D.root, e), children: t }), Le = ({ children: t, className: e }) => /* @__PURE__ */ c("caption", { className: m(D.caption, e), children: t }), Ie = ({ children: t, className: e }) => /* @__PURE__ */ c("thead", { className: m(D.header, e), children: t }), He = ({
+  children: t,
+  className: e,
+  onBlur: o,
+  onClick: n,
+  onDoubleClick: i
+}) => /* @__PURE__ */ c(
+  "tr",
+  {
+    className: m(D.row, e),
+    onClick: n,
+    onDoubleClick: i,
+    onBlur: o,
+    children: t
+  }
+), Ke = ({ children: t, className: e }) => /* @__PURE__ */ c("th", { className: m(D.head, e), children: t }), Be = ({ children: t, className: e }) => /* @__PURE__ */ c("tbody", { className: m(D.body, e), children: t }), Fe = ({ children: t, className: e }) => /* @__PURE__ */ c("td", { className: m(D.cell, e), children: t }), Ae = ({ children: t, className: e }) => /* @__PURE__ */ c("tfoot", { className: m(D.footer, e), children: t }), bo = Object.assign(U, {
+  Body: Be,
+  Caption: Le,
+  Cell: Fe,
+  Footer: Ae,
+  Head: Ke,
+  Header: Ie,
+  Root: U,
+  Row: He
+}), Me = "_inputContainer_iqbs3_1", Ve = "_input_iqbs3_1", je = "_inputSearch_iqbs3_40", ze = "_error_iqbs3_43", Ye = "_button_iqbs3_58", Ue = "_buttonWithLabel_iqbs3_68", Xe = "_resetSearchValue_iqbs3_73", Ge = "_searchOutline_iqbs3_80", Je = "_errorMessage_iqbs3_87", b = {
+  inputContainer: Me,
+  input: Ve,
+  inputSearch: je,
+  error: ze,
+  button: Ye,
+  buttonWithLabel: Ue,
+  resetSearchValue: Xe,
+  searchOutline: Ge,
+  errorMessage: Je
+}, wo = E(({ className: t, error: e, label: o, onChange: n, required: i, ...s }, r) => {
+  const [a, h] = $(!1), l = (_) => n(_.currentTarget.value), u = m(b.input, e && b.error, t);
+  let d;
+  if (!s.as || s.as === "input") {
+    const { inputType: _, ...w } = s, g = _ === "search", p = _ === "password", v = a ? "text" : "password";
+    d = /* @__PURE__ */ T(G, { children: [
+      /* @__PURE__ */ c(
+        "input",
+        {
+          className: m(u, g && b.inputSearch),
+          onChange: l,
+          ref: r,
+          type: p ? v : _,
+          ...w
+        }
+      ),
+      p && (a ? /* @__PURE__ */ c(
+        it,
+        {
+          strokeWidth: 2.5,
+          width: 20,
+          className: m(b.button, o && b.buttonWithLabel),
+          onClick: () => h((y) => !y)
+        }
+      ) : /* @__PURE__ */ c(
+        ct,
+        {
+          strokeWidth: 2.5,
+          width: 20,
+          className: m(b.button, o && b.buttonWithLabel),
+          onClick: () => h((y) => !y)
+        }
+      )),
+      g && s.value && /* @__PURE__ */ c(
+        at,
+        {
+          onClick: () => n(""),
+          className: m(
+            b.button,
+            o && b.buttonWithLabel,
+            b.resetSearchValue
+          ),
+          strokeWidth: 2.5,
+          size: 24
+        }
+      ),
+      g && /* @__PURE__ */ c(
+        lt,
+        {
+          className: m(
+            b.searchOutline,
+            o && b.searchOutlineWithLabel
+          ),
+          size: 20
+        }
+      )
+    ] });
+  }
+  return s.as === "textarea" && (d = /* @__PURE__ */ c(
+    "textarea",
+    {
+      className: u,
+      onChange: l,
+      ref: r,
+      ...s
+    }
+  )), /* @__PURE__ */ T("div", { className: b.root, children: [
+    /* @__PURE__ */ T("span", { className: b.title, children: [
+      o,
+      i && /* @__PURE__ */ c("span", { className: b.titleError, children: "*" })
+    ] }),
+    /* @__PURE__ */ c("div", { className: b.inputContainer, children: d }),
+    /* @__PURE__ */ c("div", { className: b.errorMessage, children: e })
+  ] });
+}), nt = j(void 0), yo = ({ children: t }) => {
+  const e = st() || "system", [o, n] = $(e);
+  return /* @__PURE__ */ c(nt.Provider, { value: { setTheme: n, theme: o }, children: t });
+}, vo = () => {
+  const t = R(nt);
+  if (!t)
+    throw new Error("useTheme must be used within a ThemeProvider");
+  return Qe(t.theme), t;
+}, Qe = (t) => {
+  const e = st();
+  Ze(t || e);
+}, Ze = (t) => {
+  const e = window.matchMedia("(prefers-color-scheme: dark)");
+  if (t === "system") {
+    const o = e.matches ? "dark" : "light";
+    localStorage.setItem("theme", t), X(o);
+  } else
+    localStorage.setItem("theme", t), X(t);
+}, X = (t) => {
+  document.documentElement.setAttribute("data-theme", t);
+}, st = () => {
+  const t = localStorage.getItem("theme");
+  if (t) return t;
+}, to = "_root_17w6h_1", eo = "_icon_17w6h_11", oo = "_active_17w6h_27", no = "_disabled_17w6h_31", so = "_keybinding_17w6h_44", L = {
+  root: to,
+  icon: eo,
+  active: oo,
+  disabled: no,
+  keybinding: so
+}, Co = E(
+  (t, e) => {
+    const { classes: o, disabled: n, icon: i, isActive: s, keybinding: r, onClick: a, title: h } = t, l = ro(o, s, n);
+    return /* @__PURE__ */ T("label", { className: L.root, title: h, children: [
+      /* @__PURE__ */ c(
+        "div",
+        {
+          className: l.icon,
+          ref: e,
+          tabIndex: n ? -1 : 0,
+          role: "button",
+          "aria-pressed": s,
+          "aria-disabled": n,
+          onClick: n ? void 0 : a,
+          children: i
+        }
+      ),
+      r && /* @__PURE__ */ c("span", { className: l.keybinding, children: r })
+    ] });
+  }
+), ro = (t, e, o) => ({
+  icon: m(
+    L.icon,
+    {
+      [L.active]: e,
+      [L.disabled]: o
+    },
+    t?.icon
+  ),
+  keybinding: m(L.keybinding, t?.keybinding)
+});
+export {
+  ho as B,
+  Y as C,
+  mo as D,
+  et as S,
+  bo as T,
+  vo as a,
+  wt as b,
+  xt as c,
+  Nt as d,
+  _o as e,
+  po as f,
+  M as g,
+  fo as h,
+  go as i,
+  wo as j,
+  Co as k,
+  yo as l,
+  Tt as u
+};
+//# sourceMappingURL=ToolIconButton-COS9gEWi.js.map