@serendie/ui 3.2.0 → 3.2.1-dev.202604210459

package/dist/client.js

@@ -43,9 +43,9 @@ import { TextField as le } from "./components/TextField/TextField.js";
 import { Toast as he, ToastStyle as Se, toaster as Ce } from "./components/Toast/Toast.js";
 import { Tooltip as ue } from "./components/Tooltip/Tooltip.js";
 import { TopAppBar as ye } from "./components/TopAppBar/TopAppBar.js";
-import { LanguageProvider as Ie, SerendieProvider as Pe } from "./i18n/provider.js";
-import { DataTableComponent as be } from "./components/DataTable/DataTableComponent.js";
-import { parse as ve } from "./node_modules/@zag-js/date-picker/dist/index.js";
+import { DataTableComponent as Ie } from "./components/DataTable/DataTableComponent.js";
+import { LanguageProvider as De, SerendieProvider as be } from "./i18n/provider.js";
+import { parse as ve } from "./node_modules/@zag-js/date-picker/dist/date-picker.parse.js";
 export {
   C as Accordion,
   u as AccordionGroup,
@@ -67,7 +67,7 @@ export {
   s as ColorSchemeScript,
   po as DashboardWidget,
   xo as DataTable,
-  be as DataTableComponent,
+  Ie as DataTableComponent,
   so as DatePicker,
   co as Divider,
   lo as DividerStyle,
@@ -76,7 +76,7 @@ export {
   uo as DropdownMenuStyle,
   yo as IconButton,
   To as IconButtonStyle,
-  Ie as LanguageProvider,
+  De as LanguageProvider,
   Po as List,
   bo as ListItem,
   ko as ListItemStyle,
@@ -96,7 +96,7 @@ export {
   oe as SelectStyle,
   W as SerendieChartTheme,
   r as SerendiePreset,
-  Pe as SerendieProvider,
+  be as SerendieProvider,
   re as Switch,
   te as SwitchStyle,
   xe as TabItem,

package/dist/components/Accordion/Accordion.js

@@ -1,11 +1,8 @@
-import { jsxs as s, jsx as o } from "react/jsx-runtime";
-import { SerendieSymbolChevronDown as c } from "@serendie/symbols";
-import { sva as p } from "../../styled-system/css/sva.js";
-import { AccordionItem as l } from "../../node_modules/@ark-ui/react/dist/components/accordion/accordion-item.js";
-import { AccordionItemTrigger as y } from "../../node_modules/@ark-ui/react/dist/components/accordion/accordion-item-trigger.js";
-import { AccordionItemIndicator as g } from "../../node_modules/@ark-ui/react/dist/components/accordion/accordion-item-indicator.js";
-import { AccordionItemContent as f } from "../../node_modules/@ark-ui/react/dist/components/accordion/accordion-item-content.js";
-const i = p({
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { accordion_exports as s } from "../../node_modules/@ark-ui/react/dist/components/accordion/accordion.js";
+import { SerendieSymbolChevronDown as p } from "@serendie/symbols";
+import { sva as l } from "../../styled-system/css/sva.js";
+const n = l({
   slots: ["item", "title", "itemIndicator", "icon", "description"],
   base: {
     item: {
@@ -63,21 +60,21 @@ const i = p({
       }
     }
   }
-}), v = ({
-  title: t,
-  value: n,
-  description: r,
-  ...m
+}), u = ({
+  title: o,
+  value: r,
+  description: m,
+  ...d
 }) => {
-  const [d, a] = i.splitVariantProps(m), e = i(d);
-  return /* @__PURE__ */ s(l, { value: t || n, ...a, children: [
-    /* @__PURE__ */ s(y, { className: e.item, children: [
-      /* @__PURE__ */ o("span", { className: e.title, children: t }),
-      /* @__PURE__ */ o(g, { className: e.itemIndicator, children: /* @__PURE__ */ o(c, { className: e.icon }) })
+  const [a, c] = n.splitVariantProps(d), e = n(a);
+  return /* @__PURE__ */ i(s.Item, { value: o || r, ...c, children: [
+    /* @__PURE__ */ i(s.ItemTrigger, { className: e.item, children: [
+      /* @__PURE__ */ t("span", { className: e.title, children: o }),
+      /* @__PURE__ */ t(s.ItemIndicator, { className: e.itemIndicator, children: /* @__PURE__ */ t(p, { className: e.icon }) })
     ] }),
-    /* @__PURE__ */ o(f, { className: e.description, children: r })
-  ] }, t);
+    /* @__PURE__ */ t(s.ItemContent, { className: e.description, children: m })
+  ] }, o);
 };
 export {
-  v as Accordion
+  u as Accordion
 };

package/dist/components/Accordion/AccordionGroup.js

@@ -1,11 +1,11 @@
-import { styled as o } from "../../styled-system/jsx/factory.js";
-import { AccordionRoot as r } from "../../node_modules/@ark-ui/react/dist/components/accordion/accordion-root.js";
-const t = o(r, {
+import { accordion_exports as o } from "../../node_modules/@ark-ui/react/dist/components/accordion/accordion.js";
+import { styled as r } from "../../styled-system/jsx/factory.js";
+const e = r(o.Root, {
   base: {
     display: "flex",
     flexDirection: "column"
   }
 });
 export {
-  t as AccordionGroup
+  e as AccordionGroup
 };

package/dist/components/Avatar/Avatar.js

@@ -1,11 +1,9 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { SerendieSymbolUserCircle as p } from "@serendie/symbols";
-import { sva as g } from "../../styled-system/css/sva.js";
-import { AvatarRoot as C } from "../../node_modules/@ark-ui/react/dist/components/avatar/avatar-root.js";
-import { cx as u } from "../../styled-system/css/cx.js";
-import { AvatarImage as b } from "../../node_modules/@ark-ui/react/dist/components/avatar/avatar-image.js";
-import { AvatarFallback as y } from "../../node_modules/@ark-ui/react/dist/components/avatar/avatar-fallback.js";
-const c = g({
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { avatar_exports as i } from "../../node_modules/@ark-ui/react/dist/components/avatar/avatar.js";
+import { SerendieSymbolUserCircle as g } from "@serendie/symbols";
+import { cx as C } from "../../styled-system/css/cx.js";
+import { sva as u } from "../../styled-system/css/sva.js";
+const d = u({
   slots: ["root", "fallback", "image"],
   base: {
     root: {
@@ -62,18 +60,18 @@ const c = g({
   defaultVariants: {
     size: "medium"
   }
-}), L = ({
-  src: i,
-  alt: d,
-  text: r,
-  placeholder: n = "filled",
-  className: h,
-  ...m
+}), F = ({
+  src: r,
+  alt: n,
+  text: a,
+  placeholder: h = "filled",
+  className: m,
+  ...f
 }) => {
-  const [a, f] = c.splitVariantProps(m), { size: l } = a, t = c({ size: l, ...a }), o = l === "small" ? 24 : l === "large" ? 80 : 40;
-  return /* @__PURE__ */ e(C, { className: u(t.root, h), ...f, children: i ? /* @__PURE__ */ e(b, { className: t.image, src: i, alt: d }) : r ? /* @__PURE__ */ e(y, { className: t.fallback, children: r.slice(0, 2) }) : n === "outlined" ? /* @__PURE__ */ e(p, { width: o, height: o }) : /* @__PURE__ */ e(w, {}) });
-}, w = () => /* @__PURE__ */ s("svg", { viewBox: "0 0 80 80", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ s("g", { "clip-path": "url(#clip0_3661_24550)", children: [
+  const [o, p] = d.splitVariantProps(f), { size: l } = o, t = d({ size: l, ...o }), s = l === "small" ? 24 : l === "large" ? 80 : 40;
+  return /* @__PURE__ */ e(i.Root, { className: C(t.root, m), ...p, children: r ? /* @__PURE__ */ e(i.Image, { className: t.image, src: r, alt: n }) : a ? /* @__PURE__ */ e(i.Fallback, { className: t.fallback, children: a.slice(0, 2) }) : h === "outlined" ? /* @__PURE__ */ e(g, { width: s, height: s }) : /* @__PURE__ */ e(b, {}) });
+}, b = () => /* @__PURE__ */ c("svg", { viewBox: "0 0 80 80", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ c("g", { "clip-path": "url(#clip0_3661_24550)", children: [
     /* @__PURE__ */ e("rect", { width: "80", height: "80", rx: "40", fill: "#EFF2FC" }),
     /* @__PURE__ */ e(
       "g",
@@ -126,6 +124,6 @@ const c = g({
   /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ e("clipPath", { id: "clip0_3661_24550", children: /* @__PURE__ */ e("rect", { width: "80", height: "80", fill: "white" }) }) })
 ] });
 export {
-  L as Avatar,
-  c as AvatarStyle
+  F as Avatar,
+  d as AvatarStyle
 };

package/dist/components/Badge/Badge.js

@@ -1,7 +1,7 @@
 import { jsxs as i, jsx as r } from "react/jsx-runtime";
 import { SerendieSymbolClose as m } from "@serendie/symbols";
-import { cva as o } from "../../styled-system/css/cva.js";
 import { cx as y } from "../../styled-system/css/cx.js";
+import { cva as o } from "../../styled-system/css/cva.js";
 const l = o({
   base: {
     display: "inline-flex",

package/dist/components/Banner/Banner.js

@@ -1,8 +1,8 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import { SerendieSymbolAlertCircleFilled as p, SerendieSymbolAlertCircle as y } from "@serendie/symbols";
-import { sva as b } from "../../styled-system/css/sva.js";
-import { cx as g } from "../../styled-system/css/cx.js";
-const t = b({
+import { cx as b } from "../../styled-system/css/cx.js";
+import { sva as g } from "../../styled-system/css/sva.js";
+const t = g({
   slots: ["container", "icon", "title", "description"],
   base: {
     container: {
@@ -63,7 +63,7 @@ const t = b({
   }
 }), h = (n) => {
   const [s, { title: d, icon: r, description: a, className: m, ...c }] = t.splitVariantProps(n), o = t(s), i = s.type || "alert-circle";
-  return /* @__PURE__ */ l("div", { className: g(o.container, m), ...c, children: [
+  return /* @__PURE__ */ l("div", { className: b(o.container, m), ...c, children: [
     /* @__PURE__ */ e("div", { className: o.icon, children: r || (i === "error" || i === "warning" ? /* @__PURE__ */ e(p, {}) : /* @__PURE__ */ e(y, {})) }),
     /* @__PURE__ */ e("h2", { className: o.title, children: d }),
     /* @__PURE__ */ e("p", { className: o.description, children: a })

package/dist/components/BottomNavigation/BottomNavigationItem.js

@@ -1,8 +1,8 @@
 import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import { NotificationBadge as p } from "../NotificationBadge/NotificationBadge.js";
-import { sva as d } from "../../styled-system/css/sva.js";
-import { cx as y } from "../../styled-system/css/cx.js";
-const i = d({
+import { cx as d } from "../../styled-system/css/cx.js";
+import { sva as y } from "../../styled-system/css/sva.js";
+const i = y({
   slots: ["root", "iconGroup", "icon", "label", "badge"],
   base: {
     root: {
@@ -69,7 +69,7 @@ const i = d({
   ...c
 }) => {
   const [t, m] = i.splitVariantProps(c), o = i(t);
-  return /* @__PURE__ */ s("button", { className: y(o.root, n), ...m, children: [
+  return /* @__PURE__ */ s("button", { className: d(o.root, n), ...m, children: [
     /* @__PURE__ */ s("div", { className: o.iconGroup, children: [
       /* @__PURE__ */ e("div", { className: o.badge, children: /* @__PURE__ */ e(
         p,

package/dist/components/Button/Button.js

@@ -1,9 +1,9 @@
 import { jsxs as g, jsx as o } from "react/jsx-runtime";
 import b from "react";
 import { ProgressIndicatorIndeterminate as h } from "../ProgressIndicator/ProgressIndicatorIndeterminate.js";
-import { cva as f } from "../../styled-system/css/cva.js";
-import { css as x } from "../../styled-system/css/css.js";
-import { cx as _ } from "../../styled-system/css/cx.js";
+import { css as f } from "../../styled-system/css/css.js";
+import { cx as x } from "../../styled-system/css/cx.js";
+import { cva as _ } from "../../styled-system/css/cva.js";
 import { styled as v } from "../../styled-system/jsx/factory.js";
 const r = {
   color: "sd.system.color.component.onSurface",
@@ -24,7 +24,7 @@ const r = {
     color: "sd.system.color.interaction.disabledOnSurface",
     outline: "none"
   }
-}, l = f({
+}, l = _({
   base: {
     borderRadius: "sd.system.dimension.radius.full",
     position: "relative",
@@ -127,7 +127,7 @@ const r = {
     const [
       d,
       { children: m, leftIcon: e, rightIcon: s, isLoading: i, className: c, ...y }
-    ] = l.splitVariantProps(n), p = l(d), u = x(
+    ] = l.splitVariantProps(n), p = l(d), u = f(
       e || s ? n.size === "medium" ? {
         //アイコンがある側 `spacing.medium`、無い側は`spacing.extraLarge`
         paddingLeft: e ? "sd.system.dimension.spacing.medium" : "sd.system.dimension.spacing.extraLarge",
@@ -142,7 +142,7 @@ const r = {
       "button",
       {
         ref: a,
-        className: _(p, u, c),
+        className: x(p, u, c),
         ...y,
         children: [
           i && /* @__PURE__ */ o(

package/dist/components/CheckBox/CheckBox.js

@@ -1,16 +1,12 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { checkbox_exports as s } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox.js";
 import x from "../../assets/checkboxChecked.svg.js";
 import u from "../../assets/checkboxUnchecked.svg.js";
 import k from "../../assets/checkboxIndeterminate.svg.js";
-import { sva as b } from "../../styled-system/css/sva.js";
-import { cx as c } from "../../styled-system/css/cx.js";
-import { css as g } from "../../styled-system/css/css.js";
-import { CheckboxRoot as f } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-root.js";
-import { CheckboxContext as C } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-context.js";
-import { CheckboxControl as S } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-control.js";
-import { CheckboxLabel as i } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-label.js";
-import { CheckboxHiddenInput as I } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-hidden-input.js";
-const v = {
+import { cx as i } from "../../styled-system/css/cx.js";
+import { css as b } from "../../styled-system/css/css.js";
+import { sva as g } from "../../styled-system/css/sva.js";
+const f = {
   flexShrink: 0,
   cursor: "pointer",
   ".group:has(:focus-visible) &": {
@@ -30,21 +26,21 @@ const v = {
       }
     }
   }
-}, _ = {
+}, C = {
   width: 24,
   height: 24,
   color: "sd.system.color.impression.primary",
   "& .checkmark": {
     color: "sd.system.color.impression.onPrimaryContainer"
   }
-}, N = {
+}, S = {
   width: 24,
   height: 24,
   color: "sd.system.color.component.outlineDim",
   _disabled: {
     color: "color-mix(in srgb, {colors.sd.system.color.component.outlineDim}, {colors.sd.system.color.interaction.hoveredOnPrimary});"
   }
-}, n = b({
+}, n = g({
   slots: [
     "root",
     "itemControl",
@@ -64,9 +60,9 @@ const v = {
       cursor: "pointer",
       position: "relative"
     },
-    itemControl: v,
-    checkedIcon: _,
-    uncheckedIcon: N,
+    itemControl: f,
+    checkedIcon: C,
+    uncheckedIcon: S,
     itemTextGroup: {
       display: "flex",
       flexFlow: "column"
@@ -93,38 +89,38 @@ const v = {
       }
     }
   }
-}), F = ({
+}), G = ({
   value: m,
   label: l,
-  helperText: s,
+  helperText: t,
   className: d,
   ...a
 }) => {
-  const [p, y] = n.splitVariantProps(a), o = n(p), h = c(
+  const [p, y] = n.splitVariantProps(a), o = n(p), h = i(
     o.root,
-    s && g({ alignItems: "flex-start" })
+    t && b({ alignItems: "flex-start" })
   );
-  return /* @__PURE__ */ t(
-    f,
+  return /* @__PURE__ */ c(
+    s.Root,
     {
       value: m,
-      className: c("group", h, d),
+      className: i("group", h, d),
       ...y,
       children: [
-        /* @__PURE__ */ e(C, { children: (r) => /* @__PURE__ */ e(S, { className: o.itemControl, children: r.checked === !0 ? /* @__PURE__ */ e(x, { className: o.checkedIcon }) : r.indeterminate === !0 ? /* @__PURE__ */ e(k, { className: o.checkedIcon }) : /* @__PURE__ */ e(u, { className: o.uncheckedIcon }) }) }),
-        /* @__PURE__ */ t("div", { className: o.itemTextGroup, children: [
-          /* @__PURE__ */ e(i, { className: o.itemText, children: l }),
-          s && /* @__PURE__ */ e(i, { className: o.helperText, children: s })
+        /* @__PURE__ */ e(s.Context, { children: (r) => /* @__PURE__ */ e(s.Control, { className: o.itemControl, children: r.checked === !0 ? /* @__PURE__ */ e(x, { className: o.checkedIcon }) : r.indeterminate === !0 ? /* @__PURE__ */ e(k, { className: o.checkedIcon }) : /* @__PURE__ */ e(u, { className: o.uncheckedIcon }) }) }),
+        /* @__PURE__ */ c("div", { className: o.itemTextGroup, children: [
+          /* @__PURE__ */ e(s.Label, { className: o.itemText, children: l }),
+          t && /* @__PURE__ */ e(s.Label, { className: o.helperText, children: t })
         ] }),
-        /* @__PURE__ */ e(I, {})
+        /* @__PURE__ */ e(s.HiddenInput, {})
       ]
     }
   );
 };
 export {
-  F as CheckBox,
+  G as CheckBox,
   n as CheckBoxStyle,
-  _ as checkboxCheckedIconCss,
-  v as checkboxIconCss,
-  N as checkboxUncheckedIconCss
+  C as checkboxCheckedIconCss,
+  f as checkboxIconCss,
+  S as checkboxUncheckedIconCss
 };

package/dist/components/ChoiceBox/ChoiceBox.js

@@ -1,22 +1,16 @@
-import { jsxs as n, jsx as o, Fragment as k } from "react/jsx-runtime";
-import I from "../../assets/checkboxChecked.svg.js";
-import C from "../../assets/checkboxUnchecked.svg.js";
+import { jsxs as s, jsx as e, Fragment as x } from "react/jsx-runtime";
+import { checkbox_exports as r } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox.js";
+import { radio_group_exports as n } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group.js";
+import C from "../../assets/checkboxChecked.svg.js";
+import l from "../../assets/checkboxUnchecked.svg.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";
-import { CheckboxRoot as j } from "../../node_modules/@ark-ui/react/dist/components/checkbox/checkbox-root.js";
-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 = R({
+import b from "../../assets/radioChecked.svg.js";
+import f from "../../assets/radioUnchecked.svg.js";
+import { checkboxUncheckedIconCss as U, checkboxCheckedIconCss as g, checkboxIconCss as u } from "../CheckBox/CheckBox.js";
+import { radioUncheckedIconCss as N, radioCheckedIconCss as v, radioIconCss as S } from "../RadioButton/RadioButton.js";
+import { cx as m } from "../../styled-system/css/cx.js";
+import { sva as P } from "../../styled-system/css/sva.js";
+const a = P({
   slots: [
     "root",
     "radioItem",
@@ -30,58 +24,58 @@ const h = R({
     root: {
       display: "flex"
     },
-    radioItem: N,
-    radioCheckedIcon: g,
-    radioUncheckedIcon: U,
+    radioItem: S,
+    radioCheckedIcon: v,
+    radioUncheckedIcon: N,
     checkboxItem: u,
-    checkboxCheckedIcon: f,
-    checkboxUncheckedIcon: b
+    checkboxCheckedIcon: g,
+    checkboxUncheckedIcon: U
   }
-}), Z = ({
-  type: r,
-  value: t,
-  className: i,
-  ...m
+}), D = ({
+  type: t,
+  value: d,
+  className: h,
+  ...i
 }) => {
-  const [s, a] = h.splitVariantProps(m), e = h(s);
-  if (r === "radio")
-    return /* @__PURE__ */ n(
-      v,
+  const [k, I] = a.splitVariantProps(i), o = a(k);
+  if (t === "radio")
+    return /* @__PURE__ */ s(
+      n.Item,
       {
-        value: t,
-        className: d("group", e.root, i),
-        ...a,
+        value: d,
+        className: m("group", o.root, h),
+        ...I,
         children: [
-          /* @__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, {})
+          /* @__PURE__ */ e(n.ItemContext, { children: (c) => /* @__PURE__ */ e(n.ItemControl, { className: o.radioItem, asChild: !0, children: c.checked ? /* @__PURE__ */ e(b, { className: o.radioCheckedIcon }) : /* @__PURE__ */ e(f, { className: o.radioUncheckedIcon }) }) }),
+          /* @__PURE__ */ e(n.ItemHiddenInput, {})
         ]
       }
     );
-  if (r === "checkbox")
-    return /* @__PURE__ */ o(
-      j,
+  if (t === "checkbox")
+    return /* @__PURE__ */ e(
+      r.Root,
       {
-        value: t,
-        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(I, { className: e.checkboxCheckedIcon }) : c.indeterminate === !0 ? /* @__PURE__ */ o(
+        value: d,
+        className: m("group", o.root, h),
+        ...i,
+        children: /* @__PURE__ */ e(r.Context, { children: (c) => /* @__PURE__ */ s(x, { children: [
+          /* @__PURE__ */ e(r.Control, { className: o.checkboxItem, children: c.checked === !0 ? /* @__PURE__ */ e(C, { className: o.checkboxCheckedIcon }) : c.indeterminate === !0 ? /* @__PURE__ */ e(
             p,
             {
-              className: e.checkboxCheckedIcon
+              className: o.checkboxCheckedIcon
             }
-          ) : /* @__PURE__ */ o(
-            C,
+          ) : /* @__PURE__ */ e(
+            l,
             {
-              className: e.checkboxUncheckedIcon
+              className: o.checkboxUncheckedIcon
             }
           ) }),
-          /* @__PURE__ */ o(H, {})
+          /* @__PURE__ */ e(r.HiddenInput, {})
         ] }) })
       }
     );
 };
 export {
-  Z as ChoiceBox,
-  h as ChoiceBoxStyle
+  D as ChoiceBox,
+  a as ChoiceBoxStyle
 };

package/dist/components/DashboardWidget/DashboardWidget.js

@@ -1,8 +1,8 @@
 import { jsxs as l, jsx as a } from "react/jsx-runtime";
 import { SerendieSymbolChevronRight as c } from "@serendie/symbols";
-import { sva as y } from "../../styled-system/css/sva.js";
-import { cx as u } from "../../styled-system/css/cx.js";
-const g = y({
+import { cx as y } from "../../styled-system/css/cx.js";
+import { sva as u } from "../../styled-system/css/sva.js";
+const g = u({
   slots: [
     "root",
     "labelContainer",
@@ -134,7 +134,7 @@ const g = y({
       /* @__PURE__ */ a("p", { className: e.areaValueNumberUnit, children: p })
     ] })
   ] });
-  return /* @__PURE__ */ l("div", { className: u(e.root, o), ...d, children: [
+  return /* @__PURE__ */ l("div", { className: y(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" }),

package/dist/components/DataTable/DataTableComponent.js

@@ -2,43 +2,43 @@ import { jsxs as M, jsx as l } from "react/jsx-runtime";
 import { useReactTable as T } from "../../node_modules/@tanstack/react-table/build/lib/index.js";
 import { useState as w } from "react";
 import { DataTable as r } from "./index.js";
-import { getSortedRowModel as u, getCoreRowModel as S } from "../../node_modules/@tanstack/table-core/build/lib/index.js";
-function g({
+import { getSortedRowModel as S, getCoreRowModel as u } from "../../node_modules/@tanstack/table-core/build/lib/index.js";
+function y({
   className: s,
   enableRowSelection: m = !0,
-  onRowSelectionChange: t,
-  onSortingChange: d,
+  onRowSelectionChange: i,
+  onSortingChange: t,
   state: e,
-  ...f
+  ...R
 }) {
-  const [R, b] = w({}), [p, n] = w([]), i = T({
-    getCoreRowModel: S(),
-    getSortedRowModel: u(),
+  const [b, f] = w({}), [p, n] = w([]), d = T({
+    getCoreRowModel: u(),
+    getSortedRowModel: S(),
     enableRowSelection: m,
-    ...f,
+    ...R,
     state: {
-      rowSelection: (e == null ? void 0 : e.rowSelection) ?? R,
+      rowSelection: (e == null ? void 0 : e.rowSelection) ?? b,
       sorting: (e == null ? void 0 : e.sorting) ?? p,
       ...e
     },
     onRowSelectionChange: (o) => {
-      b(o), t == null || t(o);
+      f(o), i == null || i(o);
     },
     onSortingChange: (o) => {
-      n(o), d == null || d(o);
+      n(o), t == null || t(o);
     }
   }), c = m !== !1;
   return /* @__PURE__ */ M(r.Root, { className: s, children: [
-    /* @__PURE__ */ l(r.Thead, { children: i.getHeaderGroups().map((o) => /* @__PURE__ */ l(
+    /* @__PURE__ */ l(r.Thead, { children: d.getHeaderGroups().map((o) => /* @__PURE__ */ l(
       r.HeaderRow,
       {
         headerGroup: o,
         enableRowSelection: c,
-        table: i
+        table: d
       },
       o.id
     )) }),
-    /* @__PURE__ */ l(r.Tbody, { children: i.getRowModel().rows.map((o) => /* @__PURE__ */ l(
+    /* @__PURE__ */ l(r.Tbody, { children: d.getRowModel().rows.map((o) => /* @__PURE__ */ l(
       r.Row,
       {
         row: o,
@@ -49,6 +49,5 @@ function g({
   ] });
 }
 export {
-  g as DataTableComponent,
-  g as default
+  y as DataTableComponent
 };

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

@@ -1,8 +1,8 @@
 import { jsx as l, jsxs as p } from "react/jsx-runtime";
 import f from "react";
 import { SerendieSymbol as s } from "@serendie/symbols";
-import { cx as y } from "../../../styled-system/css/cx.js";
-import { css as u } from "../../../styled-system/css/css.js";
+import { css as y } from "../../../styled-system/css/css.js";
+import { cx as u } from "../../../styled-system/css/cx.js";
 import { cva as g } from "../../../styled-system/css/cva.js";
 const h = g({
   base: {
@@ -42,7 +42,7 @@ const h = g({
       onKeyDown: (a) => {
         e && (a.key === "Enter" || a.key === " ") && (a.preventDefault(), o == null || o());
       },
-      className: y(h({ size: r, state: d }), t),
+      className: u(h({ size: r, state: d }), t),
       style: {
         cursor: e ? "pointer" : "default",
         userSelect: "none"
@@ -51,7 +51,7 @@ const h = g({
       children: /* @__PURE__ */ p(
         "span",
         {
-          className: u({
+          className: y({
             display: "inline-flex",
             alignItems: "center",
             verticalAlign: "middle"