@zenkigen-inc/component-ui 1.18.0 → 1.18.1

package/dist/index.js

@@ -45,7 +45,7 @@ __export(index_exports, {
   NotificationInline: () => NotificationInline,
   Pagination: () => Pagination,
   PaginationSelect: () => PaginationSelect,
-  PasswordInput: () => PasswordInput,
+  PasswordInput: () => PasswordInput2,
   Popover: () => Popover,
   PopoverContent: () => PopoverContent,
   PopoverTrigger: () => PopoverTrigger,
@@ -181,7 +181,7 @@ var createButton = (props) => {
     import_component_theme3.buttonColors[variant].disabled,
     import_component_theme3.focusVisible.normal,
     {
-      "h-6 px-2.5": size === "small",
+      "h-6 px-2": size === "small",
       "h-8 px-3": size === "medium",
       "h-10 px-4 leading-[24px]": size === "large",
       "inline-flex": elementAs === "a",
@@ -758,7 +758,8 @@ var FileInput = (0, import_react8.forwardRef)(
         "border-uiBorder03 bg-white text-text01": !isDisabled && !isDragOver && !hasErrors,
         "border-activeInput bg-activeInput/5": !isDisabled && isDragOver && !hasErrors,
         "border-supportDanger bg-white": hasErrors && !isDisabled,
-        "hover:bg-hover02 cursor-pointer": !isDisabled,
+        "cursor-pointer hover:bg-hover02 active:bg-active02": !isDisabled,
+        "hover:bg-uiBackgroundError active:bg-red-red20": !isDisabled && hasErrors,
         "border-disabled01 bg-disabled02 text-textPlaceholder cursor-not-allowed": isDisabled
       }
     );
@@ -1244,47 +1245,69 @@ function PaginationButton({ page, onClick }) {
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var START_PAGE = 1;
 function Pagination({ currentPage, totalPage, sideNumPagesToShow = 3, onClick }) {
-  let center = Math.max(currentPage, START_PAGE + 1);
-  center = Math.min(center, totalPage - 1);
-  const start = Math.max(center - sideNumPagesToShow, START_PAGE + 1);
-  const end = Math.min(center + sideNumPagesToShow, totalPage - 1);
-  const offsetStart = center + sideNumPagesToShow >= totalPage ? totalPage - center - sideNumPagesToShow : 0;
-  const offsetEnd = center <= sideNumPagesToShow ? sideNumPagesToShow - center + 1 : 0;
+  if (totalPage < START_PAGE) {
+    return null;
+  }
+  const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+  const clampedCurrentPage = clamp(currentPage, START_PAGE, totalPage);
+  const maxSideNumPagesToShow = Math.max(0, totalPage - 2);
+  const side = clamp(sideNumPagesToShow, 0, maxSideNumPagesToShow);
+  const minPage = START_PAGE + 1;
+  const maxPage = totalPage - 1;
+  const availablePagesCount = Math.max(0, maxPage - minPage + 1);
+  const hasBothSides = clampedCurrentPage > START_PAGE && clampedCurrentPage < totalPage;
+  const windowSize = Math.min(availablePagesCount, hasBothSides ? side * 2 + 1 : side * 2);
+  let start = minPage;
+  if (windowSize > 0) {
+    if (hasBothSides) {
+      start = Math.max(minPage, Math.min(clampedCurrentPage - side, maxPage - windowSize + 1));
+    } else if (clampedCurrentPage === totalPage) {
+      start = Math.max(minPage, maxPage - windowSize + 1);
+    }
+  }
+  const end = windowSize === 0 ? minPage - 1 : Math.min(maxPage, start + windowSize - 1);
   const pageList = [];
-  for (let i = start + offsetStart; i <= end + offsetEnd; i++) {
+  for (let i = start; i <= end; i++) {
     pageList.push(i);
   }
   const threeDotIconClasses = "flex h-8 w-8 items-center justify-center gap-1 fill-icon01";
+  const isFirstPage = clampedCurrentPage === START_PAGE;
+  const isLastPage = clampedCurrentPage === totalPage;
+  const firstPageInList = pageList.at(0) ?? null;
+  const lastPageInList = pageList.at(-1) ?? null;
+  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_runtime23.jsx)(
     PaginationContext.Provider,
     {
       value: {
-        currentPage
+        currentPage: clampedCurrentPage
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("ul", { className: "flex gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("li", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           IconButton,
           {
-            isDisabled: currentPage === START_PAGE,
+            isDisabled: isFirstPage,
             variant: "text",
             icon: "angle-left",
             size: "small",
-            onClick: () => onClick(currentPage - 1)
+            onClick: () => onClick(Math.max(START_PAGE, clampedCurrentPage - 1))
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PaginationButton, { onClick: () => onClick(START_PAGE), page: START_PAGE }) }),
-        pageList.length !== 0 && pageList[0] !== 2 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("li", { className: threeDotIconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "more", size: "small" }) }),
+        hasHeadEllipsis && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("li", { className: threeDotIconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "more", size: "small" }) }),
         pageList.map((page, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PaginationButton, { onClick: () => onClick(page), page }) }, index)),
-        pageList.length !== 0 && pageList[pageList.length - 1] !== totalPage - 1 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("li", { className: threeDotIconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "more", size: "small" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PaginationButton, { onClick: () => onClick(totalPage), page: totalPage }) }),
+        hasTailEllipsis && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("li", { className: threeDotIconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "more", size: "small" }) }),
+        hasLastPageButton && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PaginationButton, { onClick: () => onClick(totalPage), page: totalPage }) }),
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("li", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           IconButton,
           {
-            isDisabled: currentPage === totalPage,
+            isDisabled: isLastPage,
             variant: "text",
             icon: "angle-right",
             size: "small",
-            onClick: () => onClick(currentPage + 1)
+            onClick: () => onClick(Math.min(totalPage, clampedCurrentPage + 1))
           }
         ) })
       ] })
@@ -1564,50 +1587,182 @@ function PaginationSelect({
 }
 
 // src/password-input/password-input.tsx
-var import_react22 = require("react");
+var import_react25 = require("react");
 
 // src/text-input/text-input.tsx
-var import_clsx20 = require("clsx");
+var import_clsx22 = require("clsx");
+var import_react24 = require("react");
+
+// src/text-input/text-input-context.tsx
 var import_react21 = require("react");
+var TextInputCompoundContext = (0, import_react21.createContext)(null);
+var useTextInputCompoundContext = (componentName) => {
+  const context = (0, import_react21.useContext)(TextInputCompoundContext);
+  if (context == null) {
+    throw new Error(`${componentName} \u3092\u4F7F\u7528\u3059\u308B\u306B\u306F TextInput \u306E\u5B50\u8981\u7D20\u3068\u3057\u3066\u914D\u7F6E\u3059\u308B\u5FC5\u8981\u304C\u3042\u308B\u3002`);
+  }
+  return context;
+};
+
+// src/text-input/text-input-error-message.tsx
+var import_clsx20 = require("clsx");
+var import_react22 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var TextInput = (0, import_react21.forwardRef)(
-  ({ size = "medium", isError = false, disabled = false, onClickClearButton, after, ...props }, ref) => {
-    const isShowClearButton = !!onClickClearButton && props.value.length !== 0 && !disabled;
-    const hasTrailingElement = isShowClearButton || after != null;
-    const inputWrapClasses = (0, import_clsx20.clsx)("relative flex items-center gap-2 overflow-hidden rounded border", {
-      "border-uiBorder02": !isError && !disabled,
-      "border-supportError": isError && !disabled,
-      "hover:border-hoverInput": !disabled && !isError,
-      "hover:focus-within:border-activeInput": !isError,
-      "focus-within:border-activeInput": !isError,
-      "bg-disabled02 border-disabled01": disabled,
-      "pr-2": size === "medium" && hasTrailingElement,
-      "pr-3": size === "large" && hasTrailingElement
-    });
-    const inputClasses = (0, import_clsx20.clsx)("flex-1 outline-0 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
-    });
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: inputWrapClasses, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("input", { ref, size: 1, className: inputClasses, disabled, onChange: props.onChange, ...props }),
-      after,
-      isShowClearButton && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(IconButton, { variant: "text", icon: "close", size: "small", onClick: onClickClearButton })
-    ] });
+var TextInputErrorMessage = (0, import_react22.forwardRef)(
+  ({ "aria-live": ariaLive = "assertive", ...props }, ref) => {
+    const { inputProps } = useTextInputCompoundContext("TextInput.ErrorMessage");
+    const typographyClass = inputProps.size === "large" ? "typography-label12regular" : "typography-label11regular";
+    const shouldRender = inputProps.isError === true;
+    if (!shouldRender) {
+      return null;
+    }
+    const errorMessageClassName = (0, import_clsx20.clsx)(typographyClass, "text-supportError");
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ref, className: errorMessageClassName, "aria-live": ariaLive, ...props });
   }
 );
-TextInput.displayName = "TextInput";
+TextInputErrorMessage.displayName = "TextInput.ErrorMessage";
 
-// src/password-input/password-input.tsx
+// src/text-input/text-input-helper-message.tsx
+var import_clsx21 = require("clsx");
+var import_react23 = require("react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var PasswordInput = (0, import_react22.forwardRef)(({ disabled = false, ...props }, ref) => {
-  const [isPasswordVisible, setIsPasswordVisible] = (0, import_react22.useState)(false);
+var TextInputHelperMessage = (0, import_react23.forwardRef)((props, ref) => {
+  const { inputProps } = useTextInputCompoundContext("TextInput.HelperMessage");
+  const typographyClass = inputProps.size === "large" ? "typography-label12regular" : "typography-label11regular";
+  const helperMessageClassName = (0, import_clsx21.clsx)(typographyClass, "text-text02");
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { ref, className: helperMessageClassName, ...props });
+});
+TextInputHelperMessage.displayName = "TextInput.HelperMessage";
+
+// src/text-input/text-input.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+function TextInputInner({
+  size = "medium",
+  isError = false,
+  disabled = false,
+  onClickClearButton,
+  after,
+  children,
+  ...props
+}, ref) {
+  const autoGeneratedId = (0, import_react24.useId)();
+  const { className: _className, ...restInputProps } = props;
+  const inputPropsForContext = (0, import_react24.useMemo)(
+    () => ({
+      ...restInputProps,
+      size,
+      isError,
+      disabled,
+      onClickClearButton,
+      after
+    }),
+    [restInputProps, size, isError, disabled, onClickClearButton, after]
+  );
+  const contextValue = (0, import_react24.useMemo)(
+    () => ({
+      inputProps: inputPropsForContext,
+      forwardedRef: ref
+    }),
+    [inputPropsForContext, ref]
+  );
+  const helperMessageIds = [];
+  const errorIds = [];
+  const describedByBaseId = restInputProps.id ?? autoGeneratedId;
+  const enhancedChildren = import_react24.Children.map(children, (child) => {
+    if (!(0, import_react24.isValidElement)(child)) {
+      return child;
+    }
+    if (child.type === TextInputHelperMessage) {
+      const helperChild = child;
+      const assignedId = helperChild.props.id ?? `${describedByBaseId}-helper-${helperMessageIds.length + 1}`;
+      helperMessageIds.push(assignedId);
+      return (0, import_react24.cloneElement)(helperChild, { id: assignedId });
+    }
+    if (child.type === TextInputErrorMessage && isError) {
+      const errorChild = child;
+      const assignedId = errorChild.props.id ?? `${describedByBaseId}-error-${errorIds.length + 1}`;
+      errorIds.push(assignedId);
+      return (0, import_react24.cloneElement)(errorChild, { id: assignedId });
+    }
+    return child;
+  });
+  const describedByFromProps = typeof restInputProps["aria-describedby"] === "string" ? restInputProps["aria-describedby"] : null;
+  const describedByList = [describedByFromProps, ...helperMessageIds, ...errorIds].filter(
+    (id) => typeof id === "string" && id.trim().length > 0
+  );
+  const describedByProps = describedByList.length > 0 ? {
+    "aria-describedby": describedByList.join(" ")
+  } : {};
+  const shouldMarkInvalid = isError === true || errorIds.length > 0;
+  const ariaInvalidFromProps = restInputProps["aria-invalid"];
+  const ariaInvalidValue = ariaInvalidFromProps != null ? ariaInvalidFromProps : shouldMarkInvalid ? true : null;
+  const ariaInvalidProps = ariaInvalidValue == null ? {} : { "aria-invalid": ariaInvalidValue };
+  const mergedInputProps = {
+    ...restInputProps,
+    ...describedByProps,
+    ...ariaInvalidProps,
+    disabled
+  };
+  const isShowClearButton = !!onClickClearButton && restInputProps.value.length !== 0 && !disabled;
+  const hasTrailingElement = isShowClearButton || after != null;
+  const inputWrapClasses = (0, import_clsx22.clsx)("relative flex items-center gap-2 overflow-hidden rounded border", {
+    "border-uiBorder02": !isError && !disabled,
+    "border-supportError": isError && !disabled,
+    "hover:border-hoverInput": !disabled && !isError,
+    "hover:focus-within:border-activeInput": !isError,
+    "focus-within:border-activeInput": !isError,
+    "bg-disabled02 border-disabled01": disabled,
+    "pr-2": size === "medium" && hasTrailingElement,
+    "pr-3": size === "large" && hasTrailingElement
+  });
+  const inputClasses = (0, import_clsx22.clsx)("flex-1 outline-0 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_runtime30.jsxs)("div", { className: inputWrapClasses, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("input", { ref, size: 1, className: inputClasses, ...mergedInputProps }),
+    after,
+    isShowClearButton && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconButton, { variant: "text", icon: "close", size: "small", onClick: onClickClearButton })
+  ] });
+  const stackedChildren = enhancedChildren == null ? [] : import_react24.Children.toArray(enhancedChildren);
+  const hasMessageChildren = stackedChildren.length > 0;
+  if (!hasMessageChildren) {
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TextInputCompoundContext.Provider, { value: contextValue, children: inputElement });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TextInputCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col gap-2", children: [
+    inputElement,
+    stackedChildren
+  ] }) });
+}
+var attachStatics = (component) => {
+  component.HelperMessage = TextInputHelperMessage;
+  component.ErrorMessage = TextInputErrorMessage;
+  component.displayName = "TextInput";
+  return component;
+};
+var TextInputPublic = (0, import_react24.forwardRef)(function TextInputPublic2(props, ref) {
+  return TextInputInner(props, ref);
+});
+var InternalTextInputBase = (0, import_react24.forwardRef)(
+  function InternalTextInputBase2(props, ref) {
+    return TextInputInner(props, ref);
+  }
+);
+var TextInput = attachStatics(TextInputPublic);
+var InternalTextInput = attachStatics(InternalTextInputBase);
+
+// src/password-input/password-input.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var PasswordInputBase = (0, import_react25.forwardRef)(function PasswordInput({ disabled = false, children, ...props }, ref) {
+  const [isPasswordVisible, setIsPasswordVisible] = (0, import_react25.useState)(false);
+  const { className: _className, ...textInputProps } = props;
   const handlePasswordVisibilityToggle = () => {
-    setIsPasswordVisible(!isPasswordVisible);
+    setIsPasswordVisible((prev) => !prev);
   };
-  const passwordToggleButton = /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  const passwordToggleButton = /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     IconButton,
     {
       variant: "text",
@@ -1618,27 +1773,32 @@ var PasswordInput = (0, import_react22.forwardRef)(({ disabled = false, ...props
       "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_runtime29.jsx)(
-    TextInput,
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    InternalTextInput,
     {
       ref,
       type: isPasswordVisible === true ? "text" : "password",
       disabled,
-      ...props,
-      ...{ after: passwordToggleButton }
+      after: passwordToggleButton,
+      ...textInputProps,
+      children
     }
   );
 });
-PasswordInput.displayName = "PasswordInput";
+var PasswordInput2 = Object.assign(PasswordInputBase, {
+  HelperMessage: TextInputHelperMessage,
+  ErrorMessage: TextInputErrorMessage,
+  displayName: "PasswordInput"
+});
 
 // src/popover/popover.tsx
-var import_react27 = require("@floating-ui/react");
-var import_react28 = require("react");
+var import_react30 = require("@floating-ui/react");
+var import_react31 = require("react");
 
 // src/popover/popover-content.tsx
-var import_react24 = require("@floating-ui/react");
+var import_react27 = require("@floating-ui/react");
 var React = __toESM(require("react"));
-var import_react25 = require("react");
+var import_react28 = require("react");
 
 // src/utils/react-utils.ts
 function composeRefs(...refs) {
@@ -1660,10 +1820,10 @@ function isElement(node) {
 }
 
 // src/popover/popover-context.ts
-var import_react23 = require("react");
-var PopoverContext = (0, import_react23.createContext)(null);
+var import_react26 = require("react");
+var PopoverContext = (0, import_react26.createContext)(null);
 var usePopoverContext = () => {
-  const context = (0, import_react23.useContext)(PopoverContext);
+  const context = (0, import_react26.useContext)(PopoverContext);
   if (context == null) {
     throw new Error("Popover components must be used inside <Popover.Root>");
   }
@@ -1671,10 +1831,10 @@ var usePopoverContext = () => {
 };
 
 // src/popover/popover-content.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var PopoverContent = (0, import_react25.forwardRef)(function PopoverContent2({ children }, ref) {
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var PopoverContent = (0, import_react28.forwardRef)(function PopoverContent2({ children }, ref) {
   const { isOpen, triggerRef, floating, panelId, onClose } = usePopoverContext();
-  const shouldCloseOnOutsidePress = (0, import_react25.useCallback)(
+  const shouldCloseOnOutsidePress = (0, import_react28.useCallback)(
     (event) => {
       const target = event.target;
       if (!(target instanceof Element)) {
@@ -1690,24 +1850,24 @@ var PopoverContent = (0, import_react25.forwardRef)(function PopoverContent2({ c
     },
     [floating.refs.floating]
   );
-  const dismiss = (0, import_react24.useDismiss)(floating.context, {
+  const dismiss = (0, import_react27.useDismiss)(floating.context, {
     outsidePressEvent: "pointerdown",
     outsidePress: shouldCloseOnOutsidePress,
     escapeKey: false
   });
-  const interactions = (0, import_react24.useInteractions)([dismiss, (0, import_react24.useRole)(floating.context, { role: "dialog" })]);
-  (0, import_react25.useEffect)(() => {
+  const interactions = (0, import_react27.useInteractions)([dismiss, (0, import_react27.useRole)(floating.context, { role: "dialog" })]);
+  (0, import_react28.useEffect)(() => {
     if (isOpen) {
       const element = floating.refs.floating.current;
       element?.focus?.({ preventScroll: true });
     }
   }, [isOpen, floating.refs.floating]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (!isOpen) {
       triggerRef.current?.focus({ preventScroll: true });
     }
   }, [isOpen, triggerRef]);
-  const handleKeyDown = (0, import_react25.useCallback)(
+  const handleKeyDown = (0, import_react28.useCallback)(
     (event) => {
       if (event.key === "Escape") {
         event.stopPropagation();
@@ -1727,7 +1887,7 @@ var PopoverContent = (0, import_react25.forwardRef)(function PopoverContent2({ c
       ...childProps.role == null && { role: "dialog" }
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react24.FloatingPortal, { children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react27.FloatingPortal, { children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
     {
       ...interactions.getFloatingProps({
@@ -1748,8 +1908,8 @@ var PopoverContent = (0, import_react25.forwardRef)(function PopoverContent2({ c
 
 // src/popover/popover-trigger.tsx
 var React2 = __toESM(require("react"));
-var import_react26 = require("react");
-var PopoverTrigger = (0, import_react26.forwardRef)(function PopoverTrigger2({ children }, ref) {
+var import_react29 = require("react");
+var PopoverTrigger = (0, import_react29.forwardRef)(function PopoverTrigger2({ children }, ref) {
   const { isOpen, floating, triggerRef, anchorRef, panelId } = usePopoverContext();
   if (!isElement(children)) {
     return null;
@@ -1777,7 +1937,7 @@ var PopoverTrigger = (0, import_react26.forwardRef)(function PopoverTrigger2({ c
 });
 
 // src/popover/popover.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function Popover({
   isOpen,
   children,
@@ -1786,8 +1946,8 @@ function Popover({
   onClose,
   anchorRef
 }) {
-  const triggerRef = (0, import_react28.useRef)(null);
-  const floating = (0, import_react27.useFloating)({
+  const triggerRef = (0, import_react31.useRef)(null);
+  const floating = (0, import_react30.useFloating)({
     open: isOpen,
     onOpenChange: (open) => {
       if (!open && onClose != null) {
@@ -1795,18 +1955,18 @@ function Popover({
       }
     },
     placement,
-    middleware: [(0, import_react27.offset)(offsetValue)],
-    whileElementsMounted: import_react27.autoUpdate,
+    middleware: [(0, import_react30.offset)(offsetValue)],
+    whileElementsMounted: import_react30.autoUpdate,
     strategy: "fixed"
   });
-  (0, import_react28.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (anchorRef?.current) {
       floating.refs.setReference(anchorRef.current);
     }
   }, [anchorRef, floating.refs]);
-  const contentId = (0, import_react27.useId)() ?? "";
+  const contentId = (0, import_react30.useId)() ?? "";
   const panelId = `${contentId}-panel`;
-  const contextValue = (0, import_react28.useMemo)(
+  const contextValue = (0, import_react31.useMemo)(
     () => ({
       isOpen,
       triggerRef,
@@ -1818,53 +1978,53 @@ function Popover({
     }),
     [isOpen, triggerRef, anchorRef, floating, contentId, panelId, onClose]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PopoverContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PopoverContext.Provider, { value: contextValue, children });
 }
 Popover.Trigger = PopoverTrigger;
 Popover.Content = PopoverContent;
 
 // src/popup/popup.tsx
-var import_react31 = require("react");
+var import_react34 = require("react");
 
 // src/popup/popup-body.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function PopupBody({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "overflow-y-auto", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "overflow-y-auto", children });
 }
 
 // src/popup/popup-context.ts
-var import_react29 = require("react");
-var PopupContext = (0, import_react29.createContext)({
+var import_react32 = require("react");
+var PopupContext = (0, import_react32.createContext)({
   isOpen: false,
   onClose: () => null
 });
 
 // src/popup/popup-footer.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function PopupFooter({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex w-full shrink-0 items-center rounded-b-lg px-6 py-3", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.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_react30 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_react33 = require("react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function PopupHeader({ children, before }) {
-  const { onClose } = (0, import_react30.useContext)(PopupContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime34.jsxs)("div", { className: "flex items-center gap-1", children: [
+  const { onClose } = (0, import_react33.useContext)(PopupContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime36.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_runtime36.jsxs)("div", { className: "flex items-center gap-1", children: [
       before,
       children
     ] }),
-    onClose && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(IconButton, { icon: "close", size: "small", variant: "text", onClick: onClose })
+    onClose && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(IconButton, { icon: "close", size: "small", variant: "text", onClick: onClose })
   ] });
 }
 
 // src/popup/popup.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var LIMIT_WIDTH2 = 320;
 var LIMIT_HEIGHT2 = 184;
 function useOptionalPopoverContext() {
-  return (0, import_react31.useContext)(PopoverContext);
+  return (0, import_react34.useContext)(PopoverContext);
 }
 function Popup({ children, isOpen: controlledIsOpen, width = 480, height, onClose }) {
   const renderWidth = typeof width === "number" ? Math.max(width, LIMIT_WIDTH2) : width;
@@ -1875,7 +2035,7 @@ function Popup({ children, isOpen: controlledIsOpen, width = 480, height, onClos
   if (!isOpen) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PopupContext.Provider, { value: { isOpen, onClose }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PopupContext.Provider, { value: { isOpen, onClose }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "div",
     {
       className: "grid max-h-full grid-rows-[max-content_1fr_max-content] flex-col rounded-lg bg-uiBackground01 shadow-floatingShadow",
@@ -1890,26 +2050,26 @@ Popup.Footer = PopupFooter;
 
 // src/radio/radio.tsx
 var import_component_theme13 = require("@zenkigen-inc/component-theme");
-var import_clsx21 = __toESM(require("clsx"));
-var import_react32 = require("react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_clsx23 = __toESM(require("clsx"));
+var import_react35 = require("react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function Radio({ name, value, id, label, isChecked = false, isDisabled = false, onChange }) {
-  const [isMouseOver, setIsMouseOver] = (0, import_react32.useState)(false);
-  const handleMouseOverInput = (0, import_react32.useCallback)(() => {
+  const [isMouseOver, setIsMouseOver] = (0, import_react35.useState)(false);
+  const handleMouseOverInput = (0, import_react35.useCallback)(() => {
     setIsMouseOver(true);
   }, []);
-  const handleMouseOutInput = (0, import_react32.useCallback)(() => {
+  const handleMouseOutInput = (0, import_react35.useCallback)(() => {
     setIsMouseOver(false);
   }, []);
-  const handleChange = (0, import_react32.useCallback)(
+  const handleChange = (0, import_react35.useCallback)(
     (e) => !isDisabled && onChange?.(e),
     [isDisabled, onChange]
   );
-  const inputClasses = (0, import_clsx21.default)("peer absolute z-[1] size-6 opacity-0", {
+  const inputClasses = (0, import_clsx23.default)("peer absolute z-[1] size-6 opacity-0", {
     "cursor-not-allowed": isDisabled,
     "cursor-pointer": !isDisabled
   });
-  const boxClasses = (0, import_clsx21.default)(
+  const boxClasses = (0, import_clsx23.default)(
     "inline-flex size-5 items-center justify-center rounded-full border border-solid bg-white",
     import_component_theme13.focusVisible.normalPeer,
     {
@@ -1920,22 +2080,22 @@ function Radio({ name, value, id, label, isChecked = false, isDisabled = false,
       "cursor-pointer": !isDisabled
     }
   );
-  const afterClasses = (0, import_clsx21.default)("absolute inset-0 m-auto block size-3 rounded-full", {
+  const afterClasses = (0, import_clsx23.default)("absolute inset-0 m-auto block size-3 rounded-full", {
     "bg-disabled01": isDisabled && isChecked,
     "bg-activeSelectedUi": !isDisabled && isChecked,
     "scale-0": !isChecked,
     "scale-100": isChecked
   });
-  const hoverIndicatorClasses = (0, import_clsx21.default)("inline-block size-3 rounded-full", {
+  const hoverIndicatorClasses = (0, import_clsx23.default)("inline-block size-3 rounded-full", {
     "bg-hoverUi": !isDisabled && !isChecked && isMouseOver
   });
-  const labelClasses = (0, import_clsx21.default)("typography-label14regular ml-2 flex-[1_0_0] select-none break-all", {
+  const labelClasses = (0, import_clsx23.default)("typography-label14regular ml-2 flex-[1_0_0] select-none break-all", {
     "pointer-events-none cursor-not-allowed text-disabled01": isDisabled,
     "cursor-pointer text-text01": !isDisabled
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex size-6 items-center justify-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex size-6 items-center justify-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "input",
         {
           type: "checkbox",
@@ -1950,32 +2110,32 @@ function Radio({ name, value, id, label, isChecked = false, isDisabled = false,
           className: inputClasses
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: boxClasses, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "relative flex size-5 flex-[0_0_auto] items-center justify-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: afterClasses }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: hoverIndicatorClasses })
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: boxClasses, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "relative flex size-5 flex-[0_0_auto] items-center justify-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: afterClasses }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: hoverIndicatorClasses })
       ] }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("label", { htmlFor: id, className: labelClasses, children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("label", { htmlFor: id, className: labelClasses, children: label })
   ] });
 }
 
 // src/search/search.tsx
-var import_clsx22 = require("clsx");
-var import_react33 = require("react");
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var Search = (0, import_react33.forwardRef)(({ width = "100%", size = "medium", ...props }, ref) => {
-  const classes = (0, import_clsx22.clsx)(
+var import_clsx24 = require("clsx");
+var import_react36 = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var Search = (0, import_react36.forwardRef)(({ width = "100%", size = "medium", ...props }, ref) => {
+  const classes = (0, import_clsx24.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_clsx22.clsx)("mx-2 h-full flex-1 text-text01 outline-0 placeholder:text-textPlaceholder", {
+  const inputClasses = (0, import_clsx24.clsx)("mx-2 h-full flex-1 text-text01 outline-0 placeholder:text-textPlaceholder", {
     ["typography-label14regular"]: size === "medium",
     ["typography-label16regular"]: size === "large"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "relative", ref, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("form", { onSubmit: props.onSubmit, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: classes, style: { width }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon, { name: "search", color: "icon01", size: "medium" }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "relative", ref, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("form", { onSubmit: props.onSubmit, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: classes, style: { width }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, { name: "search", color: "icon01", size: "medium" }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       "input",
       {
         type: "text",
@@ -1986,7 +2146,7 @@ var Search = (0, import_react33.forwardRef)(({ width = "100%", size = "medium",
         onChange: props.onChange
       }
     ),
-    props.onClickClearButton && props.value && props.value.length !== 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    props.onClickClearButton && props.value && props.value.length !== 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       IconButton,
       {
         variant: "text",
@@ -2001,17 +2161,17 @@ var Search = (0, import_react33.forwardRef)(({ width = "100%", size = "medium",
 Search.displayName = "Search";
 
 // src/segmented-control/segmented-control.tsx
-var import_react36 = __toESM(require("react"));
+var import_react39 = __toESM(require("react"));
 
 // src/segmented-control/segmented-control-context.ts
-var import_react34 = require("react");
-var SegmentedControlContext = (0, import_react34.createContext)(null);
+var import_react37 = require("react");
+var SegmentedControlContext = (0, import_react37.createContext)(null);
 
 // src/segmented-control/segmented-control-item.tsx
 var import_component_theme14 = require("@zenkigen-inc/component-theme");
-var import_clsx23 = require("clsx");
-var import_react35 = require("react");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_clsx25 = require("clsx");
+var import_react38 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var SegmentedControlItem = ({
   label,
   value,
@@ -2020,9 +2180,9 @@ var SegmentedControlItem = ({
   "aria-label": ariaLabel,
   ...rest
 }) => {
-  const context = (0, import_react35.useContext)(SegmentedControlContext);
-  const buttonRef = (0, import_react35.useRef)(null);
-  const lastInteractionWasMouse = (0, import_react35.useRef)(false);
+  const context = (0, import_react38.useContext)(SegmentedControlContext);
+  const buttonRef = (0, import_react38.useRef)(null);
+  const lastInteractionWasMouse = (0, import_react38.useRef)(false);
   if (context === null) {
     throw new Error("SegmentedControl.Item must be used within SegmentedControl");
   }
@@ -2038,7 +2198,7 @@ var SegmentedControlItem = ({
   const isSelected = value === selectedValue;
   const isFocused = value === focusedValue;
   const isOptionDisabled = isContextDisabled || itemDisabled === true;
-  (0, import_react35.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (isFocused === true && buttonRef.current !== null) {
       buttonRef.current.focus();
     }
@@ -2060,7 +2220,7 @@ var SegmentedControlItem = ({
     lastInteractionWasMouse.current = false;
     onBlur?.();
   };
-  const buttonClasses = (0, import_clsx23.clsx)("relative flex items-center justify-center gap-1 rounded", import_component_theme14.focusVisible.normal, {
+  const buttonClasses = (0, import_clsx25.clsx)("relative flex items-center justify-center gap-1 rounded", import_component_theme14.focusVisible.normal, {
     "px-2 min-h-[24px] typography-label12regular": size === "small",
     "px-4 min-h-[32px] typography-label14regular": size === "medium",
     // States - Default with hover
@@ -2070,7 +2230,7 @@ var SegmentedControlItem = ({
     // States - Disabled
     "text-disabled01 bg-transparent": isOptionDisabled === true
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     "button",
     {
       ref: buttonRef,
@@ -2087,25 +2247,25 @@ var SegmentedControlItem = ({
       onMouseDown: handleMouseDown,
       ...rest,
       children: [
-        Boolean(icon) === true && icon && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        Boolean(icon) === true && icon && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           "span",
           {
-            className: (0, import_clsx23.clsx)("flex items-center", {
+            className: (0, import_clsx25.clsx)("flex items-center", {
               "fill-disabled01": isOptionDisabled === true,
               "fill-interactive01": isSelected === true && isOptionDisabled === false,
               "fill-icon01": isSelected === false && isOptionDisabled === false
             }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { name: icon, size: "small" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { name: icon, size: "small" })
           }
         ),
-        Boolean(label) === true && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "whitespace-nowrap", children: label })
+        Boolean(label) === true && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "whitespace-nowrap", children: label })
       ]
     }
   );
 };
 
 // src/segmented-control/segmented-control.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var SegmentedControl = ({
   children,
   value,
@@ -2115,15 +2275,15 @@ var SegmentedControl = ({
   "aria-label": ariaLabel,
   ...rest
 }) => {
-  const containerRef = (0, import_react36.useRef)(null);
-  const itemIds = import_react36.Children.toArray(children).filter((child) => {
-    if (!import_react36.default.isValidElement(child) || typeof child.props !== "object" || child.props === null || !("value" in child.props)) {
+  const containerRef = (0, import_react39.useRef)(null);
+  const itemIds = import_react39.Children.toArray(children).filter((child) => {
+    if (!import_react39.default.isValidElement(child) || typeof child.props !== "object" || child.props === null || !("value" in child.props)) {
       return false;
     }
     const props = child.props;
     return props.isDisabled !== true;
   }).map((child) => child.props.value);
-  const childrenCount = import_react36.Children.count(children);
+  const childrenCount = import_react39.Children.count(children);
   const containerStyle = { gridTemplateColumns: `repeat(${childrenCount}, minmax(0,1fr))` };
   const {
     focusedValue,
@@ -2150,7 +2310,7 @@ var SegmentedControl = ({
     onBlur: handleBlurRovingFocus,
     values: itemIds
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SegmentedControlContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_jsx_runtime41.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SegmentedControlContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "div",
     {
       ref: containerRef,
@@ -2168,19 +2328,19 @@ SegmentedControl.Item = SegmentedControlItem;
 
 // src/select-sort/select-sort.tsx
 var import_component_theme17 = require("@zenkigen-inc/component-theme");
-var import_clsx26 = __toESM(require("clsx"));
-var import_react37 = require("react");
+var import_clsx28 = __toESM(require("clsx"));
+var import_react40 = require("react");
 
 // src/select-sort/select-list.tsx
 var import_component_theme16 = require("@zenkigen-inc/component-theme");
-var import_clsx25 = __toESM(require("clsx"));
+var import_clsx27 = __toESM(require("clsx"));
 
 // src/select-sort/select-item.tsx
 var import_component_theme15 = require("@zenkigen-inc/component-theme");
-var import_clsx24 = __toESM(require("clsx"));
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_clsx26 = __toESM(require("clsx"));
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function SelectItem2({ children, isSortKey, onClickItem }) {
-  const itemClasses = (0, import_clsx24.default)(
+  const itemClasses = (0, import_clsx26.default)(
     "typography-label14regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02",
     import_component_theme15.focusVisible.inset,
     {
@@ -2188,16 +2348,16 @@ function SelectItem2({ children, isSortKey, onClickItem }) {
       "bg-uiBackground01 fill-icon01 text-interactive02": !isSortKey
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("li", { className: "flex w-full items-center", onClick: onClickItem, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("button", { className: itemClasses, type: "button", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "ml-1 mr-6", children }),
-    isSortKey && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { name: "check", size: "small" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("li", { className: "flex w-full items-center", onClick: onClickItem, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("button", { className: itemClasses, type: "button", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "ml-1 mr-6", children }),
+    isSortKey && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon, { name: "check", size: "small" }) })
   ] }) });
 }
 
 // src/select-sort/select-list.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function SelectList2({ size, variant, sortOrder, onClickItem, onClickDeselect }) {
-  const listClasses = (0, import_clsx25.default)(
+  const listClasses = (0, import_clsx27.default)(
     "absolute z-dropdown w-max overflow-y-auto rounded bg-uiBackground01 py-2 shadow-floatingShadow",
     {
       "top-7": size === "x-small" || size === "small",
@@ -2206,19 +2366,19 @@ function SelectList2({ size, variant, sortOrder, onClickItem, onClickDeselect })
       "border-solid border border-uiBorder01": variant === "outline"
     }
   );
-  const deselectButtonClasses = (0, import_clsx25.default)(
+  const deselectButtonClasses = (0, import_clsx27.default)(
     "typography-label14regular flex h-8 w-full items-center px-3 text-interactive02 hover:bg-hover02 active:bg-active02",
     import_component_theme16.focusVisible.inset
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("ul", { className: listClasses, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SelectItem2, { isSortKey: sortOrder === "ascend", onClickItem: () => onClickItem("ascend"), children: "\u6607\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SelectItem2, { isSortKey: sortOrder === "descend", onClickItem: () => onClickItem("descend"), children: "\u964D\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
-    sortOrder !== null && onClickDeselect && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("button", { className: deselectButtonClasses, type: "button", onClick: onClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("ul", { className: listClasses, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SelectItem2, { isSortKey: sortOrder === "ascend", onClickItem: () => onClickItem("ascend"), children: "\u6607\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SelectItem2, { isSortKey: sortOrder === "descend", onClickItem: () => onClickItem("descend"), children: "\u964D\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
+    sortOrder !== null && onClickDeselect && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("button", { className: deselectButtonClasses, type: "button", onClick: onClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
   ] });
 }
 
 // src/select-sort/select-sort.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function SelectSort({
   size = "medium",
   variant = "outline",
@@ -2230,24 +2390,24 @@ function SelectSort({
   onChange,
   onClickDeselect
 }) {
-  const [isOptionListOpen, setIsOptionListOpen] = (0, import_react37.useState)(false);
-  const targetRef = (0, import_react37.useRef)(null);
+  const [isOptionListOpen, setIsOptionListOpen] = (0, import_react40.useState)(false);
+  const targetRef = (0, import_react40.useRef)(null);
   useOutsideClick(targetRef, () => setIsOptionListOpen(false));
   const handleClickToggle = () => setIsOptionListOpen((prev) => !prev);
-  const handleClickItem = (0, import_react37.useCallback)(
+  const handleClickItem = (0, import_react40.useCallback)(
     (value) => {
       onChange?.(value);
       setIsOptionListOpen(false);
     },
     [onChange]
   );
-  const wrapperClasses = (0, import_clsx26.default)("relative flex shrink-0 items-center gap-1 rounded", {
+  const wrapperClasses = (0, import_clsx28.default)("relative flex shrink-0 items-center gap-1 rounded", {
     "h-6": size === "x-small" || size === "small",
     "h-8": size === "medium",
     "h-10": size === "large",
     "cursor-not-allowed": isDisabled
   });
-  const buttonClasses = (0, import_clsx26.default)(
+  const buttonClasses = (0, import_clsx28.default)(
     "flex size-full items-center rounded",
     import_component_theme17.buttonColors[variant].hover,
     import_component_theme17.buttonColors[variant].active,
@@ -2261,23 +2421,23 @@ function SelectSort({
       "pointer-events-none": isDisabled
     }
   );
-  const labelClasses = (0, import_clsx26.default)("truncate", {
+  const labelClasses = (0, import_clsx28.default)("truncate", {
     "typography-label12regular": size === "x-small",
     "typography-label14regular": size === "small" || size === "medium",
     "typography-label16regular": size === "large",
     "mr-1": size === "x-small",
     "mr-2": size !== "x-small"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: wrapperClasses, style: { width }, ref: targetRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("button", { className: buttonClasses, type: "button", onClick: handleClickToggle, disabled: isDisabled, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: labelClasses, children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "ml-auto flex items-center", children: isSortKey ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: wrapperClasses, style: { width }, ref: targetRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("button", { className: buttonClasses, type: "button", onClick: handleClickToggle, disabled: isDisabled, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: labelClasses, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "ml-auto flex items-center", children: isSortKey ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         Icon,
         {
           name: sortOrder === "ascend" ? "arrow-up" : "arrow-down",
           size: size === "large" ? "medium" : "small"
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         Icon,
         {
           name: isOptionListOpen ? "angle-small-up" : "angle-small-down",
@@ -2285,7 +2445,7 @@ function SelectSort({
         }
       ) })
     ] }),
-    isOptionListOpen && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    isOptionListOpen && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       SelectList2,
       {
         size,
@@ -2300,9 +2460,9 @@ function SelectSort({
 
 // src/sort-button/sort-button.tsx
 var import_component_theme18 = require("@zenkigen-inc/component-theme");
-var import_clsx27 = __toESM(require("clsx"));
-var import_react38 = require("react");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_clsx29 = __toESM(require("clsx"));
+var import_react41 = require("react");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function SortButton({
   size = "medium",
   width,
@@ -2313,7 +2473,7 @@ function SortButton({
   "aria-label": ariaLabel,
   ...rest
 }) {
-  const handleClick = (0, import_react38.useCallback)(() => {
+  const handleClick = (0, import_react41.useCallback)(() => {
     if (isDisabled || !onClick) return;
     onClick();
   }, [isDisabled, onClick]);
@@ -2322,13 +2482,13 @@ function SortButton({
     if (sortOrder === "descend") return "arrow-down";
     return "angle-small-down";
   };
-  const wrapperClasses = (0, import_clsx27.default)("relative flex shrink-0 items-center gap-1 rounded", {
+  const wrapperClasses = (0, import_clsx29.default)("relative flex shrink-0 items-center gap-1 rounded", {
     "h-6": size === "x-small" || size === "small",
     "h-8": size === "medium",
     "h-10": size === "large",
     "cursor-not-allowed": isDisabled
   });
-  const buttonClasses = (0, import_clsx27.default)(
+  const buttonClasses = (0, import_clsx29.default)(
     "flex size-full items-center rounded",
     import_component_theme18.buttonColors.text.hover,
     import_component_theme18.buttonColors.text.active,
@@ -2344,14 +2504,14 @@ function SortButton({
       "pointer-events-none": isDisabled
     }
   );
-  const labelClasses = (0, import_clsx27.default)("truncate", {
+  const labelClasses = (0, import_clsx29.default)("truncate", {
     "typography-label12regular": size === "x-small",
     "typography-label14regular": size === "small" || size === "medium",
     "typography-label16regular": size === "large",
     "mr-1": size === "x-small",
     "mr-2": size !== "x-small"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: wrapperClasses, style: { width }, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: wrapperClasses, style: { width }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "button",
     {
       className: buttonClasses,
@@ -2362,78 +2522,85 @@ function SortButton({
       "aria-label": ariaLabel,
       "aria-disabled": isDisabled,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: labelClasses, children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon, { name: getIconName(), size: size === "large" ? "medium" : "small" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: labelClasses, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Icon, { name: getIconName(), size: size === "large" ? "medium" : "small" }) })
       ]
     }
   ) });
 }
 
 // src/tab/tab.tsx
-var import_clsx29 = require("clsx");
-var import_react39 = require("react");
+var import_clsx31 = require("clsx");
+var import_react42 = require("react");
 
 // src/tab/tab-item.tsx
-var import_clsx28 = require("clsx");
-var import_jsx_runtime44 = require("react/jsx-runtime");
-var TabItem = ({ isSelected = false, ...props }) => {
-  const classes = (0, import_clsx28.clsx)(
-    "relative z-0 flex justify-center py-2 leading-[24px] before:absolute before:inset-x-0 before:bottom-0 before:h-px hover:text-text01 disabled:pointer-events-none disabled:text-disabled01",
+var import_clsx30 = require("clsx");
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var TabItem = ({ isSelected = false, isDisabled = false, icon, ...props }) => {
+  const classes = (0, import_clsx30.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",
     {
-      "typography-label14regular": !isSelected,
-      "text-interactive02 hover:before:bg-uiBorder04": !isSelected,
-      "typography-label14bold": isSelected,
+      "typography-label14regular text-interactive02": !isSelected,
+      "typography-label14bold text-interactive01": isSelected,
       "before:bg-interactive01 hover:before:bg-interactive01 pointer-events-none": isSelected
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  const iconWrapperClasses = (0, import_clsx30.clsx)("flex shrink-0 items-center", {
+    "fill-disabled01": isDisabled,
+    "fill-interactive01": !isDisabled && isSelected,
+    "fill-icon01 group-hover:fill-interactive01": !isDisabled && !isSelected
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     "button",
     {
       type: "button",
       role: "tab",
       "aria-selected": isSelected,
       className: classes,
-      disabled: props.isDisabled,
+      disabled: isDisabled,
       onClick: () => props.onClick(props.id),
-      children: props.children
+      children: [
+        icon != null && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: iconWrapperClasses, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Icon, { name: icon, size: "small" }) }),
+        props.children
+      ]
     }
   );
 };
 
 // src/tab/tab.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function Tab({ children, layout = "auto" }) {
-  const childrenCount = import_react39.Children.count(children);
+  const childrenCount = import_react42.Children.count(children);
   const containerStyle = layout === "equal" ? { gridTemplateColumns: `repeat(${childrenCount}, minmax(0,1fr))` } : {};
-  const containerClasses = (0, import_clsx29.clsx)(
+  const containerClasses = (0, import_clsx31.clsx)(
     "relative gap-4 px-6 before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-uiBorder01",
     {
       flex: layout === "auto",
       grid: layout === "equal"
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { role: "tablist", className: containerClasses, style: containerStyle, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { role: "tablist", className: containerClasses, style: containerStyle, children });
 }
 Tab.Item = TabItem;
 
 // src/table/table-cell.tsx
-var import_clsx30 = __toESM(require("clsx"));
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_clsx32 = __toESM(require("clsx"));
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function TableCell({ children, className, isHeader = false }) {
-  const classes = (0, import_clsx30.default)("border-b border-uiBorder01", { "sticky top-0 z-10 bg-white": isHeader }, className);
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: classes, children });
+  const classes = (0, import_clsx32.default)("border-b border-uiBorder01", { "sticky top-0 z-10 bg-white": isHeader }, className);
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: classes, children });
 }
 
 // src/table/table-row.tsx
-var import_clsx31 = __toESM(require("clsx"));
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_clsx33 = __toESM(require("clsx"));
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function TableRow({ children, isHoverBackgroundVisible = false }) {
-  const rowClasses = (0, import_clsx31.default)("contents", isHoverBackgroundVisible && "[&:hover>div]:bg-hoverUi02");
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: rowClasses, children });
+  const rowClasses = (0, import_clsx33.default)("contents", isHoverBackgroundVisible && "[&:hover>div]:bg-hoverUi02");
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: rowClasses, children });
 }
 
 // src/table/table.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function Table({
   width,
   templateRows,
@@ -2442,7 +2609,7 @@ function Table({
   autoRows,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "div",
     {
       className: "grid",
@@ -2462,22 +2629,22 @@ Table.Cell = TableCell;
 
 // src/tag/tag.tsx
 var import_component_theme20 = require("@zenkigen-inc/component-theme");
-var import_clsx33 = __toESM(require("clsx"));
+var import_clsx35 = __toESM(require("clsx"));
 
 // src/tag/delete-icon.tsx
 var import_component_theme19 = require("@zenkigen-inc/component-theme");
-var import_clsx32 = __toESM(require("clsx"));
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_clsx34 = __toESM(require("clsx"));
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var DeleteIcon = ({ color, variant, onClick }) => {
-  const deleteButtonClasses = (0, import_clsx32.default)(
+  const deleteButtonClasses = (0, import_clsx34.default)(
     "group ml-2 size-[14px] rounded-full p-0.5 hover:cursor-pointer hover:bg-iconOnColor focus-visible:bg-iconOnColor",
     import_component_theme19.focusVisible.normal
   );
-  const deletePathClasses = (0, import_clsx32.default)({
+  const deletePathClasses = (0, import_clsx34.default)({
     "fill-interactive02": color === "gray" || variant === "light",
     "group-hover:fill-interactive02 group-focus-visible:fill-interactive02 fill-iconOnColor": color !== "gray"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("button", { type: "button", className: deleteButtonClasses, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("button", { type: "button", className: deleteButtonClasses, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     "path",
     {
       fillRule: "evenodd",
@@ -2489,9 +2656,9 @@ var DeleteIcon = ({ color, variant, onClick }) => {
 };
 
 // src/tag/tag.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function Tag({ id, children, color, variant = "normal", size = "medium", isEditable, onDelete }) {
-  const wrapperClasses = (0, import_clsx33.default)("flex", "items-center", "justify-center", {
+  const wrapperClasses = (0, import_clsx35.default)("flex", "items-center", "justify-center", {
     [import_component_theme20.tagColors[color]]: variant === "normal",
     [import_component_theme20.tagLightColors[color]]: variant === "light",
     "h-[14px] typography-label11regular": !isEditable && size === "x-small",
@@ -2503,65 +2670,177 @@ 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_runtime50.jsxs)("div", { className: wrapperClasses, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: wrapperClasses, children: [
     children,
-    isEditable ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(DeleteIcon, { onClick: () => onDelete(id), color, variant }) : null
+    isEditable ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(DeleteIcon, { onClick: () => onDelete(id), color, variant }) : null
   ] });
 }
 
 // src/text-area/text-area.tsx
-var import_clsx34 = require("clsx");
-var import_react40 = require("react");
-var import_jsx_runtime51 = require("react/jsx-runtime");
-var TextArea = (0, import_react40.forwardRef)(
-  ({
-    size = "medium",
-    isResizable = false,
-    autoHeight = false,
-    maxHeight,
-    isError = false,
-    disabled = false,
-    height,
-    ...props
-  }, ref) => {
-    const classes = (0, import_clsx34.clsx)(
-      "w-full rounded border outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder",
-      {
-        "border-supportError": isError && !disabled,
-        "hover:border-hoverInput": !disabled && !isError,
-        "border-uiBorder02 hover:focus-within:border-activeInput focus-within:border-activeInput text-text01": !isError,
-        "bg-disabled02 border-disabled01": disabled,
-        "typography-body14regular px-2 pt-1.5 pb-2": size === "medium",
-        "text-4 leading-normal px-3.5 py-2.5": size === "large",
-        "field-sizing-content": autoHeight,
-        "text-supportError": isError,
-        "resize-none": !isResizable
-      }
-    );
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-      "textarea",
-      {
-        ref,
-        className: classes,
-        disabled,
-        ...props,
-        style: {
-          ...{ maxHeight },
-          // 自動高さではない場合で、height 指定がある場合は設定する
-          ...!autoHeight && height !== null ? { height } : {},
-          // 自動高さの場合で、height が指定されている場合は、height を minHeight に設定する
-          ...autoHeight && height !== null ? { minHeight: height } : {}
-        }
-      }
-    ) });
+var import_clsx38 = require("clsx");
+var import_react46 = require("react");
+
+// src/text-area/text-area-context.tsx
+var import_react43 = require("react");
+var TextAreaCompoundContext = (0, import_react43.createContext)(null);
+var useTextAreaCompoundContext = (componentName) => {
+  const context = (0, import_react43.useContext)(TextAreaCompoundContext);
+  if (context == null) {
+    throw new Error(`${componentName} \u3092\u4F7F\u7528\u3059\u308B\u306B\u306F TextArea \u306E\u5B50\u8981\u7D20\u3068\u3057\u3066\u914D\u7F6E\u3059\u308B\u5FC5\u8981\u304C\u3042\u308B\u3002`);
+  }
+  return context;
+};
+
+// src/text-area/text-area-error-message.tsx
+var import_clsx36 = require("clsx");
+var import_react44 = require("react");
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var TextAreaErrorMessage = (0, import_react44.forwardRef)(
+  ({ "aria-live": ariaLive = "assertive", ...props }, ref) => {
+    const { textAreaProps } = useTextAreaCompoundContext("TextArea.ErrorMessage");
+    const typographyClass = textAreaProps.size === "large" ? "typography-label12regular" : "typography-label11regular";
+    const shouldRender = textAreaProps.isError === true;
+    if (!shouldRender) {
+      return null;
+    }
+    const errorMessageClassName = (0, import_clsx36.clsx)(typographyClass, "text-supportError");
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { ref, className: errorMessageClassName, "aria-live": ariaLive, ...props });
   }
 );
-TextArea.displayName = "TextArea";
+TextAreaErrorMessage.displayName = "TextArea.ErrorMessage";
+
+// src/text-area/text-area-helper-message.tsx
+var import_clsx37 = require("clsx");
+var import_react45 = require("react");
+var import_jsx_runtime54 = require("react/jsx-runtime");
+var TextAreaHelperMessage = (0, import_react45.forwardRef)((props, ref) => {
+  const { textAreaProps } = useTextAreaCompoundContext("TextArea.HelperMessage");
+  const typographyClass = textAreaProps.size === "large" ? "typography-label12regular" : "typography-label11regular";
+  const helperMessageClassName = (0, import_clsx37.clsx)(typographyClass, "text-text02");
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { ref, className: helperMessageClassName, ...props });
+});
+TextAreaHelperMessage.displayName = "TextArea.HelperMessage";
+
+// src/text-area/text-area.tsx
+var import_jsx_runtime55 = require("react/jsx-runtime");
+function TextAreaInner({
+  size = "medium",
+  isResizable = false,
+  autoHeight = false,
+  maxHeight,
+  isError = false,
+  disabled = false,
+  height,
+  children,
+  ...props
+}, ref) {
+  const autoGeneratedId = (0, import_react46.useId)();
+  const textAreaPropsForContext = (0, import_react46.useMemo)(
+    () => ({
+      size,
+      isError
+    }),
+    [size, isError]
+  );
+  const contextValue = (0, import_react46.useMemo)(
+    () => ({
+      textAreaProps: textAreaPropsForContext,
+      forwardedRef: ref
+    }),
+    [textAreaPropsForContext, ref]
+  );
+  const helperMessageIds = [];
+  const errorIds = [];
+  const describedByBaseId = props.id ?? autoGeneratedId;
+  const enhancedChildren = import_react46.Children.map(children, (child) => {
+    if (!(0, import_react46.isValidElement)(child)) {
+      return child;
+    }
+    if (child.type === TextAreaHelperMessage) {
+      const helperChild = child;
+      const assignedId = helperChild.props.id ?? `${describedByBaseId}-helper-${helperMessageIds.length + 1}`;
+      helperMessageIds.push(assignedId);
+      return (0, import_react46.cloneElement)(helperChild, { id: assignedId });
+    }
+    if (child.type === TextAreaErrorMessage && isError) {
+      const errorChild = child;
+      const assignedId = errorChild.props.id ?? `${describedByBaseId}-error-${errorIds.length + 1}`;
+      errorIds.push(assignedId);
+      return (0, import_react46.cloneElement)(errorChild, { id: assignedId });
+    }
+    return child;
+  });
+  const describedByFromProps = typeof props["aria-describedby"] === "string" ? props["aria-describedby"] : null;
+  const describedByList = [describedByFromProps, ...helperMessageIds, ...errorIds].filter(
+    (id) => typeof id === "string" && id.trim().length > 0
+  );
+  const describedByProps = describedByList.length > 0 ? {
+    "aria-describedby": describedByList.join(" ")
+  } : {};
+  const shouldMarkInvalid = isError === true || errorIds.length > 0;
+  const ariaInvalidFromProps = props["aria-invalid"];
+  const ariaInvalidValue = ariaInvalidFromProps != null ? ariaInvalidFromProps : shouldMarkInvalid ? true : null;
+  const ariaInvalidProps = ariaInvalidValue == null ? {} : { "aria-invalid": ariaInvalidValue };
+  const mergedTextAreaProps = {
+    ...props,
+    ...describedByProps,
+    ...ariaInvalidProps
+  };
+  const classes = (0, import_clsx38.clsx)(
+    "w-full rounded border outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder",
+    {
+      "border-supportError": isError && !disabled,
+      "hover:border-hoverInput": !disabled && !isError,
+      "border-uiBorder02 hover:focus-within:border-activeInput focus-within:border-activeInput text-text01": !isError,
+      "bg-disabled02 border-disabled01": disabled,
+      "typography-body14regular px-2 pt-2 pb-2": size === "medium",
+      "text-4 leading-normal px-3.5 py-2.5": size === "large",
+      "field-sizing-content": autoHeight,
+      "text-supportError": isError,
+      "resize-none": !isResizable
+    }
+  );
+  const textAreaElement = /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    "textarea",
+    {
+      ref,
+      className: classes,
+      ...mergedTextAreaProps,
+      disabled,
+      style: {
+        ...{ maxHeight },
+        // 自動高さではない場合で、height 指定がある場合は設定する
+        ...!autoHeight && height !== null ? { height } : {},
+        // 自動高さの場合で、height が指定されている場合は、height を minHeight に設定する
+        ...autoHeight && height !== null ? { minHeight: height } : {}
+      }
+    }
+  ) });
+  const stackedChildren = enhancedChildren == null ? [] : import_react46.Children.toArray(enhancedChildren);
+  const hasMessageChildren = stackedChildren.length > 0;
+  if (!hasMessageChildren) {
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TextAreaCompoundContext.Provider, { value: contextValue, children: textAreaElement });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TextAreaCompoundContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex flex-col gap-2", children: [
+    textAreaElement,
+    stackedChildren
+  ] }) });
+}
+var attachStatics2 = (component) => {
+  component.HelperMessage = TextAreaHelperMessage;
+  component.ErrorMessage = TextAreaErrorMessage;
+  component.displayName = "TextArea";
+  return component;
+};
+var TextAreaBase = (0, import_react46.forwardRef)(function TextAreaBase2(props, ref) {
+  return TextAreaInner(props, ref);
+});
+var TextArea = attachStatics2(TextAreaBase);
 
 // src/toast/toast.tsx
-var import_clsx35 = __toESM(require("clsx"));
-var import_react41 = require("react");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_clsx39 = __toESM(require("clsx"));
+var import_react47 = require("react");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var CLOSE_TIME_MSEC = 5e3;
 function Toast({
   state = "information",
@@ -2571,8 +2850,8 @@ function Toast({
   children,
   onClickClose
 }) {
-  const [isRemoving, setIsRemoving] = (0, import_react41.useState)(false);
-  const handleClose = (0, import_react41.useCallback)(() => {
+  const [isRemoving, setIsRemoving] = (0, import_react47.useState)(false);
+  const handleClose = (0, import_react47.useCallback)(() => {
     if (isAnimation) {
       setIsRemoving(true);
     } else {
@@ -2580,17 +2859,17 @@ function Toast({
     }
   }, [isAnimation, onClickClose]);
   const handleAnimationEnd = (e) => window.getComputedStyle(e.currentTarget).opacity === "0" && onClickClose();
-  const wrapperClasses = (0, import_clsx35.default)("pointer-events-auto flex items-start gap-1 bg-white p-4 shadow-floatingShadow", {
+  const wrapperClasses = (0, import_clsx39.default)("pointer-events-auto flex items-start gap-1 bg-white p-4 shadow-floatingShadow", {
     ["animate-toast-in"]: isAnimation && !isRemoving,
     ["animate-toast-out opacity-0"]: isAnimation && isRemoving
   });
-  const iconClasses = (0, import_clsx35.default)("flex items-center", {
+  const iconClasses = (0, import_clsx39.default)("flex items-center", {
     "fill-supportSuccess": state === "success",
     "fill-supportError": state === "error",
     "fill-supportWarning": state === "warning",
     "fill-supportInfo": state === "information"
   });
-  const textClasses = (0, import_clsx35.default)("typography-body13regular flex-1 pt-[3px]", {
+  const textClasses = (0, import_clsx39.default)("typography-body13regular flex-1 pt-[3px]", {
     "text-supportError": state === "error",
     "text-text01": state === "success" || state === "warning" || state === "information"
   });
@@ -2600,7 +2879,7 @@ function Toast({
     warning: "warning",
     information: "information-filled"
   };
-  (0, import_react41.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     const timer = window.setTimeout(() => {
       if (isAutoClose) {
         setIsRemoving(true);
@@ -2608,45 +2887,45 @@ function Toast({
     }, CLOSE_TIME_MSEC);
     return () => window.clearTimeout(timer);
   }, [isAutoClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: wrapperClasses, style: { width }, onAnimationEnd: handleAnimationEnd, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Icon, { name: iconName[state] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: textClasses, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(IconButton, { icon: "close", size: "medium", variant: "text", onClick: handleClose, isNoPadding: true })
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: wrapperClasses, style: { width }, onAnimationEnd: handleAnimationEnd, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Icon, { name: iconName[state] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("p", { className: textClasses, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(IconButton, { icon: "close", size: "medium", variant: "text", onClick: handleClose, isNoPadding: true })
   ] });
 }
 
 // src/toast/toast-provider.tsx
-var import_react42 = require("react");
+var import_react48 = require("react");
 var import_react_dom3 = require("react-dom");
-var import_jsx_runtime53 = require("react/jsx-runtime");
-var ToastContext = (0, import_react42.createContext)({});
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var ToastContext = (0, import_react48.createContext)({});
 var ToastProvider = ({ children }) => {
-  const [isClientRender, setIsClientRender] = (0, import_react42.useState)(false);
-  const [toasts, setToasts] = (0, import_react42.useState)([]);
-  const addToast = (0, import_react42.useCallback)(({ message, state }) => {
+  const [isClientRender, setIsClientRender] = (0, import_react48.useState)(false);
+  const [toasts, setToasts] = (0, import_react48.useState)([]);
+  const addToast = (0, import_react48.useCallback)(({ message, state }) => {
     setToasts((prev) => [...prev, { id: Math.trunc(Math.random() * 1e5), message, state }]);
   }, []);
-  const removeToast = (0, import_react42.useCallback)((id) => {
+  const removeToast = (0, import_react48.useCallback)((id) => {
     setToasts((prev) => prev.filter((snackbar) => snackbar.id !== id));
   }, []);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     setIsClientRender(true);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(ToastContext.Provider, { value: { addToast, removeToast }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(ToastContext.Provider, { value: { addToast, removeToast }, children: [
     children,
     isClientRender && (0, import_react_dom3.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime53.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_runtime53.jsx)(Toast, { state, isAutoClose: true, isAnimation: true, onClickClose: () => removeToast(id), width: 475, children: message }, id)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime57.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_runtime57.jsx)(Toast, { state, isAutoClose: true, isAnimation: true, onClickClose: () => removeToast(id), width: 475, children: message }, id)) }),
       document.body
     )
   ] });
 };
 var useToast = () => {
-  return (0, import_react42.useContext)(ToastContext);
+  return (0, import_react48.useContext)(ToastContext);
 };
 
 // src/toggle/toggle.tsx
-var import_clsx36 = __toESM(require("clsx"));
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_clsx40 = __toESM(require("clsx"));
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function Toggle({
   id,
   size = "medium",
@@ -2656,7 +2935,7 @@ function Toggle({
   labelPosition = "right",
   isDisabled = false
 }) {
-  const baseClasses = (0, import_clsx36.default)("relative flex items-center rounded-full", {
+  const baseClasses = (0, import_clsx40.default)("relative flex items-center rounded-full", {
     "bg-disabledOn": isDisabled && isChecked,
     "bg-disabled01": isDisabled && !isChecked,
     "bg-interactive01 peer-hover:bg-hover01": !isDisabled && isChecked,
@@ -2664,16 +2943,16 @@ function Toggle({
     "w-8 h-4 px-[3px]": size === "small",
     "w-12 h-6 px-1": size === "medium" || size === "large"
   });
-  const inputClasses = (0, import_clsx36.default)(
+  const inputClasses = (0, import_clsx40.default)(
     "peer absolute inset-0 z-[1] opacity-0",
     isDisabled ? "cursor-not-allowed" : "cursor-pointer"
   );
-  const indicatorClasses = (0, import_clsx36.default)("rounded-full bg-iconOnColor", {
+  const indicatorClasses = (0, import_clsx40.default)("rounded-full bg-iconOnColor", {
     "w-2.5 h-2.5": size === "small",
     "w-4 h-4": size === "medium" || size === "large",
     "ml-auto": isChecked
   });
-  const labelClasses = (0, import_clsx36.default)("break-all", {
+  const labelClasses = (0, import_clsx40.default)("break-all", {
     "mr-2": labelPosition === "left",
     "ml-2": labelPosition === "right",
     "typography-label14regular": size === "small" || size === "medium",
@@ -2681,9 +2960,9 @@ function Toggle({
     "pointer-events-none cursor-not-allowed text-disabled01": isDisabled,
     "cursor-pointer text-text01": !isDisabled
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "relative flex flex-[0_0_auto] items-center", children: [
-    label != null && labelPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("label", { htmlFor: id, className: labelClasses, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "relative flex flex-[0_0_auto] items-center", children: [
+    label != null && labelPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("label", { htmlFor: id, className: labelClasses, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       "input",
       {
         className: inputClasses,
@@ -2695,23 +2974,23 @@ function Toggle({
         disabled: isDisabled
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: baseClasses, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: indicatorClasses }) }),
-    label != null && labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("label", { htmlFor: id, className: labelClasses, children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: baseClasses, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: indicatorClasses }) }),
+    label != null && labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("label", { htmlFor: id, className: labelClasses, children: label })
   ] });
 }
 
 // src/tooltip/tooltip.tsx
-var import_react44 = require("react");
+var import_react50 = require("react");
 var import_react_dom4 = require("react-dom");
 
 // src/tooltip/tooltip-content.tsx
-var import_clsx38 = __toESM(require("clsx"));
+var import_clsx42 = __toESM(require("clsx"));
 
 // src/tooltip/tail-icon.tsx
-var import_clsx37 = __toESM(require("clsx"));
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_clsx41 = __toESM(require("clsx"));
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var TailIcon = (props) => {
-  const tailClasses = (0, import_clsx37.default)("absolute fill-uiBackgroundTooltip", {
+  const tailClasses = (0, import_clsx41.default)("absolute fill-uiBackgroundTooltip", {
     "rotate-180": props.verticalPosition === "bottom",
     "rotate-0": props.verticalPosition !== "bottom",
     "-top-1": props.verticalPosition === "bottom" && props.size === "small",
@@ -2726,9 +3005,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_runtime55.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_runtime55.jsx)("path", { d: "M4 4L0 0H8L4 4Z" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime59.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_runtime59.jsx)("path", { d: "M4 4L0 0H8L4 4Z" }) });
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       "svg",
       {
         className: tailClasses,
@@ -2737,14 +3016,14 @@ var TailIcon = (props) => {
         viewBox: "0 0 14 8",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("path", { d: "M7 8L0 0H14L7 8Z" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("path", { d: "M7 8L0 0H14L7 8Z" })
       }
     );
   }
 };
 
 // src/tooltip/tooltip-content.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var TooltipContent = ({
   content,
   horizontalAlign,
@@ -2754,7 +3033,7 @@ var TooltipContent = ({
   maxWidth,
   isPortal = false
 }) => {
-  const tooltipWrapperClasses = (0, import_clsx38.default)("absolute z-tooltip m-auto flex", {
+  const tooltipWrapperClasses = (0, import_clsx42.default)("absolute z-tooltip m-auto flex", {
     "top-0": !isPortal && verticalPosition === "top",
     "bottom-0": !isPortal && verticalPosition === "bottom",
     "justify-start": horizontalAlign === "left",
@@ -2763,7 +3042,7 @@ var TooltipContent = ({
     "w-[24px]": size === "small",
     "w-[46px]": size !== "small"
   });
-  const tooltipBodyClasses = (0, import_clsx38.default)(
+  const tooltipBodyClasses = (0, import_clsx42.default)(
     "absolute z-tooltip inline-block w-max rounded bg-uiBackgroundTooltip text-textOnColor",
     {
       "typography-body12regular": size === "small",
@@ -2780,7 +3059,7 @@ var TooltipContent = ({
     transform: `translate(${tooltipPosition.translateX}, ${tooltipPosition.translateY})`,
     ...tooltipPosition
   } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: tooltipWrapperClasses, style: tooltipWrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: tooltipWrapperClasses, style: tooltipWrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
     "div",
     {
       className: tooltipBodyClasses,
@@ -2789,16 +3068,16 @@ var TooltipContent = ({
       },
       children: [
         content,
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TailIcon, { size, verticalPosition, horizontalAlign })
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TailIcon, { size, verticalPosition, horizontalAlign })
       ]
     }
   ) });
 };
 
 // src/tooltip/tooltip-hook.ts
-var import_react43 = require("react");
+var import_react49 = require("react");
 var useTooltip = () => {
-  const calculatePosition = (0, import_react43.useCallback)(
+  const calculatePosition = (0, import_react49.useCallback)(
     (args) => {
       const result = {
         maxWidth: "none",
@@ -2850,7 +3129,7 @@ var useTooltip = () => {
 };
 
 // src/tooltip/tooltip.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 function Tooltip({
   children,
   content,
@@ -2862,8 +3141,8 @@ function Tooltip({
   portalTarget
 }) {
   const { calculatePosition } = useTooltip();
-  const [isVisible, setIsVisible] = (0, import_react44.useState)(false);
-  const [tooltipPosition, setTooltipPosition] = (0, import_react44.useState)({
+  const [isVisible, setIsVisible] = (0, import_react50.useState)(false);
+  const [tooltipPosition, setTooltipPosition] = (0, import_react50.useState)({
     maxWidth: "none",
     width: "auto",
     left: "0px",
@@ -2872,23 +3151,23 @@ function Tooltip({
     translateX: "0",
     translateY: "0"
   });
-  const targetRef = (0, import_react44.useRef)(null);
-  const handleMouseOverWrapper = (0, import_react44.useCallback)(() => {
+  const targetRef = (0, import_react50.useRef)(null);
+  const handleMouseOverWrapper = (0, import_react50.useCallback)(() => {
     if (isDisabledHover) {
       return;
     }
     setIsVisible(true);
   }, [isDisabledHover]);
-  const handleMouseOutWrapper = (0, import_react44.useCallback)(() => {
+  const handleMouseOutWrapper = (0, import_react50.useCallback)(() => {
     setIsVisible(false);
   }, []);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     if (targetRef.current === null) return;
     const dimensions = targetRef.current?.getBoundingClientRect();
     const position = calculatePosition({ dimensions, maxWidth, verticalPosition, horizontalAlign, tooltipSize: size });
     setTooltipPosition(position);
   }, [calculatePosition, horizontalAlign, maxWidth, size, verticalPosition]);
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     "div",
     {
       ref: targetRef,
@@ -2897,7 +3176,7 @@ function Tooltip({
       onMouseLeave: handleMouseOutWrapper,
       children: [
         children,
-        isVisible && (portalTarget == null ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        isVisible && (portalTarget == null ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
           TooltipContent,
           {
             content,
@@ -2908,7 +3187,7 @@ function Tooltip({
             tooltipPosition
           }
         ) : (0, import_react_dom4.createPortal)(
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             TooltipContent,
             {
               isPortal: true,