@zenkigen-inc/component-ui 1.22.0 → 1.24.0

package/dist/index.js

@@ -1619,6 +1619,9 @@ function isElement(node) {
   return node != null && typeof node === "object" && "type" in node;
 }
 
+// src/utils/top-layer.ts
+var TOP_LAYER_ATTRIBUTE = "data-zenkigen-top-layer";
+
 // src/popover/popover-context.ts
 var import_react21 = require("react");
 var PopoverContext = (0, import_react21.createContext)(null);
@@ -1747,6 +1750,7 @@ var PopoverTrigger = (0, import_react24.forwardRef)(function PopoverTrigger2({ c
 
 // src/popover/popover.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
+var FLOATING_VIEWPORT_PADDING2 = 8;
 function Popover({
   isOpen,
   children,
@@ -1756,6 +1760,14 @@ function Popover({
   anchorRef
 }) {
   const triggerRef = (0, import_react26.useRef)(null);
+  const middleware = (0, import_react26.useMemo)(
+    () => [
+      (0, import_react25.offset)(offsetValue),
+      (0, import_react25.flip)({ padding: FLOATING_VIEWPORT_PADDING2, flipAlignment: false }),
+      (0, import_react25.shift)({ padding: FLOATING_VIEWPORT_PADDING2 })
+    ],
+    [offsetValue]
+  );
   const floating = (0, import_react25.useFloating)({
     open: isOpen,
     onOpenChange: (open) => {
@@ -1764,7 +1776,7 @@ function Popover({
       }
     },
     placement,
-    middleware: [(0, import_react25.offset)(offsetValue)],
+    middleware,
     whileElementsMounted: import_react25.autoUpdate,
     strategy: "fixed"
   });
@@ -1812,27 +1824,83 @@ var import_react_day_picker2 = require("react-day-picker");
 var import_clsx15 = require("clsx");
 var import_react_day_picker = require("react-day-picker");
 var defaultDayPickerClassNames = (0, import_react_day_picker.getDefaultClassNames)();
-var DAY_PICKER_FONT_SIZE = "12px";
-var dayPickerStyle = {
-  "--rdp-nav-height": "30px",
-  "--rdp-day-width": "30px",
-  "--rdp-day-height": "30px",
-  "--rdp-day_button-width": "28px",
-  "--rdp-day_button-height": "28px",
-  "--rdp-day_button-border": "1px solid transparent",
-  "--rdp-weekday-padding": "0px",
-  fontFamily: "Arial, 'Noto Sans JP', sans-serif",
-  fontSize: DAY_PICKER_FONT_SIZE,
-  fontWeight: 700
+var BASE_TOKENS = {
+  triggerIcon: "small",
+  dayPickerStyle: {
+    "--rdp-nav-height": "30px",
+    "--rdp-day-width": "30px",
+    "--rdp-day-height": "30px",
+    "--rdp-day_button-width": "28px",
+    "--rdp-day_button-height": "28px",
+    "--rdp-day_button-border": "1px solid transparent",
+    "--rdp-weekday-padding": "0px",
+    fontFamily: "Arial, 'Noto Sans JP', sans-serif",
+    fontSize: "12px",
+    fontWeight: 700
+  },
+  dayPickerClassNames: {
+    month: (0, import_clsx15.clsx)(defaultDayPickerClassNames.month, "flex flex-col px-[7px] py-2")
+  },
+  dayButtonClass: "relative grid size-full place-items-center rounded-full !border !border-solid",
+  dayButtonFontSize: "12px",
+  monthCaptionClass: "flex items-center justify-between px-1 pb-0.5",
+  monthCaptionTypography: "typography-label12bold",
+  navIconButton: "small",
+  weekdayClass: "m-0 size-7 p-0 text-center align-middle",
+  footerIconButton: "medium",
+  footerClearButton: "small",
+  errorTypography: "typography-label11regular"
+};
+var LARGE_TOKENS = {
+  ...BASE_TOKENS,
+  triggerIcon: "medium",
+  errorTypography: "typography-label12regular"
 };
-var dayPickerClassNames = {
-  month: (0, import_clsx15.clsx)(defaultDayPickerClassNames.month, "flex flex-col px-[7px] py-2")
+var X_LARGE_TOKENS = {
+  triggerIcon: "medium",
+  dayPickerStyle: {
+    "--rdp-nav-height": "40px",
+    "--rdp-day-width": "48px",
+    "--rdp-day-height": "48px",
+    "--rdp-day_button-width": "40px",
+    "--rdp-day_button-height": "40px",
+    "--rdp-day_button-border": "1px solid transparent",
+    "--rdp-weekday-padding": "0px",
+    fontFamily: "Arial, 'Noto Sans JP', sans-serif",
+    fontSize: "16px",
+    fontWeight: 700
+  },
+  dayPickerClassNames: {
+    month: (0, import_clsx15.clsx)(defaultDayPickerClassNames.month, "flex flex-col px-[3px] pb-1 pt-2")
+  },
+  dayButtonClass: "relative grid size-10 place-items-center rounded-full !border !border-solid",
+  dayButtonFontSize: "16px",
+  // caption は height 固定（--rdp-nav-height: 40px）のため pb-2 は食い込みとして働き、
+  // ナビボタンが上へ 4px はみ出して月ヘッダーと曜日行の視覚間隔が 8px になる（上部ブロックコメント参照）
+  monthCaptionClass: "flex items-center justify-between px-1 pb-2",
+  monthCaptionTypography: "typography-label16bold",
+  // IconButton に x-large は無いが、large が 40px で Figma と一致する（内部アイコンも 24px になる）
+  navIconButton: "large",
+  weekdayClass: "m-0 size-12 p-0 text-center align-middle",
+  footerIconButton: "large",
+  footerClearButton: "large",
+  errorTypography: "typography-label12regular"
+};
+var DATE_PICKER_SIZE_TOKENS = {
+  small: BASE_TOKENS,
+  medium: BASE_TOKENS,
+  large: LARGE_TOKENS,
+  "x-large": X_LARGE_TOKENS
+};
+var useDatePickerSizeTokens = (componentName = "DatePicker \u306E\u30AB\u30EC\u30F3\u30C0\u30FC") => {
+  const context = useDatePickerCompoundContext(componentName);
+  return { ...context, tokens: DATE_PICKER_SIZE_TOKENS[context.size] };
 };
-var dayButtonBaseClass = "relative grid size-full place-items-center rounded-full !border !border-solid";
 
 // src/date-picker/date-picker-day-button.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var CustomDayButton = ({ day, modifiers, className, style, ...buttonProps }) => {
+  const { tokens } = useDatePickerSizeTokens();
   const isSelected = Boolean(modifiers.selected);
   const isOutside = Boolean(modifiers.outside);
   const isMinMaxDisabled = Boolean(modifiers.minMaxDisabled);
@@ -1845,10 +1913,10 @@ var CustomDayButton = ({ day, modifiers, className, style, ...buttonProps }) =>
       ...buttonProps,
       day,
       modifiers,
-      style: { ...style, fontSize: DAY_PICKER_FONT_SIZE },
+      style: { ...style, fontSize: tokens.dayButtonFontSize },
       className: (0, import_clsx16.clsx)(
         className,
-        dayButtonBaseClass,
+        tokens.dayButtonClass,
         // 共通: フォーカスリング（有効な日のみ）
         // react-day-picker の rdp-day_button クラスが outline: none を設定しているため、!important で上書き
         !isDisabledDay && import_component_theme6.focusVisible.normalImportant,
@@ -1874,8 +1942,8 @@ var import_react28 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var DatePickerErrorMessage = (0, import_react28.forwardRef)(
   ({ "aria-live": ariaLive = "assertive", ...props }, ref) => {
-    const { size, isError } = useDatePickerCompoundContext("DatePicker.ErrorMessage");
-    const typographyClass = size === "large" ? "typography-label12regular" : "typography-label11regular";
+    const { isError, tokens } = useDatePickerSizeTokens("DatePicker.ErrorMessage");
+    const typographyClass = tokens.errorTypography;
     if (isError !== true) {
       return null;
     }
@@ -1956,11 +2024,12 @@ var import_jsx_runtime25 = require("react/jsx-runtime");
 var CustomMonthCaption = ({ calendarMonth, className, displayIndex, style, ...props }) => {
   void displayIndex;
   const { goToMonth, nextMonth, previousMonth } = (0, import_react_day_picker3.useDayPicker)();
+  const { tokens } = useDatePickerSizeTokens();
   const captionMonth = calendarMonth.date;
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "div",
     {
-      className: (0, import_clsx18.clsx)("flex items-center justify-between px-1 pb-0.5", className),
+      className: (0, import_clsx18.clsx)(tokens.monthCaptionClass, className),
       style: { ...style, fontSize: "inherit", fontWeight: "inherit" },
       ...props,
       children: [
@@ -1968,19 +2037,19 @@ var CustomMonthCaption = ({ calendarMonth, className, displayIndex, style, ...pr
           IconButton,
           {
             icon: "angle-left",
-            size: "small",
+            size: tokens.navIconButton,
             variant: "text",
             isDisabled: !previousMonth,
             "aria-label": "\u524D\u306E\u6708",
             onClick: () => previousMonth && goToMonth(previousMonth)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "typography-label12bold text-text02", children: formatMonthLabel(captionMonth) }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: (0, import_clsx18.clsx)(tokens.monthCaptionTypography, "text-text02"), children: formatMonthLabel(captionMonth) }),
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           IconButton,
           {
             icon: "angle-right",
-            size: "small",
+            size: tokens.navIconButton,
             variant: "text",
             isDisabled: !nextMonth,
             "aria-label": "\u6B21\u306E\u6708",
@@ -1996,11 +2065,12 @@ var CustomMonthCaption = ({ calendarMonth, className, displayIndex, style, ...pr
 var import_clsx19 = require("clsx");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var CustomWeekday = ({ className, children, style, ...props }) => {
+  const { tokens } = useDatePickerSizeTokens();
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "th",
     {
       ...props,
-      className: (0, import_clsx19.clsx)(className, "m-0 size-7 p-0 text-center align-middle text-text02"),
+      className: (0, import_clsx19.clsx)(className, tokens.weekdayClass, "text-text02"),
       style: { ...style, fontSize: "inherit", fontWeight: "bold" },
       children
     }
@@ -2135,7 +2205,7 @@ var DatePicker = ({
       formatWeekdayName: (date) => weekdayFormatter.format(date)
     };
   }, []);
-  const iconSize = size === "large" ? "medium" : "small";
+  const tokens = DATE_PICKER_SIZE_TOKENS[size];
   const displayText = value ? formatDisplayDate(value, timeZone) : placeholder;
   const displayTextClasses = "min-w-0 truncate";
   const errorIds = [];
@@ -2183,7 +2253,7 @@ var DatePicker = ({
         size,
         variant: isError ? "outlineDanger" : "outline",
         isDisabled,
-        before: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { name: "calendar", size: iconSize }),
+        before: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { name: "calendar", size: tokens.triggerIcon }),
         justifyContent: "start",
         onClick: handleTriggerClick,
         children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: displayTextClasses, children: displayText })
@@ -2197,7 +2267,7 @@ var DatePicker = ({
           showOutsideDays: true,
           hideNavigation: true,
           weekStartsOn: 0,
-          style: dayPickerStyle,
+          style: tokens.dayPickerStyle,
           month: displayMonth,
           onMonthChange: setDisplayMonth,
           selected: selectedDate,
@@ -2205,7 +2275,7 @@ var DatePicker = ({
           today: todayForCalendar,
           disabled: disabledDays,
           modifiers: { minMaxDisabled: isMinMaxDisabled },
-          classNames: dayPickerClassNames,
+          classNames: tokens.dayPickerClassNames,
           formatters,
           fixedWeeks: true,
           components: { MonthCaption: CustomMonthCaption, DayButton: CustomDayButton, Weekday: CustomWeekday }
@@ -2216,14 +2286,14 @@ var DatePicker = ({
           IconButton,
           {
             icon: "calendar-today",
-            size: "medium",
+            size: tokens.footerIconButton,
             variant: "text",
             "aria-label": "\u4ECA\u65E5\u306B\u623B\u308B",
             iconAccentColor: "supportInfo",
             onClick: handleClickToday
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { type: "button", size: "small", variant: "text", onClick: handleClear, children: "\u30AF\u30EA\u30A2" })
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { type: "button", size: tokens.footerClearButton, variant: "text", onClick: handleClear, children: "\u30AF\u30EA\u30A2" })
       ] })
     ] }) })
   ] });
@@ -2903,7 +2973,8 @@ function Loading({ size = "medium", position = "fixed", height = "100%" }) {
 }
 
 // src/modal/modal.tsx
-var import_react40 = require("react");
+var import_react40 = require("@floating-ui/react");
+var import_react41 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/modal/body-scroll-lock.tsx
@@ -2980,7 +3051,13 @@ var import_clsx28 = __toESM(require("clsx"));
 var import_react39 = require("react");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 function ModalHeader({ children, isNoBorder = false }) {
-  const { onClose } = (0, import_react39.useContext)(ModalContext);
+  const { onClose, titleId, setHasTitle } = (0, import_react39.useContext)(ModalContext);
+  (0, import_react39.useLayoutEffect)(() => {
+    setHasTitle?.(true);
+    return () => {
+      setHasTitle?.(false);
+    };
+  }, [setHasTitle]);
   const headerClasses = (0, import_clsx28.default)(
     "typography-h5 flex w-full shrink-0 items-center justify-between rounded-t-lg px-6 text-text01",
     {
@@ -2990,7 +3067,7 @@ function ModalHeader({ children, isNoBorder = false }) {
     }
   );
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: headerClasses, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { children }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { id: titleId, children }),
     onClose && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(IconButton, { icon: "close", size: "small", variant: "text", onClick: onClose })
   ] });
 }
@@ -2999,6 +3076,9 @@ function ModalHeader({ children, isNoBorder = false }) {
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var LIMIT_WIDTH = 320;
 var LIMIT_HEIGHT = 184;
+var MODAL_OVERLAY_ATTRIBUTE = "data-zenkigen-modal-overlay";
+var FOLLOWING_INSIDE_SELECTOR = `[data-floating-ui-portal],[${MODAL_OVERLAY_ATTRIBUTE}],[data-floating-ui-focus-guard]`;
+var isFollowing = (base, target) => (base.compareDocumentPosition(target) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0;
 function Modal({
   children,
   width = 480,
@@ -3008,13 +3088,33 @@ function Modal({
   onClose,
   portalTargetRef
 }) {
-  const [isMounted, setIsMounted] = (0, import_react40.useState)(false);
+  const [isMounted, setIsMounted] = (0, import_react41.useState)(false);
+  const overlayRef = (0, import_react41.useRef)(null);
+  const titleId = (0, import_react41.useId)();
+  const [hasTitle, setHasTitle] = (0, import_react41.useState)(false);
+  const { refs, context } = (0, import_react40.useFloating)({ open: isOpen });
+  const returnFocusRef = (0, import_react41.useRef)(null);
+  (0, import_react41.useLayoutEffect)(() => {
+    if (isOpen) {
+      returnFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    }
+  }, [isOpen]);
+  const getInsideElements = () => {
+    const overlay = overlayRef.current;
+    const topLayers = Array.from(document.querySelectorAll(`[${TOP_LAYER_ATTRIBUTE}]`));
+    const following = overlay == null ? [] : Array.from(document.querySelectorAll(FOLLOWING_INSIDE_SELECTOR)).filter(
+      (element) => isFollowing(overlay, element)
+    );
+    return [...topLayers, ...following].filter(
+      (element) => element !== document.body && element !== document.documentElement
+    );
+  };
   const renderWidth = typeof width === "number" ? Math.max(width, LIMIT_WIDTH) : width;
   const renderHeight = typeof height === "number" ? Math.max(height, LIMIT_HEIGHT) : height;
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     setIsMounted(true);
   }, []);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (isOpen) {
       window.dispatchEvent(new CustomEvent(MODAL_OPEN_EVENT));
     }
@@ -3022,16 +3122,36 @@ function Modal({
   return isMounted && isOpen ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(BodyScrollLock, {}),
     (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ModalContext.Provider, { value: { onClose }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "fixed left-0 top-0 z-overlay flex size-full items-center justify-center bg-backgroundOverlayBlack py-4", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-        "div",
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ModalContext.Provider, { value: { onClose, titleId, setHasTitle }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        import_react40.FloatingFocusManager,
         {
-          role: "dialog",
-          "aria-modal": "true",
-          className: "grid max-h-full min-h-[120px] grid-rows-[max-content_1fr_max-content] flex-col rounded-lg bg-uiBackground01 shadow-modalShadow",
-          style: { width: renderWidth, height: renderHeight, maxWidth },
-          children
+          context,
+          initialFocus: refs.floating,
+          returnFocus: returnFocusRef,
+          outsideElementsInert: true,
+          getInsideElements,
+          children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            "div",
+            {
+              ref: overlayRef,
+              ...{ [MODAL_OVERLAY_ATTRIBUTE]: "" },
+              className: "fixed left-0 top-0 z-overlay flex size-full items-center justify-center bg-backgroundOverlayBlack py-4",
+              children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                "div",
+                {
+                  ref: refs.setFloating,
+                  role: "dialog",
+                  "aria-modal": "true",
+                  ...hasTitle && { "aria-labelledby": titleId },
+                  className: "grid max-h-full min-h-[120px] grid-rows-[max-content_1fr_max-content] flex-col rounded-lg bg-uiBackground01 shadow-modalShadow outline-none",
+                  style: { width: renderWidth, height: renderHeight, maxWidth },
+                  children
+                }
+              )
+            }
+          )
         }
-      ) }) }),
+      ) }),
       portalTargetRef?.current != null ? portalTargetRef.current : document.body
     )
   ] }) : null;
@@ -3070,7 +3190,8 @@ function NotificationInline({ state = "default", size = "medium", variant = "def
     "fill-supportSuccess": state === "success"
   });
   const textClasses = (0, import_clsx29.clsx)("flex-1", {
-    "pt-[2px]": size === "medium" && state !== "default"
+    "pt-[3px]": size === "medium" && state !== "default",
+    "pt-[1px]": size === "small" && state !== "default"
   });
   const iconName = {
     attention: "attention",
@@ -3093,18 +3214,18 @@ function NotificationInline({ state = "default", size = "medium", variant = "def
 
 // src/pagination/pagination-button.tsx
 var import_clsx30 = require("clsx");
-var import_react42 = require("react");
+var import_react43 = require("react");
 
 // src/pagination/pagination-context.ts
-var import_react41 = require("react");
-var PaginationContext = (0, import_react41.createContext)({
+var import_react42 = require("react");
+var PaginationContext = (0, import_react42.createContext)({
   currentPage: 0
 });
 
 // src/pagination/pagination-button.tsx
 var import_jsx_runtime41 = require("react/jsx-runtime");
 function PaginationButton({ page, onClick }) {
-  const { currentPage } = (0, import_react42.useContext)(PaginationContext);
+  const { currentPage } = (0, import_react43.useContext)(PaginationContext);
   const buttonClasses = (0, import_clsx30.clsx)(
     "flex h-8 min-w-8 items-center justify-center rounded fill-icon01 px-1",
     "typography-label14regular",
@@ -3191,15 +3312,16 @@ function Pagination({ currentPage, totalPage, sideNumPagesToShow = 3, onClick })
 }
 
 // src/select/select.tsx
-var import_react46 = require("@floating-ui/react");
+var import_react47 = require("@floating-ui/react");
 var import_component_theme13 = require("@zenkigen-inc/component-theme");
 var import_clsx33 = __toESM(require("clsx"));
-var import_react47 = require("react");
+var import_react48 = require("react");
 
 // src/select/select-context.ts
-var import_react43 = require("react");
-var SelectContext = (0, import_react43.createContext)({
+var import_react44 = require("react");
+var SelectContext = (0, import_react44.createContext)({
   size: "medium",
+  isDeselectVisible: false,
   setIsOptionListOpen: () => false,
   variant: "outline",
   isError: false
@@ -3208,10 +3330,10 @@ var SelectContext = (0, import_react43.createContext)({
 // src/select/select-item.tsx
 var import_component_theme11 = require("@zenkigen-inc/component-theme");
 var import_clsx31 = __toESM(require("clsx"));
-var import_react44 = require("react");
+var import_react45 = require("react");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 function SelectItem({ option }) {
-  const { setIsOptionListOpen, selectedOption, onChange, isError, size } = (0, import_react44.useContext)(SelectContext);
+  const { setIsOptionListOpen, selectedOption, onChange, isError, size } = (0, import_react45.useContext)(SelectContext);
   const handleClickItem = (option2) => {
     onChange?.(option2);
     setIsOptionListOpen(false);
@@ -3238,31 +3360,43 @@ function SelectItem({ option }) {
 // src/select/select-list.tsx
 var import_component_theme12 = require("@zenkigen-inc/component-theme");
 var import_clsx32 = __toESM(require("clsx"));
-var import_react45 = require("react");
+var import_react46 = require("react");
 var import_jsx_runtime44 = require("react/jsx-runtime");
-var SelectList = (0, import_react45.forwardRef)(({ children, maxHeight }, ref) => {
-  const { selectedOption, setIsOptionListOpen, variant, placeholder, onChange, floatingStyles, floatingRef, size } = (0, import_react45.useContext)(SelectContext);
+var SelectList = (0, import_react46.forwardRef)(({ children, maxHeight }, ref) => {
+  const {
+    selectedOption,
+    setIsOptionListOpen,
+    variant,
+    isDeselectVisible,
+    onChange,
+    floatingStyles,
+    floatingRef,
+    size
+  } = (0, import_react46.useContext)(SelectContext);
   const handleClickDeselect = () => {
     onChange?.(null);
     setIsOptionListOpen(false);
   };
-  (0, import_react45.useLayoutEffect)(() => {
-    if (maxHeight != null && selectedOption != null) {
-      const container = floatingRef?.current;
-      if (container != null) {
-        const element = container.querySelector(`[data-id="${selectedOption.id}"]`);
-        if (element != null) {
-          const htmlElement = element;
-          const elementTop = htmlElement.offsetTop;
-          const elementHeight = htmlElement.offsetHeight;
-          const containerHeight = container.clientHeight;
-          const scrollTop = elementTop - (containerHeight - elementHeight) / 2;
-          container.scrollTo({
-            top: Math.max(0, scrollTop)
-          });
-        }
-      }
+  (0, import_react46.useLayoutEffect)(() => {
+    if (selectedOption == null) {
+      return;
+    }
+    const container = floatingRef?.current;
+    if (container == null || container.scrollHeight <= container.clientHeight) {
+      return;
+    }
+    const element = container.querySelector(`[data-id="${selectedOption.id}"]`);
+    if (element == null) {
+      return;
     }
+    const htmlElement = element;
+    const elementTop = htmlElement.offsetTop;
+    const elementHeight = htmlElement.offsetHeight;
+    const containerHeight = container.clientHeight;
+    const scrollTop = elementTop - (containerHeight - elementHeight) / 2;
+    container.scrollTo({
+      top: Math.max(0, scrollTop)
+    });
   }, [selectedOption, maxHeight, floatingRef]);
   const listClasses = (0, import_clsx32.default)("overflow-y-auto rounded bg-uiBackground01 py-2 shadow-floatingShadow", {
     "border-solid border border-uiBorder01": variant === "outline"
@@ -3277,7 +3411,7 @@ var SelectList = (0, import_react45.forwardRef)(({ children, maxHeight }, ref) =
   );
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("ul", { className: listClasses, style: { maxHeight, ...floatingStyles }, ref, children: [
     children,
-    placeholder != null && selectedOption !== null && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { className: deselectButtonClasses, type: "button", onClick: handleClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
+    isDeselectVisible && selectedOption !== null && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { className: deselectButtonClasses, type: "button", onClick: handleClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
   ] });
 });
 SelectList.displayName = "SelectList";
@@ -3285,6 +3419,10 @@ SelectList.displayName = "SelectList";
 // src/select/select.tsx
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var FLOATING_OFFSET2 = 4;
+var OPTION_HEIGHT_PX = { "x-small": 32, small: 32, medium: 32, large: 40 };
+var DEFAULT_VISIBLE_OPTION_COUNT = 8.5;
+var LIST_VERTICAL_CHROME_PX = 10;
+var getDefaultOptionListMaxHeight = (size) => OPTION_HEIGHT_PX[size] * DEFAULT_VISIBLE_OPTION_COUNT + LIST_VERTICAL_CHROME_PX;
 function Select({
   children,
   size = "medium",
@@ -3297,27 +3435,28 @@ function Select({
   isDisabled = false,
   isError = false,
   isOptionSelected = false,
+  hasDeselectButton,
   onChange,
   optionListMaxHeight,
   matchListToTrigger = false,
   "aria-label": ariaLabel,
   "aria-describedby": ariaDescribedby
 }) {
-  const [isOptionListOpen, setIsOptionListOpen] = (0, import_react47.useState)(false);
-  const targetRef = (0, import_react47.useRef)(null);
+  const [isOptionListOpen, setIsOptionListOpen] = (0, import_react48.useState)(false);
+  const targetRef = (0, import_react48.useRef)(null);
   useOutsideClick(targetRef, () => setIsOptionListOpen(false));
   useDismissOnModalOpen(() => {
     if (isOptionListOpen) {
       setIsOptionListOpen(false);
     }
   });
-  const { refs, floatingStyles } = (0, import_react46.useFloating)({
+  const { refs, floatingStyles } = (0, import_react47.useFloating)({
     open: isOptionListOpen,
     onOpenChange: setIsOptionListOpen,
     placement: "bottom-start",
     middleware: [
-      (0, import_react46.offset)(FLOATING_OFFSET2),
-      (0, import_react46.size)({
+      (0, import_react47.offset)(FLOATING_OFFSET2),
+      (0, import_react47.size)({
         apply({ availableWidth, elements, rects }) {
           const referenceWidth = rects.reference.width;
           if (matchListToTrigger) {
@@ -3329,11 +3468,13 @@ function Select({
         }
       })
     ],
-    whileElementsMounted: import_react46.autoUpdate
+    whileElementsMounted: import_react47.autoUpdate
   });
   const handleClickToggle = () => setIsOptionListOpen((prev) => !prev);
+  const resolvedOptionListMaxHeight = optionListMaxHeight ?? getDefaultOptionListMaxHeight(size);
   const buttonVariant = isError && !isDisabled ? `${variant}Error` : variant;
   const isSelected = isOptionSelected && !isDisabled && selectedOption !== null && !isError;
+  const isDeselectVisible = hasDeselectButton ?? placeholder != null;
   const wrapperClasses = (0, import_clsx33.default)("relative flex shrink-0 items-center gap-1 rounded bg-uiBackground01", {
     "h-6": size === "x-small" || size === "small",
     "h-8": size === "medium",
@@ -3369,7 +3510,7 @@ function Select({
       value: {
         size,
         variant,
-        placeholder,
+        isDeselectVisible,
         setIsOptionListOpen,
         selectedOption,
         onChange,
@@ -3402,7 +3543,7 @@ function Select({
             ]
           }
         ),
-        isOptionListOpen && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react46.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "relative z-popover", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SelectList, { ref: refs.setFloating, maxHeight: optionListMaxHeight, children }) }) })
+        isOptionListOpen && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react47.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "relative z-popover", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SelectList, { ref: refs.setFloating, maxHeight: resolvedOptionListMaxHeight, children }) }) })
       ] })
     }
   );
@@ -3490,10 +3631,10 @@ function PaginationSelect({
 }
 
 // src/password-input/password-input.tsx
-var import_react48 = require("react");
+var import_react49 = require("react");
 var import_jsx_runtime47 = require("react/jsx-runtime");
-var PasswordInputBase = (0, import_react48.forwardRef)(function PasswordInput({ disabled = false, children, ...props }, ref) {
-  const [isPasswordVisible, setIsPasswordVisible] = (0, import_react48.useState)(false);
+var PasswordInputBase = (0, import_react49.forwardRef)(function PasswordInput({ disabled = false, children, ...props }, ref) {
+  const [isPasswordVisible, setIsPasswordVisible] = (0, import_react49.useState)(false);
   const { className: _className, ...textInputProps } = props;
   const handlePasswordVisibilityToggle = () => {
     setIsPasswordVisible((prev) => !prev);
@@ -3528,7 +3669,7 @@ var PasswordInput2 = Object.assign(PasswordInputBase, {
 });
 
 // src/popup/popup.tsx
-var import_react51 = require("react");
+var import_react52 = require("react");
 
 // src/popup/popup-body.tsx
 var import_jsx_runtime48 = require("react/jsx-runtime");
@@ -3537,8 +3678,8 @@ function PopupBody({ children }) {
 }
 
 // src/popup/popup-context.ts
-var import_react49 = require("react");
-var PopupContext = (0, import_react49.createContext)({
+var import_react50 = require("react");
+var PopupContext = (0, import_react50.createContext)({
   isOpen: false,
   onClose: () => null
 });
@@ -3550,10 +3691,10 @@ function PopupFooter({ children }) {
 }
 
 // src/popup/popup-header.tsx
-var import_react50 = require("react");
+var import_react51 = require("react");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 function PopupHeader({ children, before }) {
-  const { onClose } = (0, import_react50.useContext)(PopupContext);
+  const { onClose } = (0, import_react51.useContext)(PopupContext);
   return /* @__PURE__ */ (0, import_jsx_runtime50.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_runtime50.jsxs)("div", { className: "flex items-center gap-1", children: [
       before,
@@ -3568,7 +3709,7 @@ var import_jsx_runtime51 = require("react/jsx-runtime");
 var LIMIT_WIDTH2 = 320;
 var LIMIT_HEIGHT2 = 184;
 function useOptionalPopoverContext() {
-  return (0, import_react51.useContext)(PopoverContext);
+  return (0, import_react52.useContext)(PopoverContext);
 }
 function Popup({ children, isOpen: controlledIsOpen, width = 480, height, onClose }) {
   const renderWidth = typeof width === "number" ? Math.max(width, LIMIT_WIDTH2) : width;
@@ -3595,7 +3736,7 @@ Popup.Footer = PopupFooter;
 // src/radio/radio.tsx
 var import_component_theme14 = require("@zenkigen-inc/component-theme");
 var import_clsx34 = __toESM(require("clsx"));
-var import_react52 = require("react");
+var import_react53 = require("react");
 var import_jsx_runtime52 = require("react/jsx-runtime");
 function Radio({
   name,
@@ -3608,14 +3749,14 @@ function Radio({
   onChange
 }) {
   const isLarge = size === "large";
-  const [isMouseOver, setIsMouseOver] = (0, import_react52.useState)(false);
-  const handleMouseOverInput = (0, import_react52.useCallback)(() => {
+  const [isMouseOver, setIsMouseOver] = (0, import_react53.useState)(false);
+  const handleMouseOverInput = (0, import_react53.useCallback)(() => {
     setIsMouseOver(true);
   }, []);
-  const handleMouseOutInput = (0, import_react52.useCallback)(() => {
+  const handleMouseOutInput = (0, import_react53.useCallback)(() => {
     setIsMouseOver(false);
   }, []);
-  const handleChange = (0, import_react52.useCallback)(
+  const handleChange = (0, import_react53.useCallback)(
     (e) => !isDisabled && onChange?.(e),
     [isDisabled, onChange]
   );
@@ -3696,13 +3837,13 @@ function Radio({
 }
 
 // src/radio-card/radio-card.tsx
-var import_react55 = require("react");
+var import_react56 = require("react");
 
 // src/radio-card/radio-card-context.ts
-var import_react53 = require("react");
-var RadioCardContext = (0, import_react53.createContext)(null);
+var import_react54 = require("react");
+var RadioCardContext = (0, import_react54.createContext)(null);
 function useRadioCardContext(componentName) {
-  const context = (0, import_react53.useContext)(RadioCardContext);
+  const context = (0, import_react54.useContext)(RadioCardContext);
   if (context === null) {
     throw new Error(`<${componentName}> \u306F <RadioCard> \u306E\u5185\u90E8\u3067\u4F7F\u7528\u3057\u3066\u304F\u3060\u3055\u3044`);
   }
@@ -3742,11 +3883,11 @@ RadioCardGroup.displayName = "RadioCard.Group";
 // src/radio-card/radio-card-item.tsx
 var import_component_theme15 = require("@zenkigen-inc/component-theme");
 var import_clsx35 = __toESM(require("clsx"));
-var import_react54 = require("react");
+var import_react55 = require("react");
 var import_jsx_runtime55 = require("react/jsx-runtime");
 function RadioCardItem({ value, label, description, isDisabled: itemDisabled = false, id }) {
   const context = useRadioCardContext("RadioCard.Item");
-  const autoId = (0, import_react54.useId)();
+  const autoId = (0, import_react55.useId)();
   const inputId = id ?? autoId;
   const labelId = `${inputId}-label`;
   const descriptionId = `${inputId}-description`;
@@ -3840,24 +3981,24 @@ function RadioCardRoot({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledby
 }) {
-  const autoName = (0, import_react55.useId)();
-  const baseId = (0, import_react55.useId)();
+  const autoName = (0, import_react56.useId)();
+  const baseId = (0, import_react56.useId)();
   const resolvedName = name ?? autoName;
   const errorIds = [];
-  const enhancedChildren = import_react55.Children.map(children, (child) => {
-    if (!(0, import_react55.isValidElement)(child)) {
+  const enhancedChildren = import_react56.Children.map(children, (child) => {
+    if (!(0, import_react56.isValidElement)(child)) {
       return child;
     }
     if (child.type === RadioCardErrorMessage && isError) {
       const errorChild = child;
       const assignedId = errorChild.props.id ?? `${baseId}-error-${errorIds.length + 1}`;
       errorIds.push(assignedId);
-      return (0, import_react55.cloneElement)(errorChild, { id: assignedId });
+      return (0, import_react56.cloneElement)(errorChild, { id: assignedId });
     }
     return child;
   });
   const errorDescribedBy = errorIds.length > 0 ? errorIds.join(" ") : null;
-  const contextValue = (0, import_react55.useMemo)(
+  const contextValue = (0, import_react56.useMemo)(
     () => ({
       value,
       onChange,
@@ -3881,9 +4022,9 @@ var RadioCard = Object.assign(RadioCardRoot, {
 
 // src/search/search.tsx
 var import_clsx36 = require("clsx");
-var import_react56 = require("react");
+var import_react57 = require("react");
 var import_jsx_runtime57 = require("react/jsx-runtime");
-var Search = (0, import_react56.forwardRef)(({ width = "100%", size = "medium", ...props }, ref) => {
+var Search = (0, import_react57.forwardRef)(({ width = "100%", size = "medium", ...props }, ref) => {
   const classes = (0, import_clsx36.clsx)(
     "flex items-center rounded-full border border-uiBorder02 bg-uiBackground01 focus-within:border-activeInput",
     { "h-8 px-3": size === "medium" },
@@ -3921,16 +4062,16 @@ var Search = (0, import_react56.forwardRef)(({ width = "100%", size = "medium",
 Search.displayName = "Search";
 
 // src/segmented-control/segmented-control.tsx
-var import_react59 = __toESM(require("react"));
+var import_react60 = __toESM(require("react"));
 
 // src/segmented-control/segmented-control-context.ts
-var import_react57 = require("react");
-var SegmentedControlContext = (0, import_react57.createContext)(null);
+var import_react58 = require("react");
+var SegmentedControlContext = (0, import_react58.createContext)(null);
 
 // src/segmented-control/segmented-control-item.tsx
 var import_component_theme16 = require("@zenkigen-inc/component-theme");
 var import_clsx37 = require("clsx");
-var import_react58 = require("react");
+var import_react59 = require("react");
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var SegmentedControlItem = ({
   label,
@@ -3940,9 +4081,9 @@ var SegmentedControlItem = ({
   "aria-label": ariaLabel,
   ...rest
 }) => {
-  const context = (0, import_react58.useContext)(SegmentedControlContext);
-  const buttonRef = (0, import_react58.useRef)(null);
-  const lastInteractionWasMouse = (0, import_react58.useRef)(false);
+  const context = (0, import_react59.useContext)(SegmentedControlContext);
+  const buttonRef = (0, import_react59.useRef)(null);
+  const lastInteractionWasMouse = (0, import_react59.useRef)(false);
   if (context === null) {
     throw new Error("SegmentedControl.Item must be used within SegmentedControl");
   }
@@ -3958,7 +4099,7 @@ var SegmentedControlItem = ({
   const isSelected = value === selectedValue;
   const isFocused = value === focusedValue;
   const isOptionDisabled = isContextDisabled || itemDisabled === true;
-  (0, import_react58.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     if (isFocused === true && buttonRef.current !== null) {
       buttonRef.current.focus();
     }
@@ -4035,15 +4176,15 @@ var SegmentedControl = ({
   "aria-label": ariaLabel,
   ...rest
 }) => {
-  const containerRef = (0, import_react59.useRef)(null);
-  const itemIds = import_react59.Children.toArray(children).filter((child) => {
-    if (!import_react59.default.isValidElement(child) || typeof child.props !== "object" || child.props === null || !("value" in child.props)) {
+  const containerRef = (0, import_react60.useRef)(null);
+  const itemIds = import_react60.Children.toArray(children).filter((child) => {
+    if (!import_react60.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_react59.Children.count(children);
+  const childrenCount = import_react60.Children.count(children);
   const containerStyle = { gridTemplateColumns: `repeat(${childrenCount}, minmax(0,1fr))` };
   const {
     focusedValue,
@@ -4089,7 +4230,7 @@ SegmentedControl.Item = SegmentedControlItem;
 // src/select-sort/select-sort.tsx
 var import_component_theme19 = require("@zenkigen-inc/component-theme");
 var import_clsx40 = __toESM(require("clsx"));
-var import_react60 = require("react");
+var import_react61 = require("react");
 
 // src/select-sort/select-list.tsx
 var import_component_theme18 = require("@zenkigen-inc/component-theme");
@@ -4156,8 +4297,8 @@ function SelectSort({
   onChange,
   onClickDeselect
 }) {
-  const [isOptionListOpen, setIsOptionListOpen] = (0, import_react60.useState)(false);
-  const targetRef = (0, import_react60.useRef)(null);
+  const [isOptionListOpen, setIsOptionListOpen] = (0, import_react61.useState)(false);
+  const targetRef = (0, import_react61.useRef)(null);
   useOutsideClick(targetRef, () => setIsOptionListOpen(false));
   useDismissOnModalOpen(() => {
     if (isOptionListOpen) {
@@ -4165,7 +4306,7 @@ function SelectSort({
     }
   });
   const handleClickToggle = () => setIsOptionListOpen((prev) => !prev);
-  const handleClickItem = (0, import_react60.useCallback)(
+  const handleClickItem = (0, import_react61.useCallback)(
     (value) => {
       onChange?.(value);
       setIsOptionListOpen(false);
@@ -4232,7 +4373,7 @@ function SelectSort({
 // src/sort-button/sort-button.tsx
 var import_component_theme20 = require("@zenkigen-inc/component-theme");
 var import_clsx41 = __toESM(require("clsx"));
-var import_react61 = require("react");
+var import_react62 = require("react");
 var import_jsx_runtime63 = require("react/jsx-runtime");
 function SortButton({
   size = "medium",
@@ -4244,7 +4385,7 @@ function SortButton({
   "aria-label": ariaLabel,
   ...rest
 }) {
-  const handleClick = (0, import_react61.useCallback)(() => {
+  const handleClick = (0, import_react62.useCallback)(() => {
     if (isDisabled || !onClick) return;
     onClick();
   }, [isDisabled, onClick]);
@@ -4302,13 +4443,13 @@ function SortButton({
 
 // src/steps/steps.tsx
 var import_clsx44 = require("clsx");
-var import_react64 = require("react");
+var import_react65 = require("react");
 
 // src/steps/steps-context.ts
-var import_react62 = require("react");
-var StepsContext = (0, import_react62.createContext)(null);
+var import_react63 = require("react");
+var StepsContext = (0, import_react63.createContext)(null);
 function useStepsContext() {
-  const context = (0, import_react62.useContext)(StepsContext);
+  const context = (0, import_react63.useContext)(StepsContext);
   if (context === null) {
     throw new Error("Steps.Item must be used within <Steps>");
   }
@@ -4319,10 +4460,10 @@ function useStepsContext() {
 var import_clsx43 = require("clsx");
 
 // src/steps/steps-item-context.ts
-var import_react63 = require("react");
-var StepsItemContext = (0, import_react63.createContext)(null);
+var import_react64 = require("react");
+var StepsItemContext = (0, import_react64.createContext)(null);
 function useStepsItemContext() {
-  const context = (0, import_react63.useContext)(StepsItemContext);
+  const context = (0, import_react64.useContext)(StepsItemContext);
   if (context === null) {
     throw new Error("Steps.Item must be rendered inside a <Steps> component");
   }
@@ -4462,15 +4603,15 @@ function HorizontalSeparatorCell({
 }
 function collectStepsItems(children) {
   const result = [];
-  import_react64.Children.toArray(children).forEach((child) => {
-    if (!(0, import_react64.isValidElement)(child)) {
+  import_react65.Children.toArray(children).forEach((child) => {
+    if (!(0, import_react65.isValidElement)(child)) {
       return;
     }
     if (child.type === StepsItem) {
       result.push(child);
       return;
     }
-    if (child.type === import_react64.Fragment) {
+    if (child.type === import_react65.Fragment) {
       const fragmentChildren = child.props.children;
       result.push(...collectStepsItems(fragmentChildren));
     }
@@ -4487,12 +4628,12 @@ function StepsRoot({
   variant = "solid",
   "aria-label": ariaLabel
 }) {
-  const baseId = (0, import_react64.useId)();
-  const [internalStep] = (0, import_react64.useState)(defaultCurrentStep ?? 0);
+  const baseId = (0, import_react65.useId)();
+  const [internalStep] = (0, import_react65.useState)(defaultCurrentStep ?? 0);
   const resolvedCurrentStep = currentStep ?? internalStep;
-  const itemElements = (0, import_react64.useMemo)(() => collectStepsItems(children), [children]);
+  const itemElements = (0, import_react65.useMemo)(() => collectStepsItems(children), [children]);
   const stepsCount = itemElements.length;
-  const contextValue = (0, import_react64.useMemo)(
+  const contextValue = (0, import_react65.useMemo)(
     () => ({
       size,
       orientation,
@@ -4545,7 +4686,7 @@ Steps.Item = StepsItem;
 
 // src/tab/tab.tsx
 var import_clsx46 = require("clsx");
-var import_react65 = require("react");
+var import_react66 = require("react");
 
 // src/tab/tab-item.tsx
 var import_clsx45 = require("clsx");
@@ -4584,7 +4725,7 @@ var TabItem = ({ isSelected = false, isDisabled = false, icon, ...props }) => {
 // src/tab/tab.tsx
 var import_jsx_runtime68 = require("react/jsx-runtime");
 function Tab({ children, layout = "auto" }) {
-  const childrenCount = import_react65.Children.count(children);
+  const childrenCount = import_react66.Children.count(children);
   const containerStyle = layout === "equal" ? { gridTemplateColumns: `repeat(${childrenCount}, minmax(0,1fr))` } : {};
   const containerClasses = (0, import_clsx46.clsx)(
     "relative gap-4 px-6 before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-uiBorder01",
@@ -4691,13 +4832,13 @@ function Tag({ id, children, color, variant = "normal", size = "medium", isEdita
 
 // src/text-area/text-area.tsx
 var import_clsx53 = require("clsx");
-var import_react69 = require("react");
+var import_react70 = require("react");
 
 // src/text-area/text-area-context.tsx
-var import_react66 = require("react");
-var TextAreaCompoundContext = (0, import_react66.createContext)(null);
+var import_react67 = require("react");
+var TextAreaCompoundContext = (0, import_react67.createContext)(null);
 var useTextAreaCompoundContext = (componentName) => {
-  const context = (0, import_react66.useContext)(TextAreaCompoundContext);
+  const context = (0, import_react67.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`);
   }
@@ -4706,9 +4847,9 @@ var useTextAreaCompoundContext = (componentName) => {
 
 // src/text-area/text-area-error-message.tsx
 var import_clsx51 = require("clsx");
-var import_react67 = require("react");
+var import_react68 = require("react");
 var import_jsx_runtime74 = require("react/jsx-runtime");
-var TextAreaErrorMessage = (0, import_react67.forwardRef)(
+var TextAreaErrorMessage = (0, import_react68.forwardRef)(
   ({ "aria-live": ariaLive = "assertive", ...props }, ref) => {
     const { textAreaProps } = useTextAreaCompoundContext("TextArea.ErrorMessage");
     const typographyClass = textAreaProps.size === "large" ? "typography-label13regular" : "typography-label12regular";
@@ -4724,9 +4865,9 @@ TextAreaErrorMessage.displayName = "TextArea.ErrorMessage";
 
 // src/text-area/text-area-helper-message.tsx
 var import_clsx52 = require("clsx");
-var import_react68 = require("react");
+var import_react69 = require("react");
 var import_jsx_runtime75 = require("react/jsx-runtime");
-var TextAreaHelperMessage = (0, import_react68.forwardRef)((props, ref) => {
+var TextAreaHelperMessage = (0, import_react69.forwardRef)((props, ref) => {
   const { textAreaProps } = useTextAreaCompoundContext("TextArea.HelperMessage");
   const typographyClass = textAreaProps.size === "large" ? "typography-label13regular" : "typography-label12regular";
   const helperMessageClassName = (0, import_clsx52.clsx)(typographyClass, "text-text02");
@@ -4752,8 +4893,8 @@ function TextAreaInner({
   maxLength,
   ...props
 }, ref) {
-  const autoGeneratedId = (0, import_react69.useId)();
-  const textAreaPropsForContext = (0, import_react69.useMemo)(
+  const autoGeneratedId = (0, import_react70.useId)();
+  const textAreaPropsForContext = (0, import_react70.useMemo)(
     () => ({
       size,
       variant,
@@ -4761,7 +4902,7 @@ function TextAreaInner({
     }),
     [size, variant, isError]
   );
-  const contextValue = (0, import_react69.useMemo)(
+  const contextValue = (0, import_react70.useMemo)(
     () => ({
       textAreaProps: textAreaPropsForContext,
       forwardedRef: ref
@@ -4771,21 +4912,21 @@ function TextAreaInner({
   const helperMessageIds = [];
   const errorIds = [];
   const describedByBaseId = props.id ?? autoGeneratedId;
-  const enhancedChildren = import_react69.Children.map(children, (child) => {
-    if (!(0, import_react69.isValidElement)(child)) {
+  const enhancedChildren = import_react70.Children.map(children, (child) => {
+    if (!(0, import_react70.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_react69.cloneElement)(helperChild, { id: assignedId });
+      return (0, import_react70.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_react69.cloneElement)(errorChild, { id: assignedId });
+      return (0, import_react70.cloneElement)(errorChild, { id: assignedId });
     }
     return child;
   });
@@ -4887,7 +5028,7 @@ function TextAreaInner({
       children: counterLimit != null ? `${currentLength}/${counterLimit}\u6587\u5B57` : `${currentLength}\u6587\u5B57`
     }
   ) : null;
-  const stackedChildren = enhancedChildren == null ? [] : import_react69.Children.toArray(enhancedChildren);
+  const stackedChildren = enhancedChildren == null ? [] : import_react70.Children.toArray(enhancedChildren);
   const hasMessageChildren = stackedChildren.length > 0;
   const hasBottomContent = hasMessageChildren || counterElement != null;
   if (!hasBottomContent) {
@@ -4908,20 +5049,20 @@ var attachStatics2 = (component) => {
   component.displayName = "TextArea";
   return component;
 };
-var TextAreaBase = (0, import_react69.forwardRef)(function TextAreaBase2(props, ref) {
+var TextAreaBase = (0, import_react70.forwardRef)(function TextAreaBase2(props, ref) {
   return TextAreaInner(props, ref);
 });
 var TextArea = attachStatics2(TextAreaBase);
 
 // src/time-picker/time-picker.tsx
 var import_clsx55 = require("clsx");
-var import_react72 = require("react");
+var import_react73 = require("react");
 
 // src/time-picker/time-picker-context.tsx
-var import_react70 = require("react");
-var TimePickerCompoundContext = (0, import_react70.createContext)(null);
+var import_react71 = require("react");
+var TimePickerCompoundContext = (0, import_react71.createContext)(null);
 var useTimePickerCompoundContext = (componentName) => {
-  const context = (0, import_react70.useContext)(TimePickerCompoundContext);
+  const context = (0, import_react71.useContext)(TimePickerCompoundContext);
   if (context == null) {
     throw new Error(`${componentName} \u3092\u4F7F\u7528\u3059\u308B\u306B\u306F TimePicker \u306E\u5B50\u8981\u7D20\u3068\u3057\u3066\u914D\u7F6E\u3059\u308B\u5FC5\u8981\u304C\u3042\u308B\u3002`);
   }
@@ -4930,9 +5071,9 @@ var useTimePickerCompoundContext = (componentName) => {
 
 // src/time-picker/time-picker-error-message.tsx
 var import_clsx54 = require("clsx");
-var import_react71 = require("react");
+var import_react72 = require("react");
 var import_jsx_runtime77 = require("react/jsx-runtime");
-var TimePickerErrorMessage = (0, import_react71.forwardRef)(
+var TimePickerErrorMessage = (0, import_react72.forwardRef)(
   ({ "aria-live": ariaLive = "assertive", ...props }, ref) => {
     const { size, isError } = useTimePickerCompoundContext("TimePicker.ErrorMessage");
     const typographyClass = size === "large" ? "typography-label12regular" : "typography-label11regular";
@@ -5055,9 +5196,9 @@ var TimePicker = ({
   isError = false,
   children
 }) => {
-  const autoGeneratedId = (0, import_react72.useId)();
-  const hourOptions = (0, import_react72.useMemo)(() => generateHourOptions(minuteStep, minTime, maxTime), [minuteStep, minTime, maxTime]);
-  const minuteOptions = (0, import_react72.useMemo)(
+  const autoGeneratedId = (0, import_react73.useId)();
+  const hourOptions = (0, import_react73.useMemo)(() => generateHourOptions(minuteStep, minTime, maxTime), [minuteStep, minTime, maxTime]);
+  const minuteOptions = (0, import_react73.useMemo)(
     () => generateMinuteOptions(minuteStep, value.hour, minTime, maxTime),
     [minuteStep, value.hour, minTime, maxTime]
   );
@@ -5072,19 +5213,19 @@ var TimePicker = ({
     onChange({ hour: value.hour, minute: option != null ? Number(option.value) : null });
   };
   const errorIds = [];
-  const assignErrorIds = (nodes) => import_react72.Children.map(nodes, (child) => {
-    if (!(0, import_react72.isValidElement)(child)) {
+  const assignErrorIds = (nodes) => import_react73.Children.map(nodes, (child) => {
+    if (!(0, import_react73.isValidElement)(child)) {
       return child;
     }
-    if (child.type === import_react72.Fragment) {
+    if (child.type === import_react73.Fragment) {
       const fragmentChild = child;
-      return (0, import_react72.cloneElement)(fragmentChild, {}, assignErrorIds(fragmentChild.props.children));
+      return (0, import_react73.cloneElement)(fragmentChild, {}, assignErrorIds(fragmentChild.props.children));
     }
     if (child.type === TimePickerErrorMessage && isError) {
       const errorChild = child;
       const assignedId = errorChild.props.id ?? `${autoGeneratedId}-error-${errorIds.length + 1}`;
       errorIds.push(assignedId);
-      return (0, import_react72.cloneElement)(errorChild, { id: assignedId });
+      return (0, import_react73.cloneElement)(errorChild, { id: assignedId });
     }
     return child;
   });
@@ -5096,7 +5237,7 @@ var TimePicker = ({
     "typography-label16regular": size === "large"
   });
   const selectWidth = SELECT_WIDTH_BY_SIZE[size];
-  const contextValue = (0, import_react72.useMemo)(() => ({ size, isError }), [size, isError]);
+  const contextValue = (0, import_react73.useMemo)(() => ({ size, isError }), [size, isError]);
   const timeInputs = /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
       Select,
@@ -5132,7 +5273,7 @@ var TimePicker = ({
       }
     )
   ] });
-  const stackedChildren = enhancedChildren == null ? [] : import_react72.Children.toArray(enhancedChildren);
+  const stackedChildren = enhancedChildren == null ? [] : import_react73.Children.toArray(enhancedChildren);
   const hasMessageChildren = stackedChildren.length > 0;
   if (!hasMessageChildren) {
     return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(TimePickerCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "flex flex-col", children: timeInputs }) });
@@ -5146,40 +5287,88 @@ TimePicker.ErrorMessage = TimePickerErrorMessage;
 TimePicker.displayName = "TimePicker";
 
 // src/toast/toast.tsx
-var import_clsx56 = __toESM(require("clsx"));
-var import_react73 = require("react");
+var import_clsx56 = require("clsx");
+var import_react74 = require("react");
 var import_jsx_runtime79 = require("react/jsx-runtime");
 var CLOSE_TIME_MSEC = 5e3;
+var REMOVAL_FALLBACK_MSEC = 1e3;
 function Toast({
   state = "information",
   width = "auto",
+  // 既定 false は v1.22.0 までの互換維持のため据え置き（自動クローズしない既定では、安全弁により閉じるボタンが表示される）。
+  // 「自動クローズ・閉じるボタンなし」の新しい既定は ToastProvider が isAutoClose を明示的に渡すことで実現している。
   isAutoClose = false,
   isAnimation = false,
+  hasCloseButton = false,
+  description,
   children,
   onClickClose
 }) {
-  const [isRemoving, setIsRemoving] = (0, import_react73.useState)(false);
-  const handleClose = (0, import_react73.useCallback)(() => {
+  const [isRemoving, setIsRemoving] = (0, import_react74.useState)(false);
+  const onClickCloseRef = (0, import_react74.useRef)(onClickClose);
+  (0, import_react74.useEffect)(() => {
+    onClickCloseRef.current = onClickClose;
+  }, [onClickClose]);
+  const hasNotifiedCloseRef = (0, import_react74.useRef)(false);
+  const notifyClose = (0, import_react74.useCallback)(() => {
+    if (hasNotifiedCloseRef.current) {
+      return;
+    }
+    hasNotifiedCloseRef.current = true;
+    onClickCloseRef.current();
+  }, []);
+  const handleClose = (0, import_react74.useCallback)(() => {
     if (isAnimation) {
       setIsRemoving(true);
     } else {
-      onClickClose();
+      notifyClose();
     }
-  }, [isAnimation, onClickClose]);
-  const handleAnimationEnd = (e) => window.getComputedStyle(e.currentTarget).opacity === "0" && onClickClose();
-  const wrapperClasses = (0, import_clsx56.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_clsx56.default)("flex items-center", {
+  }, [isAnimation, notifyClose]);
+  const handleAnimationEnd = (e) => {
+    if (e.target !== e.currentTarget) {
+      return;
+    }
+    if (window.getComputedStyle(e.currentTarget).opacity === "0") {
+      notifyClose();
+    }
+  };
+  (0, import_react74.useEffect)(() => {
+    if (!isAutoClose) {
+      return;
+    }
+    const timer = window.setTimeout(() => {
+      if (isAnimation) {
+        setIsRemoving(true);
+      } else {
+        notifyClose();
+      }
+    }, CLOSE_TIME_MSEC);
+    return () => window.clearTimeout(timer);
+  }, [isAutoClose, isAnimation, notifyClose]);
+  (0, import_react74.useEffect)(() => {
+    if (!isRemoving) {
+      return;
+    }
+    const fallbackTimer = window.setTimeout(notifyClose, REMOVAL_FALLBACK_MSEC);
+    return () => window.clearTimeout(fallbackTimer);
+  }, [isRemoving, notifyClose]);
+  const isCloseButtonShown = hasCloseButton || !isAutoClose;
+  const wrapperClasses = (0, import_clsx56.clsx)(
+    "pointer-events-auto flex items-center gap-3 rounded border border-solid border-uiBorder01 bg-uiBackground01 p-4 shadow-floatingShadow",
+    {
+      ["animate-toast-in"]: isAnimation && !isRemoving,
+      ["animate-toast-out opacity-0"]: isAnimation && isRemoving
+    }
+  );
+  const iconClasses = (0, import_clsx56.clsx)("flex shrink-0 items-center", {
     "fill-supportSuccess": state === "success",
     "fill-supportError": state === "error",
     "fill-supportWarning": state === "warning",
     "fill-supportInfo": state === "information"
   });
-  const textClasses = (0, import_clsx56.default)("typography-body13regular flex-1 pt-[3px]", {
+  const titleClasses = (0, import_clsx56.clsx)("typography-body13regular break-words", {
     "text-supportError": state === "error",
-    "text-text01": state === "success" || state === "warning" || state === "information"
+    "text-text01": state !== "error"
   });
   const iconName = {
     success: "success-filled",
@@ -5187,48 +5376,82 @@ function Toast({
     warning: "warning",
     information: "information-filled"
   };
-  (0, import_react73.useEffect)(() => {
-    const timer = window.setTimeout(() => {
-      if (isAutoClose) {
-        setIsRemoving(true);
-      }
-    }, CLOSE_TIME_MSEC);
-    return () => window.clearTimeout(timer);
-  }, [isAutoClose]);
   return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: wrapperClasses, style: { width }, onAnimationEnd: handleAnimationEnd, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Icon, { name: iconName[state] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: textClasses, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(IconButton, { icon: "close", size: "medium", variant: "text", onClick: handleClose, isNoPadding: true })
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex min-w-0 flex-1 items-start gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Icon, { name: iconName[state] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-2 pt-[3px]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: titleClasses, children }),
+        description != null && description !== "" && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("p", { className: "typography-label12regular break-words text-text01", children: description })
+      ] })
+    ] }),
+    isCloseButtonShown && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "flex shrink-0 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(IconButton, { icon: "close", size: "medium", variant: "text", isNoPadding: true, "aria-label": "\u9589\u3058\u308B", onClick: handleClose }) })
   ] });
 }
 
 // src/toast/toast-provider.tsx
-var import_react74 = require("react");
+var import_react75 = require("react");
 var import_react_dom3 = require("react-dom");
 var import_jsx_runtime80 = require("react/jsx-runtime");
-var ToastContext = (0, import_react74.createContext)({});
-var ToastProvider = ({ children }) => {
-  const [isClientRender, setIsClientRender] = (0, import_react74.useState)(false);
-  const [toasts, setToasts] = (0, import_react74.useState)([]);
-  const addToast = (0, import_react74.useCallback)(({ message, state }) => {
-    setToasts((prev) => [...prev, { id: Math.trunc(Math.random() * 1e5), message, state }]);
-  }, []);
-  const removeToast = (0, import_react74.useCallback)((id) => {
+var ToastContext = (0, import_react75.createContext)({});
+var ToastProvider = ({ children, hasCloseButton = false }) => {
+  const [isClientRender, setIsClientRender] = (0, import_react75.useState)(false);
+  const [toasts, setToasts] = (0, import_react75.useState)([]);
+  const nextIdRef = (0, import_react75.useRef)(0);
+  const addToast = (0, import_react75.useCallback)(
+    (args) => {
+      nextIdRef.current += 1;
+      const id = nextIdRef.current;
+      setToasts((prev) => [
+        ...prev,
+        {
+          id,
+          message: args.message,
+          state: args.state,
+          description: args.description,
+          hasCloseButton: args.hasCloseButton ?? hasCloseButton,
+          isAutoClose: args.isAutoClose ?? true
+        }
+      ]);
+    },
+    [hasCloseButton]
+  );
+  const removeToast = (0, import_react75.useCallback)((id) => {
     setToasts((prev) => prev.filter((snackbar) => snackbar.id !== id));
   }, []);
-  (0, import_react74.useEffect)(() => {
+  (0, import_react75.useEffect)(() => {
     setIsClientRender(true);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(ToastContext.Provider, { value: { addToast, removeToast }, children: [
     children,
     isClientRender && (0, import_react_dom3.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "pointer-events-none fixed bottom-0 left-0 z-toast mb-4 ml-4 flex w-full flex-col-reverse gap-[16px]", children: toasts.map(({ id, message, state }) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Toast, { state, isAutoClose: true, isAnimation: true, onClickClose: () => removeToast(id), width: 475, children: message }, id)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+        "div",
+        {
+          ...{ [TOP_LAYER_ATTRIBUTE]: "" },
+          role: "region",
+          "aria-label": "\u901A\u77E5",
+          className: "pointer-events-none fixed bottom-0 left-0 z-toast mb-4 ml-4 flex w-full flex-col-reverse gap-4",
+          children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { role: toast.state === "error" ? "alert" : "status", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+            Toast,
+            {
+              state: toast.state,
+              description: toast.description,
+              hasCloseButton: toast.hasCloseButton,
+              isAutoClose: toast.isAutoClose,
+              isAnimation: true,
+              width: 475,
+              onClickClose: () => removeToast(toast.id),
+              children: toast.message
+            }
+          ) }, toast.id))
+        }
+      ),
       document.body
     )
   ] });
 };
 var useToast = () => {
-  return (0, import_react74.useContext)(ToastContext);
+  return (0, import_react75.useContext)(ToastContext);
 };
 
 // src/toggle/toggle.tsx
@@ -5288,7 +5511,7 @@ function Toggle({
 }
 
 // src/tooltip/tooltip.tsx
-var import_react76 = require("react");
+var import_react77 = require("react");
 var import_react_dom4 = require("react-dom");
 
 // src/tooltip/tooltip-content.tsx
@@ -5383,9 +5606,9 @@ var TooltipContent = ({
 };
 
 // src/tooltip/tooltip-hook.ts
-var import_react75 = require("react");
+var import_react76 = require("react");
 var useTooltip = () => {
-  const calculatePosition = (0, import_react75.useCallback)(
+  const calculatePosition = (0, import_react76.useCallback)(
     (args) => {
       const result = {
         maxWidth: "none",
@@ -5449,8 +5672,8 @@ function Tooltip({
   portalTarget
 }) {
   const { calculatePosition } = useTooltip();
-  const [isVisible, setIsVisible] = (0, import_react76.useState)(false);
-  const [tooltipPosition, setTooltipPosition] = (0, import_react76.useState)({
+  const [isVisible, setIsVisible] = (0, import_react77.useState)(false);
+  const [tooltipPosition, setTooltipPosition] = (0, import_react77.useState)({
     maxWidth: "none",
     width: "auto",
     left: "0px",
@@ -5459,8 +5682,8 @@ function Tooltip({
     translateX: "0",
     translateY: "0"
   });
-  const targetRef = (0, import_react76.useRef)(null);
-  const handleMouseOverWrapper = (0, import_react76.useCallback)(() => {
+  const targetRef = (0, import_react77.useRef)(null);
+  const handleMouseOverWrapper = (0, import_react77.useCallback)(() => {
     if (isDisabledHover) {
       return;
     }
@@ -5477,16 +5700,16 @@ function Tooltip({
     }
     setIsVisible(true);
   }, [isDisabledHover, calculatePosition, maxWidth, verticalPosition, horizontalAlign, size]);
-  const handleMouseOutWrapper = (0, import_react76.useCallback)(() => {
+  const handleMouseOutWrapper = (0, import_react77.useCallback)(() => {
     setIsVisible(false);
   }, []);
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.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_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     if (!isVisible) return;
     const updatePosition = () => {
       if (targetRef.current === null) return;