@zenkigen-inc/component-ui 1.21.1 → 1.23.1

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 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 dayPickerClassNames = {
-  month: clsx15(defaultDayPickerClassNames.month, "flex flex-col px-[7px] py-2")
+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" })
       ] })
     ] }) })
   ] });
@@ -2968,22 +3035,35 @@ Modal.Footer = ModalFooter;
 // src/notification-inline/notification-inline.tsx
 import { clsx as clsx29 } from "clsx";
 import { jsx as jsx38, jsxs as jsxs15 } from "react/jsx-runtime";
-function NotificationInline({ state = "default", size = "medium", ...props }) {
-  const wrapperClasses = clsx29("typography-body13regular flex items-center gap-1 rounded text-text01", {
+function NotificationInline({ state = "default", size = "medium", variant = "default", ...props }) {
+  const isOutline = variant === "outline";
+  const wrapperClasses = clsx29("typography-body13regular flex items-center gap-1 rounded border text-text01", {
     "bg-uiBackgroundError": state === "attention",
     "bg-uiBackgroundWarning": state === "warning",
     "bg-uiBackgroundBlue": state === "information",
     "bg-uiBackgroundSuccess": state === "success",
     "bg-uiBackgroundGray": state === "default",
-    "p-2": size === "small",
-    "p-3": size === "medium"
+    // 1 行時の高さの基準は small が閉じるボタン(24px)、medium がアイコン(24px)。
+    // showClose / state によらず高さが変わらないよう、両サイズとも最小高を確保する
+    "min-h-12 p-[calc(0.75rem_-_1px)]": size === "small",
+    "min-h-14 p-[calc(1rem_-_1px)]": size === "medium",
+    "border-transparent": !isOutline,
+    "border-supportError": isOutline && state === "attention",
+    "border-supportWarning": isOutline && state === "warning",
+    "border-supportInfo": isOutline && state === "information",
+    "border-supportSuccess": isOutline && state === "success",
+    "border-uiBorder04": isOutline && state === "default"
   });
-  const iconClasses = clsx29("flex items-center", {
+  const iconClasses = clsx29("flex shrink-0 items-center", {
+    "h-5": size === "small",
     "fill-supportError": state === "attention",
     "fill-supportWarning": state === "warning",
     "fill-blue-blue50": state === "information",
     "fill-supportSuccess": state === "success"
   });
+  const textClasses = clsx29("flex-1", {
+    "pt-[2px]": size === "medium" && state !== "default"
+  });
   const iconName = {
     attention: "attention",
     success: "success-filled",
@@ -2995,9 +3075,11 @@ function NotificationInline({ state = "default", size = "medium", ...props }) {
     medium: "medium"
   };
   return /* @__PURE__ */ jsxs15("div", { className: wrapperClasses, children: [
-    state !== "default" && /* @__PURE__ */ jsx38("div", { className: iconClasses, children: /* @__PURE__ */ jsx38(Icon, { name: iconName[state], size: iconSize[size] }) }),
-    /* @__PURE__ */ jsx38("p", { className: "flex-1", children: props.children }),
-    props.showClose === true && /* @__PURE__ */ jsx38("div", { className: "flex items-center", children: /* @__PURE__ */ jsx38(IconButton, { icon: "close", size: "small", variant: "text", onClick: props.onClickClose }) })
+    /* @__PURE__ */ jsxs15("div", { className: "flex flex-1 items-start gap-1", children: [
+      state !== "default" && /* @__PURE__ */ jsx38("div", { className: iconClasses, children: /* @__PURE__ */ jsx38(Icon, { name: iconName[state], size: iconSize[size] }) }),
+      /* @__PURE__ */ jsx38("p", { className: textClasses, children: props.children })
+    ] }),
+    props.showClose === true && /* @__PURE__ */ jsx38("div", { className: "ml-2 flex shrink-0 items-center", children: /* @__PURE__ */ jsx38(IconButton, { icon: "close", size: "small", variant: "text", onClick: props.onClickClose }) })
   ] });
 }
 
@@ -3209,7 +3291,9 @@ function Select({
   isOptionSelected = false,
   onChange,
   optionListMaxHeight,
-  matchListToTrigger = false
+  matchListToTrigger = false,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedby
 }) {
   const [isOptionListOpen, setIsOptionListOpen] = useState10(false);
   const targetRef = useRef11(null);
@@ -3270,6 +3354,7 @@ function Select({
     "typography-label14regular": size === "small" || size === "medium",
     "typography-label16regular": size === "large"
   });
+  const ariaInvalidProps = isError ? { "aria-invalid": true } : {};
   return /* @__PURE__ */ jsx43(
     SelectContext.Provider,
     {
@@ -3291,6 +3376,9 @@ function Select({
             ref: refs.setReference,
             className: buttonClasses,
             type: "button",
+            "aria-label": ariaLabel,
+            "aria-describedby": ariaDescribedby,
+            ...ariaInvalidProps,
             onClick: handleClickToggle,
             disabled: isDisabled,
             children: [
@@ -3599,23 +3687,207 @@ function Radio({
   ] });
 }
 
+// src/radio-card/radio-card.tsx
+import { Children as Children5, cloneElement as cloneElement5, isValidElement as isValidElement5, useId as useId6, useMemo as useMemo6 } from "react";
+
+// src/radio-card/radio-card-context.ts
+import { createContext as createContext12, useContext as useContext15 } from "react";
+var RadioCardContext = createContext12(null);
+function useRadioCardContext(componentName) {
+  const context = useContext15(RadioCardContext);
+  if (context === null) {
+    throw new Error(`<${componentName}> \u306F <RadioCard> \u306E\u5185\u90E8\u3067\u4F7F\u7528\u3057\u3066\u304F\u3060\u3055\u3044`);
+  }
+  return context;
+}
+
+// src/radio-card/radio-card-error-message.tsx
+import { jsx as jsx51 } from "react/jsx-runtime";
+function RadioCardErrorMessage({ children, id }) {
+  const { isError } = useRadioCardContext("RadioCard.ErrorMessage");
+  if (!isError) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx51("p", { id, className: "typography-label13regular text-supportError", "aria-live": "assertive", children });
+}
+RadioCardErrorMessage.displayName = "RadioCard.ErrorMessage";
+
+// src/radio-card/radio-card-group.tsx
+import { jsx as jsx52 } from "react/jsx-runtime";
+function RadioCardGroup({ children }) {
+  const { ariaLabel, ariaLabelledby, errorDescribedBy } = useRadioCardContext("RadioCard.Group");
+  const describedByProps = errorDescribedBy != null ? { "aria-describedby": errorDescribedBy } : {};
+  return /* @__PURE__ */ jsx52(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      className: "flex flex-col gap-4",
+      ...describedByProps,
+      children
+    }
+  );
+}
+RadioCardGroup.displayName = "RadioCard.Group";
+
+// src/radio-card/radio-card-item.tsx
+import { focusVisible as focusVisible13 } from "@zenkigen-inc/component-theme";
+import clsx35 from "clsx";
+import { useId as useId5 } from "react";
+import { jsx as jsx53, jsxs as jsxs23 } from "react/jsx-runtime";
+function RadioCardItem({ value, label, description, isDisabled: itemDisabled = false, id }) {
+  const context = useRadioCardContext("RadioCard.Item");
+  const autoId = useId5();
+  const inputId = id ?? autoId;
+  const labelId = `${inputId}-label`;
+  const descriptionId = `${inputId}-description`;
+  const isChecked = context.value === value;
+  const isDisabled = context.isDisabled || itemDisabled;
+  const isError = context.isError && !isDisabled;
+  const hasDescription = description != null && description !== "";
+  const describedByProps = hasDescription ? { "aria-describedby": descriptionId } : {};
+  const ariaInvalidProps = isError ? { "aria-invalid": true } : {};
+  const handleChange = () => {
+    if (!isDisabled) {
+      context.onChange(value);
+    }
+  };
+  const cardClasses = clsx35(
+    "pointer-events-none flex flex-col gap-2 rounded border border-solid px-4 py-3",
+    focusVisible13.normalPeer,
+    {
+      "border-uiBorder02 bg-uiBackground01": isDisabled,
+      "border-supportError bg-uiBackground01 group-hover:bg-hoverUi02": isError,
+      "border-selectedUiBorder bg-selectedUi group-hover:bg-hoverUi02": !isDisabled && !isError && isChecked,
+      "border-uiBorder02 bg-uiBackground01 group-hover:bg-hoverUi02": !isDisabled && !isError && !isChecked
+    }
+  );
+  const boxClasses = clsx35(
+    "relative inline-flex size-5 shrink-0 items-center justify-center rounded-full border border-solid bg-white",
+    {
+      "border-disabled01": isDisabled,
+      "border-supportError group-hover:border-hoverError": !isDisabled && isError,
+      "border-uiBorder04 group-hover:border-hoverUiBorder": !isDisabled && !isError
+    }
+  );
+  const dotClasses = clsx35("absolute inset-0 m-auto size-3 rounded-full", {
+    "scale-100": isChecked,
+    "scale-0": !isChecked,
+    "bg-disabled01": isDisabled && isChecked,
+    "bg-supportError": !isDisabled && isError && isChecked,
+    "bg-activeSelectedUi": !isDisabled && !isError && isChecked
+  });
+  const hoverDotClasses = clsx35("size-3 rounded-full bg-transparent", {
+    "group-hover:bg-hoverUi": !isDisabled && !isChecked
+  });
+  const labelClasses = clsx35("typography-label14regular ml-2 select-none break-all", {
+    "text-disabled01": isDisabled,
+    "text-text01": !isDisabled
+  });
+  const descriptionClasses = clsx35("typography-body12regular pl-7", {
+    "text-disabled01": isDisabled,
+    "text-text02": !isDisabled
+  });
+  return /* @__PURE__ */ jsxs23("div", { className: "group relative", children: [
+    /* @__PURE__ */ jsx53(
+      "input",
+      {
+        type: "radio",
+        id: inputId,
+        name: context.name,
+        value,
+        checked: isChecked,
+        disabled: isDisabled,
+        onChange: handleChange,
+        "aria-labelledby": labelId,
+        className: "peer absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed",
+        ...describedByProps,
+        ...ariaInvalidProps
+      }
+    ),
+    /* @__PURE__ */ jsxs23("div", { className: cardClasses, children: [
+      /* @__PURE__ */ jsxs23("div", { className: "flex items-center", children: [
+        /* @__PURE__ */ jsxs23("span", { className: boxClasses, "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx53("span", { className: dotClasses }),
+          /* @__PURE__ */ jsx53("span", { className: hoverDotClasses })
+        ] }),
+        /* @__PURE__ */ jsx53("span", { id: labelId, className: labelClasses, children: label })
+      ] }),
+      hasDescription ? /* @__PURE__ */ jsx53("p", { id: descriptionId, className: descriptionClasses, children: description }) : null
+    ] })
+  ] });
+}
+RadioCardItem.displayName = "RadioCard.Item";
+
+// src/radio-card/radio-card.tsx
+import { jsx as jsx54 } from "react/jsx-runtime";
+function RadioCardRoot({
+  children,
+  value,
+  onChange,
+  name,
+  isDisabled = false,
+  isError = false,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby
+}) {
+  const autoName = useId6();
+  const baseId = useId6();
+  const resolvedName = name ?? autoName;
+  const errorIds = [];
+  const enhancedChildren = Children5.map(children, (child) => {
+    if (!isValidElement5(child)) {
+      return child;
+    }
+    if (child.type === RadioCardErrorMessage && isError) {
+      const errorChild = child;
+      const assignedId = errorChild.props.id ?? `${baseId}-error-${errorIds.length + 1}`;
+      errorIds.push(assignedId);
+      return cloneElement5(errorChild, { id: assignedId });
+    }
+    return child;
+  });
+  const errorDescribedBy = errorIds.length > 0 ? errorIds.join(" ") : null;
+  const contextValue = useMemo6(
+    () => ({
+      value,
+      onChange,
+      name: resolvedName,
+      isDisabled,
+      isError,
+      errorDescribedBy,
+      ariaLabel,
+      ariaLabelledby
+    }),
+    [value, onChange, resolvedName, isDisabled, isError, errorDescribedBy, ariaLabel, ariaLabelledby]
+  );
+  return /* @__PURE__ */ jsx54(RadioCardContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx54("div", { className: "flex flex-col gap-2", children: enhancedChildren }) });
+}
+var RadioCard = Object.assign(RadioCardRoot, {
+  Group: RadioCardGroup,
+  Item: RadioCardItem,
+  ErrorMessage: RadioCardErrorMessage,
+  displayName: "RadioCard"
+});
+
 // src/search/search.tsx
-import { clsx as clsx35 } from "clsx";
+import { clsx as clsx36 } from "clsx";
 import { forwardRef as forwardRef12 } from "react";
-import { jsx as jsx51, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs24 } from "react/jsx-runtime";
 var Search = forwardRef12(({ width = "100%", size = "medium", ...props }, ref) => {
-  const classes = clsx35(
+  const classes = clsx36(
     "flex items-center rounded-full border border-uiBorder02 bg-uiBackground01 focus-within:border-activeInput",
     { "h-8 px-3": size === "medium" },
     { "h-10 px-4": size === "large" }
   );
-  const inputClasses = clsx35("mx-2 h-full flex-1 text-text01 outline-none placeholder:text-textPlaceholder", {
+  const inputClasses = clsx36("mx-2 h-full flex-1 text-text01 outline-none placeholder:text-textPlaceholder", {
     ["typography-label14regular"]: size === "medium",
     ["typography-label16regular"]: size === "large"
   });
-  return /* @__PURE__ */ jsx51("div", { className: "relative", ref, children: /* @__PURE__ */ jsx51("form", { onSubmit: props.onSubmit, children: /* @__PURE__ */ jsxs23("div", { className: classes, style: { width }, children: [
-    /* @__PURE__ */ jsx51(Icon, { name: "search", color: "icon01", size: "medium" }),
-    /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx55("div", { className: "relative", ref, children: /* @__PURE__ */ jsx55("form", { onSubmit: props.onSubmit, children: /* @__PURE__ */ jsxs24("div", { className: classes, style: { width }, children: [
+    /* @__PURE__ */ jsx55(Icon, { name: "search", color: "icon01", size: "medium" }),
+    /* @__PURE__ */ jsx55(
       "input",
       {
         type: "text",
@@ -3626,7 +3898,7 @@ var Search = forwardRef12(({ width = "100%", size = "medium", ...props }, ref) =
         onChange: props.onChange
       }
     ),
-    props.onClickClearButton && props.value && props.value.length !== 0 && /* @__PURE__ */ jsx51(
+    props.onClickClearButton && props.value && props.value.length !== 0 && /* @__PURE__ */ jsx55(
       IconButton,
       {
         variant: "text",
@@ -3641,17 +3913,17 @@ var Search = forwardRef12(({ width = "100%", size = "medium", ...props }, ref) =
 Search.displayName = "Search";
 
 // src/segmented-control/segmented-control.tsx
-import React4, { Children as Children5, useRef as useRef13 } from "react";
+import React4, { Children as Children6, useRef as useRef13 } from "react";
 
 // src/segmented-control/segmented-control-context.ts
-import { createContext as createContext12 } from "react";
-var SegmentedControlContext = createContext12(null);
+import { createContext as createContext13 } from "react";
+var SegmentedControlContext = createContext13(null);
 
 // src/segmented-control/segmented-control-item.tsx
-import { focusVisible as focusVisible13 } from "@zenkigen-inc/component-theme";
-import { clsx as clsx36 } from "clsx";
-import { useContext as useContext15, useEffect as useEffect11, useRef as useRef12 } from "react";
-import { jsx as jsx52, jsxs as jsxs24 } from "react/jsx-runtime";
+import { focusVisible as focusVisible14 } from "@zenkigen-inc/component-theme";
+import { clsx as clsx37 } from "clsx";
+import { useContext as useContext16, useEffect as useEffect11, useRef as useRef12 } from "react";
+import { jsx as jsx56, jsxs as jsxs25 } from "react/jsx-runtime";
 var SegmentedControlItem = ({
   label,
   value,
@@ -3660,7 +3932,7 @@ var SegmentedControlItem = ({
   "aria-label": ariaLabel,
   ...rest
 }) => {
-  const context = useContext15(SegmentedControlContext);
+  const context = useContext16(SegmentedControlContext);
   const buttonRef = useRef12(null);
   const lastInteractionWasMouse = useRef12(false);
   if (context === null) {
@@ -3700,7 +3972,7 @@ var SegmentedControlItem = ({
     lastInteractionWasMouse.current = false;
     onBlur?.();
   };
-  const buttonClasses = clsx36("relative flex items-center justify-center gap-1 rounded", focusVisible13.normal, {
+  const buttonClasses = clsx37("relative flex items-center justify-center gap-1 rounded", focusVisible14.normal, {
     "px-2 min-h-[24px] typography-label12regular": size === "small",
     "px-4 min-h-[32px] typography-label14regular": size === "medium",
     // States - Default with hover
@@ -3710,7 +3982,7 @@ var SegmentedControlItem = ({
     // States - Disabled
     "text-disabled01 bg-transparent": isOptionDisabled === true
   });
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "button",
     {
       ref: buttonRef,
@@ -3727,25 +3999,25 @@ var SegmentedControlItem = ({
       onMouseDown: handleMouseDown,
       ...rest,
       children: [
-        Boolean(icon) === true && icon && /* @__PURE__ */ jsx52(
+        Boolean(icon) === true && icon && /* @__PURE__ */ jsx56(
           "span",
           {
-            className: clsx36("flex items-center", {
+            className: clsx37("flex items-center", {
               "fill-disabled01": isOptionDisabled === true,
               "fill-interactive01": isSelected === true && isOptionDisabled === false,
               "fill-icon01": isSelected === false && isOptionDisabled === false
             }),
-            children: /* @__PURE__ */ jsx52(Icon, { name: icon, size: "small" })
+            children: /* @__PURE__ */ jsx56(Icon, { name: icon, size: "small" })
           }
         ),
-        Boolean(label) === true && /* @__PURE__ */ jsx52("span", { className: "whitespace-nowrap", children: label })
+        Boolean(label) === true && /* @__PURE__ */ jsx56("span", { className: "whitespace-nowrap", children: label })
       ]
     }
   );
 };
 
 // src/segmented-control/segmented-control.tsx
-import { Fragment as Fragment6, jsx as jsx53 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx57 } from "react/jsx-runtime";
 var SegmentedControl = ({
   children,
   value,
@@ -3756,14 +4028,14 @@ var SegmentedControl = ({
   ...rest
 }) => {
   const containerRef = useRef13(null);
-  const itemIds = Children5.toArray(children).filter((child) => {
+  const itemIds = Children6.toArray(children).filter((child) => {
     if (!React4.isValidElement(child) || typeof child.props !== "object" || child.props === null || !("value" in child.props)) {
       return false;
     }
     const props = child.props;
     return props.isDisabled !== true;
   }).map((child) => child.props.value);
-  const childrenCount = Children5.count(children);
+  const childrenCount = Children6.count(children);
   const containerStyle = { gridTemplateColumns: `repeat(${childrenCount}, minmax(0,1fr))` };
   const {
     focusedValue,
@@ -3790,7 +4062,7 @@ var SegmentedControl = ({
     onBlur: handleBlurRovingFocus,
     values: itemIds
   };
-  return /* @__PURE__ */ jsx53(Fragment6, { children: /* @__PURE__ */ jsx53(SegmentedControlContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx57(Fragment6, { children: /* @__PURE__ */ jsx57(SegmentedControlContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx57(
     "div",
     {
       ref: containerRef,
@@ -3807,22 +4079,22 @@ var SegmentedControl = ({
 SegmentedControl.Item = SegmentedControlItem;
 
 // src/select-sort/select-sort.tsx
-import { buttonColors as buttonColors4, focusVisible as focusVisible16 } from "@zenkigen-inc/component-theme";
-import clsx39 from "clsx";
+import { buttonColors as buttonColors4, focusVisible as focusVisible17 } from "@zenkigen-inc/component-theme";
+import clsx40 from "clsx";
 import { useCallback as useCallback13, useRef as useRef14, useState as useState13 } from "react";
 
 // src/select-sort/select-list.tsx
-import { focusVisible as focusVisible15 } from "@zenkigen-inc/component-theme";
-import clsx38 from "clsx";
+import { focusVisible as focusVisible16 } from "@zenkigen-inc/component-theme";
+import clsx39 from "clsx";
 
 // src/select-sort/select-item.tsx
-import { focusVisible as focusVisible14 } from "@zenkigen-inc/component-theme";
-import clsx37 from "clsx";
-import { jsx as jsx54, jsxs as jsxs25 } from "react/jsx-runtime";
+import { focusVisible as focusVisible15 } from "@zenkigen-inc/component-theme";
+import clsx38 from "clsx";
+import { jsx as jsx58, jsxs as jsxs26 } from "react/jsx-runtime";
 function SelectItem2({ children, isSortKey, size, onClickItem }) {
-  const itemClasses = clsx37(
+  const itemClasses = clsx38(
     "typography-label14regular flex w-full items-center px-3 hover:bg-hover02 active:bg-active02",
-    focusVisible14.inset,
+    focusVisible15.inset,
     {
       "h-8": size !== "large",
       "h-10": size === "large",
@@ -3830,16 +4102,16 @@ function SelectItem2({ children, isSortKey, size, onClickItem }) {
       "bg-uiBackground01 fill-icon01 text-interactive02": !isSortKey
     }
   );
-  return /* @__PURE__ */ jsx54("li", { className: "flex w-full items-center", onClick: onClickItem, children: /* @__PURE__ */ jsxs25("button", { className: itemClasses, type: "button", children: [
-    /* @__PURE__ */ jsx54("span", { className: "ml-1 mr-6", children }),
-    isSortKey && /* @__PURE__ */ jsx54("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx54(Icon, { name: "check", size: "small" }) })
+  return /* @__PURE__ */ jsx58("li", { className: "flex w-full items-center", onClick: onClickItem, children: /* @__PURE__ */ jsxs26("button", { className: itemClasses, type: "button", children: [
+    /* @__PURE__ */ jsx58("span", { className: "ml-1 mr-6", children }),
+    isSortKey && /* @__PURE__ */ jsx58("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx58(Icon, { name: "check", size: "small" }) })
   ] }) });
 }
 
 // src/select-sort/select-list.tsx
-import { jsx as jsx55, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs27 } from "react/jsx-runtime";
 function SelectList2({ size, variant, sortOrder, onClickItem, onClickDeselect }) {
-  const listClasses = clsx38(
+  const listClasses = clsx39(
     "absolute z-dropdown w-max overflow-y-auto rounded bg-uiBackground01 py-2 shadow-floatingShadow",
     {
       "top-7": size === "x-small" || size === "small",
@@ -3848,23 +4120,23 @@ function SelectList2({ size, variant, sortOrder, onClickItem, onClickDeselect })
       "border-solid border border-uiBorder01": variant === "outline"
     }
   );
-  const deselectButtonClasses = clsx38(
+  const deselectButtonClasses = clsx39(
     "typography-label14regular flex w-full items-center px-3 text-interactive02 hover:bg-hover02 active:bg-active02",
-    focusVisible15.inset,
+    focusVisible16.inset,
     {
       "h-8": size !== "large",
       "h-10": size === "large"
     }
   );
-  return /* @__PURE__ */ jsxs26("ul", { className: listClasses, children: [
-    /* @__PURE__ */ jsx55(SelectItem2, { size, isSortKey: sortOrder === "ascend", onClickItem: () => onClickItem("ascend"), children: "\u6607\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
-    /* @__PURE__ */ jsx55(SelectItem2, { size, isSortKey: sortOrder === "descend", onClickItem: () => onClickItem("descend"), children: "\u964D\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
-    sortOrder !== null && onClickDeselect && /* @__PURE__ */ jsx55("li", { children: /* @__PURE__ */ jsx55("button", { className: deselectButtonClasses, type: "button", onClick: onClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
+  return /* @__PURE__ */ jsxs27("ul", { className: listClasses, children: [
+    /* @__PURE__ */ jsx59(SelectItem2, { size, isSortKey: sortOrder === "ascend", onClickItem: () => onClickItem("ascend"), children: "\u6607\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
+    /* @__PURE__ */ jsx59(SelectItem2, { size, isSortKey: sortOrder === "descend", onClickItem: () => onClickItem("descend"), children: "\u964D\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
+    sortOrder !== null && onClickDeselect && /* @__PURE__ */ jsx59("li", { children: /* @__PURE__ */ jsx59("button", { className: deselectButtonClasses, type: "button", onClick: onClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
   ] });
 }
 
 // src/select-sort/select-sort.tsx
-import { jsx as jsx56, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs28 } from "react/jsx-runtime";
 function SelectSort({
   size = "medium",
   variant = "outline",
@@ -3892,18 +4164,18 @@ function SelectSort({
     },
     [onChange]
   );
-  const wrapperClasses = clsx39("relative flex shrink-0 items-center gap-1 rounded", {
+  const wrapperClasses = clsx40("relative flex shrink-0 items-center gap-1 rounded", {
     "h-6": size === "x-small" || size === "small",
     "h-8": size === "medium",
     "h-10": size === "large",
     "cursor-not-allowed": isDisabled
   });
-  const buttonClasses = clsx39(
+  const buttonClasses = clsx40(
     "flex size-full items-center rounded",
     buttonColors4[variant].hover,
     buttonColors4[variant].active,
     buttonColors4[variant].disabled,
-    focusVisible16.normal,
+    focusVisible17.normal,
     {
       [buttonColors4[variant].selected]: isSortKey,
       [buttonColors4[variant].base]: !isSortKey,
@@ -3912,23 +4184,23 @@ function SelectSort({
       "pointer-events-none": isDisabled
     }
   );
-  const labelClasses = clsx39("truncate", {
+  const labelClasses = clsx40("truncate", {
     "typography-label12regular": size === "x-small",
     "typography-label14regular": size === "small" || size === "medium",
     "typography-label16regular": size === "large",
     "mr-1": size === "x-small",
     "mr-2": size !== "x-small"
   });
-  return /* @__PURE__ */ jsxs27("div", { className: wrapperClasses, style: { width }, ref: targetRef, children: [
-    /* @__PURE__ */ jsxs27("button", { className: buttonClasses, type: "button", onClick: handleClickToggle, disabled: isDisabled, children: [
-      /* @__PURE__ */ jsx56("div", { className: labelClasses, children: label }),
-      /* @__PURE__ */ jsx56("div", { className: "ml-auto flex items-center", children: isSortKey ? /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsxs28("div", { className: wrapperClasses, style: { width }, ref: targetRef, children: [
+    /* @__PURE__ */ jsxs28("button", { className: buttonClasses, type: "button", onClick: handleClickToggle, disabled: isDisabled, children: [
+      /* @__PURE__ */ jsx60("div", { className: labelClasses, children: label }),
+      /* @__PURE__ */ jsx60("div", { className: "ml-auto flex items-center", children: isSortKey ? /* @__PURE__ */ jsx60(
         Icon,
         {
           name: sortOrder === "ascend" ? "arrow-up" : "arrow-down",
           size: size === "large" ? "medium" : "small"
         }
-      ) : /* @__PURE__ */ jsx56(
+      ) : /* @__PURE__ */ jsx60(
         Icon,
         {
           name: isOptionListOpen ? "angle-small-up" : "angle-small-down",
@@ -3936,7 +4208,7 @@ function SelectSort({
         }
       ) })
     ] }),
-    isOptionListOpen && !isDisabled && /* @__PURE__ */ jsx56(
+    isOptionListOpen && !isDisabled && /* @__PURE__ */ jsx60(
       SelectList2,
       {
         size,
@@ -3950,10 +4222,10 @@ function SelectSort({
 }
 
 // src/sort-button/sort-button.tsx
-import { buttonColors as buttonColors5, focusVisible as focusVisible17 } from "@zenkigen-inc/component-theme";
-import clsx40 from "clsx";
+import { buttonColors as buttonColors5, focusVisible as focusVisible18 } from "@zenkigen-inc/component-theme";
+import clsx41 from "clsx";
 import { useCallback as useCallback14 } from "react";
-import { jsx as jsx57, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs29 } from "react/jsx-runtime";
 function SortButton({
   size = "medium",
   width,
@@ -3973,18 +4245,18 @@ function SortButton({
     if (sortOrder === "descend") return "arrow-down";
     return "angle-small-down";
   };
-  const wrapperClasses = clsx40("relative flex shrink-0 items-center gap-1 rounded", {
+  const wrapperClasses = clsx41("relative flex shrink-0 items-center gap-1 rounded", {
     "h-6": size === "x-small" || size === "small",
     "h-8": size === "medium",
     "h-10": size === "large",
     "cursor-not-allowed": isDisabled
   });
-  const buttonClasses = clsx40(
+  const buttonClasses = clsx41(
     "flex size-full items-center rounded",
     buttonColors5.text.hover,
     buttonColors5.text.active,
     buttonColors5.text.disabled,
-    focusVisible17.normal,
+    focusVisible18.normal,
     {
       [buttonColors5.text.selected]: !isDisabled && sortOrder !== null,
       // ソート状態時は選択状態のスタイル
@@ -3995,14 +4267,14 @@ function SortButton({
       "pointer-events-none": isDisabled
     }
   );
-  const labelClasses = clsx40("truncate", {
+  const labelClasses = clsx41("truncate", {
     "typography-label12regular": size === "x-small",
     "typography-label14regular": size === "small" || size === "medium",
     "typography-label16regular": size === "large",
     "mr-1": size === "x-small",
     "mr-2": size !== "x-small"
   });
-  return /* @__PURE__ */ jsx57("div", { className: wrapperClasses, style: { width }, children: /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsx61("div", { className: wrapperClasses, style: { width }, children: /* @__PURE__ */ jsxs29(
     "button",
     {
       className: buttonClasses,
@@ -4013,22 +4285,22 @@ function SortButton({
       "aria-label": ariaLabel,
       "aria-disabled": isDisabled,
       children: [
-        /* @__PURE__ */ jsx57("div", { className: labelClasses, children: label }),
-        /* @__PURE__ */ jsx57("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx57(Icon, { name: getIconName(), size: size === "large" ? "medium" : "small" }) })
+        /* @__PURE__ */ jsx61("div", { className: labelClasses, children: label }),
+        /* @__PURE__ */ jsx61("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx61(Icon, { name: getIconName(), size: size === "large" ? "medium" : "small" }) })
       ]
     }
   ) });
 }
 
 // src/steps/steps.tsx
-import { clsx as clsx43 } from "clsx";
-import { Children as Children6, Fragment as Fragment7, isValidElement as isValidElement5, useId as useId5, useMemo as useMemo6, useState as useState14 } from "react";
+import { clsx as clsx44 } from "clsx";
+import { Children as Children7, Fragment as Fragment7, isValidElement as isValidElement6, useId as useId7, useMemo as useMemo7, useState as useState14 } from "react";
 
 // src/steps/steps-context.ts
-import { createContext as createContext13, useContext as useContext16 } from "react";
-var StepsContext = createContext13(null);
+import { createContext as createContext14, useContext as useContext17 } from "react";
+var StepsContext = createContext14(null);
 function useStepsContext() {
-  const context = useContext16(StepsContext);
+  const context = useContext17(StepsContext);
   if (context === null) {
     throw new Error("Steps.Item must be used within <Steps>");
   }
@@ -4036,13 +4308,13 @@ function useStepsContext() {
 }
 
 // src/steps/steps-item.tsx
-import { clsx as clsx42 } from "clsx";
+import { clsx as clsx43 } from "clsx";
 
 // src/steps/steps-item-context.ts
-import { createContext as createContext14, useContext as useContext17 } from "react";
-var StepsItemContext = createContext14(null);
+import { createContext as createContext15, useContext as useContext18 } from "react";
+var StepsItemContext = createContext15(null);
 function useStepsItemContext() {
-  const context = useContext17(StepsItemContext);
+  const context = useContext18(StepsItemContext);
   if (context === null) {
     throw new Error("Steps.Item must be rendered inside a <Steps> component");
   }
@@ -4050,34 +4322,34 @@ function useStepsItemContext() {
 }
 
 // src/steps/steps-separator.tsx
-import { clsx as clsx41 } from "clsx";
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { clsx as clsx42 } from "clsx";
+import { jsx as jsx62 } from "react/jsx-runtime";
 function StepsSeparator({ progress }) {
   const { orientation } = useStepsContext();
   const isVerticalLine = orientation === "vertical";
   const colorClass = progress === "completed" ? "bg-interactive01" : "bg-uiBorder01";
   if (isVerticalLine) {
-    return /* @__PURE__ */ jsx58("div", { "aria-hidden": "true", className: clsx41("mx-auto h-full min-h-2 w-px", colorClass) });
+    return /* @__PURE__ */ jsx62("div", { "aria-hidden": "true", className: clsx42("mx-auto h-full min-h-2 w-px", colorClass) });
   }
-  return /* @__PURE__ */ jsx58("div", { "aria-hidden": "true", className: clsx41("h-px flex-1", colorClass) });
+  return /* @__PURE__ */ jsx62("div", { "aria-hidden": "true", className: clsx42("h-px flex-1", colorClass) });
 }
 
 // src/steps/steps-item.tsx
-import { jsx as jsx59, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs30 } from "react/jsx-runtime";
 var progressSrOnlyLabel = {
   completed: "\u5B8C\u4E86: ",
   current: "\u73FE\u5728\u306E\u30B9\u30C6\u30C3\u30D7: ",
   upcoming: "\u672A\u7740\u624B: "
 };
 function getCircleSizeClass(size) {
-  return clsx42({
+  return clsx43({
     "size-6 typography-label12regular": size === "small",
     "size-8 typography-label12regular": size === "medium",
     "size-10 typography-label16regular": size === "large"
   });
 }
 function getCircleVariantProgressClass(variant, progress) {
-  return clsx42({
+  return clsx43({
     // subtle（全 state border-transparent で box-sizing を揃える）
     "bg-uiBackground02 text-text01 border-transparent": variant === "subtle" && progress === "upcoming",
     "bg-activeUi text-text01 border-transparent": variant === "subtle" && progress === "current",
@@ -4089,7 +4361,7 @@ function getCircleVariantProgressClass(variant, progress) {
   });
 }
 function getCircleClasses(size, variant, state) {
-  return clsx42(
+  return clsx43(
     "box-border flex items-center justify-center rounded-full border-2",
     getCircleSizeClass(size),
     getCircleVariantProgressClass(variant, state.progress)
@@ -4107,65 +4379,65 @@ function StepsItem({ label, description }) {
   const { state, index, isLast, id } = useStepsItemContext();
   const isCircleFilled = state.progress === "completed";
   const circleClasses = getCircleClasses(size, variant, state);
-  const checkIcon = variant === "solid" ? /* @__PURE__ */ jsx59(Icon, { name: "check", size: getIconSize(size), color: "iconOnColor" }) : /* @__PURE__ */ jsx59(Icon, { name: "check", size: getIconSize(size), className: "fill-gray-gray100" });
-  const circle = /* @__PURE__ */ jsx59("span", { "aria-hidden": "true", className: circleClasses, children: isCircleFilled ? checkIcon : /* @__PURE__ */ jsx59("span", { children: index + 1 }) });
-  const labelBlock = /* @__PURE__ */ jsxs29("span", { className: clsx42("flex flex-col", textOrientation === "horizontal" ? "gap-1" : "items-center text-center"), children: [
-    /* @__PURE__ */ jsxs29(
+  const checkIcon = variant === "solid" ? /* @__PURE__ */ jsx63(Icon, { name: "check", size: getIconSize(size), color: "iconOnColor" }) : /* @__PURE__ */ jsx63(Icon, { name: "check", size: getIconSize(size), className: "fill-gray-gray100" });
+  const circle = /* @__PURE__ */ jsx63("span", { "aria-hidden": "true", className: circleClasses, children: isCircleFilled ? checkIcon : /* @__PURE__ */ jsx63("span", { children: index + 1 }) });
+  const labelBlock = /* @__PURE__ */ jsxs30("span", { className: clsx43("flex flex-col", textOrientation === "horizontal" ? "gap-1" : "items-center text-center"), children: [
+    /* @__PURE__ */ jsxs30(
       "span",
       {
-        className: clsx42(
+        className: clsx43(
           "whitespace-nowrap text-text01",
           size === "large" ? "typography-body16regular" : "typography-body14regular"
         ),
         children: [
-          /* @__PURE__ */ jsx59("span", { className: "sr-only", children: progressSrOnlyLabel[state.progress] }),
+          /* @__PURE__ */ jsx63("span", { className: "sr-only", children: progressSrOnlyLabel[state.progress] }),
           label
         ]
       }
     ),
-    description != null && /* @__PURE__ */ jsx59("span", { className: "typography-label12regular whitespace-nowrap text-text02", children: description })
+    description != null && /* @__PURE__ */ jsx63("span", { className: "typography-label12regular whitespace-nowrap text-text02", children: description })
   ] });
   const ariaCurrentProps = state.progress === "current" ? { "aria-current": "step" } : {};
   if (orientation === "horizontal" && textOrientation === "horizontal") {
-    return /* @__PURE__ */ jsx59("li", { ...ariaCurrentProps, id, children: /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2", children: [
+    return /* @__PURE__ */ jsx63("li", { ...ariaCurrentProps, id, children: /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2", children: [
       circle,
       labelBlock
     ] }) });
   }
   if (orientation === "horizontal" && textOrientation === "vertical") {
-    return /* @__PURE__ */ jsx59("li", { ...ariaCurrentProps, id, children: /* @__PURE__ */ jsxs29("div", { className: "flex flex-col items-center gap-1", children: [
+    return /* @__PURE__ */ jsx63("li", { ...ariaCurrentProps, id, children: /* @__PURE__ */ jsxs30("div", { className: "flex flex-col items-center gap-1", children: [
       circle,
       labelBlock
     ] }) });
   }
   if (orientation === "vertical" && textOrientation === "horizontal") {
-    return /* @__PURE__ */ jsxs29(
+    return /* @__PURE__ */ jsxs30(
       "li",
       {
         ...ariaCurrentProps,
-        className: clsx42(
+        className: clsx43(
           "grid grid-cols-[min-content_1fr] grid-rows-[auto_1fr] items-center gap-x-2",
           !isLast && "flex-1"
         ),
         id,
         children: [
-          /* @__PURE__ */ jsx59("div", { className: "col-start-1 row-start-1 flex items-center", children: circle }),
-          /* @__PURE__ */ jsx59("div", { className: "col-start-2 row-start-1 flex items-center", children: labelBlock }),
-          !isLast && /* @__PURE__ */ jsx59("div", { className: "col-start-1 row-start-2 flex items-stretch justify-center self-stretch py-2", children: /* @__PURE__ */ jsx59(StepsSeparator, { progress: state.progress }) })
+          /* @__PURE__ */ jsx63("div", { className: "col-start-1 row-start-1 flex items-center", children: circle }),
+          /* @__PURE__ */ jsx63("div", { className: "col-start-2 row-start-1 flex items-center", children: labelBlock }),
+          !isLast && /* @__PURE__ */ jsx63("div", { className: "col-start-1 row-start-2 flex items-stretch justify-center self-stretch py-2", children: /* @__PURE__ */ jsx63(StepsSeparator, { progress: state.progress }) })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsxs29("li", { ...ariaCurrentProps, className: clsx42("flex flex-col items-center gap-1", !isLast && "flex-1"), id, children: [
+  return /* @__PURE__ */ jsxs30("li", { ...ariaCurrentProps, className: clsx43("flex flex-col items-center gap-1", !isLast && "flex-1"), id, children: [
     circle,
     labelBlock,
-    !isLast && /* @__PURE__ */ jsx59("div", { className: "flex flex-1 items-stretch self-stretch py-2", children: /* @__PURE__ */ jsx59(StepsSeparator, { progress: state.progress }) })
+    !isLast && /* @__PURE__ */ jsx63("div", { className: "flex flex-1 items-stretch self-stretch py-2", children: /* @__PURE__ */ jsx63(StepsSeparator, { progress: state.progress }) })
   ] });
 }
 StepsItem.displayName = "Steps.Item";
 
 // src/steps/steps.tsx
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx64 } from "react/jsx-runtime";
 function getSeparatorCellHeightClass(size) {
   if (size === "small") return "h-6";
   if (size === "medium") return "h-8";
@@ -4178,12 +4450,12 @@ function HorizontalSeparatorCell({
 }) {
   const heightClass = getSeparatorCellHeightClass(size);
   const alignClass = textOrientation === "vertical" ? "self-start" : "";
-  return /* @__PURE__ */ jsx60("li", { "aria-hidden": "true", className: clsx43("flex items-center", heightClass, alignClass), role: "presentation", children: /* @__PURE__ */ jsx60(StepsSeparator, { progress }) });
+  return /* @__PURE__ */ jsx64("li", { "aria-hidden": "true", className: clsx44("flex items-center", heightClass, alignClass), role: "presentation", children: /* @__PURE__ */ jsx64(StepsSeparator, { progress }) });
 }
 function collectStepsItems(children) {
   const result = [];
-  Children6.toArray(children).forEach((child) => {
-    if (!isValidElement5(child)) {
+  Children7.toArray(children).forEach((child) => {
+    if (!isValidElement6(child)) {
       return;
     }
     if (child.type === StepsItem) {
@@ -4207,12 +4479,12 @@ function StepsRoot({
   variant = "solid",
   "aria-label": ariaLabel
 }) {
-  const baseId = useId5();
+  const baseId = useId7();
   const [internalStep] = useState14(defaultCurrentStep ?? 0);
   const resolvedCurrentStep = currentStep ?? internalStep;
-  const itemElements = useMemo6(() => collectStepsItems(children), [children]);
+  const itemElements = useMemo7(() => collectStepsItems(children), [children]);
   const stepsCount = itemElements.length;
-  const contextValue = useMemo6(
+  const contextValue = useMemo7(
     () => ({
       size,
       orientation,
@@ -4231,13 +4503,13 @@ function StepsRoot({
     const state = states[index] ?? { progress: "upcoming" };
     const isLast = index === stepsCount - 1;
     const id = `${baseId}-item-${index}`;
-    return /* @__PURE__ */ jsx60(StepsItemContext.Provider, { value: { index, state, isLast, id }, children: item }, item.key ?? `item-${index}`);
+    return /* @__PURE__ */ jsx64(StepsItemContext.Provider, { value: { index, state, isLast, id }, children: item }, item.key ?? `item-${index}`);
   };
   const renderedChildren = orientation === "horizontal" ? itemElements.flatMap((item, index) => {
     const nodes = [wrapItem(item, index)];
     if (index < stepsCount - 1) {
       nodes.push(
-        /* @__PURE__ */ jsx60(
+        /* @__PURE__ */ jsx64(
           HorizontalSeparatorCell,
           {
             progress: states[index]?.progress ?? "upcoming",
@@ -4250,7 +4522,7 @@ function StepsRoot({
     }
     return nodes;
   }) : itemElements.map((item, index) => wrapItem(item, index));
-  const listClassName = clsx43(
+  const listClassName = clsx44(
     orientation === "horizontal" ? ["grid w-full gap-x-2", textOrientation === "vertical" ? "items-start" : "items-center"] : "flex flex-col items-stretch"
   );
   const horizontalGridTemplate = Array.from(
@@ -4258,20 +4530,20 @@ function StepsRoot({
     (_unused, index) => index === stepsCount - 1 ? "max-content" : "max-content minmax(8px, 1fr)"
   ).join(" ");
   const listStyleProps = orientation === "horizontal" ? { style: { gridTemplateColumns: horizontalGridTemplate } } : {};
-  return /* @__PURE__ */ jsx60(StepsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx60("ol", { "aria-label": ariaLabel, className: listClassName, role: "list", ...listStyleProps, children: renderedChildren }) });
+  return /* @__PURE__ */ jsx64(StepsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx64("ol", { "aria-label": ariaLabel, className: listClassName, role: "list", ...listStyleProps, children: renderedChildren }) });
 }
 var Steps = StepsRoot;
 Steps.Item = StepsItem;
 
 // src/tab/tab.tsx
-import { clsx as clsx45 } from "clsx";
-import { Children as Children7 } from "react";
+import { clsx as clsx46 } from "clsx";
+import { Children as Children8 } from "react";
 
 // src/tab/tab-item.tsx
-import { clsx as clsx44 } from "clsx";
-import { jsx as jsx61, jsxs as jsxs30 } from "react/jsx-runtime";
+import { clsx as clsx45 } from "clsx";
+import { jsx as jsx65, jsxs as jsxs31 } from "react/jsx-runtime";
 var TabItem = ({ isSelected = false, isDisabled = false, icon, ...props }) => {
-  const classes = clsx44(
+  const classes = clsx45(
     "group relative z-0 flex items-center justify-center gap-1 py-2 leading-[24px] before:absolute before:inset-x-0 before:bottom-0 before:h-[2px] hover:text-interactive01 disabled:pointer-events-none disabled:text-disabled01",
     {
       "typography-label14regular text-interactive02": !isSelected,
@@ -4279,12 +4551,12 @@ var TabItem = ({ isSelected = false, isDisabled = false, icon, ...props }) => {
       "before:bg-interactive01 hover:before:bg-interactive01 pointer-events-none": isSelected
     }
   );
-  const iconWrapperClasses = clsx44("flex shrink-0 items-center", {
+  const iconWrapperClasses = clsx45("flex shrink-0 items-center", {
     "fill-disabled01": isDisabled,
     "fill-interactive01": !isDisabled && isSelected,
     "fill-icon01 group-hover:fill-interactive01": !isDisabled && !isSelected
   });
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(
     "button",
     {
       type: "button",
@@ -4294,7 +4566,7 @@ var TabItem = ({ isSelected = false, isDisabled = false, icon, ...props }) => {
       disabled: isDisabled,
       onClick: () => props.onClick(props.id),
       children: [
-        icon != null && /* @__PURE__ */ jsx61("span", { className: iconWrapperClasses, children: /* @__PURE__ */ jsx61(Icon, { name: icon, size: "small" }) }),
+        icon != null && /* @__PURE__ */ jsx65("span", { className: iconWrapperClasses, children: /* @__PURE__ */ jsx65(Icon, { name: icon, size: "small" }) }),
         props.children
       ]
     }
@@ -4302,39 +4574,39 @@ var TabItem = ({ isSelected = false, isDisabled = false, icon, ...props }) => {
 };
 
 // src/tab/tab.tsx
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
 function Tab({ children, layout = "auto" }) {
-  const childrenCount = Children7.count(children);
+  const childrenCount = Children8.count(children);
   const containerStyle = layout === "equal" ? { gridTemplateColumns: `repeat(${childrenCount}, minmax(0,1fr))` } : {};
-  const containerClasses = clsx45(
+  const containerClasses = clsx46(
     "relative gap-4 px-6 before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-uiBorder01",
     {
       flex: layout === "auto",
       grid: layout === "equal"
     }
   );
-  return /* @__PURE__ */ jsx62("div", { role: "tablist", className: containerClasses, style: containerStyle, children });
+  return /* @__PURE__ */ jsx66("div", { role: "tablist", className: containerClasses, style: containerStyle, children });
 }
 Tab.Item = TabItem;
 
 // src/table/table-cell.tsx
-import clsx46 from "clsx";
-import { jsx as jsx63 } from "react/jsx-runtime";
+import clsx47 from "clsx";
+import { jsx as jsx67 } from "react/jsx-runtime";
 function TableCell({ children, className, isHeader = false }) {
-  const classes = clsx46("border-b border-uiBorder01", { "sticky top-0 z-10 bg-white": isHeader }, className);
-  return /* @__PURE__ */ jsx63("div", { className: classes, children });
+  const classes = clsx47("border-b border-uiBorder01", { "sticky top-0 z-10 bg-white": isHeader }, className);
+  return /* @__PURE__ */ jsx67("div", { className: classes, children });
 }
 
 // src/table/table-row.tsx
-import clsx47 from "clsx";
-import { jsx as jsx64 } from "react/jsx-runtime";
+import clsx48 from "clsx";
+import { jsx as jsx68 } from "react/jsx-runtime";
 function TableRow({ children, isHoverBackgroundVisible = false }) {
-  const rowClasses = clsx47("contents", isHoverBackgroundVisible && "[&:hover>div]:bg-hoverUi02");
-  return /* @__PURE__ */ jsx64("div", { className: rowClasses, children });
+  const rowClasses = clsx48("contents", isHoverBackgroundVisible && "[&:hover>div]:bg-hoverUi02");
+  return /* @__PURE__ */ jsx68("div", { className: rowClasses, children });
 }
 
 // src/table/table.tsx
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx69 } from "react/jsx-runtime";
 function Table({
   width,
   templateRows,
@@ -4343,7 +4615,7 @@ function Table({
   autoRows,
   children
 }) {
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx69(
     "div",
     {
       className: "grid",
@@ -4363,22 +4635,22 @@ Table.Cell = TableCell;
 
 // src/tag/tag.tsx
 import { tagColors, tagLightColors } from "@zenkigen-inc/component-theme";
-import clsx49 from "clsx";
+import clsx50 from "clsx";
 
 // src/tag/delete-icon.tsx
-import { focusVisible as focusVisible18 } from "@zenkigen-inc/component-theme";
-import clsx48 from "clsx";
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { focusVisible as focusVisible19 } from "@zenkigen-inc/component-theme";
+import clsx49 from "clsx";
+import { jsx as jsx70 } from "react/jsx-runtime";
 var DeleteIcon = ({ color, variant, onClick }) => {
-  const deleteButtonClasses = clsx48(
+  const deleteButtonClasses = clsx49(
     "group ml-2 size-[14px] rounded-full p-0.5 hover:cursor-pointer hover:bg-iconOnColor focus-visible:bg-iconOnColor",
-    focusVisible18.normal
+    focusVisible19.normal
   );
-  const deletePathClasses = clsx48({
+  const deletePathClasses = clsx49({
     "fill-interactive02": color === "gray" || variant === "light",
     "group-hover:fill-interactive02 group-focus-visible:fill-interactive02 fill-iconOnColor": color !== "gray"
   });
-  return /* @__PURE__ */ jsx66("button", { type: "button", className: deleteButtonClasses, onClick, children: /* @__PURE__ */ jsx66("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx70("button", { type: "button", className: deleteButtonClasses, onClick, children: /* @__PURE__ */ jsx70("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx70(
     "path",
     {
       fillRule: "evenodd",
@@ -4390,9 +4662,9 @@ var DeleteIcon = ({ color, variant, onClick }) => {
 };
 
 // src/tag/tag.tsx
-import { jsx as jsx67, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs32 } from "react/jsx-runtime";
 function Tag({ id, children, color, variant = "normal", size = "medium", isEditable, onDelete }) {
-  const wrapperClasses = clsx49("flex", "items-center", "justify-center", {
+  const wrapperClasses = clsx50("flex", "items-center", "justify-center", {
     [tagColors[color]]: variant === "normal",
     [tagLightColors[color]]: variant === "light",
     "h-[14px] typography-label11regular": !isEditable && size === "x-small",
@@ -4403,21 +4675,21 @@ function Tag({ id, children, color, variant = "normal", size = "medium", isEdita
     "px-1": !isEditable,
     "px-2": isEditable
   });
-  return /* @__PURE__ */ jsxs31("div", { className: wrapperClasses, children: [
+  return /* @__PURE__ */ jsxs32("div", { className: wrapperClasses, children: [
     children,
-    isEditable ? /* @__PURE__ */ jsx67(DeleteIcon, { onClick: () => onDelete(id), color, variant }) : null
+    isEditable ? /* @__PURE__ */ jsx71(DeleteIcon, { onClick: () => onDelete(id), color, variant }) : null
   ] });
 }
 
 // src/text-area/text-area.tsx
-import { clsx as clsx52 } from "clsx";
-import { Children as Children8, cloneElement as cloneElement5, forwardRef as forwardRef15, isValidElement as isValidElement6, useId as useId6, useMemo as useMemo7 } from "react";
+import { clsx as clsx53 } from "clsx";
+import { Children as Children9, cloneElement as cloneElement6, forwardRef as forwardRef15, isValidElement as isValidElement7, useId as useId8, useMemo as useMemo8 } from "react";
 
 // src/text-area/text-area-context.tsx
-import { createContext as createContext15, useContext as useContext18 } from "react";
-var TextAreaCompoundContext = createContext15(null);
+import { createContext as createContext16, useContext as useContext19 } from "react";
+var TextAreaCompoundContext = createContext16(null);
 var useTextAreaCompoundContext = (componentName) => {
-  const context = useContext18(TextAreaCompoundContext);
+  const context = useContext19(TextAreaCompoundContext);
   if (context == null) {
     throw new Error(`${componentName} \u3092\u4F7F\u7528\u3059\u308B\u306B\u306F TextArea \u306E\u5B50\u8981\u7D20\u3068\u3057\u3066\u914D\u7F6E\u3059\u308B\u5FC5\u8981\u304C\u3042\u308B\u3002`);
   }
@@ -4425,9 +4697,9 @@ var useTextAreaCompoundContext = (componentName) => {
 };
 
 // src/text-area/text-area-error-message.tsx
-import { clsx as clsx50 } from "clsx";
+import { clsx as clsx51 } from "clsx";
 import { forwardRef as forwardRef13 } from "react";
-import { jsx as jsx68 } from "react/jsx-runtime";
+import { jsx as jsx72 } from "react/jsx-runtime";
 var TextAreaErrorMessage = forwardRef13(
   ({ "aria-live": ariaLive = "assertive", ...props }, ref) => {
     const { textAreaProps } = useTextAreaCompoundContext("TextArea.ErrorMessage");
@@ -4436,26 +4708,26 @@ var TextAreaErrorMessage = forwardRef13(
     if (!shouldRender) {
       return null;
     }
-    const errorMessageClassName = clsx50(typographyClass, "text-supportError");
-    return /* @__PURE__ */ jsx68("div", { ref, className: errorMessageClassName, "aria-live": ariaLive, ...props });
+    const errorMessageClassName = clsx51(typographyClass, "text-supportError");
+    return /* @__PURE__ */ jsx72("div", { ref, className: errorMessageClassName, "aria-live": ariaLive, ...props });
   }
 );
 TextAreaErrorMessage.displayName = "TextArea.ErrorMessage";
 
 // src/text-area/text-area-helper-message.tsx
-import { clsx as clsx51 } from "clsx";
+import { clsx as clsx52 } from "clsx";
 import { forwardRef as forwardRef14 } from "react";
-import { jsx as jsx69 } from "react/jsx-runtime";
+import { jsx as jsx73 } from "react/jsx-runtime";
 var TextAreaHelperMessage = forwardRef14((props, ref) => {
   const { textAreaProps } = useTextAreaCompoundContext("TextArea.HelperMessage");
   const typographyClass = textAreaProps.size === "large" ? "typography-label13regular" : "typography-label12regular";
-  const helperMessageClassName = clsx51(typographyClass, "text-text02");
-  return /* @__PURE__ */ jsx69("div", { ref, className: helperMessageClassName, ...props });
+  const helperMessageClassName = clsx52(typographyClass, "text-text02");
+  return /* @__PURE__ */ jsx73("div", { ref, className: helperMessageClassName, ...props });
 });
 TextAreaHelperMessage.displayName = "TextArea.HelperMessage";
 
 // src/text-area/text-area.tsx
-import { jsx as jsx70, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs33 } from "react/jsx-runtime";
 function TextAreaInner({
   size = "medium",
   variant = "outline",
@@ -4472,8 +4744,8 @@ function TextAreaInner({
   maxLength,
   ...props
 }, ref) {
-  const autoGeneratedId = useId6();
-  const textAreaPropsForContext = useMemo7(
+  const autoGeneratedId = useId8();
+  const textAreaPropsForContext = useMemo8(
     () => ({
       size,
       variant,
@@ -4481,7 +4753,7 @@ function TextAreaInner({
     }),
     [size, variant, isError]
   );
-  const contextValue = useMemo7(
+  const contextValue = useMemo8(
     () => ({
       textAreaProps: textAreaPropsForContext,
       forwardedRef: ref
@@ -4491,21 +4763,21 @@ function TextAreaInner({
   const helperMessageIds = [];
   const errorIds = [];
   const describedByBaseId = props.id ?? autoGeneratedId;
-  const enhancedChildren = Children8.map(children, (child) => {
-    if (!isValidElement6(child)) {
+  const enhancedChildren = Children9.map(children, (child) => {
+    if (!isValidElement7(child)) {
       return child;
     }
     if (child.type === TextAreaHelperMessage) {
       const helperChild = child;
       const assignedId = helperChild.props.id ?? `${describedByBaseId}-helper-${helperMessageIds.length + 1}`;
       helperMessageIds.push(assignedId);
-      return cloneElement5(helperChild, { id: assignedId });
+      return cloneElement6(helperChild, { id: assignedId });
     }
     if (child.type === TextAreaErrorMessage && isError) {
       const errorChild = child;
       const assignedId = errorChild.props.id ?? `${describedByBaseId}-error-${errorIds.length + 1}`;
       errorIds.push(assignedId);
-      return cloneElement5(errorChild, { id: assignedId });
+      return cloneElement6(errorChild, { id: assignedId });
     }
     return child;
   });
@@ -4532,7 +4804,7 @@ function TextAreaInner({
     ...maxLengthProps
   };
   const isBorderless = variant === "text";
-  const textAreaWrapperClassName = clsx52(
+  const textAreaWrapperClassName = clsx53(
     "box-border flex w-full overflow-hidden rounded border",
     {
       // outline variant
@@ -4548,7 +4820,7 @@ function TextAreaInner({
     // className は variant="outline" のみ受け入れ、後方互換のため wrapper の末尾に合成（@deprecated）
     !isBorderless && className
   );
-  const textAreaClassName = clsx52("w-full border-none bg-uiBackground01 outline-none", {
+  const textAreaClassName = clsx53("w-full border-none bg-uiBackground01 outline-none", {
     // outline: 従来の padding
     "typography-body14regular px-2 py-2": !isBorderless && size === "medium",
     "typography-body16regular px-3 py-2": !isBorderless && size === "large",
@@ -4567,7 +4839,7 @@ function TextAreaInner({
     "resize-none": !isResizable
   });
   const hasHeight = height != null && String(height).trim().length > 0;
-  const textAreaElement = /* @__PURE__ */ jsx70(
+  const textAreaElement = /* @__PURE__ */ jsx74(
     "div",
     {
       className: textAreaWrapperClassName,
@@ -4578,7 +4850,7 @@ function TextAreaInner({
         ...!autoHeight && hasHeight && !isResizable ? { height } : {},
         ...autoHeight && hasHeight ? { minHeight: height } : {}
       },
-      children: /* @__PURE__ */ jsx70(
+      children: /* @__PURE__ */ jsx74(
         "textarea",
         {
           ref,
@@ -4594,11 +4866,11 @@ function TextAreaInner({
       )
     }
   );
-  const counterElement = isCounterVisible ? /* @__PURE__ */ jsx70(
+  const counterElement = isCounterVisible ? /* @__PURE__ */ jsx74(
     "div",
     {
       id: counterId,
-      className: clsx52(
+      className: clsx53(
         "shrink-0",
         size === "large" ? "typography-label13regular" : "typography-label12regular",
         !disabled && isExceeded ? "text-supportError" : "text-text02"
@@ -4607,17 +4879,17 @@ function TextAreaInner({
       children: counterLimit != null ? `${currentLength}/${counterLimit}\u6587\u5B57` : `${currentLength}\u6587\u5B57`
     }
   ) : null;
-  const stackedChildren = enhancedChildren == null ? [] : Children8.toArray(enhancedChildren);
+  const stackedChildren = enhancedChildren == null ? [] : Children9.toArray(enhancedChildren);
   const hasMessageChildren = stackedChildren.length > 0;
   const hasBottomContent = hasMessageChildren || counterElement != null;
   if (!hasBottomContent) {
-    return /* @__PURE__ */ jsx70(TextAreaCompoundContext.Provider, { value: contextValue, children: textAreaElement });
+    return /* @__PURE__ */ jsx74(TextAreaCompoundContext.Provider, { value: contextValue, children: textAreaElement });
   }
-  return /* @__PURE__ */ jsx70(TextAreaCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs32("div", { className: "flex flex-col gap-2", children: [
+  return /* @__PURE__ */ jsx74(TextAreaCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs33("div", { className: "flex flex-col gap-2", children: [
     textAreaElement,
-    /* @__PURE__ */ jsxs32("div", { className: "flex items-start justify-between gap-2", children: [
-      hasMessageChildren && /* @__PURE__ */ jsx70("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: stackedChildren }),
-      !hasMessageChildren && counterElement != null && /* @__PURE__ */ jsx70("div", { className: "flex-1" }),
+    /* @__PURE__ */ jsxs33("div", { className: "flex items-start justify-between gap-2", children: [
+      hasMessageChildren && /* @__PURE__ */ jsx74("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: stackedChildren }),
+      !hasMessageChildren && counterElement != null && /* @__PURE__ */ jsx74("div", { className: "flex-1" }),
       counterElement
     ] })
   ] }) });
@@ -4633,41 +4905,321 @@ var TextAreaBase = forwardRef15(function TextAreaBase2(props, ref) {
 });
 var TextArea = attachStatics2(TextAreaBase);
 
+// src/time-picker/time-picker.tsx
+import { clsx as clsx55 } from "clsx";
+import { Children as Children10, cloneElement as cloneElement7, Fragment as Fragment8, isValidElement as isValidElement8, useId as useId9, useMemo as useMemo9 } from "react";
+
+// src/time-picker/time-picker-context.tsx
+import { createContext as createContext17, useContext as useContext20 } from "react";
+var TimePickerCompoundContext = createContext17(null);
+var useTimePickerCompoundContext = (componentName) => {
+  const context = useContext20(TimePickerCompoundContext);
+  if (context == null) {
+    throw new Error(`${componentName} \u3092\u4F7F\u7528\u3059\u308B\u306B\u306F TimePicker \u306E\u5B50\u8981\u7D20\u3068\u3057\u3066\u914D\u7F6E\u3059\u308B\u5FC5\u8981\u304C\u3042\u308B\u3002`);
+  }
+  return context;
+};
+
+// src/time-picker/time-picker-error-message.tsx
+import { clsx as clsx54 } from "clsx";
+import { forwardRef as forwardRef16 } from "react";
+import { jsx as jsx75 } from "react/jsx-runtime";
+var TimePickerErrorMessage = forwardRef16(
+  ({ "aria-live": ariaLive = "assertive", ...props }, ref) => {
+    const { size, isError } = useTimePickerCompoundContext("TimePicker.ErrorMessage");
+    const typographyClass = size === "large" ? "typography-label12regular" : "typography-label11regular";
+    if (isError !== true) {
+      return null;
+    }
+    const errorMessageClassName = clsx54(typographyClass, "text-supportError");
+    return /* @__PURE__ */ jsx75("div", { ref, className: errorMessageClassName, "aria-live": ariaLive, ...props });
+  }
+);
+TimePickerErrorMessage.displayName = "TimePicker.ErrorMessage";
+
+// src/time-picker/time-picker-utils.ts
+var MIN_HOUR = 0;
+var MAX_HOUR = 23;
+var MIN_MINUTE = 0;
+var MAX_MINUTE = 59;
+var MINUTES_PER_HOUR = 60;
+var padZero = (value) => String(value).padStart(2, "0");
+var toTotalMinutes = (hour, minute) => hour * MINUTES_PER_HOUR + minute;
+var createHourOption = (hour) => ({
+  id: `hour-${hour}`,
+  value: String(hour),
+  label: padZero(hour)
+});
+var createMinuteOption = (minute) => ({
+  id: `minute-${minute}`,
+  value: String(minute),
+  label: padZero(minute)
+});
+var parseTime = (time) => {
+  const match = /^(\d{1,2}):(\d{1,2})$/.exec(time);
+  if (match == null) {
+    return null;
+  }
+  const hour = Number(match[1]);
+  const minute = Number(match[2]);
+  if (Number.isNaN(hour) || Number.isNaN(minute)) {
+    return null;
+  }
+  if (hour < MIN_HOUR || hour > MAX_HOUR || minute < MIN_MINUTE || minute > MAX_MINUTE) {
+    return null;
+  }
+  return { hour, minute };
+};
+var formatTime = (value) => {
+  if (value.hour == null || value.minute == null) {
+    return null;
+  }
+  return `${padZero(value.hour)}:${padZero(value.minute)}`;
+};
+var isTimeInRange = (hour, minute, minTime, maxTime) => {
+  const total = toTotalMinutes(hour, minute);
+  const min = minTime != null ? parseTime(minTime) : null;
+  const max = maxTime != null ? parseTime(maxTime) : null;
+  if (min != null && total < toTotalMinutes(min.hour, min.minute)) {
+    return false;
+  }
+  if (max != null && total > toTotalMinutes(max.hour, max.minute)) {
+    return false;
+  }
+  return true;
+};
+var isMinuteAvailableForAnyHour = (minute, minTime, maxTime) => {
+  for (let hour = MIN_HOUR; hour <= MAX_HOUR; hour += 1) {
+    if (isTimeInRange(hour, minute, minTime, maxTime)) {
+      return true;
+    }
+  }
+  return false;
+};
+var generateMinuteOptions = (minuteStep, selectedHour, minTime, maxTime) => {
+  const min = minTime != null ? parseTime(minTime) : null;
+  const max = maxTime != null ? parseTime(maxTime) : null;
+  const shouldFilterByRange = min != null || max != null;
+  const options = [];
+  for (let minute = MIN_MINUTE; minute <= MAX_MINUTE; minute += minuteStep) {
+    if (shouldFilterByRange) {
+      const isAvailable = selectedHour != null ? isTimeInRange(selectedHour, minute, minTime, maxTime) : isMinuteAvailableForAnyHour(minute, minTime, maxTime);
+      if (!isAvailable) {
+        continue;
+      }
+    }
+    options.push(createMinuteOption(minute));
+  }
+  return options;
+};
+var generateHourOptions = (minuteStep, minTime, maxTime) => {
+  const options = [];
+  for (let hour = MIN_HOUR; hour <= MAX_HOUR; hour += 1) {
+    if (generateMinuteOptions(minuteStep, hour, minTime, maxTime).length === 0) {
+      continue;
+    }
+    options.push(createHourOption(hour));
+  }
+  return options;
+};
+
+// src/time-picker/time-picker.tsx
+import { jsx as jsx76, jsxs as jsxs34 } from "react/jsx-runtime";
+var SELECT_WIDTH_BY_SIZE = {
+  "x-small": 80,
+  small: 80,
+  medium: 80,
+  large: 88
+};
+var PLACEHOLDER = "--";
+var HOUR_ARIA_LABEL = "\u6642";
+var MINUTE_ARIA_LABEL = "\u5206";
+var createTriggerAriaLabel = (baseLabel, selectedOption) => selectedOption != null ? `${baseLabel} ${selectedOption.label}` : baseLabel;
+var OPTION_LIST_MAX_HEIGHT = "250px";
+var TimePicker = ({
+  value,
+  onChange,
+  size = "medium",
+  minuteStep = 1,
+  minTime,
+  maxTime,
+  isDisabled = false,
+  isError = false,
+  children
+}) => {
+  const autoGeneratedId = useId9();
+  const hourOptions = useMemo9(() => generateHourOptions(minuteStep, minTime, maxTime), [minuteStep, minTime, maxTime]);
+  const minuteOptions = useMemo9(
+    () => generateMinuteOptions(minuteStep, value.hour, minTime, maxTime),
+    [minuteStep, value.hour, minTime, maxTime]
+  );
+  const selectedHourOption = value.hour != null ? createHourOption(value.hour) : null;
+  const selectedMinuteOption = value.minute != null ? createMinuteOption(value.minute) : null;
+  const handleHourChange = (option) => {
+    const nextHour = option != null ? Number(option.value) : null;
+    const shouldResetMinute = nextHour != null && value.minute != null && !isTimeInRange(nextHour, value.minute, minTime, maxTime);
+    onChange({ hour: nextHour, minute: shouldResetMinute ? null : value.minute });
+  };
+  const handleMinuteChange = (option) => {
+    onChange({ hour: value.hour, minute: option != null ? Number(option.value) : null });
+  };
+  const errorIds = [];
+  const assignErrorIds = (nodes) => Children10.map(nodes, (child) => {
+    if (!isValidElement8(child)) {
+      return child;
+    }
+    if (child.type === Fragment8) {
+      const fragmentChild = child;
+      return cloneElement7(fragmentChild, {}, assignErrorIds(fragmentChild.props.children));
+    }
+    if (child.type === TimePickerErrorMessage && isError) {
+      const errorChild = child;
+      const assignedId = errorChild.props.id ?? `${autoGeneratedId}-error-${errorIds.length + 1}`;
+      errorIds.push(assignedId);
+      return cloneElement7(errorChild, { id: assignedId });
+    }
+    return child;
+  });
+  const enhancedChildren = assignErrorIds(children);
+  const sharedAriaProps = errorIds.length > 0 ? { "aria-describedby": errorIds.join(" ") } : {};
+  const separatorClasses = clsx55("text-text02", {
+    "typography-label12regular": size === "x-small",
+    "typography-label14regular": size === "small" || size === "medium",
+    "typography-label16regular": size === "large"
+  });
+  const selectWidth = SELECT_WIDTH_BY_SIZE[size];
+  const contextValue = useMemo9(() => ({ size, isError }), [size, isError]);
+  const timeInputs = /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx76(
+      Select,
+      {
+        size,
+        width: selectWidth,
+        placeholder: PLACEHOLDER,
+        selectedOption: selectedHourOption,
+        isDisabled,
+        isError,
+        optionListMaxHeight: OPTION_LIST_MAX_HEIGHT,
+        "aria-label": createTriggerAriaLabel(HOUR_ARIA_LABEL, selectedHourOption),
+        ...sharedAriaProps,
+        onChange: handleHourChange,
+        children: hourOptions.map((option) => /* @__PURE__ */ jsx76(Select.Option, { option }, option.id))
+      }
+    ),
+    /* @__PURE__ */ jsx76("span", { className: separatorClasses, children: ":" }),
+    /* @__PURE__ */ jsx76(
+      Select,
+      {
+        size,
+        width: selectWidth,
+        placeholder: PLACEHOLDER,
+        selectedOption: selectedMinuteOption,
+        isDisabled,
+        isError,
+        optionListMaxHeight: OPTION_LIST_MAX_HEIGHT,
+        "aria-label": createTriggerAriaLabel(MINUTE_ARIA_LABEL, selectedMinuteOption),
+        ...sharedAriaProps,
+        onChange: handleMinuteChange,
+        children: minuteOptions.map((option) => /* @__PURE__ */ jsx76(Select.Option, { option }, option.id))
+      }
+    )
+  ] });
+  const stackedChildren = enhancedChildren == null ? [] : Children10.toArray(enhancedChildren);
+  const hasMessageChildren = stackedChildren.length > 0;
+  if (!hasMessageChildren) {
+    return /* @__PURE__ */ jsx76(TimePickerCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx76("div", { className: "flex flex-col", children: timeInputs }) });
+  }
+  return /* @__PURE__ */ jsx76(TimePickerCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs34("div", { className: "flex flex-col gap-2", children: [
+    timeInputs,
+    stackedChildren
+  ] }) });
+};
+TimePicker.ErrorMessage = TimePickerErrorMessage;
+TimePicker.displayName = "TimePicker";
+
 // src/toast/toast.tsx
-import clsx53 from "clsx";
-import { useCallback as useCallback15, useEffect as useEffect12, useState as useState15 } from "react";
-import { jsx as jsx71, jsxs as jsxs33 } from "react/jsx-runtime";
+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 = clsx53("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 = clsx53("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 = clsx53("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",
@@ -4675,53 +5227,86 @@ 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__ */ jsxs33("div", { className: wrapperClasses, style: { width }, onAnimationEnd: handleAnimationEnd, children: [
-    /* @__PURE__ */ jsx71("div", { className: iconClasses, children: /* @__PURE__ */ jsx71(Icon, { name: iconName[state] }) }),
-    /* @__PURE__ */ jsx71("p", { className: textClasses, children }),
-    /* @__PURE__ */ jsx71(IconButton, { icon: "close", size: "medium", variant: "text", onClick: handleClose, isNoPadding: true })
+  return /* @__PURE__ */ jsxs35("div", { className: wrapperClasses, style: { width }, onAnimationEnd: handleAnimationEnd, children: [
+    /* @__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 createContext16, useCallback as useCallback16, useContext as useContext19, 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 jsx72, jsxs as jsxs34 } from "react/jsx-runtime";
-var ToastContext = createContext16({});
-var ToastProvider = ({ children }) => {
+import { jsx as jsx78, jsxs as jsxs36 } from "react/jsx-runtime";
+var ToastContext = createContext18({});
+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));
   }, []);
   useEffect13(() => {
     setIsClientRender(true);
   }, []);
-  return /* @__PURE__ */ jsxs34(ToastContext.Provider, { value: { addToast, removeToast }, children: [
+  return /* @__PURE__ */ jsxs36(ToastContext.Provider, { value: { addToast, removeToast }, children: [
     children,
     isClientRender && createPortal3(
-      /* @__PURE__ */ jsx72("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__ */ jsx72(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
     )
   ] });
 };
 var useToast = () => {
-  return useContext19(ToastContext);
+  return useContext21(ToastContext);
 };
 
 // src/toggle/toggle.tsx
-import clsx54 from "clsx";
-import { jsx as jsx73, jsxs as jsxs35 } from "react/jsx-runtime";
+import clsx57 from "clsx";
+import { jsx as jsx79, jsxs as jsxs37 } from "react/jsx-runtime";
 function Toggle({
   id,
   size = "medium",
@@ -4731,7 +5316,7 @@ function Toggle({
   labelPosition = "right",
   isDisabled = false
 }) {
-  const baseClasses = clsx54("relative flex items-center rounded-full", {
+  const baseClasses = clsx57("relative flex items-center rounded-full", {
     "bg-disabledOn": isDisabled && isChecked,
     "bg-disabled01": isDisabled && !isChecked,
     "bg-interactive01 peer-hover:bg-hover01": !isDisabled && isChecked,
@@ -4739,16 +5324,16 @@ function Toggle({
     "w-8 h-4 px-[3px]": size === "small",
     "w-12 h-6 px-1": size === "medium" || size === "large"
   });
-  const inputClasses = clsx54(
+  const inputClasses = clsx57(
     "peer absolute inset-0 z-[1] opacity-0",
     isDisabled ? "cursor-not-allowed" : "cursor-pointer"
   );
-  const indicatorClasses = clsx54("rounded-full bg-iconOnColor", {
+  const indicatorClasses = clsx57("rounded-full bg-iconOnColor", {
     "w-2.5 h-2.5": size === "small",
     "w-4 h-4": size === "medium" || size === "large",
     "ml-auto": isChecked
   });
-  const labelClasses = clsx54("break-all", {
+  const labelClasses = clsx57("break-all", {
     "mr-2": labelPosition === "left",
     "ml-2": labelPosition === "right",
     "typography-label14regular": size === "small" || size === "medium",
@@ -4756,9 +5341,9 @@ function Toggle({
     "pointer-events-none cursor-not-allowed text-disabled01": isDisabled,
     "cursor-pointer text-text01": !isDisabled
   });
-  return /* @__PURE__ */ jsxs35("div", { className: "relative flex flex-[0_0_auto] items-center", children: [
-    label != null && labelPosition === "left" && /* @__PURE__ */ jsx73("label", { htmlFor: id, className: labelClasses, children: label }),
-    /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsxs37("div", { className: "relative flex flex-[0_0_auto] items-center", children: [
+    label != null && labelPosition === "left" && /* @__PURE__ */ jsx79("label", { htmlFor: id, className: labelClasses, children: label }),
+    /* @__PURE__ */ jsx79(
       "input",
       {
         className: inputClasses,
@@ -4770,23 +5355,23 @@ function Toggle({
         disabled: isDisabled
       }
     ),
-    /* @__PURE__ */ jsx73("div", { className: baseClasses, children: /* @__PURE__ */ jsx73("span", { className: indicatorClasses }) }),
-    label != null && labelPosition === "right" && /* @__PURE__ */ jsx73("label", { htmlFor: id, className: labelClasses, children: label })
+    /* @__PURE__ */ jsx79("div", { className: baseClasses, children: /* @__PURE__ */ jsx79("span", { className: indicatorClasses }) }),
+    label != null && labelPosition === "right" && /* @__PURE__ */ jsx79("label", { htmlFor: id, className: labelClasses, children: label })
   ] });
 }
 
 // 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
-import clsx56 from "clsx";
+import clsx59 from "clsx";
 
 // src/tooltip/tail-icon.tsx
-import clsx55 from "clsx";
-import { jsx as jsx74 } from "react/jsx-runtime";
+import clsx58 from "clsx";
+import { jsx as jsx80 } from "react/jsx-runtime";
 var TailIcon = (props) => {
-  const tailClasses = clsx55("absolute fill-uiBackgroundTooltip", {
+  const tailClasses = clsx58("absolute fill-uiBackgroundTooltip", {
     "rotate-180": props.verticalPosition === "bottom",
     "rotate-0": props.verticalPosition !== "bottom",
     "-top-1": props.verticalPosition === "bottom" && props.size === "small",
@@ -4801,9 +5386,9 @@ var TailIcon = (props) => {
     "left-1/2 -translate-x-2": props.horizontalAlign === "center" && props.size !== "small"
   });
   if (props.size === "small") {
-    return /* @__PURE__ */ jsx74("svg", { className: tailClasses, width: "8", height: "4", viewBox: "0 0 8 4", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx74("path", { d: "M4 4L0 0H8L4 4Z" }) });
+    return /* @__PURE__ */ jsx80("svg", { className: tailClasses, width: "8", height: "4", viewBox: "0 0 8 4", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx80("path", { d: "M4 4L0 0H8L4 4Z" }) });
   } else {
-    return /* @__PURE__ */ jsx74(
+    return /* @__PURE__ */ jsx80(
       "svg",
       {
         className: tailClasses,
@@ -4812,14 +5397,14 @@ var TailIcon = (props) => {
         viewBox: "0 0 14 8",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        children: /* @__PURE__ */ jsx74("path", { d: "M7 8L0 0H14L7 8Z" })
+        children: /* @__PURE__ */ jsx80("path", { d: "M7 8L0 0H14L7 8Z" })
       }
     );
   }
 };
 
 // src/tooltip/tooltip-content.tsx
-import { jsx as jsx75, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx81, jsxs as jsxs38 } from "react/jsx-runtime";
 var TooltipContent = ({
   content,
   horizontalAlign,
@@ -4829,7 +5414,7 @@ var TooltipContent = ({
   maxWidth,
   isPortal = false
 }) => {
-  const tooltipWrapperClasses = clsx56("absolute z-tooltip m-auto flex", {
+  const tooltipWrapperClasses = clsx59("absolute z-tooltip m-auto flex", {
     "top-0": !isPortal && verticalPosition === "top",
     "bottom-0": !isPortal && verticalPosition === "bottom",
     "justify-start": horizontalAlign === "left",
@@ -4838,7 +5423,7 @@ var TooltipContent = ({
     "w-[24px]": size === "small",
     "w-[46px]": size !== "small"
   });
-  const tooltipBodyClasses = clsx56(
+  const tooltipBodyClasses = clsx59(
     "absolute z-tooltip inline-block w-max rounded bg-uiBackgroundTooltip text-textOnColor",
     {
       "typography-body12regular": size === "small",
@@ -4855,7 +5440,7 @@ var TooltipContent = ({
     transform: `translate(${tooltipPosition.translateX}, ${tooltipPosition.translateY})`,
     ...tooltipPosition
   } : {};
-  return /* @__PURE__ */ jsx75("div", { className: tooltipWrapperClasses, style: tooltipWrapperStyle, children: /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsx81("div", { className: tooltipWrapperClasses, style: tooltipWrapperStyle, children: /* @__PURE__ */ jsxs38(
     "div",
     {
       className: tooltipBodyClasses,
@@ -4864,7 +5449,7 @@ var TooltipContent = ({
       },
       children: [
         content,
-        /* @__PURE__ */ jsx75(TailIcon, { size, verticalPosition, horizontalAlign })
+        /* @__PURE__ */ jsx81(TailIcon, { size, verticalPosition, horizontalAlign })
       ]
     }
   ) });
@@ -4925,7 +5510,7 @@ var useTooltip = () => {
 };
 
 // src/tooltip/tooltip.tsx
-import { jsx as jsx76, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs39 } from "react/jsx-runtime";
 function Tooltip({
   children,
   content,
@@ -4947,7 +5532,7 @@ function Tooltip({
     translateX: "0",
     translateY: "0"
   });
-  const targetRef = useRef15(null);
+  const targetRef = useRef17(null);
   const handleMouseOverWrapper = useCallback18(() => {
     if (isDisabledHover) {
       return;
@@ -4995,7 +5580,7 @@ function Tooltip({
       window.removeEventListener("resize", updatePosition);
     };
   }, [isVisible, calculatePosition, maxWidth, verticalPosition, horizontalAlign, size]);
-  return /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs39(
     "div",
     {
       ref: targetRef,
@@ -5004,7 +5589,7 @@ function Tooltip({
       onMouseLeave: handleMouseOutWrapper,
       children: [
         children,
-        isVisible && (portalTarget == null ? /* @__PURE__ */ jsx76(
+        isVisible && (portalTarget == null ? /* @__PURE__ */ jsx82(
           TooltipContent,
           {
             content,
@@ -5015,7 +5600,7 @@ function Tooltip({
             tooltipPosition
           }
         ) : createPortal4(
-          /* @__PURE__ */ jsx76(
+          /* @__PURE__ */ jsx82(
             TooltipContent,
             {
               isPortal: true,
@@ -5059,6 +5644,7 @@ export {
   PopoverTrigger,
   Popup,
   Radio,
+  RadioCard,
   Search,
   SegmentedControl,
   Select,
@@ -5073,10 +5659,13 @@ export {
   Tag,
   TextArea,
   TextInput,
+  TimePicker,
   Toast,
   ToastProvider,
   Toggle,
   Tooltip,
+  formatTime,
+  parseTime,
   useOutsideClick,
   useRovingFocus,
   useToast