@zenkigen-inc/component-ui 1.20.1 → 1.20.4

package/dist/index.mjs

@@ -4,7 +4,6 @@ import { clsx as clsx2 } from "clsx";
 
 // src/icon/icon.tsx
 import { iconElements } from "@zenkigen-inc/component-icons";
-import { iconColors } from "@zenkigen-inc/component-theme";
 import { clsx } from "clsx";
 import { Fragment, jsx } from "react/jsx-runtime";
 var Icon = ({ size = "medium", isDisabled = false, ...props }) => {
@@ -12,10 +11,7 @@ var Icon = ({ size = "medium", isDisabled = false, ...props }) => {
     "inline-block shrink-0",
     {
       "fill-disabled01": isDisabled,
-      [iconColors.icon01]: !isDisabled && props.color === "icon01",
-      [iconColors.icon02]: !isDisabled && props.color === "icon02",
-      [iconColors.icon03]: !isDisabled && props.color === "icon03",
-      [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",
@@ -108,6 +104,7 @@ var createButton = (props) => {
       "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",
       [buttonColors[variant].selected]: isSelected,
       [buttonColors[variant].base]: !isSelected,
@@ -116,8 +113,8 @@ var createButton = (props) => {
       "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";
@@ -136,18 +133,22 @@ var InternalButton = (props) => {
 
 // src/checkbox/checkbox.tsx
 import { focusVisible as focusVisible2 } from "@zenkigen-inc/component-theme";
-import clsx4 from "clsx";
+import clsx6 from "clsx";
 import { useCallback, useState } from "react";
 
 // src/checkbox/checked-icon.tsx
+import clsx4 from "clsx";
 import { jsx as jsx5 } from "react/jsx-runtime";
-var CheckedIcon = () => {
+var CheckedIcon = ({ size = "medium" }) => {
   return /* @__PURE__ */ jsx5(
     "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: clsx4("absolute z-10 rounded-sm fill-iconOnColor hover:rounded-sm", {
+        "size-5": size === "medium",
+        "size-6": size === "large"
+      }),
       children: /* @__PURE__ */ jsx5(
         "path",
         {
@@ -161,14 +162,18 @@ var CheckedIcon = () => {
 };
 
 // src/checkbox/minus-icon.tsx
+import clsx5 from "clsx";
 import { jsx as jsx6 } from "react/jsx-runtime";
-var MinusIcon = () => {
+var MinusIcon = ({ size = "medium" }) => {
   return /* @__PURE__ */ jsx6(
     "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: clsx5("absolute z-10 rounded-sm fill-iconOnColor hover:rounded-sm", {
+        "size-5": size === "medium",
+        "size-6": size === "large"
+      }),
       children: /* @__PURE__ */ jsx6("path", { d: "M4.94723 10.5028H9.49726H10.5028H15.0528C15.3293 10.5028 15.5556 10.2766 15.5556 10C15.5556 9.72352 15.3293 9.49725 15.0528 9.49725H10.5028H9.49726H4.94723C4.67071 9.49725 4.44446 9.72352 4.44446 10C4.44446 10.2766 4.67071 10.5028 4.94723 10.5028Z" })
     }
   );
@@ -185,7 +190,8 @@ function Checkbox({
   isDisabled = false,
   onChange,
   label,
-  color = "default"
+  color = "default",
+  size = "medium"
 }) {
   const [isMouseOver, setIsMouseOver] = useState(false);
   const handleMouseOverInput = useCallback(() => {
@@ -198,12 +204,14 @@ function Checkbox({
     (e) => !isDisabled && onChange?.(e),
     [isDisabled, onChange]
   );
-  const baseInputClasses = clsx4("peer absolute z-[1] size-5 opacity-0", {
+  const sizeBox = size === "large" ? "size-6" : "size-5";
+  const baseInputClasses = clsx6("peer absolute inset-0 z-[1] opacity-0", {
     "cursor-not-allowed": isDisabled,
     "cursor-pointer": !isDisabled
   });
-  const boxClasses = clsx4(
-    "inline-flex size-5 items-center justify-center rounded-sm border bg-white",
+  const boxClasses = clsx6(
+    "inline-flex items-center justify-center rounded-sm border bg-white",
+    sizeBox,
     focusVisible2.normalPeer,
     {
       "border-disabled01": isDisabled,
@@ -214,11 +222,11 @@ function Checkbox({
       "border-supportError": !isDisabled && !isMouseOver && color === "error"
     }
   );
-  const indicatorClasses = clsx4("relative flex size-5 flex-[0_0_auto] items-center justify-center", {
+  const indicatorClasses = clsx6("relative flex flex-[0_0_auto] items-center justify-center", sizeBox, {
     "bg-disabled01": isDisabled && isChecked,
     "border-disabled01": isDisabled
   });
-  const afterClasses = clsx4("absolute inset-0 m-auto block rounded-sm", {
+  const afterClasses = clsx6("absolute inset-0 m-auto block rounded-sm", {
     "bg-disabled01": isDisabled && isChecked,
     "bg-hover01": !(isDisabled && isChecked) && isMouseOver,
     "bg-interactive01": !(isDisabled && isChecked) && !isMouseOver,
@@ -229,15 +237,23 @@ function Checkbox({
     "scale-0": !isChecked,
     "scale-100": isChecked
   });
-  const hoverIndicatorClasses = clsx4("inline-block size-3 rounded-[1px]", {
+  const hoverIndicatorClasses = clsx6("inline-block rounded-[1px]", {
+    "size-3": size === "medium",
+    "size-4": size === "large",
     "bg-hoverUi": !isDisabled && !isChecked && isMouseOver
   });
-  const labelClasses = clsx4("typography-label14regular ml-2 flex-[1_0_0] break-all", {
+  const labelClasses = clsx6("ml-2 flex-[1_0_0] break-all", {
+    "typography-label14regular": size === "medium",
+    "typography-label16regular": size === "large",
     "pointer-events-none cursor-not-allowed text-disabled01": isDisabled,
     "cursor-pointer text-text01": !isDisabled
   });
+  const outerWrapperClasses = clsx6("relative flex items-center justify-center", {
+    "size-6": size === "medium",
+    "h-8 w-7": size === "large"
+  });
   return /* @__PURE__ */ jsxs2("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "relative flex size-6 items-center justify-center", children: [
+    /* @__PURE__ */ jsxs2("div", { className: outerWrapperClasses, children: [
       /* @__PURE__ */ jsx7(
         "input",
         {
@@ -255,8 +271,8 @@ function Checkbox({
       ),
       /* @__PURE__ */ jsx7("div", { className: boxClasses, children: /* @__PURE__ */ jsxs2("div", { className: indicatorClasses, children: [
         /* @__PURE__ */ jsxs2("span", { className: afterClasses, children: [
-          isChecked && !isIndeterminate && /* @__PURE__ */ jsx7(CheckedIcon, {}),
-          isIndeterminate && /* @__PURE__ */ jsx7(MinusIcon, {})
+          isChecked && !isIndeterminate && /* @__PURE__ */ jsx7(CheckedIcon, { size }),
+          isIndeterminate && /* @__PURE__ */ jsx7(MinusIcon, { size })
         ] }),
         /* @__PURE__ */ jsx7("span", { className: hoverIndicatorClasses })
       ] }) })
@@ -272,17 +288,17 @@ import {
   cloneElement as cloneElement3,
   isValidElement,
   useCallback as useCallback3,
-  useEffect as useEffect3,
+  useEffect as useEffect4,
   useId,
   useMemo as useMemo2,
-  useRef as useRef3,
+  useRef as useRef4,
   useState as useState2
 } from "react";
 import { DayPicker } from "react-day-picker";
 
 // src/icon-button/icon-button.tsx
 import { buttonColors as buttonColors2, focusVisible as focusVisible3 } from "@zenkigen-inc/component-theme";
-import { clsx as clsx5 } from "clsx";
+import { clsx as clsx7 } from "clsx";
 import { jsx as jsx8 } from "react/jsx-runtime";
 function IconButton({
   icon,
@@ -291,10 +307,11 @@ function IconButton({
   isNoPadding = false,
   isDisabled = false,
   isSelected = false,
+  iconColor,
   iconAccentColor,
   ...props
 }) {
-  const baseClasses = clsx5(
+  const baseClasses = clsx7(
     "typography-label16regular flex items-center justify-center gap-1 rounded",
     buttonColors2[variant].hover,
     buttonColors2[variant].active,
@@ -312,24 +329,40 @@ function IconButton({
     }
   );
   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__ */ jsx8("a", { className: baseClasses, ...buttonProps, children: /* @__PURE__ */ jsx8(Icon, { name: icon, size: iconSize, ...iconAccentColorProps }) });
+    return /* @__PURE__ */ jsx8("a", { className: baseClasses, ...buttonProps, children: /* @__PURE__ */ jsx8(Icon, { name: icon, size: iconSize, ...iconColorProps, ...iconAccentColorProps }) });
   } else {
     const buttonProps = Object.fromEntries(Object.entries(props).filter(([key]) => key !== "isAnchor"));
-    return /* @__PURE__ */ jsx8("button", { type: "button", className: baseClasses, disabled: isDisabled, ...buttonProps, children: /* @__PURE__ */ jsx8(Icon, { name: icon, size: iconSize, ...iconAccentColorProps }) });
+    return /* @__PURE__ */ jsx8("button", { type: "button", className: baseClasses, disabled: isDisabled, ...buttonProps, children: /* @__PURE__ */ jsx8(Icon, { name: icon, size: iconSize, ...iconColorProps, ...iconAccentColorProps }) });
   }
 }
 
 // src/popover/popover.tsx
 import { autoUpdate, offset, useFloating, useId as useFloatingId } from "@floating-ui/react";
-import { useEffect as useEffect2, useMemo, useRef as useRef2 } from "react";
+import { useEffect as useEffect3, useMemo, useRef as useRef3 } from "react";
 
 // src/popover/popover-content.tsx
 import { FloatingPortal, useDismiss, useInteractions, useRole } from "@floating-ui/react";
 import * as React from "react";
-import { forwardRef, useCallback as useCallback2, useEffect, useRef } from "react";
+import { forwardRef, useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2 } from "react";
+
+// src/hooks/use-dismiss-on-modal-open.ts
+import { useEffect, useRef } from "react";
+var MODAL_OPEN_EVENT = "zenkigen-modal-open";
+var useDismissOnModalOpen = (dismiss) => {
+  const dismissRef = useRef(dismiss);
+  dismissRef.current = dismiss;
+  useEffect(() => {
+    const handler = () => {
+      dismissRef.current();
+    };
+    window.addEventListener(MODAL_OPEN_EVENT, handler);
+    return () => window.removeEventListener(MODAL_OPEN_EVENT, handler);
+  }, []);
+};
 
 // src/utils/react-utils.ts
 function composeRefs(...refs) {
@@ -372,7 +405,7 @@ var PopoverContent = forwardRef(function PopoverContent2({ children }, ref) {
         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;
@@ -387,14 +420,19 @@ var PopoverContent = forwardRef(function PopoverContent2({ children }, ref) {
     escapeKey: false
   });
   const interactions = useInteractions([dismiss, useRole(floating.context, { role: "dialog" })]);
-  useEffect(() => {
+  useDismissOnModalOpen(() => {
+    if (isOpen && onClose != null) {
+      onClose({ reason: "modal-open" });
+    }
+  });
+  useEffect2(() => {
     if (isOpen) {
       const element = floating.refs.floating.current;
       element?.focus?.({ preventScroll: true });
     }
   }, [isOpen, floating.refs.floating]);
-  const prevIsOpenRef = useRef(isOpen);
-  useEffect(() => {
+  const prevIsOpenRef = useRef2(isOpen);
+  useEffect2(() => {
     const hasPreviouslyBeenOpen = prevIsOpenRef.current;
     prevIsOpenRef.current = isOpen;
     if (hasPreviouslyBeenOpen && !isOpen) {
@@ -481,7 +519,7 @@ function Popover({
   onClose,
   anchorRef
 }) {
-  const triggerRef = useRef2(null);
+  const triggerRef = useRef3(null);
   const floating = useFloating({
     open: isOpen,
     onOpenChange: (open) => {
@@ -494,7 +532,7 @@ function Popover({
     whileElementsMounted: autoUpdate,
     strategy: "fixed"
   });
-  useEffect2(() => {
+  useEffect3(() => {
     if (anchorRef?.current) {
       floating.refs.setReference(anchorRef.current);
     }
@@ -531,11 +569,11 @@ var useDatePickerCompoundContext = (componentName) => {
 
 // src/date-picker/date-picker-day-button.tsx
 import { focusVisible as focusVisible4 } from "@zenkigen-inc/component-theme";
-import { clsx as clsx7 } from "clsx";
+import { clsx as clsx9 } from "clsx";
 import { DayButton } from "react-day-picker";
 
 // src/date-picker/date-picker-styles.ts
-import { clsx as clsx6 } from "clsx";
+import { clsx as clsx8 } from "clsx";
 import { getDefaultClassNames } from "react-day-picker";
 var defaultDayPickerClassNames = getDefaultClassNames();
 var DAY_PICKER_FONT_SIZE = "12px";
@@ -552,7 +590,7 @@ var dayPickerStyle = {
   fontWeight: 700
 };
 var dayPickerClassNames = {
-  month: clsx6(defaultDayPickerClassNames.month, "flex flex-col px-[7px] py-2")
+  month: clsx8(defaultDayPickerClassNames.month, "flex flex-col px-[7px] py-2")
 };
 var dayButtonBaseClass = "relative grid size-full place-items-center rounded-full !border !border-solid";
 
@@ -572,7 +610,7 @@ var CustomDayButton = ({ day, modifiers, className, style, ...buttonProps }) =>
       day,
       modifiers,
       style: { ...style, fontSize: DAY_PICKER_FONT_SIZE },
-      className: clsx7(
+      className: clsx9(
         className,
         dayButtonBaseClass,
         // 共通: フォーカスリング（有効な日のみ）
@@ -595,7 +633,7 @@ var CustomDayButton = ({ day, modifiers, className, style, ...buttonProps }) =>
 };
 
 // src/date-picker/date-picker-error-message.tsx
-import { clsx as clsx8 } from "clsx";
+import { clsx as clsx10 } from "clsx";
 import { forwardRef as forwardRef3 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
 var DatePickerErrorMessage = forwardRef3(
@@ -605,14 +643,14 @@ var DatePickerErrorMessage = forwardRef3(
     if (isError !== true) {
       return null;
     }
-    const errorMessageClassName = clsx8(typographyClass, "text-supportError");
+    const errorMessageClassName = clsx10(typographyClass, "text-supportError");
     return /* @__PURE__ */ jsx12("div", { ref, className: errorMessageClassName, "aria-live": ariaLive, ...props });
   }
 );
 DatePickerErrorMessage.displayName = "DatePicker.ErrorMessage";
 
 // src/date-picker/date-picker-month-caption.tsx
-import { clsx as clsx9 } from "clsx";
+import { clsx as clsx11 } from "clsx";
 import { useDayPicker } from "react-day-picker";
 
 // src/date-picker/date-picker-utils.ts
@@ -686,7 +724,7 @@ var CustomMonthCaption = ({ calendarMonth, className, displayIndex, style, ...pr
   return /* @__PURE__ */ jsxs3(
     "div",
     {
-      className: clsx9("flex items-center justify-between px-1 pb-0.5", className),
+      className: clsx11("flex items-center justify-between px-1 pb-0.5", className),
       style: { ...style, fontSize: "inherit", fontWeight: "inherit" },
       ...props,
       children: [
@@ -719,14 +757,14 @@ var CustomMonthCaption = ({ calendarMonth, className, displayIndex, style, ...pr
 };
 
 // src/date-picker/date-picker-weekday.tsx
-import { clsx as clsx10 } from "clsx";
+import { clsx as clsx12 } from "clsx";
 import { jsx as jsx14 } from "react/jsx-runtime";
 var CustomWeekday = ({ className, children, style, ...props }) => {
   return /* @__PURE__ */ jsx14(
     "th",
     {
       ...props,
-      className: clsx10(className, "m-0 size-7 p-0 text-center align-middle text-text02"),
+      className: clsx12(className, "m-0 size-7 p-0 text-center align-middle text-text02"),
       style: { ...style, fontSize: "inherit", fontWeight: "bold" },
       children
     }
@@ -760,7 +798,7 @@ var DatePicker = ({
     }
     return getMonthStartDate(value, timeZone);
   });
-  const calendarRef = useRef3(null);
+  const calendarRef = useRef4(null);
   const selectedKey = useMemo2(() => value == null ? null : formatDateKey(value, timeZone), [value, timeZone]);
   const selectedDate = useMemo2(() => {
     if (selectedKey == null) {
@@ -798,7 +836,7 @@ var DatePicker = ({
     [isOutsideMonth, isMinMaxDisabled]
   );
   const todayForCalendar = useMemo2(() => createLocalDateFromKey(formatLocalDateKey()), []);
-  useEffect3(() => {
+  useEffect4(() => {
     if (value == null) {
       const todayKey = formatLocalDateKey(/* @__PURE__ */ new Date());
       setDisplayMonth(createLocalDateFromKey(`${todayKey.slice(0, 7)}-01`));
@@ -806,7 +844,7 @@ var DatePicker = ({
     }
     setDisplayMonth(getMonthStartDate(value, timeZone));
   }, [value, timeZone]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!isOpen) {
       return;
     }
@@ -822,7 +860,7 @@ var DatePicker = ({
     });
     return () => cancelAnimationFrame(frame);
   }, [displayMonth, isOpen, value]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (isDisabled) {
       setIsOpen(false);
     }
@@ -974,14 +1012,14 @@ function Divider() {
 
 // src/dropdown/dropdown.tsx
 import { buttonColors as buttonColors3, focusVisible as focusVisible6 } from "@zenkigen-inc/component-theme";
-import clsx13 from "clsx";
-import { useCallback as useCallback4, useRef as useRef4, useState as useState3 } from "react";
+import clsx15 from "clsx";
+import { useCallback as useCallback4, useRef as useRef5, useState as useState3 } from "react";
 import { createPortal } from "react-dom";
 
 // src/hooks/use-outside-click.ts
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect5 } from "react";
 var useOutsideClick = (ref, handler, enabled = true) => {
-  useEffect4(() => {
+  useEffect5(() => {
     const listener = (event) => {
       const element = ref?.current;
       const target = event.target;
@@ -1012,7 +1050,7 @@ var DropdownContext = createContext3({
 
 // src/dropdown/dropdown-item.tsx
 import { focusVisible as focusVisible5 } from "@zenkigen-inc/component-theme";
-import clsx11 from "clsx";
+import clsx13 from "clsx";
 import { useContext as useContext3 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 function DropdownItem({ children, color = "gray", onClick }) {
@@ -1021,7 +1059,7 @@ function DropdownItem({ children, color = "gray", onClick }) {
     setIsVisible(false);
     onClick?.(event);
   };
-  const itemClasses = clsx11(
+  const itemClasses = clsx13(
     "typography-label14regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02",
     focusVisible5.inset,
     {
@@ -1033,7 +1071,7 @@ function DropdownItem({ children, color = "gray", onClick }) {
 }
 
 // src/dropdown/dropdown-menu.tsx
-import clsx12 from "clsx";
+import clsx14 from "clsx";
 import { useContext as useContext4 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
 function DropdownMenu({
@@ -1044,7 +1082,7 @@ function DropdownMenu({
   horizontalAlign = "left"
 }) {
   const { isVisible, isDisabled, targetDimensions, variant, portalTargetRef } = useContext4(DropdownContext);
-  const wrapperClasses = clsx12("z-dropdown w-max overflow-y-auto rounded bg-uiBackground01 shadow-floatingShadow", {
+  const wrapperClasses = clsx14("z-dropdown w-max overflow-y-auto rounded bg-uiBackground01 shadow-floatingShadow", {
     absolute: !portalTargetRef,
     "border-solid border border-uiBorder01": variant === "outline",
     "py-1": !isNoPadding,
@@ -1085,8 +1123,13 @@ function Dropdown({
     width: 0,
     height: 0
   });
-  const targetRef = useRef4(null);
+  const targetRef = useRef5(null);
   useOutsideClick(targetRef, () => setIsVisible(false));
+  useDismissOnModalOpen(() => {
+    if (isVisible) {
+      setIsVisible(false);
+    }
+  });
   const handleToggle = useCallback4(() => {
     if (targetRef.current === null) {
       return;
@@ -1103,10 +1146,10 @@ function Dropdown({
       setIsVisible(true);
     }
   }, [isVisible]);
-  const wrapperClasses = clsx13("relative flex shrink-0 items-center gap-1 rounded", {
+  const wrapperClasses = clsx15("relative flex shrink-0 items-center gap-1 rounded", {
     "cursor-not-allowed": isDisabled
   });
-  const childrenButtonClasses = clsx13(
+  const childrenButtonClasses = clsx15(
     "flex items-center justify-center rounded bg-uiBackground01 p-1 hover:bg-hover02 active:bg-active02",
     focusVisible6.normal,
     {
@@ -1114,7 +1157,7 @@ function Dropdown({
       "border border-uiBorder02": variant === "outline"
     }
   );
-  const buttonClasses = clsx13(
+  const buttonClasses = clsx15(
     "flex items-center rounded bg-uiBackground01",
     buttonColors3[variant].base,
     buttonColors3[variant].hover,
@@ -1128,7 +1171,7 @@ function Dropdown({
       "h-10 px-4": size === "large"
     }
   );
-  const labelClasses = clsx13("flex items-center", {
+  const labelClasses = clsx15("flex items-center", {
     "mr-1": !isArrowHidden && size === "x-small",
     "mr-2": !isArrowHidden && size !== "x-small",
     "typography-label12regular": size === "x-small",
@@ -1175,7 +1218,7 @@ Dropdown.Item = DropdownItem;
 // src/evaluation-star/evaluation-star.tsx
 import { iconElements as iconElements2 } from "@zenkigen-inc/component-icons";
 import { focusVisible as focusVisible7 } from "@zenkigen-inc/component-theme";
-import clsx14 from "clsx";
+import clsx16 from "clsx";
 import { useCallback as useCallback5, useState as useState4 } from "react";
 import { jsx as jsx20 } from "react/jsx-runtime";
 function EvaluationStar({ value, isEditable = false, onChangeRating, size = "medium" }) {
@@ -1192,7 +1235,7 @@ function EvaluationStar({ value, isEditable = false, onChangeRating, size = "med
     },
     [isEditable, onChangeRating]
   );
-  const starClasses = clsx14(focusVisible7.inset, { "w-6 h-6": size === "large", "w-4 h-4": size === "medium" });
+  const starClasses = clsx16(focusVisible7.inset, { "w-6 h-6": size === "large", "w-4 h-4": size === "medium" });
   const renderStar = (rating) => {
     const color = rating <= currentRating ? "fill-yellow-yellow50" : "fill-icon03";
     const IconComponent = iconElements2["star-filled"];
@@ -1201,7 +1244,7 @@ function EvaluationStar({ value, isEditable = false, onChangeRating, size = "med
       {
         type: "button",
         onClick: () => handleChangeRating(rating),
-        className: clsx14(color, starClasses),
+        className: clsx16(color, starClasses),
         disabled: !isEditable,
         children: /* @__PURE__ */ jsx20(IconComponent, {})
       },
@@ -1213,8 +1256,8 @@ function EvaluationStar({ value, isEditable = false, onChangeRating, size = "med
 }
 
 // src/file-input/file-input.tsx
-import { clsx as clsx15 } from "clsx";
-import { forwardRef as forwardRef4, useCallback as useCallback6, useId as useId2, useImperativeHandle, useRef as useRef5, useState as useState5 } from "react";
+import { clsx as clsx17 } from "clsx";
+import { forwardRef as forwardRef4, useCallback as useCallback6, useId as useId2, useImperativeHandle, useRef as useRef6, useState as useState5 } from "react";
 import { Fragment as Fragment2, jsx as jsx21, jsxs as jsxs6 } from "react/jsx-runtime";
 var ERROR_TYPES = {
   SIZE_TOO_LARGE: "SIZE_TOO_LARGE",
@@ -1229,7 +1272,7 @@ var FileInput = forwardRef4(
     const size = variant === "button" ? rest.size ?? "medium" : "medium";
     const [selectedFile, setSelectedFile] = useState5(null);
     const [isDragOver, setIsDragOver] = useState5(false);
-    const fileInputRef = useRef5(null);
+    const fileInputRef = useRef6(null);
     const errorId = useId2();
     const fallbackId = useId2();
     const inputId = id ?? fallbackId;
@@ -1344,7 +1387,7 @@ var FileInput = forwardRef4(
     );
     const hasErrorMessages = !isDisabled && errorMessages != null && errorMessages.length > 0;
     const hasErrors = !isDisabled && isError === true;
-    const dropzoneClasses = clsx15(
+    const dropzoneClasses = clsx17(
       "flex flex-1 flex-col items-center justify-center gap-4 rounded border border-dashed px-6 text-center",
       selectedFile ? "py-[52px]" : "py-4",
       {
@@ -1401,7 +1444,7 @@ var FileInput = forwardRef4(
             width: "100%",
             onClick: handleButtonClick,
             before: /* @__PURE__ */ jsx21(Icon, { name: "upload", size: "small" }),
-            after: /* @__PURE__ */ jsx21(Fragment2, { children: selectedFile ? /* @__PURE__ */ jsx21("span", { className: clsx15("typography-label12regular truncate", !isDisabled && "text-text01"), children: selectedFile.name }) : "" }),
+            after: /* @__PURE__ */ jsx21(Fragment2, { children: selectedFile ? /* @__PURE__ */ jsx21("span", { className: clsx17("typography-label12regular truncate", !isDisabled && "text-text01"), children: selectedFile.name }) : "" }),
             children: /* @__PURE__ */ jsx21("span", { className: "truncate", children: "\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E" })
           }
         ) }),
@@ -1448,14 +1491,14 @@ var FileInput = forwardRef4(
               "\u3053\u3053\u306B\u30D5\u30A1\u30A4\u30EB\u3092\u30C9\u30ED\u30C3\u30D7\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
               /* @__PURE__ */ jsx21("br", {}),
               "\u307E\u305F\u306F\u3001",
-              /* @__PURE__ */ jsx21("span", { className: clsx15(!isDisabled ? "text-link01" : ""), children: "\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E" }),
+              /* @__PURE__ */ jsx21("span", { className: clsx17(!isDisabled ? "text-link01" : ""), children: "\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E" }),
               "\u3057\u3066\u304F\u3060\u3055\u3044\u3002"
             ] }) }) }),
             !selectedFile && /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-1", children: [
-              /* @__PURE__ */ jsx21("div", { className: clsx15("typography-label11regular", isDisabled ? "text-textPlaceholder" : "text-text02"), children: "\u5BFE\u5FDC\u5F62\u5F0F" }),
-              /* @__PURE__ */ jsx21("div", { className: clsx15("typography-body12regular", isDisabled ? "text-textPlaceholder" : "text-text01"), children: acceptLabel }),
-              /* @__PURE__ */ jsx21("div", { className: clsx15("typography-label11regular", isDisabled ? "text-textPlaceholder" : "text-text02"), children: "\u30B5\u30A4\u30BA" }),
-              /* @__PURE__ */ jsx21("div", { className: clsx15("typography-body12regular", isDisabled ? "text-textPlaceholder" : "text-text01"), children: maxSizeLabel })
+              /* @__PURE__ */ jsx21("div", { className: clsx17("typography-label11regular", isDisabled ? "text-textPlaceholder" : "text-text02"), children: "\u5BFE\u5FDC\u5F62\u5F0F" }),
+              /* @__PURE__ */ jsx21("div", { className: clsx17("typography-body12regular", isDisabled ? "text-textPlaceholder" : "text-text01"), children: acceptLabel }),
+              /* @__PURE__ */ jsx21("div", { className: clsx17("typography-label11regular", isDisabled ? "text-textPlaceholder" : "text-text02"), children: "\u30B5\u30A4\u30BA" }),
+              /* @__PURE__ */ jsx21("div", { className: clsx17("typography-body12regular", isDisabled ? "text-textPlaceholder" : "text-text01"), children: maxSizeLabel })
             ] }),
             selectedFile && /* @__PURE__ */ jsxs6("div", { className: "mt-2 flex flex-col items-center gap-1", children: [
               /* @__PURE__ */ jsx21("span", { className: "typography-label11regular text-text02", children: "\u30D5\u30A1\u30A4\u30EB\u540D" }),
@@ -1507,11 +1550,11 @@ FileInput.displayName = "FileInput";
 
 // src/heading/heading.tsx
 import { typography } from "@zenkigen-inc/component-theme";
-import { clsx as clsx16 } from "clsx";
+import { clsx as clsx18 } from "clsx";
 import { jsxs as jsxs7 } from "react/jsx-runtime";
 function Heading(props) {
   const TagName = `h${props.level}`;
-  const classes = clsx16(`flex items-center text-text01`, typography.heading[TagName], {
+  const classes = clsx18(`flex items-center text-text01`, typography.heading[TagName], {
     "gap-2": props.level === 1,
     "gap-1": props.level > 1
   });
@@ -1593,11 +1636,11 @@ var useRovingFocus = ({
 };
 
 // src/loading/loading.tsx
-import clsx17 from "clsx";
+import clsx19 from "clsx";
 import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
 function Loading({ size = "medium", position = "fixed", height = "100%" }) {
-  const wrapperClasses = clsx17(position, "left-0 top-0 z-20 flex w-full items-center justify-center");
-  const svgClasses = clsx17({
+  const wrapperClasses = clsx19(position, "left-0 top-0 z-20 flex w-full items-center justify-center");
+  const svgClasses = clsx19({
     "h-4 w-4": size === "small",
     "h-8 w-8": size === "medium",
     "h-16 w-16": size === "large"
@@ -1643,7 +1686,7 @@ function Loading({ size = "medium", position = "fixed", height = "100%" }) {
 }
 
 // src/modal/modal.tsx
-import { useEffect as useEffect5, useState as useState7 } from "react";
+import { useEffect as useEffect6, useState as useState7 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/modal/body-scroll-lock.tsx
@@ -1706,22 +1749,22 @@ var ModalContext = createContext4({
 });
 
 // src/modal/modal-footer.tsx
-import clsx18 from "clsx";
+import clsx20 from "clsx";
 import { jsx as jsx24 } from "react/jsx-runtime";
 function ModalFooter({ children, isNoBorder = false }) {
-  const wrapperClasses = clsx18("flex w-full shrink-0 items-center rounded-b-lg px-6 py-4", {
+  const wrapperClasses = clsx20("flex w-full shrink-0 items-center rounded-b-lg px-6 py-4", {
     "border-t-[1px] border-uiBorder01": !isNoBorder
   });
   return /* @__PURE__ */ jsx24("div", { className: wrapperClasses, children });
 }
 
 // src/modal/modal-header.tsx
-import clsx19 from "clsx";
+import clsx21 from "clsx";
 import { useContext as useContext5 } from "react";
 import { jsx as jsx25, jsxs as jsxs9 } from "react/jsx-runtime";
 function ModalHeader({ children, isNoBorder = false }) {
   const { onClose } = useContext5(ModalContext);
-  const headerClasses = clsx19(
+  const headerClasses = clsx21(
     "typography-h5 flex w-full shrink-0 items-center justify-between rounded-t-lg px-6 text-text01",
     {
       "border-b border-uiBorder01": !isNoBorder,
@@ -1751,9 +1794,14 @@ function Modal({
   const [isMounted, setIsMounted] = useState7(false);
   const renderWidth = typeof width === "number" ? Math.max(width, LIMIT_WIDTH) : width;
   const renderHeight = typeof height === "number" ? Math.max(height, LIMIT_HEIGHT) : height;
-  useEffect5(() => {
+  useEffect6(() => {
     setIsMounted(true);
   }, []);
+  useEffect6(() => {
+    if (isOpen) {
+      window.dispatchEvent(new CustomEvent(MODAL_OPEN_EVENT));
+    }
+  }, [isOpen]);
   return isMounted && isOpen ? /* @__PURE__ */ jsxs10(Fragment4, { children: [
     /* @__PURE__ */ jsx26(BodyScrollLock, {}),
     createPortal2(
@@ -1776,10 +1824,10 @@ Modal.Header = ModalHeader;
 Modal.Footer = ModalFooter;
 
 // src/notification-inline/notification-inline.tsx
-import { clsx as clsx20 } from "clsx";
+import { clsx as clsx22 } from "clsx";
 import { jsx as jsx27, jsxs as jsxs11 } from "react/jsx-runtime";
 function NotificationInline({ state = "default", size = "medium", ...props }) {
-  const wrapperClasses = clsx20("typography-body13regular flex items-center gap-1 rounded text-text01", {
+  const wrapperClasses = clsx22("typography-body13regular flex items-center gap-1 rounded text-text01", {
     "bg-uiBackgroundError": state === "attention",
     "bg-uiBackgroundWarning": state === "warning",
     "bg-uiBackgroundBlue": state === "information",
@@ -1788,7 +1836,7 @@ function NotificationInline({ state = "default", size = "medium", ...props }) {
     "p-2": size === "small",
     "p-3": size === "medium"
   });
-  const iconClasses = clsx20("flex items-center", {
+  const iconClasses = clsx22("flex items-center", {
     "fill-supportError": state === "attention",
     "fill-supportWarning": state === "warning",
     "fill-blue-blue50": state === "information",
@@ -1812,7 +1860,7 @@ function NotificationInline({ state = "default", size = "medium", ...props }) {
 }
 
 // src/pagination/pagination-button.tsx
-import { clsx as clsx21 } from "clsx";
+import { clsx as clsx23 } from "clsx";
 import { useContext as useContext6 } from "react";
 
 // src/pagination/pagination-context.ts
@@ -1825,7 +1873,7 @@ var PaginationContext = createContext5({
 import { jsx as jsx28 } from "react/jsx-runtime";
 function PaginationButton({ page, onClick }) {
   const { currentPage } = useContext6(PaginationContext);
-  const buttonClasses = clsx21(
+  const buttonClasses = clsx23(
     "flex h-8 min-w-8 items-center justify-center rounded fill-icon01 px-1",
     "typography-label14regular",
     "text-interactive02",
@@ -1913,8 +1961,8 @@ function Pagination({ currentPage, totalPage, sideNumPagesToShow = 3, onClick })
 // src/select/select.tsx
 import { autoUpdate as autoUpdate2, FloatingPortal as FloatingPortal2, offset as offset2, size as sizeMiddleware, useFloating as useFloating2 } from "@floating-ui/react";
 import { focusVisible as focusVisible10, selectColors } from "@zenkigen-inc/component-theme";
-import clsx24 from "clsx";
-import { useRef as useRef6, useState as useState8 } from "react";
+import clsx26 from "clsx";
+import { useRef as useRef7, useState as useState8 } from "react";
 
 // src/select/select-context.ts
 import { createContext as createContext6 } from "react";
@@ -1927,7 +1975,7 @@ var SelectContext = createContext6({
 
 // src/select/select-item.tsx
 import { focusVisible as focusVisible8 } from "@zenkigen-inc/component-theme";
-import clsx22 from "clsx";
+import clsx24 from "clsx";
 import { useContext as useContext7 } from "react";
 import { jsx as jsx30, jsxs as jsxs13 } from "react/jsx-runtime";
 function SelectItem({ option }) {
@@ -1936,7 +1984,7 @@ function SelectItem({ option }) {
     onChange?.(option2);
     setIsOptionListOpen(false);
   };
-  const itemClasses = clsx22(
+  const itemClasses = clsx24(
     "typography-label14regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02",
     focusVisible8.inset,
     {
@@ -1955,7 +2003,7 @@ function SelectItem({ option }) {
 
 // src/select/select-list.tsx
 import { focusVisible as focusVisible9 } from "@zenkigen-inc/component-theme";
-import clsx23 from "clsx";
+import clsx25 from "clsx";
 import { forwardRef as forwardRef5, useContext as useContext8, useLayoutEffect as useLayoutEffect2 } from "react";
 import { jsx as jsx31, jsxs as jsxs14 } from "react/jsx-runtime";
 var SelectList = forwardRef5(({ children, maxHeight }, ref) => {
@@ -1982,10 +2030,10 @@ var SelectList = forwardRef5(({ children, maxHeight }, ref) => {
       }
     }
   }, [selectedOption, maxHeight, floatingRef]);
-  const listClasses = clsx23("z-dropdown overflow-y-auto rounded bg-uiBackground01 py-2 shadow-floatingShadow", {
+  const listClasses = clsx25("overflow-y-auto rounded bg-uiBackground01 py-2 shadow-floatingShadow", {
     "border-solid border border-uiBorder01": variant === "outline"
   });
-  const deselectButtonClasses = clsx23(
+  const deselectButtonClasses = clsx25(
     "typography-label14regular flex h-8 w-full items-center px-3 text-interactive02 hover:bg-hover02 active:bg-active02",
     focusVisible9.inset
   );
@@ -2016,8 +2064,13 @@ function Select({
   matchListToTrigger = false
 }) {
   const [isOptionListOpen, setIsOptionListOpen] = useState8(false);
-  const targetRef = useRef6(null);
+  const targetRef = useRef7(null);
   useOutsideClick(targetRef, () => setIsOptionListOpen(false));
+  useDismissOnModalOpen(() => {
+    if (isOptionListOpen) {
+      setIsOptionListOpen(false);
+    }
+  });
   const { refs, floatingStyles } = useFloating2({
     open: isOptionListOpen,
     onOpenChange: setIsOptionListOpen,
@@ -2041,13 +2094,13 @@ function Select({
   const handleClickToggle = () => setIsOptionListOpen((prev) => !prev);
   const buttonVariant = isError && !isDisabled ? `${variant}Error` : variant;
   const isSelected = isOptionSelected && !isDisabled && selectedOption !== null && !isError;
-  const wrapperClasses = clsx24("relative flex shrink-0 items-center gap-1 rounded bg-uiBackground01", {
+  const wrapperClasses = clsx26("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 = clsx24(
+  const buttonClasses = clsx26(
     "flex size-full items-center rounded",
     selectColors[buttonVariant].hover,
     selectColors[buttonVariant].active,
@@ -2062,7 +2115,7 @@ function Select({
       "border-supportError": !isSelected && !isDisabled && isError
     }
   );
-  const labelClasses = clsx24("overflow-hidden", {
+  const labelClasses = clsx26("overflow-hidden", {
     "mr-1": size === "x-small",
     "mr-2": size !== "x-small",
     "typography-label12regular": size === "x-small",
@@ -2105,7 +2158,7 @@ function Select({
             ]
           }
         ),
-        isOptionListOpen && !isDisabled && /* @__PURE__ */ jsx32(FloatingPortal2, { children: /* @__PURE__ */ jsx32("div", { className: "relative z-overlay", children: /* @__PURE__ */ jsx32(SelectList, { ref: refs.setFloating, maxHeight: optionListMaxHeight, children }) }) })
+        isOptionListOpen && !isDisabled && /* @__PURE__ */ jsx32(FloatingPortal2, { children: /* @__PURE__ */ jsx32("div", { className: "relative z-popover", children: /* @__PURE__ */ jsx32(SelectList, { ref: refs.setFloating, maxHeight: optionListMaxHeight, children }) }) })
       ] })
     }
   );
@@ -2196,7 +2249,7 @@ function PaginationSelect({
 import { forwardRef as forwardRef9, useState as useState9 } from "react";
 
 // src/text-input/text-input.tsx
-import { clsx as clsx27 } from "clsx";
+import { clsx as clsx29 } from "clsx";
 import { Children as Children2, cloneElement as cloneElement4, forwardRef as forwardRef8, isValidElement as isValidElement2, useId as useId3, useMemo as useMemo3 } from "react";
 
 // src/text-input/text-input-context.tsx
@@ -2211,7 +2264,7 @@ var useTextInputCompoundContext = (componentName) => {
 };
 
 // src/text-input/text-input-error-message.tsx
-import { clsx as clsx25 } from "clsx";
+import { clsx as clsx27 } from "clsx";
 import { forwardRef as forwardRef6 } from "react";
 import { jsx as jsx34 } from "react/jsx-runtime";
 var TextInputErrorMessage = forwardRef6(
@@ -2222,20 +2275,20 @@ var TextInputErrorMessage = forwardRef6(
     if (!shouldRender) {
       return null;
     }
-    const errorMessageClassName = clsx25(typographyClass, "text-supportError");
+    const errorMessageClassName = clsx27(typographyClass, "text-supportError");
     return /* @__PURE__ */ jsx34("div", { ref, className: errorMessageClassName, "aria-live": ariaLive, ...props });
   }
 );
 TextInputErrorMessage.displayName = "TextInput.ErrorMessage";
 
 // src/text-input/text-input-helper-message.tsx
-import { clsx as clsx26 } from "clsx";
+import { clsx as clsx28 } from "clsx";
 import { forwardRef as forwardRef7 } from "react";
 import { jsx as jsx35 } from "react/jsx-runtime";
 var TextInputHelperMessage = forwardRef7((props, ref) => {
   const { inputProps } = useTextInputCompoundContext("TextInput.HelperMessage");
   const typographyClass = inputProps.size === "large" ? "typography-label13regular" : "typography-label12regular";
-  const helperMessageClassName = clsx26(typographyClass, "text-text02");
+  const helperMessageClassName = clsx28(typographyClass, "text-text02");
   return /* @__PURE__ */ jsx35("div", { ref, className: helperMessageClassName, ...props });
 });
 TextInputHelperMessage.displayName = "TextInput.HelperMessage";
@@ -2244,6 +2297,7 @@ TextInputHelperMessage.displayName = "TextInput.HelperMessage";
 import { jsx as jsx36, jsxs as jsxs17 } from "react/jsx-runtime";
 function TextInputInner({
   size = "medium",
+  variant = "outline",
   isError = false,
   disabled = false,
   onClickClearButton,
@@ -2311,21 +2365,37 @@ function TextInputInner({
   };
   const isShowClearButton = !!onClickClearButton && restInputProps.value.length !== 0 && !disabled;
   const hasTrailingElement = isShowClearButton || after != null;
-  const inputWrapClasses = clsx27("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 = clsx29("relative flex items-center gap-2 overflow-hidden rounded border", {
+    // outline variant
+    "border-uiBorder02": !isBorderless && !isError && !disabled,
+    "border-supportError": !isBorderless && isError && !disabled,
+    "hover:border-hoverInput": !isBorderless && !disabled && !isError,
+    "hover:focus-within:border-activeInput": !isBorderless && !isError,
+    "focus-within:border-activeInput": !isBorderless && !isError,
+    "bg-disabled02 border-disabled01": !isBorderless && disabled,
+    // text variant
+    "border-transparent": isBorderless,
+    // 共通
+    "bg-uiBackground01": !disabled || isBorderless,
+    "pr-2": !isBorderless && size === "medium" && hasTrailingElement,
+    "pr-3": !isBorderless && size === "large" && hasTrailingElement
   });
-  const inputClasses = clsx27("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 = clsx29("flex-1 bg-transparent outline-none", {
+    "disabled:text-textPlaceholder": !isBorderless,
+    "disabled:text-disabled01": isBorderless,
+    // outline: 従来の padding
+    "typography-label14regular min-h-8 px-2": !isBorderless && size === "medium",
+    "typography-label16regular min-h-10 px-3": !isBorderless && size === "large",
+    // text: padding なし
+    "typography-label14regular min-h-8": isBorderless && size === "medium",
+    "typography-label16regular min-h-10": isBorderless && size === "large",
+    // テキスト色
     "text-text01": !isError,
     "text-supportError": isError,
+    // placeholder 色（text variant エラー時のみ上書き）
+    "placeholder:text-textPlaceholder": !(isBorderless && isError && !disabled),
+    "placeholder:text-supportErrorLight": isBorderless && isError && !disabled,
     "pr-0": hasTrailingElement
   });
   const inputElement = /* @__PURE__ */ jsxs17("div", { className: inputWrapClasses, children: [
@@ -2464,10 +2534,20 @@ Popup.Footer = PopupFooter;
 
 // src/radio/radio.tsx
 import { focusVisible as focusVisible11 } from "@zenkigen-inc/component-theme";
-import clsx28 from "clsx";
+import clsx30 from "clsx";
 import { useCallback as useCallback8, useState as useState10 } from "react";
 import { jsx as jsx42, jsxs as jsxs19 } from "react/jsx-runtime";
-function Radio({ name, value, id, label, isChecked = false, isDisabled = false, onChange }) {
+function Radio({
+  name,
+  value,
+  id,
+  label,
+  isChecked = false,
+  isDisabled = false,
+  size = "medium",
+  onChange
+}) {
+  const isLarge = size === "large";
   const [isMouseOver, setIsMouseOver] = useState10(false);
   const handleMouseOverInput = useCallback8(() => {
     setIsMouseOver(true);
@@ -2479,12 +2559,15 @@ function Radio({ name, value, id, label, isChecked = false, isDisabled = false,
     (e) => !isDisabled && onChange?.(e),
     [isDisabled, onChange]
   );
-  const inputClasses = clsx28("peer absolute z-[1] size-6 opacity-0", {
+  const inputClasses = clsx30("peer absolute z-[1] opacity-0", {
+    "size-6": !isLarge,
+    "size-8": isLarge,
     "cursor-not-allowed": isDisabled,
     "cursor-pointer": !isDisabled
   });
-  const boxClasses = clsx28(
-    "inline-flex size-5 items-center justify-center rounded-full border border-solid bg-white",
+  const boxClasses = clsx30(
+    "inline-flex items-center justify-center rounded-full border border-solid bg-white",
+    { "size-5": !isLarge, "size-7": isLarge },
     focusVisible11.normalPeer,
     {
       "border-disabled01 hover:border-disabled01": isDisabled && !isMouseOver,
@@ -2494,21 +2577,31 @@ function Radio({ name, value, id, label, isChecked = false, isDisabled = false,
       "cursor-pointer": !isDisabled
     }
   );
-  const afterClasses = clsx28("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 = clsx28("inline-block size-3 rounded-full", {
-    "bg-hoverUi": !isDisabled && !isChecked && isMouseOver
-  });
-  const labelClasses = clsx28("typography-label14regular ml-2 flex-[1_0_0] select-none break-all", {
+  const afterClasses = clsx30(
+    "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 = clsx30(
+    "inline-block rounded-full",
+    { "size-3": !isLarge, "size-4": isLarge },
+    {
+      "bg-hoverUi": !isDisabled && !isChecked && isMouseOver
+    }
+  );
+  const labelClasses = clsx30("ml-2 flex-[1_0_0] select-none break-all", {
+    "typography-label14regular": !isLarge,
+    "typography-label16regular": isLarge,
     "pointer-events-none cursor-not-allowed text-disabled01": isDisabled,
     "cursor-pointer text-text01": !isDisabled
   });
   return /* @__PURE__ */ jsxs19("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ jsxs19("div", { className: "flex size-6 items-center justify-center", children: [
+    /* @__PURE__ */ jsxs19("div", { className: clsx30("relative flex items-center justify-center", { "size-6": !isLarge, "size-8": isLarge }), children: [
       /* @__PURE__ */ jsx42(
         "input",
         {
@@ -2524,26 +2617,35 @@ function Radio({ name, value, id, label, isChecked = false, isDisabled = false,
           className: inputClasses
         }
       ),
-      /* @__PURE__ */ jsx42("div", { className: boxClasses, children: /* @__PURE__ */ jsxs19("div", { className: "relative flex size-5 flex-[0_0_auto] items-center justify-center", children: [
-        /* @__PURE__ */ jsx42("span", { className: afterClasses }),
-        /* @__PURE__ */ jsx42("span", { className: hoverIndicatorClasses })
-      ] }) })
+      /* @__PURE__ */ jsx42("div", { className: boxClasses, children: /* @__PURE__ */ jsxs19(
+        "div",
+        {
+          className: clsx30("relative flex flex-[0_0_auto] items-center justify-center", {
+            "size-5": !isLarge,
+            "size-7": isLarge
+          }),
+          children: [
+            /* @__PURE__ */ jsx42("span", { className: afterClasses }),
+            /* @__PURE__ */ jsx42("span", { className: hoverIndicatorClasses })
+          ]
+        }
+      ) })
     ] }),
     /* @__PURE__ */ jsx42("label", { htmlFor: id, className: labelClasses, children: label })
   ] });
 }
 
 // src/search/search.tsx
-import { clsx as clsx29 } from "clsx";
+import { clsx as clsx31 } from "clsx";
 import { forwardRef as forwardRef10 } from "react";
 import { jsx as jsx43, jsxs as jsxs20 } from "react/jsx-runtime";
 var Search = forwardRef10(({ width = "100%", size = "medium", ...props }, ref) => {
-  const classes = clsx29(
+  const classes = clsx31(
     "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 = clsx29("mx-2 h-full flex-1 text-text01 outline-none placeholder:text-textPlaceholder", {
+  const inputClasses = clsx31("mx-2 h-full flex-1 text-text01 outline-none placeholder:text-textPlaceholder", {
     ["typography-label14regular"]: size === "medium",
     ["typography-label16regular"]: size === "large"
   });
@@ -2575,7 +2677,7 @@ var Search = forwardRef10(({ width = "100%", size = "medium", ...props }, ref) =
 Search.displayName = "Search";
 
 // src/segmented-control/segmented-control.tsx
-import React4, { Children as Children3, useRef as useRef8 } from "react";
+import React4, { Children as Children3, useRef as useRef9 } from "react";
 
 // src/segmented-control/segmented-control-context.ts
 import { createContext as createContext9 } from "react";
@@ -2583,8 +2685,8 @@ var SegmentedControlContext = createContext9(null);
 
 // src/segmented-control/segmented-control-item.tsx
 import { focusVisible as focusVisible12 } from "@zenkigen-inc/component-theme";
-import { clsx as clsx30 } from "clsx";
-import { useContext as useContext12, useEffect as useEffect6, useRef as useRef7 } from "react";
+import { clsx as clsx32 } from "clsx";
+import { useContext as useContext12, useEffect as useEffect7, useRef as useRef8 } from "react";
 import { jsx as jsx44, jsxs as jsxs21 } from "react/jsx-runtime";
 var SegmentedControlItem = ({
   label,
@@ -2595,8 +2697,8 @@ var SegmentedControlItem = ({
   ...rest
 }) => {
   const context = useContext12(SegmentedControlContext);
-  const buttonRef = useRef7(null);
-  const lastInteractionWasMouse = useRef7(false);
+  const buttonRef = useRef8(null);
+  const lastInteractionWasMouse = useRef8(false);
   if (context === null) {
     throw new Error("SegmentedControl.Item must be used within SegmentedControl");
   }
@@ -2612,7 +2714,7 @@ var SegmentedControlItem = ({
   const isSelected = value === selectedValue;
   const isFocused = value === focusedValue;
   const isOptionDisabled = isContextDisabled || itemDisabled === true;
-  useEffect6(() => {
+  useEffect7(() => {
     if (isFocused === true && buttonRef.current !== null) {
       buttonRef.current.focus();
     }
@@ -2634,7 +2736,7 @@ var SegmentedControlItem = ({
     lastInteractionWasMouse.current = false;
     onBlur?.();
   };
-  const buttonClasses = clsx30("relative flex items-center justify-center gap-1 rounded", focusVisible12.normal, {
+  const buttonClasses = clsx32("relative flex items-center justify-center gap-1 rounded", focusVisible12.normal, {
     "px-2 min-h-[24px] typography-label12regular": size === "small",
     "px-4 min-h-[32px] typography-label14regular": size === "medium",
     // States - Default with hover
@@ -2664,7 +2766,7 @@ var SegmentedControlItem = ({
         Boolean(icon) === true && icon && /* @__PURE__ */ jsx44(
           "span",
           {
-            className: clsx30("flex items-center", {
+            className: clsx32("flex items-center", {
               "fill-disabled01": isOptionDisabled === true,
               "fill-interactive01": isSelected === true && isOptionDisabled === false,
               "fill-icon01": isSelected === false && isOptionDisabled === false
@@ -2689,7 +2791,7 @@ var SegmentedControl = ({
   "aria-label": ariaLabel,
   ...rest
 }) => {
-  const containerRef = useRef8(null);
+  const containerRef = useRef9(null);
   const itemIds = Children3.toArray(children).filter((child) => {
     if (!React4.isValidElement(child) || typeof child.props !== "object" || child.props === null || !("value" in child.props)) {
       return false;
@@ -2742,19 +2844,19 @@ SegmentedControl.Item = SegmentedControlItem;
 
 // src/select-sort/select-sort.tsx
 import { buttonColors as buttonColors4, focusVisible as focusVisible15 } from "@zenkigen-inc/component-theme";
-import clsx33 from "clsx";
-import { useCallback as useCallback9, useRef as useRef9, useState as useState11 } from "react";
+import clsx35 from "clsx";
+import { useCallback as useCallback9, useRef as useRef10, useState as useState11 } from "react";
 
 // src/select-sort/select-list.tsx
 import { focusVisible as focusVisible14 } from "@zenkigen-inc/component-theme";
-import clsx32 from "clsx";
+import clsx34 from "clsx";
 
 // src/select-sort/select-item.tsx
 import { focusVisible as focusVisible13 } from "@zenkigen-inc/component-theme";
-import clsx31 from "clsx";
+import clsx33 from "clsx";
 import { jsx as jsx46, jsxs as jsxs22 } from "react/jsx-runtime";
 function SelectItem2({ children, isSortKey, onClickItem }) {
-  const itemClasses = clsx31(
+  const itemClasses = clsx33(
     "typography-label14regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02",
     focusVisible13.inset,
     {
@@ -2771,7 +2873,7 @@ function SelectItem2({ children, isSortKey, onClickItem }) {
 // src/select-sort/select-list.tsx
 import { jsx as jsx47, jsxs as jsxs23 } from "react/jsx-runtime";
 function SelectList2({ size, variant, sortOrder, onClickItem, onClickDeselect }) {
-  const listClasses = clsx32(
+  const listClasses = clsx34(
     "absolute z-dropdown w-max overflow-y-auto rounded bg-uiBackground01 py-2 shadow-floatingShadow",
     {
       "top-7": size === "x-small" || size === "small",
@@ -2780,7 +2882,7 @@ function SelectList2({ size, variant, sortOrder, onClickItem, onClickDeselect })
       "border-solid border border-uiBorder01": variant === "outline"
     }
   );
-  const deselectButtonClasses = clsx32(
+  const deselectButtonClasses = clsx34(
     "typography-label14regular flex h-8 w-full items-center px-3 text-interactive02 hover:bg-hover02 active:bg-active02",
     focusVisible14.inset
   );
@@ -2805,8 +2907,13 @@ function SelectSort({
   onClickDeselect
 }) {
   const [isOptionListOpen, setIsOptionListOpen] = useState11(false);
-  const targetRef = useRef9(null);
+  const targetRef = useRef10(null);
   useOutsideClick(targetRef, () => setIsOptionListOpen(false));
+  useDismissOnModalOpen(() => {
+    if (isOptionListOpen) {
+      setIsOptionListOpen(false);
+    }
+  });
   const handleClickToggle = () => setIsOptionListOpen((prev) => !prev);
   const handleClickItem = useCallback9(
     (value) => {
@@ -2815,13 +2922,13 @@ function SelectSort({
     },
     [onChange]
   );
-  const wrapperClasses = clsx33("relative flex shrink-0 items-center gap-1 rounded", {
+  const wrapperClasses = clsx35("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 = clsx33(
+  const buttonClasses = clsx35(
     "flex size-full items-center rounded",
     buttonColors4[variant].hover,
     buttonColors4[variant].active,
@@ -2835,7 +2942,7 @@ function SelectSort({
       "pointer-events-none": isDisabled
     }
   );
-  const labelClasses = clsx33("truncate", {
+  const labelClasses = clsx35("truncate", {
     "typography-label12regular": size === "x-small",
     "typography-label14regular": size === "small" || size === "medium",
     "typography-label16regular": size === "large",
@@ -2874,7 +2981,7 @@ function SelectSort({
 
 // src/sort-button/sort-button.tsx
 import { buttonColors as buttonColors5, focusVisible as focusVisible16 } from "@zenkigen-inc/component-theme";
-import clsx34 from "clsx";
+import clsx36 from "clsx";
 import { useCallback as useCallback10 } from "react";
 import { jsx as jsx49, jsxs as jsxs25 } from "react/jsx-runtime";
 function SortButton({
@@ -2896,13 +3003,13 @@ function SortButton({
     if (sortOrder === "descend") return "arrow-down";
     return "angle-small-down";
   };
-  const wrapperClasses = clsx34("relative flex shrink-0 items-center gap-1 rounded", {
+  const wrapperClasses = clsx36("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 = clsx34(
+  const buttonClasses = clsx36(
     "flex size-full items-center rounded",
     buttonColors5.text.hover,
     buttonColors5.text.active,
@@ -2918,7 +3025,7 @@ function SortButton({
       "pointer-events-none": isDisabled
     }
   );
-  const labelClasses = clsx34("truncate", {
+  const labelClasses = clsx36("truncate", {
     "typography-label12regular": size === "x-small",
     "typography-label14regular": size === "small" || size === "medium",
     "typography-label16regular": size === "large",
@@ -2944,14 +3051,14 @@ function SortButton({
 }
 
 // src/tab/tab.tsx
-import { clsx as clsx36 } from "clsx";
+import { clsx as clsx38 } from "clsx";
 import { Children as Children4 } from "react";
 
 // src/tab/tab-item.tsx
-import { clsx as clsx35 } from "clsx";
+import { clsx as clsx37 } from "clsx";
 import { jsx as jsx50, jsxs as jsxs26 } from "react/jsx-runtime";
 var TabItem = ({ isSelected = false, isDisabled = false, icon, ...props }) => {
-  const classes = clsx35(
+  const classes = clsx37(
     "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,
@@ -2959,7 +3066,7 @@ var TabItem = ({ isSelected = false, isDisabled = false, icon, ...props }) => {
       "before:bg-interactive01 hover:before:bg-interactive01 pointer-events-none": isSelected
     }
   );
-  const iconWrapperClasses = clsx35("flex shrink-0 items-center", {
+  const iconWrapperClasses = clsx37("flex shrink-0 items-center", {
     "fill-disabled01": isDisabled,
     "fill-interactive01": !isDisabled && isSelected,
     "fill-icon01 group-hover:fill-interactive01": !isDisabled && !isSelected
@@ -2986,7 +3093,7 @@ import { jsx as jsx51 } from "react/jsx-runtime";
 function Tab({ children, layout = "auto" }) {
   const childrenCount = Children4.count(children);
   const containerStyle = layout === "equal" ? { gridTemplateColumns: `repeat(${childrenCount}, minmax(0,1fr))` } : {};
-  const containerClasses = clsx36(
+  const containerClasses = clsx38(
     "relative gap-4 px-6 before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-uiBorder01",
     {
       flex: layout === "auto",
@@ -2998,18 +3105,18 @@ function Tab({ children, layout = "auto" }) {
 Tab.Item = TabItem;
 
 // src/table/table-cell.tsx
-import clsx37 from "clsx";
+import clsx39 from "clsx";
 import { jsx as jsx52 } from "react/jsx-runtime";
 function TableCell({ children, className, isHeader = false }) {
-  const classes = clsx37("border-b border-uiBorder01", { "sticky top-0 z-10 bg-white": isHeader }, className);
+  const classes = clsx39("border-b border-uiBorder01", { "sticky top-0 z-10 bg-white": isHeader }, className);
   return /* @__PURE__ */ jsx52("div", { className: classes, children });
 }
 
 // src/table/table-row.tsx
-import clsx38 from "clsx";
+import clsx40 from "clsx";
 import { jsx as jsx53 } from "react/jsx-runtime";
 function TableRow({ children, isHoverBackgroundVisible = false }) {
-  const rowClasses = clsx38("contents", isHoverBackgroundVisible && "[&:hover>div]:bg-hoverUi02");
+  const rowClasses = clsx40("contents", isHoverBackgroundVisible && "[&:hover>div]:bg-hoverUi02");
   return /* @__PURE__ */ jsx53("div", { className: rowClasses, children });
 }
 
@@ -3043,18 +3150,18 @@ Table.Cell = TableCell;
 
 // src/tag/tag.tsx
 import { tagColors, tagLightColors } from "@zenkigen-inc/component-theme";
-import clsx40 from "clsx";
+import clsx42 from "clsx";
 
 // src/tag/delete-icon.tsx
 import { focusVisible as focusVisible17 } from "@zenkigen-inc/component-theme";
-import clsx39 from "clsx";
+import clsx41 from "clsx";
 import { jsx as jsx55 } from "react/jsx-runtime";
 var DeleteIcon = ({ color, variant, onClick }) => {
-  const deleteButtonClasses = clsx39(
+  const deleteButtonClasses = clsx41(
     "group ml-2 size-[14px] rounded-full p-0.5 hover:cursor-pointer hover:bg-iconOnColor focus-visible:bg-iconOnColor",
     focusVisible17.normal
   );
-  const deletePathClasses = clsx39({
+  const deletePathClasses = clsx41({
     "fill-interactive02": color === "gray" || variant === "light",
     "group-hover:fill-interactive02 group-focus-visible:fill-interactive02 fill-iconOnColor": color !== "gray"
   });
@@ -3072,17 +3179,16 @@ var DeleteIcon = ({ color, variant, onClick }) => {
 // src/tag/tag.tsx
 import { jsx as jsx56, jsxs as jsxs27 } from "react/jsx-runtime";
 function Tag({ id, children, color, variant = "normal", size = "medium", isEditable, onDelete }) {
-  const wrapperClasses = clsx40("flex", "items-center", "justify-center", {
+  const wrapperClasses = clsx42("flex", "items-center", "justify-center", {
     [tagColors[color]]: variant === "normal",
     [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__ */ jsxs27("div", { className: wrapperClasses, children: [
     children,
@@ -3091,7 +3197,7 @@ function Tag({ id, children, color, variant = "normal", size = "medium", isEdita
 }
 
 // src/text-area/text-area.tsx
-import { clsx as clsx43 } from "clsx";
+import { clsx as clsx45 } from "clsx";
 import { Children as Children5, cloneElement as cloneElement5, forwardRef as forwardRef13, isValidElement as isValidElement3, useId as useId4, useMemo as useMemo4 } from "react";
 
 // src/text-area/text-area-context.tsx
@@ -3106,7 +3212,7 @@ var useTextAreaCompoundContext = (componentName) => {
 };
 
 // src/text-area/text-area-error-message.tsx
-import { clsx as clsx41 } from "clsx";
+import { clsx as clsx43 } from "clsx";
 import { forwardRef as forwardRef11 } from "react";
 import { jsx as jsx57 } from "react/jsx-runtime";
 var TextAreaErrorMessage = forwardRef11(
@@ -3117,20 +3223,20 @@ var TextAreaErrorMessage = forwardRef11(
     if (!shouldRender) {
       return null;
     }
-    const errorMessageClassName = clsx41(typographyClass, "text-supportError");
+    const errorMessageClassName = clsx43(typographyClass, "text-supportError");
     return /* @__PURE__ */ jsx57("div", { ref, className: errorMessageClassName, "aria-live": ariaLive, ...props });
   }
 );
 TextAreaErrorMessage.displayName = "TextArea.ErrorMessage";
 
 // src/text-area/text-area-helper-message.tsx
-import { clsx as clsx42 } from "clsx";
+import { clsx as clsx44 } from "clsx";
 import { forwardRef as forwardRef12 } from "react";
 import { jsx as jsx58 } from "react/jsx-runtime";
 var TextAreaHelperMessage = forwardRef12((props, ref) => {
   const { textAreaProps } = useTextAreaCompoundContext("TextArea.HelperMessage");
   const typographyClass = textAreaProps.size === "large" ? "typography-label13regular" : "typography-label12regular";
-  const helperMessageClassName = clsx42(typographyClass, "text-text02");
+  const helperMessageClassName = clsx44(typographyClass, "text-text02");
   return /* @__PURE__ */ jsx58("div", { ref, className: helperMessageClassName, ...props });
 });
 TextAreaHelperMessage.displayName = "TextArea.HelperMessage";
@@ -3139,6 +3245,7 @@ TextAreaHelperMessage.displayName = "TextArea.HelperMessage";
 import { jsx as jsx59, jsxs as jsxs28 } from "react/jsx-runtime";
 function TextAreaInner({
   size = "medium",
+  variant = "outline",
   isResizable = false,
   autoHeight = false,
   maxHeight,
@@ -3156,9 +3263,10 @@ function TextAreaInner({
   const textAreaPropsForContext = useMemo4(
     () => ({
       size,
+      variant,
       isError
     }),
-    [size, isError]
+    [size, variant, isError]
   );
   const contextValue = useMemo4(
     () => ({
@@ -3210,30 +3318,41 @@ function TextAreaInner({
     ...ariaInvalidProps,
     ...maxLengthProps
   };
-  const textAreaWrapperClassName = clsx43(
+  const isBorderless = variant === "text";
+  const textAreaWrapperClassName = clsx45(
     "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 = clsx43(
-    "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 = clsx45("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__ */ jsx59(
     "div",
@@ -3242,7 +3361,8 @@ function TextAreaInner({
       style: {
         ...{ maxHeight },
         // height/minHeight はラッパに適用し、外形を揃える
-        ...!autoHeight && hasHeight ? { height } : {},
+        // isResizable 時はラッパに固定高さを設定しない（textarea のリサイズに追従させるため）
+        ...!autoHeight && hasHeight && !isResizable ? { height } : {},
         ...autoHeight && hasHeight ? { minHeight: height } : {}
       },
       children: /* @__PURE__ */ jsx59(
@@ -3253,7 +3373,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"
           }
         }
@@ -3264,7 +3385,7 @@ function TextAreaInner({
     "div",
     {
       id: counterId,
-      className: clsx43(
+      className: clsx45(
         "shrink-0",
         size === "large" ? "typography-label13regular" : "typography-label12regular",
         !disabled && isExceeded ? "text-supportError" : "text-text02"
@@ -3300,8 +3421,8 @@ var TextAreaBase = forwardRef13(function TextAreaBase2(props, ref) {
 var TextArea = attachStatics2(TextAreaBase);
 
 // src/toast/toast.tsx
-import clsx44 from "clsx";
-import { useCallback as useCallback11, useEffect as useEffect7, useState as useState12 } from "react";
+import clsx46 from "clsx";
+import { useCallback as useCallback11, useEffect as useEffect8, useState as useState12 } from "react";
 import { jsx as jsx60, jsxs as jsxs29 } from "react/jsx-runtime";
 var CLOSE_TIME_MSEC = 5e3;
 function Toast({
@@ -3321,17 +3442,17 @@ function Toast({
     }
   }, [isAnimation, onClickClose]);
   const handleAnimationEnd = (e) => window.getComputedStyle(e.currentTarget).opacity === "0" && onClickClose();
-  const wrapperClasses = clsx44("pointer-events-auto flex items-start gap-1 bg-white p-4 shadow-floatingShadow", {
+  const wrapperClasses = clsx46("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 = clsx44("flex items-center", {
+  const iconClasses = clsx46("flex items-center", {
     "fill-supportSuccess": state === "success",
     "fill-supportError": state === "error",
     "fill-supportWarning": state === "warning",
     "fill-supportInfo": state === "information"
   });
-  const textClasses = clsx44("typography-body13regular flex-1 pt-[3px]", {
+  const textClasses = clsx46("typography-body13regular flex-1 pt-[3px]", {
     "text-supportError": state === "error",
     "text-text01": state === "success" || state === "warning" || state === "information"
   });
@@ -3341,7 +3462,7 @@ function Toast({
     warning: "warning",
     information: "information-filled"
   };
-  useEffect7(() => {
+  useEffect8(() => {
     const timer = window.setTimeout(() => {
       if (isAutoClose) {
         setIsRemoving(true);
@@ -3357,7 +3478,7 @@ function Toast({
 }
 
 // src/toast/toast-provider.tsx
-import { createContext as createContext11, useCallback as useCallback12, useContext as useContext14, useEffect as useEffect8, useState as useState13 } from "react";
+import { createContext as createContext11, useCallback as useCallback12, useContext as useContext14, useEffect as useEffect9, useState as useState13 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { jsx as jsx61, jsxs as jsxs30 } from "react/jsx-runtime";
 var ToastContext = createContext11({});
@@ -3370,7 +3491,7 @@ var ToastProvider = ({ children }) => {
   const removeToast = useCallback12((id) => {
     setToasts((prev) => prev.filter((snackbar) => snackbar.id !== id));
   }, []);
-  useEffect8(() => {
+  useEffect9(() => {
     setIsClientRender(true);
   }, []);
   return /* @__PURE__ */ jsxs30(ToastContext.Provider, { value: { addToast, removeToast }, children: [
@@ -3386,7 +3507,7 @@ var useToast = () => {
 };
 
 // src/toggle/toggle.tsx
-import clsx45 from "clsx";
+import clsx47 from "clsx";
 import { jsx as jsx62, jsxs as jsxs31 } from "react/jsx-runtime";
 function Toggle({
   id,
@@ -3397,7 +3518,7 @@ function Toggle({
   labelPosition = "right",
   isDisabled = false
 }) {
-  const baseClasses = clsx45("relative flex items-center rounded-full", {
+  const baseClasses = clsx47("relative flex items-center rounded-full", {
     "bg-disabledOn": isDisabled && isChecked,
     "bg-disabled01": isDisabled && !isChecked,
     "bg-interactive01 peer-hover:bg-hover01": !isDisabled && isChecked,
@@ -3405,16 +3526,16 @@ function Toggle({
     "w-8 h-4 px-[3px]": size === "small",
     "w-12 h-6 px-1": size === "medium" || size === "large"
   });
-  const inputClasses = clsx45(
+  const inputClasses = clsx47(
     "peer absolute inset-0 z-[1] opacity-0",
     isDisabled ? "cursor-not-allowed" : "cursor-pointer"
   );
-  const indicatorClasses = clsx45("rounded-full bg-iconOnColor", {
+  const indicatorClasses = clsx47("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 = clsx45("break-all", {
+  const labelClasses = clsx47("break-all", {
     "mr-2": labelPosition === "left",
     "ml-2": labelPosition === "right",
     "typography-label14regular": size === "small" || size === "medium",
@@ -3442,17 +3563,17 @@ function Toggle({
 }
 
 // src/tooltip/tooltip.tsx
-import { useCallback as useCallback14, useEffect as useEffect9, useRef as useRef10, useState as useState14 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect10, useRef as useRef11, useState as useState14 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
 // src/tooltip/tooltip-content.tsx
-import clsx47 from "clsx";
+import clsx49 from "clsx";
 
 // src/tooltip/tail-icon.tsx
-import clsx46 from "clsx";
+import clsx48 from "clsx";
 import { jsx as jsx63 } from "react/jsx-runtime";
 var TailIcon = (props) => {
-  const tailClasses = clsx46("absolute fill-uiBackgroundTooltip", {
+  const tailClasses = clsx48("absolute fill-uiBackgroundTooltip", {
     "rotate-180": props.verticalPosition === "bottom",
     "rotate-0": props.verticalPosition !== "bottom",
     "-top-1": props.verticalPosition === "bottom" && props.size === "small",
@@ -3495,7 +3616,7 @@ var TooltipContent = ({
   maxWidth,
   isPortal = false
 }) => {
-  const tooltipWrapperClasses = clsx47("absolute z-tooltip m-auto flex", {
+  const tooltipWrapperClasses = clsx49("absolute z-tooltip m-auto flex", {
     "top-0": !isPortal && verticalPosition === "top",
     "bottom-0": !isPortal && verticalPosition === "bottom",
     "justify-start": horizontalAlign === "left",
@@ -3504,7 +3625,7 @@ var TooltipContent = ({
     "w-[24px]": size === "small",
     "w-[46px]": size !== "small"
   });
-  const tooltipBodyClasses = clsx47(
+  const tooltipBodyClasses = clsx49(
     "absolute z-tooltip inline-block w-max rounded bg-uiBackgroundTooltip text-textOnColor",
     {
       "typography-body12regular": size === "small",
@@ -3613,22 +3734,54 @@ function Tooltip({
     translateX: "0",
     translateY: "0"
   });
-  const targetRef = useRef10(null);
+  const targetRef = useRef11(null);
   const handleMouseOverWrapper = useCallback14(() => {
     if (isDisabledHover) {
       return;
     }
+    if (targetRef.current !== null) {
+      const dimensions = targetRef.current.getBoundingClientRect();
+      const position = calculatePosition({
+        dimensions,
+        maxWidth,
+        verticalPosition,
+        horizontalAlign,
+        tooltipSize: size
+      });
+      setTooltipPosition(position);
+    }
     setIsVisible(true);
-  }, [isDisabledHover]);
+  }, [isDisabledHover, calculatePosition, maxWidth, verticalPosition, horizontalAlign, size]);
   const handleMouseOutWrapper = useCallback14(() => {
     setIsVisible(false);
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     if (targetRef.current === null) return;
     const dimensions = targetRef.current?.getBoundingClientRect();
     const position = calculatePosition({ dimensions, maxWidth, verticalPosition, horizontalAlign, tooltipSize: size });
     setTooltipPosition(position);
   }, [calculatePosition, horizontalAlign, maxWidth, size, verticalPosition]);
+  useEffect10(() => {
+    if (!isVisible) return;
+    const updatePosition = () => {
+      if (targetRef.current === null) return;
+      const dimensions = targetRef.current.getBoundingClientRect();
+      const position = calculatePosition({
+        dimensions,
+        maxWidth,
+        verticalPosition,
+        horizontalAlign,
+        tooltipSize: size
+      });
+      setTooltipPosition(position);
+    };
+    window.addEventListener("scroll", updatePosition, { capture: true, passive: true });
+    window.addEventListener("resize", updatePosition, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", updatePosition, { capture: true });
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [isVisible, calculatePosition, maxWidth, verticalPosition, horizontalAlign, size]);
   return /* @__PURE__ */ jsxs33(
     "div",
     {