@yourbestsoft/studio-screen-ui-kit 0.0.3 → 0.0.4

package/dist/index.js

@@ -1,18 +1,18 @@
-import { D as H, B as F } from "./ToolIconButton-CH5GeW9N.js";
-import { a as cn, d as an, b as ln, c as rn, C as dn, e as hn, f as _n, S as un, g as mn, T as pn, h as gn, i as fn, u as yn } from "./ToolIconButton-CH5GeW9N.js";
-import { jsx as s, jsxs as g, Fragment as J } from "react/jsx-runtime";
+import { D as H, B as F, u as J } from "./ToolIconButton-mUJN5Mev.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-mUJN5Mev.js";
+import { jsx as s, jsxs as g, Fragment as Q } 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 Q, ChevronLeft as X, ChevronRight as Y, ChevronDown as Z, Sun as ee, Moon as te, Computer as ne } from "lucide-react";
-const oe = "_buttonGroup_ejhd6_1", se = "_button_ejhd6_1", ce = "_label_ejhd6_37", ae = "_single_ejhd6_42", le = "_first_ejhd6_46", ie = "_last_ejhd6_50", re = "_selected_ejhd6_54", B = {
-  buttonGroup: oe,
-  button: se,
-  label: ce,
-  single: ae,
-  first: le,
-  last: ie,
-  selected: re
-}, Ut = ({ buttons: n, className: o }) => /* @__PURE__ */ s("div", { className: m(B.buttonGroup, o), children: n.map((t, e) => {
+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
+}, 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(
     "button",
@@ -33,35 +33,35 @@ const oe = "_buttonGroup_ejhd6_1", se = "_button_ejhd6_1", ce = "_label_ejhd6_37
     },
     e
   );
-}) }), de = (n, o, t, e) => [
+}) }), he = (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) => {
   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] = de(t, e, a, l);
-  return he(c, i, h);
+  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 o = n.replace("#", ""), t = parseInt(o, 16);
   return [t >> 16 & 255, t >> 8 & 255, t & 255];
-}, he = (n, o, t) => "#" + [n, o, t].map((e) => {
+}, _e = (n, o, t) => "#" + [n, o, t].map((e) => {
   const a = e.toString(16);
   return a.length === 1 ? "0" + a : a;
-}).join(""), _e = (n) => {
+}).join(""), ue = (n) => {
   if (n === "transparent")
     return "#000";
   const [o, t, e] = q(n);
   return (o * 299 + t * 587 + e * 114) / 1e3 > 128 ? "#000" : "#fff";
-}, ue = "_colorButton_wldf2_1", me = "_hotkey_wldf2_22", pe = "_selected_wldf2_26", ge = "_disabled_wldf2_33", fe = "_transparent_wldf2_41", ye = "_small_wldf2_46", ke = "_medium_wldf2_52", be = "_large_wldf2_58", I = {
-  colorButton: ue,
-  hotkey: me,
-  selected: pe,
-  disabled: ge,
-  transparent: fe,
-  small: ye,
-  medium: ke,
-  large: be
+}, 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
 }, P = (n) => {
   const {
     className: o,
@@ -86,14 +86,14 @@ const oe = "_buttonGroup_ejhd6_1", se = "_button_ejhd6_1", ce = "_label_ejhd6_37
       style: { "--swatch-color": t },
       disabled: e,
       ...i,
-      children: /* @__PURE__ */ s("p", { className: I.hotkey, style: { color: _e(t) }, children: a })
+      children: /* @__PURE__ */ s("p", { className: I.hotkey, style: { color: ue(t) }, children: a })
     }
   );
-}, ve = "_content_1ybrq_1", we = "_section_1ybrq_11", Ce = "_title_1ybrq_17", S = {
-  content: ve,
-  section: we,
-  title: Ce
-}, Ne = [
+}, we = "_content_1ybrq_1", Ce = "_section_1ybrq_11", Ne = "_title_1ybrq_17", S = {
+  content: we,
+  section: Ce,
+  title: Ne
+}, xe = [
   {
     color: "transparent",
     hotkey: "q",
@@ -169,7 +169,7 @@ const oe = "_buttonGroup_ejhd6_1", se = "_button_ejhd6_1", ce = "_label_ejhd6_37
     hotkey: "b",
     name: "red"
   }
-], xe = ({
+], Be = ({
   colors: n,
   selectedColor: o,
   selectedShadeIndex: t
@@ -181,7 +181,7 @@ const oe = "_buttonGroup_ejhd6_1", se = "_button_ejhd6_1", ce = "_label_ejhd6_37
     index: o?.index ?? 0
   })), r = (_) => {
     const u = j(n, _);
-    console.log(u), c(u), h(Be(u, i));
+    console.log(u), c(u), h(Se(u, i));
   }, d = (_, u = 999) => {
     h({ ...W(_, e), index: u });
   };
@@ -197,10 +197,10 @@ const oe = "_buttonGroup_ejhd6_1", se = "_button_ejhd6_1", ce = "_label_ejhd6_37
 }, W = (n, o) => ({
   ...n,
   color: O(n.color, o)
-}), j = (n, o) => n.map((t) => W(t, o)), Be = (n, o) => ({
+}), j = (n, o) => n.map((t) => W(t, o)), Se = (n, o) => ({
   ...n[o.index] ?? n[0],
   index: o.index ?? 0
-}), Se = ({
+}), Ie = ({
   onSelect: n,
   options: o,
   selectedId: t
@@ -261,7 +261,7 @@ const oe = "_buttonGroup_ejhd6_1", se = "_button_ejhd6_1", ce = "_label_ejhd6_37
     selectedItem: i,
     setIsOpen: a
   };
-}, Ie = (n) => {
+}, Te = (n) => {
   K(() => {
     const o = (t) => {
       n.forEach((e) => e(t));
@@ -270,9 +270,9 @@ const oe = "_buttonGroup_ejhd6_1", se = "_button_ejhd6_1", ce = "_label_ejhd6_37
       window.removeEventListener("keydown", o);
     };
   }, [n]);
-}, Te = (n) => {
+}, Le = (n) => {
   const { palette: o, setActiveColorHandler: t, setActiveShade: e } = n;
-  Ie([(c) => {
+  Te([(c) => {
     if (c.shiftKey && c.code.startsWith("Digit")) {
       const i = parseInt(c.code.replace("Digit", ""), 10);
       i >= 1 && i <= 5 && e(i);
@@ -283,13 +283,13 @@ const oe = "_buttonGroup_ejhd6_1", se = "_button_ejhd6_1", ce = "_label_ejhd6_37
     ), r = o[h];
     h !== -1 && t(r, h);
   }]);
-}, Le = "_iconButton_yk1r1_14", Ke = "_primary_yk1r1_34", Re = "_secondary_yk1r1_46", $e = "_transparent_yk1r1_54", ze = "_selected_yk1r1_65", He = "_disabled_yk1r1_74", R = {
-  iconButton: Le,
-  primary: Ke,
-  secondary: Re,
-  transparent: $e,
-  selected: ze,
-  disabled: He
+}, 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,
+  secondary: $e,
+  transparent: ze,
+  selected: He,
+  disabled: Me
 }, T = (n) => {
   const {
     className: o,
@@ -314,17 +314,17 @@ const oe = "_buttonGroup_ejhd6_1", se = "_button_ejhd6_1", ce = "_label_ejhd6_37
       children: e
     }
   );
-}, Me = "_hexInput_x3rtz_1", Ae = "_inputContainer_x3rtz_11", De = "_hash_x3rtz_18", Ve = "_input_x3rtz_11", Pe = "_error_x3rtz_39", je = "_copyButton_x3rtz_42", Ee = "_slot_x3rtz_48", Fe = "_copiedMessage_x3rtz_55", Ge = "_fadeInOut_x3rtz_1", w = {
-  hexInput: Me,
-  inputContainer: Ae,
-  hash: De,
-  input: Ve,
-  error: Pe,
-  copyButton: je,
-  slot: Ee,
-  copiedMessage: Fe,
-  fadeInOut: Ge
-}, Oe = (n) => {
+}, 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 = {
+  hexInput: Ae,
+  inputContainer: De,
+  hash: Ve,
+  input: Pe,
+  error: je,
+  copyButton: Ee,
+  slot: Fe,
+  copiedMessage: Ge,
+  fadeInOut: Oe
+}, qe = (n) => {
   const {
     children: o,
     className: t,
@@ -349,7 +349,7 @@ const oe = "_buttonGroup_ejhd6_1", se = "_button_ejhd6_1", ce = "_label_ejhd6_37
     /* @__PURE__ */ s(
       T,
       {
-        icon: /* @__PURE__ */ s(Q, {}),
+        icon: /* @__PURE__ */ s(X, {}),
         onClick: f,
         className: w.copyButton
       }
@@ -375,13 +375,13 @@ const oe = "_buttonGroup_ejhd6_1", se = "_button_ejhd6_1", ce = "_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 })
   ] });
-}, qe = "_colorsList_1brrj_1", We = {
-  colorsList: qe
-}, Ue = ({
+}, We = "_colorsList_1brrj_1", Ue = {
+  colorsList: We
+}, Je = ({
   activeColor: n,
   palette: o,
   setActiveColorHandler: t
-}) => /* @__PURE__ */ s("div", { className: We.colorsList, children: o.map((e, a) => /* @__PURE__ */ s(
+}) => /* @__PURE__ */ s("div", { className: Ue.colorsList, children: o.map((e, a) => /* @__PURE__ */ s(
   P,
   {
     color: e.color,
@@ -391,10 +391,10 @@ const oe = "_buttonGroup_ejhd6_1", se = "_button_ejhd6_1", ce = "_label_ejhd6_37
     size: "large"
   },
   e.name
-)) }), Je = "_shadowList_1srdv_1", Qe = "_shadowText_1srdv_6", E = {
-  shadowList: Je,
-  shadowText: Qe
-}, Xe = ({
+)) }), Qe = "_shadowList_1srdv_1", Xe = "_shadowText_1srdv_6", E = {
+  shadowList: Qe,
+  shadowText: Xe
+}, Ye = ({
   activeColor: n,
   activeShade: o,
   colors: t,
@@ -414,15 +414,15 @@ const oe = "_buttonGroup_ejhd6_1", se = "_button_ejhd6_1", ce = "_label_ejhd6_37
     },
     c
   )) });
-}, Jt = (n) => {
-  const { changeColor: o, colors: t, selectedColor: e, selectedShadeIndex: a = 5 } = n, l = Ne || t, {
+}, Qt = (n) => {
+  const { changeColor: o, colors: t, selectedColor: e, selectedShadeIndex: a = 5 } = n, l = xe || t, {
     activeColor: c,
     activeShade: i,
     palette: h,
     setActiveColorHandler: r,
     setActiveShade: d
-  } = xe({ colors: l, selectedColor: e, selectedShadeIndex: a });
-  return Te({
+  } = Be({ colors: l, selectedColor: e, selectedShadeIndex: a });
+  return Le({
     palette: h,
     setActiveColorHandler: r,
     setActiveShade: d
@@ -432,7 +432,7 @@ const oe = "_buttonGroup_ejhd6_1", se = "_button_ejhd6_1", ce = "_label_ejhd6_37
       /* @__PURE__ */ g("div", { className: S.section, children: [
         /* @__PURE__ */ s("h3", { className: S.title, children: "Colors" }),
         /* @__PURE__ */ s(
-          Ue,
+          Je,
           {
             palette: h,
             activeColor: c,
@@ -445,7 +445,7 @@ const oe = "_buttonGroup_ejhd6_1", se = "_button_ejhd6_1", ce = "_label_ejhd6_37
       /* @__PURE__ */ g("div", { className: S.section, children: [
         /* @__PURE__ */ s("h3", { className: S.title, children: "Shades" }),
         /* @__PURE__ */ s(
-          Xe,
+          Ye,
           {
             colors: l,
             activeShade: i,
@@ -457,7 +457,7 @@ const oe = "_buttonGroup_ejhd6_1", se = "_button_ejhd6_1", ce = "_label_ejhd6_37
       /* @__PURE__ */ g("div", { className: S.section, children: [
         /* @__PURE__ */ s("h3", { className: S.title, children: "Hex code" }),
         /* @__PURE__ */ s(
-          Oe,
+          qe,
           {
             color: c.color,
             onChange: (_) => {
@@ -468,11 +468,11 @@ const oe = "_buttonGroup_ejhd6_1", se = "_button_ejhd6_1", ce = "_label_ejhd6_37
       ] })
     ] })
   ] });
-}, Ye = "_pagination_3kmd4_1", Ze = "_pages_3kmd4_13", $ = {
-  pagination: Ye,
-  pages: Ze
+}, Ze = "_pagination_3kmd4_1", et = "_pages_3kmd4_13", $ = {
+  pagination: Ze,
+  pages: et
 };
-function et({
+function tt({
   boundaryCount: n,
   currentPage: o,
   siblingCount: t,
@@ -493,14 +493,14 @@ function et({
     l.push(d);
   return r < e - n && l.push("..."), l.push(...i), l;
 }
-const Qt = (n) => {
+const Xt = (n) => {
   const {
     boundaryCount: o = 2,
     currentPage: t,
     onPageChange: e,
     siblingCount: a = 1,
     totalPages: l
-  } = n, c = et({
+  } = n, c = tt({
     boundaryCount: o,
     currentPage: t,
     siblingCount: a,
@@ -516,7 +516,7 @@ const Qt = (n) => {
       {
         onClick: i,
         disabled: t === 1,
-        icon: /* @__PURE__ */ s(X, { size: 16 }),
+        icon: /* @__PURE__ */ s(Y, { size: 16 }),
         variants: "transparent"
       }
     ),
@@ -535,30 +535,30 @@ const Qt = (n) => {
         onClick: h,
         disabled: t === l,
         className: $.nextButton,
-        icon: /* @__PURE__ */ s(Y, { size: 16 }),
+        icon: /* @__PURE__ */ s(Z, { size: 16 }),
         variants: "transparent"
       }
     )
   ] });
-}, tt = "_selectContainer_1kdni_1", nt = "_selectButton_1kdni_5", ot = "_selectIcon_1kdni_10", st = "_selectIconOpen_1kdni_14", ct = "_selectMenu_1kdni_18", at = "_positionBottomRight_1kdni_44", lt = "_positionBottomLeft_1kdni_50", it = "_positionTopRight_1kdni_56", rt = "_positionTopLeft_1kdni_62", dt = "_positionRight_1kdni_68", ht = "_positionLeft_1kdni_74", _t = "_positionBottom_1kdni_44", ut = "_positionTop_1kdni_56", mt = "_menuItem_1kdni_92", pt = "_menuItemSelected_1kdni_102", gt = "_menuItemHover_1kdni_106", ft = "_menuItemHighlighted_1kdni_110", p = {
-  selectContainer: tt,
-  selectButton: nt,
-  selectIcon: ot,
-  selectIconOpen: st,
-  selectMenu: ct,
-  positionBottomRight: at,
-  positionBottomLeft: lt,
-  positionTopRight: it,
-  positionTopLeft: rt,
-  positionRight: dt,
-  positionLeft: ht,
-  positionBottom: _t,
-  positionTop: ut,
-  menuItem: mt,
-  menuItemSelected: pt,
-  menuItemHover: gt,
-  menuItemHighlighted: ft
-}, Xt = ({
+}, nt = "_selectContainer_1kdni_1", ot = "_selectButton_1kdni_5", st = "_selectIcon_1kdni_10", ct = "_selectIconOpen_1kdni_14", at = "_selectMenu_1kdni_18", lt = "_positionBottomRight_1kdni_44", it = "_positionBottomLeft_1kdni_50", rt = "_positionTopRight_1kdni_56", dt = "_positionTopLeft_1kdni_62", ht = "_positionRight_1kdni_68", _t = "_positionLeft_1kdni_74", ut = "_positionBottom_1kdni_44", mt = "_positionTop_1kdni_56", pt = "_menuItem_1kdni_92", gt = "_menuItemSelected_1kdni_102", ft = "_menuItemHover_1kdni_106", yt = "_menuItemHighlighted_1kdni_110", p = {
+  selectContainer: nt,
+  selectButton: ot,
+  selectIcon: st,
+  selectIconOpen: ct,
+  selectMenu: at,
+  positionBottomRight: lt,
+  positionBottomLeft: it,
+  positionTopRight: rt,
+  positionTopLeft: dt,
+  positionRight: ht,
+  positionLeft: _t,
+  positionBottom: ut,
+  positionTop: mt,
+  menuItem: pt,
+  menuItemSelected: gt,
+  menuItemHover: ft,
+  menuItemHighlighted: yt
+}, Yt = ({
   fullWidth: n = !0,
   onSelect: o,
   options: t,
@@ -578,7 +578,7 @@ const Qt = (n) => {
     isOpen: y,
     selectedItem: N,
     setIsOpen: v
-  } = Se({ onSelect: o, options: t, selectedId: a });
+  } = Ie({ onSelect: o, options: t, selectedId: a });
   K(() => {
     const x = (z) => {
       d.current && !d.current.contains(z.target) && f();
@@ -620,7 +620,7 @@ const Qt = (n) => {
             children: [
               /* @__PURE__ */ s("span", { children: N?.label || h }),
               /* @__PURE__ */ s(
-                Z,
+                ee,
                 {
                   size: 20,
                   className: m(p.selectIcon, {
@@ -650,39 +650,39 @@ const Qt = (n) => {
       ]
     }
   );
-}, yt = "_groupTitle_eelpn_23", kt = "_list_eelpn_30", bt = "_item_eelpn_35", vt = "_itemKeysVariants_eelpn_45", wt = "_itemKeysSeparator_eelpn_50", Ct = "_itemDescription_eelpn_54", Nt = "_itemKey_eelpn_45", C = {
-  groupTitle: yt,
-  list: kt,
-  item: bt,
-  itemKeysVariants: vt,
-  itemKeysSeparator: wt,
-  itemDescription: Ct,
-  itemKey: Nt
-}, xt = (n) => {
+}, 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 = {
+  groupTitle: kt,
+  list: bt,
+  item: vt,
+  itemKeysVariants: wt,
+  itemKeysSeparator: Ct,
+  itemDescription: Nt,
+  itemKey: xt
+}, 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 }),
     o
   ] });
-}, Bt = (n) => {
+}, St = (n) => {
   const { children: o, className: t } = n;
   return /* @__PURE__ */ s("div", { className: m(C.list, t), children: o });
-}, St = (n) => {
+}, 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(J, { children: [
+      (l, c) => c === 0 ? a(l) : /* @__PURE__ */ g(Q, { children: [
         /* @__PURE__ */ s("span", { className: C.itemKeysSeparator, children: "or" }),
         a(l)
       ] })
     ) })
   ] });
-}, Yt = { Group: xt, Item: St, List: Bt }, It = "_slider_1b9o2_1", Tt = "_focused_1b9o2_37", A = {
+}, Zt = { Group: Bt, Item: It, List: St }, Tt = "_slider_1b9o2_1", Lt = "_focused_1b9o2_37", A = {
   "slider-container": "_slider-container_1b9o2_1",
-  slider: It,
-  focused: Tt
-}, Zt = (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);
     i(v), a && a(v);
@@ -711,16 +711,16 @@ const Qt = (n) => {
       }
     }
   ) });
-}, Lt = "_themeSwitcher_11ggx_18", Kt = "_themeButton_11ggx_27", Rt = "_background_11ggx_31", $t = "_selectedButton_11ggx_42", D = {
-  themeSwitcher: Lt,
-  themeButton: Kt,
-  background: Rt,
-  selectedButton: $t
-}, en = ({ setTheme: n, theme: o }) => {
-  const t = [
-    { icon: /* @__PURE__ */ s(ee, {}), label: "Light", value: "light" },
-    { icon: /* @__PURE__ */ s(te, {}), label: "Dark", value: "dark" },
-    { icon: /* @__PURE__ */ s(ne, {}), label: "System", value: "system" }
+}, Kt = "_themeSwitcher_11ggx_18", Rt = "_themeButton_11ggx_27", $t = "_background_11ggx_31", zt = "_selectedButton_11ggx_42", D = {
+  themeSwitcher: Kt,
+  themeButton: Rt,
+  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" }
   ];
   return /* @__PURE__ */ s("div", { className: D.themeSwitcher, children: t.map((e) => /* @__PURE__ */ s(
     T,
@@ -737,11 +737,11 @@ const Qt = (n) => {
     },
     e.value
   )) });
-}, zt = "_toggleSwitch_1w0s9_14", Ht = "_button_1w0s9_24", Mt = "_selected_1w0s9_41", L = {
-  toggleSwitch: zt,
-  button: Ht,
-  selected: Mt
-}, tn = (n) => {
+}, Ht = "_toggleSwitch_1w0s9_14", Mt = "_button_1w0s9_24", At = "_selected_1w0s9_41", L = {
+  toggleSwitch: Ht,
+  button: Mt,
+  selected: At
+}, nn = (n) => {
   const { defaultValue: o, options: t, ...e } = n, [a, l] = k(
     o || t[0].value
   ), c = (i) => {
@@ -775,12 +775,12 @@ const Qt = (n) => {
       ..._
     }
   )) });
-}, At = "_toolbar_18q11_1", Dt = "_separator_18q11_11", Vt = "_vertical_18q11_16", Pt = "_horizontal_18q11_28", V = {
-  toolbar: At,
-  separator: Dt,
-  vertical: Vt,
-  horizontal: Pt
-}, jt = (n) => {
+}, Dt = "_toolbar_18q11_1", Vt = "_separator_18q11_11", Pt = "_vertical_18q11_16", jt = "_horizontal_18q11_28", V = {
+  toolbar: Dt,
+  separator: Vt,
+  vertical: Pt,
+  horizontal: jt
+}, Et = (n) => {
   const { children: o, className: t, direction: e = "horizontal" } = n;
   return /* @__PURE__ */ s(
     "div",
@@ -789,33 +789,33 @@ const Qt = (n) => {
       children: o
     }
   );
-}, Et = ({}) => /* @__PURE__ */ s("div", { className: V.separator }), nn = { Root: jt, Separator: Et };
+}, Ft = ({}) => /* @__PURE__ */ s("div", { className: V.separator }), on = { Root: Et, Separator: Ft };
 export {
   F as Button,
-  cn as ButtonRender,
-  Ut as ButtonsGroup,
-  an as Card,
-  ln as CardContent,
-  rn as CardHeader,
-  dn as CardRoot,
+  an as ButtonRender,
+  Jt as ButtonsGroup,
+  ln as Card,
+  rn as CardContent,
+  dn as CardHeader,
+  hn as CardRoot,
   P as ColorButton,
-  Jt as ColorPicker,
-  hn as Dialog,
+  Qt as ColorPicker,
+  _n as Dialog,
   H as DropDown,
   T as IconButton,
-  Qt as Pagination,
-  Xt as Select,
-  Yt as Shortcut,
-  _n as Sidebar,
-  un as SidebarContext,
-  Zt as Slider,
-  mn as SwitcherButtons,
-  pn as Table,
-  gn as TextField,
-  en as ThemeSwitcher,
-  tn as ToggleSwitch,
-  fn as ToolIconButton,
-  nn as Toolbar,
-  yn as useSidebarContext
+  Xt as Pagination,
+  Yt as Select,
+  Zt as Shortcut,
+  un as Sidebar,
+  mn as SidebarContext,
+  en as Slider,
+  pn as SwitcherButtons,
+  gn as Table,
+  fn as TextField,
+  tn as ThemeSwitcher,
+  nn as ToggleSwitch,
+  yn as ToolIconButton,
+  on as Toolbar,
+  kn as useSidebarContext
 };
 //# sourceMappingURL=index.js.map