@zenkigen-inc/component-ui 1.21.1 → 1.23.1

package/dist/index.js

@@ -55,6 +55,7 @@ __export(index_exports, {
   PopoverTrigger: () => PopoverTrigger,
   Popup: () => Popup,
   Radio: () => Radio,
+  RadioCard: () => RadioCard,
   Search: () => Search,
   SegmentedControl: () => SegmentedControl,
   Select: () => Select,
@@ -69,10 +70,13 @@ __export(index_exports, {
   Tag: () => Tag,
   TextArea: () => TextArea,
   TextInput: () => TextInput,
+  TimePicker: () => TimePicker,
   Toast: () => Toast,
   ToastProvider: () => ToastProvider,
   Toggle: () => Toggle,
   Tooltip: () => Tooltip,
+  formatTime: () => formatTime,
+  parseTime: () => parseTime,
   useOutsideClick: () => useOutsideClick,
   useRovingFocus: () => useRovingFocus,
   useToast: () => useToast
@@ -1743,6 +1747,7 @@ var PopoverTrigger = (0, import_react24.forwardRef)(function PopoverTrigger2({ c
 
 // src/popover/popover.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
+var FLOATING_VIEWPORT_PADDING2 = 8;
 function Popover({
   isOpen,
   children,
@@ -1752,6 +1757,14 @@ function Popover({
   anchorRef
 }) {
   const triggerRef = (0, import_react26.useRef)(null);
+  const middleware = (0, import_react26.useMemo)(
+    () => [
+      (0, import_react25.offset)(offsetValue),
+      (0, import_react25.flip)({ padding: FLOATING_VIEWPORT_PADDING2, flipAlignment: false }),
+      (0, import_react25.shift)({ padding: FLOATING_VIEWPORT_PADDING2 })
+    ],
+    [offsetValue]
+  );
   const floating = (0, import_react25.useFloating)({
     open: isOpen,
     onOpenChange: (open) => {
@@ -1760,7 +1773,7 @@ function Popover({
       }
     },
     placement,
-    middleware: [(0, import_react25.offset)(offsetValue)],
+    middleware,
     whileElementsMounted: import_react25.autoUpdate,
     strategy: "fixed"
   });
@@ -1808,27 +1821,83 @@ var import_react_day_picker2 = require("react-day-picker");
 var import_clsx15 = require("clsx");
 var import_react_day_picker = require("react-day-picker");
 var defaultDayPickerClassNames = (0, import_react_day_picker.getDefaultClassNames)();
-var DAY_PICKER_FONT_SIZE = "12px";
-var dayPickerStyle = {
-  "--rdp-nav-height": "30px",
-  "--rdp-day-width": "30px",
-  "--rdp-day-height": "30px",
-  "--rdp-day_button-width": "28px",
-  "--rdp-day_button-height": "28px",
-  "--rdp-day_button-border": "1px solid transparent",
-  "--rdp-weekday-padding": "0px",
-  fontFamily: "Arial, 'Noto Sans JP', sans-serif",
-  fontSize: DAY_PICKER_FONT_SIZE,
-  fontWeight: 700
+var BASE_TOKENS = {
+  triggerIcon: "small",
+  dayPickerStyle: {
+    "--rdp-nav-height": "30px",
+    "--rdp-day-width": "30px",
+    "--rdp-day-height": "30px",
+    "--rdp-day_button-width": "28px",
+    "--rdp-day_button-height": "28px",
+    "--rdp-day_button-border": "1px solid transparent",
+    "--rdp-weekday-padding": "0px",
+    fontFamily: "Arial, 'Noto Sans JP', sans-serif",
+    fontSize: "12px",
+    fontWeight: 700
+  },
+  dayPickerClassNames: {
+    month: (0, import_clsx15.clsx)(defaultDayPickerClassNames.month, "flex flex-col px-[7px] py-2")
+  },
+  dayButtonClass: "relative grid size-full place-items-center rounded-full !border !border-solid",
+  dayButtonFontSize: "12px",
+  monthCaptionClass: "flex items-center justify-between px-1 pb-0.5",
+  monthCaptionTypography: "typography-label12bold",
+  navIconButton: "small",
+  weekdayClass: "m-0 size-7 p-0 text-center align-middle",
+  footerIconButton: "medium",
+  footerClearButton: "small",
+  errorTypography: "typography-label11regular"
+};
+var LARGE_TOKENS = {
+  ...BASE_TOKENS,
+  triggerIcon: "medium",
+  errorTypography: "typography-label12regular"
+};
+var X_LARGE_TOKENS = {
+  triggerIcon: "medium",
+  dayPickerStyle: {
+    "--rdp-nav-height": "40px",
+    "--rdp-day-width": "48px",
+    "--rdp-day-height": "48px",
+    "--rdp-day_button-width": "40px",
+    "--rdp-day_button-height": "40px",
+    "--rdp-day_button-border": "1px solid transparent",
+    "--rdp-weekday-padding": "0px",
+    fontFamily: "Arial, 'Noto Sans JP', sans-serif",
+    fontSize: "16px",
+    fontWeight: 700
+  },
+  dayPickerClassNames: {
+    month: (0, import_clsx15.clsx)(defaultDayPickerClassNames.month, "flex flex-col px-[3px] pb-1 pt-2")
+  },
+  dayButtonClass: "relative grid size-10 place-items-center rounded-full !border !border-solid",
+  dayButtonFontSize: "16px",
+  // caption は height 固定（--rdp-nav-height: 40px）のため pb-2 は食い込みとして働き、
+  // ナビボタンが上へ 4px はみ出して月ヘッダーと曜日行の視覚間隔が 8px になる（上部ブロックコメント参照）
+  monthCaptionClass: "flex items-center justify-between px-1 pb-2",
+  monthCaptionTypography: "typography-label16bold",
+  // IconButton に x-large は無いが、large が 40px で Figma と一致する（内部アイコンも 24px になる）
+  navIconButton: "large",
+  weekdayClass: "m-0 size-12 p-0 text-center align-middle",
+  footerIconButton: "large",
+  footerClearButton: "large",
+  errorTypography: "typography-label12regular"
+};
+var DATE_PICKER_SIZE_TOKENS = {
+  small: BASE_TOKENS,
+  medium: BASE_TOKENS,
+  large: LARGE_TOKENS,
+  "x-large": X_LARGE_TOKENS
 };
-var dayPickerClassNames = {
-  month: (0, import_clsx15.clsx)(defaultDayPickerClassNames.month, "flex flex-col px-[7px] py-2")
+var useDatePickerSizeTokens = (componentName = "DatePicker \u306E\u30AB\u30EC\u30F3\u30C0\u30FC") => {
+  const context = useDatePickerCompoundContext(componentName);
+  return { ...context, tokens: DATE_PICKER_SIZE_TOKENS[context.size] };
 };
-var dayButtonBaseClass = "relative grid size-full place-items-center rounded-full !border !border-solid";
 
 // src/date-picker/date-picker-day-button.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var CustomDayButton = ({ day, modifiers, className, style, ...buttonProps }) => {
+  const { tokens } = useDatePickerSizeTokens();
   const isSelected = Boolean(modifiers.selected);
   const isOutside = Boolean(modifiers.outside);
   const isMinMaxDisabled = Boolean(modifiers.minMaxDisabled);
@@ -1841,10 +1910,10 @@ var CustomDayButton = ({ day, modifiers, className, style, ...buttonProps }) =>
       ...buttonProps,
       day,
       modifiers,
-      style: { ...style, fontSize: DAY_PICKER_FONT_SIZE },
+      style: { ...style, fontSize: tokens.dayButtonFontSize },
       className: (0, import_clsx16.clsx)(
         className,
-        dayButtonBaseClass,
+        tokens.dayButtonClass,
         // 共通: フォーカスリング（有効な日のみ）
         // react-day-picker の rdp-day_button クラスが outline: none を設定しているため、!important で上書き
         !isDisabledDay && import_component_theme6.focusVisible.normalImportant,
@@ -1870,8 +1939,8 @@ var import_react28 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var DatePickerErrorMessage = (0, import_react28.forwardRef)(
   ({ "aria-live": ariaLive = "assertive", ...props }, ref) => {
-    const { size, isError } = useDatePickerCompoundContext("DatePicker.ErrorMessage");
-    const typographyClass = size === "large" ? "typography-label12regular" : "typography-label11regular";
+    const { isError, tokens } = useDatePickerSizeTokens("DatePicker.ErrorMessage");
+    const typographyClass = tokens.errorTypography;
     if (isError !== true) {
       return null;
     }
@@ -1952,11 +2021,12 @@ var import_jsx_runtime25 = require("react/jsx-runtime");
 var CustomMonthCaption = ({ calendarMonth, className, displayIndex, style, ...props }) => {
   void displayIndex;
   const { goToMonth, nextMonth, previousMonth } = (0, import_react_day_picker3.useDayPicker)();
+  const { tokens } = useDatePickerSizeTokens();
   const captionMonth = calendarMonth.date;
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "div",
     {
-      className: (0, import_clsx18.clsx)("flex items-center justify-between px-1 pb-0.5", className),
+      className: (0, import_clsx18.clsx)(tokens.monthCaptionClass, className),
       style: { ...style, fontSize: "inherit", fontWeight: "inherit" },
       ...props,
       children: [
@@ -1964,19 +2034,19 @@ var CustomMonthCaption = ({ calendarMonth, className, displayIndex, style, ...pr
           IconButton,
           {
             icon: "angle-left",
-            size: "small",
+            size: tokens.navIconButton,
             variant: "text",
             isDisabled: !previousMonth,
             "aria-label": "\u524D\u306E\u6708",
             onClick: () => previousMonth && goToMonth(previousMonth)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "typography-label12bold text-text02", children: formatMonthLabel(captionMonth) }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: (0, import_clsx18.clsx)(tokens.monthCaptionTypography, "text-text02"), children: formatMonthLabel(captionMonth) }),
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           IconButton,
           {
             icon: "angle-right",
-            size: "small",
+            size: tokens.navIconButton,
             variant: "text",
             isDisabled: !nextMonth,
             "aria-label": "\u6B21\u306E\u6708",
@@ -1992,11 +2062,12 @@ var CustomMonthCaption = ({ calendarMonth, className, displayIndex, style, ...pr
 var import_clsx19 = require("clsx");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var CustomWeekday = ({ className, children, style, ...props }) => {
+  const { tokens } = useDatePickerSizeTokens();
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "th",
     {
       ...props,
-      className: (0, import_clsx19.clsx)(className, "m-0 size-7 p-0 text-center align-middle text-text02"),
+      className: (0, import_clsx19.clsx)(className, tokens.weekdayClass, "text-text02"),
       style: { ...style, fontSize: "inherit", fontWeight: "bold" },
       children
     }
@@ -2131,7 +2202,7 @@ var DatePicker = ({
       formatWeekdayName: (date) => weekdayFormatter.format(date)
     };
   }, []);
-  const iconSize = size === "large" ? "medium" : "small";
+  const tokens = DATE_PICKER_SIZE_TOKENS[size];
   const displayText = value ? formatDisplayDate(value, timeZone) : placeholder;
   const displayTextClasses = "min-w-0 truncate";
   const errorIds = [];
@@ -2179,7 +2250,7 @@ var DatePicker = ({
         size,
         variant: isError ? "outlineDanger" : "outline",
         isDisabled,
-        before: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { name: "calendar", size: iconSize }),
+        before: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { name: "calendar", size: tokens.triggerIcon }),
         justifyContent: "start",
         onClick: handleTriggerClick,
         children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: displayTextClasses, children: displayText })
@@ -2193,7 +2264,7 @@ var DatePicker = ({
           showOutsideDays: true,
           hideNavigation: true,
           weekStartsOn: 0,
-          style: dayPickerStyle,
+          style: tokens.dayPickerStyle,
           month: displayMonth,
           onMonthChange: setDisplayMonth,
           selected: selectedDate,
@@ -2201,7 +2272,7 @@ var DatePicker = ({
           today: todayForCalendar,
           disabled: disabledDays,
           modifiers: { minMaxDisabled: isMinMaxDisabled },
-          classNames: dayPickerClassNames,
+          classNames: tokens.dayPickerClassNames,
           formatters,
           fixedWeeks: true,
           components: { MonthCaption: CustomMonthCaption, DayButton: CustomDayButton, Weekday: CustomWeekday }
@@ -2212,14 +2283,14 @@ var DatePicker = ({
           IconButton,
           {
             icon: "calendar-today",
-            size: "medium",
+            size: tokens.footerIconButton,
             variant: "text",
             "aria-label": "\u4ECA\u65E5\u306B\u623B\u308B",
             iconAccentColor: "supportInfo",
             onClick: handleClickToday
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { type: "button", size: "small", variant: "text", onClick: handleClear, children: "\u30AF\u30EA\u30A2" })
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { type: "button", size: tokens.footerClearButton, variant: "text", onClick: handleClear, children: "\u30AF\u30EA\u30A2" })
       ] })
     ] }) })
   ] });
@@ -3039,22 +3110,35 @@ Modal.Footer = ModalFooter;
 // src/notification-inline/notification-inline.tsx
 var import_clsx29 = require("clsx");
 var import_jsx_runtime40 = require("react/jsx-runtime");
-function NotificationInline({ state = "default", size = "medium", ...props }) {
-  const wrapperClasses = (0, import_clsx29.clsx)("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 = (0, import_clsx29.clsx)("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 = (0, import_clsx29.clsx)("flex items-center", {
+  const iconClasses = (0, import_clsx29.clsx)("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 = (0, import_clsx29.clsx)("flex-1", {
+    "pt-[2px]": size === "medium" && state !== "default"
+  });
   const iconName = {
     attention: "attention",
     success: "success-filled",
@@ -3066,9 +3150,11 @@ function NotificationInline({ state = "default", size = "medium", ...props }) {
     medium: "medium"
   };
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: wrapperClasses, children: [
-    state !== "default" && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { name: iconName[state], size: iconSize[size] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "flex-1", children: props.children }),
-    props.showClose === true && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(IconButton, { icon: "close", size: "small", variant: "text", onClick: props.onClickClose }) })
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-1 items-start gap-1", children: [
+      state !== "default" && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { name: iconName[state], size: iconSize[size] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: textClasses, children: props.children })
+    ] }),
+    props.showClose === true && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "ml-2 flex shrink-0 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(IconButton, { icon: "close", size: "small", variant: "text", onClick: props.onClickClose }) })
   ] });
 }
 
@@ -3280,7 +3366,9 @@ function Select({
   isOptionSelected = false,
   onChange,
   optionListMaxHeight,
-  matchListToTrigger = false
+  matchListToTrigger = false,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedby
 }) {
   const [isOptionListOpen, setIsOptionListOpen] = (0, import_react47.useState)(false);
   const targetRef = (0, import_react47.useRef)(null);
@@ -3341,6 +3429,7 @@ function Select({
     "typography-label14regular": size === "small" || size === "medium",
     "typography-label16regular": size === "large"
   });
+  const ariaInvalidProps = isError ? { "aria-invalid": true } : {};
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     SelectContext.Provider,
     {
@@ -3362,6 +3451,9 @@ function Select({
             ref: refs.setReference,
             className: buttonClasses,
             type: "button",
+            "aria-label": ariaLabel,
+            "aria-describedby": ariaDescribedby,
+            ...ariaInvalidProps,
             onClick: handleClickToggle,
             disabled: isDisabled,
             children: [
@@ -3670,23 +3762,207 @@ function Radio({
   ] });
 }
 
-// src/search/search.tsx
-var import_clsx35 = require("clsx");
+// src/radio-card/radio-card.tsx
+var import_react55 = require("react");
+
+// src/radio-card/radio-card-context.ts
 var import_react53 = require("react");
+var RadioCardContext = (0, import_react53.createContext)(null);
+function useRadioCardContext(componentName) {
+  const context = (0, import_react53.useContext)(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
 var import_jsx_runtime53 = require("react/jsx-runtime");
-var Search = (0, import_react53.forwardRef)(({ width = "100%", size = "medium", ...props }, ref) => {
-  const classes = (0, import_clsx35.clsx)(
+function RadioCardErrorMessage({ children, id }) {
+  const { isError } = useRadioCardContext("RadioCard.ErrorMessage");
+  if (!isError) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { id, className: "typography-label13regular text-supportError", "aria-live": "assertive", children });
+}
+RadioCardErrorMessage.displayName = "RadioCard.ErrorMessage";
+
+// src/radio-card/radio-card-group.tsx
+var import_jsx_runtime54 = require("react/jsx-runtime");
+function RadioCardGroup({ children }) {
+  const { ariaLabel, ariaLabelledby, errorDescribedBy } = useRadioCardContext("RadioCard.Group");
+  const describedByProps = errorDescribedBy != null ? { "aria-describedby": errorDescribedBy } : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    "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
+var import_component_theme15 = require("@zenkigen-inc/component-theme");
+var import_clsx35 = __toESM(require("clsx"));
+var import_react54 = require("react");
+var import_jsx_runtime55 = require("react/jsx-runtime");
+function RadioCardItem({ value, label, description, isDisabled: itemDisabled = false, id }) {
+  const context = useRadioCardContext("RadioCard.Item");
+  const autoId = (0, import_react54.useId)();
+  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 = (0, import_clsx35.default)(
+    "pointer-events-none flex flex-col gap-2 rounded border border-solid px-4 py-3",
+    import_component_theme15.focusVisible.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 = (0, import_clsx35.default)(
+    "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 = (0, import_clsx35.default)("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 = (0, import_clsx35.default)("size-3 rounded-full bg-transparent", {
+    "group-hover:bg-hoverUi": !isDisabled && !isChecked
+  });
+  const labelClasses = (0, import_clsx35.default)("typography-label14regular ml-2 select-none break-all", {
+    "text-disabled01": isDisabled,
+    "text-text01": !isDisabled
+  });
+  const descriptionClasses = (0, import_clsx35.default)("typography-body12regular pl-7", {
+    "text-disabled01": isDisabled,
+    "text-text02": !isDisabled
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "group relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      "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__ */ (0, import_jsx_runtime55.jsxs)("div", { className: cardClasses, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { className: boxClasses, "aria-hidden": "true", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: dotClasses }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: hoverDotClasses })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { id: labelId, className: labelClasses, children: label })
+      ] }),
+      hasDescription ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { id: descriptionId, className: descriptionClasses, children: description }) : null
+    ] })
+  ] });
+}
+RadioCardItem.displayName = "RadioCard.Item";
+
+// src/radio-card/radio-card.tsx
+var import_jsx_runtime56 = require("react/jsx-runtime");
+function RadioCardRoot({
+  children,
+  value,
+  onChange,
+  name,
+  isDisabled = false,
+  isError = false,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby
+}) {
+  const autoName = (0, import_react55.useId)();
+  const baseId = (0, import_react55.useId)();
+  const resolvedName = name ?? autoName;
+  const errorIds = [];
+  const enhancedChildren = import_react55.Children.map(children, (child) => {
+    if (!(0, import_react55.isValidElement)(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 (0, import_react55.cloneElement)(errorChild, { id: assignedId });
+    }
+    return child;
+  });
+  const errorDescribedBy = errorIds.length > 0 ? errorIds.join(" ") : null;
+  const contextValue = (0, import_react55.useMemo)(
+    () => ({
+      value,
+      onChange,
+      name: resolvedName,
+      isDisabled,
+      isError,
+      errorDescribedBy,
+      ariaLabel,
+      ariaLabelledby
+    }),
+    [value, onChange, resolvedName, isDisabled, isError, errorDescribedBy, ariaLabel, ariaLabelledby]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(RadioCardContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("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
+var import_clsx36 = require("clsx");
+var import_react56 = require("react");
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var Search = (0, import_react56.forwardRef)(({ width = "100%", size = "medium", ...props }, ref) => {
+  const classes = (0, import_clsx36.clsx)(
     "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 = (0, import_clsx35.clsx)("mx-2 h-full flex-1 text-text01 outline-none placeholder:text-textPlaceholder", {
+  const inputClasses = (0, import_clsx36.clsx)("mx-2 h-full flex-1 text-text01 outline-none placeholder:text-textPlaceholder", {
     ["typography-label14regular"]: size === "medium",
     ["typography-label16regular"]: size === "large"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "relative", ref, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("form", { onSubmit: props.onSubmit, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: classes, style: { width }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon, { name: "search", color: "icon01", size: "medium" }),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "relative", ref, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("form", { onSubmit: props.onSubmit, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: classes, style: { width }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Icon, { name: "search", color: "icon01", size: "medium" }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       "input",
       {
         type: "text",
@@ -3697,7 +3973,7 @@ var Search = (0, import_react53.forwardRef)(({ width = "100%", size = "medium",
         onChange: props.onChange
       }
     ),
-    props.onClickClearButton && props.value && props.value.length !== 0 && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    props.onClickClearButton && props.value && props.value.length !== 0 && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       IconButton,
       {
         variant: "text",
@@ -3712,17 +3988,17 @@ var Search = (0, import_react53.forwardRef)(({ width = "100%", size = "medium",
 Search.displayName = "Search";
 
 // src/segmented-control/segmented-control.tsx
-var import_react56 = __toESM(require("react"));
+var import_react59 = __toESM(require("react"));
 
 // src/segmented-control/segmented-control-context.ts
-var import_react54 = require("react");
-var SegmentedControlContext = (0, import_react54.createContext)(null);
+var import_react57 = require("react");
+var SegmentedControlContext = (0, import_react57.createContext)(null);
 
 // src/segmented-control/segmented-control-item.tsx
-var import_component_theme15 = require("@zenkigen-inc/component-theme");
-var import_clsx36 = require("clsx");
-var import_react55 = require("react");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_component_theme16 = require("@zenkigen-inc/component-theme");
+var import_clsx37 = require("clsx");
+var import_react58 = require("react");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var SegmentedControlItem = ({
   label,
   value,
@@ -3731,9 +4007,9 @@ var SegmentedControlItem = ({
   "aria-label": ariaLabel,
   ...rest
 }) => {
-  const context = (0, import_react55.useContext)(SegmentedControlContext);
-  const buttonRef = (0, import_react55.useRef)(null);
-  const lastInteractionWasMouse = (0, import_react55.useRef)(false);
+  const context = (0, import_react58.useContext)(SegmentedControlContext);
+  const buttonRef = (0, import_react58.useRef)(null);
+  const lastInteractionWasMouse = (0, import_react58.useRef)(false);
   if (context === null) {
     throw new Error("SegmentedControl.Item must be used within SegmentedControl");
   }
@@ -3749,7 +4025,7 @@ var SegmentedControlItem = ({
   const isSelected = value === selectedValue;
   const isFocused = value === focusedValue;
   const isOptionDisabled = isContextDisabled || itemDisabled === true;
-  (0, import_react55.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     if (isFocused === true && buttonRef.current !== null) {
       buttonRef.current.focus();
     }
@@ -3771,7 +4047,7 @@ var SegmentedControlItem = ({
     lastInteractionWasMouse.current = false;
     onBlur?.();
   };
-  const buttonClasses = (0, import_clsx36.clsx)("relative flex items-center justify-center gap-1 rounded", import_component_theme15.focusVisible.normal, {
+  const buttonClasses = (0, import_clsx37.clsx)("relative flex items-center justify-center gap-1 rounded", import_component_theme16.focusVisible.normal, {
     "px-2 min-h-[24px] typography-label12regular": size === "small",
     "px-4 min-h-[32px] typography-label14regular": size === "medium",
     // States - Default with hover
@@ -3781,7 +4057,7 @@ var SegmentedControlItem = ({
     // States - Disabled
     "text-disabled01 bg-transparent": isOptionDisabled === true
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
     "button",
     {
       ref: buttonRef,
@@ -3798,25 +4074,25 @@ var SegmentedControlItem = ({
       onMouseDown: handleMouseDown,
       ...rest,
       children: [
-        Boolean(icon) === true && icon && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        Boolean(icon) === true && icon && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
           "span",
           {
-            className: (0, import_clsx36.clsx)("flex items-center", {
+            className: (0, import_clsx37.clsx)("flex items-center", {
               "fill-disabled01": isOptionDisabled === true,
               "fill-interactive01": isSelected === true && isOptionDisabled === false,
               "fill-icon01": isSelected === false && isOptionDisabled === false
             }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icon, { name: icon, size: "small" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Icon, { name: icon, size: "small" })
           }
         ),
-        Boolean(label) === true && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "whitespace-nowrap", children: label })
+        Boolean(label) === true && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "whitespace-nowrap", children: label })
       ]
     }
   );
 };
 
 // src/segmented-control/segmented-control.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var SegmentedControl = ({
   children,
   value,
@@ -3826,15 +4102,15 @@ var SegmentedControl = ({
   "aria-label": ariaLabel,
   ...rest
 }) => {
-  const containerRef = (0, import_react56.useRef)(null);
-  const itemIds = import_react56.Children.toArray(children).filter((child) => {
-    if (!import_react56.default.isValidElement(child) || typeof child.props !== "object" || child.props === null || !("value" in child.props)) {
+  const containerRef = (0, import_react59.useRef)(null);
+  const itemIds = import_react59.Children.toArray(children).filter((child) => {
+    if (!import_react59.default.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 = import_react56.Children.count(children);
+  const childrenCount = import_react59.Children.count(children);
   const containerStyle = { gridTemplateColumns: `repeat(${childrenCount}, minmax(0,1fr))` };
   const {
     focusedValue,
@@ -3861,7 +4137,7 @@ var SegmentedControl = ({
     onBlur: handleBlurRovingFocus,
     values: itemIds
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_jsx_runtime55.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SegmentedControlContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_jsx_runtime59.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SegmentedControlContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     "div",
     {
       ref: containerRef,
@@ -3878,22 +4154,22 @@ var SegmentedControl = ({
 SegmentedControl.Item = SegmentedControlItem;
 
 // src/select-sort/select-sort.tsx
+var import_component_theme19 = require("@zenkigen-inc/component-theme");
+var import_clsx40 = __toESM(require("clsx"));
+var import_react60 = require("react");
+
+// src/select-sort/select-list.tsx
 var import_component_theme18 = require("@zenkigen-inc/component-theme");
 var import_clsx39 = __toESM(require("clsx"));
-var import_react57 = require("react");
 
-// src/select-sort/select-list.tsx
+// src/select-sort/select-item.tsx
 var import_component_theme17 = require("@zenkigen-inc/component-theme");
 var import_clsx38 = __toESM(require("clsx"));
-
-// src/select-sort/select-item.tsx
-var import_component_theme16 = require("@zenkigen-inc/component-theme");
-var import_clsx37 = __toESM(require("clsx"));
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 function SelectItem2({ children, isSortKey, size, onClickItem }) {
-  const itemClasses = (0, import_clsx37.default)(
+  const itemClasses = (0, import_clsx38.default)(
     "typography-label14regular flex w-full items-center px-3 hover:bg-hover02 active:bg-active02",
-    import_component_theme16.focusVisible.inset,
+    import_component_theme17.focusVisible.inset,
     {
       "h-8": size !== "large",
       "h-10": size === "large",
@@ -3901,16 +4177,16 @@ function SelectItem2({ children, isSortKey, size, onClickItem }) {
       "bg-uiBackground01 fill-icon01 text-interactive02": !isSortKey
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("li", { className: "flex w-full items-center", onClick: onClickItem, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("button", { className: itemClasses, type: "button", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "ml-1 mr-6", children }),
-    isSortKey && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Icon, { name: "check", size: "small" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("li", { className: "flex w-full items-center", onClick: onClickItem, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("button", { className: itemClasses, type: "button", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "ml-1 mr-6", children }),
+    isSortKey && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { name: "check", size: "small" }) })
   ] }) });
 }
 
 // src/select-sort/select-list.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 function SelectList2({ size, variant, sortOrder, onClickItem, onClickDeselect }) {
-  const listClasses = (0, import_clsx38.default)(
+  const listClasses = (0, import_clsx39.default)(
     "absolute z-dropdown w-max overflow-y-auto rounded bg-uiBackground01 py-2 shadow-floatingShadow",
     {
       "top-7": size === "x-small" || size === "small",
@@ -3919,23 +4195,23 @@ function SelectList2({ size, variant, sortOrder, onClickItem, onClickDeselect })
       "border-solid border border-uiBorder01": variant === "outline"
     }
   );
-  const deselectButtonClasses = (0, import_clsx38.default)(
+  const deselectButtonClasses = (0, import_clsx39.default)(
     "typography-label14regular flex w-full items-center px-3 text-interactive02 hover:bg-hover02 active:bg-active02",
-    import_component_theme17.focusVisible.inset,
+    import_component_theme18.focusVisible.inset,
     {
       "h-8": size !== "large",
       "h-10": size === "large"
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("ul", { className: listClasses, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(SelectItem2, { size, isSortKey: sortOrder === "ascend", onClickItem: () => onClickItem("ascend"), children: "\u6607\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(SelectItem2, { size, isSortKey: sortOrder === "descend", onClickItem: () => onClickItem("descend"), children: "\u964D\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
-    sortOrder !== null && onClickDeselect && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("button", { className: deselectButtonClasses, type: "button", onClick: onClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("ul", { className: listClasses, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(SelectItem2, { size, isSortKey: sortOrder === "ascend", onClickItem: () => onClickItem("ascend"), children: "\u6607\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(SelectItem2, { size, isSortKey: sortOrder === "descend", onClickItem: () => onClickItem("descend"), children: "\u964D\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
+    sortOrder !== null && onClickDeselect && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("button", { className: deselectButtonClasses, type: "button", onClick: onClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
   ] });
 }
 
 // src/select-sort/select-sort.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 function SelectSort({
   size = "medium",
   variant = "outline",
@@ -3947,8 +4223,8 @@ function SelectSort({
   onChange,
   onClickDeselect
 }) {
-  const [isOptionListOpen, setIsOptionListOpen] = (0, import_react57.useState)(false);
-  const targetRef = (0, import_react57.useRef)(null);
+  const [isOptionListOpen, setIsOptionListOpen] = (0, import_react60.useState)(false);
+  const targetRef = (0, import_react60.useRef)(null);
   useOutsideClick(targetRef, () => setIsOptionListOpen(false));
   useDismissOnModalOpen(() => {
     if (isOptionListOpen) {
@@ -3956,50 +4232,50 @@ function SelectSort({
     }
   });
   const handleClickToggle = () => setIsOptionListOpen((prev) => !prev);
-  const handleClickItem = (0, import_react57.useCallback)(
+  const handleClickItem = (0, import_react60.useCallback)(
     (value) => {
       onChange?.(value);
       setIsOptionListOpen(false);
     },
     [onChange]
   );
-  const wrapperClasses = (0, import_clsx39.default)("relative flex shrink-0 items-center gap-1 rounded", {
+  const wrapperClasses = (0, import_clsx40.default)("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 = (0, import_clsx39.default)(
+  const buttonClasses = (0, import_clsx40.default)(
     "flex size-full items-center rounded",
-    import_component_theme18.buttonColors[variant].hover,
-    import_component_theme18.buttonColors[variant].active,
-    import_component_theme18.buttonColors[variant].disabled,
-    import_component_theme18.focusVisible.normal,
+    import_component_theme19.buttonColors[variant].hover,
+    import_component_theme19.buttonColors[variant].active,
+    import_component_theme19.buttonColors[variant].disabled,
+    import_component_theme19.focusVisible.normal,
     {
-      [import_component_theme18.buttonColors[variant].selected]: isSortKey,
-      [import_component_theme18.buttonColors[variant].base]: !isSortKey,
+      [import_component_theme19.buttonColors[variant].selected]: isSortKey,
+      [import_component_theme19.buttonColors[variant].base]: !isSortKey,
       "px-2": size === "x-small" || size === "small",
       "px-4": size === "medium" || size === "large",
       "pointer-events-none": isDisabled
     }
   );
-  const labelClasses = (0, import_clsx39.default)("truncate", {
+  const labelClasses = (0, import_clsx40.default)("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__ */ (0, import_jsx_runtime58.jsxs)("div", { className: wrapperClasses, style: { width }, ref: targetRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("button", { className: buttonClasses, type: "button", onClick: handleClickToggle, disabled: isDisabled, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: labelClasses, children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "ml-auto flex items-center", children: isSortKey ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: wrapperClasses, style: { width }, ref: targetRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("button", { className: buttonClasses, type: "button", onClick: handleClickToggle, disabled: isDisabled, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: labelClasses, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "ml-auto flex items-center", children: isSortKey ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
         Icon,
         {
           name: sortOrder === "ascend" ? "arrow-up" : "arrow-down",
           size: size === "large" ? "medium" : "small"
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
         Icon,
         {
           name: isOptionListOpen ? "angle-small-up" : "angle-small-down",
@@ -4007,7 +4283,7 @@ function SelectSort({
         }
       ) })
     ] }),
-    isOptionListOpen && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    isOptionListOpen && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       SelectList2,
       {
         size,
@@ -4021,10 +4297,10 @@ function SelectSort({
 }
 
 // src/sort-button/sort-button.tsx
-var import_component_theme19 = require("@zenkigen-inc/component-theme");
-var import_clsx40 = __toESM(require("clsx"));
-var import_react58 = require("react");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_component_theme20 = require("@zenkigen-inc/component-theme");
+var import_clsx41 = __toESM(require("clsx"));
+var import_react61 = require("react");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 function SortButton({
   size = "medium",
   width,
@@ -4035,7 +4311,7 @@ function SortButton({
   "aria-label": ariaLabel,
   ...rest
 }) {
-  const handleClick = (0, import_react58.useCallback)(() => {
+  const handleClick = (0, import_react61.useCallback)(() => {
     if (isDisabled || !onClick) return;
     onClick();
   }, [isDisabled, onClick]);
@@ -4044,36 +4320,36 @@ function SortButton({
     if (sortOrder === "descend") return "arrow-down";
     return "angle-small-down";
   };
-  const wrapperClasses = (0, import_clsx40.default)("relative flex shrink-0 items-center gap-1 rounded", {
+  const wrapperClasses = (0, import_clsx41.default)("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 = (0, import_clsx40.default)(
+  const buttonClasses = (0, import_clsx41.default)(
     "flex size-full items-center rounded",
-    import_component_theme19.buttonColors.text.hover,
-    import_component_theme19.buttonColors.text.active,
-    import_component_theme19.buttonColors.text.disabled,
-    import_component_theme19.focusVisible.normal,
+    import_component_theme20.buttonColors.text.hover,
+    import_component_theme20.buttonColors.text.active,
+    import_component_theme20.buttonColors.text.disabled,
+    import_component_theme20.focusVisible.normal,
     {
-      [import_component_theme19.buttonColors.text.selected]: !isDisabled && sortOrder !== null,
+      [import_component_theme20.buttonColors.text.selected]: !isDisabled && sortOrder !== null,
       // ソート状態時は選択状態のスタイル
-      [import_component_theme19.buttonColors.text.base]: sortOrder === null,
+      [import_component_theme20.buttonColors.text.base]: sortOrder === null,
       // ソートなし時は通常のスタイル
       "px-2": size === "x-small" || size === "small",
       "px-4": size === "medium" || size === "large",
       "pointer-events-none": isDisabled
     }
   );
-  const labelClasses = (0, import_clsx40.default)("truncate", {
+  const labelClasses = (0, import_clsx41.default)("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__ */ (0, import_jsx_runtime59.jsx)("div", { className: wrapperClasses, style: { width }, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: wrapperClasses, style: { width }, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
     "button",
     {
       className: buttonClasses,
@@ -4084,22 +4360,22 @@ function SortButton({
       "aria-label": ariaLabel,
       "aria-disabled": isDisabled,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: labelClasses, children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Icon, { name: getIconName(), size: size === "large" ? "medium" : "small" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: labelClasses, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon, { name: getIconName(), size: size === "large" ? "medium" : "small" }) })
       ]
     }
   ) });
 }
 
 // src/steps/steps.tsx
-var import_clsx43 = require("clsx");
-var import_react61 = require("react");
+var import_clsx44 = require("clsx");
+var import_react64 = require("react");
 
 // src/steps/steps-context.ts
-var import_react59 = require("react");
-var StepsContext = (0, import_react59.createContext)(null);
+var import_react62 = require("react");
+var StepsContext = (0, import_react62.createContext)(null);
 function useStepsContext() {
-  const context = (0, import_react59.useContext)(StepsContext);
+  const context = (0, import_react62.useContext)(StepsContext);
   if (context === null) {
     throw new Error("Steps.Item must be used within <Steps>");
   }
@@ -4107,13 +4383,13 @@ function useStepsContext() {
 }
 
 // src/steps/steps-item.tsx
-var import_clsx42 = require("clsx");
+var import_clsx43 = require("clsx");
 
 // src/steps/steps-item-context.ts
-var import_react60 = require("react");
-var StepsItemContext = (0, import_react60.createContext)(null);
+var import_react63 = require("react");
+var StepsItemContext = (0, import_react63.createContext)(null);
 function useStepsItemContext() {
-  const context = (0, import_react60.useContext)(StepsItemContext);
+  const context = (0, import_react63.useContext)(StepsItemContext);
   if (context === null) {
     throw new Error("Steps.Item must be rendered inside a <Steps> component");
   }
@@ -4121,34 +4397,34 @@ function useStepsItemContext() {
 }
 
 // src/steps/steps-separator.tsx
-var import_clsx41 = require("clsx");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_clsx42 = require("clsx");
+var import_jsx_runtime64 = require("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__ */ (0, import_jsx_runtime60.jsx)("div", { "aria-hidden": "true", className: (0, import_clsx41.clsx)("mx-auto h-full min-h-2 w-px", colorClass) });
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { "aria-hidden": "true", className: (0, import_clsx42.clsx)("mx-auto h-full min-h-2 w-px", colorClass) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { "aria-hidden": "true", className: (0, import_clsx41.clsx)("h-px flex-1", colorClass) });
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { "aria-hidden": "true", className: (0, import_clsx42.clsx)("h-px flex-1", colorClass) });
 }
 
 // src/steps/steps-item.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var progressSrOnlyLabel = {
   completed: "\u5B8C\u4E86: ",
   current: "\u73FE\u5728\u306E\u30B9\u30C6\u30C3\u30D7: ",
   upcoming: "\u672A\u7740\u624B: "
 };
 function getCircleSizeClass(size) {
-  return (0, import_clsx42.clsx)({
+  return (0, import_clsx43.clsx)({
     "size-6 typography-label12regular": size === "small",
     "size-8 typography-label12regular": size === "medium",
     "size-10 typography-label16regular": size === "large"
   });
 }
 function getCircleVariantProgressClass(variant, progress) {
-  return (0, import_clsx42.clsx)({
+  return (0, import_clsx43.clsx)({
     // 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",
@@ -4160,7 +4436,7 @@ function getCircleVariantProgressClass(variant, progress) {
   });
 }
 function getCircleClasses(size, variant, state) {
-  return (0, import_clsx42.clsx)(
+  return (0, import_clsx43.clsx)(
     "box-border flex items-center justify-center rounded-full border-2",
     getCircleSizeClass(size),
     getCircleVariantProgressClass(variant, state.progress)
@@ -4178,65 +4454,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__ */ (0, import_jsx_runtime61.jsx)(Icon, { name: "check", size: getIconSize(size), color: "iconOnColor" }) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Icon, { name: "check", size: getIconSize(size), className: "fill-gray-gray100" });
-  const circle = /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { "aria-hidden": "true", className: circleClasses, children: isCircleFilled ? checkIcon : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { children: index + 1 }) });
-  const labelBlock = /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("span", { className: (0, import_clsx42.clsx)("flex flex-col", textOrientation === "horizontal" ? "gap-1" : "items-center text-center"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+  const checkIcon = variant === "solid" ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Icon, { name: "check", size: getIconSize(size), color: "iconOnColor" }) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Icon, { name: "check", size: getIconSize(size), className: "fill-gray-gray100" });
+  const circle = /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { "aria-hidden": "true", className: circleClasses, children: isCircleFilled ? checkIcon : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { children: index + 1 }) });
+  const labelBlock = /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("span", { className: (0, import_clsx43.clsx)("flex flex-col", textOrientation === "horizontal" ? "gap-1" : "items-center text-center"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
       "span",
       {
-        className: (0, import_clsx42.clsx)(
+        className: (0, import_clsx43.clsx)(
           "whitespace-nowrap text-text01",
           size === "large" ? "typography-body16regular" : "typography-body14regular"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "sr-only", children: progressSrOnlyLabel[state.progress] }),
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "sr-only", children: progressSrOnlyLabel[state.progress] }),
           label
         ]
       }
     ),
-    description != null && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "typography-label12regular whitespace-nowrap text-text02", children: description })
+    description != null && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("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__ */ (0, import_jsx_runtime61.jsx)("li", { ...ariaCurrentProps, id, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex items-center gap-2", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("li", { ...ariaCurrentProps, id, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex items-center gap-2", children: [
       circle,
       labelBlock
     ] }) });
   }
   if (orientation === "horizontal" && textOrientation === "vertical") {
-    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("li", { ...ariaCurrentProps, id, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("li", { ...ariaCurrentProps, id, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [
       circle,
       labelBlock
     ] }) });
   }
   if (orientation === "vertical" && textOrientation === "horizontal") {
-    return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
       "li",
       {
         ...ariaCurrentProps,
-        className: (0, import_clsx42.clsx)(
+        className: (0, import_clsx43.clsx)(
           "grid grid-cols-[min-content_1fr] grid-rows-[auto_1fr] items-center gap-x-2",
           !isLast && "flex-1"
         ),
         id,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "col-start-1 row-start-1 flex items-center", children: circle }),
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "col-start-2 row-start-1 flex items-center", children: labelBlock }),
-          !isLast && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "col-start-1 row-start-2 flex items-stretch justify-center self-stretch py-2", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(StepsSeparator, { progress: state.progress }) })
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "col-start-1 row-start-1 flex items-center", children: circle }),
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "col-start-2 row-start-1 flex items-center", children: labelBlock }),
+          !isLast && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "col-start-1 row-start-2 flex items-stretch justify-center self-stretch py-2", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(StepsSeparator, { progress: state.progress }) })
         ]
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("li", { ...ariaCurrentProps, className: (0, import_clsx42.clsx)("flex flex-col items-center gap-1", !isLast && "flex-1"), id, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("li", { ...ariaCurrentProps, className: (0, import_clsx43.clsx)("flex flex-col items-center gap-1", !isLast && "flex-1"), id, children: [
     circle,
     labelBlock,
-    !isLast && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "flex flex-1 items-stretch self-stretch py-2", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(StepsSeparator, { progress: state.progress }) })
+    !isLast && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "flex flex-1 items-stretch self-stretch py-2", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(StepsSeparator, { progress: state.progress }) })
   ] });
 }
 StepsItem.displayName = "Steps.Item";
 
 // src/steps/steps.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 function getSeparatorCellHeightClass(size) {
   if (size === "small") return "h-6";
   if (size === "medium") return "h-8";
@@ -4249,19 +4525,19 @@ function HorizontalSeparatorCell({
 }) {
   const heightClass = getSeparatorCellHeightClass(size);
   const alignClass = textOrientation === "vertical" ? "self-start" : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("li", { "aria-hidden": "true", className: (0, import_clsx43.clsx)("flex items-center", heightClass, alignClass), role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(StepsSeparator, { progress }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("li", { "aria-hidden": "true", className: (0, import_clsx44.clsx)("flex items-center", heightClass, alignClass), role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(StepsSeparator, { progress }) });
 }
 function collectStepsItems(children) {
   const result = [];
-  import_react61.Children.toArray(children).forEach((child) => {
-    if (!(0, import_react61.isValidElement)(child)) {
+  import_react64.Children.toArray(children).forEach((child) => {
+    if (!(0, import_react64.isValidElement)(child)) {
       return;
     }
     if (child.type === StepsItem) {
       result.push(child);
       return;
     }
-    if (child.type === import_react61.Fragment) {
+    if (child.type === import_react64.Fragment) {
       const fragmentChildren = child.props.children;
       result.push(...collectStepsItems(fragmentChildren));
     }
@@ -4278,12 +4554,12 @@ function StepsRoot({
   variant = "solid",
   "aria-label": ariaLabel
 }) {
-  const baseId = (0, import_react61.useId)();
-  const [internalStep] = (0, import_react61.useState)(defaultCurrentStep ?? 0);
+  const baseId = (0, import_react64.useId)();
+  const [internalStep] = (0, import_react64.useState)(defaultCurrentStep ?? 0);
   const resolvedCurrentStep = currentStep ?? internalStep;
-  const itemElements = (0, import_react61.useMemo)(() => collectStepsItems(children), [children]);
+  const itemElements = (0, import_react64.useMemo)(() => collectStepsItems(children), [children]);
   const stepsCount = itemElements.length;
-  const contextValue = (0, import_react61.useMemo)(
+  const contextValue = (0, import_react64.useMemo)(
     () => ({
       size,
       orientation,
@@ -4302,13 +4578,13 @@ function StepsRoot({
     const state = states[index] ?? { progress: "upcoming" };
     const isLast = index === stepsCount - 1;
     const id = `${baseId}-item-${index}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(StepsItemContext.Provider, { value: { index, state, isLast, id }, children: item }, item.key ?? `item-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(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__ */ (0, import_jsx_runtime62.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
           HorizontalSeparatorCell,
           {
             progress: states[index]?.progress ?? "upcoming",
@@ -4321,7 +4597,7 @@ function StepsRoot({
     }
     return nodes;
   }) : itemElements.map((item, index) => wrapItem(item, index));
-  const listClassName = (0, import_clsx43.clsx)(
+  const listClassName = (0, import_clsx44.clsx)(
     orientation === "horizontal" ? ["grid w-full gap-x-2", textOrientation === "vertical" ? "items-start" : "items-center"] : "flex flex-col items-stretch"
   );
   const horizontalGridTemplate = Array.from(
@@ -4329,20 +4605,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__ */ (0, import_jsx_runtime62.jsx)(StepsContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("ol", { "aria-label": ariaLabel, className: listClassName, role: "list", ...listStyleProps, children: renderedChildren }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(StepsContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("ol", { "aria-label": ariaLabel, className: listClassName, role: "list", ...listStyleProps, children: renderedChildren }) });
 }
 var Steps = StepsRoot;
 Steps.Item = StepsItem;
 
 // src/tab/tab.tsx
-var import_clsx45 = require("clsx");
-var import_react62 = require("react");
+var import_clsx46 = require("clsx");
+var import_react65 = require("react");
 
 // src/tab/tab-item.tsx
-var import_clsx44 = require("clsx");
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_clsx45 = require("clsx");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var TabItem = ({ isSelected = false, isDisabled = false, icon, ...props }) => {
-  const classes = (0, import_clsx44.clsx)(
+  const classes = (0, import_clsx45.clsx)(
     "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,
@@ -4350,12 +4626,12 @@ var TabItem = ({ isSelected = false, isDisabled = false, icon, ...props }) => {
       "before:bg-interactive01 hover:before:bg-interactive01 pointer-events-none": isSelected
     }
   );
-  const iconWrapperClasses = (0, import_clsx44.clsx)("flex shrink-0 items-center", {
+  const iconWrapperClasses = (0, import_clsx45.clsx)("flex shrink-0 items-center", {
     "fill-disabled01": isDisabled,
     "fill-interactive01": !isDisabled && isSelected,
     "fill-icon01 group-hover:fill-interactive01": !isDisabled && !isSelected
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
     "button",
     {
       type: "button",
@@ -4365,7 +4641,7 @@ var TabItem = ({ isSelected = false, isDisabled = false, icon, ...props }) => {
       disabled: isDisabled,
       onClick: () => props.onClick(props.id),
       children: [
-        icon != null && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: iconWrapperClasses, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon, { name: icon, size: "small" }) }),
+        icon != null && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: iconWrapperClasses, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Icon, { name: icon, size: "small" }) }),
         props.children
       ]
     }
@@ -4373,39 +4649,39 @@ var TabItem = ({ isSelected = false, isDisabled = false, icon, ...props }) => {
 };
 
 // src/tab/tab.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 function Tab({ children, layout = "auto" }) {
-  const childrenCount = import_react62.Children.count(children);
+  const childrenCount = import_react65.Children.count(children);
   const containerStyle = layout === "equal" ? { gridTemplateColumns: `repeat(${childrenCount}, minmax(0,1fr))` } : {};
-  const containerClasses = (0, import_clsx45.clsx)(
+  const containerClasses = (0, import_clsx46.clsx)(
     "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__ */ (0, import_jsx_runtime64.jsx)("div", { role: "tablist", className: containerClasses, style: containerStyle, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { role: "tablist", className: containerClasses, style: containerStyle, children });
 }
 Tab.Item = TabItem;
 
 // src/table/table-cell.tsx
-var import_clsx46 = __toESM(require("clsx"));
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_clsx47 = __toESM(require("clsx"));
+var import_jsx_runtime69 = require("react/jsx-runtime");
 function TableCell({ children, className, isHeader = false }) {
-  const classes = (0, import_clsx46.default)("border-b border-uiBorder01", { "sticky top-0 z-10 bg-white": isHeader }, className);
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: classes, children });
+  const classes = (0, import_clsx47.default)("border-b border-uiBorder01", { "sticky top-0 z-10 bg-white": isHeader }, className);
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: classes, children });
 }
 
 // src/table/table-row.tsx
-var import_clsx47 = __toESM(require("clsx"));
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_clsx48 = __toESM(require("clsx"));
+var import_jsx_runtime70 = require("react/jsx-runtime");
 function TableRow({ children, isHoverBackgroundVisible = false }) {
-  const rowClasses = (0, import_clsx47.default)("contents", isHoverBackgroundVisible && "[&:hover>div]:bg-hoverUi02");
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: rowClasses, children });
+  const rowClasses = (0, import_clsx48.default)("contents", isHoverBackgroundVisible && "[&:hover>div]:bg-hoverUi02");
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: rowClasses, children });
 }
 
 // src/table/table.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 function Table({
   width,
   templateRows,
@@ -4414,7 +4690,7 @@ function Table({
   autoRows,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
     "div",
     {
       className: "grid",
@@ -4433,23 +4709,23 @@ Table.Row = TableRow;
 Table.Cell = TableCell;
 
 // src/tag/tag.tsx
-var import_component_theme21 = require("@zenkigen-inc/component-theme");
-var import_clsx49 = __toESM(require("clsx"));
+var import_component_theme22 = require("@zenkigen-inc/component-theme");
+var import_clsx50 = __toESM(require("clsx"));
 
 // src/tag/delete-icon.tsx
-var import_component_theme20 = require("@zenkigen-inc/component-theme");
-var import_clsx48 = __toESM(require("clsx"));
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_component_theme21 = require("@zenkigen-inc/component-theme");
+var import_clsx49 = __toESM(require("clsx"));
+var import_jsx_runtime72 = require("react/jsx-runtime");
 var DeleteIcon = ({ color, variant, onClick }) => {
-  const deleteButtonClasses = (0, import_clsx48.default)(
+  const deleteButtonClasses = (0, import_clsx49.default)(
     "group ml-2 size-[14px] rounded-full p-0.5 hover:cursor-pointer hover:bg-iconOnColor focus-visible:bg-iconOnColor",
-    import_component_theme20.focusVisible.normal
+    import_component_theme21.focusVisible.normal
   );
-  const deletePathClasses = (0, import_clsx48.default)({
+  const deletePathClasses = (0, import_clsx49.default)({
     "fill-interactive02": color === "gray" || variant === "light",
     "group-hover:fill-interactive02 group-focus-visible:fill-interactive02 fill-iconOnColor": color !== "gray"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("button", { type: "button", className: deleteButtonClasses, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("button", { type: "button", className: deleteButtonClasses, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     "path",
     {
       fillRule: "evenodd",
@@ -4461,11 +4737,11 @@ var DeleteIcon = ({ color, variant, onClick }) => {
 };
 
 // src/tag/tag.tsx
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 function Tag({ id, children, color, variant = "normal", size = "medium", isEditable, onDelete }) {
-  const wrapperClasses = (0, import_clsx49.default)("flex", "items-center", "justify-center", {
-    [import_component_theme21.tagColors[color]]: variant === "normal",
-    [import_component_theme21.tagLightColors[color]]: variant === "light",
+  const wrapperClasses = (0, import_clsx50.default)("flex", "items-center", "justify-center", {
+    [import_component_theme22.tagColors[color]]: variant === "normal",
+    [import_component_theme22.tagLightColors[color]]: variant === "light",
     "h-[14px] typography-label11regular": !isEditable && size === "x-small",
     "h-4 typography-label12regular": !isEditable && size === "small",
     "h-5 typography-label14regular": size === "medium",
@@ -4474,21 +4750,21 @@ function Tag({ id, children, color, variant = "normal", size = "medium", isEdita
     "px-1": !isEditable,
     "px-2": isEditable
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: wrapperClasses, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: wrapperClasses, children: [
     children,
-    isEditable ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(DeleteIcon, { onClick: () => onDelete(id), color, variant }) : null
+    isEditable ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(DeleteIcon, { onClick: () => onDelete(id), color, variant }) : null
   ] });
 }
 
 // src/text-area/text-area.tsx
-var import_clsx52 = require("clsx");
-var import_react66 = require("react");
+var import_clsx53 = require("clsx");
+var import_react69 = require("react");
 
 // src/text-area/text-area-context.tsx
-var import_react63 = require("react");
-var TextAreaCompoundContext = (0, import_react63.createContext)(null);
+var import_react66 = require("react");
+var TextAreaCompoundContext = (0, import_react66.createContext)(null);
 var useTextAreaCompoundContext = (componentName) => {
-  const context = (0, import_react63.useContext)(TextAreaCompoundContext);
+  const context = (0, import_react66.useContext)(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`);
   }
@@ -4496,10 +4772,10 @@ var useTextAreaCompoundContext = (componentName) => {
 };
 
 // src/text-area/text-area-error-message.tsx
-var import_clsx50 = require("clsx");
-var import_react64 = require("react");
-var import_jsx_runtime70 = require("react/jsx-runtime");
-var TextAreaErrorMessage = (0, import_react64.forwardRef)(
+var import_clsx51 = require("clsx");
+var import_react67 = require("react");
+var import_jsx_runtime74 = require("react/jsx-runtime");
+var TextAreaErrorMessage = (0, import_react67.forwardRef)(
   ({ "aria-live": ariaLive = "assertive", ...props }, ref) => {
     const { textAreaProps } = useTextAreaCompoundContext("TextArea.ErrorMessage");
     const typographyClass = textAreaProps.size === "large" ? "typography-label13regular" : "typography-label12regular";
@@ -4507,26 +4783,26 @@ var TextAreaErrorMessage = (0, import_react64.forwardRef)(
     if (!shouldRender) {
       return null;
     }
-    const errorMessageClassName = (0, import_clsx50.clsx)(typographyClass, "text-supportError");
-    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { ref, className: errorMessageClassName, "aria-live": ariaLive, ...props });
+    const errorMessageClassName = (0, import_clsx51.clsx)(typographyClass, "text-supportError");
+    return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { ref, className: errorMessageClassName, "aria-live": ariaLive, ...props });
   }
 );
 TextAreaErrorMessage.displayName = "TextArea.ErrorMessage";
 
 // src/text-area/text-area-helper-message.tsx
-var import_clsx51 = require("clsx");
-var import_react65 = require("react");
-var import_jsx_runtime71 = require("react/jsx-runtime");
-var TextAreaHelperMessage = (0, import_react65.forwardRef)((props, ref) => {
+var import_clsx52 = require("clsx");
+var import_react68 = require("react");
+var import_jsx_runtime75 = require("react/jsx-runtime");
+var TextAreaHelperMessage = (0, import_react68.forwardRef)((props, ref) => {
   const { textAreaProps } = useTextAreaCompoundContext("TextArea.HelperMessage");
   const typographyClass = textAreaProps.size === "large" ? "typography-label13regular" : "typography-label12regular";
-  const helperMessageClassName = (0, import_clsx51.clsx)(typographyClass, "text-text02");
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { ref, className: helperMessageClassName, ...props });
+  const helperMessageClassName = (0, import_clsx52.clsx)(typographyClass, "text-text02");
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { ref, className: helperMessageClassName, ...props });
 });
 TextAreaHelperMessage.displayName = "TextArea.HelperMessage";
 
 // src/text-area/text-area.tsx
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_jsx_runtime76 = require("react/jsx-runtime");
 function TextAreaInner({
   size = "medium",
   variant = "outline",
@@ -4543,8 +4819,8 @@ function TextAreaInner({
   maxLength,
   ...props
 }, ref) {
-  const autoGeneratedId = (0, import_react66.useId)();
-  const textAreaPropsForContext = (0, import_react66.useMemo)(
+  const autoGeneratedId = (0, import_react69.useId)();
+  const textAreaPropsForContext = (0, import_react69.useMemo)(
     () => ({
       size,
       variant,
@@ -4552,7 +4828,7 @@ function TextAreaInner({
     }),
     [size, variant, isError]
   );
-  const contextValue = (0, import_react66.useMemo)(
+  const contextValue = (0, import_react69.useMemo)(
     () => ({
       textAreaProps: textAreaPropsForContext,
       forwardedRef: ref
@@ -4562,21 +4838,21 @@ function TextAreaInner({
   const helperMessageIds = [];
   const errorIds = [];
   const describedByBaseId = props.id ?? autoGeneratedId;
-  const enhancedChildren = import_react66.Children.map(children, (child) => {
-    if (!(0, import_react66.isValidElement)(child)) {
+  const enhancedChildren = import_react69.Children.map(children, (child) => {
+    if (!(0, import_react69.isValidElement)(child)) {
       return child;
     }
     if (child.type === TextAreaHelperMessage) {
       const helperChild = child;
       const assignedId = helperChild.props.id ?? `${describedByBaseId}-helper-${helperMessageIds.length + 1}`;
       helperMessageIds.push(assignedId);
-      return (0, import_react66.cloneElement)(helperChild, { id: assignedId });
+      return (0, import_react69.cloneElement)(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 (0, import_react66.cloneElement)(errorChild, { id: assignedId });
+      return (0, import_react69.cloneElement)(errorChild, { id: assignedId });
     }
     return child;
   });
@@ -4603,7 +4879,7 @@ function TextAreaInner({
     ...maxLengthProps
   };
   const isBorderless = variant === "text";
-  const textAreaWrapperClassName = (0, import_clsx52.clsx)(
+  const textAreaWrapperClassName = (0, import_clsx53.clsx)(
     "box-border flex w-full overflow-hidden rounded border",
     {
       // outline variant
@@ -4619,7 +4895,7 @@ function TextAreaInner({
     // className は variant="outline" のみ受け入れ、後方互換のため wrapper の末尾に合成（@deprecated）
     !isBorderless && className
   );
-  const textAreaClassName = (0, import_clsx52.clsx)("w-full border-none bg-uiBackground01 outline-none", {
+  const textAreaClassName = (0, import_clsx53.clsx)("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",
@@ -4638,7 +4914,7 @@ function TextAreaInner({
     "resize-none": !isResizable
   });
   const hasHeight = height != null && String(height).trim().length > 0;
-  const textAreaElement = /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+  const textAreaElement = /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
     "div",
     {
       className: textAreaWrapperClassName,
@@ -4649,7 +4925,7 @@ function TextAreaInner({
         ...!autoHeight && hasHeight && !isResizable ? { height } : {},
         ...autoHeight && hasHeight ? { minHeight: height } : {}
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
         "textarea",
         {
           ref,
@@ -4665,11 +4941,11 @@ function TextAreaInner({
       )
     }
   );
-  const counterElement = isCounterVisible ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+  const counterElement = isCounterVisible ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
     "div",
     {
       id: counterId,
-      className: (0, import_clsx52.clsx)(
+      className: (0, import_clsx53.clsx)(
         "shrink-0",
         size === "large" ? "typography-label13regular" : "typography-label12regular",
         !disabled && isExceeded ? "text-supportError" : "text-text02"
@@ -4678,17 +4954,17 @@ function TextAreaInner({
       children: counterLimit != null ? `${currentLength}/${counterLimit}\u6587\u5B57` : `${currentLength}\u6587\u5B57`
     }
   ) : null;
-  const stackedChildren = enhancedChildren == null ? [] : import_react66.Children.toArray(enhancedChildren);
+  const stackedChildren = enhancedChildren == null ? [] : import_react69.Children.toArray(enhancedChildren);
   const hasMessageChildren = stackedChildren.length > 0;
   const hasBottomContent = hasMessageChildren || counterElement != null;
   if (!hasBottomContent) {
-    return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(TextAreaCompoundContext.Provider, { value: contextValue, children: textAreaElement });
+    return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(TextAreaCompoundContext.Provider, { value: contextValue, children: textAreaElement });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(TextAreaCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "flex flex-col gap-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(TextAreaCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex flex-col gap-2", children: [
     textAreaElement,
-    /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
-      hasMessageChildren && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: stackedChildren }),
-      !hasMessageChildren && counterElement != null && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "flex-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
+      hasMessageChildren && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: stackedChildren }),
+      !hasMessageChildren && counterElement != null && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "flex-1" }),
       counterElement
     ] })
   ] }) });
@@ -4699,46 +4975,326 @@ var attachStatics2 = (component) => {
   component.displayName = "TextArea";
   return component;
 };
-var TextAreaBase = (0, import_react66.forwardRef)(function TextAreaBase2(props, ref) {
+var TextAreaBase = (0, import_react69.forwardRef)(function TextAreaBase2(props, ref) {
   return TextAreaInner(props, ref);
 });
 var TextArea = attachStatics2(TextAreaBase);
 
+// src/time-picker/time-picker.tsx
+var import_clsx55 = require("clsx");
+var import_react72 = require("react");
+
+// src/time-picker/time-picker-context.tsx
+var import_react70 = require("react");
+var TimePickerCompoundContext = (0, import_react70.createContext)(null);
+var useTimePickerCompoundContext = (componentName) => {
+  const context = (0, import_react70.useContext)(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
+var import_clsx54 = require("clsx");
+var import_react71 = require("react");
+var import_jsx_runtime77 = require("react/jsx-runtime");
+var TimePickerErrorMessage = (0, import_react71.forwardRef)(
+  ({ "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 = (0, import_clsx54.clsx)(typographyClass, "text-supportError");
+    return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("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
+var import_jsx_runtime78 = require("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 = (0, import_react72.useId)();
+  const hourOptions = (0, import_react72.useMemo)(() => generateHourOptions(minuteStep, minTime, maxTime), [minuteStep, minTime, maxTime]);
+  const minuteOptions = (0, import_react72.useMemo)(
+    () => 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) => import_react72.Children.map(nodes, (child) => {
+    if (!(0, import_react72.isValidElement)(child)) {
+      return child;
+    }
+    if (child.type === import_react72.Fragment) {
+      const fragmentChild = child;
+      return (0, import_react72.cloneElement)(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 (0, import_react72.cloneElement)(errorChild, { id: assignedId });
+    }
+    return child;
+  });
+  const enhancedChildren = assignErrorIds(children);
+  const sharedAriaProps = errorIds.length > 0 ? { "aria-describedby": errorIds.join(" ") } : {};
+  const separatorClasses = (0, import_clsx55.clsx)("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 = (0, import_react72.useMemo)(() => ({ size, isError }), [size, isError]);
+  const timeInputs = /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+      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__ */ (0, import_jsx_runtime78.jsx)(Select.Option, { option }, option.id))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: separatorClasses, children: ":" }),
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+      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__ */ (0, import_jsx_runtime78.jsx)(Select.Option, { option }, option.id))
+      }
+    )
+  ] });
+  const stackedChildren = enhancedChildren == null ? [] : import_react72.Children.toArray(enhancedChildren);
+  const hasMessageChildren = stackedChildren.length > 0;
+  if (!hasMessageChildren) {
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(TimePickerCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "flex flex-col", children: timeInputs }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(TimePickerCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex flex-col gap-2", children: [
+    timeInputs,
+    stackedChildren
+  ] }) });
+};
+TimePicker.ErrorMessage = TimePickerErrorMessage;
+TimePicker.displayName = "TimePicker";
+
 // src/toast/toast.tsx
-var import_clsx53 = __toESM(require("clsx"));
-var import_react67 = require("react");
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_clsx56 = require("clsx");
+var import_react73 = require("react");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 var CLOSE_TIME_MSEC = 5e3;
+var REMOVAL_FALLBACK_MSEC = 1e3;
 function Toast({
   state = "information",
   width = "auto",
+  // 既定 false は v1.22.0 までの互換維持のため据え置き（自動クローズしない既定では、安全弁により閉じるボタンが表示される）。
+  // 「自動クローズ・閉じるボタンなし」の新しい既定は ToastProvider が isAutoClose を明示的に渡すことで実現している。
   isAutoClose = false,
   isAnimation = false,
+  hasCloseButton = false,
+  description,
   children,
   onClickClose
 }) {
-  const [isRemoving, setIsRemoving] = (0, import_react67.useState)(false);
-  const handleClose = (0, import_react67.useCallback)(() => {
+  const [isRemoving, setIsRemoving] = (0, import_react73.useState)(false);
+  const onClickCloseRef = (0, import_react73.useRef)(onClickClose);
+  (0, import_react73.useEffect)(() => {
+    onClickCloseRef.current = onClickClose;
+  }, [onClickClose]);
+  const hasNotifiedCloseRef = (0, import_react73.useRef)(false);
+  const notifyClose = (0, import_react73.useCallback)(() => {
+    if (hasNotifiedCloseRef.current) {
+      return;
+    }
+    hasNotifiedCloseRef.current = true;
+    onClickCloseRef.current();
+  }, []);
+  const handleClose = (0, import_react73.useCallback)(() => {
     if (isAnimation) {
       setIsRemoving(true);
     } else {
-      onClickClose();
+      notifyClose();
     }
-  }, [isAnimation, onClickClose]);
-  const handleAnimationEnd = (e) => window.getComputedStyle(e.currentTarget).opacity === "0" && onClickClose();
-  const wrapperClasses = (0, import_clsx53.default)("pointer-events-auto flex items-start gap-1 bg-white p-4 shadow-floatingShadow", {
-    ["animate-toast-in"]: isAnimation && !isRemoving,
-    ["animate-toast-out opacity-0"]: isAnimation && isRemoving
-  });
-  const iconClasses = (0, import_clsx53.default)("flex items-center", {
+  }, [isAnimation, notifyClose]);
+  const handleAnimationEnd = (e) => {
+    if (e.target !== e.currentTarget) {
+      return;
+    }
+    if (window.getComputedStyle(e.currentTarget).opacity === "0") {
+      notifyClose();
+    }
+  };
+  (0, import_react73.useEffect)(() => {
+    if (!isAutoClose) {
+      return;
+    }
+    const timer = window.setTimeout(() => {
+      if (isAnimation) {
+        setIsRemoving(true);
+      } else {
+        notifyClose();
+      }
+    }, CLOSE_TIME_MSEC);
+    return () => window.clearTimeout(timer);
+  }, [isAutoClose, isAnimation, notifyClose]);
+  (0, import_react73.useEffect)(() => {
+    if (!isRemoving) {
+      return;
+    }
+    const fallbackTimer = window.setTimeout(notifyClose, REMOVAL_FALLBACK_MSEC);
+    return () => window.clearTimeout(fallbackTimer);
+  }, [isRemoving, notifyClose]);
+  const isCloseButtonShown = hasCloseButton || !isAutoClose;
+  const wrapperClasses = (0, import_clsx56.clsx)(
+    "pointer-events-auto flex items-center gap-3 rounded border border-solid border-uiBorder01 bg-uiBackground01 p-4 shadow-floatingShadow",
+    {
+      ["animate-toast-in"]: isAnimation && !isRemoving,
+      ["animate-toast-out opacity-0"]: isAnimation && isRemoving
+    }
+  );
+  const iconClasses = (0, import_clsx56.clsx)("flex shrink-0 items-center", {
     "fill-supportSuccess": state === "success",
     "fill-supportError": state === "error",
     "fill-supportWarning": state === "warning",
     "fill-supportInfo": state === "information"
   });
-  const textClasses = (0, import_clsx53.default)("typography-body13regular flex-1 pt-[3px]", {
+  const titleClasses = (0, import_clsx56.clsx)("typography-body13regular break-words", {
     "text-supportError": state === "error",
-    "text-text01": state === "success" || state === "warning" || state === "information"
+    "text-text01": state !== "error"
   });
   const iconName = {
     success: "success-filled",
@@ -4746,53 +5302,86 @@ function Toast({
     warning: "warning",
     information: "information-filled"
   };
-  (0, import_react67.useEffect)(() => {
-    const timer = window.setTimeout(() => {
-      if (isAutoClose) {
-        setIsRemoving(true);
-      }
-    }, CLOSE_TIME_MSEC);
-    return () => window.clearTimeout(timer);
-  }, [isAutoClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: wrapperClasses, style: { width }, onAnimationEnd: handleAnimationEnd, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Icon, { name: iconName[state] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("p", { className: textClasses, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(IconButton, { icon: "close", size: "medium", variant: "text", onClick: handleClose, isNoPadding: true })
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: wrapperClasses, style: { width }, onAnimationEnd: handleAnimationEnd, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex min-w-0 flex-1 items-start gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Icon, { name: iconName[state] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-2 pt-[3px]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: titleClasses, children }),
+        description != null && description !== "" && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "typography-label12regular break-words text-text01", children: description })
+      ] })
+    ] }),
+    isCloseButtonShown && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "flex shrink-0 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(IconButton, { icon: "close", size: "medium", variant: "text", isNoPadding: true, "aria-label": "\u9589\u3058\u308B", onClick: handleClose }) })
   ] });
 }
 
 // src/toast/toast-provider.tsx
-var import_react68 = require("react");
+var import_react74 = require("react");
 var import_react_dom3 = require("react-dom");
-var import_jsx_runtime74 = require("react/jsx-runtime");
-var ToastContext = (0, import_react68.createContext)({});
-var ToastProvider = ({ children }) => {
-  const [isClientRender, setIsClientRender] = (0, import_react68.useState)(false);
-  const [toasts, setToasts] = (0, import_react68.useState)([]);
-  const addToast = (0, import_react68.useCallback)(({ message, state }) => {
-    setToasts((prev) => [...prev, { id: Math.trunc(Math.random() * 1e5), message, state }]);
-  }, []);
-  const removeToast = (0, import_react68.useCallback)((id) => {
+var import_jsx_runtime80 = require("react/jsx-runtime");
+var ToastContext = (0, import_react74.createContext)({});
+var ToastProvider = ({ children, hasCloseButton = false }) => {
+  const [isClientRender, setIsClientRender] = (0, import_react74.useState)(false);
+  const [toasts, setToasts] = (0, import_react74.useState)([]);
+  const nextIdRef = (0, import_react74.useRef)(0);
+  const addToast = (0, import_react74.useCallback)(
+    (args) => {
+      nextIdRef.current += 1;
+      const id = nextIdRef.current;
+      setToasts((prev) => [
+        ...prev,
+        {
+          id,
+          message: args.message,
+          state: args.state,
+          description: args.description,
+          hasCloseButton: args.hasCloseButton ?? hasCloseButton,
+          isAutoClose: args.isAutoClose ?? true
+        }
+      ]);
+    },
+    [hasCloseButton]
+  );
+  const removeToast = (0, import_react74.useCallback)((id) => {
     setToasts((prev) => prev.filter((snackbar) => snackbar.id !== id));
   }, []);
-  (0, import_react68.useEffect)(() => {
+  (0, import_react74.useEffect)(() => {
     setIsClientRender(true);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(ToastContext.Provider, { value: { addToast, removeToast }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(ToastContext.Provider, { value: { addToast, removeToast }, children: [
     children,
     isClientRender && (0, import_react_dom3.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "pointer-events-none fixed bottom-0 left-0 z-toast mb-4 ml-4 flex w-full flex-col-reverse gap-[16px]", children: toasts.map(({ id, message, state }) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Toast, { state, isAutoClose: true, isAnimation: true, onClickClose: () => removeToast(id), width: 475, children: message }, id)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+        "div",
+        {
+          role: "region",
+          "aria-label": "\u901A\u77E5",
+          className: "pointer-events-none fixed bottom-0 left-0 z-toast mb-4 ml-4 flex w-full flex-col-reverse gap-4",
+          children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { role: toast.state === "error" ? "alert" : "status", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+            Toast,
+            {
+              state: toast.state,
+              description: toast.description,
+              hasCloseButton: toast.hasCloseButton,
+              isAutoClose: toast.isAutoClose,
+              isAnimation: true,
+              width: 475,
+              onClickClose: () => removeToast(toast.id),
+              children: toast.message
+            }
+          ) }, toast.id))
+        }
+      ),
       document.body
     )
   ] });
 };
 var useToast = () => {
-  return (0, import_react68.useContext)(ToastContext);
+  return (0, import_react74.useContext)(ToastContext);
 };
 
 // src/toggle/toggle.tsx
-var import_clsx54 = __toESM(require("clsx"));
-var import_jsx_runtime75 = require("react/jsx-runtime");
+var import_clsx57 = __toESM(require("clsx"));
+var import_jsx_runtime81 = require("react/jsx-runtime");
 function Toggle({
   id,
   size = "medium",
@@ -4802,7 +5391,7 @@ function Toggle({
   labelPosition = "right",
   isDisabled = false
 }) {
-  const baseClasses = (0, import_clsx54.default)("relative flex items-center rounded-full", {
+  const baseClasses = (0, import_clsx57.default)("relative flex items-center rounded-full", {
     "bg-disabledOn": isDisabled && isChecked,
     "bg-disabled01": isDisabled && !isChecked,
     "bg-interactive01 peer-hover:bg-hover01": !isDisabled && isChecked,
@@ -4810,16 +5399,16 @@ function Toggle({
     "w-8 h-4 px-[3px]": size === "small",
     "w-12 h-6 px-1": size === "medium" || size === "large"
   });
-  const inputClasses = (0, import_clsx54.default)(
+  const inputClasses = (0, import_clsx57.default)(
     "peer absolute inset-0 z-[1] opacity-0",
     isDisabled ? "cursor-not-allowed" : "cursor-pointer"
   );
-  const indicatorClasses = (0, import_clsx54.default)("rounded-full bg-iconOnColor", {
+  const indicatorClasses = (0, import_clsx57.default)("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 = (0, import_clsx54.default)("break-all", {
+  const labelClasses = (0, import_clsx57.default)("break-all", {
     "mr-2": labelPosition === "left",
     "ml-2": labelPosition === "right",
     "typography-label14regular": size === "small" || size === "medium",
@@ -4827,9 +5416,9 @@ function Toggle({
     "pointer-events-none cursor-not-allowed text-disabled01": isDisabled,
     "cursor-pointer text-text01": !isDisabled
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "relative flex flex-[0_0_auto] items-center", children: [
-    label != null && labelPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("label", { htmlFor: id, className: labelClasses, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "relative flex flex-[0_0_auto] items-center", children: [
+    label != null && labelPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("label", { htmlFor: id, className: labelClasses, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
       "input",
       {
         className: inputClasses,
@@ -4841,23 +5430,23 @@ function Toggle({
         disabled: isDisabled
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: baseClasses, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: indicatorClasses }) }),
-    label != null && labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("label", { htmlFor: id, className: labelClasses, children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: baseClasses, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: indicatorClasses }) }),
+    label != null && labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("label", { htmlFor: id, className: labelClasses, children: label })
   ] });
 }
 
 // src/tooltip/tooltip.tsx
-var import_react70 = require("react");
+var import_react76 = require("react");
 var import_react_dom4 = require("react-dom");
 
 // src/tooltip/tooltip-content.tsx
-var import_clsx56 = __toESM(require("clsx"));
+var import_clsx59 = __toESM(require("clsx"));
 
 // src/tooltip/tail-icon.tsx
-var import_clsx55 = __toESM(require("clsx"));
-var import_jsx_runtime76 = require("react/jsx-runtime");
+var import_clsx58 = __toESM(require("clsx"));
+var import_jsx_runtime82 = require("react/jsx-runtime");
 var TailIcon = (props) => {
-  const tailClasses = (0, import_clsx55.default)("absolute fill-uiBackgroundTooltip", {
+  const tailClasses = (0, import_clsx58.default)("absolute fill-uiBackgroundTooltip", {
     "rotate-180": props.verticalPosition === "bottom",
     "rotate-0": props.verticalPosition !== "bottom",
     "-top-1": props.verticalPosition === "bottom" && props.size === "small",
@@ -4872,9 +5461,9 @@ var TailIcon = (props) => {
     "left-1/2 -translate-x-2": props.horizontalAlign === "center" && props.size !== "small"
   });
   if (props.size === "small") {
-    return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("svg", { className: tailClasses, width: "8", height: "4", viewBox: "0 0 8 4", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("path", { d: "M4 4L0 0H8L4 4Z" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("svg", { className: tailClasses, width: "8", height: "4", viewBox: "0 0 8 4", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("path", { d: "M4 4L0 0H8L4 4Z" }) });
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       "svg",
       {
         className: tailClasses,
@@ -4883,14 +5472,14 @@ var TailIcon = (props) => {
         viewBox: "0 0 14 8",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("path", { d: "M7 8L0 0H14L7 8Z" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("path", { d: "M7 8L0 0H14L7 8Z" })
       }
     );
   }
 };
 
 // src/tooltip/tooltip-content.tsx
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_jsx_runtime83 = require("react/jsx-runtime");
 var TooltipContent = ({
   content,
   horizontalAlign,
@@ -4900,7 +5489,7 @@ var TooltipContent = ({
   maxWidth,
   isPortal = false
 }) => {
-  const tooltipWrapperClasses = (0, import_clsx56.default)("absolute z-tooltip m-auto flex", {
+  const tooltipWrapperClasses = (0, import_clsx59.default)("absolute z-tooltip m-auto flex", {
     "top-0": !isPortal && verticalPosition === "top",
     "bottom-0": !isPortal && verticalPosition === "bottom",
     "justify-start": horizontalAlign === "left",
@@ -4909,7 +5498,7 @@ var TooltipContent = ({
     "w-[24px]": size === "small",
     "w-[46px]": size !== "small"
   });
-  const tooltipBodyClasses = (0, import_clsx56.default)(
+  const tooltipBodyClasses = (0, import_clsx59.default)(
     "absolute z-tooltip inline-block w-max rounded bg-uiBackgroundTooltip text-textOnColor",
     {
       "typography-body12regular": size === "small",
@@ -4926,7 +5515,7 @@ var TooltipContent = ({
     transform: `translate(${tooltipPosition.translateX}, ${tooltipPosition.translateY})`,
     ...tooltipPosition
   } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: tooltipWrapperClasses, style: tooltipWrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: tooltipWrapperClasses, style: tooltipWrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
     "div",
     {
       className: tooltipBodyClasses,
@@ -4935,16 +5524,16 @@ var TooltipContent = ({
       },
       children: [
         content,
-        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(TailIcon, { size, verticalPosition, horizontalAlign })
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(TailIcon, { size, verticalPosition, horizontalAlign })
       ]
     }
   ) });
 };
 
 // src/tooltip/tooltip-hook.ts
-var import_react69 = require("react");
+var import_react75 = require("react");
 var useTooltip = () => {
-  const calculatePosition = (0, import_react69.useCallback)(
+  const calculatePosition = (0, import_react75.useCallback)(
     (args) => {
       const result = {
         maxWidth: "none",
@@ -4996,7 +5585,7 @@ var useTooltip = () => {
 };
 
 // src/tooltip/tooltip.tsx
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_jsx_runtime84 = require("react/jsx-runtime");
 function Tooltip({
   children,
   content,
@@ -5008,8 +5597,8 @@ function Tooltip({
   portalTarget
 }) {
   const { calculatePosition } = useTooltip();
-  const [isVisible, setIsVisible] = (0, import_react70.useState)(false);
-  const [tooltipPosition, setTooltipPosition] = (0, import_react70.useState)({
+  const [isVisible, setIsVisible] = (0, import_react76.useState)(false);
+  const [tooltipPosition, setTooltipPosition] = (0, import_react76.useState)({
     maxWidth: "none",
     width: "auto",
     left: "0px",
@@ -5018,8 +5607,8 @@ function Tooltip({
     translateX: "0",
     translateY: "0"
   });
-  const targetRef = (0, import_react70.useRef)(null);
-  const handleMouseOverWrapper = (0, import_react70.useCallback)(() => {
+  const targetRef = (0, import_react76.useRef)(null);
+  const handleMouseOverWrapper = (0, import_react76.useCallback)(() => {
     if (isDisabledHover) {
       return;
     }
@@ -5036,16 +5625,16 @@ function Tooltip({
     }
     setIsVisible(true);
   }, [isDisabledHover, calculatePosition, maxWidth, verticalPosition, horizontalAlign, size]);
-  const handleMouseOutWrapper = (0, import_react70.useCallback)(() => {
+  const handleMouseOutWrapper = (0, import_react76.useCallback)(() => {
     setIsVisible(false);
   }, []);
-  (0, import_react70.useEffect)(() => {
+  (0, import_react76.useEffect)(() => {
     if (targetRef.current === null) return;
     const dimensions = targetRef.current?.getBoundingClientRect();
     const position = calculatePosition({ dimensions, maxWidth, verticalPosition, horizontalAlign, tooltipSize: size });
     setTooltipPosition(position);
   }, [calculatePosition, horizontalAlign, maxWidth, size, verticalPosition]);
-  (0, import_react70.useEffect)(() => {
+  (0, import_react76.useEffect)(() => {
     if (!isVisible) return;
     const updatePosition = () => {
       if (targetRef.current === null) return;
@@ -5066,7 +5655,7 @@ function Tooltip({
       window.removeEventListener("resize", updatePosition);
     };
   }, [isVisible, calculatePosition, maxWidth, verticalPosition, horizontalAlign, size]);
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
     "div",
     {
       ref: targetRef,
@@ -5075,7 +5664,7 @@ function Tooltip({
       onMouseLeave: handleMouseOutWrapper,
       children: [
         children,
-        isVisible && (portalTarget == null ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+        isVisible && (portalTarget == null ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
           TooltipContent,
           {
             content,
@@ -5086,7 +5675,7 @@ function Tooltip({
             tooltipPosition
           }
         ) : (0, import_react_dom4.createPortal)(
-          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
             TooltipContent,
             {
               isPortal: true,
@@ -5131,6 +5720,7 @@ function Tooltip({
   PopoverTrigger,
   Popup,
   Radio,
+  RadioCard,
   Search,
   SegmentedControl,
   Select,
@@ -5145,10 +5735,13 @@ function Tooltip({
   Tag,
   TextArea,
   TextInput,
+  TimePicker,
   Toast,
   ToastProvider,
   Toggle,
   Tooltip,
+  formatTime,
+  parseTime,
   useOutsideClick,
   useRovingFocus,
   useToast