@serendie/ui 2.1.1 → 2.1.2-dev.202508070336

package/dist/components/ChoiceBox/ChoiceBox.js

@@ -1,16 +1,14 @@
 import { jsxs as n, jsx as o, Fragment as k } from "react/jsx-runtime";
-import "../../styled-system/css/css.js";
-import { cx as d } from "../../styled-system/css/cx.js";
-import "../../styled-system/helpers.js";
-import { sva as I } from "../../styled-system/css/sva.js";
-import p from "../../assets/checkboxChecked.svg.js";
+import I from "../../assets/checkboxChecked.svg.js";
 import C from "../../assets/checkboxUnchecked.svg.js";
-import x from "../../assets/checkboxIndeterminate.svg.js";
-import l from "../../assets/radioChecked.svg.js";
-import b from "../../assets/radioUnchecked.svg.js";
-import { checkboxUncheckedIconCss as f, checkboxCheckedIconCss as u, checkboxIconCss as U } from "../CheckBox/CheckBox.js";
-import { radioUncheckedIconCss as g, radioCheckedIconCss as N, radioIconCss as R } from "../RadioButton/RadioButton.js";
+import p from "../../assets/checkboxIndeterminate.svg.js";
+import x from "../../assets/radioChecked.svg.js";
+import l from "../../assets/radioUnchecked.svg.js";
+import { checkboxUncheckedIconCss as b, checkboxCheckedIconCss as f, checkboxIconCss as u } from "../CheckBox/CheckBox.js";
+import { radioUncheckedIconCss as U, radioCheckedIconCss as g, radioIconCss as N } from "../RadioButton/RadioButton.js";
+import { sva as R } from "../../styled-system/css/sva.js";
 import { RadioGroupItem as v } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item.js";
+import { cx as d } from "../../styled-system/css/cx.js";
 import { RadioGroupItemContext as S } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-context.js";
 import { RadioGroupItemControl as G } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-control.js";
 import { RadioGroupItemHiddenInput as P } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-hidden-input.js";
@@ -18,7 +16,7 @@ import { CheckboxRoot as j } from "../../node_modules/@ark-ui/react/dist/compone
 import { CheckboxContext as y } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-context.js";
 import { CheckboxControl as B } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-control.js";
 import { CheckboxHiddenInput as H } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-hidden-input.js";
-const h = I({
+const h = R({
   slots: [
     "root",
     "radioItem",
@@ -32,14 +30,14 @@ const h = I({
     root: {
       display: "flex"
     },
-    radioItem: R,
-    radioCheckedIcon: N,
-    radioUncheckedIcon: g,
-    checkboxItem: U,
-    checkboxCheckedIcon: u,
-    checkboxUncheckedIcon: f
+    radioItem: N,
+    radioCheckedIcon: g,
+    radioUncheckedIcon: U,
+    checkboxItem: u,
+    checkboxCheckedIcon: f,
+    checkboxUncheckedIcon: b
   }
-}), $ = ({
+}), Z = ({
   type: r,
   value: t,
   className: i,
@@ -54,7 +52,7 @@ const h = I({
         className: d("group", e.root, i),
         ...a,
         children: [
-          /* @__PURE__ */ o(S, { children: (c) => /* @__PURE__ */ o(G, { className: e.radioItem, asChild: !0, children: c.checked ? /* @__PURE__ */ o(l, { className: e.radioCheckedIcon }) : /* @__PURE__ */ o(b, { className: e.radioUncheckedIcon }) }) }),
+          /* @__PURE__ */ o(S, { children: (c) => /* @__PURE__ */ o(G, { className: e.radioItem, asChild: !0, children: c.checked ? /* @__PURE__ */ o(x, { className: e.radioCheckedIcon }) : /* @__PURE__ */ o(l, { className: e.radioUncheckedIcon }) }) }),
           /* @__PURE__ */ o(P, {})
         ]
       }
@@ -67,8 +65,8 @@ const h = I({
         className: d("group", e.root, i),
         ...m,
         children: /* @__PURE__ */ o(y, { children: (c) => /* @__PURE__ */ n(k, { children: [
-          /* @__PURE__ */ o(B, { className: e.checkboxItem, children: c.checked === !0 ? /* @__PURE__ */ o(p, { className: e.checkboxCheckedIcon }) : c.indeterminate === !0 ? /* @__PURE__ */ o(
-            x,
+          /* @__PURE__ */ o(B, { className: e.checkboxItem, children: c.checked === !0 ? /* @__PURE__ */ o(I, { className: e.checkboxCheckedIcon }) : c.indeterminate === !0 ? /* @__PURE__ */ o(
+            p,
             {
               className: e.checkboxCheckedIcon
             }
@@ -84,6 +82,6 @@ const h = I({
     );
 };
 export {
-  $ as ChoiceBox,
+  Z as ChoiceBox,
   h as ChoiceBoxStyle
 };

package/dist/components/DashboardWidget/DashboardWidget.js

@@ -1,10 +1,8 @@
 import { jsxs as l, jsx as a } from "react/jsx-runtime";
 import { SerendieSymbolChevronRight as c } from "@serendie/symbols";
-import "../../styled-system/css/css.js";
-import { cx as y } from "../../styled-system/css/cx.js";
-import "../../styled-system/helpers.js";
-import { sva as u } from "../../styled-system/css/sva.js";
-const g = u({
+import { sva as y } from "../../styled-system/css/sva.js";
+import { cx as u } from "../../styled-system/css/cx.js";
+const g = y({
   slots: [
     "root",
     "labelContainer",
@@ -120,23 +118,23 @@ const g = u({
   defaultVariants: {
     values: "singleValue"
   }
-}), N = ({
-  values: t,
+}), f = ({
+  values: s,
   children: n,
   linkTo: i,
   className: o,
   ...d
 }) => {
   const e = g({
-    values: t === void 0 ? "noValue" : t.length === 1 ? "singleValue" : "doubleValue"
-  }), m = ({ label: s, value: r, unit: p }) => /* @__PURE__ */ l("div", { className: e.areaValue, children: [
-    /* @__PURE__ */ a("h3", { className: e.areaValueLabel, children: s }),
+    values: s === void 0 ? "noValue" : s.length === 1 ? "singleValue" : "doubleValue"
+  }), m = ({ label: t, value: r, unit: p }) => /* @__PURE__ */ l("div", { className: e.areaValue, children: [
+    /* @__PURE__ */ a("h3", { className: e.areaValueLabel, children: t }),
     /* @__PURE__ */ l("div", { className: e.areaValueContainer, children: [
       /* @__PURE__ */ a("p", { className: e.areaValueNumber, children: r }),
       /* @__PURE__ */ a("p", { className: e.areaValueNumberUnit, children: p })
     ] })
   ] });
-  return /* @__PURE__ */ l("div", { className: y(e.root, o), ...d, children: [
+  return /* @__PURE__ */ l("div", { className: u(e.root, o), ...d, children: [
     /* @__PURE__ */ l("a", { href: i, className: e.labelContainer, children: [
       /* @__PURE__ */ l("div", { className: e.label, children: [
         /* @__PURE__ */ a("h2", { className: e.labelTitle, children: "title" }),
@@ -145,11 +143,11 @@ const g = u({
       /* @__PURE__ */ a(c, {})
     ] }),
     /* @__PURE__ */ l("div", { className: e.area, children: [
-      t == null ? void 0 : t.map((s, r) => /* @__PURE__ */ a(m, { ...s }, r)),
+      s == null ? void 0 : s.map((t, r) => /* @__PURE__ */ a(m, { ...t }, r)),
       /* @__PURE__ */ a("div", { className: e.areaContainer, children: n })
     ] })
   ] });
 };
 export {
-  N as DashboardWidget
+  f as DashboardWidget
 };

package/dist/components/DataTable/table/BodyCell.js

@@ -1,7 +1,5 @@
 import { jsx as c } from "react/jsx-runtime";
-import "../../../styled-system/css/css.js";
 import { cva as i } from "../../../styled-system/css/cva.js";
-import "../../../styled-system/helpers.js";
 const a = i({
   base: {
     borderBottom: "1px solid",
@@ -102,7 +100,7 @@ const a = i({
     type: "default",
     state: "enabled"
   }
-}), l = ["default", "success", "notice", "error"], m = (o) => l.includes(o) ? o : "default", g = ({
+}), l = ["default", "success", "notice", "error"], m = (o) => l.includes(o) ? o : "default", y = ({
   children: o,
   size: t = "medium",
   type: r = "default",
@@ -123,5 +121,5 @@ const a = i({
   );
 };
 export {
-  g as BodyCell
+  y as BodyCell
 };

package/dist/components/DataTable/table/HeaderCell.js

@@ -1,9 +1,8 @@
 import { jsx as l, jsxs as c } from "react/jsx-runtime";
 import { SerendieSymbol as a } from "@serendie/symbols";
-import { css as p } from "../../../styled-system/css/css.js";
-import { cx as f } from "../../../styled-system/css/cx.js";
+import { cx as p } from "../../../styled-system/css/cx.js";
+import { css as f } from "../../../styled-system/css/css.js";
 import { cva as y } from "../../../styled-system/css/cva.js";
-import "../../../styled-system/helpers.js";
 const u = y({
   base: {
     borderBottom: "1px solid",
@@ -21,7 +20,7 @@ const u = y({
     whiteSpace: "nowrap"
   },
   defaultVariants: {}
-}), C = ({
+}), k = ({
   children: i,
   size: d = "medium",
   state: m = "enabled",
@@ -40,7 +39,7 @@ const u = y({
     onKeyDown: (s) => {
       e && (s.key === "Enter" || s.key === " ") && (s.preventDefault(), o == null || o());
     },
-    className: f(u({ size: d, state: m }), r),
+    className: p(u({ size: d, state: m }), r),
     style: {
       cursor: e ? "pointer" : "default",
       userSelect: "none"
@@ -49,7 +48,7 @@ const u = y({
     children: /* @__PURE__ */ c(
       "span",
       {
-        className: p({
+        className: f({
           display: "inline-flex",
           alignItems: "center",
           verticalAlign: "middle"
@@ -75,5 +74,5 @@ const u = y({
   }
 );
 export {
-  C as HeaderCell
+  k as HeaderCell
 };

package/dist/components/DataTable/table/HeaderCheckbox.js

@@ -1,17 +1,16 @@
 import { jsx as e } from "react/jsx-runtime";
 import { ChoiceBox as i } from "../../ChoiceBox/ChoiceBox.js";
 import { DataTable as a } from "../index.js";
-import { css as r } from "../../../styled-system/css/css.js";
-import { cx as o } from "../../../styled-system/css/cx.js";
-import "../../../styled-system/helpers.js";
-const x = ({
+import { cx as r } from "../../../styled-system/css/cx.js";
+import { css as o } from "../../../styled-system/css/css.js";
+const p = ({
   className: t,
   ...m
 }) => /* @__PURE__ */ e(
   a.HeaderCell,
   {
-    className: o(
-      r({
+    className: r(
+      o({
         width: "sd.system.dimension.spacing.twoExtraLarge"
       })
     ),
@@ -20,8 +19,8 @@ const x = ({
       {
         ...m,
         type: "checkbox",
-        className: o(
-          r({
+        className: r(
+          o({
             alignItems: "center",
             verticalAlign: "middle"
           }),
@@ -32,5 +31,5 @@ const x = ({
   }
 );
 export {
-  x as HeaderCheckbox
+  p as HeaderCheckbox
 };

package/dist/components/DataTable/table/HeaderRow.js

@@ -2,8 +2,7 @@ import { jsxs as m, jsx as r } from "react/jsx-runtime";
 import { flexRender as i } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
 import { DataTable as t } from "../index.js";
 import { css as a } from "../../../styled-system/css/css.js";
-import "../../../styled-system/helpers.js";
-function p({
+function f({
   headerGroup: l,
   enableRowSelection: n,
   table: o
@@ -36,5 +35,5 @@ function p({
   ] }, l.id);
 }
 export {
-  p as HeaderRow
+  f as HeaderRow
 };

package/dist/components/DataTable/table/Root.js

@@ -1,9 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
-import "../../../styled-system/css/css.js";
-import { cx as s } from "../../../styled-system/css/cx.js";
-import "../../../styled-system/helpers.js";
-import { sva as a } from "../../../styled-system/css/sva.js";
-const l = a({
+import { sva as s } from "../../../styled-system/css/sva.js";
+import { cx as a } from "../../../styled-system/css/cx.js";
+const l = s({
   slots: ["container", "table"],
   base: {
     container: {
@@ -27,7 +25,7 @@ function b({
   className: t
 }) {
   const o = l();
-  return /* @__PURE__ */ e("div", { className: s(o.container, t), children: /* @__PURE__ */ e("table", { role: "table", className: o.table, children: r }) });
+  return /* @__PURE__ */ e("div", { className: a(o.container, t), children: /* @__PURE__ */ e("table", { role: "table", className: o.table, children: r }) });
 }
 export {
   b as Root

package/dist/components/DataTable/table/Row.js

@@ -1,9 +1,7 @@
 import { jsxs as i, jsx as n } from "react/jsx-runtime";
 import { flexRender as l } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
 import { DataTable as o } from "../index.js";
-import "../../../styled-system/css/css.js";
 import { cva as m } from "../../../styled-system/css/cva.js";
-import "../../../styled-system/helpers.js";
 const c = m({
   base: {
     _hover: {
@@ -55,7 +53,7 @@ const c = m({
     }
   }
 });
-function v({
+function g({
   row: e,
   enableRowSelection: r
 }) {
@@ -86,5 +84,5 @@ function a(e) {
   return e.column.columnDef.meta && "getType" in e.column.columnDef.meta && typeof e.column.columnDef.meta.getType == "function" ? e.column.columnDef.meta.getType(e.row.original) : "default";
 }
 export {
-  v as Row
+  g as Row
 };

package/dist/components/DataTable/table/Tr.js

@@ -1,8 +1,7 @@
 import { jsx as i } from "react/jsx-runtime";
-import { css as m } from "../../../styled-system/css/css.js";
-import { cx as e } from "../../../styled-system/css/cx.js";
-import "../../../styled-system/helpers.js";
-function n({
+import { cx as m } from "../../../styled-system/css/cx.js";
+import { css as e } from "../../../styled-system/css/css.js";
+function f({
   children: r,
   className: o,
   ...t
@@ -11,8 +10,8 @@ function n({
     "tr",
     {
       role: "row",
-      className: e(
-        m({
+      className: m(
+        e({
           position: "relative"
         }),
         o
@@ -23,5 +22,5 @@ function n({
   );
 }
 export {
-  n as Tr
+  f as Tr
 };

package/dist/components/Divider/Divider.js

@@ -1,9 +1,7 @@
 import { jsx as d } from "react/jsx-runtime";
-import "../../styled-system/css/css.js";
-import { cx as n } from "../../styled-system/css/cx.js";
-import { cva as a } from "../../styled-system/css/cva.js";
-import "../../styled-system/helpers.js";
-const r = a({
+import { cva as n } from "../../styled-system/css/cva.js";
+import { cx as a } from "../../styled-system/css/cx.js";
+const r = n({
   base: {
     border: "none"
   },
@@ -39,11 +37,11 @@ const r = a({
     color: "normal",
     type: "horizontal"
   }
-}), b = (e) => {
+}), h = (e) => {
   const [o, t] = r.splitVariantProps(e), { className: s, ...i } = t;
-  return /* @__PURE__ */ d("hr", { className: n(r(o), s), ...i });
+  return /* @__PURE__ */ d("hr", { className: a(r(o), s), ...i });
 };
 export {
-  b as Divider,
+  h as Divider,
   r as DividerStyle
 };

package/dist/components/Drawer/Drawer.js

@@ -1,17 +1,15 @@
 import { jsx as e, jsxs as o } from "react/jsx-runtime";
 import { SerendieSymbolClose as p } from "@serendie/symbols";
-import "../../styled-system/css/css.js";
-import { cx as s } from "../../styled-system/css/cx.js";
-import "../../styled-system/helpers.js";
-import { sva as g } from "../../styled-system/css/sva.js";
-import { IconButton as f } from "../IconButton/IconButton.js";
-import { Portal as h } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
+import { IconButton as g } from "../IconButton/IconButton.js";
+import { Portal as f } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
+import { sva as h } from "../../styled-system/css/sva.js";
 import { DialogRoot as x } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-root.js";
 import { DialogBackdrop as y } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-backdrop.js";
+import { cx as s } from "../../styled-system/css/cx.js";
 import { DialogPositioner as u } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-positioner.js";
 import { DialogContent as b } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-content.js";
 import { DialogCloseTrigger as v } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-close-trigger.js";
-const r = g({
+const n = h({
   slots: ["backdrop", "content", "contentInner", "closeTrigger"],
   base: {
     backdrop: {
@@ -70,19 +68,19 @@ const r = g({
   defaultVariants: {
     type: "right"
   }
-}), E = ({
-  isOpen: n,
+}), W = ({
+  isOpen: r,
   children: i,
   contentClassName: a,
   backdropClassName: l,
   ...m
 }) => {
-  const [d, c] = r.splitVariantProps(m), t = r(d);
-  return /* @__PURE__ */ e(x, { open: n, ...c, children: /* @__PURE__ */ o(h, { children: [
+  const [d, c] = n.splitVariantProps(m), t = n(d);
+  return /* @__PURE__ */ e(x, { open: r, ...c, children: /* @__PURE__ */ o(f, { children: [
     /* @__PURE__ */ e(y, { className: s(t.backdrop, l) }),
     /* @__PURE__ */ e(u, { children: /* @__PURE__ */ o(b, { className: s(t.content, a), children: [
       /* @__PURE__ */ e("header", { className: t.closeTrigger, children: /* @__PURE__ */ e(v, { asChild: !0, children: /* @__PURE__ */ e(
-        f,
+        g,
         {
           icon: /* @__PURE__ */ e(p, {}),
           shape: "rectangle",
@@ -94,5 +92,5 @@ const r = g({
   ] }) });
 };
 export {
-  E as Drawer
+  W as Drawer
 };

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -1,5 +1,5 @@
 import { MenuRootProps } from '@ark-ui/react';
-export declare const DropdownMenuStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"content" | "button" | "item" | "itemGroup" | "itemIcon" | "buttonIcon", import('../../../styled-system/types').SlotRecipeVariantRecord<"content" | "button" | "item" | "itemGroup" | "itemIcon" | "buttonIcon">>;
+export declare const DropdownMenuStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"content" | "item" | "button" | "itemGroup" | "itemIcon" | "buttonIcon", import('../../../styled-system/types').SlotRecipeVariantRecord<"content" | "item" | "button" | "itemGroup" | "itemIcon" | "buttonIcon">>;
 export type MenuItemProps = {
     value: string;
     label: string;

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -1,18 +1,16 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { SerendieSymbolMenu as l, SerendieSymbolChevronDown as c } from "@serendie/symbols";
-import "../../styled-system/css/css.js";
-import "../../styled-system/helpers.js";
-import { sva as p } from "../../styled-system/css/sva.js";
-import { Button as y } from "../Button/Button.js";
-import { IconButton as u } from "../IconButton/IconButton.js";
-import { Portal as g } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
+import { Button as p } from "../Button/Button.js";
+import { IconButton as y } from "../IconButton/IconButton.js";
+import { Portal as u } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
+import { sva as g } from "../../styled-system/css/sva.js";
 import { MenuRoot as h } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-root.js";
 import { MenuTrigger as f } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-trigger.js";
 import { MenuPositioner as x } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-positioner.js";
 import { MenuContent as b } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-content.js";
 import { MenuItemGroup as S } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-item-group.js";
 import { MenuItem as v } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-item.js";
-const I = p({
+const I = g({
   slots: ["content", "itemGroup", "item", "itemIcon", "button", "buttonIcon"],
   base: {
     content: {
@@ -83,12 +81,12 @@ const I = p({
       transition: "transform 0.2s"
     }
   }
-}), Y = ({
+}), A = ({
   styleType: m = "default",
   title: s,
-  items: r,
+  items: d,
   disabled: n,
-  icon: d,
+  icon: r,
   ...a
 }) => {
   const o = I();
@@ -104,16 +102,16 @@ const I = p({
       ...a,
       children: [
         /* @__PURE__ */ e(f, { asChild: !0, children: m === "iconButton" ? /* @__PURE__ */ e(
-          u,
+          y,
           {
-            icon: d || /* @__PURE__ */ e(l, { className: o.buttonIcon }),
+            icon: r || /* @__PURE__ */ e(l, { className: o.buttonIcon }),
             shape: "rectangle",
             disabled: n,
             styleType: "outlined",
             title: s
           }
         ) : /* @__PURE__ */ e(
-          y,
+          p,
           {
             styleType: "rectangle",
             size: "medium",
@@ -123,7 +121,7 @@ const I = p({
             children: s
           }
         ) }),
-        /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(b, { className: o.content, children: /* @__PURE__ */ e(S, { className: o.itemGroup, children: r.map((t) => /* @__PURE__ */ i(
+        /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(b, { className: o.content, children: /* @__PURE__ */ e(S, { className: o.itemGroup, children: d.map((t) => /* @__PURE__ */ i(
           v,
           {
             value: t.value,
@@ -140,6 +138,6 @@ const I = p({
   );
 };
 export {
-  Y as DropdownMenu,
+  A as DropdownMenu,
   I as DropdownMenuStyle
 };

package/dist/components/IconButton/IconButton.d.ts

@@ -92,19 +92,19 @@ type CircleLargeProps = {
 export declare const IconButton: React.ForwardRefExoticComponent<(Omit<{
     shape?: "circle" | "rectangle" | undefined;
     styleType?: "filled" | "outlined" | "ghost" | undefined;
-    size?: "medium" | "small" | "large" | undefined;
+    size?: "small" | "large" | "medium" | undefined;
 } & React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     icon: React.ReactElement;
 } & RectangleProps, "ref"> | Omit<{
     shape?: "circle" | "rectangle" | undefined;
     styleType?: "filled" | "outlined" | "ghost" | undefined;
-    size?: "medium" | "small" | "large" | undefined;
+    size?: "small" | "large" | "medium" | undefined;
 } & React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     icon: React.ReactElement;
 } & CircleProps, "ref"> | Omit<{
     shape?: "circle" | "rectangle" | undefined;
     styleType?: "filled" | "outlined" | "ghost" | undefined;
-    size?: "medium" | "small" | "large" | undefined;
+    size?: "small" | "large" | "medium" | undefined;
 } & React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     icon: React.ReactElement;
 } & CircleLargeProps, "ref">) & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/IconButton/IconButton.js

@@ -1,10 +1,8 @@
 import { jsx as d } from "react/jsx-runtime";
 import a from "react";
-import "../../styled-system/css/css.js";
-import { cx as c } from "../../styled-system/css/cx.js";
-import { cva as m } from "../../styled-system/css/cva.js";
-import "../../styled-system/helpers.js";
-const e = m({
+import { cva as c } from "../../styled-system/css/cva.js";
+import { cx as m } from "../../styled-system/css/cx.js";
+const e = c({
   base: {
     position: "relative",
     display: "inline-flex",
@@ -105,13 +103,13 @@ const e = m({
     styleType: "filled",
     size: "medium"
   }
-}), b = a.forwardRef(
+}), g = a.forwardRef(
   ({ icon: o, className: s, ...r }, n) => {
     const [i, t] = e.splitVariantProps(r), l = e(i);
-    return /* @__PURE__ */ d("button", { ref: n, className: c(l, s), ...t, children: o });
+    return /* @__PURE__ */ d("button", { ref: n, className: m(l, s), ...t, children: o });
   }
 );
 export {
-  b as IconButton,
+  g as IconButton,
   e as IconButtonStyle
 };

package/dist/components/List/ListItem.js

@@ -1,10 +1,9 @@
 import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { css as c } from "../../styled-system/css/css.js";
+import { NotificationBadge as b } from "../NotificationBadge/NotificationBadge.js";
+import { sva as v } from "../../styled-system/css/sva.js";
 import { cx as o } from "../../styled-system/css/cx.js";
-import "../../styled-system/helpers.js";
-import { sva as b } from "../../styled-system/css/sva.js";
-import { NotificationBadge as v } from "../NotificationBadge/NotificationBadge.js";
-const p = b({
+import { css as c } from "../../styled-system/css/css.js";
+const p = v({
   slots: [
     "root",
     "wrapper",
@@ -127,7 +126,7 @@ const p = b({
       }
     }
   }
-}), k = ({
+}), L = ({
   leftIcon: a,
   rightIcon: r,
   title: m,
@@ -182,10 +181,10 @@ const p = b({
         ]
       }
     ),
-    l && /* @__PURE__ */ t("div", { className: e.badge, children: /* @__PURE__ */ t(v, { count: l, variant: "secondary" }) })
+    l && /* @__PURE__ */ t("div", { className: e.badge, children: /* @__PURE__ */ t(b, { count: l, variant: "secondary" }) })
   ] });
 };
 export {
-  k as ListItem,
+  L as ListItem,
   p as ListItemStyle
 };