@zenkigen-inc/component-ui 1.20.3 → 1.20.4

package/dist/index.js

@@ -77,12 +77,11 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/avatar/avatar.tsx
-var import_component_theme2 = require("@zenkigen-inc/component-theme");
+var import_component_theme = require("@zenkigen-inc/component-theme");
 var import_clsx2 = require("clsx");
 
 // src/icon/icon.tsx
 var import_component_icons = require("@zenkigen-inc/component-icons");
-var import_component_theme = require("@zenkigen-inc/component-theme");
 var import_clsx = require("clsx");
 var import_jsx_runtime = require("react/jsx-runtime");
 var Icon = ({ size = "medium", isDisabled = false, ...props }) => {
@@ -90,10 +89,7 @@ var Icon = ({ size = "medium", isDisabled = false, ...props }) => {
     "inline-block shrink-0",
     {
       "fill-disabled01": isDisabled,
-      [import_component_theme.iconColors.icon01]: !isDisabled && props.color === "icon01",
-      [import_component_theme.iconColors.icon02]: !isDisabled && props.color === "icon02",
-      [import_component_theme.iconColors.icon03]: !isDisabled && props.color === "icon03",
-      [import_component_theme.iconColors.iconOnColor]: !isDisabled && props.color === "iconOnColor",
+      [`fill-${props.color}`]: !isDisabled && props.color != null,
       "w-3 h-3": size === "x-small",
       "w-4 h-4": size === "small",
       "w-6 h-6": size === "medium",
@@ -125,7 +121,7 @@ function Avatar({ size = "medium", ...props }) {
     "w-6 h-6 typography-label11regular": size === "x-small",
     "bg-disabled01": props.isDisabled,
     "bg-icon01": props.userId == null,
-    [import_component_theme2.userColors[(props.userId ?? 0) % import_component_theme2.userColors.length]]: props.userId != null && !(props.isDisabled ?? false)
+    [import_component_theme.userColors[(props.userId ?? 0) % import_component_theme.userColors.length]]: props.userId != null && !(props.isDisabled ?? false)
   });
   const hasName = props.firstName != null && props.firstName.trim() !== "" || props.lastName != null && props.lastName.trim() !== "";
   if (hasName === false) {
@@ -158,7 +154,7 @@ function Breadcrumb({ children }) {
 Breadcrumb.Item = BreadcrumbItem;
 
 // src/button/button.tsx
-var import_component_theme3 = require("@zenkigen-inc/component-theme");
+var import_component_theme2 = require("@zenkigen-inc/component-theme");
 var import_clsx3 = require("clsx");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var createButton = (props) => {
@@ -178,24 +174,25 @@ var createButton = (props) => {
   } = props;
   const baseClasses = (0, import_clsx3.clsx)(
     "flex shrink-0 items-center gap-1",
-    import_component_theme3.buttonColors[variant].hover,
-    import_component_theme3.buttonColors[variant].active,
-    import_component_theme3.buttonColors[variant].disabled,
-    import_component_theme3.focusVisible.normal,
+    import_component_theme2.buttonColors[variant].hover,
+    import_component_theme2.buttonColors[variant].active,
+    import_component_theme2.buttonColors[variant].disabled,
+    import_component_theme2.focusVisible.normal,
     {
       "h-6 px-2": size === "small",
       "h-8 px-3": size === "medium",
       "h-10 px-4 leading-[24px]": size === "large",
+      "h-12 px-4 leading-[24px]": size === "x-large",
       "inline-flex": elementAs === "a",
-      [import_component_theme3.buttonColors[variant].selected]: isSelected,
-      [import_component_theme3.buttonColors[variant].base]: !isSelected,
+      [import_component_theme2.buttonColors[variant].selected]: isSelected,
+      [import_component_theme2.buttonColors[variant].base]: !isSelected,
       "hover:text-textOnColor active:text-textOnColor [&:hover>*]:fill-iconOnColor [&:active>*]:fill-iconOnColor": isSelected && variant !== "outline" && variant !== "text" && variant !== "outlineDanger",
       "pointer-events-none": isDisabled,
       "rounded-button": borderRadius == null,
       "justify-start": justifyContent === "start",
       "justify-center": justifyContent === "center",
-      "typography-label16regular": size === "large",
-      "typography-label14regular": size !== "large"
+      "typography-label16regular": size === "large" || size === "x-large",
+      "typography-label14regular": size !== "large" && size !== "x-large"
     }
   );
   const Component = elementAs ?? "button";
@@ -213,19 +210,23 @@ var InternalButton = (props) => {
 };
 
 // src/checkbox/checkbox.tsx
-var import_component_theme4 = require("@zenkigen-inc/component-theme");
-var import_clsx4 = __toESM(require("clsx"));
+var import_component_theme3 = require("@zenkigen-inc/component-theme");
+var import_clsx6 = __toESM(require("clsx"));
 var import_react = require("react");
 
 // src/checkbox/checked-icon.tsx
+var import_clsx4 = __toESM(require("clsx"));
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var CheckedIcon = () => {
+var CheckedIcon = ({ size = "medium" }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "svg",
     {
       viewBox: "0 0 20 20",
       xmlns: "http://www.w3.org/2000/svg",
-      className: "absolute z-10 size-5 rounded-sm fill-iconOnColor hover:rounded-sm",
+      className: (0, import_clsx4.default)("absolute z-10 rounded-sm fill-iconOnColor hover:rounded-sm", {
+        "size-5": size === "medium",
+        "size-6": size === "large"
+      }),
       children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "path",
         {
@@ -239,14 +240,18 @@ var CheckedIcon = () => {
 };
 
 // src/checkbox/minus-icon.tsx
+var import_clsx5 = __toESM(require("clsx"));
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var MinusIcon = () => {
+var MinusIcon = ({ size = "medium" }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "svg",
     {
       viewBox: "0 0 20 20",
       xmlns: "http://www.w3.org/2000/svg",
-      className: "absolute z-10 size-5 rounded-sm fill-iconOnColor hover:rounded-sm",
+      className: (0, import_clsx5.default)("absolute z-10 rounded-sm fill-iconOnColor hover:rounded-sm", {
+        "size-5": size === "medium",
+        "size-6": size === "large"
+      }),
       children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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" })
     }
   );
@@ -263,7 +268,8 @@ function Checkbox({
   isDisabled = false,
   onChange,
   label,
-  color = "default"
+  color = "default",
+  size = "medium"
 }) {
   const [isMouseOver, setIsMouseOver] = (0, import_react.useState)(false);
   const handleMouseOverInput = (0, import_react.useCallback)(() => {
@@ -276,13 +282,15 @@ function Checkbox({
     (e) => !isDisabled && onChange?.(e),
     [isDisabled, onChange]
   );
-  const baseInputClasses = (0, import_clsx4.default)("peer absolute z-[1] size-5 opacity-0", {
+  const sizeBox = size === "large" ? "size-6" : "size-5";
+  const baseInputClasses = (0, import_clsx6.default)("peer absolute inset-0 z-[1] opacity-0", {
     "cursor-not-allowed": isDisabled,
     "cursor-pointer": !isDisabled
   });
-  const boxClasses = (0, import_clsx4.default)(
-    "inline-flex size-5 items-center justify-center rounded-sm border bg-white",
-    import_component_theme4.focusVisible.normalPeer,
+  const boxClasses = (0, import_clsx6.default)(
+    "inline-flex items-center justify-center rounded-sm border bg-white",
+    sizeBox,
+    import_component_theme3.focusVisible.normalPeer,
     {
       "border-disabled01": isDisabled,
       "border-hoverUiBorder": !isDisabled && isMouseOver && color === "default",
@@ -292,11 +300,11 @@ function Checkbox({
       "border-supportError": !isDisabled && !isMouseOver && color === "error"
     }
   );
-  const indicatorClasses = (0, import_clsx4.default)("relative flex size-5 flex-[0_0_auto] items-center justify-center", {
+  const indicatorClasses = (0, import_clsx6.default)("relative flex flex-[0_0_auto] items-center justify-center", sizeBox, {
     "bg-disabled01": isDisabled && isChecked,
     "border-disabled01": isDisabled
   });
-  const afterClasses = (0, import_clsx4.default)("absolute inset-0 m-auto block rounded-sm", {
+  const afterClasses = (0, import_clsx6.default)("absolute inset-0 m-auto block rounded-sm", {
     "bg-disabled01": isDisabled && isChecked,
     "bg-hover01": !(isDisabled && isChecked) && isMouseOver,
     "bg-interactive01": !(isDisabled && isChecked) && !isMouseOver,
@@ -307,15 +315,23 @@ function Checkbox({
     "scale-0": !isChecked,
     "scale-100": isChecked
   });
-  const hoverIndicatorClasses = (0, import_clsx4.default)("inline-block size-3 rounded-[1px]", {
+  const hoverIndicatorClasses = (0, import_clsx6.default)("inline-block rounded-[1px]", {
+    "size-3": size === "medium",
+    "size-4": size === "large",
     "bg-hoverUi": !isDisabled && !isChecked && isMouseOver
   });
-  const labelClasses = (0, import_clsx4.default)("typography-label14regular ml-2 flex-[1_0_0] break-all", {
+  const labelClasses = (0, import_clsx6.default)("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 = (0, import_clsx6.default)("relative flex items-center justify-center", {
+    "size-6": size === "medium",
+    "h-8 w-7": size === "large"
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative flex size-6 items-center justify-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: outerWrapperClasses, children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "input",
         {
@@ -333,8 +349,8 @@ function Checkbox({
       ),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: boxClasses, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: indicatorClasses, children: [
         /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: afterClasses, children: [
-          isChecked && !isIndeterminate && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckedIcon, {}),
-          isIndeterminate && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MinusIcon, {})
+          isChecked && !isIndeterminate && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckedIcon, { size }),
+          isIndeterminate && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MinusIcon, { size })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: hoverIndicatorClasses })
       ] }) })
@@ -345,12 +361,12 @@ function Checkbox({
 
 // src/date-picker/date-picker.tsx
 var import_style = require("react-day-picker/style.css");
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_react_day_picker4 = require("react-day-picker");
 
 // src/icon-button/icon-button.tsx
-var import_component_theme5 = require("@zenkigen-inc/component-theme");
-var import_clsx5 = require("clsx");
+var import_component_theme4 = require("@zenkigen-inc/component-theme");
+var import_clsx7 = require("clsx");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function IconButton({
   icon,
@@ -359,15 +375,16 @@ function IconButton({
   isNoPadding = false,
   isDisabled = false,
   isSelected = false,
+  iconColor,
   iconAccentColor,
   ...props
 }) {
-  const baseClasses = (0, import_clsx5.clsx)(
+  const baseClasses = (0, import_clsx7.clsx)(
     "typography-label16regular flex items-center justify-center gap-1 rounded",
-    import_component_theme5.buttonColors[variant].hover,
-    import_component_theme5.buttonColors[variant].active,
-    import_component_theme5.buttonColors[variant].disabled,
-    import_component_theme5.focusVisible.normal,
+    import_component_theme4.buttonColors[variant].hover,
+    import_component_theme4.buttonColors[variant].active,
+    import_component_theme4.buttonColors[variant].disabled,
+    import_component_theme4.focusVisible.normal,
     {
       "h-4 w-4": size === "small" && isNoPadding,
       "h-6 w-6": size === "small" && !isNoPadding || (size === "medium" || size === "large") && isNoPadding,
@@ -375,29 +392,45 @@ function IconButton({
       "h-10 w-10": size === "large" && !isNoPadding,
       "inline-flex": props.isAnchor,
       "pointer-events-none": isDisabled,
-      [import_component_theme5.buttonColors[variant].selected]: isSelected,
-      [import_component_theme5.buttonColors[variant].base]: !isSelected
+      [import_component_theme4.buttonColors[variant].selected]: isSelected,
+      [import_component_theme4.buttonColors[variant].base]: !isSelected
     }
   );
   const iconSize = size === "small" ? "small" : "medium";
+  const iconColorProps = !isSelected && iconColor ? { color: iconColor } : {};
   const iconAccentColorProps = !isSelected && iconAccentColor ? { accentColor: iconAccentColor } : {};
   if (props.isAnchor === true) {
     const buttonProps = Object.fromEntries(Object.entries(props).filter(([key]) => key !== "isAnchor"));
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("a", { className: baseClasses, ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: icon, size: iconSize, ...iconAccentColorProps }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("a", { className: baseClasses, ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: icon, size: iconSize, ...iconColorProps, ...iconAccentColorProps }) });
   } else {
     const buttonProps = Object.fromEntries(Object.entries(props).filter(([key]) => key !== "isAnchor"));
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: baseClasses, disabled: isDisabled, ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: icon, size: iconSize, ...iconAccentColorProps }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: baseClasses, disabled: isDisabled, ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: icon, size: iconSize, ...iconColorProps, ...iconAccentColorProps }) });
   }
 }
 
 // src/popover/popover.tsx
-var import_react6 = require("@floating-ui/react");
-var import_react7 = require("react");
+var import_react7 = require("@floating-ui/react");
+var import_react8 = require("react");
 
 // src/popover/popover-content.tsx
-var import_react3 = require("@floating-ui/react");
+var import_react4 = require("@floating-ui/react");
 var React = __toESM(require("react"));
-var import_react4 = require("react");
+var import_react5 = require("react");
+
+// src/hooks/use-dismiss-on-modal-open.ts
+var import_react2 = require("react");
+var MODAL_OPEN_EVENT = "zenkigen-modal-open";
+var useDismissOnModalOpen = (dismiss) => {
+  const dismissRef = (0, import_react2.useRef)(dismiss);
+  dismissRef.current = dismiss;
+  (0, import_react2.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) {
@@ -419,10 +452,10 @@ function isElement(node) {
 }
 
 // src/popover/popover-context.ts
-var import_react2 = require("react");
-var PopoverContext = (0, import_react2.createContext)(null);
+var import_react3 = require("react");
+var PopoverContext = (0, import_react3.createContext)(null);
 var usePopoverContext = () => {
-  const context = (0, import_react2.useContext)(PopoverContext);
+  const context = (0, import_react3.useContext)(PopoverContext);
   if (context == null) {
     throw new Error("Popover components must be used inside <Popover.Root>");
   }
@@ -431,16 +464,16 @@ var usePopoverContext = () => {
 
 // src/popover/popover-content.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var PopoverContent = (0, import_react4.forwardRef)(function PopoverContent2({ children }, ref) {
+var PopoverContent = (0, import_react5.forwardRef)(function PopoverContent2({ children }, ref) {
   const { isOpen, triggerRef, floating, panelId, onClose } = usePopoverContext();
-  const shouldCloseOnOutsidePress = (0, import_react4.useCallback)(
+  const shouldCloseOnOutsidePress = (0, import_react5.useCallback)(
     (event) => {
       const target = event.target;
       if (!(target instanceof Element)) {
         return true;
       }
       const floatingElement = floating.refs.floating.current;
-      const closestOverlay = target.closest(".z-overlay, .z-dropdown");
+      const closestOverlay = target.closest(".z-popover, .z-dropdown");
       if (closestOverlay !== null && floatingElement instanceof Element) {
         const isInsideOwnFloating = floatingElement.contains(closestOverlay);
         return isInsideOwnFloating;
@@ -449,27 +482,32 @@ var PopoverContent = (0, import_react4.forwardRef)(function PopoverContent2({ ch
     },
     [floating.refs.floating]
   );
-  const dismiss = (0, import_react3.useDismiss)(floating.context, {
+  const dismiss = (0, import_react4.useDismiss)(floating.context, {
     outsidePressEvent: "pointerdown",
     outsidePress: shouldCloseOnOutsidePress,
     escapeKey: false
   });
-  const interactions = (0, import_react3.useInteractions)([dismiss, (0, import_react3.useRole)(floating.context, { role: "dialog" })]);
-  (0, import_react4.useEffect)(() => {
+  const interactions = (0, import_react4.useInteractions)([dismiss, (0, import_react4.useRole)(floating.context, { role: "dialog" })]);
+  useDismissOnModalOpen(() => {
+    if (isOpen && onClose != null) {
+      onClose({ reason: "modal-open" });
+    }
+  });
+  (0, import_react5.useEffect)(() => {
     if (isOpen) {
       const element = floating.refs.floating.current;
       element?.focus?.({ preventScroll: true });
     }
   }, [isOpen, floating.refs.floating]);
-  const prevIsOpenRef = (0, import_react4.useRef)(isOpen);
-  (0, import_react4.useEffect)(() => {
+  const prevIsOpenRef = (0, import_react5.useRef)(isOpen);
+  (0, import_react5.useEffect)(() => {
     const hasPreviouslyBeenOpen = prevIsOpenRef.current;
     prevIsOpenRef.current = isOpen;
     if (hasPreviouslyBeenOpen && !isOpen) {
       triggerRef.current?.focus({ preventScroll: true });
     }
   }, [isOpen, triggerRef]);
-  const handleKeyDown = (0, import_react4.useCallback)(
+  const handleKeyDown = (0, import_react5.useCallback)(
     (event) => {
       if (event.key === "Escape") {
         event.stopPropagation();
@@ -489,7 +527,7 @@ var PopoverContent = (0, import_react4.forwardRef)(function PopoverContent2({ ch
       ...childProps.role == null && { role: "dialog" }
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react3.FloatingPortal, { children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react4.FloatingPortal, { children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "div",
     {
       ...interactions.getFloatingProps({
@@ -511,8 +549,8 @@ var PopoverContent = (0, import_react4.forwardRef)(function PopoverContent2({ ch
 
 // src/popover/popover-trigger.tsx
 var React2 = __toESM(require("react"));
-var import_react5 = require("react");
-var PopoverTrigger = (0, import_react5.forwardRef)(function PopoverTrigger2({ children }, ref) {
+var import_react6 = require("react");
+var PopoverTrigger = (0, import_react6.forwardRef)(function PopoverTrigger2({ children }, ref) {
   const { isOpen, floating, triggerRef, anchorRef, panelId } = usePopoverContext();
   if (!isElement(children)) {
     return null;
@@ -549,8 +587,8 @@ function Popover({
   onClose,
   anchorRef
 }) {
-  const triggerRef = (0, import_react7.useRef)(null);
-  const floating = (0, import_react6.useFloating)({
+  const triggerRef = (0, import_react8.useRef)(null);
+  const floating = (0, import_react7.useFloating)({
     open: isOpen,
     onOpenChange: (open) => {
       if (!open && onClose != null) {
@@ -558,18 +596,18 @@ function Popover({
       }
     },
     placement,
-    middleware: [(0, import_react6.offset)(offsetValue)],
-    whileElementsMounted: import_react6.autoUpdate,
+    middleware: [(0, import_react7.offset)(offsetValue)],
+    whileElementsMounted: import_react7.autoUpdate,
     strategy: "fixed"
   });
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (anchorRef?.current) {
       floating.refs.setReference(anchorRef.current);
     }
   }, [anchorRef, floating.refs]);
-  const contentId = (0, import_react6.useId)() ?? "";
+  const contentId = (0, import_react7.useId)() ?? "";
   const panelId = `${contentId}-panel`;
-  const contextValue = (0, import_react7.useMemo)(
+  const contextValue = (0, import_react8.useMemo)(
     () => ({
       isOpen,
       triggerRef,
@@ -587,10 +625,10 @@ Popover.Trigger = PopoverTrigger;
 Popover.Content = PopoverContent;
 
 // src/date-picker/date-picker-context.tsx
-var import_react8 = require("react");
-var DatePickerCompoundContext = (0, import_react8.createContext)(null);
+var import_react9 = require("react");
+var DatePickerCompoundContext = (0, import_react9.createContext)(null);
 var useDatePickerCompoundContext = (componentName) => {
-  const context = (0, import_react8.useContext)(DatePickerCompoundContext);
+  const context = (0, import_react9.useContext)(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`);
   }
@@ -598,12 +636,12 @@ var useDatePickerCompoundContext = (componentName) => {
 };
 
 // src/date-picker/date-picker-day-button.tsx
-var import_component_theme6 = require("@zenkigen-inc/component-theme");
-var import_clsx7 = require("clsx");
+var import_component_theme5 = require("@zenkigen-inc/component-theme");
+var import_clsx9 = require("clsx");
 var import_react_day_picker2 = require("react-day-picker");
 
 // src/date-picker/date-picker-styles.ts
-var import_clsx6 = require("clsx");
+var import_clsx8 = require("clsx");
 var import_react_day_picker = require("react-day-picker");
 var defaultDayPickerClassNames = (0, import_react_day_picker.getDefaultClassNames)();
 var DAY_PICKER_FONT_SIZE = "12px";
@@ -620,7 +658,7 @@ var dayPickerStyle = {
   fontWeight: 700
 };
 var dayPickerClassNames = {
-  month: (0, import_clsx6.clsx)(defaultDayPickerClassNames.month, "flex flex-col px-[7px] py-2")
+  month: (0, import_clsx8.clsx)(defaultDayPickerClassNames.month, "flex flex-col px-[7px] py-2")
 };
 var dayButtonBaseClass = "relative grid size-full place-items-center rounded-full !border !border-solid";
 
@@ -640,12 +678,12 @@ var CustomDayButton = ({ day, modifiers, className, style, ...buttonProps }) =>
       day,
       modifiers,
       style: { ...style, fontSize: DAY_PICKER_FONT_SIZE },
-      className: (0, import_clsx7.clsx)(
+      className: (0, import_clsx9.clsx)(
         className,
         dayButtonBaseClass,
         // 共通: フォーカスリング（有効な日のみ）
         // react-day-picker の rdp-day_button クラスが outline: none を設定しているため、!important で上書き
-        !isDisabledDay && import_component_theme6.focusVisible.normalImportant,
+        !isDisabledDay && import_component_theme5.focusVisible.normalImportant,
         // minDate/maxDate 制限日
         isMinMaxDisabled && "!cursor-not-allowed !border-transparent !text-disabled01",
         // 範囲外の日（前後月）
@@ -663,24 +701,24 @@ var CustomDayButton = ({ day, modifiers, className, style, ...buttonProps }) =>
 };
 
 // src/date-picker/date-picker-error-message.tsx
-var import_clsx8 = require("clsx");
-var import_react9 = require("react");
+var import_clsx10 = require("clsx");
+var import_react10 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var DatePickerErrorMessage = (0, import_react9.forwardRef)(
+var DatePickerErrorMessage = (0, import_react10.forwardRef)(
   ({ "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 = (0, import_clsx8.clsx)(typographyClass, "text-supportError");
+    const errorMessageClassName = (0, import_clsx10.clsx)(typographyClass, "text-supportError");
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref, className: errorMessageClassName, "aria-live": ariaLive, ...props });
   }
 );
 DatePickerErrorMessage.displayName = "DatePicker.ErrorMessage";
 
 // src/date-picker/date-picker-month-caption.tsx
-var import_clsx9 = require("clsx");
+var import_clsx11 = require("clsx");
 var import_react_day_picker3 = require("react-day-picker");
 
 // src/date-picker/date-picker-utils.ts
@@ -754,7 +792,7 @@ var CustomMonthCaption = ({ calendarMonth, className, displayIndex, style, ...pr
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
-      className: (0, import_clsx9.clsx)("flex items-center justify-between px-1 pb-0.5", className),
+      className: (0, import_clsx11.clsx)("flex items-center justify-between px-1 pb-0.5", className),
       style: { ...style, fontSize: "inherit", fontWeight: "inherit" },
       ...props,
       children: [
@@ -787,14 +825,14 @@ var CustomMonthCaption = ({ calendarMonth, className, displayIndex, style, ...pr
 };
 
 // src/date-picker/date-picker-weekday.tsx
-var import_clsx10 = require("clsx");
+var import_clsx12 = require("clsx");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var CustomWeekday = ({ className, children, style, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "th",
     {
       ...props,
-      className: (0, import_clsx10.clsx)(className, "m-0 size-7 p-0 text-center align-middle text-text02"),
+      className: (0, import_clsx12.clsx)(className, "m-0 size-7 p-0 text-center align-middle text-text02"),
       style: { ...style, fontSize: "inherit", fontWeight: "bold" },
       children
     }
@@ -818,32 +856,32 @@ var DatePicker = ({
   type,
   ...restProps
 }) => {
-  const autoGeneratedId = (0, import_react10.useId)();
+  const autoGeneratedId = (0, import_react11.useId)();
   const describedByBaseId = restProps.id ?? autoGeneratedId;
-  const [isOpen, setIsOpen] = (0, import_react10.useState)(false);
-  const [displayMonth, setDisplayMonth] = (0, import_react10.useState)(() => {
+  const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
+  const [displayMonth, setDisplayMonth] = (0, import_react11.useState)(() => {
     if (value == null) {
       const todayKey = formatLocalDateKey(/* @__PURE__ */ new Date());
       return createLocalDateFromKey(`${todayKey.slice(0, 7)}-01`);
     }
     return getMonthStartDate(value, timeZone);
   });
-  const calendarRef = (0, import_react10.useRef)(null);
-  const selectedKey = (0, import_react10.useMemo)(() => value == null ? null : formatDateKey(value, timeZone), [value, timeZone]);
-  const selectedDate = (0, import_react10.useMemo)(() => {
+  const calendarRef = (0, import_react11.useRef)(null);
+  const selectedKey = (0, import_react11.useMemo)(() => value == null ? null : formatDateKey(value, timeZone), [value, timeZone]);
+  const selectedDate = (0, import_react11.useMemo)(() => {
     if (selectedKey == null) {
       return;
     }
     return createLocalDateFromKey(selectedKey);
   }, [selectedKey]);
-  const minKey = (0, import_react10.useMemo)(() => minDate == null ? null : formatDateKey(minDate, timeZone), [minDate, timeZone]);
-  const maxKey = (0, import_react10.useMemo)(() => maxDate == null ? null : formatDateKey(maxDate, timeZone), [maxDate, timeZone]);
-  const currentMonthKey = (0, import_react10.useMemo)(() => formatLocalDateKey(displayMonth).slice(0, 7), [displayMonth]);
-  const isOutsideMonth = (0, import_react10.useCallback)(
+  const minKey = (0, import_react11.useMemo)(() => minDate == null ? null : formatDateKey(minDate, timeZone), [minDate, timeZone]);
+  const maxKey = (0, import_react11.useMemo)(() => maxDate == null ? null : formatDateKey(maxDate, timeZone), [maxDate, timeZone]);
+  const currentMonthKey = (0, import_react11.useMemo)(() => formatLocalDateKey(displayMonth).slice(0, 7), [displayMonth]);
+  const isOutsideMonth = (0, import_react11.useCallback)(
     (date) => formatLocalDateKey(date).slice(0, 7) !== currentMonthKey,
     [currentMonthKey]
   );
-  const isMinMaxDisabled = (0, import_react10.useCallback)(
+  const isMinMaxDisabled = (0, import_react11.useCallback)(
     (date) => {
       const dateKey = formatLocalDateKey(date);
       if (minKey != null && dateKey < minKey) {
@@ -856,7 +894,7 @@ var DatePicker = ({
     },
     [maxKey, minKey]
   );
-  const disabledDays = (0, import_react10.useCallback)(
+  const disabledDays = (0, import_react11.useCallback)(
     (date) => {
       if (isOutsideMonth(date)) {
         return true;
@@ -865,8 +903,8 @@ var DatePicker = ({
     },
     [isOutsideMonth, isMinMaxDisabled]
   );
-  const todayForCalendar = (0, import_react10.useMemo)(() => createLocalDateFromKey(formatLocalDateKey()), []);
-  (0, import_react10.useEffect)(() => {
+  const todayForCalendar = (0, import_react11.useMemo)(() => createLocalDateFromKey(formatLocalDateKey()), []);
+  (0, import_react11.useEffect)(() => {
     if (value == null) {
       const todayKey = formatLocalDateKey(/* @__PURE__ */ new Date());
       setDisplayMonth(createLocalDateFromKey(`${todayKey.slice(0, 7)}-01`));
@@ -874,7 +912,7 @@ var DatePicker = ({
     }
     setDisplayMonth(getMonthStartDate(value, timeZone));
   }, [value, timeZone]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!isOpen) {
       return;
     }
@@ -890,7 +928,7 @@ var DatePicker = ({
     });
     return () => cancelAnimationFrame(frame);
   }, [displayMonth, isOpen, value]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (isDisabled) {
       setIsOpen(false);
     }
@@ -921,7 +959,7 @@ var DatePicker = ({
     const todayKey = formatLocalDateKey(/* @__PURE__ */ new Date());
     setDisplayMonth(createLocalDateFromKey(`${todayKey.slice(0, 7)}-01`));
   };
-  const formatters = (0, import_react10.useMemo)(() => {
+  const formatters = (0, import_react11.useMemo)(() => {
     const weekdayFormatter = new Intl.DateTimeFormat("ja-JP", { weekday: "short" });
     return {
       formatCaption: (date) => formatMonthLabel(date),
@@ -933,15 +971,15 @@ var DatePicker = ({
   const displayText = value ? formatDisplayDate(value, timeZone) : placeholder;
   const displayTextClasses = "min-w-0 truncate";
   const errorIds = [];
-  const enhancedChildren = import_react10.Children.map(children, (child) => {
-    if (!(0, import_react10.isValidElement)(child)) {
+  const enhancedChildren = import_react11.Children.map(children, (child) => {
+    if (!(0, import_react11.isValidElement)(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 (0, import_react10.cloneElement)(errorChild, { id: assignedId });
+      return (0, import_react11.cloneElement)(errorChild, { id: assignedId });
     }
     return child;
   });
@@ -961,7 +999,7 @@ var DatePicker = ({
     ...describedByProps,
     ...ariaInvalidProps
   };
-  const contextValue = (0, import_react10.useMemo)(
+  const contextValue = (0, import_react11.useMemo)(
     () => ({
       size,
       isError
@@ -1021,7 +1059,7 @@ var DatePicker = ({
       ] })
     ] }) })
   ] });
-  const stackedChildren = enhancedChildren == null ? [] : import_react10.Children.toArray(enhancedChildren);
+  const stackedChildren = enhancedChildren == null ? [] : import_react11.Children.toArray(enhancedChildren);
   const hasMessageChildren = stackedChildren.length > 0;
   if (!hasMessageChildren) {
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DatePickerCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex flex-col", children: popoverContent }) });
@@ -1041,15 +1079,15 @@ function Divider() {
 }
 
 // src/dropdown/dropdown.tsx
-var import_component_theme8 = require("@zenkigen-inc/component-theme");
-var import_clsx13 = __toESM(require("clsx"));
-var import_react15 = require("react");
+var import_component_theme7 = require("@zenkigen-inc/component-theme");
+var import_clsx15 = __toESM(require("clsx"));
+var import_react16 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/hooks/use-outside-click.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 var useOutsideClick = (ref, handler, enabled = true) => {
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     const listener = (event) => {
       const element = ref?.current;
       const target = event.target;
@@ -1069,8 +1107,8 @@ var useOutsideClick = (ref, handler, enabled = true) => {
 };
 
 // src/dropdown/dropdown-context.ts
-var import_react12 = require("react");
-var DropdownContext = (0, import_react12.createContext)({
+var import_react13 = require("react");
+var DropdownContext = (0, import_react13.createContext)({
   isVisible: false,
   setIsVisible: () => false,
   isDisabled: false,
@@ -1079,19 +1117,19 @@ var DropdownContext = (0, import_react12.createContext)({
 });
 
 // src/dropdown/dropdown-item.tsx
-var import_component_theme7 = require("@zenkigen-inc/component-theme");
-var import_clsx11 = __toESM(require("clsx"));
-var import_react13 = require("react");
+var import_component_theme6 = require("@zenkigen-inc/component-theme");
+var import_clsx13 = __toESM(require("clsx"));
+var import_react14 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function DropdownItem({ children, color = "gray", onClick }) {
-  const { setIsVisible } = (0, import_react13.useContext)(DropdownContext);
+  const { setIsVisible } = (0, import_react14.useContext)(DropdownContext);
   const handleClickItem = (event) => {
     setIsVisible(false);
     onClick?.(event);
   };
-  const itemClasses = (0, import_clsx11.default)(
+  const itemClasses = (0, import_clsx13.default)(
     "typography-label14regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02",
-    import_component_theme7.focusVisible.inset,
+    import_component_theme6.focusVisible.inset,
     {
       "bg-uiBackground01 fill-icon01 text-interactive02": color === "gray",
       "fill-supportDanger text-supportDanger": color === "red"
@@ -1101,8 +1139,8 @@ function DropdownItem({ children, color = "gray", onClick }) {
 }
 
 // src/dropdown/dropdown-menu.tsx
-var import_clsx12 = __toESM(require("clsx"));
-var import_react14 = require("react");
+var import_clsx14 = __toESM(require("clsx"));
+var import_react15 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function DropdownMenu({
   children,
@@ -1111,8 +1149,8 @@ function DropdownMenu({
   verticalPosition = "bottom",
   horizontalAlign = "left"
 }) {
-  const { isVisible, isDisabled, targetDimensions, variant, portalTargetRef } = (0, import_react14.useContext)(DropdownContext);
-  const wrapperClasses = (0, import_clsx12.default)("z-dropdown w-max overflow-y-auto rounded bg-uiBackground01 shadow-floatingShadow", {
+  const { isVisible, isDisabled, targetDimensions, variant, portalTargetRef } = (0, import_react15.useContext)(DropdownContext);
+  const wrapperClasses = (0, import_clsx14.default)("z-dropdown w-max overflow-y-auto rounded bg-uiBackground01 shadow-floatingShadow", {
     absolute: !portalTargetRef,
     "border-solid border border-uiBorder01": variant === "outline",
     "py-1": !isNoPadding,
@@ -1148,14 +1186,19 @@ function Dropdown({
   isArrowHidden = false,
   portalTargetRef
 }) {
-  const [isVisible, setIsVisible] = (0, import_react15.useState)(false);
-  const [targetDimensions, setTargetDimensions] = (0, import_react15.useState)({
+  const [isVisible, setIsVisible] = (0, import_react16.useState)(false);
+  const [targetDimensions, setTargetDimensions] = (0, import_react16.useState)({
     width: 0,
     height: 0
   });
-  const targetRef = (0, import_react15.useRef)(null);
+  const targetRef = (0, import_react16.useRef)(null);
   useOutsideClick(targetRef, () => setIsVisible(false));
-  const handleToggle = (0, import_react15.useCallback)(() => {
+  useDismissOnModalOpen(() => {
+    if (isVisible) {
+      setIsVisible(false);
+    }
+  });
+  const handleToggle = (0, import_react16.useCallback)(() => {
     if (targetRef.current === null) {
       return;
     }
@@ -1171,24 +1214,24 @@ function Dropdown({
       setIsVisible(true);
     }
   }, [isVisible]);
-  const wrapperClasses = (0, import_clsx13.default)("relative flex shrink-0 items-center gap-1 rounded", {
+  const wrapperClasses = (0, import_clsx15.default)("relative flex shrink-0 items-center gap-1 rounded", {
     "cursor-not-allowed": isDisabled
   });
-  const childrenButtonClasses = (0, import_clsx13.default)(
+  const childrenButtonClasses = (0, import_clsx15.default)(
     "flex items-center justify-center rounded bg-uiBackground01 p-1 hover:bg-hover02 active:bg-active02",
-    import_component_theme8.focusVisible.normal,
+    import_component_theme7.focusVisible.normal,
     {
       "pointer-events-none": isDisabled,
       "border border-uiBorder02": variant === "outline"
     }
   );
-  const buttonClasses = (0, import_clsx13.default)(
+  const buttonClasses = (0, import_clsx15.default)(
     "flex items-center rounded bg-uiBackground01",
-    import_component_theme8.buttonColors[variant].base,
-    import_component_theme8.buttonColors[variant].hover,
-    import_component_theme8.buttonColors[variant].active,
-    import_component_theme8.buttonColors[variant].disabled,
-    import_component_theme8.focusVisible.normal,
+    import_component_theme7.buttonColors[variant].base,
+    import_component_theme7.buttonColors[variant].hover,
+    import_component_theme7.buttonColors[variant].active,
+    import_component_theme7.buttonColors[variant].disabled,
+    import_component_theme7.focusVisible.normal,
     {
       "pointer-events-none": isDisabled,
       "h-6 px-2": size === "x-small" || size === "small",
@@ -1196,7 +1239,7 @@ function Dropdown({
       "h-10 px-4": size === "large"
     }
   );
-  const labelClasses = (0, import_clsx13.default)("flex items-center", {
+  const labelClasses = (0, import_clsx15.default)("flex items-center", {
     "mr-1": !isArrowHidden && size === "x-small",
     "mr-2": !isArrowHidden && size !== "x-small",
     "typography-label12regular": size === "x-small",
@@ -1242,14 +1285,14 @@ Dropdown.Item = DropdownItem;
 
 // src/evaluation-star/evaluation-star.tsx
 var import_component_icons2 = require("@zenkigen-inc/component-icons");
-var import_component_theme9 = require("@zenkigen-inc/component-theme");
-var import_clsx14 = __toESM(require("clsx"));
-var import_react16 = require("react");
+var import_component_theme8 = require("@zenkigen-inc/component-theme");
+var import_clsx16 = __toESM(require("clsx"));
+var import_react17 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function EvaluationStar({ value, isEditable = false, onChangeRating, size = "medium" }) {
   const maxRating = 5;
-  const [currentRating, setCurrentRating] = (0, import_react16.useState)(value);
-  const handleChangeRating = (0, import_react16.useCallback)(
+  const [currentRating, setCurrentRating] = (0, import_react17.useState)(value);
+  const handleChangeRating = (0, import_react17.useCallback)(
     (newRating) => {
       if (isEditable) {
         setCurrentRating(newRating);
@@ -1260,7 +1303,7 @@ function EvaluationStar({ value, isEditable = false, onChangeRating, size = "med
     },
     [isEditable, onChangeRating]
   );
-  const starClasses = (0, import_clsx14.default)(import_component_theme9.focusVisible.inset, { "w-6 h-6": size === "large", "w-4 h-4": size === "medium" });
+  const starClasses = (0, import_clsx16.default)(import_component_theme8.focusVisible.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 = import_component_icons2.iconElements["star-filled"];
@@ -1269,7 +1312,7 @@ function EvaluationStar({ value, isEditable = false, onChangeRating, size = "med
       {
         type: "button",
         onClick: () => handleChangeRating(rating),
-        className: (0, import_clsx14.default)(color, starClasses),
+        className: (0, import_clsx16.default)(color, starClasses),
         disabled: !isEditable,
         children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(IconComponent, {})
       },
@@ -1281,8 +1324,8 @@ function EvaluationStar({ value, isEditable = false, onChangeRating, size = "med
 }
 
 // src/file-input/file-input.tsx
-var import_clsx15 = require("clsx");
-var import_react17 = require("react");
+var import_clsx17 = require("clsx");
+var import_react18 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var ERROR_TYPES = {
   SIZE_TOO_LARGE: "SIZE_TOO_LARGE",
@@ -1292,16 +1335,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 = (0, import_react17.forwardRef)(
+var FileInput = (0, import_react18.forwardRef)(
   ({ id, variant, accept, maxSize, isDisabled = false, isError = false, onSelect, onError, errorMessages, ...rest }, ref) => {
     const size = variant === "button" ? rest.size ?? "medium" : "medium";
-    const [selectedFile, setSelectedFile] = (0, import_react17.useState)(null);
-    const [isDragOver, setIsDragOver] = (0, import_react17.useState)(false);
-    const fileInputRef = (0, import_react17.useRef)(null);
-    const errorId = (0, import_react17.useId)();
-    const fallbackId = (0, import_react17.useId)();
+    const [selectedFile, setSelectedFile] = (0, import_react18.useState)(null);
+    const [isDragOver, setIsDragOver] = (0, import_react18.useState)(false);
+    const fileInputRef = (0, import_react18.useRef)(null);
+    const errorId = (0, import_react18.useId)();
+    const fallbackId = (0, import_react18.useId)();
     const inputId = id ?? fallbackId;
-    const validateFile = (0, import_react17.useCallback)(
+    const validateFile = (0, import_react18.useCallback)(
       (file) => {
         const errors = [];
         if (maxSize != null && maxSize > 0 && file.size > maxSize) {
@@ -1340,7 +1383,7 @@ var FileInput = (0, import_react17.forwardRef)(
       },
       [accept, maxSize, onError]
     );
-    const handleFileSelect = (0, import_react17.useCallback)(
+    const handleFileSelect = (0, import_react18.useCallback)(
       (file) => {
         if (file && !validateFile(file)) {
           return;
@@ -1350,7 +1393,7 @@ var FileInput = (0, import_react17.forwardRef)(
       },
       [validateFile, onSelect]
     );
-    const handleFileInputChange = (0, import_react17.useCallback)(
+    const handleFileInputChange = (0, import_react18.useCallback)(
       (event) => {
         if (isDisabled) {
           return;
@@ -1366,7 +1409,7 @@ var FileInput = (0, import_react17.forwardRef)(
       },
       [isDisabled, handleFileSelect]
     );
-    const handleDragOver = (0, import_react17.useCallback)(
+    const handleDragOver = (0, import_react18.useCallback)(
       (event) => {
         event.preventDefault();
         if (!isDisabled) {
@@ -1375,11 +1418,11 @@ var FileInput = (0, import_react17.forwardRef)(
       },
       [isDisabled]
     );
-    const handleDragLeave = (0, import_react17.useCallback)((event) => {
+    const handleDragLeave = (0, import_react18.useCallback)((event) => {
       event.preventDefault();
       setIsDragOver(false);
     }, []);
-    const handleDrop = (0, import_react17.useCallback)(
+    const handleDrop = (0, import_react18.useCallback)(
       (event) => {
         event.preventDefault();
         setIsDragOver(false);
@@ -1391,19 +1434,19 @@ var FileInput = (0, import_react17.forwardRef)(
       },
       [isDisabled, handleFileSelect]
     );
-    const handleButtonClick = (0, import_react17.useCallback)(() => {
+    const handleButtonClick = (0, import_react18.useCallback)(() => {
       if (!isDisabled) {
         fileInputRef.current?.click();
       }
     }, [isDisabled]);
-    const handleClear = (0, import_react17.useCallback)(() => {
+    const handleClear = (0, import_react18.useCallback)(() => {
       setSelectedFile(null);
       if (fileInputRef.current) {
         fileInputRef.current.value = "";
       }
       onSelect?.(null);
     }, [onSelect]);
-    (0, import_react17.useImperativeHandle)(
+    (0, import_react18.useImperativeHandle)(
       ref,
       () => ({
         reset: handleClear
@@ -1412,7 +1455,7 @@ var FileInput = (0, import_react17.forwardRef)(
     );
     const hasErrorMessages = !isDisabled && errorMessages != null && errorMessages.length > 0;
     const hasErrors = !isDisabled && isError === true;
-    const dropzoneClasses = (0, import_clsx15.clsx)(
+    const dropzoneClasses = (0, import_clsx17.clsx)(
       "flex flex-1 flex-col items-center justify-center gap-4 rounded border border-dashed px-6 text-center",
       selectedFile ? "py-[52px]" : "py-4",
       {
@@ -1469,7 +1512,7 @@ var FileInput = (0, import_react17.forwardRef)(
             width: "100%",
             onClick: handleButtonClick,
             before: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "upload", size: "small" }),
-            after: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children: selectedFile ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: (0, import_clsx15.clsx)("typography-label12regular truncate", !isDisabled && "text-text01"), children: selectedFile.name }) : "" }),
+            after: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children: selectedFile ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: (0, import_clsx17.clsx)("typography-label12regular truncate", !isDisabled && "text-text01"), children: selectedFile.name }) : "" }),
             children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "truncate", children: "\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E" })
           }
         ) }),
@@ -1516,14 +1559,14 @@ var FileInput = (0, import_react17.forwardRef)(
               "\u3053\u3053\u306B\u30D5\u30A1\u30A4\u30EB\u3092\u30C9\u30ED\u30C3\u30D7\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
               /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("br", {}),
               "\u307E\u305F\u306F\u3001",
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: (0, import_clsx15.clsx)(!isDisabled ? "text-link01" : ""), children: "\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E" }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: (0, import_clsx17.clsx)(!isDisabled ? "text-link01" : ""), children: "\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E" }),
               "\u3057\u3066\u304F\u3060\u3055\u3044\u3002"
             ] }) }) }),
             !selectedFile && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col gap-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: (0, import_clsx15.clsx)("typography-label11regular", isDisabled ? "text-textPlaceholder" : "text-text02"), children: "\u5BFE\u5FDC\u5F62\u5F0F" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: (0, import_clsx15.clsx)("typography-body12regular", isDisabled ? "text-textPlaceholder" : "text-text01"), children: acceptLabel }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: (0, import_clsx15.clsx)("typography-label11regular", isDisabled ? "text-textPlaceholder" : "text-text02"), children: "\u30B5\u30A4\u30BA" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: (0, import_clsx15.clsx)("typography-body12regular", isDisabled ? "text-textPlaceholder" : "text-text01"), children: maxSizeLabel })
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: (0, import_clsx17.clsx)("typography-label11regular", isDisabled ? "text-textPlaceholder" : "text-text02"), children: "\u5BFE\u5FDC\u5F62\u5F0F" }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: (0, import_clsx17.clsx)("typography-body12regular", isDisabled ? "text-textPlaceholder" : "text-text01"), children: acceptLabel }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: (0, import_clsx17.clsx)("typography-label11regular", isDisabled ? "text-textPlaceholder" : "text-text02"), children: "\u30B5\u30A4\u30BA" }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: (0, import_clsx17.clsx)("typography-body12regular", isDisabled ? "text-textPlaceholder" : "text-text01"), children: maxSizeLabel })
             ] }),
             selectedFile && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "mt-2 flex flex-col items-center gap-1", children: [
               /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "typography-label11regular text-text02", children: "\u30D5\u30A1\u30A4\u30EB\u540D" }),
@@ -1574,12 +1617,12 @@ var FileInput = (0, import_react17.forwardRef)(
 FileInput.displayName = "FileInput";
 
 // src/heading/heading.tsx
-var import_component_theme10 = require("@zenkigen-inc/component-theme");
-var import_clsx16 = require("clsx");
+var import_component_theme9 = require("@zenkigen-inc/component-theme");
+var import_clsx18 = require("clsx");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function Heading(props) {
   const TagName = `h${props.level}`;
-  const classes = (0, import_clsx16.clsx)(`flex items-center text-text01`, import_component_theme10.typography.heading[TagName], {
+  const classes = (0, import_clsx18.clsx)(`flex items-center text-text01`, import_component_theme9.typography.heading[TagName], {
     "gap-2": props.level === 1,
     "gap-1": props.level > 1
   });
@@ -1591,22 +1634,22 @@ function Heading(props) {
 }
 
 // src/hooks/use-roving-focus.ts
-var import_react18 = require("react");
+var import_react19 = require("react");
 var useRovingFocus = ({
   values,
   defaultFocusedValue,
   isDisabled = false
 }) => {
-  const [focusedValue, setFocusedValue] = (0, import_react18.useState)(
+  const [focusedValue, setFocusedValue] = (0, import_react19.useState)(
     typeof defaultFocusedValue === "undefined" ? null : defaultFocusedValue
   );
-  const handleFocusChange = (0, import_react18.useCallback)((newValue) => {
+  const handleFocusChange = (0, import_react19.useCallback)((newValue) => {
     setFocusedValue(newValue);
   }, []);
-  const handleBlur = (0, import_react18.useCallback)(() => {
+  const handleBlur = (0, import_react19.useCallback)(() => {
     setFocusedValue(null);
   }, []);
-  const handleKeyDown = (0, import_react18.useCallback)(
+  const handleKeyDown = (0, import_react19.useCallback)(
     (event) => {
       if (isDisabled === true || values.length === 0) return;
       const currentIndex = focusedValue !== null && focusedValue !== "" ? values.indexOf(focusedValue) : -1;
@@ -1661,11 +1704,11 @@ var useRovingFocus = ({
 };
 
 // src/loading/loading.tsx
-var import_clsx17 = __toESM(require("clsx"));
+var import_clsx19 = __toESM(require("clsx"));
 var import_jsx_runtime24 = require("react/jsx-runtime");
 function Loading({ size = "medium", position = "fixed", height = "100%" }) {
-  const wrapperClasses = (0, import_clsx17.default)(position, "left-0 top-0 z-20 flex w-full items-center justify-center");
-  const svgClasses = (0, import_clsx17.default)({
+  const wrapperClasses = (0, import_clsx19.default)(position, "left-0 top-0 z-20 flex w-full items-center justify-center");
+  const svgClasses = (0, import_clsx19.default)({
     "h-4 w-4": size === "small",
     "h-8 w-8": size === "medium",
     "h-16 w-16": size === "large"
@@ -1711,13 +1754,13 @@ function Loading({ size = "medium", position = "fixed", height = "100%" }) {
 }
 
 // src/modal/modal.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/modal/body-scroll-lock.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var BodyScrollLock = () => {
-  (0, import_react19.useLayoutEffect)(() => {
+  (0, import_react20.useLayoutEffect)(() => {
     const { scrollX, scrollY } = window;
     const { body } = document;
     const hasVerticalScrollbar = document.documentElement.scrollHeight > document.documentElement.clientHeight;
@@ -1768,28 +1811,28 @@ function ModalBody({ children }) {
 }
 
 // src/modal/modal-context.ts
-var import_react20 = require("react");
-var ModalContext = (0, import_react20.createContext)({
+var import_react21 = require("react");
+var ModalContext = (0, import_react21.createContext)({
   onClose: () => null
 });
 
 // src/modal/modal-footer.tsx
-var import_clsx18 = __toESM(require("clsx"));
+var import_clsx20 = __toESM(require("clsx"));
 var import_jsx_runtime26 = require("react/jsx-runtime");
 function ModalFooter({ children, isNoBorder = false }) {
-  const wrapperClasses = (0, import_clsx18.default)("flex w-full shrink-0 items-center rounded-b-lg px-6 py-4", {
+  const wrapperClasses = (0, import_clsx20.default)("flex w-full shrink-0 items-center rounded-b-lg px-6 py-4", {
     "border-t-[1px] border-uiBorder01": !isNoBorder
   });
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: wrapperClasses, children });
 }
 
 // src/modal/modal-header.tsx
-var import_clsx19 = __toESM(require("clsx"));
-var import_react21 = require("react");
+var import_clsx21 = __toESM(require("clsx"));
+var import_react22 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 function ModalHeader({ children, isNoBorder = false }) {
-  const { onClose } = (0, import_react21.useContext)(ModalContext);
-  const headerClasses = (0, import_clsx19.default)(
+  const { onClose } = (0, import_react22.useContext)(ModalContext);
+  const headerClasses = (0, import_clsx21.default)(
     "typography-h5 flex w-full shrink-0 items-center justify-between rounded-t-lg px-6 text-text01",
     {
       "border-b border-uiBorder01": !isNoBorder,
@@ -1816,12 +1859,17 @@ function Modal({
   onClose,
   portalTargetRef
 }) {
-  const [isMounted, setIsMounted] = (0, import_react22.useState)(false);
+  const [isMounted, setIsMounted] = (0, import_react23.useState)(false);
   const renderWidth = typeof width === "number" ? Math.max(width, LIMIT_WIDTH) : width;
   const renderHeight = typeof height === "number" ? Math.max(height, LIMIT_HEIGHT) : height;
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     setIsMounted(true);
   }, []);
+  (0, import_react23.useEffect)(() => {
+    if (isOpen) {
+      window.dispatchEvent(new CustomEvent(MODAL_OPEN_EVENT));
+    }
+  }, [isOpen]);
   return isMounted && isOpen ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(BodyScrollLock, {}),
     (0, import_react_dom2.createPortal)(
@@ -1844,10 +1892,10 @@ Modal.Header = ModalHeader;
 Modal.Footer = ModalFooter;
 
 // src/notification-inline/notification-inline.tsx
-var import_clsx20 = require("clsx");
+var import_clsx22 = require("clsx");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 function NotificationInline({ state = "default", size = "medium", ...props }) {
-  const wrapperClasses = (0, import_clsx20.clsx)("typography-body13regular flex items-center gap-1 rounded text-text01", {
+  const wrapperClasses = (0, import_clsx22.clsx)("typography-body13regular flex items-center gap-1 rounded text-text01", {
     "bg-uiBackgroundError": state === "attention",
     "bg-uiBackgroundWarning": state === "warning",
     "bg-uiBackgroundBlue": state === "information",
@@ -1856,7 +1904,7 @@ function NotificationInline({ state = "default", size = "medium", ...props }) {
     "p-2": size === "small",
     "p-3": size === "medium"
   });
-  const iconClasses = (0, import_clsx20.clsx)("flex items-center", {
+  const iconClasses = (0, import_clsx22.clsx)("flex items-center", {
     "fill-supportError": state === "attention",
     "fill-supportWarning": state === "warning",
     "fill-blue-blue50": state === "information",
@@ -1880,20 +1928,20 @@ function NotificationInline({ state = "default", size = "medium", ...props }) {
 }
 
 // src/pagination/pagination-button.tsx
-var import_clsx21 = require("clsx");
-var import_react24 = require("react");
+var import_clsx23 = require("clsx");
+var import_react25 = require("react");
 
 // src/pagination/pagination-context.ts
-var import_react23 = require("react");
-var PaginationContext = (0, import_react23.createContext)({
+var import_react24 = require("react");
+var PaginationContext = (0, import_react24.createContext)({
   currentPage: 0
 });
 
 // src/pagination/pagination-button.tsx
 var import_jsx_runtime30 = require("react/jsx-runtime");
 function PaginationButton({ page, onClick }) {
-  const { currentPage } = (0, import_react24.useContext)(PaginationContext);
-  const buttonClasses = (0, import_clsx21.clsx)(
+  const { currentPage } = (0, import_react25.useContext)(PaginationContext);
+  const buttonClasses = (0, import_clsx23.clsx)(
     "flex h-8 min-w-8 items-center justify-center rounded fill-icon01 px-1",
     "typography-label14regular",
     "text-interactive02",
@@ -1979,14 +2027,14 @@ function Pagination({ currentPage, totalPage, sideNumPagesToShow = 3, onClick })
 }
 
 // src/select/select.tsx
-var import_react28 = require("@floating-ui/react");
-var import_component_theme13 = require("@zenkigen-inc/component-theme");
-var import_clsx24 = __toESM(require("clsx"));
-var import_react29 = require("react");
+var import_react29 = require("@floating-ui/react");
+var import_component_theme12 = require("@zenkigen-inc/component-theme");
+var import_clsx26 = __toESM(require("clsx"));
+var import_react30 = require("react");
 
 // src/select/select-context.ts
-var import_react25 = require("react");
-var SelectContext = (0, import_react25.createContext)({
+var import_react26 = require("react");
+var SelectContext = (0, import_react26.createContext)({
   size: "medium",
   setIsOptionListOpen: () => false,
   variant: "outline",
@@ -1994,19 +2042,19 @@ var SelectContext = (0, import_react25.createContext)({
 });
 
 // src/select/select-item.tsx
-var import_component_theme11 = require("@zenkigen-inc/component-theme");
-var import_clsx22 = __toESM(require("clsx"));
-var import_react26 = require("react");
+var import_component_theme10 = require("@zenkigen-inc/component-theme");
+var import_clsx24 = __toESM(require("clsx"));
+var import_react27 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 function SelectItem({ option }) {
-  const { setIsOptionListOpen, selectedOption, onChange, isError } = (0, import_react26.useContext)(SelectContext);
+  const { setIsOptionListOpen, selectedOption, onChange, isError } = (0, import_react27.useContext)(SelectContext);
   const handleClickItem = (option2) => {
     onChange?.(option2);
     setIsOptionListOpen(false);
   };
-  const itemClasses = (0, import_clsx22.default)(
+  const itemClasses = (0, import_clsx24.default)(
     "typography-label14regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02",
-    import_component_theme11.focusVisible.inset,
+    import_component_theme10.focusVisible.inset,
     {
       "text-interactive01 fill-interactive01 bg-selectedUi": option.id === selectedOption?.id && !(isError ?? false),
       "text-supportError fill-supportError bg-uiBackgroundError": option.id === selectedOption?.id && isError,
@@ -2022,17 +2070,17 @@ function SelectItem({ option }) {
 }
 
 // src/select/select-list.tsx
-var import_component_theme12 = require("@zenkigen-inc/component-theme");
-var import_clsx23 = __toESM(require("clsx"));
-var import_react27 = require("react");
+var import_component_theme11 = require("@zenkigen-inc/component-theme");
+var import_clsx25 = __toESM(require("clsx"));
+var import_react28 = require("react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var SelectList = (0, import_react27.forwardRef)(({ children, maxHeight }, ref) => {
-  const { selectedOption, setIsOptionListOpen, variant, placeholder, onChange, floatingStyles, floatingRef } = (0, import_react27.useContext)(SelectContext);
+var SelectList = (0, import_react28.forwardRef)(({ children, maxHeight }, ref) => {
+  const { selectedOption, setIsOptionListOpen, variant, placeholder, onChange, floatingStyles, floatingRef } = (0, import_react28.useContext)(SelectContext);
   const handleClickDeselect = () => {
     onChange?.(null);
     setIsOptionListOpen(false);
   };
-  (0, import_react27.useLayoutEffect)(() => {
+  (0, import_react28.useLayoutEffect)(() => {
     if (maxHeight != null && selectedOption != null) {
       const container = floatingRef?.current;
       if (container != null) {
@@ -2050,12 +2098,12 @@ var SelectList = (0, import_react27.forwardRef)(({ children, maxHeight }, ref) =
       }
     }
   }, [selectedOption, maxHeight, floatingRef]);
-  const listClasses = (0, import_clsx23.default)("z-dropdown overflow-y-auto rounded bg-uiBackground01 py-2 shadow-floatingShadow", {
+  const listClasses = (0, import_clsx25.default)("overflow-y-auto rounded bg-uiBackground01 py-2 shadow-floatingShadow", {
     "border-solid border border-uiBorder01": variant === "outline"
   });
-  const deselectButtonClasses = (0, import_clsx23.default)(
+  const deselectButtonClasses = (0, import_clsx25.default)(
     "typography-label14regular flex h-8 w-full items-center px-3 text-interactive02 hover:bg-hover02 active:bg-active02",
-    import_component_theme12.focusVisible.inset
+    import_component_theme11.focusVisible.inset
   );
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("ul", { className: listClasses, style: { maxHeight, ...floatingStyles }, ref, children: [
     children,
@@ -2083,16 +2131,21 @@ function Select({
   optionListMaxHeight,
   matchListToTrigger = false
 }) {
-  const [isOptionListOpen, setIsOptionListOpen] = (0, import_react29.useState)(false);
-  const targetRef = (0, import_react29.useRef)(null);
+  const [isOptionListOpen, setIsOptionListOpen] = (0, import_react30.useState)(false);
+  const targetRef = (0, import_react30.useRef)(null);
   useOutsideClick(targetRef, () => setIsOptionListOpen(false));
-  const { refs, floatingStyles } = (0, import_react28.useFloating)({
+  useDismissOnModalOpen(() => {
+    if (isOptionListOpen) {
+      setIsOptionListOpen(false);
+    }
+  });
+  const { refs, floatingStyles } = (0, import_react29.useFloating)({
     open: isOptionListOpen,
     onOpenChange: setIsOptionListOpen,
     placement: "bottom-start",
     middleware: [
-      (0, import_react28.offset)(FLOATING_OFFSET),
-      (0, import_react28.size)({
+      (0, import_react29.offset)(FLOATING_OFFSET),
+      (0, import_react29.size)({
         apply({ availableWidth, elements, rects }) {
           const referenceWidth = rects.reference.width;
           if (matchListToTrigger) {
@@ -2104,33 +2157,33 @@ function Select({
         }
       })
     ],
-    whileElementsMounted: import_react28.autoUpdate
+    whileElementsMounted: import_react29.autoUpdate
   });
   const handleClickToggle = () => setIsOptionListOpen((prev) => !prev);
   const buttonVariant = isError && !isDisabled ? `${variant}Error` : variant;
   const isSelected = isOptionSelected && !isDisabled && selectedOption !== null && !isError;
-  const wrapperClasses = (0, import_clsx24.default)("relative flex shrink-0 items-center gap-1 rounded bg-uiBackground01", {
+  const wrapperClasses = (0, import_clsx26.default)("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 = (0, import_clsx24.default)(
+  const buttonClasses = (0, import_clsx26.default)(
     "flex size-full items-center rounded",
-    import_component_theme13.selectColors[buttonVariant].hover,
-    import_component_theme13.selectColors[buttonVariant].active,
-    import_component_theme13.selectColors[buttonVariant].disabled,
-    import_component_theme13.focusVisible.normal,
+    import_component_theme12.selectColors[buttonVariant].hover,
+    import_component_theme12.selectColors[buttonVariant].active,
+    import_component_theme12.selectColors[buttonVariant].disabled,
+    import_component_theme12.focusVisible.normal,
     {
-      [import_component_theme13.selectColors[buttonVariant].selected]: isSelected,
-      [import_component_theme13.selectColors[buttonVariant].base]: !isSelected,
+      [import_component_theme12.selectColors[buttonVariant].selected]: isSelected,
+      [import_component_theme12.selectColors[buttonVariant].base]: !isSelected,
       "px-2": size === "x-small" || size === "small",
       "px-4": size === "medium" || size === "large",
       "pointer-events-none": isDisabled,
       "border-supportError": !isSelected && !isDisabled && isError
     }
   );
-  const labelClasses = (0, import_clsx24.default)("overflow-hidden", {
+  const labelClasses = (0, import_clsx26.default)("overflow-hidden", {
     "mr-1": size === "x-small",
     "mr-2": size !== "x-small",
     "typography-label12regular": size === "x-small",
@@ -2173,7 +2226,7 @@ function Select({
             ]
           }
         ),
-        isOptionListOpen && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react28.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "relative z-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectList, { ref: refs.setFloating, maxHeight: optionListMaxHeight, children }) }) })
+        isOptionListOpen && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react29.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "relative z-popover", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectList, { ref: refs.setFloating, maxHeight: optionListMaxHeight, children }) }) })
       ] })
     }
   );
@@ -2261,17 +2314,17 @@ function PaginationSelect({
 }
 
 // src/password-input/password-input.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 
 // src/text-input/text-input.tsx
-var import_clsx27 = require("clsx");
-var import_react33 = require("react");
+var import_clsx29 = require("clsx");
+var import_react34 = require("react");
 
 // src/text-input/text-input-context.tsx
-var import_react30 = require("react");
-var TextInputCompoundContext = (0, import_react30.createContext)(null);
+var import_react31 = require("react");
+var TextInputCompoundContext = (0, import_react31.createContext)(null);
 var useTextInputCompoundContext = (componentName) => {
-  const context = (0, import_react30.useContext)(TextInputCompoundContext);
+  const context = (0, import_react31.useContext)(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`);
   }
@@ -2279,10 +2332,10 @@ var useTextInputCompoundContext = (componentName) => {
 };
 
 // src/text-input/text-input-error-message.tsx
-var import_clsx25 = require("clsx");
-var import_react31 = require("react");
+var import_clsx27 = require("clsx");
+var import_react32 = require("react");
 var import_jsx_runtime36 = require("react/jsx-runtime");
-var TextInputErrorMessage = (0, import_react31.forwardRef)(
+var TextInputErrorMessage = (0, import_react32.forwardRef)(
   ({ "aria-live": ariaLive = "assertive", ...props }, ref) => {
     const { inputProps } = useTextInputCompoundContext("TextInput.ErrorMessage");
     const typographyClass = inputProps.size === "large" ? "typography-label13regular" : "typography-label12regular";
@@ -2290,20 +2343,20 @@ var TextInputErrorMessage = (0, import_react31.forwardRef)(
     if (!shouldRender) {
       return null;
     }
-    const errorMessageClassName = (0, import_clsx25.clsx)(typographyClass, "text-supportError");
+    const errorMessageClassName = (0, import_clsx27.clsx)(typographyClass, "text-supportError");
     return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ref, className: errorMessageClassName, "aria-live": ariaLive, ...props });
   }
 );
 TextInputErrorMessage.displayName = "TextInput.ErrorMessage";
 
 // src/text-input/text-input-helper-message.tsx
-var import_clsx26 = require("clsx");
-var import_react32 = require("react");
+var import_clsx28 = require("clsx");
+var import_react33 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
-var TextInputHelperMessage = (0, import_react32.forwardRef)((props, ref) => {
+var TextInputHelperMessage = (0, import_react33.forwardRef)((props, ref) => {
   const { inputProps } = useTextInputCompoundContext("TextInput.HelperMessage");
   const typographyClass = inputProps.size === "large" ? "typography-label13regular" : "typography-label12regular";
-  const helperMessageClassName = (0, import_clsx26.clsx)(typographyClass, "text-text02");
+  const helperMessageClassName = (0, import_clsx28.clsx)(typographyClass, "text-text02");
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { ref, className: helperMessageClassName, ...props });
 });
 TextInputHelperMessage.displayName = "TextInput.HelperMessage";
@@ -2312,6 +2365,7 @@ TextInputHelperMessage.displayName = "TextInput.HelperMessage";
 var import_jsx_runtime38 = require("react/jsx-runtime");
 function TextInputInner({
   size = "medium",
+  variant = "outline",
   isError = false,
   disabled = false,
   onClickClearButton,
@@ -2319,9 +2373,9 @@ function TextInputInner({
   children,
   ...props
 }, ref) {
-  const autoGeneratedId = (0, import_react33.useId)();
+  const autoGeneratedId = (0, import_react34.useId)();
   const { className: _className, ...restInputProps } = props;
-  const inputPropsForContext = (0, import_react33.useMemo)(
+  const inputPropsForContext = (0, import_react34.useMemo)(
     () => ({
       ...restInputProps,
       size,
@@ -2332,7 +2386,7 @@ function TextInputInner({
     }),
     [restInputProps, size, isError, disabled, onClickClearButton, after]
   );
-  const contextValue = (0, import_react33.useMemo)(
+  const contextValue = (0, import_react34.useMemo)(
     () => ({
       inputProps: inputPropsForContext,
       forwardedRef: ref
@@ -2342,21 +2396,21 @@ function TextInputInner({
   const helperMessageIds = [];
   const errorIds = [];
   const describedByBaseId = restInputProps.id ?? autoGeneratedId;
-  const enhancedChildren = import_react33.Children.map(children, (child) => {
-    if (!(0, import_react33.isValidElement)(child)) {
+  const enhancedChildren = import_react34.Children.map(children, (child) => {
+    if (!(0, import_react34.isValidElement)(child)) {
       return child;
     }
     if (child.type === TextInputHelperMessage) {
       const helperChild = child;
       const assignedId = helperChild.props.id ?? `${describedByBaseId}-helper-${helperMessageIds.length + 1}`;
       helperMessageIds.push(assignedId);
-      return (0, import_react33.cloneElement)(helperChild, { id: assignedId });
+      return (0, import_react34.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 (0, import_react33.cloneElement)(errorChild, { id: assignedId });
+      return (0, import_react34.cloneElement)(errorChild, { id: assignedId });
     }
     return child;
   });
@@ -2379,21 +2433,37 @@ function TextInputInner({
   };
   const isShowClearButton = !!onClickClearButton && restInputProps.value.length !== 0 && !disabled;
   const hasTrailingElement = isShowClearButton || after != null;
-  const inputWrapClasses = (0, import_clsx27.clsx)("relative flex items-center gap-2 overflow-hidden rounded border", {
-    "border-uiBorder02": !isError && !disabled,
-    "border-supportError": isError && !disabled,
-    "hover:border-hoverInput": !disabled && !isError,
-    "hover:focus-within:border-activeInput": !isError,
-    "focus-within:border-activeInput": !isError,
-    "bg-disabled02 border-disabled01": disabled,
-    "pr-2": size === "medium" && hasTrailingElement,
-    "pr-3": size === "large" && hasTrailingElement
+  const isBorderless = variant === "text";
+  const inputWrapClasses = (0, import_clsx29.clsx)("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 = (0, import_clsx27.clsx)("flex-1 outline-none placeholder:text-textPlaceholder disabled:text-textPlaceholder", {
-    ["typography-label14regular min-h-8 px-2"]: size === "medium",
-    ["typography-label16regular min-h-10 px-3"]: size === "large",
+  const inputClasses = (0, import_clsx29.clsx)("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
   });
   const inputElement = /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: inputWrapClasses, children: [
@@ -2401,7 +2471,7 @@ function TextInputInner({
     after,
     isShowClearButton && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(IconButton, { variant: "text", icon: "close", size: "small", onClick: onClickClearButton })
   ] });
-  const stackedChildren = enhancedChildren == null ? [] : import_react33.Children.toArray(enhancedChildren);
+  const stackedChildren = enhancedChildren == null ? [] : import_react34.Children.toArray(enhancedChildren);
   const hasMessageChildren = stackedChildren.length > 0;
   if (!hasMessageChildren) {
     return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TextInputCompoundContext.Provider, { value: contextValue, children: inputElement });
@@ -2417,10 +2487,10 @@ var attachStatics = (component) => {
   component.displayName = "TextInput";
   return component;
 };
-var TextInputPublic = (0, import_react33.forwardRef)(function TextInputPublic2(props, ref) {
+var TextInputPublic = (0, import_react34.forwardRef)(function TextInputPublic2(props, ref) {
   return TextInputInner(props, ref);
 });
-var InternalTextInputBase = (0, import_react33.forwardRef)(
+var InternalTextInputBase = (0, import_react34.forwardRef)(
   function InternalTextInputBase2(props, ref) {
     return TextInputInner(props, ref);
   }
@@ -2430,8 +2500,8 @@ var InternalTextInput = attachStatics(InternalTextInputBase);
 
 // src/password-input/password-input.tsx
 var import_jsx_runtime39 = require("react/jsx-runtime");
-var PasswordInputBase = (0, import_react34.forwardRef)(function PasswordInput({ disabled = false, children, ...props }, ref) {
-  const [isPasswordVisible, setIsPasswordVisible] = (0, import_react34.useState)(false);
+var PasswordInputBase = (0, import_react35.forwardRef)(function PasswordInput({ disabled = false, children, ...props }, ref) {
+  const [isPasswordVisible, setIsPasswordVisible] = (0, import_react35.useState)(false);
   const { className: _className, ...textInputProps } = props;
   const handlePasswordVisibilityToggle = () => {
     setIsPasswordVisible((prev) => !prev);
@@ -2466,7 +2536,7 @@ var PasswordInput2 = Object.assign(PasswordInputBase, {
 });
 
 // src/popup/popup.tsx
-var import_react37 = require("react");
+var import_react38 = require("react");
 
 // src/popup/popup-body.tsx
 var import_jsx_runtime40 = require("react/jsx-runtime");
@@ -2475,8 +2545,8 @@ function PopupBody({ children }) {
 }
 
 // src/popup/popup-context.ts
-var import_react35 = require("react");
-var PopupContext = (0, import_react35.createContext)({
+var import_react36 = require("react");
+var PopupContext = (0, import_react36.createContext)({
   isOpen: false,
   onClose: () => null
 });
@@ -2488,10 +2558,10 @@ function PopupFooter({ children }) {
 }
 
 // src/popup/popup-header.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 function PopupHeader({ children, before }) {
-  const { onClose } = (0, import_react36.useContext)(PopupContext);
+  const { onClose } = (0, import_react37.useContext)(PopupContext);
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("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__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-1", children: [
       before,
@@ -2506,7 +2576,7 @@ var import_jsx_runtime43 = require("react/jsx-runtime");
 var LIMIT_WIDTH2 = 320;
 var LIMIT_HEIGHT2 = 184;
 function useOptionalPopoverContext() {
-  return (0, import_react37.useContext)(PopoverContext);
+  return (0, import_react38.useContext)(PopoverContext);
 }
 function Popup({ children, isOpen: controlledIsOpen, width = 480, height, onClose }) {
   const renderWidth = typeof width === "number" ? Math.max(width, LIMIT_WIDTH2) : width;
@@ -2531,29 +2601,42 @@ Popup.Header = PopupHeader;
 Popup.Footer = PopupFooter;
 
 // src/radio/radio.tsx
-var import_component_theme14 = require("@zenkigen-inc/component-theme");
-var import_clsx28 = __toESM(require("clsx"));
-var import_react38 = require("react");
+var import_component_theme13 = require("@zenkigen-inc/component-theme");
+var import_clsx30 = __toESM(require("clsx"));
+var import_react39 = require("react");
 var import_jsx_runtime44 = require("react/jsx-runtime");
-function Radio({ name, value, id, label, isChecked = false, isDisabled = false, onChange }) {
-  const [isMouseOver, setIsMouseOver] = (0, import_react38.useState)(false);
-  const handleMouseOverInput = (0, import_react38.useCallback)(() => {
+function Radio({
+  name,
+  value,
+  id,
+  label,
+  isChecked = false,
+  isDisabled = false,
+  size = "medium",
+  onChange
+}) {
+  const isLarge = size === "large";
+  const [isMouseOver, setIsMouseOver] = (0, import_react39.useState)(false);
+  const handleMouseOverInput = (0, import_react39.useCallback)(() => {
     setIsMouseOver(true);
   }, []);
-  const handleMouseOutInput = (0, import_react38.useCallback)(() => {
+  const handleMouseOutInput = (0, import_react39.useCallback)(() => {
     setIsMouseOver(false);
   }, []);
-  const handleChange = (0, import_react38.useCallback)(
+  const handleChange = (0, import_react39.useCallback)(
     (e) => !isDisabled && onChange?.(e),
     [isDisabled, onChange]
   );
-  const inputClasses = (0, import_clsx28.default)("peer absolute z-[1] size-6 opacity-0", {
+  const inputClasses = (0, import_clsx30.default)("peer absolute z-[1] opacity-0", {
+    "size-6": !isLarge,
+    "size-8": isLarge,
     "cursor-not-allowed": isDisabled,
     "cursor-pointer": !isDisabled
   });
-  const boxClasses = (0, import_clsx28.default)(
-    "inline-flex size-5 items-center justify-center rounded-full border border-solid bg-white",
-    import_component_theme14.focusVisible.normalPeer,
+  const boxClasses = (0, import_clsx30.default)(
+    "inline-flex items-center justify-center rounded-full border border-solid bg-white",
+    { "size-5": !isLarge, "size-7": isLarge },
+    import_component_theme13.focusVisible.normalPeer,
     {
       "border-disabled01 hover:border-disabled01": isDisabled && !isMouseOver,
       "border-hoverUiBorder": !isDisabled && isMouseOver,
@@ -2562,21 +2645,31 @@ function Radio({ name, value, id, label, isChecked = false, isDisabled = false,
       "cursor-pointer": !isDisabled
     }
   );
-  const afterClasses = (0, import_clsx28.default)("absolute inset-0 m-auto block size-3 rounded-full", {
-    "bg-disabled01": isDisabled && isChecked,
-    "bg-activeSelectedUi": !isDisabled && isChecked,
-    "scale-0": !isChecked,
-    "scale-100": isChecked
-  });
-  const hoverIndicatorClasses = (0, import_clsx28.default)("inline-block size-3 rounded-full", {
-    "bg-hoverUi": !isDisabled && !isChecked && isMouseOver
-  });
-  const labelClasses = (0, import_clsx28.default)("typography-label14regular ml-2 flex-[1_0_0] select-none break-all", {
+  const afterClasses = (0, import_clsx30.default)(
+    "absolute inset-0 m-auto block rounded-full",
+    { "size-3": !isLarge, "size-4": isLarge },
+    {
+      "bg-disabled01": isDisabled && isChecked,
+      "bg-activeSelectedUi": !isDisabled && isChecked,
+      "scale-0": !isChecked,
+      "scale-100": isChecked
+    }
+  );
+  const hoverIndicatorClasses = (0, import_clsx30.default)(
+    "inline-block rounded-full",
+    { "size-3": !isLarge, "size-4": isLarge },
+    {
+      "bg-hoverUi": !isDisabled && !isChecked && isMouseOver
+    }
+  );
+  const labelClasses = (0, import_clsx30.default)("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__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex size-6 items-center justify-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: (0, import_clsx30.default)("relative flex items-center justify-center", { "size-6": !isLarge, "size-8": isLarge }), children: [
       /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         "input",
         {
@@ -2592,26 +2685,35 @@ function Radio({ name, value, id, label, isChecked = false, isDisabled = false,
           className: inputClasses
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: boxClasses, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "relative flex size-5 flex-[0_0_auto] items-center justify-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: afterClasses }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: hoverIndicatorClasses })
-      ] }) })
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: boxClasses, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+        "div",
+        {
+          className: (0, import_clsx30.default)("relative flex flex-[0_0_auto] items-center justify-center", {
+            "size-5": !isLarge,
+            "size-7": isLarge
+          }),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: afterClasses }),
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: hoverIndicatorClasses })
+          ]
+        }
+      ) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("label", { htmlFor: id, className: labelClasses, children: label })
   ] });
 }
 
 // src/search/search.tsx
-var import_clsx29 = require("clsx");
-var import_react39 = require("react");
+var import_clsx31 = require("clsx");
+var import_react40 = require("react");
 var import_jsx_runtime45 = require("react/jsx-runtime");
-var Search = (0, import_react39.forwardRef)(({ width = "100%", size = "medium", ...props }, ref) => {
-  const classes = (0, import_clsx29.clsx)(
+var Search = (0, import_react40.forwardRef)(({ width = "100%", size = "medium", ...props }, ref) => {
+  const classes = (0, import_clsx31.clsx)(
     "flex items-center rounded-full border border-uiBorder02 bg-uiBackground01 focus-within:border-activeInput",
     { "h-8 px-3": size === "medium" },
     { "h-10 px-4": size === "large" }
   );
-  const inputClasses = (0, import_clsx29.clsx)("mx-2 h-full flex-1 text-text01 outline-none placeholder:text-textPlaceholder", {
+  const inputClasses = (0, import_clsx31.clsx)("mx-2 h-full flex-1 text-text01 outline-none placeholder:text-textPlaceholder", {
     ["typography-label14regular"]: size === "medium",
     ["typography-label16regular"]: size === "large"
   });
@@ -2643,16 +2745,16 @@ var Search = (0, import_react39.forwardRef)(({ width = "100%", size = "medium",
 Search.displayName = "Search";
 
 // src/segmented-control/segmented-control.tsx
-var import_react42 = __toESM(require("react"));
+var import_react43 = __toESM(require("react"));
 
 // src/segmented-control/segmented-control-context.ts
-var import_react40 = require("react");
-var SegmentedControlContext = (0, import_react40.createContext)(null);
+var import_react41 = require("react");
+var SegmentedControlContext = (0, import_react41.createContext)(null);
 
 // src/segmented-control/segmented-control-item.tsx
-var import_component_theme15 = require("@zenkigen-inc/component-theme");
-var import_clsx30 = require("clsx");
-var import_react41 = require("react");
+var import_component_theme14 = require("@zenkigen-inc/component-theme");
+var import_clsx32 = require("clsx");
+var import_react42 = require("react");
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var SegmentedControlItem = ({
   label,
@@ -2662,9 +2764,9 @@ var SegmentedControlItem = ({
   "aria-label": ariaLabel,
   ...rest
 }) => {
-  const context = (0, import_react41.useContext)(SegmentedControlContext);
-  const buttonRef = (0, import_react41.useRef)(null);
-  const lastInteractionWasMouse = (0, import_react41.useRef)(false);
+  const context = (0, import_react42.useContext)(SegmentedControlContext);
+  const buttonRef = (0, import_react42.useRef)(null);
+  const lastInteractionWasMouse = (0, import_react42.useRef)(false);
   if (context === null) {
     throw new Error("SegmentedControl.Item must be used within SegmentedControl");
   }
@@ -2680,7 +2782,7 @@ var SegmentedControlItem = ({
   const isSelected = value === selectedValue;
   const isFocused = value === focusedValue;
   const isOptionDisabled = isContextDisabled || itemDisabled === true;
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (isFocused === true && buttonRef.current !== null) {
       buttonRef.current.focus();
     }
@@ -2702,7 +2804,7 @@ var SegmentedControlItem = ({
     lastInteractionWasMouse.current = false;
     onBlur?.();
   };
-  const buttonClasses = (0, import_clsx30.clsx)("relative flex items-center justify-center gap-1 rounded", import_component_theme15.focusVisible.normal, {
+  const buttonClasses = (0, import_clsx32.clsx)("relative flex items-center justify-center gap-1 rounded", import_component_theme14.focusVisible.normal, {
     "px-2 min-h-[24px] typography-label12regular": size === "small",
     "px-4 min-h-[32px] typography-label14regular": size === "medium",
     // States - Default with hover
@@ -2732,7 +2834,7 @@ var SegmentedControlItem = ({
         Boolean(icon) === true && icon && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           "span",
           {
-            className: (0, import_clsx30.clsx)("flex items-center", {
+            className: (0, import_clsx32.clsx)("flex items-center", {
               "fill-disabled01": isOptionDisabled === true,
               "fill-interactive01": isSelected === true && isOptionDisabled === false,
               "fill-icon01": isSelected === false && isOptionDisabled === false
@@ -2757,15 +2859,15 @@ var SegmentedControl = ({
   "aria-label": ariaLabel,
   ...rest
 }) => {
-  const containerRef = (0, import_react42.useRef)(null);
-  const itemIds = import_react42.Children.toArray(children).filter((child) => {
-    if (!import_react42.default.isValidElement(child) || typeof child.props !== "object" || child.props === null || !("value" in child.props)) {
+  const containerRef = (0, import_react43.useRef)(null);
+  const itemIds = import_react43.Children.toArray(children).filter((child) => {
+    if (!import_react43.default.isValidElement(child) || typeof child.props !== "object" || child.props === null || !("value" in child.props)) {
       return false;
     }
     const props = child.props;
     return props.isDisabled !== true;
   }).map((child) => child.props.value);
-  const childrenCount = import_react42.Children.count(children);
+  const childrenCount = import_react43.Children.count(children);
   const containerStyle = { gridTemplateColumns: `repeat(${childrenCount}, minmax(0,1fr))` };
   const {
     focusedValue,
@@ -2809,22 +2911,22 @@ var SegmentedControl = ({
 SegmentedControl.Item = SegmentedControlItem;
 
 // src/select-sort/select-sort.tsx
-var import_component_theme18 = require("@zenkigen-inc/component-theme");
-var import_clsx33 = __toESM(require("clsx"));
-var import_react43 = require("react");
+var import_component_theme17 = require("@zenkigen-inc/component-theme");
+var import_clsx35 = __toESM(require("clsx"));
+var import_react44 = require("react");
 
 // src/select-sort/select-list.tsx
-var import_component_theme17 = require("@zenkigen-inc/component-theme");
-var import_clsx32 = __toESM(require("clsx"));
+var import_component_theme16 = require("@zenkigen-inc/component-theme");
+var import_clsx34 = __toESM(require("clsx"));
 
 // src/select-sort/select-item.tsx
-var import_component_theme16 = require("@zenkigen-inc/component-theme");
-var import_clsx31 = __toESM(require("clsx"));
+var import_component_theme15 = require("@zenkigen-inc/component-theme");
+var import_clsx33 = __toESM(require("clsx"));
 var import_jsx_runtime48 = require("react/jsx-runtime");
 function SelectItem2({ children, isSortKey, onClickItem }) {
-  const itemClasses = (0, import_clsx31.default)(
+  const itemClasses = (0, import_clsx33.default)(
     "typography-label14regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02",
-    import_component_theme16.focusVisible.inset,
+    import_component_theme15.focusVisible.inset,
     {
       "bg-selectedUi fill-interactive01 text-interactive01": isSortKey,
       "bg-uiBackground01 fill-icon01 text-interactive02": !isSortKey
@@ -2839,7 +2941,7 @@ function SelectItem2({ children, isSortKey, onClickItem }) {
 // src/select-sort/select-list.tsx
 var import_jsx_runtime49 = require("react/jsx-runtime");
 function SelectList2({ size, variant, sortOrder, onClickItem, onClickDeselect }) {
-  const listClasses = (0, import_clsx32.default)(
+  const listClasses = (0, import_clsx34.default)(
     "absolute z-dropdown w-max overflow-y-auto rounded bg-uiBackground01 py-2 shadow-floatingShadow",
     {
       "top-7": size === "x-small" || size === "small",
@@ -2848,9 +2950,9 @@ function SelectList2({ size, variant, sortOrder, onClickItem, onClickDeselect })
       "border-solid border border-uiBorder01": variant === "outline"
     }
   );
-  const deselectButtonClasses = (0, import_clsx32.default)(
+  const deselectButtonClasses = (0, import_clsx34.default)(
     "typography-label14regular flex h-8 w-full items-center px-3 text-interactive02 hover:bg-hover02 active:bg-active02",
-    import_component_theme17.focusVisible.inset
+    import_component_theme16.focusVisible.inset
   );
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("ul", { className: listClasses, children: [
     /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SelectItem2, { isSortKey: sortOrder === "ascend", onClickItem: () => onClickItem("ascend"), children: "\u6607\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
@@ -2872,38 +2974,43 @@ function SelectSort({
   onChange,
   onClickDeselect
 }) {
-  const [isOptionListOpen, setIsOptionListOpen] = (0, import_react43.useState)(false);
-  const targetRef = (0, import_react43.useRef)(null);
+  const [isOptionListOpen, setIsOptionListOpen] = (0, import_react44.useState)(false);
+  const targetRef = (0, import_react44.useRef)(null);
   useOutsideClick(targetRef, () => setIsOptionListOpen(false));
+  useDismissOnModalOpen(() => {
+    if (isOptionListOpen) {
+      setIsOptionListOpen(false);
+    }
+  });
   const handleClickToggle = () => setIsOptionListOpen((prev) => !prev);
-  const handleClickItem = (0, import_react43.useCallback)(
+  const handleClickItem = (0, import_react44.useCallback)(
     (value) => {
       onChange?.(value);
       setIsOptionListOpen(false);
     },
     [onChange]
   );
-  const wrapperClasses = (0, import_clsx33.default)("relative flex shrink-0 items-center gap-1 rounded", {
+  const wrapperClasses = (0, import_clsx35.default)("relative flex shrink-0 items-center gap-1 rounded", {
     "h-6": size === "x-small" || size === "small",
     "h-8": size === "medium",
     "h-10": size === "large",
     "cursor-not-allowed": isDisabled
   });
-  const buttonClasses = (0, import_clsx33.default)(
+  const buttonClasses = (0, import_clsx35.default)(
     "flex size-full items-center rounded",
-    import_component_theme18.buttonColors[variant].hover,
-    import_component_theme18.buttonColors[variant].active,
-    import_component_theme18.buttonColors[variant].disabled,
-    import_component_theme18.focusVisible.normal,
+    import_component_theme17.buttonColors[variant].hover,
+    import_component_theme17.buttonColors[variant].active,
+    import_component_theme17.buttonColors[variant].disabled,
+    import_component_theme17.focusVisible.normal,
     {
-      [import_component_theme18.buttonColors[variant].selected]: isSortKey,
-      [import_component_theme18.buttonColors[variant].base]: !isSortKey,
+      [import_component_theme17.buttonColors[variant].selected]: isSortKey,
+      [import_component_theme17.buttonColors[variant].base]: !isSortKey,
       "px-2": size === "x-small" || size === "small",
       "px-4": size === "medium" || size === "large",
       "pointer-events-none": isDisabled
     }
   );
-  const labelClasses = (0, import_clsx33.default)("truncate", {
+  const labelClasses = (0, import_clsx35.default)("truncate", {
     "typography-label12regular": size === "x-small",
     "typography-label14regular": size === "small" || size === "medium",
     "typography-label16regular": size === "large",
@@ -2941,9 +3048,9 @@ function SelectSort({
 }
 
 // src/sort-button/sort-button.tsx
-var import_component_theme19 = require("@zenkigen-inc/component-theme");
-var import_clsx34 = __toESM(require("clsx"));
-var import_react44 = require("react");
+var import_component_theme18 = require("@zenkigen-inc/component-theme");
+var import_clsx36 = __toESM(require("clsx"));
+var import_react45 = require("react");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 function SortButton({
   size = "medium",
@@ -2955,7 +3062,7 @@ function SortButton({
   "aria-label": ariaLabel,
   ...rest
 }) {
-  const handleClick = (0, import_react44.useCallback)(() => {
+  const handleClick = (0, import_react45.useCallback)(() => {
     if (isDisabled || !onClick) return;
     onClick();
   }, [isDisabled, onClick]);
@@ -2964,29 +3071,29 @@ function SortButton({
     if (sortOrder === "descend") return "arrow-down";
     return "angle-small-down";
   };
-  const wrapperClasses = (0, import_clsx34.default)("relative flex shrink-0 items-center gap-1 rounded", {
+  const wrapperClasses = (0, import_clsx36.default)("relative flex shrink-0 items-center gap-1 rounded", {
     "h-6": size === "x-small" || size === "small",
     "h-8": size === "medium",
     "h-10": size === "large",
     "cursor-not-allowed": isDisabled
   });
-  const buttonClasses = (0, import_clsx34.default)(
+  const buttonClasses = (0, import_clsx36.default)(
     "flex size-full items-center rounded",
-    import_component_theme19.buttonColors.text.hover,
-    import_component_theme19.buttonColors.text.active,
-    import_component_theme19.buttonColors.text.disabled,
-    import_component_theme19.focusVisible.normal,
+    import_component_theme18.buttonColors.text.hover,
+    import_component_theme18.buttonColors.text.active,
+    import_component_theme18.buttonColors.text.disabled,
+    import_component_theme18.focusVisible.normal,
     {
-      [import_component_theme19.buttonColors.text.selected]: !isDisabled && sortOrder !== null,
+      [import_component_theme18.buttonColors.text.selected]: !isDisabled && sortOrder !== null,
       // ソート状態時は選択状態のスタイル
-      [import_component_theme19.buttonColors.text.base]: sortOrder === null,
+      [import_component_theme18.buttonColors.text.base]: sortOrder === null,
       // ソートなし時は通常のスタイル
       "px-2": size === "x-small" || size === "small",
       "px-4": size === "medium" || size === "large",
       "pointer-events-none": isDisabled
     }
   );
-  const labelClasses = (0, import_clsx34.default)("truncate", {
+  const labelClasses = (0, import_clsx36.default)("truncate", {
     "typography-label12regular": size === "x-small",
     "typography-label14regular": size === "small" || size === "medium",
     "typography-label16regular": size === "large",
@@ -3012,14 +3119,14 @@ function SortButton({
 }
 
 // src/tab/tab.tsx
-var import_clsx36 = require("clsx");
-var import_react45 = require("react");
+var import_clsx38 = require("clsx");
+var import_react46 = require("react");
 
 // src/tab/tab-item.tsx
-var import_clsx35 = require("clsx");
+var import_clsx37 = require("clsx");
 var import_jsx_runtime52 = require("react/jsx-runtime");
 var TabItem = ({ isSelected = false, isDisabled = false, icon, ...props }) => {
-  const classes = (0, import_clsx35.clsx)(
+  const classes = (0, import_clsx37.clsx)(
     "group relative z-0 flex items-center justify-center gap-1 py-2 leading-[24px] before:absolute before:inset-x-0 before:bottom-0 before:h-[2px] hover:text-interactive01 disabled:pointer-events-none disabled:text-disabled01",
     {
       "typography-label14regular text-interactive02": !isSelected,
@@ -3027,7 +3134,7 @@ var TabItem = ({ isSelected = false, isDisabled = false, icon, ...props }) => {
       "before:bg-interactive01 hover:before:bg-interactive01 pointer-events-none": isSelected
     }
   );
-  const iconWrapperClasses = (0, import_clsx35.clsx)("flex shrink-0 items-center", {
+  const iconWrapperClasses = (0, import_clsx37.clsx)("flex shrink-0 items-center", {
     "fill-disabled01": isDisabled,
     "fill-interactive01": !isDisabled && isSelected,
     "fill-icon01 group-hover:fill-interactive01": !isDisabled && !isSelected
@@ -3052,9 +3159,9 @@ var TabItem = ({ isSelected = false, isDisabled = false, icon, ...props }) => {
 // src/tab/tab.tsx
 var import_jsx_runtime53 = require("react/jsx-runtime");
 function Tab({ children, layout = "auto" }) {
-  const childrenCount = import_react45.Children.count(children);
+  const childrenCount = import_react46.Children.count(children);
   const containerStyle = layout === "equal" ? { gridTemplateColumns: `repeat(${childrenCount}, minmax(0,1fr))` } : {};
-  const containerClasses = (0, import_clsx36.clsx)(
+  const containerClasses = (0, import_clsx38.clsx)(
     "relative gap-4 px-6 before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-uiBorder01",
     {
       flex: layout === "auto",
@@ -3066,18 +3173,18 @@ function Tab({ children, layout = "auto" }) {
 Tab.Item = TabItem;
 
 // src/table/table-cell.tsx
-var import_clsx37 = __toESM(require("clsx"));
+var import_clsx39 = __toESM(require("clsx"));
 var import_jsx_runtime54 = require("react/jsx-runtime");
 function TableCell({ children, className, isHeader = false }) {
-  const classes = (0, import_clsx37.default)("border-b border-uiBorder01", { "sticky top-0 z-10 bg-white": isHeader }, className);
+  const classes = (0, import_clsx39.default)("border-b border-uiBorder01", { "sticky top-0 z-10 bg-white": isHeader }, className);
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: classes, children });
 }
 
 // src/table/table-row.tsx
-var import_clsx38 = __toESM(require("clsx"));
+var import_clsx40 = __toESM(require("clsx"));
 var import_jsx_runtime55 = require("react/jsx-runtime");
 function TableRow({ children, isHoverBackgroundVisible = false }) {
-  const rowClasses = (0, import_clsx38.default)("contents", isHoverBackgroundVisible && "[&:hover>div]:bg-hoverUi02");
+  const rowClasses = (0, import_clsx40.default)("contents", isHoverBackgroundVisible && "[&:hover>div]:bg-hoverUi02");
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: rowClasses, children });
 }
 
@@ -3110,19 +3217,19 @@ Table.Row = TableRow;
 Table.Cell = TableCell;
 
 // src/tag/tag.tsx
-var import_component_theme21 = require("@zenkigen-inc/component-theme");
-var import_clsx40 = __toESM(require("clsx"));
+var import_component_theme20 = require("@zenkigen-inc/component-theme");
+var import_clsx42 = __toESM(require("clsx"));
 
 // src/tag/delete-icon.tsx
-var import_component_theme20 = require("@zenkigen-inc/component-theme");
-var import_clsx39 = __toESM(require("clsx"));
+var import_component_theme19 = require("@zenkigen-inc/component-theme");
+var import_clsx41 = __toESM(require("clsx"));
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var DeleteIcon = ({ color, variant, onClick }) => {
-  const deleteButtonClasses = (0, import_clsx39.default)(
+  const deleteButtonClasses = (0, import_clsx41.default)(
     "group ml-2 size-[14px] rounded-full p-0.5 hover:cursor-pointer hover:bg-iconOnColor focus-visible:bg-iconOnColor",
-    import_component_theme20.focusVisible.normal
+    import_component_theme19.focusVisible.normal
   );
-  const deletePathClasses = (0, import_clsx39.default)({
+  const deletePathClasses = (0, import_clsx41.default)({
     "fill-interactive02": color === "gray" || variant === "light",
     "group-hover:fill-interactive02 group-focus-visible:fill-interactive02 fill-iconOnColor": color !== "gray"
   });
@@ -3140,17 +3247,16 @@ var DeleteIcon = ({ color, variant, onClick }) => {
 // src/tag/tag.tsx
 var import_jsx_runtime58 = require("react/jsx-runtime");
 function Tag({ id, children, color, variant = "normal", size = "medium", isEditable, onDelete }) {
-  const wrapperClasses = (0, import_clsx40.default)("flex", "items-center", "justify-center", {
-    [import_component_theme21.tagColors[color]]: variant === "normal",
-    [import_component_theme21.tagLightColors[color]]: variant === "light",
+  const wrapperClasses = (0, import_clsx42.default)("flex", "items-center", "justify-center", {
+    [import_component_theme20.tagColors[color]]: variant === "normal",
+    [import_component_theme20.tagLightColors[color]]: variant === "light",
     "h-[14px] typography-label11regular": !isEditable && size === "x-small",
     "h-4 typography-label12regular": !isEditable && size === "small",
-    "h-[18px] typography-label14regular": !isEditable && size === "medium",
-    "h-[22px] typography-label14regular": isEditable && size === "medium",
+    "h-5 typography-label14regular": size === "medium",
     "rounded-full": isEditable,
     rounded: !isEditable,
-    "py-0.5 px-1": !isEditable,
-    "py-1 px-2": isEditable
+    "px-1": !isEditable,
+    "px-2": isEditable
   });
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: wrapperClasses, children: [
     children,
@@ -3159,14 +3265,14 @@ function Tag({ id, children, color, variant = "normal", size = "medium", isEdita
 }
 
 // src/text-area/text-area.tsx
-var import_clsx43 = require("clsx");
-var import_react49 = require("react");
+var import_clsx45 = require("clsx");
+var import_react50 = require("react");
 
 // src/text-area/text-area-context.tsx
-var import_react46 = require("react");
-var TextAreaCompoundContext = (0, import_react46.createContext)(null);
+var import_react47 = require("react");
+var TextAreaCompoundContext = (0, import_react47.createContext)(null);
 var useTextAreaCompoundContext = (componentName) => {
-  const context = (0, import_react46.useContext)(TextAreaCompoundContext);
+  const context = (0, import_react47.useContext)(TextAreaCompoundContext);
   if (context == null) {
     throw new Error(`${componentName} \u3092\u4F7F\u7528\u3059\u308B\u306B\u306F TextArea \u306E\u5B50\u8981\u7D20\u3068\u3057\u3066\u914D\u7F6E\u3059\u308B\u5FC5\u8981\u304C\u3042\u308B\u3002`);
   }
@@ -3174,10 +3280,10 @@ var useTextAreaCompoundContext = (componentName) => {
 };
 
 // src/text-area/text-area-error-message.tsx
-var import_clsx41 = require("clsx");
-var import_react47 = require("react");
+var import_clsx43 = require("clsx");
+var import_react48 = require("react");
 var import_jsx_runtime59 = require("react/jsx-runtime");
-var TextAreaErrorMessage = (0, import_react47.forwardRef)(
+var TextAreaErrorMessage = (0, import_react48.forwardRef)(
   ({ "aria-live": ariaLive = "assertive", ...props }, ref) => {
     const { textAreaProps } = useTextAreaCompoundContext("TextArea.ErrorMessage");
     const typographyClass = textAreaProps.size === "large" ? "typography-label13regular" : "typography-label12regular";
@@ -3185,20 +3291,20 @@ var TextAreaErrorMessage = (0, import_react47.forwardRef)(
     if (!shouldRender) {
       return null;
     }
-    const errorMessageClassName = (0, import_clsx41.clsx)(typographyClass, "text-supportError");
+    const errorMessageClassName = (0, import_clsx43.clsx)(typographyClass, "text-supportError");
     return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { ref, className: errorMessageClassName, "aria-live": ariaLive, ...props });
   }
 );
 TextAreaErrorMessage.displayName = "TextArea.ErrorMessage";
 
 // src/text-area/text-area-helper-message.tsx
-var import_clsx42 = require("clsx");
-var import_react48 = require("react");
+var import_clsx44 = require("clsx");
+var import_react49 = require("react");
 var import_jsx_runtime60 = require("react/jsx-runtime");
-var TextAreaHelperMessage = (0, import_react48.forwardRef)((props, ref) => {
+var TextAreaHelperMessage = (0, import_react49.forwardRef)((props, ref) => {
   const { textAreaProps } = useTextAreaCompoundContext("TextArea.HelperMessage");
   const typographyClass = textAreaProps.size === "large" ? "typography-label13regular" : "typography-label12regular";
-  const helperMessageClassName = (0, import_clsx42.clsx)(typographyClass, "text-text02");
+  const helperMessageClassName = (0, import_clsx44.clsx)(typographyClass, "text-text02");
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { ref, className: helperMessageClassName, ...props });
 });
 TextAreaHelperMessage.displayName = "TextArea.HelperMessage";
@@ -3207,6 +3313,7 @@ TextAreaHelperMessage.displayName = "TextArea.HelperMessage";
 var import_jsx_runtime61 = require("react/jsx-runtime");
 function TextAreaInner({
   size = "medium",
+  variant = "outline",
   isResizable = false,
   autoHeight = false,
   maxHeight,
@@ -3220,15 +3327,16 @@ function TextAreaInner({
   maxLength,
   ...props
 }, ref) {
-  const autoGeneratedId = (0, import_react49.useId)();
-  const textAreaPropsForContext = (0, import_react49.useMemo)(
+  const autoGeneratedId = (0, import_react50.useId)();
+  const textAreaPropsForContext = (0, import_react50.useMemo)(
     () => ({
       size,
+      variant,
       isError
     }),
-    [size, isError]
+    [size, variant, isError]
   );
-  const contextValue = (0, import_react49.useMemo)(
+  const contextValue = (0, import_react50.useMemo)(
     () => ({
       textAreaProps: textAreaPropsForContext,
       forwardedRef: ref
@@ -3238,21 +3346,21 @@ function TextAreaInner({
   const helperMessageIds = [];
   const errorIds = [];
   const describedByBaseId = props.id ?? autoGeneratedId;
-  const enhancedChildren = import_react49.Children.map(children, (child) => {
-    if (!(0, import_react49.isValidElement)(child)) {
+  const enhancedChildren = import_react50.Children.map(children, (child) => {
+    if (!(0, import_react50.isValidElement)(child)) {
       return child;
     }
     if (child.type === TextAreaHelperMessage) {
       const helperChild = child;
       const assignedId = helperChild.props.id ?? `${describedByBaseId}-helper-${helperMessageIds.length + 1}`;
       helperMessageIds.push(assignedId);
-      return (0, import_react49.cloneElement)(helperChild, { id: assignedId });
+      return (0, import_react50.cloneElement)(helperChild, { id: assignedId });
     }
     if (child.type === TextAreaErrorMessage && isError) {
       const errorChild = child;
       const assignedId = errorChild.props.id ?? `${describedByBaseId}-error-${errorIds.length + 1}`;
       errorIds.push(assignedId);
-      return (0, import_react49.cloneElement)(errorChild, { id: assignedId });
+      return (0, import_react50.cloneElement)(errorChild, { id: assignedId });
     }
     return child;
   });
@@ -3278,30 +3386,41 @@ function TextAreaInner({
     ...ariaInvalidProps,
     ...maxLengthProps
   };
-  const textAreaWrapperClassName = (0, import_clsx43.clsx)(
+  const isBorderless = variant === "text";
+  const textAreaWrapperClassName = (0, import_clsx45.clsx)(
     "box-border flex w-full overflow-hidden rounded border",
     {
-      "border-supportError": isError && !disabled,
-      "border-uiBorder02": !isError && !disabled,
-      "hover:border-hoverInput": !disabled && !isError,
-      "hover:focus-within:border-activeInput": !isError,
-      "focus-within:border-activeInput": !isError,
-      "bg-disabled02 border-disabled01": disabled
+      // outline variant
+      "border-supportError": !isBorderless && isError && !disabled,
+      "border-uiBorder02": !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
     },
-    className
-  );
-  const textAreaClassName = (0, import_clsx43.clsx)(
-    "w-full border-none bg-uiBackground01 outline-none placeholder:text-textPlaceholder disabled:text-textPlaceholder",
-    {
-      "typography-body14regular px-2 py-2": size === "medium",
-      "typography-body16regular px-3 py-2": size === "large",
-      "field-sizing-content": autoHeight,
-      "text-text01": !isError,
-      "text-supportError": isError,
-      "bg-disabled02": disabled,
-      "resize-none": !isResizable
-    }
+    // className は variant="outline" のみ受け入れ、後方互換のため wrapper の末尾に合成（@deprecated）
+    !isBorderless && className
   );
+  const textAreaClassName = (0, import_clsx45.clsx)("w-full border-none bg-uiBackground01 outline-none", {
+    // outline: 従来の padding
+    "typography-body14regular px-2 py-2": !isBorderless && size === "medium",
+    "typography-body16regular px-3 py-2": !isBorderless && size === "large",
+    // text: padding なし
+    "typography-body14regular": isBorderless && size === "medium",
+    "typography-body16regular": isBorderless && size === "large",
+    "disabled:text-textPlaceholder": !isBorderless,
+    "disabled:text-disabled01": isBorderless,
+    "field-sizing-content": autoHeight,
+    "text-text01": !isError,
+    "text-supportError": isError,
+    // placeholder 色（text variant エラー時のみ上書き）
+    "placeholder:text-textPlaceholder": !(isBorderless && isError && !disabled),
+    "placeholder:text-supportErrorLight": isBorderless && isError && !disabled,
+    "bg-disabled02": !isBorderless && disabled,
+    "resize-none": !isResizable
+  });
   const hasHeight = height != null && String(height).trim().length > 0;
   const textAreaElement = /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     "div",
@@ -3310,7 +3429,8 @@ function TextAreaInner({
       style: {
         ...{ maxHeight },
         // height/minHeight はラッパに適用し、外形を揃える
-        ...!autoHeight && hasHeight ? { height } : {},
+        // isResizable 時はラッパに固定高さを設定しない（textarea のリサイズに追従させるため）
+        ...!autoHeight && hasHeight && !isResizable ? { height } : {},
         ...autoHeight && hasHeight ? { minHeight: height } : {}
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
@@ -3321,7 +3441,8 @@ function TextAreaInner({
           ...mergedTextAreaProps,
           disabled,
           style: {
-            height: autoHeight ? "auto" : "100%",
+            // isResizable 時は height を textarea の初期高さとして直接設定し、リサイズ起点にする
+            height: autoHeight ? "auto" : isResizable && hasHeight ? height : "100%",
             minHeight: autoHeight && hasHeight ? "100%" : "auto"
           }
         }
@@ -3332,7 +3453,7 @@ function TextAreaInner({
     "div",
     {
       id: counterId,
-      className: (0, import_clsx43.clsx)(
+      className: (0, import_clsx45.clsx)(
         "shrink-0",
         size === "large" ? "typography-label13regular" : "typography-label12regular",
         !disabled && isExceeded ? "text-supportError" : "text-text02"
@@ -3341,7 +3462,7 @@ function TextAreaInner({
       children: counterLimit != null ? `${currentLength}/${counterLimit}\u6587\u5B57` : `${currentLength}\u6587\u5B57`
     }
   ) : null;
-  const stackedChildren = enhancedChildren == null ? [] : import_react49.Children.toArray(enhancedChildren);
+  const stackedChildren = enhancedChildren == null ? [] : import_react50.Children.toArray(enhancedChildren);
   const hasMessageChildren = stackedChildren.length > 0;
   const hasBottomContent = hasMessageChildren || counterElement != null;
   if (!hasBottomContent) {
@@ -3362,14 +3483,14 @@ var attachStatics2 = (component) => {
   component.displayName = "TextArea";
   return component;
 };
-var TextAreaBase = (0, import_react49.forwardRef)(function TextAreaBase2(props, ref) {
+var TextAreaBase = (0, import_react50.forwardRef)(function TextAreaBase2(props, ref) {
   return TextAreaInner(props, ref);
 });
 var TextArea = attachStatics2(TextAreaBase);
 
 // src/toast/toast.tsx
-var import_clsx44 = __toESM(require("clsx"));
-var import_react50 = require("react");
+var import_clsx46 = __toESM(require("clsx"));
+var import_react51 = require("react");
 var import_jsx_runtime62 = require("react/jsx-runtime");
 var CLOSE_TIME_MSEC = 5e3;
 function Toast({
@@ -3380,8 +3501,8 @@ function Toast({
   children,
   onClickClose
 }) {
-  const [isRemoving, setIsRemoving] = (0, import_react50.useState)(false);
-  const handleClose = (0, import_react50.useCallback)(() => {
+  const [isRemoving, setIsRemoving] = (0, import_react51.useState)(false);
+  const handleClose = (0, import_react51.useCallback)(() => {
     if (isAnimation) {
       setIsRemoving(true);
     } else {
@@ -3389,17 +3510,17 @@ function Toast({
     }
   }, [isAnimation, onClickClose]);
   const handleAnimationEnd = (e) => window.getComputedStyle(e.currentTarget).opacity === "0" && onClickClose();
-  const wrapperClasses = (0, import_clsx44.default)("pointer-events-auto flex items-start gap-1 bg-white p-4 shadow-floatingShadow", {
+  const wrapperClasses = (0, import_clsx46.default)("pointer-events-auto flex items-start gap-1 bg-white p-4 shadow-floatingShadow", {
     ["animate-toast-in"]: isAnimation && !isRemoving,
     ["animate-toast-out opacity-0"]: isAnimation && isRemoving
   });
-  const iconClasses = (0, import_clsx44.default)("flex items-center", {
+  const iconClasses = (0, import_clsx46.default)("flex items-center", {
     "fill-supportSuccess": state === "success",
     "fill-supportError": state === "error",
     "fill-supportWarning": state === "warning",
     "fill-supportInfo": state === "information"
   });
-  const textClasses = (0, import_clsx44.default)("typography-body13regular flex-1 pt-[3px]", {
+  const textClasses = (0, import_clsx46.default)("typography-body13regular flex-1 pt-[3px]", {
     "text-supportError": state === "error",
     "text-text01": state === "success" || state === "warning" || state === "information"
   });
@@ -3409,7 +3530,7 @@ function Toast({
     warning: "warning",
     information: "information-filled"
   };
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     const timer = window.setTimeout(() => {
       if (isAutoClose) {
         setIsRemoving(true);
@@ -3425,20 +3546,20 @@ function Toast({
 }
 
 // src/toast/toast-provider.tsx
-var import_react51 = require("react");
+var import_react52 = require("react");
 var import_react_dom3 = require("react-dom");
 var import_jsx_runtime63 = require("react/jsx-runtime");
-var ToastContext = (0, import_react51.createContext)({});
+var ToastContext = (0, import_react52.createContext)({});
 var ToastProvider = ({ children }) => {
-  const [isClientRender, setIsClientRender] = (0, import_react51.useState)(false);
-  const [toasts, setToasts] = (0, import_react51.useState)([]);
-  const addToast = (0, import_react51.useCallback)(({ message, state }) => {
+  const [isClientRender, setIsClientRender] = (0, import_react52.useState)(false);
+  const [toasts, setToasts] = (0, import_react52.useState)([]);
+  const addToast = (0, import_react52.useCallback)(({ message, state }) => {
     setToasts((prev) => [...prev, { id: Math.trunc(Math.random() * 1e5), message, state }]);
   }, []);
-  const removeToast = (0, import_react51.useCallback)((id) => {
+  const removeToast = (0, import_react52.useCallback)((id) => {
     setToasts((prev) => prev.filter((snackbar) => snackbar.id !== id));
   }, []);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     setIsClientRender(true);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(ToastContext.Provider, { value: { addToast, removeToast }, children: [
@@ -3450,11 +3571,11 @@ var ToastProvider = ({ children }) => {
   ] });
 };
 var useToast = () => {
-  return (0, import_react51.useContext)(ToastContext);
+  return (0, import_react52.useContext)(ToastContext);
 };
 
 // src/toggle/toggle.tsx
-var import_clsx45 = __toESM(require("clsx"));
+var import_clsx47 = __toESM(require("clsx"));
 var import_jsx_runtime64 = require("react/jsx-runtime");
 function Toggle({
   id,
@@ -3465,7 +3586,7 @@ function Toggle({
   labelPosition = "right",
   isDisabled = false
 }) {
-  const baseClasses = (0, import_clsx45.default)("relative flex items-center rounded-full", {
+  const baseClasses = (0, import_clsx47.default)("relative flex items-center rounded-full", {
     "bg-disabledOn": isDisabled && isChecked,
     "bg-disabled01": isDisabled && !isChecked,
     "bg-interactive01 peer-hover:bg-hover01": !isDisabled && isChecked,
@@ -3473,16 +3594,16 @@ function Toggle({
     "w-8 h-4 px-[3px]": size === "small",
     "w-12 h-6 px-1": size === "medium" || size === "large"
   });
-  const inputClasses = (0, import_clsx45.default)(
+  const inputClasses = (0, import_clsx47.default)(
     "peer absolute inset-0 z-[1] opacity-0",
     isDisabled ? "cursor-not-allowed" : "cursor-pointer"
   );
-  const indicatorClasses = (0, import_clsx45.default)("rounded-full bg-iconOnColor", {
+  const indicatorClasses = (0, import_clsx47.default)("rounded-full bg-iconOnColor", {
     "w-2.5 h-2.5": size === "small",
     "w-4 h-4": size === "medium" || size === "large",
     "ml-auto": isChecked
   });
-  const labelClasses = (0, import_clsx45.default)("break-all", {
+  const labelClasses = (0, import_clsx47.default)("break-all", {
     "mr-2": labelPosition === "left",
     "ml-2": labelPosition === "right",
     "typography-label14regular": size === "small" || size === "medium",
@@ -3510,17 +3631,17 @@ function Toggle({
 }
 
 // src/tooltip/tooltip.tsx
-var import_react53 = require("react");
+var import_react54 = require("react");
 var import_react_dom4 = require("react-dom");
 
 // src/tooltip/tooltip-content.tsx
-var import_clsx47 = __toESM(require("clsx"));
+var import_clsx49 = __toESM(require("clsx"));
 
 // src/tooltip/tail-icon.tsx
-var import_clsx46 = __toESM(require("clsx"));
+var import_clsx48 = __toESM(require("clsx"));
 var import_jsx_runtime65 = require("react/jsx-runtime");
 var TailIcon = (props) => {
-  const tailClasses = (0, import_clsx46.default)("absolute fill-uiBackgroundTooltip", {
+  const tailClasses = (0, import_clsx48.default)("absolute fill-uiBackgroundTooltip", {
     "rotate-180": props.verticalPosition === "bottom",
     "rotate-0": props.verticalPosition !== "bottom",
     "-top-1": props.verticalPosition === "bottom" && props.size === "small",
@@ -3563,7 +3684,7 @@ var TooltipContent = ({
   maxWidth,
   isPortal = false
 }) => {
-  const tooltipWrapperClasses = (0, import_clsx47.default)("absolute z-tooltip m-auto flex", {
+  const tooltipWrapperClasses = (0, import_clsx49.default)("absolute z-tooltip m-auto flex", {
     "top-0": !isPortal && verticalPosition === "top",
     "bottom-0": !isPortal && verticalPosition === "bottom",
     "justify-start": horizontalAlign === "left",
@@ -3572,7 +3693,7 @@ var TooltipContent = ({
     "w-[24px]": size === "small",
     "w-[46px]": size !== "small"
   });
-  const tooltipBodyClasses = (0, import_clsx47.default)(
+  const tooltipBodyClasses = (0, import_clsx49.default)(
     "absolute z-tooltip inline-block w-max rounded bg-uiBackgroundTooltip text-textOnColor",
     {
       "typography-body12regular": size === "small",
@@ -3605,9 +3726,9 @@ var TooltipContent = ({
 };
 
 // src/tooltip/tooltip-hook.ts
-var import_react52 = require("react");
+var import_react53 = require("react");
 var useTooltip = () => {
-  const calculatePosition = (0, import_react52.useCallback)(
+  const calculatePosition = (0, import_react53.useCallback)(
     (args) => {
       const result = {
         maxWidth: "none",
@@ -3671,8 +3792,8 @@ function Tooltip({
   portalTarget
 }) {
   const { calculatePosition } = useTooltip();
-  const [isVisible, setIsVisible] = (0, import_react53.useState)(false);
-  const [tooltipPosition, setTooltipPosition] = (0, import_react53.useState)({
+  const [isVisible, setIsVisible] = (0, import_react54.useState)(false);
+  const [tooltipPosition, setTooltipPosition] = (0, import_react54.useState)({
     maxWidth: "none",
     width: "auto",
     left: "0px",
@@ -3681,8 +3802,8 @@ function Tooltip({
     translateX: "0",
     translateY: "0"
   });
-  const targetRef = (0, import_react53.useRef)(null);
-  const handleMouseOverWrapper = (0, import_react53.useCallback)(() => {
+  const targetRef = (0, import_react54.useRef)(null);
+  const handleMouseOverWrapper = (0, import_react54.useCallback)(() => {
     if (isDisabledHover) {
       return;
     }
@@ -3699,16 +3820,16 @@ function Tooltip({
     }
     setIsVisible(true);
   }, [isDisabledHover, calculatePosition, maxWidth, verticalPosition, horizontalAlign, size]);
-  const handleMouseOutWrapper = (0, import_react53.useCallback)(() => {
+  const handleMouseOutWrapper = (0, import_react54.useCallback)(() => {
     setIsVisible(false);
   }, []);
-  (0, import_react53.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (targetRef.current === null) return;
     const dimensions = targetRef.current?.getBoundingClientRect();
     const position = calculatePosition({ dimensions, maxWidth, verticalPosition, horizontalAlign, tooltipSize: size });
     setTooltipPosition(position);
   }, [calculatePosition, horizontalAlign, maxWidth, size, verticalPosition]);
-  (0, import_react53.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (!isVisible) return;
     const updatePosition = () => {
       if (targetRef.current === null) return;