@zenkigen-inc/component-ui 1.19.3 → 1.20.0

package/dist/index.js

@@ -35,6 +35,7 @@ __export(index_exports, {
   Button: () => Button,
   Checkbox: () => Checkbox,
   DatePicker: () => DatePicker,
+  Divider: () => Divider,
   Dropdown: () => Dropdown,
   EvaluationStar: () => EvaluationStar,
   FileInput: () => FileInput,
@@ -146,7 +147,7 @@ function Avatar({ size = "medium", ...props }) {
 // src/breadcrumb/breadcrumb-item.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var BreadcrumbItem = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "flex gap-2 after:content-['/'] last:after:content-none [&_a]:text-interactive02 [&_a]:hover:underline", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "flex gap-2 after:content-['/'] last:after:content-none [&_a]:text-interactive02 [&_a]:hover:underline [&_a]:active:text-activeLink02 [&_a]:active:underline", children });
 };
 
 // src/breadcrumb/breadcrumb.tsx
@@ -1034,6 +1035,12 @@ var DatePicker = ({
 DatePicker.ErrorMessage = DatePickerErrorMessage;
 DatePicker.displayName = "DatePicker";
 
+// src/divider/divider.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function Divider() {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("hr", { className: "h-px w-full border-0 bg-uiBorder01" });
+}
+
 // src/dropdown/dropdown.tsx
 var import_component_theme8 = require("@zenkigen-inc/component-theme");
 var import_clsx13 = __toESM(require("clsx"));
@@ -1046,7 +1053,11 @@ var useOutsideClick = (ref, handler, enabled = true) => {
   (0, import_react11.useEffect)(() => {
     const listener = (event) => {
       const element = ref?.current;
-      if (element == null || Boolean(element.contains(event?.target ?? null))) {
+      const target = event.target;
+      if (target instanceof Node && target.isConnected === false) {
+        return;
+      }
+      if (element == null || Boolean(element.contains(target ?? null))) {
         return;
       }
       handler(event);
@@ -1072,7 +1083,7 @@ var DropdownContext = (0, import_react12.createContext)({
 var import_component_theme7 = require("@zenkigen-inc/component-theme");
 var import_clsx11 = __toESM(require("clsx"));
 var import_react13 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function DropdownItem({ children, color = "gray", onClick }) {
   const { setIsVisible } = (0, import_react13.useContext)(DropdownContext);
   const handleClickItem = (event) => {
@@ -1087,13 +1098,13 @@ function DropdownItem({ children, color = "gray", onClick }) {
       "fill-supportDanger text-supportDanger": color === "red"
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("li", { className: "flex w-full items-center", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { className: itemClasses, type: "button", onClick: handleClickItem, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("li", { className: "flex w-full items-center", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { className: itemClasses, type: "button", onClick: handleClickItem, children }) });
 }
 
 // src/dropdown/dropdown-menu.tsx
 var import_clsx12 = __toESM(require("clsx"));
 var import_react14 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function DropdownMenu({
   children,
   maxHeight,
@@ -1110,7 +1121,7 @@ function DropdownMenu({
     "right-0": horizontalAlign === "right",
     "left-auto": horizontalAlign === "center"
   });
-  return isVisible && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return isVisible && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "ul",
     {
       className: wrapperClasses,
@@ -1125,7 +1136,7 @@ function DropdownMenu({
 }
 
 // src/dropdown/dropdown.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function Dropdown({
   children,
   target,
@@ -1193,12 +1204,12 @@ function Dropdown({
     "typography-label14regular": size === "small" || size === "medium",
     "typography-label16regular": size === "large"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     DropdownContext.Provider,
     {
       value: { isVisible, setIsVisible, isDisabled, targetDimensions, variant, portalTargetRef },
-      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { ref: targetRef, className: wrapperClasses, children: [
-        target ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { ref: targetRef, className: wrapperClasses, children: [
+        target ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
           "button",
           {
             type: "button",
@@ -1208,7 +1219,7 @@ function Dropdown({
             disabled: isDisabled,
             children: [
               target,
-              !isArrowHidden && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "ml-2 flex items-center fill-icon01", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              !isArrowHidden && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "ml-2 flex items-center fill-icon01", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 Icon,
                 {
                   name: isVisible ? "angle-small-up" : "angle-small-down",
@@ -1217,10 +1228,10 @@ function Dropdown({
               ) })
             ]
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("button", { type: "button", title, className: buttonClasses, onClick: handleToggle, disabled: isDisabled, children: [
-          icon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "mr-1 flex", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: icon, size: size === "large" ? "medium" : "small" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: labelClasses, children: label }),
-          !isArrowHidden && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: isVisible ? "angle-small-up" : "angle-small-down", size: "small" }) })
+        ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("button", { type: "button", title, className: buttonClasses, onClick: handleToggle, disabled: isDisabled, children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "mr-1 flex", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: icon, size: size === "large" ? "medium" : "small" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: labelClasses, children: label }),
+          !isArrowHidden && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: isVisible ? "angle-small-up" : "angle-small-down", size: "small" }) })
         ] }),
         !portalTargetRef ? children : portalTargetRef != null && portalTargetRef.current && (0, import_react_dom.createPortal)(children, portalTargetRef.current)
       ] })
@@ -1235,7 +1246,7 @@ var import_component_icons2 = require("@zenkigen-inc/component-icons");
 var import_component_theme9 = require("@zenkigen-inc/component-theme");
 var import_clsx14 = __toESM(require("clsx"));
 var import_react16 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function EvaluationStar({ value, isEditable = false, onChangeRating, size = "medium" }) {
   const maxRating = 5;
   const [currentRating, setCurrentRating] = (0, import_react16.useState)(value);
@@ -1254,26 +1265,26 @@ function EvaluationStar({ value, isEditable = false, onChangeRating, size = "med
   const renderStar = (rating) => {
     const color = rating <= currentRating ? "fill-yellow-yellow50" : "fill-icon03";
     const IconComponent = import_component_icons2.iconElements["star-filled"];
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "button",
       {
         type: "button",
         onClick: () => handleChangeRating(rating),
         className: (0, import_clsx14.default)(color, starClasses),
         disabled: !isEditable,
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(IconComponent, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(IconComponent, {})
       },
       rating
     );
   };
   const ratingStars = Array.from({ length: maxRating }, (_, index) => renderStar(index + 1));
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "flex flex-row", children: ratingStars });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "flex flex-row", children: ratingStars });
 }
 
 // src/file-input/file-input.tsx
 var import_clsx15 = require("clsx");
 var import_react17 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var ERROR_TYPES = {
   SIZE_TOO_LARGE: "SIZE_TOO_LARGE",
   UNSUPPORTED_FORMAT: "UNSUPPORTED_FORMAT"
@@ -1408,9 +1419,9 @@ var FileInput = (0, import_react17.forwardRef)(
       {
         "border-uiBorder03 bg-white text-text01": !isDisabled && !isDragOver && !hasErrors,
         "border-activeInput bg-activeInput/5": !isDisabled && isDragOver && !hasErrors,
-        "border-supportDanger bg-white": hasErrors && !isDisabled,
+        "border-supportDanger bg-uiBackground01": hasErrors && !isDisabled,
         "cursor-pointer hover:bg-hover02 active:bg-active02": !isDisabled,
-        "hover:bg-uiBackgroundError active:bg-red-red20": !isDisabled && hasErrors,
+        "hover:bg-hoverUiError active:bg-activeUiError": !isDisabled && hasErrors,
         "border-disabled01 bg-disabled02 text-textPlaceholder cursor-not-allowed": isDisabled
       }
     );
@@ -1449,8 +1460,8 @@ var FileInput = (0, import_react17.forwardRef)(
       return normalized.join(", ");
     })();
     if (variant === "button") {
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: hasErrors ? "flex-1" : "min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: hasErrors ? "flex-1" : "min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           InternalButton,
           {
             size,
@@ -1458,14 +1469,14 @@ var FileInput = (0, import_react17.forwardRef)(
             isDisabled,
             width: "100%",
             onClick: handleButtonClick,
-            before: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { name: "upload", size: "small" }),
-            after: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children: selectedFile ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: (0, import_clsx15.clsx)("typography-label12regular truncate", !isDisabled && "text-text01"), children: selectedFile.name }) : "" }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "truncate", children: "\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E" })
+            before: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "upload", size: "small" }),
+            after: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children: selectedFile ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: (0, import_clsx15.clsx)("typography-label12regular truncate", !isDisabled && "text-text01"), children: selectedFile.name }) : "" }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "truncate", children: "\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E" })
           }
         ) }),
-        selectedFile && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(IconButton, { variant: "text", icon: "close", size: "small", onClick: handleClear }) }),
-        hasErrors && hasErrorMessages && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { id: errorId, "data-testid": "error-messages", className: "typography-label12regular text-supportError", children: errorMessages.map((message, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "break-all", children: message }, index)) }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        selectedFile && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(IconButton, { variant: "text", icon: "close", size: "small", onClick: handleClear }) }),
+        hasErrors && hasErrorMessages && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { id: errorId, "data-testid": "error-messages", className: "typography-label12regular text-supportError", children: errorMessages.map((message, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "break-all", children: message }, index)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "input",
           {
             id: inputId,
@@ -1480,8 +1491,8 @@ var FileInput = (0, import_react17.forwardRef)(
         )
       ] });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex min-w-[320px] flex-col gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex min-w-[320px] flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
         "div",
         {
           className: dropzoneClasses,
@@ -1501,25 +1512,25 @@ var FileInput = (0, import_react17.forwardRef)(
           "aria-disabled": isDisabled,
           ...hasErrors && hasErrorMessages && { "aria-describedby": errorId },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { name: "upload-document", size: "large", color: isDisabled ? "icon03" : "icon01" }),
-            !selectedFile && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "typography-body13regular select-none", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "upload-document", size: "large", color: isDisabled ? "icon03" : "icon01" }),
+            !selectedFile && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "typography-body13regular select-none", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
               "\u3053\u3053\u306B\u30D5\u30A1\u30A4\u30EB\u3092\u30C9\u30ED\u30C3\u30D7\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("br", {}),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("br", {}),
               "\u307E\u305F\u306F\u3001",
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: (0, import_clsx15.clsx)(!isDisabled ? "text-link01" : ""), children: "\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E" }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: (0, import_clsx15.clsx)(!isDisabled ? "text-link01" : ""), children: "\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E" }),
               "\u3057\u3066\u304F\u3060\u3055\u3044\u3002"
             ] }) }) }),
-            !selectedFile && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col gap-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: (0, import_clsx15.clsx)("typography-label11regular", isDisabled ? "text-textPlaceholder" : "text-text02"), children: "\u5BFE\u5FDC\u5F62\u5F0F" }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: (0, import_clsx15.clsx)("typography-body12regular", isDisabled ? "text-textPlaceholder" : "text-text01"), children: acceptLabel }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: (0, import_clsx15.clsx)("typography-label11regular", isDisabled ? "text-textPlaceholder" : "text-text02"), children: "\u30B5\u30A4\u30BA" }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: (0, import_clsx15.clsx)("typography-body12regular", isDisabled ? "text-textPlaceholder" : "text-text01"), children: maxSizeLabel })
+            !selectedFile && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: (0, import_clsx15.clsx)("typography-label11regular", isDisabled ? "text-textPlaceholder" : "text-text02"), children: "\u5BFE\u5FDC\u5F62\u5F0F" }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: (0, import_clsx15.clsx)("typography-body12regular", isDisabled ? "text-textPlaceholder" : "text-text01"), children: acceptLabel }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: (0, import_clsx15.clsx)("typography-label11regular", isDisabled ? "text-textPlaceholder" : "text-text02"), children: "\u30B5\u30A4\u30BA" }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: (0, import_clsx15.clsx)("typography-body12regular", isDisabled ? "text-textPlaceholder" : "text-text01"), children: maxSizeLabel })
             ] }),
-            selectedFile && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "mt-2 flex flex-col items-center gap-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "typography-label11regular text-text02", children: "\u30D5\u30A1\u30A4\u30EB\u540D" }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "typography-label14regular", children: selectedFile.name }),
-                !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            selectedFile && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "mt-2 flex flex-col items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "typography-label11regular text-text02", children: "\u30D5\u30A1\u30A4\u30EB\u540D" }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "typography-label14regular", children: selectedFile.name }),
+                !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   IconButton,
                   {
                     variant: "text",
@@ -1533,7 +1544,7 @@ var FileInput = (0, import_react17.forwardRef)(
                 )
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               "input",
               {
                 id: inputId,
@@ -1549,13 +1560,13 @@ var FileInput = (0, import_react17.forwardRef)(
           ]
         }
       ),
-      hasErrors && hasErrorMessages && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      hasErrors && hasErrorMessages && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "div",
         {
           id: errorId,
           "data-testid": "error-messages",
           className: "typography-body13regular flex flex-col text-supportDanger",
-          children: errorMessages.map((message, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: message }, index))
+          children: errorMessages.map((message, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: message }, index))
         }
       )
     ] });
@@ -1566,14 +1577,14 @@ FileInput.displayName = "FileInput";
 // src/heading/heading.tsx
 var import_component_theme10 = require("@zenkigen-inc/component-theme");
 var import_clsx16 = require("clsx");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function Heading(props) {
   const TagName = `h${props.level}`;
   const classes = (0, import_clsx16.clsx)(`flex items-center text-text01`, import_component_theme10.typography.heading[TagName], {
     "gap-2": props.level === 1,
     "gap-1": props.level > 1
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(TagName, { className: classes, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(TagName, { className: classes, children: [
     props.before,
     props.children,
     props.after
@@ -1652,7 +1663,7 @@ var useRovingFocus = ({
 
 // src/loading/loading.tsx
 var import_clsx17 = __toESM(require("clsx"));
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function Loading({ size = "medium", position = "fixed", height = "100%" }) {
   const wrapperClasses = (0, import_clsx17.default)(position, "left-0 top-0 z-20 flex w-full items-center justify-center");
   const svgClasses = (0, import_clsx17.default)({
@@ -1660,8 +1671,8 @@ function Loading({ size = "medium", position = "fixed", height = "100%" }) {
     "h-8 w-8": size === "medium",
     "h-16 w-16": size === "large"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: wrapperClasses, style: { height }, children: [
-    size === "small" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { className: svgClasses, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: wrapperClasses, style: { height }, children: [
+    size === "small" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("svg", { className: svgClasses, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "circle",
       {
         className: "origin-center animate-circular-small-move stroke-interactive01",
@@ -1673,7 +1684,7 @@ function Loading({ size = "medium", position = "fixed", height = "100%" }) {
         fill: "none"
       }
     ) }),
-    size === "medium" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { className: svgClasses, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    size === "medium" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("svg", { className: svgClasses, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "circle",
       {
         className: "origin-center animate-circular-medium-move stroke-interactive01",
@@ -1685,7 +1696,7 @@ function Loading({ size = "medium", position = "fixed", height = "100%" }) {
         fill: "none"
       }
     ) }),
-    size === "large" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { className: svgClasses, viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    size === "large" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("svg", { className: svgClasses, viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "circle",
       {
         className: "origin-center animate-circular-large-move stroke-interactive01",
@@ -1752,9 +1763,9 @@ function restoreProperty(element, property, value) {
 }
 
 // src/modal/modal-body.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function ModalBody({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "overflow-y-auto", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "overflow-y-auto", children });
 }
 
 // src/modal/modal-context.ts
@@ -1765,18 +1776,18 @@ var ModalContext = (0, import_react20.createContext)({
 
 // src/modal/modal-footer.tsx
 var import_clsx18 = __toESM(require("clsx"));
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function ModalFooter({ children, isNoBorder = false }) {
   const wrapperClasses = (0, import_clsx18.default)("flex w-full shrink-0 items-center rounded-b-lg px-6 py-4", {
     "border-t-[1px] border-uiBorder01": !isNoBorder
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: wrapperClasses, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: wrapperClasses, children });
 }
 
 // src/modal/modal-header.tsx
 var import_clsx19 = __toESM(require("clsx"));
 var import_react21 = require("react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function ModalHeader({ children, isNoBorder = false }) {
   const { onClose } = (0, import_react21.useContext)(ModalContext);
   const headerClasses = (0, import_clsx19.default)(
@@ -1787,14 +1798,14 @@ function ModalHeader({ children, isNoBorder = false }) {
       "h-12": onClose
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: headerClasses, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { children }),
-    onClose && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(IconButton, { icon: "close", size: "small", variant: "text", onClick: onClose })
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: headerClasses, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children }),
+    onClose && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconButton, { icon: "close", size: "small", variant: "text", onClick: onClose })
   ] });
 }
 
 // src/modal/modal.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var LIMIT_WIDTH = 320;
 var LIMIT_HEIGHT = 184;
 function Modal({
@@ -1812,10 +1823,10 @@ function Modal({
   (0, import_react22.useEffect)(() => {
     setIsMounted(true);
   }, []);
-  return isMounted && isOpen ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BodyScrollLock, {}),
+  return isMounted && isOpen ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(BodyScrollLock, {}),
     (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ModalContext.Provider, { value: { onClose }, children: /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ModalContext.Provider, { value: { onClose }, children: /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.jsx)(
         "div",
         {
           role: "dialog",
@@ -1835,7 +1846,7 @@ Modal.Footer = ModalFooter;
 
 // src/notification-inline/notification-inline.tsx
 var import_clsx20 = require("clsx");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function NotificationInline({ state = "default", size = "medium", ...props }) {
   const wrapperClasses = (0, import_clsx20.clsx)("typography-body13regular flex items-center gap-1 rounded text-text01", {
     "bg-uiBackgroundError": state === "attention",
@@ -1862,10 +1873,10 @@ function NotificationInline({ state = "default", size = "medium", ...props }) {
     small: "small",
     medium: "medium"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: wrapperClasses, children: [
-    state !== "default" && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { name: iconName[state], size: iconSize[size] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "flex-1", children: props.children }),
-    props.showClose === true && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(IconButton, { icon: "close", size: "small", variant: "text", onClick: props.onClickClose }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: wrapperClasses, children: [
+    state !== "default" && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { name: iconName[state], size: iconSize[size] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "flex-1", children: props.children }),
+    props.showClose === true && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(IconButton, { icon: "close", size: "small", variant: "text", onClick: props.onClickClose }) })
   ] });
 }
 
@@ -1880,7 +1891,7 @@ var PaginationContext = (0, import_react23.createContext)({
 });
 
 // src/pagination/pagination-button.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function PaginationButton({ page, onClick }) {
   const { currentPage } = (0, import_react24.useContext)(PaginationContext);
   const buttonClasses = (0, import_clsx21.clsx)(
@@ -1891,11 +1902,11 @@ function PaginationButton({ page, onClick }) {
     { "border border-uiBorder02": page === currentPage },
     { "border-transparent": page !== currentPage }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("button", { type: "button", className: buttonClasses, onClick: () => onClick(page), children: page });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { type: "button", className: buttonClasses, onClick: () => onClick(page), children: page });
 }
 
 // src/pagination/pagination.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var START_PAGE = 1;
 function Pagination({ currentPage, totalPage, sideNumPagesToShow = 3, onClick }) {
   if (totalPage < START_PAGE) {
@@ -1931,14 +1942,14 @@ function Pagination({ currentPage, totalPage, sideNumPagesToShow = 3, onClick })
   const hasHeadEllipsis = firstPageInList !== null && firstPageInList > START_PAGE + 1;
   const hasTailEllipsis = lastPageInList !== null && lastPageInList < totalPage - 1;
   const hasLastPageButton = totalPage > START_PAGE;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     PaginationContext.Provider,
     {
       value: {
         currentPage: clampedCurrentPage
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("ul", { className: "flex gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("li", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("ul", { className: "flex gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("li", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           IconButton,
           {
             isDisabled: isFirstPage,
@@ -1948,12 +1959,12 @@ function Pagination({ currentPage, totalPage, sideNumPagesToShow = 3, onClick })
             onClick: () => onClick(Math.max(START_PAGE, clampedCurrentPage - 1))
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PaginationButton, { onClick: () => onClick(START_PAGE), page: START_PAGE }) }),
-        hasHeadEllipsis && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("li", { className: threeDotIconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { name: "more", size: "small" }) }),
-        pageList.map((page, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PaginationButton, { onClick: () => onClick(page), page }) }, index)),
-        hasTailEllipsis && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("li", { className: threeDotIconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { name: "more", size: "small" }) }),
-        hasLastPageButton && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PaginationButton, { onClick: () => onClick(totalPage), page: totalPage }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("li", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PaginationButton, { onClick: () => onClick(START_PAGE), page: START_PAGE }) }),
+        hasHeadEllipsis && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("li", { className: threeDotIconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { name: "more", size: "small" }) }),
+        pageList.map((page, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PaginationButton, { onClick: () => onClick(page), page }) }, index)),
+        hasTailEllipsis && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("li", { className: threeDotIconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { name: "more", size: "small" }) }),
+        hasLastPageButton && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PaginationButton, { onClick: () => onClick(totalPage), page: totalPage }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("li", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           IconButton,
           {
             isDisabled: isLastPage,
@@ -1987,7 +1998,7 @@ var SelectContext = (0, import_react25.createContext)({
 var import_component_theme11 = require("@zenkigen-inc/component-theme");
 var import_clsx22 = __toESM(require("clsx"));
 var import_react26 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function SelectItem({ option }) {
   const { setIsOptionListOpen, selectedOption, onChange, isError } = (0, import_react26.useContext)(SelectContext);
   const handleClickItem = (option2) => {
@@ -2004,10 +2015,10 @@ function SelectItem({ option }) {
       "pr-10": option.id !== selectedOption?.id
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("li", { className: "flex w-full items-center", "data-id": option.id, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("button", { className: itemClasses, type: "button", onClick: () => handleClickItem(option), children: [
-    option.icon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { name: option.icon, size: "small" }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "ml-1 flex-1 truncate text-left", children: option.label }),
-    option.id === selectedOption?.id && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "ml-2 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { name: "check", size: "small" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("li", { className: "flex w-full items-center", "data-id": option.id, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("button", { className: itemClasses, type: "button", onClick: () => handleClickItem(option), children: [
+    option.icon && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { name: option.icon, size: "small" }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "ml-1 flex-1 truncate text-left", children: option.label }),
+    option.id === selectedOption?.id && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "ml-2 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { name: "check", size: "small" }) })
   ] }) }, option.id);
 }
 
@@ -2015,7 +2026,7 @@ function SelectItem({ option }) {
 var import_component_theme12 = require("@zenkigen-inc/component-theme");
 var import_clsx23 = __toESM(require("clsx"));
 var import_react27 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var SelectList = (0, import_react27.forwardRef)(({ children, maxHeight }, ref) => {
   const { selectedOption, setIsOptionListOpen, variant, placeholder, onChange, floatingStyles, floatingRef } = (0, import_react27.useContext)(SelectContext);
   const handleClickDeselect = () => {
@@ -2047,15 +2058,15 @@ var SelectList = (0, import_react27.forwardRef)(({ children, maxHeight }, ref) =
     "typography-label14regular flex h-8 w-full items-center px-3 text-interactive02 hover:bg-hover02 active:bg-active02",
     import_component_theme12.focusVisible.inset
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("ul", { className: listClasses, style: { maxHeight, ...floatingStyles }, ref, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("ul", { className: listClasses, style: { maxHeight, ...floatingStyles }, ref, children: [
     children,
-    placeholder != null && selectedOption !== null && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { className: deselectButtonClasses, type: "button", onClick: handleClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
+    placeholder != null && selectedOption !== null && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { className: deselectButtonClasses, type: "button", onClick: handleClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
   ] });
 });
 SelectList.displayName = "SelectList";
 
 // src/select/select.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var FLOATING_OFFSET = 4;
 function Select({
   children,
@@ -2127,7 +2138,7 @@ function Select({
     "typography-label14regular": size === "small" || size === "medium",
     "typography-label16regular": size === "large"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     SelectContext.Provider,
     {
       value: {
@@ -2141,8 +2152,8 @@ function Select({
         floatingStyles,
         floatingRef: refs.floating
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: wrapperClasses, style: { width, maxWidth }, ref: targetRef, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: wrapperClasses, style: { width, maxWidth }, ref: targetRef, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
           "button",
           {
             ref: refs.setReference,
@@ -2151,9 +2162,9 @@ function Select({
             onClick: handleClickToggle,
             disabled: isDisabled,
             children: [
-              selectedOption?.icon ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mr-1 flex", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { name: selectedOption.icon, size: size === "large" ? "medium" : "small" }) }) : placeholder != null && placeholderIcon && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "mr-1 flex", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { name: placeholderIcon, size: size === "large" ? "medium" : "small" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: labelClasses, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "truncate", children: selectedOption ? selectedOption.label : placeholder != null && placeholder }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              selectedOption?.icon ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mr-1 flex", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { name: selectedOption.icon, size: size === "large" ? "medium" : "small" }) }) : placeholder != null && placeholderIcon && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mr-1 flex", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { name: placeholderIcon, size: size === "large" ? "medium" : "small" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: labelClasses, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "truncate", children: selectedOption ? selectedOption.label : placeholder != null && placeholder }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                 Icon,
                 {
                   name: isOptionListOpen ? "angle-small-up" : "angle-small-down",
@@ -2163,7 +2174,7 @@ function Select({
             ]
           }
         ),
-        isOptionListOpen && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react28.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "relative z-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SelectList, { ref: refs.setFloating, maxHeight: optionListMaxHeight, children }) }) })
+        isOptionListOpen && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react28.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "relative z-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectList, { ref: refs.setFloating, maxHeight: optionListMaxHeight, children }) }) })
       ] })
     }
   );
@@ -2171,7 +2182,7 @@ function Select({
 Select.Option = SelectItem;
 
 // src/pagination-select/pagination-select.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function PaginationSelect({
   totalSize,
   currentPage,
@@ -2194,20 +2205,20 @@ function PaginationSelect({
   });
   const minCount = totalSize ? (currentPage - 1) * sizePerPage + 1 : 0;
   const maxCount = currentPage * sizePerPage > totalSize ? totalSize : currentPage * sizePerPage;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("nav", { "aria-label": "pagination", className: "flex items-center gap-x-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-x-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "typography-label14regular flex gap-1 text-text01", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: " ", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("nav", { "aria-label": "pagination", className: "flex items-center gap-x-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center gap-x-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "typography-label14regular flex gap-1 text-text01", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: " ", children: [
           minCount > 0 && `${minCount} - `,
           maxCount
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { children: [
           "/ ",
           totalSize
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: countLabel })
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: countLabel })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         Select,
         {
           size: "medium",
@@ -2216,17 +2227,17 @@ function PaginationSelect({
           optionListMaxHeight,
           onChange: (option) => option && onChange(Number(option.value)),
           isDisabled: pageMax === 0,
-          children: optionsList.map((option) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Select.Option, { option }, option.id))
+          children: optionsList.map((option) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Select.Option, { option }, option.id))
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "typography-label14regular text-text02", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "typography-label14regular text-text02", children: [
         "/ ",
         pageMax,
         pageLabel
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         IconButton,
         {
           variant: "text",
@@ -2236,7 +2247,7 @@ function PaginationSelect({
           onClick: onClickPrevButton
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         IconButton,
         {
           variant: "text",
@@ -2271,17 +2282,17 @@ var useTextInputCompoundContext = (componentName) => {
 // src/text-input/text-input-error-message.tsx
 var import_clsx25 = require("clsx");
 var import_react31 = require("react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var TextInputErrorMessage = (0, import_react31.forwardRef)(
   ({ "aria-live": ariaLive = "assertive", ...props }, ref) => {
     const { inputProps } = useTextInputCompoundContext("TextInput.ErrorMessage");
-    const typographyClass = inputProps.size === "large" ? "typography-label12regular" : "typography-label11regular";
+    const typographyClass = inputProps.size === "large" ? "typography-label13regular" : "typography-label12regular";
     const shouldRender = inputProps.isError === true;
     if (!shouldRender) {
       return null;
     }
     const errorMessageClassName = (0, import_clsx25.clsx)(typographyClass, "text-supportError");
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { ref, className: errorMessageClassName, "aria-live": ariaLive, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ref, className: errorMessageClassName, "aria-live": ariaLive, ...props });
   }
 );
 TextInputErrorMessage.displayName = "TextInput.ErrorMessage";
@@ -2289,17 +2300,17 @@ TextInputErrorMessage.displayName = "TextInput.ErrorMessage";
 // src/text-input/text-input-helper-message.tsx
 var import_clsx26 = require("clsx");
 var import_react32 = require("react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var TextInputHelperMessage = (0, import_react32.forwardRef)((props, ref) => {
   const { inputProps } = useTextInputCompoundContext("TextInput.HelperMessage");
-  const typographyClass = inputProps.size === "large" ? "typography-label12regular" : "typography-label11regular";
+  const typographyClass = inputProps.size === "large" ? "typography-label13regular" : "typography-label12regular";
   const helperMessageClassName = (0, import_clsx26.clsx)(typographyClass, "text-text02");
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ref, className: helperMessageClassName, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { ref, className: helperMessageClassName, ...props });
 });
 TextInputHelperMessage.displayName = "TextInput.HelperMessage";
 
 // src/text-input/text-input.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function TextInputInner({
   size = "medium",
   isError = false,
@@ -2379,24 +2390,24 @@ function TextInputInner({
     "pr-2": size === "medium" && hasTrailingElement,
     "pr-3": size === "large" && hasTrailingElement
   });
-  const inputClasses = (0, import_clsx27.clsx)("flex-1 outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder", {
+  const inputClasses = (0, import_clsx27.clsx)("flex-1 outline-none placeholder:text-textPlaceholder disabled:text-textPlaceholder", {
     ["typography-label14regular min-h-8 px-2"]: size === "medium",
     ["typography-label16regular min-h-10 px-3"]: size === "large",
     "text-text01": !isError,
     "text-supportError": isError,
     "pr-0": hasTrailingElement
   });
-  const inputElement = /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: inputWrapClasses, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("input", { ref, size: 1, className: inputClasses, ...mergedInputProps }),
+  const inputElement = /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: inputWrapClasses, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("input", { ref, size: 1, className: inputClasses, ...mergedInputProps }),
     after,
-    isShowClearButton && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(IconButton, { variant: "text", icon: "close", size: "small", onClick: onClickClearButton })
+    isShowClearButton && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(IconButton, { variant: "text", icon: "close", size: "small", onClick: onClickClearButton })
   ] });
   const stackedChildren = enhancedChildren == null ? [] : import_react33.Children.toArray(enhancedChildren);
   const hasMessageChildren = stackedChildren.length > 0;
   if (!hasMessageChildren) {
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TextInputCompoundContext.Provider, { value: contextValue, children: inputElement });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TextInputCompoundContext.Provider, { value: contextValue, children: inputElement });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TextInputCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col gap-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TextInputCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col gap-2", children: [
     inputElement,
     stackedChildren
   ] }) });
@@ -2419,14 +2430,14 @@ var TextInput = attachStatics(TextInputPublic);
 var InternalTextInput = attachStatics(InternalTextInputBase);
 
 // src/password-input/password-input.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var PasswordInputBase = (0, import_react34.forwardRef)(function PasswordInput({ disabled = false, children, ...props }, ref) {
   const [isPasswordVisible, setIsPasswordVisible] = (0, import_react34.useState)(false);
   const { className: _className, ...textInputProps } = props;
   const handlePasswordVisibilityToggle = () => {
     setIsPasswordVisible((prev) => !prev);
   };
-  const passwordToggleButton = /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  const passwordToggleButton = /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     IconButton,
     {
       variant: "text",
@@ -2437,7 +2448,7 @@ var PasswordInputBase = (0, import_react34.forwardRef)(function PasswordInput({
       "aria-label": isPasswordVisible === true ? "\u30D1\u30B9\u30EF\u30FC\u30C9\u3092\u975E\u8868\u793A\u306B\u3059\u308B" : "\u30D1\u30B9\u30EF\u30FC\u30C9\u3092\u8868\u793A\u3059\u308B"
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     InternalTextInput,
     {
       ref,
@@ -2459,9 +2470,9 @@ var PasswordInput2 = Object.assign(PasswordInputBase, {
 var import_react37 = require("react");
 
 // src/popup/popup-body.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function PopupBody({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "overflow-y-auto", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "overflow-y-auto", children });
 }
 
 // src/popup/popup-context.ts
@@ -2472,27 +2483,27 @@ var PopupContext = (0, import_react35.createContext)({
 });
 
 // src/popup/popup-footer.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function PopupFooter({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex w-full shrink-0 items-center rounded-b-lg px-6 py-3", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex w-full shrink-0 items-center rounded-b-lg px-6 py-3", children });
 }
 
 // src/popup/popup-header.tsx
 var import_react36 = require("react");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function PopupHeader({ children, before }) {
   const { onClose } = (0, import_react36.useContext)(PopupContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime41.jsxs)("div", { className: "flex items-center gap-1", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "typography-h5 flex h-12 w-full shrink-0 items-start justify-between rounded-t-lg px-6 pt-3 text-text01", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-1", children: [
       before,
       children
     ] }),
-    onClose && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(IconButton, { icon: "close", size: "small", variant: "text", onClick: onClose })
+    onClose && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(IconButton, { icon: "close", size: "small", variant: "text", onClick: onClose })
   ] });
 }
 
 // src/popup/popup.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var LIMIT_WIDTH2 = 320;
 var LIMIT_HEIGHT2 = 184;
 function useOptionalPopoverContext() {
@@ -2507,7 +2518,7 @@ function Popup({ children, isOpen: controlledIsOpen, width = 480, height, onClos
   if (!isOpen) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PopupContext.Provider, { value: { isOpen, onClose }, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PopupContext.Provider, { value: { isOpen, onClose }, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     "div",
     {
       className: "grid max-h-full grid-rows-[max-content_1fr_max-content] flex-col rounded-lg bg-uiBackground01 shadow-floatingShadow",
@@ -2524,7 +2535,7 @@ Popup.Footer = PopupFooter;
 var import_component_theme14 = require("@zenkigen-inc/component-theme");
 var import_clsx28 = __toESM(require("clsx"));
 var import_react38 = require("react");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function Radio({ name, value, id, label, isChecked = false, isDisabled = false, onChange }) {
   const [isMouseOver, setIsMouseOver] = (0, import_react38.useState)(false);
   const handleMouseOverInput = (0, import_react38.useCallback)(() => {
@@ -2565,9 +2576,9 @@ function Radio({ name, value, id, label, isChecked = false, isDisabled = false,
     "pointer-events-none cursor-not-allowed text-disabled01": isDisabled,
     "cursor-pointer text-text01": !isDisabled
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex size-6 items-center justify-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex size-6 items-center justify-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         "input",
         {
           type: "checkbox",
@@ -2582,32 +2593,32 @@ function Radio({ name, value, id, label, isChecked = false, isDisabled = false,
           className: inputClasses
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: boxClasses, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "relative flex size-5 flex-[0_0_auto] items-center justify-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: afterClasses }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: hoverIndicatorClasses })
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: boxClasses, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "relative flex size-5 flex-[0_0_auto] items-center justify-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: afterClasses }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: hoverIndicatorClasses })
       ] }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("label", { htmlFor: id, className: labelClasses, children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("label", { htmlFor: id, className: labelClasses, children: label })
   ] });
 }
 
 // src/search/search.tsx
 var import_clsx29 = require("clsx");
 var import_react39 = require("react");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var Search = (0, import_react39.forwardRef)(({ width = "100%", size = "medium", ...props }, ref) => {
   const classes = (0, import_clsx29.clsx)(
     "flex items-center rounded-full border border-uiBorder02 bg-uiBackground01 focus-within:border-activeInput",
     { "h-8 px-3": size === "medium" },
     { "h-10 px-4": size === "large" }
   );
-  const inputClasses = (0, import_clsx29.clsx)("mx-2 h-full flex-1 text-text01 outline-0 placeholder:text-textPlaceholder", {
+  const inputClasses = (0, import_clsx29.clsx)("mx-2 h-full flex-1 text-text01 outline-none placeholder:text-textPlaceholder", {
     ["typography-label14regular"]: size === "medium",
     ["typography-label16regular"]: size === "large"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "relative", ref, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("form", { onSubmit: props.onSubmit, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: classes, style: { width }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon, { name: "search", color: "icon01", size: "medium" }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "relative", ref, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("form", { onSubmit: props.onSubmit, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: classes, style: { width }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Icon, { name: "search", color: "icon01", size: "medium" }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       "input",
       {
         type: "text",
@@ -2618,7 +2629,7 @@ var Search = (0, import_react39.forwardRef)(({ width = "100%", size = "medium",
         onChange: props.onChange
       }
     ),
-    props.onClickClearButton && props.value && props.value.length !== 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    props.onClickClearButton && props.value && props.value.length !== 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       IconButton,
       {
         variant: "text",
@@ -2643,7 +2654,7 @@ var SegmentedControlContext = (0, import_react40.createContext)(null);
 var import_component_theme15 = require("@zenkigen-inc/component-theme");
 var import_clsx30 = require("clsx");
 var import_react41 = require("react");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var SegmentedControlItem = ({
   label,
   value,
@@ -2702,7 +2713,7 @@ var SegmentedControlItem = ({
     // States - Disabled
     "text-disabled01 bg-transparent": isOptionDisabled === true
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     "button",
     {
       ref: buttonRef,
@@ -2719,7 +2730,7 @@ var SegmentedControlItem = ({
       onMouseDown: handleMouseDown,
       ...rest,
       children: [
-        Boolean(icon) === true && icon && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        Boolean(icon) === true && icon && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           "span",
           {
             className: (0, import_clsx30.clsx)("flex items-center", {
@@ -2727,17 +2738,17 @@ var SegmentedControlItem = ({
               "fill-interactive01": isSelected === true && isOptionDisabled === false,
               "fill-icon01": isSelected === false && isOptionDisabled === false
             }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Icon, { name: icon, size: "small" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Icon, { name: icon, size: "small" })
           }
         ),
-        Boolean(label) === true && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "whitespace-nowrap", children: label })
+        Boolean(label) === true && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "whitespace-nowrap", children: label })
       ]
     }
   );
 };
 
 // src/segmented-control/segmented-control.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var SegmentedControl = ({
   children,
   value,
@@ -2782,7 +2793,7 @@ var SegmentedControl = ({
     onBlur: handleBlurRovingFocus,
     values: itemIds
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_jsx_runtime46.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SegmentedControlContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_jsx_runtime47.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SegmentedControlContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     "div",
     {
       ref: containerRef,
@@ -2810,7 +2821,7 @@ var import_clsx32 = __toESM(require("clsx"));
 // src/select-sort/select-item.tsx
 var import_component_theme16 = require("@zenkigen-inc/component-theme");
 var import_clsx31 = __toESM(require("clsx"));
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function SelectItem2({ children, isSortKey, onClickItem }) {
   const itemClasses = (0, import_clsx31.default)(
     "typography-label14regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02",
@@ -2820,14 +2831,14 @@ function SelectItem2({ children, isSortKey, onClickItem }) {
       "bg-uiBackground01 fill-icon01 text-interactive02": !isSortKey
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("li", { className: "flex w-full items-center", onClick: onClickItem, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("button", { className: itemClasses, type: "button", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "ml-1 mr-6", children }),
-    isSortKey && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { name: "check", size: "small" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("li", { className: "flex w-full items-center", onClick: onClickItem, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("button", { className: itemClasses, type: "button", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "ml-1 mr-6", children }),
+    isSortKey && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Icon, { name: "check", size: "small" }) })
   ] }) });
 }
 
 // src/select-sort/select-list.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function SelectList2({ size, variant, sortOrder, onClickItem, onClickDeselect }) {
   const listClasses = (0, import_clsx32.default)(
     "absolute z-dropdown w-max overflow-y-auto rounded bg-uiBackground01 py-2 shadow-floatingShadow",
@@ -2842,15 +2853,15 @@ function SelectList2({ size, variant, sortOrder, onClickItem, onClickDeselect })
     "typography-label14regular flex h-8 w-full items-center px-3 text-interactive02 hover:bg-hover02 active:bg-active02",
     import_component_theme17.focusVisible.inset
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("ul", { className: listClasses, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectItem2, { isSortKey: sortOrder === "ascend", onClickItem: () => onClickItem("ascend"), children: "\u6607\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SelectItem2, { isSortKey: sortOrder === "descend", onClickItem: () => onClickItem("descend"), children: "\u964D\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
-    sortOrder !== null && onClickDeselect && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("button", { className: deselectButtonClasses, type: "button", onClick: onClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("ul", { className: listClasses, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SelectItem2, { isSortKey: sortOrder === "ascend", onClickItem: () => onClickItem("ascend"), children: "\u6607\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SelectItem2, { isSortKey: sortOrder === "descend", onClickItem: () => onClickItem("descend"), children: "\u964D\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
+    sortOrder !== null && onClickDeselect && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("button", { className: deselectButtonClasses, type: "button", onClick: onClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
   ] });
 }
 
 // src/select-sort/select-sort.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function SelectSort({
   size = "medium",
   variant = "outline",
@@ -2900,16 +2911,16 @@ function SelectSort({
     "mr-1": size === "x-small",
     "mr-2": size !== "x-small"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: wrapperClasses, style: { width }, ref: targetRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("button", { className: buttonClasses, type: "button", onClick: handleClickToggle, disabled: isDisabled, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: labelClasses, children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "ml-auto flex items-center", children: isSortKey ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: wrapperClasses, style: { width }, ref: targetRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("button", { className: buttonClasses, type: "button", onClick: handleClickToggle, disabled: isDisabled, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: labelClasses, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "ml-auto flex items-center", children: isSortKey ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         Icon,
         {
           name: sortOrder === "ascend" ? "arrow-up" : "arrow-down",
           size: size === "large" ? "medium" : "small"
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         Icon,
         {
           name: isOptionListOpen ? "angle-small-up" : "angle-small-down",
@@ -2917,7 +2928,7 @@ function SelectSort({
         }
       ) })
     ] }),
-    isOptionListOpen && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    isOptionListOpen && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       SelectList2,
       {
         size,
@@ -2934,7 +2945,7 @@ function SelectSort({
 var import_component_theme19 = require("@zenkigen-inc/component-theme");
 var import_clsx34 = __toESM(require("clsx"));
 var import_react44 = require("react");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function SortButton({
   size = "medium",
   width,
@@ -2983,7 +2994,7 @@ function SortButton({
     "mr-1": size === "x-small",
     "mr-2": size !== "x-small"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: wrapperClasses, style: { width }, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: wrapperClasses, style: { width }, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
     "button",
     {
       className: buttonClasses,
@@ -2994,8 +3005,8 @@ function SortButton({
       "aria-label": ariaLabel,
       "aria-disabled": isDisabled,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: labelClasses, children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Icon, { name: getIconName(), size: size === "large" ? "medium" : "small" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: labelClasses, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Icon, { name: getIconName(), size: size === "large" ? "medium" : "small" }) })
       ]
     }
   ) });
@@ -3007,7 +3018,7 @@ var import_react45 = require("react");
 
 // src/tab/tab-item.tsx
 var import_clsx35 = require("clsx");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var TabItem = ({ isSelected = false, isDisabled = false, icon, ...props }) => {
   const classes = (0, import_clsx35.clsx)(
     "group relative z-0 flex items-center justify-center gap-1 py-2 leading-[24px] before:absolute before:inset-x-0 before:bottom-0 before:h-[2px] hover:text-interactive01 disabled:pointer-events-none disabled:text-disabled01",
@@ -3022,7 +3033,7 @@ var TabItem = ({ isSelected = false, isDisabled = false, icon, ...props }) => {
     "fill-interactive01": !isDisabled && isSelected,
     "fill-icon01 group-hover:fill-interactive01": !isDisabled && !isSelected
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
     "button",
     {
       type: "button",
@@ -3032,7 +3043,7 @@ var TabItem = ({ isSelected = false, isDisabled = false, icon, ...props }) => {
       disabled: isDisabled,
       onClick: () => props.onClick(props.id),
       children: [
-        icon != null && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: iconWrapperClasses, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Icon, { name: icon, size: "small" }) }),
+        icon != null && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: iconWrapperClasses, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Icon, { name: icon, size: "small" }) }),
         props.children
       ]
     }
@@ -3040,7 +3051,7 @@ var TabItem = ({ isSelected = false, isDisabled = false, icon, ...props }) => {
 };
 
 // src/tab/tab.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function Tab({ children, layout = "auto" }) {
   const childrenCount = import_react45.Children.count(children);
   const containerStyle = layout === "equal" ? { gridTemplateColumns: `repeat(${childrenCount}, minmax(0,1fr))` } : {};
@@ -3051,28 +3062,28 @@ function Tab({ children, layout = "auto" }) {
       grid: layout === "equal"
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { role: "tablist", className: containerClasses, style: containerStyle, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { role: "tablist", className: containerClasses, style: containerStyle, children });
 }
 Tab.Item = TabItem;
 
 // src/table/table-cell.tsx
 var import_clsx37 = __toESM(require("clsx"));
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function TableCell({ children, className, isHeader = false }) {
   const classes = (0, import_clsx37.default)("border-b border-uiBorder01", { "sticky top-0 z-10 bg-white": isHeader }, className);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: classes, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: classes, children });
 }
 
 // src/table/table-row.tsx
 var import_clsx38 = __toESM(require("clsx"));
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function TableRow({ children, isHoverBackgroundVisible = false }) {
   const rowClasses = (0, import_clsx38.default)("contents", isHoverBackgroundVisible && "[&:hover>div]:bg-hoverUi02");
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: rowClasses, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: rowClasses, children });
 }
 
 // src/table/table.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function Table({
   width,
   templateRows,
@@ -3081,7 +3092,7 @@ function Table({
   autoRows,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     "div",
     {
       className: "grid",
@@ -3106,7 +3117,7 @@ var import_clsx40 = __toESM(require("clsx"));
 // src/tag/delete-icon.tsx
 var import_component_theme20 = require("@zenkigen-inc/component-theme");
 var import_clsx39 = __toESM(require("clsx"));
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var DeleteIcon = ({ color, variant, onClick }) => {
   const deleteButtonClasses = (0, import_clsx39.default)(
     "group ml-2 size-[14px] rounded-full p-0.5 hover:cursor-pointer hover:bg-iconOnColor focus-visible:bg-iconOnColor",
@@ -3116,7 +3127,7 @@ var DeleteIcon = ({ color, variant, onClick }) => {
     "fill-interactive02": color === "gray" || variant === "light",
     "group-hover:fill-interactive02 group-focus-visible:fill-interactive02 fill-iconOnColor": color !== "gray"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("button", { type: "button", className: deleteButtonClasses, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("button", { type: "button", className: deleteButtonClasses, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     "path",
     {
       fillRule: "evenodd",
@@ -3128,7 +3139,7 @@ var DeleteIcon = ({ color, variant, onClick }) => {
 };
 
 // src/tag/tag.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function Tag({ id, children, color, variant = "normal", size = "medium", isEditable, onDelete }) {
   const wrapperClasses = (0, import_clsx40.default)("flex", "items-center", "justify-center", {
     [import_component_theme21.tagColors[color]]: variant === "normal",
@@ -3142,9 +3153,9 @@ function Tag({ id, children, color, variant = "normal", size = "medium", isEdita
     "py-0.5 px-1": !isEditable,
     "py-1 px-2": isEditable
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: wrapperClasses, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: wrapperClasses, children: [
     children,
-    isEditable ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DeleteIcon, { onClick: () => onDelete(id), color, variant }) : null
+    isEditable ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DeleteIcon, { onClick: () => onDelete(id), color, variant }) : null
   ] });
 }
 
@@ -3166,17 +3177,17 @@ var useTextAreaCompoundContext = (componentName) => {
 // src/text-area/text-area-error-message.tsx
 var import_clsx41 = require("clsx");
 var import_react47 = require("react");
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var TextAreaErrorMessage = (0, import_react47.forwardRef)(
   ({ "aria-live": ariaLive = "assertive", ...props }, ref) => {
     const { textAreaProps } = useTextAreaCompoundContext("TextArea.ErrorMessage");
-    const typographyClass = textAreaProps.size === "large" ? "typography-label12regular" : "typography-label11regular";
+    const typographyClass = textAreaProps.size === "large" ? "typography-label13regular" : "typography-label12regular";
     const shouldRender = textAreaProps.isError === true;
     if (!shouldRender) {
       return null;
     }
     const errorMessageClassName = (0, import_clsx41.clsx)(typographyClass, "text-supportError");
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { ref, className: errorMessageClassName, "aria-live": ariaLive, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { ref, className: errorMessageClassName, "aria-live": ariaLive, ...props });
   }
 );
 TextAreaErrorMessage.displayName = "TextArea.ErrorMessage";
@@ -3184,17 +3195,17 @@ TextAreaErrorMessage.displayName = "TextArea.ErrorMessage";
 // src/text-area/text-area-helper-message.tsx
 var import_clsx42 = require("clsx");
 var import_react48 = require("react");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var TextAreaHelperMessage = (0, import_react48.forwardRef)((props, ref) => {
   const { textAreaProps } = useTextAreaCompoundContext("TextArea.HelperMessage");
-  const typographyClass = textAreaProps.size === "large" ? "typography-label12regular" : "typography-label11regular";
+  const typographyClass = textAreaProps.size === "large" ? "typography-label13regular" : "typography-label12regular";
   const helperMessageClassName = (0, import_clsx42.clsx)(typographyClass, "text-text02");
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { ref, className: helperMessageClassName, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { ref, className: helperMessageClassName, ...props });
 });
 TextAreaHelperMessage.displayName = "TextArea.HelperMessage";
 
 // src/text-area/text-area.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 function TextAreaInner({
   size = "medium",
   isResizable = false,
@@ -3205,6 +3216,9 @@ function TextAreaInner({
   height,
   children,
   className,
+  isCounterVisible = false,
+  counterMaxLength,
+  maxLength,
   ...props
 }, ref) {
   const autoGeneratedId = (0, import_react49.useId)();
@@ -3243,8 +3257,12 @@ function TextAreaInner({
     }
     return child;
   });
+  const counterLimit = counterMaxLength ?? maxLength;
+  const counterId = isCounterVisible ? `${describedByBaseId}-counter` : null;
+  const currentLength = typeof props.value === "string" ? props.value.length : 0;
+  const isExceeded = counterLimit != null && currentLength > counterLimit;
   const describedByFromProps = typeof props["aria-describedby"] === "string" ? props["aria-describedby"] : null;
-  const describedByList = [describedByFromProps, ...helperMessageIds, ...errorIds].filter(
+  const describedByList = [describedByFromProps, ...helperMessageIds, ...errorIds, counterId].filter(
     (id) => typeof id === "string" && id.trim().length > 0
   );
   const describedByProps = describedByList.length > 0 ? {
@@ -3254,10 +3272,12 @@ function TextAreaInner({
   const ariaInvalidFromProps = props["aria-invalid"];
   const ariaInvalidValue = ariaInvalidFromProps != null ? ariaInvalidFromProps : shouldMarkInvalid ? true : null;
   const ariaInvalidProps = ariaInvalidValue == null ? {} : { "aria-invalid": ariaInvalidValue };
+  const maxLengthProps = counterMaxLength != null ? {} : maxLength != null ? { maxLength } : {};
   const mergedTextAreaProps = {
     ...props,
     ...describedByProps,
-    ...ariaInvalidProps
+    ...ariaInvalidProps,
+    ...maxLengthProps
   };
   const textAreaWrapperClassName = (0, import_clsx43.clsx)(
     "box-border flex w-full overflow-hidden rounded border",
@@ -3272,10 +3292,10 @@ function TextAreaInner({
     className
   );
   const textAreaClassName = (0, import_clsx43.clsx)(
-    "w-full border-none bg-uiBackground01 outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder",
+    "w-full border-none bg-uiBackground01 outline-none placeholder:text-textPlaceholder disabled:text-textPlaceholder",
     {
       "typography-body14regular px-2 py-2": size === "medium",
-      "text-4 leading-normal px-3.5 py-2.5": size === "large",
+      "typography-body16regular px-3 py-2": size === "large",
       "field-sizing-content": autoHeight,
       "text-text01": !isError,
       "text-supportError": isError,
@@ -3284,7 +3304,7 @@ function TextAreaInner({
     }
   );
   const hasHeight = height != null && String(height).trim().length > 0;
-  const textAreaElement = /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  const textAreaElement = /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     "div",
     {
       className: textAreaWrapperClassName,
@@ -3294,7 +3314,7 @@ function TextAreaInner({
         ...!autoHeight && hasHeight ? { height } : {},
         ...autoHeight && hasHeight ? { minHeight: height } : {}
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
         "textarea",
         {
           ref,
@@ -3309,14 +3329,32 @@ function TextAreaInner({
       )
     }
   );
+  const counterElement = isCounterVisible ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    "div",
+    {
+      id: counterId,
+      className: (0, import_clsx43.clsx)(
+        "shrink-0",
+        size === "large" ? "typography-label13regular" : "typography-label12regular",
+        !disabled && isExceeded ? "text-supportError" : "text-text02"
+      ),
+      "aria-live": "polite",
+      children: counterLimit != null ? `${currentLength}/${counterLimit}\u6587\u5B57` : `${currentLength}\u6587\u5B57`
+    }
+  ) : null;
   const stackedChildren = enhancedChildren == null ? [] : import_react49.Children.toArray(enhancedChildren);
   const hasMessageChildren = stackedChildren.length > 0;
-  if (!hasMessageChildren) {
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TextAreaCompoundContext.Provider, { value: contextValue, children: textAreaElement });
+  const hasBottomContent = hasMessageChildren || counterElement != null;
+  if (!hasBottomContent) {
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TextAreaCompoundContext.Provider, { value: contextValue, children: textAreaElement });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TextAreaCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex flex-col gap-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TextAreaCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex flex-col gap-2", children: [
     textAreaElement,
-    stackedChildren
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
+      hasMessageChildren && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: stackedChildren }),
+      !hasMessageChildren && counterElement != null && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "flex-1" }),
+      counterElement
+    ] })
   ] }) });
 }
 var attachStatics2 = (component) => {
@@ -3333,7 +3371,7 @@ var TextArea = attachStatics2(TextAreaBase);
 // src/toast/toast.tsx
 var import_clsx44 = __toESM(require("clsx"));
 var import_react50 = require("react");
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var CLOSE_TIME_MSEC = 5e3;
 function Toast({
   state = "information",
@@ -3380,17 +3418,17 @@ function Toast({
     }, CLOSE_TIME_MSEC);
     return () => window.clearTimeout(timer);
   }, [isAutoClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: wrapperClasses, style: { width }, onAnimationEnd: handleAnimationEnd, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Icon, { name: iconName[state] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: textClasses, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(IconButton, { icon: "close", size: "medium", variant: "text", onClick: handleClose, isNoPadding: true })
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: wrapperClasses, style: { width }, onAnimationEnd: handleAnimationEnd, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Icon, { name: iconName[state] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: textClasses, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(IconButton, { icon: "close", size: "medium", variant: "text", onClick: handleClose, isNoPadding: true })
   ] });
 }
 
 // src/toast/toast-provider.tsx
 var import_react51 = require("react");
 var import_react_dom3 = require("react-dom");
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var ToastContext = (0, import_react51.createContext)({});
 var ToastProvider = ({ children }) => {
   const [isClientRender, setIsClientRender] = (0, import_react51.useState)(false);
@@ -3404,10 +3442,10 @@ var ToastProvider = ({ children }) => {
   (0, import_react51.useEffect)(() => {
     setIsClientRender(true);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(ToastContext.Provider, { value: { addToast, removeToast }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(ToastContext.Provider, { value: { addToast, removeToast }, children: [
     children,
     isClientRender && (0, import_react_dom3.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime62.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_runtime62.jsx)(Toast, { state, isAutoClose: true, isAnimation: true, onClickClose: () => removeToast(id), width: 475, children: message }, id)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime63.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_runtime63.jsx)(Toast, { state, isAutoClose: true, isAnimation: true, onClickClose: () => removeToast(id), width: 475, children: message }, id)) }),
       document.body
     )
   ] });
@@ -3418,7 +3456,7 @@ var useToast = () => {
 
 // src/toggle/toggle.tsx
 var import_clsx45 = __toESM(require("clsx"));
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 function Toggle({
   id,
   size = "medium",
@@ -3453,9 +3491,9 @@ function Toggle({
     "pointer-events-none cursor-not-allowed text-disabled01": isDisabled,
     "cursor-pointer text-text01": !isDisabled
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "relative flex flex-[0_0_auto] items-center", children: [
-    label != null && labelPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("label", { htmlFor: id, className: labelClasses, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "relative flex flex-[0_0_auto] items-center", children: [
+    label != null && labelPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("label", { htmlFor: id, className: labelClasses, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       "input",
       {
         className: inputClasses,
@@ -3467,8 +3505,8 @@ function Toggle({
         disabled: isDisabled
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: baseClasses, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: indicatorClasses }) }),
-    label != null && labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("label", { htmlFor: id, className: labelClasses, children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: baseClasses, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: indicatorClasses }) }),
+    label != null && labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("label", { htmlFor: id, className: labelClasses, children: label })
   ] });
 }
 
@@ -3481,7 +3519,7 @@ var import_clsx47 = __toESM(require("clsx"));
 
 // src/tooltip/tail-icon.tsx
 var import_clsx46 = __toESM(require("clsx"));
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var TailIcon = (props) => {
   const tailClasses = (0, import_clsx46.default)("absolute fill-uiBackgroundTooltip", {
     "rotate-180": props.verticalPosition === "bottom",
@@ -3498,9 +3536,9 @@ var TailIcon = (props) => {
     "left-1/2 -translate-x-2": props.horizontalAlign === "center" && props.size !== "small"
   });
   if (props.size === "small") {
-    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("svg", { className: tailClasses, width: "8", height: "4", viewBox: "0 0 8 4", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("path", { d: "M4 4L0 0H8L4 4Z" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("svg", { className: tailClasses, width: "8", height: "4", viewBox: "0 0 8 4", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("path", { d: "M4 4L0 0H8L4 4Z" }) });
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       "svg",
       {
         className: tailClasses,
@@ -3509,14 +3547,14 @@ var TailIcon = (props) => {
         viewBox: "0 0 14 8",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("path", { d: "M7 8L0 0H14L7 8Z" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("path", { d: "M7 8L0 0H14L7 8Z" })
       }
     );
   }
 };
 
 // src/tooltip/tooltip-content.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var TooltipContent = ({
   content,
   horizontalAlign,
@@ -3552,7 +3590,7 @@ var TooltipContent = ({
     transform: `translate(${tooltipPosition.translateX}, ${tooltipPosition.translateY})`,
     ...tooltipPosition
   } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: tooltipWrapperClasses, style: tooltipWrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: tooltipWrapperClasses, style: tooltipWrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
     "div",
     {
       className: tooltipBodyClasses,
@@ -3561,7 +3599,7 @@ var TooltipContent = ({
       },
       children: [
         content,
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(TailIcon, { size, verticalPosition, horizontalAlign })
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TailIcon, { size, verticalPosition, horizontalAlign })
       ]
     }
   ) });
@@ -3622,7 +3660,7 @@ var useTooltip = () => {
 };
 
 // src/tooltip/tooltip.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 function Tooltip({
   children,
   content,
@@ -3660,7 +3698,7 @@ function Tooltip({
     const position = calculatePosition({ dimensions, maxWidth, verticalPosition, horizontalAlign, tooltipSize: size });
     setTooltipPosition(position);
   }, [calculatePosition, horizontalAlign, maxWidth, size, verticalPosition]);
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
     "div",
     {
       ref: targetRef,
@@ -3669,7 +3707,7 @@ function Tooltip({
       onMouseLeave: handleMouseOutWrapper,
       children: [
         children,
-        isVisible && (portalTarget == null ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+        isVisible && (portalTarget == null ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
           TooltipContent,
           {
             content,
@@ -3680,7 +3718,7 @@ function Tooltip({
             tooltipPosition
           }
         ) : (0, import_react_dom4.createPortal)(
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
             TooltipContent,
             {
               isPortal: true,
@@ -3705,6 +3743,7 @@ function Tooltip({
   Button,
   Checkbox,
   DatePicker,
+  Divider,
   Dropdown,
   EvaluationStar,
   FileInput,