@serendie/ui 3.1.1-dev.202603310654 → 3.1.1-dev.202603310916

package/dist/client.js

@@ -43,8 +43,8 @@ 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 { 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/index.js";
 export {
   C as Accordion,
@@ -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/Avatar/Avatar.js

@@ -1,11 +1,11 @@
 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 { cx as g } from "../../styled-system/css/cx.js";
+import { sva as C } from "../../styled-system/css/sva.js";
+import { AvatarRoot as u } from "../../node_modules/@ark-ui/react/dist/components/avatar/avatar-root.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({
+const c = C({
   slots: ["root", "fallback", "image"],
   base: {
     root: {
@@ -71,7 +71,7 @@ const c = g({
   ...m
 }) => {
   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, {}) });
+  return /* @__PURE__ */ e(u, { className: g(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: [
     /* @__PURE__ */ e("rect", { width: "80", height: "80", rx: "40", fill: "#EFF2FC" }),

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

@@ -2,9 +2,9 @@ import { jsxs as t, jsx as e } from "react/jsx-runtime";
 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 { css as b } from "../../styled-system/css/css.js";
+import { sva as g } from "../../styled-system/css/sva.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";
@@ -44,7 +44,7 @@ const v = {
   _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",
@@ -102,7 +102,7 @@ const v = {
 }) => {
   const [p, y] = n.splitVariantProps(a), o = n(p), h = c(
     o.root,
-    s && g({ alignItems: "flex-start" })
+    s && b({ alignItems: "flex-start" })
   );
   return /* @__PURE__ */ t(
     f,

package/dist/components/ChoiceBox/ChoiceBox.js

@@ -6,9 +6,9 @@ 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 { cx as d } from "../../styled-system/css/cx.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";

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"

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

@@ -1,8 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
 import l from "react";
-import { sva as c } from "../../../styled-system/css/sva.js";
-import { cx as n } from "../../../styled-system/css/cx.js";
-const d = c({
+import { cx as c } from "../../../styled-system/css/cx.js";
+import { sva as n } from "../../../styled-system/css/sva.js";
+const d = n({
   slots: ["container", "table"],
   base: {
     container: {
@@ -22,7 +22,7 @@ const d = c({
   }
 }), f = l.forwardRef(({ children: r, className: t, ...a }, s) => {
   const o = d();
-  return /* @__PURE__ */ e("div", { ref: s, className: n(o.container, t), ...a, children: /* @__PURE__ */ e("table", { role: "table", className: o.table, children: r }) });
+  return /* @__PURE__ */ e("div", { ref: s, className: c(o.container, t), ...a, children: /* @__PURE__ */ e("table", { role: "table", className: o.table, children: r }) });
 });
 export {
   f as Root

package/dist/components/DatePicker/DatePicker.js

@@ -5,13 +5,13 @@ import { datePickerStyles as S } from "./styles.js";
 import { textFieldRecipe as C } from "../../recipes/textFieldRecipe.js";
 import { useAutoPortalContainer as K } from "../../hooks/useAutoPortalContainer.js";
 import { useTranslations as Q } from "../../i18n/index.js";
+import { css as a } from "../../styled-system/css/css.js";
+import { cx as f } from "../../styled-system/css/cx.js";
 import { Portal as U } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
 import { DatePickerRoot as y } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-root.js";
 import { DatePickerLabel as X } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-label.js";
 import { DatePickerControl as Z } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-control.js";
-import { cx as f } from "../../styled-system/css/cx.js";
 import { DatePickerTrigger as $ } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-trigger.js";
-import { css as a } from "../../styled-system/css/css.js";
 import { DatePickerInput as P } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-input.js";
 import { DatePickerPositioner as M } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-positioner.js";
 import { DatePickerContent as ee } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-content.js";

package/dist/components/Divider/Divider.js

@@ -1,7 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
-import { cva as d } from "../../styled-system/css/cva.js";
-import { cx as m } from "../../styled-system/css/cx.js";
-const o = d({
+import { cx as d } from "../../styled-system/css/cx.js";
+import { cva as m } from "../../styled-system/css/cva.js";
+const o = m({
   base: {
     border: "none"
   },
@@ -39,7 +39,7 @@ const o = d({
   }
 }), p = (e) => {
   const [r, t] = o.splitVariantProps(e), { className: s, ...i } = t;
-  return /* @__PURE__ */ n("hr", { className: m(o(r), s), ...i });
+  return /* @__PURE__ */ n("hr", { className: d(o(r), s), ...i });
 };
 export {
   p as Divider,

package/dist/components/Drawer/Drawer.js

@@ -2,10 +2,10 @@ import { jsx as e, jsxs as o } from "react/jsx-runtime";
 import { SerendieSymbolClose as p } from "@serendie/symbols";
 import { IconButton as g } from "../IconButton/IconButton.js";
 import { Portal as f } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
+import { cx as s } from "../../styled-system/css/cx.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";

package/dist/components/IconButton/IconButton.js

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

package/dist/components/List/ListItem.js

@@ -1,8 +1,8 @@
 import { jsxs as s, jsx as t } from "react/jsx-runtime";
 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 { css as c } from "../../styled-system/css/css.js";
+import { sva as v } from "../../styled-system/css/sva.js";
 const p = v({
   slots: [
     "root",

package/dist/components/ModalDialog/ModalDialog.js

@@ -2,16 +2,16 @@ import { jsx as e, jsxs as o } from "react/jsx-runtime";
 import { Button as i } from "../Button/Button.js";
 import { useTranslations as y } from "../../i18n/index.js";
 import { Portal as x } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
-import { sva as f } from "../../styled-system/css/sva.js";
-import { DialogRoot as h } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-root.js";
-import { DialogBackdrop as u } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-backdrop.js";
-import { DialogPositioner as b } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-positioner.js";
-import { DialogContent as D } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-content.js";
-import { cx as v } from "../../styled-system/css/cx.js";
+import { cx as f } from "../../styled-system/css/cx.js";
+import { sva as h } from "../../styled-system/css/sva.js";
+import { DialogRoot as u } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-root.js";
+import { DialogBackdrop as b } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-backdrop.js";
+import { DialogPositioner as D } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-positioner.js";
+import { DialogContent as v } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-content.js";
 import { DialogTitle as I } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-title.js";
 import { DialogDescription as k } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-description.js";
 import { DialogCloseTrigger as C } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-close-trigger.js";
-const N = f({
+const N = h({
   slots: [
     "backdrop",
     "content",
@@ -87,9 +87,9 @@ const N = f({
   ...t
 }) => {
   const g = y(), s = N(t);
-  return /* @__PURE__ */ e(h, { open: n, ...t, children: /* @__PURE__ */ o(x, { children: [
-    /* @__PURE__ */ e(u, { className: s.backdrop }),
-    /* @__PURE__ */ e(b, { children: /* @__PURE__ */ o(D, { className: v(s.content, c), children: [
+  return /* @__PURE__ */ e(u, { open: n, ...t, children: /* @__PURE__ */ o(x, { children: [
+    /* @__PURE__ */ e(b, { className: s.backdrop }),
+    /* @__PURE__ */ e(D, { children: /* @__PURE__ */ o(v, { className: f(s.content, c), children: [
       /* @__PURE__ */ o("div", { className: s.contentInner, children: [
         /* @__PURE__ */ e(I, { className: s.title, children: a }),
         /* @__PURE__ */ e(k, { className: s.description, children: p })

package/dist/components/NotificationBadge/NotificationBadge.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import { sva as m } from "../../styled-system/css/sva.js";
 import { cx as a } from "../../styled-system/css/cx.js";
+import { sva as m } from "../../styled-system/css/sva.js";
 const n = m({
   slots: ["root", "text"],
   base: {

package/dist/components/Pagination/Pagination.js

@@ -3,15 +3,15 @@ import { SerendieSymbolChevronLeft as _, SerendieSymbolChevronRight as I } from
 import N, { useState as j } from "react";
 import { IconButton as m } from "../IconButton/IconButton.js";
 import { useTranslations as z } from "../../i18n/index.js";
-import { sva as R } from "../../styled-system/css/sva.js";
-import { PaginationRoot as w } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-root.js";
-import { cx as O } from "../../styled-system/css/cx.js";
+import { cx as R } from "../../styled-system/css/cx.js";
+import { sva as w } from "../../styled-system/css/sva.js";
+import { PaginationRoot as O } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-root.js";
 import { PaginationContext as W } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-context.js";
 import { PaginationPrevTrigger as F } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-prev-trigger.js";
 import { PaginationItem as L } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-item.js";
 import { PaginationEllipsis as B } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-ellipsis.js";
 import { PaginationNextTrigger as E } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-next-trigger.js";
-const M = R({
+const M = w({
   slots: ["root", "item", "ellipsis", "prevTrigger", "nextTrigger"],
   base: {
     root: {
@@ -102,10 +102,10 @@ const M = R({
       onPageChange: x
     };
     return /* @__PURE__ */ e(
-      w,
+      O,
       {
         ref: P,
-        className: O(a.root, y),
+        className: R(a.root, y),
         ...T,
         ...u,
         children: /* @__PURE__ */ e(W, { children: (t) => {

package/dist/components/RadioButton/RadioButton.js

@@ -1,9 +1,9 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import x from "../../assets/radioChecked.svg.js";
 import h from "../../assets/radioUnchecked.svg.js";
-import { sva as f } from "../../styled-system/css/sva.js";
 import { cx as i } from "../../styled-system/css/cx.js";
-import { css as g } from "../../styled-system/css/css.js";
+import { css as f } from "../../styled-system/css/css.js";
+import { sva as g } from "../../styled-system/css/sva.js";
 import { RadioGroupItem as I } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item.js";
 import { RadioGroupItemContext as S } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-context.js";
 import { RadioGroupItemControl as b } from "../../node_modules/@ark-ui/react/dist/components/radio-group/radio-group-item-control.js";
@@ -26,7 +26,7 @@ const k = {
   _disabled: {
     color: "color-mix(in srgb, {colors.sd.system.color.component.outlineDim}, {colors.sd.system.color.interaction.hoveredOnPrimary});"
   }
-}, c = f({
+}, c = g({
   slots: [
     "item",
     "itemControl",
@@ -84,7 +84,7 @@ const k = {
 }) => {
   const [l, p] = c.splitVariantProps(a), o = c(l), y = i(
     o.item,
-    s && g({ alignItems: "flex-start" })
+    s && f({ alignItems: "flex-start" })
   );
   return /* @__PURE__ */ r(
     I,

package/dist/components/Search/Search.js

@@ -3,19 +3,19 @@ import l from "react";
 import { SerendieSymbolMagnifyingGlass as k, SerendieSymbolClose as O } from "@serendie/symbols";
 import { useAutoPortalContainer as z } from "../../hooks/useAutoPortalContainer.js";
 import { createListCollection as j } from "../../node_modules/@ark-ui/react/dist/components/collection/list-collection.js";
-import { Portal as H } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
-import { Box as A } from "../../styled-system/jsx/box.js";
-import { sva as M } from "../../styled-system/css/sva.js";
-import { ComboboxRoot as D } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-root.js";
-import { ComboboxControl as G } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-control.js";
-import { cx as K } from "../../styled-system/css/cx.js";
+import { cx as H } from "../../styled-system/css/cx.js";
+import { Portal as A } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
+import { Box as M } from "../../styled-system/jsx/box.js";
+import { sva as D } from "../../styled-system/css/sva.js";
+import { ComboboxRoot as G } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-root.js";
+import { ComboboxControl as K } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-control.js";
 import { ComboboxInput as P } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-input.js";
 import { ComboboxPositioner as W } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-positioner.js";
 import { ComboboxContent as U } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-content.js";
 import { ComboboxItemGroup as q } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-item-group.js";
 import { ComboboxItem as F } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-item.js";
 import { ComboboxItemText as J } from "../../node_modules/@ark-ui/react/dist/components/combobox/combobox-item-text.js";
-const h = M({
+const h = D({
   slots: [
     "input",
     "control",
@@ -174,7 +174,7 @@ const h = M({
     m.current && (m.current.value = "", m.current.focus()), c(!1), d || g(""), (o = e.onInputValueChange) == null || o.call(e, { inputValue: "" });
   };
   return /* @__PURE__ */ p(
-    D,
+    G,
     {
       ...e,
       collection: f,
@@ -193,9 +193,9 @@ const h = M({
       },
       children: [
         /* @__PURE__ */ p(
-          G,
+          K,
           {
-            className: K(t.control, e.className),
+            className: H(t.control, e.className),
             ref: S,
             children: [
               /* @__PURE__ */ s("div", { className: t.iconBox, children: /* @__PURE__ */ s(k, { className: t.icon }) }),
@@ -220,14 +220,14 @@ const h = M({
             ]
           }
         ),
-        /* @__PURE__ */ s(H, { disabled: !u, container: w, children: /* @__PURE__ */ s(W, { children: /* @__PURE__ */ s(U, { className: t.combobox, children: /* @__PURE__ */ s(q, { id: "framework", children: f.items.map((o, n) => /* @__PURE__ */ p(
+        /* @__PURE__ */ s(A, { disabled: !u, container: w, children: /* @__PURE__ */ s(W, { children: /* @__PURE__ */ s(U, { className: t.combobox, children: /* @__PURE__ */ s(q, { id: "framework", children: f.items.map((o, n) => /* @__PURE__ */ p(
           F,
           {
             item: o,
             className: t.comboboxItem,
             children: [
               /* @__PURE__ */ s(
-                A,
+                M,
                 {
                   w: "sd.system.dimension.spacing.large",
                   h: "sd.system.dimension.spacing.large"