@serendie/ui 2.2.4 → 2.2.5-dev.202510301500

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<"icon" | "description" | "item" | "title" | "itemIndicator", {
+declare const AccordionStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"item" | "title" | "itemIndicator" | "icon" | "description", {
     isLeftIcon: {
         true: {
             item: {

package/dist/components/Avatar/Avatar.d.ts

@@ -1,6 +1,6 @@
 import { AvatarRootProps } from '@ark-ui/react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-export declare const AvatarStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"root" | "image" | "fallback", {
+export declare const AvatarStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"image" | "root" | "fallback", {
     size: {
         small: {
             root: {

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" | "icon" | "description" | "title", {
+declare const BannerStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"title" | "icon" | "description" | "container", {
     type: {
         information: {
             container: {

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<"root" | "label" | "icon" | "iconGroup" | "badge", {
+export declare const BottomNavigationItemStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"icon" | "label" | "root" | "iconGroup" | "badge", {
     isActive: {
         true: {
             label: {

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

@@ -40,7 +40,7 @@ export declare const ButtonStyle: import('../../../styled-system/types').RecipeR
                     bgColor: "sd.system.color.interaction.hoveredVariant";
                     outlineWidth: "sd.system.dimension.border.medium";
                     outlineStyle: "solid";
-                    outlineColor: "sd.system.color.component.outlineVariant";
+                    outlineColor: "sd.system.color.component.outlineDim";
                 };
             };
             _disabled: {
@@ -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

@@ -16,7 +16,7 @@ const d = {
       bgColor: "sd.system.color.interaction.hoveredVariant"
     },
     _focusVisible: {
-      outlineColor: "sd.system.color.component.outlineVariant",
+      outlineColor: "sd.system.color.component.outlineDim",
       bgColor: "sd.system.color.interaction.hoveredVariant"
     }
   },
@@ -25,7 +25,7 @@ const d = {
     color: "sd.system.color.interaction.disabledOnSurface",
     outline: "none"
   }
-}, a = h({
+}, l = h({
   base: {
     borderRadius: "sd.system.dimension.radius.full",
     position: "relative",
@@ -80,7 +80,7 @@ const d = {
             bgColor: "sd.system.color.interaction.hoveredVariant",
             outlineWidth: "sd.system.dimension.border.medium",
             outlineStyle: "solid",
-            outlineColor: "sd.system.color.component.outlineVariant"
+            outlineColor: "sd.system.color.component.outlineDim"
           }
         },
         _disabled: {
@@ -118,17 +118,17 @@ const d = {
     styleType: "filled",
     size: "medium"
   }
-}), i = v("span", {
+}), t = v("span", {
   base: {
     position: "relative",
     zIndex: "sd.system.elevation.zIndex.base"
   }
 }), R = b.forwardRef(
-  (n, l) => {
+  (n, a) => {
     const [
       r,
-      { children: m, leftIcon: e, rightIcon: s, isLoading: t, className: c, ...y }
-    ] = a.splitVariantProps(n), p = a(r), u = x(
+      { children: m, leftIcon: e, rightIcon: s, isLoading: i, className: c, ...y }
+    ] = l.splitVariantProps(n), p = l(r), u = x(
       e || s ? n.size === "medium" ? {
         //アイコンがある側 `spacing.medium`、無い側は`spacing.extraLarge`
         paddingLeft: e ? "sd.system.dimension.spacing.medium" : "sd.system.dimension.spacing.extraLarge",
@@ -142,11 +142,11 @@ const d = {
     return /* @__PURE__ */ g(
       "button",
       {
-        ref: l,
+        ref: a,
         className: _(p, u, c),
         ...y,
         children: [
-          t && /* @__PURE__ */ o(
+          i && /* @__PURE__ */ o(
             f,
             {
               type: "circular",
@@ -154,9 +154,9 @@ const d = {
               color: "subtle"
             }
           ),
-          !t && e && /* @__PURE__ */ o(i, { p: "2px", children: e }),
-          /* @__PURE__ */ o(i, { children: m }),
-          !t && s && /* @__PURE__ */ o(i, { p: "2px", children: s })
+          !i && e && /* @__PURE__ */ o(t, { p: "2px", children: e }),
+          /* @__PURE__ */ o(t, { children: m }),
+          !i && s && /* @__PURE__ */ o(t, { p: "2px", children: s })
         ]
       }
     );
@@ -164,5 +164,5 @@ const d = {
 );
 export {
   R as Button,
-  a as ButtonStyle
+  l as ButtonStyle
 };

package/dist/components/DatePicker/DatePicker.d.ts

@@ -1,5 +1,7 @@
-import { DatePickerRootProps } from '@ark-ui/react';
-interface DatePickerProps extends DatePickerRootProps {
+import { DatePicker as ArkDatePicker } from '@ark-ui/react';
+export declare const DatePicker: import('react').ForwardRefExoticComponent<ArkDatePicker.RootProps & {
+    fullWidth?: boolean | undefined;
+} & {
     placeholder?: string;
     label?: string;
     required?: boolean;
@@ -9,6 +11,4 @@ interface DatePickerProps extends DatePickerRootProps {
     startPlaceholder?: string;
     endPlaceholder?: string;
     isCalendarOnly?: boolean;
-}
-export declare const DatePicker: import('react').ForwardRefExoticComponent<DatePickerProps & import('react').RefAttributes<HTMLDivElement>>;
-export {};
+} & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/DatePicker/DatePicker.js

@@ -1,80 +1,82 @@
-import { jsx as e, jsxs as a, Fragment as C } from "react/jsx-runtime";
-import { SerendieSymbolCalendar as F, SerendieSymbolArrowRight as I, SerendieSymbolChevronDown as W, SerendieSymbolChevronLeft as O, SerendieSymbolChevronRight as j } from "@serendie/symbols";
-import { forwardRef as H, useState as A } from "react";
-import { datePickerStyles as v } from "./styles.js";
-import { textFieldRecipe as L } from "../../styled-system/recipes/text-field-recipe.js";
-import { Portal as V } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
-import { DatePickerRoot as D } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-root.js";
-import { DatePickerLabel as q } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-label.js";
-import { DatePickerControl as B } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-control.js";
+import { jsx as e, jsxs as a, Fragment as v } from "react/jsx-runtime";
+import { SerendieSymbolCalendar as O, SerendieSymbolArrowRight as j, SerendieSymbolChevronDown as H, SerendieSymbolChevronLeft as V, SerendieSymbolChevronRight as A } from "@serendie/symbols";
+import { forwardRef as L, useState as q } from "react";
+import { datePickerStyles as x } from "./styles.js";
+import { textFieldRecipe as D } from "../../recipes/textFieldRecipe.js";
+import { Portal as B } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
+import { DatePickerRoot as b } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-root.js";
+import { DatePickerLabel as J } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-label.js";
+import { DatePickerControl as Y } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-control.js";
 import { cx as h } from "../../styled-system/css/cx.js";
-import { DatePickerTrigger as J } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-trigger.js";
+import { DatePickerTrigger as _ } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-trigger.js";
 import { css as t } from "../../styled-system/css/css.js";
 import { DatePickerInput as f } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-input.js";
-import { DatePickerPositioner as Y } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-positioner.js";
-import { DatePickerContent as _ } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-content.js";
-import { DatePickerView as z } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-view.js";
-import { DatePickerContext as E } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-context.js";
-import { DatePickerViewControl as G } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-view-control.js";
-import { DatePickerYearSelect as K } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-year-select.js";
-import { DatePickerPrevTrigger as Q } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-prev-trigger.js";
-import { DatePickerMonthSelect as U } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-month-select.js";
-import { DatePickerNextTrigger as X } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-next-trigger.js";
-import { DatePickerTable as Z } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table.js";
-import { DatePickerTableHead as $ } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-head.js";
-import { DatePickerTableRow as b } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-row.js";
-import { DatePickerTableHeader as M } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-header.js";
-import { DatePickerTableBody as ee } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-body.js";
-import { DatePickerTableCell as re } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-cell.js";
-import { DatePickerTableCellTrigger as ie } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-cell-trigger.js";
-const We = H(
+import { DatePickerPositioner as z } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-positioner.js";
+import { DatePickerContent as E } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-content.js";
+import { DatePickerView as G } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-view.js";
+import { DatePickerContext as K } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-context.js";
+import { DatePickerViewControl as Q } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-view-control.js";
+import { DatePickerYearSelect as U } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-year-select.js";
+import { DatePickerPrevTrigger as X } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-prev-trigger.js";
+import { DatePickerMonthSelect as Z } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-month-select.js";
+import { DatePickerNextTrigger as $ } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-next-trigger.js";
+import { DatePickerTable as M } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table.js";
+import { DatePickerTableHead as ee } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-head.js";
+import { DatePickerTableRow as y } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-row.js";
+import { DatePickerTableHeader as re } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-header.js";
+import { DatePickerTableBody as ie } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-body.js";
+import { DatePickerTableCell as ae } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-cell.js";
+import { DatePickerTableCellTrigger as te } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-cell-trigger.js";
+const je = L(
   ({
     placeholder: r = "日付を選択",
     label: o,
     required: l,
-    requiredLabel: m,
+    requiredLabel: s,
     invalid: n,
     invalidMessage: c,
     selectionMode: p = "single",
-    startPlaceholder: x = "開始日",
-    endPlaceholder: S = "終了日",
-    locale: N = "ja-JP",
-    isCalendarOnly: T = !1,
-    ...s
-  }, g) => {
-    const w = v(), i = L(), [u, d] = A(!1), R = p === "range";
-    return T ? /* @__PURE__ */ e(
-      D,
+    startPlaceholder: S = "開始日",
+    endPlaceholder: T = "終了日",
+    locale: P = "ja-JP",
+    isCalendarOnly: w = !1,
+    ...m
+  }, N) => {
+    const R = x(), [F, I] = D.splitVariantProps({
+      ...m
+    }), i = D(F), [g, d] = q(!1), W = p === "range";
+    return w ? /* @__PURE__ */ e(
+      b,
       {
-        locale: N,
-        ...s,
-        ref: g,
+        locale: P,
+        ...I,
+        ref: N,
         selectionMode: p,
         open: !0,
         className: i.root,
-        children: /* @__PURE__ */ e(y, {})
+        children: /* @__PURE__ */ e(C, {})
       }
     ) : /* @__PURE__ */ a(
-      D,
+      b,
       {
-        locale: N,
-        ...s,
-        ref: g,
+        locale: P,
+        ...m,
+        ref: N,
         selectionMode: p,
         className: i.root,
-        open: u,
-        onOpenChange: (P) => {
+        open: g,
+        onOpenChange: (u) => {
           var k;
-          d(P.open), (k = s.onOpenChange) == null || k.call(s, P);
+          d(u.open), (k = m.onOpenChange) == null || k.call(m, u);
         },
         children: [
-          /* @__PURE__ */ a(C, { children: [
-            o && /* @__PURE__ */ a(q, { className: i.label, children: [
+          /* @__PURE__ */ a(v, { children: [
+            o && /* @__PURE__ */ a(J, { className: i.label, children: [
               o,
-              l && /* @__PURE__ */ e("span", { className: i.labelRequired, children: m ?? "必須" })
+              l && /* @__PURE__ */ e("span", { className: i.labelRequired, children: s ?? "必須" })
             ] }),
             /* @__PURE__ */ a(
-              B,
+              Y,
               {
                 className: h(
                   i.inputWrapper,
@@ -85,11 +87,11 @@ const We = H(
                     }
                   })
                 ),
-                "data-expanded": u ? !0 : void 0,
+                "data-expanded": g ? !0 : void 0,
                 "data-Invalid": n,
                 children: [
-                  /* @__PURE__ */ e("div", { className: i.leftContent, children: /* @__PURE__ */ e(J, { className: t({ display: "flex" }), children: /* @__PURE__ */ e(F, {}) }) }),
-                  R ? /* @__PURE__ */ a(
+                  /* @__PURE__ */ e("div", { className: i.leftContent, children: /* @__PURE__ */ e(_, { className: t({ display: "flex" }), children: /* @__PURE__ */ e(O, {}) }) }),
+                  W ? /* @__PURE__ */ a(
                     "div",
                     {
                       className: t({
@@ -102,7 +104,7 @@ const We = H(
                           f,
                           {
                             index: 0,
-                            placeholder: x,
+                            placeholder: S,
                             className: h(
                               i.input,
                               t({
@@ -113,12 +115,12 @@ const We = H(
                             onFocus: () => d(!0)
                           }
                         ),
-                        /* @__PURE__ */ e(I, {}),
+                        /* @__PURE__ */ e(j, {}),
                         /* @__PURE__ */ e(
                           f,
                           {
                             index: 1,
-                            placeholder: S,
+                            placeholder: T,
                             className: h(
                               i.input,
                               t({
@@ -145,23 +147,23 @@ const We = H(
             ),
             n && c && /* @__PURE__ */ e("div", { className: i.messageField, children: /* @__PURE__ */ e("p", { className: i.invalidMessage, children: c }) })
           ] }),
-          /* @__PURE__ */ e(V, { children: /* @__PURE__ */ e(Y, { className: w.positioner, children: /* @__PURE__ */ e(y, {}) }) })
+          /* @__PURE__ */ e(B, { children: /* @__PURE__ */ e(z, { className: R.positioner, children: /* @__PURE__ */ e(C, {}) }) })
         ]
       }
     );
   }
-), y = () => {
-  const r = v();
-  return /* @__PURE__ */ e(_, { className: r.content, children: /* @__PURE__ */ e(z, { view: "day", className: r.view, children: /* @__PURE__ */ e(E, { children: (o) => /* @__PURE__ */ a(C, { children: [
-    /* @__PURE__ */ a(G, { className: r.viewControl, children: [
+), C = () => {
+  const r = x();
+  return /* @__PURE__ */ e(E, { className: r.content, children: /* @__PURE__ */ e(G, { view: "day", className: r.view, children: /* @__PURE__ */ e(K, { children: (o) => /* @__PURE__ */ a(v, { children: [
+    /* @__PURE__ */ a(Q, { className: r.viewControl, children: [
       /* @__PURE__ */ a("div", { className: r.selectWrapper, children: [
-        /* @__PURE__ */ e(K, { className: r.select }),
-        /* @__PURE__ */ e(W, { className: r.selectIcon })
+        /* @__PURE__ */ e(U, { className: r.select }),
+        /* @__PURE__ */ e(H, { className: r.selectIcon })
       ] }),
       /* @__PURE__ */ a("div", { className: t({ display: "flex", alignItems: "center" }), children: [
-        /* @__PURE__ */ e(Q, { className: r.prevTrigger, children: /* @__PURE__ */ e(O, {}) }),
+        /* @__PURE__ */ e(X, { className: r.prevTrigger, children: /* @__PURE__ */ e(V, {}) }),
         /* @__PURE__ */ e(
-          U,
+          Z,
           {
             className: t({
               appearance: "none",
@@ -169,25 +171,25 @@ const We = H(
             })
           }
         ),
-        /* @__PURE__ */ e(X, { className: r.nextTrigger, children: /* @__PURE__ */ e(j, {}) })
+        /* @__PURE__ */ e($, { className: r.nextTrigger, children: /* @__PURE__ */ e(A, {}) })
       ] })
     ] }),
-    /* @__PURE__ */ a(Z, { className: r.table, children: [
-      /* @__PURE__ */ e($, { children: /* @__PURE__ */ e(b, { children: o.weekDays.map((l, m) => /* @__PURE__ */ e(
-        M,
+    /* @__PURE__ */ a(M, { className: r.table, children: [
+      /* @__PURE__ */ e(ee, { children: /* @__PURE__ */ e(y, { children: o.weekDays.map((l, s) => /* @__PURE__ */ e(
+        re,
         {
           className: r.tableHeader,
           children: l.narrow
         },
-        m
+        s
       )) }) }),
-      /* @__PURE__ */ e(ee, { children: o.weeks.map((l, m) => /* @__PURE__ */ e(b, { children: l.map((n, c) => /* @__PURE__ */ e(
-        re,
+      /* @__PURE__ */ e(ie, { children: o.weeks.map((l, s) => /* @__PURE__ */ e(y, { children: l.map((n, c) => /* @__PURE__ */ e(
+        ae,
         {
           value: n,
           className: r.tableCell,
           children: /* @__PURE__ */ e(
-            ie,
+            te,
             {
               className: r.tableCellTrigger,
               children: n.day
@@ -195,10 +197,10 @@ const We = H(
           )
         },
         c
-      )) }, m)) })
+      )) }, s)) })
     ] })
   ] }) }) }) });
 };
 export {
-  We as DatePicker
+  je as DatePicker
 };

package/dist/components/Divider/Divider.d.ts

@@ -9,7 +9,7 @@ export declare const DividerStyle: import('../../../styled-system/types').Recipe
             borderColor: "sd.reference.color.scale.gray.300";
         };
         dark: {
-            borderColor: "sd.system.color.component.outlineVariant";
+            borderColor: "sd.system.color.component.outlineDim";
         };
     };
     type: {

package/dist/components/Divider/Divider.js

@@ -1,6 +1,6 @@
 import { jsx as d } from "react/jsx-runtime";
 import { cva as n } from "../../styled-system/css/cva.js";
-import { cx as a } from "../../styled-system/css/cx.js";
+import { cx as l } from "../../styled-system/css/cx.js";
 const r = n({
   base: {
     border: "none"
@@ -14,7 +14,7 @@ const r = n({
         borderColor: "sd.reference.color.scale.gray.300"
       },
       dark: {
-        borderColor: "sd.system.color.component.outlineVariant"
+        borderColor: "sd.system.color.component.outlineDim"
       }
     },
     type: {
@@ -38,8 +38,8 @@ const r = n({
     type: "horizontal"
   }
 }), h = (e) => {
-  const [o, t] = r.splitVariantProps(e), { className: s, ...i } = t;
-  return /* @__PURE__ */ d("hr", { className: a(r(o), s), ...i });
+  const [o, s] = r.splitVariantProps(e), { className: t, ...i } = s;
+  return /* @__PURE__ */ d("hr", { className: l(r(o), t), ...i });
 };
 export {
   h as Divider,

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" | "item" | "button" | "itemGroup" | "itemIcon" | "buttonIcon", import('../../../styled-system/types').SlotRecipeVariantRecord<"content" | "item" | "button" | "itemGroup" | "itemIcon" | "buttonIcon">>;
+export declare const DropdownMenuStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"item" | "content" | "button" | "itemGroup" | "itemIcon" | "buttonIcon", import('../../../styled-system/types').SlotRecipeVariantRecord<"item" | "content" | "button" | "itemGroup" | "itemIcon" | "buttonIcon">>;
 export type MenuItemProps = {
     value: string;
     label: string;

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

@@ -33,7 +33,7 @@ export declare const IconButtonStyle: import('../../../styled-system/types').Rec
                     bgColor: "sd.system.color.interaction.hoveredVariant";
                 };
                 _focusVisible: {
-                    outlineColor: "sd.system.color.component.outlineVariant";
+                    outlineColor: "sd.system.color.component.outlineDim";
                     bgColor: "sd.system.color.interaction.hoveredVariant";
                 };
             };
@@ -46,7 +46,7 @@ export declare const IconButtonStyle: import('../../../styled-system/types').Rec
                 };
                 _focusVisible: {
                     bgColor: "sd.system.color.interaction.hoveredVariant";
-                    outlineColor: "sd.system.color.component.outlineVariant";
+                    outlineColor: "sd.system.color.component.outlineDim";
                 };
             };
             _disabled: {
@@ -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,8 +1,8 @@
 import { jsx as d } from "react/jsx-runtime";
-import a from "react";
-import { cva as c } from "../../styled-system/css/cva.js";
+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 = c({
+const e = a({
   base: {
     position: "relative",
     display: "inline-flex",
@@ -58,7 +58,7 @@ const e = c({
             bgColor: "sd.system.color.interaction.hoveredVariant"
           },
           _focusVisible: {
-            outlineColor: "sd.system.color.component.outlineVariant",
+            outlineColor: "sd.system.color.component.outlineDim",
             bgColor: "sd.system.color.interaction.hoveredVariant"
           }
         }
@@ -71,7 +71,7 @@ const e = c({
           },
           _focusVisible: {
             bgColor: "sd.system.color.interaction.hoveredVariant",
-            outlineColor: "sd.system.color.component.outlineVariant"
+            outlineColor: "sd.system.color.component.outlineDim"
           }
         },
         _disabled: {
@@ -103,7 +103,7 @@ const e = c({
     styleType: "filled",
     size: "medium"
   }
-}), g = a.forwardRef(
+}), 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 });

package/dist/components/List/ListItem.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps } from 'react';
-export declare const ListItemStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"root" | "description" | "title" | "badge" | "leftIcon" | "rightIcon" | "wrapper" | "textGroup", {
+export declare const ListItemStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"title" | "description" | "root" | "badge" | "leftIcon" | "rightIcon" | "wrapper" | "textGroup", {
     isLargeLeftIcon: {
         true: {
             leftIcon: {

package/dist/components/ModalDialog/ModalDialog.d.ts

@@ -1,6 +1,6 @@
 import { DialogRootProps } from '@ark-ui/react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-declare const ModalDialogStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"content" | "description" | "title" | "backdrop" | "contentInner" | "closeTrigger" | "buttonWrapper", import('../../../styled-system/types').SlotRecipeVariantRecord<"content" | "description" | "title" | "backdrop" | "contentInner" | "closeTrigger" | "buttonWrapper">>;
+declare const ModalDialogStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"title" | "description" | "content" | "backdrop" | "contentInner" | "closeTrigger" | "buttonWrapper", import('../../../styled-system/types').SlotRecipeVariantRecord<"title" | "description" | "content" | "backdrop" | "contentInner" | "closeTrigger" | "buttonWrapper">>;
 type Props = {
     isOpen: boolean;
     title: string;

package/dist/components/NotificationBadge/NotificationBadge.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps } from 'react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-declare const NotificationBadgeStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"root" | "text", {
+declare const NotificationBadgeStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"text" | "root", {
     size: {
         small: {
             root: {

package/dist/components/Pagination/Pagination.d.ts

@@ -1,6 +1,6 @@
 import { default as React, ComponentProps } from 'react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-export declare const PaginationStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"root" | "item" | "ellipsis" | "prevTrigger" | "nextTrigger", {
+export declare const PaginationStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"item" | "root" | "ellipsis" | "prevTrigger" | "nextTrigger", {
     size: {
         medium: {
             root: {