@serendie/ui 2.3.0 → 2.4.0-dev.202601080931

package/README.md

@@ -79,7 +79,7 @@ export default function ClientComponent() {
 
 ### テーマ切り替え
 
-Serendie Design Systemには5つのカラーテーマがあり、デザイントークンもそれに対応します。htmlタグなどに、`data-panda-theme`属性 (`konjo`, `asagi`, `sumire`, `tsutusji`, `kurikawa`)を付与することでカラーテーマを切り替えることができます。
+Serendie Design Systemには5つのカラーテーマがあり、デザイントークンもそれに対応します。htmlタグなどに、`data-panda-theme`属性 (`konjo`, `asagi`, `sumire`, `tsutsuji`, `kurikawa`)を付与することでカラーテーマを切り替えることができます。
 各テーマについては[こちら](https://serendie.design/foundations/theming/)を参照してください。
 
 ```html
@@ -214,7 +214,7 @@ export const dictionary = {
 ```env
 FIGMA_ACCESS_TOKEN="YOUR_TOKEN"
 FIGMA_FILE_KEY="YOUR_FILE_KEY"
-# FIGMA_TRANSLATION_COLLECTION="locales"  # オプション（デフォルト: locales）
+# FIGMA_TRANSLATION_COLLECTION="_i18n"  # オプション（デフォルト: _i18n）
 ```
 
 #### 翻訳管理コマンド

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

@@ -1,4 +1,5 @@
-import { default as React } from 'react';
+import { default as React, ComponentProps } from 'react';
+import { RecipeVariantProps } from '../../../styled-system/types';
 export declare const ButtonStyle: import('../../../styled-system/types').RecipeRuntimeFn<{
     styleType: {
         filled: {
@@ -112,9 +113,19 @@ export declare const ButtonStyle: import('../../../styled-system/types').RecipeR
         };
     };
 }>;
+type ExclusiveIconProps = ({
+    leftIcon?: React.ReactElement;
+} & {
+    rightIcon?: never;
+}) | ({
+    leftIcon?: never;
+} & {
+    rightIcon?: React.ReactElement;
+});
 type ButtonLoadingProps = {
     isLoading?: boolean;
 };
+export type ButtonProps = ComponentProps<"button"> & RecipeVariantProps<typeof ButtonStyle> & ExclusiveIconProps & ButtonLoadingProps;
 export declare const Button: React.ForwardRefExoticComponent<(Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     styleType?: "filled" | "outlined" | "ghost" | "rectangle" | undefined;
     size?: "small" | "medium" | undefined;

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

@@ -11,4 +11,11 @@ export declare const DatePicker: import('react').ForwardRefExoticComponent<ArkDa
     startPlaceholder?: string;
     endPlaceholder?: string;
     isCalendarOnly?: boolean;
+    /**
+     * Portalを使用するかどうか
+     * - `true` (デフォルト): body直下にポータルする。ModalDialog/Drawer内にある場合は自動的にそのコンテンツ内にポータルされる
+     * - `false`: ポータルを使用せず、その場にレンダリングする
+     * @default true
+     */
+    portalled?: boolean;
 } & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/DatePicker/DatePicker.js

@@ -1,206 +1,216 @@
-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 _ } 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 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(
+import { jsx as e, jsxs as a, Fragment as T } from "react/jsx-runtime";
+import { SerendieSymbolCalendar as B, SerendieSymbolArrowRight as J, SerendieSymbolChevronDown as Y, SerendieSymbolChevronLeft as _, SerendieSymbolChevronRight as z } from "@serendie/symbols";
+import { forwardRef as E, useState as G } from "react";
+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 { 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 i } 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";
+import { DatePickerView as re } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-view.js";
+import { DatePickerContext as te } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-context.js";
+import { DatePickerViewControl as ae } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-view-control.js";
+import { DatePickerYearSelect as ie } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-year-select.js";
+import { DatePickerPrevTrigger as oe } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-prev-trigger.js";
+import { DatePickerMonthSelect as le } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-month-select.js";
+import { DatePickerNextTrigger as ne } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-next-trigger.js";
+import { DatePickerTable as se } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table.js";
+import { DatePickerTableHead as ce } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-head.js";
+import { DatePickerTableRow as v } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-row.js";
+import { DatePickerTableHeader as me } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-header.js";
+import { DatePickerTableBody as de } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-body.js";
+import { DatePickerTableCell as pe } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-cell.js";
+import { DatePickerTableCellTrigger as he } from "../../node_modules/@ark-ui/react/dist/components/date-picker/date-picker-table-cell-trigger.js";
+const Ee = E(
   ({
-    placeholder: r = "日付を選択",
+    placeholder: r,
     label: o,
     required: l,
-    requiredLabel: s,
-    invalid: n,
-    invalidMessage: c,
-    selectionMode: p = "single",
-    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,
+    requiredLabel: n,
+    invalid: s,
+    invalidMessage: m,
+    selectionMode: h = "single",
+    startPlaceholder: w,
+    endPlaceholder: R,
+    locale: u = "ja-JP",
+    isCalendarOnly: F = !1,
+    portalled: g = !0,
+    ...c
+  }, k) => {
+    const d = Q(), I = r ?? d("datePicker.selectDate"), W = w ?? d("datePicker.startDate"), O = R ?? d("datePicker.endDate"), j = S(), [A, H] = C.splitVariantProps({
+      ...c
+    }), t = C(A), [N, p] = G(!1), V = h === "range", { triggerRef: q, portalContainerRef: L } = K(g);
+    return F ? /* @__PURE__ */ e(
+      y,
       {
-        locale: P,
-        ...I,
-        ref: N,
-        selectionMode: p,
+        locale: u,
+        ...H,
+        ref: k,
+        selectionMode: h,
         open: !0,
-        className: i.root,
-        children: /* @__PURE__ */ e(C, {})
+        className: t.root,
+        children: /* @__PURE__ */ e(x, {})
       }
     ) : /* @__PURE__ */ a(
-      b,
+      y,
       {
-        locale: P,
-        ...m,
-        ref: N,
-        selectionMode: p,
-        className: i.root,
-        open: g,
-        onOpenChange: (u) => {
-          var k;
-          d(u.open), (k = m.onOpenChange) == null || k.call(m, u);
+        locale: u,
+        ...c,
+        ref: k,
+        selectionMode: h,
+        className: t.root,
+        open: N,
+        onOpenChange: (D) => {
+          var b;
+          p(D.open), (b = c.onOpenChange) == null || b.call(c, D);
         },
         children: [
-          /* @__PURE__ */ a(v, { children: [
-            o && /* @__PURE__ */ a(J, { className: i.label, children: [
+          /* @__PURE__ */ a(T, { children: [
+            o && /* @__PURE__ */ a(X, { className: t.label, children: [
               o,
-              l && /* @__PURE__ */ e("span", { className: i.labelRequired, children: s ?? "必須" })
+              l && /* @__PURE__ */ e("span", { className: t.labelRequired, children: n ?? d("common.required") })
             ] }),
             /* @__PURE__ */ a(
-              Y,
+              Z,
               {
-                className: h(
-                  i.inputWrapper,
-                  t({
+                className: f(
+                  t.inputWrapper,
+                  i({
                     _expanded: {
                       outlineWidth: "sd.system.dimension.border.thick",
                       outlineColor: "sd.system.color.impression.primary"
                     }
                   })
                 ),
-                "data-expanded": g ? !0 : void 0,
-                "data-Invalid": n,
+                "data-expanded": N ? !0 : void 0,
+                "data-Invalid": s,
                 children: [
-                  /* @__PURE__ */ e("div", { className: i.leftContent, children: /* @__PURE__ */ e(_, { className: t({ display: "flex" }), children: /* @__PURE__ */ e(O, {}) }) }),
-                  W ? /* @__PURE__ */ a(
+                  /* @__PURE__ */ e("div", { className: t.leftContent, children: /* @__PURE__ */ e(
+                    $,
+                    {
+                      className: i({ display: "flex" }),
+                      ref: q,
+                      children: /* @__PURE__ */ e(B, {})
+                    }
+                  ) }),
+                  V ? /* @__PURE__ */ a(
                     "div",
                     {
-                      className: t({
+                      className: i({
                         display: "grid",
                         gridTemplateColumns: "1fr auto 1fr",
                         alignItems: "center"
                       }),
                       children: [
                         /* @__PURE__ */ e(
-                          f,
+                          P,
                           {
                             index: 0,
-                            placeholder: S,
-                            className: h(
-                              i.input,
-                              t({
+                            placeholder: W,
+                            className: f(
+                              t.input,
+                              i({
                                 minWidth: "100%",
                                 borderRadius: "sd.system.dimension.radius.medium"
                               })
                             ),
-                            onFocus: () => d(!0)
+                            onFocus: () => p(!0)
                           }
                         ),
-                        /* @__PURE__ */ e(j, {}),
+                        /* @__PURE__ */ e(J, {}),
                         /* @__PURE__ */ e(
-                          f,
+                          P,
                           {
                             index: 1,
-                            placeholder: T,
-                            className: h(
-                              i.input,
-                              t({
+                            placeholder: O,
+                            className: f(
+                              t.input,
+                              i({
                                 minWidth: "100%",
                                 borderRadius: "sd.system.dimension.radius.medium"
                               })
                             ),
-                            onFocus: () => d(!0)
+                            onFocus: () => p(!0)
                           }
                         )
                       ]
                     }
                   ) : /* @__PURE__ */ e(
-                    f,
+                    P,
                     {
-                      placeholder: r,
-                      className: i.input,
-                      onFocus: () => d(!0)
+                      placeholder: I,
+                      className: t.input,
+                      onFocus: () => p(!0)
                     }
                   ),
                   /* @__PURE__ */ e("div", {})
                 ]
               }
             ),
-            n && c && /* @__PURE__ */ e("div", { className: i.messageField, children: /* @__PURE__ */ e("p", { className: i.invalidMessage, children: c }) })
+            s && m && /* @__PURE__ */ e("div", { className: t.messageField, children: /* @__PURE__ */ e("p", { className: t.invalidMessage, children: m }) })
           ] }),
-          /* @__PURE__ */ e(B, { children: /* @__PURE__ */ e(z, { className: R.positioner, children: /* @__PURE__ */ e(C, {}) }) })
+          /* @__PURE__ */ e(U, { disabled: !g, container: L, children: /* @__PURE__ */ e(M, { className: j.positioner, children: /* @__PURE__ */ e(x, {}) }) })
         ]
       }
     );
   }
-), 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: [
+), x = () => {
+  const r = S();
+  return /* @__PURE__ */ e(ee, { className: r.content, children: /* @__PURE__ */ e(re, { view: "day", className: r.view, children: /* @__PURE__ */ e(te, { children: (o) => /* @__PURE__ */ a(T, { children: [
+    /* @__PURE__ */ a(ae, { className: r.viewControl, children: [
       /* @__PURE__ */ a("div", { className: r.selectWrapper, children: [
-        /* @__PURE__ */ e(U, { className: r.select }),
-        /* @__PURE__ */ e(H, { className: r.selectIcon })
+        /* @__PURE__ */ e(ie, { className: r.select }),
+        /* @__PURE__ */ e(Y, { className: r.selectIcon })
       ] }),
-      /* @__PURE__ */ a("div", { className: t({ display: "flex", alignItems: "center" }), children: [
-        /* @__PURE__ */ e(X, { className: r.prevTrigger, children: /* @__PURE__ */ e(V, {}) }),
+      /* @__PURE__ */ a("div", { className: i({ display: "flex", alignItems: "center" }), children: [
+        /* @__PURE__ */ e(oe, { className: r.prevTrigger, children: /* @__PURE__ */ e(_, {}) }),
         /* @__PURE__ */ e(
-          Z,
+          le,
           {
-            className: t({
+            className: i({
               appearance: "none",
               textAlign: "center"
             })
           }
         ),
-        /* @__PURE__ */ e($, { className: r.nextTrigger, children: /* @__PURE__ */ e(A, {}) })
+        /* @__PURE__ */ e(ne, { className: r.nextTrigger, children: /* @__PURE__ */ e(z, {}) })
       ] })
     ] }),
-    /* @__PURE__ */ a(M, { className: r.table, children: [
-      /* @__PURE__ */ e(ee, { children: /* @__PURE__ */ e(y, { children: o.weekDays.map((l, s) => /* @__PURE__ */ e(
-        re,
+    /* @__PURE__ */ a(se, { className: r.table, children: [
+      /* @__PURE__ */ e(ce, { children: /* @__PURE__ */ e(v, { children: o.weekDays.map((l, n) => /* @__PURE__ */ e(
+        me,
         {
           className: r.tableHeader,
           children: l.narrow
         },
-        s
+        n
       )) }) }),
-      /* @__PURE__ */ e(ie, { children: o.weeks.map((l, s) => /* @__PURE__ */ e(y, { children: l.map((n, c) => /* @__PURE__ */ e(
-        ae,
+      /* @__PURE__ */ e(de, { children: o.weeks.map((l, n) => /* @__PURE__ */ e(v, { children: l.map((s, m) => /* @__PURE__ */ e(
+        pe,
         {
-          value: n,
+          value: s,
           className: r.tableCell,
           children: /* @__PURE__ */ e(
-            te,
+            he,
             {
               className: r.tableCellTrigger,
-              children: n.day
+              children: s.day
             }
           )
         },
-        c
-      )) }, s)) })
+        m
+      )) }, n)) })
     ] })
   ] }) }) }) });
 };
 export {
-  je as DatePicker
+  Ee as DatePicker
 };

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -11,5 +11,12 @@ export type DropdownMenuProps = {
     items: MenuItemProps[];
     disabled?: boolean;
     icon?: React.ReactElement;
+    /**
+     * Portalを使用するかどうか
+     * - `true` (デフォルト): body直下にポータルする。ModalDialog/Drawer内にある場合は自動的にそのコンテンツ内にポータルされる
+     * - `false`: ポータルを使用せず、その場にレンダリングする
+     * @default true
+     */
+    portalled?: boolean;
 };
 export declare const DropdownMenu: React.FC<DropdownMenuProps & MenuRootProps>;

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -1,16 +1,17 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { SerendieSymbolMenu as l, SerendieSymbolChevronDown as c } from "@serendie/symbols";
-import { Button as p } from "../Button/Button.js";
-import { IconButton as y } from "../IconButton/IconButton.js";
-import { Portal as u } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
-import { sva as g } from "../../styled-system/css/sva.js";
-import { MenuRoot as h } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-root.js";
-import { MenuTrigger as f } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-trigger.js";
-import { MenuPositioner as x } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-positioner.js";
-import { MenuContent as b } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-content.js";
-import { MenuItemGroup as S } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-item-group.js";
-import { MenuItem as v } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-item.js";
-const I = g({
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { SerendieSymbolMenu as u, SerendieSymbolChevronDown as y } from "@serendie/symbols";
+import { Button as g } from "../Button/Button.js";
+import { IconButton as h } from "../IconButton/IconButton.js";
+import { useAutoPortalContainer as f } from "../../hooks/useAutoPortalContainer.js";
+import { Portal as x } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
+import { sva as b } from "../../styled-system/css/sva.js";
+import { MenuRoot as S } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-root.js";
+import { MenuTrigger as I } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-trigger.js";
+import { MenuPositioner as v } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-positioner.js";
+import { MenuContent as _ } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-content.js";
+import { MenuItemGroup as C } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-item-group.js";
+import { MenuItem as M } from "../../node_modules/@ark-ui/react/dist/components/menu/menu-item.js";
+const w = b({
   slots: ["content", "itemGroup", "item", "itemIcon", "button", "buttonIcon"],
   base: {
     content: {
@@ -18,7 +19,8 @@ const I = g({
       borderRadius: "sd.system.dimension.radius.medium",
       bg: "sd.system.color.component.surface",
       boxShadow: "sd.system.elevation.shadow.level1",
-      outline: "none"
+      outline: "none",
+      zIndex: "sd.system.elevation.zIndex.dropdown"
     },
     itemGroup: {
       width: 240
@@ -81,17 +83,18 @@ const I = g({
       transition: "transform 0.2s"
     }
   }
-}), A = ({
-  styleType: m = "default",
-  title: s,
-  items: d,
-  disabled: n,
-  icon: r,
-  ...a
+}), O = ({
+  styleType: d = "default",
+  title: n,
+  items: a,
+  disabled: s,
+  icon: l,
+  portalled: i = !0,
+  ...c
 }) => {
-  const o = I();
-  return /* @__PURE__ */ i(
-    h,
+  const o = w(), { triggerRef: r, portalContainerRef: p } = f(i);
+  return /* @__PURE__ */ m(
+    S,
     {
       positioning: {
         offset: {
@@ -99,30 +102,32 @@ const I = g({
           crossAxis: 0
         }
       },
-      ...a,
+      ...c,
       children: [
-        /* @__PURE__ */ e(f, { asChild: !0, children: m === "iconButton" ? /* @__PURE__ */ e(
-          y,
+        /* @__PURE__ */ e(I, { asChild: !0, children: d === "iconButton" ? /* @__PURE__ */ e(
+          h,
           {
-            icon: r || /* @__PURE__ */ e(l, { className: o.buttonIcon }),
+            ref: r,
+            icon: l || /* @__PURE__ */ e(u, { className: o.buttonIcon }),
             shape: "rectangle",
-            disabled: n,
+            disabled: s,
             styleType: "outlined",
-            title: s
+            title: n
           }
         ) : /* @__PURE__ */ e(
-          p,
+          g,
           {
+            ref: r,
             styleType: "rectangle",
             size: "medium",
-            disabled: n,
-            rightIcon: /* @__PURE__ */ e(c, { className: o.buttonIcon }),
+            disabled: s,
+            rightIcon: /* @__PURE__ */ e(y, { className: o.buttonIcon }),
             className: o.button,
-            children: s
+            children: n
           }
         ) }),
-        /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(b, { className: o.content, children: /* @__PURE__ */ e(S, { className: o.itemGroup, children: d.map((t) => /* @__PURE__ */ i(
-          v,
+        /* @__PURE__ */ e(x, { disabled: !i, container: p, children: /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(_, { className: o.content, children: /* @__PURE__ */ e(C, { className: o.itemGroup, children: a.map((t) => /* @__PURE__ */ m(
+          M,
           {
             value: t.value,
             className: o.item,
@@ -138,6 +143,6 @@ const I = g({
   );
 };
 export {
-  A as DropdownMenu,
-  I as DropdownMenuStyle
+  O as DropdownMenu,
+  w as DropdownMenuStyle
 };

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

@@ -1,5 +1,6 @@
 import { DialogRootProps } from '@ark-ui/react';
 import { RecipeVariantProps } from '../../../styled-system/css';
+import { ButtonProps } from '../Button';
 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;
@@ -9,6 +10,7 @@ type Props = {
     cancelButtonLabel?: string;
     submitButtonLabel: string;
     onButtonClick: () => void;
+    submitButtonProps?: ButtonProps;
 };
 export type ModalDialogProps = Props & DialogRootProps & RecipeVariantProps<typeof ModalDialogStyle>;
 export declare const ModalDialog: React.FC<ModalDialogProps>;