@zenkigen-inc/component-ui 1.19.3 → 1.20.0

package/dist/index.mjs

@@ -69,7 +69,7 @@ function Avatar({ size = "medium", ...props }) {
 // src/breadcrumb/breadcrumb-item.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 var BreadcrumbItem = ({ children }) => {
-  return /* @__PURE__ */ jsx3("li", { className: "flex gap-2 after:content-['/'] last:after:content-none [&_a]:text-interactive02 [&_a]:hover:underline", children });
+  return /* @__PURE__ */ jsx3("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
@@ -967,6 +967,12 @@ var DatePicker = ({
 DatePicker.ErrorMessage = DatePickerErrorMessage;
 DatePicker.displayName = "DatePicker";
 
+// src/divider/divider.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+function Divider() {
+  return /* @__PURE__ */ jsx16("hr", { className: "h-px w-full border-0 bg-uiBorder01" });
+}
+
 // src/dropdown/dropdown.tsx
 import { buttonColors as buttonColors3, focusVisible as focusVisible6 } from "@zenkigen-inc/component-theme";
 import clsx13 from "clsx";
@@ -979,7 +985,11 @@ var useOutsideClick = (ref, handler, enabled = true) => {
   useEffect4(() => {
     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);
@@ -1005,7 +1015,7 @@ var DropdownContext = createContext3({
 import { focusVisible as focusVisible5 } from "@zenkigen-inc/component-theme";
 import clsx11 from "clsx";
 import { useContext as useContext3 } from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function DropdownItem({ children, color = "gray", onClick }) {
   const { setIsVisible } = useContext3(DropdownContext);
   const handleClickItem = (event) => {
@@ -1020,13 +1030,13 @@ function DropdownItem({ children, color = "gray", onClick }) {
       "fill-supportDanger text-supportDanger": color === "red"
     }
   );
-  return /* @__PURE__ */ jsx16("li", { className: "flex w-full items-center", children: /* @__PURE__ */ jsx16("button", { className: itemClasses, type: "button", onClick: handleClickItem, children }) });
+  return /* @__PURE__ */ jsx17("li", { className: "flex w-full items-center", children: /* @__PURE__ */ jsx17("button", { className: itemClasses, type: "button", onClick: handleClickItem, children }) });
 }
 
 // src/dropdown/dropdown-menu.tsx
 import clsx12 from "clsx";
 import { useContext as useContext4 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function DropdownMenu({
   children,
   maxHeight,
@@ -1043,7 +1053,7 @@ function DropdownMenu({
     "right-0": horizontalAlign === "right",
     "left-auto": horizontalAlign === "center"
   });
-  return isVisible && !isDisabled && /* @__PURE__ */ jsx17(
+  return isVisible && !isDisabled && /* @__PURE__ */ jsx18(
     "ul",
     {
       className: wrapperClasses,
@@ -1058,7 +1068,7 @@ function DropdownMenu({
 }
 
 // src/dropdown/dropdown.tsx
-import { jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs5 } from "react/jsx-runtime";
 function Dropdown({
   children,
   target,
@@ -1126,7 +1136,7 @@ function Dropdown({
     "typography-label14regular": size === "small" || size === "medium",
     "typography-label16regular": size === "large"
   });
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     DropdownContext.Provider,
     {
       value: { isVisible, setIsVisible, isDisabled, targetDimensions, variant, portalTargetRef },
@@ -1141,7 +1151,7 @@ function Dropdown({
             disabled: isDisabled,
             children: [
               target,
-              !isArrowHidden && /* @__PURE__ */ jsx18("div", { className: "ml-2 flex items-center fill-icon01", children: /* @__PURE__ */ jsx18(
+              !isArrowHidden && /* @__PURE__ */ jsx19("div", { className: "ml-2 flex items-center fill-icon01", children: /* @__PURE__ */ jsx19(
                 Icon,
                 {
                   name: isVisible ? "angle-small-up" : "angle-small-down",
@@ -1151,9 +1161,9 @@ function Dropdown({
             ]
           }
         ) : /* @__PURE__ */ jsxs5("button", { type: "button", title, className: buttonClasses, onClick: handleToggle, disabled: isDisabled, children: [
-          icon && /* @__PURE__ */ jsx18("span", { className: "mr-1 flex", children: /* @__PURE__ */ jsx18(Icon, { name: icon, size: size === "large" ? "medium" : "small" }) }),
-          /* @__PURE__ */ jsx18("span", { className: labelClasses, children: label }),
-          !isArrowHidden && /* @__PURE__ */ jsx18("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx18(Icon, { name: isVisible ? "angle-small-up" : "angle-small-down", size: "small" }) })
+          icon && /* @__PURE__ */ jsx19("span", { className: "mr-1 flex", children: /* @__PURE__ */ jsx19(Icon, { name: icon, size: size === "large" ? "medium" : "small" }) }),
+          /* @__PURE__ */ jsx19("span", { className: labelClasses, children: label }),
+          !isArrowHidden && /* @__PURE__ */ jsx19("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx19(Icon, { name: isVisible ? "angle-small-up" : "angle-small-down", size: "small" }) })
         ] }),
         !portalTargetRef ? children : portalTargetRef != null && portalTargetRef.current && createPortal(children, portalTargetRef.current)
       ] })
@@ -1168,7 +1178,7 @@ import { iconElements as iconElements2 } from "@zenkigen-inc/component-icons";
 import { focusVisible as focusVisible7 } from "@zenkigen-inc/component-theme";
 import clsx14 from "clsx";
 import { useCallback as useCallback5, useState as useState4 } from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function EvaluationStar({ value, isEditable = false, onChangeRating, size = "medium" }) {
   const maxRating = 5;
   const [currentRating, setCurrentRating] = useState4(value);
@@ -1187,26 +1197,26 @@ function EvaluationStar({ value, isEditable = false, onChangeRating, size = "med
   const renderStar = (rating) => {
     const color = rating <= currentRating ? "fill-yellow-yellow50" : "fill-icon03";
     const IconComponent = iconElements2["star-filled"];
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx20(
       "button",
       {
         type: "button",
         onClick: () => handleChangeRating(rating),
         className: clsx14(color, starClasses),
         disabled: !isEditable,
-        children: /* @__PURE__ */ jsx19(IconComponent, {})
+        children: /* @__PURE__ */ jsx20(IconComponent, {})
       },
       rating
     );
   };
   const ratingStars = Array.from({ length: maxRating }, (_, index) => renderStar(index + 1));
-  return /* @__PURE__ */ jsx19("span", { className: "flex flex-row", children: ratingStars });
+  return /* @__PURE__ */ jsx20("span", { className: "flex flex-row", children: ratingStars });
 }
 
 // src/file-input/file-input.tsx
 import { clsx as clsx15 } from "clsx";
 import { forwardRef as forwardRef4, useCallback as useCallback6, useId as useId2, useImperativeHandle, useRef as useRef5, useState as useState5 } from "react";
-import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx21, jsxs as jsxs6 } from "react/jsx-runtime";
 var ERROR_TYPES = {
   SIZE_TOO_LARGE: "SIZE_TOO_LARGE",
   UNSUPPORTED_FORMAT: "UNSUPPORTED_FORMAT"
@@ -1341,9 +1351,9 @@ var FileInput = forwardRef4(
       {
         "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
       }
     );
@@ -1383,7 +1393,7 @@ var FileInput = forwardRef4(
     })();
     if (variant === "button") {
       return /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx20("div", { className: hasErrors ? "flex-1" : "min-w-0 flex-1", children: /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx21("div", { className: hasErrors ? "flex-1" : "min-w-0 flex-1", children: /* @__PURE__ */ jsx21(
           InternalButton,
           {
             size,
@@ -1391,14 +1401,14 @@ var FileInput = forwardRef4(
             isDisabled,
             width: "100%",
             onClick: handleButtonClick,
-            before: /* @__PURE__ */ jsx20(Icon, { name: "upload", size: "small" }),
-            after: /* @__PURE__ */ jsx20(Fragment2, { children: selectedFile ? /* @__PURE__ */ jsx20("span", { className: clsx15("typography-label12regular truncate", !isDisabled && "text-text01"), children: selectedFile.name }) : "" }),
-            children: /* @__PURE__ */ jsx20("span", { className: "truncate", children: "\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E" })
+            before: /* @__PURE__ */ jsx21(Icon, { name: "upload", size: "small" }),
+            after: /* @__PURE__ */ jsx21(Fragment2, { children: selectedFile ? /* @__PURE__ */ jsx21("span", { className: clsx15("typography-label12regular truncate", !isDisabled && "text-text01"), children: selectedFile.name }) : "" }),
+            children: /* @__PURE__ */ jsx21("span", { className: "truncate", children: "\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E" })
           }
         ) }),
-        selectedFile && !isDisabled && /* @__PURE__ */ jsx20("div", { className: "shrink-0", children: /* @__PURE__ */ jsx20(IconButton, { variant: "text", icon: "close", size: "small", onClick: handleClear }) }),
-        hasErrors && hasErrorMessages && /* @__PURE__ */ jsx20("div", { id: errorId, "data-testid": "error-messages", className: "typography-label12regular text-supportError", children: errorMessages.map((message, index) => /* @__PURE__ */ jsx20("div", { className: "break-all", children: message }, index)) }),
-        /* @__PURE__ */ jsx20(
+        selectedFile && !isDisabled && /* @__PURE__ */ jsx21("div", { className: "shrink-0", children: /* @__PURE__ */ jsx21(IconButton, { variant: "text", icon: "close", size: "small", onClick: handleClear }) }),
+        hasErrors && hasErrorMessages && /* @__PURE__ */ jsx21("div", { id: errorId, "data-testid": "error-messages", className: "typography-label12regular text-supportError", children: errorMessages.map((message, index) => /* @__PURE__ */ jsx21("div", { className: "break-all", children: message }, index)) }),
+        /* @__PURE__ */ jsx21(
           "input",
           {
             id: inputId,
@@ -1434,25 +1444,25 @@ var FileInput = forwardRef4(
           "aria-disabled": isDisabled,
           ...hasErrors && hasErrorMessages && { "aria-describedby": errorId },
           children: [
-            /* @__PURE__ */ jsx20(Icon, { name: "upload-document", size: "large", color: isDisabled ? "icon03" : "icon01" }),
-            !selectedFile && /* @__PURE__ */ jsx20("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsx20("div", { className: "typography-body13regular select-none", children: /* @__PURE__ */ jsxs6(Fragment2, { children: [
+            /* @__PURE__ */ jsx21(Icon, { name: "upload-document", size: "large", color: isDisabled ? "icon03" : "icon01" }),
+            !selectedFile && /* @__PURE__ */ jsx21("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ jsx21("div", { className: "typography-body13regular select-none", children: /* @__PURE__ */ jsxs6(Fragment2, { children: [
               "\u3053\u3053\u306B\u30D5\u30A1\u30A4\u30EB\u3092\u30C9\u30ED\u30C3\u30D7\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
-              /* @__PURE__ */ jsx20("br", {}),
+              /* @__PURE__ */ jsx21("br", {}),
               "\u307E\u305F\u306F\u3001",
-              /* @__PURE__ */ jsx20("span", { className: clsx15(!isDisabled ? "text-link01" : ""), children: "\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E" }),
+              /* @__PURE__ */ jsx21("span", { className: clsx15(!isDisabled ? "text-link01" : ""), children: "\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E" }),
               "\u3057\u3066\u304F\u3060\u3055\u3044\u3002"
             ] }) }) }),
             !selectedFile && /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-1", children: [
-              /* @__PURE__ */ jsx20("div", { className: clsx15("typography-label11regular", isDisabled ? "text-textPlaceholder" : "text-text02"), children: "\u5BFE\u5FDC\u5F62\u5F0F" }),
-              /* @__PURE__ */ jsx20("div", { className: clsx15("typography-body12regular", isDisabled ? "text-textPlaceholder" : "text-text01"), children: acceptLabel }),
-              /* @__PURE__ */ jsx20("div", { className: clsx15("typography-label11regular", isDisabled ? "text-textPlaceholder" : "text-text02"), children: "\u30B5\u30A4\u30BA" }),
-              /* @__PURE__ */ jsx20("div", { className: clsx15("typography-body12regular", isDisabled ? "text-textPlaceholder" : "text-text01"), children: maxSizeLabel })
+              /* @__PURE__ */ jsx21("div", { className: clsx15("typography-label11regular", isDisabled ? "text-textPlaceholder" : "text-text02"), children: "\u5BFE\u5FDC\u5F62\u5F0F" }),
+              /* @__PURE__ */ jsx21("div", { className: clsx15("typography-body12regular", isDisabled ? "text-textPlaceholder" : "text-text01"), children: acceptLabel }),
+              /* @__PURE__ */ jsx21("div", { className: clsx15("typography-label11regular", isDisabled ? "text-textPlaceholder" : "text-text02"), children: "\u30B5\u30A4\u30BA" }),
+              /* @__PURE__ */ jsx21("div", { className: clsx15("typography-body12regular", isDisabled ? "text-textPlaceholder" : "text-text01"), children: maxSizeLabel })
             ] }),
             selectedFile && /* @__PURE__ */ jsxs6("div", { className: "mt-2 flex flex-col items-center gap-1", children: [
-              /* @__PURE__ */ jsx20("span", { className: "typography-label11regular text-text02", children: "\u30D5\u30A1\u30A4\u30EB\u540D" }),
+              /* @__PURE__ */ jsx21("span", { className: "typography-label11regular text-text02", children: "\u30D5\u30A1\u30A4\u30EB\u540D" }),
               /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx20("span", { className: "typography-label14regular", children: selectedFile.name }),
-                !isDisabled && /* @__PURE__ */ jsx20(
+                /* @__PURE__ */ jsx21("span", { className: "typography-label14regular", children: selectedFile.name }),
+                !isDisabled && /* @__PURE__ */ jsx21(
                   IconButton,
                   {
                     variant: "text",
@@ -1466,7 +1476,7 @@ var FileInput = forwardRef4(
                 )
               ] })
             ] }),
-            /* @__PURE__ */ jsx20(
+            /* @__PURE__ */ jsx21(
               "input",
               {
                 id: inputId,
@@ -1482,13 +1492,13 @@ var FileInput = forwardRef4(
           ]
         }
       ),
-      hasErrors && hasErrorMessages && /* @__PURE__ */ jsx20(
+      hasErrors && hasErrorMessages && /* @__PURE__ */ jsx21(
         "div",
         {
           id: errorId,
           "data-testid": "error-messages",
           className: "typography-body13regular flex flex-col text-supportDanger",
-          children: errorMessages.map((message, index) => /* @__PURE__ */ jsx20("div", { children: message }, index))
+          children: errorMessages.map((message, index) => /* @__PURE__ */ jsx21("div", { children: message }, index))
         }
       )
     ] });
@@ -1585,7 +1595,7 @@ var useRovingFocus = ({
 
 // src/loading/loading.tsx
 import clsx17 from "clsx";
-import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
 function Loading({ size = "medium", position = "fixed", height = "100%" }) {
   const wrapperClasses = clsx17(position, "left-0 top-0 z-20 flex w-full items-center justify-center");
   const svgClasses = clsx17({
@@ -1593,8 +1603,8 @@ function Loading({ size = "medium", position = "fixed", height = "100%" }) {
     "h-8 w-8": size === "medium",
     "h-16 w-16": size === "large"
   });
-  return /* @__PURE__ */ jsx21(Fragment3, { children: /* @__PURE__ */ jsxs8("div", { className: wrapperClasses, style: { height }, children: [
-    size === "small" && /* @__PURE__ */ jsx21("svg", { className: svgClasses, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(Fragment3, { children: /* @__PURE__ */ jsxs8("div", { className: wrapperClasses, style: { height }, children: [
+    size === "small" && /* @__PURE__ */ jsx22("svg", { className: svgClasses, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx22(
       "circle",
       {
         className: "origin-center animate-circular-small-move stroke-interactive01",
@@ -1606,7 +1616,7 @@ function Loading({ size = "medium", position = "fixed", height = "100%" }) {
         fill: "none"
       }
     ) }),
-    size === "medium" && /* @__PURE__ */ jsx21("svg", { className: svgClasses, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx21(
+    size === "medium" && /* @__PURE__ */ jsx22("svg", { className: svgClasses, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx22(
       "circle",
       {
         className: "origin-center animate-circular-medium-move stroke-interactive01",
@@ -1618,7 +1628,7 @@ function Loading({ size = "medium", position = "fixed", height = "100%" }) {
         fill: "none"
       }
     ) }),
-    size === "large" && /* @__PURE__ */ jsx21("svg", { className: svgClasses, viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx21(
+    size === "large" && /* @__PURE__ */ jsx22("svg", { className: svgClasses, viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx22(
       "circle",
       {
         className: "origin-center animate-circular-large-move stroke-interactive01",
@@ -1685,9 +1695,9 @@ function restoreProperty(element, property, value) {
 }
 
 // src/modal/modal-body.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function ModalBody({ children }) {
-  return /* @__PURE__ */ jsx22("div", { className: "overflow-y-auto", children });
+  return /* @__PURE__ */ jsx23("div", { className: "overflow-y-auto", children });
 }
 
 // src/modal/modal-context.ts
@@ -1698,18 +1708,18 @@ var ModalContext = createContext4({
 
 // src/modal/modal-footer.tsx
 import clsx18 from "clsx";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function ModalFooter({ children, isNoBorder = false }) {
   const wrapperClasses = clsx18("flex w-full shrink-0 items-center rounded-b-lg px-6 py-4", {
     "border-t-[1px] border-uiBorder01": !isNoBorder
   });
-  return /* @__PURE__ */ jsx23("div", { className: wrapperClasses, children });
+  return /* @__PURE__ */ jsx24("div", { className: wrapperClasses, children });
 }
 
 // src/modal/modal-header.tsx
 import clsx19 from "clsx";
 import { useContext as useContext5 } from "react";
-import { jsx as jsx24, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs9 } from "react/jsx-runtime";
 function ModalHeader({ children, isNoBorder = false }) {
   const { onClose } = useContext5(ModalContext);
   const headerClasses = clsx19(
@@ -1721,13 +1731,13 @@ function ModalHeader({ children, isNoBorder = false }) {
     }
   );
   return /* @__PURE__ */ jsxs9("div", { className: headerClasses, children: [
-    /* @__PURE__ */ jsx24("div", { children }),
-    onClose && /* @__PURE__ */ jsx24(IconButton, { icon: "close", size: "small", variant: "text", onClick: onClose })
+    /* @__PURE__ */ jsx25("div", { children }),
+    onClose && /* @__PURE__ */ jsx25(IconButton, { icon: "close", size: "small", variant: "text", onClick: onClose })
   ] });
 }
 
 // src/modal/modal.tsx
-import { Fragment as Fragment4, jsx as jsx25, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx26, jsxs as jsxs10 } from "react/jsx-runtime";
 var LIMIT_WIDTH = 320;
 var LIMIT_HEIGHT = 184;
 function Modal({
@@ -1746,9 +1756,9 @@ function Modal({
     setIsMounted(true);
   }, []);
   return isMounted && isOpen ? /* @__PURE__ */ jsxs10(Fragment4, { children: [
-    /* @__PURE__ */ jsx25(BodyScrollLock, {}),
+    /* @__PURE__ */ jsx26(BodyScrollLock, {}),
     createPortal2(
-      /* @__PURE__ */ jsx25(ModalContext.Provider, { value: { onClose }, children: /* @__PURE__ */ jsx25("div", { className: "fixed left-0 top-0 z-overlay flex size-full items-center justify-center bg-backgroundOverlayBlack py-4", children: /* @__PURE__ */ jsx25(
+      /* @__PURE__ */ jsx26(ModalContext.Provider, { value: { onClose }, children: /* @__PURE__ */ jsx26("div", { className: "fixed left-0 top-0 z-overlay flex size-full items-center justify-center bg-backgroundOverlayBlack py-4", children: /* @__PURE__ */ jsx26(
         "div",
         {
           role: "dialog",
@@ -1768,7 +1778,7 @@ Modal.Footer = ModalFooter;
 
 // src/notification-inline/notification-inline.tsx
 import { clsx as clsx20 } from "clsx";
-import { jsx as jsx26, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs11 } from "react/jsx-runtime";
 function NotificationInline({ state = "default", size = "medium", ...props }) {
   const wrapperClasses = clsx20("typography-body13regular flex items-center gap-1 rounded text-text01", {
     "bg-uiBackgroundError": state === "attention",
@@ -1796,9 +1806,9 @@ function NotificationInline({ state = "default", size = "medium", ...props }) {
     medium: "medium"
   };
   return /* @__PURE__ */ jsxs11("div", { className: wrapperClasses, children: [
-    state !== "default" && /* @__PURE__ */ jsx26("div", { className: iconClasses, children: /* @__PURE__ */ jsx26(Icon, { name: iconName[state], size: iconSize[size] }) }),
-    /* @__PURE__ */ jsx26("p", { className: "flex-1", children: props.children }),
-    props.showClose === true && /* @__PURE__ */ jsx26("div", { className: "flex items-center", children: /* @__PURE__ */ jsx26(IconButton, { icon: "close", size: "small", variant: "text", onClick: props.onClickClose }) })
+    state !== "default" && /* @__PURE__ */ jsx27("div", { className: iconClasses, children: /* @__PURE__ */ jsx27(Icon, { name: iconName[state], size: iconSize[size] }) }),
+    /* @__PURE__ */ jsx27("p", { className: "flex-1", children: props.children }),
+    props.showClose === true && /* @__PURE__ */ jsx27("div", { className: "flex items-center", children: /* @__PURE__ */ jsx27(IconButton, { icon: "close", size: "small", variant: "text", onClick: props.onClickClose }) })
   ] });
 }
 
@@ -1813,7 +1823,7 @@ var PaginationContext = createContext5({
 });
 
 // src/pagination/pagination-button.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function PaginationButton({ page, onClick }) {
   const { currentPage } = useContext6(PaginationContext);
   const buttonClasses = clsx21(
@@ -1824,11 +1834,11 @@ function PaginationButton({ page, onClick }) {
     { "border border-uiBorder02": page === currentPage },
     { "border-transparent": page !== currentPage }
   );
-  return /* @__PURE__ */ jsx27("button", { type: "button", className: buttonClasses, onClick: () => onClick(page), children: page });
+  return /* @__PURE__ */ jsx28("button", { type: "button", className: buttonClasses, onClick: () => onClick(page), children: page });
 }
 
 // src/pagination/pagination.tsx
-import { jsx as jsx28, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs12 } from "react/jsx-runtime";
 var START_PAGE = 1;
 function Pagination({ currentPage, totalPage, sideNumPagesToShow = 3, onClick }) {
   if (totalPage < START_PAGE) {
@@ -1864,14 +1874,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__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     PaginationContext.Provider,
     {
       value: {
         currentPage: clampedCurrentPage
       },
       children: /* @__PURE__ */ jsxs12("ul", { className: "flex gap-1", children: [
-        /* @__PURE__ */ jsx28("li", { className: "flex items-center", children: /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx29("li", { className: "flex items-center", children: /* @__PURE__ */ jsx29(
           IconButton,
           {
             isDisabled: isFirstPage,
@@ -1881,12 +1891,12 @@ function Pagination({ currentPage, totalPage, sideNumPagesToShow = 3, onClick })
             onClick: () => onClick(Math.max(START_PAGE, clampedCurrentPage - 1))
           }
         ) }),
-        /* @__PURE__ */ jsx28("li", { children: /* @__PURE__ */ jsx28(PaginationButton, { onClick: () => onClick(START_PAGE), page: START_PAGE }) }),
-        hasHeadEllipsis && /* @__PURE__ */ jsx28("li", { className: threeDotIconClasses, children: /* @__PURE__ */ jsx28(Icon, { name: "more", size: "small" }) }),
-        pageList.map((page, index) => /* @__PURE__ */ jsx28("li", { children: /* @__PURE__ */ jsx28(PaginationButton, { onClick: () => onClick(page), page }) }, index)),
-        hasTailEllipsis && /* @__PURE__ */ jsx28("li", { className: threeDotIconClasses, children: /* @__PURE__ */ jsx28(Icon, { name: "more", size: "small" }) }),
-        hasLastPageButton && /* @__PURE__ */ jsx28("li", { children: /* @__PURE__ */ jsx28(PaginationButton, { onClick: () => onClick(totalPage), page: totalPage }) }),
-        /* @__PURE__ */ jsx28("li", { className: "flex items-center", children: /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx29("li", { children: /* @__PURE__ */ jsx29(PaginationButton, { onClick: () => onClick(START_PAGE), page: START_PAGE }) }),
+        hasHeadEllipsis && /* @__PURE__ */ jsx29("li", { className: threeDotIconClasses, children: /* @__PURE__ */ jsx29(Icon, { name: "more", size: "small" }) }),
+        pageList.map((page, index) => /* @__PURE__ */ jsx29("li", { children: /* @__PURE__ */ jsx29(PaginationButton, { onClick: () => onClick(page), page }) }, index)),
+        hasTailEllipsis && /* @__PURE__ */ jsx29("li", { className: threeDotIconClasses, children: /* @__PURE__ */ jsx29(Icon, { name: "more", size: "small" }) }),
+        hasLastPageButton && /* @__PURE__ */ jsx29("li", { children: /* @__PURE__ */ jsx29(PaginationButton, { onClick: () => onClick(totalPage), page: totalPage }) }),
+        /* @__PURE__ */ jsx29("li", { className: "flex items-center", children: /* @__PURE__ */ jsx29(
           IconButton,
           {
             isDisabled: isLastPage,
@@ -1920,7 +1930,7 @@ var SelectContext = createContext6({
 import { focusVisible as focusVisible8 } from "@zenkigen-inc/component-theme";
 import clsx22 from "clsx";
 import { useContext as useContext7 } from "react";
-import { jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs13 } from "react/jsx-runtime";
 function SelectItem({ option }) {
   const { setIsOptionListOpen, selectedOption, onChange, isError } = useContext7(SelectContext);
   const handleClickItem = (option2) => {
@@ -1937,10 +1947,10 @@ function SelectItem({ option }) {
       "pr-10": option.id !== selectedOption?.id
     }
   );
-  return /* @__PURE__ */ jsx29("li", { className: "flex w-full items-center", "data-id": option.id, children: /* @__PURE__ */ jsxs13("button", { className: itemClasses, type: "button", onClick: () => handleClickItem(option), children: [
-    option.icon && /* @__PURE__ */ jsx29(Icon, { name: option.icon, size: "small" }),
-    /* @__PURE__ */ jsx29("span", { className: "ml-1 flex-1 truncate text-left", children: option.label }),
-    option.id === selectedOption?.id && /* @__PURE__ */ jsx29("div", { className: "ml-2 flex items-center", children: /* @__PURE__ */ jsx29(Icon, { name: "check", size: "small" }) })
+  return /* @__PURE__ */ jsx30("li", { className: "flex w-full items-center", "data-id": option.id, children: /* @__PURE__ */ jsxs13("button", { className: itemClasses, type: "button", onClick: () => handleClickItem(option), children: [
+    option.icon && /* @__PURE__ */ jsx30(Icon, { name: option.icon, size: "small" }),
+    /* @__PURE__ */ jsx30("span", { className: "ml-1 flex-1 truncate text-left", children: option.label }),
+    option.id === selectedOption?.id && /* @__PURE__ */ jsx30("div", { className: "ml-2 flex items-center", children: /* @__PURE__ */ jsx30(Icon, { name: "check", size: "small" }) })
   ] }) }, option.id);
 }
 
@@ -1948,7 +1958,7 @@ function SelectItem({ option }) {
 import { focusVisible as focusVisible9 } from "@zenkigen-inc/component-theme";
 import clsx23 from "clsx";
 import { forwardRef as forwardRef5, useContext as useContext8, useLayoutEffect as useLayoutEffect2 } from "react";
-import { jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs14 } from "react/jsx-runtime";
 var SelectList = forwardRef5(({ children, maxHeight }, ref) => {
   const { selectedOption, setIsOptionListOpen, variant, placeholder, onChange, floatingStyles, floatingRef } = useContext8(SelectContext);
   const handleClickDeselect = () => {
@@ -1982,13 +1992,13 @@ var SelectList = forwardRef5(({ children, maxHeight }, ref) => {
   );
   return /* @__PURE__ */ jsxs14("ul", { className: listClasses, style: { maxHeight, ...floatingStyles }, ref, children: [
     children,
-    placeholder != null && selectedOption !== null && /* @__PURE__ */ jsx30("li", { children: /* @__PURE__ */ jsx30("button", { className: deselectButtonClasses, type: "button", onClick: handleClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
+    placeholder != null && selectedOption !== null && /* @__PURE__ */ jsx31("li", { children: /* @__PURE__ */ jsx31("button", { className: deselectButtonClasses, type: "button", onClick: handleClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
   ] });
 });
 SelectList.displayName = "SelectList";
 
 // src/select/select.tsx
-import { jsx as jsx31, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs15 } from "react/jsx-runtime";
 var FLOATING_OFFSET = 4;
 function Select({
   children,
@@ -2060,7 +2070,7 @@ function Select({
     "typography-label14regular": size === "small" || size === "medium",
     "typography-label16regular": size === "large"
   });
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     SelectContext.Provider,
     {
       value: {
@@ -2084,9 +2094,9 @@ function Select({
             onClick: handleClickToggle,
             disabled: isDisabled,
             children: [
-              selectedOption?.icon ? /* @__PURE__ */ jsx31("div", { className: "mr-1 flex", children: /* @__PURE__ */ jsx31(Icon, { name: selectedOption.icon, size: size === "large" ? "medium" : "small" }) }) : placeholder != null && placeholderIcon && /* @__PURE__ */ jsx31("div", { className: "mr-1 flex", children: /* @__PURE__ */ jsx31(Icon, { name: placeholderIcon, size: size === "large" ? "medium" : "small" }) }),
-              /* @__PURE__ */ jsx31("div", { className: labelClasses, children: /* @__PURE__ */ jsx31("div", { className: "truncate", children: selectedOption ? selectedOption.label : placeholder != null && placeholder }) }),
-              /* @__PURE__ */ jsx31("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx31(
+              selectedOption?.icon ? /* @__PURE__ */ jsx32("div", { className: "mr-1 flex", children: /* @__PURE__ */ jsx32(Icon, { name: selectedOption.icon, size: size === "large" ? "medium" : "small" }) }) : placeholder != null && placeholderIcon && /* @__PURE__ */ jsx32("div", { className: "mr-1 flex", children: /* @__PURE__ */ jsx32(Icon, { name: placeholderIcon, size: size === "large" ? "medium" : "small" }) }),
+              /* @__PURE__ */ jsx32("div", { className: labelClasses, children: /* @__PURE__ */ jsx32("div", { className: "truncate", children: selectedOption ? selectedOption.label : placeholder != null && placeholder }) }),
+              /* @__PURE__ */ jsx32("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx32(
                 Icon,
                 {
                   name: isOptionListOpen ? "angle-small-up" : "angle-small-down",
@@ -2096,7 +2106,7 @@ function Select({
             ]
           }
         ),
-        isOptionListOpen && !isDisabled && /* @__PURE__ */ jsx31(FloatingPortal2, { children: /* @__PURE__ */ jsx31("div", { className: "relative z-overlay", children: /* @__PURE__ */ jsx31(SelectList, { ref: refs.setFloating, maxHeight: optionListMaxHeight, children }) }) })
+        isOptionListOpen && !isDisabled && /* @__PURE__ */ jsx32(FloatingPortal2, { children: /* @__PURE__ */ jsx32("div", { className: "relative z-overlay", children: /* @__PURE__ */ jsx32(SelectList, { ref: refs.setFloating, maxHeight: optionListMaxHeight, children }) }) })
       ] })
     }
   );
@@ -2104,7 +2114,7 @@ function Select({
 Select.Option = SelectItem;
 
 // src/pagination-select/pagination-select.tsx
-import { jsx as jsx32, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs16 } from "react/jsx-runtime";
 function PaginationSelect({
   totalSize,
   currentPage,
@@ -2138,9 +2148,9 @@ function PaginationSelect({
           "/ ",
           totalSize
         ] }),
-        /* @__PURE__ */ jsx32("span", { children: countLabel })
+        /* @__PURE__ */ jsx33("span", { children: countLabel })
       ] }),
-      /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsx33(
         Select,
         {
           size: "medium",
@@ -2149,7 +2159,7 @@ function PaginationSelect({
           optionListMaxHeight,
           onChange: (option) => option && onChange(Number(option.value)),
           isDisabled: pageMax === 0,
-          children: optionsList.map((option) => /* @__PURE__ */ jsx32(Select.Option, { option }, option.id))
+          children: optionsList.map((option) => /* @__PURE__ */ jsx33(Select.Option, { option }, option.id))
         }
       ),
       /* @__PURE__ */ jsxs16("div", { className: "typography-label14regular text-text02", children: [
@@ -2159,7 +2169,7 @@ function PaginationSelect({
       ] })
     ] }),
     /* @__PURE__ */ jsxs16("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsx33(
         IconButton,
         {
           variant: "text",
@@ -2169,7 +2179,7 @@ function PaginationSelect({
           onClick: onClickPrevButton
         }
       ),
-      /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsx33(
         IconButton,
         {
           variant: "text",
@@ -2204,17 +2214,17 @@ var useTextInputCompoundContext = (componentName) => {
 // src/text-input/text-input-error-message.tsx
 import { clsx as clsx25 } from "clsx";
 import { forwardRef as forwardRef6 } from "react";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var TextInputErrorMessage = forwardRef6(
   ({ "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 = clsx25(typographyClass, "text-supportError");
-    return /* @__PURE__ */ jsx33("div", { ref, className: errorMessageClassName, "aria-live": ariaLive, ...props });
+    return /* @__PURE__ */ jsx34("div", { ref, className: errorMessageClassName, "aria-live": ariaLive, ...props });
   }
 );
 TextInputErrorMessage.displayName = "TextInput.ErrorMessage";
@@ -2222,17 +2232,17 @@ TextInputErrorMessage.displayName = "TextInput.ErrorMessage";
 // src/text-input/text-input-helper-message.tsx
 import { clsx as clsx26 } from "clsx";
 import { forwardRef as forwardRef7 } from "react";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var TextInputHelperMessage = forwardRef7((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 = clsx26(typographyClass, "text-text02");
-  return /* @__PURE__ */ jsx34("div", { ref, className: helperMessageClassName, ...props });
+  return /* @__PURE__ */ jsx35("div", { ref, className: helperMessageClassName, ...props });
 });
 TextInputHelperMessage.displayName = "TextInput.HelperMessage";
 
 // src/text-input/text-input.tsx
-import { jsx as jsx35, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs17 } from "react/jsx-runtime";
 function TextInputInner({
   size = "medium",
   isError = false,
@@ -2312,7 +2322,7 @@ function TextInputInner({
     "pr-2": size === "medium" && hasTrailingElement,
     "pr-3": size === "large" && hasTrailingElement
   });
-  const inputClasses = clsx27("flex-1 outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder", {
+  const inputClasses = clsx27("flex-1 outline-none placeholder:text-textPlaceholder disabled:text-textPlaceholder", {
     ["typography-label14regular min-h-8 px-2"]: size === "medium",
     ["typography-label16regular min-h-10 px-3"]: size === "large",
     "text-text01": !isError,
@@ -2320,16 +2330,16 @@ function TextInputInner({
     "pr-0": hasTrailingElement
   });
   const inputElement = /* @__PURE__ */ jsxs17("div", { className: inputWrapClasses, children: [
-    /* @__PURE__ */ jsx35("input", { ref, size: 1, className: inputClasses, ...mergedInputProps }),
+    /* @__PURE__ */ jsx36("input", { ref, size: 1, className: inputClasses, ...mergedInputProps }),
     after,
-    isShowClearButton && /* @__PURE__ */ jsx35(IconButton, { variant: "text", icon: "close", size: "small", onClick: onClickClearButton })
+    isShowClearButton && /* @__PURE__ */ jsx36(IconButton, { variant: "text", icon: "close", size: "small", onClick: onClickClearButton })
   ] });
   const stackedChildren = enhancedChildren == null ? [] : Children2.toArray(enhancedChildren);
   const hasMessageChildren = stackedChildren.length > 0;
   if (!hasMessageChildren) {
-    return /* @__PURE__ */ jsx35(TextInputCompoundContext.Provider, { value: contextValue, children: inputElement });
+    return /* @__PURE__ */ jsx36(TextInputCompoundContext.Provider, { value: contextValue, children: inputElement });
   }
-  return /* @__PURE__ */ jsx35(TextInputCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-2", children: [
+  return /* @__PURE__ */ jsx36(TextInputCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-2", children: [
     inputElement,
     stackedChildren
   ] }) });
@@ -2352,14 +2362,14 @@ var TextInput = attachStatics(TextInputPublic);
 var InternalTextInput = attachStatics(InternalTextInputBase);
 
 // src/password-input/password-input.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var PasswordInputBase = forwardRef9(function PasswordInput({ disabled = false, children, ...props }, ref) {
   const [isPasswordVisible, setIsPasswordVisible] = useState9(false);
   const { className: _className, ...textInputProps } = props;
   const handlePasswordVisibilityToggle = () => {
     setIsPasswordVisible((prev) => !prev);
   };
-  const passwordToggleButton = /* @__PURE__ */ jsx36(
+  const passwordToggleButton = /* @__PURE__ */ jsx37(
     IconButton,
     {
       variant: "text",
@@ -2370,7 +2380,7 @@ var PasswordInputBase = forwardRef9(function PasswordInput({ disabled = false, c
       "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__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     InternalTextInput,
     {
       ref,
@@ -2392,9 +2402,9 @@ var PasswordInput2 = Object.assign(PasswordInputBase, {
 import { useContext as useContext11 } from "react";
 
 // src/popup/popup-body.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 function PopupBody({ children }) {
-  return /* @__PURE__ */ jsx37("div", { className: "overflow-y-auto", children });
+  return /* @__PURE__ */ jsx38("div", { className: "overflow-y-auto", children });
 }
 
 // src/popup/popup-context.ts
@@ -2405,14 +2415,14 @@ var PopupContext = createContext8({
 });
 
 // src/popup/popup-footer.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 function PopupFooter({ children }) {
-  return /* @__PURE__ */ jsx38("div", { className: "flex w-full shrink-0 items-center rounded-b-lg px-6 py-3", children });
+  return /* @__PURE__ */ jsx39("div", { className: "flex w-full shrink-0 items-center rounded-b-lg px-6 py-3", children });
 }
 
 // src/popup/popup-header.tsx
 import { useContext as useContext10 } from "react";
-import { jsx as jsx39, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs18 } from "react/jsx-runtime";
 function PopupHeader({ children, before }) {
   const { onClose } = useContext10(PopupContext);
   return /* @__PURE__ */ jsxs18("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: [
@@ -2420,12 +2430,12 @@ function PopupHeader({ children, before }) {
       before,
       children
     ] }),
-    onClose && /* @__PURE__ */ jsx39(IconButton, { icon: "close", size: "small", variant: "text", onClick: onClose })
+    onClose && /* @__PURE__ */ jsx40(IconButton, { icon: "close", size: "small", variant: "text", onClick: onClose })
   ] });
 }
 
 // src/popup/popup.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var LIMIT_WIDTH2 = 320;
 var LIMIT_HEIGHT2 = 184;
 function useOptionalPopoverContext() {
@@ -2440,7 +2450,7 @@ function Popup({ children, isOpen: controlledIsOpen, width = 480, height, onClos
   if (!isOpen) {
     return null;
   }
-  return /* @__PURE__ */ jsx40(PopupContext.Provider, { value: { isOpen, onClose }, children: /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(PopupContext.Provider, { value: { isOpen, onClose }, children: /* @__PURE__ */ jsx41(
     "div",
     {
       className: "grid max-h-full grid-rows-[max-content_1fr_max-content] flex-col rounded-lg bg-uiBackground01 shadow-floatingShadow",
@@ -2457,7 +2467,7 @@ Popup.Footer = PopupFooter;
 import { focusVisible as focusVisible11 } from "@zenkigen-inc/component-theme";
 import clsx28 from "clsx";
 import { useCallback as useCallback8, useState as useState10 } from "react";
-import { jsx as jsx41, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs19 } from "react/jsx-runtime";
 function Radio({ name, value, id, label, isChecked = false, isDisabled = false, onChange }) {
   const [isMouseOver, setIsMouseOver] = useState10(false);
   const handleMouseOverInput = useCallback8(() => {
@@ -2500,7 +2510,7 @@ function Radio({ name, value, id, label, isChecked = false, isDisabled = false,
   });
   return /* @__PURE__ */ jsxs19("div", { className: "flex items-center", children: [
     /* @__PURE__ */ jsxs19("div", { className: "flex size-6 items-center justify-center", children: [
-      /* @__PURE__ */ jsx41(
+      /* @__PURE__ */ jsx42(
         "input",
         {
           type: "checkbox",
@@ -2515,32 +2525,32 @@ function Radio({ name, value, id, label, isChecked = false, isDisabled = false,
           className: inputClasses
         }
       ),
-      /* @__PURE__ */ jsx41("div", { className: boxClasses, children: /* @__PURE__ */ jsxs19("div", { className: "relative flex size-5 flex-[0_0_auto] items-center justify-center", children: [
-        /* @__PURE__ */ jsx41("span", { className: afterClasses }),
-        /* @__PURE__ */ jsx41("span", { className: hoverIndicatorClasses })
+      /* @__PURE__ */ jsx42("div", { className: boxClasses, children: /* @__PURE__ */ jsxs19("div", { className: "relative flex size-5 flex-[0_0_auto] items-center justify-center", children: [
+        /* @__PURE__ */ jsx42("span", { className: afterClasses }),
+        /* @__PURE__ */ jsx42("span", { className: hoverIndicatorClasses })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx41("label", { htmlFor: id, className: labelClasses, children: label })
+    /* @__PURE__ */ jsx42("label", { htmlFor: id, className: labelClasses, children: label })
   ] });
 }
 
 // src/search/search.tsx
 import { clsx as clsx29 } from "clsx";
 import { forwardRef as forwardRef10 } from "react";
-import { jsx as jsx42, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs20 } from "react/jsx-runtime";
 var Search = forwardRef10(({ width = "100%", size = "medium", ...props }, ref) => {
   const classes = clsx29(
     "flex items-center rounded-full border border-uiBorder02 bg-uiBackground01 focus-within:border-activeInput",
     { "h-8 px-3": size === "medium" },
     { "h-10 px-4": size === "large" }
   );
-  const inputClasses = clsx29("mx-2 h-full flex-1 text-text01 outline-0 placeholder:text-textPlaceholder", {
+  const inputClasses = clsx29("mx-2 h-full flex-1 text-text01 outline-none placeholder:text-textPlaceholder", {
     ["typography-label14regular"]: size === "medium",
     ["typography-label16regular"]: size === "large"
   });
-  return /* @__PURE__ */ jsx42("div", { className: "relative", ref, children: /* @__PURE__ */ jsx42("form", { onSubmit: props.onSubmit, children: /* @__PURE__ */ jsxs20("div", { className: classes, style: { width }, children: [
-    /* @__PURE__ */ jsx42(Icon, { name: "search", color: "icon01", size: "medium" }),
-    /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43("div", { className: "relative", ref, children: /* @__PURE__ */ jsx43("form", { onSubmit: props.onSubmit, children: /* @__PURE__ */ jsxs20("div", { className: classes, style: { width }, children: [
+    /* @__PURE__ */ jsx43(Icon, { name: "search", color: "icon01", size: "medium" }),
+    /* @__PURE__ */ jsx43(
       "input",
       {
         type: "text",
@@ -2551,7 +2561,7 @@ var Search = forwardRef10(({ width = "100%", size = "medium", ...props }, ref) =
         onChange: props.onChange
       }
     ),
-    props.onClickClearButton && props.value && props.value.length !== 0 && /* @__PURE__ */ jsx42(
+    props.onClickClearButton && props.value && props.value.length !== 0 && /* @__PURE__ */ jsx43(
       IconButton,
       {
         variant: "text",
@@ -2576,7 +2586,7 @@ var SegmentedControlContext = createContext9(null);
 import { focusVisible as focusVisible12 } from "@zenkigen-inc/component-theme";
 import { clsx as clsx30 } from "clsx";
 import { useContext as useContext12, useEffect as useEffect6, useRef as useRef7 } from "react";
-import { jsx as jsx43, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs21 } from "react/jsx-runtime";
 var SegmentedControlItem = ({
   label,
   value,
@@ -2652,7 +2662,7 @@ var SegmentedControlItem = ({
       onMouseDown: handleMouseDown,
       ...rest,
       children: [
-        Boolean(icon) === true && icon && /* @__PURE__ */ jsx43(
+        Boolean(icon) === true && icon && /* @__PURE__ */ jsx44(
           "span",
           {
             className: clsx30("flex items-center", {
@@ -2660,17 +2670,17 @@ var SegmentedControlItem = ({
               "fill-interactive01": isSelected === true && isOptionDisabled === false,
               "fill-icon01": isSelected === false && isOptionDisabled === false
             }),
-            children: /* @__PURE__ */ jsx43(Icon, { name: icon, size: "small" })
+            children: /* @__PURE__ */ jsx44(Icon, { name: icon, size: "small" })
           }
         ),
-        Boolean(label) === true && /* @__PURE__ */ jsx43("span", { className: "whitespace-nowrap", children: label })
+        Boolean(label) === true && /* @__PURE__ */ jsx44("span", { className: "whitespace-nowrap", children: label })
       ]
     }
   );
 };
 
 // src/segmented-control/segmented-control.tsx
-import { Fragment as Fragment5, jsx as jsx44 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx45 } from "react/jsx-runtime";
 var SegmentedControl = ({
   children,
   value,
@@ -2715,7 +2725,7 @@ var SegmentedControl = ({
     onBlur: handleBlurRovingFocus,
     values: itemIds
   };
-  return /* @__PURE__ */ jsx44(Fragment5, { children: /* @__PURE__ */ jsx44(SegmentedControlContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(Fragment5, { children: /* @__PURE__ */ jsx45(SegmentedControlContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx45(
     "div",
     {
       ref: containerRef,
@@ -2743,7 +2753,7 @@ import clsx32 from "clsx";
 // src/select-sort/select-item.tsx
 import { focusVisible as focusVisible13 } from "@zenkigen-inc/component-theme";
 import clsx31 from "clsx";
-import { jsx as jsx45, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs22 } from "react/jsx-runtime";
 function SelectItem2({ children, isSortKey, onClickItem }) {
   const itemClasses = clsx31(
     "typography-label14regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02",
@@ -2753,14 +2763,14 @@ function SelectItem2({ children, isSortKey, onClickItem }) {
       "bg-uiBackground01 fill-icon01 text-interactive02": !isSortKey
     }
   );
-  return /* @__PURE__ */ jsx45("li", { className: "flex w-full items-center", onClick: onClickItem, children: /* @__PURE__ */ jsxs22("button", { className: itemClasses, type: "button", children: [
-    /* @__PURE__ */ jsx45("span", { className: "ml-1 mr-6", children }),
-    isSortKey && /* @__PURE__ */ jsx45("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx45(Icon, { name: "check", size: "small" }) })
+  return /* @__PURE__ */ jsx46("li", { className: "flex w-full items-center", onClick: onClickItem, children: /* @__PURE__ */ jsxs22("button", { className: itemClasses, type: "button", children: [
+    /* @__PURE__ */ jsx46("span", { className: "ml-1 mr-6", children }),
+    isSortKey && /* @__PURE__ */ jsx46("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx46(Icon, { name: "check", size: "small" }) })
   ] }) });
 }
 
 // src/select-sort/select-list.tsx
-import { jsx as jsx46, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs23 } from "react/jsx-runtime";
 function SelectList2({ size, variant, sortOrder, onClickItem, onClickDeselect }) {
   const listClasses = clsx32(
     "absolute z-dropdown w-max overflow-y-auto rounded bg-uiBackground01 py-2 shadow-floatingShadow",
@@ -2776,14 +2786,14 @@ function SelectList2({ size, variant, sortOrder, onClickItem, onClickDeselect })
     focusVisible14.inset
   );
   return /* @__PURE__ */ jsxs23("ul", { className: listClasses, children: [
-    /* @__PURE__ */ jsx46(SelectItem2, { isSortKey: sortOrder === "ascend", onClickItem: () => onClickItem("ascend"), children: "\u6607\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
-    /* @__PURE__ */ jsx46(SelectItem2, { isSortKey: sortOrder === "descend", onClickItem: () => onClickItem("descend"), children: "\u964D\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
-    sortOrder !== null && onClickDeselect && /* @__PURE__ */ jsx46("li", { children: /* @__PURE__ */ jsx46("button", { className: deselectButtonClasses, type: "button", onClick: onClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
+    /* @__PURE__ */ jsx47(SelectItem2, { isSortKey: sortOrder === "ascend", onClickItem: () => onClickItem("ascend"), children: "\u6607\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
+    /* @__PURE__ */ jsx47(SelectItem2, { isSortKey: sortOrder === "descend", onClickItem: () => onClickItem("descend"), children: "\u964D\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
+    sortOrder !== null && onClickDeselect && /* @__PURE__ */ jsx47("li", { children: /* @__PURE__ */ jsx47("button", { className: deselectButtonClasses, type: "button", onClick: onClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
   ] });
 }
 
 // src/select-sort/select-sort.tsx
-import { jsx as jsx47, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs24 } from "react/jsx-runtime";
 function SelectSort({
   size = "medium",
   variant = "outline",
@@ -2835,14 +2845,14 @@ function SelectSort({
   });
   return /* @__PURE__ */ jsxs24("div", { className: wrapperClasses, style: { width }, ref: targetRef, children: [
     /* @__PURE__ */ jsxs24("button", { className: buttonClasses, type: "button", onClick: handleClickToggle, disabled: isDisabled, children: [
-      /* @__PURE__ */ jsx47("div", { className: labelClasses, children: label }),
-      /* @__PURE__ */ jsx47("div", { className: "ml-auto flex items-center", children: isSortKey ? /* @__PURE__ */ jsx47(
+      /* @__PURE__ */ jsx48("div", { className: labelClasses, children: label }),
+      /* @__PURE__ */ jsx48("div", { className: "ml-auto flex items-center", children: isSortKey ? /* @__PURE__ */ jsx48(
         Icon,
         {
           name: sortOrder === "ascend" ? "arrow-up" : "arrow-down",
           size: size === "large" ? "medium" : "small"
         }
-      ) : /* @__PURE__ */ jsx47(
+      ) : /* @__PURE__ */ jsx48(
         Icon,
         {
           name: isOptionListOpen ? "angle-small-up" : "angle-small-down",
@@ -2850,7 +2860,7 @@ function SelectSort({
         }
       ) })
     ] }),
-    isOptionListOpen && !isDisabled && /* @__PURE__ */ jsx47(
+    isOptionListOpen && !isDisabled && /* @__PURE__ */ jsx48(
       SelectList2,
       {
         size,
@@ -2867,7 +2877,7 @@ function SelectSort({
 import { buttonColors as buttonColors5, focusVisible as focusVisible16 } from "@zenkigen-inc/component-theme";
 import clsx34 from "clsx";
 import { useCallback as useCallback10 } from "react";
-import { jsx as jsx48, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs25 } from "react/jsx-runtime";
 function SortButton({
   size = "medium",
   width,
@@ -2916,7 +2926,7 @@ function SortButton({
     "mr-1": size === "x-small",
     "mr-2": size !== "x-small"
   });
-  return /* @__PURE__ */ jsx48("div", { className: wrapperClasses, style: { width }, children: /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsx49("div", { className: wrapperClasses, style: { width }, children: /* @__PURE__ */ jsxs25(
     "button",
     {
       className: buttonClasses,
@@ -2927,8 +2937,8 @@ function SortButton({
       "aria-label": ariaLabel,
       "aria-disabled": isDisabled,
       children: [
-        /* @__PURE__ */ jsx48("div", { className: labelClasses, children: label }),
-        /* @__PURE__ */ jsx48("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx48(Icon, { name: getIconName(), size: size === "large" ? "medium" : "small" }) })
+        /* @__PURE__ */ jsx49("div", { className: labelClasses, children: label }),
+        /* @__PURE__ */ jsx49("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx49(Icon, { name: getIconName(), size: size === "large" ? "medium" : "small" }) })
       ]
     }
   ) });
@@ -2940,7 +2950,7 @@ import { Children as Children4 } from "react";
 
 // src/tab/tab-item.tsx
 import { clsx as clsx35 } from "clsx";
-import { jsx as jsx49, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs26 } from "react/jsx-runtime";
 var TabItem = ({ isSelected = false, isDisabled = false, icon, ...props }) => {
   const classes = clsx35(
     "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",
@@ -2965,7 +2975,7 @@ var TabItem = ({ isSelected = false, isDisabled = false, icon, ...props }) => {
       disabled: isDisabled,
       onClick: () => props.onClick(props.id),
       children: [
-        icon != null && /* @__PURE__ */ jsx49("span", { className: iconWrapperClasses, children: /* @__PURE__ */ jsx49(Icon, { name: icon, size: "small" }) }),
+        icon != null && /* @__PURE__ */ jsx50("span", { className: iconWrapperClasses, children: /* @__PURE__ */ jsx50(Icon, { name: icon, size: "small" }) }),
         props.children
       ]
     }
@@ -2973,7 +2983,7 @@ var TabItem = ({ isSelected = false, isDisabled = false, icon, ...props }) => {
 };
 
 // src/tab/tab.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 function Tab({ children, layout = "auto" }) {
   const childrenCount = Children4.count(children);
   const containerStyle = layout === "equal" ? { gridTemplateColumns: `repeat(${childrenCount}, minmax(0,1fr))` } : {};
@@ -2984,28 +2994,28 @@ function Tab({ children, layout = "auto" }) {
       grid: layout === "equal"
     }
   );
-  return /* @__PURE__ */ jsx50("div", { role: "tablist", className: containerClasses, style: containerStyle, children });
+  return /* @__PURE__ */ jsx51("div", { role: "tablist", className: containerClasses, style: containerStyle, children });
 }
 Tab.Item = TabItem;
 
 // src/table/table-cell.tsx
 import clsx37 from "clsx";
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 function TableCell({ children, className, isHeader = false }) {
   const classes = clsx37("border-b border-uiBorder01", { "sticky top-0 z-10 bg-white": isHeader }, className);
-  return /* @__PURE__ */ jsx51("div", { className: classes, children });
+  return /* @__PURE__ */ jsx52("div", { className: classes, children });
 }
 
 // src/table/table-row.tsx
 import clsx38 from "clsx";
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 function TableRow({ children, isHoverBackgroundVisible = false }) {
   const rowClasses = clsx38("contents", isHoverBackgroundVisible && "[&:hover>div]:bg-hoverUi02");
-  return /* @__PURE__ */ jsx52("div", { className: rowClasses, children });
+  return /* @__PURE__ */ jsx53("div", { className: rowClasses, children });
 }
 
 // src/table/table.tsx
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 function Table({
   width,
   templateRows,
@@ -3014,7 +3024,7 @@ function Table({
   autoRows,
   children
 }) {
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx54(
     "div",
     {
       className: "grid",
@@ -3039,7 +3049,7 @@ import clsx40 from "clsx";
 // src/tag/delete-icon.tsx
 import { focusVisible as focusVisible17 } from "@zenkigen-inc/component-theme";
 import clsx39 from "clsx";
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var DeleteIcon = ({ color, variant, onClick }) => {
   const deleteButtonClasses = clsx39(
     "group ml-2 size-[14px] rounded-full p-0.5 hover:cursor-pointer hover:bg-iconOnColor focus-visible:bg-iconOnColor",
@@ -3049,7 +3059,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__ */ jsx54("button", { type: "button", className: deleteButtonClasses, onClick, children: /* @__PURE__ */ jsx54("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx55("button", { type: "button", className: deleteButtonClasses, onClick, children: /* @__PURE__ */ jsx55("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx55(
     "path",
     {
       fillRule: "evenodd",
@@ -3061,7 +3071,7 @@ var DeleteIcon = ({ color, variant, onClick }) => {
 };
 
 // src/tag/tag.tsx
-import { jsx as jsx55, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs27 } from "react/jsx-runtime";
 function Tag({ id, children, color, variant = "normal", size = "medium", isEditable, onDelete }) {
   const wrapperClasses = clsx40("flex", "items-center", "justify-center", {
     [tagColors[color]]: variant === "normal",
@@ -3077,7 +3087,7 @@ function Tag({ id, children, color, variant = "normal", size = "medium", isEdita
   });
   return /* @__PURE__ */ jsxs27("div", { className: wrapperClasses, children: [
     children,
-    isEditable ? /* @__PURE__ */ jsx55(DeleteIcon, { onClick: () => onDelete(id), color, variant }) : null
+    isEditable ? /* @__PURE__ */ jsx56(DeleteIcon, { onClick: () => onDelete(id), color, variant }) : null
   ] });
 }
 
@@ -3099,17 +3109,17 @@ var useTextAreaCompoundContext = (componentName) => {
 // src/text-area/text-area-error-message.tsx
 import { clsx as clsx41 } from "clsx";
 import { forwardRef as forwardRef11 } from "react";
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var TextAreaErrorMessage = forwardRef11(
   ({ "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 = clsx41(typographyClass, "text-supportError");
-    return /* @__PURE__ */ jsx56("div", { ref, className: errorMessageClassName, "aria-live": ariaLive, ...props });
+    return /* @__PURE__ */ jsx57("div", { ref, className: errorMessageClassName, "aria-live": ariaLive, ...props });
   }
 );
 TextAreaErrorMessage.displayName = "TextArea.ErrorMessage";
@@ -3117,17 +3127,17 @@ TextAreaErrorMessage.displayName = "TextArea.ErrorMessage";
 // src/text-area/text-area-helper-message.tsx
 import { clsx as clsx42 } from "clsx";
 import { forwardRef as forwardRef12 } from "react";
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 var TextAreaHelperMessage = forwardRef12((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 = clsx42(typographyClass, "text-text02");
-  return /* @__PURE__ */ jsx57("div", { ref, className: helperMessageClassName, ...props });
+  return /* @__PURE__ */ jsx58("div", { ref, className: helperMessageClassName, ...props });
 });
 TextAreaHelperMessage.displayName = "TextArea.HelperMessage";
 
 // src/text-area/text-area.tsx
-import { jsx as jsx58, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs28 } from "react/jsx-runtime";
 function TextAreaInner({
   size = "medium",
   isResizable = false,
@@ -3138,6 +3148,9 @@ function TextAreaInner({
   height,
   children,
   className,
+  isCounterVisible = false,
+  counterMaxLength,
+  maxLength,
   ...props
 }, ref) {
   const autoGeneratedId = useId4();
@@ -3176,8 +3189,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 ? {
@@ -3187,10 +3204,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 = clsx43(
     "box-border flex w-full overflow-hidden rounded border",
@@ -3205,10 +3224,10 @@ function TextAreaInner({
     className
   );
   const textAreaClassName = clsx43(
-    "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,
@@ -3217,7 +3236,7 @@ function TextAreaInner({
     }
   );
   const hasHeight = height != null && String(height).trim().length > 0;
-  const textAreaElement = /* @__PURE__ */ jsx58(
+  const textAreaElement = /* @__PURE__ */ jsx59(
     "div",
     {
       className: textAreaWrapperClassName,
@@ -3227,7 +3246,7 @@ function TextAreaInner({
         ...!autoHeight && hasHeight ? { height } : {},
         ...autoHeight && hasHeight ? { minHeight: height } : {}
       },
-      children: /* @__PURE__ */ jsx58(
+      children: /* @__PURE__ */ jsx59(
         "textarea",
         {
           ref,
@@ -3242,14 +3261,32 @@ function TextAreaInner({
       )
     }
   );
+  const counterElement = isCounterVisible ? /* @__PURE__ */ jsx59(
+    "div",
+    {
+      id: counterId,
+      className: clsx43(
+        "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 ? [] : Children5.toArray(enhancedChildren);
   const hasMessageChildren = stackedChildren.length > 0;
-  if (!hasMessageChildren) {
-    return /* @__PURE__ */ jsx58(TextAreaCompoundContext.Provider, { value: contextValue, children: textAreaElement });
+  const hasBottomContent = hasMessageChildren || counterElement != null;
+  if (!hasBottomContent) {
+    return /* @__PURE__ */ jsx59(TextAreaCompoundContext.Provider, { value: contextValue, children: textAreaElement });
   }
-  return /* @__PURE__ */ jsx58(TextAreaCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs28("div", { className: "flex flex-col gap-2", children: [
+  return /* @__PURE__ */ jsx59(TextAreaCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs28("div", { className: "flex flex-col gap-2", children: [
     textAreaElement,
-    stackedChildren
+    /* @__PURE__ */ jsxs28("div", { className: "flex items-start justify-between gap-2", children: [
+      hasMessageChildren && /* @__PURE__ */ jsx59("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: stackedChildren }),
+      !hasMessageChildren && counterElement != null && /* @__PURE__ */ jsx59("div", { className: "flex-1" }),
+      counterElement
+    ] })
   ] }) });
 }
 var attachStatics2 = (component) => {
@@ -3266,7 +3303,7 @@ var TextArea = attachStatics2(TextAreaBase);
 // src/toast/toast.tsx
 import clsx44 from "clsx";
 import { useCallback as useCallback11, useEffect as useEffect7, useState as useState12 } from "react";
-import { jsx as jsx59, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs29 } from "react/jsx-runtime";
 var CLOSE_TIME_MSEC = 5e3;
 function Toast({
   state = "information",
@@ -3314,16 +3351,16 @@ function Toast({
     return () => window.clearTimeout(timer);
   }, [isAutoClose]);
   return /* @__PURE__ */ jsxs29("div", { className: wrapperClasses, style: { width }, onAnimationEnd: handleAnimationEnd, children: [
-    /* @__PURE__ */ jsx59("div", { className: iconClasses, children: /* @__PURE__ */ jsx59(Icon, { name: iconName[state] }) }),
-    /* @__PURE__ */ jsx59("p", { className: textClasses, children }),
-    /* @__PURE__ */ jsx59(IconButton, { icon: "close", size: "medium", variant: "text", onClick: handleClose, isNoPadding: true })
+    /* @__PURE__ */ jsx60("div", { className: iconClasses, children: /* @__PURE__ */ jsx60(Icon, { name: iconName[state] }) }),
+    /* @__PURE__ */ jsx60("p", { className: textClasses, children }),
+    /* @__PURE__ */ jsx60(IconButton, { icon: "close", size: "medium", variant: "text", onClick: handleClose, isNoPadding: true })
   ] });
 }
 
 // src/toast/toast-provider.tsx
 import { createContext as createContext11, useCallback as useCallback12, useContext as useContext14, useEffect as useEffect8, useState as useState13 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { jsx as jsx60, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs30 } from "react/jsx-runtime";
 var ToastContext = createContext11({});
 var ToastProvider = ({ children }) => {
   const [isClientRender, setIsClientRender] = useState13(false);
@@ -3340,7 +3377,7 @@ var ToastProvider = ({ children }) => {
   return /* @__PURE__ */ jsxs30(ToastContext.Provider, { value: { addToast, removeToast }, children: [
     children,
     isClientRender && createPortal3(
-      /* @__PURE__ */ jsx60("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__ */ jsx60(Toast, { state, isAutoClose: true, isAnimation: true, onClickClose: () => removeToast(id), width: 475, children: message }, id)) }),
+      /* @__PURE__ */ jsx61("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__ */ jsx61(Toast, { state, isAutoClose: true, isAnimation: true, onClickClose: () => removeToast(id), width: 475, children: message }, id)) }),
       document.body
     )
   ] });
@@ -3351,7 +3388,7 @@ var useToast = () => {
 
 // src/toggle/toggle.tsx
 import clsx45 from "clsx";
-import { jsx as jsx61, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs31 } from "react/jsx-runtime";
 function Toggle({
   id,
   size = "medium",
@@ -3387,8 +3424,8 @@ function Toggle({
     "cursor-pointer text-text01": !isDisabled
   });
   return /* @__PURE__ */ jsxs31("div", { className: "relative flex flex-[0_0_auto] items-center", children: [
-    label != null && labelPosition === "left" && /* @__PURE__ */ jsx61("label", { htmlFor: id, className: labelClasses, children: label }),
-    /* @__PURE__ */ jsx61(
+    label != null && labelPosition === "left" && /* @__PURE__ */ jsx62("label", { htmlFor: id, className: labelClasses, children: label }),
+    /* @__PURE__ */ jsx62(
       "input",
       {
         className: inputClasses,
@@ -3400,8 +3437,8 @@ function Toggle({
         disabled: isDisabled
       }
     ),
-    /* @__PURE__ */ jsx61("div", { className: baseClasses, children: /* @__PURE__ */ jsx61("span", { className: indicatorClasses }) }),
-    label != null && labelPosition === "right" && /* @__PURE__ */ jsx61("label", { htmlFor: id, className: labelClasses, children: label })
+    /* @__PURE__ */ jsx62("div", { className: baseClasses, children: /* @__PURE__ */ jsx62("span", { className: indicatorClasses }) }),
+    label != null && labelPosition === "right" && /* @__PURE__ */ jsx62("label", { htmlFor: id, className: labelClasses, children: label })
   ] });
 }
 
@@ -3414,7 +3451,7 @@ import clsx47 from "clsx";
 
 // src/tooltip/tail-icon.tsx
 import clsx46 from "clsx";
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
 var TailIcon = (props) => {
   const tailClasses = clsx46("absolute fill-uiBackgroundTooltip", {
     "rotate-180": props.verticalPosition === "bottom",
@@ -3431,9 +3468,9 @@ var TailIcon = (props) => {
     "left-1/2 -translate-x-2": props.horizontalAlign === "center" && props.size !== "small"
   });
   if (props.size === "small") {
-    return /* @__PURE__ */ jsx62("svg", { className: tailClasses, width: "8", height: "4", viewBox: "0 0 8 4", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx62("path", { d: "M4 4L0 0H8L4 4Z" }) });
+    return /* @__PURE__ */ jsx63("svg", { className: tailClasses, width: "8", height: "4", viewBox: "0 0 8 4", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx63("path", { d: "M4 4L0 0H8L4 4Z" }) });
   } else {
-    return /* @__PURE__ */ jsx62(
+    return /* @__PURE__ */ jsx63(
       "svg",
       {
         className: tailClasses,
@@ -3442,14 +3479,14 @@ var TailIcon = (props) => {
         viewBox: "0 0 14 8",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        children: /* @__PURE__ */ jsx62("path", { d: "M7 8L0 0H14L7 8Z" })
+        children: /* @__PURE__ */ jsx63("path", { d: "M7 8L0 0H14L7 8Z" })
       }
     );
   }
 };
 
 // src/tooltip/tooltip-content.tsx
-import { jsx as jsx63, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs32 } from "react/jsx-runtime";
 var TooltipContent = ({
   content,
   horizontalAlign,
@@ -3485,7 +3522,7 @@ var TooltipContent = ({
     transform: `translate(${tooltipPosition.translateX}, ${tooltipPosition.translateY})`,
     ...tooltipPosition
   } : {};
-  return /* @__PURE__ */ jsx63("div", { className: tooltipWrapperClasses, style: tooltipWrapperStyle, children: /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsx64("div", { className: tooltipWrapperClasses, style: tooltipWrapperStyle, children: /* @__PURE__ */ jsxs32(
     "div",
     {
       className: tooltipBodyClasses,
@@ -3494,7 +3531,7 @@ var TooltipContent = ({
       },
       children: [
         content,
-        /* @__PURE__ */ jsx63(TailIcon, { size, verticalPosition, horizontalAlign })
+        /* @__PURE__ */ jsx64(TailIcon, { size, verticalPosition, horizontalAlign })
       ]
     }
   ) });
@@ -3555,7 +3592,7 @@ var useTooltip = () => {
 };
 
 // src/tooltip/tooltip.tsx
-import { jsx as jsx64, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs33 } from "react/jsx-runtime";
 function Tooltip({
   children,
   content,
@@ -3602,7 +3639,7 @@ function Tooltip({
       onMouseLeave: handleMouseOutWrapper,
       children: [
         children,
-        isVisible && (portalTarget == null ? /* @__PURE__ */ jsx64(
+        isVisible && (portalTarget == null ? /* @__PURE__ */ jsx65(
           TooltipContent,
           {
             content,
@@ -3613,7 +3650,7 @@ function Tooltip({
             tooltipPosition
           }
         ) : createPortal4(
-          /* @__PURE__ */ jsx64(
+          /* @__PURE__ */ jsx65(
             TooltipContent,
             {
               isPortal: true,
@@ -3637,6 +3674,7 @@ export {
   Button,
   Checkbox,
   DatePicker,
+  Divider,
   Dropdown,
   EvaluationStar,
   FileInput,