@zenkigen-inc/component-ui 1.22.0 → 1.23.1

package/dist/index.d.mts

@@ -183,6 +183,8 @@ declare const Combobox: typeof ComboboxBase & {
     displayName: string;
 };
 
+type DatePickerSize = 'small' | 'medium' | 'large' | 'x-large';
+
 /**
  * DatePicker のエラーメッセージを表示するコンポーネントのプロパティ
  *
@@ -220,8 +222,15 @@ type DatePickerProps = DatePickerButtonProps & {
     maxDate?: Date;
     /** 未選択時に表示されるプレースホルダーテキスト @default '日付を選択' */
     placeholder?: string;
-    /** トリガーボタンのサイズ @default 'medium' */
-    size?: 'small' | 'medium' | 'large';
+    /**
+     * トリガーボタンのサイズ。`'x-large'` はカレンダーも拡大される（342×437px）
+     *
+     * `'x-large'` はモバイル向け。カレンダーがスクロールしないため、ビューポート幅 358px 以上、
+     * かつトリガーの上下いずれかに 445px 以上の余白が確保できるレイアウトでのみ使用すること。
+     * 満たせない場合はフッターが画面外に出て操作できなくなるため `'large'` 以下を選ぶ。
+     * @default 'medium'
+     */
+    size?: DatePickerSize;
     /** 日付変換に使用するタイムゾーン。選択された日付は指定タイムゾーンの 00:00:00 として返される @default 'Asia/Tokyo' */
     timeZone?: DatePickerTimeZone;
     /** Compound Component（ErrorMessage 等） */
@@ -1122,33 +1131,47 @@ declare const TimePicker: TimePickerComponent;
 type ToastState = 'success' | 'error' | 'warning' | 'information';
 
 type Props$1 = {
-    /** 表示するメッセージの状態（色・アイコンを切り替えます） */
+    /** トーストの状態を表す。表示するアイコンとタイトルの文字色が切り替わる。 */
     state?: ToastState;
-    /** トースト全体の幅。数値・文字列いずれも指定可能 */
+    /** トースト全体の幅。数値・文字列いずれも指定できる。 */
     width?: CSSProperties['width'];
-    /** true で 5 秒後に自動で閉じる */
+    /** true のとき 5 秒後に自動で閉じ、onClickClose を呼ぶ。既定は false（ToastProvider 経由のトーストには既定で true が渡される）。 */
     isAutoClose?: boolean;
-    /** true でフェードイン/アウトのアニメーションを有効化 */
+    /** true のときフェードイン / フェードアウトのアニメーションを有効にする。 */
     isAnimation?: boolean;
-    /** 表示する本文 */
+    /** true のとき閉じるボタンを表示する。isAutoClose が false のときは指定に関わらず必ず表示される。 */
+    hasCloseButton?: boolean;
+    /** タイトルの下に表示する補足テキスト。 */
+    description?: ReactNode;
+    /** タイトルとして表示する本文。 */
     children?: ReactNode;
-    /** クローズボタンや自動クローズ完了時に呼び出されるコールバック */
+    /** 閉じるボタン押下時および自動クローズ完了時に呼ばれる、トースト終了の通知コールバック。 */
     onClickClose: () => void;
 };
-declare function Toast({ state, width, isAutoClose, isAnimation, children, onClickClose, }: Props$1): react.JSX.Element;
+declare function Toast({ state, width, isAutoClose, isAnimation, hasCloseButton, description, children, onClickClose, }: Props$1): react.JSX.Element;
 
 type AddToastArgs = {
-    /** 表示する本文 */
+    /** タイトルとして表示する本文 */
     message: string;
     /** 表示ステート */
     state: ToastState;
+    /** タイトルの下に表示する補足テキスト */
+    description?: ReactNode;
+    /** 閉じるボタンを表示するかどうか。ToastProvider の既定値を上書きする */
+    hasCloseButton?: boolean;
+    /** 5 秒後に自動で閉じるかどうか。既定は true */
+    isAutoClose?: boolean;
 };
-type ToastProviderProps = {
+type ToastContextValue = {
     addToast: (args: AddToastArgs) => void;
     removeToast: (id: number) => void;
 };
-declare const ToastProvider: ({ children }: PropsWithChildren) => react.JSX.Element;
-declare const useToast: () => ToastProviderProps;
+type ToastProviderProps = PropsWithChildren<{
+    /** このプロバイダー配下で追加されるトーストの、閉じるボタン表示の既定値 */
+    hasCloseButton?: boolean;
+}>;
+declare const ToastProvider: ({ children, hasCloseButton }: ToastProviderProps) => react.JSX.Element;
+declare const useToast: () => ToastContextValue;
 
 /** Toggle コンポーネントの公開 Props */
 type Props = {

package/dist/index.d.ts

@@ -183,6 +183,8 @@ declare const Combobox: typeof ComboboxBase & {
     displayName: string;
 };
 
+type DatePickerSize = 'small' | 'medium' | 'large' | 'x-large';
+
 /**
  * DatePicker のエラーメッセージを表示するコンポーネントのプロパティ
  *
@@ -220,8 +222,15 @@ type DatePickerProps = DatePickerButtonProps & {
     maxDate?: Date;
     /** 未選択時に表示されるプレースホルダーテキスト @default '日付を選択' */
     placeholder?: string;
-    /** トリガーボタンのサイズ @default 'medium' */
-    size?: 'small' | 'medium' | 'large';
+    /**
+     * トリガーボタンのサイズ。`'x-large'` はカレンダーも拡大される（342×437px）
+     *
+     * `'x-large'` はモバイル向け。カレンダーがスクロールしないため、ビューポート幅 358px 以上、
+     * かつトリガーの上下いずれかに 445px 以上の余白が確保できるレイアウトでのみ使用すること。
+     * 満たせない場合はフッターが画面外に出て操作できなくなるため `'large'` 以下を選ぶ。
+     * @default 'medium'
+     */
+    size?: DatePickerSize;
     /** 日付変換に使用するタイムゾーン。選択された日付は指定タイムゾーンの 00:00:00 として返される @default 'Asia/Tokyo' */
     timeZone?: DatePickerTimeZone;
     /** Compound Component（ErrorMessage 等） */
@@ -1122,33 +1131,47 @@ declare const TimePicker: TimePickerComponent;
 type ToastState = 'success' | 'error' | 'warning' | 'information';
 
 type Props$1 = {
-    /** 表示するメッセージの状態（色・アイコンを切り替えます） */
+    /** トーストの状態を表す。表示するアイコンとタイトルの文字色が切り替わる。 */
     state?: ToastState;
-    /** トースト全体の幅。数値・文字列いずれも指定可能 */
+    /** トースト全体の幅。数値・文字列いずれも指定できる。 */
     width?: CSSProperties['width'];
-    /** true で 5 秒後に自動で閉じる */
+    /** true のとき 5 秒後に自動で閉じ、onClickClose を呼ぶ。既定は false（ToastProvider 経由のトーストには既定で true が渡される）。 */
     isAutoClose?: boolean;
-    /** true でフェードイン/アウトのアニメーションを有効化 */
+    /** true のときフェードイン / フェードアウトのアニメーションを有効にする。 */
     isAnimation?: boolean;
-    /** 表示する本文 */
+    /** true のとき閉じるボタンを表示する。isAutoClose が false のときは指定に関わらず必ず表示される。 */
+    hasCloseButton?: boolean;
+    /** タイトルの下に表示する補足テキスト。 */
+    description?: ReactNode;
+    /** タイトルとして表示する本文。 */
     children?: ReactNode;
-    /** クローズボタンや自動クローズ完了時に呼び出されるコールバック */
+    /** 閉じるボタン押下時および自動クローズ完了時に呼ばれる、トースト終了の通知コールバック。 */
     onClickClose: () => void;
 };
-declare function Toast({ state, width, isAutoClose, isAnimation, children, onClickClose, }: Props$1): react.JSX.Element;
+declare function Toast({ state, width, isAutoClose, isAnimation, hasCloseButton, description, children, onClickClose, }: Props$1): react.JSX.Element;
 
 type AddToastArgs = {
-    /** 表示する本文 */
+    /** タイトルとして表示する本文 */
     message: string;
     /** 表示ステート */
     state: ToastState;
+    /** タイトルの下に表示する補足テキスト */
+    description?: ReactNode;
+    /** 閉じるボタンを表示するかどうか。ToastProvider の既定値を上書きする */
+    hasCloseButton?: boolean;
+    /** 5 秒後に自動で閉じるかどうか。既定は true */
+    isAutoClose?: boolean;
 };
-type ToastProviderProps = {
+type ToastContextValue = {
     addToast: (args: AddToastArgs) => void;
     removeToast: (id: number) => void;
 };
-declare const ToastProvider: ({ children }: PropsWithChildren) => react.JSX.Element;
-declare const useToast: () => ToastProviderProps;
+type ToastProviderProps = PropsWithChildren<{
+    /** このプロバイダー配下で追加されるトーストの、閉じるボタン表示の既定値 */
+    hasCloseButton?: boolean;
+}>;
+declare const ToastProvider: ({ children, hasCloseButton }: ToastProviderProps) => react.JSX.Element;
+declare const useToast: () => ToastContextValue;
 
 /** Toggle コンポーネントの公開 Props */
 type Props = {

package/dist/index.js

@@ -1747,6 +1747,7 @@ var PopoverTrigger = (0, import_react24.forwardRef)(function PopoverTrigger2({ c
 
 // src/popover/popover.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
+var FLOATING_VIEWPORT_PADDING2 = 8;
 function Popover({
   isOpen,
   children,
@@ -1756,6 +1757,14 @@ function Popover({
   anchorRef
 }) {
   const triggerRef = (0, import_react26.useRef)(null);
+  const middleware = (0, import_react26.useMemo)(
+    () => [
+      (0, import_react25.offset)(offsetValue),
+      (0, import_react25.flip)({ padding: FLOATING_VIEWPORT_PADDING2, flipAlignment: false }),
+      (0, import_react25.shift)({ padding: FLOATING_VIEWPORT_PADDING2 })
+    ],
+    [offsetValue]
+  );
   const floating = (0, import_react25.useFloating)({
     open: isOpen,
     onOpenChange: (open) => {
@@ -1764,7 +1773,7 @@ function Popover({
       }
     },
     placement,
-    middleware: [(0, import_react25.offset)(offsetValue)],
+    middleware,
     whileElementsMounted: import_react25.autoUpdate,
     strategy: "fixed"
   });
@@ -1812,27 +1821,83 @@ var import_react_day_picker2 = require("react-day-picker");
 var import_clsx15 = require("clsx");
 var import_react_day_picker = require("react-day-picker");
 var defaultDayPickerClassNames = (0, import_react_day_picker.getDefaultClassNames)();
-var DAY_PICKER_FONT_SIZE = "12px";
-var dayPickerStyle = {
-  "--rdp-nav-height": "30px",
-  "--rdp-day-width": "30px",
-  "--rdp-day-height": "30px",
-  "--rdp-day_button-width": "28px",
-  "--rdp-day_button-height": "28px",
-  "--rdp-day_button-border": "1px solid transparent",
-  "--rdp-weekday-padding": "0px",
-  fontFamily: "Arial, 'Noto Sans JP', sans-serif",
-  fontSize: DAY_PICKER_FONT_SIZE,
-  fontWeight: 700
+var BASE_TOKENS = {
+  triggerIcon: "small",
+  dayPickerStyle: {
+    "--rdp-nav-height": "30px",
+    "--rdp-day-width": "30px",
+    "--rdp-day-height": "30px",
+    "--rdp-day_button-width": "28px",
+    "--rdp-day_button-height": "28px",
+    "--rdp-day_button-border": "1px solid transparent",
+    "--rdp-weekday-padding": "0px",
+    fontFamily: "Arial, 'Noto Sans JP', sans-serif",
+    fontSize: "12px",
+    fontWeight: 700
+  },
+  dayPickerClassNames: {
+    month: (0, import_clsx15.clsx)(defaultDayPickerClassNames.month, "flex flex-col px-[7px] py-2")
+  },
+  dayButtonClass: "relative grid size-full place-items-center rounded-full !border !border-solid",
+  dayButtonFontSize: "12px",
+  monthCaptionClass: "flex items-center justify-between px-1 pb-0.5",
+  monthCaptionTypography: "typography-label12bold",
+  navIconButton: "small",
+  weekdayClass: "m-0 size-7 p-0 text-center align-middle",
+  footerIconButton: "medium",
+  footerClearButton: "small",
+  errorTypography: "typography-label11regular"
+};
+var LARGE_TOKENS = {
+  ...BASE_TOKENS,
+  triggerIcon: "medium",
+  errorTypography: "typography-label12regular"
 };
-var dayPickerClassNames = {
-  month: (0, import_clsx15.clsx)(defaultDayPickerClassNames.month, "flex flex-col px-[7px] py-2")
+var X_LARGE_TOKENS = {
+  triggerIcon: "medium",
+  dayPickerStyle: {
+    "--rdp-nav-height": "40px",
+    "--rdp-day-width": "48px",
+    "--rdp-day-height": "48px",
+    "--rdp-day_button-width": "40px",
+    "--rdp-day_button-height": "40px",
+    "--rdp-day_button-border": "1px solid transparent",
+    "--rdp-weekday-padding": "0px",
+    fontFamily: "Arial, 'Noto Sans JP', sans-serif",
+    fontSize: "16px",
+    fontWeight: 700
+  },
+  dayPickerClassNames: {
+    month: (0, import_clsx15.clsx)(defaultDayPickerClassNames.month, "flex flex-col px-[3px] pb-1 pt-2")
+  },
+  dayButtonClass: "relative grid size-10 place-items-center rounded-full !border !border-solid",
+  dayButtonFontSize: "16px",
+  // caption は height 固定（--rdp-nav-height: 40px）のため pb-2 は食い込みとして働き、
+  // ナビボタンが上へ 4px はみ出して月ヘッダーと曜日行の視覚間隔が 8px になる（上部ブロックコメント参照）
+  monthCaptionClass: "flex items-center justify-between px-1 pb-2",
+  monthCaptionTypography: "typography-label16bold",
+  // IconButton に x-large は無いが、large が 40px で Figma と一致する（内部アイコンも 24px になる）
+  navIconButton: "large",
+  weekdayClass: "m-0 size-12 p-0 text-center align-middle",
+  footerIconButton: "large",
+  footerClearButton: "large",
+  errorTypography: "typography-label12regular"
+};
+var DATE_PICKER_SIZE_TOKENS = {
+  small: BASE_TOKENS,
+  medium: BASE_TOKENS,
+  large: LARGE_TOKENS,
+  "x-large": X_LARGE_TOKENS
+};
+var useDatePickerSizeTokens = (componentName = "DatePicker \u306E\u30AB\u30EC\u30F3\u30C0\u30FC") => {
+  const context = useDatePickerCompoundContext(componentName);
+  return { ...context, tokens: DATE_PICKER_SIZE_TOKENS[context.size] };
 };
-var dayButtonBaseClass = "relative grid size-full place-items-center rounded-full !border !border-solid";
 
 // src/date-picker/date-picker-day-button.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var CustomDayButton = ({ day, modifiers, className, style, ...buttonProps }) => {
+  const { tokens } = useDatePickerSizeTokens();
   const isSelected = Boolean(modifiers.selected);
   const isOutside = Boolean(modifiers.outside);
   const isMinMaxDisabled = Boolean(modifiers.minMaxDisabled);
@@ -1845,10 +1910,10 @@ var CustomDayButton = ({ day, modifiers, className, style, ...buttonProps }) =>
       ...buttonProps,
       day,
       modifiers,
-      style: { ...style, fontSize: DAY_PICKER_FONT_SIZE },
+      style: { ...style, fontSize: tokens.dayButtonFontSize },
       className: (0, import_clsx16.clsx)(
         className,
-        dayButtonBaseClass,
+        tokens.dayButtonClass,
         // 共通: フォーカスリング（有効な日のみ）
         // react-day-picker の rdp-day_button クラスが outline: none を設定しているため、!important で上書き
         !isDisabledDay && import_component_theme6.focusVisible.normalImportant,
@@ -1874,8 +1939,8 @@ var import_react28 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var DatePickerErrorMessage = (0, import_react28.forwardRef)(
   ({ "aria-live": ariaLive = "assertive", ...props }, ref) => {
-    const { size, isError } = useDatePickerCompoundContext("DatePicker.ErrorMessage");
-    const typographyClass = size === "large" ? "typography-label12regular" : "typography-label11regular";
+    const { isError, tokens } = useDatePickerSizeTokens("DatePicker.ErrorMessage");
+    const typographyClass = tokens.errorTypography;
     if (isError !== true) {
       return null;
     }
@@ -1956,11 +2021,12 @@ var import_jsx_runtime25 = require("react/jsx-runtime");
 var CustomMonthCaption = ({ calendarMonth, className, displayIndex, style, ...props }) => {
   void displayIndex;
   const { goToMonth, nextMonth, previousMonth } = (0, import_react_day_picker3.useDayPicker)();
+  const { tokens } = useDatePickerSizeTokens();
   const captionMonth = calendarMonth.date;
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "div",
     {
-      className: (0, import_clsx18.clsx)("flex items-center justify-between px-1 pb-0.5", className),
+      className: (0, import_clsx18.clsx)(tokens.monthCaptionClass, className),
       style: { ...style, fontSize: "inherit", fontWeight: "inherit" },
       ...props,
       children: [
@@ -1968,19 +2034,19 @@ var CustomMonthCaption = ({ calendarMonth, className, displayIndex, style, ...pr
           IconButton,
           {
             icon: "angle-left",
-            size: "small",
+            size: tokens.navIconButton,
             variant: "text",
             isDisabled: !previousMonth,
             "aria-label": "\u524D\u306E\u6708",
             onClick: () => previousMonth && goToMonth(previousMonth)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "typography-label12bold text-text02", children: formatMonthLabel(captionMonth) }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: (0, import_clsx18.clsx)(tokens.monthCaptionTypography, "text-text02"), children: formatMonthLabel(captionMonth) }),
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           IconButton,
           {
             icon: "angle-right",
-            size: "small",
+            size: tokens.navIconButton,
             variant: "text",
             isDisabled: !nextMonth,
             "aria-label": "\u6B21\u306E\u6708",
@@ -1996,11 +2062,12 @@ var CustomMonthCaption = ({ calendarMonth, className, displayIndex, style, ...pr
 var import_clsx19 = require("clsx");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var CustomWeekday = ({ className, children, style, ...props }) => {
+  const { tokens } = useDatePickerSizeTokens();
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "th",
     {
       ...props,
-      className: (0, import_clsx19.clsx)(className, "m-0 size-7 p-0 text-center align-middle text-text02"),
+      className: (0, import_clsx19.clsx)(className, tokens.weekdayClass, "text-text02"),
       style: { ...style, fontSize: "inherit", fontWeight: "bold" },
       children
     }
@@ -2135,7 +2202,7 @@ var DatePicker = ({
       formatWeekdayName: (date) => weekdayFormatter.format(date)
     };
   }, []);
-  const iconSize = size === "large" ? "medium" : "small";
+  const tokens = DATE_PICKER_SIZE_TOKENS[size];
   const displayText = value ? formatDisplayDate(value, timeZone) : placeholder;
   const displayTextClasses = "min-w-0 truncate";
   const errorIds = [];
@@ -2183,7 +2250,7 @@ var DatePicker = ({
         size,
         variant: isError ? "outlineDanger" : "outline",
         isDisabled,
-        before: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { name: "calendar", size: iconSize }),
+        before: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { name: "calendar", size: tokens.triggerIcon }),
         justifyContent: "start",
         onClick: handleTriggerClick,
         children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: displayTextClasses, children: displayText })
@@ -2197,7 +2264,7 @@ var DatePicker = ({
           showOutsideDays: true,
           hideNavigation: true,
           weekStartsOn: 0,
-          style: dayPickerStyle,
+          style: tokens.dayPickerStyle,
           month: displayMonth,
           onMonthChange: setDisplayMonth,
           selected: selectedDate,
@@ -2205,7 +2272,7 @@ var DatePicker = ({
           today: todayForCalendar,
           disabled: disabledDays,
           modifiers: { minMaxDisabled: isMinMaxDisabled },
-          classNames: dayPickerClassNames,
+          classNames: tokens.dayPickerClassNames,
           formatters,
           fixedWeeks: true,
           components: { MonthCaption: CustomMonthCaption, DayButton: CustomDayButton, Weekday: CustomWeekday }
@@ -2216,14 +2283,14 @@ var DatePicker = ({
           IconButton,
           {
             icon: "calendar-today",
-            size: "medium",
+            size: tokens.footerIconButton,
             variant: "text",
             "aria-label": "\u4ECA\u65E5\u306B\u623B\u308B",
             iconAccentColor: "supportInfo",
             onClick: handleClickToday
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { type: "button", size: "small", variant: "text", onClick: handleClear, children: "\u30AF\u30EA\u30A2" })
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { type: "button", size: tokens.footerClearButton, variant: "text", onClick: handleClear, children: "\u30AF\u30EA\u30A2" })
       ] })
     ] }) })
   ] });
@@ -5146,40 +5213,88 @@ TimePicker.ErrorMessage = TimePickerErrorMessage;
 TimePicker.displayName = "TimePicker";
 
 // src/toast/toast.tsx
-var import_clsx56 = __toESM(require("clsx"));
+var import_clsx56 = require("clsx");
 var import_react73 = require("react");
 var import_jsx_runtime79 = require("react/jsx-runtime");
 var CLOSE_TIME_MSEC = 5e3;
+var REMOVAL_FALLBACK_MSEC = 1e3;
 function Toast({
   state = "information",
   width = "auto",
+  // 既定 false は v1.22.0 までの互換維持のため据え置き（自動クローズしない既定では、安全弁により閉じるボタンが表示される）。
+  // 「自動クローズ・閉じるボタンなし」の新しい既定は ToastProvider が isAutoClose を明示的に渡すことで実現している。
   isAutoClose = false,
   isAnimation = false,
+  hasCloseButton = false,
+  description,
   children,
   onClickClose
 }) {
   const [isRemoving, setIsRemoving] = (0, import_react73.useState)(false);
+  const onClickCloseRef = (0, import_react73.useRef)(onClickClose);
+  (0, import_react73.useEffect)(() => {
+    onClickCloseRef.current = onClickClose;
+  }, [onClickClose]);
+  const hasNotifiedCloseRef = (0, import_react73.useRef)(false);
+  const notifyClose = (0, import_react73.useCallback)(() => {
+    if (hasNotifiedCloseRef.current) {
+      return;
+    }
+    hasNotifiedCloseRef.current = true;
+    onClickCloseRef.current();
+  }, []);
   const handleClose = (0, import_react73.useCallback)(() => {
     if (isAnimation) {
       setIsRemoving(true);
     } else {
-      onClickClose();
+      notifyClose();
     }
-  }, [isAnimation, onClickClose]);
-  const handleAnimationEnd = (e) => window.getComputedStyle(e.currentTarget).opacity === "0" && onClickClose();
-  const wrapperClasses = (0, import_clsx56.default)("pointer-events-auto flex items-start gap-1 bg-white p-4 shadow-floatingShadow", {
-    ["animate-toast-in"]: isAnimation && !isRemoving,
-    ["animate-toast-out opacity-0"]: isAnimation && isRemoving
-  });
-  const iconClasses = (0, import_clsx56.default)("flex items-center", {
+  }, [isAnimation, notifyClose]);
+  const handleAnimationEnd = (e) => {
+    if (e.target !== e.currentTarget) {
+      return;
+    }
+    if (window.getComputedStyle(e.currentTarget).opacity === "0") {
+      notifyClose();
+    }
+  };
+  (0, import_react73.useEffect)(() => {
+    if (!isAutoClose) {
+      return;
+    }
+    const timer = window.setTimeout(() => {
+      if (isAnimation) {
+        setIsRemoving(true);
+      } else {
+        notifyClose();
+      }
+    }, CLOSE_TIME_MSEC);
+    return () => window.clearTimeout(timer);
+  }, [isAutoClose, isAnimation, notifyClose]);
+  (0, import_react73.useEffect)(() => {
+    if (!isRemoving) {
+      return;
+    }
+    const fallbackTimer = window.setTimeout(notifyClose, REMOVAL_FALLBACK_MSEC);
+    return () => window.clearTimeout(fallbackTimer);
+  }, [isRemoving, notifyClose]);
+  const isCloseButtonShown = hasCloseButton || !isAutoClose;
+  const wrapperClasses = (0, import_clsx56.clsx)(
+    "pointer-events-auto flex items-center gap-3 rounded border border-solid border-uiBorder01 bg-uiBackground01 p-4 shadow-floatingShadow",
+    {
+      ["animate-toast-in"]: isAnimation && !isRemoving,
+      ["animate-toast-out opacity-0"]: isAnimation && isRemoving
+    }
+  );
+  const iconClasses = (0, import_clsx56.clsx)("flex shrink-0 items-center", {
     "fill-supportSuccess": state === "success",
     "fill-supportError": state === "error",
     "fill-supportWarning": state === "warning",
     "fill-supportInfo": state === "information"
   });
-  const textClasses = (0, import_clsx56.default)("typography-body13regular flex-1 pt-[3px]", {
+  const titleClasses = (0, import_clsx56.clsx)("typography-body13regular break-words", {
     "text-supportError": state === "error",
-    "text-text01": state === "success" || state === "warning" || state === "information"
+    "text-text01": state !== "error"
   });
   const iconName = {
     success: "success-filled",
@@ -5187,18 +5302,15 @@ function Toast({
     warning: "warning",
     information: "information-filled"
   };
-  (0, import_react73.useEffect)(() => {
-    const timer = window.setTimeout(() => {
-      if (isAutoClose) {
-        setIsRemoving(true);
-      }
-    }, CLOSE_TIME_MSEC);
-    return () => window.clearTimeout(timer);
-  }, [isAutoClose]);
   return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: wrapperClasses, style: { width }, onAnimationEnd: handleAnimationEnd, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Icon, { name: iconName[state] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: textClasses, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(IconButton, { icon: "close", size: "medium", variant: "text", onClick: handleClose, isNoPadding: true })
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex min-w-0 flex-1 items-start gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Icon, { name: iconName[state] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-2 pt-[3px]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: titleClasses, children }),
+        description != null && description !== "" && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "typography-label12regular break-words text-text01", children: description })
+      ] })
+    ] }),
+    isCloseButtonShown && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "flex shrink-0 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(IconButton, { icon: "close", size: "medium", variant: "text", isNoPadding: true, "aria-label": "\u9589\u3058\u308B", onClick: handleClose }) })
   ] });
 }
 
@@ -5207,12 +5319,28 @@ var import_react74 = require("react");
 var import_react_dom3 = require("react-dom");
 var import_jsx_runtime80 = require("react/jsx-runtime");
 var ToastContext = (0, import_react74.createContext)({});
-var ToastProvider = ({ children }) => {
+var ToastProvider = ({ children, hasCloseButton = false }) => {
   const [isClientRender, setIsClientRender] = (0, import_react74.useState)(false);
   const [toasts, setToasts] = (0, import_react74.useState)([]);
-  const addToast = (0, import_react74.useCallback)(({ message, state }) => {
-    setToasts((prev) => [...prev, { id: Math.trunc(Math.random() * 1e5), message, state }]);
-  }, []);
+  const nextIdRef = (0, import_react74.useRef)(0);
+  const addToast = (0, import_react74.useCallback)(
+    (args) => {
+      nextIdRef.current += 1;
+      const id = nextIdRef.current;
+      setToasts((prev) => [
+        ...prev,
+        {
+          id,
+          message: args.message,
+          state: args.state,
+          description: args.description,
+          hasCloseButton: args.hasCloseButton ?? hasCloseButton,
+          isAutoClose: args.isAutoClose ?? true
+        }
+      ]);
+    },
+    [hasCloseButton]
+  );
   const removeToast = (0, import_react74.useCallback)((id) => {
     setToasts((prev) => prev.filter((snackbar) => snackbar.id !== id));
   }, []);
@@ -5222,7 +5350,27 @@ var ToastProvider = ({ children }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(ToastContext.Provider, { value: { addToast, removeToast }, children: [
     children,
     isClientRender && (0, import_react_dom3.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "pointer-events-none fixed bottom-0 left-0 z-toast mb-4 ml-4 flex w-full flex-col-reverse gap-[16px]", children: toasts.map(({ id, message, state }) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Toast, { state, isAutoClose: true, isAnimation: true, onClickClose: () => removeToast(id), width: 475, children: message }, id)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+        "div",
+        {
+          role: "region",
+          "aria-label": "\u901A\u77E5",
+          className: "pointer-events-none fixed bottom-0 left-0 z-toast mb-4 ml-4 flex w-full flex-col-reverse gap-4",
+          children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { role: toast.state === "error" ? "alert" : "status", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+            Toast,
+            {
+              state: toast.state,
+              description: toast.description,
+              hasCloseButton: toast.hasCloseButton,
+              isAutoClose: toast.isAutoClose,
+              isAnimation: true,
+              width: 475,
+              onClickClose: () => removeToast(toast.id),
+              children: toast.message
+            }
+          ) }, toast.id))
+        }
+      ),
       document.body
     )
   ] });

package/dist/index.mjs

@@ -1502,7 +1502,7 @@ import {
 import { DayPicker } from "react-day-picker";
 
 // src/popover/popover.tsx
-import { autoUpdate as autoUpdate2, offset as offset2, useFloating as useFloating2, useId as useFloatingId } from "@floating-ui/react";
+import { autoUpdate as autoUpdate2, flip as flip2, offset as offset2, shift, useFloating as useFloating2, useId as useFloatingId } from "@floating-ui/react";
 import { useEffect as useEffect8, useMemo as useMemo4, useRef as useRef7 } from "react";
 
 // src/popover/popover-content.tsx
@@ -1672,6 +1672,7 @@ var PopoverTrigger = forwardRef7(function PopoverTrigger2({ children }, ref) {
 
 // src/popover/popover.tsx
 import { jsx as jsx21 } from "react/jsx-runtime";
+var FLOATING_VIEWPORT_PADDING2 = 8;
 function Popover({
   isOpen,
   children,
@@ -1681,6 +1682,14 @@ function Popover({
   anchorRef
 }) {
   const triggerRef = useRef7(null);
+  const middleware = useMemo4(
+    () => [
+      offset2(offsetValue),
+      flip2({ padding: FLOATING_VIEWPORT_PADDING2, flipAlignment: false }),
+      shift({ padding: FLOATING_VIEWPORT_PADDING2 })
+    ],
+    [offsetValue]
+  );
   const floating = useFloating2({
     open: isOpen,
     onOpenChange: (open) => {
@@ -1689,7 +1698,7 @@ function Popover({
       }
     },
     placement,
-    middleware: [offset2(offsetValue)],
+    middleware,
     whileElementsMounted: autoUpdate2,
     strategy: "fixed"
   });
@@ -1737,27 +1746,83 @@ import { DayButton } from "react-day-picker";
 import { clsx as clsx15 } from "clsx";
 import { getDefaultClassNames } from "react-day-picker";
 var defaultDayPickerClassNames = getDefaultClassNames();
-var DAY_PICKER_FONT_SIZE = "12px";
-var dayPickerStyle = {
-  "--rdp-nav-height": "30px",
-  "--rdp-day-width": "30px",
-  "--rdp-day-height": "30px",
-  "--rdp-day_button-width": "28px",
-  "--rdp-day_button-height": "28px",
-  "--rdp-day_button-border": "1px solid transparent",
-  "--rdp-weekday-padding": "0px",
-  fontFamily: "Arial, 'Noto Sans JP', sans-serif",
-  fontSize: DAY_PICKER_FONT_SIZE,
-  fontWeight: 700
+var BASE_TOKENS = {
+  triggerIcon: "small",
+  dayPickerStyle: {
+    "--rdp-nav-height": "30px",
+    "--rdp-day-width": "30px",
+    "--rdp-day-height": "30px",
+    "--rdp-day_button-width": "28px",
+    "--rdp-day_button-height": "28px",
+    "--rdp-day_button-border": "1px solid transparent",
+    "--rdp-weekday-padding": "0px",
+    fontFamily: "Arial, 'Noto Sans JP', sans-serif",
+    fontSize: "12px",
+    fontWeight: 700
+  },
+  dayPickerClassNames: {
+    month: clsx15(defaultDayPickerClassNames.month, "flex flex-col px-[7px] py-2")
+  },
+  dayButtonClass: "relative grid size-full place-items-center rounded-full !border !border-solid",
+  dayButtonFontSize: "12px",
+  monthCaptionClass: "flex items-center justify-between px-1 pb-0.5",
+  monthCaptionTypography: "typography-label12bold",
+  navIconButton: "small",
+  weekdayClass: "m-0 size-7 p-0 text-center align-middle",
+  footerIconButton: "medium",
+  footerClearButton: "small",
+  errorTypography: "typography-label11regular"
+};
+var LARGE_TOKENS = {
+  ...BASE_TOKENS,
+  triggerIcon: "medium",
+  errorTypography: "typography-label12regular"
 };
-var dayPickerClassNames = {
-  month: clsx15(defaultDayPickerClassNames.month, "flex flex-col px-[7px] py-2")
+var X_LARGE_TOKENS = {
+  triggerIcon: "medium",
+  dayPickerStyle: {
+    "--rdp-nav-height": "40px",
+    "--rdp-day-width": "48px",
+    "--rdp-day-height": "48px",
+    "--rdp-day_button-width": "40px",
+    "--rdp-day_button-height": "40px",
+    "--rdp-day_button-border": "1px solid transparent",
+    "--rdp-weekday-padding": "0px",
+    fontFamily: "Arial, 'Noto Sans JP', sans-serif",
+    fontSize: "16px",
+    fontWeight: 700
+  },
+  dayPickerClassNames: {
+    month: clsx15(defaultDayPickerClassNames.month, "flex flex-col px-[3px] pb-1 pt-2")
+  },
+  dayButtonClass: "relative grid size-10 place-items-center rounded-full !border !border-solid",
+  dayButtonFontSize: "16px",
+  // caption は height 固定（--rdp-nav-height: 40px）のため pb-2 は食い込みとして働き、
+  // ナビボタンが上へ 4px はみ出して月ヘッダーと曜日行の視覚間隔が 8px になる（上部ブロックコメント参照）
+  monthCaptionClass: "flex items-center justify-between px-1 pb-2",
+  monthCaptionTypography: "typography-label16bold",
+  // IconButton に x-large は無いが、large が 40px で Figma と一致する（内部アイコンも 24px になる）
+  navIconButton: "large",
+  weekdayClass: "m-0 size-12 p-0 text-center align-middle",
+  footerIconButton: "large",
+  footerClearButton: "large",
+  errorTypography: "typography-label12regular"
+};
+var DATE_PICKER_SIZE_TOKENS = {
+  small: BASE_TOKENS,
+  medium: BASE_TOKENS,
+  large: LARGE_TOKENS,
+  "x-large": X_LARGE_TOKENS
+};
+var useDatePickerSizeTokens = (componentName = "DatePicker \u306E\u30AB\u30EC\u30F3\u30C0\u30FC") => {
+  const context = useDatePickerCompoundContext(componentName);
+  return { ...context, tokens: DATE_PICKER_SIZE_TOKENS[context.size] };
 };
-var dayButtonBaseClass = "relative grid size-full place-items-center rounded-full !border !border-solid";
 
 // src/date-picker/date-picker-day-button.tsx
 import { jsx as jsx22 } from "react/jsx-runtime";
 var CustomDayButton = ({ day, modifiers, className, style, ...buttonProps }) => {
+  const { tokens } = useDatePickerSizeTokens();
   const isSelected = Boolean(modifiers.selected);
   const isOutside = Boolean(modifiers.outside);
   const isMinMaxDisabled = Boolean(modifiers.minMaxDisabled);
@@ -1770,10 +1835,10 @@ var CustomDayButton = ({ day, modifiers, className, style, ...buttonProps }) =>
       ...buttonProps,
       day,
       modifiers,
-      style: { ...style, fontSize: DAY_PICKER_FONT_SIZE },
+      style: { ...style, fontSize: tokens.dayButtonFontSize },
       className: clsx16(
         className,
-        dayButtonBaseClass,
+        tokens.dayButtonClass,
         // 共通: フォーカスリング（有効な日のみ）
         // react-day-picker の rdp-day_button クラスが outline: none を設定しているため、!important で上書き
         !isDisabledDay && focusVisible5.normalImportant,
@@ -1799,8 +1864,8 @@ import { forwardRef as forwardRef8 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
 var DatePickerErrorMessage = forwardRef8(
   ({ "aria-live": ariaLive = "assertive", ...props }, ref) => {
-    const { size, isError } = useDatePickerCompoundContext("DatePicker.ErrorMessage");
-    const typographyClass = size === "large" ? "typography-label12regular" : "typography-label11regular";
+    const { isError, tokens } = useDatePickerSizeTokens("DatePicker.ErrorMessage");
+    const typographyClass = tokens.errorTypography;
     if (isError !== true) {
       return null;
     }
@@ -1881,11 +1946,12 @@ import { jsx as jsx24, jsxs as jsxs7 } from "react/jsx-runtime";
 var CustomMonthCaption = ({ calendarMonth, className, displayIndex, style, ...props }) => {
   void displayIndex;
   const { goToMonth, nextMonth, previousMonth } = useDayPicker();
+  const { tokens } = useDatePickerSizeTokens();
   const captionMonth = calendarMonth.date;
   return /* @__PURE__ */ jsxs7(
     "div",
     {
-      className: clsx18("flex items-center justify-between px-1 pb-0.5", className),
+      className: clsx18(tokens.monthCaptionClass, className),
       style: { ...style, fontSize: "inherit", fontWeight: "inherit" },
       ...props,
       children: [
@@ -1893,19 +1959,19 @@ var CustomMonthCaption = ({ calendarMonth, className, displayIndex, style, ...pr
           IconButton,
           {
             icon: "angle-left",
-            size: "small",
+            size: tokens.navIconButton,
             variant: "text",
             isDisabled: !previousMonth,
             "aria-label": "\u524D\u306E\u6708",
             onClick: () => previousMonth && goToMonth(previousMonth)
           }
         ),
-        /* @__PURE__ */ jsx24("span", { className: "typography-label12bold text-text02", children: formatMonthLabel(captionMonth) }),
+        /* @__PURE__ */ jsx24("span", { className: clsx18(tokens.monthCaptionTypography, "text-text02"), children: formatMonthLabel(captionMonth) }),
         /* @__PURE__ */ jsx24(
           IconButton,
           {
             icon: "angle-right",
-            size: "small",
+            size: tokens.navIconButton,
             variant: "text",
             isDisabled: !nextMonth,
             "aria-label": "\u6B21\u306E\u6708",
@@ -1921,11 +1987,12 @@ var CustomMonthCaption = ({ calendarMonth, className, displayIndex, style, ...pr
 import { clsx as clsx19 } from "clsx";
 import { jsx as jsx25 } from "react/jsx-runtime";
 var CustomWeekday = ({ className, children, style, ...props }) => {
+  const { tokens } = useDatePickerSizeTokens();
   return /* @__PURE__ */ jsx25(
     "th",
     {
       ...props,
-      className: clsx19(className, "m-0 size-7 p-0 text-center align-middle text-text02"),
+      className: clsx19(className, tokens.weekdayClass, "text-text02"),
       style: { ...style, fontSize: "inherit", fontWeight: "bold" },
       children
     }
@@ -2060,7 +2127,7 @@ var DatePicker = ({
       formatWeekdayName: (date) => weekdayFormatter.format(date)
     };
   }, []);
-  const iconSize = size === "large" ? "medium" : "small";
+  const tokens = DATE_PICKER_SIZE_TOKENS[size];
   const displayText = value ? formatDisplayDate(value, timeZone) : placeholder;
   const displayTextClasses = "min-w-0 truncate";
   const errorIds = [];
@@ -2108,7 +2175,7 @@ var DatePicker = ({
         size,
         variant: isError ? "outlineDanger" : "outline",
         isDisabled,
-        before: /* @__PURE__ */ jsx26(Icon, { name: "calendar", size: iconSize }),
+        before: /* @__PURE__ */ jsx26(Icon, { name: "calendar", size: tokens.triggerIcon }),
         justifyContent: "start",
         onClick: handleTriggerClick,
         children: /* @__PURE__ */ jsx26("span", { className: displayTextClasses, children: displayText })
@@ -2122,7 +2189,7 @@ var DatePicker = ({
           showOutsideDays: true,
           hideNavigation: true,
           weekStartsOn: 0,
-          style: dayPickerStyle,
+          style: tokens.dayPickerStyle,
           month: displayMonth,
           onMonthChange: setDisplayMonth,
           selected: selectedDate,
@@ -2130,7 +2197,7 @@ var DatePicker = ({
           today: todayForCalendar,
           disabled: disabledDays,
           modifiers: { minMaxDisabled: isMinMaxDisabled },
-          classNames: dayPickerClassNames,
+          classNames: tokens.dayPickerClassNames,
           formatters,
           fixedWeeks: true,
           components: { MonthCaption: CustomMonthCaption, DayButton: CustomDayButton, Weekday: CustomWeekday }
@@ -2141,14 +2208,14 @@ var DatePicker = ({
           IconButton,
           {
             icon: "calendar-today",
-            size: "medium",
+            size: tokens.footerIconButton,
             variant: "text",
             "aria-label": "\u4ECA\u65E5\u306B\u623B\u308B",
             iconAccentColor: "supportInfo",
             onClick: handleClickToday
           }
         ),
-        /* @__PURE__ */ jsx26(Button, { type: "button", size: "small", variant: "text", onClick: handleClear, children: "\u30AF\u30EA\u30A2" })
+        /* @__PURE__ */ jsx26(Button, { type: "button", size: tokens.footerClearButton, variant: "text", onClick: handleClear, children: "\u30AF\u30EA\u30A2" })
       ] })
     ] }) })
   ] });
@@ -5071,40 +5138,88 @@ TimePicker.ErrorMessage = TimePickerErrorMessage;
 TimePicker.displayName = "TimePicker";
 
 // src/toast/toast.tsx
-import clsx56 from "clsx";
-import { useCallback as useCallback15, useEffect as useEffect12, useState as useState15 } from "react";
+import { clsx as clsx56 } from "clsx";
+import { useCallback as useCallback15, useEffect as useEffect12, useRef as useRef15, useState as useState15 } from "react";
 import { jsx as jsx77, jsxs as jsxs35 } from "react/jsx-runtime";
 var CLOSE_TIME_MSEC = 5e3;
+var REMOVAL_FALLBACK_MSEC = 1e3;
 function Toast({
   state = "information",
   width = "auto",
+  // 既定 false は v1.22.0 までの互換維持のため据え置き（自動クローズしない既定では、安全弁により閉じるボタンが表示される）。
+  // 「自動クローズ・閉じるボタンなし」の新しい既定は ToastProvider が isAutoClose を明示的に渡すことで実現している。
   isAutoClose = false,
   isAnimation = false,
+  hasCloseButton = false,
+  description,
   children,
   onClickClose
 }) {
   const [isRemoving, setIsRemoving] = useState15(false);
+  const onClickCloseRef = useRef15(onClickClose);
+  useEffect12(() => {
+    onClickCloseRef.current = onClickClose;
+  }, [onClickClose]);
+  const hasNotifiedCloseRef = useRef15(false);
+  const notifyClose = useCallback15(() => {
+    if (hasNotifiedCloseRef.current) {
+      return;
+    }
+    hasNotifiedCloseRef.current = true;
+    onClickCloseRef.current();
+  }, []);
   const handleClose = useCallback15(() => {
     if (isAnimation) {
       setIsRemoving(true);
     } else {
-      onClickClose();
+      notifyClose();
     }
-  }, [isAnimation, onClickClose]);
-  const handleAnimationEnd = (e) => window.getComputedStyle(e.currentTarget).opacity === "0" && onClickClose();
-  const wrapperClasses = clsx56("pointer-events-auto flex items-start gap-1 bg-white p-4 shadow-floatingShadow", {
-    ["animate-toast-in"]: isAnimation && !isRemoving,
-    ["animate-toast-out opacity-0"]: isAnimation && isRemoving
-  });
-  const iconClasses = clsx56("flex items-center", {
+  }, [isAnimation, notifyClose]);
+  const handleAnimationEnd = (e) => {
+    if (e.target !== e.currentTarget) {
+      return;
+    }
+    if (window.getComputedStyle(e.currentTarget).opacity === "0") {
+      notifyClose();
+    }
+  };
+  useEffect12(() => {
+    if (!isAutoClose) {
+      return;
+    }
+    const timer = window.setTimeout(() => {
+      if (isAnimation) {
+        setIsRemoving(true);
+      } else {
+        notifyClose();
+      }
+    }, CLOSE_TIME_MSEC);
+    return () => window.clearTimeout(timer);
+  }, [isAutoClose, isAnimation, notifyClose]);
+  useEffect12(() => {
+    if (!isRemoving) {
+      return;
+    }
+    const fallbackTimer = window.setTimeout(notifyClose, REMOVAL_FALLBACK_MSEC);
+    return () => window.clearTimeout(fallbackTimer);
+  }, [isRemoving, notifyClose]);
+  const isCloseButtonShown = hasCloseButton || !isAutoClose;
+  const wrapperClasses = clsx56(
+    "pointer-events-auto flex items-center gap-3 rounded border border-solid border-uiBorder01 bg-uiBackground01 p-4 shadow-floatingShadow",
+    {
+      ["animate-toast-in"]: isAnimation && !isRemoving,
+      ["animate-toast-out opacity-0"]: isAnimation && isRemoving
+    }
+  );
+  const iconClasses = clsx56("flex shrink-0 items-center", {
     "fill-supportSuccess": state === "success",
     "fill-supportError": state === "error",
     "fill-supportWarning": state === "warning",
     "fill-supportInfo": state === "information"
   });
-  const textClasses = clsx56("typography-body13regular flex-1 pt-[3px]", {
+  const titleClasses = clsx56("typography-body13regular break-words", {
     "text-supportError": state === "error",
-    "text-text01": state === "success" || state === "warning" || state === "information"
+    "text-text01": state !== "error"
   });
   const iconName = {
     success: "success-filled",
@@ -5112,32 +5227,45 @@ function Toast({
     warning: "warning",
     information: "information-filled"
   };
-  useEffect12(() => {
-    const timer = window.setTimeout(() => {
-      if (isAutoClose) {
-        setIsRemoving(true);
-      }
-    }, CLOSE_TIME_MSEC);
-    return () => window.clearTimeout(timer);
-  }, [isAutoClose]);
   return /* @__PURE__ */ jsxs35("div", { className: wrapperClasses, style: { width }, onAnimationEnd: handleAnimationEnd, children: [
-    /* @__PURE__ */ jsx77("div", { className: iconClasses, children: /* @__PURE__ */ jsx77(Icon, { name: iconName[state] }) }),
-    /* @__PURE__ */ jsx77("p", { className: textClasses, children }),
-    /* @__PURE__ */ jsx77(IconButton, { icon: "close", size: "medium", variant: "text", onClick: handleClose, isNoPadding: true })
+    /* @__PURE__ */ jsxs35("div", { className: "flex min-w-0 flex-1 items-start gap-1", children: [
+      /* @__PURE__ */ jsx77("div", { className: iconClasses, children: /* @__PURE__ */ jsx77(Icon, { name: iconName[state] }) }),
+      /* @__PURE__ */ jsxs35("div", { className: "flex min-w-0 flex-1 flex-col gap-2 pt-[3px]", children: [
+        /* @__PURE__ */ jsx77("p", { className: titleClasses, children }),
+        description != null && description !== "" && /* @__PURE__ */ jsx77("p", { className: "typography-label12regular break-words text-text01", children: description })
+      ] })
+    ] }),
+    isCloseButtonShown && /* @__PURE__ */ jsx77("div", { className: "flex shrink-0 items-center", children: /* @__PURE__ */ jsx77(IconButton, { icon: "close", size: "medium", variant: "text", isNoPadding: true, "aria-label": "\u9589\u3058\u308B", onClick: handleClose }) })
   ] });
 }
 
 // src/toast/toast-provider.tsx
-import { createContext as createContext18, useCallback as useCallback16, useContext as useContext21, useEffect as useEffect13, useState as useState16 } from "react";
+import { createContext as createContext18, useCallback as useCallback16, useContext as useContext21, useEffect as useEffect13, useRef as useRef16, useState as useState16 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { jsx as jsx78, jsxs as jsxs36 } from "react/jsx-runtime";
 var ToastContext = createContext18({});
-var ToastProvider = ({ children }) => {
+var ToastProvider = ({ children, hasCloseButton = false }) => {
   const [isClientRender, setIsClientRender] = useState16(false);
   const [toasts, setToasts] = useState16([]);
-  const addToast = useCallback16(({ message, state }) => {
-    setToasts((prev) => [...prev, { id: Math.trunc(Math.random() * 1e5), message, state }]);
-  }, []);
+  const nextIdRef = useRef16(0);
+  const addToast = useCallback16(
+    (args) => {
+      nextIdRef.current += 1;
+      const id = nextIdRef.current;
+      setToasts((prev) => [
+        ...prev,
+        {
+          id,
+          message: args.message,
+          state: args.state,
+          description: args.description,
+          hasCloseButton: args.hasCloseButton ?? hasCloseButton,
+          isAutoClose: args.isAutoClose ?? true
+        }
+      ]);
+    },
+    [hasCloseButton]
+  );
   const removeToast = useCallback16((id) => {
     setToasts((prev) => prev.filter((snackbar) => snackbar.id !== id));
   }, []);
@@ -5147,7 +5275,27 @@ var ToastProvider = ({ children }) => {
   return /* @__PURE__ */ jsxs36(ToastContext.Provider, { value: { addToast, removeToast }, children: [
     children,
     isClientRender && createPortal3(
-      /* @__PURE__ */ jsx78("div", { className: "pointer-events-none fixed bottom-0 left-0 z-toast mb-4 ml-4 flex w-full flex-col-reverse gap-[16px]", children: toasts.map(({ id, message, state }) => /* @__PURE__ */ jsx78(Toast, { state, isAutoClose: true, isAnimation: true, onClickClose: () => removeToast(id), width: 475, children: message }, id)) }),
+      /* @__PURE__ */ jsx78(
+        "div",
+        {
+          role: "region",
+          "aria-label": "\u901A\u77E5",
+          className: "pointer-events-none fixed bottom-0 left-0 z-toast mb-4 ml-4 flex w-full flex-col-reverse gap-4",
+          children: toasts.map((toast) => /* @__PURE__ */ jsx78("div", { role: toast.state === "error" ? "alert" : "status", children: /* @__PURE__ */ jsx78(
+            Toast,
+            {
+              state: toast.state,
+              description: toast.description,
+              hasCloseButton: toast.hasCloseButton,
+              isAutoClose: toast.isAutoClose,
+              isAnimation: true,
+              width: 475,
+              onClickClose: () => removeToast(toast.id),
+              children: toast.message
+            }
+          ) }, toast.id))
+        }
+      ),
       document.body
     )
   ] });
@@ -5213,7 +5361,7 @@ function Toggle({
 }
 
 // src/tooltip/tooltip.tsx
-import { useCallback as useCallback18, useEffect as useEffect14, useRef as useRef15, useState as useState17 } from "react";
+import { useCallback as useCallback18, useEffect as useEffect14, useRef as useRef17, useState as useState17 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
 // src/tooltip/tooltip-content.tsx
@@ -5384,7 +5532,7 @@ function Tooltip({
     translateX: "0",
     translateY: "0"
   });
-  const targetRef = useRef15(null);
+  const targetRef = useRef17(null);
   const handleMouseOverWrapper = useCallback18(() => {
     if (isDisabledHover) {
       return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zenkigen-inc/component-ui",
-  "version": "1.22.0",
+  "version": "1.23.1",
   "repository": "https://github.com/zenkigen/zenkigen-component",
   "license": "MIT",
   "publishConfig": {
@@ -37,10 +37,10 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@floating-ui/react": "0.27.19",
-    "@zenkigen-inc/component-config": "1.22.0",
-    "@zenkigen-inc/component-icons": "1.22.0",
-    "@zenkigen-inc/component-theme": "1.22.0",
+    "@floating-ui/react": "0.27.20",
+    "@zenkigen-inc/component-config": "1.23.1",
+    "@zenkigen-inc/component-icons": "1.23.1",
+    "@zenkigen-inc/component-theme": "1.23.1",
     "clsx": "2.1.1",
     "react-day-picker": "9.14.0"
   }