@serendie/ui 2.3.0-dev.202512090236 → 2.3.0-dev.202601080645

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.js

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

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>;

package/dist/components/ModalDialog/ModalDialog.js

@@ -1,16 +1,17 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
 import { Button as i } from "../Button/Button.js";
-import { Portal as c } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
-import { sva as g } from "../../styled-system/css/sva.js";
-import { DialogRoot as y } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-root.js";
-import { DialogBackdrop as x } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-backdrop.js";
-import { DialogPositioner as f } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-positioner.js";
-import { DialogContent as h } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-content.js";
-import { cx as u } from "../../styled-system/css/cx.js";
-import { DialogTitle as b } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-title.js";
-import { DialogDescription as D } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-description.js";
-import { DialogCloseTrigger as v } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-close-trigger.js";
-const I = g({
+import { useTranslations as y } from "../../i18n/index.js";
+import { Portal as x } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
+import { sva as f } from "../../styled-system/css/sva.js";
+import { DialogRoot as h } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-root.js";
+import { DialogBackdrop as u } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-backdrop.js";
+import { DialogPositioner as b } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-positioner.js";
+import { DialogContent as D } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-content.js";
+import { cx as v } from "../../styled-system/css/cx.js";
+import { DialogTitle as I } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-title.js";
+import { DialogDescription as k } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-description.js";
+import { DialogCloseTrigger as C } from "../../node_modules/@ark-ui/react/dist/components/dialog/dialog-close-trigger.js";
+const N = f({
   slots: [
     "backdrop",
     "content",
@@ -74,31 +75,32 @@ const I = g({
       }
     }
   }
-}), R = ({
+}), q = ({
   isOpen: n,
-  title: d,
-  cancelButtonLabel: a,
+  title: a,
+  cancelButtonLabel: d,
   submitButtonLabel: r,
   onButtonClick: m,
+  submitButtonProps: l,
   children: p,
-  className: l,
-  ...o
+  className: c,
+  ...t
 }) => {
-  const s = I(o);
-  return /* @__PURE__ */ e(y, { open: n, ...o, children: /* @__PURE__ */ t(c, { children: [
-    /* @__PURE__ */ e(x, { className: s.backdrop }),
-    /* @__PURE__ */ e(f, { children: /* @__PURE__ */ t(h, { className: u(s.content, l), children: [
-      /* @__PURE__ */ t("div", { className: s.contentInner, children: [
-        /* @__PURE__ */ e(b, { className: s.title, children: d }),
-        /* @__PURE__ */ e(D, { className: s.description, children: p })
+  const g = y(), s = N(t);
+  return /* @__PURE__ */ e(h, { open: n, ...t, children: /* @__PURE__ */ o(x, { children: [
+    /* @__PURE__ */ e(u, { className: s.backdrop }),
+    /* @__PURE__ */ e(b, { children: /* @__PURE__ */ o(D, { className: v(s.content, c), children: [
+      /* @__PURE__ */ o("div", { className: s.contentInner, children: [
+        /* @__PURE__ */ e(I, { className: s.title, children: a }),
+        /* @__PURE__ */ e(k, { className: s.description, children: p })
       ] }),
-      /* @__PURE__ */ t("div", { className: s.buttonWrapper, children: [
-        /* @__PURE__ */ e(i, { onClick: m, children: r }),
-        /* @__PURE__ */ e(v, { asChild: !0, children: /* @__PURE__ */ e(i, { styleType: "ghost", children: a || "閉じる" }) })
+      /* @__PURE__ */ o("div", { className: s.buttonWrapper, children: [
+        /* @__PURE__ */ e(i, { ...l, onClick: m, children: r }),
+        /* @__PURE__ */ e(C, { asChild: !0, children: /* @__PURE__ */ e(i, { styleType: "ghost", children: d || g("modalDialog.close") }) })
       ] })
     ] }) })
   ] }) });
 };
 export {
-  R as ModalDialog
+  q as ModalDialog
 };

package/dist/components/Pagination/Pagination.js

@@ -1,16 +1,17 @@
-import { jsx as e, jsxs as T, Fragment as g } from "react/jsx-runtime";
-import { SerendieSymbolChevronLeft as S, SerendieSymbolChevronRight as C } from "@serendie/symbols";
-import _, { useState as I } from "react";
+import { jsx as e, jsxs as C, Fragment as c } from "react/jsx-runtime";
+import { SerendieSymbolChevronLeft as _, SerendieSymbolChevronRight as I } from "@serendie/symbols";
+import N, { useState as j } from "react";
 import { IconButton as m } from "../IconButton/IconButton.js";
-import { sva as N } from "../../styled-system/css/sva.js";
-import { PaginationRoot as j } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-root.js";
-import { cx as z } from "../../styled-system/css/cx.js";
-import { PaginationContext as R } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-context.js";
-import { PaginationPrevTrigger as w } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-prev-trigger.js";
-import { PaginationItem as O } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-item.js";
-import { PaginationEllipsis as W } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-ellipsis.js";
-import { PaginationNextTrigger as F } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-next-trigger.js";
-const L = N({
+import { useTranslations as z } from "../../i18n/index.js";
+import { sva as R } from "../../styled-system/css/sva.js";
+import { PaginationRoot as w } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-root.js";
+import { cx as O } from "../../styled-system/css/cx.js";
+import { PaginationContext as W } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-context.js";
+import { PaginationPrevTrigger as F } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-prev-trigger.js";
+import { PaginationItem as L } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-item.js";
+import { PaginationEllipsis as B } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-ellipsis.js";
+import { PaginationNextTrigger as E } from "../../node_modules/@ark-ui/react/dist/components/pagination/pagination-next-trigger.js";
+const M = R({
   slots: ["root", "item", "ellipsis", "prevTrigger", "nextTrigger"],
   base: {
     root: {
@@ -80,102 +81,104 @@ const L = N({
   defaultVariants: {
     size: "medium"
   }
-}), Q = _.forwardRef(
+}), Z = N.forwardRef(
   ({
     count: d,
-    pageSize: c = 1,
-    page: o,
-    onPageChange: n,
-    siblingCount: p = 2,
-    className: h,
-    size: y = "medium",
-    ...f
-  }, u) => {
-    const [b, P] = I(1), i = L({ size: y }), v = {
+    pageSize: p = 1,
+    page: r,
+    onPageChange: l,
+    siblingCount: h = 2,
+    className: y,
+    size: f = "medium",
+    ...u
+  }, P) => {
+    const [b, v] = j(1), a = M({ size: f }), x = (t) => {
+      r || v(t.page), l == null || l(t);
+    }, i = z(), T = {
       count: d,
-      pageSize: c,
-      siblingCount: p,
-      ...o ? { page: o } : { page: b },
-      onPageChange: (t) => {
-        o || P(t.page), n == null || n(t);
-      }
+      pageSize: p,
+      siblingCount: h,
+      ...r ? { page: r } : { page: b },
+      onPageChange: x
     };
     return /* @__PURE__ */ e(
-      j,
+      w,
       {
-        ref: u,
-        className: z(i.root, h),
-        ...v,
-        ...f,
-        children: /* @__PURE__ */ e(R, { children: (t) => {
-          const r = t.page <= 1, x = Math.ceil(d / c), a = t.page >= x;
-          return /* @__PURE__ */ T(g, { children: [
+        ref: P,
+        className: O(a.root, y),
+        ...T,
+        ...u,
+        children: /* @__PURE__ */ e(W, { children: (t) => {
+          const n = t.page <= 1, S = Math.ceil(d / p), o = t.page >= S;
+          return /* @__PURE__ */ C(c, { children: [
             /* @__PURE__ */ e(
-              w,
+              F,
               {
-                className: i.prevTrigger,
-                disabled: r,
+                className: a.prevTrigger,
+                disabled: n,
                 asChild: !0,
                 children: /* @__PURE__ */ e(
                   m,
                   {
-                    icon: /* @__PURE__ */ e(S, {}),
+                    icon: /* @__PURE__ */ e(_, {}),
                     shape: "rectangle",
                     styleType: "ghost",
                     size: "small",
-                    "aria-label": r ? "最初のページです" : "前のページへ",
-                    disabled: r,
-                    title: r ? "最初のページです" : "前のページへ"
+                    "aria-label": i(n ? "pagination.firstPage" : "pagination.previousPage"),
+                    disabled: n,
+                    title: i(n ? "pagination.firstPage" : "pagination.previousPage")
                   }
                 )
               }
             ),
             t.pages.map(
-              (s, l) => s.type === "page" ? /* @__PURE__ */ e(
-                O,
+              (s, g) => s.type === "page" ? /* @__PURE__ */ e(
+                L,
                 {
                   ...s,
-                  className: i.item,
+                  className: a.item,
                   asChild: !0,
                   children: /* @__PURE__ */ e(
                     m,
                     {
-                      icon: /* @__PURE__ */ e(g, { children: s.value }),
+                      icon: /* @__PURE__ */ e(c, { children: s.value }),
                       shape: "rectangle",
                       styleType: "ghost",
                       size: "small",
-                      "aria-label": `ページ${s.value}へ移動`,
-                      title: `ページ${s.value}へ移動`
+                      "aria-label": i("pagination.goToPage", {
+                        page: s.value
+                      }),
+                      title: i("pagination.goToPage", { page: s.value })
                     }
                   )
                 },
-                l
+                g
               ) : /* @__PURE__ */ e(
-                W,
+                B,
                 {
-                  index: l,
-                  className: i.ellipsis,
+                  index: g,
+                  className: a.ellipsis,
                   children: "…"
                 },
-                l
+                g
               )
             ),
             /* @__PURE__ */ e(
-              F,
+              E,
               {
-                className: i.nextTrigger,
-                disabled: a,
+                className: a.nextTrigger,
+                disabled: o,
                 asChild: !0,
                 children: /* @__PURE__ */ e(
                   m,
                   {
-                    icon: /* @__PURE__ */ e(C, {}),
+                    icon: /* @__PURE__ */ e(I, {}),
                     shape: "rectangle",
                     styleType: "ghost",
                     size: "small",
-                    "aria-label": a ? "最後のページです" : "次のページへ",
-                    disabled: a,
-                    title: a ? "最後のページです" : "次のページへ"
+                    "aria-label": i(o ? "pagination.lastPage" : "pagination.nextPage"),
+                    disabled: o,
+                    title: i(o ? "pagination.lastPage" : "pagination.nextPage")
                   }
                 )
               }
@@ -187,6 +190,6 @@ const L = N({
   }
 );
 export {
-  Q as Pagination,
-  L as PaginationStyle
+  Z as Pagination,
+  M as PaginationStyle
 };

package/dist/components/PasswordField/PasswordField.js

@@ -1,38 +1,39 @@
 import { jsx as o } from "react/jsx-runtime";
-import { forwardRef as n, useState as d } from "react";
-import { TextField as m } from "../TextField/TextField.js";
-import { SerendieSymbolEyeHidden as p, SerendieSymbolEye as y } from "@serendie/symbols";
-import { IconButton as g } from "../IconButton/IconButton.js";
-const w = n(
-  ({ disableToggle: s = !1, disabled: e, ...r }, i) => {
-    const [t, l] = d(!1);
+import { forwardRef as m, useState as p } from "react";
+import { TextField as w } from "../TextField/TextField.js";
+import { SerendieSymbolEyeHidden as y, SerendieSymbolEye as c } from "@serendie/symbols";
+import { IconButton as f } from "../IconButton/IconButton.js";
+import { useTranslations as g } from "../../i18n/index.js";
+const P = m(
+  ({ disableToggle: r = !1, disabled: t, ...i }, a) => {
+    const e = g(), [s, d] = p(!1), l = r ? void 0 : /* @__PURE__ */ o(
+      f,
+      {
+        type: "button",
+        onClick: () => {
+          d((n) => !n);
+        },
+        styleType: "ghost",
+        size: "small",
+        shape: "circle",
+        "aria-label": e(s ? "passwordField.hidePassword" : "passwordField.showPassword"),
+        disabled: t,
+        icon: s ? /* @__PURE__ */ o(y, {}) : /* @__PURE__ */ o(c, {})
+      }
+    );
     return /* @__PURE__ */ o(
-      m,
+      w,
       {
-        type: t ? "text" : "password",
-        rightContent: s ? void 0 : /* @__PURE__ */ o(
-          g,
-          {
-            type: "button",
-            onClick: () => {
-              l((a) => !a);
-            },
-            styleType: "ghost",
-            size: "small",
-            shape: "circle",
-            "aria-label": t ? "パスワードを隠す" : "パスワードを表示",
-            disabled: e,
-            icon: t ? /* @__PURE__ */ o(p, {}) : /* @__PURE__ */ o(y, {})
-          }
-        ),
-        disabled: e,
-        ...r,
-        ref: i
+        type: s ? "text" : "password",
+        rightContent: l,
+        disabled: t,
+        ...i,
+        ref: a
       }
     );
   }
 );
-w.displayName = "PasswordField";
+P.displayName = "PasswordField";
 export {
-  w as PasswordField
+  P as PasswordField
 };

package/dist/components/Select/Select.js

@@ -1,21 +1,22 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-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";
-import { Portal as C } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
-import { sva as T } from "../../styled-system/css/sva.js";
-import { SelectRoot as N } from "../../node_modules/@ark-ui/react/dist/components/select/select-root.js";
-import { cx as z } from "../../styled-system/css/cx.js";
-import { SelectLabel as R } from "../../node_modules/@ark-ui/react/dist/components/select/select-label.js";
-import { css as d } from "../../styled-system/css/css.js";
-import { SelectControl as V } from "../../node_modules/@ark-ui/react/dist/components/select/select-control.js";
-import { SelectTrigger as L } from "../../node_modules/@ark-ui/react/dist/components/select/select-trigger.js";
-import { SelectValueText as P } from "../../node_modules/@ark-ui/react/dist/components/select/select-value-text.js";
-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 l = T({
+import { SerendieSymbolChevronDown as v } from "@serendie/symbols";
+import { List as w } from "../List/List.js";
+import { ListItem as _ } from "../List/ListItem.js";
+import { useTranslations as T } from "../../i18n/index.js";
+import { createListCollection as C } from "../../node_modules/@ark-ui/react/dist/components/collection/list-collection.js";
+import { Portal as N } from "../../node_modules/@ark-ui/react/dist/components/portal/portal.js";
+import { sva as z } from "../../styled-system/css/sva.js";
+import { SelectRoot as R } from "../../node_modules/@ark-ui/react/dist/components/select/select-root.js";
+import { cx as V } from "../../styled-system/css/cx.js";
+import { SelectLabel as L } from "../../node_modules/@ark-ui/react/dist/components/select/select-label.js";
+import { css as r } from "../../styled-system/css/css.js";
+import { SelectControl as P } from "../../node_modules/@ark-ui/react/dist/components/select/select-control.js";
+import { SelectTrigger as B } from "../../node_modules/@ark-ui/react/dist/components/select/select-trigger.js";
+import { SelectValueText as I } from "../../node_modules/@ark-ui/react/dist/components/select/select-value-text.js";
+import { SelectPositioner as O } from "../../node_modules/@ark-ui/react/dist/components/select/select-positioner.js";
+import { SelectContent as j } from "../../node_modules/@ark-ui/react/dist/components/select/select-content.js";
+import { SelectItem as A } from "../../node_modules/@ark-ui/react/dist/components/select/select-item.js";
+const l = z({
   slots: ["root", "valueText", "trigger", "content", "item", "iconBox"],
   base: {
     root: {
@@ -156,9 +157,9 @@ const l = T({
   defaultVariants: {
     size: "medium"
   }
-}), M = ({
+}), oe = ({
   placeholder: c = "",
-  label: r,
+  label: d,
   required: p,
   requiredLabel: y,
   invalid: a,
@@ -167,18 +168,18 @@ const l = T({
   items: u = [],
   ...x
 }) => {
-  const [t, h] = l.splitVariantProps(x), o = l(t), { collection: j, ...b } = h, n = _({
+  const h = T(), [t, b] = l.splitVariantProps(x), o = l(t), { collection: W, ...f } = b, n = C({
     items: u,
     itemToString: (s) => s.label,
     itemToValue: (s) => s.value
   });
   return /* @__PURE__ */ i(
-    N,
+    R,
     {
-      ...b,
+      ...f,
       collection: n,
       invalid: a,
-      className: z(o.root, g),
+      className: V(o.root, g),
       positioning: {
         sameWidth: !0,
         offset: {
@@ -187,45 +188,45 @@ const l = T({
         }
       },
       children: [
-        r && t.size != "small" && // smallの場合はラベルを表示しない
+        d && t.size != "small" && // smallの場合はラベルを表示しない
         /* @__PURE__ */ i(
-          R,
+          L,
           {
-            className: d({
+            className: r({
               textStyle: {
                 base: "sd.system.typography.label.medium_compact",
                 expanded: "sd.system.typography.label.medium_expanded"
               }
             }),
             children: [
-              r,
+              d,
               p && /* @__PURE__ */ e(
                 "span",
                 {
-                  className: d({
+                  className: r({
                     pl: "sd.system.dimension.spacing.extraSmall",
                     color: "sd.system.color.impression.negative"
                   }),
-                  children: y ?? "必須"
+                  children: y ?? h("common.required")
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ e(V, { children: /* @__PURE__ */ i(L, { className: o.trigger, children: [
+        /* @__PURE__ */ e(P, { children: /* @__PURE__ */ i(B, { className: o.trigger, children: [
           /* @__PURE__ */ e(
-            P,
+            I,
             {
               placeholder: c,
               className: o.valueText
             }
           ),
-          /* @__PURE__ */ e(S, { className: o.iconBox })
+          /* @__PURE__ */ e(v, { className: o.iconBox })
         ] }) }),
         a && m && /* @__PURE__ */ e(
           "div",
           {
-            className: d({
+            className: r({
               textStyle: {
                 base: "sd.system.typography.body.extraSmall_compact",
                 expanded: "sd.system.typography.body.extraSmall_expanded"
@@ -235,20 +236,20 @@ const l = T({
             children: m
           }
         ),
-        /* @__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,
+        /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(j, { className: o.content, children: /* @__PURE__ */ e(w, { children: n.items.map((s, S) => /* @__PURE__ */ e(A, { item: s, children: /* @__PURE__ */ e(
+          _,
           {
             title: s.label,
             value: s.value,
             className: o.item,
             size: t.size == "small" ? "small" : void 0
           }
-        ) }, f)) }) }) }) })
+        ) }, S)) }) }) }) })
       ]
     }
   );
 };
 export {
-  M as Select,
+  oe as Select,
   l as SelectStyle
 };

package/dist/components/TextArea/TextArea.js

@@ -1,9 +1,10 @@
-import { jsxs as i, jsx as s } from "react/jsx-runtime";
-import _ from "../../node_modules/merge-refs/dist/esm/index.js";
-import c, { forwardRef as w } from "react";
-import { sva as C } from "../../styled-system/css/sva.js";
-import { cx as N } from "../../styled-system/css/cx.js";
-const p = C({
+import { jsxs as a, jsx as s } from "react/jsx-runtime";
+import w from "../../node_modules/merge-refs/dist/esm/index.js";
+import c, { forwardRef as C } from "react";
+import { useTranslations as N } from "../../i18n/index.js";
+import { sva as R } from "../../styled-system/css/sva.js";
+import { cx as T } from "../../styled-system/css/cx.js";
+const p = R({
   slots: [
     "root",
     "label",
@@ -102,7 +103,7 @@ const p = C({
       }
     }
   }
-}), A = w(
+}), I = C(
   ({
     placeholder: y,
     label: r,
@@ -110,44 +111,44 @@ const p = C({
     required: d,
     requiredLabel: u,
     invalidMessage: o,
-    invalid: a,
-    disabled: l,
+    invalid: i,
+    disabled: n,
     className: g,
-    ...n
+    ...l
   }, 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: [
+    const x = N(), b = c.useRef(null), f = w(b, h), [S, v] = p.splitVariantProps(l), e = p(S), _ = t || i && o, m = l.id || c.useId();
+    return /* @__PURE__ */ a("div", { className: T(e.root, g), children: [
+      r ? /* @__PURE__ */ a("label", { className: e.label, htmlFor: m, children: [
         r,
-        d && /* @__PURE__ */ s("span", { className: e.required, children: u ?? "必須" })
+        d && /* @__PURE__ */ s("span", { className: e.required, children: u ?? x("common.required") })
       ] }) : null,
       /* @__PURE__ */ s(
         "div",
         {
           className: e.wrapper,
-          "data-invalid": a ? !0 : void 0,
-          "data-disabled": l ? !0 : void 0,
+          "data-invalid": i ? !0 : void 0,
+          "data-disabled": n ? !0 : void 0,
           children: /* @__PURE__ */ s(
             "textarea",
             {
-              ref: b,
+              ref: f,
               id: m,
               placeholder: y,
               required: d,
-              disabled: l,
+              disabled: n,
               className: e.textarea,
-              ...S
+              ...v
             }
           )
         }
       ),
-      v && /* @__PURE__ */ i("div", { className: e.messageField, children: [
+      _ && /* @__PURE__ */ a("div", { className: e.messageField, children: [
         t && /* @__PURE__ */ s("p", { className: e.description, children: t }),
-        a && o && /* @__PURE__ */ s("p", { className: e.invalidMessage, children: o })
+        i && o && /* @__PURE__ */ s("p", { className: e.invalidMessage, children: o })
       ] })
     ] });
   }
 );
 export {
-  A as TextArea
+  I as TextArea
 };

package/dist/components/TextField/TextField.js

@@ -2,72 +2,72 @@ import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import { SerendieSymbolAlertCircle as A, SerendieSymbolClose as W } from "@serendie/symbols";
 import z from "../../node_modules/merge-refs/dist/esm/index.js";
 import m, { forwardRef as B } from "react";
-import { textFieldRecipe as x } from "../../recipes/textFieldRecipe.js";
+import { textFieldRecipe as F } from "../../recipes/textFieldRecipe.js";
 import { useTranslations as D } from "../../i18n/index.js";
 import { cx as E } from "../../styled-system/css/cx.js";
-import { css as b } from "../../styled-system/css/css.js";
+import { css as V } from "../../styled-system/css/css.js";
 const U = B(
   ({
-    placeholder: F,
+    placeholder: b,
     label: d,
     description: i,
     required: u,
     requiredLabel: S,
-    invalidMessage: n,
+    invalidMessage: c,
     invalid: r,
-    type: V = "text",
-    disabled: c,
+    type: w = "text",
+    disabled: n,
     onChange: h,
     value: f,
-    className: w,
+    className: y,
     leftContent: N,
     rightContent: p,
-    ...s
-  }, y) => {
-    const C = D(), o = m.useRef(null), P = z(o, y), [_, j] = x.splitVariantProps({
-      ...s
-    }), t = x(_), I = i || r && n, [T, k] = m.useState(s.defaultValue || f), v = s.id || m.useId(), q = () => {
-      var R;
-      const l = {
+    ...l
+  }, C) => {
+    const v = D(), o = m.useRef(null), P = z(o, C), [_, j] = F.splitVariantProps({
+      ...l
+    }), t = F(_), I = i || r && c, [T, k] = m.useState(l.defaultValue || f), g = l.id || m.useId(), q = () => {
+      var x;
+      const s = {
         target: { value: "" }
       };
-      g(l), (R = s.onReset) == null || R.call(s, l), o.current && (o.current.value = "");
-    }, g = (l) => {
-      k(l.target.value), h && h(l);
+      R(s), (x = l.onReset) == null || x.call(l, s), o.current && (o.current.value = "");
+    }, R = (s) => {
+      k(s.target.value), h && h(s);
     };
-    return /* @__PURE__ */ a("div", { className: E(t.root, w), children: [
-      d ? /* @__PURE__ */ a("label", { className: t.label, htmlFor: v, children: [
+    return /* @__PURE__ */ a("div", { className: E(t.root, y), children: [
+      d ? /* @__PURE__ */ a("label", { className: t.label, htmlFor: g, children: [
         d,
-        u && /* @__PURE__ */ e("span", { className: t.labelRequired, children: S ?? C("common.required") })
+        u && /* @__PURE__ */ e("span", { className: t.labelRequired, children: S ?? v("common.required") })
       ] }) : null,
       /* @__PURE__ */ a(
         "div",
         {
           className: t.inputWrapper,
           "data-invalid": r ? !0 : void 0,
-          "data-disabled": c ? !0 : void 0,
+          "data-disabled": n ? !0 : void 0,
           children: [
             N ? /* @__PURE__ */ e("div", { className: t.leftContent, children: N }) : /* @__PURE__ */ e("div", {}),
             /* @__PURE__ */ e(
               "input",
               {
                 ref: P,
-                id: v,
-                placeholder: F,
+                id: g,
+                placeholder: b,
                 required: u,
-                disabled: c,
+                disabled: n,
                 value: f,
-                type: V,
+                type: w,
                 className: t.input,
-                onChange: g,
+                onChange: R,
                 ...j
               }
             ),
-            p ? /* @__PURE__ */ e("div", { className: t.rightContent, children: p }) : /* @__PURE__ */ e("div", { className: t.icon, children: !c && /* disabledの場合はアイコンを表示しない */
+            p ? /* @__PURE__ */ e("div", { className: t.rightContent, children: p }) : /* @__PURE__ */ e("div", { className: t.icon, children: !n && /* disabledの場合はアイコンを表示しない */
             (r ? /* @__PURE__ */ e(
               "span",
               {
-                className: b({
+                className: V({
                   color: "sd.system.color.impression.negative"
                 }),
                 children: /* @__PURE__ */ e(A, { width: 20, height: 20 })
@@ -75,9 +75,9 @@ const U = B(
             ) : T ? /* @__PURE__ */ e(
               "button",
               {
-                className: b({ cursor: "pointer" }),
+                className: V({ cursor: "pointer" }),
                 onClick: q,
-                "aria-label": "値をクリア",
+                "aria-label": v("textField.clearValue"),
                 children: /* @__PURE__ */ e(W, { width: 20, height: 20 })
               }
             ) : null) })
@@ -86,7 +86,7 @@ const U = B(
       ),
       I && /* @__PURE__ */ a("div", { className: t.messageField, children: [
         i && /* @__PURE__ */ e("p", { className: t.description, children: i }),
-        r && n && /* @__PURE__ */ e("p", { className: t.invalidMessage, children: n })
+        r && c && /* @__PURE__ */ e("p", { className: t.invalidMessage, children: c })
       ] })
     ] });
   }

package/dist/i18n/dictionary.d.ts

@@ -1,10 +1,34 @@
 export declare const dictionary: {
     readonly ja: {
         readonly "common.required": "必須";
+        readonly "textField.clearValue": "値をクリア";
+        readonly "passwordField.hidePassword": "パスワードを隠す";
+        readonly "passwordField.showPassword": "パスワードを表示";
+        readonly "datePicker.selectDate": "日付を選択";
+        readonly "datePicker.startDate": "開始日";
+        readonly "datePicker.endDate": "終了日";
         readonly "pagination.page": "{{page}}ページ目";
+        readonly "pagination.firstPage": "最初のページです";
+        readonly "pagination.previousPage": "前のページへ";
+        readonly "pagination.lastPage": "最後のページです";
+        readonly "pagination.nextPage": "次のページへ";
+        readonly "pagination.goToPage": "ページ{{page}}へ移動";
+        readonly "modalDialog.close": "閉じる";
     };
     readonly en: {
         readonly "common.required": "Required";
+        readonly "textField.clearValue": "Clear value";
+        readonly "passwordField.hidePassword": "Hide password";
+        readonly "passwordField.showPassword": "Show password";
+        readonly "datePicker.selectDate": "Select date";
+        readonly "datePicker.startDate": "Start date";
+        readonly "datePicker.endDate": "End date";
         readonly "pagination.page": "Page {{page}}";
+        readonly "pagination.firstPage": "This is the first page";
+        readonly "pagination.previousPage": "Go to previous page";
+        readonly "pagination.lastPage": "This is the last page";
+        readonly "pagination.nextPage": "Go to next page";
+        readonly "pagination.goToPage": "Go to page {{page}}";
+        readonly "modalDialog.close": "Close";
     };
 };

package/dist/i18n/dictionary.js

@@ -1,13 +1,37 @@
-const e = {
+const a = {
   ja: {
     "common.required": "必須",
-    "pagination.page": "{{page}}ページ目"
+    "textField.clearValue": "値をクリア",
+    "passwordField.hidePassword": "パスワードを隠す",
+    "passwordField.showPassword": "パスワードを表示",
+    "datePicker.selectDate": "日付を選択",
+    "datePicker.startDate": "開始日",
+    "datePicker.endDate": "終了日",
+    "pagination.page": "{{page}}ページ目",
+    "pagination.firstPage": "最初のページです",
+    "pagination.previousPage": "前のページへ",
+    "pagination.lastPage": "最後のページです",
+    "pagination.nextPage": "次のページへ",
+    "pagination.goToPage": "ページ{{page}}へ移動",
+    "modalDialog.close": "閉じる"
   },
   en: {
     "common.required": "Required",
-    "pagination.page": "Page {{page}}"
+    "textField.clearValue": "Clear value",
+    "passwordField.hidePassword": "Hide password",
+    "passwordField.showPassword": "Show password",
+    "datePicker.selectDate": "Select date",
+    "datePicker.startDate": "Start date",
+    "datePicker.endDate": "End date",
+    "pagination.page": "Page {{page}}",
+    "pagination.firstPage": "This is the first page",
+    "pagination.previousPage": "Go to previous page",
+    "pagination.lastPage": "This is the last page",
+    "pagination.nextPage": "Go to next page",
+    "pagination.goToPage": "Go to page {{page}}",
+    "modalDialog.close": "Close"
   }
 };
 export {
-  e as dictionary
+  a as dictionary
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@serendie/ui",
   "description": "Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric",
   "license": "MIT",
-  "version": "2.3.0-dev.202512090236",
+  "version": "2.3.0-dev.202601080645",
   "type": "module",
   "types": "./dist/index.d.ts",
   "sideEffects": [