@zenkigen-inc/component-ui 1.21.0 → 1.22.0

package/dist/index.mjs

@@ -665,9 +665,9 @@ function ComboboxInput({ autoFocus, children }) {
     setInputElementRef,
     handleKeyDown,
     handleInputBlur,
-    clearValue
+    onClickClearButton
   } = useComboboxContext("Combobox.Input");
-  const isClearButtonVisible = inputValue.length > 0 && !isDisabled;
+  const isClearButtonVisible = onClickClearButton != null && inputValue.length > 0 && !isDisabled;
   const isEffectivelyOpen = isOpen && hasOpenableContent2;
   const activeItem = activeIndex !== null ? items[activeIndex] : null;
   const activeId = activeItem != null ? `${baseId}-option-${activeItem.value}` : null;
@@ -686,8 +686,8 @@ function ComboboxInput({ autoFocus, children }) {
     inputRef.current?.focus();
   }, [isOpen, setIsOpen, inputRef]);
   const handleClear = useCallback2(() => {
-    clearValue();
-  }, [clearValue]);
+    onClickClearButton?.();
+  }, [onClickClearButton]);
   const setRef = useCallback2(
     (node) => {
       setInputElementRef(node);
@@ -1179,14 +1179,12 @@ function useCombobox(params) {
     },
     [setIsOpen]
   );
-  const clearValue = useCallback4(() => {
-    committedInputValueRef.current = "";
-    paramsRef.current.onChange(null, null);
-    paramsRef.current.onInputChange("");
-    setActiveIndexState(null);
-    activeValueRef.current = null;
-    inputRef.current?.focus();
-  }, []);
+  useEffect4(() => {
+    if (params.inputValue === "" && params.value === null) {
+      setActiveIndexState(null);
+      activeValueRef.current = null;
+    }
+  }, [params.inputValue, params.value]);
   const moveActive = useCallback4((direction) => {
     const currentItems = itemsRef.current;
     const enabledIndices = currentItems.flatMap((item, i) => item.isDisabled ? [] : [i]);
@@ -1284,7 +1282,6 @@ function useCombobox(params) {
     items,
     setItems,
     selectValue,
-    clearValue,
     revertInputToCommitted,
     inputRef,
     handleKeyDown
@@ -1308,6 +1305,7 @@ function ComboboxBase({
   onChange,
   inputValue,
   onInputChange,
+  onClickClearButton,
   isOpen: isOpenProp,
   onOpenChange,
   size = "medium",
@@ -1426,7 +1424,7 @@ function ComboboxBase({
       setIsOpen,
       selectedValue: value,
       selectValue: combobox.selectValue,
-      clearValue: combobox.clearValue,
+      onClickClearButton,
       activeIndex: combobox.activeIndex,
       setActiveIndex: combobox.setActiveIndex,
       inputMode: combobox.inputMode,
@@ -1457,7 +1455,7 @@ function ComboboxBase({
       setIsOpen,
       value,
       combobox.selectValue,
-      combobox.clearValue,
+      onClickClearButton,
       combobox.activeIndex,
       combobox.setActiveIndex,
       combobox.inputMode,
@@ -2970,22 +2968,35 @@ Modal.Footer = ModalFooter;
 // src/notification-inline/notification-inline.tsx
 import { clsx as clsx29 } from "clsx";
 import { jsx as jsx38, jsxs as jsxs15 } from "react/jsx-runtime";
-function NotificationInline({ state = "default", size = "medium", ...props }) {
-  const wrapperClasses = clsx29("typography-body13regular flex items-center gap-1 rounded text-text01", {
+function NotificationInline({ state = "default", size = "medium", variant = "default", ...props }) {
+  const isOutline = variant === "outline";
+  const wrapperClasses = clsx29("typography-body13regular flex items-center gap-1 rounded border text-text01", {
     "bg-uiBackgroundError": state === "attention",
     "bg-uiBackgroundWarning": state === "warning",
     "bg-uiBackgroundBlue": state === "information",
     "bg-uiBackgroundSuccess": state === "success",
     "bg-uiBackgroundGray": state === "default",
-    "p-2": size === "small",
-    "p-3": size === "medium"
+    // 1 行時の高さの基準は small が閉じるボタン(24px)、medium がアイコン(24px)。
+    // showClose / state によらず高さが変わらないよう、両サイズとも最小高を確保する
+    "min-h-12 p-[calc(0.75rem_-_1px)]": size === "small",
+    "min-h-14 p-[calc(1rem_-_1px)]": size === "medium",
+    "border-transparent": !isOutline,
+    "border-supportError": isOutline && state === "attention",
+    "border-supportWarning": isOutline && state === "warning",
+    "border-supportInfo": isOutline && state === "information",
+    "border-supportSuccess": isOutline && state === "success",
+    "border-uiBorder04": isOutline && state === "default"
   });
-  const iconClasses = clsx29("flex items-center", {
+  const iconClasses = clsx29("flex shrink-0 items-center", {
+    "h-5": size === "small",
     "fill-supportError": state === "attention",
     "fill-supportWarning": state === "warning",
     "fill-blue-blue50": state === "information",
     "fill-supportSuccess": state === "success"
   });
+  const textClasses = clsx29("flex-1", {
+    "pt-[2px]": size === "medium" && state !== "default"
+  });
   const iconName = {
     attention: "attention",
     success: "success-filled",
@@ -2997,9 +3008,11 @@ function NotificationInline({ state = "default", size = "medium", ...props }) {
     medium: "medium"
   };
   return /* @__PURE__ */ jsxs15("div", { className: wrapperClasses, children: [
-    state !== "default" && /* @__PURE__ */ jsx38("div", { className: iconClasses, children: /* @__PURE__ */ jsx38(Icon, { name: iconName[state], size: iconSize[size] }) }),
-    /* @__PURE__ */ jsx38("p", { className: "flex-1", children: props.children }),
-    props.showClose === true && /* @__PURE__ */ jsx38("div", { className: "flex items-center", children: /* @__PURE__ */ jsx38(IconButton, { icon: "close", size: "small", variant: "text", onClick: props.onClickClose }) })
+    /* @__PURE__ */ jsxs15("div", { className: "flex flex-1 items-start gap-1", children: [
+      state !== "default" && /* @__PURE__ */ jsx38("div", { className: iconClasses, children: /* @__PURE__ */ jsx38(Icon, { name: iconName[state], size: iconSize[size] }) }),
+      /* @__PURE__ */ jsx38("p", { className: textClasses, children: props.children })
+    ] }),
+    props.showClose === true && /* @__PURE__ */ jsx38("div", { className: "ml-2 flex shrink-0 items-center", children: /* @__PURE__ */ jsx38(IconButton, { icon: "close", size: "small", variant: "text", onClick: props.onClickClose }) })
   ] });
 }
 
@@ -3211,7 +3224,9 @@ function Select({
   isOptionSelected = false,
   onChange,
   optionListMaxHeight,
-  matchListToTrigger = false
+  matchListToTrigger = false,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedby
 }) {
   const [isOptionListOpen, setIsOptionListOpen] = useState10(false);
   const targetRef = useRef11(null);
@@ -3272,6 +3287,7 @@ function Select({
     "typography-label14regular": size === "small" || size === "medium",
     "typography-label16regular": size === "large"
   });
+  const ariaInvalidProps = isError ? { "aria-invalid": true } : {};
   return /* @__PURE__ */ jsx43(
     SelectContext.Provider,
     {
@@ -3293,6 +3309,9 @@ function Select({
             ref: refs.setReference,
             className: buttonClasses,
             type: "button",
+            "aria-label": ariaLabel,
+            "aria-describedby": ariaDescribedby,
+            ...ariaInvalidProps,
             onClick: handleClickToggle,
             disabled: isDisabled,
             children: [
@@ -3601,23 +3620,207 @@ function Radio({
   ] });
 }
 
+// src/radio-card/radio-card.tsx
+import { Children as Children5, cloneElement as cloneElement5, isValidElement as isValidElement5, useId as useId6, useMemo as useMemo6 } from "react";
+
+// src/radio-card/radio-card-context.ts
+import { createContext as createContext12, useContext as useContext15 } from "react";
+var RadioCardContext = createContext12(null);
+function useRadioCardContext(componentName) {
+  const context = useContext15(RadioCardContext);
+  if (context === null) {
+    throw new Error(`<${componentName}> \u306F <RadioCard> \u306E\u5185\u90E8\u3067\u4F7F\u7528\u3057\u3066\u304F\u3060\u3055\u3044`);
+  }
+  return context;
+}
+
+// src/radio-card/radio-card-error-message.tsx
+import { jsx as jsx51 } from "react/jsx-runtime";
+function RadioCardErrorMessage({ children, id }) {
+  const { isError } = useRadioCardContext("RadioCard.ErrorMessage");
+  if (!isError) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx51("p", { id, className: "typography-label13regular text-supportError", "aria-live": "assertive", children });
+}
+RadioCardErrorMessage.displayName = "RadioCard.ErrorMessage";
+
+// src/radio-card/radio-card-group.tsx
+import { jsx as jsx52 } from "react/jsx-runtime";
+function RadioCardGroup({ children }) {
+  const { ariaLabel, ariaLabelledby, errorDescribedBy } = useRadioCardContext("RadioCard.Group");
+  const describedByProps = errorDescribedBy != null ? { "aria-describedby": errorDescribedBy } : {};
+  return /* @__PURE__ */ jsx52(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      className: "flex flex-col gap-4",
+      ...describedByProps,
+      children
+    }
+  );
+}
+RadioCardGroup.displayName = "RadioCard.Group";
+
+// src/radio-card/radio-card-item.tsx
+import { focusVisible as focusVisible13 } from "@zenkigen-inc/component-theme";
+import clsx35 from "clsx";
+import { useId as useId5 } from "react";
+import { jsx as jsx53, jsxs as jsxs23 } from "react/jsx-runtime";
+function RadioCardItem({ value, label, description, isDisabled: itemDisabled = false, id }) {
+  const context = useRadioCardContext("RadioCard.Item");
+  const autoId = useId5();
+  const inputId = id ?? autoId;
+  const labelId = `${inputId}-label`;
+  const descriptionId = `${inputId}-description`;
+  const isChecked = context.value === value;
+  const isDisabled = context.isDisabled || itemDisabled;
+  const isError = context.isError && !isDisabled;
+  const hasDescription = description != null && description !== "";
+  const describedByProps = hasDescription ? { "aria-describedby": descriptionId } : {};
+  const ariaInvalidProps = isError ? { "aria-invalid": true } : {};
+  const handleChange = () => {
+    if (!isDisabled) {
+      context.onChange(value);
+    }
+  };
+  const cardClasses = clsx35(
+    "pointer-events-none flex flex-col gap-2 rounded border border-solid px-4 py-3",
+    focusVisible13.normalPeer,
+    {
+      "border-uiBorder02 bg-uiBackground01": isDisabled,
+      "border-supportError bg-uiBackground01 group-hover:bg-hoverUi02": isError,
+      "border-selectedUiBorder bg-selectedUi group-hover:bg-hoverUi02": !isDisabled && !isError && isChecked,
+      "border-uiBorder02 bg-uiBackground01 group-hover:bg-hoverUi02": !isDisabled && !isError && !isChecked
+    }
+  );
+  const boxClasses = clsx35(
+    "relative inline-flex size-5 shrink-0 items-center justify-center rounded-full border border-solid bg-white",
+    {
+      "border-disabled01": isDisabled,
+      "border-supportError group-hover:border-hoverError": !isDisabled && isError,
+      "border-uiBorder04 group-hover:border-hoverUiBorder": !isDisabled && !isError
+    }
+  );
+  const dotClasses = clsx35("absolute inset-0 m-auto size-3 rounded-full", {
+    "scale-100": isChecked,
+    "scale-0": !isChecked,
+    "bg-disabled01": isDisabled && isChecked,
+    "bg-supportError": !isDisabled && isError && isChecked,
+    "bg-activeSelectedUi": !isDisabled && !isError && isChecked
+  });
+  const hoverDotClasses = clsx35("size-3 rounded-full bg-transparent", {
+    "group-hover:bg-hoverUi": !isDisabled && !isChecked
+  });
+  const labelClasses = clsx35("typography-label14regular ml-2 select-none break-all", {
+    "text-disabled01": isDisabled,
+    "text-text01": !isDisabled
+  });
+  const descriptionClasses = clsx35("typography-body12regular pl-7", {
+    "text-disabled01": isDisabled,
+    "text-text02": !isDisabled
+  });
+  return /* @__PURE__ */ jsxs23("div", { className: "group relative", children: [
+    /* @__PURE__ */ jsx53(
+      "input",
+      {
+        type: "radio",
+        id: inputId,
+        name: context.name,
+        value,
+        checked: isChecked,
+        disabled: isDisabled,
+        onChange: handleChange,
+        "aria-labelledby": labelId,
+        className: "peer absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed",
+        ...describedByProps,
+        ...ariaInvalidProps
+      }
+    ),
+    /* @__PURE__ */ jsxs23("div", { className: cardClasses, children: [
+      /* @__PURE__ */ jsxs23("div", { className: "flex items-center", children: [
+        /* @__PURE__ */ jsxs23("span", { className: boxClasses, "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx53("span", { className: dotClasses }),
+          /* @__PURE__ */ jsx53("span", { className: hoverDotClasses })
+        ] }),
+        /* @__PURE__ */ jsx53("span", { id: labelId, className: labelClasses, children: label })
+      ] }),
+      hasDescription ? /* @__PURE__ */ jsx53("p", { id: descriptionId, className: descriptionClasses, children: description }) : null
+    ] })
+  ] });
+}
+RadioCardItem.displayName = "RadioCard.Item";
+
+// src/radio-card/radio-card.tsx
+import { jsx as jsx54 } from "react/jsx-runtime";
+function RadioCardRoot({
+  children,
+  value,
+  onChange,
+  name,
+  isDisabled = false,
+  isError = false,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby
+}) {
+  const autoName = useId6();
+  const baseId = useId6();
+  const resolvedName = name ?? autoName;
+  const errorIds = [];
+  const enhancedChildren = Children5.map(children, (child) => {
+    if (!isValidElement5(child)) {
+      return child;
+    }
+    if (child.type === RadioCardErrorMessage && isError) {
+      const errorChild = child;
+      const assignedId = errorChild.props.id ?? `${baseId}-error-${errorIds.length + 1}`;
+      errorIds.push(assignedId);
+      return cloneElement5(errorChild, { id: assignedId });
+    }
+    return child;
+  });
+  const errorDescribedBy = errorIds.length > 0 ? errorIds.join(" ") : null;
+  const contextValue = useMemo6(
+    () => ({
+      value,
+      onChange,
+      name: resolvedName,
+      isDisabled,
+      isError,
+      errorDescribedBy,
+      ariaLabel,
+      ariaLabelledby
+    }),
+    [value, onChange, resolvedName, isDisabled, isError, errorDescribedBy, ariaLabel, ariaLabelledby]
+  );
+  return /* @__PURE__ */ jsx54(RadioCardContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx54("div", { className: "flex flex-col gap-2", children: enhancedChildren }) });
+}
+var RadioCard = Object.assign(RadioCardRoot, {
+  Group: RadioCardGroup,
+  Item: RadioCardItem,
+  ErrorMessage: RadioCardErrorMessage,
+  displayName: "RadioCard"
+});
+
 // src/search/search.tsx
-import { clsx as clsx35 } from "clsx";
+import { clsx as clsx36 } from "clsx";
 import { forwardRef as forwardRef12 } from "react";
-import { jsx as jsx51, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs24 } from "react/jsx-runtime";
 var Search = forwardRef12(({ width = "100%", size = "medium", ...props }, ref) => {
-  const classes = clsx35(
+  const classes = clsx36(
     "flex items-center rounded-full border border-uiBorder02 bg-uiBackground01 focus-within:border-activeInput",
     { "h-8 px-3": size === "medium" },
     { "h-10 px-4": size === "large" }
   );
-  const inputClasses = clsx35("mx-2 h-full flex-1 text-text01 outline-none placeholder:text-textPlaceholder", {
+  const inputClasses = clsx36("mx-2 h-full flex-1 text-text01 outline-none placeholder:text-textPlaceholder", {
     ["typography-label14regular"]: size === "medium",
     ["typography-label16regular"]: size === "large"
   });
-  return /* @__PURE__ */ jsx51("div", { className: "relative", ref, children: /* @__PURE__ */ jsx51("form", { onSubmit: props.onSubmit, children: /* @__PURE__ */ jsxs23("div", { className: classes, style: { width }, children: [
-    /* @__PURE__ */ jsx51(Icon, { name: "search", color: "icon01", size: "medium" }),
-    /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx55("div", { className: "relative", ref, children: /* @__PURE__ */ jsx55("form", { onSubmit: props.onSubmit, children: /* @__PURE__ */ jsxs24("div", { className: classes, style: { width }, children: [
+    /* @__PURE__ */ jsx55(Icon, { name: "search", color: "icon01", size: "medium" }),
+    /* @__PURE__ */ jsx55(
       "input",
       {
         type: "text",
@@ -3628,7 +3831,7 @@ var Search = forwardRef12(({ width = "100%", size = "medium", ...props }, ref) =
         onChange: props.onChange
       }
     ),
-    props.onClickClearButton && props.value && props.value.length !== 0 && /* @__PURE__ */ jsx51(
+    props.onClickClearButton && props.value && props.value.length !== 0 && /* @__PURE__ */ jsx55(
       IconButton,
       {
         variant: "text",
@@ -3643,17 +3846,17 @@ var Search = forwardRef12(({ width = "100%", size = "medium", ...props }, ref) =
 Search.displayName = "Search";
 
 // src/segmented-control/segmented-control.tsx
-import React4, { Children as Children5, useRef as useRef13 } from "react";
+import React4, { Children as Children6, useRef as useRef13 } from "react";
 
 // src/segmented-control/segmented-control-context.ts
-import { createContext as createContext12 } from "react";
-var SegmentedControlContext = createContext12(null);
+import { createContext as createContext13 } from "react";
+var SegmentedControlContext = createContext13(null);
 
 // src/segmented-control/segmented-control-item.tsx
-import { focusVisible as focusVisible13 } from "@zenkigen-inc/component-theme";
-import { clsx as clsx36 } from "clsx";
-import { useContext as useContext15, useEffect as useEffect11, useRef as useRef12 } from "react";
-import { jsx as jsx52, jsxs as jsxs24 } from "react/jsx-runtime";
+import { focusVisible as focusVisible14 } from "@zenkigen-inc/component-theme";
+import { clsx as clsx37 } from "clsx";
+import { useContext as useContext16, useEffect as useEffect11, useRef as useRef12 } from "react";
+import { jsx as jsx56, jsxs as jsxs25 } from "react/jsx-runtime";
 var SegmentedControlItem = ({
   label,
   value,
@@ -3662,7 +3865,7 @@ var SegmentedControlItem = ({
   "aria-label": ariaLabel,
   ...rest
 }) => {
-  const context = useContext15(SegmentedControlContext);
+  const context = useContext16(SegmentedControlContext);
   const buttonRef = useRef12(null);
   const lastInteractionWasMouse = useRef12(false);
   if (context === null) {
@@ -3702,7 +3905,7 @@ var SegmentedControlItem = ({
     lastInteractionWasMouse.current = false;
     onBlur?.();
   };
-  const buttonClasses = clsx36("relative flex items-center justify-center gap-1 rounded", focusVisible13.normal, {
+  const buttonClasses = clsx37("relative flex items-center justify-center gap-1 rounded", focusVisible14.normal, {
     "px-2 min-h-[24px] typography-label12regular": size === "small",
     "px-4 min-h-[32px] typography-label14regular": size === "medium",
     // States - Default with hover
@@ -3712,7 +3915,7 @@ var SegmentedControlItem = ({
     // States - Disabled
     "text-disabled01 bg-transparent": isOptionDisabled === true
   });
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "button",
     {
       ref: buttonRef,
@@ -3729,25 +3932,25 @@ var SegmentedControlItem = ({
       onMouseDown: handleMouseDown,
       ...rest,
       children: [
-        Boolean(icon) === true && icon && /* @__PURE__ */ jsx52(
+        Boolean(icon) === true && icon && /* @__PURE__ */ jsx56(
           "span",
           {
-            className: clsx36("flex items-center", {
+            className: clsx37("flex items-center", {
               "fill-disabled01": isOptionDisabled === true,
               "fill-interactive01": isSelected === true && isOptionDisabled === false,
               "fill-icon01": isSelected === false && isOptionDisabled === false
             }),
-            children: /* @__PURE__ */ jsx52(Icon, { name: icon, size: "small" })
+            children: /* @__PURE__ */ jsx56(Icon, { name: icon, size: "small" })
           }
         ),
-        Boolean(label) === true && /* @__PURE__ */ jsx52("span", { className: "whitespace-nowrap", children: label })
+        Boolean(label) === true && /* @__PURE__ */ jsx56("span", { className: "whitespace-nowrap", children: label })
       ]
     }
   );
 };
 
 // src/segmented-control/segmented-control.tsx
-import { Fragment as Fragment6, jsx as jsx53 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx57 } from "react/jsx-runtime";
 var SegmentedControl = ({
   children,
   value,
@@ -3758,14 +3961,14 @@ var SegmentedControl = ({
   ...rest
 }) => {
   const containerRef = useRef13(null);
-  const itemIds = Children5.toArray(children).filter((child) => {
+  const itemIds = Children6.toArray(children).filter((child) => {
     if (!React4.isValidElement(child) || typeof child.props !== "object" || child.props === null || !("value" in child.props)) {
       return false;
     }
     const props = child.props;
     return props.isDisabled !== true;
   }).map((child) => child.props.value);
-  const childrenCount = Children5.count(children);
+  const childrenCount = Children6.count(children);
   const containerStyle = { gridTemplateColumns: `repeat(${childrenCount}, minmax(0,1fr))` };
   const {
     focusedValue,
@@ -3792,7 +3995,7 @@ var SegmentedControl = ({
     onBlur: handleBlurRovingFocus,
     values: itemIds
   };
-  return /* @__PURE__ */ jsx53(Fragment6, { children: /* @__PURE__ */ jsx53(SegmentedControlContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx57(Fragment6, { children: /* @__PURE__ */ jsx57(SegmentedControlContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx57(
     "div",
     {
       ref: containerRef,
@@ -3809,22 +4012,22 @@ var SegmentedControl = ({
 SegmentedControl.Item = SegmentedControlItem;
 
 // src/select-sort/select-sort.tsx
-import { buttonColors as buttonColors4, focusVisible as focusVisible16 } from "@zenkigen-inc/component-theme";
-import clsx39 from "clsx";
+import { buttonColors as buttonColors4, focusVisible as focusVisible17 } from "@zenkigen-inc/component-theme";
+import clsx40 from "clsx";
 import { useCallback as useCallback13, useRef as useRef14, useState as useState13 } from "react";
 
 // src/select-sort/select-list.tsx
-import { focusVisible as focusVisible15 } from "@zenkigen-inc/component-theme";
-import clsx38 from "clsx";
+import { focusVisible as focusVisible16 } from "@zenkigen-inc/component-theme";
+import clsx39 from "clsx";
 
 // src/select-sort/select-item.tsx
-import { focusVisible as focusVisible14 } from "@zenkigen-inc/component-theme";
-import clsx37 from "clsx";
-import { jsx as jsx54, jsxs as jsxs25 } from "react/jsx-runtime";
+import { focusVisible as focusVisible15 } from "@zenkigen-inc/component-theme";
+import clsx38 from "clsx";
+import { jsx as jsx58, jsxs as jsxs26 } from "react/jsx-runtime";
 function SelectItem2({ children, isSortKey, size, onClickItem }) {
-  const itemClasses = clsx37(
+  const itemClasses = clsx38(
     "typography-label14regular flex w-full items-center px-3 hover:bg-hover02 active:bg-active02",
-    focusVisible14.inset,
+    focusVisible15.inset,
     {
       "h-8": size !== "large",
       "h-10": size === "large",
@@ -3832,16 +4035,16 @@ function SelectItem2({ children, isSortKey, size, onClickItem }) {
       "bg-uiBackground01 fill-icon01 text-interactive02": !isSortKey
     }
   );
-  return /* @__PURE__ */ jsx54("li", { className: "flex w-full items-center", onClick: onClickItem, children: /* @__PURE__ */ jsxs25("button", { className: itemClasses, type: "button", children: [
-    /* @__PURE__ */ jsx54("span", { className: "ml-1 mr-6", children }),
-    isSortKey && /* @__PURE__ */ jsx54("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx54(Icon, { name: "check", size: "small" }) })
+  return /* @__PURE__ */ jsx58("li", { className: "flex w-full items-center", onClick: onClickItem, children: /* @__PURE__ */ jsxs26("button", { className: itemClasses, type: "button", children: [
+    /* @__PURE__ */ jsx58("span", { className: "ml-1 mr-6", children }),
+    isSortKey && /* @__PURE__ */ jsx58("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx58(Icon, { name: "check", size: "small" }) })
   ] }) });
 }
 
 // src/select-sort/select-list.tsx
-import { jsx as jsx55, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs27 } from "react/jsx-runtime";
 function SelectList2({ size, variant, sortOrder, onClickItem, onClickDeselect }) {
-  const listClasses = clsx38(
+  const listClasses = clsx39(
     "absolute z-dropdown w-max overflow-y-auto rounded bg-uiBackground01 py-2 shadow-floatingShadow",
     {
       "top-7": size === "x-small" || size === "small",
@@ -3850,23 +4053,23 @@ function SelectList2({ size, variant, sortOrder, onClickItem, onClickDeselect })
       "border-solid border border-uiBorder01": variant === "outline"
     }
   );
-  const deselectButtonClasses = clsx38(
+  const deselectButtonClasses = clsx39(
     "typography-label14regular flex w-full items-center px-3 text-interactive02 hover:bg-hover02 active:bg-active02",
-    focusVisible15.inset,
+    focusVisible16.inset,
     {
       "h-8": size !== "large",
       "h-10": size === "large"
     }
   );
-  return /* @__PURE__ */ jsxs26("ul", { className: listClasses, children: [
-    /* @__PURE__ */ jsx55(SelectItem2, { size, isSortKey: sortOrder === "ascend", onClickItem: () => onClickItem("ascend"), children: "\u6607\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
-    /* @__PURE__ */ jsx55(SelectItem2, { size, isSortKey: sortOrder === "descend", onClickItem: () => onClickItem("descend"), children: "\u964D\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
-    sortOrder !== null && onClickDeselect && /* @__PURE__ */ jsx55("li", { children: /* @__PURE__ */ jsx55("button", { className: deselectButtonClasses, type: "button", onClick: onClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
+  return /* @__PURE__ */ jsxs27("ul", { className: listClasses, children: [
+    /* @__PURE__ */ jsx59(SelectItem2, { size, isSortKey: sortOrder === "ascend", onClickItem: () => onClickItem("ascend"), children: "\u6607\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
+    /* @__PURE__ */ jsx59(SelectItem2, { size, isSortKey: sortOrder === "descend", onClickItem: () => onClickItem("descend"), children: "\u964D\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
+    sortOrder !== null && onClickDeselect && /* @__PURE__ */ jsx59("li", { children: /* @__PURE__ */ jsx59("button", { className: deselectButtonClasses, type: "button", onClick: onClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
   ] });
 }
 
 // src/select-sort/select-sort.tsx
-import { jsx as jsx56, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs28 } from "react/jsx-runtime";
 function SelectSort({
   size = "medium",
   variant = "outline",
@@ -3894,18 +4097,18 @@ function SelectSort({
     },
     [onChange]
   );
-  const wrapperClasses = clsx39("relative flex shrink-0 items-center gap-1 rounded", {
+  const wrapperClasses = clsx40("relative flex shrink-0 items-center gap-1 rounded", {
     "h-6": size === "x-small" || size === "small",
     "h-8": size === "medium",
     "h-10": size === "large",
     "cursor-not-allowed": isDisabled
   });
-  const buttonClasses = clsx39(
+  const buttonClasses = clsx40(
     "flex size-full items-center rounded",
     buttonColors4[variant].hover,
     buttonColors4[variant].active,
     buttonColors4[variant].disabled,
-    focusVisible16.normal,
+    focusVisible17.normal,
     {
       [buttonColors4[variant].selected]: isSortKey,
       [buttonColors4[variant].base]: !isSortKey,
@@ -3914,23 +4117,23 @@ function SelectSort({
       "pointer-events-none": isDisabled
     }
   );
-  const labelClasses = clsx39("truncate", {
+  const labelClasses = clsx40("truncate", {
     "typography-label12regular": size === "x-small",
     "typography-label14regular": size === "small" || size === "medium",
     "typography-label16regular": size === "large",
     "mr-1": size === "x-small",
     "mr-2": size !== "x-small"
   });
-  return /* @__PURE__ */ jsxs27("div", { className: wrapperClasses, style: { width }, ref: targetRef, children: [
-    /* @__PURE__ */ jsxs27("button", { className: buttonClasses, type: "button", onClick: handleClickToggle, disabled: isDisabled, children: [
-      /* @__PURE__ */ jsx56("div", { className: labelClasses, children: label }),
-      /* @__PURE__ */ jsx56("div", { className: "ml-auto flex items-center", children: isSortKey ? /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsxs28("div", { className: wrapperClasses, style: { width }, ref: targetRef, children: [
+    /* @__PURE__ */ jsxs28("button", { className: buttonClasses, type: "button", onClick: handleClickToggle, disabled: isDisabled, children: [
+      /* @__PURE__ */ jsx60("div", { className: labelClasses, children: label }),
+      /* @__PURE__ */ jsx60("div", { className: "ml-auto flex items-center", children: isSortKey ? /* @__PURE__ */ jsx60(
         Icon,
         {
           name: sortOrder === "ascend" ? "arrow-up" : "arrow-down",
           size: size === "large" ? "medium" : "small"
         }
-      ) : /* @__PURE__ */ jsx56(
+      ) : /* @__PURE__ */ jsx60(
         Icon,
         {
           name: isOptionListOpen ? "angle-small-up" : "angle-small-down",
@@ -3938,7 +4141,7 @@ function SelectSort({
         }
       ) })
     ] }),
-    isOptionListOpen && !isDisabled && /* @__PURE__ */ jsx56(
+    isOptionListOpen && !isDisabled && /* @__PURE__ */ jsx60(
       SelectList2,
       {
         size,
@@ -3952,10 +4155,10 @@ function SelectSort({
 }
 
 // src/sort-button/sort-button.tsx
-import { buttonColors as buttonColors5, focusVisible as focusVisible17 } from "@zenkigen-inc/component-theme";
-import clsx40 from "clsx";
+import { buttonColors as buttonColors5, focusVisible as focusVisible18 } from "@zenkigen-inc/component-theme";
+import clsx41 from "clsx";
 import { useCallback as useCallback14 } from "react";
-import { jsx as jsx57, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs29 } from "react/jsx-runtime";
 function SortButton({
   size = "medium",
   width,
@@ -3975,18 +4178,18 @@ function SortButton({
     if (sortOrder === "descend") return "arrow-down";
     return "angle-small-down";
   };
-  const wrapperClasses = clsx40("relative flex shrink-0 items-center gap-1 rounded", {
+  const wrapperClasses = clsx41("relative flex shrink-0 items-center gap-1 rounded", {
     "h-6": size === "x-small" || size === "small",
     "h-8": size === "medium",
     "h-10": size === "large",
     "cursor-not-allowed": isDisabled
   });
-  const buttonClasses = clsx40(
+  const buttonClasses = clsx41(
     "flex size-full items-center rounded",
     buttonColors5.text.hover,
     buttonColors5.text.active,
     buttonColors5.text.disabled,
-    focusVisible17.normal,
+    focusVisible18.normal,
     {
       [buttonColors5.text.selected]: !isDisabled && sortOrder !== null,
       // ソート状態時は選択状態のスタイル
@@ -3997,14 +4200,14 @@ function SortButton({
       "pointer-events-none": isDisabled
     }
   );
-  const labelClasses = clsx40("truncate", {
+  const labelClasses = clsx41("truncate", {
     "typography-label12regular": size === "x-small",
     "typography-label14regular": size === "small" || size === "medium",
     "typography-label16regular": size === "large",
     "mr-1": size === "x-small",
     "mr-2": size !== "x-small"
   });
-  return /* @__PURE__ */ jsx57("div", { className: wrapperClasses, style: { width }, children: /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsx61("div", { className: wrapperClasses, style: { width }, children: /* @__PURE__ */ jsxs29(
     "button",
     {
       className: buttonClasses,
@@ -4015,22 +4218,22 @@ function SortButton({
       "aria-label": ariaLabel,
       "aria-disabled": isDisabled,
       children: [
-        /* @__PURE__ */ jsx57("div", { className: labelClasses, children: label }),
-        /* @__PURE__ */ jsx57("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx57(Icon, { name: getIconName(), size: size === "large" ? "medium" : "small" }) })
+        /* @__PURE__ */ jsx61("div", { className: labelClasses, children: label }),
+        /* @__PURE__ */ jsx61("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx61(Icon, { name: getIconName(), size: size === "large" ? "medium" : "small" }) })
       ]
     }
   ) });
 }
 
 // src/steps/steps.tsx
-import { clsx as clsx43 } from "clsx";
-import { Children as Children6, Fragment as Fragment7, isValidElement as isValidElement5, useId as useId5, useMemo as useMemo6, useState as useState14 } from "react";
+import { clsx as clsx44 } from "clsx";
+import { Children as Children7, Fragment as Fragment7, isValidElement as isValidElement6, useId as useId7, useMemo as useMemo7, useState as useState14 } from "react";
 
 // src/steps/steps-context.ts
-import { createContext as createContext13, useContext as useContext16 } from "react";
-var StepsContext = createContext13(null);
+import { createContext as createContext14, useContext as useContext17 } from "react";
+var StepsContext = createContext14(null);
 function useStepsContext() {
-  const context = useContext16(StepsContext);
+  const context = useContext17(StepsContext);
   if (context === null) {
     throw new Error("Steps.Item must be used within <Steps>");
   }
@@ -4038,13 +4241,13 @@ function useStepsContext() {
 }
 
 // src/steps/steps-item.tsx
-import { clsx as clsx42 } from "clsx";
+import { clsx as clsx43 } from "clsx";
 
 // src/steps/steps-item-context.ts
-import { createContext as createContext14, useContext as useContext17 } from "react";
-var StepsItemContext = createContext14(null);
+import { createContext as createContext15, useContext as useContext18 } from "react";
+var StepsItemContext = createContext15(null);
 function useStepsItemContext() {
-  const context = useContext17(StepsItemContext);
+  const context = useContext18(StepsItemContext);
   if (context === null) {
     throw new Error("Steps.Item must be rendered inside a <Steps> component");
   }
@@ -4052,34 +4255,34 @@ function useStepsItemContext() {
 }
 
 // src/steps/steps-separator.tsx
-import { clsx as clsx41 } from "clsx";
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { clsx as clsx42 } from "clsx";
+import { jsx as jsx62 } from "react/jsx-runtime";
 function StepsSeparator({ progress }) {
   const { orientation } = useStepsContext();
   const isVerticalLine = orientation === "vertical";
   const colorClass = progress === "completed" ? "bg-interactive01" : "bg-uiBorder01";
   if (isVerticalLine) {
-    return /* @__PURE__ */ jsx58("div", { "aria-hidden": "true", className: clsx41("mx-auto h-full min-h-2 w-px", colorClass) });
+    return /* @__PURE__ */ jsx62("div", { "aria-hidden": "true", className: clsx42("mx-auto h-full min-h-2 w-px", colorClass) });
   }
-  return /* @__PURE__ */ jsx58("div", { "aria-hidden": "true", className: clsx41("h-px flex-1", colorClass) });
+  return /* @__PURE__ */ jsx62("div", { "aria-hidden": "true", className: clsx42("h-px flex-1", colorClass) });
 }
 
 // src/steps/steps-item.tsx
-import { jsx as jsx59, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs30 } from "react/jsx-runtime";
 var progressSrOnlyLabel = {
   completed: "\u5B8C\u4E86: ",
   current: "\u73FE\u5728\u306E\u30B9\u30C6\u30C3\u30D7: ",
   upcoming: "\u672A\u7740\u624B: "
 };
 function getCircleSizeClass(size) {
-  return clsx42({
+  return clsx43({
     "size-6 typography-label12regular": size === "small",
     "size-8 typography-label12regular": size === "medium",
     "size-10 typography-label16regular": size === "large"
   });
 }
 function getCircleVariantProgressClass(variant, progress) {
-  return clsx42({
+  return clsx43({
     // subtle（全 state border-transparent で box-sizing を揃える）
     "bg-uiBackground02 text-text01 border-transparent": variant === "subtle" && progress === "upcoming",
     "bg-activeUi text-text01 border-transparent": variant === "subtle" && progress === "current",
@@ -4091,7 +4294,7 @@ function getCircleVariantProgressClass(variant, progress) {
   });
 }
 function getCircleClasses(size, variant, state) {
-  return clsx42(
+  return clsx43(
     "box-border flex items-center justify-center rounded-full border-2",
     getCircleSizeClass(size),
     getCircleVariantProgressClass(variant, state.progress)
@@ -4109,65 +4312,65 @@ function StepsItem({ label, description }) {
   const { state, index, isLast, id } = useStepsItemContext();
   const isCircleFilled = state.progress === "completed";
   const circleClasses = getCircleClasses(size, variant, state);
-  const checkIcon = variant === "solid" ? /* @__PURE__ */ jsx59(Icon, { name: "check", size: getIconSize(size), color: "iconOnColor" }) : /* @__PURE__ */ jsx59(Icon, { name: "check", size: getIconSize(size), className: "fill-gray-gray100" });
-  const circle = /* @__PURE__ */ jsx59("span", { "aria-hidden": "true", className: circleClasses, children: isCircleFilled ? checkIcon : /* @__PURE__ */ jsx59("span", { children: index + 1 }) });
-  const labelBlock = /* @__PURE__ */ jsxs29("span", { className: clsx42("flex flex-col", textOrientation === "horizontal" ? "gap-1" : "items-center text-center"), children: [
-    /* @__PURE__ */ jsxs29(
+  const checkIcon = variant === "solid" ? /* @__PURE__ */ jsx63(Icon, { name: "check", size: getIconSize(size), color: "iconOnColor" }) : /* @__PURE__ */ jsx63(Icon, { name: "check", size: getIconSize(size), className: "fill-gray-gray100" });
+  const circle = /* @__PURE__ */ jsx63("span", { "aria-hidden": "true", className: circleClasses, children: isCircleFilled ? checkIcon : /* @__PURE__ */ jsx63("span", { children: index + 1 }) });
+  const labelBlock = /* @__PURE__ */ jsxs30("span", { className: clsx43("flex flex-col", textOrientation === "horizontal" ? "gap-1" : "items-center text-center"), children: [
+    /* @__PURE__ */ jsxs30(
       "span",
       {
-        className: clsx42(
+        className: clsx43(
           "whitespace-nowrap text-text01",
           size === "large" ? "typography-body16regular" : "typography-body14regular"
         ),
         children: [
-          /* @__PURE__ */ jsx59("span", { className: "sr-only", children: progressSrOnlyLabel[state.progress] }),
+          /* @__PURE__ */ jsx63("span", { className: "sr-only", children: progressSrOnlyLabel[state.progress] }),
           label
         ]
       }
     ),
-    description != null && /* @__PURE__ */ jsx59("span", { className: "typography-label12regular whitespace-nowrap text-text02", children: description })
+    description != null && /* @__PURE__ */ jsx63("span", { className: "typography-label12regular whitespace-nowrap text-text02", children: description })
   ] });
   const ariaCurrentProps = state.progress === "current" ? { "aria-current": "step" } : {};
   if (orientation === "horizontal" && textOrientation === "horizontal") {
-    return /* @__PURE__ */ jsx59("li", { ...ariaCurrentProps, id, children: /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2", children: [
+    return /* @__PURE__ */ jsx63("li", { ...ariaCurrentProps, id, children: /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2", children: [
       circle,
       labelBlock
     ] }) });
   }
   if (orientation === "horizontal" && textOrientation === "vertical") {
-    return /* @__PURE__ */ jsx59("li", { ...ariaCurrentProps, id, children: /* @__PURE__ */ jsxs29("div", { className: "flex flex-col items-center gap-1", children: [
+    return /* @__PURE__ */ jsx63("li", { ...ariaCurrentProps, id, children: /* @__PURE__ */ jsxs30("div", { className: "flex flex-col items-center gap-1", children: [
       circle,
       labelBlock
     ] }) });
   }
   if (orientation === "vertical" && textOrientation === "horizontal") {
-    return /* @__PURE__ */ jsxs29(
+    return /* @__PURE__ */ jsxs30(
       "li",
       {
         ...ariaCurrentProps,
-        className: clsx42(
+        className: clsx43(
           "grid grid-cols-[min-content_1fr] grid-rows-[auto_1fr] items-center gap-x-2",
           !isLast && "flex-1"
         ),
         id,
         children: [
-          /* @__PURE__ */ jsx59("div", { className: "col-start-1 row-start-1 flex items-center", children: circle }),
-          /* @__PURE__ */ jsx59("div", { className: "col-start-2 row-start-1 flex items-center", children: labelBlock }),
-          !isLast && /* @__PURE__ */ jsx59("div", { className: "col-start-1 row-start-2 flex items-stretch justify-center self-stretch py-2", children: /* @__PURE__ */ jsx59(StepsSeparator, { progress: state.progress }) })
+          /* @__PURE__ */ jsx63("div", { className: "col-start-1 row-start-1 flex items-center", children: circle }),
+          /* @__PURE__ */ jsx63("div", { className: "col-start-2 row-start-1 flex items-center", children: labelBlock }),
+          !isLast && /* @__PURE__ */ jsx63("div", { className: "col-start-1 row-start-2 flex items-stretch justify-center self-stretch py-2", children: /* @__PURE__ */ jsx63(StepsSeparator, { progress: state.progress }) })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsxs29("li", { ...ariaCurrentProps, className: clsx42("flex flex-col items-center gap-1", !isLast && "flex-1"), id, children: [
+  return /* @__PURE__ */ jsxs30("li", { ...ariaCurrentProps, className: clsx43("flex flex-col items-center gap-1", !isLast && "flex-1"), id, children: [
     circle,
     labelBlock,
-    !isLast && /* @__PURE__ */ jsx59("div", { className: "flex flex-1 items-stretch self-stretch py-2", children: /* @__PURE__ */ jsx59(StepsSeparator, { progress: state.progress }) })
+    !isLast && /* @__PURE__ */ jsx63("div", { className: "flex flex-1 items-stretch self-stretch py-2", children: /* @__PURE__ */ jsx63(StepsSeparator, { progress: state.progress }) })
   ] });
 }
 StepsItem.displayName = "Steps.Item";
 
 // src/steps/steps.tsx
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx64 } from "react/jsx-runtime";
 function getSeparatorCellHeightClass(size) {
   if (size === "small") return "h-6";
   if (size === "medium") return "h-8";
@@ -4180,12 +4383,12 @@ function HorizontalSeparatorCell({
 }) {
   const heightClass = getSeparatorCellHeightClass(size);
   const alignClass = textOrientation === "vertical" ? "self-start" : "";
-  return /* @__PURE__ */ jsx60("li", { "aria-hidden": "true", className: clsx43("flex items-center", heightClass, alignClass), role: "presentation", children: /* @__PURE__ */ jsx60(StepsSeparator, { progress }) });
+  return /* @__PURE__ */ jsx64("li", { "aria-hidden": "true", className: clsx44("flex items-center", heightClass, alignClass), role: "presentation", children: /* @__PURE__ */ jsx64(StepsSeparator, { progress }) });
 }
 function collectStepsItems(children) {
   const result = [];
-  Children6.toArray(children).forEach((child) => {
-    if (!isValidElement5(child)) {
+  Children7.toArray(children).forEach((child) => {
+    if (!isValidElement6(child)) {
       return;
     }
     if (child.type === StepsItem) {
@@ -4209,12 +4412,12 @@ function StepsRoot({
   variant = "solid",
   "aria-label": ariaLabel
 }) {
-  const baseId = useId5();
+  const baseId = useId7();
   const [internalStep] = useState14(defaultCurrentStep ?? 0);
   const resolvedCurrentStep = currentStep ?? internalStep;
-  const itemElements = useMemo6(() => collectStepsItems(children), [children]);
+  const itemElements = useMemo7(() => collectStepsItems(children), [children]);
   const stepsCount = itemElements.length;
-  const contextValue = useMemo6(
+  const contextValue = useMemo7(
     () => ({
       size,
       orientation,
@@ -4233,13 +4436,13 @@ function StepsRoot({
     const state = states[index] ?? { progress: "upcoming" };
     const isLast = index === stepsCount - 1;
     const id = `${baseId}-item-${index}`;
-    return /* @__PURE__ */ jsx60(StepsItemContext.Provider, { value: { index, state, isLast, id }, children: item }, item.key ?? `item-${index}`);
+    return /* @__PURE__ */ jsx64(StepsItemContext.Provider, { value: { index, state, isLast, id }, children: item }, item.key ?? `item-${index}`);
   };
   const renderedChildren = orientation === "horizontal" ? itemElements.flatMap((item, index) => {
     const nodes = [wrapItem(item, index)];
     if (index < stepsCount - 1) {
       nodes.push(
-        /* @__PURE__ */ jsx60(
+        /* @__PURE__ */ jsx64(
           HorizontalSeparatorCell,
           {
             progress: states[index]?.progress ?? "upcoming",
@@ -4252,7 +4455,7 @@ function StepsRoot({
     }
     return nodes;
   }) : itemElements.map((item, index) => wrapItem(item, index));
-  const listClassName = clsx43(
+  const listClassName = clsx44(
     orientation === "horizontal" ? ["grid w-full gap-x-2", textOrientation === "vertical" ? "items-start" : "items-center"] : "flex flex-col items-stretch"
   );
   const horizontalGridTemplate = Array.from(
@@ -4260,20 +4463,20 @@ function StepsRoot({
     (_unused, index) => index === stepsCount - 1 ? "max-content" : "max-content minmax(8px, 1fr)"
   ).join(" ");
   const listStyleProps = orientation === "horizontal" ? { style: { gridTemplateColumns: horizontalGridTemplate } } : {};
-  return /* @__PURE__ */ jsx60(StepsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx60("ol", { "aria-label": ariaLabel, className: listClassName, role: "list", ...listStyleProps, children: renderedChildren }) });
+  return /* @__PURE__ */ jsx64(StepsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx64("ol", { "aria-label": ariaLabel, className: listClassName, role: "list", ...listStyleProps, children: renderedChildren }) });
 }
 var Steps = StepsRoot;
 Steps.Item = StepsItem;
 
 // src/tab/tab.tsx
-import { clsx as clsx45 } from "clsx";
-import { Children as Children7 } from "react";
+import { clsx as clsx46 } from "clsx";
+import { Children as Children8 } from "react";
 
 // src/tab/tab-item.tsx
-import { clsx as clsx44 } from "clsx";
-import { jsx as jsx61, jsxs as jsxs30 } from "react/jsx-runtime";
+import { clsx as clsx45 } from "clsx";
+import { jsx as jsx65, jsxs as jsxs31 } from "react/jsx-runtime";
 var TabItem = ({ isSelected = false, isDisabled = false, icon, ...props }) => {
-  const classes = clsx44(
+  const classes = clsx45(
     "group relative z-0 flex items-center justify-center gap-1 py-2 leading-[24px] before:absolute before:inset-x-0 before:bottom-0 before:h-[2px] hover:text-interactive01 disabled:pointer-events-none disabled:text-disabled01",
     {
       "typography-label14regular text-interactive02": !isSelected,
@@ -4281,12 +4484,12 @@ var TabItem = ({ isSelected = false, isDisabled = false, icon, ...props }) => {
       "before:bg-interactive01 hover:before:bg-interactive01 pointer-events-none": isSelected
     }
   );
-  const iconWrapperClasses = clsx44("flex shrink-0 items-center", {
+  const iconWrapperClasses = clsx45("flex shrink-0 items-center", {
     "fill-disabled01": isDisabled,
     "fill-interactive01": !isDisabled && isSelected,
     "fill-icon01 group-hover:fill-interactive01": !isDisabled && !isSelected
   });
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(
     "button",
     {
       type: "button",
@@ -4296,7 +4499,7 @@ var TabItem = ({ isSelected = false, isDisabled = false, icon, ...props }) => {
       disabled: isDisabled,
       onClick: () => props.onClick(props.id),
       children: [
-        icon != null && /* @__PURE__ */ jsx61("span", { className: iconWrapperClasses, children: /* @__PURE__ */ jsx61(Icon, { name: icon, size: "small" }) }),
+        icon != null && /* @__PURE__ */ jsx65("span", { className: iconWrapperClasses, children: /* @__PURE__ */ jsx65(Icon, { name: icon, size: "small" }) }),
         props.children
       ]
     }
@@ -4304,39 +4507,39 @@ var TabItem = ({ isSelected = false, isDisabled = false, icon, ...props }) => {
 };
 
 // src/tab/tab.tsx
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
 function Tab({ children, layout = "auto" }) {
-  const childrenCount = Children7.count(children);
+  const childrenCount = Children8.count(children);
   const containerStyle = layout === "equal" ? { gridTemplateColumns: `repeat(${childrenCount}, minmax(0,1fr))` } : {};
-  const containerClasses = clsx45(
+  const containerClasses = clsx46(
     "relative gap-4 px-6 before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-uiBorder01",
     {
       flex: layout === "auto",
       grid: layout === "equal"
     }
   );
-  return /* @__PURE__ */ jsx62("div", { role: "tablist", className: containerClasses, style: containerStyle, children });
+  return /* @__PURE__ */ jsx66("div", { role: "tablist", className: containerClasses, style: containerStyle, children });
 }
 Tab.Item = TabItem;
 
 // src/table/table-cell.tsx
-import clsx46 from "clsx";
-import { jsx as jsx63 } from "react/jsx-runtime";
+import clsx47 from "clsx";
+import { jsx as jsx67 } from "react/jsx-runtime";
 function TableCell({ children, className, isHeader = false }) {
-  const classes = clsx46("border-b border-uiBorder01", { "sticky top-0 z-10 bg-white": isHeader }, className);
-  return /* @__PURE__ */ jsx63("div", { className: classes, children });
+  const classes = clsx47("border-b border-uiBorder01", { "sticky top-0 z-10 bg-white": isHeader }, className);
+  return /* @__PURE__ */ jsx67("div", { className: classes, children });
 }
 
 // src/table/table-row.tsx
-import clsx47 from "clsx";
-import { jsx as jsx64 } from "react/jsx-runtime";
+import clsx48 from "clsx";
+import { jsx as jsx68 } from "react/jsx-runtime";
 function TableRow({ children, isHoverBackgroundVisible = false }) {
-  const rowClasses = clsx47("contents", isHoverBackgroundVisible && "[&:hover>div]:bg-hoverUi02");
-  return /* @__PURE__ */ jsx64("div", { className: rowClasses, children });
+  const rowClasses = clsx48("contents", isHoverBackgroundVisible && "[&:hover>div]:bg-hoverUi02");
+  return /* @__PURE__ */ jsx68("div", { className: rowClasses, children });
 }
 
 // src/table/table.tsx
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx69 } from "react/jsx-runtime";
 function Table({
   width,
   templateRows,
@@ -4345,7 +4548,7 @@ function Table({
   autoRows,
   children
 }) {
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx69(
     "div",
     {
       className: "grid",
@@ -4365,22 +4568,22 @@ Table.Cell = TableCell;
 
 // src/tag/tag.tsx
 import { tagColors, tagLightColors } from "@zenkigen-inc/component-theme";
-import clsx49 from "clsx";
+import clsx50 from "clsx";
 
 // src/tag/delete-icon.tsx
-import { focusVisible as focusVisible18 } from "@zenkigen-inc/component-theme";
-import clsx48 from "clsx";
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { focusVisible as focusVisible19 } from "@zenkigen-inc/component-theme";
+import clsx49 from "clsx";
+import { jsx as jsx70 } from "react/jsx-runtime";
 var DeleteIcon = ({ color, variant, onClick }) => {
-  const deleteButtonClasses = clsx48(
+  const deleteButtonClasses = clsx49(
     "group ml-2 size-[14px] rounded-full p-0.5 hover:cursor-pointer hover:bg-iconOnColor focus-visible:bg-iconOnColor",
-    focusVisible18.normal
+    focusVisible19.normal
   );
-  const deletePathClasses = clsx48({
+  const deletePathClasses = clsx49({
     "fill-interactive02": color === "gray" || variant === "light",
     "group-hover:fill-interactive02 group-focus-visible:fill-interactive02 fill-iconOnColor": color !== "gray"
   });
-  return /* @__PURE__ */ jsx66("button", { type: "button", className: deleteButtonClasses, onClick, children: /* @__PURE__ */ jsx66("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx70("button", { type: "button", className: deleteButtonClasses, onClick, children: /* @__PURE__ */ jsx70("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx70(
     "path",
     {
       fillRule: "evenodd",
@@ -4392,9 +4595,9 @@ var DeleteIcon = ({ color, variant, onClick }) => {
 };
 
 // src/tag/tag.tsx
-import { jsx as jsx67, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs32 } from "react/jsx-runtime";
 function Tag({ id, children, color, variant = "normal", size = "medium", isEditable, onDelete }) {
-  const wrapperClasses = clsx49("flex", "items-center", "justify-center", {
+  const wrapperClasses = clsx50("flex", "items-center", "justify-center", {
     [tagColors[color]]: variant === "normal",
     [tagLightColors[color]]: variant === "light",
     "h-[14px] typography-label11regular": !isEditable && size === "x-small",
@@ -4405,21 +4608,21 @@ function Tag({ id, children, color, variant = "normal", size = "medium", isEdita
     "px-1": !isEditable,
     "px-2": isEditable
   });
-  return /* @__PURE__ */ jsxs31("div", { className: wrapperClasses, children: [
+  return /* @__PURE__ */ jsxs32("div", { className: wrapperClasses, children: [
     children,
-    isEditable ? /* @__PURE__ */ jsx67(DeleteIcon, { onClick: () => onDelete(id), color, variant }) : null
+    isEditable ? /* @__PURE__ */ jsx71(DeleteIcon, { onClick: () => onDelete(id), color, variant }) : null
   ] });
 }
 
 // src/text-area/text-area.tsx
-import { clsx as clsx52 } from "clsx";
-import { Children as Children8, cloneElement as cloneElement5, forwardRef as forwardRef15, isValidElement as isValidElement6, useId as useId6, useMemo as useMemo7 } from "react";
+import { clsx as clsx53 } from "clsx";
+import { Children as Children9, cloneElement as cloneElement6, forwardRef as forwardRef15, isValidElement as isValidElement7, useId as useId8, useMemo as useMemo8 } from "react";
 
 // src/text-area/text-area-context.tsx
-import { createContext as createContext15, useContext as useContext18 } from "react";
-var TextAreaCompoundContext = createContext15(null);
+import { createContext as createContext16, useContext as useContext19 } from "react";
+var TextAreaCompoundContext = createContext16(null);
 var useTextAreaCompoundContext = (componentName) => {
-  const context = useContext18(TextAreaCompoundContext);
+  const context = useContext19(TextAreaCompoundContext);
   if (context == null) {
     throw new Error(`${componentName} \u3092\u4F7F\u7528\u3059\u308B\u306B\u306F TextArea \u306E\u5B50\u8981\u7D20\u3068\u3057\u3066\u914D\u7F6E\u3059\u308B\u5FC5\u8981\u304C\u3042\u308B\u3002`);
   }
@@ -4427,9 +4630,9 @@ var useTextAreaCompoundContext = (componentName) => {
 };
 
 // src/text-area/text-area-error-message.tsx
-import { clsx as clsx50 } from "clsx";
+import { clsx as clsx51 } from "clsx";
 import { forwardRef as forwardRef13 } from "react";
-import { jsx as jsx68 } from "react/jsx-runtime";
+import { jsx as jsx72 } from "react/jsx-runtime";
 var TextAreaErrorMessage = forwardRef13(
   ({ "aria-live": ariaLive = "assertive", ...props }, ref) => {
     const { textAreaProps } = useTextAreaCompoundContext("TextArea.ErrorMessage");
@@ -4438,26 +4641,26 @@ var TextAreaErrorMessage = forwardRef13(
     if (!shouldRender) {
       return null;
     }
-    const errorMessageClassName = clsx50(typographyClass, "text-supportError");
-    return /* @__PURE__ */ jsx68("div", { ref, className: errorMessageClassName, "aria-live": ariaLive, ...props });
+    const errorMessageClassName = clsx51(typographyClass, "text-supportError");
+    return /* @__PURE__ */ jsx72("div", { ref, className: errorMessageClassName, "aria-live": ariaLive, ...props });
   }
 );
 TextAreaErrorMessage.displayName = "TextArea.ErrorMessage";
 
 // src/text-area/text-area-helper-message.tsx
-import { clsx as clsx51 } from "clsx";
+import { clsx as clsx52 } from "clsx";
 import { forwardRef as forwardRef14 } from "react";
-import { jsx as jsx69 } from "react/jsx-runtime";
+import { jsx as jsx73 } from "react/jsx-runtime";
 var TextAreaHelperMessage = forwardRef14((props, ref) => {
   const { textAreaProps } = useTextAreaCompoundContext("TextArea.HelperMessage");
   const typographyClass = textAreaProps.size === "large" ? "typography-label13regular" : "typography-label12regular";
-  const helperMessageClassName = clsx51(typographyClass, "text-text02");
-  return /* @__PURE__ */ jsx69("div", { ref, className: helperMessageClassName, ...props });
+  const helperMessageClassName = clsx52(typographyClass, "text-text02");
+  return /* @__PURE__ */ jsx73("div", { ref, className: helperMessageClassName, ...props });
 });
 TextAreaHelperMessage.displayName = "TextArea.HelperMessage";
 
 // src/text-area/text-area.tsx
-import { jsx as jsx70, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs33 } from "react/jsx-runtime";
 function TextAreaInner({
   size = "medium",
   variant = "outline",
@@ -4474,8 +4677,8 @@ function TextAreaInner({
   maxLength,
   ...props
 }, ref) {
-  const autoGeneratedId = useId6();
-  const textAreaPropsForContext = useMemo7(
+  const autoGeneratedId = useId8();
+  const textAreaPropsForContext = useMemo8(
     () => ({
       size,
       variant,
@@ -4483,7 +4686,7 @@ function TextAreaInner({
     }),
     [size, variant, isError]
   );
-  const contextValue = useMemo7(
+  const contextValue = useMemo8(
     () => ({
       textAreaProps: textAreaPropsForContext,
       forwardedRef: ref
@@ -4493,21 +4696,21 @@ function TextAreaInner({
   const helperMessageIds = [];
   const errorIds = [];
   const describedByBaseId = props.id ?? autoGeneratedId;
-  const enhancedChildren = Children8.map(children, (child) => {
-    if (!isValidElement6(child)) {
+  const enhancedChildren = Children9.map(children, (child) => {
+    if (!isValidElement7(child)) {
       return child;
     }
     if (child.type === TextAreaHelperMessage) {
       const helperChild = child;
       const assignedId = helperChild.props.id ?? `${describedByBaseId}-helper-${helperMessageIds.length + 1}`;
       helperMessageIds.push(assignedId);
-      return cloneElement5(helperChild, { id: assignedId });
+      return cloneElement6(helperChild, { id: assignedId });
     }
     if (child.type === TextAreaErrorMessage && isError) {
       const errorChild = child;
       const assignedId = errorChild.props.id ?? `${describedByBaseId}-error-${errorIds.length + 1}`;
       errorIds.push(assignedId);
-      return cloneElement5(errorChild, { id: assignedId });
+      return cloneElement6(errorChild, { id: assignedId });
     }
     return child;
   });
@@ -4534,7 +4737,7 @@ function TextAreaInner({
     ...maxLengthProps
   };
   const isBorderless = variant === "text";
-  const textAreaWrapperClassName = clsx52(
+  const textAreaWrapperClassName = clsx53(
     "box-border flex w-full overflow-hidden rounded border",
     {
       // outline variant
@@ -4550,7 +4753,7 @@ function TextAreaInner({
     // className は variant="outline" のみ受け入れ、後方互換のため wrapper の末尾に合成（@deprecated）
     !isBorderless && className
   );
-  const textAreaClassName = clsx52("w-full border-none bg-uiBackground01 outline-none", {
+  const textAreaClassName = clsx53("w-full border-none bg-uiBackground01 outline-none", {
     // outline: 従来の padding
     "typography-body14regular px-2 py-2": !isBorderless && size === "medium",
     "typography-body16regular px-3 py-2": !isBorderless && size === "large",
@@ -4569,7 +4772,7 @@ function TextAreaInner({
     "resize-none": !isResizable
   });
   const hasHeight = height != null && String(height).trim().length > 0;
-  const textAreaElement = /* @__PURE__ */ jsx70(
+  const textAreaElement = /* @__PURE__ */ jsx74(
     "div",
     {
       className: textAreaWrapperClassName,
@@ -4580,7 +4783,7 @@ function TextAreaInner({
         ...!autoHeight && hasHeight && !isResizable ? { height } : {},
         ...autoHeight && hasHeight ? { minHeight: height } : {}
       },
-      children: /* @__PURE__ */ jsx70(
+      children: /* @__PURE__ */ jsx74(
         "textarea",
         {
           ref,
@@ -4596,11 +4799,11 @@ function TextAreaInner({
       )
     }
   );
-  const counterElement = isCounterVisible ? /* @__PURE__ */ jsx70(
+  const counterElement = isCounterVisible ? /* @__PURE__ */ jsx74(
     "div",
     {
       id: counterId,
-      className: clsx52(
+      className: clsx53(
         "shrink-0",
         size === "large" ? "typography-label13regular" : "typography-label12regular",
         !disabled && isExceeded ? "text-supportError" : "text-text02"
@@ -4609,17 +4812,17 @@ function TextAreaInner({
       children: counterLimit != null ? `${currentLength}/${counterLimit}\u6587\u5B57` : `${currentLength}\u6587\u5B57`
     }
   ) : null;
-  const stackedChildren = enhancedChildren == null ? [] : Children8.toArray(enhancedChildren);
+  const stackedChildren = enhancedChildren == null ? [] : Children9.toArray(enhancedChildren);
   const hasMessageChildren = stackedChildren.length > 0;
   const hasBottomContent = hasMessageChildren || counterElement != null;
   if (!hasBottomContent) {
-    return /* @__PURE__ */ jsx70(TextAreaCompoundContext.Provider, { value: contextValue, children: textAreaElement });
+    return /* @__PURE__ */ jsx74(TextAreaCompoundContext.Provider, { value: contextValue, children: textAreaElement });
   }
-  return /* @__PURE__ */ jsx70(TextAreaCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs32("div", { className: "flex flex-col gap-2", children: [
+  return /* @__PURE__ */ jsx74(TextAreaCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs33("div", { className: "flex flex-col gap-2", children: [
     textAreaElement,
-    /* @__PURE__ */ jsxs32("div", { className: "flex items-start justify-between gap-2", children: [
-      hasMessageChildren && /* @__PURE__ */ jsx70("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: stackedChildren }),
-      !hasMessageChildren && counterElement != null && /* @__PURE__ */ jsx70("div", { className: "flex-1" }),
+    /* @__PURE__ */ jsxs33("div", { className: "flex items-start justify-between gap-2", children: [
+      hasMessageChildren && /* @__PURE__ */ jsx74("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: stackedChildren }),
+      !hasMessageChildren && counterElement != null && /* @__PURE__ */ jsx74("div", { className: "flex-1" }),
       counterElement
     ] })
   ] }) });
@@ -4635,10 +4838,242 @@ var TextAreaBase = forwardRef15(function TextAreaBase2(props, ref) {
 });
 var TextArea = attachStatics2(TextAreaBase);
 
+// src/time-picker/time-picker.tsx
+import { clsx as clsx55 } from "clsx";
+import { Children as Children10, cloneElement as cloneElement7, Fragment as Fragment8, isValidElement as isValidElement8, useId as useId9, useMemo as useMemo9 } from "react";
+
+// src/time-picker/time-picker-context.tsx
+import { createContext as createContext17, useContext as useContext20 } from "react";
+var TimePickerCompoundContext = createContext17(null);
+var useTimePickerCompoundContext = (componentName) => {
+  const context = useContext20(TimePickerCompoundContext);
+  if (context == null) {
+    throw new Error(`${componentName} \u3092\u4F7F\u7528\u3059\u308B\u306B\u306F TimePicker \u306E\u5B50\u8981\u7D20\u3068\u3057\u3066\u914D\u7F6E\u3059\u308B\u5FC5\u8981\u304C\u3042\u308B\u3002`);
+  }
+  return context;
+};
+
+// src/time-picker/time-picker-error-message.tsx
+import { clsx as clsx54 } from "clsx";
+import { forwardRef as forwardRef16 } from "react";
+import { jsx as jsx75 } from "react/jsx-runtime";
+var TimePickerErrorMessage = forwardRef16(
+  ({ "aria-live": ariaLive = "assertive", ...props }, ref) => {
+    const { size, isError } = useTimePickerCompoundContext("TimePicker.ErrorMessage");
+    const typographyClass = size === "large" ? "typography-label12regular" : "typography-label11regular";
+    if (isError !== true) {
+      return null;
+    }
+    const errorMessageClassName = clsx54(typographyClass, "text-supportError");
+    return /* @__PURE__ */ jsx75("div", { ref, className: errorMessageClassName, "aria-live": ariaLive, ...props });
+  }
+);
+TimePickerErrorMessage.displayName = "TimePicker.ErrorMessage";
+
+// src/time-picker/time-picker-utils.ts
+var MIN_HOUR = 0;
+var MAX_HOUR = 23;
+var MIN_MINUTE = 0;
+var MAX_MINUTE = 59;
+var MINUTES_PER_HOUR = 60;
+var padZero = (value) => String(value).padStart(2, "0");
+var toTotalMinutes = (hour, minute) => hour * MINUTES_PER_HOUR + minute;
+var createHourOption = (hour) => ({
+  id: `hour-${hour}`,
+  value: String(hour),
+  label: padZero(hour)
+});
+var createMinuteOption = (minute) => ({
+  id: `minute-${minute}`,
+  value: String(minute),
+  label: padZero(minute)
+});
+var parseTime = (time) => {
+  const match = /^(\d{1,2}):(\d{1,2})$/.exec(time);
+  if (match == null) {
+    return null;
+  }
+  const hour = Number(match[1]);
+  const minute = Number(match[2]);
+  if (Number.isNaN(hour) || Number.isNaN(minute)) {
+    return null;
+  }
+  if (hour < MIN_HOUR || hour > MAX_HOUR || minute < MIN_MINUTE || minute > MAX_MINUTE) {
+    return null;
+  }
+  return { hour, minute };
+};
+var formatTime = (value) => {
+  if (value.hour == null || value.minute == null) {
+    return null;
+  }
+  return `${padZero(value.hour)}:${padZero(value.minute)}`;
+};
+var isTimeInRange = (hour, minute, minTime, maxTime) => {
+  const total = toTotalMinutes(hour, minute);
+  const min = minTime != null ? parseTime(minTime) : null;
+  const max = maxTime != null ? parseTime(maxTime) : null;
+  if (min != null && total < toTotalMinutes(min.hour, min.minute)) {
+    return false;
+  }
+  if (max != null && total > toTotalMinutes(max.hour, max.minute)) {
+    return false;
+  }
+  return true;
+};
+var isMinuteAvailableForAnyHour = (minute, minTime, maxTime) => {
+  for (let hour = MIN_HOUR; hour <= MAX_HOUR; hour += 1) {
+    if (isTimeInRange(hour, minute, minTime, maxTime)) {
+      return true;
+    }
+  }
+  return false;
+};
+var generateMinuteOptions = (minuteStep, selectedHour, minTime, maxTime) => {
+  const min = minTime != null ? parseTime(minTime) : null;
+  const max = maxTime != null ? parseTime(maxTime) : null;
+  const shouldFilterByRange = min != null || max != null;
+  const options = [];
+  for (let minute = MIN_MINUTE; minute <= MAX_MINUTE; minute += minuteStep) {
+    if (shouldFilterByRange) {
+      const isAvailable = selectedHour != null ? isTimeInRange(selectedHour, minute, minTime, maxTime) : isMinuteAvailableForAnyHour(minute, minTime, maxTime);
+      if (!isAvailable) {
+        continue;
+      }
+    }
+    options.push(createMinuteOption(minute));
+  }
+  return options;
+};
+var generateHourOptions = (minuteStep, minTime, maxTime) => {
+  const options = [];
+  for (let hour = MIN_HOUR; hour <= MAX_HOUR; hour += 1) {
+    if (generateMinuteOptions(minuteStep, hour, minTime, maxTime).length === 0) {
+      continue;
+    }
+    options.push(createHourOption(hour));
+  }
+  return options;
+};
+
+// src/time-picker/time-picker.tsx
+import { jsx as jsx76, jsxs as jsxs34 } from "react/jsx-runtime";
+var SELECT_WIDTH_BY_SIZE = {
+  "x-small": 80,
+  small: 80,
+  medium: 80,
+  large: 88
+};
+var PLACEHOLDER = "--";
+var HOUR_ARIA_LABEL = "\u6642";
+var MINUTE_ARIA_LABEL = "\u5206";
+var createTriggerAriaLabel = (baseLabel, selectedOption) => selectedOption != null ? `${baseLabel} ${selectedOption.label}` : baseLabel;
+var OPTION_LIST_MAX_HEIGHT = "250px";
+var TimePicker = ({
+  value,
+  onChange,
+  size = "medium",
+  minuteStep = 1,
+  minTime,
+  maxTime,
+  isDisabled = false,
+  isError = false,
+  children
+}) => {
+  const autoGeneratedId = useId9();
+  const hourOptions = useMemo9(() => generateHourOptions(minuteStep, minTime, maxTime), [minuteStep, minTime, maxTime]);
+  const minuteOptions = useMemo9(
+    () => generateMinuteOptions(minuteStep, value.hour, minTime, maxTime),
+    [minuteStep, value.hour, minTime, maxTime]
+  );
+  const selectedHourOption = value.hour != null ? createHourOption(value.hour) : null;
+  const selectedMinuteOption = value.minute != null ? createMinuteOption(value.minute) : null;
+  const handleHourChange = (option) => {
+    const nextHour = option != null ? Number(option.value) : null;
+    const shouldResetMinute = nextHour != null && value.minute != null && !isTimeInRange(nextHour, value.minute, minTime, maxTime);
+    onChange({ hour: nextHour, minute: shouldResetMinute ? null : value.minute });
+  };
+  const handleMinuteChange = (option) => {
+    onChange({ hour: value.hour, minute: option != null ? Number(option.value) : null });
+  };
+  const errorIds = [];
+  const assignErrorIds = (nodes) => Children10.map(nodes, (child) => {
+    if (!isValidElement8(child)) {
+      return child;
+    }
+    if (child.type === Fragment8) {
+      const fragmentChild = child;
+      return cloneElement7(fragmentChild, {}, assignErrorIds(fragmentChild.props.children));
+    }
+    if (child.type === TimePickerErrorMessage && isError) {
+      const errorChild = child;
+      const assignedId = errorChild.props.id ?? `${autoGeneratedId}-error-${errorIds.length + 1}`;
+      errorIds.push(assignedId);
+      return cloneElement7(errorChild, { id: assignedId });
+    }
+    return child;
+  });
+  const enhancedChildren = assignErrorIds(children);
+  const sharedAriaProps = errorIds.length > 0 ? { "aria-describedby": errorIds.join(" ") } : {};
+  const separatorClasses = clsx55("text-text02", {
+    "typography-label12regular": size === "x-small",
+    "typography-label14regular": size === "small" || size === "medium",
+    "typography-label16regular": size === "large"
+  });
+  const selectWidth = SELECT_WIDTH_BY_SIZE[size];
+  const contextValue = useMemo9(() => ({ size, isError }), [size, isError]);
+  const timeInputs = /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx76(
+      Select,
+      {
+        size,
+        width: selectWidth,
+        placeholder: PLACEHOLDER,
+        selectedOption: selectedHourOption,
+        isDisabled,
+        isError,
+        optionListMaxHeight: OPTION_LIST_MAX_HEIGHT,
+        "aria-label": createTriggerAriaLabel(HOUR_ARIA_LABEL, selectedHourOption),
+        ...sharedAriaProps,
+        onChange: handleHourChange,
+        children: hourOptions.map((option) => /* @__PURE__ */ jsx76(Select.Option, { option }, option.id))
+      }
+    ),
+    /* @__PURE__ */ jsx76("span", { className: separatorClasses, children: ":" }),
+    /* @__PURE__ */ jsx76(
+      Select,
+      {
+        size,
+        width: selectWidth,
+        placeholder: PLACEHOLDER,
+        selectedOption: selectedMinuteOption,
+        isDisabled,
+        isError,
+        optionListMaxHeight: OPTION_LIST_MAX_HEIGHT,
+        "aria-label": createTriggerAriaLabel(MINUTE_ARIA_LABEL, selectedMinuteOption),
+        ...sharedAriaProps,
+        onChange: handleMinuteChange,
+        children: minuteOptions.map((option) => /* @__PURE__ */ jsx76(Select.Option, { option }, option.id))
+      }
+    )
+  ] });
+  const stackedChildren = enhancedChildren == null ? [] : Children10.toArray(enhancedChildren);
+  const hasMessageChildren = stackedChildren.length > 0;
+  if (!hasMessageChildren) {
+    return /* @__PURE__ */ jsx76(TimePickerCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx76("div", { className: "flex flex-col", children: timeInputs }) });
+  }
+  return /* @__PURE__ */ jsx76(TimePickerCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs34("div", { className: "flex flex-col gap-2", children: [
+    timeInputs,
+    stackedChildren
+  ] }) });
+};
+TimePicker.ErrorMessage = TimePickerErrorMessage;
+TimePicker.displayName = "TimePicker";
+
 // src/toast/toast.tsx
-import clsx53 from "clsx";
+import clsx56 from "clsx";
 import { useCallback as useCallback15, useEffect as useEffect12, useState as useState15 } from "react";
-import { jsx as jsx71, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs35 } from "react/jsx-runtime";
 var CLOSE_TIME_MSEC = 5e3;
 function Toast({
   state = "information",
@@ -4657,17 +5092,17 @@ function Toast({
     }
   }, [isAnimation, onClickClose]);
   const handleAnimationEnd = (e) => window.getComputedStyle(e.currentTarget).opacity === "0" && onClickClose();
-  const wrapperClasses = clsx53("pointer-events-auto flex items-start gap-1 bg-white p-4 shadow-floatingShadow", {
+  const wrapperClasses = clsx56("pointer-events-auto flex items-start gap-1 bg-white p-4 shadow-floatingShadow", {
     ["animate-toast-in"]: isAnimation && !isRemoving,
     ["animate-toast-out opacity-0"]: isAnimation && isRemoving
   });
-  const iconClasses = clsx53("flex items-center", {
+  const iconClasses = clsx56("flex items-center", {
     "fill-supportSuccess": state === "success",
     "fill-supportError": state === "error",
     "fill-supportWarning": state === "warning",
     "fill-supportInfo": state === "information"
   });
-  const textClasses = clsx53("typography-body13regular flex-1 pt-[3px]", {
+  const textClasses = clsx56("typography-body13regular flex-1 pt-[3px]", {
     "text-supportError": state === "error",
     "text-text01": state === "success" || state === "warning" || state === "information"
   });
@@ -4685,18 +5120,18 @@ function Toast({
     }, CLOSE_TIME_MSEC);
     return () => window.clearTimeout(timer);
   }, [isAutoClose]);
-  return /* @__PURE__ */ jsxs33("div", { className: wrapperClasses, style: { width }, onAnimationEnd: handleAnimationEnd, children: [
-    /* @__PURE__ */ jsx71("div", { className: iconClasses, children: /* @__PURE__ */ jsx71(Icon, { name: iconName[state] }) }),
-    /* @__PURE__ */ jsx71("p", { className: textClasses, children }),
-    /* @__PURE__ */ jsx71(IconButton, { icon: "close", size: "medium", variant: "text", onClick: handleClose, isNoPadding: true })
+  return /* @__PURE__ */ jsxs35("div", { className: wrapperClasses, style: { width }, onAnimationEnd: handleAnimationEnd, children: [
+    /* @__PURE__ */ jsx77("div", { className: iconClasses, children: /* @__PURE__ */ jsx77(Icon, { name: iconName[state] }) }),
+    /* @__PURE__ */ jsx77("p", { className: textClasses, children }),
+    /* @__PURE__ */ jsx77(IconButton, { icon: "close", size: "medium", variant: "text", onClick: handleClose, isNoPadding: true })
   ] });
 }
 
 // src/toast/toast-provider.tsx
-import { createContext as createContext16, useCallback as useCallback16, useContext as useContext19, useEffect as useEffect13, useState as useState16 } from "react";
+import { createContext as createContext18, useCallback as useCallback16, useContext as useContext21, useEffect as useEffect13, useState as useState16 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { jsx as jsx72, jsxs as jsxs34 } from "react/jsx-runtime";
-var ToastContext = createContext16({});
+import { jsx as jsx78, jsxs as jsxs36 } from "react/jsx-runtime";
+var ToastContext = createContext18({});
 var ToastProvider = ({ children }) => {
   const [isClientRender, setIsClientRender] = useState16(false);
   const [toasts, setToasts] = useState16([]);
@@ -4709,21 +5144,21 @@ var ToastProvider = ({ children }) => {
   useEffect13(() => {
     setIsClientRender(true);
   }, []);
-  return /* @__PURE__ */ jsxs34(ToastContext.Provider, { value: { addToast, removeToast }, children: [
+  return /* @__PURE__ */ jsxs36(ToastContext.Provider, { value: { addToast, removeToast }, children: [
     children,
     isClientRender && createPortal3(
-      /* @__PURE__ */ jsx72("div", { className: "pointer-events-none fixed bottom-0 left-0 z-toast mb-4 ml-4 flex w-full flex-col-reverse gap-[16px]", children: toasts.map(({ id, message, state }) => /* @__PURE__ */ jsx72(Toast, { state, isAutoClose: true, isAnimation: true, onClickClose: () => removeToast(id), width: 475, children: message }, id)) }),
+      /* @__PURE__ */ jsx78("div", { className: "pointer-events-none fixed bottom-0 left-0 z-toast mb-4 ml-4 flex w-full flex-col-reverse gap-[16px]", children: toasts.map(({ id, message, state }) => /* @__PURE__ */ jsx78(Toast, { state, isAutoClose: true, isAnimation: true, onClickClose: () => removeToast(id), width: 475, children: message }, id)) }),
       document.body
     )
   ] });
 };
 var useToast = () => {
-  return useContext19(ToastContext);
+  return useContext21(ToastContext);
 };
 
 // src/toggle/toggle.tsx
-import clsx54 from "clsx";
-import { jsx as jsx73, jsxs as jsxs35 } from "react/jsx-runtime";
+import clsx57 from "clsx";
+import { jsx as jsx79, jsxs as jsxs37 } from "react/jsx-runtime";
 function Toggle({
   id,
   size = "medium",
@@ -4733,7 +5168,7 @@ function Toggle({
   labelPosition = "right",
   isDisabled = false
 }) {
-  const baseClasses = clsx54("relative flex items-center rounded-full", {
+  const baseClasses = clsx57("relative flex items-center rounded-full", {
     "bg-disabledOn": isDisabled && isChecked,
     "bg-disabled01": isDisabled && !isChecked,
     "bg-interactive01 peer-hover:bg-hover01": !isDisabled && isChecked,
@@ -4741,16 +5176,16 @@ function Toggle({
     "w-8 h-4 px-[3px]": size === "small",
     "w-12 h-6 px-1": size === "medium" || size === "large"
   });
-  const inputClasses = clsx54(
+  const inputClasses = clsx57(
     "peer absolute inset-0 z-[1] opacity-0",
     isDisabled ? "cursor-not-allowed" : "cursor-pointer"
   );
-  const indicatorClasses = clsx54("rounded-full bg-iconOnColor", {
+  const indicatorClasses = clsx57("rounded-full bg-iconOnColor", {
     "w-2.5 h-2.5": size === "small",
     "w-4 h-4": size === "medium" || size === "large",
     "ml-auto": isChecked
   });
-  const labelClasses = clsx54("break-all", {
+  const labelClasses = clsx57("break-all", {
     "mr-2": labelPosition === "left",
     "ml-2": labelPosition === "right",
     "typography-label14regular": size === "small" || size === "medium",
@@ -4758,9 +5193,9 @@ function Toggle({
     "pointer-events-none cursor-not-allowed text-disabled01": isDisabled,
     "cursor-pointer text-text01": !isDisabled
   });
-  return /* @__PURE__ */ jsxs35("div", { className: "relative flex flex-[0_0_auto] items-center", children: [
-    label != null && labelPosition === "left" && /* @__PURE__ */ jsx73("label", { htmlFor: id, className: labelClasses, children: label }),
-    /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsxs37("div", { className: "relative flex flex-[0_0_auto] items-center", children: [
+    label != null && labelPosition === "left" && /* @__PURE__ */ jsx79("label", { htmlFor: id, className: labelClasses, children: label }),
+    /* @__PURE__ */ jsx79(
       "input",
       {
         className: inputClasses,
@@ -4772,8 +5207,8 @@ function Toggle({
         disabled: isDisabled
       }
     ),
-    /* @__PURE__ */ jsx73("div", { className: baseClasses, children: /* @__PURE__ */ jsx73("span", { className: indicatorClasses }) }),
-    label != null && labelPosition === "right" && /* @__PURE__ */ jsx73("label", { htmlFor: id, className: labelClasses, children: label })
+    /* @__PURE__ */ jsx79("div", { className: baseClasses, children: /* @__PURE__ */ jsx79("span", { className: indicatorClasses }) }),
+    label != null && labelPosition === "right" && /* @__PURE__ */ jsx79("label", { htmlFor: id, className: labelClasses, children: label })
   ] });
 }
 
@@ -4782,13 +5217,13 @@ import { useCallback as useCallback18, useEffect as useEffect14, useRef as useRe
 import { createPortal as createPortal4 } from "react-dom";
 
 // src/tooltip/tooltip-content.tsx
-import clsx56 from "clsx";
+import clsx59 from "clsx";
 
 // src/tooltip/tail-icon.tsx
-import clsx55 from "clsx";
-import { jsx as jsx74 } from "react/jsx-runtime";
+import clsx58 from "clsx";
+import { jsx as jsx80 } from "react/jsx-runtime";
 var TailIcon = (props) => {
-  const tailClasses = clsx55("absolute fill-uiBackgroundTooltip", {
+  const tailClasses = clsx58("absolute fill-uiBackgroundTooltip", {
     "rotate-180": props.verticalPosition === "bottom",
     "rotate-0": props.verticalPosition !== "bottom",
     "-top-1": props.verticalPosition === "bottom" && props.size === "small",
@@ -4803,9 +5238,9 @@ var TailIcon = (props) => {
     "left-1/2 -translate-x-2": props.horizontalAlign === "center" && props.size !== "small"
   });
   if (props.size === "small") {
-    return /* @__PURE__ */ jsx74("svg", { className: tailClasses, width: "8", height: "4", viewBox: "0 0 8 4", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx74("path", { d: "M4 4L0 0H8L4 4Z" }) });
+    return /* @__PURE__ */ jsx80("svg", { className: tailClasses, width: "8", height: "4", viewBox: "0 0 8 4", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx80("path", { d: "M4 4L0 0H8L4 4Z" }) });
   } else {
-    return /* @__PURE__ */ jsx74(
+    return /* @__PURE__ */ jsx80(
       "svg",
       {
         className: tailClasses,
@@ -4814,14 +5249,14 @@ var TailIcon = (props) => {
         viewBox: "0 0 14 8",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        children: /* @__PURE__ */ jsx74("path", { d: "M7 8L0 0H14L7 8Z" })
+        children: /* @__PURE__ */ jsx80("path", { d: "M7 8L0 0H14L7 8Z" })
       }
     );
   }
 };
 
 // src/tooltip/tooltip-content.tsx
-import { jsx as jsx75, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx81, jsxs as jsxs38 } from "react/jsx-runtime";
 var TooltipContent = ({
   content,
   horizontalAlign,
@@ -4831,7 +5266,7 @@ var TooltipContent = ({
   maxWidth,
   isPortal = false
 }) => {
-  const tooltipWrapperClasses = clsx56("absolute z-tooltip m-auto flex", {
+  const tooltipWrapperClasses = clsx59("absolute z-tooltip m-auto flex", {
     "top-0": !isPortal && verticalPosition === "top",
     "bottom-0": !isPortal && verticalPosition === "bottom",
     "justify-start": horizontalAlign === "left",
@@ -4840,7 +5275,7 @@ var TooltipContent = ({
     "w-[24px]": size === "small",
     "w-[46px]": size !== "small"
   });
-  const tooltipBodyClasses = clsx56(
+  const tooltipBodyClasses = clsx59(
     "absolute z-tooltip inline-block w-max rounded bg-uiBackgroundTooltip text-textOnColor",
     {
       "typography-body12regular": size === "small",
@@ -4857,7 +5292,7 @@ var TooltipContent = ({
     transform: `translate(${tooltipPosition.translateX}, ${tooltipPosition.translateY})`,
     ...tooltipPosition
   } : {};
-  return /* @__PURE__ */ jsx75("div", { className: tooltipWrapperClasses, style: tooltipWrapperStyle, children: /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsx81("div", { className: tooltipWrapperClasses, style: tooltipWrapperStyle, children: /* @__PURE__ */ jsxs38(
     "div",
     {
       className: tooltipBodyClasses,
@@ -4866,7 +5301,7 @@ var TooltipContent = ({
       },
       children: [
         content,
-        /* @__PURE__ */ jsx75(TailIcon, { size, verticalPosition, horizontalAlign })
+        /* @__PURE__ */ jsx81(TailIcon, { size, verticalPosition, horizontalAlign })
       ]
     }
   ) });
@@ -4927,7 +5362,7 @@ var useTooltip = () => {
 };
 
 // src/tooltip/tooltip.tsx
-import { jsx as jsx76, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs39 } from "react/jsx-runtime";
 function Tooltip({
   children,
   content,
@@ -4997,7 +5432,7 @@ function Tooltip({
       window.removeEventListener("resize", updatePosition);
     };
   }, [isVisible, calculatePosition, maxWidth, verticalPosition, horizontalAlign, size]);
-  return /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs39(
     "div",
     {
       ref: targetRef,
@@ -5006,7 +5441,7 @@ function Tooltip({
       onMouseLeave: handleMouseOutWrapper,
       children: [
         children,
-        isVisible && (portalTarget == null ? /* @__PURE__ */ jsx76(
+        isVisible && (portalTarget == null ? /* @__PURE__ */ jsx82(
           TooltipContent,
           {
             content,
@@ -5017,7 +5452,7 @@ function Tooltip({
             tooltipPosition
           }
         ) : createPortal4(
-          /* @__PURE__ */ jsx76(
+          /* @__PURE__ */ jsx82(
             TooltipContent,
             {
               isPortal: true,
@@ -5061,6 +5496,7 @@ export {
   PopoverTrigger,
   Popup,
   Radio,
+  RadioCard,
   Search,
   SegmentedControl,
   Select,
@@ -5075,10 +5511,13 @@ export {
   Tag,
   TextArea,
   TextInput,
+  TimePicker,
   Toast,
   ToastProvider,
   Toggle,
   Tooltip,
+  formatTime,
+  parseTime,
   useOutsideClick,
   useRovingFocus,
   useToast