@serendie/ui 2.1.1 → 2.1.2-dev.202509020319

package/README.md

@@ -51,6 +51,32 @@ import { Button } from "@serendie/ui";
 <Button size="medium">Login</Button>;
 ```
 
+#### Next.js App Routerでの使用
+
+Next.js App RouterのServer Componentから使用する場合は、`@serendie/ui/client`からインポートすることで、`use client`ディレクティブを記述する必要がなくなります。
+
+```js
+// app/page.tsx - Server Component
+import { Button } from "@serendie/ui/client";
+
+export default function Page() {
+  return <Button size="medium">Login</Button>;
+}
+```
+
+Client Componentでも同様に使用できます：
+
+```js
+// app/client-component.tsx - Client Component
+"use client";
+import { Tabs, TabItem, ModalDialog } from "@serendie/ui/client";
+
+export default function ClientComponent() {
+  // インタラクティブなコンポーネントも問題なく動作します
+  return <Tabs defaultValue="tab1">...</Tabs>;
+}
+```
+
 ### テーマ切り替え
 
 Serendie Design Systemには5つのカラーテーマがあり、デザイントークンもそれに対応します。htmlタグなどに、`data-panda-theme`属性 (`konjo`, `asagi`, `sumire`, `tsutusji`, `kurikawa`)を付与することでカラーテーマを切り替えることができます。

package/dist/client.d.ts

@@ -0,0 +1 @@
+export * from './index';

package/dist/client.js

@@ -0,0 +1,117 @@
+"use client";
+import { SerendiePreset as e } from "./preset.js";
+import { Accordion as a } from "./components/Accordion/Accordion.js";
+import { AccordionGroup as m } from "./components/Accordion/AccordionGroup.js";
+import { Avatar as x, AvatarStyle as n } from "./components/Avatar/Avatar.js";
+import { Badge as f, BadgeCloseButton as s, BadgeStyle as l } from "./components/Badge/Badge.js";
+import { Banner as h } from "./components/Banner/Banner.js";
+import { BottomNavigation as S } from "./components/BottomNavigation/BottomNavigation.js";
+import { BottomNavigationItem as g, BottomNavigationItemStyle as y } from "./components/BottomNavigation/BottomNavigationItem.js";
+import { Button as I, ButtonStyle as T } from "./components/Button/Button.js";
+import { SerendieChartTheme as b } from "./components/Chart/SerendieChartTheme.js";
+import { compactChartMargin as D, defaultChartMargin as v, getChartColor as M, getChartColors as w, legendChartMargin as A, spaciousChartMargin as L, useBarChartProps as N, useChartProps as R, useLineChartProps as F, usePieChartProps as G } from "./components/Chart/SerendieChartProps.js";
+import { CheckBox as W, CheckBoxStyle as j, checkboxCheckedIconCss as q, checkboxIconCss as z, checkboxUncheckedIconCss as E } from "./components/CheckBox/CheckBox.js";
+import { ChoiceBox as J, ChoiceBoxStyle as K } from "./components/ChoiceBox/ChoiceBox.js";
+import { DashboardWidget as Q } from "./components/DashboardWidget/DashboardWidget.js";
+import { DataTable as X } from "./components/DataTable/index.js";
+import { Divider as Z, DividerStyle as _ } from "./components/Divider/Divider.js";
+import { Drawer as oo } from "./components/Drawer/Drawer.js";
+import { DropdownMenu as eo, DropdownMenuStyle as to } from "./components/DropdownMenu/DropdownMenu.js";
+import { IconButton as po, IconButtonStyle as mo } from "./components/IconButton/IconButton.js";
+import { List as xo } from "./components/List/List.js";
+import { ListItem as co, ListItemStyle as fo } from "./components/List/ListItem.js";
+import { ModalDialog as lo } from "./components/ModalDialog/ModalDialog.js";
+import { NotificationBadge as Co } from "./components/NotificationBadge/NotificationBadge.js";
+import { Pagination as Bo, PaginationStyle as go } from "./components/Pagination/Pagination.js";
+import { PasswordField as uo } from "./components/PasswordField/PasswordField.js";
+import { ProgressIndicator as To, ProgressIndicatorStyle as Po } from "./components/ProgressIndicator/ProgressIndicator.js";
+import { RadioButton as ko, RadioButtonStyle as Do, radioCheckedIconCss as vo, radioIconCss as Mo, radioUncheckedIconCss as wo } from "./components/RadioButton/RadioButton.js";
+import { RadioGroup as Lo } from "./components/RadioButton/RadioGroup.js";
+import { Search as Ro, SearchStyle as Fo } from "./components/Search/Search.js";
+import { Select as Uo, SelectStyle as Wo } from "./components/Select/Select.js";
+import { Switch as qo, SwitchStyle as zo } from "./components/Switch/Switch.js";
+import { Tabs as Ho, TabsStyle as Jo } from "./components/Tabs/Tabs.js";
+import { TabItem as Oo, TabItemStyle as Qo } from "./components/Tabs/TabItem.js";
+import { TextArea as Xo } from "./components/TextArea/TextArea.js";
+import { TextField as Zo } from "./components/TextField/TextField.js";
+import { Toast as $o, ToastStyle as or, toaster as rr } from "./components/Toast/Toast.js";
+import { Tooltip as tr } from "./components/Tooltip/Tooltip.js";
+import { TopAppBar as pr } from "./components/TopAppBar/TopAppBar.js";
+import { DataTableComponent as ir } from "./components/DataTable/DataTableComponent.js";
+export {
+  a as Accordion,
+  m as AccordionGroup,
+  x as Avatar,
+  n as AvatarStyle,
+  f as Badge,
+  s as BadgeCloseButton,
+  l as BadgeStyle,
+  h as Banner,
+  S as BottomNavigation,
+  g as BottomNavigationItem,
+  y as BottomNavigationItemStyle,
+  I as Button,
+  T as ButtonStyle,
+  W as CheckBox,
+  j as CheckBoxStyle,
+  J as ChoiceBox,
+  K as ChoiceBoxStyle,
+  Q as DashboardWidget,
+  X as DataTable,
+  ir as DataTableComponent,
+  Z as Divider,
+  _ as DividerStyle,
+  oo as Drawer,
+  eo as DropdownMenu,
+  to as DropdownMenuStyle,
+  po as IconButton,
+  mo as IconButtonStyle,
+  xo as List,
+  co as ListItem,
+  fo as ListItemStyle,
+  lo as ModalDialog,
+  Co as NotificationBadge,
+  Bo as Pagination,
+  go as PaginationStyle,
+  uo as PasswordField,
+  To as ProgressIndicator,
+  Po as ProgressIndicatorStyle,
+  ko as RadioButton,
+  Do as RadioButtonStyle,
+  Lo as RadioGroup,
+  Ro as Search,
+  Fo as SearchStyle,
+  Uo as Select,
+  Wo as SelectStyle,
+  b as SerendieChartTheme,
+  e as SerendiePreset,
+  qo as Switch,
+  zo as SwitchStyle,
+  Oo as TabItem,
+  Qo as TabItemStyle,
+  Ho as Tabs,
+  Jo as TabsStyle,
+  Xo as TextArea,
+  Zo as TextField,
+  $o as Toast,
+  or as ToastStyle,
+  tr as Tooltip,
+  pr as TopAppBar,
+  q as checkboxCheckedIconCss,
+  z as checkboxIconCss,
+  E as checkboxUncheckedIconCss,
+  D as compactChartMargin,
+  v as defaultChartMargin,
+  M as getChartColor,
+  w as getChartColors,
+  A as legendChartMargin,
+  vo as radioCheckedIconCss,
+  Mo as radioIconCss,
+  wo as radioUncheckedIconCss,
+  L as spaciousChartMargin,
+  rr as toaster,
+  N as useBarChartProps,
+  R as useChartProps,
+  F as useLineChartProps,
+  G as usePieChartProps
+};

package/dist/components/Accordion/Accordion.d.ts

@@ -1,6 +1,6 @@
 import { AccordionItemProps } from '@ark-ui/react';
 import { RecipeVariantProps } from '../../../styled-system/types';
-declare const AccordionStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"title" | "description" | "item" | "icon" | "itemIndicator", {
+declare const AccordionStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"item" | "title" | "itemIndicator" | "icon" | "description", {
     isLeftIcon: {
         true: {
             item: {

package/dist/components/Accordion/Accordion.js

@@ -1,7 +1,5 @@
 import { jsxs as s, jsx as o } from "react/jsx-runtime";
 import { 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 { 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";
@@ -65,21 +63,21 @@ const i = p({
       }
     }
   }
-}), N = ({
+}), v = ({
   title: t,
-  value: r,
-  description: n,
+  value: n,
+  description: r,
   ...m
 }) => {
   const [d, a] = i.splitVariantProps(m), e = i(d);
-  return /* @__PURE__ */ s(l, { value: t || r, ...a, children: [
+  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 }) })
     ] }),
-    /* @__PURE__ */ o(f, { className: e.description, children: n })
+    /* @__PURE__ */ o(f, { className: e.description, children: r })
   ] }, t);
 };
 export {
-  N as Accordion
+  v as Accordion
 };

package/dist/components/Accordion/AccordionGroup.js

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

package/dist/components/Avatar/Avatar.js

@@ -1,13 +1,11 @@
 import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { SerendieSymbolUserCircle as f } from "@serendie/symbols";
-import "../../styled-system/css/css.js";
-import { cx as g } from "../../styled-system/css/cx.js";
-import "../../styled-system/helpers.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 { 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 = C({
+const c = g({
   slots: ["root", "fallback", "image"],
   base: {
     root: {
@@ -64,16 +62,16 @@ const c = C({
   defaultVariants: {
     size: "medium"
   }
-}), _ = ({
+}), L = ({
   src: i,
   alt: d,
   text: r,
   placeholder: n = "filled",
-  className: m,
-  ...h
+  className: h,
+  ...m
 }) => {
-  const [o, p] = c.splitVariantProps(h), { size: l } = o, t = c({ size: l, ...o }), a = l === "small" ? 24 : l === "large" ? 80 : 40;
-  return /* @__PURE__ */ e(u, { className: g(t.root, m), ...p, 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(f, { width: a, height: a }) : /* @__PURE__ */ e(w, {}) });
+  const [o, f] = c.splitVariantProps(m), { size: l } = o, t = c({ size: l, ...o }), a = 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: a, height: a }) : /* @__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" }),
@@ -128,6 +126,6 @@ const c = C({
   /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ e("clipPath", { id: "clip0_3661_24550", children: /* @__PURE__ */ e("rect", { width: "80", height: "80", fill: "white" }) }) })
 ] });
 export {
-  _ as Avatar,
+  L as Avatar,
   c as AvatarStyle
 };

package/dist/components/Badge/Badge.js

@@ -1,9 +1,7 @@
 import { jsxs as m, jsx as r } from "react/jsx-runtime";
 import { SerendieSymbolClose as i } from "@serendie/symbols";
-import "../../styled-system/css/css.js";
-import { cx as p } from "../../styled-system/css/cx.js";
 import { cva as l } from "../../styled-system/css/cva.js";
-import "../../styled-system/helpers.js";
+import { cx as y } from "../../styled-system/css/cx.js";
 const o = l({
   base: {
     display: "inline-flex",
@@ -97,26 +95,26 @@ const o = l({
     size: "medium",
     styleColor: "gray"
   }
-}), S = ({
+}), x = ({
   children: e,
   closeButton: s,
   ...t
 }) => {
   const [c, { className: n, ...a }] = o.splitVariantProps(t), d = o(c);
-  return /* @__PURE__ */ m("span", { className: p(d, n), ...a, children: [
+  return /* @__PURE__ */ m("span", { className: y(d, n), ...a, children: [
     e,
     s
   ] });
-}, y = l({
+}, p = l({
   base: {
     cursor: "pointer"
   }
-}), v = (e) => {
-  const s = y();
+}), h = (e) => {
+  const s = p();
   return /* @__PURE__ */ r("button", { ...e, className: s, children: /* @__PURE__ */ r(i, { width: 12, height: 12 }) });
 };
 export {
-  S as Badge,
-  v as BadgeCloseButton,
+  x as Badge,
+  h as BadgeCloseButton,
   o as BadgeStyle
 };

package/dist/components/Banner/Banner.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps } from 'react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-declare const BannerStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"container" | "title" | "description" | "icon", {
+declare const BannerStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"container" | "title" | "icon" | "description", {
     type: {
         information: {
             container: {

package/dist/components/Banner/Banner.js

@@ -1,10 +1,8 @@
 import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import { SerendieSymbolAlertCircleFilled as p, SerendieSymbolAlertCircle as y } from "@serendie/symbols";
-import "../../styled-system/css/css.js";
-import { cx as b } from "../../styled-system/css/cx.js";
-import "../../styled-system/helpers.js";
-import { sva as g } from "../../styled-system/css/sva.js";
-const t = g({
+import { sva as b } from "../../styled-system/css/sva.js";
+import { cx as g } from "../../styled-system/css/cx.js";
+const t = b({
   slots: ["container", "icon", "title", "description"],
   base: {
     container: {
@@ -66,14 +64,14 @@ const t = g({
   defaultVariants: {
     type: "information"
   }
-}), v = (n) => {
+}), C = (n) => {
   const [s, { title: d, icon: r, description: m, className: a, ...l }] = t.splitVariantProps(n), o = t(s), i = s.type || "alert-circle";
-  return /* @__PURE__ */ c("div", { className: b(o.container, a), ...l, children: [
+  return /* @__PURE__ */ c("div", { className: g(o.container, a), ...l, 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: m })
   ] });
 };
 export {
-  v as Banner
+  C as Banner
 };

package/dist/components/BottomNavigation/BottomNavigation.js

@@ -1,16 +1,15 @@
 import { jsx as e } from "react/jsx-runtime";
-import { css as r } from "../../styled-system/css/css.js";
-import { cx as i } from "../../styled-system/css/cx.js";
-import "../../styled-system/helpers.js";
-const d = ({
+import { cx as r } from "../../styled-system/css/cx.js";
+import { css as i } from "../../styled-system/css/css.js";
+const a = ({
   children: o,
-  className: t,
-  ...s
+  className: s,
+  ...t
 }) => /* @__PURE__ */ e(
   "nav",
   {
-    className: i(
-      r({
+    className: r(
+      i({
         display: "flex",
         alignItems: "center",
         justifyContent: "space-around",
@@ -19,12 +18,12 @@ const d = ({
         borderTop: "1px solid",
         borderTopColor: "sd.system.color.component.outline"
       }),
-      t
+      s
     ),
-    ...s,
+    ...t,
     children: o
   }
 );
 export {
-  d as BottomNavigation
+  a as BottomNavigation
 };

package/dist/components/BottomNavigation/BottomNavigationItem.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps } from 'react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-export declare const BottomNavigationItemStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"label" | "root" | "icon" | "iconGroup" | "badge", {
+export declare const BottomNavigationItemStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"icon" | "label" | "root" | "iconGroup" | "badge", {
     isActive: {
         true: {
             label: {

package/dist/components/BottomNavigation/BottomNavigationItem.js

@@ -1,9 +1,7 @@
 import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import "../../styled-system/css/css.js";
-import { cx as p } from "../../styled-system/css/cx.js";
-import "../../styled-system/helpers.js";
+import { NotificationBadge as p } from "../NotificationBadge/NotificationBadge.js";
 import { sva as d } from "../../styled-system/css/sva.js";
-import { NotificationBadge as y } from "../NotificationBadge/NotificationBadge.js";
+import { cx as y } from "../../styled-system/css/cx.js";
 const i = d({
   slots: ["root", "iconGroup", "icon", "label", "badge"],
   base: {
@@ -63,7 +61,7 @@ const i = d({
   defaultVariants: {
     isActive: !1
   }
-}), v = ({
+}), b = ({
   icon: r,
   label: a,
   count: l,
@@ -71,10 +69,10 @@ const i = d({
   ...c
 }) => {
   const [t, m] = i.splitVariantProps(c), o = i(t);
-  return /* @__PURE__ */ s("button", { className: p(o.root, n), ...m, children: [
+  return /* @__PURE__ */ s("button", { className: y(o.root, n), ...m, children: [
     /* @__PURE__ */ s("div", { className: o.iconGroup, children: [
       /* @__PURE__ */ e("div", { className: o.badge, children: /* @__PURE__ */ e(
-        y,
+        p,
         {
           count: l || 0,
           noNumber: t.dot,
@@ -87,6 +85,6 @@ const i = d({
   ] });
 };
 export {
-  v as BottomNavigationItem,
+  b as BottomNavigationItem,
   i as BottomNavigationItemStyle
 };

package/dist/components/Button/Button.d.ts

@@ -117,14 +117,14 @@ type ButtonLoadingProps = {
 };
 export declare const Button: React.ForwardRefExoticComponent<(Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     styleType?: "filled" | "outlined" | "ghost" | "rectangle" | undefined;
-    size?: "medium" | "small" | undefined;
+    size?: "small" | "medium" | undefined;
 } & {
     leftIcon?: React.ReactElement;
 } & {
     rightIcon?: never;
 } & ButtonLoadingProps, "ref"> | Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     styleType?: "filled" | "outlined" | "ghost" | "rectangle" | undefined;
-    size?: "medium" | "small" | undefined;
+    size?: "small" | "medium" | undefined;
 } & {
     leftIcon?: never;
 } & {

package/dist/components/Button/Button.js

@@ -1,13 +1,11 @@
 import { jsxs as g, jsx as i } from "react/jsx-runtime";
 import b from "react";
 import { ProgressIndicator as f } from "../ProgressIndicator/ProgressIndicator.js";
-import { css as h } 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-system/helpers.js";
+import { cva as h } 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 { styled as v } from "../../styled-system/jsx/factory.js";
-import "../../styled-system/jsx/is-valid-prop.js";
-const d = {
+const r = {
   color: "sd.system.color.component.onSurface",
   outlineWidth: "sd.system.dimension.border.medium",
   outlineStyle: "solid",
@@ -27,7 +25,7 @@ const d = {
     color: "sd.system.color.interaction.disabledOnSurface",
     outline: "none"
   }
-}, l = _({
+}, l = h({
   base: {
     borderRadius: "sd.system.dimension.radius.full",
     position: "relative",
@@ -89,9 +87,9 @@ const d = {
           color: "sd.system.color.interaction.disabledOnSurface"
         }
       },
-      outlined: d,
+      outlined: r,
       rectangle: {
-        ...d,
+        ...r,
         borderRadius: "sd.system.dimension.radius.medium"
       }
     },
@@ -125,12 +123,12 @@ const d = {
     position: "relative",
     zIndex: "sd.system.elevation.zIndex.base"
   }
-}), T = b.forwardRef(
+}), P = b.forwardRef(
   (o, a) => {
     const [
-      r,
+      d,
       { children: m, leftIcon: e, rightIcon: s, isLoading: t, className: c, ...y }
-    ] = l.splitVariantProps(o), p = l(r), u = h(
+    ] = l.splitVariantProps(o), p = l(d), u = x(
       e || s ? o.size === "medium" ? {
         //アイコンがある側 `spacing.medium`、無い側は`spacing.extraLarge`
         paddingLeft: e ? "sd.system.dimension.spacing.medium" : "sd.system.dimension.spacing.extraLarge",
@@ -145,13 +143,13 @@ const d = {
       "button",
       {
         ref: a,
-        className: x(p, u, c),
+        className: _(p, u, c),
         ...y,
         children: [
           t && /* @__PURE__ */ i(
             f,
             {
-              size: r.size,
+              size: d.size,
               color: o.styleType === void 0 || o.styleType === "filled" ? "white" : "gray"
             }
           ),
@@ -164,6 +162,6 @@ const d = {
   }
 );
 export {
-  T as Button,
+  P as Button,
   l as ButtonStyle
 };

package/dist/components/CheckBox/CheckBox.js

@@ -1,11 +1,10 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { css as x } from "../../styled-system/css/css.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 "../../styled-system/helpers.js";
-import { sva as u } from "../../styled-system/css/sva.js";
-import k from "../../assets/checkboxChecked.svg.js";
-import b from "../../assets/checkboxUnchecked.svg.js";
-import g from "../../assets/checkboxIndeterminate.svg.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";
@@ -45,7 +44,7 @@ const _ = {
   _disabled: {
     color: "color-mix(in srgb, {colors.sd.system.color.component.outline}, {colors.sd.system.color.interaction.hoveredOnPrimary});"
   }
-}, n = u({
+}, n = b({
   slots: [
     "root",
     "itemControl",
@@ -93,7 +92,7 @@ const _ = {
       }
     }
   }
-}), L = ({
+}), H = ({
   value: m,
   label: l,
   helperText: s,
@@ -102,7 +101,7 @@ const _ = {
 }) => {
   const [p, y] = n.splitVariantProps(a), o = n(p), h = c(
     o.root,
-    s && x({ alignItems: "flex-start" })
+    s && g({ alignItems: "flex-start" })
   );
   return /* @__PURE__ */ t(
     f,
@@ -111,7 +110,7 @@ const _ = {
       className: c("group", h, d),
       ...y,
       children: [
-        /* @__PURE__ */ e(C, { children: (r) => /* @__PURE__ */ e(S, { className: o.itemControl, children: r.checked === !0 ? /* @__PURE__ */ e(k, { className: o.checkedIcon }) : r.indeterminate === !0 ? /* @__PURE__ */ e(g, { className: o.checkedIcon }) : /* @__PURE__ */ e(b, { className: o.uncheckedIcon }) }) }),
+        /* @__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 })
@@ -122,7 +121,7 @@ const _ = {
   );
 };
 export {
-  L as CheckBox,
+  H as CheckBox,
   n as CheckBoxStyle,
   v as checkboxCheckedIconCss,
   _ as checkboxIconCss,