@zenkigen-inc/component-ui 1.23.1 → 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);
@@ -2970,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
@@ -3047,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",
     {
@@ -3057,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 })
   ] });
 }
@@ -3066,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,
@@ -3075,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));
     }
@@ -3089,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;
@@ -3137,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",
@@ -3160,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",
@@ -3258,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
@@ -3275,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);
@@ -3305,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"
@@ -3344,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";
@@ -3352,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",
@@ -3364,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) {
@@ -3396,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",
@@ -3436,7 +3510,7 @@ function Select({
       value: {
         size,
         variant,
-        placeholder,
+        isDeselectVisible,
         setIsOptionListOpen,
         selectedOption,
         onChange,
@@ -3469,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 }) }) })
       ] })
     }
   );
@@ -3557,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);
@@ -3595,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");
@@ -3604,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
 });
@@ -3617,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,
@@ -3635,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;
@@ -3662,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,
@@ -3675,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]
   );
@@ -3763,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`);
   }
@@ -3809,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`;
@@ -3907,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,
@@ -3948,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" },
@@ -3988,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,
@@ -4007,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");
   }
@@ -4025,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();
     }
@@ -4102,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,
@@ -4156,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");
@@ -4223,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) {
@@ -4232,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);
@@ -4299,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",
@@ -4311,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]);
@@ -4369,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>");
   }
@@ -4386,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");
   }
@@ -4529,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));
     }
@@ -4554,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,
@@ -4612,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");
@@ -4651,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",
@@ -4758,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`);
   }
@@ -4773,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";
@@ -4791,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");
@@ -4819,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,
@@ -4828,7 +4902,7 @@ function TextAreaInner({
     }),
     [size, variant, isError]
   );
-  const contextValue = (0, import_react69.useMemo)(
+  const contextValue = (0, import_react70.useMemo)(
     () => ({
       textAreaProps: textAreaPropsForContext,
       forwardedRef: ref
@@ -4838,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;
   });
@@ -4954,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) {
@@ -4975,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`);
   }
@@ -4997,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";
@@ -5122,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]
   );
@@ -5139,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;
   });
@@ -5163,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,
@@ -5199,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 }) });
@@ -5214,7 +5288,7 @@ TimePicker.displayName = "TimePicker";
 
 // src/toast/toast.tsx
 var import_clsx56 = require("clsx");
-var import_react73 = require("react");
+var import_react74 = require("react");
 var import_jsx_runtime79 = require("react/jsx-runtime");
 var CLOSE_TIME_MSEC = 5e3;
 var REMOVAL_FALLBACK_MSEC = 1e3;
@@ -5230,20 +5304,20 @@ function Toast({
   children,
   onClickClose
 }) {
-  const [isRemoving, setIsRemoving] = (0, import_react73.useState)(false);
-  const onClickCloseRef = (0, import_react73.useRef)(onClickClose);
-  (0, import_react73.useEffect)(() => {
+  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_react73.useRef)(false);
-  const notifyClose = (0, import_react73.useCallback)(() => {
+  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_react73.useCallback)(() => {
+  const handleClose = (0, import_react74.useCallback)(() => {
     if (isAnimation) {
       setIsRemoving(true);
     } else {
@@ -5258,7 +5332,7 @@ function Toast({
       notifyClose();
     }
   };
-  (0, import_react73.useEffect)(() => {
+  (0, import_react74.useEffect)(() => {
     if (!isAutoClose) {
       return;
     }
@@ -5271,7 +5345,7 @@ function Toast({
     }, CLOSE_TIME_MSEC);
     return () => window.clearTimeout(timer);
   }, [isAutoClose, isAnimation, notifyClose]);
-  (0, import_react73.useEffect)(() => {
+  (0, import_react74.useEffect)(() => {
     if (!isRemoving) {
       return;
     }
@@ -5315,15 +5389,15 @@ function Toast({
 }
 
 // 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 ToastContext = (0, import_react75.createContext)({});
 var ToastProvider = ({ children, hasCloseButton = false }) => {
-  const [isClientRender, setIsClientRender] = (0, import_react74.useState)(false);
-  const [toasts, setToasts] = (0, import_react74.useState)([]);
-  const nextIdRef = (0, import_react74.useRef)(0);
-  const addToast = (0, import_react74.useCallback)(
+  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;
@@ -5341,10 +5415,10 @@ var ToastProvider = ({ children, hasCloseButton = false }) => {
     },
     [hasCloseButton]
   );
-  const removeToast = (0, import_react74.useCallback)((id) => {
+  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: [
@@ -5353,6 +5427,7 @@ var ToastProvider = ({ children, hasCloseButton = false }) => {
       /* @__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",
@@ -5376,7 +5451,7 @@ var ToastProvider = ({ children, hasCloseButton = false }) => {
   ] });
 };
 var useToast = () => {
-  return (0, import_react74.useContext)(ToastContext);
+  return (0, import_react75.useContext)(ToastContext);
 };
 
 // src/toggle/toggle.tsx
@@ -5436,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
@@ -5531,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",
@@ -5597,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",
@@ -5607,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;
     }
@@ -5625,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;