@devup-ui/components 0.1.21 → 0.1.23

package/dist/components/Select/index.js

@@ -1,57 +1,57 @@
 "use client";
-import { jsx as a, jsxs as S, Fragment as B } from "react/jsx-runtime";
-import { useRef as R, useState as D, useEffect as z, createElement as L, Children as W } from "react";
-import { Box as k, VStack as H, Flex as C, css as v } from "@devup-ui/react";
+import { jsx as i, jsxs as C, Fragment as O } from "react/jsx-runtime";
+import { useRef as R, useState as w, useEffect as z, createElement as L, Children as W } from "react";
+import { Box as k, VStack as H, Flex as A, css as v } from "@devup-ui/react";
 import N from "clsx";
-import { SelectContext as T, useSelect as w } from "../../contexts/useSelect.js";
-import { Button as O } from "../Button/index.js";
-import { IconCheck as A } from "./IconCheck.js";
+import { SelectContext as T, useSelect as S } from "../../contexts/useSelect.js";
+import { Button as B } from "../Button/index.js";
+import { IconCheck as D } from "./IconCheck.js";
 function G({
-  type: i = "default",
-  children: o,
-  defaultValue: m,
-  value: d,
-  onChange: l,
-  defaultOpen: x,
-  open: f,
-  onOpenChange: c,
-  colors: e,
-  typography: u,
-  options: n,
-  ...h
+  type: n = "default",
+  children: s,
+  defaultValue: h,
+  value: o,
+  onChange: c,
+  defaultOpen: g,
+  open: p,
+  onOpenChange: f,
+  colors: t,
+  typography: d,
+  options: a,
+  ...m
 }) {
-  const r = R(null), [b, s] = D(x ?? !1), [p, g] = D(
-    m ?? (i === "checkbox" ? [] : "")
+  const r = R(null), [b, l] = w(g ?? !1), [u, x] = w(
+    h ?? (n === "checkbox" ? [] : "")
   );
   z(() => {
-    const t = (E) => {
-      r.current && r.current.contains(E.target) || s(!1);
+    const e = (E) => {
+      r.current && r.current.contains(E.target) || l(!1);
     };
-    return document.addEventListener("click", t), () => document.removeEventListener("click", t);
-  }, [b, s]);
-  const y = (t) => {
-    c == null || c(t), s(t);
-  }, F = (t) => {
-    if (l == null || l(t), i !== "default") {
-      if (i === "radio") {
-        g(t);
+    return document.addEventListener("click", e), () => document.removeEventListener("click", e);
+  }, [b, l]);
+  const y = (e) => {
+    f?.(e), l(e);
+  }, F = (e) => {
+    if (c?.(e), n !== "default") {
+      if (n === "radio") {
+        x(e);
         return;
       }
-      Array.isArray(p) && p.includes(t) ? g(p.filter((E) => E !== t)) : g([...p, t]);
+      Array.isArray(u) && u.includes(e) ? x(u.filter((E) => E !== e)) : x([...u, e]);
     }
   };
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ i(
     T.Provider,
     {
       value: {
-        open: f ?? b,
+        open: p ?? b,
         setOpen: y,
-        value: d ?? p,
+        value: o ?? u,
         setValue: F,
-        type: i,
+        type: n,
         ref: r
       },
-      children: /* @__PURE__ */ a(
+      children: /* @__PURE__ */ i(
         k,
         {
           ref: r,
@@ -64,89 +64,89 @@ function G({
           },
           styleOrder: 1,
           styleVars: {
-            primary: e == null ? void 0 : e.primary,
-            border: e == null ? void 0 : e.border,
-            inputBackground: e == null ? void 0 : e.inputBackground,
-            base10: e == null ? void 0 : e.base10,
-            title: e == null ? void 0 : e.title,
-            selectDisabled: e == null ? void 0 : e.selectDisabled,
-            primaryBg: e == null ? void 0 : e.primaryBg,
-            inputDisabledBackground: e == null ? void 0 : e.inputDisabledBackground,
-            inputDisabledText: e == null ? void 0 : e.inputDisabledText
+            primary: t?.primary,
+            border: t?.border,
+            inputBackground: t?.inputBackground,
+            base10: t?.base10,
+            title: t?.title,
+            selectDisabled: t?.selectDisabled,
+            primaryBg: t?.primaryBg,
+            inputDisabledBackground: t?.inputDisabledBackground,
+            inputDisabledText: t?.inputDisabledText
           },
-          typography: u,
-          ...h,
-          children: n ? /* @__PURE__ */ S(B, { children: [
-            /* @__PURE__ */ a($, { children: o }),
-            /* @__PURE__ */ a(j, { children: n == null ? void 0 : n.map((t) => /* @__PURE__ */ L(I, { ...t, key: "option-" + t.value }, t.label ?? t.value)) })
-          ] }) : o
+          typography: d,
+          ...m,
+          children: a ? /* @__PURE__ */ C(O, { children: [
+            /* @__PURE__ */ i($, { children: s }),
+            /* @__PURE__ */ i(j, { children: a?.map((e) => /* @__PURE__ */ L(I, { ...e, key: "option-" + e.value }, e.label ?? e.value)) })
+          ] }) : s
         }
       )
     }
   );
 }
 function $({
-  className: i,
-  children: o,
-  asChild: m,
-  ...d
+  className: n,
+  children: s,
+  asChild: h,
+  ...o
 }) {
-  const { open: l, setOpen: x } = w(), f = () => {
-    x(!l);
+  const { open: c, setOpen: g } = S(), p = () => {
+    g(!c);
   };
-  if (m) {
-    const c = W.only(o), e = c.type;
-    return /* @__PURE__ */ a(
-      e,
+  if (h) {
+    const f = W.only(s), t = f.type;
+    return /* @__PURE__ */ i(
+      t,
       {
-        "aria-expanded": l,
+        "aria-expanded": c,
         "aria-label": "Select toggle",
-        onClick: f,
-        ...c.props
+        onClick: p,
+        ...f.props
       }
     );
   }
-  return /* @__PURE__ */ a(
-    O,
+  return /* @__PURE__ */ i(
+    B,
     {
-      "aria-expanded": l,
+      "aria-expanded": c,
       "aria-label": "Select toggle",
       className: N(
         v({
           borderRadius: "8px",
           styleOrder: 2
         }),
-        i
+        n
       ),
-      onClick: f,
-      ...d,
-      children: o
+      onClick: p,
+      ...o,
+      children: s
     }
   );
 }
 function j({
-  children: i,
-  showConfirmButton: o,
-  confirmButtonText: m = "완료",
-  x: d = 0,
-  y: l = 0,
-  ...x
+  children: n,
+  showConfirmButton: s,
+  confirmButtonText: h = "완료",
+  x: o = 0,
+  y: c = 0,
+  ...g
 }) {
-  const { open: f, setOpen: c, type: e, ref: u } = w();
-  return f ? /* @__PURE__ */ S(
+  const { open: p, setOpen: f, type: t, ref: d } = S();
+  return p ? /* @__PURE__ */ C(
     H,
     {
-      ref: (n) => {
-        if (!u.current || !n) return;
-        const h = u.current, r = () => {
+      ref: (a) => {
+        if (!d.current || !a) return;
+        const m = d.current, r = () => {
           const {
             height: b,
-            x: s,
-            y: p,
-            top: g,
+            x: l,
+            y: u,
+            top: x,
             left: y
-          } = h.getBoundingClientRect(), F = n.offsetHeight + g + window.scrollY + b + l > document.documentElement.scrollHeight, t = n.offsetWidth + y + window.scrollX + d > document.documentElement.scrollWidth;
-          F ? n.style.bottom = `${window.innerHeight - p + 10}px` : n.style.top = `${p + b + 10 + l}px`, t ? n.style.left = `${Math.max(s - n.offsetWidth + h.offsetWidth, 0) + d}px` : n.style.left = `${s + d}px`;
+          } = m.getBoundingClientRect(), F = a.offsetHeight + x + window.scrollY + b + c > document.documentElement.scrollHeight, e = a.offsetWidth + y + window.scrollX + o > document.documentElement.scrollWidth;
+          F ? a.style.bottom = `${window.innerHeight - u + 10}px` : a.style.top = `${u + b + 10 + c}px`, e ? a.style.left = `${Math.max(l - a.offsetWidth + m.offsetWidth, 0) + o}px` : a.style.left = `${l + o}px`;
         };
         return r(), window.addEventListener("scroll", r, !0), window.addEventListener("resize", r), () => {
           window.removeEventListener("scroll", r, !0), window.removeEventListener("resize", r);
@@ -166,11 +166,11 @@ function j({
       styleOrder: 1,
       userSelect: "none",
       zIndex: 1,
-      ...x,
+      ...g,
       children: [
-        i,
-        o && e === "checkbox" && /* @__PURE__ */ a(C, { justifyContent: "end", w: "100%", children: /* @__PURE__ */ a(
-          O,
+        n,
+        s && t === "checkbox" && /* @__PURE__ */ i(A, { justifyContent: "end", w: "100%", children: /* @__PURE__ */ i(
+          B,
           {
             "aria-label": "Select confirm button",
             className: v({
@@ -183,9 +183,9 @@ function j({
               color: "#FFF",
               typography: "buttonS"
             }),
-            onClick: () => c(!1),
+            onClick: () => f(!1),
             variant: "primary",
-            children: m
+            children: h
           }
         ) })
       ]
@@ -193,64 +193,64 @@ function j({
   ) : null;
 }
 function I({
-  disabled: i,
-  onClick: o,
-  children: m,
-  value: d,
-  showCheck: l = !0,
-  ...x
+  disabled: n,
+  onClick: s,
+  children: h,
+  value: o,
+  showCheck: c = !0,
+  ...g
 }) {
-  const { setOpen: f, setValue: c, value: e, type: u } = w(), n = () => {
-    u !== "checkbox" && f(!1);
-  }, h = (s, p) => {
-    if (o) {
-      o(s, p);
+  const { setOpen: p, setValue: f, value: t, type: d } = S(), a = () => {
+    d !== "checkbox" && p(!1);
+  }, m = (l, u) => {
+    if (s) {
+      s(l, u);
       return;
     }
-    typeof s == "string" && c(s), n();
+    typeof l == "string" && f(l), a();
   }, r = {
     default: !1,
-    radio: e === d,
-    checkbox: Array.isArray(e) && d && e.includes(d)
-  }[u], b = !i && !(u === "radio" && r);
-  return /* @__PURE__ */ S(
-    C,
+    radio: t === o,
+    checkbox: Array.isArray(t) && o && t.includes(o)
+  }[d], b = !n && !(d === "radio" && r);
+  return /* @__PURE__ */ C(
+    A,
     {
       _hover: b && {
         bg: "var(--primaryBg, light-dark(#F4F3FA, #F4F3FA0D))"
       },
       alignItems: "center",
       borderRadius: "6px",
-      color: i ? "var(--selectDisabled, light-dark(#C4C5D1, #45464D))" : r ? "var(--primary, light-dark(#674DC7, #8163E1)" : "var(--title, light-dark(#1A1A1A,#FAFAFA))",
+      color: n ? "var(--selectDisabled, light-dark(#C4C5D1, #45464D))" : r ? "var(--primary, light-dark(#674DC7, #8163E1)" : "var(--title, light-dark(#1A1A1A,#FAFAFA))",
       cursor: b ? "pointer" : "default",
-      "data-value": d,
+      "data-value": o,
       fontWeight: r ? "700" : "400",
       gap: {
         checkbox: "10px",
         radio: "6px",
         default: "0"
-      }[u],
+      }[d],
       h: "40px",
-      onClick: i ? void 0 : (s) => h(d, s),
+      onClick: n ? void 0 : (l) => m(o, l),
       px: "10px",
       styleOrder: 1,
       transition: "background-color 0.1s ease-in-out",
-      ...x,
+      ...g,
       children: [
-        l && {
-          checkbox: /* @__PURE__ */ a(
+        c && {
+          checkbox: /* @__PURE__ */ i(
             k,
             {
-              bg: i ? "var(--inputDisabledBackground, light-dark(#F0F0F3, #414244))" : r ? "var(--primary, light-dark(#674DC7, #8163E1)" : "var(--border, light-dark(#E4E4E4, #434343))",
+              bg: n ? "var(--inputDisabledBackground, light-dark(#F0F0F3, #414244))" : r ? "var(--primary, light-dark(#674DC7, #8163E1)" : "var(--border, light-dark(#E4E4E4, #434343))",
               borderRadius: "4px",
               boxSize: "18px",
               pos: "relative",
               transition: "background-color 0.1s ease-in-out",
-              children: r && /* @__PURE__ */ a(
-                A,
+              children: r && /* @__PURE__ */ i(
+                D,
                 {
                   className: v({
-                    color: i ? "var(--inputDisabledText, light-dark(#E5E5E5, #373737))" : "#FFF",
+                    color: n ? "var(--inputDisabledText, light-dark(#E5E5E5, #373737))" : "#FFF",
                     position: "absolute",
                     top: "55%",
                     left: "50%",
@@ -260,15 +260,15 @@ function I({
               )
             }
           ),
-          radio: /* @__PURE__ */ a(B, { children: r && /* @__PURE__ */ a(
+          radio: /* @__PURE__ */ i(O, { children: r && /* @__PURE__ */ i(
             k,
             {
               borderRadius: "4px",
               boxSize: "18px",
               pos: "relative",
               transition: "background-color 0.1s ease-in-out",
-              children: /* @__PURE__ */ a(
-                A,
+              children: /* @__PURE__ */ i(
+                D,
                 {
                   className: v({
                     position: "absolute",
@@ -282,21 +282,21 @@ function I({
             }
           ) }),
           default: null
-        }[u],
-        m
+        }[d],
+        h
       ]
     }
   );
 }
-function J({ ...i }) {
-  return /* @__PURE__ */ a(
+function J({ ...n }) {
+  return /* @__PURE__ */ i(
     k,
     {
       bg: "var(--border, light-dark(#E4E4E4,#434343)",
       h: "1px",
       styleOrder: 1,
       w: "100%",
-      ...i
+      ...n
     }
   );
 }

package/dist/components/Toggle/index.cjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),p=require("@devup-ui/react"),l=require("react");function H({defaultValue:x=null,value:d=null,onChange:a,disabled:u,className:b,style:v,variant:h="default",colors:e,classNames:n,styles:g}){const[m,y]=l.useState(d??x??!1),r=d??m;function f(w){a==null||a(!w),y(B=>!B)}const i=h==="default";return t.jsxs(t.Fragment,{children:[t.jsx(p.Box,{"aria-disabled":u,bg:r?"var(--primary)":"var(--bg, light-dark(#E4E4E4, #383838))",borderRadius:"500px",boxSizing:"border-box",className:b,cursor:"pointer",h:i?"28px":"8px",justifyContent:r&&"flex-end",onClick:()=>!u&&f(r),p:i&&1,position:"relative",role:"group",selectors:{"&[aria-disabled=true]":{cursor:"not-allowed",bg:"var(--disabledBg, light-dark(#D6D7DE, #373737))"},"&:hover:not([aria-disabled=true]):not(:disabled)":{bg:r?"var(--primaryHoverBg, light-dark(color-mix(in srgb, var(--primary) 100%, #000 15%), color-mix(in srgb, var(--primary) 100%, #FFF 15%)))":"var(--hoverBg, light-dark(#C3C2C8, #696A6F))"}},style:v,styleVars:{primary:e==null?void 0:e.primary,bg:e==null?void 0:e.bg,primaryHoverBg:e==null?void 0:e.primaryHoverBg,hoverBg:e==null?void 0:e.hoverBg,disabledBg:e==null?void 0:e.disabledBg},"test-id":"toggle-wrapper",transition:".25s",w:i?"50px":"40px",children:t.jsx(p.Box,{_groupHover:!i&&{outline:"4px solid",outlineColor:"var(--switchHoverOutline, light-dark(color-mix(in srgb, var(--primary) 20%, transparent), color-mix(in srgb, var(--primary) 50%, transparent)))"},backgroundColor:"#fff",borderRadius:"100%",boxSize:"20px",className:n==null?void 0:n.toggle,filter:!i&&"drop-shadow(0px 0px 3px var(--switchShadow, rgba(0, 0, 0, 0.10)));",outline:"4px",pos:"absolute",style:g==null?void 0:g.toggle,styleVars:{primary:e==null?void 0:e.primary,primaryHoverBg:e==null?void 0:e.primaryHoverBg,switchShadow:e==null?void 0:e.switchShadow,switchHoverOutline:e==null?void 0:e.switchHoverOutline},top:!i&&"-6px",transform:r&&"translateX(calc(100% + 2px))",transition:".25s"})}),t.jsx(p.Input,{type:"hidden",value:String(r)})]})}exports.Toggle=H;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),t=require("@devup-ui/react"),y=require("react");function f({defaultValue:l=null,value:o=null,onChange:s,disabled:n,className:g,style:p,variant:d="default",colors:r,classNames:u,styles:x}){const[b,v]=y.useState(o??l??!1),e=o??b;function c(h){s?.(!h),v(m=>!m)}const a=d==="default";return i.jsxs(i.Fragment,{children:[i.jsx(t.Box,{"aria-disabled":n,bg:e?"var(--primary)":"var(--bg, light-dark(#E4E4E4, #383838))",borderRadius:"500px",boxSizing:"border-box",className:g,cursor:"pointer",h:a?"28px":"8px",justifyContent:e&&"flex-end",onClick:()=>!n&&c(e),p:a&&1,position:"relative",role:"group",selectors:{"&[aria-disabled=true]":{cursor:"not-allowed",bg:"var(--disabledBg, light-dark(#D6D7DE, #373737))"},"&:hover:not([aria-disabled=true]):not(:disabled)":{bg:e?"var(--primaryHoverBg, light-dark(color-mix(in srgb, var(--primary) 100%, #000 15%), color-mix(in srgb, var(--primary) 100%, #FFF 15%)))":"var(--hoverBg, light-dark(#C3C2C8, #696A6F))"}},style:p,styleVars:{primary:r?.primary,bg:r?.bg,primaryHoverBg:r?.primaryHoverBg,hoverBg:r?.hoverBg,disabledBg:r?.disabledBg},"test-id":"toggle-wrapper",transition:".25s",w:a?"50px":"40px",children:i.jsx(t.Box,{_groupHover:!a&&{outline:"4px solid",outlineColor:"var(--switchHoverOutline, light-dark(color-mix(in srgb, var(--primary) 20%, transparent), color-mix(in srgb, var(--primary) 50%, transparent)))"},backgroundColor:"#fff",borderRadius:"100%",boxSize:"20px",className:u?.toggle,filter:!a&&"drop-shadow(0px 0px 3px var(--switchShadow, rgba(0, 0, 0, 0.10)));",outline:"4px",pos:"absolute",style:x?.toggle,styleVars:{primary:r?.primary,primaryHoverBg:r?.primaryHoverBg,switchShadow:r?.switchShadow,switchHoverOutline:r?.switchHoverOutline},top:!a&&"-6px",transform:e&&"translateX(calc(100% + 2px))",transition:".25s"})}),i.jsx(t.Input,{type:"hidden",value:String(e)})]})}exports.Toggle=f;

package/dist/components/Toggle/index.js

@@ -1,40 +1,40 @@
 "use client";
-import { jsxs as H, Fragment as k, jsx as n } from "react/jsx-runtime";
-import { Box as u, Input as l } from "@devup-ui/react";
-import { useState as S } from "react";
-function E({
-  defaultValue: b = null,
-  value: d = null,
-  onChange: a,
-  disabled: g,
-  className: v,
-  style: x,
-  variant: m = "default",
-  colors: i,
-  classNames: e,
-  styles: p
+import { jsxs as c, Fragment as f, jsx as i } from "react/jsx-runtime";
+import { Box as n, Input as w } from "@devup-ui/react";
+import { useState as B } from "react";
+function S({
+  defaultValue: l = null,
+  value: t = null,
+  onChange: s,
+  disabled: o,
+  className: p,
+  style: g,
+  variant: d = "default",
+  colors: r,
+  classNames: u,
+  styles: m
 }) {
-  const [h, f] = S(
-    d ?? b ?? !1
-  ), r = d ?? h;
-  function y(w) {
-    a == null || a(!w), f((B) => !B);
+  const [b, v] = B(
+    t ?? l ?? !1
+  ), a = t ?? b;
+  function x(h) {
+    s?.(!h), v((y) => !y);
   }
-  const t = m === "default";
-  return /* @__PURE__ */ H(k, { children: [
-    /* @__PURE__ */ n(
-      u,
+  const e = d === "default";
+  return /* @__PURE__ */ c(f, { children: [
+    /* @__PURE__ */ i(
+      n,
       {
-        "aria-disabled": g,
-        bg: r ? "var(--primary)" : "var(--bg, light-dark(#E4E4E4, #383838))",
+        "aria-disabled": o,
+        bg: a ? "var(--primary)" : "var(--bg, light-dark(#E4E4E4, #383838))",
         borderRadius: "500px",
         boxSizing: "border-box",
-        className: v,
+        className: p,
         cursor: "pointer",
-        h: t ? "28px" : "8px",
-        justifyContent: r && "flex-end",
-        onClick: () => !g && y(r),
-        p: t && 1,
+        h: e ? "28px" : "8px",
+        justifyContent: a && "flex-end",
+        onClick: () => !o && x(a),
+        p: e && 1,
         position: "relative",
         role: "group",
         selectors: {
@@ -43,51 +43,51 @@ function E({
             bg: "var(--disabledBg, light-dark(#D6D7DE, #373737))"
           },
           "&:hover:not([aria-disabled=true]):not(:disabled)": {
-            bg: r ? "var(--primaryHoverBg, light-dark(color-mix(in srgb, var(--primary) 100%, #000 15%), color-mix(in srgb, var(--primary) 100%, #FFF 15%)))" : "var(--hoverBg, light-dark(#C3C2C8, #696A6F))"
+            bg: a ? "var(--primaryHoverBg, light-dark(color-mix(in srgb, var(--primary) 100%, #000 15%), color-mix(in srgb, var(--primary) 100%, #FFF 15%)))" : "var(--hoverBg, light-dark(#C3C2C8, #696A6F))"
           }
         },
-        style: x,
+        style: g,
         styleVars: {
-          primary: i == null ? void 0 : i.primary,
-          bg: i == null ? void 0 : i.bg,
-          primaryHoverBg: i == null ? void 0 : i.primaryHoverBg,
-          hoverBg: i == null ? void 0 : i.hoverBg,
-          disabledBg: i == null ? void 0 : i.disabledBg
+          primary: r?.primary,
+          bg: r?.bg,
+          primaryHoverBg: r?.primaryHoverBg,
+          hoverBg: r?.hoverBg,
+          disabledBg: r?.disabledBg
         },
         "test-id": "toggle-wrapper",
         transition: ".25s",
-        w: t ? "50px" : "40px",
-        children: /* @__PURE__ */ n(
-          u,
+        w: e ? "50px" : "40px",
+        children: /* @__PURE__ */ i(
+          n,
           {
-            _groupHover: !t && {
+            _groupHover: !e && {
               outline: "4px solid",
               outlineColor: "var(--switchHoverOutline, light-dark(color-mix(in srgb, var(--primary) 20%, transparent), color-mix(in srgb, var(--primary) 50%, transparent)))"
             },
             backgroundColor: "#fff",
             borderRadius: "100%",
             boxSize: "20px",
-            className: e == null ? void 0 : e.toggle,
-            filter: !t && "drop-shadow(0px 0px 3px var(--switchShadow, rgba(0, 0, 0, 0.10)));",
+            className: u?.toggle,
+            filter: !e && "drop-shadow(0px 0px 3px var(--switchShadow, rgba(0, 0, 0, 0.10)));",
             outline: "4px",
             pos: "absolute",
-            style: p == null ? void 0 : p.toggle,
+            style: m?.toggle,
             styleVars: {
-              primary: i == null ? void 0 : i.primary,
-              primaryHoverBg: i == null ? void 0 : i.primaryHoverBg,
-              switchShadow: i == null ? void 0 : i.switchShadow,
-              switchHoverOutline: i == null ? void 0 : i.switchHoverOutline
+              primary: r?.primary,
+              primaryHoverBg: r?.primaryHoverBg,
+              switchShadow: r?.switchShadow,
+              switchHoverOutline: r?.switchHoverOutline
             },
-            top: !t && "-6px",
-            transform: r && "translateX(calc(100% + 2px))",
+            top: !e && "-6px",
+            transform: a && "translateX(calc(100% + 2px))",
             transition: ".25s"
           }
         )
       }
     ),
-    /* @__PURE__ */ n(l, { type: "hidden", value: String(r) })
+    /* @__PURE__ */ i(w, { type: "hidden", value: String(a) })
   ] });
 }
 export {
-  E as Toggle
+  S as Toggle
 };

package/package.json

@@ -16,7 +16,7 @@
     "css-in-js-framework",
     "react"
   ],
-  "version": "0.1.21",
+  "version": "0.1.23",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -38,26 +38,26 @@
     "csstype": "^3.1.3",
     "react": "^19.1.1",
     "clsx": "^2.1",
-    "@devup-ui/react": "1.0.18"
+    "@devup-ui/react": "1.0.20"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^9.1.7",
-    "@storybook/addon-onboarding": "^9.1.7",
-    "@storybook/react-vite": "^9.1.7",
-    "@types/react": "^19.1.13",
-    "eslint-plugin-storybook": "^9.1.7",
+    "@storybook/addon-docs": "^9.1.10",
+    "@storybook/addon-onboarding": "^9.1.10",
+    "@storybook/react-vite": "^9.1.10",
+    "@types/react": "^19.1.16",
+    "eslint-plugin-storybook": "^9.1.10",
     "rollup-plugin-preserve-directives": "^0.4.0",
-    "storybook": "^9.1.7",
-    "typescript": "^5.9.2",
-    "vite": "^7.1.6",
+    "storybook": "^9.1.10",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.7",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^3.2.4",
-    "@devup-ui/vite-plugin": "1.0.41"
+    "@devup-ui/vite-plugin": "1.0.44"
   },
   "peerDependencies": {
     "csstype": "*",
     "react": "*",
-    "@devup-ui/react": "1.0.18"
+    "@devup-ui/react": "1.0.20"
   },
   "scripts": {
     "lint": "eslint",