@zenkigen-inc/component-ui 1.20.4 → 1.21.1

package/dist/index.mjs

@@ -2,6 +2,14 @@
 import { userColors } from "@zenkigen-inc/component-theme";
 import { clsx as clsx2 } from "clsx";
 
+// src/avatar-group/avatar-group-context.ts
+import { createContext, useContext } from "react";
+var AvatarGroupContext = createContext(null);
+function useAvatarGroupSize() {
+  const context = useContext(AvatarGroupContext);
+  return context?.size ?? null;
+}
+
 // src/icon/icon.tsx
 import { iconElements } from "@zenkigen-inc/component-icons";
 import { clsx } from "clsx";
@@ -34,7 +42,9 @@ import { jsx as jsx2 } from "react/jsx-runtime";
 var isAsciiString = (str) => {
   return str.charCodeAt(0) < 256;
 };
-function Avatar({ size = "medium", ...props }) {
+function Avatar({ size: sizeProp = "medium", ...props }) {
+  const groupSize = useAvatarGroupSize();
+  const size = groupSize ?? sizeProp;
   const classes = clsx2("flex items-center justify-center rounded-full text-textOnColor", {
     "w-16 h-16 typography-label16regular": size === "x-large",
     "w-12 h-12 typography-label14regular": size === "large",
@@ -62,23 +72,101 @@ function Avatar({ size = "medium", ...props }) {
   return /* @__PURE__ */ jsx2("span", { className: classes, children: nameOnIcon });
 }
 
+// src/avatar-group/avatar-group.tsx
+import { clsx as clsx3 } from "clsx";
+import { Children, isValidElement } from "react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var OVERLAP_CLASSES = {
+  "x-small": "-ml-1.5",
+  small: "-ml-2",
+  medium: "-ml-2.5",
+  large: "-ml-3",
+  "x-large": "-ml-4"
+};
+var BORDER_CLASSES = {
+  "x-small": "border border-white",
+  small: "border border-white",
+  medium: "border-2 border-white",
+  large: "border-2 border-white",
+  "x-large": "border-[3px] border-white"
+};
+var COUNTER_SIZE_CLASSES = {
+  "x-small": "h-6 w-6 typography-label11regular",
+  small: "h-8 w-8 typography-label11regular",
+  medium: "h-10 w-10 typography-label14regular",
+  large: "h-12 w-12 typography-label14regular",
+  "x-large": "h-16 w-16 typography-label16regular"
+};
+function DefaultSurplus({ remain, size }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: clsx3(
+        "flex items-center justify-center rounded-full bg-uiBackground02 text-text02",
+        COUNTER_SIZE_CLASSES[size]
+      ),
+      "aria-label": `\u6B8B\u308A${remain}\u4EBA`,
+      children: [
+        "+",
+        remain
+      ]
+    }
+  );
+}
+function AvatarGroup({
+  children,
+  size = "medium",
+  max: maxProp = 5,
+  total,
+  renderSurplus,
+  "aria-label": ariaLabel
+}) {
+  const max = Math.max(1, maxProp);
+  const avatarNodes = Children.toArray(children).filter(isValidElement);
+  const childrenCount = avatarNodes.length;
+  const displayedTotal = total ?? childrenCount;
+  const remain = Math.max(displayedTotal - max, 0);
+  const visibleAvatars = avatarNodes.slice(0, max);
+  const defaultBadge = remain > 0 ? /* @__PURE__ */ jsx3(DefaultSurplus, { remain, size }) : null;
+  const surplusNode = remain > 0 ? typeof renderSurplus === "function" ? renderSurplus({ remain, total: displayedTotal, defaultBadge }) : defaultBadge : null;
+  return /* @__PURE__ */ jsx3(AvatarGroupContext.Provider, { value: { size }, children: /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": ariaLabel, className: "flex items-center", children: [
+    visibleAvatars.map((child, index) => /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: clsx3("relative rounded-full", BORDER_CLASSES[size], index > 0 && OVERLAP_CLASSES[size]),
+        style: { zIndex: index + 1 },
+        children: child
+      },
+      index
+    )),
+    surplusNode != null && /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: clsx3("relative rounded-full", BORDER_CLASSES[size], OVERLAP_CLASSES[size]),
+        style: { zIndex: visibleAvatars.length + 1 },
+        children: surplusNode
+      }
+    )
+  ] }) });
+}
+
 // src/breadcrumb/breadcrumb-item.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var BreadcrumbItem = ({ children }) => {
-  return /* @__PURE__ */ jsx3("li", { className: "flex gap-2 after:content-['/'] last:after:content-none [&_a]:text-interactive02 [&_a]:hover:underline [&_a]:active:text-activeLink02 [&_a]:active:underline", children });
+  return /* @__PURE__ */ jsx4("li", { className: "flex gap-2 after:content-['/'] last:after:content-none [&_a]:text-interactive02 [&_a]:hover:underline [&_a]:active:text-activeLink02 [&_a]:active:underline", children });
 };
 
 // src/breadcrumb/breadcrumb.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function Breadcrumb({ children }) {
-  return /* @__PURE__ */ jsx4("nav", { "aria-label": "breadcrumb", children: /* @__PURE__ */ jsx4("ul", { className: "typography-label14regular flex flex-wrap gap-2 whitespace-nowrap text-text01", children }) });
+  return /* @__PURE__ */ jsx5("nav", { "aria-label": "breadcrumb", children: /* @__PURE__ */ jsx5("ul", { className: "typography-label14regular flex flex-wrap gap-2 whitespace-nowrap text-text01", children }) });
 }
 Breadcrumb.Item = BreadcrumbItem;
 
 // src/button/button.tsx
 import { buttonColors, focusVisible } from "@zenkigen-inc/component-theme";
-import { clsx as clsx3 } from "clsx";
-import { jsxs } from "react/jsx-runtime";
+import { clsx as clsx4 } from "clsx";
+import { jsxs as jsxs2 } from "react/jsx-runtime";
 var createButton = (props) => {
   const {
     size = "medium",
@@ -94,7 +182,7 @@ var createButton = (props) => {
     children,
     ...restProps
   } = props;
-  const baseClasses = clsx3(
+  const baseClasses = clsx4(
     "flex shrink-0 items-center gap-1",
     buttonColors[variant].hover,
     buttonColors[variant].active,
@@ -118,7 +206,7 @@ var createButton = (props) => {
     }
   );
   const Component = elementAs ?? "button";
-  return /* @__PURE__ */ jsxs(Component, { className: baseClasses, style: { width, borderRadius }, disabled: isDisabled, ...restProps, children: [
+  return /* @__PURE__ */ jsxs2(Component, { className: baseClasses, style: { width, borderRadius }, disabled: isDisabled, ...restProps, children: [
     before,
     children,
     after
@@ -133,23 +221,23 @@ var InternalButton = (props) => {
 
 // src/checkbox/checkbox.tsx
 import { focusVisible as focusVisible2 } from "@zenkigen-inc/component-theme";
-import clsx6 from "clsx";
+import clsx7 from "clsx";
 import { useCallback, useState } from "react";
 
 // src/checkbox/checked-icon.tsx
-import clsx4 from "clsx";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import clsx5 from "clsx";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var CheckedIcon = ({ size = "medium" }) => {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "svg",
     {
       viewBox: "0 0 20 20",
       xmlns: "http://www.w3.org/2000/svg",
-      className: clsx4("absolute z-10 rounded-sm fill-iconOnColor hover:rounded-sm", {
+      className: clsx5("absolute z-10 rounded-sm fill-iconOnColor hover:rounded-sm", {
         "size-5": size === "medium",
         "size-6": size === "large"
       }),
-      children: /* @__PURE__ */ jsx5(
+      children: /* @__PURE__ */ jsx6(
         "path",
         {
           fillRule: "evenodd",
@@ -162,25 +250,25 @@ var CheckedIcon = ({ size = "medium" }) => {
 };
 
 // src/checkbox/minus-icon.tsx
-import clsx5 from "clsx";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import clsx6 from "clsx";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var MinusIcon = ({ size = "medium" }) => {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "svg",
     {
       viewBox: "0 0 20 20",
       xmlns: "http://www.w3.org/2000/svg",
-      className: clsx5("absolute z-10 rounded-sm fill-iconOnColor hover:rounded-sm", {
+      className: clsx6("absolute z-10 rounded-sm fill-iconOnColor hover:rounded-sm", {
         "size-5": size === "medium",
         "size-6": size === "large"
       }),
-      children: /* @__PURE__ */ jsx6("path", { d: "M4.94723 10.5028H9.49726H10.5028H15.0528C15.3293 10.5028 15.5556 10.2766 15.5556 10C15.5556 9.72352 15.3293 9.49725 15.0528 9.49725H10.5028H9.49726H4.94723C4.67071 9.49725 4.44446 9.72352 4.44446 10C4.44446 10.2766 4.67071 10.5028 4.94723 10.5028Z" })
+      children: /* @__PURE__ */ jsx7("path", { d: "M4.94723 10.5028H9.49726H10.5028H15.0528C15.3293 10.5028 15.5556 10.2766 15.5556 10C15.5556 9.72352 15.3293 9.49725 15.0528 9.49725H10.5028H9.49726H4.94723C4.67071 9.49725 4.44446 9.72352 4.44446 10C4.44446 10.2766 4.67071 10.5028 4.94723 10.5028Z" })
     }
   );
 };
 
 // src/checkbox/checkbox.tsx
-import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 function Checkbox({
   name,
   value,
@@ -205,11 +293,11 @@ function Checkbox({
     [isDisabled, onChange]
   );
   const sizeBox = size === "large" ? "size-6" : "size-5";
-  const baseInputClasses = clsx6("peer absolute inset-0 z-[1] opacity-0", {
+  const baseInputClasses = clsx7("peer absolute inset-0 z-[1] opacity-0", {
     "cursor-not-allowed": isDisabled,
     "cursor-pointer": !isDisabled
   });
-  const boxClasses = clsx6(
+  const boxClasses = clsx7(
     "inline-flex items-center justify-center rounded-sm border bg-white",
     sizeBox,
     focusVisible2.normalPeer,
@@ -222,11 +310,11 @@ function Checkbox({
       "border-supportError": !isDisabled && !isMouseOver && color === "error"
     }
   );
-  const indicatorClasses = clsx6("relative flex flex-[0_0_auto] items-center justify-center", sizeBox, {
+  const indicatorClasses = clsx7("relative flex flex-[0_0_auto] items-center justify-center", sizeBox, {
     "bg-disabled01": isDisabled && isChecked,
     "border-disabled01": isDisabled
   });
-  const afterClasses = clsx6("absolute inset-0 m-auto block rounded-sm", {
+  const afterClasses = clsx7("absolute inset-0 m-auto block rounded-sm", {
     "bg-disabled01": isDisabled && isChecked,
     "bg-hover01": !(isDisabled && isChecked) && isMouseOver,
     "bg-interactive01": !(isDisabled && isChecked) && !isMouseOver,
@@ -237,24 +325,24 @@ function Checkbox({
     "scale-0": !isChecked,
     "scale-100": isChecked
   });
-  const hoverIndicatorClasses = clsx6("inline-block rounded-[1px]", {
+  const hoverIndicatorClasses = clsx7("inline-block rounded-[1px]", {
     "size-3": size === "medium",
     "size-4": size === "large",
     "bg-hoverUi": !isDisabled && !isChecked && isMouseOver
   });
-  const labelClasses = clsx6("ml-2 flex-[1_0_0] break-all", {
+  const labelClasses = clsx7("ml-2 flex-[1_0_0] break-all", {
     "typography-label14regular": size === "medium",
     "typography-label16regular": size === "large",
     "pointer-events-none cursor-not-allowed text-disabled01": isDisabled,
     "cursor-pointer text-text01": !isDisabled
   });
-  const outerWrapperClasses = clsx6("relative flex items-center justify-center", {
+  const outerWrapperClasses = clsx7("relative flex items-center justify-center", {
     "size-6": size === "medium",
     "h-8 w-7": size === "large"
   });
-  return /* @__PURE__ */ jsxs2("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ jsxs2("div", { className: outerWrapperClasses, children: [
-      /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs3("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ jsxs3("div", { className: outerWrapperClasses, children: [
+      /* @__PURE__ */ jsx8(
         "input",
         {
           type: "checkbox",
@@ -269,37 +357,111 @@ function Checkbox({
           className: baseInputClasses
         }
       ),
-      /* @__PURE__ */ jsx7("div", { className: boxClasses, children: /* @__PURE__ */ jsxs2("div", { className: indicatorClasses, children: [
-        /* @__PURE__ */ jsxs2("span", { className: afterClasses, children: [
-          isChecked && !isIndeterminate && /* @__PURE__ */ jsx7(CheckedIcon, { size }),
-          isIndeterminate && /* @__PURE__ */ jsx7(MinusIcon, { size })
+      /* @__PURE__ */ jsx8("div", { className: boxClasses, children: /* @__PURE__ */ jsxs3("div", { className: indicatorClasses, children: [
+        /* @__PURE__ */ jsxs3("span", { className: afterClasses, children: [
+          isChecked && !isIndeterminate && /* @__PURE__ */ jsx8(CheckedIcon, { size }),
+          isIndeterminate && /* @__PURE__ */ jsx8(MinusIcon, { size })
         ] }),
-        /* @__PURE__ */ jsx7("span", { className: hoverIndicatorClasses })
+        /* @__PURE__ */ jsx8("span", { className: hoverIndicatorClasses })
       ] }) })
     ] }),
-    label != null && /* @__PURE__ */ jsx7("label", { htmlFor: id, className: labelClasses, children: label })
+    label != null && /* @__PURE__ */ jsx8("label", { htmlFor: id, className: labelClasses, children: label })
   ] });
 }
 
-// src/date-picker/date-picker.tsx
-import "react-day-picker/style.css";
-import {
-  Children,
-  cloneElement as cloneElement3,
-  isValidElement,
-  useCallback as useCallback3,
-  useEffect as useEffect4,
-  useId,
-  useMemo as useMemo2,
-  useRef as useRef4,
-  useState as useState2
-} from "react";
-import { DayPicker } from "react-day-picker";
+// src/combobox/combobox.tsx
+import { autoUpdate, flip, offset, size as sizeMiddleware, useFloating } from "@floating-ui/react";
+import { useCallback as useCallback5, useEffect as useEffect5, useMemo as useMemo3, useRef as useRef4, useState as useState3 } from "react";
+
+// src/hooks/use-outside-click.ts
+import { useEffect } from "react";
+var useOutsideClick = (ref, handler, enabled = true) => {
+  useEffect(() => {
+    const listener = (event) => {
+      const element = ref?.current;
+      if (element == null) {
+        return;
+      }
+      const target = event.target;
+      if (target instanceof Node && Boolean(element.contains(target))) {
+        return;
+      }
+      const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+      const isInsideViaPath = path.some((node) => node instanceof Node && Boolean(element.contains(node)));
+      if (isInsideViaPath) {
+        return;
+      }
+      handler(event);
+    };
+    if (enabled) {
+      document.addEventListener("click", listener);
+    }
+    return () => document.removeEventListener("click", listener);
+  }, [ref, enabled, handler]);
+};
+
+// src/text-input/text-input-error-message.tsx
+import { clsx as clsx8 } from "clsx";
+import { forwardRef } from "react";
+
+// src/text-input/text-input-context.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var TextInputCompoundContext = createContext2(null);
+var useTextInputCompoundContext = (componentName) => {
+  const context = useContext2(TextInputCompoundContext);
+  if (context == null) {
+    throw new Error(`${componentName} \u3092\u4F7F\u7528\u3059\u308B\u306B\u306F TextInput \u306E\u5B50\u8981\u7D20\u3068\u3057\u3066\u914D\u7F6E\u3059\u308B\u5FC5\u8981\u304C\u3042\u308B\u3002`);
+  }
+  return context;
+};
+
+// src/text-input/text-input-error-message.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var TextInputErrorMessage = forwardRef(
+  ({ "aria-live": ariaLive = "assertive", ...props }, ref) => {
+    const { inputProps } = useTextInputCompoundContext("TextInput.ErrorMessage");
+    const typographyClass = inputProps.size === "large" || inputProps.size === "x-large" ? "typography-label13regular" : "typography-label12regular";
+    const shouldRender = inputProps.isError === true;
+    if (!shouldRender) {
+      return null;
+    }
+    const errorMessageClassName = clsx8(typographyClass, "text-supportError");
+    return /* @__PURE__ */ jsx9("div", { ref, className: errorMessageClassName, "aria-live": ariaLive, ...props });
+  }
+);
+TextInputErrorMessage.displayName = "TextInput.ErrorMessage";
+
+// src/text-input/text-input-helper-message.tsx
+import { clsx as clsx9 } from "clsx";
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var TextInputHelperMessage = forwardRef2((props, ref) => {
+  const { inputProps } = useTextInputCompoundContext("TextInput.HelperMessage");
+  const typographyClass = inputProps.size === "large" || inputProps.size === "x-large" ? "typography-label13regular" : "typography-label12regular";
+  const helperMessageClassName = clsx9(typographyClass, "text-text02");
+  return /* @__PURE__ */ jsx10("div", { ref, className: helperMessageClassName, ...props });
+});
+TextInputHelperMessage.displayName = "TextInput.HelperMessage";
+
+// src/combobox/combobox-context.ts
+import { createContext as createContext3, useContext as useContext3 } from "react";
+var ComboboxContext = createContext3(null);
+var ComboboxContextProvider = ComboboxContext.Provider;
+function useComboboxContext(componentName) {
+  const ctx = useContext3(ComboboxContext);
+  if (ctx === null) {
+    throw new Error(`<${componentName}> must be used inside <Combobox>`);
+  }
+  return ctx;
+}
+
+// src/combobox/combobox-input.tsx
+import { useCallback as useCallback2 } from "react";
 
 // src/icon-button/icon-button.tsx
 import { buttonColors as buttonColors2, focusVisible as focusVisible3 } from "@zenkigen-inc/component-theme";
-import { clsx as clsx7 } from "clsx";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { clsx as clsx10 } from "clsx";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function IconButton({
   icon,
   size = "medium",
@@ -311,7 +473,7 @@ function IconButton({
   iconAccentColor,
   ...props
 }) {
-  const baseClasses = clsx7(
+  const baseClasses = clsx10(
     "typography-label16regular flex items-center justify-center gap-1 rounded",
     buttonColors2[variant].hover,
     buttonColors2[variant].active,
@@ -333,61 +495,1060 @@ function IconButton({
   const iconAccentColorProps = !isSelected && iconAccentColor ? { accentColor: iconAccentColor } : {};
   if (props.isAnchor === true) {
     const buttonProps = Object.fromEntries(Object.entries(props).filter(([key]) => key !== "isAnchor"));
-    return /* @__PURE__ */ jsx8("a", { className: baseClasses, ...buttonProps, children: /* @__PURE__ */ jsx8(Icon, { name: icon, size: iconSize, ...iconColorProps, ...iconAccentColorProps }) });
+    return /* @__PURE__ */ jsx11("a", { className: baseClasses, ...buttonProps, children: /* @__PURE__ */ jsx11(Icon, { name: icon, size: iconSize, ...iconColorProps, ...iconAccentColorProps }) });
   } else {
     const buttonProps = Object.fromEntries(Object.entries(props).filter(([key]) => key !== "isAnchor"));
-    return /* @__PURE__ */ jsx8("button", { type: "button", className: baseClasses, disabled: isDisabled, ...buttonProps, children: /* @__PURE__ */ jsx8(Icon, { name: icon, size: iconSize, ...iconColorProps, ...iconAccentColorProps }) });
+    return /* @__PURE__ */ jsx11("button", { type: "button", className: baseClasses, disabled: isDisabled, ...buttonProps, children: /* @__PURE__ */ jsx11(Icon, { name: icon, size: iconSize, ...iconColorProps, ...iconAccentColorProps }) });
   }
 }
 
-// src/popover/popover.tsx
-import { autoUpdate, offset, useFloating, useId as useFloatingId } from "@floating-ui/react";
-import { useEffect as useEffect3, useMemo, useRef as useRef3 } from "react";
-
-// src/popover/popover-content.tsx
-import { FloatingPortal, useDismiss, useInteractions, useRole } from "@floating-ui/react";
-import * as React from "react";
-import { forwardRef, useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2 } from "react";
-
-// src/hooks/use-dismiss-on-modal-open.ts
-import { useEffect, useRef } from "react";
-var MODAL_OPEN_EVENT = "zenkigen-modal-open";
-var useDismissOnModalOpen = (dismiss) => {
-  const dismissRef = useRef(dismiss);
-  dismissRef.current = dismiss;
-  useEffect(() => {
-    const handler = () => {
-      dismissRef.current();
-    };
-    window.addEventListener(MODAL_OPEN_EVENT, handler);
-    return () => window.removeEventListener(MODAL_OPEN_EVENT, handler);
-  }, []);
-};
-
-// src/utils/react-utils.ts
-function composeRefs(...refs) {
-  return (node) => {
-    for (const ref of refs) {
-      if (ref == null) {
-        continue;
-      }
-      if (typeof ref === "function") {
-        ref(node);
-      } else {
-        ref.current = node;
-      }
+// src/text-input/text-input.tsx
+import { clsx as clsx11 } from "clsx";
+import { Children as Children2, cloneElement, forwardRef as forwardRef3, isValidElement as isValidElement2, useId, useMemo } from "react";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+function TextInputInner({
+  size = "medium",
+  variant = "outline",
+  isError = false,
+  disabled = false,
+  onClickClearButton,
+  after,
+  children,
+  ...props
+}, ref) {
+  const autoGeneratedId = useId();
+  const { className: _className, ...restInputProps } = props;
+  const inputPropsForContext = useMemo(
+    () => ({
+      ...restInputProps,
+      size,
+      isError,
+      disabled,
+      onClickClearButton,
+      after
+    }),
+    [restInputProps, size, isError, disabled, onClickClearButton, after]
+  );
+  const contextValue = useMemo(
+    () => ({
+      inputProps: inputPropsForContext,
+      forwardedRef: ref
+    }),
+    [inputPropsForContext, ref]
+  );
+  const helperMessageIds = [];
+  const errorIds = [];
+  const describedByBaseId = restInputProps.id ?? autoGeneratedId;
+  const enhancedChildren = Children2.map(children, (child) => {
+    if (!isValidElement2(child)) {
+      return child;
+    }
+    if (child.type === TextInputHelperMessage) {
+      const helperChild = child;
+      const assignedId = helperChild.props.id ?? `${describedByBaseId}-helper-${helperMessageIds.length + 1}`;
+      helperMessageIds.push(assignedId);
+      return cloneElement(helperChild, { id: assignedId });
     }
+    if (child.type === TextInputErrorMessage && isError) {
+      const errorChild = child;
+      const assignedId = errorChild.props.id ?? `${describedByBaseId}-error-${errorIds.length + 1}`;
+      errorIds.push(assignedId);
+      return cloneElement(errorChild, { id: assignedId });
+    }
+    return child;
+  });
+  const describedByFromProps = typeof restInputProps["aria-describedby"] === "string" ? restInputProps["aria-describedby"] : null;
+  const describedByList = [describedByFromProps, ...helperMessageIds, ...errorIds].filter(
+    (id) => typeof id === "string" && id.trim().length > 0
+  );
+  const describedByProps = describedByList.length > 0 ? {
+    "aria-describedby": describedByList.join(" ")
+  } : {};
+  const shouldMarkInvalid = isError === true || errorIds.length > 0;
+  const ariaInvalidFromProps = restInputProps["aria-invalid"];
+  const ariaInvalidValue = ariaInvalidFromProps != null ? ariaInvalidFromProps : shouldMarkInvalid ? true : null;
+  const ariaInvalidProps = ariaInvalidValue == null ? {} : { "aria-invalid": ariaInvalidValue };
+  const mergedInputProps = {
+    ...restInputProps,
+    ...describedByProps,
+    ...ariaInvalidProps,
+    disabled
   };
+  const isShowClearButton = !!onClickClearButton && restInputProps.value.length !== 0 && !disabled;
+  const hasTrailingElement = isShowClearButton || after != null;
+  const isBorderless = variant === "text";
+  const inputWrapClasses = clsx11("relative flex items-center gap-2 overflow-hidden rounded border", {
+    // outline variant
+    "border-uiBorder02": !isBorderless && !isError && !disabled,
+    "border-supportError": !isBorderless && isError && !disabled,
+    "hover:border-hoverInput": !isBorderless && !disabled && !isError,
+    "hover:focus-within:border-activeInput": !isBorderless && !isError,
+    "focus-within:border-activeInput": !isBorderless && !isError,
+    "bg-disabled02 border-disabled01": !isBorderless && disabled,
+    // text variant
+    "border-transparent": isBorderless,
+    // 共通
+    "bg-uiBackground01": !disabled || isBorderless,
+    "pr-2": !isBorderless && size === "medium" && hasTrailingElement,
+    "pr-3": !isBorderless && (size === "large" || size === "x-large") && hasTrailingElement
+  });
+  const inputClasses = clsx11("flex-1 bg-transparent outline-none", {
+    "disabled:text-textPlaceholder": !isBorderless,
+    "disabled:text-disabled01": isBorderless,
+    // outline: 従来の padding
+    "typography-label14regular min-h-8 px-2": !isBorderless && size === "medium",
+    "typography-label16regular min-h-10 px-3": !isBorderless && size === "large",
+    "typography-label16regular min-h-12 px-3": !isBorderless && size === "x-large",
+    // text: padding なし
+    "typography-label14regular min-h-8": isBorderless && size === "medium",
+    "typography-label16regular min-h-10": isBorderless && size === "large",
+    "typography-label16regular min-h-12": isBorderless && size === "x-large",
+    // テキスト色
+    "text-text01": !isError,
+    "text-supportError": isError,
+    // placeholder 色（text variant エラー時のみ上書き）
+    "placeholder:text-textPlaceholder": !(isBorderless && isError && !disabled),
+    "placeholder:text-supportErrorLight": isBorderless && isError && !disabled,
+    "pr-0": hasTrailingElement
+  });
+  const inputElement = /* @__PURE__ */ jsxs4("div", { className: inputWrapClasses, children: [
+    /* @__PURE__ */ jsx12("input", { ref, size: 1, className: inputClasses, ...mergedInputProps }),
+    after,
+    isShowClearButton && /* @__PURE__ */ jsx12(IconButton, { variant: "text", icon: "close", size: "small", onClick: onClickClearButton })
+  ] });
+  const stackedChildren = enhancedChildren == null ? [] : Children2.toArray(enhancedChildren);
+  const hasMessageChildren = stackedChildren.length > 0;
+  if (!hasMessageChildren) {
+    return /* @__PURE__ */ jsx12(TextInputCompoundContext.Provider, { value: contextValue, children: inputElement });
+  }
+  return /* @__PURE__ */ jsx12(TextInputCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2", children: [
+    inputElement,
+    stackedChildren
+  ] }) });
 }
-function isElement(node) {
-  return node != null && typeof node === "object" && "type" in node;
-}
-
-// src/popover/popover-context.ts
-import { createContext, useContext } from "react";
-var PopoverContext = createContext(null);
+var attachStatics = (component) => {
+  component.HelperMessage = TextInputHelperMessage;
+  component.ErrorMessage = TextInputErrorMessage;
+  component.displayName = "TextInput";
+  return component;
+};
+var TextInputPublic = forwardRef3(function TextInputPublic2(props, ref) {
+  return TextInputInner(props, ref);
+});
+var InternalTextInputBase = forwardRef3(
+  function InternalTextInputBase2(props, ref) {
+    return TextInputInner(props, ref);
+  }
+);
+var TextInput = attachStatics(TextInputPublic);
+var InternalTextInput = attachStatics(InternalTextInputBase);
+
+// src/combobox/combobox-input.tsx
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+function ComboboxInput({ autoFocus, children }) {
+  const {
+    baseId,
+    listId,
+    size,
+    variant,
+    isError,
+    isDisabled,
+    placeholder,
+    inputValue,
+    onInputChange,
+    isOpen,
+    setIsOpen,
+    activeIndex,
+    items,
+    hasOpenableContent: hasOpenableContent2,
+    inputRef,
+    setInputElementRef,
+    handleKeyDown,
+    handleInputBlur,
+    onClickClearButton
+  } = useComboboxContext("Combobox.Input");
+  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;
+  const conditionalAriaProps = {
+    ...isEffectivelyOpen ? { "aria-controls": listId } : {},
+    ...activeId !== null ? { "aria-activedescendant": activeId } : {}
+  };
+  const preventBlur = useCallback2((event) => {
+    event.preventDefault();
+  }, []);
+  const handleFocus = useCallback2(() => {
+    setIsOpen(true);
+  }, [setIsOpen]);
+  const handleToggle = useCallback2(() => {
+    setIsOpen(!isOpen);
+    inputRef.current?.focus();
+  }, [isOpen, setIsOpen, inputRef]);
+  const handleClear = useCallback2(() => {
+    onClickClearButton?.();
+  }, [onClickClearButton]);
+  const setRef = useCallback2(
+    (node) => {
+      setInputElementRef(node);
+    },
+    [setInputElementRef]
+  );
+  const handleChange = useCallback2(
+    (event) => {
+      onInputChange(event.target.value);
+      if (!isOpen) {
+        setIsOpen(true);
+      }
+    },
+    [onInputChange, isOpen, setIsOpen]
+  );
+  return /* @__PURE__ */ jsx13(
+    InternalTextInput,
+    {
+      ref: setRef,
+      size,
+      variant,
+      value: inputValue,
+      onChange: handleChange,
+      onFocus: handleFocus,
+      onKeyDown: handleKeyDown,
+      onBlur: handleInputBlur,
+      isError,
+      disabled: isDisabled,
+      placeholder,
+      role: "combobox",
+      "aria-expanded": isEffectivelyOpen,
+      "aria-autocomplete": "list",
+      ...conditionalAriaProps,
+      autoFocus,
+      autoComplete: "off",
+      after: /* @__PURE__ */ jsxs5(Fragment2, { children: [
+        isClearButtonVisible && /* @__PURE__ */ jsx13(
+          IconButton,
+          {
+            variant: "text",
+            icon: "close",
+            size: "small",
+            onClick: handleClear,
+            onMouseDown: preventBlur,
+            "aria-label": "\u5165\u529B\u3092\u30AF\u30EA\u30A2",
+            tabIndex: -1
+          }
+        ),
+        /* @__PURE__ */ jsx13(
+          IconButton,
+          {
+            variant: "text",
+            icon: isOpen ? "angle-up" : "angle-down",
+            size: "small",
+            onClick: handleToggle,
+            onMouseDown: preventBlur,
+            "aria-label": isOpen ? "\u5019\u88DC\u3092\u9589\u3058\u308B" : "\u5019\u88DC\u3092\u8868\u793A",
+            tabIndex: -1,
+            isDisabled: isDisabled || !hasOpenableContent2
+          }
+        )
+      ] }),
+      children
+    }
+  );
+}
+
+// src/combobox/combobox-item.tsx
+import { useEffect as useEffect2, useRef } from "react";
+
+// src/list/list-option-item.tsx
+import { focusVisible as focusVisible4 } from "@zenkigen-inc/component-theme";
+import clsx12 from "clsx";
+import { forwardRef as forwardRef4 } from "react";
+
+// src/list/list-context.ts
+import { createContext as createContext4, useContext as useContext4 } from "react";
+var ListContext = createContext4(null);
+var ListContextProvider = ListContext.Provider;
+function useListContext(componentName) {
+  const ctx = useContext4(ListContext);
+  if (ctx === null) {
+    throw new Error(`<${componentName}> must be used inside <List>`);
+  }
+  return ctx;
+}
+
+// src/list/list-option-item.tsx
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+var ListOptionItem = forwardRef4(function ListOptionItem2({
+  children,
+  id,
+  isActive = false,
+  isSelected = false,
+  isDisabled = false,
+  isError = false,
+  onClick,
+  onMouseEnter,
+  "aria-selected": ariaSelected,
+  "aria-disabled": ariaDisabled
+}, ref) {
+  const { size, selectionIndicator } = useListContext("List.OptionItem");
+  const classes = clsx12(
+    "flex w-full items-center gap-1 border-l-2 border-solid border-l-transparent pl-2.5 pr-3",
+    focusVisible4.inset,
+    {
+      // sizes
+      "h-8 typography-label14regular": size === "medium",
+      "h-10 typography-label16regular": size === "large",
+      // disabled (最優先)
+      "cursor-not-allowed bg-uiBackground01 text-disabled01 fill-disabled01": isDisabled,
+      // selected + error
+      "cursor-pointer bg-uiBackgroundError text-supportError fill-supportError": !isDisabled && isSelected && isError,
+      // selected (default)
+      "cursor-pointer bg-selectedUi text-interactive01 fill-interactive01": !isDisabled && isSelected && !isError,
+      // active only (not selected): bg-hover02
+      "cursor-pointer bg-hover02 text-interactive02 fill-icon01": !isDisabled && !isSelected && isActive,
+      // base + hover
+      "cursor-pointer bg-uiBackground01 text-interactive02 fill-icon01 hover:bg-hover02 active:bg-active02": !isDisabled && !isSelected && !isActive,
+      // active accent border（selected と同時成立可）
+      "border-l-interactive03": !isDisabled && isActive
+    }
+  );
+  const handleMouseDown = (event) => {
+    event.preventDefault();
+  };
+  const handleClick = (event) => {
+    if (isDisabled) {
+      return;
+    }
+    onClick?.(event);
+  };
+  const handleMouseEnter = () => {
+    if (isDisabled) {
+      return;
+    }
+    onMouseEnter?.();
+  };
+  const indicator = selectionIndicator === "none" ? null : /* @__PURE__ */ jsx14(
+    "span",
+    {
+      className: clsx12("flex size-4 shrink-0 items-center justify-center", {
+        "ml-auto": selectionIndicator === "right"
+      }),
+      "aria-hidden": "true",
+      "data-selection-indicator": true,
+      children: isSelected && !isDisabled && /* @__PURE__ */ jsx14(Icon, { name: "check", size: "small" })
+    }
+  );
+  const isPrimitiveChildren = typeof children === "string" || typeof children === "number";
+  const renderedChildren = isPrimitiveChildren ? /* @__PURE__ */ jsx14("span", { className: "min-w-0 flex-1 truncate", children }) : children;
+  return /* @__PURE__ */ jsxs6(
+    "li",
+    {
+      ref,
+      id,
+      role: "option",
+      "aria-selected": ariaSelected ?? isSelected,
+      "aria-disabled": ariaDisabled ?? isDisabled,
+      onMouseDown: handleMouseDown,
+      onClick: handleClick,
+      onMouseEnter: handleMouseEnter,
+      className: classes,
+      children: [
+        selectionIndicator === "left" && indicator,
+        renderedChildren,
+        selectionIndicator === "right" && indicator
+      ]
+    }
+  );
+});
+
+// src/combobox/combobox-item.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+function ComboboxItem({ value, label, isDisabled = false }) {
+  const { baseId, items, activeIndex, selectedValue, selectValue, setActiveIndex, inputMode, setInputMode } = useComboboxContext("Combobox.Item");
+  const index = items.findIndex((item) => item.value === value);
+  const isActive = index !== -1 && activeIndex === index;
+  const isSelected = selectedValue === value;
+  const id = `${baseId}-option-${value}`;
+  const liRef = useRef(null);
+  useEffect2(() => {
+    if (!isActive) {
+      return;
+    }
+    if (inputMode === "mouse") {
+      return;
+    }
+    liRef.current?.scrollIntoView({ block: "nearest" });
+  }, [isActive, inputMode]);
+  const handleClick = () => {
+    if (isDisabled) {
+      return;
+    }
+    selectValue(value, label);
+  };
+  const handleMouseEnter = () => {
+    if (isDisabled) {
+      return;
+    }
+    setInputMode("mouse");
+    if (index !== -1) {
+      setActiveIndex(index);
+    }
+  };
+  return /* @__PURE__ */ jsx15(
+    ListOptionItem,
+    {
+      ref: liRef,
+      id,
+      isActive,
+      isSelected,
+      isDisabled,
+      "aria-selected": isSelected,
+      onClick: handleClick,
+      onMouseEnter: handleMouseEnter,
+      children: /* @__PURE__ */ jsx15("span", { className: "min-w-0 flex-1 truncate", children: label })
+    }
+  );
+}
+
+// src/combobox/combobox-list.tsx
+import { FloatingPortal } from "@floating-ui/react";
+import { Children as Children3, isValidElement as isValidElement3, useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2 } from "react";
+
+// src/list/list.tsx
+import clsx13 from "clsx";
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var ListBase = forwardRef5(function List({
+  children,
+  size = "medium",
+  variant = "outline",
+  maxHeight,
+  width,
+  style,
+  className,
+  role = "listbox",
+  id,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  containerRef,
+  selectionIndicator = "none"
+}, ref) {
+  const wrapperClasses = clsx13(
+    "flex flex-col overflow-hidden rounded bg-uiBackground01 shadow-floatingShadow",
+    {
+      "border border-solid border-uiBorder01": variant === "outline"
+    },
+    className
+  );
+  return /* @__PURE__ */ jsx16(ListContextProvider, { value: { size, variant, selectionIndicator }, children: /* @__PURE__ */ jsx16("div", { ref: containerRef, style: { maxHeight, width, ...style }, className: wrapperClasses, children: /* @__PURE__ */ jsx16(
+    "ul",
+    {
+      ref,
+      role,
+      id,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      className: "min-h-0 flex-1 overflow-y-auto py-2",
+      children
+    }
+  ) }) });
+});
+var List2 = Object.assign(ListBase, {
+  OptionItem: ListOptionItem,
+  displayName: "List"
+});
+
+// src/combobox/combobox-status.tsx
+import clsx14 from "clsx";
+import { jsx as jsx17 } from "react/jsx-runtime";
+function StatusItem({ children, componentName }) {
+  const { size } = useComboboxContext(componentName);
+  const liClasses = clsx14("flex w-full items-center px-3 text-text02", {
+    "h-8": size === "medium",
+    "h-10": size === "large"
+  });
+  const textClasses = clsx14("min-w-0 flex-1 truncate text-center", {
+    "typography-label14regular": size === "medium",
+    "typography-label16regular": size === "large"
+  });
+  return /* @__PURE__ */ jsx17("li", { role: "presentation", className: liClasses, children: /* @__PURE__ */ jsx17("span", { className: textClasses, children }) });
+}
+var DEFAULT_LOADING_MESSAGE = "\u8AAD\u307F\u8FBC\u307F\u4E2D...";
+function ComboboxLoading() {
+  return /* @__PURE__ */ jsx17(StatusItem, { componentName: "Combobox.Loading", children: DEFAULT_LOADING_MESSAGE });
+}
+var DEFAULT_EMPTY_MESSAGE = "\u4E00\u81F4\u3059\u308B\u60C5\u5831\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093";
+function ComboboxEmpty() {
+  return /* @__PURE__ */ jsx17(StatusItem, { componentName: "Combobox.Empty", children: DEFAULT_EMPTY_MESSAGE });
+}
+
+// src/combobox/combobox-list.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+function extractItems(children) {
+  const result = [];
+  Children3.forEach(children, (child) => {
+    if (!isValidElement3(child)) {
+      return;
+    }
+    if (child.type === ComboboxItem) {
+      const props = child.props;
+      result.push({
+        value: props.value,
+        label: props.label,
+        isDisabled: props.isDisabled ?? false
+      });
+    }
+  });
+  return result;
+}
+function hasOpenableContent(children) {
+  let isFound = false;
+  Children3.forEach(children, (child) => {
+    if (!isValidElement3(child)) {
+      return;
+    }
+    if (child.type === ComboboxItem || child.type === ComboboxLoading || child.type === ComboboxEmpty) {
+      isFound = true;
+    }
+  });
+  return isFound;
+}
+function ComboboxList({ children, maxHeight: maxHeightProp }) {
+  const { listId, isOpen, setItems, setHasOpenableContent, setListRef, floatingStyles, listMaxHeight, variant, size } = useComboboxContext("Combobox.List");
+  const items = useMemo2(() => extractItems(children), [children]);
+  const hasContent = useMemo2(() => hasOpenableContent(children), [children]);
+  useEffect3(() => {
+    setItems(items);
+  }, [items, setItems]);
+  useEffect3(() => {
+    setHasOpenableContent(hasContent);
+  }, [hasContent, setHasOpenableContent]);
+  const ulRef = useRef2(null);
+  const mergedContainerRef = useCallback3(
+    (node) => {
+      setListRef(node);
+    },
+    [setListRef]
+  );
+  const prevOpenRef = useRef2(isOpen);
+  useEffect3(() => {
+    if (!prevOpenRef.current && isOpen && ulRef.current != null) {
+      ulRef.current.scrollTop = 0;
+    }
+    prevOpenRef.current = isOpen;
+  }, [isOpen]);
+  const isVisible = isOpen && hasContent;
+  return /* @__PURE__ */ jsx18(FloatingPortal, { children: /* @__PURE__ */ jsx18(
+    List2,
+    {
+      ref: ulRef,
+      containerRef: mergedContainerRef,
+      id: listId,
+      size,
+      variant: variant === "outline" ? "outline" : "borderless",
+      selectionIndicator: "right",
+      maxHeight: maxHeightProp ?? listMaxHeight,
+      "aria-label": "\u5019\u88DC\u4E00\u89A7",
+      className: "z-popover",
+      style: {
+        ...floatingStyles,
+        visibility: isVisible ? "visible" : "hidden",
+        pointerEvents: isVisible ? "auto" : "none"
+      },
+      children
+    }
+  ) });
+}
+
+// src/combobox/use-combobox.ts
+import { useCallback as useCallback4, useEffect as useEffect4, useId as useId2, useRef as useRef3, useState as useState2 } from "react";
+function useCombobox(params) {
+  const baseId = useId2();
+  const listId = `${baseId}-list`;
+  const paramsRef = useRef3(params);
+  paramsRef.current = params;
+  const isOpenControlled = params.isOpen != null;
+  const [isOpenInternal, setIsOpenInternal] = useState2(false);
+  const isOpen = isOpenControlled ? params.isOpen === true : isOpenInternal;
+  const openStateRef = useRef3(isOpen);
+  openStateRef.current = isOpen;
+  const setIsOpen = useCallback4(
+    (next) => {
+      if (openStateRef.current === next) {
+        return;
+      }
+      openStateRef.current = next;
+      if (!isOpenControlled) {
+        setIsOpenInternal(next);
+      }
+      paramsRef.current.onOpenChange?.(next);
+    },
+    [isOpenControlled]
+  );
+  const committedInputValueRef = useRef3(params.value === null ? "" : params.inputValue);
+  useEffect4(() => {
+    committedInputValueRef.current = paramsRef.current.value === null ? "" : paramsRef.current.inputValue;
+  }, [params.value]);
+  const revertInputToCommitted = useCallback4(() => {
+    const committed = committedInputValueRef.current;
+    if (paramsRef.current.inputValue !== committed) {
+      paramsRef.current.onInputChange(committed);
+    }
+  }, []);
+  const [activeIndex, setActiveIndexState] = useState2(null);
+  const [items, setItemsState] = useState2([]);
+  const itemsRef = useRef3(items);
+  itemsRef.current = items;
+  const activeValueRef = useRef3(null);
+  const hasInitializedActiveRef = useRef3(false);
+  const [inputMode, setInputMode] = useState2("keyboard");
+  const setActiveIndex = useCallback4((index) => {
+    setActiveIndexState(index);
+    if (index === null) {
+      activeValueRef.current = null;
+    } else {
+      const item = itemsRef.current[index];
+      activeValueRef.current = item?.value ?? null;
+    }
+  }, []);
+  const setItems = useCallback4((next) => {
+    setItemsState((prev) => {
+      if (prev.length === next.length && prev.every(
+        (p, i) => p.value === next[i]?.value && p.label === next[i]?.label && p.isDisabled === next[i]?.isDisabled
+      )) {
+        return prev;
+      }
+      return next;
+    });
+  }, []);
+  useEffect4(() => {
+    if (isOpen) {
+      setInputMode("keyboard");
+    } else {
+      hasInitializedActiveRef.current = false;
+      activeValueRef.current = null;
+      setActiveIndexState(null);
+    }
+  }, [isOpen]);
+  useEffect4(() => {
+    if (!isOpen) {
+      return;
+    }
+    if (items.length === 0) {
+      setActiveIndexState(null);
+      activeValueRef.current = null;
+      return;
+    }
+    const firstEnabledIdx = items.findIndex((item) => !item.isDisabled);
+    const fallbackToFirstEnabled = () => {
+      if (firstEnabledIdx === -1) {
+        setActiveIndexState(null);
+        activeValueRef.current = null;
+      } else {
+        setActiveIndexState(firstEnabledIdx);
+        activeValueRef.current = items[firstEnabledIdx]?.value ?? null;
+      }
+    };
+    if (!hasInitializedActiveRef.current) {
+      const selectedIdx = items.findIndex((item) => item.value === paramsRef.current.value && !item.isDisabled);
+      if (selectedIdx !== -1) {
+        setActiveIndexState(selectedIdx);
+        activeValueRef.current = items[selectedIdx]?.value ?? null;
+      } else {
+        fallbackToFirstEnabled();
+      }
+      hasInitializedActiveRef.current = true;
+      return;
+    }
+    const currentActiveValue = activeValueRef.current;
+    if (currentActiveValue !== null) {
+      const newIdx = items.findIndex((item) => item.value === currentActiveValue && !item.isDisabled);
+      if (newIdx !== -1) {
+        setActiveIndexState(newIdx);
+        return;
+      }
+    }
+    fallbackToFirstEnabled();
+  }, [items, isOpen]);
+  const inputRef = useRef3(null);
+  const selectValue = useCallback4(
+    (value, label) => {
+      committedInputValueRef.current = label;
+      paramsRef.current.onChange(value, { label });
+      paramsRef.current.onInputChange(label);
+      setIsOpen(false);
+    },
+    [setIsOpen]
+  );
+  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]);
+    if (enabledIndices.length === 0) {
+      return;
+    }
+    setActiveIndexState((prev) => {
+      const currentPos = prev === null ? -1 : enabledIndices.indexOf(prev);
+      let nextIndex;
+      if (direction === "next") {
+        const nextPos = currentPos < 0 ? 0 : (currentPos + 1) % enabledIndices.length;
+        nextIndex = enabledIndices[nextPos] ?? null;
+      } else {
+        const nextPos = currentPos <= 0 ? enabledIndices.length - 1 : currentPos - 1;
+        nextIndex = enabledIndices[nextPos] ?? null;
+      }
+      if (nextIndex === null) {
+        activeValueRef.current = null;
+      } else {
+        activeValueRef.current = currentItems[nextIndex]?.value ?? null;
+      }
+      return nextIndex;
+    });
+  }, []);
+  const handleKeyDown = useCallback4(
+    (event) => {
+      if (paramsRef.current.isDisabled === true) {
+        return;
+      }
+      if (event.altKey && event.key === "ArrowDown") {
+        event.preventDefault();
+        setInputMode("keyboard");
+        setIsOpen(true);
+        return;
+      }
+      if (event.altKey && event.key === "ArrowUp") {
+        event.preventDefault();
+        setIsOpen(false);
+        return;
+      }
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setInputMode("keyboard");
+        if (!isOpen) {
+          setIsOpen(true);
+          return;
+        }
+        moveActive("next");
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setInputMode("keyboard");
+        if (!isOpen) {
+          setIsOpen(true);
+          return;
+        }
+        moveActive("prev");
+        return;
+      }
+      if (event.key === "Enter") {
+        if (event.nativeEvent.isComposing === true || event.nativeEvent.keyCode === 229) {
+          return;
+        }
+        if (!isOpen || activeIndex === null) {
+          return;
+        }
+        event.preventDefault();
+        const item = items[activeIndex];
+        if (item != null && !item.isDisabled) {
+          selectValue(item.value, item.label);
+        }
+        return;
+      }
+      if (event.key === "Escape") {
+        if (isOpen) {
+          event.preventDefault();
+          event.stopPropagation();
+          setIsOpen(false);
+          revertInputToCommitted();
+        }
+      }
+    },
+    [isOpen, activeIndex, items, moveActive, setIsOpen, selectValue, revertInputToCommitted]
+  );
+  return {
+    baseId,
+    listId,
+    isOpen,
+    setIsOpen,
+    activeIndex,
+    setActiveIndex,
+    inputMode,
+    setInputMode,
+    items,
+    setItems,
+    selectValue,
+    revertInputToCommitted,
+    inputRef,
+    handleKeyDown
+  };
+}
+
+// src/combobox/combobox.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+var FLOATING_OFFSET = 4;
+var FLOATING_VIEWPORT_PADDING = 8;
+function parseListMaxHeight(value) {
+  if (value == null || value === "") {
+    return null;
+  }
+  const numeric = typeof value === "number" ? value : parseFloat(value);
+  return Number.isFinite(numeric) ? numeric : null;
+}
+function ComboboxBase({
+  children,
+  value,
+  onChange,
+  inputValue,
+  onInputChange,
+  onClickClearButton,
+  isOpen: isOpenProp,
+  onOpenChange,
+  size = "medium",
+  variant = "outline",
+  placeholder,
+  isError = false,
+  isDisabled = false,
+  width,
+  maxWidth,
+  listMaxHeight,
+  matchListToTrigger = false
+}) {
+  const combobox = useCombobox({
+    value,
+    onChange,
+    inputValue,
+    onInputChange,
+    isOpen: isOpenProp,
+    onOpenChange,
+    isDisabled
+  });
+  const wrapperRef = useRef4(null);
+  const [hasOpenableContent2, setHasOpenableContent] = useState3(false);
+  const listMaxHeightRef = useRef4(listMaxHeight);
+  listMaxHeightRef.current = listMaxHeight;
+  const matchListToTriggerRef = useRef4(matchListToTrigger);
+  matchListToTriggerRef.current = matchListToTrigger;
+  const middleware = useMemo3(
+    () => [
+      offset(FLOATING_OFFSET),
+      flip({ padding: FLOATING_VIEWPORT_PADDING }),
+      sizeMiddleware({
+        padding: FLOATING_VIEWPORT_PADDING,
+        apply({ availableHeight, availableWidth, elements, rects }) {
+          const referenceWidth = rects.reference.width;
+          const numericLimit = parseListMaxHeight(listMaxHeightRef.current);
+          const allowedHeight = numericLimit == null ? availableHeight : Math.min(availableHeight, numericLimit);
+          if (matchListToTriggerRef.current) {
+            elements.floating.style.width = `${referenceWidth}px`;
+          } else {
+            elements.floating.style.minWidth = `${referenceWidth}px`;
+            elements.floating.style.maxWidth = `${availableWidth}px`;
+          }
+          elements.floating.style.maxHeight = `${allowedHeight}px`;
+        }
+      })
+    ],
+    []
+  );
+  const { refs, floatingStyles, update } = useFloating({
+    open: combobox.isOpen,
+    onOpenChange: combobox.setIsOpen,
+    placement: "bottom-start",
+    whileElementsMounted: autoUpdate,
+    middleware
+  });
+  useEffect5(() => {
+    update();
+  }, [listMaxHeight, matchListToTrigger, update]);
+  const refsRef = useRef4(refs);
+  refsRef.current = refs;
+  const setInputElementRef = useCallback5(
+    (node) => {
+      combobox.inputRef.current = node;
+      refsRef.current.setReference(node?.parentElement ?? null);
+    },
+    [combobox.inputRef]
+  );
+  const listElementRef = useRef4(null);
+  const setListRef = useCallback5((node) => {
+    listElementRef.current = node;
+    refsRef.current.setFloating(node);
+  }, []);
+  const { setIsOpen } = combobox;
+  const handleOutsideClick = useCallback5(
+    (event) => {
+      const floatingElement = listElementRef.current;
+      const target = event.target;
+      if (floatingElement != null && target instanceof Node && Boolean(floatingElement.contains(target))) {
+        return;
+      }
+      setIsOpen(false);
+    },
+    [setIsOpen]
+  );
+  useOutsideClick(wrapperRef, handleOutsideClick);
+  const { revertInputToCommitted } = combobox;
+  const handleInputBlur = useCallback5(
+    (event) => {
+      const next = event.relatedTarget;
+      if (next instanceof Node) {
+        if (wrapperRef.current?.contains(next) === true) {
+          return;
+        }
+        if (listElementRef.current?.contains(next) === true) {
+          return;
+        }
+      }
+      setIsOpen(false);
+      revertInputToCommitted();
+    },
+    [setIsOpen, revertInputToCommitted]
+  );
+  const contextValue = useMemo3(
+    () => ({
+      baseId: combobox.baseId,
+      listId: combobox.listId,
+      size,
+      variant,
+      isError,
+      isDisabled,
+      placeholder,
+      inputValue,
+      onInputChange,
+      isOpen: combobox.isOpen,
+      setIsOpen,
+      selectedValue: value,
+      selectValue: combobox.selectValue,
+      onClickClearButton,
+      activeIndex: combobox.activeIndex,
+      setActiveIndex: combobox.setActiveIndex,
+      inputMode: combobox.inputMode,
+      setInputMode: combobox.setInputMode,
+      items: combobox.items,
+      setItems: combobox.setItems,
+      hasOpenableContent: hasOpenableContent2,
+      setHasOpenableContent,
+      inputRef: combobox.inputRef,
+      setInputElementRef,
+      setListRef,
+      floatingStyles,
+      listMaxHeight,
+      handleKeyDown: combobox.handleKeyDown,
+      handleInputBlur
+    }),
+    [
+      combobox.baseId,
+      combobox.listId,
+      size,
+      variant,
+      isError,
+      isDisabled,
+      placeholder,
+      inputValue,
+      onInputChange,
+      combobox.isOpen,
+      setIsOpen,
+      value,
+      combobox.selectValue,
+      onClickClearButton,
+      combobox.activeIndex,
+      combobox.setActiveIndex,
+      combobox.inputMode,
+      combobox.setInputMode,
+      combobox.items,
+      combobox.setItems,
+      hasOpenableContent2,
+      setHasOpenableContent,
+      combobox.inputRef,
+      setInputElementRef,
+      setListRef,
+      floatingStyles,
+      listMaxHeight,
+      combobox.handleKeyDown,
+      handleInputBlur
+    ]
+  );
+  return /* @__PURE__ */ jsx19(ComboboxContextProvider, { value: contextValue, children: /* @__PURE__ */ jsx19("div", { ref: wrapperRef, style: { width, maxWidth }, children }) });
+}
+var Combobox = Object.assign(ComboboxBase, {
+  Input: ComboboxInput,
+  List: ComboboxList,
+  Item: ComboboxItem,
+  Loading: ComboboxLoading,
+  Empty: ComboboxEmpty,
+  HelperMessage: TextInputHelperMessage,
+  ErrorMessage: TextInputErrorMessage,
+  displayName: "Combobox"
+});
+
+// src/date-picker/date-picker.tsx
+import "react-day-picker/style.css";
+import {
+  Children as Children4,
+  cloneElement as cloneElement4,
+  isValidElement as isValidElement4,
+  useCallback as useCallback7,
+  useEffect as useEffect9,
+  useId as useId3,
+  useMemo as useMemo5,
+  useRef as useRef8,
+  useState as useState4
+} from "react";
+import { DayPicker } from "react-day-picker";
+
+// src/popover/popover.tsx
+import { autoUpdate as autoUpdate2, offset as offset2, useFloating as useFloating2, useId as useFloatingId } from "@floating-ui/react";
+import { useEffect as useEffect8, useMemo as useMemo4, useRef as useRef7 } from "react";
+
+// src/popover/popover-content.tsx
+import { FloatingPortal as FloatingPortal2, useDismiss, useInteractions, useRole } from "@floating-ui/react";
+import * as React from "react";
+import { forwardRef as forwardRef6, useCallback as useCallback6, useEffect as useEffect7, useRef as useRef6 } from "react";
+
+// src/hooks/use-dismiss-on-modal-open.ts
+import { useEffect as useEffect6, useRef as useRef5 } from "react";
+var MODAL_OPEN_EVENT = "zenkigen-modal-open";
+var useDismissOnModalOpen = (dismiss) => {
+  const dismissRef = useRef5(dismiss);
+  dismissRef.current = dismiss;
+  useEffect6(() => {
+    const handler = () => {
+      dismissRef.current();
+    };
+    window.addEventListener(MODAL_OPEN_EVENT, handler);
+    return () => window.removeEventListener(MODAL_OPEN_EVENT, handler);
+  }, []);
+};
+
+// src/utils/react-utils.ts
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (ref == null) {
+        continue;
+      }
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        ref.current = node;
+      }
+    }
+  };
+}
+function isElement(node) {
+  return node != null && typeof node === "object" && "type" in node;
+}
+
+// src/popover/popover-context.ts
+import { createContext as createContext5, useContext as useContext5 } from "react";
+var PopoverContext = createContext5(null);
 var usePopoverContext = () => {
-  const context = useContext(PopoverContext);
+  const context = useContext5(PopoverContext);
   if (context == null) {
     throw new Error("Popover components must be used inside <Popover.Root>");
   }
@@ -395,10 +1556,10 @@ var usePopoverContext = () => {
 };
 
 // src/popover/popover-content.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
-var PopoverContent = forwardRef(function PopoverContent2({ children }, ref) {
+import { jsx as jsx20 } from "react/jsx-runtime";
+var PopoverContent = forwardRef6(function PopoverContent2({ children }, ref) {
   const { isOpen, triggerRef, floating, panelId, onClose } = usePopoverContext();
-  const shouldCloseOnOutsidePress = useCallback2(
+  const shouldCloseOnOutsidePress = useCallback6(
     (event) => {
       const target = event.target;
       if (!(target instanceof Element)) {
@@ -425,21 +1586,21 @@ var PopoverContent = forwardRef(function PopoverContent2({ children }, ref) {
       onClose({ reason: "modal-open" });
     }
   });
-  useEffect2(() => {
+  useEffect7(() => {
     if (isOpen) {
       const element = floating.refs.floating.current;
       element?.focus?.({ preventScroll: true });
     }
   }, [isOpen, floating.refs.floating]);
-  const prevIsOpenRef = useRef2(isOpen);
-  useEffect2(() => {
+  const prevIsOpenRef = useRef6(isOpen);
+  useEffect7(() => {
     const hasPreviouslyBeenOpen = prevIsOpenRef.current;
     prevIsOpenRef.current = isOpen;
     if (hasPreviouslyBeenOpen && !isOpen) {
       triggerRef.current?.focus({ preventScroll: true });
     }
   }, [isOpen, triggerRef]);
-  const handleKeyDown = useCallback2(
+  const handleKeyDown = useCallback6(
     (event) => {
       if (event.key === "Escape") {
         event.stopPropagation();
@@ -459,7 +1620,7 @@ var PopoverContent = forwardRef(function PopoverContent2({ children }, ref) {
       ...childProps.role == null && { role: "dialog" }
     });
   }
-  return /* @__PURE__ */ jsx9(FloatingPortal, { children: isOpen ? /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx20(FloatingPortal2, { children: isOpen ? /* @__PURE__ */ jsx20(
     "div",
     {
       ...interactions.getFloatingProps({
@@ -481,8 +1642,8 @@ var PopoverContent = forwardRef(function PopoverContent2({ children }, ref) {
 
 // src/popover/popover-trigger.tsx
 import * as React2 from "react";
-import { forwardRef as forwardRef2 } from "react";
-var PopoverTrigger = forwardRef2(function PopoverTrigger2({ children }, ref) {
+import { forwardRef as forwardRef7 } from "react";
+var PopoverTrigger = forwardRef7(function PopoverTrigger2({ children }, ref) {
   const { isOpen, floating, triggerRef, anchorRef, panelId } = usePopoverContext();
   if (!isElement(children)) {
     return null;
@@ -510,7 +1671,7 @@ var PopoverTrigger = forwardRef2(function PopoverTrigger2({ children }, ref) {
 });
 
 // src/popover/popover.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function Popover({
   isOpen,
   children,
@@ -519,8 +1680,8 @@ function Popover({
   onClose,
   anchorRef
 }) {
-  const triggerRef = useRef3(null);
-  const floating = useFloating({
+  const triggerRef = useRef7(null);
+  const floating = useFloating2({
     open: isOpen,
     onOpenChange: (open) => {
       if (!open && onClose != null) {
@@ -528,18 +1689,18 @@ function Popover({
       }
     },
     placement,
-    middleware: [offset(offsetValue)],
-    whileElementsMounted: autoUpdate,
+    middleware: [offset2(offsetValue)],
+    whileElementsMounted: autoUpdate2,
     strategy: "fixed"
   });
-  useEffect3(() => {
+  useEffect8(() => {
     if (anchorRef?.current) {
       floating.refs.setReference(anchorRef.current);
     }
   }, [anchorRef, floating.refs]);
   const contentId = useFloatingId() ?? "";
   const panelId = `${contentId}-panel`;
-  const contextValue = useMemo(
+  const contextValue = useMemo4(
     () => ({
       isOpen,
       triggerRef,
@@ -551,16 +1712,16 @@ function Popover({
     }),
     [isOpen, triggerRef, anchorRef, floating, contentId, panelId, onClose]
   );
-  return /* @__PURE__ */ jsx10(PopoverContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx21(PopoverContext.Provider, { value: contextValue, children });
 }
 Popover.Trigger = PopoverTrigger;
 Popover.Content = PopoverContent;
 
 // src/date-picker/date-picker-context.tsx
-import { createContext as createContext2, useContext as useContext2 } from "react";
-var DatePickerCompoundContext = createContext2(null);
+import { createContext as createContext6, useContext as useContext6 } from "react";
+var DatePickerCompoundContext = createContext6(null);
 var useDatePickerCompoundContext = (componentName) => {
-  const context = useContext2(DatePickerCompoundContext);
+  const context = useContext6(DatePickerCompoundContext);
   if (context == null) {
     throw new Error(`${componentName} \u3092\u4F7F\u7528\u3059\u308B\u306B\u306F DatePicker \u306E\u5B50\u8981\u7D20\u3068\u3057\u3066\u914D\u7F6E\u3059\u308B\u5FC5\u8981\u304C\u3042\u308B\u3002`);
   }
@@ -568,12 +1729,12 @@ var useDatePickerCompoundContext = (componentName) => {
 };
 
 // src/date-picker/date-picker-day-button.tsx
-import { focusVisible as focusVisible4 } from "@zenkigen-inc/component-theme";
-import { clsx as clsx9 } from "clsx";
+import { focusVisible as focusVisible5 } from "@zenkigen-inc/component-theme";
+import { clsx as clsx16 } from "clsx";
 import { DayButton } from "react-day-picker";
 
 // src/date-picker/date-picker-styles.ts
-import { clsx as clsx8 } from "clsx";
+import { clsx as clsx15 } from "clsx";
 import { getDefaultClassNames } from "react-day-picker";
 var defaultDayPickerClassNames = getDefaultClassNames();
 var DAY_PICKER_FONT_SIZE = "12px";
@@ -590,12 +1751,12 @@ var dayPickerStyle = {
   fontWeight: 700
 };
 var dayPickerClassNames = {
-  month: clsx8(defaultDayPickerClassNames.month, "flex flex-col px-[7px] py-2")
+  month: clsx15(defaultDayPickerClassNames.month, "flex flex-col px-[7px] py-2")
 };
 var dayButtonBaseClass = "relative grid size-full place-items-center rounded-full !border !border-solid";
 
 // src/date-picker/date-picker-day-button.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var CustomDayButton = ({ day, modifiers, className, style, ...buttonProps }) => {
   const isSelected = Boolean(modifiers.selected);
   const isOutside = Boolean(modifiers.outside);
@@ -603,19 +1764,19 @@ var CustomDayButton = ({ day, modifiers, className, style, ...buttonProps }) =>
   const now = /* @__PURE__ */ new Date();
   const isToday = day.date.getFullYear() === now.getFullYear() && day.date.getMonth() === now.getMonth() && day.date.getDate() === now.getDate();
   const isDisabledDay = isMinMaxDisabled;
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx22(
     DayButton,
     {
       ...buttonProps,
       day,
       modifiers,
       style: { ...style, fontSize: DAY_PICKER_FONT_SIZE },
-      className: clsx9(
+      className: clsx16(
         className,
         dayButtonBaseClass,
         // 共通: フォーカスリング（有効な日のみ）
         // react-day-picker の rdp-day_button クラスが outline: none を設定しているため、!important で上書き
-        !isDisabledDay && focusVisible4.normalImportant,
+        !isDisabledDay && focusVisible5.normalImportant,
         // minDate/maxDate 制限日
         isMinMaxDisabled && "!cursor-not-allowed !border-transparent !text-disabled01",
         // 範囲外の日（前後月）
@@ -633,24 +1794,24 @@ var CustomDayButton = ({ day, modifiers, className, style, ...buttonProps }) =>
 };
 
 // src/date-picker/date-picker-error-message.tsx
-import { clsx as clsx10 } from "clsx";
-import { forwardRef as forwardRef3 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var DatePickerErrorMessage = forwardRef3(
+import { clsx as clsx17 } from "clsx";
+import { forwardRef as forwardRef8 } from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var DatePickerErrorMessage = forwardRef8(
   ({ "aria-live": ariaLive = "assertive", ...props }, ref) => {
     const { size, isError } = useDatePickerCompoundContext("DatePicker.ErrorMessage");
     const typographyClass = size === "large" ? "typography-label12regular" : "typography-label11regular";
     if (isError !== true) {
       return null;
     }
-    const errorMessageClassName = clsx10(typographyClass, "text-supportError");
-    return /* @__PURE__ */ jsx12("div", { ref, className: errorMessageClassName, "aria-live": ariaLive, ...props });
+    const errorMessageClassName = clsx17(typographyClass, "text-supportError");
+    return /* @__PURE__ */ jsx23("div", { ref, className: errorMessageClassName, "aria-live": ariaLive, ...props });
   }
 );
 DatePickerErrorMessage.displayName = "DatePicker.ErrorMessage";
 
 // src/date-picker/date-picker-month-caption.tsx
-import { clsx as clsx11 } from "clsx";
+import { clsx as clsx18 } from "clsx";
 import { useDayPicker } from "react-day-picker";
 
 // src/date-picker/date-picker-utils.ts
@@ -716,19 +1877,19 @@ var formatMonthLabel = (date) => {
 };
 
 // src/date-picker/date-picker-month-caption.tsx
-import { jsx as jsx13, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs7 } from "react/jsx-runtime";
 var CustomMonthCaption = ({ calendarMonth, className, displayIndex, style, ...props }) => {
   void displayIndex;
   const { goToMonth, nextMonth, previousMonth } = useDayPicker();
   const captionMonth = calendarMonth.date;
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
-      className: clsx11("flex items-center justify-between px-1 pb-0.5", className),
+      className: clsx18("flex items-center justify-between px-1 pb-0.5", className),
       style: { ...style, fontSize: "inherit", fontWeight: "inherit" },
       ...props,
       children: [
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx24(
           IconButton,
           {
             icon: "angle-left",
@@ -739,8 +1900,8 @@ var CustomMonthCaption = ({ calendarMonth, className, displayIndex, style, ...pr
             onClick: () => previousMonth && goToMonth(previousMonth)
           }
         ),
-        /* @__PURE__ */ jsx13("span", { className: "typography-label12bold text-text02", children: formatMonthLabel(captionMonth) }),
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx24("span", { className: "typography-label12bold text-text02", children: formatMonthLabel(captionMonth) }),
+        /* @__PURE__ */ jsx24(
           IconButton,
           {
             icon: "angle-right",
@@ -757,14 +1918,14 @@ var CustomMonthCaption = ({ calendarMonth, className, displayIndex, style, ...pr
 };
 
 // src/date-picker/date-picker-weekday.tsx
-import { clsx as clsx12 } from "clsx";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { clsx as clsx19 } from "clsx";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var CustomWeekday = ({ className, children, style, ...props }) => {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx25(
     "th",
     {
       ...props,
-      className: clsx12(className, "m-0 size-7 p-0 text-center align-middle text-text02"),
+      className: clsx19(className, "m-0 size-7 p-0 text-center align-middle text-text02"),
       style: { ...style, fontSize: "inherit", fontWeight: "bold" },
       children
     }
@@ -772,7 +1933,7 @@ var CustomWeekday = ({ className, children, style, ...props }) => {
 };
 
 // src/date-picker/date-picker.tsx
-import { jsx as jsx15, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs8 } from "react/jsx-runtime";
 var DatePicker = ({
   value,
   onChange,
@@ -788,32 +1949,32 @@ var DatePicker = ({
   type,
   ...restProps
 }) => {
-  const autoGeneratedId = useId();
+  const autoGeneratedId = useId3();
   const describedByBaseId = restProps.id ?? autoGeneratedId;
-  const [isOpen, setIsOpen] = useState2(false);
-  const [displayMonth, setDisplayMonth] = useState2(() => {
+  const [isOpen, setIsOpen] = useState4(false);
+  const [displayMonth, setDisplayMonth] = useState4(() => {
     if (value == null) {
       const todayKey = formatLocalDateKey(/* @__PURE__ */ new Date());
       return createLocalDateFromKey(`${todayKey.slice(0, 7)}-01`);
     }
     return getMonthStartDate(value, timeZone);
   });
-  const calendarRef = useRef4(null);
-  const selectedKey = useMemo2(() => value == null ? null : formatDateKey(value, timeZone), [value, timeZone]);
-  const selectedDate = useMemo2(() => {
+  const calendarRef = useRef8(null);
+  const selectedKey = useMemo5(() => value == null ? null : formatDateKey(value, timeZone), [value, timeZone]);
+  const selectedDate = useMemo5(() => {
     if (selectedKey == null) {
       return;
     }
     return createLocalDateFromKey(selectedKey);
   }, [selectedKey]);
-  const minKey = useMemo2(() => minDate == null ? null : formatDateKey(minDate, timeZone), [minDate, timeZone]);
-  const maxKey = useMemo2(() => maxDate == null ? null : formatDateKey(maxDate, timeZone), [maxDate, timeZone]);
-  const currentMonthKey = useMemo2(() => formatLocalDateKey(displayMonth).slice(0, 7), [displayMonth]);
-  const isOutsideMonth = useCallback3(
+  const minKey = useMemo5(() => minDate == null ? null : formatDateKey(minDate, timeZone), [minDate, timeZone]);
+  const maxKey = useMemo5(() => maxDate == null ? null : formatDateKey(maxDate, timeZone), [maxDate, timeZone]);
+  const currentMonthKey = useMemo5(() => formatLocalDateKey(displayMonth).slice(0, 7), [displayMonth]);
+  const isOutsideMonth = useCallback7(
     (date) => formatLocalDateKey(date).slice(0, 7) !== currentMonthKey,
     [currentMonthKey]
   );
-  const isMinMaxDisabled = useCallback3(
+  const isMinMaxDisabled = useCallback7(
     (date) => {
       const dateKey = formatLocalDateKey(date);
       if (minKey != null && dateKey < minKey) {
@@ -826,7 +1987,7 @@ var DatePicker = ({
     },
     [maxKey, minKey]
   );
-  const disabledDays = useCallback3(
+  const disabledDays = useCallback7(
     (date) => {
       if (isOutsideMonth(date)) {
         return true;
@@ -835,8 +1996,8 @@ var DatePicker = ({
     },
     [isOutsideMonth, isMinMaxDisabled]
   );
-  const todayForCalendar = useMemo2(() => createLocalDateFromKey(formatLocalDateKey()), []);
-  useEffect4(() => {
+  const todayForCalendar = useMemo5(() => createLocalDateFromKey(formatLocalDateKey()), []);
+  useEffect9(() => {
     if (value == null) {
       const todayKey = formatLocalDateKey(/* @__PURE__ */ new Date());
       setDisplayMonth(createLocalDateFromKey(`${todayKey.slice(0, 7)}-01`));
@@ -844,7 +2005,7 @@ var DatePicker = ({
     }
     setDisplayMonth(getMonthStartDate(value, timeZone));
   }, [value, timeZone]);
-  useEffect4(() => {
+  useEffect9(() => {
     if (!isOpen) {
       return;
     }
@@ -860,7 +2021,7 @@ var DatePicker = ({
     });
     return () => cancelAnimationFrame(frame);
   }, [displayMonth, isOpen, value]);
-  useEffect4(() => {
+  useEffect9(() => {
     if (isDisabled) {
       setIsOpen(false);
     }
@@ -891,7 +2052,7 @@ var DatePicker = ({
     const todayKey = formatLocalDateKey(/* @__PURE__ */ new Date());
     setDisplayMonth(createLocalDateFromKey(`${todayKey.slice(0, 7)}-01`));
   };
-  const formatters = useMemo2(() => {
+  const formatters = useMemo5(() => {
     const weekdayFormatter = new Intl.DateTimeFormat("ja-JP", { weekday: "short" });
     return {
       formatCaption: (date) => formatMonthLabel(date),
@@ -903,15 +2064,15 @@ var DatePicker = ({
   const displayText = value ? formatDisplayDate(value, timeZone) : placeholder;
   const displayTextClasses = "min-w-0 truncate";
   const errorIds = [];
-  const enhancedChildren = Children.map(children, (child) => {
-    if (!isValidElement(child)) {
+  const enhancedChildren = Children4.map(children, (child) => {
+    if (!isValidElement4(child)) {
       return child;
     }
     if (child.type === DatePickerErrorMessage && isError) {
       const errorChild = child;
       const assignedId = errorChild.props.id ?? `${describedByBaseId}-error-${errorIds.length + 1}`;
       errorIds.push(assignedId);
-      return cloneElement3(errorChild, { id: assignedId });
+      return cloneElement4(errorChild, { id: assignedId });
     }
     return child;
   });
@@ -931,15 +2092,15 @@ var DatePicker = ({
     ...describedByProps,
     ...ariaInvalidProps
   };
-  const contextValue = useMemo2(
+  const contextValue = useMemo5(
     () => ({
       size,
       isError
     }),
     [isError, size]
   );
-  const popoverContent = /* @__PURE__ */ jsxs4(Popover, { isOpen, placement: "bottom-start", onClose: handleClose, children: [
-    /* @__PURE__ */ jsx15(Popover.Trigger, { children: /* @__PURE__ */ jsx15(
+  const popoverContent = /* @__PURE__ */ jsxs8(Popover, { isOpen, placement: "bottom-start", onClose: handleClose, children: [
+    /* @__PURE__ */ jsx26(Popover.Trigger, { children: /* @__PURE__ */ jsx26(
       InternalButton,
       {
         ...mergedButtonProps,
@@ -947,14 +2108,14 @@ var DatePicker = ({
         size,
         variant: isError ? "outlineDanger" : "outline",
         isDisabled,
-        before: /* @__PURE__ */ jsx15(Icon, { name: "calendar", size: iconSize }),
+        before: /* @__PURE__ */ jsx26(Icon, { name: "calendar", size: iconSize }),
         justifyContent: "start",
         onClick: handleTriggerClick,
-        children: /* @__PURE__ */ jsx15("span", { className: displayTextClasses, children: displayText })
+        children: /* @__PURE__ */ jsx26("span", { className: displayTextClasses, children: displayText })
       }
     ) }),
-    /* @__PURE__ */ jsx15(Popover.Content, { children: /* @__PURE__ */ jsxs4("div", { ref: calendarRef, className: "rounded bg-uiBackground01 shadow-floatingShadow", "aria-label": "\u65E5\u4ED8\u9078\u629E", children: [
-      /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx26(Popover.Content, { children: /* @__PURE__ */ jsxs8("div", { ref: calendarRef, className: "rounded bg-uiBackground01 shadow-floatingShadow", "aria-label": "\u65E5\u4ED8\u9078\u629E", children: [
+      /* @__PURE__ */ jsx26(
         DayPicker,
         {
           mode: "single",
@@ -975,8 +2136,8 @@ var DatePicker = ({
           components: { MonthCaption: CustomMonthCaption, DayButton: CustomDayButton, Weekday: CustomWeekday }
         }
       ),
-      /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between border-t border-uiBorder01 px-2 py-1", children: [
-        /* @__PURE__ */ jsx15(
+      /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between border-t border-uiBorder01 px-2 py-1", children: [
+        /* @__PURE__ */ jsx26(
           IconButton,
           {
             icon: "calendar-today",
@@ -987,16 +2148,16 @@ var DatePicker = ({
             onClick: handleClickToday
           }
         ),
-        /* @__PURE__ */ jsx15(Button, { type: "button", size: "small", variant: "text", onClick: handleClear, children: "\u30AF\u30EA\u30A2" })
+        /* @__PURE__ */ jsx26(Button, { type: "button", size: "small", variant: "text", onClick: handleClear, children: "\u30AF\u30EA\u30A2" })
       ] })
     ] }) })
   ] });
-  const stackedChildren = enhancedChildren == null ? [] : Children.toArray(enhancedChildren);
+  const stackedChildren = enhancedChildren == null ? [] : Children4.toArray(enhancedChildren);
   const hasMessageChildren = stackedChildren.length > 0;
   if (!hasMessageChildren) {
-    return /* @__PURE__ */ jsx15(DatePickerCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx15("div", { className: "flex flex-col", children: popoverContent }) });
+    return /* @__PURE__ */ jsx26(DatePickerCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx26("div", { className: "flex flex-col", children: popoverContent }) });
   }
-  return /* @__PURE__ */ jsx15(DatePickerCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2", children: [
+  return /* @__PURE__ */ jsx26(DatePickerCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-2", children: [
     popoverContent,
     stackedChildren
   ] }) });
@@ -1005,75 +2166,56 @@ DatePicker.ErrorMessage = DatePickerErrorMessage;
 DatePicker.displayName = "DatePicker";
 
 // src/divider/divider.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function Divider() {
-  return /* @__PURE__ */ jsx16("hr", { className: "h-px w-full border-0 bg-uiBorder01" });
+  return /* @__PURE__ */ jsx27("hr", { className: "h-px w-full border-0 bg-uiBorder01" });
 }
 
 // src/dropdown/dropdown.tsx
-import { buttonColors as buttonColors3, focusVisible as focusVisible6 } from "@zenkigen-inc/component-theme";
-import clsx15 from "clsx";
-import { useCallback as useCallback4, useRef as useRef5, useState as useState3 } from "react";
+import { buttonColors as buttonColors3, focusVisible as focusVisible7 } from "@zenkigen-inc/component-theme";
+import clsx22 from "clsx";
+import { useCallback as useCallback8, useRef as useRef9, useState as useState5 } from "react";
 import { createPortal } from "react-dom";
 
-// src/hooks/use-outside-click.ts
-import { useEffect as useEffect5 } from "react";
-var useOutsideClick = (ref, handler, enabled = true) => {
-  useEffect5(() => {
-    const listener = (event) => {
-      const element = ref?.current;
-      const target = event.target;
-      if (target instanceof Node && target.isConnected === false) {
-        return;
-      }
-      if (element == null || Boolean(element.contains(target ?? null))) {
-        return;
-      }
-      handler(event);
-    };
-    if (enabled) {
-      document.addEventListener("click", listener);
-    }
-    return () => document.removeEventListener("click", listener);
-  }, [ref, enabled, handler]);
-};
-
 // src/dropdown/dropdown-context.ts
-import { createContext as createContext3 } from "react";
-var DropdownContext = createContext3({
+import { createContext as createContext7 } from "react";
+var DropdownContext = createContext7({
   isVisible: false,
   setIsVisible: () => false,
   isDisabled: false,
   targetDimensions: { width: 0, height: 0 },
-  variant: "outline"
+  variant: "outline",
+  size: "medium"
 });
 
 // src/dropdown/dropdown-item.tsx
-import { focusVisible as focusVisible5 } from "@zenkigen-inc/component-theme";
-import clsx13 from "clsx";
-import { useContext as useContext3 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { focusVisible as focusVisible6 } from "@zenkigen-inc/component-theme";
+import clsx20 from "clsx";
+import { useContext as useContext7 } from "react";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function DropdownItem({ children, color = "gray", onClick }) {
-  const { setIsVisible } = useContext3(DropdownContext);
+  const { setIsVisible, size } = useContext7(DropdownContext);
   const handleClickItem = (event) => {
     setIsVisible(false);
     onClick?.(event);
   };
-  const itemClasses = clsx13(
-    "typography-label14regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02",
-    focusVisible5.inset,
+  const itemClasses = clsx20(
+    "typography-label14regular flex w-full items-center px-3 hover:bg-hover02 active:bg-active02",
+    focusVisible6.inset,
     {
+      "h-8": size !== "large",
+      "h-10": size === "large",
       "bg-uiBackground01 fill-icon01 text-interactive02": color === "gray",
       "fill-supportDanger text-supportDanger": color === "red"
     }
   );
-  return /* @__PURE__ */ jsx17("li", { className: "flex w-full items-center", children: /* @__PURE__ */ jsx17("button", { className: itemClasses, type: "button", onClick: handleClickItem, children }) });
+  return /* @__PURE__ */ jsx28("li", { className: "flex w-full items-center", children: /* @__PURE__ */ jsx28("button", { className: itemClasses, type: "button", onClick: handleClickItem, children }) });
 }
 
 // src/dropdown/dropdown-menu.tsx
-import clsx14 from "clsx";
-import { useContext as useContext4 } from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import clsx21 from "clsx";
+import { useContext as useContext8 } from "react";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function DropdownMenu({
   children,
   maxHeight,
@@ -1081,8 +2223,8 @@ function DropdownMenu({
   verticalPosition = "bottom",
   horizontalAlign = "left"
 }) {
-  const { isVisible, isDisabled, targetDimensions, variant, portalTargetRef } = useContext4(DropdownContext);
-  const wrapperClasses = clsx14("z-dropdown w-max overflow-y-auto rounded bg-uiBackground01 shadow-floatingShadow", {
+  const { isVisible, isDisabled, targetDimensions, variant, portalTargetRef } = useContext8(DropdownContext);
+  const wrapperClasses = clsx21("z-dropdown w-max overflow-y-auto rounded bg-uiBackground01 shadow-floatingShadow", {
     absolute: !portalTargetRef,
     "border-solid border border-uiBorder01": variant === "outline",
     "py-1": !isNoPadding,
@@ -1090,7 +2232,7 @@ function DropdownMenu({
     "right-0": horizontalAlign === "right",
     "left-auto": horizontalAlign === "center"
   });
-  return isVisible && !isDisabled && /* @__PURE__ */ jsx18(
+  return isVisible && !isDisabled && /* @__PURE__ */ jsx29(
     "ul",
     {
       className: wrapperClasses,
@@ -1105,7 +2247,7 @@ function DropdownMenu({
 }
 
 // src/dropdown/dropdown.tsx
-import { jsx as jsx19, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs9 } from "react/jsx-runtime";
 function Dropdown({
   children,
   target,
@@ -1118,19 +2260,19 @@ function Dropdown({
   isArrowHidden = false,
   portalTargetRef
 }) {
-  const [isVisible, setIsVisible] = useState3(false);
-  const [targetDimensions, setTargetDimensions] = useState3({
+  const [isVisible, setIsVisible] = useState5(false);
+  const [targetDimensions, setTargetDimensions] = useState5({
     width: 0,
     height: 0
   });
-  const targetRef = useRef5(null);
+  const targetRef = useRef9(null);
   useOutsideClick(targetRef, () => setIsVisible(false));
   useDismissOnModalOpen(() => {
     if (isVisible) {
       setIsVisible(false);
     }
   });
-  const handleToggle = useCallback4(() => {
+  const handleToggle = useCallback8(() => {
     if (targetRef.current === null) {
       return;
     }
@@ -1146,24 +2288,24 @@ function Dropdown({
       setIsVisible(true);
     }
   }, [isVisible]);
-  const wrapperClasses = clsx15("relative flex shrink-0 items-center gap-1 rounded", {
+  const wrapperClasses = clsx22("relative flex shrink-0 items-center gap-1 rounded", {
     "cursor-not-allowed": isDisabled
   });
-  const childrenButtonClasses = clsx15(
+  const childrenButtonClasses = clsx22(
     "flex items-center justify-center rounded bg-uiBackground01 p-1 hover:bg-hover02 active:bg-active02",
-    focusVisible6.normal,
+    focusVisible7.normal,
     {
       "pointer-events-none": isDisabled,
       "border border-uiBorder02": variant === "outline"
     }
   );
-  const buttonClasses = clsx15(
+  const buttonClasses = clsx22(
     "flex items-center rounded bg-uiBackground01",
     buttonColors3[variant].base,
     buttonColors3[variant].hover,
     buttonColors3[variant].active,
     buttonColors3[variant].disabled,
-    focusVisible6.normal,
+    focusVisible7.normal,
     {
       "pointer-events-none": isDisabled,
       "h-6 px-2": size === "x-small" || size === "small",
@@ -1171,19 +2313,19 @@ function Dropdown({
       "h-10 px-4": size === "large"
     }
   );
-  const labelClasses = clsx15("flex items-center", {
+  const labelClasses = clsx22("flex items-center", {
     "mr-1": !isArrowHidden && size === "x-small",
     "mr-2": !isArrowHidden && size !== "x-small",
     "typography-label12regular": size === "x-small",
     "typography-label14regular": size === "small" || size === "medium",
     "typography-label16regular": size === "large"
   });
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx30(
     DropdownContext.Provider,
     {
-      value: { isVisible, setIsVisible, isDisabled, targetDimensions, variant, portalTargetRef },
-      children: /* @__PURE__ */ jsxs5("div", { ref: targetRef, className: wrapperClasses, children: [
-        target ? /* @__PURE__ */ jsxs5(
+      value: { isVisible, setIsVisible, isDisabled, targetDimensions, variant, size, portalTargetRef },
+      children: /* @__PURE__ */ jsxs9("div", { ref: targetRef, className: wrapperClasses, children: [
+        target ? /* @__PURE__ */ jsxs9(
           "button",
           {
             type: "button",
@@ -1193,7 +2335,7 @@ function Dropdown({
             disabled: isDisabled,
             children: [
               target,
-              !isArrowHidden && /* @__PURE__ */ jsx19("div", { className: "ml-2 flex items-center fill-icon01", children: /* @__PURE__ */ jsx19(
+              !isArrowHidden && /* @__PURE__ */ jsx30("div", { className: "ml-2 flex items-center fill-icon01", children: /* @__PURE__ */ jsx30(
                 Icon,
                 {
                   name: isVisible ? "angle-small-up" : "angle-small-down",
@@ -1202,10 +2344,10 @@ function Dropdown({
               ) })
             ]
           }
-        ) : /* @__PURE__ */ jsxs5("button", { type: "button", title, className: buttonClasses, onClick: handleToggle, disabled: isDisabled, children: [
-          icon && /* @__PURE__ */ jsx19("span", { className: "mr-1 flex", children: /* @__PURE__ */ jsx19(Icon, { name: icon, size: size === "large" ? "medium" : "small" }) }),
-          /* @__PURE__ */ jsx19("span", { className: labelClasses, children: label }),
-          !isArrowHidden && /* @__PURE__ */ jsx19("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx19(Icon, { name: isVisible ? "angle-small-up" : "angle-small-down", size: "small" }) })
+        ) : /* @__PURE__ */ jsxs9("button", { type: "button", title, className: buttonClasses, onClick: handleToggle, disabled: isDisabled, children: [
+          icon && /* @__PURE__ */ jsx30("span", { className: "mr-1 flex", children: /* @__PURE__ */ jsx30(Icon, { name: icon, size: size === "large" ? "medium" : "small" }) }),
+          /* @__PURE__ */ jsx30("span", { className: labelClasses, children: label }),
+          !isArrowHidden && /* @__PURE__ */ jsx30("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx30(Icon, { name: isVisible ? "angle-small-up" : "angle-small-down", size: "small" }) })
         ] }),
         !portalTargetRef ? children : portalTargetRef != null && portalTargetRef.current && createPortal(children, portalTargetRef.current)
       ] })
@@ -1217,14 +2359,14 @@ Dropdown.Item = DropdownItem;
 
 // src/evaluation-star/evaluation-star.tsx
 import { iconElements as iconElements2 } from "@zenkigen-inc/component-icons";
-import { focusVisible as focusVisible7 } from "@zenkigen-inc/component-theme";
-import clsx16 from "clsx";
-import { useCallback as useCallback5, useState as useState4 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { focusVisible as focusVisible8 } from "@zenkigen-inc/component-theme";
+import clsx23 from "clsx";
+import { useCallback as useCallback9, useState as useState6 } from "react";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function EvaluationStar({ value, isEditable = false, onChangeRating, size = "medium" }) {
   const maxRating = 5;
-  const [currentRating, setCurrentRating] = useState4(value);
-  const handleChangeRating = useCallback5(
+  const [currentRating, setCurrentRating] = useState6(value);
+  const handleChangeRating = useCallback9(
     (newRating) => {
       if (isEditable) {
         setCurrentRating(newRating);
@@ -1235,30 +2377,30 @@ function EvaluationStar({ value, isEditable = false, onChangeRating, size = "med
     },
     [isEditable, onChangeRating]
   );
-  const starClasses = clsx16(focusVisible7.inset, { "w-6 h-6": size === "large", "w-4 h-4": size === "medium" });
+  const starClasses = clsx23(focusVisible8.inset, { "w-6 h-6": size === "large", "w-4 h-4": size === "medium" });
   const renderStar = (rating) => {
     const color = rating <= currentRating ? "fill-yellow-yellow50" : "fill-icon03";
     const IconComponent = iconElements2["star-filled"];
-    return /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsx31(
       "button",
       {
         type: "button",
         onClick: () => handleChangeRating(rating),
-        className: clsx16(color, starClasses),
+        className: clsx23(color, starClasses),
         disabled: !isEditable,
-        children: /* @__PURE__ */ jsx20(IconComponent, {})
+        children: /* @__PURE__ */ jsx31(IconComponent, {})
       },
       rating
     );
   };
   const ratingStars = Array.from({ length: maxRating }, (_, index) => renderStar(index + 1));
-  return /* @__PURE__ */ jsx20("span", { className: "flex flex-row", children: ratingStars });
+  return /* @__PURE__ */ jsx31("span", { className: "flex flex-row", children: ratingStars });
 }
 
 // src/file-input/file-input.tsx
-import { clsx as clsx17 } from "clsx";
-import { forwardRef as forwardRef4, useCallback as useCallback6, useId as useId2, useImperativeHandle, useRef as useRef6, useState as useState5 } from "react";
-import { Fragment as Fragment2, jsx as jsx21, jsxs as jsxs6 } from "react/jsx-runtime";
+import { clsx as clsx24 } from "clsx";
+import { forwardRef as forwardRef9, useCallback as useCallback10, useId as useId4, useImperativeHandle, useRef as useRef10, useState as useState7 } from "react";
+import { Fragment as Fragment3, jsx as jsx32, jsxs as jsxs10 } from "react/jsx-runtime";
 var ERROR_TYPES = {
   SIZE_TOO_LARGE: "SIZE_TOO_LARGE",
   UNSUPPORTED_FORMAT: "UNSUPPORTED_FORMAT"
@@ -1267,16 +2409,16 @@ var ERROR_MESSAGES = {
   SIZE_TOO_LARGE: "\u30D5\u30A1\u30A4\u30EB\u30B5\u30A4\u30BA\u304C\u5927\u304D\u904E\u304E\u307E\u3059\u3002",
   UNSUPPORTED_FORMAT: "\u30D5\u30A1\u30A4\u30EB\u5F62\u5F0F\u304C\u6B63\u3057\u304F\u3042\u308A\u307E\u305B\u3093\u3002"
 };
-var FileInput = forwardRef4(
+var FileInput = forwardRef9(
   ({ id, variant, accept, maxSize, isDisabled = false, isError = false, onSelect, onError, errorMessages, ...rest }, ref) => {
     const size = variant === "button" ? rest.size ?? "medium" : "medium";
-    const [selectedFile, setSelectedFile] = useState5(null);
-    const [isDragOver, setIsDragOver] = useState5(false);
-    const fileInputRef = useRef6(null);
-    const errorId = useId2();
-    const fallbackId = useId2();
+    const [selectedFile, setSelectedFile] = useState7(null);
+    const [isDragOver, setIsDragOver] = useState7(false);
+    const fileInputRef = useRef10(null);
+    const errorId = useId4();
+    const fallbackId = useId4();
     const inputId = id ?? fallbackId;
-    const validateFile = useCallback6(
+    const validateFile = useCallback10(
       (file) => {
         const errors = [];
         if (maxSize != null && maxSize > 0 && file.size > maxSize) {
@@ -1315,7 +2457,7 @@ var FileInput = forwardRef4(
       },
       [accept, maxSize, onError]
     );
-    const handleFileSelect = useCallback6(
+    const handleFileSelect = useCallback10(
       (file) => {
         if (file && !validateFile(file)) {
           return;
@@ -1325,7 +2467,7 @@ var FileInput = forwardRef4(
       },
       [validateFile, onSelect]
     );
-    const handleFileInputChange = useCallback6(
+    const handleFileInputChange = useCallback10(
       (event) => {
         if (isDisabled) {
           return;
@@ -1341,7 +2483,7 @@ var FileInput = forwardRef4(
       },
       [isDisabled, handleFileSelect]
     );
-    const handleDragOver = useCallback6(
+    const handleDragOver = useCallback10(
       (event) => {
         event.preventDefault();
         if (!isDisabled) {
@@ -1350,11 +2492,11 @@ var FileInput = forwardRef4(
       },
       [isDisabled]
     );
-    const handleDragLeave = useCallback6((event) => {
+    const handleDragLeave = useCallback10((event) => {
       event.preventDefault();
       setIsDragOver(false);
     }, []);
-    const handleDrop = useCallback6(
+    const handleDrop = useCallback10(
       (event) => {
         event.preventDefault();
         setIsDragOver(false);
@@ -1366,12 +2508,12 @@ var FileInput = forwardRef4(
       },
       [isDisabled, handleFileSelect]
     );
-    const handleButtonClick = useCallback6(() => {
+    const handleButtonClick = useCallback10(() => {
       if (!isDisabled) {
         fileInputRef.current?.click();
       }
     }, [isDisabled]);
-    const handleClear = useCallback6(() => {
+    const handleClear = useCallback10(() => {
       setSelectedFile(null);
       if (fileInputRef.current) {
         fileInputRef.current.value = "";
@@ -1387,7 +2529,7 @@ var FileInput = forwardRef4(
     );
     const hasErrorMessages = !isDisabled && errorMessages != null && errorMessages.length > 0;
     const hasErrors = !isDisabled && isError === true;
-    const dropzoneClasses = clsx17(
+    const dropzoneClasses = clsx24(
       "flex flex-1 flex-col items-center justify-center gap-4 rounded border border-dashed px-6 text-center",
       selectedFile ? "py-[52px]" : "py-4",
       {
@@ -1434,8 +2576,8 @@ var FileInput = forwardRef4(
       return normalized.join(", ");
     })();
     if (variant === "button") {
-      return /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx21("div", { className: hasErrors ? "flex-1" : "min-w-0 flex-1", children: /* @__PURE__ */ jsx21(
+      return /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx32("div", { className: hasErrors ? "flex-1" : "min-w-0 flex-1", children: /* @__PURE__ */ jsx32(
           InternalButton,
           {
             size,
@@ -1443,14 +2585,14 @@ var FileInput = forwardRef4(
             isDisabled,
             width: "100%",
             onClick: handleButtonClick,
-            before: /* @__PURE__ */ jsx21(Icon, { name: "upload", size: "small" }),
-            after: /* @__PURE__ */ jsx21(Fragment2, { children: selectedFile ? /* @__PURE__ */ jsx21("span", { className: clsx17("typography-label12regular truncate", !isDisabled && "text-text01"), children: selectedFile.name }) : "" }),
-            children: /* @__PURE__ */ jsx21("span", { className: "truncate", children: "\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E" })
+            before: /* @__PURE__ */ jsx32(Icon, { name: "upload", size: "small" }),
+            after: /* @__PURE__ */ jsx32(Fragment3, { children: selectedFile ? /* @__PURE__ */ jsx32("span", { className: clsx24("typography-label12regular truncate", !isDisabled && "text-text01"), children: selectedFile.name }) : "" }),
+            children: /* @__PURE__ */ jsx32("span", { className: "truncate", children: "\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E" })
           }
         ) }),
-        selectedFile && !isDisabled && /* @__PURE__ */ jsx21("div", { className: "shrink-0", children: /* @__PURE__ */ jsx21(IconButton, { variant: "text", icon: "close", size: "small", onClick: handleClear }) }),
-        hasErrors && hasErrorMessages && /* @__PURE__ */ jsx21("div", { id: errorId, "data-testid": "error-messages", className: "typography-label12regular text-supportError", children: errorMessages.map((message, index) => /* @__PURE__ */ jsx21("div", { className: "break-all", children: message }, index)) }),
-        /* @__PURE__ */ jsx21(
+        selectedFile && !isDisabled && /* @__PURE__ */ jsx32("div", { className: "shrink-0", children: /* @__PURE__ */ jsx32(IconButton, { variant: "text", icon: "close", size: "small", onClick: handleClear }) }),
+        hasErrors && hasErrorMessages && /* @__PURE__ */ jsx32("div", { id: errorId, "data-testid": "error-messages", className: "typography-label12regular text-supportError", children: errorMessages.map((message, index) => /* @__PURE__ */ jsx32("div", { className: "break-all", children: message }, index)) }),
+        /* @__PURE__ */ jsx32(
           "input",
           {
             id: inputId,
@@ -1465,8 +2607,8 @@ var FileInput = forwardRef4(
         )
       ] });
     }
-    return /* @__PURE__ */ jsxs6("div", { className: "flex min-w-[320px] flex-col gap-2", children: [
-      /* @__PURE__ */ jsxs6(
+    return /* @__PURE__ */ jsxs10("div", { className: "flex min-w-[320px] flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs10(
         "div",
         {
           className: dropzoneClasses,
@@ -1486,25 +2628,25 @@ var FileInput = forwardRef4(
           "aria-disabled": isDisabled,
           ...hasErrors && hasErrorMessages && { "aria-describedby": errorId },
           children: [
-            /* @__PURE__ */ jsx21(Icon, { name: "upload-document", size: "large", color: isDisabled ? "icon03" : "icon01" }),
-            !selectedFile && /* @__PURE__ */ jsx21("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsx21("div", { className: "typography-body13regular select-none", children: /* @__PURE__ */ jsxs6(Fragment2, { children: [
+            /* @__PURE__ */ jsx32(Icon, { name: "upload-document", size: "large", color: isDisabled ? "icon03" : "icon01" }),
+            !selectedFile && /* @__PURE__ */ jsx32("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsx32("div", { className: "typography-body13regular select-none", children: /* @__PURE__ */ jsxs10(Fragment3, { children: [
               "\u3053\u3053\u306B\u30D5\u30A1\u30A4\u30EB\u3092\u30C9\u30ED\u30C3\u30D7\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
-              /* @__PURE__ */ jsx21("br", {}),
+              /* @__PURE__ */ jsx32("br", {}),
               "\u307E\u305F\u306F\u3001",
-              /* @__PURE__ */ jsx21("span", { className: clsx17(!isDisabled ? "text-link01" : ""), children: "\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E" }),
+              /* @__PURE__ */ jsx32("span", { className: clsx24(!isDisabled ? "text-link01" : ""), children: "\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E" }),
               "\u3057\u3066\u304F\u3060\u3055\u3044\u3002"
             ] }) }) }),
-            !selectedFile && /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-1", children: [
-              /* @__PURE__ */ jsx21("div", { className: clsx17("typography-label11regular", isDisabled ? "text-textPlaceholder" : "text-text02"), children: "\u5BFE\u5FDC\u5F62\u5F0F" }),
-              /* @__PURE__ */ jsx21("div", { className: clsx17("typography-body12regular", isDisabled ? "text-textPlaceholder" : "text-text01"), children: acceptLabel }),
-              /* @__PURE__ */ jsx21("div", { className: clsx17("typography-label11regular", isDisabled ? "text-textPlaceholder" : "text-text02"), children: "\u30B5\u30A4\u30BA" }),
-              /* @__PURE__ */ jsx21("div", { className: clsx17("typography-body12regular", isDisabled ? "text-textPlaceholder" : "text-text01"), children: maxSizeLabel })
+            !selectedFile && /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsx32("div", { className: clsx24("typography-label11regular", isDisabled ? "text-textPlaceholder" : "text-text02"), children: "\u5BFE\u5FDC\u5F62\u5F0F" }),
+              /* @__PURE__ */ jsx32("div", { className: clsx24("typography-body12regular", isDisabled ? "text-textPlaceholder" : "text-text01"), children: acceptLabel }),
+              /* @__PURE__ */ jsx32("div", { className: clsx24("typography-label11regular", isDisabled ? "text-textPlaceholder" : "text-text02"), children: "\u30B5\u30A4\u30BA" }),
+              /* @__PURE__ */ jsx32("div", { className: clsx24("typography-body12regular", isDisabled ? "text-textPlaceholder" : "text-text01"), children: maxSizeLabel })
             ] }),
-            selectedFile && /* @__PURE__ */ jsxs6("div", { className: "mt-2 flex flex-col items-center gap-1", children: [
-              /* @__PURE__ */ jsx21("span", { className: "typography-label11regular text-text02", children: "\u30D5\u30A1\u30A4\u30EB\u540D" }),
-              /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx21("span", { className: "typography-label14regular", children: selectedFile.name }),
-                !isDisabled && /* @__PURE__ */ jsx21(
+            selectedFile && /* @__PURE__ */ jsxs10("div", { className: "mt-2 flex flex-col items-center gap-1", children: [
+              /* @__PURE__ */ jsx32("span", { className: "typography-label11regular text-text02", children: "\u30D5\u30A1\u30A4\u30EB\u540D" }),
+              /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx32("span", { className: "typography-label14regular", children: selectedFile.name }),
+                !isDisabled && /* @__PURE__ */ jsx32(
                   IconButton,
                   {
                     variant: "text",
@@ -1518,7 +2660,7 @@ var FileInput = forwardRef4(
                 )
               ] })
             ] }),
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx32(
               "input",
               {
                 id: inputId,
@@ -1534,13 +2676,13 @@ var FileInput = forwardRef4(
           ]
         }
       ),
-      hasErrors && hasErrorMessages && /* @__PURE__ */ jsx21(
+      hasErrors && hasErrorMessages && /* @__PURE__ */ jsx32(
         "div",
         {
           id: errorId,
           "data-testid": "error-messages",
           className: "typography-body13regular flex flex-col text-supportDanger",
-          children: errorMessages.map((message, index) => /* @__PURE__ */ jsx21("div", { children: message }, index))
+          children: errorMessages.map((message, index) => /* @__PURE__ */ jsx32("div", { children: message }, index))
         }
       )
     ] });
@@ -1550,15 +2692,15 @@ FileInput.displayName = "FileInput";
 
 // src/heading/heading.tsx
 import { typography } from "@zenkigen-inc/component-theme";
-import { clsx as clsx18 } from "clsx";
-import { jsxs as jsxs7 } from "react/jsx-runtime";
+import { clsx as clsx25 } from "clsx";
+import { jsxs as jsxs11 } from "react/jsx-runtime";
 function Heading(props) {
   const TagName = `h${props.level}`;
-  const classes = clsx18(`flex items-center text-text01`, typography.heading[TagName], {
+  const classes = clsx25(`flex items-center text-text01`, typography.heading[TagName], {
     "gap-2": props.level === 1,
     "gap-1": props.level > 1
   });
-  return /* @__PURE__ */ jsxs7(TagName, { className: classes, children: [
+  return /* @__PURE__ */ jsxs11(TagName, { className: classes, children: [
     props.before,
     props.children,
     props.after
@@ -1566,22 +2708,22 @@ function Heading(props) {
 }
 
 // src/hooks/use-roving-focus.ts
-import { useCallback as useCallback7, useState as useState6 } from "react";
+import { useCallback as useCallback11, useState as useState8 } from "react";
 var useRovingFocus = ({
   values,
   defaultFocusedValue,
   isDisabled = false
 }) => {
-  const [focusedValue, setFocusedValue] = useState6(
+  const [focusedValue, setFocusedValue] = useState8(
     typeof defaultFocusedValue === "undefined" ? null : defaultFocusedValue
   );
-  const handleFocusChange = useCallback7((newValue) => {
+  const handleFocusChange = useCallback11((newValue) => {
     setFocusedValue(newValue);
   }, []);
-  const handleBlur = useCallback7(() => {
+  const handleBlur = useCallback11(() => {
     setFocusedValue(null);
   }, []);
-  const handleKeyDown = useCallback7(
+  const handleKeyDown = useCallback11(
     (event) => {
       if (isDisabled === true || values.length === 0) return;
       const currentIndex = focusedValue !== null && focusedValue !== "" ? values.indexOf(focusedValue) : -1;
@@ -1636,17 +2778,17 @@ var useRovingFocus = ({
 };
 
 // src/loading/loading.tsx
-import clsx19 from "clsx";
-import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
+import clsx26 from "clsx";
+import { Fragment as Fragment4, jsx as jsx33, jsxs as jsxs12 } from "react/jsx-runtime";
 function Loading({ size = "medium", position = "fixed", height = "100%" }) {
-  const wrapperClasses = clsx19(position, "left-0 top-0 z-20 flex w-full items-center justify-center");
-  const svgClasses = clsx19({
+  const wrapperClasses = clsx26(position, "left-0 top-0 z-20 flex w-full items-center justify-center");
+  const svgClasses = clsx26({
     "h-4 w-4": size === "small",
     "h-8 w-8": size === "medium",
     "h-16 w-16": size === "large"
   });
-  return /* @__PURE__ */ jsx22(Fragment3, { children: /* @__PURE__ */ jsxs8("div", { className: wrapperClasses, style: { height }, children: [
-    size === "small" && /* @__PURE__ */ jsx22("svg", { className: svgClasses, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx33(Fragment4, { children: /* @__PURE__ */ jsxs12("div", { className: wrapperClasses, style: { height }, children: [
+    size === "small" && /* @__PURE__ */ jsx33("svg", { className: svgClasses, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx33(
       "circle",
       {
         className: "origin-center animate-circular-small-move stroke-interactive01",
@@ -1658,7 +2800,7 @@ function Loading({ size = "medium", position = "fixed", height = "100%" }) {
         fill: "none"
       }
     ) }),
-    size === "medium" && /* @__PURE__ */ jsx22("svg", { className: svgClasses, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx22(
+    size === "medium" && /* @__PURE__ */ jsx33("svg", { className: svgClasses, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx33(
       "circle",
       {
         className: "origin-center animate-circular-medium-move stroke-interactive01",
@@ -1670,7 +2812,7 @@ function Loading({ size = "medium", position = "fixed", height = "100%" }) {
         fill: "none"
       }
     ) }),
-    size === "large" && /* @__PURE__ */ jsx22("svg", { className: svgClasses, viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx22(
+    size === "large" && /* @__PURE__ */ jsx33("svg", { className: svgClasses, viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx33(
       "circle",
       {
         className: "origin-center animate-circular-large-move stroke-interactive01",
@@ -1686,7 +2828,7 @@ function Loading({ size = "medium", position = "fixed", height = "100%" }) {
 }
 
 // src/modal/modal.tsx
-import { useEffect as useEffect6, useState as useState7 } from "react";
+import { useEffect as useEffect10, useState as useState9 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/modal/body-scroll-lock.tsx
@@ -1737,34 +2879,34 @@ function restoreProperty(element, property, value) {
 }
 
 // src/modal/modal-body.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 function ModalBody({ children }) {
-  return /* @__PURE__ */ jsx23("div", { className: "overflow-y-auto", children });
+  return /* @__PURE__ */ jsx34("div", { className: "overflow-y-auto", children });
 }
 
 // src/modal/modal-context.ts
-import { createContext as createContext4 } from "react";
-var ModalContext = createContext4({
+import { createContext as createContext8 } from "react";
+var ModalContext = createContext8({
   onClose: () => null
 });
 
 // src/modal/modal-footer.tsx
-import clsx20 from "clsx";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import clsx27 from "clsx";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function ModalFooter({ children, isNoBorder = false }) {
-  const wrapperClasses = clsx20("flex w-full shrink-0 items-center rounded-b-lg px-6 py-4", {
+  const wrapperClasses = clsx27("flex w-full shrink-0 items-center rounded-b-lg px-6 py-4", {
     "border-t-[1px] border-uiBorder01": !isNoBorder
   });
-  return /* @__PURE__ */ jsx24("div", { className: wrapperClasses, children });
+  return /* @__PURE__ */ jsx35("div", { className: wrapperClasses, children });
 }
 
 // src/modal/modal-header.tsx
-import clsx21 from "clsx";
-import { useContext as useContext5 } from "react";
-import { jsx as jsx25, jsxs as jsxs9 } from "react/jsx-runtime";
+import clsx28 from "clsx";
+import { useContext as useContext9 } from "react";
+import { jsx as jsx36, jsxs as jsxs13 } from "react/jsx-runtime";
 function ModalHeader({ children, isNoBorder = false }) {
-  const { onClose } = useContext5(ModalContext);
-  const headerClasses = clsx21(
+  const { onClose } = useContext9(ModalContext);
+  const headerClasses = clsx28(
     "typography-h5 flex w-full shrink-0 items-center justify-between rounded-t-lg px-6 text-text01",
     {
       "border-b border-uiBorder01": !isNoBorder,
@@ -1772,14 +2914,14 @@ function ModalHeader({ children, isNoBorder = false }) {
       "h-12": onClose
     }
   );
-  return /* @__PURE__ */ jsxs9("div", { className: headerClasses, children: [
-    /* @__PURE__ */ jsx25("div", { children }),
-    onClose && /* @__PURE__ */ jsx25(IconButton, { icon: "close", size: "small", variant: "text", onClick: onClose })
+  return /* @__PURE__ */ jsxs13("div", { className: headerClasses, children: [
+    /* @__PURE__ */ jsx36("div", { children }),
+    onClose && /* @__PURE__ */ jsx36(IconButton, { icon: "close", size: "small", variant: "text", onClick: onClose })
   ] });
 }
 
 // src/modal/modal.tsx
-import { Fragment as Fragment4, jsx as jsx26, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx37, jsxs as jsxs14 } from "react/jsx-runtime";
 var LIMIT_WIDTH = 320;
 var LIMIT_HEIGHT = 184;
 function Modal({
@@ -1791,21 +2933,21 @@ function Modal({
   onClose,
   portalTargetRef
 }) {
-  const [isMounted, setIsMounted] = useState7(false);
+  const [isMounted, setIsMounted] = useState9(false);
   const renderWidth = typeof width === "number" ? Math.max(width, LIMIT_WIDTH) : width;
   const renderHeight = typeof height === "number" ? Math.max(height, LIMIT_HEIGHT) : height;
-  useEffect6(() => {
+  useEffect10(() => {
     setIsMounted(true);
   }, []);
-  useEffect6(() => {
+  useEffect10(() => {
     if (isOpen) {
       window.dispatchEvent(new CustomEvent(MODAL_OPEN_EVENT));
     }
   }, [isOpen]);
-  return isMounted && isOpen ? /* @__PURE__ */ jsxs10(Fragment4, { children: [
-    /* @__PURE__ */ jsx26(BodyScrollLock, {}),
+  return isMounted && isOpen ? /* @__PURE__ */ jsxs14(Fragment5, { children: [
+    /* @__PURE__ */ jsx37(BodyScrollLock, {}),
     createPortal2(
-      /* @__PURE__ */ jsx26(ModalContext.Provider, { value: { onClose }, children: /* @__PURE__ */ jsx26("div", { className: "fixed left-0 top-0 z-overlay flex size-full items-center justify-center bg-backgroundOverlayBlack py-4", children: /* @__PURE__ */ jsx26(
+      /* @__PURE__ */ jsx37(ModalContext.Provider, { value: { onClose }, children: /* @__PURE__ */ jsx37("div", { className: "fixed left-0 top-0 z-overlay flex size-full items-center justify-center bg-backgroundOverlayBlack py-4", children: /* @__PURE__ */ jsx37(
         "div",
         {
           role: "dialog",
@@ -1824,10 +2966,10 @@ Modal.Header = ModalHeader;
 Modal.Footer = ModalFooter;
 
 // src/notification-inline/notification-inline.tsx
-import { clsx as clsx22 } from "clsx";
-import { jsx as jsx27, jsxs as jsxs11 } from "react/jsx-runtime";
+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 = clsx22("typography-body13regular flex items-center gap-1 rounded text-text01", {
+  const wrapperClasses = clsx29("typography-body13regular flex items-center gap-1 rounded text-text01", {
     "bg-uiBackgroundError": state === "attention",
     "bg-uiBackgroundWarning": state === "warning",
     "bg-uiBackgroundBlue": state === "information",
@@ -1836,7 +2978,7 @@ function NotificationInline({ state = "default", size = "medium", ...props }) {
     "p-2": size === "small",
     "p-3": size === "medium"
   });
-  const iconClasses = clsx22("flex items-center", {
+  const iconClasses = clsx29("flex items-center", {
     "fill-supportError": state === "attention",
     "fill-supportWarning": state === "warning",
     "fill-blue-blue50": state === "information",
@@ -1852,28 +2994,28 @@ function NotificationInline({ state = "default", size = "medium", ...props }) {
     small: "small",
     medium: "medium"
   };
-  return /* @__PURE__ */ jsxs11("div", { className: wrapperClasses, children: [
-    state !== "default" && /* @__PURE__ */ jsx27("div", { className: iconClasses, children: /* @__PURE__ */ jsx27(Icon, { name: iconName[state], size: iconSize[size] }) }),
-    /* @__PURE__ */ jsx27("p", { className: "flex-1", children: props.children }),
-    props.showClose === true && /* @__PURE__ */ jsx27("div", { className: "flex items-center", children: /* @__PURE__ */ jsx27(IconButton, { icon: "close", size: "small", variant: "text", onClick: props.onClickClose }) })
+  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 }) })
   ] });
 }
 
 // src/pagination/pagination-button.tsx
-import { clsx as clsx23 } from "clsx";
-import { useContext as useContext6 } from "react";
+import { clsx as clsx30 } from "clsx";
+import { useContext as useContext10 } from "react";
 
 // src/pagination/pagination-context.ts
-import { createContext as createContext5 } from "react";
-var PaginationContext = createContext5({
+import { createContext as createContext9 } from "react";
+var PaginationContext = createContext9({
   currentPage: 0
 });
 
 // src/pagination/pagination-button.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 function PaginationButton({ page, onClick }) {
-  const { currentPage } = useContext6(PaginationContext);
-  const buttonClasses = clsx23(
+  const { currentPage } = useContext10(PaginationContext);
+  const buttonClasses = clsx30(
     "flex h-8 min-w-8 items-center justify-center rounded fill-icon01 px-1",
     "typography-label14regular",
     "text-interactive02",
@@ -1881,11 +3023,11 @@ function PaginationButton({ page, onClick }) {
     { "border border-uiBorder02": page === currentPage },
     { "border-transparent": page !== currentPage }
   );
-  return /* @__PURE__ */ jsx28("button", { type: "button", className: buttonClasses, onClick: () => onClick(page), children: page });
+  return /* @__PURE__ */ jsx39("button", { type: "button", className: buttonClasses, onClick: () => onClick(page), children: page });
 }
 
 // src/pagination/pagination.tsx
-import { jsx as jsx29, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs16 } from "react/jsx-runtime";
 var START_PAGE = 1;
 function Pagination({ currentPage, totalPage, sideNumPagesToShow = 3, onClick }) {
   if (totalPage < START_PAGE) {
@@ -1921,14 +3063,14 @@ function Pagination({ currentPage, totalPage, sideNumPagesToShow = 3, onClick })
   const hasHeadEllipsis = firstPageInList !== null && firstPageInList > START_PAGE + 1;
   const hasTailEllipsis = lastPageInList !== null && lastPageInList < totalPage - 1;
   const hasLastPageButton = totalPage > START_PAGE;
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx40(
     PaginationContext.Provider,
     {
       value: {
         currentPage: clampedCurrentPage
       },
-      children: /* @__PURE__ */ jsxs12("ul", { className: "flex gap-1", children: [
-        /* @__PURE__ */ jsx29("li", { className: "flex items-center", children: /* @__PURE__ */ jsx29(
+      children: /* @__PURE__ */ jsxs16("ul", { className: "flex gap-1", children: [
+        /* @__PURE__ */ jsx40("li", { className: "flex items-center", children: /* @__PURE__ */ jsx40(
           IconButton,
           {
             isDisabled: isFirstPage,
@@ -1938,12 +3080,12 @@ function Pagination({ currentPage, totalPage, sideNumPagesToShow = 3, onClick })
             onClick: () => onClick(Math.max(START_PAGE, clampedCurrentPage - 1))
           }
         ) }),
-        /* @__PURE__ */ jsx29("li", { children: /* @__PURE__ */ jsx29(PaginationButton, { onClick: () => onClick(START_PAGE), page: START_PAGE }) }),
-        hasHeadEllipsis && /* @__PURE__ */ jsx29("li", { className: threeDotIconClasses, children: /* @__PURE__ */ jsx29(Icon, { name: "more", size: "small" }) }),
-        pageList.map((page, index) => /* @__PURE__ */ jsx29("li", { children: /* @__PURE__ */ jsx29(PaginationButton, { onClick: () => onClick(page), page }) }, index)),
-        hasTailEllipsis && /* @__PURE__ */ jsx29("li", { className: threeDotIconClasses, children: /* @__PURE__ */ jsx29(Icon, { name: "more", size: "small" }) }),
-        hasLastPageButton && /* @__PURE__ */ jsx29("li", { children: /* @__PURE__ */ jsx29(PaginationButton, { onClick: () => onClick(totalPage), page: totalPage }) }),
-        /* @__PURE__ */ jsx29("li", { className: "flex items-center", children: /* @__PURE__ */ jsx29(
+        /* @__PURE__ */ jsx40("li", { children: /* @__PURE__ */ jsx40(PaginationButton, { onClick: () => onClick(START_PAGE), page: START_PAGE }) }),
+        hasHeadEllipsis && /* @__PURE__ */ jsx40("li", { className: threeDotIconClasses, children: /* @__PURE__ */ jsx40(Icon, { name: "more", size: "small" }) }),
+        pageList.map((page, index) => /* @__PURE__ */ jsx40("li", { children: /* @__PURE__ */ jsx40(PaginationButton, { onClick: () => onClick(page), page }) }, index)),
+        hasTailEllipsis && /* @__PURE__ */ jsx40("li", { className: threeDotIconClasses, children: /* @__PURE__ */ jsx40(Icon, { name: "more", size: "small" }) }),
+        hasLastPageButton && /* @__PURE__ */ jsx40("li", { children: /* @__PURE__ */ jsx40(PaginationButton, { onClick: () => onClick(totalPage), page: totalPage }) }),
+        /* @__PURE__ */ jsx40("li", { className: "flex items-center", children: /* @__PURE__ */ jsx40(
           IconButton,
           {
             isDisabled: isLastPage,
@@ -1959,14 +3101,14 @@ function Pagination({ currentPage, totalPage, sideNumPagesToShow = 3, onClick })
 }
 
 // src/select/select.tsx
-import { autoUpdate as autoUpdate2, FloatingPortal as FloatingPortal2, offset as offset2, size as sizeMiddleware, useFloating as useFloating2 } from "@floating-ui/react";
-import { focusVisible as focusVisible10, selectColors } from "@zenkigen-inc/component-theme";
-import clsx26 from "clsx";
-import { useRef as useRef7, useState as useState8 } from "react";
+import { autoUpdate as autoUpdate3, FloatingPortal as FloatingPortal3, offset as offset3, size as sizeMiddleware2, useFloating as useFloating3 } from "@floating-ui/react";
+import { focusVisible as focusVisible11, selectColors } from "@zenkigen-inc/component-theme";
+import clsx33 from "clsx";
+import { useRef as useRef11, useState as useState10 } from "react";
 
 // src/select/select-context.ts
-import { createContext as createContext6 } from "react";
-var SelectContext = createContext6({
+import { createContext as createContext10 } from "react";
+var SelectContext = createContext10({
   size: "medium",
   setIsOptionListOpen: () => false,
   variant: "outline",
@@ -1974,40 +3116,42 @@ var SelectContext = createContext6({
 });
 
 // src/select/select-item.tsx
-import { focusVisible as focusVisible8 } from "@zenkigen-inc/component-theme";
-import clsx24 from "clsx";
-import { useContext as useContext7 } from "react";
-import { jsx as jsx30, jsxs as jsxs13 } from "react/jsx-runtime";
+import { focusVisible as focusVisible9 } from "@zenkigen-inc/component-theme";
+import clsx31 from "clsx";
+import { useContext as useContext11 } from "react";
+import { jsx as jsx41, jsxs as jsxs17 } from "react/jsx-runtime";
 function SelectItem({ option }) {
-  const { setIsOptionListOpen, selectedOption, onChange, isError } = useContext7(SelectContext);
+  const { setIsOptionListOpen, selectedOption, onChange, isError, size } = useContext11(SelectContext);
   const handleClickItem = (option2) => {
     onChange?.(option2);
     setIsOptionListOpen(false);
   };
-  const itemClasses = clsx24(
-    "typography-label14regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02",
-    focusVisible8.inset,
+  const itemClasses = clsx31(
+    "typography-label14regular flex w-full items-center px-3 hover:bg-hover02 active:bg-active02",
+    focusVisible9.inset,
     {
+      "h-8": size !== "large",
+      "h-10": size === "large",
       "text-interactive01 fill-interactive01 bg-selectedUi": option.id === selectedOption?.id && !(isError ?? false),
       "text-supportError fill-supportError bg-uiBackgroundError": option.id === selectedOption?.id && isError,
       "text-interactive02 fill-icon01 bg-uiBackground01": option.id !== selectedOption?.id,
       "pr-10": option.id !== selectedOption?.id
     }
   );
-  return /* @__PURE__ */ jsx30("li", { className: "flex w-full items-center", "data-id": option.id, children: /* @__PURE__ */ jsxs13("button", { className: itemClasses, type: "button", onClick: () => handleClickItem(option), children: [
-    option.icon && /* @__PURE__ */ jsx30(Icon, { name: option.icon, size: "small" }),
-    /* @__PURE__ */ jsx30("span", { className: "ml-1 flex-1 truncate text-left", children: option.label }),
-    option.id === selectedOption?.id && /* @__PURE__ */ jsx30("div", { className: "ml-2 flex items-center", children: /* @__PURE__ */ jsx30(Icon, { name: "check", size: "small" }) })
+  return /* @__PURE__ */ jsx41("li", { className: "flex w-full items-center", "data-id": option.id, children: /* @__PURE__ */ jsxs17("button", { className: itemClasses, type: "button", onClick: () => handleClickItem(option), children: [
+    option.icon && /* @__PURE__ */ jsx41(Icon, { name: option.icon, size: "small" }),
+    /* @__PURE__ */ jsx41("span", { className: "ml-1 flex-1 truncate text-left", children: option.label }),
+    option.id === selectedOption?.id && /* @__PURE__ */ jsx41("div", { className: "ml-2 flex items-center", children: /* @__PURE__ */ jsx41(Icon, { name: "check", size: "small" }) })
   ] }) }, option.id);
 }
 
 // src/select/select-list.tsx
-import { focusVisible as focusVisible9 } from "@zenkigen-inc/component-theme";
-import clsx25 from "clsx";
-import { forwardRef as forwardRef5, useContext as useContext8, useLayoutEffect as useLayoutEffect2 } from "react";
-import { jsx as jsx31, jsxs as jsxs14 } from "react/jsx-runtime";
-var SelectList = forwardRef5(({ children, maxHeight }, ref) => {
-  const { selectedOption, setIsOptionListOpen, variant, placeholder, onChange, floatingStyles, floatingRef } = useContext8(SelectContext);
+import { focusVisible as focusVisible10 } from "@zenkigen-inc/component-theme";
+import clsx32 from "clsx";
+import { forwardRef as forwardRef10, useContext as useContext12, useLayoutEffect as useLayoutEffect2 } from "react";
+import { jsx as jsx42, jsxs as jsxs18 } from "react/jsx-runtime";
+var SelectList = forwardRef10(({ children, maxHeight }, ref) => {
+  const { selectedOption, setIsOptionListOpen, variant, placeholder, onChange, floatingStyles, floatingRef, size } = useContext12(SelectContext);
   const handleClickDeselect = () => {
     onChange?.(null);
     setIsOptionListOpen(false);
@@ -2030,23 +3174,27 @@ var SelectList = forwardRef5(({ children, maxHeight }, ref) => {
       }
     }
   }, [selectedOption, maxHeight, floatingRef]);
-  const listClasses = clsx25("overflow-y-auto rounded bg-uiBackground01 py-2 shadow-floatingShadow", {
+  const listClasses = clsx32("overflow-y-auto rounded bg-uiBackground01 py-2 shadow-floatingShadow", {
     "border-solid border border-uiBorder01": variant === "outline"
   });
-  const deselectButtonClasses = clsx25(
-    "typography-label14regular flex h-8 w-full items-center px-3 text-interactive02 hover:bg-hover02 active:bg-active02",
-    focusVisible9.inset
+  const deselectButtonClasses = clsx32(
+    "typography-label14regular flex w-full items-center px-3 text-interactive02 hover:bg-hover02 active:bg-active02",
+    focusVisible10.inset,
+    {
+      "h-8": size !== "large",
+      "h-10": size === "large"
+    }
   );
-  return /* @__PURE__ */ jsxs14("ul", { className: listClasses, style: { maxHeight, ...floatingStyles }, ref, children: [
+  return /* @__PURE__ */ jsxs18("ul", { className: listClasses, style: { maxHeight, ...floatingStyles }, ref, children: [
     children,
-    placeholder != null && selectedOption !== null && /* @__PURE__ */ jsx31("li", { children: /* @__PURE__ */ jsx31("button", { className: deselectButtonClasses, type: "button", onClick: handleClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
+    placeholder != null && selectedOption !== null && /* @__PURE__ */ jsx42("li", { children: /* @__PURE__ */ jsx42("button", { className: deselectButtonClasses, type: "button", onClick: handleClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
   ] });
 });
 SelectList.displayName = "SelectList";
 
 // src/select/select.tsx
-import { jsx as jsx32, jsxs as jsxs15 } from "react/jsx-runtime";
-var FLOATING_OFFSET = 4;
+import { jsx as jsx43, jsxs as jsxs19 } from "react/jsx-runtime";
+var FLOATING_OFFSET2 = 4;
 function Select({
   children,
   size = "medium",
@@ -2063,21 +3211,21 @@ function Select({
   optionListMaxHeight,
   matchListToTrigger = false
 }) {
-  const [isOptionListOpen, setIsOptionListOpen] = useState8(false);
-  const targetRef = useRef7(null);
+  const [isOptionListOpen, setIsOptionListOpen] = useState10(false);
+  const targetRef = useRef11(null);
   useOutsideClick(targetRef, () => setIsOptionListOpen(false));
   useDismissOnModalOpen(() => {
     if (isOptionListOpen) {
       setIsOptionListOpen(false);
     }
   });
-  const { refs, floatingStyles } = useFloating2({
+  const { refs, floatingStyles } = useFloating3({
     open: isOptionListOpen,
     onOpenChange: setIsOptionListOpen,
     placement: "bottom-start",
     middleware: [
-      offset2(FLOATING_OFFSET),
-      sizeMiddleware({
+      offset3(FLOATING_OFFSET2),
+      sizeMiddleware2({
         apply({ availableWidth, elements, rects }) {
           const referenceWidth = rects.reference.width;
           if (matchListToTrigger) {
@@ -2089,23 +3237,23 @@ function Select({
         }
       })
     ],
-    whileElementsMounted: autoUpdate2
+    whileElementsMounted: autoUpdate3
   });
   const handleClickToggle = () => setIsOptionListOpen((prev) => !prev);
   const buttonVariant = isError && !isDisabled ? `${variant}Error` : variant;
   const isSelected = isOptionSelected && !isDisabled && selectedOption !== null && !isError;
-  const wrapperClasses = clsx26("relative flex shrink-0 items-center gap-1 rounded bg-uiBackground01", {
+  const wrapperClasses = clsx33("relative flex shrink-0 items-center gap-1 rounded bg-uiBackground01", {
     "h-6": size === "x-small" || size === "small",
     "h-8": size === "medium",
     "h-10": size === "large",
     "cursor-not-allowed": isDisabled
   });
-  const buttonClasses = clsx26(
+  const buttonClasses = clsx33(
     "flex size-full items-center rounded",
     selectColors[buttonVariant].hover,
     selectColors[buttonVariant].active,
     selectColors[buttonVariant].disabled,
-    focusVisible10.normal,
+    focusVisible11.normal,
     {
       [selectColors[buttonVariant].selected]: isSelected,
       [selectColors[buttonVariant].base]: !isSelected,
@@ -2115,14 +3263,14 @@ function Select({
       "border-supportError": !isSelected && !isDisabled && isError
     }
   );
-  const labelClasses = clsx26("overflow-hidden", {
+  const labelClasses = clsx33("overflow-hidden", {
     "mr-1": size === "x-small",
     "mr-2": size !== "x-small",
     "typography-label12regular": size === "x-small",
     "typography-label14regular": size === "small" || size === "medium",
     "typography-label16regular": size === "large"
   });
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx43(
     SelectContext.Provider,
     {
       value: {
@@ -2136,8 +3284,8 @@ function Select({
         floatingStyles,
         floatingRef: refs.floating
       },
-      children: /* @__PURE__ */ jsxs15("div", { className: wrapperClasses, style: { width, maxWidth }, ref: targetRef, children: [
-        /* @__PURE__ */ jsxs15(
+      children: /* @__PURE__ */ jsxs19("div", { className: wrapperClasses, style: { width, maxWidth }, ref: targetRef, children: [
+        /* @__PURE__ */ jsxs19(
           "button",
           {
             ref: refs.setReference,
@@ -2146,9 +3294,9 @@ function Select({
             onClick: handleClickToggle,
             disabled: isDisabled,
             children: [
-              selectedOption?.icon ? /* @__PURE__ */ jsx32("div", { className: "mr-1 flex", children: /* @__PURE__ */ jsx32(Icon, { name: selectedOption.icon, size: size === "large" ? "medium" : "small" }) }) : placeholder != null && placeholderIcon && /* @__PURE__ */ jsx32("div", { className: "mr-1 flex", children: /* @__PURE__ */ jsx32(Icon, { name: placeholderIcon, size: size === "large" ? "medium" : "small" }) }),
-              /* @__PURE__ */ jsx32("div", { className: labelClasses, children: /* @__PURE__ */ jsx32("div", { className: "truncate", children: selectedOption ? selectedOption.label : placeholder != null && placeholder }) }),
-              /* @__PURE__ */ jsx32("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx32(
+              selectedOption?.icon ? /* @__PURE__ */ jsx43("div", { className: "mr-1 flex", children: /* @__PURE__ */ jsx43(Icon, { name: selectedOption.icon, size: size === "large" ? "medium" : "small" }) }) : placeholder != null && placeholderIcon && /* @__PURE__ */ jsx43("div", { className: "mr-1 flex", children: /* @__PURE__ */ jsx43(Icon, { name: placeholderIcon, size: size === "large" ? "medium" : "small" }) }),
+              /* @__PURE__ */ jsx43("div", { className: labelClasses, children: /* @__PURE__ */ jsx43("div", { className: "truncate", children: selectedOption ? selectedOption.label : placeholder != null && placeholder }) }),
+              /* @__PURE__ */ jsx43("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx43(
                 Icon,
                 {
                   name: isOptionListOpen ? "angle-small-up" : "angle-small-down",
@@ -2158,287 +3306,103 @@ function Select({
             ]
           }
         ),
-        isOptionListOpen && !isDisabled && /* @__PURE__ */ jsx32(FloatingPortal2, { children: /* @__PURE__ */ jsx32("div", { className: "relative z-popover", children: /* @__PURE__ */ jsx32(SelectList, { ref: refs.setFloating, maxHeight: optionListMaxHeight, children }) }) })
-      ] })
-    }
-  );
-}
-Select.Option = SelectItem;
-
-// src/pagination-select/pagination-select.tsx
-import { jsx as jsx33, jsxs as jsxs16 } from "react/jsx-runtime";
-function PaginationSelect({
-  totalSize,
-  currentPage,
-  sizePerPage,
-  countLabel = "\u4EF6",
-  pageLabel = "\u30DA\u30FC\u30B8",
-  optionListMaxHeight = 190,
-  onClickPrevButton,
-  onClickNextButton,
-  onChange
-}) {
-  const pageMax = Math.ceil(totalSize / sizePerPage);
-  const optionsList = [...Array(pageMax)].map((_, index) => {
-    const value = (index + 1).toString();
-    return {
-      id: value,
-      value,
-      label: value
-    };
-  });
-  const minCount = totalSize ? (currentPage - 1) * sizePerPage + 1 : 0;
-  const maxCount = currentPage * sizePerPage > totalSize ? totalSize : currentPage * sizePerPage;
-  return /* @__PURE__ */ jsxs16("nav", { "aria-label": "pagination", className: "flex items-center gap-x-1", children: [
-    /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-x-2", children: [
-      /* @__PURE__ */ jsxs16("div", { className: "typography-label14regular flex gap-1 text-text01", children: [
-        /* @__PURE__ */ jsxs16("span", { className: " ", children: [
-          minCount > 0 && `${minCount} - `,
-          maxCount
-        ] }),
-        /* @__PURE__ */ jsxs16("span", { children: [
-          "/ ",
-          totalSize
-        ] }),
-        /* @__PURE__ */ jsx33("span", { children: countLabel })
-      ] }),
-      /* @__PURE__ */ jsx33(
-        Select,
-        {
-          size: "medium",
-          variant: "outline",
-          selectedOption: optionsList.find((option) => option.value === currentPage.toString()),
-          optionListMaxHeight,
-          onChange: (option) => option && onChange(Number(option.value)),
-          isDisabled: pageMax === 0,
-          children: optionsList.map((option) => /* @__PURE__ */ jsx33(Select.Option, { option }, option.id))
-        }
-      ),
-      /* @__PURE__ */ jsxs16("div", { className: "typography-label14regular text-text02", children: [
-        "/ ",
-        pageMax,
-        pageLabel
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs16("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ jsx33(
-        IconButton,
-        {
-          variant: "text",
-          icon: "angle-left",
-          size: "small",
-          isDisabled: currentPage === 1,
-          onClick: onClickPrevButton
-        }
-      ),
-      /* @__PURE__ */ jsx33(
-        IconButton,
-        {
-          variant: "text",
-          icon: "angle-right",
-          size: "small",
-          isDisabled: currentPage === pageMax || pageMax === 0,
-          onClick: onClickNextButton
-        }
-      )
-    ] })
-  ] });
-}
-
-// src/password-input/password-input.tsx
-import { forwardRef as forwardRef9, useState as useState9 } from "react";
-
-// src/text-input/text-input.tsx
-import { clsx as clsx29 } from "clsx";
-import { Children as Children2, cloneElement as cloneElement4, forwardRef as forwardRef8, isValidElement as isValidElement2, useId as useId3, useMemo as useMemo3 } from "react";
-
-// src/text-input/text-input-context.tsx
-import { createContext as createContext7, useContext as useContext9 } from "react";
-var TextInputCompoundContext = createContext7(null);
-var useTextInputCompoundContext = (componentName) => {
-  const context = useContext9(TextInputCompoundContext);
-  if (context == null) {
-    throw new Error(`${componentName} \u3092\u4F7F\u7528\u3059\u308B\u306B\u306F TextInput \u306E\u5B50\u8981\u7D20\u3068\u3057\u3066\u914D\u7F6E\u3059\u308B\u5FC5\u8981\u304C\u3042\u308B\u3002`);
-  }
-  return context;
-};
-
-// src/text-input/text-input-error-message.tsx
-import { clsx as clsx27 } from "clsx";
-import { forwardRef as forwardRef6 } from "react";
-import { jsx as jsx34 } from "react/jsx-runtime";
-var TextInputErrorMessage = forwardRef6(
-  ({ "aria-live": ariaLive = "assertive", ...props }, ref) => {
-    const { inputProps } = useTextInputCompoundContext("TextInput.ErrorMessage");
-    const typographyClass = inputProps.size === "large" ? "typography-label13regular" : "typography-label12regular";
-    const shouldRender = inputProps.isError === true;
-    if (!shouldRender) {
-      return null;
-    }
-    const errorMessageClassName = clsx27(typographyClass, "text-supportError");
-    return /* @__PURE__ */ jsx34("div", { ref, className: errorMessageClassName, "aria-live": ariaLive, ...props });
-  }
-);
-TextInputErrorMessage.displayName = "TextInput.ErrorMessage";
-
-// src/text-input/text-input-helper-message.tsx
-import { clsx as clsx28 } from "clsx";
-import { forwardRef as forwardRef7 } from "react";
-import { jsx as jsx35 } from "react/jsx-runtime";
-var TextInputHelperMessage = forwardRef7((props, ref) => {
-  const { inputProps } = useTextInputCompoundContext("TextInput.HelperMessage");
-  const typographyClass = inputProps.size === "large" ? "typography-label13regular" : "typography-label12regular";
-  const helperMessageClassName = clsx28(typographyClass, "text-text02");
-  return /* @__PURE__ */ jsx35("div", { ref, className: helperMessageClassName, ...props });
-});
-TextInputHelperMessage.displayName = "TextInput.HelperMessage";
-
-// src/text-input/text-input.tsx
-import { jsx as jsx36, jsxs as jsxs17 } from "react/jsx-runtime";
-function TextInputInner({
-  size = "medium",
-  variant = "outline",
-  isError = false,
-  disabled = false,
-  onClickClearButton,
-  after,
-  children,
-  ...props
-}, ref) {
-  const autoGeneratedId = useId3();
-  const { className: _className, ...restInputProps } = props;
-  const inputPropsForContext = useMemo3(
-    () => ({
-      ...restInputProps,
-      size,
-      isError,
-      disabled,
-      onClickClearButton,
-      after
-    }),
-    [restInputProps, size, isError, disabled, onClickClearButton, after]
-  );
-  const contextValue = useMemo3(
-    () => ({
-      inputProps: inputPropsForContext,
-      forwardedRef: ref
-    }),
-    [inputPropsForContext, ref]
-  );
-  const helperMessageIds = [];
-  const errorIds = [];
-  const describedByBaseId = restInputProps.id ?? autoGeneratedId;
-  const enhancedChildren = Children2.map(children, (child) => {
-    if (!isValidElement2(child)) {
-      return child;
-    }
-    if (child.type === TextInputHelperMessage) {
-      const helperChild = child;
-      const assignedId = helperChild.props.id ?? `${describedByBaseId}-helper-${helperMessageIds.length + 1}`;
-      helperMessageIds.push(assignedId);
-      return cloneElement4(helperChild, { id: assignedId });
-    }
-    if (child.type === TextInputErrorMessage && isError) {
-      const errorChild = child;
-      const assignedId = errorChild.props.id ?? `${describedByBaseId}-error-${errorIds.length + 1}`;
-      errorIds.push(assignedId);
-      return cloneElement4(errorChild, { id: assignedId });
-    }
-    return child;
-  });
-  const describedByFromProps = typeof restInputProps["aria-describedby"] === "string" ? restInputProps["aria-describedby"] : null;
-  const describedByList = [describedByFromProps, ...helperMessageIds, ...errorIds].filter(
-    (id) => typeof id === "string" && id.trim().length > 0
+        isOptionListOpen && !isDisabled && /* @__PURE__ */ jsx43(FloatingPortal3, { children: /* @__PURE__ */ jsx43("div", { className: "relative z-popover", children: /* @__PURE__ */ jsx43(SelectList, { ref: refs.setFloating, maxHeight: optionListMaxHeight, children }) }) })
+      ] })
+    }
   );
-  const describedByProps = describedByList.length > 0 ? {
-    "aria-describedby": describedByList.join(" ")
-  } : {};
-  const shouldMarkInvalid = isError === true || errorIds.length > 0;
-  const ariaInvalidFromProps = restInputProps["aria-invalid"];
-  const ariaInvalidValue = ariaInvalidFromProps != null ? ariaInvalidFromProps : shouldMarkInvalid ? true : null;
-  const ariaInvalidProps = ariaInvalidValue == null ? {} : { "aria-invalid": ariaInvalidValue };
-  const mergedInputProps = {
-    ...restInputProps,
-    ...describedByProps,
-    ...ariaInvalidProps,
-    disabled
-  };
-  const isShowClearButton = !!onClickClearButton && restInputProps.value.length !== 0 && !disabled;
-  const hasTrailingElement = isShowClearButton || after != null;
-  const isBorderless = variant === "text";
-  const inputWrapClasses = clsx29("relative flex items-center gap-2 overflow-hidden rounded border", {
-    // outline variant
-    "border-uiBorder02": !isBorderless && !isError && !disabled,
-    "border-supportError": !isBorderless && isError && !disabled,
-    "hover:border-hoverInput": !isBorderless && !disabled && !isError,
-    "hover:focus-within:border-activeInput": !isBorderless && !isError,
-    "focus-within:border-activeInput": !isBorderless && !isError,
-    "bg-disabled02 border-disabled01": !isBorderless && disabled,
-    // text variant
-    "border-transparent": isBorderless,
-    // 共通
-    "bg-uiBackground01": !disabled || isBorderless,
-    "pr-2": !isBorderless && size === "medium" && hasTrailingElement,
-    "pr-3": !isBorderless && size === "large" && hasTrailingElement
-  });
-  const inputClasses = clsx29("flex-1 bg-transparent outline-none", {
-    "disabled:text-textPlaceholder": !isBorderless,
-    "disabled:text-disabled01": isBorderless,
-    // outline: 従来の padding
-    "typography-label14regular min-h-8 px-2": !isBorderless && size === "medium",
-    "typography-label16regular min-h-10 px-3": !isBorderless && size === "large",
-    // text: padding なし
-    "typography-label14regular min-h-8": isBorderless && size === "medium",
-    "typography-label16regular min-h-10": isBorderless && size === "large",
-    // テキスト色
-    "text-text01": !isError,
-    "text-supportError": isError,
-    // placeholder 色（text variant エラー時のみ上書き）
-    "placeholder:text-textPlaceholder": !(isBorderless && isError && !disabled),
-    "placeholder:text-supportErrorLight": isBorderless && isError && !disabled,
-    "pr-0": hasTrailingElement
+}
+Select.Option = SelectItem;
+
+// src/pagination-select/pagination-select.tsx
+import { jsx as jsx44, jsxs as jsxs20 } from "react/jsx-runtime";
+function PaginationSelect({
+  totalSize,
+  currentPage,
+  sizePerPage,
+  countLabel = "\u4EF6",
+  pageLabel = "\u30DA\u30FC\u30B8",
+  optionListMaxHeight = 190,
+  onClickPrevButton,
+  onClickNextButton,
+  onChange
+}) {
+  const pageMax = Math.ceil(totalSize / sizePerPage);
+  const optionsList = [...Array(pageMax)].map((_, index) => {
+    const value = (index + 1).toString();
+    return {
+      id: value,
+      value,
+      label: value
+    };
   });
-  const inputElement = /* @__PURE__ */ jsxs17("div", { className: inputWrapClasses, children: [
-    /* @__PURE__ */ jsx36("input", { ref, size: 1, className: inputClasses, ...mergedInputProps }),
-    after,
-    isShowClearButton && /* @__PURE__ */ jsx36(IconButton, { variant: "text", icon: "close", size: "small", onClick: onClickClearButton })
+  const minCount = totalSize ? (currentPage - 1) * sizePerPage + 1 : 0;
+  const maxCount = currentPage * sizePerPage > totalSize ? totalSize : currentPage * sizePerPage;
+  return /* @__PURE__ */ jsxs20("nav", { "aria-label": "pagination", className: "flex items-center gap-x-1", children: [
+    /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-x-2", children: [
+      /* @__PURE__ */ jsxs20("div", { className: "typography-label14regular flex gap-1 text-text01", children: [
+        /* @__PURE__ */ jsxs20("span", { className: " ", children: [
+          minCount > 0 && `${minCount} - `,
+          maxCount
+        ] }),
+        /* @__PURE__ */ jsxs20("span", { children: [
+          "/ ",
+          totalSize
+        ] }),
+        /* @__PURE__ */ jsx44("span", { children: countLabel })
+      ] }),
+      /* @__PURE__ */ jsx44(
+        Select,
+        {
+          size: "medium",
+          variant: "outline",
+          selectedOption: optionsList.find((option) => option.value === currentPage.toString()),
+          optionListMaxHeight,
+          onChange: (option) => option && onChange(Number(option.value)),
+          isDisabled: pageMax === 0,
+          children: optionsList.map((option) => /* @__PURE__ */ jsx44(Select.Option, { option }, option.id))
+        }
+      ),
+      /* @__PURE__ */ jsxs20("div", { className: "typography-label14regular text-text02", children: [
+        "/ ",
+        pageMax,
+        pageLabel
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs20("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx44(
+        IconButton,
+        {
+          variant: "text",
+          icon: "angle-left",
+          size: "small",
+          isDisabled: currentPage === 1,
+          onClick: onClickPrevButton
+        }
+      ),
+      /* @__PURE__ */ jsx44(
+        IconButton,
+        {
+          variant: "text",
+          icon: "angle-right",
+          size: "small",
+          isDisabled: currentPage === pageMax || pageMax === 0,
+          onClick: onClickNextButton
+        }
+      )
+    ] })
   ] });
-  const stackedChildren = enhancedChildren == null ? [] : Children2.toArray(enhancedChildren);
-  const hasMessageChildren = stackedChildren.length > 0;
-  if (!hasMessageChildren) {
-    return /* @__PURE__ */ jsx36(TextInputCompoundContext.Provider, { value: contextValue, children: inputElement });
-  }
-  return /* @__PURE__ */ jsx36(TextInputCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-2", children: [
-    inputElement,
-    stackedChildren
-  ] }) });
 }
-var attachStatics = (component) => {
-  component.HelperMessage = TextInputHelperMessage;
-  component.ErrorMessage = TextInputErrorMessage;
-  component.displayName = "TextInput";
-  return component;
-};
-var TextInputPublic = forwardRef8(function TextInputPublic2(props, ref) {
-  return TextInputInner(props, ref);
-});
-var InternalTextInputBase = forwardRef8(
-  function InternalTextInputBase2(props, ref) {
-    return TextInputInner(props, ref);
-  }
-);
-var TextInput = attachStatics(TextInputPublic);
-var InternalTextInput = attachStatics(InternalTextInputBase);
 
 // src/password-input/password-input.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
-var PasswordInputBase = forwardRef9(function PasswordInput({ disabled = false, children, ...props }, ref) {
-  const [isPasswordVisible, setIsPasswordVisible] = useState9(false);
+import { forwardRef as forwardRef11, useState as useState11 } from "react";
+import { jsx as jsx45 } from "react/jsx-runtime";
+var PasswordInputBase = forwardRef11(function PasswordInput({ disabled = false, children, ...props }, ref) {
+  const [isPasswordVisible, setIsPasswordVisible] = useState11(false);
   const { className: _className, ...textInputProps } = props;
   const handlePasswordVisibilityToggle = () => {
     setIsPasswordVisible((prev) => !prev);
   };
-  const passwordToggleButton = /* @__PURE__ */ jsx37(
+  const passwordToggleButton = /* @__PURE__ */ jsx45(
     IconButton,
     {
       variant: "text",
@@ -2449,7 +3413,7 @@ var PasswordInputBase = forwardRef9(function PasswordInput({ disabled = false, c
       "aria-label": isPasswordVisible === true ? "\u30D1\u30B9\u30EF\u30FC\u30C9\u3092\u975E\u8868\u793A\u306B\u3059\u308B" : "\u30D1\u30B9\u30EF\u30FC\u30C9\u3092\u8868\u793A\u3059\u308B"
     }
   );
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx45(
     InternalTextInput,
     {
       ref,
@@ -2468,47 +3432,47 @@ var PasswordInput2 = Object.assign(PasswordInputBase, {
 });
 
 // src/popup/popup.tsx
-import { useContext as useContext11 } from "react";
+import { useContext as useContext14 } from "react";
 
 // src/popup/popup-body.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 function PopupBody({ children }) {
-  return /* @__PURE__ */ jsx38("div", { className: "overflow-y-auto", children });
+  return /* @__PURE__ */ jsx46("div", { className: "overflow-y-auto", children });
 }
 
 // src/popup/popup-context.ts
-import { createContext as createContext8 } from "react";
-var PopupContext = createContext8({
+import { createContext as createContext11 } from "react";
+var PopupContext = createContext11({
   isOpen: false,
   onClose: () => null
 });
 
 // src/popup/popup-footer.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 function PopupFooter({ children }) {
-  return /* @__PURE__ */ jsx39("div", { className: "flex w-full shrink-0 items-center rounded-b-lg px-6 py-3", children });
+  return /* @__PURE__ */ jsx47("div", { className: "flex w-full shrink-0 items-center rounded-b-lg px-6 py-3", children });
 }
 
 // src/popup/popup-header.tsx
-import { useContext as useContext10 } from "react";
-import { jsx as jsx40, jsxs as jsxs18 } from "react/jsx-runtime";
+import { useContext as useContext13 } from "react";
+import { jsx as jsx48, jsxs as jsxs21 } from "react/jsx-runtime";
 function PopupHeader({ children, before }) {
-  const { onClose } = useContext10(PopupContext);
-  return /* @__PURE__ */ jsxs18("div", { className: "typography-h5 flex h-12 w-full shrink-0 items-start justify-between rounded-t-lg px-6 pt-3 text-text01", children: [
-    /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-1", children: [
+  const { onClose } = useContext13(PopupContext);
+  return /* @__PURE__ */ jsxs21("div", { className: "typography-h5 flex h-12 w-full shrink-0 items-start justify-between rounded-t-lg px-6 pt-3 text-text01", children: [
+    /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1", children: [
       before,
       children
     ] }),
-    onClose && /* @__PURE__ */ jsx40(IconButton, { icon: "close", size: "small", variant: "text", onClick: onClose })
+    onClose && /* @__PURE__ */ jsx48(IconButton, { icon: "close", size: "small", variant: "text", onClick: onClose })
   ] });
 }
 
 // src/popup/popup.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var LIMIT_WIDTH2 = 320;
 var LIMIT_HEIGHT2 = 184;
 function useOptionalPopoverContext() {
-  return useContext11(PopoverContext);
+  return useContext14(PopoverContext);
 }
 function Popup({ children, isOpen: controlledIsOpen, width = 480, height, onClose }) {
   const renderWidth = typeof width === "number" ? Math.max(width, LIMIT_WIDTH2) : width;
@@ -2519,7 +3483,7 @@ function Popup({ children, isOpen: controlledIsOpen, width = 480, height, onClos
   if (!isOpen) {
     return null;
   }
-  return /* @__PURE__ */ jsx41(PopupContext.Provider, { value: { isOpen, onClose }, children: /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx49(PopupContext.Provider, { value: { isOpen, onClose }, children: /* @__PURE__ */ jsx49(
     "div",
     {
       className: "grid max-h-full grid-rows-[max-content_1fr_max-content] flex-col rounded-lg bg-uiBackground01 shadow-floatingShadow",
@@ -2533,10 +3497,10 @@ Popup.Header = PopupHeader;
 Popup.Footer = PopupFooter;
 
 // src/radio/radio.tsx
-import { focusVisible as focusVisible11 } from "@zenkigen-inc/component-theme";
-import clsx30 from "clsx";
-import { useCallback as useCallback8, useState as useState10 } from "react";
-import { jsx as jsx42, jsxs as jsxs19 } from "react/jsx-runtime";
+import { focusVisible as focusVisible12 } from "@zenkigen-inc/component-theme";
+import clsx34 from "clsx";
+import { useCallback as useCallback12, useState as useState12 } from "react";
+import { jsx as jsx50, jsxs as jsxs22 } from "react/jsx-runtime";
 function Radio({
   name,
   value,
@@ -2548,27 +3512,27 @@ function Radio({
   onChange
 }) {
   const isLarge = size === "large";
-  const [isMouseOver, setIsMouseOver] = useState10(false);
-  const handleMouseOverInput = useCallback8(() => {
+  const [isMouseOver, setIsMouseOver] = useState12(false);
+  const handleMouseOverInput = useCallback12(() => {
     setIsMouseOver(true);
   }, []);
-  const handleMouseOutInput = useCallback8(() => {
+  const handleMouseOutInput = useCallback12(() => {
     setIsMouseOver(false);
   }, []);
-  const handleChange = useCallback8(
+  const handleChange = useCallback12(
     (e) => !isDisabled && onChange?.(e),
     [isDisabled, onChange]
   );
-  const inputClasses = clsx30("peer absolute z-[1] opacity-0", {
+  const inputClasses = clsx34("peer absolute z-[1] opacity-0", {
     "size-6": !isLarge,
     "size-8": isLarge,
     "cursor-not-allowed": isDisabled,
     "cursor-pointer": !isDisabled
   });
-  const boxClasses = clsx30(
+  const boxClasses = clsx34(
     "inline-flex items-center justify-center rounded-full border border-solid bg-white",
     { "size-5": !isLarge, "size-7": isLarge },
-    focusVisible11.normalPeer,
+    focusVisible12.normalPeer,
     {
       "border-disabled01 hover:border-disabled01": isDisabled && !isMouseOver,
       "border-hoverUiBorder": !isDisabled && isMouseOver,
@@ -2577,7 +3541,7 @@ function Radio({
       "cursor-pointer": !isDisabled
     }
   );
-  const afterClasses = clsx30(
+  const afterClasses = clsx34(
     "absolute inset-0 m-auto block rounded-full",
     { "size-3": !isLarge, "size-4": isLarge },
     {
@@ -2587,22 +3551,22 @@ function Radio({
       "scale-100": isChecked
     }
   );
-  const hoverIndicatorClasses = clsx30(
+  const hoverIndicatorClasses = clsx34(
     "inline-block rounded-full",
     { "size-3": !isLarge, "size-4": isLarge },
     {
       "bg-hoverUi": !isDisabled && !isChecked && isMouseOver
     }
   );
-  const labelClasses = clsx30("ml-2 flex-[1_0_0] select-none break-all", {
+  const labelClasses = clsx34("ml-2 flex-[1_0_0] select-none break-all", {
     "typography-label14regular": !isLarge,
     "typography-label16regular": isLarge,
     "pointer-events-none cursor-not-allowed text-disabled01": isDisabled,
     "cursor-pointer text-text01": !isDisabled
   });
-  return /* @__PURE__ */ jsxs19("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ jsxs19("div", { className: clsx30("relative flex items-center justify-center", { "size-6": !isLarge, "size-8": isLarge }), children: [
-      /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsxs22("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ jsxs22("div", { className: clsx34("relative flex items-center justify-center", { "size-6": !isLarge, "size-8": isLarge }), children: [
+      /* @__PURE__ */ jsx50(
         "input",
         {
           type: "checkbox",
@@ -2617,41 +3581,41 @@ function Radio({
           className: inputClasses
         }
       ),
-      /* @__PURE__ */ jsx42("div", { className: boxClasses, children: /* @__PURE__ */ jsxs19(
+      /* @__PURE__ */ jsx50("div", { className: boxClasses, children: /* @__PURE__ */ jsxs22(
         "div",
         {
-          className: clsx30("relative flex flex-[0_0_auto] items-center justify-center", {
+          className: clsx34("relative flex flex-[0_0_auto] items-center justify-center", {
             "size-5": !isLarge,
             "size-7": isLarge
           }),
           children: [
-            /* @__PURE__ */ jsx42("span", { className: afterClasses }),
-            /* @__PURE__ */ jsx42("span", { className: hoverIndicatorClasses })
+            /* @__PURE__ */ jsx50("span", { className: afterClasses }),
+            /* @__PURE__ */ jsx50("span", { className: hoverIndicatorClasses })
           ]
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx42("label", { htmlFor: id, className: labelClasses, children: label })
+    /* @__PURE__ */ jsx50("label", { htmlFor: id, className: labelClasses, children: label })
   ] });
 }
 
 // src/search/search.tsx
-import { clsx as clsx31 } from "clsx";
-import { forwardRef as forwardRef10 } from "react";
-import { jsx as jsx43, jsxs as jsxs20 } from "react/jsx-runtime";
-var Search = forwardRef10(({ width = "100%", size = "medium", ...props }, ref) => {
-  const classes = clsx31(
+import { clsx as clsx35 } from "clsx";
+import { forwardRef as forwardRef12 } from "react";
+import { jsx as jsx51, jsxs as jsxs23 } from "react/jsx-runtime";
+var Search = forwardRef12(({ width = "100%", size = "medium", ...props }, ref) => {
+  const classes = clsx35(
     "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 = clsx31("mx-2 h-full flex-1 text-text01 outline-none placeholder:text-textPlaceholder", {
+  const inputClasses = clsx35("mx-2 h-full flex-1 text-text01 outline-none placeholder:text-textPlaceholder", {
     ["typography-label14regular"]: size === "medium",
     ["typography-label16regular"]: size === "large"
   });
-  return /* @__PURE__ */ jsx43("div", { className: "relative", ref, children: /* @__PURE__ */ jsx43("form", { onSubmit: props.onSubmit, children: /* @__PURE__ */ jsxs20("div", { className: classes, style: { width }, children: [
-    /* @__PURE__ */ jsx43(Icon, { name: "search", color: "icon01", size: "medium" }),
-    /* @__PURE__ */ jsx43(
+  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(
       "input",
       {
         type: "text",
@@ -2662,7 +3626,7 @@ var Search = forwardRef10(({ width = "100%", size = "medium", ...props }, ref) =
         onChange: props.onChange
       }
     ),
-    props.onClickClearButton && props.value && props.value.length !== 0 && /* @__PURE__ */ jsx43(
+    props.onClickClearButton && props.value && props.value.length !== 0 && /* @__PURE__ */ jsx51(
       IconButton,
       {
         variant: "text",
@@ -2677,17 +3641,17 @@ var Search = forwardRef10(({ width = "100%", size = "medium", ...props }, ref) =
 Search.displayName = "Search";
 
 // src/segmented-control/segmented-control.tsx
-import React4, { Children as Children3, useRef as useRef9 } from "react";
+import React4, { Children as Children5, useRef as useRef13 } from "react";
 
 // src/segmented-control/segmented-control-context.ts
-import { createContext as createContext9 } from "react";
-var SegmentedControlContext = createContext9(null);
+import { createContext as createContext12 } from "react";
+var SegmentedControlContext = createContext12(null);
 
 // src/segmented-control/segmented-control-item.tsx
-import { focusVisible as focusVisible12 } from "@zenkigen-inc/component-theme";
-import { clsx as clsx32 } from "clsx";
-import { useContext as useContext12, useEffect as useEffect7, useRef as useRef8 } from "react";
-import { jsx as jsx44, jsxs as jsxs21 } from "react/jsx-runtime";
+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";
 var SegmentedControlItem = ({
   label,
   value,
@@ -2696,9 +3660,9 @@ var SegmentedControlItem = ({
   "aria-label": ariaLabel,
   ...rest
 }) => {
-  const context = useContext12(SegmentedControlContext);
-  const buttonRef = useRef8(null);
-  const lastInteractionWasMouse = useRef8(false);
+  const context = useContext15(SegmentedControlContext);
+  const buttonRef = useRef12(null);
+  const lastInteractionWasMouse = useRef12(false);
   if (context === null) {
     throw new Error("SegmentedControl.Item must be used within SegmentedControl");
   }
@@ -2714,7 +3678,7 @@ var SegmentedControlItem = ({
   const isSelected = value === selectedValue;
   const isFocused = value === focusedValue;
   const isOptionDisabled = isContextDisabled || itemDisabled === true;
-  useEffect7(() => {
+  useEffect11(() => {
     if (isFocused === true && buttonRef.current !== null) {
       buttonRef.current.focus();
     }
@@ -2736,7 +3700,7 @@ var SegmentedControlItem = ({
     lastInteractionWasMouse.current = false;
     onBlur?.();
   };
-  const buttonClasses = clsx32("relative flex items-center justify-center gap-1 rounded", focusVisible12.normal, {
+  const buttonClasses = clsx36("relative flex items-center justify-center gap-1 rounded", focusVisible13.normal, {
     "px-2 min-h-[24px] typography-label12regular": size === "small",
     "px-4 min-h-[32px] typography-label14regular": size === "medium",
     // States - Default with hover
@@ -2746,7 +3710,7 @@ var SegmentedControlItem = ({
     // States - Disabled
     "text-disabled01 bg-transparent": isOptionDisabled === true
   });
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs24(
     "button",
     {
       ref: buttonRef,
@@ -2763,25 +3727,25 @@ var SegmentedControlItem = ({
       onMouseDown: handleMouseDown,
       ...rest,
       children: [
-        Boolean(icon) === true && icon && /* @__PURE__ */ jsx44(
+        Boolean(icon) === true && icon && /* @__PURE__ */ jsx52(
           "span",
           {
-            className: clsx32("flex items-center", {
+            className: clsx36("flex items-center", {
               "fill-disabled01": isOptionDisabled === true,
               "fill-interactive01": isSelected === true && isOptionDisabled === false,
               "fill-icon01": isSelected === false && isOptionDisabled === false
             }),
-            children: /* @__PURE__ */ jsx44(Icon, { name: icon, size: "small" })
+            children: /* @__PURE__ */ jsx52(Icon, { name: icon, size: "small" })
           }
         ),
-        Boolean(label) === true && /* @__PURE__ */ jsx44("span", { className: "whitespace-nowrap", children: label })
+        Boolean(label) === true && /* @__PURE__ */ jsx52("span", { className: "whitespace-nowrap", children: label })
       ]
     }
   );
 };
 
 // src/segmented-control/segmented-control.tsx
-import { Fragment as Fragment5, jsx as jsx45 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx53 } from "react/jsx-runtime";
 var SegmentedControl = ({
   children,
   value,
@@ -2791,15 +3755,15 @@ var SegmentedControl = ({
   "aria-label": ariaLabel,
   ...rest
 }) => {
-  const containerRef = useRef9(null);
-  const itemIds = Children3.toArray(children).filter((child) => {
+  const containerRef = useRef13(null);
+  const itemIds = Children5.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 = Children3.count(children);
+  const childrenCount = Children5.count(children);
   const containerStyle = { gridTemplateColumns: `repeat(${childrenCount}, minmax(0,1fr))` };
   const {
     focusedValue,
@@ -2826,7 +3790,7 @@ var SegmentedControl = ({
     onBlur: handleBlurRovingFocus,
     values: itemIds
   };
-  return /* @__PURE__ */ jsx45(Fragment5, { children: /* @__PURE__ */ jsx45(SegmentedControlContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx53(Fragment6, { children: /* @__PURE__ */ jsx53(SegmentedControlContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx53(
     "div",
     {
       ref: containerRef,
@@ -2843,37 +3807,39 @@ var SegmentedControl = ({
 SegmentedControl.Item = SegmentedControlItem;
 
 // src/select-sort/select-sort.tsx
-import { buttonColors as buttonColors4, focusVisible as focusVisible15 } from "@zenkigen-inc/component-theme";
-import clsx35 from "clsx";
-import { useCallback as useCallback9, useRef as useRef10, useState as useState11 } from "react";
+import { buttonColors as buttonColors4, focusVisible as focusVisible16 } from "@zenkigen-inc/component-theme";
+import clsx39 from "clsx";
+import { useCallback as useCallback13, useRef as useRef14, useState as useState13 } from "react";
 
 // src/select-sort/select-list.tsx
-import { focusVisible as focusVisible14 } from "@zenkigen-inc/component-theme";
-import clsx34 from "clsx";
+import { focusVisible as focusVisible15 } from "@zenkigen-inc/component-theme";
+import clsx38 from "clsx";
 
 // src/select-sort/select-item.tsx
-import { focusVisible as focusVisible13 } from "@zenkigen-inc/component-theme";
-import clsx33 from "clsx";
-import { jsx as jsx46, jsxs as jsxs22 } from "react/jsx-runtime";
-function SelectItem2({ children, isSortKey, onClickItem }) {
-  const itemClasses = clsx33(
-    "typography-label14regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02",
-    focusVisible13.inset,
+import { focusVisible as focusVisible14 } from "@zenkigen-inc/component-theme";
+import clsx37 from "clsx";
+import { jsx as jsx54, jsxs as jsxs25 } from "react/jsx-runtime";
+function SelectItem2({ children, isSortKey, size, onClickItem }) {
+  const itemClasses = clsx37(
+    "typography-label14regular flex w-full items-center px-3 hover:bg-hover02 active:bg-active02",
+    focusVisible14.inset,
     {
+      "h-8": size !== "large",
+      "h-10": size === "large",
       "bg-selectedUi fill-interactive01 text-interactive01": isSortKey,
       "bg-uiBackground01 fill-icon01 text-interactive02": !isSortKey
     }
   );
-  return /* @__PURE__ */ jsx46("li", { className: "flex w-full items-center", onClick: onClickItem, children: /* @__PURE__ */ jsxs22("button", { className: itemClasses, type: "button", children: [
-    /* @__PURE__ */ jsx46("span", { className: "ml-1 mr-6", children }),
-    isSortKey && /* @__PURE__ */ jsx46("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx46(Icon, { name: "check", size: "small" }) })
+  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" }) })
   ] }) });
 }
 
 // src/select-sort/select-list.tsx
-import { jsx as jsx47, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs26 } from "react/jsx-runtime";
 function SelectList2({ size, variant, sortOrder, onClickItem, onClickDeselect }) {
-  const listClasses = clsx34(
+  const listClasses = clsx38(
     "absolute z-dropdown w-max overflow-y-auto rounded bg-uiBackground01 py-2 shadow-floatingShadow",
     {
       "top-7": size === "x-small" || size === "small",
@@ -2882,19 +3848,23 @@ function SelectList2({ size, variant, sortOrder, onClickItem, onClickDeselect })
       "border-solid border border-uiBorder01": variant === "outline"
     }
   );
-  const deselectButtonClasses = clsx34(
-    "typography-label14regular flex h-8 w-full items-center px-3 text-interactive02 hover:bg-hover02 active:bg-active02",
-    focusVisible14.inset
+  const deselectButtonClasses = clsx38(
+    "typography-label14regular flex w-full items-center px-3 text-interactive02 hover:bg-hover02 active:bg-active02",
+    focusVisible15.inset,
+    {
+      "h-8": size !== "large",
+      "h-10": size === "large"
+    }
   );
-  return /* @__PURE__ */ jsxs23("ul", { className: listClasses, children: [
-    /* @__PURE__ */ jsx47(SelectItem2, { isSortKey: sortOrder === "ascend", onClickItem: () => onClickItem("ascend"), children: "\u6607\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
-    /* @__PURE__ */ jsx47(SelectItem2, { isSortKey: sortOrder === "descend", onClickItem: () => onClickItem("descend"), children: "\u964D\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
-    sortOrder !== null && onClickDeselect && /* @__PURE__ */ jsx47("li", { children: /* @__PURE__ */ jsx47("button", { className: deselectButtonClasses, type: "button", onClick: onClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
+  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" }) })
   ] });
 }
 
 // src/select-sort/select-sort.tsx
-import { jsx as jsx48, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs27 } from "react/jsx-runtime";
 function SelectSort({
   size = "medium",
   variant = "outline",
@@ -2906,8 +3876,8 @@ function SelectSort({
   onChange,
   onClickDeselect
 }) {
-  const [isOptionListOpen, setIsOptionListOpen] = useState11(false);
-  const targetRef = useRef10(null);
+  const [isOptionListOpen, setIsOptionListOpen] = useState13(false);
+  const targetRef = useRef14(null);
   useOutsideClick(targetRef, () => setIsOptionListOpen(false));
   useDismissOnModalOpen(() => {
     if (isOptionListOpen) {
@@ -2915,25 +3885,25 @@ function SelectSort({
     }
   });
   const handleClickToggle = () => setIsOptionListOpen((prev) => !prev);
-  const handleClickItem = useCallback9(
+  const handleClickItem = useCallback13(
     (value) => {
       onChange?.(value);
       setIsOptionListOpen(false);
     },
     [onChange]
   );
-  const wrapperClasses = clsx35("relative flex shrink-0 items-center gap-1 rounded", {
+  const wrapperClasses = clsx39("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 = clsx35(
+  const buttonClasses = clsx39(
     "flex size-full items-center rounded",
     buttonColors4[variant].hover,
     buttonColors4[variant].active,
     buttonColors4[variant].disabled,
-    focusVisible15.normal,
+    focusVisible16.normal,
     {
       [buttonColors4[variant].selected]: isSortKey,
       [buttonColors4[variant].base]: !isSortKey,
@@ -2942,23 +3912,23 @@ function SelectSort({
       "pointer-events-none": isDisabled
     }
   );
-  const labelClasses = clsx35("truncate", {
+  const labelClasses = clsx39("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__ */ jsxs24("div", { className: wrapperClasses, style: { width }, ref: targetRef, children: [
-    /* @__PURE__ */ jsxs24("button", { className: buttonClasses, type: "button", onClick: handleClickToggle, disabled: isDisabled, children: [
-      /* @__PURE__ */ jsx48("div", { className: labelClasses, children: label }),
-      /* @__PURE__ */ jsx48("div", { className: "ml-auto flex items-center", children: isSortKey ? /* @__PURE__ */ jsx48(
+  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(
         Icon,
         {
           name: sortOrder === "ascend" ? "arrow-up" : "arrow-down",
           size: size === "large" ? "medium" : "small"
         }
-      ) : /* @__PURE__ */ jsx48(
+      ) : /* @__PURE__ */ jsx56(
         Icon,
         {
           name: isOptionListOpen ? "angle-small-up" : "angle-small-down",
@@ -2966,7 +3936,7 @@ function SelectSort({
         }
       ) })
     ] }),
-    isOptionListOpen && !isDisabled && /* @__PURE__ */ jsx48(
+    isOptionListOpen && !isDisabled && /* @__PURE__ */ jsx56(
       SelectList2,
       {
         size,
@@ -2980,10 +3950,10 @@ function SelectSort({
 }
 
 // src/sort-button/sort-button.tsx
-import { buttonColors as buttonColors5, focusVisible as focusVisible16 } from "@zenkigen-inc/component-theme";
-import clsx36 from "clsx";
-import { useCallback as useCallback10 } from "react";
-import { jsx as jsx49, jsxs as jsxs25 } from "react/jsx-runtime";
+import { buttonColors as buttonColors5, focusVisible as focusVisible17 } from "@zenkigen-inc/component-theme";
+import clsx40 from "clsx";
+import { useCallback as useCallback14 } from "react";
+import { jsx as jsx57, jsxs as jsxs28 } from "react/jsx-runtime";
 function SortButton({
   size = "medium",
   width,
@@ -2994,7 +3964,7 @@ function SortButton({
   "aria-label": ariaLabel,
   ...rest
 }) {
-  const handleClick = useCallback10(() => {
+  const handleClick = useCallback14(() => {
     if (isDisabled || !onClick) return;
     onClick();
   }, [isDisabled, onClick]);
@@ -3003,18 +3973,18 @@ function SortButton({
     if (sortOrder === "descend") return "arrow-down";
     return "angle-small-down";
   };
-  const wrapperClasses = clsx36("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 = clsx36(
+  const buttonClasses = clsx40(
     "flex size-full items-center rounded",
     buttonColors5.text.hover,
     buttonColors5.text.active,
     buttonColors5.text.disabled,
-    focusVisible16.normal,
+    focusVisible17.normal,
     {
       [buttonColors5.text.selected]: !isDisabled && sortOrder !== null,
       // ソート状態時は選択状態のスタイル
@@ -3025,14 +3995,14 @@ function SortButton({
       "pointer-events-none": isDisabled
     }
   );
-  const labelClasses = clsx36("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__ */ jsx49("div", { className: wrapperClasses, style: { width }, children: /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsx57("div", { className: wrapperClasses, style: { width }, children: /* @__PURE__ */ jsxs28(
     "button",
     {
       className: buttonClasses,
@@ -3043,22 +4013,265 @@ function SortButton({
       "aria-label": ariaLabel,
       "aria-disabled": isDisabled,
       children: [
-        /* @__PURE__ */ jsx49("div", { className: labelClasses, children: label }),
-        /* @__PURE__ */ jsx49("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx49(Icon, { name: getIconName(), size: size === "large" ? "medium" : "small" }) })
+        /* @__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" }) })
       ]
     }
   ) });
 }
 
+// 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";
+
+// src/steps/steps-context.ts
+import { createContext as createContext13, useContext as useContext16 } from "react";
+var StepsContext = createContext13(null);
+function useStepsContext() {
+  const context = useContext16(StepsContext);
+  if (context === null) {
+    throw new Error("Steps.Item must be used within <Steps>");
+  }
+  return context;
+}
+
+// src/steps/steps-item.tsx
+import { clsx as clsx42 } from "clsx";
+
+// src/steps/steps-item-context.ts
+import { createContext as createContext14, useContext as useContext17 } from "react";
+var StepsItemContext = createContext14(null);
+function useStepsItemContext() {
+  const context = useContext17(StepsItemContext);
+  if (context === null) {
+    throw new Error("Steps.Item must be rendered inside a <Steps> component");
+  }
+  return context;
+}
+
+// src/steps/steps-separator.tsx
+import { clsx as clsx41 } from "clsx";
+import { jsx as jsx58 } 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__ */ jsx58("div", { "aria-hidden": "true", className: clsx41("h-px flex-1", colorClass) });
+}
+
+// src/steps/steps-item.tsx
+import { jsx as jsx59, jsxs as jsxs29 } 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({
+    "size-6 typography-label12regular": size === "small",
+    "size-8 typography-label12regular": size === "medium",
+    "size-10 typography-label16regular": size === "large"
+  });
+}
+function getCircleVariantProgressClass(variant, progress) {
+  return clsx42({
+    // 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",
+    "bg-supportInfoLight text-text01 border-transparent": variant === "subtle" && progress === "completed",
+    // solid
+    "bg-uiBackground01 text-text01 border-uiBorder01": variant === "solid" && progress === "upcoming",
+    "bg-activeUi text-text01 border-interactive01": variant === "solid" && progress === "current",
+    "bg-interactive01 text-iconOnColor border-transparent": variant === "solid" && progress === "completed"
+  });
+}
+function getCircleClasses(size, variant, state) {
+  return clsx42(
+    "box-border flex items-center justify-center rounded-full border-2",
+    getCircleSizeClass(size),
+    getCircleVariantProgressClass(variant, state.progress)
+    // 将来追加: state.isError && getCircleErrorOverlay(variant)
+    // 将来追加: state.isDisabled && getCircleDisabledOverlay()
+  );
+}
+function getIconSize(size) {
+  if (size === "small") return "medium";
+  if (size === "medium") return "large";
+  return "x-large";
+}
+function StepsItem({ label, description }) {
+  const { size, orientation, textOrientation, variant } = useStepsContext();
+  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(
+      "span",
+      {
+        className: clsx42(
+          "whitespace-nowrap text-text01",
+          size === "large" ? "typography-body16regular" : "typography-body14regular"
+        ),
+        children: [
+          /* @__PURE__ */ jsx59("span", { className: "sr-only", children: progressSrOnlyLabel[state.progress] }),
+          label
+        ]
+      }
+    ),
+    description != null && /* @__PURE__ */ jsx59("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: [
+      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: [
+      circle,
+      labelBlock
+    ] }) });
+  }
+  if (orientation === "vertical" && textOrientation === "horizontal") {
+    return /* @__PURE__ */ jsxs29(
+      "li",
+      {
+        ...ariaCurrentProps,
+        className: clsx42(
+          "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 }) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs29("li", { ...ariaCurrentProps, className: clsx42("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 }) })
+  ] });
+}
+StepsItem.displayName = "Steps.Item";
+
+// src/steps/steps.tsx
+import { jsx as jsx60 } from "react/jsx-runtime";
+function getSeparatorCellHeightClass(size) {
+  if (size === "small") return "h-6";
+  if (size === "medium") return "h-8";
+  return "h-10";
+}
+function HorizontalSeparatorCell({
+  progress,
+  size,
+  textOrientation
+}) {
+  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 }) });
+}
+function collectStepsItems(children) {
+  const result = [];
+  Children6.toArray(children).forEach((child) => {
+    if (!isValidElement5(child)) {
+      return;
+    }
+    if (child.type === StepsItem) {
+      result.push(child);
+      return;
+    }
+    if (child.type === Fragment7) {
+      const fragmentChildren = child.props.children;
+      result.push(...collectStepsItems(fragmentChildren));
+    }
+  });
+  return result;
+}
+function StepsRoot({
+  children,
+  currentStep,
+  defaultCurrentStep,
+  size = "medium",
+  orientation = "horizontal",
+  textOrientation = "horizontal",
+  variant = "solid",
+  "aria-label": ariaLabel
+}) {
+  const baseId = useId5();
+  const [internalStep] = useState14(defaultCurrentStep ?? 0);
+  const resolvedCurrentStep = currentStep ?? internalStep;
+  const itemElements = useMemo6(() => collectStepsItems(children), [children]);
+  const stepsCount = itemElements.length;
+  const contextValue = useMemo6(
+    () => ({
+      size,
+      orientation,
+      textOrientation,
+      variant
+    }),
+    [size, orientation, textOrientation, variant]
+  );
+  if (stepsCount === 0) {
+    return null;
+  }
+  const states = itemElements.map((_item, index) => ({
+    progress: index < resolvedCurrentStep ? "completed" : index === resolvedCurrentStep ? "current" : "upcoming"
+  }));
+  const wrapItem = (item, index) => {
+    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}`);
+  };
+  const renderedChildren = orientation === "horizontal" ? itemElements.flatMap((item, index) => {
+    const nodes = [wrapItem(item, index)];
+    if (index < stepsCount - 1) {
+      nodes.push(
+        /* @__PURE__ */ jsx60(
+          HorizontalSeparatorCell,
+          {
+            progress: states[index]?.progress ?? "upcoming",
+            size,
+            textOrientation
+          },
+          `sep-${index}`
+        )
+      );
+    }
+    return nodes;
+  }) : itemElements.map((item, index) => wrapItem(item, index));
+  const listClassName = clsx43(
+    orientation === "horizontal" ? ["grid w-full gap-x-2", textOrientation === "vertical" ? "items-start" : "items-center"] : "flex flex-col items-stretch"
+  );
+  const horizontalGridTemplate = Array.from(
+    { length: stepsCount },
+    (_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 }) });
+}
+var Steps = StepsRoot;
+Steps.Item = StepsItem;
+
 // src/tab/tab.tsx
-import { clsx as clsx38 } from "clsx";
-import { Children as Children4 } from "react";
+import { clsx as clsx45 } from "clsx";
+import { Children as Children7 } from "react";
 
 // src/tab/tab-item.tsx
-import { clsx as clsx37 } from "clsx";
-import { jsx as jsx50, jsxs as jsxs26 } from "react/jsx-runtime";
+import { clsx as clsx44 } from "clsx";
+import { jsx as jsx61, jsxs as jsxs30 } from "react/jsx-runtime";
 var TabItem = ({ isSelected = false, isDisabled = false, icon, ...props }) => {
-  const classes = clsx37(
+  const classes = clsx44(
     "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,
@@ -3066,12 +4279,12 @@ var TabItem = ({ isSelected = false, isDisabled = false, icon, ...props }) => {
       "before:bg-interactive01 hover:before:bg-interactive01 pointer-events-none": isSelected
     }
   );
-  const iconWrapperClasses = clsx37("flex shrink-0 items-center", {
+  const iconWrapperClasses = clsx44("flex shrink-0 items-center", {
     "fill-disabled01": isDisabled,
     "fill-interactive01": !isDisabled && isSelected,
     "fill-icon01 group-hover:fill-interactive01": !isDisabled && !isSelected
   });
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs30(
     "button",
     {
       type: "button",
@@ -3081,7 +4294,7 @@ var TabItem = ({ isSelected = false, isDisabled = false, icon, ...props }) => {
       disabled: isDisabled,
       onClick: () => props.onClick(props.id),
       children: [
-        icon != null && /* @__PURE__ */ jsx50("span", { className: iconWrapperClasses, children: /* @__PURE__ */ jsx50(Icon, { name: icon, size: "small" }) }),
+        icon != null && /* @__PURE__ */ jsx61("span", { className: iconWrapperClasses, children: /* @__PURE__ */ jsx61(Icon, { name: icon, size: "small" }) }),
         props.children
       ]
     }
@@ -3089,39 +4302,39 @@ var TabItem = ({ isSelected = false, isDisabled = false, icon, ...props }) => {
 };
 
 // src/tab/tab.tsx
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx62 } from "react/jsx-runtime";
 function Tab({ children, layout = "auto" }) {
-  const childrenCount = Children4.count(children);
+  const childrenCount = Children7.count(children);
   const containerStyle = layout === "equal" ? { gridTemplateColumns: `repeat(${childrenCount}, minmax(0,1fr))` } : {};
-  const containerClasses = clsx38(
+  const containerClasses = clsx45(
     "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__ */ jsx51("div", { role: "tablist", className: containerClasses, style: containerStyle, children });
+  return /* @__PURE__ */ jsx62("div", { role: "tablist", className: containerClasses, style: containerStyle, children });
 }
 Tab.Item = TabItem;
 
 // src/table/table-cell.tsx
-import clsx39 from "clsx";
-import { jsx as jsx52 } from "react/jsx-runtime";
+import clsx46 from "clsx";
+import { jsx as jsx63 } from "react/jsx-runtime";
 function TableCell({ children, className, isHeader = false }) {
-  const classes = clsx39("border-b border-uiBorder01", { "sticky top-0 z-10 bg-white": isHeader }, className);
-  return /* @__PURE__ */ jsx52("div", { className: classes, children });
+  const classes = clsx46("border-b border-uiBorder01", { "sticky top-0 z-10 bg-white": isHeader }, className);
+  return /* @__PURE__ */ jsx63("div", { className: classes, children });
 }
 
 // src/table/table-row.tsx
-import clsx40 from "clsx";
-import { jsx as jsx53 } from "react/jsx-runtime";
+import clsx47 from "clsx";
+import { jsx as jsx64 } from "react/jsx-runtime";
 function TableRow({ children, isHoverBackgroundVisible = false }) {
-  const rowClasses = clsx40("contents", isHoverBackgroundVisible && "[&:hover>div]:bg-hoverUi02");
-  return /* @__PURE__ */ jsx53("div", { className: rowClasses, children });
+  const rowClasses = clsx47("contents", isHoverBackgroundVisible && "[&:hover>div]:bg-hoverUi02");
+  return /* @__PURE__ */ jsx64("div", { className: rowClasses, children });
 }
 
 // src/table/table.tsx
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
 function Table({
   width,
   templateRows,
@@ -3130,7 +4343,7 @@ function Table({
   autoRows,
   children
 }) {
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx65(
     "div",
     {
       className: "grid",
@@ -3150,22 +4363,22 @@ Table.Cell = TableCell;
 
 // src/tag/tag.tsx
 import { tagColors, tagLightColors } from "@zenkigen-inc/component-theme";
-import clsx42 from "clsx";
+import clsx49 from "clsx";
 
 // src/tag/delete-icon.tsx
-import { focusVisible as focusVisible17 } from "@zenkigen-inc/component-theme";
-import clsx41 from "clsx";
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { focusVisible as focusVisible18 } from "@zenkigen-inc/component-theme";
+import clsx48 from "clsx";
+import { jsx as jsx66 } from "react/jsx-runtime";
 var DeleteIcon = ({ color, variant, onClick }) => {
-  const deleteButtonClasses = clsx41(
+  const deleteButtonClasses = clsx48(
     "group ml-2 size-[14px] rounded-full p-0.5 hover:cursor-pointer hover:bg-iconOnColor focus-visible:bg-iconOnColor",
-    focusVisible17.normal
+    focusVisible18.normal
   );
-  const deletePathClasses = clsx41({
+  const deletePathClasses = clsx48({
     "fill-interactive02": color === "gray" || variant === "light",
     "group-hover:fill-interactive02 group-focus-visible:fill-interactive02 fill-iconOnColor": color !== "gray"
   });
-  return /* @__PURE__ */ jsx55("button", { type: "button", className: deleteButtonClasses, onClick, children: /* @__PURE__ */ jsx55("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx55(
+  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(
     "path",
     {
       fillRule: "evenodd",
@@ -3177,9 +4390,9 @@ var DeleteIcon = ({ color, variant, onClick }) => {
 };
 
 // src/tag/tag.tsx
-import { jsx as jsx56, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs31 } from "react/jsx-runtime";
 function Tag({ id, children, color, variant = "normal", size = "medium", isEditable, onDelete }) {
-  const wrapperClasses = clsx42("flex", "items-center", "justify-center", {
+  const wrapperClasses = clsx49("flex", "items-center", "justify-center", {
     [tagColors[color]]: variant === "normal",
     [tagLightColors[color]]: variant === "light",
     "h-[14px] typography-label11regular": !isEditable && size === "x-small",
@@ -3190,21 +4403,21 @@ function Tag({ id, children, color, variant = "normal", size = "medium", isEdita
     "px-1": !isEditable,
     "px-2": isEditable
   });
-  return /* @__PURE__ */ jsxs27("div", { className: wrapperClasses, children: [
+  return /* @__PURE__ */ jsxs31("div", { className: wrapperClasses, children: [
     children,
-    isEditable ? /* @__PURE__ */ jsx56(DeleteIcon, { onClick: () => onDelete(id), color, variant }) : null
+    isEditable ? /* @__PURE__ */ jsx67(DeleteIcon, { onClick: () => onDelete(id), color, variant }) : null
   ] });
 }
 
 // src/text-area/text-area.tsx
-import { clsx as clsx45 } from "clsx";
-import { Children as Children5, cloneElement as cloneElement5, forwardRef as forwardRef13, isValidElement as isValidElement3, useId as useId4, useMemo as useMemo4 } from "react";
+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";
 
 // src/text-area/text-area-context.tsx
-import { createContext as createContext10, useContext as useContext13 } from "react";
-var TextAreaCompoundContext = createContext10(null);
+import { createContext as createContext15, useContext as useContext18 } from "react";
+var TextAreaCompoundContext = createContext15(null);
 var useTextAreaCompoundContext = (componentName) => {
-  const context = useContext13(TextAreaCompoundContext);
+  const context = useContext18(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`);
   }
@@ -3212,10 +4425,10 @@ var useTextAreaCompoundContext = (componentName) => {
 };
 
 // src/text-area/text-area-error-message.tsx
-import { clsx as clsx43 } from "clsx";
-import { forwardRef as forwardRef11 } from "react";
-import { jsx as jsx57 } from "react/jsx-runtime";
-var TextAreaErrorMessage = forwardRef11(
+import { clsx as clsx50 } from "clsx";
+import { forwardRef as forwardRef13 } from "react";
+import { jsx as jsx68 } from "react/jsx-runtime";
+var TextAreaErrorMessage = forwardRef13(
   ({ "aria-live": ariaLive = "assertive", ...props }, ref) => {
     const { textAreaProps } = useTextAreaCompoundContext("TextArea.ErrorMessage");
     const typographyClass = textAreaProps.size === "large" ? "typography-label13regular" : "typography-label12regular";
@@ -3223,26 +4436,26 @@ var TextAreaErrorMessage = forwardRef11(
     if (!shouldRender) {
       return null;
     }
-    const errorMessageClassName = clsx43(typographyClass, "text-supportError");
-    return /* @__PURE__ */ jsx57("div", { ref, className: errorMessageClassName, "aria-live": ariaLive, ...props });
+    const errorMessageClassName = clsx50(typographyClass, "text-supportError");
+    return /* @__PURE__ */ jsx68("div", { ref, className: errorMessageClassName, "aria-live": ariaLive, ...props });
   }
 );
 TextAreaErrorMessage.displayName = "TextArea.ErrorMessage";
 
 // src/text-area/text-area-helper-message.tsx
-import { clsx as clsx44 } from "clsx";
-import { forwardRef as forwardRef12 } from "react";
-import { jsx as jsx58 } from "react/jsx-runtime";
-var TextAreaHelperMessage = forwardRef12((props, ref) => {
+import { clsx as clsx51 } from "clsx";
+import { forwardRef as forwardRef14 } from "react";
+import { jsx as jsx69 } 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 = clsx44(typographyClass, "text-text02");
-  return /* @__PURE__ */ jsx58("div", { ref, className: helperMessageClassName, ...props });
+  const helperMessageClassName = clsx51(typographyClass, "text-text02");
+  return /* @__PURE__ */ jsx69("div", { ref, className: helperMessageClassName, ...props });
 });
 TextAreaHelperMessage.displayName = "TextArea.HelperMessage";
 
 // src/text-area/text-area.tsx
-import { jsx as jsx59, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs32 } from "react/jsx-runtime";
 function TextAreaInner({
   size = "medium",
   variant = "outline",
@@ -3259,8 +4472,8 @@ function TextAreaInner({
   maxLength,
   ...props
 }, ref) {
-  const autoGeneratedId = useId4();
-  const textAreaPropsForContext = useMemo4(
+  const autoGeneratedId = useId6();
+  const textAreaPropsForContext = useMemo7(
     () => ({
       size,
       variant,
@@ -3268,7 +4481,7 @@ function TextAreaInner({
     }),
     [size, variant, isError]
   );
-  const contextValue = useMemo4(
+  const contextValue = useMemo7(
     () => ({
       textAreaProps: textAreaPropsForContext,
       forwardedRef: ref
@@ -3278,8 +4491,8 @@ function TextAreaInner({
   const helperMessageIds = [];
   const errorIds = [];
   const describedByBaseId = props.id ?? autoGeneratedId;
-  const enhancedChildren = Children5.map(children, (child) => {
-    if (!isValidElement3(child)) {
+  const enhancedChildren = Children8.map(children, (child) => {
+    if (!isValidElement6(child)) {
       return child;
     }
     if (child.type === TextAreaHelperMessage) {
@@ -3319,7 +4532,7 @@ function TextAreaInner({
     ...maxLengthProps
   };
   const isBorderless = variant === "text";
-  const textAreaWrapperClassName = clsx45(
+  const textAreaWrapperClassName = clsx52(
     "box-border flex w-full overflow-hidden rounded border",
     {
       // outline variant
@@ -3335,7 +4548,7 @@ function TextAreaInner({
     // className は variant="outline" のみ受け入れ、後方互換のため wrapper の末尾に合成（@deprecated）
     !isBorderless && className
   );
-  const textAreaClassName = clsx45("w-full border-none bg-uiBackground01 outline-none", {
+  const textAreaClassName = clsx52("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",
@@ -3354,7 +4567,7 @@ function TextAreaInner({
     "resize-none": !isResizable
   });
   const hasHeight = height != null && String(height).trim().length > 0;
-  const textAreaElement = /* @__PURE__ */ jsx59(
+  const textAreaElement = /* @__PURE__ */ jsx70(
     "div",
     {
       className: textAreaWrapperClassName,
@@ -3365,7 +4578,7 @@ function TextAreaInner({
         ...!autoHeight && hasHeight && !isResizable ? { height } : {},
         ...autoHeight && hasHeight ? { minHeight: height } : {}
       },
-      children: /* @__PURE__ */ jsx59(
+      children: /* @__PURE__ */ jsx70(
         "textarea",
         {
           ref,
@@ -3381,11 +4594,11 @@ function TextAreaInner({
       )
     }
   );
-  const counterElement = isCounterVisible ? /* @__PURE__ */ jsx59(
+  const counterElement = isCounterVisible ? /* @__PURE__ */ jsx70(
     "div",
     {
       id: counterId,
-      className: clsx45(
+      className: clsx52(
         "shrink-0",
         size === "large" ? "typography-label13regular" : "typography-label12regular",
         !disabled && isExceeded ? "text-supportError" : "text-text02"
@@ -3394,17 +4607,17 @@ function TextAreaInner({
       children: counterLimit != null ? `${currentLength}/${counterLimit}\u6587\u5B57` : `${currentLength}\u6587\u5B57`
     }
   ) : null;
-  const stackedChildren = enhancedChildren == null ? [] : Children5.toArray(enhancedChildren);
+  const stackedChildren = enhancedChildren == null ? [] : Children8.toArray(enhancedChildren);
   const hasMessageChildren = stackedChildren.length > 0;
   const hasBottomContent = hasMessageChildren || counterElement != null;
   if (!hasBottomContent) {
-    return /* @__PURE__ */ jsx59(TextAreaCompoundContext.Provider, { value: contextValue, children: textAreaElement });
+    return /* @__PURE__ */ jsx70(TextAreaCompoundContext.Provider, { value: contextValue, children: textAreaElement });
   }
-  return /* @__PURE__ */ jsx59(TextAreaCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs28("div", { className: "flex flex-col gap-2", children: [
+  return /* @__PURE__ */ jsx70(TextAreaCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs32("div", { className: "flex flex-col gap-2", children: [
     textAreaElement,
-    /* @__PURE__ */ jsxs28("div", { className: "flex items-start justify-between gap-2", children: [
-      hasMessageChildren && /* @__PURE__ */ jsx59("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: stackedChildren }),
-      !hasMessageChildren && counterElement != null && /* @__PURE__ */ jsx59("div", { className: "flex-1" }),
+    /* @__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" }),
       counterElement
     ] })
   ] }) });
@@ -3415,15 +4628,15 @@ var attachStatics2 = (component) => {
   component.displayName = "TextArea";
   return component;
 };
-var TextAreaBase = forwardRef13(function TextAreaBase2(props, ref) {
+var TextAreaBase = forwardRef15(function TextAreaBase2(props, ref) {
   return TextAreaInner(props, ref);
 });
 var TextArea = attachStatics2(TextAreaBase);
 
 // src/toast/toast.tsx
-import clsx46 from "clsx";
-import { useCallback as useCallback11, useEffect as useEffect8, useState as useState12 } from "react";
-import { jsx as jsx60, jsxs as jsxs29 } from "react/jsx-runtime";
+import clsx53 from "clsx";
+import { useCallback as useCallback15, useEffect as useEffect12, useState as useState15 } from "react";
+import { jsx as jsx71, jsxs as jsxs33 } from "react/jsx-runtime";
 var CLOSE_TIME_MSEC = 5e3;
 function Toast({
   state = "information",
@@ -3433,8 +4646,8 @@ function Toast({
   children,
   onClickClose
 }) {
-  const [isRemoving, setIsRemoving] = useState12(false);
-  const handleClose = useCallback11(() => {
+  const [isRemoving, setIsRemoving] = useState15(false);
+  const handleClose = useCallback15(() => {
     if (isAnimation) {
       setIsRemoving(true);
     } else {
@@ -3442,17 +4655,17 @@ function Toast({
     }
   }, [isAnimation, onClickClose]);
   const handleAnimationEnd = (e) => window.getComputedStyle(e.currentTarget).opacity === "0" && onClickClose();
-  const wrapperClasses = clsx46("pointer-events-auto flex items-start gap-1 bg-white p-4 shadow-floatingShadow", {
+  const wrapperClasses = clsx53("pointer-events-auto flex items-start gap-1 bg-white p-4 shadow-floatingShadow", {
     ["animate-toast-in"]: isAnimation && !isRemoving,
     ["animate-toast-out opacity-0"]: isAnimation && isRemoving
   });
-  const iconClasses = clsx46("flex items-center", {
+  const iconClasses = clsx53("flex items-center", {
     "fill-supportSuccess": state === "success",
     "fill-supportError": state === "error",
     "fill-supportWarning": state === "warning",
     "fill-supportInfo": state === "information"
   });
-  const textClasses = clsx46("typography-body13regular flex-1 pt-[3px]", {
+  const textClasses = clsx53("typography-body13regular flex-1 pt-[3px]", {
     "text-supportError": state === "error",
     "text-text01": state === "success" || state === "warning" || state === "information"
   });
@@ -3462,7 +4675,7 @@ function Toast({
     warning: "warning",
     information: "information-filled"
   };
-  useEffect8(() => {
+  useEffect12(() => {
     const timer = window.setTimeout(() => {
       if (isAutoClose) {
         setIsRemoving(true);
@@ -3470,45 +4683,45 @@ function Toast({
     }, CLOSE_TIME_MSEC);
     return () => window.clearTimeout(timer);
   }, [isAutoClose]);
-  return /* @__PURE__ */ jsxs29("div", { className: wrapperClasses, style: { width }, onAnimationEnd: handleAnimationEnd, children: [
-    /* @__PURE__ */ jsx60("div", { className: iconClasses, children: /* @__PURE__ */ jsx60(Icon, { name: iconName[state] }) }),
-    /* @__PURE__ */ jsx60("p", { className: textClasses, children }),
-    /* @__PURE__ */ jsx60(IconButton, { icon: "close", size: "medium", variant: "text", onClick: handleClose, isNoPadding: true })
+  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 })
   ] });
 }
 
 // src/toast/toast-provider.tsx
-import { createContext as createContext11, useCallback as useCallback12, useContext as useContext14, useEffect as useEffect9, useState as useState13 } from "react";
+import { createContext as createContext16, useCallback as useCallback16, useContext as useContext19, useEffect as useEffect13, useState as useState16 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { jsx as jsx61, jsxs as jsxs30 } from "react/jsx-runtime";
-var ToastContext = createContext11({});
+import { jsx as jsx72, jsxs as jsxs34 } from "react/jsx-runtime";
+var ToastContext = createContext16({});
 var ToastProvider = ({ children }) => {
-  const [isClientRender, setIsClientRender] = useState13(false);
-  const [toasts, setToasts] = useState13([]);
-  const addToast = useCallback12(({ message, state }) => {
+  const [isClientRender, setIsClientRender] = useState16(false);
+  const [toasts, setToasts] = useState16([]);
+  const addToast = useCallback16(({ message, state }) => {
     setToasts((prev) => [...prev, { id: Math.trunc(Math.random() * 1e5), message, state }]);
   }, []);
-  const removeToast = useCallback12((id) => {
+  const removeToast = useCallback16((id) => {
     setToasts((prev) => prev.filter((snackbar) => snackbar.id !== id));
   }, []);
-  useEffect9(() => {
+  useEffect13(() => {
     setIsClientRender(true);
   }, []);
-  return /* @__PURE__ */ jsxs30(ToastContext.Provider, { value: { addToast, removeToast }, children: [
+  return /* @__PURE__ */ jsxs34(ToastContext.Provider, { value: { addToast, removeToast }, children: [
     children,
     isClientRender && createPortal3(
-      /* @__PURE__ */ jsx61("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__ */ jsx61(Toast, { state, isAutoClose: true, isAnimation: true, onClickClose: () => removeToast(id), width: 475, children: message }, id)) }),
+      /* @__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)) }),
       document.body
     )
   ] });
 };
 var useToast = () => {
-  return useContext14(ToastContext);
+  return useContext19(ToastContext);
 };
 
 // src/toggle/toggle.tsx
-import clsx47 from "clsx";
-import { jsx as jsx62, jsxs as jsxs31 } from "react/jsx-runtime";
+import clsx54 from "clsx";
+import { jsx as jsx73, jsxs as jsxs35 } from "react/jsx-runtime";
 function Toggle({
   id,
   size = "medium",
@@ -3518,7 +4731,7 @@ function Toggle({
   labelPosition = "right",
   isDisabled = false
 }) {
-  const baseClasses = clsx47("relative flex items-center rounded-full", {
+  const baseClasses = clsx54("relative flex items-center rounded-full", {
     "bg-disabledOn": isDisabled && isChecked,
     "bg-disabled01": isDisabled && !isChecked,
     "bg-interactive01 peer-hover:bg-hover01": !isDisabled && isChecked,
@@ -3526,16 +4739,16 @@ function Toggle({
     "w-8 h-4 px-[3px]": size === "small",
     "w-12 h-6 px-1": size === "medium" || size === "large"
   });
-  const inputClasses = clsx47(
+  const inputClasses = clsx54(
     "peer absolute inset-0 z-[1] opacity-0",
     isDisabled ? "cursor-not-allowed" : "cursor-pointer"
   );
-  const indicatorClasses = clsx47("rounded-full bg-iconOnColor", {
+  const indicatorClasses = clsx54("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 = clsx47("break-all", {
+  const labelClasses = clsx54("break-all", {
     "mr-2": labelPosition === "left",
     "ml-2": labelPosition === "right",
     "typography-label14regular": size === "small" || size === "medium",
@@ -3543,9 +4756,9 @@ function Toggle({
     "pointer-events-none cursor-not-allowed text-disabled01": isDisabled,
     "cursor-pointer text-text01": !isDisabled
   });
-  return /* @__PURE__ */ jsxs31("div", { className: "relative flex flex-[0_0_auto] items-center", children: [
-    label != null && labelPosition === "left" && /* @__PURE__ */ jsx62("label", { htmlFor: id, className: labelClasses, children: label }),
-    /* @__PURE__ */ jsx62(
+  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(
       "input",
       {
         className: inputClasses,
@@ -3557,23 +4770,23 @@ function Toggle({
         disabled: isDisabled
       }
     ),
-    /* @__PURE__ */ jsx62("div", { className: baseClasses, children: /* @__PURE__ */ jsx62("span", { className: indicatorClasses }) }),
-    label != null && labelPosition === "right" && /* @__PURE__ */ jsx62("label", { htmlFor: id, className: labelClasses, children: label })
+    /* @__PURE__ */ jsx73("div", { className: baseClasses, children: /* @__PURE__ */ jsx73("span", { className: indicatorClasses }) }),
+    label != null && labelPosition === "right" && /* @__PURE__ */ jsx73("label", { htmlFor: id, className: labelClasses, children: label })
   ] });
 }
 
 // src/tooltip/tooltip.tsx
-import { useCallback as useCallback14, useEffect as useEffect10, useRef as useRef11, useState as useState14 } from "react";
+import { useCallback as useCallback18, useEffect as useEffect14, useRef as useRef15, useState as useState17 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
 // src/tooltip/tooltip-content.tsx
-import clsx49 from "clsx";
+import clsx56 from "clsx";
 
 // src/tooltip/tail-icon.tsx
-import clsx48 from "clsx";
-import { jsx as jsx63 } from "react/jsx-runtime";
+import clsx55 from "clsx";
+import { jsx as jsx74 } from "react/jsx-runtime";
 var TailIcon = (props) => {
-  const tailClasses = clsx48("absolute fill-uiBackgroundTooltip", {
+  const tailClasses = clsx55("absolute fill-uiBackgroundTooltip", {
     "rotate-180": props.verticalPosition === "bottom",
     "rotate-0": props.verticalPosition !== "bottom",
     "-top-1": props.verticalPosition === "bottom" && props.size === "small",
@@ -3588,9 +4801,9 @@ var TailIcon = (props) => {
     "left-1/2 -translate-x-2": props.horizontalAlign === "center" && props.size !== "small"
   });
   if (props.size === "small") {
-    return /* @__PURE__ */ jsx63("svg", { className: tailClasses, width: "8", height: "4", viewBox: "0 0 8 4", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx63("path", { d: "M4 4L0 0H8L4 4Z" }) });
+    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" }) });
   } else {
-    return /* @__PURE__ */ jsx63(
+    return /* @__PURE__ */ jsx74(
       "svg",
       {
         className: tailClasses,
@@ -3599,14 +4812,14 @@ var TailIcon = (props) => {
         viewBox: "0 0 14 8",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        children: /* @__PURE__ */ jsx63("path", { d: "M7 8L0 0H14L7 8Z" })
+        children: /* @__PURE__ */ jsx74("path", { d: "M7 8L0 0H14L7 8Z" })
       }
     );
   }
 };
 
 // src/tooltip/tooltip-content.tsx
-import { jsx as jsx64, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs36 } from "react/jsx-runtime";
 var TooltipContent = ({
   content,
   horizontalAlign,
@@ -3616,7 +4829,7 @@ var TooltipContent = ({
   maxWidth,
   isPortal = false
 }) => {
-  const tooltipWrapperClasses = clsx49("absolute z-tooltip m-auto flex", {
+  const tooltipWrapperClasses = clsx56("absolute z-tooltip m-auto flex", {
     "top-0": !isPortal && verticalPosition === "top",
     "bottom-0": !isPortal && verticalPosition === "bottom",
     "justify-start": horizontalAlign === "left",
@@ -3625,7 +4838,7 @@ var TooltipContent = ({
     "w-[24px]": size === "small",
     "w-[46px]": size !== "small"
   });
-  const tooltipBodyClasses = clsx49(
+  const tooltipBodyClasses = clsx56(
     "absolute z-tooltip inline-block w-max rounded bg-uiBackgroundTooltip text-textOnColor",
     {
       "typography-body12regular": size === "small",
@@ -3642,7 +4855,7 @@ var TooltipContent = ({
     transform: `translate(${tooltipPosition.translateX}, ${tooltipPosition.translateY})`,
     ...tooltipPosition
   } : {};
-  return /* @__PURE__ */ jsx64("div", { className: tooltipWrapperClasses, style: tooltipWrapperStyle, children: /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsx75("div", { className: tooltipWrapperClasses, style: tooltipWrapperStyle, children: /* @__PURE__ */ jsxs36(
     "div",
     {
       className: tooltipBodyClasses,
@@ -3651,16 +4864,16 @@ var TooltipContent = ({
       },
       children: [
         content,
-        /* @__PURE__ */ jsx64(TailIcon, { size, verticalPosition, horizontalAlign })
+        /* @__PURE__ */ jsx75(TailIcon, { size, verticalPosition, horizontalAlign })
       ]
     }
   ) });
 };
 
 // src/tooltip/tooltip-hook.ts
-import { useCallback as useCallback13 } from "react";
+import { useCallback as useCallback17 } from "react";
 var useTooltip = () => {
-  const calculatePosition = useCallback13(
+  const calculatePosition = useCallback17(
     (args) => {
       const result = {
         maxWidth: "none",
@@ -3712,7 +4925,7 @@ var useTooltip = () => {
 };
 
 // src/tooltip/tooltip.tsx
-import { jsx as jsx65, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx76, jsxs as jsxs37 } from "react/jsx-runtime";
 function Tooltip({
   children,
   content,
@@ -3724,8 +4937,8 @@ function Tooltip({
   portalTarget
 }) {
   const { calculatePosition } = useTooltip();
-  const [isVisible, setIsVisible] = useState14(false);
-  const [tooltipPosition, setTooltipPosition] = useState14({
+  const [isVisible, setIsVisible] = useState17(false);
+  const [tooltipPosition, setTooltipPosition] = useState17({
     maxWidth: "none",
     width: "auto",
     left: "0px",
@@ -3734,8 +4947,8 @@ function Tooltip({
     translateX: "0",
     translateY: "0"
   });
-  const targetRef = useRef11(null);
-  const handleMouseOverWrapper = useCallback14(() => {
+  const targetRef = useRef15(null);
+  const handleMouseOverWrapper = useCallback18(() => {
     if (isDisabledHover) {
       return;
     }
@@ -3752,16 +4965,16 @@ function Tooltip({
     }
     setIsVisible(true);
   }, [isDisabledHover, calculatePosition, maxWidth, verticalPosition, horizontalAlign, size]);
-  const handleMouseOutWrapper = useCallback14(() => {
+  const handleMouseOutWrapper = useCallback18(() => {
     setIsVisible(false);
   }, []);
-  useEffect10(() => {
+  useEffect14(() => {
     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]);
-  useEffect10(() => {
+  useEffect14(() => {
     if (!isVisible) return;
     const updatePosition = () => {
       if (targetRef.current === null) return;
@@ -3782,7 +4995,7 @@ function Tooltip({
       window.removeEventListener("resize", updatePosition);
     };
   }, [isVisible, calculatePosition, maxWidth, verticalPosition, horizontalAlign, size]);
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs37(
     "div",
     {
       ref: targetRef,
@@ -3791,7 +5004,7 @@ function Tooltip({
       onMouseLeave: handleMouseOutWrapper,
       children: [
         children,
-        isVisible && (portalTarget == null ? /* @__PURE__ */ jsx65(
+        isVisible && (portalTarget == null ? /* @__PURE__ */ jsx76(
           TooltipContent,
           {
             content,
@@ -3802,7 +5015,7 @@ function Tooltip({
             tooltipPosition
           }
         ) : createPortal4(
-          /* @__PURE__ */ jsx65(
+          /* @__PURE__ */ jsx76(
             TooltipContent,
             {
               isPortal: true,
@@ -3822,9 +5035,11 @@ function Tooltip({
 }
 export {
   Avatar,
+  AvatarGroup,
   Breadcrumb,
   Button,
   Checkbox,
+  Combobox,
   DatePicker,
   Divider,
   Dropdown,
@@ -3849,6 +5064,7 @@ export {
   Select,
   SelectSort,
   SortButton,
+  Steps,
   Tab,
   TabItem,
   Table,