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

package/dist/ToolIconButton-Uf4-mshy.js

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