@serendie/ui 2.2.3 → 2.2.4-dev.202510160446

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

@@ -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/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/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

@@ -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/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: {

package/dist/components/Search/Search.d.ts

@@ -1,6 +1,6 @@
 import { ComboboxRootProps } from '@ark-ui/react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-export declare const SearchStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"input" | "icon" | "combobox" | "control" | "comboboxItem" | "iconBox" | "closeIcon", {
+export declare const SearchStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"icon" | "input" | "combobox" | "control" | "comboboxItem" | "iconBox" | "closeIcon", {
     size: {
         medium: {
             iconBox: {

package/dist/components/Select/Select.d.ts

@@ -1,6 +1,6 @@
 import { SelectRootProps } from '@ark-ui/react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-export declare const SelectStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"content" | "root" | "item" | "valueText" | "iconBox" | "trigger", {
+export declare const SelectStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"item" | "content" | "root" | "valueText" | "iconBox" | "trigger", {
     size: {
         medium: {
             root: {

package/dist/components/Select/Select.js

@@ -1,5 +1,5 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { SerendieSymbolChevronDown as f } from "@serendie/symbols";
+import { SerendieSymbolChevronDown as S } from "@serendie/symbols";
 import { List as v } from "../List/List.js";
 import { ListItem as w } from "../List/ListItem.js";
 import { createListCollection as _ } from "../../node_modules/@ark-ui/react/dist/components/collection/list-collection.js";
@@ -15,7 +15,7 @@ import { SelectValueText as P } from "../../node_modules/@ark-ui/react/dist/comp
 import { SelectPositioner as B } from "../../node_modules/@ark-ui/react/dist/components/select/select-positioner.js";
 import { SelectContent as I } from "../../node_modules/@ark-ui/react/dist/components/select/select-content.js";
 import { SelectItem as O } from "../../node_modules/@ark-ui/react/dist/components/select/select-item.js";
-const n = T({
+const l = T({
   slots: ["root", "valueText", "trigger", "content", "item", "iconBox"],
   base: {
     root: {
@@ -94,8 +94,12 @@ const n = T({
       w: "40px",
       display: "flex",
       justifyContent: "center",
+      transition: "transform 0.2s",
       "[data-disabled] &": {
         color: "sd.system.color.interaction.disabledOnSurface"
+      },
+      "[data-state='open'] &": {
+        transform: "rotate(180deg)"
       }
     }
   },
@@ -163,7 +167,7 @@ const n = T({
   items: u = [],
   ...x
 }) => {
-  const [t, h] = n.splitVariantProps(x), o = n(t), { collection: j, ...b } = h, l = _({
+  const [t, h] = l.splitVariantProps(x), o = l(t), { collection: j, ...b } = h, n = _({
     items: u,
     itemToString: (s) => s.label,
     itemToValue: (s) => s.value
@@ -172,7 +176,7 @@ const n = T({
     N,
     {
       ...b,
-      collection: l,
+      collection: n,
       invalid: a,
       className: z(o.root, g),
       positioning: {
@@ -216,7 +220,7 @@ const n = T({
               className: o.valueText
             }
           ),
-          /* @__PURE__ */ e(f, { className: o.iconBox })
+          /* @__PURE__ */ e(S, { className: o.iconBox })
         ] }) }),
         a && m && /* @__PURE__ */ e(
           "div",
@@ -231,7 +235,7 @@ const n = T({
             children: m
           }
         ),
-        /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e(B, { children: /* @__PURE__ */ e(I, { className: o.content, children: /* @__PURE__ */ e(v, { children: l.items.map((s, S) => /* @__PURE__ */ e(O, { item: s, children: /* @__PURE__ */ e(
+        /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e(B, { children: /* @__PURE__ */ e(I, { className: o.content, children: /* @__PURE__ */ e(v, { children: n.items.map((s, f) => /* @__PURE__ */ e(O, { item: s, children: /* @__PURE__ */ e(
           w,
           {
             title: s.label,
@@ -239,12 +243,12 @@ const n = T({
             className: o.item,
             size: t.size == "small" ? "small" : void 0
           }
-        ) }, S)) }) }) }) })
+        ) }, f)) }) }) }) })
       ]
     }
   );
 };
 export {
   M as Select,
-  n as SelectStyle
+  l as SelectStyle
 };

package/dist/components/Switch/Switch.d.ts

@@ -1,6 +1,6 @@
 import { Switch as ArkSwitch, SwitchRootProps } from '@ark-ui/react';
 import { RecipeVariantProps } from '../../../styled-system/css';
-export declare const SwitchStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"root" | "label" | "helperText" | "textGroup" | "control" | "thumb", import('../../../styled-system/types').SlotRecipeVariantRecord<"root" | "label" | "helperText" | "textGroup" | "control" | "thumb">>;
+export declare const SwitchStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"label" | "root" | "helperText" | "textGroup" | "control" | "thumb", import('../../../styled-system/types').SlotRecipeVariantRecord<"label" | "root" | "helperText" | "textGroup" | "control" | "thumb">>;
 type SwitchItemProps = {
     label: string;
     helperText?: string;

package/dist/components/Tabs/Tabs.d.ts

@@ -1,3 +1,3 @@
 import { Tabs as ArkTabs } from '@ark-ui/react';
-export declare const TabsStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"root" | "list", import('../../../styled-system/types').SlotRecipeVariantRecord<"root" | "list">>;
+export declare const TabsStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"list" | "root", import('../../../styled-system/types').SlotRecipeVariantRecord<"list" | "root">>;
 export declare const Tabs: ({ children, className, ...props }: ArkTabs.RootProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/TextArea/TextArea.d.ts

@@ -6,4 +6,5 @@ export declare const TextArea: React.ForwardRefExoticComponent<{
     invalidMessage?: string;
     autoAdjustHeight?: boolean;
     requiredLabel?: string;
+    fullWidth?: boolean;
 } & Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/TextArea/TextArea.js

@@ -93,9 +93,16 @@ const p = C({
           minHeight: "2lh"
         }
       }
+    },
+    fullWidth: {
+      true: {
+        root: {
+          width: "100%"
+        }
+      }
     }
   }
-}), W = w(
+}), A = w(
   ({
     placeholder: y,
     label: r,
@@ -104,11 +111,11 @@ const p = C({
     requiredLabel: u,
     invalidMessage: o,
     invalid: a,
-    disabled: n,
+    disabled: l,
     className: g,
-    ...l
-  }, x) => {
-    const h = c.useRef(null), b = _(h, x), [f, S] = p.splitVariantProps(l), e = p(f), v = t || a && o, m = l.id || c.useId();
+    ...n
+  }, h) => {
+    const x = c.useRef(null), b = _(x, h), [f, S] = p.splitVariantProps(n), e = p(f), v = t || a && o, m = n.id || c.useId();
     return /* @__PURE__ */ i("div", { className: N(e.root, g), children: [
       r ? /* @__PURE__ */ i("label", { className: e.label, htmlFor: m, children: [
         r,
@@ -119,7 +126,7 @@ const p = C({
         {
           className: e.wrapper,
           "data-invalid": a ? !0 : void 0,
-          "data-disabled": n ? !0 : void 0,
+          "data-disabled": l ? !0 : void 0,
           children: /* @__PURE__ */ s(
             "textarea",
             {
@@ -127,7 +134,7 @@ const p = C({
               id: m,
               placeholder: y,
               required: d,
-              disabled: n,
+              disabled: l,
               className: e.textarea,
               ...S
             }
@@ -142,5 +149,5 @@ const p = C({
   }
 );
 export {
-  W as TextArea
+  A as TextArea
 };

package/dist/components/TextField/TextField.d.ts

@@ -7,4 +7,6 @@ export declare const TextField: React.ForwardRefExoticComponent<{
     leftContent?: React.ReactNode;
     rightContent?: React.ReactNode;
     requiredLabel?: string;
+} & {
+    fullWidth?: boolean | undefined;
 } & Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/components/TextField/TextField.js

@@ -2,7 +2,7 @@ import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import { SerendieSymbolAlertCircle as T, SerendieSymbolClose as W } from "@serendie/symbols";
 import q from "../../node_modules/merge-refs/dist/esm/index.js";
 import m, { forwardRef as z } from "react";
-import { textFieldRecipe as x } from "../../styled-system/recipes/text-field-recipe.js";
+import { textFieldRecipe as x } from "../../recipes/textFieldRecipe.js";
 import { cx as B } from "../../styled-system/css/cx.js";
 import { css as b } from "../../styled-system/css/css.js";
 const M = z(
@@ -23,7 +23,9 @@ const M = z(
     rightContent: p,
     ...l
   }, y) => {
-    const o = m.useRef(null), C = q(o, y), [P, _] = x.splitVariantProps(l), t = x(P), j = i || a && c, [I, k] = m.useState(l.defaultValue || f), v = l.id || m.useId(), A = () => {
+    const o = m.useRef(null), C = q(o, y), [P, _] = x.splitVariantProps({
+      ...l
+    }), t = x(P), j = i || a && c, [I, k] = m.useState(l.defaultValue || f), v = l.id || m.useId(), A = () => {
       var R;
       const s = {
         target: { value: "" }

package/dist/components/Toast/Toast.d.ts

@@ -1,5 +1,5 @@
 import { createToaster } from '@ark-ui/react';
-export declare const ToastStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"root" | "icon" | "text" | "textGroup", {
+export declare const ToastStyle: import('../../../styled-system/types').SlotRecipeRuntimeFn<"icon" | "text" | "root" | "textGroup", {
     variant: {
         default: {
             root: {