@yourbestsoft/studio-screen-ui-kit 0.0.10 → 0.0.12

package/dist/index.js

@@ -1,17 +1,17 @@
-import { D as H, B as F, u as J } from "./ToolIconButton-CKUWpXoL.js";
-import { a as an, d as ln, b as rn, c as dn, C as hn, e as _n, g as un, S as mn, h as pn, T as gn, i as fn, j as yn, f as kn } from "./ToolIconButton-CKUWpXoL.js";
-import { jsx as s, jsxs as g, Fragment as Q } from "react/jsx-runtime";
+import { u as J, D as H, B as G, a as Q } from "./ToolIconButton-BezvcpMB.js";
+import { b as an, e as ln, c as rn, d as dn, C as hn, f as _n, h as un, S as mn, i as pn, T as gn, j as fn, k as yn, g as kn } from "./ToolIconButton-BezvcpMB.js";
+import { jsx as s, jsxs as g, Fragment as X } from "react/jsx-runtime";
 import m from "classnames";
-import { useState as k, useEffect as K, useCallback as M, useRef as G } from "react";
-import { ClipboardCopy as X, ChevronLeft as Y, ChevronRight as Z, ChevronDown as ee, Sun as te, Moon as ne, Computer as oe } from "lucide-react";
-const se = "_buttonGroup_ejhd6_1", ce = "_button_ejhd6_1", ae = "_label_ejhd6_37", le = "_single_ejhd6_42", ie = "_first_ejhd6_46", re = "_last_ejhd6_50", de = "_selected_ejhd6_54", B = {
-  buttonGroup: se,
-  button: ce,
-  label: ae,
-  single: le,
-  first: ie,
-  last: re,
-  selected: de
+import { useState as k, useEffect as $, useCallback as M, useRef as O } from "react";
+import { ClipboardCopy as Y, ChevronLeft as Z, ChevronRight as ee, ChevronDown as te, Sun as ne, Moon as oe, Computer as se } from "lucide-react";
+const ce = "_buttonGroup_ejhd6_1", ae = "_button_ejhd6_1", le = "_label_ejhd6_37", ie = "_single_ejhd6_42", re = "_first_ejhd6_46", de = "_last_ejhd6_50", he = "_selected_ejhd6_54", B = {
+  buttonGroup: ce,
+  button: ae,
+  label: le,
+  single: ie,
+  first: re,
+  last: de,
+  selected: he
 }, Jt = ({ buttons: n, className: o }) => /* @__PURE__ */ s("div", { className: m(B.buttonGroup, o), children: n.map((t, e) => {
   const a = n.length === 1, l = e === 0 && !a, c = e === n.length - 1 && !a;
   return /* @__PURE__ */ g(
@@ -33,35 +33,35 @@ const se = "_buttonGroup_ejhd6_1", ce = "_button_ejhd6_1", ae = "_label_ejhd6_37
     },
     e
   );
-}) }), he = (n, o, t, e) => [
+}) }), _e = (n, o, t, e) => [
   Math.min(255, Math.round(n + (255 - n) * e)),
   Math.min(255, Math.round(o + (255 - o) * e)),
   Math.min(255, Math.round(t + (255 - t) * e))
-], O = (n, o) => {
+], q = (n, o) => {
   if (o === 5 || n === "transparent" || n === "#ffffff" || n === "#1e1e1e")
     return n;
-  const [t, e, a] = q(n), l = (5 - o) * 0.2, [c, i, h] = he(t, e, a, l);
-  return _e(c, i, h);
-}, q = (n) => {
+  const [t, e, a] = E(n), l = (5 - o) * 0.2, [c, i, h] = _e(t, e, a, l);
+  return ue(c, i, h);
+}, E = (n) => {
   const o = n.replace("#", ""), t = parseInt(o, 16);
   return [t >> 16 & 255, t >> 8 & 255, t & 255];
-}, _e = (n, o, t) => "#" + [n, o, t].map((e) => {
+}, ue = (n, o, t) => "#" + [n, o, t].map((e) => {
   const a = e.toString(16);
   return a.length === 1 ? "0" + a : a;
-}).join(""), ue = (n) => {
+}).join(""), me = (n) => {
   if (n === "transparent")
     return "#000";
-  const [o, t, e] = q(n);
+  const [o, t, e] = E(n);
   return (o * 299 + t * 587 + e * 114) / 1e3 > 128 ? "#000" : "#fff";
-}, me = "_colorButton_wldf2_1", pe = "_hotkey_wldf2_22", ge = "_selected_wldf2_26", fe = "_disabled_wldf2_33", ye = "_transparent_wldf2_41", ke = "_small_wldf2_46", be = "_medium_wldf2_52", ve = "_large_wldf2_58", I = {
-  colorButton: me,
-  hotkey: pe,
-  selected: ge,
-  disabled: fe,
-  transparent: ye,
-  small: ke,
-  medium: be,
-  large: ve
+}, pe = "_colorButton_wldf2_1", ge = "_hotkey_wldf2_22", fe = "_selected_wldf2_26", ye = "_disabled_wldf2_33", ke = "_transparent_wldf2_41", be = "_small_wldf2_46", ve = "_medium_wldf2_52", Ce = "_large_wldf2_58", I = {
+  colorButton: pe,
+  hotkey: ge,
+  selected: fe,
+  disabled: ye,
+  transparent: ke,
+  small: be,
+  medium: ve,
+  large: Ce
 }, P = (n) => {
   const {
     className: o,
@@ -86,14 +86,14 @@ const se = "_buttonGroup_ejhd6_1", ce = "_button_ejhd6_1", ae = "_label_ejhd6_37
       style: { "--swatch-color": t },
       disabled: e,
       ...i,
-      children: /* @__PURE__ */ s("p", { className: I.hotkey, style: { color: ue(t) }, children: a })
+      children: /* @__PURE__ */ s("p", { className: I.hotkey, style: { color: me(t) }, children: a })
     }
   );
-}, we = "_content_1ybrq_1", Ce = "_section_1ybrq_11", Ne = "_title_1ybrq_17", S = {
-  content: we,
-  section: Ce,
-  title: Ne
-}, xe = [
+}, Ne = "_content_1ybrq_1", xe = "_section_1ybrq_11", we = "_title_1ybrq_17", S = {
+  content: Ne,
+  section: xe,
+  title: we
+}, Be = [
   {
     color: "transparent",
     hotkey: "q",
@@ -169,7 +169,7 @@ const se = "_buttonGroup_ejhd6_1", ce = "_button_ejhd6_1", ae = "_label_ejhd6_37
     hotkey: "b",
     name: "red"
   }
-], Be = ({
+], Se = ({
   colors: n,
   selectedColor: o,
   selectedShadeIndex: t
@@ -181,11 +181,11 @@ const se = "_buttonGroup_ejhd6_1", ce = "_button_ejhd6_1", ae = "_label_ejhd6_37
     index: o?.index ?? 0
   })), r = (_) => {
     const u = j(n, _);
-    console.log(u), c(u), h(Se(u, i));
+    console.log(u), c(u), h(Ie(u, i));
   }, d = (_, u = 999) => {
     h({ ...W(_, e), index: u });
   };
-  return K(() => {
+  return $(() => {
     r(e);
   }, [e, n, i.index]), {
     activeColor: i,
@@ -196,11 +196,11 @@ const se = "_buttonGroup_ejhd6_1", ce = "_button_ejhd6_1", ae = "_label_ejhd6_37
   };
 }, W = (n, o) => ({
   ...n,
-  color: O(n.color, o)
-}), j = (n, o) => n.map((t) => W(t, o)), Se = (n, o) => ({
+  color: q(n.color, o)
+}), j = (n, o) => n.map((t) => W(t, o)), Ie = (n, o) => ({
   ...n[o.index] ?? n[0],
   index: o.index ?? 0
-}), Ie = ({
+}), Te = ({
   onSelect: n,
   options: o,
   selectedId: t
@@ -208,7 +208,7 @@ const se = "_buttonGroup_ejhd6_1", ce = "_button_ejhd6_1", ae = "_label_ejhd6_37
   const [e, a] = k(!1), [l, c] = k(null), [i, h] = k(
     t && o.find((u) => u.value === t) || null
   );
-  K(() => {
+  $(() => {
     if (t) {
       const u = o.find((f) => f.value === t);
       h(u || null);
@@ -261,18 +261,9 @@ const se = "_buttonGroup_ejhd6_1", ce = "_button_ejhd6_1", ae = "_label_ejhd6_37
     selectedItem: i,
     setIsOpen: a
   };
-}, Te = (n) => {
-  K(() => {
-    const o = (t) => {
-      n.forEach((e) => e(t));
-    };
-    return window.addEventListener("keydown", o), () => {
-      window.removeEventListener("keydown", o);
-    };
-  }, [n]);
 }, Le = (n) => {
   const { palette: o, setActiveColorHandler: t, setActiveShade: e } = n;
-  Te([(c) => {
+  J([(c) => {
     if (c.shiftKey && c.code.startsWith("Digit")) {
       const i = parseInt(c.code.replace("Digit", ""), 10);
       i >= 1 && i <= 5 && e(i);
@@ -283,9 +274,9 @@ const se = "_buttonGroup_ejhd6_1", ce = "_button_ejhd6_1", ae = "_label_ejhd6_37
     ), r = o[h];
     h !== -1 && t(r, h);
   }]);
-}, Ke = "_iconButton_yk1r1_14", Re = "_primary_yk1r1_34", $e = "_secondary_yk1r1_46", ze = "_transparent_yk1r1_54", He = "_selected_yk1r1_65", Me = "_disabled_yk1r1_74", R = {
-  iconButton: Ke,
-  primary: Re,
+}, Re = "_iconButton_yk1r1_14", Ke = "_primary_yk1r1_34", $e = "_secondary_yk1r1_46", ze = "_transparent_yk1r1_54", He = "_selected_yk1r1_65", Me = "_disabled_yk1r1_74", R = {
+  iconButton: Re,
+  primary: Ke,
   secondary: $e,
   transparent: ze,
   selected: He,
@@ -314,17 +305,17 @@ const se = "_buttonGroup_ejhd6_1", ce = "_button_ejhd6_1", ae = "_label_ejhd6_37
       children: e
     }
   );
-}, Ae = "_hexInput_x3rtz_1", De = "_inputContainer_x3rtz_11", Ve = "_hash_x3rtz_18", Pe = "_input_x3rtz_11", je = "_error_x3rtz_39", Ee = "_copyButton_x3rtz_42", Fe = "_slot_x3rtz_48", Ge = "_copiedMessage_x3rtz_55", Oe = "_fadeInOut_x3rtz_1", w = {
+}, Ae = "_hexInput_x3rtz_1", De = "_inputContainer_x3rtz_11", Ve = "_hash_x3rtz_18", Pe = "_input_x3rtz_11", je = "_error_x3rtz_39", Fe = "_copyButton_x3rtz_42", Ge = "_slot_x3rtz_48", Oe = "_copiedMessage_x3rtz_55", qe = "_fadeInOut_x3rtz_1", C = {
   hexInput: Ae,
   inputContainer: De,
   hash: Ve,
   input: Pe,
   error: je,
-  copyButton: Ee,
-  slot: Fe,
-  copiedMessage: Ge,
-  fadeInOut: Oe
-}, qe = (n) => {
+  copyButton: Fe,
+  slot: Ge,
+  copiedMessage: Oe,
+  fadeInOut: qe
+}, Ee = (n) => {
   const {
     children: o,
     className: t,
@@ -335,7 +326,7 @@ const se = "_buttonGroup_ejhd6_1", ce = "_button_ejhd6_1", ae = "_label_ejhd6_37
   } = n, [i, h] = k(
     e.startsWith("#") ? e.slice(1) : e
   ), [r, d] = k(!1);
-  K(() => {
+  $(() => {
     h(e.startsWith("#") ? e.slice(1) : e);
   }, [e]);
   const _ = (b) => /^#([0-9A-F]{3}|[0-9A-F]{6})$/i.test("#" + b), u = (b) => {
@@ -345,24 +336,24 @@ const se = "_buttonGroup_ejhd6_1", ce = "_button_ejhd6_1", ae = "_label_ejhd6_37
     const b = "#" + i;
     navigator.clipboard.writeText(b), d(!0), setTimeout(() => d(!1), 1e3);
   };
-  return /* @__PURE__ */ g("div", { className: w.hexInput, children: [
+  return /* @__PURE__ */ g("div", { className: C.hexInput, children: [
     /* @__PURE__ */ s(
       T,
       {
-        icon: /* @__PURE__ */ s(X, {}),
+        icon: /* @__PURE__ */ s(Y, {}),
         onClick: f,
-        className: w.copyButton
+        className: C.copyButton
       }
     ),
-    /* @__PURE__ */ g("div", { className: w.inputContainer, children: [
-      /* @__PURE__ */ s("span", { className: w.hash, children: "#" }),
+    /* @__PURE__ */ g("div", { className: C.inputContainer, children: [
+      /* @__PURE__ */ s("span", { className: C.hash, children: "#" }),
       /* @__PURE__ */ s(
         "input",
         {
           ...c,
           className: m(
-            w.input,
-            _(i) ? "" : w.error,
+            C.input,
+            _(i) ? "" : C.error,
             t
           ),
           value: i,
@@ -372,8 +363,8 @@ const se = "_buttonGroup_ejhd6_1", ce = "_button_ejhd6_1", ae = "_label_ejhd6_37
         }
       )
     ] }),
-    r && /* @__PURE__ */ s("div", { className: w.copiedMessage, children: /* @__PURE__ */ s("span", { children: "Copied!" }) }),
-    o && /* @__PURE__ */ s("div", { className: w.slot, children: o })
+    r && /* @__PURE__ */ s("div", { className: C.copiedMessage, children: /* @__PURE__ */ s("span", { children: "Copied!" }) }),
+    o && /* @__PURE__ */ s("div", { className: C.slot, children: o })
   ] });
 }, We = "_colorsList_1brrj_1", Ue = {
   colorsList: We
@@ -391,7 +382,7 @@ const se = "_buttonGroup_ejhd6_1", ce = "_button_ejhd6_1", ae = "_label_ejhd6_37
     size: "large"
   },
   e.name
-)) }), Qe = "_shadowList_1srdv_1", Xe = "_shadowText_1srdv_6", E = {
+)) }), Qe = "_shadowList_1srdv_1", Xe = "_shadowText_1srdv_6", F = {
   shadowList: Qe,
   shadowText: Xe
 }, Ye = ({
@@ -403,10 +394,10 @@ const se = "_buttonGroup_ejhd6_1", ce = "_button_ejhd6_1", ae = "_label_ejhd6_37
   const a = [1, 2, 3, 4, 5], l = t[n.index];
   return ["#ffffff", "transparent", "#000000", "#1e1e1e"].includes(
     n?.color
-  ) || !t[n.index] ? /* @__PURE__ */ s("div", { className: E.shadowText, children: /* @__PURE__ */ s("p", { children: "No shades available for this color" }) }) : /* @__PURE__ */ s("div", { className: E.shadowList, children: a.map((c) => /* @__PURE__ */ s(
+  ) || !t[n.index] ? /* @__PURE__ */ s("div", { className: F.shadowText, children: /* @__PURE__ */ s("p", { children: "No shades available for this color" }) }) : /* @__PURE__ */ s("div", { className: F.shadowList, children: a.map((c) => /* @__PURE__ */ s(
     P,
     {
-      color: O(l.color, c),
+      color: q(l.color, c),
       hotkey: `⇧+${c}`,
       selected: o === c,
       onClick: () => e(c),
@@ -415,13 +406,13 @@ const se = "_buttonGroup_ejhd6_1", ce = "_button_ejhd6_1", ae = "_label_ejhd6_37
     c
   )) });
 }, Qt = (n) => {
-  const { changeColor: o, colors: t, selectedColor: e, selectedShadeIndex: a = 5 } = n, l = xe || t, {
+  const { changeColor: o, colors: t, selectedColor: e, selectedShadeIndex: a = 5 } = n, l = Be || t, {
     activeColor: c,
     activeShade: i,
     palette: h,
     setActiveColorHandler: r,
     setActiveShade: d
-  } = Be({ colors: l, selectedColor: e, selectedShadeIndex: a });
+  } = Se({ colors: l, selectedColor: e, selectedShadeIndex: a });
   return Le({
     palette: h,
     setActiveColorHandler: r,
@@ -457,7 +448,7 @@ const se = "_buttonGroup_ejhd6_1", ce = "_button_ejhd6_1", ae = "_label_ejhd6_37
       /* @__PURE__ */ g("div", { className: S.section, children: [
         /* @__PURE__ */ s("h3", { className: S.title, children: "Hex code" }),
         /* @__PURE__ */ s(
-          qe,
+          Ee,
           {
             color: c.color,
             onChange: (_) => {
@@ -468,7 +459,7 @@ const se = "_buttonGroup_ejhd6_1", ce = "_button_ejhd6_1", ae = "_label_ejhd6_37
       ] })
     ] })
   ] });
-}, Ze = "_pagination_3kmd4_1", et = "_pages_3kmd4_13", $ = {
+}, Ze = "_pagination_3kmd4_1", et = "_pages_3kmd4_13", K = {
   pagination: Ze,
   pages: et
 };
@@ -510,17 +501,17 @@ const Xt = (n) => {
   }, h = () => {
     t < l && e(t + 1);
   };
-  return /* @__PURE__ */ g("div", { className: $.pagination, children: [
+  return /* @__PURE__ */ g("div", { className: K.pagination, children: [
     /* @__PURE__ */ s(
       T,
       {
         onClick: i,
         disabled: t === 1,
-        icon: /* @__PURE__ */ s(Y, { size: 16 }),
+        icon: /* @__PURE__ */ s(Z, { size: 16 }),
         variants: "transparent"
       }
     ),
-    /* @__PURE__ */ s("div", { className: $.pages, children: c.map((r, d) => r === "..." ? /* @__PURE__ */ s("span", { className: $.ellipsis, children: "..." }, `ellipsis-${d}`) : /* @__PURE__ */ s(
+    /* @__PURE__ */ s("div", { className: K.pages, children: c.map((r, d) => r === "..." ? /* @__PURE__ */ s("span", { className: K.ellipsis, children: "..." }, `ellipsis-${d}`) : /* @__PURE__ */ s(
       T,
       {
         onClick: () => e(Number(r)),
@@ -534,8 +525,8 @@ const Xt = (n) => {
       {
         onClick: h,
         disabled: t === l,
-        className: $.nextButton,
-        icon: /* @__PURE__ */ s(Z, { size: 16 }),
+        className: K.nextButton,
+        icon: /* @__PURE__ */ s(ee, { size: 16 }),
         variants: "transparent"
       }
     )
@@ -570,21 +561,21 @@ const Xt = (n) => {
   title: h = "Select",
   value: r
 }) => {
-  const d = G(null), {
+  const d = O(null), {
     handleChange: _,
     handleKeyDown: u,
     handleOutsideClick: f,
     highlightedIndex: b,
     isOpen: y,
-    selectedItem: N,
+    selectedItem: x,
     setIsOpen: v
-  } = Ie({ onSelect: o, options: t, selectedId: a });
-  K(() => {
-    const x = (z) => {
+  } = Te({ onSelect: o, options: t, selectedId: a });
+  $(() => {
+    const w = (z) => {
       d.current && !d.current.contains(z.target) && f();
     };
-    return document.addEventListener("mousedown", x), () => {
-      document.removeEventListener("mousedown", x);
+    return document.addEventListener("mousedown", w), () => {
+      document.removeEventListener("mousedown", w);
     };
   }, [f]);
   const U = m(p.selectMenu, {
@@ -606,7 +597,7 @@ const Xt = (n) => {
       tabIndex: 0,
       children: [
         /* @__PURE__ */ g(
-          F,
+          G,
           {
             id: r,
             "aria-label": "Toggle select",
@@ -618,9 +609,9 @@ const Xt = (n) => {
             className: m(p.selectButton, i),
             fullWidth: n,
             children: [
-              /* @__PURE__ */ s("span", { children: N?.label || h }),
+              /* @__PURE__ */ s("span", { children: x?.label || h }),
               /* @__PURE__ */ s(
-                ee,
+                te,
                 {
                   size: 20,
                   className: m(p.selectIcon, {
@@ -631,49 +622,49 @@ const Xt = (n) => {
             ]
           }
         ),
-        y && /* @__PURE__ */ s("div", { "aria-label": "Select menu", className: U, children: /* @__PURE__ */ s("ul", { role: "menu", "aria-labelledby": r, "aria-orientation": "vertical", children: t?.map((x, z) => /* @__PURE__ */ g(
+        y && /* @__PURE__ */ s("div", { "aria-label": "Select menu", className: U, children: /* @__PURE__ */ s("ul", { role: "menu", "aria-labelledby": r, "aria-orientation": "vertical", children: t?.map((w, z) => /* @__PURE__ */ g(
           "li",
           {
-            onClick: () => _(x),
+            onClick: () => _(w),
             className: m(p.menuItem, p.menuItemHover, {
               [p.menuItemHighlighted]: b === z,
-              [p.menuItemSelected]: N?.value === x.value
+              [p.menuItemSelected]: x?.value === w.value
             }),
             children: [
               l,
-              /* @__PURE__ */ s("span", { children: x.label }),
+              /* @__PURE__ */ s("span", { children: w.label }),
               c
             ]
           },
-          x.value
+          w.value
         )) }) })
       ]
     }
   );
-}, kt = "_groupTitle_eelpn_23", bt = "_list_eelpn_30", vt = "_item_eelpn_35", wt = "_itemKeysVariants_eelpn_45", Ct = "_itemKeysSeparator_eelpn_50", Nt = "_itemDescription_eelpn_54", xt = "_itemKey_eelpn_45", C = {
+}, kt = "_groupTitle_eelpn_23", bt = "_list_eelpn_30", vt = "_item_eelpn_35", Ct = "_itemKeysVariants_eelpn_45", Nt = "_itemKeysSeparator_eelpn_50", xt = "_itemDescription_eelpn_54", wt = "_itemKey_eelpn_45", N = {
   groupTitle: kt,
   list: bt,
   item: vt,
-  itemKeysVariants: wt,
-  itemKeysSeparator: Ct,
-  itemDescription: Nt,
-  itemKey: xt
+  itemKeysVariants: Ct,
+  itemKeysSeparator: Nt,
+  itemDescription: xt,
+  itemKey: wt
 }, Bt = (n) => {
   const { children: o, className: t, title: e } = n;
-  return /* @__PURE__ */ g("div", { className: m(C.group, t), children: [
-    /* @__PURE__ */ s("h4", { className: C.groupTitle, children: e }),
+  return /* @__PURE__ */ g("div", { className: m(N.group, t), children: [
+    /* @__PURE__ */ s("h4", { className: N.groupTitle, children: e }),
     o
   ] });
 }, St = (n) => {
   const { children: o, className: t } = n;
-  return /* @__PURE__ */ s("div", { className: m(C.list, t), children: o });
+  return /* @__PURE__ */ s("div", { className: m(N.list, t), children: o });
 }, It = (n) => {
-  const { className: o, description: t, keysVariants: e } = n, a = (l) => l.map((c, i) => /* @__PURE__ */ s("span", { className: C.itemKey, children: c }, i));
-  return /* @__PURE__ */ g("div", { className: m(C.item, o), children: [
-    /* @__PURE__ */ s("div", { className: C.itemDescription, children: t }),
-    /* @__PURE__ */ s("div", { className: C.itemKeysVariants, children: e.map(
-      (l, c) => c === 0 ? a(l) : /* @__PURE__ */ g(Q, { children: [
-        /* @__PURE__ */ s("span", { className: C.itemKeysSeparator, children: "or" }),
+  const { className: o, description: t, keysVariants: e } = n, a = (l) => l.map((c, i) => /* @__PURE__ */ s("span", { className: N.itemKey, children: c }, i));
+  return /* @__PURE__ */ g("div", { className: m(N.item, o), children: [
+    /* @__PURE__ */ s("div", { className: N.itemDescription, children: t }),
+    /* @__PURE__ */ s("div", { className: N.itemKeysVariants, children: e.map(
+      (l, c) => c === 0 ? a(l) : /* @__PURE__ */ g(X, { children: [
+        /* @__PURE__ */ s("span", { className: N.itemKeysSeparator, children: "or" }),
         a(l)
       ] })
     ) })
@@ -683,11 +674,11 @@ const Xt = (n) => {
   slider: Tt,
   focused: Lt
 }, en = (n) => {
-  const { initialValue: o = 50, max: t = 100, min: e = 0, onChange: a, step: l = 1 } = n, [c, i] = k(o), [h, r] = k(!1), d = G(null), _ = (N) => {
-    const v = Number(N.target.value);
+  const { initialValue: o = 50, max: t = 100, min: e = 0, onChange: a, step: l = 1 } = n, [c, i] = k(o), [h, r] = k(!1), d = O(null), _ = (x) => {
+    const v = Number(x.target.value);
     i(v), a && a(v);
-  }, u = (N) => {
-    N.key === "ArrowRight" ? i((v) => Math.min(v + l, t)) : N.key === "ArrowLeft" && i((v) => Math.max(v - l, e));
+  }, u = (x) => {
+    x.key === "ArrowRight" ? i((v) => Math.min(v + l, t)) : x.key === "ArrowLeft" && i((v) => Math.max(v - l, e));
   }, f = () => r(!0), b = () => r(!1), y = (c - e) / (t - e) * 100;
   return /* @__PURE__ */ s("div", { className: m(A.container, h && A.focused), children: /* @__PURE__ */ s(
     "input",
@@ -711,16 +702,16 @@ const Xt = (n) => {
       }
     }
   ) });
-}, Kt = "_themeSwitcher_11ggx_18", Rt = "_themeButton_11ggx_27", $t = "_background_11ggx_31", zt = "_selectedButton_11ggx_42", D = {
-  themeSwitcher: Kt,
-  themeButton: Rt,
+}, Rt = "_themeSwitcher_11ggx_18", Kt = "_themeButton_11ggx_27", $t = "_background_11ggx_31", zt = "_selectedButton_11ggx_42", D = {
+  themeSwitcher: Rt,
+  themeButton: Kt,
   background: $t,
   selectedButton: zt
 }, tn = () => {
-  const { setTheme: n, theme: o } = J(), t = [
-    { icon: /* @__PURE__ */ s(te, {}), label: "Light", value: "light" },
-    { icon: /* @__PURE__ */ s(ne, {}), label: "Dark", value: "dark" },
-    { icon: /* @__PURE__ */ s(oe, {}), label: "System", value: "system" }
+  const { setTheme: n, theme: o } = Q(), t = [
+    { icon: /* @__PURE__ */ s(ne, {}), label: "Light", value: "light" },
+    { icon: /* @__PURE__ */ s(oe, {}), label: "Dark", value: "dark" },
+    { icon: /* @__PURE__ */ s(se, {}), label: "System", value: "system" }
   ];
   return /* @__PURE__ */ s("div", { className: D.themeSwitcher, children: t.map((e) => /* @__PURE__ */ s(
     T,
@@ -748,7 +739,7 @@ const Xt = (n) => {
     l(i);
   };
   return /* @__PURE__ */ s("div", { className: m(L.toggleSwitch), ...e, children: t.map(({ icon: i, leftSlot: h, rightSlot: r, value: d, ..._ }) => h || r ? /* @__PURE__ */ g(
-    F,
+    G,
     {
       variant: "text",
       className: m(
@@ -780,7 +771,7 @@ const Xt = (n) => {
   separator: Vt,
   vertical: Pt,
   horizontal: jt
-}, Et = (n) => {
+}, Ft = (n) => {
   const { children: o, className: t, direction: e = "horizontal" } = n;
   return /* @__PURE__ */ s(
     "div",
@@ -789,9 +780,9 @@ const Xt = (n) => {
       children: o
     }
   );
-}, Ft = ({}) => /* @__PURE__ */ s("div", { className: V.separator }), on = { Root: Et, Separator: Ft };
+}, Gt = ({}) => /* @__PURE__ */ s("div", { className: V.separator }), on = { Root: Ft, Separator: Gt };
 export {
-  F as Button,
+  G as Button,
   an as ButtonRender,
   Jt as ButtonsGroup,
   ln as Card,