@zenkigen-inc/component-ui 1.16.3 → 1.18.0

package/dist/index.js

@@ -36,6 +36,7 @@ __export(index_exports, {
   Checkbox: () => Checkbox,
   Dropdown: () => Dropdown,
   EvaluationStar: () => EvaluationStar,
+  FileInput: () => FileInput,
   Heading: () => Heading,
   Icon: () => Icon,
   IconButton: () => IconButton,
@@ -44,6 +45,11 @@ __export(index_exports, {
   NotificationInline: () => NotificationInline,
   Pagination: () => Pagination,
   PaginationSelect: () => PaginationSelect,
+  PasswordInput: () => PasswordInput,
+  Popover: () => Popover,
+  PopoverContent: () => PopoverContent,
+  PopoverTrigger: () => PopoverTrigger,
+  Popup: () => Popup,
   Radio: () => Radio,
   Search: () => Search,
   SegmentedControl: () => SegmentedControl,
@@ -94,7 +100,13 @@ var Icon = ({ size = "medium", isDisabled = false, ...props }) => {
     },
     props.className
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: classes, children: import_component_icons.iconElements[props.name] });
+  const IconComponent = import_component_icons.iconElements[props.name];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    IconComponent,
+    {
+      ...isDisabled !== true && typeof props.accentColor === "string" ? { accentClassName: `fill-${String(props.accentColor)}` } : {}
+    }
+  ) }) });
 };
 
 // src/avatar/avatar.tsx
@@ -147,20 +159,21 @@ Breadcrumb.Item = BreadcrumbItem;
 var import_component_theme3 = require("@zenkigen-inc/component-theme");
 var import_clsx3 = require("clsx");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var Button = ({
-  size = "medium",
-  variant = "fill",
-  isDisabled,
-  isSelected = false,
-  width,
-  borderRadius,
-  justifyContent = "center",
-  before,
-  after,
-  elementAs,
-  children,
-  ...props
-}) => {
+var createButton = (props) => {
+  const {
+    size = "medium",
+    variant = "fill",
+    isDisabled,
+    isSelected = false,
+    width,
+    borderRadius,
+    justifyContent = "center",
+    before,
+    after,
+    elementAs,
+    children,
+    ...restProps
+  } = props;
   const baseClasses = (0, import_clsx3.clsx)(
     "flex shrink-0 items-center gap-1",
     import_component_theme3.buttonColors[variant].hover,
@@ -174,7 +187,7 @@ var Button = ({
       "inline-flex": elementAs === "a",
       [import_component_theme3.buttonColors[variant].selected]: isSelected,
       [import_component_theme3.buttonColors[variant].base]: !isSelected,
-      "hover:text-textOnColor active:text-textOnColor [&:hover>*]:fill-iconOnColor [&:active>*]:fill-iconOnColor": isSelected && variant !== "outline" && variant !== "text",
+      "hover:text-textOnColor active:text-textOnColor [&:hover>*]:fill-iconOnColor [&:active>*]:fill-iconOnColor": isSelected && variant !== "outline" && variant !== "text" && variant !== "outlineDanger",
       "pointer-events-none": isDisabled,
       "rounded-button": borderRadius == null,
       "justify-start": justifyContent === "start",
@@ -184,12 +197,18 @@ var Button = ({
     }
   );
   const Component = elementAs ?? "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Component, { className: baseClasses, style: { width, borderRadius }, disabled: isDisabled, ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Component, { className: baseClasses, style: { width, borderRadius }, disabled: isDisabled, ...restProps, children: [
     before,
     children,
     after
   ] });
 };
+var Button = (props) => {
+  return createButton(props);
+};
+var InternalButton = (props) => {
+  return createButton(props);
+};
 
 // src/checkbox/checkbox.tsx
 var import_component_theme4 = require("@zenkigen-inc/component-theme");
@@ -541,6 +560,7 @@ function EvaluationStar({ value, isEditable = false, onChangeRating, size = "med
   const starClasses = (0, import_clsx8.default)(import_component_theme7.focusVisible.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 = import_component_icons2.iconElements["star-filled"];
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "button",
       {
@@ -548,7 +568,7 @@ function EvaluationStar({ value, isEditable = false, onChangeRating, size = "med
         onClick: () => handleChangeRating(rating),
         className: (0, import_clsx8.default)(color, starClasses),
         disabled: !isEditable,
-        children: import_component_icons2.iconElements["star-filled"]
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconComponent, {})
       },
       rating
     );
@@ -557,17 +577,351 @@ function EvaluationStar({ value, isEditable = false, onChangeRating, size = "med
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "flex flex-row", children: ratingStars });
 }
 
-// src/heading/heading.tsx
+// src/file-input/file-input.tsx
+var import_clsx10 = require("clsx");
+var import_react8 = require("react");
+
+// src/icon-button/icon-button.tsx
 var import_component_theme8 = require("@zenkigen-inc/component-theme");
 var import_clsx9 = require("clsx");
 var import_jsx_runtime13 = require("react/jsx-runtime");
+function IconButton({
+  icon,
+  size = "medium",
+  variant = "outline",
+  isNoPadding = false,
+  isDisabled = false,
+  isSelected = false,
+  ...props
+}) {
+  const baseClasses = (0, import_clsx9.clsx)(
+    "typography-label16regular flex items-center justify-center gap-1 rounded",
+    import_component_theme8.buttonColors[variant].hover,
+    import_component_theme8.buttonColors[variant].active,
+    import_component_theme8.buttonColors[variant].disabled,
+    import_component_theme8.focusVisible.normal,
+    {
+      "h-4 w-4": size === "small" && isNoPadding,
+      "h-6 w-6": size === "small" && !isNoPadding || (size === "medium" || size === "large") && isNoPadding,
+      "h-8 w-8": size === "medium" && !isNoPadding,
+      "h-10 w-10": size === "large" && !isNoPadding,
+      "inline-flex": props.isAnchor,
+      "pointer-events-none": isDisabled,
+      [import_component_theme8.buttonColors[variant].selected]: isSelected,
+      [import_component_theme8.buttonColors[variant].base]: !isSelected
+    }
+  );
+  const iconSize = size === "small" ? "small" : "medium";
+  if (props.isAnchor === true) {
+    const buttonProps = Object.fromEntries(Object.entries(props).filter(([key]) => key !== "isAnchor"));
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("a", { className: baseClasses, ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: icon, size: iconSize }) });
+  } else {
+    const buttonProps = Object.fromEntries(Object.entries(props).filter(([key]) => key !== "isAnchor"));
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", className: baseClasses, disabled: isDisabled, ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: icon, size: iconSize }) });
+  }
+}
+
+// src/file-input/file-input.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var ERROR_TYPES = {
+  SIZE_TOO_LARGE: "SIZE_TOO_LARGE",
+  UNSUPPORTED_FORMAT: "UNSUPPORTED_FORMAT"
+};
+var ERROR_MESSAGES = {
+  SIZE_TOO_LARGE: "\u30D5\u30A1\u30A4\u30EB\u30B5\u30A4\u30BA\u304C\u5927\u304D\u904E\u304E\u307E\u3059\u3002",
+  UNSUPPORTED_FORMAT: "\u30D5\u30A1\u30A4\u30EB\u5F62\u5F0F\u304C\u6B63\u3057\u304F\u3042\u308A\u307E\u305B\u3093\u3002"
+};
+var FileInput = (0, import_react8.forwardRef)(
+  ({ id, variant, accept, maxSize, isDisabled = false, isError = false, onSelect, onError, errorMessages, ...rest }, ref) => {
+    const size = variant === "button" ? rest.size ?? "medium" : "medium";
+    const [selectedFile, setSelectedFile] = (0, import_react8.useState)(null);
+    const [isDragOver, setIsDragOver] = (0, import_react8.useState)(false);
+    const fileInputRef = (0, import_react8.useRef)(null);
+    const errorId = (0, import_react8.useId)();
+    const fallbackId = (0, import_react8.useId)();
+    const inputId = id ?? fallbackId;
+    const validateFile = (0, import_react8.useCallback)(
+      (file) => {
+        const errors = [];
+        if (maxSize != null && maxSize > 0 && file.size > maxSize) {
+          errors.push({
+            type: ERROR_TYPES.SIZE_TOO_LARGE,
+            message: ERROR_MESSAGES.SIZE_TOO_LARGE
+          });
+        }
+        if (accept != null && accept.length > 0) {
+          const acceptTypes = accept.split(",").map((t) => t.trim());
+          const fileName = file.name.toLowerCase();
+          const fileExtension = fileName.substring(fileName.lastIndexOf(".")).toLowerCase();
+          const fileMimeType = file.type;
+          const isAccepted = acceptTypes.some((acceptType) => {
+            if (acceptType.startsWith(".")) {
+              return fileExtension === acceptType.toLowerCase();
+            }
+            if (acceptType.includes("/")) {
+              if (acceptType.endsWith("/*")) {
+                const mainType = acceptType.split("/")[0];
+                return fileMimeType.startsWith(`${mainType}/`);
+              }
+              return fileMimeType === acceptType;
+            }
+            return false;
+          });
+          if (!isAccepted) {
+            errors.push({ type: ERROR_TYPES.UNSUPPORTED_FORMAT, message: ERROR_MESSAGES.UNSUPPORTED_FORMAT });
+          }
+        }
+        if (errors.length > 0) {
+          onError?.(errors);
+          return false;
+        }
+        return true;
+      },
+      [accept, maxSize, onError]
+    );
+    const handleFileSelect = (0, import_react8.useCallback)(
+      (file) => {
+        if (file && !validateFile(file)) {
+          return;
+        }
+        setSelectedFile(file);
+        onSelect?.(file);
+      },
+      [validateFile, onSelect]
+    );
+    const handleFileInputChange = (0, import_react8.useCallback)(
+      (event) => {
+        if (isDisabled) {
+          return;
+        }
+        const files = event.target.files;
+        if (files == null || files.length === 0) {
+          return;
+        }
+        const file = files[0];
+        if (file != null) {
+          handleFileSelect(file);
+        }
+      },
+      [isDisabled, handleFileSelect]
+    );
+    const handleDragOver = (0, import_react8.useCallback)(
+      (event) => {
+        event.preventDefault();
+        if (!isDisabled) {
+          setIsDragOver(true);
+        }
+      },
+      [isDisabled]
+    );
+    const handleDragLeave = (0, import_react8.useCallback)((event) => {
+      event.preventDefault();
+      setIsDragOver(false);
+    }, []);
+    const handleDrop = (0, import_react8.useCallback)(
+      (event) => {
+        event.preventDefault();
+        setIsDragOver(false);
+        if (isDisabled) return;
+        const file = event.dataTransfer.files[0];
+        if (file != null) {
+          handleFileSelect(file);
+        }
+      },
+      [isDisabled, handleFileSelect]
+    );
+    const handleButtonClick = (0, import_react8.useCallback)(() => {
+      if (!isDisabled) {
+        fileInputRef.current?.click();
+      }
+    }, [isDisabled]);
+    const handleClear = (0, import_react8.useCallback)(() => {
+      setSelectedFile(null);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+      onSelect?.(null);
+    }, [onSelect]);
+    (0, import_react8.useImperativeHandle)(
+      ref,
+      () => ({
+        reset: handleClear
+      }),
+      [handleClear]
+    );
+    const hasErrorMessages = !isDisabled && errorMessages != null && errorMessages.length > 0;
+    const hasErrors = !isDisabled && isError === true;
+    const dropzoneClasses = (0, import_clsx10.clsx)(
+      "flex flex-1 flex-col items-center justify-center gap-4 rounded border border-dashed px-6 text-center",
+      selectedFile ? "py-[52px]" : "py-4",
+      {
+        "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,
+        "border-disabled01 bg-disabled02 text-textPlaceholder cursor-not-allowed": isDisabled
+      }
+    );
+    const maxSizeLabel = (() => {
+      if (maxSize != null && maxSize > 0) {
+        const KB = 1024;
+        const MB = KB * 1024;
+        const GB = MB * 1024;
+        if (maxSize < MB) {
+          return `${Math.round(maxSize / KB)}KB\u4EE5\u4E0B`;
+        }
+        if (maxSize < GB) {
+          return `${Math.round(maxSize / MB)}MB\u4EE5\u4E0B`;
+        }
+        return `${Math.round(maxSize / GB)}GB\u4EE5\u4E0B`;
+      }
+      return "\u5236\u9650\u306A\u3057";
+    })();
+    const acceptLabel = (() => {
+      if (accept == null || accept.trim().length === 0) {
+        return "\u5236\u9650\u306A\u3057";
+      }
+      const tokens = accept.split(",").map((t) => t.trim()).filter((t) => t.length > 0);
+      const normalized = tokens.map((token) => {
+        if (token.startsWith(".")) {
+          return token.slice(1);
+        }
+        const slashIndex = token.indexOf("/");
+        if (slashIndex !== -1) {
+          const type = token.slice(0, slashIndex);
+          const subtype = token.slice(slashIndex + 1);
+          return subtype === "*" ? `${type}/*` : subtype;
+        }
+        return token;
+      });
+      return normalized.join(", ");
+    })();
+    if (variant === "button") {
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: hasErrors ? "flex-1" : "min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          InternalButton,
+          {
+            size,
+            variant: hasErrors ? "outlineDanger" : "outline",
+            isDisabled,
+            width: "100%",
+            onClick: handleButtonClick,
+            before: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "upload", size: "small" }),
+            after: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: selectedFile ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: (0, import_clsx10.clsx)("typography-label12regular truncate", !isDisabled && "text-text01"), children: selectedFile.name }) : "" }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "truncate", children: "\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E" })
+          }
+        ) }),
+        selectedFile && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(IconButton, { variant: "text", icon: "close", size: "small", onClick: handleClear }) }),
+        hasErrors && hasErrorMessages && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { id: errorId, "data-testid": "error-messages", className: "typography-label12regular text-supportError", children: errorMessages.map((message, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "break-all", children: message }, index)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "input",
+          {
+            id: inputId,
+            ref: fileInputRef,
+            type: "file",
+            accept,
+            onChange: handleFileInputChange,
+            className: "hidden",
+            "aria-invalid": hasErrors,
+            ...hasErrors && hasErrorMessages && { "aria-describedby": errorId }
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex min-w-[320px] flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        "div",
+        {
+          className: dropzoneClasses,
+          role: "button",
+          tabIndex: isDisabled ? -1 : 0,
+          onDragOver: handleDragOver,
+          onDragLeave: handleDragLeave,
+          onDrop: handleDrop,
+          onClick: handleButtonClick,
+          onKeyDown: (e) => {
+            if ((e.key === "Enter" || e.key === " ") && !isDisabled) {
+              e.preventDefault();
+              handleButtonClick();
+            }
+          },
+          "aria-label": "\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E",
+          "aria-disabled": isDisabled,
+          ...hasErrors && hasErrorMessages && { "aria-describedby": errorId },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "upload-document", size: "large", color: isDisabled ? "icon03" : "icon01" }),
+            !selectedFile && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex flex-col gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "typography-body13regular select-none", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+              "\u3053\u3053\u306B\u30D5\u30A1\u30A4\u30EB\u3092\u30C9\u30ED\u30C3\u30D7\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("br", {}),
+              "\u307E\u305F\u306F\u3001",
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: (0, import_clsx10.clsx)(!isDisabled ? "text-link01" : ""), children: "\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E" }),
+              "\u3057\u3066\u304F\u3060\u3055\u3044\u3002"
+            ] }) }) }),
+            !selectedFile && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: (0, import_clsx10.clsx)("typography-label11regular", isDisabled ? "text-textPlaceholder" : "text-text02"), children: "\u5BFE\u5FDC\u5F62\u5F0F" }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: (0, import_clsx10.clsx)("typography-body12regular", isDisabled ? "text-textPlaceholder" : "text-text01"), children: acceptLabel }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: (0, import_clsx10.clsx)("typography-label11regular", isDisabled ? "text-textPlaceholder" : "text-text02"), children: "\u30B5\u30A4\u30BA" }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: (0, import_clsx10.clsx)("typography-body12regular", isDisabled ? "text-textPlaceholder" : "text-text01"), children: maxSizeLabel })
+            ] }),
+            selectedFile && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "mt-2 flex flex-col items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "typography-label11regular text-text02", children: "\u30D5\u30A1\u30A4\u30EB\u540D" }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "typography-label14regular", children: selectedFile.name }),
+                !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  IconButton,
+                  {
+                    variant: "text",
+                    icon: "close",
+                    size: "small",
+                    onClick: (event) => {
+                      event.stopPropagation();
+                      handleClear();
+                    }
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "input",
+              {
+                id: inputId,
+                ref: fileInputRef,
+                type: "file",
+                accept,
+                onChange: handleFileInputChange,
+                className: "hidden",
+                "aria-invalid": hasErrors,
+                ...hasErrors && hasErrorMessages && { "aria-describedby": errorId }
+              }
+            )
+          ]
+        }
+      ),
+      hasErrors && hasErrorMessages && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "div",
+        {
+          id: errorId,
+          "data-testid": "error-messages",
+          className: "typography-body13regular flex flex-col text-supportDanger",
+          children: errorMessages.map((message, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: message }, index))
+        }
+      )
+    ] });
+  }
+);
+FileInput.displayName = "FileInput";
+
+// src/heading/heading.tsx
+var import_component_theme9 = require("@zenkigen-inc/component-theme");
+var import_clsx11 = require("clsx");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function Heading(props) {
   const TagName = `h${props.level}`;
-  const classes = (0, import_clsx9.clsx)(`flex items-center text-text01`, import_component_theme8.typography.heading[TagName], {
+  const classes = (0, import_clsx11.clsx)(`flex items-center text-text01`, import_component_theme9.typography.heading[TagName], {
     "gap-2": props.level === 1,
     "gap-1": props.level > 1
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(TagName, { className: classes, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(TagName, { className: classes, children: [
     props.before,
     props.children,
     props.after
@@ -575,22 +929,22 @@ function Heading(props) {
 }
 
 // src/hooks/use-roving-focus.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 var useRovingFocus = ({
   values,
   defaultFocusedValue,
   isDisabled = false
 }) => {
-  const [focusedValue, setFocusedValue] = (0, import_react8.useState)(
+  const [focusedValue, setFocusedValue] = (0, import_react9.useState)(
     typeof defaultFocusedValue === "undefined" ? null : defaultFocusedValue
   );
-  const handleFocusChange = (0, import_react8.useCallback)((newValue) => {
+  const handleFocusChange = (0, import_react9.useCallback)((newValue) => {
     setFocusedValue(newValue);
   }, []);
-  const handleBlur = (0, import_react8.useCallback)(() => {
+  const handleBlur = (0, import_react9.useCallback)(() => {
     setFocusedValue(null);
   }, []);
-  const handleKeyDown = (0, import_react8.useCallback)(
+  const handleKeyDown = (0, import_react9.useCallback)(
     (event) => {
       if (isDisabled === true || values.length === 0) return;
       const currentIndex = focusedValue !== null && focusedValue !== "" ? values.indexOf(focusedValue) : -1;
@@ -644,60 +998,18 @@ var useRovingFocus = ({
   };
 };
 
-// src/icon-button/icon-button.tsx
-var import_component_theme9 = require("@zenkigen-inc/component-theme");
-var import_clsx10 = require("clsx");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-function IconButton({
-  icon,
-  size = "medium",
-  variant = "outline",
-  isNoPadding = false,
-  isDisabled = false,
-  isSelected = false,
-  ...props
-}) {
-  const baseClasses = (0, import_clsx10.clsx)(
-    "typography-label16regular flex items-center justify-center gap-1 rounded",
-    import_component_theme9.buttonColors[variant].hover,
-    import_component_theme9.buttonColors[variant].active,
-    import_component_theme9.buttonColors[variant].disabled,
-    import_component_theme9.focusVisible.normal,
-    {
-      "h-4 w-4": size === "small" && isNoPadding,
-      "h-6 w-6": size === "small" && !isNoPadding || (size === "medium" || size === "large") && isNoPadding,
-      "h-8 w-8": size === "medium" && !isNoPadding,
-      "h-10 w-10": size === "large" && !isNoPadding,
-      "inline-flex": props.isAnchor,
-      "pointer-events-none": isDisabled,
-      [import_component_theme9.buttonColors[variant].selected]: isSelected,
-      [import_component_theme9.buttonColors[variant].base]: !isSelected
-    }
-  );
-  const iconSize = size === "small" ? "small" : "medium";
-  if (props.isAnchor === true) {
-    const buttonProps = Object.fromEntries(Object.entries(props).filter(([key]) => key !== "isAnchor"));
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("a", { className: baseClasses, ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: icon, size: iconSize }) });
-  } else {
-    const buttonProps = Object.fromEntries(
-      Object.entries(props).filter(([key]) => key !== "isAnchor" && key !== "onClick")
-    );
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: baseClasses, disabled: isDisabled, onClick: props.onClick, ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: icon, size: iconSize }) });
-  }
-}
-
 // src/loading/loading.tsx
-var import_clsx11 = __toESM(require("clsx"));
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_clsx12 = __toESM(require("clsx"));
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function Loading({ size = "medium", position = "fixed", height = "100%" }) {
-  const wrapperClasses = (0, import_clsx11.default)(position, "left-0 top-0 z-20 flex w-full items-center justify-center");
-  const svgClasses = (0, import_clsx11.default)({
+  const wrapperClasses = (0, import_clsx12.default)(position, "left-0 top-0 z-20 flex w-full items-center justify-center");
+  const svgClasses = (0, import_clsx12.default)({
     "h-4 w-4": size === "small",
     "h-8 w-8": size === "medium",
     "h-16 w-16": size === "large"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: wrapperClasses, style: { height }, children: [
-    size === "small" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: svgClasses, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: wrapperClasses, style: { height }, children: [
+    size === "small" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { className: svgClasses, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "circle",
       {
         className: "origin-center animate-circular-small-move stroke-interactive01",
@@ -709,7 +1021,7 @@ function Loading({ size = "medium", position = "fixed", height = "100%" }) {
         fill: "none"
       }
     ) }),
-    size === "medium" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: svgClasses, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    size === "medium" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { className: svgClasses, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "circle",
       {
         className: "origin-center animate-circular-medium-move stroke-interactive01",
@@ -721,7 +1033,7 @@ function Loading({ size = "medium", position = "fixed", height = "100%" }) {
         fill: "none"
       }
     ) }),
-    size === "large" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: svgClasses, viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    size === "large" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { className: svgClasses, viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "circle",
       {
         className: "origin-center animate-circular-large-move stroke-interactive01",
@@ -737,13 +1049,13 @@ function Loading({ size = "medium", position = "fixed", height = "100%" }) {
 }
 
 // src/modal/modal.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/modal/body-scroll-lock.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var BodyScrollLock = () => {
-  (0, import_react9.useLayoutEffect)(() => {
+  (0, import_react10.useLayoutEffect)(() => {
     const { scrollX, scrollY } = window;
     const { body } = document;
     const hasVerticalScrollbar = document.documentElement.scrollHeight > document.documentElement.clientHeight;
@@ -788,34 +1100,34 @@ function restoreProperty(element, property, value) {
 }
 
 // src/modal/modal-body.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function ModalBody({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "overflow-y-auto", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "overflow-y-auto", children });
 }
 
 // src/modal/modal-context.ts
-var import_react10 = require("react");
-var ModalContext = (0, import_react10.createContext)({
+var import_react11 = require("react");
+var ModalContext = (0, import_react11.createContext)({
   onClose: () => null
 });
 
 // src/modal/modal-footer.tsx
-var import_clsx12 = __toESM(require("clsx"));
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_clsx13 = __toESM(require("clsx"));
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function ModalFooter({ children, isNoBorder = false }) {
-  const wrapperClasses = (0, import_clsx12.default)("flex w-full shrink-0 items-center rounded-b-lg px-6 py-4", {
+  const wrapperClasses = (0, import_clsx13.default)("flex w-full shrink-0 items-center rounded-b-lg px-6 py-4", {
     "border-t-[1px] border-uiBorder01": !isNoBorder
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: wrapperClasses, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: wrapperClasses, children });
 }
 
 // src/modal/modal-header.tsx
-var import_clsx13 = __toESM(require("clsx"));
-var import_react11 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_clsx14 = __toESM(require("clsx"));
+var import_react12 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function ModalHeader({ children, isNoBorder = false }) {
-  const { onClose } = (0, import_react11.useContext)(ModalContext);
-  const headerClasses = (0, import_clsx13.default)(
+  const { onClose } = (0, import_react12.useContext)(ModalContext);
+  const headerClasses = (0, import_clsx14.default)(
     "typography-h5 flex w-full shrink-0 items-center justify-between rounded-t-lg px-6 text-text01",
     {
       "border-b border-uiBorder01": !isNoBorder,
@@ -823,14 +1135,14 @@ function ModalHeader({ children, isNoBorder = false }) {
       "h-12": onClose
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: headerClasses, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children }),
-    onClose && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconButton, { icon: "close", size: "small", variant: "text", onClick: onClose })
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: headerClasses, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children }),
+    onClose && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(IconButton, { icon: "close", size: "small", variant: "text", onClick: onClose })
   ] });
 }
 
 // src/modal/modal.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var LIMIT_WIDTH = 320;
 var LIMIT_HEIGHT = 184;
 function Modal({
@@ -842,16 +1154,16 @@ function Modal({
   onClose,
   portalTargetRef
 }) {
-  const [isMounted, setIsMounted] = (0, import_react12.useState)(false);
+  const [isMounted, setIsMounted] = (0, import_react13.useState)(false);
   const renderWidth = typeof width === "number" ? Math.max(width, LIMIT_WIDTH) : width;
   const renderHeight = typeof height === "number" ? Math.max(height, LIMIT_HEIGHT) : height;
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     setIsMounted(true);
   }, []);
-  return isMounted && isOpen ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(BodyScrollLock, {}),
+  return isMounted && isOpen ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BodyScrollLock, {}),
     (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ModalContext.Provider, { value: { onClose }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "fixed left-0 top-0 z-overlay flex size-full items-center justify-center bg-backgroundOverlayBlack py-4", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ModalContext.Provider, { value: { onClose }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fixed left-0 top-0 z-overlay flex size-full items-center justify-center bg-backgroundOverlayBlack py-4", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "div",
         {
           className: "grid max-h-full min-h-[120px] grid-rows-[max-content_1fr_max-content] flex-col rounded-lg bg-uiBackground01 shadow-modalShadow",
@@ -868,10 +1180,10 @@ Modal.Header = ModalHeader;
 Modal.Footer = ModalFooter;
 
 // src/notification-inline/notification-inline.tsx
-var import_clsx14 = require("clsx");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_clsx15 = require("clsx");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function NotificationInline({ state = "default", size = "medium", ...props }) {
-  const wrapperClasses = (0, import_clsx14.clsx)("typography-body13regular flex items-center gap-1 rounded text-text01", {
+  const wrapperClasses = (0, import_clsx15.clsx)("typography-body13regular flex items-center gap-1 rounded text-text01", {
     "bg-uiBackgroundError": state === "attention",
     "bg-uiBackgroundWarning": state === "warning",
     "bg-uiBackgroundBlue": state === "information",
@@ -880,7 +1192,7 @@ function NotificationInline({ state = "default", size = "medium", ...props }) {
     "p-2": size === "small",
     "p-3": size === "medium"
   });
-  const iconClasses = (0, import_clsx14.clsx)("flex items-center", {
+  const iconClasses = (0, import_clsx15.clsx)("flex items-center", {
     "fill-supportError": state === "attention",
     "fill-supportWarning": state === "warning",
     "fill-blue-blue50": state === "information",
@@ -896,28 +1208,28 @@ function NotificationInline({ state = "default", size = "medium", ...props }) {
     small: "small",
     medium: "medium"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: wrapperClasses, children: [
-    state !== "default" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: iconName[state], size: iconSize[size] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "flex-1", children: props.children }),
-    props.showClose === true && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(IconButton, { icon: "close", size: "small", variant: "text" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: wrapperClasses, children: [
+    state !== "default" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { name: iconName[state], size: iconSize[size] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "flex-1", children: props.children }),
+    props.showClose === true && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(IconButton, { icon: "close", size: "small", variant: "text" }) })
   ] });
 }
 
 // src/pagination/pagination-button.tsx
-var import_clsx15 = require("clsx");
-var import_react14 = require("react");
+var import_clsx16 = require("clsx");
+var import_react15 = require("react");
 
 // src/pagination/pagination-context.ts
-var import_react13 = require("react");
-var PaginationContext = (0, import_react13.createContext)({
+var import_react14 = require("react");
+var PaginationContext = (0, import_react14.createContext)({
   currentPage: 0
 });
 
 // src/pagination/pagination-button.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function PaginationButton({ page, onClick }) {
-  const { currentPage } = (0, import_react14.useContext)(PaginationContext);
-  const buttonClasses = (0, import_clsx15.clsx)(
+  const { currentPage } = (0, import_react15.useContext)(PaginationContext);
+  const buttonClasses = (0, import_clsx16.clsx)(
     "flex h-8 min-w-8 items-center justify-center rounded fill-icon01 px-1",
     "typography-label14regular",
     "text-interactive02",
@@ -925,11 +1237,11 @@ function PaginationButton({ page, onClick }) {
     { "border border-uiBorder02": page === currentPage },
     { "border-transparent": page !== currentPage }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", className: buttonClasses, onClick: () => onClick(page), children: page });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { type: "button", className: buttonClasses, onClick: () => onClick(page), children: page });
 }
 
 // src/pagination/pagination.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+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);
@@ -943,14 +1255,14 @@ function Pagination({ currentPage, totalPage, sideNumPagesToShow = 3, onClick })
     pageList.push(i);
   }
   const threeDotIconClasses = "flex h-8 w-8 items-center justify-center gap-1 fill-icon01";
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     PaginationContext.Provider,
     {
       value: {
         currentPage
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("ul", { className: "flex gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("li", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      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,
@@ -960,12 +1272,12 @@ function Pagination({ currentPage, totalPage, sideNumPagesToShow = 3, onClick })
             onClick: () => onClick(currentPage - 1)
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PaginationButton, { onClick: () => onClick(START_PAGE), page: START_PAGE }) }),
-        pageList.length !== 0 && pageList[0] !== 2 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("li", { className: threeDotIconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "more", size: "small" }) }),
-        pageList.map((page, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PaginationButton, { onClick: () => onClick(page), page }) }, index)),
-        pageList.length !== 0 && pageList[pageList.length - 1] !== totalPage - 1 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("li", { className: threeDotIconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "more", size: "small" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PaginationButton, { onClick: () => onClick(totalPage), page: totalPage }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("li", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__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" }) }),
+        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 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("li", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           IconButton,
           {
             isDisabled: currentPage === totalPage,
@@ -981,13 +1293,14 @@ function Pagination({ currentPage, totalPage, sideNumPagesToShow = 3, onClick })
 }
 
 // src/select/select.tsx
+var import_react19 = require("@floating-ui/react");
 var import_component_theme12 = require("@zenkigen-inc/component-theme");
-var import_clsx18 = __toESM(require("clsx"));
-var import_react18 = require("react");
+var import_clsx19 = __toESM(require("clsx"));
+var import_react20 = require("react");
 
 // src/select/select-context.ts
-var import_react15 = require("react");
-var SelectContext = (0, import_react15.createContext)({
+var import_react16 = require("react");
+var SelectContext = (0, import_react16.createContext)({
   size: "medium",
   setIsOptionListOpen: () => false,
   variant: "outline",
@@ -996,76 +1309,78 @@ var SelectContext = (0, import_react15.createContext)({
 
 // src/select/select-item.tsx
 var import_component_theme10 = require("@zenkigen-inc/component-theme");
-var import_clsx16 = __toESM(require("clsx"));
-var import_react16 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_clsx17 = __toESM(require("clsx"));
+var import_react17 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function SelectItem({ option }) {
-  const { setIsOptionListOpen, selectedOption, onChange, isError } = (0, import_react16.useContext)(SelectContext);
+  const { setIsOptionListOpen, selectedOption, onChange, isError } = (0, import_react17.useContext)(SelectContext);
   const handleClickItem = (option2) => {
     onChange?.(option2);
     setIsOptionListOpen(false);
   };
-  const itemClasses = (0, import_clsx16.default)(
+  const itemClasses = (0, import_clsx17.default)(
     "typography-label14regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02",
     import_component_theme10.focusVisible.inset,
     {
       "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__ */ (0, import_jsx_runtime23.jsx)("li", { className: "flex w-full items-center", "data-id": option.id, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { className: itemClasses, type: "button", onClick: () => handleClickItem(option), children: [
-    option.icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: option.icon, size: "small" }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "ml-1 mr-6", children: option.label }),
-    option.id === selectedOption?.id && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "check", size: "small" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { className: "flex w-full items-center", "data-id": option.id, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("button", { className: itemClasses, type: "button", onClick: () => handleClickItem(option), children: [
+    option.icon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { name: option.icon, size: "small" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "ml-1 flex-1 truncate text-left", children: option.label }),
+    option.id === selectedOption?.id && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "ml-2 flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { name: "check", size: "small" }) })
   ] }) }, option.id);
 }
 
 // src/select/select-list.tsx
 var import_component_theme11 = require("@zenkigen-inc/component-theme");
-var import_clsx17 = __toESM(require("clsx"));
-var import_react17 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-function SelectList({ children, maxHeight }) {
-  const ref = (0, import_react17.useRef)(null);
-  const { size, selectedOption, setIsOptionListOpen, variant, placeholder, onChange } = (0, import_react17.useContext)(SelectContext);
+var import_clsx18 = __toESM(require("clsx"));
+var import_react18 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var SelectList = (0, import_react18.forwardRef)(({ children, maxHeight }, ref) => {
+  const { selectedOption, setIsOptionListOpen, variant, placeholder, onChange, floatingStyles, floatingRef } = (0, import_react18.useContext)(SelectContext);
   const handleClickDeselect = () => {
     onChange?.(null);
     setIsOptionListOpen(false);
   };
-  (0, import_react17.useLayoutEffect)(() => {
-    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);
+  (0, import_react18.useLayoutEffect)(() => {
+    if (maxHeight != null && selectedOption != null) {
+      const container = floatingRef?.current;
+      if (container != null) {
+        const element = container.querySelector(`[data-id="${selectedOption.id}"]`);
+        if (element != null) {
+          const htmlElement = element;
+          const elementTop = htmlElement.offsetTop;
+          const elementHeight = htmlElement.offsetHeight;
+          const containerHeight = container.clientHeight;
+          const scrollTop = elementTop - (containerHeight - elementHeight) / 2;
+          container.scrollTo({
+            top: Math.max(0, scrollTop)
+          });
+        }
       }
     }
-  }, []);
-  const listClasses = (0, import_clsx17.default)(
-    "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"
-    }
-  );
-  const deselectButtonClasses = (0, import_clsx17.default)(
+  }, [selectedOption, maxHeight, floatingRef]);
+  const listClasses = (0, import_clsx18.default)("z-dropdown overflow-y-auto rounded bg-uiBackground01 py-2 shadow-floatingShadow", {
+    "border-solid border border-uiBorder01": variant === "outline"
+  });
+  const deselectButtonClasses = (0, import_clsx18.default)(
     "typography-label14regular flex h-8 w-full items-center px-3 text-interactive02 hover:bg-hover02 active:bg-active02",
     import_component_theme11.focusVisible.inset
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("ul", { className: listClasses, style: { maxHeight }, ref, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("ul", { className: listClasses, style: { maxHeight, ...floatingStyles }, ref, children: [
     children,
-    placeholder != null && selectedOption !== null && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { className: deselectButtonClasses, type: "button", onClick: handleClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
+    placeholder != null && selectedOption !== null && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { className: deselectButtonClasses, type: "button", onClick: handleClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
   ] });
-}
+});
+SelectList.displayName = "SelectList";
 
 // src/select/select.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var FLOATING_OFFSET = 4;
 function Select({
   children,
   size = "medium",
@@ -1081,19 +1396,35 @@ function Select({
   onChange,
   optionListMaxHeight
 }) {
-  const [isOptionListOpen, setIsOptionListOpen] = (0, import_react18.useState)(false);
-  const targetRef = (0, import_react18.useRef)(null);
+  const [isOptionListOpen, setIsOptionListOpen] = (0, import_react20.useState)(false);
+  const targetRef = (0, import_react20.useRef)(null);
   useOutsideClick(targetRef, () => setIsOptionListOpen(false));
+  const { refs, floatingStyles } = (0, import_react19.useFloating)({
+    open: isOptionListOpen,
+    onOpenChange: setIsOptionListOpen,
+    placement: "bottom-start",
+    middleware: [
+      (0, import_react19.offset)(FLOATING_OFFSET),
+      (0, import_react19.size)({
+        apply({ availableWidth, elements, rects }) {
+          const referenceWidth = rects.reference.width;
+          elements.floating.style.minWidth = `${referenceWidth}px`;
+          elements.floating.style.maxWidth = `${availableWidth}px`;
+        }
+      })
+    ],
+    whileElementsMounted: import_react19.autoUpdate
+  });
   const handleClickToggle = () => setIsOptionListOpen((prev) => !prev);
   const buttonVariant = isError && !isDisabled ? `${variant}Error` : variant;
   const isSelected = isOptionSelected && !isDisabled && selectedOption !== null && !isError;
-  const wrapperClasses = (0, import_clsx18.default)("relative flex shrink-0 items-center gap-1 rounded bg-uiBackground01", {
+  const wrapperClasses = (0, import_clsx19.default)("relative flex shrink-0 items-center gap-1 rounded bg-uiBackground01", {
     "h-6": size === "x-small" || size === "small",
     "h-8": size === "medium",
     "h-10": size === "large",
     "cursor-not-allowed": isDisabled
   });
-  const buttonClasses = (0, import_clsx18.default)(
+  const buttonClasses = (0, import_clsx19.default)(
     "flex size-full items-center rounded",
     import_component_theme12.selectColors[buttonVariant].hover,
     import_component_theme12.selectColors[buttonVariant].active,
@@ -1108,14 +1439,14 @@ function Select({
       "border-supportError": !isSelected && !isDisabled && isError
     }
   );
-  const labelClasses = (0, import_clsx18.default)("overflow-hidden", {
+  const labelClasses = (0, import_clsx19.default)("overflow-hidden", {
     "mr-1": size === "x-small",
     "mr-2": size !== "x-small",
     "typography-label12regular": size === "x-small",
     "typography-label14regular": size === "small" || size === "medium",
     "typography-label16regular": size === "large"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     SelectContext.Provider,
     {
       value: {
@@ -1125,21 +1456,33 @@ function Select({
         setIsOptionListOpen,
         selectedOption,
         onChange,
-        isError
+        isError,
+        floatingStyles,
+        floatingRef: refs.floating
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: wrapperClasses, style: { width, maxWidth }, ref: targetRef, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("button", { className: buttonClasses, type: "button", onClick: handleClickToggle, disabled: isDisabled, children: [
-          selectedOption?.icon ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "mr-1 flex", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { name: selectedOption.icon, size: size === "large" ? "medium" : "small" }) }) : placeholder != null && placeholderIcon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "mr-1 flex", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { name: placeholderIcon, size: size === "large" ? "medium" : "small" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: labelClasses, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "truncate", children: selectedOption ? selectedOption.label : placeholder != null && placeholder }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-            Icon,
-            {
-              name: isOptionListOpen ? "angle-small-up" : "angle-small-down",
-              size: size === "large" ? "medium" : "small"
-            }
-          ) })
-        ] }),
-        isOptionListOpen && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SelectList, { maxHeight: optionListMaxHeight, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: wrapperClasses, style: { width, maxWidth }, ref: targetRef, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+          "button",
+          {
+            ref: refs.setReference,
+            className: buttonClasses,
+            type: "button",
+            onClick: handleClickToggle,
+            disabled: isDisabled,
+            children: [
+              selectedOption?.icon ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "mr-1 flex", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { name: selectedOption.icon, size: size === "large" ? "medium" : "small" }) }) : placeholder != null && placeholderIcon && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "mr-1 flex", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { name: placeholderIcon, size: size === "large" ? "medium" : "small" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: labelClasses, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "truncate", children: selectedOption ? selectedOption.label : placeholder != null && placeholder }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                Icon,
+                {
+                  name: isOptionListOpen ? "angle-small-up" : "angle-small-down",
+                  size: size === "large" ? "medium" : "small"
+                }
+              ) })
+            ]
+          }
+        ),
+        isOptionListOpen && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react19.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "relative z-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectList, { ref: refs.setFloating, maxHeight: optionListMaxHeight, children }) }) })
       ] })
     }
   );
@@ -1147,7 +1490,7 @@ function Select({
 Select.Option = SelectItem;
 
 // src/pagination-select/pagination-select.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function PaginationSelect({
   totalSize,
   currentPage,
@@ -1170,14 +1513,14 @@ function PaginationSelect({
   });
   const minCount = totalSize ? (currentPage - 1) * sizePerPage + 1 : 0;
   const maxCount = currentPage * sizePerPage > totalSize ? totalSize : currentPage * sizePerPage;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("nav", { "aria-label": "pagination", className: "flex items-center gap-x-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-x-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "typography-label14regular text-text01", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("nav", { "aria-label": "pagination", className: "flex items-center gap-x-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center gap-x-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "typography-label14regular text-text01", children: [
         minCount > 0 && `${minCount} - `,
         maxCount,
         countLabel
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         Select,
         {
           size: "medium",
@@ -1186,17 +1529,17 @@ function PaginationSelect({
           optionListMaxHeight,
           onChange: (option) => option && onChange(Number(option.value)),
           isDisabled: pageMax === 0,
-          children: optionsList.map((option) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Select.Option, { option }, option.id))
+          children: optionsList.map((option) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Select.Option, { option }, option.id))
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "typography-label14regular text-text02", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "typography-label14regular text-text02", children: [
         "/ ",
         pageMax,
         pageLabel
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         IconButton,
         {
           variant: "text",
@@ -1206,7 +1549,7 @@ function PaginationSelect({
           onClick: onClickPrevButton
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         IconButton,
         {
           variant: "text",
@@ -1220,28 +1563,353 @@ function PaginationSelect({
   ] });
 }
 
+// src/password-input/password-input.tsx
+var import_react22 = require("react");
+
+// src/text-input/text-input.tsx
+var import_clsx20 = require("clsx");
+var import_react21 = 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 })
+    ] });
+  }
+);
+TextInput.displayName = "TextInput";
+
+// src/password-input/password-input.tsx
+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);
+  const handlePasswordVisibilityToggle = () => {
+    setIsPasswordVisible(!isPasswordVisible);
+  };
+  const passwordToggleButton = /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    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__ */ (0, import_jsx_runtime29.jsx)(
+    TextInput,
+    {
+      ref,
+      type: isPasswordVisible === true ? "text" : "password",
+      disabled,
+      ...props,
+      ...{ after: passwordToggleButton }
+    }
+  );
+});
+PasswordInput.displayName = "PasswordInput";
+
+// src/popover/popover.tsx
+var import_react27 = require("@floating-ui/react");
+var import_react28 = require("react");
+
+// src/popover/popover-content.tsx
+var import_react24 = require("@floating-ui/react");
+var React = __toESM(require("react"));
+var import_react25 = require("react");
+
+// src/utils/react-utils.ts
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (ref == null) {
+        continue;
+      }
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        ref.current = node;
+      }
+    }
+  };
+}
+function isElement(node) {
+  return node != null && typeof node === "object" && "type" in node;
+}
+
+// src/popover/popover-context.ts
+var import_react23 = require("react");
+var PopoverContext = (0, import_react23.createContext)(null);
+var usePopoverContext = () => {
+  const context = (0, import_react23.useContext)(PopoverContext);
+  if (context == null) {
+    throw new Error("Popover components must be used inside <Popover.Root>");
+  }
+  return context;
+};
+
+// src/popover/popover-content.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var PopoverContent = (0, import_react25.forwardRef)(function PopoverContent2({ children }, ref) {
+  const { isOpen, triggerRef, floating, panelId, onClose } = usePopoverContext();
+  const shouldCloseOnOutsidePress = (0, import_react25.useCallback)(
+    (event) => {
+      const target = event.target;
+      if (!(target instanceof Element)) {
+        return true;
+      }
+      const floatingElement = floating.refs.floating.current;
+      const closestOverlay = target.closest(".z-overlay, .z-dropdown");
+      if (closestOverlay !== null && floatingElement instanceof Element) {
+        const isInsideOwnFloating = floatingElement.contains(closestOverlay);
+        return isInsideOwnFloating;
+      }
+      return true;
+    },
+    [floating.refs.floating]
+  );
+  const dismiss = (0, import_react24.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)(() => {
+    if (isOpen) {
+      const element = floating.refs.floating.current;
+      element?.focus?.({ preventScroll: true });
+    }
+  }, [isOpen, floating.refs.floating]);
+  (0, import_react25.useEffect)(() => {
+    if (!isOpen) {
+      triggerRef.current?.focus({ preventScroll: true });
+    }
+  }, [isOpen, triggerRef]);
+  const handleKeyDown = (0, import_react25.useCallback)(
+    (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        if (onClose != null) {
+          onClose({ reason: "escape-key-down" });
+        }
+      }
+    },
+    [onClose]
+  );
+  let wrappedChildren = children;
+  if (isElement(children)) {
+    const childProps = children.props;
+    wrappedChildren = React.cloneElement(children, {
+      ...childProps,
+      ...childProps.id == null && { id: panelId },
+      ...childProps.role == null && { role: "dialog" }
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react24.FloatingPortal, { children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    "div",
+    {
+      ...interactions.getFloatingProps({
+        ref: composeRefs(floating.refs.setFloating, ref),
+        tabIndex: -1,
+        onKeyDown: handleKeyDown,
+        style: {
+          position: floating.strategy,
+          top: floating.y ?? 0,
+          left: floating.x ?? 0,
+          outline: "0"
+        }
+      }),
+      children: wrappedChildren
+    }
+  ) : null });
+});
+
+// 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) {
+  const { isOpen, floating, triggerRef, anchorRef, panelId } = usePopoverContext();
+  if (!isElement(children)) {
+    return null;
+  }
+  const handleTriggerRef = (node) => {
+    triggerRef.current = node;
+    if (anchorRef == null) {
+      floating.refs.setReference(node);
+    }
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref != null) {
+      ref.current = node;
+    }
+  };
+  const childProps = children.props;
+  const childRef = childProps.ref;
+  return React2.cloneElement(children, {
+    ...childProps,
+    ref: composeRefs(childRef, handleTriggerRef),
+    "aria-haspopup": "dialog",
+    "aria-expanded": isOpen,
+    "aria-controls": panelId
+  });
+});
+
+// src/popover/popover.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function Popover({
+  isOpen,
+  children,
+  placement = "top",
+  offset: offsetValue = 8,
+  onClose,
+  anchorRef
+}) {
+  const triggerRef = (0, import_react28.useRef)(null);
+  const floating = (0, import_react27.useFloating)({
+    open: isOpen,
+    onOpenChange: (open) => {
+      if (!open && onClose != null) {
+        onClose({ reason: "outside-click" });
+      }
+    },
+    placement,
+    middleware: [(0, import_react27.offset)(offsetValue)],
+    whileElementsMounted: import_react27.autoUpdate,
+    strategy: "fixed"
+  });
+  (0, import_react28.useEffect)(() => {
+    if (anchorRef?.current) {
+      floating.refs.setReference(anchorRef.current);
+    }
+  }, [anchorRef, floating.refs]);
+  const contentId = (0, import_react27.useId)() ?? "";
+  const panelId = `${contentId}-panel`;
+  const contextValue = (0, import_react28.useMemo)(
+    () => ({
+      isOpen,
+      triggerRef,
+      anchorRef,
+      floating,
+      contentId,
+      panelId,
+      onClose
+    }),
+    [isOpen, triggerRef, anchorRef, floating, contentId, panelId, onClose]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PopoverContext.Provider, { value: contextValue, children });
+}
+Popover.Trigger = PopoverTrigger;
+Popover.Content = PopoverContent;
+
+// src/popup/popup.tsx
+var import_react31 = require("react");
+
+// src/popup/popup-body.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+function PopupBody({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "overflow-y-auto", children });
+}
+
+// src/popup/popup-context.ts
+var import_react29 = require("react");
+var PopupContext = (0, import_react29.createContext)({
+  isOpen: false,
+  onClose: () => null
+});
+
+// src/popup/popup-footer.tsx
+var import_jsx_runtime33 = 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 });
+}
+
+// src/popup/popup-header.tsx
+var import_react30 = require("react");
+var import_jsx_runtime34 = 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: [
+      before,
+      children
+    ] }),
+    onClose && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(IconButton, { icon: "close", size: "small", variant: "text", onClick: onClose })
+  ] });
+}
+
+// src/popup/popup.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var LIMIT_WIDTH2 = 320;
+var LIMIT_HEIGHT2 = 184;
+function useOptionalPopoverContext() {
+  return (0, import_react31.useContext)(PopoverContext);
+}
+function Popup({ children, isOpen: controlledIsOpen, width = 480, height, onClose }) {
+  const renderWidth = typeof width === "number" ? Math.max(width, LIMIT_WIDTH2) : width;
+  const renderHeight = typeof height === "number" ? Math.max(height, LIMIT_HEIGHT2) : height;
+  const popoverContext = useOptionalPopoverContext();
+  const isInPopover = popoverContext != null;
+  const isOpen = isInPopover ? popoverContext.isOpen : controlledIsOpen ?? false;
+  if (!isOpen) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PopupContext.Provider, { value: { isOpen, onClose }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    "div",
+    {
+      className: "grid max-h-full grid-rows-[max-content_1fr_max-content] flex-col rounded-lg bg-uiBackground01 shadow-floatingShadow",
+      style: { width: renderWidth, height: renderHeight },
+      children
+    }
+  ) });
+}
+Popup.Body = PopupBody;
+Popup.Header = PopupHeader;
+Popup.Footer = PopupFooter;
+
 // src/radio/radio.tsx
 var import_component_theme13 = require("@zenkigen-inc/component-theme");
-var import_clsx19 = __toESM(require("clsx"));
-var import_react19 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_clsx21 = __toESM(require("clsx"));
+var import_react32 = require("react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function Radio({ name, value, id, label, isChecked = false, isDisabled = false, onChange }) {
-  const [isMouseOver, setIsMouseOver] = (0, import_react19.useState)(false);
-  const handleMouseOverInput = (0, import_react19.useCallback)(() => {
+  const [isMouseOver, setIsMouseOver] = (0, import_react32.useState)(false);
+  const handleMouseOverInput = (0, import_react32.useCallback)(() => {
     setIsMouseOver(true);
   }, []);
-  const handleMouseOutInput = (0, import_react19.useCallback)(() => {
+  const handleMouseOutInput = (0, import_react32.useCallback)(() => {
     setIsMouseOver(false);
   }, []);
-  const handleChange = (0, import_react19.useCallback)(
+  const handleChange = (0, import_react32.useCallback)(
     (e) => !isDisabled && onChange?.(e),
     [isDisabled, onChange]
   );
-  const inputClasses = (0, import_clsx19.default)("peer absolute z-[1] size-6 opacity-0", {
+  const inputClasses = (0, import_clsx21.default)("peer absolute z-[1] size-6 opacity-0", {
     "cursor-not-allowed": isDisabled,
     "cursor-pointer": !isDisabled
   });
-  const boxClasses = (0, import_clsx19.default)(
+  const boxClasses = (0, import_clsx21.default)(
     "inline-flex size-5 items-center justify-center rounded-full border border-solid bg-white",
     import_component_theme13.focusVisible.normalPeer,
     {
@@ -1252,22 +1920,22 @@ function Radio({ name, value, id, label, isChecked = false, isDisabled = false,
       "cursor-pointer": !isDisabled
     }
   );
-  const afterClasses = (0, import_clsx19.default)("absolute inset-0 m-auto block size-3 rounded-full", {
+  const afterClasses = (0, import_clsx21.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_clsx19.default)("inline-block size-3 rounded-full", {
+  const hoverIndicatorClasses = (0, import_clsx21.default)("inline-block size-3 rounded-full", {
     "bg-hoverUi": !isDisabled && !isChecked && isMouseOver
   });
-  const labelClasses = (0, import_clsx19.default)("typography-label14regular ml-2 flex-[1_0_0] select-none break-all", {
+  const labelClasses = (0, import_clsx21.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_runtime27.jsxs)("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex size-6 items-center justify-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  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)(
         "input",
         {
           type: "checkbox",
@@ -1282,32 +1950,32 @@ function Radio({ name, value, id, label, isChecked = false, isDisabled = false,
           className: inputClasses
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: boxClasses, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "relative flex size-5 flex-[0_0_auto] items-center justify-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: afterClasses }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: hoverIndicatorClasses })
+      /* @__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_runtime27.jsx)("label", { htmlFor: id, className: labelClasses, children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("label", { htmlFor: id, className: labelClasses, children: label })
   ] });
 }
 
 // src/search/search.tsx
-var import_clsx20 = require("clsx");
-var import_react20 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var Search = (0, import_react20.forwardRef)(({ width = "100%", size = "medium", ...props }, ref) => {
-  const classes = (0, import_clsx20.clsx)(
+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)(
     "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_clsx20.clsx)("mx-2 h-full flex-1 text-text01 outline-0 placeholder:text-textPlaceholder", {
+  const inputClasses = (0, import_clsx22.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_runtime28.jsx)("div", { className: "relative", ref, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("form", { onSubmit: props.onSubmit, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: classes, style: { width }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { name: "search", color: "icon01", size: "medium" }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  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)(
       "input",
       {
         type: "text",
@@ -1318,7 +1986,7 @@ var Search = (0, import_react20.forwardRef)(({ width = "100%", size = "medium",
         onChange: props.onChange
       }
     ),
-    props.onClickClearButton && props.value && props.value.length !== 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    props.onClickClearButton && props.value && props.value.length !== 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       IconButton,
       {
         variant: "text",
@@ -1333,17 +2001,17 @@ var Search = (0, import_react20.forwardRef)(({ width = "100%", size = "medium",
 Search.displayName = "Search";
 
 // src/segmented-control/segmented-control.tsx
-var import_react23 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 
 // src/segmented-control/segmented-control-context.ts
-var import_react21 = require("react");
-var SegmentedControlContext = (0, import_react21.createContext)(null);
+var import_react34 = require("react");
+var SegmentedControlContext = (0, import_react34.createContext)(null);
 
 // src/segmented-control/segmented-control-item.tsx
 var import_component_theme14 = require("@zenkigen-inc/component-theme");
-var import_clsx21 = require("clsx");
-var import_react22 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_clsx23 = require("clsx");
+var import_react35 = require("react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var SegmentedControlItem = ({
   label,
   value,
@@ -1352,9 +2020,9 @@ var SegmentedControlItem = ({
   "aria-label": ariaLabel,
   ...rest
 }) => {
-  const context = (0, import_react22.useContext)(SegmentedControlContext);
-  const buttonRef = (0, import_react22.useRef)(null);
-  const lastInteractionWasMouse = (0, import_react22.useRef)(false);
+  const context = (0, import_react35.useContext)(SegmentedControlContext);
+  const buttonRef = (0, import_react35.useRef)(null);
+  const lastInteractionWasMouse = (0, import_react35.useRef)(false);
   if (context === null) {
     throw new Error("SegmentedControl.Item must be used within SegmentedControl");
   }
@@ -1370,7 +2038,7 @@ var SegmentedControlItem = ({
   const isSelected = value === selectedValue;
   const isFocused = value === focusedValue;
   const isOptionDisabled = isContextDisabled || itemDisabled === true;
-  (0, import_react22.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (isFocused === true && buttonRef.current !== null) {
       buttonRef.current.focus();
     }
@@ -1392,7 +2060,7 @@ var SegmentedControlItem = ({
     lastInteractionWasMouse.current = false;
     onBlur?.();
   };
-  const buttonClasses = (0, import_clsx21.clsx)("relative flex items-center justify-center gap-1 rounded", import_component_theme14.focusVisible.normal, {
+  const buttonClasses = (0, import_clsx23.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
@@ -1402,7 +2070,7 @@ var SegmentedControlItem = ({
     // States - Disabled
     "text-disabled01 bg-transparent": isOptionDisabled === true
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     "button",
     {
       ref: buttonRef,
@@ -1419,25 +2087,25 @@ var SegmentedControlItem = ({
       onMouseDown: handleMouseDown,
       ...rest,
       children: [
-        Boolean(icon) === true && icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        Boolean(icon) === true && icon && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           "span",
           {
-            className: (0, import_clsx21.clsx)("flex items-center", {
+            className: (0, import_clsx23.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_runtime29.jsx)(Icon, { name: icon, size: "small" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { name: icon, size: "small" })
           }
         ),
-        Boolean(label) === true && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "whitespace-nowrap", children: label })
+        Boolean(label) === true && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "whitespace-nowrap", children: label })
       ]
     }
   );
 };
 
 // src/segmented-control/segmented-control.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var SegmentedControl = ({
   children,
   value,
@@ -1447,15 +2115,15 @@ var SegmentedControl = ({
   "aria-label": ariaLabel,
   ...rest
 }) => {
-  const containerRef = (0, import_react23.useRef)(null);
-  const itemIds = import_react23.Children.toArray(children).filter((child) => {
-    if (!import_react23.default.isValidElement(child) || typeof child.props !== "object" || child.props === null || !("value" in child.props)) {
+  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)) {
       return false;
     }
     const props = child.props;
     return props.isDisabled !== true;
   }).map((child) => child.props.value);
-  const childrenCount = import_react23.Children.count(children);
+  const childrenCount = import_react36.Children.count(children);
   const containerStyle = { gridTemplateColumns: `repeat(${childrenCount}, minmax(0,1fr))` };
   const {
     focusedValue,
@@ -1482,7 +2150,7 @@ var SegmentedControl = ({
     onBlur: handleBlurRovingFocus,
     values: itemIds
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SegmentedControlContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  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)(
     "div",
     {
       ref: containerRef,
@@ -1500,19 +2168,19 @@ SegmentedControl.Item = SegmentedControlItem;
 
 // src/select-sort/select-sort.tsx
 var import_component_theme17 = require("@zenkigen-inc/component-theme");
-var import_clsx24 = __toESM(require("clsx"));
-var import_react24 = require("react");
+var import_clsx26 = __toESM(require("clsx"));
+var import_react37 = require("react");
 
 // src/select-sort/select-list.tsx
 var import_component_theme16 = require("@zenkigen-inc/component-theme");
-var import_clsx23 = __toESM(require("clsx"));
+var import_clsx25 = __toESM(require("clsx"));
 
 // src/select-sort/select-item.tsx
 var import_component_theme15 = require("@zenkigen-inc/component-theme");
-var import_clsx22 = __toESM(require("clsx"));
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_clsx24 = __toESM(require("clsx"));
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function SelectItem2({ children, isSortKey, onClickItem }) {
-  const itemClasses = (0, import_clsx22.default)(
+  const itemClasses = (0, import_clsx24.default)(
     "typography-label14regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02",
     import_component_theme15.focusVisible.inset,
     {
@@ -1520,16 +2188,16 @@ function SelectItem2({ children, isSortKey, onClickItem }) {
       "bg-uiBackground01 fill-icon01 text-interactive02": !isSortKey
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("li", { className: "flex w-full items-center", onClick: onClickItem, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("button", { className: itemClasses, type: "button", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "ml-1 mr-6", children }),
-    isSortKey && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { name: "check", size: "small" }) })
+  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" }) })
   ] }) });
 }
 
 // src/select-sort/select-list.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function SelectList2({ size, variant, sortOrder, onClickItem, onClickDeselect }) {
-  const listClasses = (0, import_clsx23.default)(
+  const listClasses = (0, import_clsx25.default)(
     "absolute z-dropdown w-max overflow-y-auto rounded bg-uiBackground01 py-2 shadow-floatingShadow",
     {
       "top-7": size === "x-small" || size === "small",
@@ -1538,19 +2206,19 @@ function SelectList2({ size, variant, sortOrder, onClickItem, onClickDeselect })
       "border-solid border border-uiBorder01": variant === "outline"
     }
   );
-  const deselectButtonClasses = (0, import_clsx23.default)(
+  const deselectButtonClasses = (0, import_clsx25.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_runtime32.jsxs)("ul", { className: listClasses, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectItem2, { isSortKey: sortOrder === "ascend", onClickItem: () => onClickItem("ascend"), children: "\u6607\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectItem2, { isSortKey: sortOrder === "descend", onClickItem: () => onClickItem("descend"), children: "\u964D\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
-    sortOrder !== null && onClickDeselect && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { className: deselectButtonClasses, type: "button", onClick: onClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
+  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" }) })
   ] });
 }
 
 // src/select-sort/select-sort.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function SelectSort({
   size = "medium",
   variant = "outline",
@@ -1562,24 +2230,24 @@ function SelectSort({
   onChange,
   onClickDeselect
 }) {
-  const [isOptionListOpen, setIsOptionListOpen] = (0, import_react24.useState)(false);
-  const targetRef = (0, import_react24.useRef)(null);
+  const [isOptionListOpen, setIsOptionListOpen] = (0, import_react37.useState)(false);
+  const targetRef = (0, import_react37.useRef)(null);
   useOutsideClick(targetRef, () => setIsOptionListOpen(false));
   const handleClickToggle = () => setIsOptionListOpen((prev) => !prev);
-  const handleClickItem = (0, import_react24.useCallback)(
+  const handleClickItem = (0, import_react37.useCallback)(
     (value) => {
       onChange?.(value);
       setIsOptionListOpen(false);
     },
     [onChange]
   );
-  const wrapperClasses = (0, import_clsx24.default)("relative flex shrink-0 items-center gap-1 rounded", {
+  const wrapperClasses = (0, import_clsx26.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_clsx24.default)(
+  const buttonClasses = (0, import_clsx26.default)(
     "flex size-full items-center rounded",
     import_component_theme17.buttonColors[variant].hover,
     import_component_theme17.buttonColors[variant].active,
@@ -1593,23 +2261,23 @@ function SelectSort({
       "pointer-events-none": isDisabled
     }
   );
-  const labelClasses = (0, import_clsx24.default)("truncate", {
+  const labelClasses = (0, import_clsx26.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_runtime33.jsxs)("div", { className: wrapperClasses, style: { width }, ref: targetRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("button", { className: buttonClasses, type: "button", onClick: handleClickToggle, disabled: isDisabled, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: labelClasses, children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "ml-auto flex items-center", children: isSortKey ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  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)(
         Icon,
         {
           name: sortOrder === "ascend" ? "arrow-up" : "arrow-down",
           size: size === "large" ? "medium" : "small"
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         Icon,
         {
           name: isOptionListOpen ? "angle-small-up" : "angle-small-down",
@@ -1617,7 +2285,7 @@ function SelectSort({
         }
       ) })
     ] }),
-    isOptionListOpen && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    isOptionListOpen && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       SelectList2,
       {
         size,
@@ -1632,9 +2300,9 @@ function SelectSort({
 
 // src/sort-button/sort-button.tsx
 var import_component_theme18 = require("@zenkigen-inc/component-theme");
-var import_clsx25 = __toESM(require("clsx"));
-var import_react25 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_clsx27 = __toESM(require("clsx"));
+var import_react38 = require("react");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function SortButton({
   size = "medium",
   width,
@@ -1645,7 +2313,7 @@ function SortButton({
   "aria-label": ariaLabel,
   ...rest
 }) {
-  const handleClick = (0, import_react25.useCallback)(() => {
+  const handleClick = (0, import_react38.useCallback)(() => {
     if (isDisabled || !onClick) return;
     onClick();
   }, [isDisabled, onClick]);
@@ -1654,13 +2322,13 @@ function SortButton({
     if (sortOrder === "descend") return "arrow-down";
     return "angle-small-down";
   };
-  const wrapperClasses = (0, import_clsx25.default)("relative flex shrink-0 items-center gap-1 rounded", {
+  const wrapperClasses = (0, import_clsx27.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_clsx25.default)(
+  const buttonClasses = (0, import_clsx27.default)(
     "flex size-full items-center rounded",
     import_component_theme18.buttonColors.text.hover,
     import_component_theme18.buttonColors.text.active,
@@ -1676,14 +2344,14 @@ function SortButton({
       "pointer-events-none": isDisabled
     }
   );
-  const labelClasses = (0, import_clsx25.default)("truncate", {
+  const labelClasses = (0, import_clsx27.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_runtime34.jsx)("div", { className: wrapperClasses, style: { width }, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: wrapperClasses, style: { width }, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     "button",
     {
       className: buttonClasses,
@@ -1694,22 +2362,22 @@ function SortButton({
       "aria-label": ariaLabel,
       "aria-disabled": isDisabled,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: labelClasses, children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { name: getIconName(), size: size === "large" ? "medium" : "small" }) })
+        /* @__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" }) })
       ]
     }
   ) });
 }
 
 // src/tab/tab.tsx
-var import_clsx27 = require("clsx");
-var import_react26 = require("react");
+var import_clsx29 = require("clsx");
+var import_react39 = require("react");
 
 // src/tab/tab-item.tsx
-var import_clsx26 = require("clsx");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_clsx28 = require("clsx");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var TabItem = ({ isSelected = false, ...props }) => {
-  const classes = (0, import_clsx26.clsx)(
+  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",
     {
       "typography-label14regular": !isSelected,
@@ -1718,7 +2386,7 @@ var TabItem = ({ isSelected = false, ...props }) => {
       "before:bg-interactive01 hover:before:bg-interactive01 pointer-events-none": isSelected
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     "button",
     {
       type: "button",
@@ -1733,39 +2401,39 @@ var TabItem = ({ isSelected = false, ...props }) => {
 };
 
 // src/tab/tab.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function Tab({ children, layout = "auto" }) {
-  const childrenCount = import_react26.Children.count(children);
+  const childrenCount = import_react39.Children.count(children);
   const containerStyle = layout === "equal" ? { gridTemplateColumns: `repeat(${childrenCount}, minmax(0,1fr))` } : {};
-  const containerClasses = (0, import_clsx27.clsx)(
+  const containerClasses = (0, import_clsx29.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_runtime36.jsx)("div", { role: "tablist", className: containerClasses, style: containerStyle, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { role: "tablist", className: containerClasses, style: containerStyle, children });
 }
 Tab.Item = TabItem;
 
 // src/table/table-cell.tsx
-var import_clsx28 = __toESM(require("clsx"));
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_clsx30 = __toESM(require("clsx"));
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function TableCell({ children, className, isHeader = false }) {
-  const classes = (0, import_clsx28.default)("border-b border-uiBorder01", { "sticky top-0 z-10 bg-white": isHeader }, className);
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: classes, children });
+  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 });
 }
 
 // src/table/table-row.tsx
-var import_clsx29 = __toESM(require("clsx"));
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_clsx31 = __toESM(require("clsx"));
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function TableRow({ children, isHoverBackgroundVisible = false }) {
-  const rowClasses = (0, import_clsx29.default)("contents", isHoverBackgroundVisible && "[&:hover>div]:bg-hoverUi02");
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: rowClasses, children });
+  const rowClasses = (0, import_clsx31.default)("contents", isHoverBackgroundVisible && "[&:hover>div]:bg-hoverUi02");
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: rowClasses, children });
 }
 
 // src/table/table.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function Table({
   width,
   templateRows,
@@ -1774,7 +2442,7 @@ function Table({
   autoRows,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     "div",
     {
       className: "grid",
@@ -1794,22 +2462,22 @@ Table.Cell = TableCell;
 
 // src/tag/tag.tsx
 var import_component_theme20 = require("@zenkigen-inc/component-theme");
-var import_clsx31 = __toESM(require("clsx"));
+var import_clsx33 = __toESM(require("clsx"));
 
 // src/tag/delete-icon.tsx
 var import_component_theme19 = require("@zenkigen-inc/component-theme");
-var import_clsx30 = __toESM(require("clsx"));
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_clsx32 = __toESM(require("clsx"));
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var DeleteIcon = ({ color, variant, onClick }) => {
-  const deleteButtonClasses = (0, import_clsx30.default)(
+  const deleteButtonClasses = (0, import_clsx32.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_clsx30.default)({
+  const deletePathClasses = (0, import_clsx32.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_runtime40.jsx)("button", { type: "button", className: deleteButtonClasses, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  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)(
     "path",
     {
       fillRule: "evenodd",
@@ -1821,9 +2489,9 @@ var DeleteIcon = ({ color, variant, onClick }) => {
 };
 
 // src/tag/tag.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function Tag({ id, children, color, variant = "normal", size = "medium", isEditable, onDelete }) {
-  const wrapperClasses = (0, import_clsx31.default)("flex", "items-center", "justify-center", {
+  const wrapperClasses = (0, import_clsx33.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",
@@ -1835,17 +2503,17 @@ 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_runtime41.jsxs)("div", { className: wrapperClasses, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: wrapperClasses, children: [
     children,
-    isEditable ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DeleteIcon, { onClick: () => onDelete(id), color, variant }) : null
+    isEditable ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(DeleteIcon, { onClick: () => onDelete(id), color, variant }) : null
   ] });
 }
 
 // src/text-area/text-area.tsx
-var import_clsx32 = require("clsx");
-var import_react27 = require("react");
-var import_jsx_runtime42 = require("react/jsx-runtime");
-var TextArea = (0, import_react27.forwardRef)(
+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,
@@ -1856,7 +2524,7 @@ var TextArea = (0, import_react27.forwardRef)(
     height,
     ...props
   }, ref) => {
-    const classes = (0, import_clsx32.clsx)(
+    const classes = (0, import_clsx34.clsx)(
       "w-full rounded border outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder",
       {
         "border-supportError": isError && !disabled,
@@ -1870,7 +2538,7 @@ var TextArea = (0, import_react27.forwardRef)(
         "resize-none": !isResizable
       }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
       "textarea",
       {
         ref,
@@ -1890,42 +2558,10 @@ var TextArea = (0, import_react27.forwardRef)(
 );
 TextArea.displayName = "TextArea";
 
-// src/text-input/text-input.tsx
-var import_clsx33 = require("clsx");
-var import_react28 = require("react");
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var TextInput = (0, import_react28.forwardRef)(
-  ({ size = "medium", isError = false, disabled = false, onClickClearButton, ...props }, ref) => {
-    const isShowClearButton = !!onClickClearButton && props.value.length !== 0 && !disabled;
-    const inputWrapClasses = (0, import_clsx33.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" && isShowClearButton,
-      "pr-3": size === "large" && isShowClearButton
-    });
-    const inputClasses = (0, import_clsx33.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": isShowClearButton
-    });
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: inputWrapClasses, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("input", { ref, size: 1, className: inputClasses, disabled, onChange: props.onChange, ...props }),
-      isShowClearButton && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(IconButton, { variant: "text", icon: "close", size: "small", onClick: onClickClearButton })
-    ] });
-  }
-);
-TextInput.displayName = "TextInput";
-
 // src/toast/toast.tsx
-var import_clsx34 = __toESM(require("clsx"));
-var import_react29 = require("react");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_clsx35 = __toESM(require("clsx"));
+var import_react41 = require("react");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var CLOSE_TIME_MSEC = 5e3;
 function Toast({
   state = "information",
@@ -1935,8 +2571,8 @@ function Toast({
   children,
   onClickClose
 }) {
-  const [isRemoving, setIsRemoving] = (0, import_react29.useState)(false);
-  const handleClose = (0, import_react29.useCallback)(() => {
+  const [isRemoving, setIsRemoving] = (0, import_react41.useState)(false);
+  const handleClose = (0, import_react41.useCallback)(() => {
     if (isAnimation) {
       setIsRemoving(true);
     } else {
@@ -1944,17 +2580,17 @@ function Toast({
     }
   }, [isAnimation, onClickClose]);
   const handleAnimationEnd = (e) => window.getComputedStyle(e.currentTarget).opacity === "0" && onClickClose();
-  const wrapperClasses = (0, import_clsx34.default)("pointer-events-auto flex items-start gap-1 bg-white p-4 shadow-floatingShadow", {
+  const wrapperClasses = (0, import_clsx35.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_clsx34.default)("flex items-center", {
+  const iconClasses = (0, import_clsx35.default)("flex items-center", {
     "fill-supportSuccess": state === "success",
     "fill-supportError": state === "error",
     "fill-supportWarning": state === "warning",
     "fill-supportInfo": state === "information"
   });
-  const textClasses = (0, import_clsx34.default)("typography-body13regular flex-1 pt-[3px]", {
+  const textClasses = (0, import_clsx35.default)("typography-body13regular flex-1 pt-[3px]", {
     "text-supportError": state === "error",
     "text-text01": state === "success" || state === "warning" || state === "information"
   });
@@ -1964,7 +2600,7 @@ function Toast({
     warning: "warning",
     information: "information-filled"
   };
-  (0, import_react29.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     const timer = window.setTimeout(() => {
       if (isAutoClose) {
         setIsRemoving(true);
@@ -1972,45 +2608,45 @@ function Toast({
     }, CLOSE_TIME_MSEC);
     return () => window.clearTimeout(timer);
   }, [isAutoClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: wrapperClasses, style: { width }, onAnimationEnd: handleAnimationEnd, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon, { name: iconName[state] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: textClasses, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(IconButton, { icon: "close", size: "medium", variant: "text", onClick: handleClose, isNoPadding: true })
+  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 })
   ] });
 }
 
 // src/toast/toast-provider.tsx
-var import_react30 = require("react");
+var import_react42 = require("react");
 var import_react_dom3 = require("react-dom");
-var import_jsx_runtime45 = require("react/jsx-runtime");
-var ToastContext = (0, import_react30.createContext)({});
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var ToastContext = (0, import_react42.createContext)({});
 var ToastProvider = ({ children }) => {
-  const [isClientRender, setIsClientRender] = (0, import_react30.useState)(false);
-  const [toasts, setToasts] = (0, import_react30.useState)([]);
-  const addToast = (0, import_react30.useCallback)(({ message, state }) => {
+  const [isClientRender, setIsClientRender] = (0, import_react42.useState)(false);
+  const [toasts, setToasts] = (0, import_react42.useState)([]);
+  const addToast = (0, import_react42.useCallback)(({ message, state }) => {
     setToasts((prev) => [...prev, { id: Math.trunc(Math.random() * 1e5), message, state }]);
   }, []);
-  const removeToast = (0, import_react30.useCallback)((id) => {
+  const removeToast = (0, import_react42.useCallback)((id) => {
     setToasts((prev) => prev.filter((snackbar) => snackbar.id !== id));
   }, []);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     setIsClientRender(true);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(ToastContext.Provider, { value: { addToast, removeToast }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(ToastContext.Provider, { value: { addToast, removeToast }, children: [
     children,
     isClientRender && (0, import_react_dom3.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime45.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_runtime45.jsx)(Toast, { state, isAutoClose: true, isAnimation: true, onClickClose: () => removeToast(id), width: 475, children: message }, id)) }),
+      /* @__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)) }),
       document.body
     )
   ] });
 };
 var useToast = () => {
-  return (0, import_react30.useContext)(ToastContext);
+  return (0, import_react42.useContext)(ToastContext);
 };
 
 // src/toggle/toggle.tsx
-var import_clsx35 = __toESM(require("clsx"));
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_clsx36 = __toESM(require("clsx"));
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function Toggle({
   id,
   size = "medium",
@@ -2020,7 +2656,7 @@ function Toggle({
   labelPosition = "right",
   isDisabled = false
 }) {
-  const baseClasses = (0, import_clsx35.default)("relative flex items-center rounded-full", {
+  const baseClasses = (0, import_clsx36.default)("relative flex items-center rounded-full", {
     "bg-disabledOn": isDisabled && isChecked,
     "bg-disabled01": isDisabled && !isChecked,
     "bg-interactive01 peer-hover:bg-hover01": !isDisabled && isChecked,
@@ -2028,16 +2664,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_clsx35.default)(
+  const inputClasses = (0, import_clsx36.default)(
     "peer absolute inset-0 z-[1] opacity-0",
     isDisabled ? "cursor-not-allowed" : "cursor-pointer"
   );
-  const indicatorClasses = (0, import_clsx35.default)("rounded-full bg-iconOnColor", {
+  const indicatorClasses = (0, import_clsx36.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_clsx35.default)("break-all", {
+  const labelClasses = (0, import_clsx36.default)("break-all", {
     "mr-2": labelPosition === "left",
     "ml-2": labelPosition === "right",
     "typography-label14regular": size === "small" || size === "medium",
@@ -2045,9 +2681,9 @@ function Toggle({
     "pointer-events-none cursor-not-allowed text-disabled01": isDisabled,
     "cursor-pointer text-text01": !isDisabled
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "relative flex flex-[0_0_auto] items-center", children: [
-    label != null && labelPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("label", { htmlFor: id, className: labelClasses, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  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)(
       "input",
       {
         className: inputClasses,
@@ -2059,23 +2695,23 @@ function Toggle({
         disabled: isDisabled
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: baseClasses, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: indicatorClasses }) }),
-    label != null && labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("label", { htmlFor: id, className: labelClasses, children: label })
+    /* @__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 })
   ] });
 }
 
 // src/tooltip/tooltip.tsx
-var import_react32 = require("react");
+var import_react44 = require("react");
 var import_react_dom4 = require("react-dom");
 
 // src/tooltip/tooltip-content.tsx
-var import_clsx37 = __toESM(require("clsx"));
+var import_clsx38 = __toESM(require("clsx"));
 
 // src/tooltip/tail-icon.tsx
-var import_clsx36 = __toESM(require("clsx"));
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_clsx37 = __toESM(require("clsx"));
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var TailIcon = (props) => {
-  const tailClasses = (0, import_clsx36.default)("absolute fill-uiBackgroundTooltip", {
+  const tailClasses = (0, import_clsx37.default)("absolute fill-uiBackgroundTooltip", {
     "rotate-180": props.verticalPosition === "bottom",
     "rotate-0": props.verticalPosition !== "bottom",
     "-top-1": props.verticalPosition === "bottom" && props.size === "small",
@@ -2090,9 +2726,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_runtime47.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_runtime47.jsx)("path", { d: "M4 4L0 0H8L4 4Z" }) });
+    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" }) });
   } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       "svg",
       {
         className: tailClasses,
@@ -2101,14 +2737,14 @@ var TailIcon = (props) => {
         viewBox: "0 0 14 8",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("path", { d: "M7 8L0 0H14L7 8Z" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("path", { d: "M7 8L0 0H14L7 8Z" })
       }
     );
   }
 };
 
 // src/tooltip/tooltip-content.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var TooltipContent = ({
   content,
   horizontalAlign,
@@ -2118,7 +2754,7 @@ var TooltipContent = ({
   maxWidth,
   isPortal = false
 }) => {
-  const tooltipWrapperClasses = (0, import_clsx37.default)("absolute z-tooltip m-auto flex", {
+  const tooltipWrapperClasses = (0, import_clsx38.default)("absolute z-tooltip m-auto flex", {
     "top-0": !isPortal && verticalPosition === "top",
     "bottom-0": !isPortal && verticalPosition === "bottom",
     "justify-start": horizontalAlign === "left",
@@ -2127,7 +2763,7 @@ var TooltipContent = ({
     "w-[24px]": size === "small",
     "w-[46px]": size !== "small"
   });
-  const tooltipBodyClasses = (0, import_clsx37.default)(
+  const tooltipBodyClasses = (0, import_clsx38.default)(
     "absolute z-tooltip inline-block w-max rounded bg-uiBackgroundTooltip text-textOnColor",
     {
       "typography-body12regular": size === "small",
@@ -2144,7 +2780,7 @@ var TooltipContent = ({
     transform: `translate(${tooltipPosition.translateX}, ${tooltipPosition.translateY})`,
     ...tooltipPosition
   } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: tooltipWrapperClasses, style: tooltipWrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: tooltipWrapperClasses, style: tooltipWrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
     "div",
     {
       className: tooltipBodyClasses,
@@ -2153,16 +2789,16 @@ var TooltipContent = ({
       },
       children: [
         content,
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TailIcon, { size, verticalPosition, horizontalAlign })
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TailIcon, { size, verticalPosition, horizontalAlign })
       ]
     }
   ) });
 };
 
 // src/tooltip/tooltip-hook.ts
-var import_react31 = require("react");
+var import_react43 = require("react");
 var useTooltip = () => {
-  const calculatePosition = (0, import_react31.useCallback)(
+  const calculatePosition = (0, import_react43.useCallback)(
     (args) => {
       const result = {
         maxWidth: "none",
@@ -2214,7 +2850,7 @@ var useTooltip = () => {
 };
 
 // src/tooltip/tooltip.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function Tooltip({
   children,
   content,
@@ -2226,8 +2862,8 @@ function Tooltip({
   portalTarget
 }) {
   const { calculatePosition } = useTooltip();
-  const [isVisible, setIsVisible] = (0, import_react32.useState)(false);
-  const [tooltipPosition, setTooltipPosition] = (0, import_react32.useState)({
+  const [isVisible, setIsVisible] = (0, import_react44.useState)(false);
+  const [tooltipPosition, setTooltipPosition] = (0, import_react44.useState)({
     maxWidth: "none",
     width: "auto",
     left: "0px",
@@ -2236,23 +2872,23 @@ function Tooltip({
     translateX: "0",
     translateY: "0"
   });
-  const targetRef = (0, import_react32.useRef)(null);
-  const handleMouseOverWrapper = (0, import_react32.useCallback)(() => {
+  const targetRef = (0, import_react44.useRef)(null);
+  const handleMouseOverWrapper = (0, import_react44.useCallback)(() => {
     if (isDisabledHover) {
       return;
     }
     setIsVisible(true);
   }, [isDisabledHover]);
-  const handleMouseOutWrapper = (0, import_react32.useCallback)(() => {
+  const handleMouseOutWrapper = (0, import_react44.useCallback)(() => {
     setIsVisible(false);
   }, []);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react44.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_runtime49.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
     "div",
     {
       ref: targetRef,
@@ -2261,7 +2897,7 @@ function Tooltip({
       onMouseLeave: handleMouseOutWrapper,
       children: [
         children,
-        isVisible && (portalTarget == null ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        isVisible && (portalTarget == null ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           TooltipContent,
           {
             content,
@@ -2272,7 +2908,7 @@ function Tooltip({
             tooltipPosition
           }
         ) : (0, import_react_dom4.createPortal)(
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
             TooltipContent,
             {
               isPortal: true,
@@ -2298,6 +2934,7 @@ function Tooltip({
   Checkbox,
   Dropdown,
   EvaluationStar,
+  FileInput,
   Heading,
   Icon,
   IconButton,
@@ -2306,6 +2943,11 @@ function Tooltip({
   NotificationInline,
   Pagination,
   PaginationSelect,
+  PasswordInput,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Popup,
   Radio,
   Search,
   SegmentedControl,