@zenkigen-inc/component-ui 1.16.3 → 1.17.0

package/dist/index.mjs

@@ -6,7 +6,7 @@ import { clsx as clsx2 } from "clsx";
 import { iconElements } from "@zenkigen-inc/component-icons";
 import { iconColors } from "@zenkigen-inc/component-theme";
 import { clsx } from "clsx";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx } from "react/jsx-runtime";
 var Icon = ({ size = "medium", isDisabled = false, ...props }) => {
   const classes = clsx(
     "inline-block shrink-0",
@@ -24,7 +24,13 @@ var Icon = ({ size = "medium", isDisabled = false, ...props }) => {
     },
     props.className
   );
-  return /* @__PURE__ */ jsx("span", { className: classes, children: iconElements[props.name] });
+  const IconComponent = iconElements[props.name];
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("span", { className: classes, children: /* @__PURE__ */ jsx(
+    IconComponent,
+    {
+      ...isDisabled !== true && typeof props.accentColor === "string" ? { accentClassName: `fill-${String(props.accentColor)}` } : {}
+    }
+  ) }) });
 };
 
 // src/avatar/avatar.tsx
@@ -471,6 +477,7 @@ function EvaluationStar({ value, isEditable = false, onChangeRating, size = "med
   const starClasses = clsx8(focusVisible5.inset, { "w-6 h-6": size === "large", "w-4 h-4": size === "medium" });
   const renderStar = (rating) => {
     const color = rating <= currentRating ? "fill-yellow-yellow50" : "fill-icon03";
+    const IconComponent = iconElements2["star-filled"];
     return /* @__PURE__ */ jsx11(
       "button",
       {
@@ -478,7 +485,7 @@ function EvaluationStar({ value, isEditable = false, onChangeRating, size = "med
         onClick: () => handleChangeRating(rating),
         className: clsx8(color, starClasses),
         disabled: !isEditable,
-        children: iconElements2["star-filled"]
+        children: /* @__PURE__ */ jsx11(IconComponent, {})
       },
       rating
     );
@@ -618,7 +625,7 @@ function IconButton({
 
 // src/loading/loading.tsx
 import clsx11 from "clsx";
-import { Fragment, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
 function Loading({ size = "medium", position = "fixed", height = "100%" }) {
   const wrapperClasses = clsx11(position, "left-0 top-0 z-20 flex w-full items-center justify-center");
   const svgClasses = clsx11({
@@ -626,7 +633,7 @@ function Loading({ size = "medium", position = "fixed", height = "100%" }) {
     "h-8 w-8": size === "medium",
     "h-16 w-16": size === "large"
   });
-  return /* @__PURE__ */ jsx13(Fragment, { children: /* @__PURE__ */ jsxs5("div", { className: wrapperClasses, style: { height }, children: [
+  return /* @__PURE__ */ jsx13(Fragment2, { children: /* @__PURE__ */ jsxs5("div", { className: wrapperClasses, style: { height }, children: [
     size === "small" && /* @__PURE__ */ jsx13("svg", { className: svgClasses, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx13(
       "circle",
       {
@@ -760,7 +767,7 @@ function ModalHeader({ children, isNoBorder = false }) {
 }
 
 // src/modal/modal.tsx
-import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
 var LIMIT_WIDTH = 320;
 var LIMIT_HEIGHT = 184;
 function Modal({
@@ -778,7 +785,7 @@ function Modal({
   useEffect2(() => {
     setIsMounted(true);
   }, []);
-  return isMounted && isOpen ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
+  return isMounted && isOpen ? /* @__PURE__ */ jsxs7(Fragment3, { children: [
     /* @__PURE__ */ jsx17(BodyScrollLock, {}),
     createPortal2(
       /* @__PURE__ */ jsx17(ModalContext.Provider, { value: { onClose }, children: /* @__PURE__ */ jsx17("div", { className: "fixed left-0 top-0 z-overlay flex size-full items-center justify-center bg-backgroundOverlayBlack py-4", children: /* @__PURE__ */ jsx17(
@@ -911,9 +918,10 @@ function Pagination({ currentPage, totalPage, sideNumPagesToShow = 3, onClick })
 }
 
 // src/select/select.tsx
+import { autoUpdate, FloatingPortal, offset, size as sizeMiddleware, useFloating } from "@floating-ui/react";
 import { focusVisible as focusVisible9, selectColors } from "@zenkigen-inc/component-theme";
 import clsx18 from "clsx";
-import { useRef as useRef3, useState as useState6 } from "react";
+import { useRef as useRef2, useState as useState6 } from "react";
 
 // src/select/select-context.ts
 import { createContext as createContext4 } from "react";
@@ -941,61 +949,63 @@ function SelectItem({ option }) {
     {
       "text-interactive01 fill-interactive01 bg-selectedUi": option.id === selectedOption?.id && !(isError ?? false),
       "text-supportError fill-supportError bg-uiBackgroundError": option.id === selectedOption?.id && isError,
-      "text-interactive02 fill-icon01 bg-uiBackground01": option.id !== selectedOption?.id
+      "text-interactive02 fill-icon01 bg-uiBackground01": option.id !== selectedOption?.id,
+      "pr-10": option.id !== selectedOption?.id
     }
   );
   return /* @__PURE__ */ jsx21("li", { className: "flex w-full items-center", "data-id": option.id, children: /* @__PURE__ */ jsxs10("button", { className: itemClasses, type: "button", onClick: () => handleClickItem(option), children: [
     option.icon && /* @__PURE__ */ jsx21(Icon, { name: option.icon, size: "small" }),
-    /* @__PURE__ */ jsx21("span", { className: "ml-1 mr-6", children: option.label }),
-    option.id === selectedOption?.id && /* @__PURE__ */ jsx21("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx21(Icon, { name: "check", size: "small" }) })
+    /* @__PURE__ */ jsx21("span", { className: "ml-1 flex-1 truncate text-left", children: option.label }),
+    option.id === selectedOption?.id && /* @__PURE__ */ jsx21("div", { className: "ml-2 flex items-center", children: /* @__PURE__ */ jsx21(Icon, { name: "check", size: "small" }) })
   ] }) }, option.id);
 }
 
 // src/select/select-list.tsx
 import { focusVisible as focusVisible8 } from "@zenkigen-inc/component-theme";
 import clsx17 from "clsx";
-import { useContext as useContext6, useLayoutEffect as useLayoutEffect2, useRef as useRef2 } from "react";
+import { forwardRef, useContext as useContext6, useLayoutEffect as useLayoutEffect2 } from "react";
 import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
-function SelectList({ children, maxHeight }) {
-  const ref = useRef2(null);
-  const { size, selectedOption, setIsOptionListOpen, variant, placeholder, onChange } = useContext6(SelectContext);
+var SelectList = forwardRef(({ children, maxHeight }, ref) => {
+  const { selectedOption, setIsOptionListOpen, variant, placeholder, onChange, floatingStyles, floatingRef } = useContext6(SelectContext);
   const handleClickDeselect = () => {
     onChange?.(null);
     setIsOptionListOpen(false);
   };
   useLayoutEffect2(() => {
-    if (maxHeight != null && ref.current) {
-      const element = Array.from(ref.current.children ?? []).find(
-        (item) => item.getAttribute("data-id") === selectedOption?.id
-      );
-      if (element != null && ref.current.scroll != null) {
-        const wrapRect = ref.current.getBoundingClientRect();
-        const rect = element.getBoundingClientRect();
-        ref.current.scroll(0, rect.top - wrapRect.top - wrapRect.height / 2 + rect.height / 2);
+    if (maxHeight != null && selectedOption != null) {
+      const container = floatingRef?.current;
+      if (container != null) {
+        const element = container.querySelector(`[data-id="${selectedOption.id}"]`);
+        if (element != null) {
+          const htmlElement = element;
+          const elementTop = htmlElement.offsetTop;
+          const elementHeight = htmlElement.offsetHeight;
+          const containerHeight = container.clientHeight;
+          const scrollTop = elementTop - (containerHeight - elementHeight) / 2;
+          container.scrollTo({
+            top: Math.max(0, scrollTop)
+          });
+        }
       }
     }
-  }, []);
-  const listClasses = clsx17(
-    "absolute z-dropdown w-max overflow-y-auto rounded bg-uiBackground01 py-2 shadow-floatingShadow",
-    {
-      "top-7": size === "x-small" || size === "small",
-      "top-9": size === "medium",
-      "top-11": size === "large",
-      "border-solid border border-uiBorder01": variant === "outline"
-    }
-  );
+  }, [selectedOption, maxHeight, floatingRef]);
+  const listClasses = clsx17("z-dropdown overflow-y-auto rounded bg-uiBackground01 py-2 shadow-floatingShadow", {
+    "border-solid border border-uiBorder01": variant === "outline"
+  });
   const deselectButtonClasses = clsx17(
     "typography-label14regular flex h-8 w-full items-center px-3 text-interactive02 hover:bg-hover02 active:bg-active02",
     focusVisible8.inset
   );
-  return /* @__PURE__ */ jsxs11("ul", { className: listClasses, style: { maxHeight }, ref, children: [
+  return /* @__PURE__ */ jsxs11("ul", { className: listClasses, style: { maxHeight, ...floatingStyles }, ref, children: [
     children,
     placeholder != null && selectedOption !== null && /* @__PURE__ */ jsx22("li", { children: /* @__PURE__ */ jsx22("button", { className: deselectButtonClasses, type: "button", onClick: handleClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
   ] });
-}
+});
+SelectList.displayName = "SelectList";
 
 // src/select/select.tsx
 import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+var FLOATING_OFFSET = 4;
 function Select({
   children,
   size = "medium",
@@ -1012,8 +1022,24 @@ function Select({
   optionListMaxHeight
 }) {
   const [isOptionListOpen, setIsOptionListOpen] = useState6(false);
-  const targetRef = useRef3(null);
+  const targetRef = useRef2(null);
   useOutsideClick(targetRef, () => setIsOptionListOpen(false));
+  const { refs, floatingStyles } = useFloating({
+    open: isOptionListOpen,
+    onOpenChange: setIsOptionListOpen,
+    placement: "bottom-start",
+    middleware: [
+      offset(FLOATING_OFFSET),
+      sizeMiddleware({
+        apply({ availableWidth, elements, rects }) {
+          const referenceWidth = rects.reference.width;
+          elements.floating.style.minWidth = `${referenceWidth}px`;
+          elements.floating.style.maxWidth = `${availableWidth}px`;
+        }
+      })
+    ],
+    whileElementsMounted: autoUpdate
+  });
   const handleClickToggle = () => setIsOptionListOpen((prev) => !prev);
   const buttonVariant = isError && !isDisabled ? `${variant}Error` : variant;
   const isSelected = isOptionSelected && !isDisabled && selectedOption !== null && !isError;
@@ -1055,21 +1081,33 @@ function Select({
         setIsOptionListOpen,
         selectedOption,
         onChange,
-        isError
+        isError,
+        floatingStyles,
+        floatingRef: refs.floating
       },
       children: /* @__PURE__ */ jsxs12("div", { className: wrapperClasses, style: { width, maxWidth }, ref: targetRef, children: [
-        /* @__PURE__ */ jsxs12("button", { className: buttonClasses, type: "button", onClick: handleClickToggle, disabled: isDisabled, children: [
-          selectedOption?.icon ? /* @__PURE__ */ jsx23("div", { className: "mr-1 flex", children: /* @__PURE__ */ jsx23(Icon, { name: selectedOption.icon, size: size === "large" ? "medium" : "small" }) }) : placeholder != null && placeholderIcon && /* @__PURE__ */ jsx23("div", { className: "mr-1 flex", children: /* @__PURE__ */ jsx23(Icon, { name: placeholderIcon, size: size === "large" ? "medium" : "small" }) }),
-          /* @__PURE__ */ jsx23("div", { className: labelClasses, children: /* @__PURE__ */ jsx23("div", { className: "truncate", children: selectedOption ? selectedOption.label : placeholder != null && placeholder }) }),
-          /* @__PURE__ */ jsx23("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx23(
-            Icon,
-            {
-              name: isOptionListOpen ? "angle-small-up" : "angle-small-down",
-              size: size === "large" ? "medium" : "small"
-            }
-          ) })
-        ] }),
-        isOptionListOpen && !isDisabled && /* @__PURE__ */ jsx23(SelectList, { maxHeight: optionListMaxHeight, children })
+        /* @__PURE__ */ jsxs12(
+          "button",
+          {
+            ref: refs.setReference,
+            className: buttonClasses,
+            type: "button",
+            onClick: handleClickToggle,
+            disabled: isDisabled,
+            children: [
+              selectedOption?.icon ? /* @__PURE__ */ jsx23("div", { className: "mr-1 flex", children: /* @__PURE__ */ jsx23(Icon, { name: selectedOption.icon, size: size === "large" ? "medium" : "small" }) }) : placeholder != null && placeholderIcon && /* @__PURE__ */ jsx23("div", { className: "mr-1 flex", children: /* @__PURE__ */ jsx23(Icon, { name: placeholderIcon, size: size === "large" ? "medium" : "small" }) }),
+              /* @__PURE__ */ jsx23("div", { className: labelClasses, children: /* @__PURE__ */ jsx23("div", { className: "truncate", children: selectedOption ? selectedOption.label : placeholder != null && placeholder }) }),
+              /* @__PURE__ */ jsx23("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx23(
+                Icon,
+                {
+                  name: isOptionListOpen ? "angle-small-up" : "angle-small-down",
+                  size: size === "large" ? "medium" : "small"
+                }
+              ) })
+            ]
+          }
+        ),
+        isOptionListOpen && !isDisabled && /* @__PURE__ */ jsx23(FloatingPortal, { children: /* @__PURE__ */ jsx23("div", { className: "relative z-overlay", children: /* @__PURE__ */ jsx23(SelectList, { ref: refs.setFloating, maxHeight: optionListMaxHeight, children }) }) })
       ] })
     }
   );
@@ -1150,13 +1188,81 @@ function PaginationSelect({
   ] });
 }
 
+// src/password-input/password-input.tsx
+import { forwardRef as forwardRef3, useState as useState7 } from "react";
+
+// src/text-input/text-input.tsx
+import { clsx as clsx19 } from "clsx";
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+var TextInput = forwardRef2(
+  ({ 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 = clsx19("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 = clsx19("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__ */ jsxs14("div", { className: inputWrapClasses, children: [
+      /* @__PURE__ */ jsx25("input", { ref, size: 1, className: inputClasses, disabled, onChange: props.onChange, ...props }),
+      after,
+      isShowClearButton && /* @__PURE__ */ jsx25(IconButton, { variant: "text", icon: "close", size: "small", onClick: onClickClearButton })
+    ] });
+  }
+);
+TextInput.displayName = "TextInput";
+
+// src/password-input/password-input.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
+var PasswordInput = forwardRef3(({ disabled = false, ...props }, ref) => {
+  const [isPasswordVisible, setIsPasswordVisible] = useState7(false);
+  const handlePasswordVisibilityToggle = () => {
+    setIsPasswordVisible(!isPasswordVisible);
+  };
+  const passwordToggleButton = /* @__PURE__ */ jsx26(
+    IconButton,
+    {
+      variant: "text",
+      icon: isPasswordVisible === true ? "visibility-off" : "visibility",
+      size: "small",
+      onClick: handlePasswordVisibilityToggle,
+      isDisabled: disabled,
+      "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__ */ jsx26(
+    TextInput,
+    {
+      ref,
+      type: isPasswordVisible === true ? "text" : "password",
+      disabled,
+      ...props,
+      ...{ after: passwordToggleButton }
+    }
+  );
+});
+PasswordInput.displayName = "PasswordInput";
+
 // src/radio/radio.tsx
 import { focusVisible as focusVisible10 } from "@zenkigen-inc/component-theme";
-import clsx19 from "clsx";
-import { useCallback as useCallback5, useState as useState7 } from "react";
-import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+import clsx20 from "clsx";
+import { useCallback as useCallback5, useState as useState8 } from "react";
+import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 function Radio({ name, value, id, label, isChecked = false, isDisabled = false, onChange }) {
-  const [isMouseOver, setIsMouseOver] = useState7(false);
+  const [isMouseOver, setIsMouseOver] = useState8(false);
   const handleMouseOverInput = useCallback5(() => {
     setIsMouseOver(true);
   }, []);
@@ -1167,11 +1273,11 @@ function Radio({ name, value, id, label, isChecked = false, isDisabled = false,
     (e) => !isDisabled && onChange?.(e),
     [isDisabled, onChange]
   );
-  const inputClasses = clsx19("peer absolute z-[1] size-6 opacity-0", {
+  const inputClasses = clsx20("peer absolute z-[1] size-6 opacity-0", {
     "cursor-not-allowed": isDisabled,
     "cursor-pointer": !isDisabled
   });
-  const boxClasses = clsx19(
+  const boxClasses = clsx20(
     "inline-flex size-5 items-center justify-center rounded-full border border-solid bg-white",
     focusVisible10.normalPeer,
     {
@@ -1182,22 +1288,22 @@ function Radio({ name, value, id, label, isChecked = false, isDisabled = false,
       "cursor-pointer": !isDisabled
     }
   );
-  const afterClasses = clsx19("absolute inset-0 m-auto block size-3 rounded-full", {
+  const afterClasses = clsx20("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 = clsx19("inline-block size-3 rounded-full", {
+  const hoverIndicatorClasses = clsx20("inline-block size-3 rounded-full", {
     "bg-hoverUi": !isDisabled && !isChecked && isMouseOver
   });
-  const labelClasses = clsx19("typography-label14regular ml-2 flex-[1_0_0] select-none break-all", {
+  const labelClasses = clsx20("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__ */ jsxs14("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ jsxs14("div", { className: "flex size-6 items-center justify-center", children: [
-      /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsxs15("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ jsxs15("div", { className: "flex size-6 items-center justify-center", children: [
+      /* @__PURE__ */ jsx27(
         "input",
         {
           type: "checkbox",
@@ -1212,32 +1318,32 @@ function Radio({ name, value, id, label, isChecked = false, isDisabled = false,
           className: inputClasses
         }
       ),
-      /* @__PURE__ */ jsx25("div", { className: boxClasses, children: /* @__PURE__ */ jsxs14("div", { className: "relative flex size-5 flex-[0_0_auto] items-center justify-center", children: [
-        /* @__PURE__ */ jsx25("span", { className: afterClasses }),
-        /* @__PURE__ */ jsx25("span", { className: hoverIndicatorClasses })
+      /* @__PURE__ */ jsx27("div", { className: boxClasses, children: /* @__PURE__ */ jsxs15("div", { className: "relative flex size-5 flex-[0_0_auto] items-center justify-center", children: [
+        /* @__PURE__ */ jsx27("span", { className: afterClasses }),
+        /* @__PURE__ */ jsx27("span", { className: hoverIndicatorClasses })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx25("label", { htmlFor: id, className: labelClasses, children: label })
+    /* @__PURE__ */ jsx27("label", { htmlFor: id, className: labelClasses, children: label })
   ] });
 }
 
 // src/search/search.tsx
-import { clsx as clsx20 } from "clsx";
-import { forwardRef } from "react";
-import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
-var Search = forwardRef(({ width = "100%", size = "medium", ...props }, ref) => {
-  const classes = clsx20(
+import { clsx as clsx21 } from "clsx";
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
+var Search = forwardRef4(({ width = "100%", size = "medium", ...props }, ref) => {
+  const classes = clsx21(
     "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 = clsx20("mx-2 h-full flex-1 text-text01 outline-0 placeholder:text-textPlaceholder", {
+  const inputClasses = clsx21("mx-2 h-full flex-1 text-text01 outline-0 placeholder:text-textPlaceholder", {
     ["typography-label14regular"]: size === "medium",
     ["typography-label16regular"]: size === "large"
   });
-  return /* @__PURE__ */ jsx26("div", { className: "relative", ref, children: /* @__PURE__ */ jsx26("form", { onSubmit: props.onSubmit, children: /* @__PURE__ */ jsxs15("div", { className: classes, style: { width }, children: [
-    /* @__PURE__ */ jsx26(Icon, { name: "search", color: "icon01", size: "medium" }),
-    /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx28("div", { className: "relative", ref, children: /* @__PURE__ */ jsx28("form", { onSubmit: props.onSubmit, children: /* @__PURE__ */ jsxs16("div", { className: classes, style: { width }, children: [
+    /* @__PURE__ */ jsx28(Icon, { name: "search", color: "icon01", size: "medium" }),
+    /* @__PURE__ */ jsx28(
       "input",
       {
         type: "text",
@@ -1248,7 +1354,7 @@ var Search = forwardRef(({ width = "100%", size = "medium", ...props }, ref) =>
         onChange: props.onChange
       }
     ),
-    props.onClickClearButton && props.value && props.value.length !== 0 && /* @__PURE__ */ jsx26(
+    props.onClickClearButton && props.value && props.value.length !== 0 && /* @__PURE__ */ jsx28(
       IconButton,
       {
         variant: "text",
@@ -1263,7 +1369,7 @@ var Search = forwardRef(({ width = "100%", size = "medium", ...props }, ref) =>
 Search.displayName = "Search";
 
 // src/segmented-control/segmented-control.tsx
-import React2, { Children, useRef as useRef5 } from "react";
+import React2, { Children, useRef as useRef4 } from "react";
 
 // src/segmented-control/segmented-control-context.ts
 import { createContext as createContext5 } from "react";
@@ -1271,9 +1377,9 @@ var SegmentedControlContext = createContext5(null);
 
 // src/segmented-control/segmented-control-item.tsx
 import { focusVisible as focusVisible11 } from "@zenkigen-inc/component-theme";
-import { clsx as clsx21 } from "clsx";
-import { useContext as useContext7, useEffect as useEffect3, useRef as useRef4 } from "react";
-import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+import { clsx as clsx22 } from "clsx";
+import { useContext as useContext7, useEffect as useEffect3, useRef as useRef3 } from "react";
+import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
 var SegmentedControlItem = ({
   label,
   value,
@@ -1283,8 +1389,8 @@ var SegmentedControlItem = ({
   ...rest
 }) => {
   const context = useContext7(SegmentedControlContext);
-  const buttonRef = useRef4(null);
-  const lastInteractionWasMouse = useRef4(false);
+  const buttonRef = useRef3(null);
+  const lastInteractionWasMouse = useRef3(false);
   if (context === null) {
     throw new Error("SegmentedControl.Item must be used within SegmentedControl");
   }
@@ -1322,7 +1428,7 @@ var SegmentedControlItem = ({
     lastInteractionWasMouse.current = false;
     onBlur?.();
   };
-  const buttonClasses = clsx21("relative flex items-center justify-center gap-1 rounded", focusVisible11.normal, {
+  const buttonClasses = clsx22("relative flex items-center justify-center gap-1 rounded", focusVisible11.normal, {
     "px-2 min-h-[24px] typography-label12regular": size === "small",
     "px-4 min-h-[32px] typography-label14regular": size === "medium",
     // States - Default with hover
@@ -1332,7 +1438,7 @@ var SegmentedControlItem = ({
     // States - Disabled
     "text-disabled01 bg-transparent": isOptionDisabled === true
   });
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     "button",
     {
       ref: buttonRef,
@@ -1349,25 +1455,25 @@ var SegmentedControlItem = ({
       onMouseDown: handleMouseDown,
       ...rest,
       children: [
-        Boolean(icon) === true && icon && /* @__PURE__ */ jsx27(
+        Boolean(icon) === true && icon && /* @__PURE__ */ jsx29(
           "span",
           {
-            className: clsx21("flex items-center", {
+            className: clsx22("flex items-center", {
               "fill-disabled01": isOptionDisabled === true,
               "fill-interactive01": isSelected === true && isOptionDisabled === false,
               "fill-icon01": isSelected === false && isOptionDisabled === false
             }),
-            children: /* @__PURE__ */ jsx27(Icon, { name: icon, size: "small" })
+            children: /* @__PURE__ */ jsx29(Icon, { name: icon, size: "small" })
           }
         ),
-        Boolean(label) === true && /* @__PURE__ */ jsx27("span", { className: "whitespace-nowrap", children: label })
+        Boolean(label) === true && /* @__PURE__ */ jsx29("span", { className: "whitespace-nowrap", children: label })
       ]
     }
   );
 };
 
 // src/segmented-control/segmented-control.tsx
-import { Fragment as Fragment3, jsx as jsx28 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx30 } from "react/jsx-runtime";
 var SegmentedControl = ({
   children,
   value,
@@ -1377,7 +1483,7 @@ var SegmentedControl = ({
   "aria-label": ariaLabel,
   ...rest
 }) => {
-  const containerRef = useRef5(null);
+  const containerRef = useRef4(null);
   const itemIds = Children.toArray(children).filter((child) => {
     if (!React2.isValidElement(child) || typeof child.props !== "object" || child.props === null || !("value" in child.props)) {
       return false;
@@ -1412,7 +1518,7 @@ var SegmentedControl = ({
     onBlur: handleBlurRovingFocus,
     values: itemIds
   };
-  return /* @__PURE__ */ jsx28(Fragment3, { children: /* @__PURE__ */ jsx28(SegmentedControlContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx30(Fragment4, { children: /* @__PURE__ */ jsx30(SegmentedControlContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx30(
     "div",
     {
       ref: containerRef,
@@ -1430,19 +1536,19 @@ SegmentedControl.Item = SegmentedControlItem;
 
 // src/select-sort/select-sort.tsx
 import { buttonColors as buttonColors4, focusVisible as focusVisible14 } from "@zenkigen-inc/component-theme";
-import clsx24 from "clsx";
-import { useCallback as useCallback6, useRef as useRef6, useState as useState8 } from "react";
+import clsx25 from "clsx";
+import { useCallback as useCallback6, useRef as useRef5, useState as useState9 } from "react";
 
 // src/select-sort/select-list.tsx
 import { focusVisible as focusVisible13 } from "@zenkigen-inc/component-theme";
-import clsx23 from "clsx";
+import clsx24 from "clsx";
 
 // src/select-sort/select-item.tsx
 import { focusVisible as focusVisible12 } from "@zenkigen-inc/component-theme";
-import clsx22 from "clsx";
-import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
+import clsx23 from "clsx";
+import { jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
 function SelectItem2({ children, isSortKey, onClickItem }) {
-  const itemClasses = clsx22(
+  const itemClasses = clsx23(
     "typography-label14regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02",
     focusVisible12.inset,
     {
@@ -1450,16 +1556,16 @@ function SelectItem2({ children, isSortKey, onClickItem }) {
       "bg-uiBackground01 fill-icon01 text-interactive02": !isSortKey
     }
   );
-  return /* @__PURE__ */ jsx29("li", { className: "flex w-full items-center", onClick: onClickItem, children: /* @__PURE__ */ jsxs17("button", { className: itemClasses, type: "button", children: [
-    /* @__PURE__ */ jsx29("span", { className: "ml-1 mr-6", children }),
-    isSortKey && /* @__PURE__ */ jsx29("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx29(Icon, { name: "check", size: "small" }) })
+  return /* @__PURE__ */ jsx31("li", { className: "flex w-full items-center", onClick: onClickItem, children: /* @__PURE__ */ jsxs18("button", { className: itemClasses, type: "button", children: [
+    /* @__PURE__ */ jsx31("span", { className: "ml-1 mr-6", children }),
+    isSortKey && /* @__PURE__ */ jsx31("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx31(Icon, { name: "check", size: "small" }) })
   ] }) });
 }
 
 // src/select-sort/select-list.tsx
-import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
 function SelectList2({ size, variant, sortOrder, onClickItem, onClickDeselect }) {
-  const listClasses = clsx23(
+  const listClasses = clsx24(
     "absolute z-dropdown w-max overflow-y-auto rounded bg-uiBackground01 py-2 shadow-floatingShadow",
     {
       "top-7": size === "x-small" || size === "small",
@@ -1468,19 +1574,19 @@ function SelectList2({ size, variant, sortOrder, onClickItem, onClickDeselect })
       "border-solid border border-uiBorder01": variant === "outline"
     }
   );
-  const deselectButtonClasses = clsx23(
+  const deselectButtonClasses = clsx24(
     "typography-label14regular flex h-8 w-full items-center px-3 text-interactive02 hover:bg-hover02 active:bg-active02",
     focusVisible13.inset
   );
-  return /* @__PURE__ */ jsxs18("ul", { className: listClasses, children: [
-    /* @__PURE__ */ jsx30(SelectItem2, { isSortKey: sortOrder === "ascend", onClickItem: () => onClickItem("ascend"), children: "\u6607\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
-    /* @__PURE__ */ jsx30(SelectItem2, { isSortKey: sortOrder === "descend", onClickItem: () => onClickItem("descend"), children: "\u964D\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
-    sortOrder !== null && onClickDeselect && /* @__PURE__ */ jsx30("li", { children: /* @__PURE__ */ jsx30("button", { className: deselectButtonClasses, type: "button", onClick: onClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
+  return /* @__PURE__ */ jsxs19("ul", { className: listClasses, children: [
+    /* @__PURE__ */ jsx32(SelectItem2, { isSortKey: sortOrder === "ascend", onClickItem: () => onClickItem("ascend"), children: "\u6607\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
+    /* @__PURE__ */ jsx32(SelectItem2, { isSortKey: sortOrder === "descend", onClickItem: () => onClickItem("descend"), children: "\u964D\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
+    sortOrder !== null && onClickDeselect && /* @__PURE__ */ jsx32("li", { children: /* @__PURE__ */ jsx32("button", { className: deselectButtonClasses, type: "button", onClick: onClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
   ] });
 }
 
 // src/select-sort/select-sort.tsx
-import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
 function SelectSort({
   size = "medium",
   variant = "outline",
@@ -1492,8 +1598,8 @@ function SelectSort({
   onChange,
   onClickDeselect
 }) {
-  const [isOptionListOpen, setIsOptionListOpen] = useState8(false);
-  const targetRef = useRef6(null);
+  const [isOptionListOpen, setIsOptionListOpen] = useState9(false);
+  const targetRef = useRef5(null);
   useOutsideClick(targetRef, () => setIsOptionListOpen(false));
   const handleClickToggle = () => setIsOptionListOpen((prev) => !prev);
   const handleClickItem = useCallback6(
@@ -1503,13 +1609,13 @@ function SelectSort({
     },
     [onChange]
   );
-  const wrapperClasses = clsx24("relative flex shrink-0 items-center gap-1 rounded", {
+  const wrapperClasses = clsx25("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 = clsx24(
+  const buttonClasses = clsx25(
     "flex size-full items-center rounded",
     buttonColors4[variant].hover,
     buttonColors4[variant].active,
@@ -1523,23 +1629,23 @@ function SelectSort({
       "pointer-events-none": isDisabled
     }
   );
-  const labelClasses = clsx24("truncate", {
+  const labelClasses = clsx25("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__ */ jsxs19("div", { className: wrapperClasses, style: { width }, ref: targetRef, children: [
-    /* @__PURE__ */ jsxs19("button", { className: buttonClasses, type: "button", onClick: handleClickToggle, disabled: isDisabled, children: [
-      /* @__PURE__ */ jsx31("div", { className: labelClasses, children: label }),
-      /* @__PURE__ */ jsx31("div", { className: "ml-auto flex items-center", children: isSortKey ? /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsxs20("div", { className: wrapperClasses, style: { width }, ref: targetRef, children: [
+    /* @__PURE__ */ jsxs20("button", { className: buttonClasses, type: "button", onClick: handleClickToggle, disabled: isDisabled, children: [
+      /* @__PURE__ */ jsx33("div", { className: labelClasses, children: label }),
+      /* @__PURE__ */ jsx33("div", { className: "ml-auto flex items-center", children: isSortKey ? /* @__PURE__ */ jsx33(
         Icon,
         {
           name: sortOrder === "ascend" ? "arrow-up" : "arrow-down",
           size: size === "large" ? "medium" : "small"
         }
-      ) : /* @__PURE__ */ jsx31(
+      ) : /* @__PURE__ */ jsx33(
         Icon,
         {
           name: isOptionListOpen ? "angle-small-up" : "angle-small-down",
@@ -1547,7 +1653,7 @@ function SelectSort({
         }
       ) })
     ] }),
-    isOptionListOpen && !isDisabled && /* @__PURE__ */ jsx31(
+    isOptionListOpen && !isDisabled && /* @__PURE__ */ jsx33(
       SelectList2,
       {
         size,
@@ -1562,9 +1668,9 @@ function SelectSort({
 
 // src/sort-button/sort-button.tsx
 import { buttonColors as buttonColors5, focusVisible as focusVisible15 } from "@zenkigen-inc/component-theme";
-import clsx25 from "clsx";
+import clsx26 from "clsx";
 import { useCallback as useCallback7 } from "react";
-import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
 function SortButton({
   size = "medium",
   width,
@@ -1584,13 +1690,13 @@ function SortButton({
     if (sortOrder === "descend") return "arrow-down";
     return "angle-small-down";
   };
-  const wrapperClasses = clsx25("relative flex shrink-0 items-center gap-1 rounded", {
+  const wrapperClasses = clsx26("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 = clsx25(
+  const buttonClasses = clsx26(
     "flex size-full items-center rounded",
     buttonColors5.text.hover,
     buttonColors5.text.active,
@@ -1606,14 +1712,14 @@ function SortButton({
       "pointer-events-none": isDisabled
     }
   );
-  const labelClasses = clsx25("truncate", {
+  const labelClasses = clsx26("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__ */ jsx32("div", { className: wrapperClasses, style: { width }, children: /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsx34("div", { className: wrapperClasses, style: { width }, children: /* @__PURE__ */ jsxs21(
     "button",
     {
       className: buttonClasses,
@@ -1624,22 +1730,22 @@ function SortButton({
       "aria-label": ariaLabel,
       "aria-disabled": isDisabled,
       children: [
-        /* @__PURE__ */ jsx32("div", { className: labelClasses, children: label }),
-        /* @__PURE__ */ jsx32("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx32(Icon, { name: getIconName(), size: size === "large" ? "medium" : "small" }) })
+        /* @__PURE__ */ jsx34("div", { className: labelClasses, children: label }),
+        /* @__PURE__ */ jsx34("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx34(Icon, { name: getIconName(), size: size === "large" ? "medium" : "small" }) })
       ]
     }
   ) });
 }
 
 // src/tab/tab.tsx
-import { clsx as clsx27 } from "clsx";
+import { clsx as clsx28 } from "clsx";
 import { Children as Children2 } from "react";
 
 // src/tab/tab-item.tsx
-import { clsx as clsx26 } from "clsx";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { clsx as clsx27 } from "clsx";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var TabItem = ({ isSelected = false, ...props }) => {
-  const classes = clsx26(
+  const classes = clsx27(
     "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",
     {
       "typography-label14regular": !isSelected,
@@ -1648,7 +1754,7 @@ var TabItem = ({ isSelected = false, ...props }) => {
       "before:bg-interactive01 hover:before:bg-interactive01 pointer-events-none": isSelected
     }
   );
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx35(
     "button",
     {
       type: "button",
@@ -1663,39 +1769,39 @@ var TabItem = ({ isSelected = false, ...props }) => {
 };
 
 // src/tab/tab.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 function Tab({ children, layout = "auto" }) {
   const childrenCount = Children2.count(children);
   const containerStyle = layout === "equal" ? { gridTemplateColumns: `repeat(${childrenCount}, minmax(0,1fr))` } : {};
-  const containerClasses = clsx27(
+  const containerClasses = clsx28(
     "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__ */ jsx34("div", { role: "tablist", className: containerClasses, style: containerStyle, children });
+  return /* @__PURE__ */ jsx36("div", { role: "tablist", className: containerClasses, style: containerStyle, children });
 }
 Tab.Item = TabItem;
 
 // src/table/table-cell.tsx
-import clsx28 from "clsx";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import clsx29 from "clsx";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function TableCell({ children, className, isHeader = false }) {
-  const classes = clsx28("border-b border-uiBorder01", { "sticky top-0 z-10 bg-white": isHeader }, className);
-  return /* @__PURE__ */ jsx35("div", { className: classes, children });
+  const classes = clsx29("border-b border-uiBorder01", { "sticky top-0 z-10 bg-white": isHeader }, className);
+  return /* @__PURE__ */ jsx37("div", { className: classes, children });
 }
 
 // src/table/table-row.tsx
-import clsx29 from "clsx";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import clsx30 from "clsx";
+import { jsx as jsx38 } from "react/jsx-runtime";
 function TableRow({ children, isHoverBackgroundVisible = false }) {
-  const rowClasses = clsx29("contents", isHoverBackgroundVisible && "[&:hover>div]:bg-hoverUi02");
-  return /* @__PURE__ */ jsx36("div", { className: rowClasses, children });
+  const rowClasses = clsx30("contents", isHoverBackgroundVisible && "[&:hover>div]:bg-hoverUi02");
+  return /* @__PURE__ */ jsx38("div", { className: rowClasses, children });
 }
 
 // src/table/table.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 function Table({
   width,
   templateRows,
@@ -1704,7 +1810,7 @@ function Table({
   autoRows,
   children
 }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx39(
     "div",
     {
       className: "grid",
@@ -1724,22 +1830,22 @@ Table.Cell = TableCell;
 
 // src/tag/tag.tsx
 import { tagColors, tagLightColors } from "@zenkigen-inc/component-theme";
-import clsx31 from "clsx";
+import clsx32 from "clsx";
 
 // src/tag/delete-icon.tsx
 import { focusVisible as focusVisible16 } from "@zenkigen-inc/component-theme";
-import clsx30 from "clsx";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import clsx31 from "clsx";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var DeleteIcon = ({ color, variant, onClick }) => {
-  const deleteButtonClasses = clsx30(
+  const deleteButtonClasses = clsx31(
     "group ml-2 size-[14px] rounded-full p-0.5 hover:cursor-pointer hover:bg-iconOnColor focus-visible:bg-iconOnColor",
     focusVisible16.normal
   );
-  const deletePathClasses = clsx30({
+  const deletePathClasses = clsx31({
     "fill-interactive02": color === "gray" || variant === "light",
     "group-hover:fill-interactive02 group-focus-visible:fill-interactive02 fill-iconOnColor": color !== "gray"
   });
-  return /* @__PURE__ */ jsx38("button", { type: "button", className: deleteButtonClasses, onClick, children: /* @__PURE__ */ jsx38("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx40("button", { type: "button", className: deleteButtonClasses, onClick, children: /* @__PURE__ */ jsx40("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx40(
     "path",
     {
       fillRule: "evenodd",
@@ -1751,9 +1857,9 @@ var DeleteIcon = ({ color, variant, onClick }) => {
 };
 
 // src/tag/tag.tsx
-import { jsx as jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs22 } from "react/jsx-runtime";
 function Tag({ id, children, color, variant = "normal", size = "medium", isEditable, onDelete }) {
-  const wrapperClasses = clsx31("flex", "items-center", "justify-center", {
+  const wrapperClasses = clsx32("flex", "items-center", "justify-center", {
     [tagColors[color]]: variant === "normal",
     [tagLightColors[color]]: variant === "light",
     "h-[14px] typography-label11regular": !isEditable && size === "x-small",
@@ -1765,17 +1871,17 @@ function Tag({ id, children, color, variant = "normal", size = "medium", isEdita
     "py-0.5 px-1": !isEditable,
     "py-1 px-2": isEditable
   });
-  return /* @__PURE__ */ jsxs21("div", { className: wrapperClasses, children: [
+  return /* @__PURE__ */ jsxs22("div", { className: wrapperClasses, children: [
     children,
-    isEditable ? /* @__PURE__ */ jsx39(DeleteIcon, { onClick: () => onDelete(id), color, variant }) : null
+    isEditable ? /* @__PURE__ */ jsx41(DeleteIcon, { onClick: () => onDelete(id), color, variant }) : null
   ] });
 }
 
 // src/text-area/text-area.tsx
-import { clsx as clsx32 } from "clsx";
-import { forwardRef as forwardRef2 } from "react";
-import { jsx as jsx40 } from "react/jsx-runtime";
-var TextArea = forwardRef2(
+import { clsx as clsx33 } from "clsx";
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx42 } from "react/jsx-runtime";
+var TextArea = forwardRef5(
   ({
     size = "medium",
     isResizable = false,
@@ -1786,7 +1892,7 @@ var TextArea = forwardRef2(
     height,
     ...props
   }, ref) => {
-    const classes = clsx32(
+    const classes = clsx33(
       "w-full rounded border outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder",
       {
         "border-supportError": isError && !disabled,
@@ -1800,7 +1906,7 @@ var TextArea = forwardRef2(
         "resize-none": !isResizable
       }
     );
-    return /* @__PURE__ */ jsx40("div", { className: "flex", children: /* @__PURE__ */ jsx40(
+    return /* @__PURE__ */ jsx42("div", { className: "flex", children: /* @__PURE__ */ jsx42(
       "textarea",
       {
         ref,
@@ -1820,42 +1926,10 @@ var TextArea = forwardRef2(
 );
 TextArea.displayName = "TextArea";
 
-// src/text-input/text-input.tsx
-import { clsx as clsx33 } from "clsx";
-import { forwardRef as forwardRef3 } from "react";
-import { jsx as jsx41, jsxs as jsxs22 } from "react/jsx-runtime";
-var TextInput = forwardRef3(
-  ({ size = "medium", isError = false, disabled = false, onClickClearButton, ...props }, ref) => {
-    const isShowClearButton = !!onClickClearButton && props.value.length !== 0 && !disabled;
-    const inputWrapClasses = clsx33("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" && isShowClearButton,
-      "pr-3": size === "large" && isShowClearButton
-    });
-    const inputClasses = clsx33("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": isShowClearButton
-    });
-    return /* @__PURE__ */ jsxs22("div", { className: inputWrapClasses, children: [
-      /* @__PURE__ */ jsx41("input", { ref, size: 1, className: inputClasses, disabled, onChange: props.onChange, ...props }),
-      isShowClearButton && /* @__PURE__ */ jsx41(IconButton, { variant: "text", icon: "close", size: "small", onClick: onClickClearButton })
-    ] });
-  }
-);
-TextInput.displayName = "TextInput";
-
 // src/toast/toast.tsx
 import clsx34 from "clsx";
-import { useCallback as useCallback8, useEffect as useEffect4, useState as useState9 } from "react";
-import { jsx as jsx42, jsxs as jsxs23 } from "react/jsx-runtime";
+import { useCallback as useCallback8, useEffect as useEffect4, useState as useState10 } from "react";
+import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
 var CLOSE_TIME_MSEC = 5e3;
 function Toast({
   state = "information",
@@ -1865,7 +1939,7 @@ function Toast({
   children,
   onClickClose
 }) {
-  const [isRemoving, setIsRemoving] = useState9(false);
+  const [isRemoving, setIsRemoving] = useState10(false);
   const handleClose = useCallback8(() => {
     if (isAnimation) {
       setIsRemoving(true);
@@ -1903,20 +1977,20 @@ function Toast({
     return () => window.clearTimeout(timer);
   }, [isAutoClose]);
   return /* @__PURE__ */ jsxs23("div", { className: wrapperClasses, style: { width }, onAnimationEnd: handleAnimationEnd, children: [
-    /* @__PURE__ */ jsx42("div", { className: iconClasses, children: /* @__PURE__ */ jsx42(Icon, { name: iconName[state] }) }),
-    /* @__PURE__ */ jsx42("p", { className: textClasses, children }),
-    /* @__PURE__ */ jsx42(IconButton, { icon: "close", size: "medium", variant: "text", onClick: handleClose, isNoPadding: true })
+    /* @__PURE__ */ jsx43("div", { className: iconClasses, children: /* @__PURE__ */ jsx43(Icon, { name: iconName[state] }) }),
+    /* @__PURE__ */ jsx43("p", { className: textClasses, children }),
+    /* @__PURE__ */ jsx43(IconButton, { icon: "close", size: "medium", variant: "text", onClick: handleClose, isNoPadding: true })
   ] });
 }
 
 // src/toast/toast-provider.tsx
-import { createContext as createContext6, useCallback as useCallback9, useContext as useContext8, useEffect as useEffect5, useState as useState10 } from "react";
+import { createContext as createContext6, useCallback as useCallback9, useContext as useContext8, useEffect as useEffect5, useState as useState11 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { jsx as jsx43, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
 var ToastContext = createContext6({});
 var ToastProvider = ({ children }) => {
-  const [isClientRender, setIsClientRender] = useState10(false);
-  const [toasts, setToasts] = useState10([]);
+  const [isClientRender, setIsClientRender] = useState11(false);
+  const [toasts, setToasts] = useState11([]);
   const addToast = useCallback9(({ message, state }) => {
     setToasts((prev) => [...prev, { id: Math.trunc(Math.random() * 1e5), message, state }]);
   }, []);
@@ -1929,7 +2003,7 @@ var ToastProvider = ({ children }) => {
   return /* @__PURE__ */ jsxs24(ToastContext.Provider, { value: { addToast, removeToast }, children: [
     children,
     isClientRender && createPortal3(
-      /* @__PURE__ */ jsx43("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__ */ jsx43(Toast, { state, isAutoClose: true, isAnimation: true, onClickClose: () => removeToast(id), width: 475, children: message }, id)) }),
+      /* @__PURE__ */ jsx44("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__ */ jsx44(Toast, { state, isAutoClose: true, isAnimation: true, onClickClose: () => removeToast(id), width: 475, children: message }, id)) }),
       document.body
     )
   ] });
@@ -1940,7 +2014,7 @@ var useToast = () => {
 
 // src/toggle/toggle.tsx
 import clsx35 from "clsx";
-import { jsx as jsx44, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs25 } from "react/jsx-runtime";
 function Toggle({
   id,
   size = "medium",
@@ -1976,8 +2050,8 @@ function Toggle({
     "cursor-pointer text-text01": !isDisabled
   });
   return /* @__PURE__ */ jsxs25("div", { className: "relative flex flex-[0_0_auto] items-center", children: [
-    label != null && labelPosition === "left" && /* @__PURE__ */ jsx44("label", { htmlFor: id, className: labelClasses, children: label }),
-    /* @__PURE__ */ jsx44(
+    label != null && labelPosition === "left" && /* @__PURE__ */ jsx45("label", { htmlFor: id, className: labelClasses, children: label }),
+    /* @__PURE__ */ jsx45(
       "input",
       {
         className: inputClasses,
@@ -1989,13 +2063,13 @@ function Toggle({
         disabled: isDisabled
       }
     ),
-    /* @__PURE__ */ jsx44("div", { className: baseClasses, children: /* @__PURE__ */ jsx44("span", { className: indicatorClasses }) }),
-    label != null && labelPosition === "right" && /* @__PURE__ */ jsx44("label", { htmlFor: id, className: labelClasses, children: label })
+    /* @__PURE__ */ jsx45("div", { className: baseClasses, children: /* @__PURE__ */ jsx45("span", { className: indicatorClasses }) }),
+    label != null && labelPosition === "right" && /* @__PURE__ */ jsx45("label", { htmlFor: id, className: labelClasses, children: label })
   ] });
 }
 
 // src/tooltip/tooltip.tsx
-import { useCallback as useCallback11, useEffect as useEffect6, useRef as useRef7, useState as useState11 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect6, useRef as useRef6, useState as useState12 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
 // src/tooltip/tooltip-content.tsx
@@ -2003,7 +2077,7 @@ import clsx37 from "clsx";
 
 // src/tooltip/tail-icon.tsx
 import clsx36 from "clsx";
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 var TailIcon = (props) => {
   const tailClasses = clsx36("absolute fill-uiBackgroundTooltip", {
     "rotate-180": props.verticalPosition === "bottom",
@@ -2020,9 +2094,9 @@ var TailIcon = (props) => {
     "left-1/2 -translate-x-2": props.horizontalAlign === "center" && props.size !== "small"
   });
   if (props.size === "small") {
-    return /* @__PURE__ */ jsx45("svg", { className: tailClasses, width: "8", height: "4", viewBox: "0 0 8 4", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx45("path", { d: "M4 4L0 0H8L4 4Z" }) });
+    return /* @__PURE__ */ jsx46("svg", { className: tailClasses, width: "8", height: "4", viewBox: "0 0 8 4", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx46("path", { d: "M4 4L0 0H8L4 4Z" }) });
   } else {
-    return /* @__PURE__ */ jsx45(
+    return /* @__PURE__ */ jsx46(
       "svg",
       {
         className: tailClasses,
@@ -2031,14 +2105,14 @@ var TailIcon = (props) => {
         viewBox: "0 0 14 8",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        children: /* @__PURE__ */ jsx45("path", { d: "M7 8L0 0H14L7 8Z" })
+        children: /* @__PURE__ */ jsx46("path", { d: "M7 8L0 0H14L7 8Z" })
       }
     );
   }
 };
 
 // src/tooltip/tooltip-content.tsx
-import { jsx as jsx46, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs26 } from "react/jsx-runtime";
 var TooltipContent = ({
   content,
   horizontalAlign,
@@ -2074,7 +2148,7 @@ var TooltipContent = ({
     transform: `translate(${tooltipPosition.translateX}, ${tooltipPosition.translateY})`,
     ...tooltipPosition
   } : {};
-  return /* @__PURE__ */ jsx46("div", { className: tooltipWrapperClasses, style: tooltipWrapperStyle, children: /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsx47("div", { className: tooltipWrapperClasses, style: tooltipWrapperStyle, children: /* @__PURE__ */ jsxs26(
     "div",
     {
       className: tooltipBodyClasses,
@@ -2083,7 +2157,7 @@ var TooltipContent = ({
       },
       children: [
         content,
-        /* @__PURE__ */ jsx46(TailIcon, { size, verticalPosition, horizontalAlign })
+        /* @__PURE__ */ jsx47(TailIcon, { size, verticalPosition, horizontalAlign })
       ]
     }
   ) });
@@ -2144,7 +2218,7 @@ var useTooltip = () => {
 };
 
 // src/tooltip/tooltip.tsx
-import { jsx as jsx47, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs27 } from "react/jsx-runtime";
 function Tooltip({
   children,
   content,
@@ -2156,8 +2230,8 @@ function Tooltip({
   portalTarget
 }) {
   const { calculatePosition } = useTooltip();
-  const [isVisible, setIsVisible] = useState11(false);
-  const [tooltipPosition, setTooltipPosition] = useState11({
+  const [isVisible, setIsVisible] = useState12(false);
+  const [tooltipPosition, setTooltipPosition] = useState12({
     maxWidth: "none",
     width: "auto",
     left: "0px",
@@ -2166,7 +2240,7 @@ function Tooltip({
     translateX: "0",
     translateY: "0"
   });
-  const targetRef = useRef7(null);
+  const targetRef = useRef6(null);
   const handleMouseOverWrapper = useCallback11(() => {
     if (isDisabledHover) {
       return;
@@ -2191,7 +2265,7 @@ function Tooltip({
       onMouseLeave: handleMouseOutWrapper,
       children: [
         children,
-        isVisible && (portalTarget == null ? /* @__PURE__ */ jsx47(
+        isVisible && (portalTarget == null ? /* @__PURE__ */ jsx48(
           TooltipContent,
           {
             content,
@@ -2202,7 +2276,7 @@ function Tooltip({
             tooltipPosition
           }
         ) : createPortal4(
-          /* @__PURE__ */ jsx47(
+          /* @__PURE__ */ jsx48(
             TooltipContent,
             {
               isPortal: true,
@@ -2235,6 +2309,7 @@ export {
   NotificationInline,
   Pagination,
   PaginationSelect,
+  PasswordInput,
   Radio,
   Search,
   SegmentedControl,