@zenkigen-inc/component-ui 1.15.1 → 1.15.2

package/dist/index.js

@@ -1,148 +1,197 @@
-import { userColors, buttonColors, focusVisible, iconColors, typography, tagColors, tagLightColors } from '@zenkigen-inc/component-theme';
-import clsx$1, { clsx } from 'clsx';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, useCallback, useEffect, createContext, useContext, useRef, useLayoutEffect, forwardRef } from 'react';
-import { createPortal } from 'react-dom';
-import { iconElements } from '@zenkigen-inc/component-icons';
-
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (-1 !== e.indexOf(n)) continue;
-    t[n] = r[n];
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return t;
-}
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-const _excluded$8 = ["size"];
-const isAsciiString = str => {
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Avatar: () => Avatar,
+  Breadcrumb: () => Breadcrumb,
+  Button: () => Button,
+  Checkbox: () => Checkbox,
+  Dropdown: () => Dropdown,
+  EvaluationStar: () => EvaluationStar,
+  Heading: () => Heading,
+  Icon: () => Icon,
+  IconButton: () => IconButton,
+  Loading: () => Loading,
+  Modal: () => Modal,
+  NotificationInline: () => NotificationInline,
+  Pagination: () => Pagination,
+  PaginationSelect: () => PaginationSelect,
+  Radio: () => Radio,
+  Search: () => Search,
+  Select: () => Select,
+  SelectSort: () => SelectSort,
+  Tab: () => Tab,
+  TabItem: () => TabItem,
+  Table: () => Table,
+  TableCell: () => TableCell,
+  TableRow: () => TableRow,
+  Tag: () => Tag,
+  TextArea: () => TextArea,
+  TextInput: () => TextInput,
+  Toast: () => Toast,
+  ToastProvider: () => ToastProvider,
+  Toggle: () => Toggle,
+  Tooltip: () => Tooltip,
+  useOutsideClick: () => useOutsideClick,
+  useToast: () => useToast
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/avatar/avatar.tsx
+var import_component_theme = require("@zenkigen-inc/component-theme");
+var import_clsx = require("clsx");
+var import_jsx_runtime = require("react/jsx-runtime");
+var isAsciiString = (str) => {
   return str.charCodeAt(0) < 256;
 };
-function Avatar(_ref) {
-  var _props$userId, _props$isDisabled;
-  let {
-      size = 'medium'
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
-  const classes = clsx('flex items-center justify-center rounded-full text-textOnColor', {
-    'w-16 h-16 typography-label16regular': size === 'x-large',
-    'w-12 h-12 typography-label14regular': size === 'large',
-    'w-10 h-10 typography-label14regular': size === 'medium',
-    'w-8 h-8 typography-label11regular': size === 'small',
-    'w-6 h-6 typography-label11regular': size === 'x-small',
-    'bg-disabled01': props.isDisabled,
-    'bg-icon01': props.userId == null,
-    [userColors[((_props$userId = props.userId) != null ? _props$userId : 0) % userColors.length]]: props.userId != null && !((_props$isDisabled = props.isDisabled) != null ? _props$isDisabled : false)
-  });
-  const trimmedFirstName = props.firstName.replace('　', ' ').trim();
-  const trimmedLastName = props.lastName.replace('　', ' ').trim().trim();
+function Avatar({ size = "medium", ...props }) {
+  const classes = (0, import_clsx.clsx)("flex items-center justify-center rounded-full text-textOnColor", {
+    "w-16 h-16 typography-label16regular": size === "x-large",
+    "w-12 h-12 typography-label14regular": size === "large",
+    "w-10 h-10 typography-label14regular": size === "medium",
+    "w-8 h-8 typography-label11regular": size === "small",
+    "w-6 h-6 typography-label11regular": size === "x-small",
+    "bg-disabled01": props.isDisabled,
+    "bg-icon01": props.userId == null,
+    [import_component_theme.userColors[(props.userId ?? 0) % import_component_theme.userColors.length]]: props.userId != null && !(props.isDisabled ?? false)
+  });
+  const trimmedFirstName = props.firstName.replace("\u3000", " ").trim();
+  const trimmedLastName = props.lastName.replace("\u3000", " ").trim().trim();
   const nameOnIcon = isAsciiString(trimmedLastName) ? trimmedFirstName.slice(0, 1).toUpperCase() + trimmedLastName.slice(0, 1).toUpperCase() : (trimmedLastName + trimmedFirstName).slice(0, 2);
-  return /*#__PURE__*/jsx("span", {
-    className: classes,
-    children: nameOnIcon
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: classes, children: nameOnIcon });
 }
 
-const BreadcrumbItem = ({
-  children
-}) => {
-  return /*#__PURE__*/jsx("li", {
-    className: "flex gap-2 after:content-['/'] last:after:content-none [&_a]:text-interactive02 [&_a]:hover:underline",
-    children: children
-  });
+// src/breadcrumb/breadcrumb-item.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var BreadcrumbItem = ({ children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { className: "flex gap-2 after:content-['/'] last:after:content-none [&_a]:text-interactive02 [&_a]:hover:underline", children });
 };
 
-function Breadcrumb({
-  children
-}) {
-  return /*#__PURE__*/jsx("nav", {
-    "aria-label": "breadcrumb",
-    children: /*#__PURE__*/jsx("ul", {
-      className: "typography-label14regular flex flex-wrap gap-2 whitespace-nowrap text-text01",
-      children: children
-    })
-  });
+// src/breadcrumb/breadcrumb.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Breadcrumb({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("nav", { "aria-label": "breadcrumb", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: "typography-label14regular flex flex-wrap gap-2 whitespace-nowrap text-text01", children }) });
 }
 Breadcrumb.Item = BreadcrumbItem;
 
-const _excluded$7 = ["size", "variant", "isDisabled", "isSelected", "width", "borderRadius", "justifyContent", "before", "after", "elementAs", "children"];
-const Button = _ref => {
-  let {
-      size = 'medium',
-      variant = 'fill',
-      isDisabled,
-      isSelected = false,
-      width,
-      borderRadius,
-      justifyContent = 'center',
-      before,
-      after,
-      elementAs,
-      children
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
-  const baseClasses = clsx('flex shrink-0 items-center gap-1', buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, {
-    'h-6 px-2.5': size === 'small',
-    'h-8 px-3': size === 'medium',
-    'h-10 px-4 leading-[24px]': size === 'large',
-    'inline-flex': elementAs === 'a',
-    [buttonColors[variant].selected]: isSelected,
-    [buttonColors[variant].base]: !isSelected,
-    'hover:text-textOnColor active:text-textOnColor [&:hover>*]:fill-iconOnColor [&:active>*]:fill-iconOnColor': isSelected && variant !== 'outline' && variant !== 'text',
-    'pointer-events-none': isDisabled,
-    'rounded-button': borderRadius == null,
-    'justify-start': justifyContent === 'start',
-    'justify-center': justifyContent === 'center',
-    'typography-label16regular': size === 'large',
-    'typography-label14regular': size !== 'large'
-  });
-  const Component = elementAs != null ? elementAs : 'button';
-  return /*#__PURE__*/jsxs(Component, _extends({
-    className: baseClasses,
-    style: {
-      width,
-      borderRadius
-    },
-    disabled: isDisabled
-  }, props, {
-    children: [before, children, after]
-  }));
+// src/button/button.tsx
+var import_component_theme2 = require("@zenkigen-inc/component-theme");
+var import_clsx2 = require("clsx");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Button = ({
+  size = "medium",
+  variant = "fill",
+  isDisabled,
+  isSelected = false,
+  width,
+  borderRadius,
+  justifyContent = "center",
+  before,
+  after,
+  elementAs,
+  children,
+  ...props
+}) => {
+  const baseClasses = (0, import_clsx2.clsx)(
+    "flex shrink-0 items-center gap-1",
+    import_component_theme2.buttonColors[variant].hover,
+    import_component_theme2.buttonColors[variant].active,
+    import_component_theme2.buttonColors[variant].disabled,
+    import_component_theme2.focusVisible.normal,
+    {
+      "h-6 px-2.5": size === "small",
+      "h-8 px-3": size === "medium",
+      "h-10 px-4 leading-[24px]": size === "large",
+      "inline-flex": elementAs === "a",
+      [import_component_theme2.buttonColors[variant].selected]: isSelected,
+      [import_component_theme2.buttonColors[variant].base]: !isSelected,
+      "hover:text-textOnColor active:text-textOnColor [&:hover>*]:fill-iconOnColor [&:active>*]:fill-iconOnColor": isSelected && variant !== "outline" && variant !== "text",
+      "pointer-events-none": isDisabled,
+      "rounded-button": borderRadius == null,
+      "justify-start": justifyContent === "start",
+      "justify-center": justifyContent === "center",
+      "typography-label16regular": size === "large",
+      "typography-label14regular": size !== "large"
+    }
+  );
+  const Component = elementAs ?? "button";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Component, { className: baseClasses, style: { width, borderRadius }, disabled: isDisabled, ...props, children: [
+    before,
+    children,
+    after
+  ] });
 };
 
-const CheckedIcon = () => {
-  return /*#__PURE__*/jsx("svg", {
-    viewBox: "0 0 20 20",
-    xmlns: "http://www.w3.org/2000/svg",
-    className: "absolute z-10 size-5 rounded-sm fill-iconOnColor hover:rounded-sm",
-    children: /*#__PURE__*/jsx("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M16.2887 5.38099C16.0069 5.09924 15.5518 5.09924 15.2701 5.38099L7.55461 13.0893L4.72993 10.2646C4.44818 9.98283 3.99305 9.98283 3.71131 10.2646C3.42956 10.5463 3.42956 11.0014 3.71131 11.2832L7.04891 14.6208C7.1934 14.7653 7.374 14.8303 7.56183 14.8303C7.74966 14.8303 7.93027 14.7581 8.07475 14.6208L16.2887 6.40683C16.5704 6.12508 16.5704 5.66273 16.2887 5.38099Z"
-    })
-  });
+// src/checkbox/checkbox.tsx
+var import_component_theme3 = require("@zenkigen-inc/component-theme");
+var import_clsx3 = __toESM(require("clsx"));
+var import_react = require("react");
+
+// src/checkbox/checked-icon.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var CheckedIcon = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "svg",
+    {
+      viewBox: "0 0 20 20",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: "absolute z-10 size-5 rounded-sm fill-iconOnColor hover:rounded-sm",
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M16.2887 5.38099C16.0069 5.09924 15.5518 5.09924 15.2701 5.38099L7.55461 13.0893L4.72993 10.2646C4.44818 9.98283 3.99305 9.98283 3.71131 10.2646C3.42956 10.5463 3.42956 11.0014 3.71131 11.2832L7.04891 14.6208C7.1934 14.7653 7.374 14.8303 7.56183 14.8303C7.74966 14.8303 7.93027 14.7581 8.07475 14.6208L16.2887 6.40683C16.5704 6.12508 16.5704 5.66273 16.2887 5.38099Z"
+        }
+      )
+    }
+  );
 };
 
-const MinusIcon = () => {
-  return /*#__PURE__*/jsx("svg", {
-    viewBox: "0 0 20 20",
-    xmlns: "http://www.w3.org/2000/svg",
-    className: "absolute z-10 size-5 rounded-sm fill-iconOnColor hover:rounded-sm",
-    children: /*#__PURE__*/jsx("path", {
-      d: "M4.94723 10.5028H9.49726H10.5028H15.0528C15.3293 10.5028 15.5556 10.2766 15.5556 10C15.5556 9.72352 15.3293 9.49725 15.0528 9.49725H10.5028H9.49726H4.94723C4.67071 9.49725 4.44446 9.72352 4.44446 10C4.44446 10.2766 4.67071 10.5028 4.94723 10.5028Z"
-    })
-  });
+// src/checkbox/minus-icon.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var MinusIcon = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "svg",
+    {
+      viewBox: "0 0 20 20",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: "absolute z-10 size-5 rounded-sm fill-iconOnColor hover:rounded-sm",
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M4.94723 10.5028H9.49726H10.5028H15.0528C15.3293 10.5028 15.5556 10.2766 15.5556 10C15.5556 9.72352 15.3293 9.49725 15.0528 9.49725H10.5028H9.49726H4.94723C4.67071 9.49725 4.44446 9.72352 4.44446 10C4.44446 10.2766 4.67071 10.5028 4.94723 10.5028Z" })
+    }
+  );
 };
 
+// src/checkbox/checkbox.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function Checkbox({
   name,
   value,
@@ -152,218 +201,223 @@ function Checkbox({
   isDisabled = false,
   onChange,
   label,
-  color = 'default'
+  color = "default"
 }) {
-  const [isMouseOver, setIsMouseOver] = useState(false);
-  const handleMouseOverInput = useCallback(() => {
+  const [isMouseOver, setIsMouseOver] = (0, import_react.useState)(false);
+  const handleMouseOverInput = (0, import_react.useCallback)(() => {
     setIsMouseOver(true);
   }, []);
-  const handleMouseOutInput = useCallback(() => {
+  const handleMouseOutInput = (0, import_react.useCallback)(() => {
     setIsMouseOver(false);
   }, []);
-  const handleChange = useCallback(e => !isDisabled && (onChange == null ? void 0 : onChange(e)), [isDisabled, onChange]);
-  const baseInputClasses = clsx$1('peer absolute z-[1] size-5 opacity-0', {
-    'cursor-not-allowed': isDisabled,
-    'cursor-pointer': !isDisabled
-  });
-  const boxClasses = clsx$1('inline-flex size-5 items-center justify-center rounded-sm border bg-white', focusVisible.normalPeer, {
-    'border-disabled01': isDisabled,
-    'border-hoverUiBorder': !isDisabled && isMouseOver && color === 'default',
-    'border-uiBorder03': !isDisabled && !isMouseOver && color === 'default',
-    'border-interactive02': !isDisabled && !isMouseOver && color === 'gray',
-    'border-hoverError': !isDisabled && isMouseOver && color === 'error',
-    'border-supportError': !isDisabled && !isMouseOver && color === 'error'
-  });
-  const indicatorClasses = clsx$1('relative flex size-5 flex-[0_0_auto] items-center justify-center', {
-    'bg-disabled01': isDisabled && isChecked,
-    'border-disabled01': isDisabled
-  });
-  const afterClasses = clsx$1('absolute inset-0 m-auto block rounded-sm', {
-    'bg-disabled01': isDisabled && isChecked,
-    'bg-hover01': !(isDisabled && isChecked) && isMouseOver,
-    'bg-interactive01': !(isDisabled && isChecked) && !isMouseOver,
-    'bg-hover02Dark': !(isDisabled && isChecked) && isMouseOver && color === 'gray',
-    'bg-interactive02': !(isDisabled && isChecked) && !isMouseOver && color === 'gray',
-    'bg-hoverError': !(isDisabled && isChecked) && isMouseOver && color === 'error',
-    'bg-supportError': !(isDisabled && isChecked) && !isMouseOver && color === 'error',
-    'scale-0': !isChecked,
-    'scale-100': isChecked
-  });
-  const hoverIndicatorClasses = clsx$1('inline-block size-3 rounded-[1px]', {
-    'bg-hoverUi': !isDisabled && !isChecked && isMouseOver
-  });
-  const labelClasses = clsx$1('typography-label14regular ml-2 flex-[1_0_0] break-all', {
-    'pointer-events-none cursor-not-allowed text-disabled01': isDisabled,
-    'cursor-pointer text-text01': !isDisabled
-  });
-  return /*#__PURE__*/jsxs("div", {
-    className: "flex items-center",
-    children: [/*#__PURE__*/jsxs("div", {
-      className: "relative flex size-6 items-center justify-center",
-      children: [/*#__PURE__*/jsx("input", {
-        type: "checkbox",
-        value: value,
-        name: name,
-        id: id,
-        checked: isChecked,
-        disabled: isDisabled,
-        onChange: handleChange,
-        onMouseOver: handleMouseOverInput,
-        onMouseLeave: handleMouseOutInput,
-        className: baseInputClasses
-      }), /*#__PURE__*/jsx("div", {
-        className: boxClasses,
-        children: /*#__PURE__*/jsxs("div", {
-          className: indicatorClasses,
-          children: [/*#__PURE__*/jsxs("span", {
-            className: afterClasses,
-            children: [isChecked && !isIndeterminate && /*#__PURE__*/jsx(CheckedIcon, {}), isIndeterminate && /*#__PURE__*/jsx(MinusIcon, {})]
-          }), /*#__PURE__*/jsx("span", {
-            className: hoverIndicatorClasses
-          })]
-        })
-      })]
-    }), label != null && /*#__PURE__*/jsx("label", {
-      htmlFor: id,
-      className: labelClasses,
-      children: label
-    })]
-  });
+  const handleChange = (0, import_react.useCallback)(
+    (e) => !isDisabled && onChange?.(e),
+    [isDisabled, onChange]
+  );
+  const baseInputClasses = (0, import_clsx3.default)("peer absolute z-[1] size-5 opacity-0", {
+    "cursor-not-allowed": isDisabled,
+    "cursor-pointer": !isDisabled
+  });
+  const boxClasses = (0, import_clsx3.default)(
+    "inline-flex size-5 items-center justify-center rounded-sm border bg-white",
+    import_component_theme3.focusVisible.normalPeer,
+    {
+      "border-disabled01": isDisabled,
+      "border-hoverUiBorder": !isDisabled && isMouseOver && color === "default",
+      "border-uiBorder03": !isDisabled && !isMouseOver && color === "default",
+      "border-interactive02": !isDisabled && !isMouseOver && color === "gray",
+      "border-hoverError": !isDisabled && isMouseOver && color === "error",
+      "border-supportError": !isDisabled && !isMouseOver && color === "error"
+    }
+  );
+  const indicatorClasses = (0, import_clsx3.default)("relative flex size-5 flex-[0_0_auto] items-center justify-center", {
+    "bg-disabled01": isDisabled && isChecked,
+    "border-disabled01": isDisabled
+  });
+  const afterClasses = (0, import_clsx3.default)("absolute inset-0 m-auto block rounded-sm", {
+    "bg-disabled01": isDisabled && isChecked,
+    "bg-hover01": !(isDisabled && isChecked) && isMouseOver,
+    "bg-interactive01": !(isDisabled && isChecked) && !isMouseOver,
+    "bg-hover02Dark": !(isDisabled && isChecked) && isMouseOver && color === "gray",
+    "bg-interactive02": !(isDisabled && isChecked) && !isMouseOver && color === "gray",
+    "bg-hoverError": !(isDisabled && isChecked) && isMouseOver && color === "error",
+    "bg-supportError": !(isDisabled && isChecked) && !isMouseOver && color === "error",
+    "scale-0": !isChecked,
+    "scale-100": isChecked
+  });
+  const hoverIndicatorClasses = (0, import_clsx3.default)("inline-block size-3 rounded-[1px]", {
+    "bg-hoverUi": !isDisabled && !isChecked && isMouseOver
+  });
+  const labelClasses = (0, import_clsx3.default)("typography-label14regular ml-2 flex-[1_0_0] break-all", {
+    "pointer-events-none cursor-not-allowed text-disabled01": isDisabled,
+    "cursor-pointer text-text01": !isDisabled
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative flex size-6 items-center justify-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "input",
+        {
+          type: "checkbox",
+          value,
+          name,
+          id,
+          checked: isChecked,
+          disabled: isDisabled,
+          onChange: handleChange,
+          onMouseOver: handleMouseOverInput,
+          onMouseLeave: handleMouseOutInput,
+          className: baseInputClasses
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: boxClasses, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: indicatorClasses, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: afterClasses, children: [
+          isChecked && !isIndeterminate && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckedIcon, {}),
+          isIndeterminate && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MinusIcon, {})
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: hoverIndicatorClasses })
+      ] }) })
+    ] }),
+    label != null && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { htmlFor: id, className: labelClasses, children: label })
+  ] });
 }
 
-const useOutsideClick = (ref, handler, enabled = true) => {
-  useEffect(() => {
-    const listener = event => {
-      var _event$target;
-      const element = ref == null ? void 0 : ref.current;
-      if (element == null || Boolean(element.contains((_event$target = event == null ? void 0 : event.target) != null ? _event$target : null))) {
+// src/dropdown/dropdown.tsx
+var import_component_theme6 = require("@zenkigen-inc/component-theme");
+var import_clsx7 = __toESM(require("clsx"));
+var import_react6 = require("react");
+var import_react_dom = require("react-dom");
+
+// src/hooks/use-outside-click.ts
+var import_react2 = require("react");
+var useOutsideClick = (ref, handler, enabled = true) => {
+  (0, import_react2.useEffect)(() => {
+    const listener = (event) => {
+      const element = ref?.current;
+      if (element == null || Boolean(element.contains(event?.target ?? null))) {
         return;
       }
       handler(event);
     };
     if (enabled) {
-      document.addEventListener('click', listener);
+      document.addEventListener("click", listener);
     }
-    return () => document.removeEventListener('click', listener);
+    return () => document.removeEventListener("click", listener);
   }, [ref, enabled, handler]);
 };
 
-const _excluded$6 = ["size", "isDisabled"];
-const Icon = _ref => {
-  let {
-      size = 'medium',
-      isDisabled = false
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
-  const classes = clsx('inline-block shrink-0', {
-    'fill-disabled01': isDisabled,
-    [iconColors.icon01]: !isDisabled && props.color === 'icon01',
-    [iconColors.icon02]: !isDisabled && props.color === 'icon02',
-    [iconColors.icon03]: !isDisabled && props.color === 'icon03',
-    [iconColors.iconOnColor]: !isDisabled && props.color === 'iconOnColor',
-    'w-3 h-3': size === 'x-small',
-    'w-4 h-4': size === 'small',
-    'w-6 h-6': size === 'medium',
-    'w-8 h-8': size === 'large',
-    'w-10 h-10': size === 'x-large'
-  }, props.className);
-  return /*#__PURE__*/jsx("span", {
-    className: classes,
-    children: iconElements[props.name]
-  });
+// src/icon/icon.tsx
+var import_component_icons = require("@zenkigen-inc/component-icons");
+var import_component_theme4 = require("@zenkigen-inc/component-theme");
+var import_clsx4 = require("clsx");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Icon = ({ size = "medium", isDisabled = false, ...props }) => {
+  const classes = (0, import_clsx4.clsx)(
+    "inline-block shrink-0",
+    {
+      "fill-disabled01": isDisabled,
+      [import_component_theme4.iconColors.icon01]: !isDisabled && props.color === "icon01",
+      [import_component_theme4.iconColors.icon02]: !isDisabled && props.color === "icon02",
+      [import_component_theme4.iconColors.icon03]: !isDisabled && props.color === "icon03",
+      [import_component_theme4.iconColors.iconOnColor]: !isDisabled && props.color === "iconOnColor",
+      "w-3 h-3": size === "x-small",
+      "w-4 h-4": size === "small",
+      "w-6 h-6": size === "medium",
+      "w-8 h-8": size === "large",
+      "w-10 h-10": size === "x-large"
+    },
+    props.className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: classes, children: import_component_icons.iconElements[props.name] });
 };
 
-const DropdownContext = /*#__PURE__*/createContext({
+// src/dropdown/dropdown-context.ts
+var import_react3 = require("react");
+var DropdownContext = (0, import_react3.createContext)({
   isVisible: false,
   setIsVisible: () => false,
   isDisabled: false,
-  targetDimensions: {
-    width: 0,
-    height: 0
-  },
-  variant: 'outline'
+  targetDimensions: { width: 0, height: 0 },
+  variant: "outline"
 });
 
-function DropdownItem({
-  children,
-  color = 'gray',
-  onClick
-}) {
-  const {
-    setIsVisible
-  } = useContext(DropdownContext);
-  const handleClickItem = event => {
+// src/dropdown/dropdown-item.tsx
+var import_component_theme5 = require("@zenkigen-inc/component-theme");
+var import_clsx5 = __toESM(require("clsx"));
+var import_react4 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function DropdownItem({ children, color = "gray", onClick }) {
+  const { setIsVisible } = (0, import_react4.useContext)(DropdownContext);
+  const handleClickItem = (event) => {
     setIsVisible(false);
-    onClick == null || onClick(event);
+    onClick?.(event);
   };
-  const itemClasses = clsx$1('typography-label14regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02', focusVisible.inset, {
-    'bg-uiBackground01 fill-icon01 text-interactive02': color === 'gray',
-    'fill-supportDanger text-supportDanger': color === 'red'
-  });
-  return /*#__PURE__*/jsx("li", {
-    className: "flex w-full items-center",
-    children: /*#__PURE__*/jsx("button", {
-      className: itemClasses,
-      type: "button",
-      onClick: handleClickItem,
-      children: children
-    })
-  });
+  const itemClasses = (0, import_clsx5.default)(
+    "typography-label14regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02",
+    import_component_theme5.focusVisible.inset,
+    {
+      "bg-uiBackground01 fill-icon01 text-interactive02": color === "gray",
+      "fill-supportDanger text-supportDanger": color === "red"
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("li", { className: "flex w-full items-center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { className: itemClasses, type: "button", onClick: handleClickItem, children }) });
 }
 
+// src/dropdown/dropdown-menu.tsx
+var import_clsx6 = __toESM(require("clsx"));
+var import_react5 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function DropdownMenu({
   children,
   maxHeight,
   isNoPadding = false,
-  verticalPosition = 'bottom',
-  horizontalAlign = 'left'
+  verticalPosition = "bottom",
+  horizontalAlign = "left"
 }) {
-  const {
-    isVisible,
-    isDisabled,
-    targetDimensions,
-    variant,
-    portalTargetRef
-  } = useContext(DropdownContext);
-  const wrapperClasses = clsx$1('z-dropdown w-max overflow-y-auto rounded bg-uiBackground01 shadow-floatingShadow', {
+  const { isVisible, isDisabled, targetDimensions, variant, portalTargetRef } = (0, import_react5.useContext)(DropdownContext);
+  const wrapperClasses = (0, import_clsx6.default)("z-dropdown w-max overflow-y-auto rounded bg-uiBackground01 shadow-floatingShadow", {
     absolute: !portalTargetRef,
-    'border-solid border border-uiBorder01': variant === 'outline',
-    'py-1': !isNoPadding,
-    'left-0': horizontalAlign === 'left',
-    'right-0': horizontalAlign === 'right',
-    'left-auto': horizontalAlign === 'center'
-  });
-  return isVisible && !isDisabled && /*#__PURE__*/jsx("ul", {
-    className: wrapperClasses,
-    style: {
-      top: !portalTargetRef && verticalPosition === 'bottom' ? `${targetDimensions.height + 4}px` : 'unset',
-      bottom: !portalTargetRef && verticalPosition === 'top' ? `${targetDimensions.height + 4}px` : 'unset',
-      maxHeight
-    },
-    children: children
-  });
+    "border-solid border border-uiBorder01": variant === "outline",
+    "py-1": !isNoPadding,
+    "left-0": horizontalAlign === "left",
+    "right-0": horizontalAlign === "right",
+    "left-auto": horizontalAlign === "center"
+  });
+  return isVisible && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "ul",
+    {
+      className: wrapperClasses,
+      style: {
+        top: !portalTargetRef && verticalPosition === "bottom" ? `${targetDimensions.height + 4}px` : "unset",
+        bottom: !portalTargetRef && verticalPosition === "top" ? `${targetDimensions.height + 4}px` : "unset",
+        maxHeight
+      },
+      children
+    }
+  );
 }
 
+// src/dropdown/dropdown.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function Dropdown({
   children,
   target,
   label,
   icon,
-  size = 'medium',
-  variant = 'outline',
+  size = "medium",
+  variant = "outline",
   title,
   isDisabled = false,
   isArrowHidden = false,
   portalTargetRef
 }) {
-  const [isVisible, setIsVisible] = useState(false);
-  const [targetDimensions, setTargetDimensions] = useState({
+  const [isVisible, setIsVisible] = (0, import_react6.useState)(false);
+  const [targetDimensions, setTargetDimensions] = (0, import_react6.useState)({
     width: 0,
     height: 0
   });
-  const targetRef = useRef(null);
+  const targetRef = (0, import_react6.useRef)(null);
   useOutsideClick(targetRef, () => setIsVisible(false));
-  const handleToggle = useCallback(() => {
+  const handleToggle = (0, import_react6.useCallback)(() => {
     if (targetRef.current === null) {
       return;
     }
@@ -379,279 +433,228 @@ function Dropdown({
       setIsVisible(true);
     }
   }, [isVisible]);
-  const wrapperClasses = clsx$1('relative flex shrink-0 items-center gap-1 rounded', {
-    'cursor-not-allowed': isDisabled
-  });
-  const childrenButtonClasses = clsx$1('flex items-center justify-center rounded bg-uiBackground01 p-1 hover:bg-hover02 active:bg-active02', focusVisible.normal, {
-    'pointer-events-none': isDisabled,
-    'border border-uiBorder02': variant === 'outline'
-  });
-  const buttonClasses = clsx$1('flex items-center rounded bg-uiBackground01', buttonColors[variant].base, buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, {
-    'pointer-events-none': isDisabled,
-    'h-6 px-2': size === 'x-small' || size === 'small',
-    'h-8 px-4': size === 'medium',
-    'h-10 px-4': size === 'large'
-  });
-  const labelClasses = clsx$1('flex items-center', {
-    'mr-1': !isArrowHidden && size === 'x-small',
-    'mr-2': !isArrowHidden && size !== 'x-small',
-    'typography-label12regular': size === 'x-small',
-    'typography-label14regular': size === 'small' || size === 'medium',
-    'typography-label16regular': size === 'large'
-  });
-  return /*#__PURE__*/jsx(DropdownContext.Provider, {
-    value: {
-      isVisible,
-      setIsVisible,
-      isDisabled,
-      targetDimensions,
-      variant,
-      portalTargetRef
-    },
-    children: /*#__PURE__*/jsxs("div", {
-      ref: targetRef,
-      className: wrapperClasses,
-      children: [target ? /*#__PURE__*/jsxs("button", {
-        type: "button",
-        title: title,
-        className: childrenButtonClasses,
-        onClick: handleToggle,
-        disabled: isDisabled,
-        children: [target, !isArrowHidden && /*#__PURE__*/jsx("div", {
-          className: "ml-2 flex items-center fill-icon01",
-          children: /*#__PURE__*/jsx(Icon, {
-            name: isVisible ? 'angle-small-up' : 'angle-small-down',
-            size: size === 'large' ? 'medium' : 'small'
-          })
-        })]
-      }) : /*#__PURE__*/jsxs("button", {
-        type: "button",
-        title: title,
-        className: buttonClasses,
-        onClick: handleToggle,
-        disabled: isDisabled,
-        children: [icon && /*#__PURE__*/jsx("span", {
-          className: "mr-1 flex",
-          children: /*#__PURE__*/jsx(Icon, {
-            name: icon,
-            size: size === 'large' ? 'medium' : 'small'
-          })
-        }), /*#__PURE__*/jsx("span", {
-          className: labelClasses,
-          children: label
-        }), !isArrowHidden && /*#__PURE__*/jsx("div", {
-          className: "ml-auto flex items-center",
-          children: /*#__PURE__*/jsx(Icon, {
-            name: isVisible ? 'angle-small-up' : 'angle-small-down',
-            size: "small"
-          })
-        })]
-      }), !portalTargetRef ? children : portalTargetRef != null && portalTargetRef.current && /*#__PURE__*/createPortal(children, portalTargetRef.current)]
-    })
-  });
+  const wrapperClasses = (0, import_clsx7.default)("relative flex shrink-0 items-center gap-1 rounded", {
+    "cursor-not-allowed": isDisabled
+  });
+  const childrenButtonClasses = (0, import_clsx7.default)(
+    "flex items-center justify-center rounded bg-uiBackground01 p-1 hover:bg-hover02 active:bg-active02",
+    import_component_theme6.focusVisible.normal,
+    {
+      "pointer-events-none": isDisabled,
+      "border border-uiBorder02": variant === "outline"
+    }
+  );
+  const buttonClasses = (0, import_clsx7.default)(
+    "flex items-center rounded bg-uiBackground01",
+    import_component_theme6.buttonColors[variant].base,
+    import_component_theme6.buttonColors[variant].hover,
+    import_component_theme6.buttonColors[variant].active,
+    import_component_theme6.buttonColors[variant].disabled,
+    import_component_theme6.focusVisible.normal,
+    {
+      "pointer-events-none": isDisabled,
+      "h-6 px-2": size === "x-small" || size === "small",
+      "h-8 px-4": size === "medium",
+      "h-10 px-4": size === "large"
+    }
+  );
+  const labelClasses = (0, import_clsx7.default)("flex items-center", {
+    "mr-1": !isArrowHidden && size === "x-small",
+    "mr-2": !isArrowHidden && size !== "x-small",
+    "typography-label12regular": size === "x-small",
+    "typography-label14regular": size === "small" || size === "medium",
+    "typography-label16regular": size === "large"
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    DropdownContext.Provider,
+    {
+      value: { isVisible, setIsVisible, isDisabled, targetDimensions, variant, portalTargetRef },
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ref: targetRef, className: wrapperClasses, children: [
+        target ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          "button",
+          {
+            type: "button",
+            title,
+            className: childrenButtonClasses,
+            onClick: handleToggle,
+            disabled: isDisabled,
+            children: [
+              target,
+              !isArrowHidden && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "ml-2 flex items-center fill-icon01", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                Icon,
+                {
+                  name: isVisible ? "angle-small-up" : "angle-small-down",
+                  size: size === "large" ? "medium" : "small"
+                }
+              ) })
+            ]
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("button", { type: "button", title, className: buttonClasses, onClick: handleToggle, disabled: isDisabled, children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "mr-1 flex", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { name: icon, size: size === "large" ? "medium" : "small" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: labelClasses, children: label }),
+          !isArrowHidden && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { name: isVisible ? "angle-small-up" : "angle-small-down", size: "small" }) })
+        ] }),
+        !portalTargetRef ? children : portalTargetRef != null && portalTargetRef.current && (0, import_react_dom.createPortal)(children, portalTargetRef.current)
+      ] })
+    }
+  );
 }
 Dropdown.Menu = DropdownMenu;
 Dropdown.Item = DropdownItem;
 
-function EvaluationStar({
-  value,
-  isEditable = false,
-  onChangeRating,
-  size = 'medium'
-}) {
+// src/evaluation-star/evaluation-star.tsx
+var import_component_icons2 = require("@zenkigen-inc/component-icons");
+var import_component_theme7 = require("@zenkigen-inc/component-theme");
+var import_clsx8 = __toESM(require("clsx"));
+var import_react7 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function EvaluationStar({ value, isEditable = false, onChangeRating, size = "medium" }) {
   const maxRating = 5;
-  const [currentRating, setCurrentRating] = useState(value);
-  const handleChangeRating = useCallback(newRating => {
-    if (isEditable) {
-      setCurrentRating(newRating);
-      if (onChangeRating) {
-        onChangeRating(newRating);
+  const [currentRating, setCurrentRating] = (0, import_react7.useState)(value);
+  const handleChangeRating = (0, import_react7.useCallback)(
+    (newRating) => {
+      if (isEditable) {
+        setCurrentRating(newRating);
+        if (onChangeRating) {
+          onChangeRating(newRating);
+        }
       }
-    }
-  }, [isEditable, onChangeRating]);
-  const starClasses = clsx$1(focusVisible.inset, {
-    'w-6 h-6': size === 'large',
-    'w-4 h-4': size === 'medium'
-  });
-  // 各評価のレンダリングロジックを分離（React Hooksのルールに準拠）
-  const renderStar = rating => {
-    const color = rating <= currentRating ? 'fill-yellow-yellow50' : 'fill-icon03';
-    return /*#__PURE__*/jsx("button", {
-      type: "button",
-      onClick: () => handleChangeRating(rating),
-      className: clsx$1(color, starClasses),
-      disabled: !isEditable,
-      children: iconElements['star-filled']
-    }, rating);
+    },
+    [isEditable, onChangeRating]
+  );
+  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";
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => handleChangeRating(rating),
+        className: (0, import_clsx8.default)(color, starClasses),
+        disabled: !isEditable,
+        children: import_component_icons2.iconElements["star-filled"]
+      },
+      rating
+    );
   };
-  // 宣言的な方法で評価の配列を生成
-  const ratingStars = Array.from({
-    length: maxRating
-  }, (_, index) => renderStar(index + 1));
-  return /*#__PURE__*/jsx("span", {
-    className: "flex flex-row",
-    children: ratingStars
-  });
+  const ratingStars = Array.from({ length: maxRating }, (_, index) => renderStar(index + 1));
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "flex flex-row", children: ratingStars });
 }
 
+// src/heading/heading.tsx
+var import_component_theme8 = require("@zenkigen-inc/component-theme");
+var import_clsx9 = require("clsx");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function Heading(props) {
   const TagName = `h${props.level}`;
-  const classes = clsx(`flex items-center text-text01`, typography.heading[TagName], {
-    'gap-2': props.level === 1,
-    'gap-1': props.level > 1
-  });
-  return /*#__PURE__*/jsxs(TagName, {
-    className: classes,
-    children: [props.before, props.children, props.after]
-  });
+  const classes = (0, import_clsx9.clsx)(`flex items-center text-text01`, import_component_theme8.typography.heading[TagName], {
+    "gap-2": props.level === 1,
+    "gap-1": props.level > 1
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(TagName, { className: classes, children: [
+    props.before,
+    props.children,
+    props.after
+  ] });
 }
 
-const _excluded$5 = ["size", "variant", "isNoPadding", "isDisabled"];
-function IconButton(_ref) {
-  let {
-      size = 'medium',
-      variant = 'outline',
-      isNoPadding = false,
-      isDisabled = false
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
-  const baseClasses = clsx('typography-label16regular flex items-center justify-center gap-1 rounded', buttonColors[variant].base, buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, 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
-  });
-  const iconSize = size === 'small' ? 'small' : 'medium';
+// 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({
+  size = "medium",
+  variant = "outline",
+  isNoPadding = false,
+  isDisabled = false,
+  ...props
+}) {
+  const baseClasses = (0, import_clsx10.clsx)(
+    "typography-label16regular flex items-center justify-center gap-1 rounded",
+    import_component_theme9.buttonColors[variant].base,
+    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
+    }
+  );
+  const iconSize = size === "small" ? "small" : "medium";
   if (props.isAnchor === true) {
-    return /*#__PURE__*/jsx("a", {
-      className: baseClasses,
-      href: props.href,
-      target: props.target,
-      children: /*#__PURE__*/jsx(Icon, {
-        name: props.icon,
-        size: iconSize
-      })
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("a", { className: baseClasses, href: props.href, target: props.target, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: props.icon, size: iconSize }) });
   } else {
-    return /*#__PURE__*/jsx("button", {
-      type: "button",
-      className: baseClasses,
-      disabled: isDisabled,
-      onClick: props.onClick,
-      children: /*#__PURE__*/jsx(Icon, {
-        name: props.icon,
-        size: iconSize
-      })
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: baseClasses, disabled: isDisabled, onClick: props.onClick, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: props.icon, size: iconSize }) });
   }
 }
 
-function Loading({
-  size = 'medium',
-  position = 'fixed',
-  height = '100%'
-}) {
-  const wrapperClasses = clsx$1(position, 'left-0 top-0 z-20 flex w-full items-center justify-center');
-  const svgClasses = clsx$1({
-    'h-4 w-4': size === 'small',
-    'h-8 w-8': size === 'medium',
-    'h-16 w-16': size === 'large'
-  });
-  return /*#__PURE__*/jsx(Fragment, {
-    children: /*#__PURE__*/jsxs("div", {
-      className: wrapperClasses,
-      style: {
-        height
-      },
-      children: [size === 'small' && /*#__PURE__*/jsx("svg", {
-        className: svgClasses,
-        viewBox: "0 0 16 16",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        children: /*#__PURE__*/jsx("circle", {
-          className: "origin-center animate-circular-small-move stroke-interactive01",
-          cx: "8",
-          cy: "8",
-          r: "7",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          fill: "none"
-        })
-      }), size === 'medium' && /*#__PURE__*/jsx("svg", {
-        className: svgClasses,
-        viewBox: "0 0 32 32",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        children: /*#__PURE__*/jsx("circle", {
-          className: "origin-center animate-circular-medium-move stroke-interactive01",
-          cx: "16",
-          cy: "16",
-          r: "15",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          fill: "none"
-        })
-      }), size === 'large' && /*#__PURE__*/jsx("svg", {
-        className: svgClasses,
-        viewBox: "0 0 64 64",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        children: /*#__PURE__*/jsx("circle", {
-          className: "origin-center animate-circular-large-move stroke-interactive01",
-          cx: "32",
-          cy: "32",
-          r: "30",
-          stroke: "currentColor",
-          strokeWidth: "3",
-          fill: "none"
-        })
-      })]
-    })
-  });
+// src/loading/loading.tsx
+var import_clsx11 = __toESM(require("clsx"));
+var import_jsx_runtime15 = 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)({
+    "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)(
+      "circle",
+      {
+        className: "origin-center animate-circular-small-move stroke-interactive01",
+        cx: "8",
+        cy: "8",
+        r: "7",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        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)(
+      "circle",
+      {
+        className: "origin-center animate-circular-medium-move stroke-interactive01",
+        cx: "16",
+        cy: "16",
+        r: "15",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        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)(
+      "circle",
+      {
+        className: "origin-center animate-circular-large-move stroke-interactive01",
+        cx: "32",
+        cy: "32",
+        r: "30",
+        stroke: "currentColor",
+        strokeWidth: "3",
+        fill: "none"
+      }
+    ) })
+  ] }) });
 }
 
-/**
- * モーダル表示時にバックグラウンドのスクロールを防止するコンポーネント。
- * コンポーネントがマウントされている間、position: fixedアプローチを使用して
- * body要素にスクロールロックを適用します。
- * 縦横両方のスクロール位置を保存し、コンポーネントのアンマウント時に復元します。
- * スクロールバーの有無を検出し、その幅を考慮してレイアウトシフトを防止します。
- * position、top、left、width、overflow、padding-rightを変更し、
- * 最小限の変更でスクロールを防止します。
- * グローバルCSSに依存せず、すべてインラインスタイルで実装されています。
- * このコンポーネントは実際のDOM要素をレンダリングせず、効果のみを適用します。
- *
- * @example
- * // モーダルコンポーネント内で使用する例
- * const Modal = ({ isOpen, children }) => {
- *   return (
- *     <>
- *       {isOpen && <BodyScrollLock />}
- *       {isOpen && (
- *         <div className="modal">
- *           {children}
- *         </div>
- *       )}
- *     </>
- *   );
- * };
- */
-const BodyScrollLock = () => {
-  useLayoutEffect(() => {
-    // 現在の縦横スクロール位置を記録
-    const {
-      scrollX,
-      scrollY
-    } = window;
-    const {
-      body
-    } = document;
-    // スクロールバーの有無と幅を検出
+// src/modal/modal.tsx
+var import_react11 = require("react");
+var import_react_dom2 = require("react-dom");
+
+// src/modal/body-scroll-lock.tsx
+var import_react8 = require("react");
+var BodyScrollLock = () => {
+  (0, import_react8.useLayoutEffect)(() => {
+    const { scrollX, scrollY } = window;
+    const { body } = document;
     const hasVerticalScrollbar = document.documentElement.scrollHeight > document.documentElement.clientHeight;
     const scrollbarWidth = hasVerticalScrollbar ? window.innerWidth - document.documentElement.clientWidth : 0;
-    // 元のインラインスタイルの値を保存
     const originalInlineStyles = {
       position: body.style.position,
       top: body.style.top,
@@ -660,236 +663,182 @@ const BodyScrollLock = () => {
       overflow: body.style.overflow,
       paddingRight: body.style.paddingRight
     };
-    // スクロールロックスタイルを適用
-    body.style.position = 'fixed';
+    body.style.position = "fixed";
     body.style.top = `-${scrollY}px`;
     body.style.left = `-${scrollX}px`;
-    body.style.width = '100%';
-    body.style.overflow = 'hidden';
-    // スクロールバーがある場合、その幅分だけpadding-rightを調整
+    body.style.width = "100%";
+    body.style.overflow = "hidden";
     if (hasVerticalScrollbar && scrollbarWidth > 0) {
-      // 現在のpadding-rightの値を取得
-      const {
-        paddingRight
-      } = window.getComputedStyle(body);
-      const paddingRightValue = paddingRight !== '' ? parseInt(paddingRight, 10) : 0;
-      // スクロールバーの幅を加算
+      const { paddingRight } = window.getComputedStyle(body);
+      const paddingRightValue = paddingRight !== "" ? parseInt(paddingRight, 10) : 0;
       body.style.paddingRight = `${paddingRightValue + scrollbarWidth}px`;
     }
-    // クリーンアップ関数
     return () => {
-      // 元のスタイル値を取得
-      const {
-        position,
-        top,
-        left,
-        width,
-        overflow,
-        paddingRight
-      } = originalInlineStyles;
-      // プロパティごとに元の値を復元
-      restoreProperty(body, 'position', position);
-      restoreProperty(body, 'top', top);
-      restoreProperty(body, 'left', left);
-      restoreProperty(body, 'width', width);
-      restoreProperty(body, 'overflow', overflow);
-      restoreProperty(body, 'padding-right', paddingRight);
-      // スクロール位置を復元
+      const { position, top, left, width, overflow, paddingRight } = originalInlineStyles;
+      restoreProperty(body, "position", position);
+      restoreProperty(body, "top", top);
+      restoreProperty(body, "left", left);
+      restoreProperty(body, "width", width);
+      restoreProperty(body, "overflow", overflow);
+      restoreProperty(body, "padding-right", paddingRight);
       window.scrollTo(scrollX, scrollY);
     };
-  }, []); // 空の依存配列を指定して初回のみ実行
-  // DOM要素をレンダリングせず、nullを返す
+  }, []);
   return null;
 };
-/**
- * 元のスタイル値を復元するヘルパー関数
- * @param element スタイルを復元する要素
- * @param property 復元するCSSプロパティ名
- * @param value 復元する値
- */
 function restoreProperty(element, property, value) {
-  if (value !== '') {
+  if (value !== "") {
     element.style.setProperty(property, value);
   } else {
     element.style.removeProperty(property);
   }
 }
 
-function ModalBody({
-  children
-}) {
-  return /*#__PURE__*/jsx("div", {
-    className: "overflow-y-auto",
-    children: children
-  });
+// src/modal/modal-body.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function ModalBody({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "overflow-y-auto", children });
 }
 
-const ModalContext = /*#__PURE__*/createContext({
+// src/modal/modal-context.ts
+var import_react9 = require("react");
+var ModalContext = (0, import_react9.createContext)({
   onClose: () => null
 });
 
-function ModalFooter({
-  children,
-  isNoBorder = false
-}) {
-  const wrapperClasses = clsx$1('flex w-full shrink-0 items-center rounded-b-lg px-6 py-4', {
-    'border-t-[1px] border-uiBorder01': !isNoBorder
-  });
-  return /*#__PURE__*/jsx("div", {
-    className: wrapperClasses,
-    children: children
-  });
+// src/modal/modal-footer.tsx
+var import_clsx12 = __toESM(require("clsx"));
+var import_jsx_runtime17 = 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", {
+    "border-t-[1px] border-uiBorder01": !isNoBorder
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: wrapperClasses, children });
 }
 
-function ModalHeader({
-  children,
-  isNoBorder = false
-}) {
-  const {
-    onClose
-  } = useContext(ModalContext);
-  const headerClasses = clsx$1('typography-h5 flex w-full shrink-0 items-center justify-between rounded-t-lg px-6 text-text01', {
-    'border-b border-uiBorder01': !isNoBorder,
-    'h-14': !onClose,
-    'h-12': onClose
-  });
-  return /*#__PURE__*/jsxs("div", {
-    className: headerClasses,
-    children: [/*#__PURE__*/jsx("div", {
-      children: children
-    }), onClose && /*#__PURE__*/jsx(IconButton, {
-      icon: "close",
-      size: "small",
-      variant: "text",
-      onClick: onClose
-    })]
-  });
+// src/modal/modal-header.tsx
+var import_clsx13 = __toESM(require("clsx"));
+var import_react10 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function ModalHeader({ children, isNoBorder = false }) {
+  const { onClose } = (0, import_react10.useContext)(ModalContext);
+  const headerClasses = (0, import_clsx13.default)(
+    "typography-h5 flex w-full shrink-0 items-center justify-between rounded-t-lg px-6 text-text01",
+    {
+      "border-b border-uiBorder01": !isNoBorder,
+      "h-14": !onClose,
+      "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 })
+  ] });
 }
 
-const LIMIT_WIDTH = 320;
-const LIMIT_HEIGHT = 184;
+// src/modal/modal.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var LIMIT_WIDTH = 320;
+var LIMIT_HEIGHT = 184;
 function Modal({
   children,
   width = 480,
   height,
+  maxWidth = "calc(100vw - 40px)",
   isOpen,
   onClose,
   portalTargetRef
 }) {
-  const [isMounted, setIsMounted] = useState(false);
-  const renderWidth = typeof width === 'number' ? Math.max(width, LIMIT_WIDTH) : width;
-  const renderHeight = typeof height === 'number' ? Math.max(height, LIMIT_HEIGHT) : height;
-  useEffect(() => {
+  const [isMounted, setIsMounted] = (0, import_react11.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_react11.useEffect)(() => {
     setIsMounted(true);
   }, []);
-  return isMounted && isOpen ? /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(BodyScrollLock, {}), /*#__PURE__*/createPortal(/*#__PURE__*/jsx(ModalContext.Provider, {
-      value: {
-        onClose
-      },
-      children: /*#__PURE__*/jsx("div", {
-        className: "fixed left-0 top-0 z-overlay flex size-full items-center justify-center bg-backgroundOverlayBlack py-4",
-        children: /*#__PURE__*/jsx("div", {
+  return isMounted && isOpen ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.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)(
+        "div",
+        {
           className: "grid max-h-full min-h-[120px] grid-rows-[max-content_1fr_max-content] flex-col rounded-lg bg-uiBackground01 shadow-modalShadow",
-          style: {
-            width: renderWidth,
-            height: renderHeight
-          },
-          children: children
-        })
-      })
-    }), (portalTargetRef == null ? void 0 : portalTargetRef.current) != null ? portalTargetRef.current : document.body)]
-  }) : null;
+          style: { width: renderWidth, height: renderHeight, maxWidth },
+          children
+        }
+      ) }) }),
+      portalTargetRef?.current != null ? portalTargetRef.current : document.body
+    )
+  ] }) : null;
 }
 Modal.Body = ModalBody;
 Modal.Header = ModalHeader;
 Modal.Footer = ModalFooter;
 
-const _excluded$4 = ["state", "size"];
-function NotificationInline(_ref) {
-  let {
-      state = 'default',
-      size = 'medium'
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-  const wrapperClasses = clsx('typography-body13regular flex items-center gap-1 rounded text-text01', {
-    'bg-uiBackgroundError': state === 'attention',
-    'bg-uiBackgroundWarning': state === 'warning',
-    'bg-uiBackgroundBlue': state === 'information',
-    'bg-uiBackgroundSuccess': state === 'success',
-    'bg-uiBackgroundGray': state === 'default',
-    'p-2': size === 'small',
-    'p-3': size === 'medium'
-  });
-  const iconClasses = clsx('flex items-center', {
-    'fill-supportError': state === 'attention',
-    'fill-supportWarning': state === 'warning',
-    'fill-blue-blue50': state === 'information',
-    'fill-supportSuccess': state === 'success'
+// src/notification-inline/notification-inline.tsx
+var import_clsx14 = require("clsx");
+var import_jsx_runtime20 = 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", {
+    "bg-uiBackgroundError": state === "attention",
+    "bg-uiBackgroundWarning": state === "warning",
+    "bg-uiBackgroundBlue": state === "information",
+    "bg-uiBackgroundSuccess": state === "success",
+    "bg-uiBackgroundGray": state === "default",
+    "p-2": size === "small",
+    "p-3": size === "medium"
+  });
+  const iconClasses = (0, import_clsx14.clsx)("flex items-center", {
+    "fill-supportError": state === "attention",
+    "fill-supportWarning": state === "warning",
+    "fill-blue-blue50": state === "information",
+    "fill-supportSuccess": state === "success"
   });
   const iconName = {
-    attention: 'attention',
-    success: 'success-filled',
-    warning: 'warning',
-    information: 'information-filled'
+    attention: "attention",
+    success: "success-filled",
+    warning: "warning",
+    information: "information-filled"
   };
   const iconSize = {
-    small: 'small',
-    medium: 'medium'
+    small: "small",
+    medium: "medium"
   };
-  return /*#__PURE__*/jsxs("div", {
-    className: wrapperClasses,
-    children: [state !== 'default' && /*#__PURE__*/jsx("div", {
-      className: iconClasses,
-      children: /*#__PURE__*/jsx(Icon, {
-        name: iconName[state],
-        size: iconSize[size]
-      })
-    }), /*#__PURE__*/jsx("p", {
-      className: "flex-1",
-      children: props.children
-    }), props.showClose === true && /*#__PURE__*/jsx("div", {
-      className: "flex items-center",
-      children: /*#__PURE__*/jsx(IconButton, {
-        icon: "close",
-        size: "small",
-        variant: "text"
-      })
-    })]
-  });
+  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" }) })
+  ] });
 }
 
-const PaginationContext = /*#__PURE__*/createContext({
+// src/pagination/pagination-button.tsx
+var import_clsx15 = require("clsx");
+var import_react13 = require("react");
+
+// src/pagination/pagination-context.ts
+var import_react12 = require("react");
+var PaginationContext = (0, import_react12.createContext)({
   currentPage: 0
 });
 
-function PaginationButton({
-  page,
-  onClick
-}) {
-  const {
-    currentPage
-  } = useContext(PaginationContext);
-  const buttonClasses = clsx('flex h-8 min-w-8 items-center justify-center rounded fill-icon01 px-1', 'typography-label14regular', 'text-interactive02', 'hover:bg-hover02', {
-    'border border-uiBorder02': page === currentPage
-  }, {
-    'border-transparent': page !== currentPage
-  });
-  return /*#__PURE__*/jsx("button", {
-    type: "button",
-    className: buttonClasses,
-    onClick: () => onClick(page),
-    children: page
-  });
+// src/pagination/pagination-button.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function PaginationButton({ page, onClick }) {
+  const { currentPage } = (0, import_react13.useContext)(PaginationContext);
+  const buttonClasses = (0, import_clsx15.clsx)(
+    "flex h-8 min-w-8 items-center justify-center rounded fill-icon01 px-1",
+    "typography-label14regular",
+    "text-interactive02",
+    "hover:bg-hover02",
+    { "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 });
 }
 
-const START_PAGE = 1;
-function Pagination({
-  currentPage,
-  totalPage,
-  sideNumPagesToShow = 3,
-  onClick
-}) {
+// src/pagination/pagination.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var START_PAGE = 1;
+function Pagination({ currentPage, totalPage, sideNumPagesToShow = 3, onClick }) {
   let center = Math.max(currentPage, START_PAGE + 1);
   center = Math.min(center, totalPage - 1);
   const start = Math.max(center - sideNumPagesToShow, START_PAGE + 1);
@@ -900,166 +849,132 @@ function Pagination({
   for (let i = start + offsetStart; i <= end + offsetEnd; i++) {
     pageList.push(i);
   }
-  const threeDotIconClasses = 'flex h-8 w-8 items-center justify-center gap-1 fill-icon01';
-  return /*#__PURE__*/jsx(PaginationContext.Provider, {
-    value: {
-      currentPage
-    },
-    children: /*#__PURE__*/jsxs("ul", {
-      className: "flex gap-1",
-      children: [/*#__PURE__*/jsx("li", {
-        className: "flex items-center",
-        children: /*#__PURE__*/jsx(IconButton, {
-          isDisabled: currentPage === START_PAGE,
-          variant: "text",
-          icon: "angle-left",
-          size: "small",
-          onClick: () => onClick(currentPage - 1)
-        })
-      }), /*#__PURE__*/jsx("li", {
-        children: /*#__PURE__*/jsx(PaginationButton, {
-          onClick: () => onClick(START_PAGE),
-          page: START_PAGE
-        })
-      }), pageList.length !== 0 && pageList[0] !== 2 && /*#__PURE__*/jsx("li", {
-        className: threeDotIconClasses,
-        children: /*#__PURE__*/jsx(Icon, {
-          name: "more",
-          size: "small"
-        })
-      }), pageList.map((page, index) => /*#__PURE__*/jsx("li", {
-        children: /*#__PURE__*/jsx(PaginationButton, {
-          onClick: () => onClick(page),
-          page: page
-        })
-      }, index)), pageList.length !== 0 && pageList[pageList.length - 1] !== totalPage - 1 && /*#__PURE__*/jsx("li", {
-        className: threeDotIconClasses,
-        children: /*#__PURE__*/jsx(Icon, {
-          name: "more",
-          size: "small"
-        })
-      }), /*#__PURE__*/jsx("li", {
-        children: /*#__PURE__*/jsx(PaginationButton, {
-          onClick: () => onClick(totalPage),
-          page: totalPage
-        })
-      }), /*#__PURE__*/jsx("li", {
-        className: "flex items-center",
-        children: /*#__PURE__*/jsx(IconButton, {
-          isDisabled: currentPage === totalPage,
-          variant: "text",
-          icon: "angle-right",
-          size: "small",
-          onClick: () => onClick(currentPage + 1)
-        })
-      })]
-    })
-  });
+  const threeDotIconClasses = "flex h-8 w-8 items-center justify-center gap-1 fill-icon01";
+  return /* @__PURE__ */ (0, import_jsx_runtime22.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)(
+          IconButton,
+          {
+            isDisabled: currentPage === START_PAGE,
+            variant: "text",
+            icon: "angle-left",
+            size: "small",
+            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)(
+          IconButton,
+          {
+            isDisabled: currentPage === totalPage,
+            variant: "text",
+            icon: "angle-right",
+            size: "small",
+            onClick: () => onClick(currentPage + 1)
+          }
+        ) })
+      ] })
+    }
+  );
 }
 
-const SelectContext = /*#__PURE__*/createContext({
-  size: 'medium',
+// src/select/select.tsx
+var import_component_theme12 = require("@zenkigen-inc/component-theme");
+var import_clsx18 = __toESM(require("clsx"));
+var import_react17 = require("react");
+
+// src/select/select-context.ts
+var import_react14 = require("react");
+var SelectContext = (0, import_react14.createContext)({
+  size: "medium",
   setIsOptionListOpen: () => false,
-  variant: 'outline'
+  variant: "outline"
 });
 
-function SelectItem$1({
-  option
-}) {
-  const {
-    setIsOptionListOpen,
-    selectedOption,
-    onChange
-  } = useContext(SelectContext);
-  const handleClickItem = option => {
-    onChange == null || onChange(option);
+// src/select/select-item.tsx
+var import_component_theme10 = require("@zenkigen-inc/component-theme");
+var import_clsx16 = __toESM(require("clsx"));
+var import_react15 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function SelectItem({ option }) {
+  const { setIsOptionListOpen, selectedOption, onChange } = (0, import_react15.useContext)(SelectContext);
+  const handleClickItem = (option2) => {
+    onChange?.(option2);
     setIsOptionListOpen(false);
   };
-  const itemClasses = clsx$1('typography-label14regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02', focusVisible.inset, {
-    'text-interactive01 fill-interactive01 bg-selectedUi': option.id === (selectedOption == null ? void 0 : selectedOption.id),
-    'text-interactive02 fill-icon01 bg-uiBackground01': option.id !== (selectedOption == null ? void 0 : selectedOption.id)
-  });
-  return /*#__PURE__*/jsx("li", {
-    className: "flex w-full items-center",
-    "data-id": option.id,
-    children: /*#__PURE__*/jsxs("button", {
-      className: itemClasses,
-      type: "button",
-      onClick: () => handleClickItem(option),
-      children: [option.icon && /*#__PURE__*/jsx(Icon, {
-        name: option.icon,
-        size: "small"
-      }), /*#__PURE__*/jsx("span", {
-        className: "ml-1 mr-6",
-        children: option.label
-      }), option.id === (selectedOption == null ? void 0 : selectedOption.id) && /*#__PURE__*/jsx("div", {
-        className: "ml-auto flex items-center",
-        children: /*#__PURE__*/jsx(Icon, {
-          name: "check",
-          size: "small"
-        })
-      })]
-    })
-  }, option.id);
+  const itemClasses = (0, import_clsx16.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,
+      "text-interactive02 fill-icon01 bg-uiBackground01": 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" }) })
+  ] }) }, option.id);
 }
 
-function SelectList$1({
-  children,
-  maxHeight
-}) {
-  const ref = useRef(null);
-  const {
-    size,
-    selectedOption,
-    setIsOptionListOpen,
-    variant,
-    placeholder,
-    onChange
-  } = useContext(SelectContext);
+// src/select/select-list.tsx
+var import_component_theme11 = require("@zenkigen-inc/component-theme");
+var import_clsx17 = __toESM(require("clsx"));
+var import_react16 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function SelectList({ children, maxHeight }) {
+  const ref = (0, import_react16.useRef)(null);
+  const { size, selectedOption, setIsOptionListOpen, variant, placeholder, onChange } = (0, import_react16.useContext)(SelectContext);
   const handleClickDeselect = () => {
-    onChange == null || onChange(null);
+    onChange?.(null);
     setIsOptionListOpen(false);
   };
-  useLayoutEffect(() => {
+  (0, import_react16.useLayoutEffect)(() => {
     if (maxHeight != null && ref.current) {
-      var _ref$current$children;
-      const element = Array.from((_ref$current$children = ref.current.children) != null ? _ref$current$children : []).find(item => item.getAttribute('data-id') === (selectedOption == null ? void 0 : selectedOption.id));
+      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);
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  const listClasses = clsx$1('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 = clsx$1('typography-label14regular flex h-8 w-full items-center px-3 text-interactive02 hover:bg-hover02 active:bg-active02', focusVisible.inset);
-  return /*#__PURE__*/jsxs("ul", {
-    className: listClasses,
-    style: {
-      maxHeight
-    },
-    ref: ref,
-    children: [children, placeholder != null && selectedOption !== null && /*#__PURE__*/jsx("li", {
-      children: /*#__PURE__*/jsx("button", {
-        className: deselectButtonClasses,
-        type: "button",
-        onClick: handleClickDeselect,
-        children: "\u9078\u629E\u89E3\u9664"
-      })
-    })]
-  });
+  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)(
+    "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: [
+    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" }) })
+  ] });
 }
 
+// src/select/select.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function Select({
   children,
-  size = 'medium',
-  variant = 'outline',
+  size = "medium",
+  variant = "outline",
   width,
   maxWidth,
   placeholder,
@@ -1070,91 +985,75 @@ function Select({
   onChange,
   optionListMaxHeight
 }) {
-  const [isOptionListOpen, setIsOptionListOpen] = useState(false);
-  const targetRef = useRef(null);
+  const [isOptionListOpen, setIsOptionListOpen] = (0, import_react17.useState)(false);
+  const targetRef = (0, import_react17.useRef)(null);
   useOutsideClick(targetRef, () => setIsOptionListOpen(false));
-  const handleClickToggle = () => setIsOptionListOpen(prev => !prev);
-  const wrapperClasses = clsx$1('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 = clsx$1('flex size-full items-center rounded', buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, {
-    [buttonColors[variant].selected]: isOptionSelected && !isDisabled && selectedOption,
-    [buttonColors[variant].base]: !(isOptionSelected && !isDisabled && selectedOption),
-    'px-2': size === 'x-small' || size === 'small',
-    'px-4': size === 'medium' || size === 'large',
-    'pointer-events-none': isDisabled
-  });
-  const labelClasses = clsx$1('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__*/jsx(SelectContext.Provider, {
-    value: {
-      size,
-      variant,
-      placeholder,
-      setIsOptionListOpen,
-      selectedOption,
-      onChange
-    },
-    children: /*#__PURE__*/jsxs("div", {
-      className: wrapperClasses,
-      style: {
-        width,
-        maxWidth
+  const handleClickToggle = () => setIsOptionListOpen((prev) => !prev);
+  const wrapperClasses = (0, import_clsx18.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)(
+    "flex size-full items-center rounded",
+    import_component_theme12.buttonColors[variant].hover,
+    import_component_theme12.buttonColors[variant].active,
+    import_component_theme12.buttonColors[variant].disabled,
+    import_component_theme12.focusVisible.normal,
+    {
+      [import_component_theme12.buttonColors[variant].selected]: isOptionSelected && !isDisabled && selectedOption,
+      [import_component_theme12.buttonColors[variant].base]: !(isOptionSelected && !isDisabled && selectedOption),
+      "px-2": size === "x-small" || size === "small",
+      "px-4": size === "medium" || size === "large",
+      "pointer-events-none": isDisabled
+    }
+  );
+  const labelClasses = (0, import_clsx18.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)(
+    SelectContext.Provider,
+    {
+      value: {
+        size,
+        variant,
+        placeholder,
+        setIsOptionListOpen,
+        selectedOption,
+        onChange
       },
-      ref: targetRef,
-      children: [/*#__PURE__*/jsxs("button", {
-        className: buttonClasses,
-        type: "button",
-        onClick: handleClickToggle,
-        disabled: isDisabled,
-        children: [selectedOption != null && selectedOption.icon ? /*#__PURE__*/jsx("div", {
-          className: "mr-1 flex",
-          children: /*#__PURE__*/jsx(Icon, {
-            name: selectedOption.icon,
-            size: size === 'large' ? 'medium' : 'small'
-          })
-        }) : placeholder != null && placeholderIcon && /*#__PURE__*/jsx("div", {
-          className: "mr-1 flex",
-          children: /*#__PURE__*/jsx(Icon, {
-            name: placeholderIcon,
-            size: size === 'large' ? 'medium' : 'small'
-          })
-        }), /*#__PURE__*/jsx("div", {
-          className: labelClasses,
-          children: /*#__PURE__*/jsx("div", {
-            className: "truncate",
-            children: selectedOption ? selectedOption.label : placeholder != null && placeholder
-          })
-        }), /*#__PURE__*/jsx("div", {
-          className: "ml-auto flex items-center",
-          children: /*#__PURE__*/jsx(Icon, {
-            name: isOptionListOpen ? 'angle-small-up' : 'angle-small-down',
-            size: size === 'large' ? 'medium' : 'small'
-          })
-        })]
-      }), isOptionListOpen && !isDisabled && /*#__PURE__*/jsx(SelectList$1, {
-        maxHeight: optionListMaxHeight,
-        children: children
-      })]
-    })
-  });
+      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 })
+      ] })
+    }
+  );
 }
-Select.Option = SelectItem$1;
+Select.Option = SelectItem;
 
+// src/pagination-select/pagination-select.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function PaginationSelect({
   totalSize,
   currentPage,
   sizePerPage,
-  countLabel = '件',
-  pageLabel = 'ページ',
+  countLabel = "\u4EF6",
+  pageLabel = "\u30DA\u30FC\u30B8",
   optionListMaxHeight = 190,
   onClickPrevButton,
   onClickNextButton,
@@ -1171,239 +1070,224 @@ function PaginationSelect({
   });
   const minCount = totalSize ? (currentPage - 1) * sizePerPage + 1 : 0;
   const maxCount = currentPage * sizePerPage > totalSize ? totalSize : currentPage * sizePerPage;
-  return /*#__PURE__*/jsxs("nav", {
-    "aria-label": "pagination",
-    className: "flex items-center gap-x-1",
-    children: [/*#__PURE__*/jsxs("div", {
-      className: "flex items-center gap-x-2",
-      children: [/*#__PURE__*/jsxs("div", {
-        className: "typography-label14regular text-text01",
-        children: [minCount > 0 && `${minCount} - `, maxCount, countLabel]
-      }), /*#__PURE__*/jsx(Select, {
-        size: "medium",
-        variant: "outline",
-        selectedOption: optionsList.find(option => option.value === currentPage.toString()),
-        optionListMaxHeight: optionListMaxHeight,
-        onChange: option => option && onChange(Number(option.value)),
-        isDisabled: pageMax === 0,
-        children: optionsList.map(option => /*#__PURE__*/jsx(Select.Option, {
-          option: option
-        }, option.id))
-      }), /*#__PURE__*/jsxs("div", {
-        className: "typography-label14regular text-text03",
-        children: ["/ ", pageMax, pageLabel]
-      })]
-    }), /*#__PURE__*/jsxs("div", {
-      className: "flex items-center",
-      children: [/*#__PURE__*/jsx(IconButton, {
-        variant: "text",
-        icon: "angle-left",
-        size: "small",
-        isDisabled: currentPage === 1,
-        onClick: onClickPrevButton
-      }), /*#__PURE__*/jsx(IconButton, {
-        variant: "text",
-        icon: "angle-right",
-        size: "small",
-        isDisabled: currentPage === pageMax || pageMax === 0,
-        onClick: onClickNextButton
-      })]
-    })]
-  });
+  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: [
+        minCount > 0 && `${minCount} - `,
+        maxCount,
+        countLabel
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        Select,
+        {
+          size: "medium",
+          variant: "outline",
+          selectedOption: optionsList.find((option) => option.value === currentPage.toString()),
+          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))
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "typography-label14regular text-text03", children: [
+        "/ ",
+        pageMax,
+        pageLabel
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        IconButton,
+        {
+          variant: "text",
+          icon: "angle-left",
+          size: "small",
+          isDisabled: currentPage === 1,
+          onClick: onClickPrevButton
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        IconButton,
+        {
+          variant: "text",
+          icon: "angle-right",
+          size: "small",
+          isDisabled: currentPage === pageMax || pageMax === 0,
+          onClick: onClickNextButton
+        }
+      )
+    ] })
+  ] });
 }
 
-function Radio({
-  name,
-  value,
-  id,
-  label,
-  isChecked = false,
-  isDisabled = false,
-  onChange
-}) {
-  const [isMouseOver, setIsMouseOver] = useState(false);
-  const handleMouseOverInput = useCallback(() => {
+// src/radio/radio.tsx
+var import_component_theme13 = require("@zenkigen-inc/component-theme");
+var import_clsx19 = __toESM(require("clsx"));
+var import_react18 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function Radio({ name, value, id, label, isChecked = false, isDisabled = false, onChange }) {
+  const [isMouseOver, setIsMouseOver] = (0, import_react18.useState)(false);
+  const handleMouseOverInput = (0, import_react18.useCallback)(() => {
     setIsMouseOver(true);
   }, []);
-  const handleMouseOutInput = useCallback(() => {
+  const handleMouseOutInput = (0, import_react18.useCallback)(() => {
     setIsMouseOver(false);
   }, []);
-  const handleChange = useCallback(e => !isDisabled && (onChange == null ? void 0 : onChange(e)), [isDisabled, onChange]);
-  const inputClasses = clsx$1('peer absolute z-[1] size-6 opacity-0', {
-    'cursor-not-allowed': isDisabled,
-    'cursor-pointer': !isDisabled
-  });
-  const boxClasses = clsx$1('inline-flex size-5 items-center justify-center rounded-full border border-solid bg-white', focusVisible.normalPeer, {
-    'border-disabled01 hover:border-disabled01': isDisabled && !isMouseOver,
-    'border-hoverUiBorder': !isDisabled && isMouseOver,
-    'border-uiBorder03': !isDisabled,
-    'cursor-not-allowed': isDisabled,
-    'cursor-pointer': !isDisabled
-  });
-  const afterClasses = clsx$1('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 = clsx$1('inline-block size-3 rounded-full', {
-    'bg-hoverUi': !isDisabled && !isChecked && isMouseOver
-  });
-  const labelClasses = clsx$1('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__*/jsxs("div", {
-    className: "flex items-center",
-    children: [/*#__PURE__*/jsxs("div", {
-      className: "flex size-6 items-center justify-center",
-      children: [/*#__PURE__*/jsx("input", {
-        type: "checkbox",
-        value: value,
-        name: name,
-        id: id,
-        checked: isChecked,
-        disabled: isDisabled,
-        onChange: handleChange,
-        onMouseOver: handleMouseOverInput,
-        onMouseLeave: handleMouseOutInput,
-        className: inputClasses
-      }), /*#__PURE__*/jsx("div", {
-        className: boxClasses,
-        children: /*#__PURE__*/jsxs("div", {
-          className: "relative flex size-5 flex-[0_0_auto] items-center justify-center",
-          children: [/*#__PURE__*/jsx("span", {
-            className: afterClasses
-          }), /*#__PURE__*/jsx("span", {
-            className: hoverIndicatorClasses
-          })]
-        })
-      })]
-    }), /*#__PURE__*/jsx("label", {
-      htmlFor: id,
-      className: labelClasses,
-      children: label
-    })]
-  });
+  const handleChange = (0, import_react18.useCallback)(
+    (e) => !isDisabled && onChange?.(e),
+    [isDisabled, onChange]
+  );
+  const inputClasses = (0, import_clsx19.default)("peer absolute z-[1] size-6 opacity-0", {
+    "cursor-not-allowed": isDisabled,
+    "cursor-pointer": !isDisabled
+  });
+  const boxClasses = (0, import_clsx19.default)(
+    "inline-flex size-5 items-center justify-center rounded-full border border-solid bg-white",
+    import_component_theme13.focusVisible.normalPeer,
+    {
+      "border-disabled01 hover:border-disabled01": isDisabled && !isMouseOver,
+      "border-hoverUiBorder": !isDisabled && isMouseOver,
+      "border-uiBorder03": !isDisabled,
+      "cursor-not-allowed": isDisabled,
+      "cursor-pointer": !isDisabled
+    }
+  );
+  const afterClasses = (0, import_clsx19.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", {
+    "bg-hoverUi": !isDisabled && !isChecked && isMouseOver
+  });
+  const labelClasses = (0, import_clsx19.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)(
+        "input",
+        {
+          type: "checkbox",
+          value,
+          name,
+          id,
+          checked: isChecked,
+          disabled: isDisabled,
+          onChange: handleChange,
+          onMouseOver: handleMouseOverInput,
+          onMouseLeave: handleMouseOutInput,
+          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_runtime27.jsx)("label", { htmlFor: id, className: labelClasses, children: label })
+  ] });
 }
 
-const _excluded$3 = ["width", "size"];
-const Search = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-      width = '100%',
-      size = 'medium'
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-  const classes = 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 = clsx('mx-2 h-full flex-1 text-text01 outline-0 placeholder:text-textPlaceholder', {
-    ['typography-label14regular']: size === 'medium',
-    ['typography-label16regular']: size === 'large'
-  });
-  return /*#__PURE__*/jsx("div", {
-    className: "relative",
-    ref: ref,
-    children: /*#__PURE__*/jsx("form", {
-      onSubmit: props.onSubmit,
-      children: /*#__PURE__*/jsxs("div", {
-        className: classes,
-        style: {
-          width
-        },
-        children: [/*#__PURE__*/jsx(Icon, {
-          name: "search",
-          color: "icon01",
-          size: "medium"
-        }), /*#__PURE__*/jsx("input", {
-          type: "text",
-          size: 1,
-          value: props.value,
-          className: inputClasses,
-          placeholder: props.placeholder,
-          onChange: props.onChange
-        }), props.onClickClearButton && props.value && props.value.length !== 0 && /*#__PURE__*/jsx(IconButton, {
-          variant: "text",
-          icon: "close",
-          size: size === 'medium' ? 'small' : 'medium',
-          isNoPadding: true,
-          onClick: props.onClickClearButton
-        })]
-      })
-    })
-  });
+// src/search/search.tsx
+var import_clsx20 = require("clsx");
+var import_react19 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var Search = (0, import_react19.forwardRef)(({ width = "100%", size = "medium", ...props }, ref) => {
+  const classes = (0, import_clsx20.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", {
+    ["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)(
+      "input",
+      {
+        type: "text",
+        size: 1,
+        value: props.value,
+        className: inputClasses,
+        placeholder: props.placeholder,
+        onChange: props.onChange
+      }
+    ),
+    props.onClickClearButton && props.value && props.value.length !== 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      IconButton,
+      {
+        variant: "text",
+        icon: "close",
+        size: size === "medium" ? "small" : "medium",
+        isNoPadding: true,
+        onClick: props.onClickClearButton
+      }
+    )
+  ] }) }) });
 });
-Search.displayName = 'Search';
+Search.displayName = "Search";
 
-function SelectItem({
-  children,
-  isSortKey,
-  onClickItem
-}) {
-  const itemClasses = clsx$1('typography-label14regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02', focusVisible.inset, {
-    'bg-selectedUi fill-interactive01 text-interactive01': isSortKey,
-    'bg-uiBackground01 fill-icon01 text-interactive02': !isSortKey
-  });
-  return /*#__PURE__*/jsx("li", {
-    className: "flex w-full items-center",
-    onClick: onClickItem,
-    children: /*#__PURE__*/jsxs("button", {
-      className: itemClasses,
-      type: "button",
-      children: [/*#__PURE__*/jsx("span", {
-        className: "ml-1 mr-6",
-        children: children
-      }), isSortKey && /*#__PURE__*/jsx("div", {
-        className: "ml-auto flex items-center",
-        children: /*#__PURE__*/jsx(Icon, {
-          name: "check",
-          size: "small"
-        })
-      })]
-    })
-  });
+// src/select-sort/select-sort.tsx
+var import_component_theme16 = require("@zenkigen-inc/component-theme");
+var import_clsx23 = __toESM(require("clsx"));
+var import_react20 = require("react");
+
+// src/select-sort/select-list.tsx
+var import_component_theme15 = require("@zenkigen-inc/component-theme");
+var import_clsx22 = __toESM(require("clsx"));
+
+// src/select-sort/select-item.tsx
+var import_component_theme14 = require("@zenkigen-inc/component-theme");
+var import_clsx21 = __toESM(require("clsx"));
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function SelectItem2({ children, isSortKey, onClickItem }) {
+  const itemClasses = (0, import_clsx21.default)(
+    "typography-label14regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02",
+    import_component_theme14.focusVisible.inset,
+    {
+      "bg-selectedUi fill-interactive01 text-interactive01": isSortKey,
+      "bg-uiBackground01 fill-icon01 text-interactive02": !isSortKey
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("li", { className: "flex w-full items-center", onClick: onClickItem, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("button", { className: itemClasses, type: "button", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "ml-1 mr-6", children }),
+    isSortKey && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { name: "check", size: "small" }) })
+  ] }) });
 }
 
-function SelectList({
-  size,
-  variant,
-  sortOrder,
-  onClickItem,
-  onClickDeselect
-}) {
-  const listClasses = clsx$1('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 = clsx$1('typography-label14regular flex h-8 w-full items-center px-3 text-interactive02 hover:bg-hover02 active:bg-active02', focusVisible.inset);
-  return /*#__PURE__*/jsxs("ul", {
-    className: listClasses,
-    children: [/*#__PURE__*/jsx(SelectItem, {
-      isSortKey: sortOrder === 'ascend',
-      onClickItem: () => onClickItem('ascend'),
-      children: "\u6607\u9806\u3067\u4E26\u3073\u66FF\u3048"
-    }), /*#__PURE__*/jsx(SelectItem, {
-      isSortKey: sortOrder === 'descend',
-      onClickItem: () => onClickItem('descend'),
-      children: "\u964D\u9806\u3067\u4E26\u3073\u66FF\u3048"
-    }), sortOrder !== null && onClickDeselect && /*#__PURE__*/jsx("li", {
-      children: /*#__PURE__*/jsx("button", {
-        className: deselectButtonClasses,
-        type: "button",
-        onClick: onClickDeselect,
-        children: "\u9078\u629E\u89E3\u9664"
-      })
-    })]
-  });
+// src/select-sort/select-list.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+function SelectList2({ size, variant, sortOrder, onClickItem, onClickDeselect }) {
+  const listClasses = (0, import_clsx22.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_clsx22.default)(
+    "typography-label14regular flex h-8 w-full items-center px-3 text-interactive02 hover:bg-hover02 active:bg-active02",
+    import_component_theme15.focusVisible.inset
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("ul", { className: listClasses, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SelectItem2, { isSortKey: sortOrder === "ascend", onClickItem: () => onClickItem("ascend"), children: "\u6607\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SelectItem2, { isSortKey: sortOrder === "descend", onClickItem: () => onClickItem("descend"), children: "\u964D\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
+    sortOrder !== null && onClickDeselect && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { className: deselectButtonClasses, type: "button", onClick: onClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
+  ] });
 }
 
+// src/select-sort/select-sort.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function SelectSort({
-  size = 'medium',
-  variant = 'outline',
+  size = "medium",
+  variant = "outline",
   width,
   label,
   sortOrder,
@@ -1412,127 +1296,133 @@ function SelectSort({
   onChange,
   onClickDeselect
 }) {
-  const [isOptionListOpen, setIsOptionListOpen] = useState(false);
-  const targetRef = useRef(null);
+  const [isOptionListOpen, setIsOptionListOpen] = (0, import_react20.useState)(false);
+  const targetRef = (0, import_react20.useRef)(null);
   useOutsideClick(targetRef, () => setIsOptionListOpen(false));
-  const handleClickToggle = () => setIsOptionListOpen(prev => !prev);
-  const handleClickItem = useCallback(value => {
-    onChange == null || onChange(value);
-    setIsOptionListOpen(false);
-  }, [onChange]);
-  const wrapperClasses = clsx$1('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 = clsx$1('flex size-full items-center rounded', buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, {
-    [buttonColors[variant].selected]: isSortKey,
-    [buttonColors[variant].base]: !isSortKey,
-    'px-2': size === 'x-small' || size === 'small',
-    'px-4': size === 'medium' || size === 'large',
-    'pointer-events-none': isDisabled
-  });
-  const labelClasses = clsx$1('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__*/jsxs("div", {
-    className: wrapperClasses,
-    style: {
-      width
+  const handleClickToggle = () => setIsOptionListOpen((prev) => !prev);
+  const handleClickItem = (0, import_react20.useCallback)(
+    (value) => {
+      onChange?.(value);
+      setIsOptionListOpen(false);
     },
-    ref: targetRef,
-    children: [/*#__PURE__*/jsxs("button", {
-      className: buttonClasses,
-      type: "button",
-      onClick: handleClickToggle,
-      disabled: isDisabled,
-      children: [/*#__PURE__*/jsx("div", {
-        className: labelClasses,
-        children: label
-      }), /*#__PURE__*/jsx("div", {
-        className: "ml-auto flex items-center",
-        children: isSortKey ? /*#__PURE__*/jsx(Icon, {
-          name: sortOrder === 'ascend' ? 'arrow-up' : 'arrow-down',
-          size: size === 'large' ? 'medium' : 'small'
-        }) : /*#__PURE__*/jsx(Icon, {
-          name: isOptionListOpen ? 'angle-small-up' : 'angle-small-down',
-          size: size === 'large' ? 'medium' : 'small'
-        })
-      })]
-    }), isOptionListOpen && !isDisabled && /*#__PURE__*/jsx(SelectList, {
-      size: size,
-      variant: variant,
-      sortOrder: sortOrder,
-      onClickItem: handleClickItem,
-      onClickDeselect: onClickDeselect
-    })]
-  });
+    [onChange]
+  );
+  const wrapperClasses = (0, import_clsx23.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_clsx23.default)(
+    "flex size-full items-center rounded",
+    import_component_theme16.buttonColors[variant].hover,
+    import_component_theme16.buttonColors[variant].active,
+    import_component_theme16.buttonColors[variant].disabled,
+    import_component_theme16.focusVisible.normal,
+    {
+      [import_component_theme16.buttonColors[variant].selected]: isSortKey,
+      [import_component_theme16.buttonColors[variant].base]: !isSortKey,
+      "px-2": size === "x-small" || size === "small",
+      "px-4": size === "medium" || size === "large",
+      "pointer-events-none": isDisabled
+    }
+  );
+  const labelClasses = (0, import_clsx23.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_runtime31.jsxs)("div", { className: wrapperClasses, style: { width }, ref: targetRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("button", { className: buttonClasses, type: "button", onClick: handleClickToggle, disabled: isDisabled, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: labelClasses, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "ml-auto flex items-center", children: isSortKey ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        Icon,
+        {
+          name: sortOrder === "ascend" ? "arrow-up" : "arrow-down",
+          size: size === "large" ? "medium" : "small"
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        Icon,
+        {
+          name: isOptionListOpen ? "angle-small-up" : "angle-small-down",
+          size: size === "large" ? "medium" : "small"
+        }
+      ) })
+    ] }),
+    isOptionListOpen && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      SelectList2,
+      {
+        size,
+        variant,
+        sortOrder,
+        onClickItem: handleClickItem,
+        onClickDeselect
+      }
+    )
+  ] });
 }
 
-const _excluded$2 = ["isSelected"];
-const TabItem = _ref => {
-  let {
-      isSelected = false
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-  const classes = clsx('relative z-0 flex 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,
-    'text-interactive02 hover:before:bg-uiBorder04': !isSelected,
-    'typography-label14bold': isSelected,
-    'before:bg-interactive01 hover:before:bg-interactive01 pointer-events-none': isSelected
-  });
-  return /*#__PURE__*/jsx("button", {
-    type: "button",
-    role: "tab",
-    "aria-selected": isSelected,
-    className: classes,
-    disabled: props.isDisabled,
-    onClick: () => props.onClick(props.id),
-    children: props.children
-  });
+// src/tab/tab-item.tsx
+var import_clsx24 = require("clsx");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var TabItem = ({ isSelected = false, ...props }) => {
+  const classes = (0, import_clsx24.clsx)(
+    "relative z-0 flex 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,
+      "text-interactive02 hover:before:bg-uiBorder04": !isSelected,
+      "typography-label14bold": isSelected,
+      "before:bg-interactive01 hover:before:bg-interactive01 pointer-events-none": isSelected
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      "aria-selected": isSelected,
+      className: classes,
+      disabled: props.isDisabled,
+      onClick: () => props.onClick(props.id),
+      children: props.children
+    }
+  );
 };
 
-function Tab({
-  children
-}) {
-  return /*#__PURE__*/jsx("div", {
-    role: "tablist",
-    className: "relative flex gap-4 px-6 before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-uiBorder01",
-    children: children
-  });
+// src/tab/tab.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function Tab({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    "div",
+    {
+      role: "tablist",
+      className: "relative flex gap-4 px-6 before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-uiBorder01",
+      children
+    }
+  );
 }
 Tab.Item = TabItem;
 
-function TableCell({
-  children,
-  className,
-  isHeader = false
-}) {
-  const classes = clsx$1('border-b border-uiBorder01', {
-    'sticky top-0 z-10 bg-white': isHeader
-  }, className);
-  return /*#__PURE__*/jsx("div", {
-    className: classes,
-    children: children
-  });
+// src/table/table-cell.tsx
+var import_clsx25 = __toESM(require("clsx"));
+var import_jsx_runtime34 = require("react/jsx-runtime");
+function TableCell({ children, className, isHeader = false }) {
+  const classes = (0, import_clsx25.default)("border-b border-uiBorder01", { "sticky top-0 z-10 bg-white": isHeader }, className);
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: classes, children });
 }
 
-function TableRow({
-  children,
-  isHoverBackgroundVisible = false
-}) {
-  const rowClasses = clsx$1('contents', isHoverBackgroundVisible && '[&:hover>div]:bg-hoverUi02');
-  return /*#__PURE__*/jsx("div", {
-    className: rowClasses,
-    children: children
-  });
+// src/table/table-row.tsx
+var import_clsx26 = __toESM(require("clsx"));
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function TableRow({ children, isHoverBackgroundVisible = false }) {
+  const rowClasses = (0, import_clsx26.default)("contents", isHoverBackgroundVisible && "[&:hover>div]:bg-hoverUi02");
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: rowClasses, children });
 }
 
+// src/table/table.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function Table({
   width,
   templateRows,
@@ -1541,197 +1431,196 @@ function Table({
   autoRows,
   children
 }) {
-  return /*#__PURE__*/jsx("div", {
-    className: "grid",
-    style: {
-      width,
-      gridTemplateRows: templateRows,
-      gridTemplateColumns: templateColumns,
-      gridAutoColumns: autoColumns,
-      gridAutoRows: autoRows
-    },
-    children: children
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    "div",
+    {
+      className: "grid",
+      style: {
+        width,
+        gridTemplateRows: templateRows,
+        gridTemplateColumns: templateColumns,
+        gridAutoColumns: autoColumns,
+        gridAutoRows: autoRows
+      },
+      children
+    }
+  );
 }
 Table.Row = TableRow;
 Table.Cell = TableCell;
 
-const DeleteIcon = ({
-  color,
-  variant,
-  onClick
-}) => {
-  const deleteButtonClasses = clsx$1('group ml-2 size-[14px] rounded-full p-0.5 hover:cursor-pointer hover:bg-iconOnColor focus-visible:bg-iconOnColor', focusVisible.normal);
-  const deletePathClasses = clsx$1({
-    'fill-interactive02': color === 'gray' || variant === 'light',
-    'group-hover:fill-interactive02 group-focus-visible:fill-interactive02 fill-iconOnColor': color !== 'gray'
-  });
-  return /*#__PURE__*/jsx("button", {
-    type: "button",
-    className: deleteButtonClasses,
-    onClick: onClick,
-    children: /*#__PURE__*/jsx("svg", {
-      viewBox: "0 0 24 24",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: /*#__PURE__*/jsx("path", {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M19.7745 4.21818C19.384 3.82765 18.7508 3.82765 18.3603 4.21818L11.9963 10.5821L5.6324 4.21818C5.24187 3.82765 4.60871 3.82765 4.21818 4.21818C3.82766 4.6087 3.82766 5.24187 4.21818 5.63239L10.5821 11.9964L4.21818 18.3603C3.82766 18.7508 3.82766 19.384 4.21818 19.7745C4.60871 20.1651 5.24187 20.165 5.6324 19.7745L11.9963 13.4106L18.3603 19.7745C18.7508 20.165 19.384 20.1651 19.7745 19.7745C20.165 19.384 20.165 18.7508 19.7745 18.3603L13.4106 11.9964L19.7745 5.63239C20.165 5.24187 20.165 4.6087 19.7745 4.21818Z",
-        className: deletePathClasses
-      })
-    })
-  });
+// src/tag/tag.tsx
+var import_component_theme18 = require("@zenkigen-inc/component-theme");
+var import_clsx28 = __toESM(require("clsx"));
+
+// src/tag/delete-icon.tsx
+var import_component_theme17 = require("@zenkigen-inc/component-theme");
+var import_clsx27 = __toESM(require("clsx"));
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var DeleteIcon = ({ color, variant, onClick }) => {
+  const deleteButtonClasses = (0, import_clsx27.default)(
+    "group ml-2 size-[14px] rounded-full p-0.5 hover:cursor-pointer hover:bg-iconOnColor focus-visible:bg-iconOnColor",
+    import_component_theme17.focusVisible.normal
+  );
+  const deletePathClasses = (0, import_clsx27.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_runtime37.jsx)("button", { type: "button", className: deleteButtonClasses, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M19.7745 4.21818C19.384 3.82765 18.7508 3.82765 18.3603 4.21818L11.9963 10.5821L5.6324 4.21818C5.24187 3.82765 4.60871 3.82765 4.21818 4.21818C3.82766 4.6087 3.82766 5.24187 4.21818 5.63239L10.5821 11.9964L4.21818 18.3603C3.82766 18.7508 3.82766 19.384 4.21818 19.7745C4.60871 20.1651 5.24187 20.165 5.6324 19.7745L11.9963 13.4106L18.3603 19.7745C18.7508 20.165 19.384 20.1651 19.7745 19.7745C20.165 19.384 20.165 18.7508 19.7745 18.3603L13.4106 11.9964L19.7745 5.63239C20.165 5.24187 20.165 4.6087 19.7745 4.21818Z",
+      className: deletePathClasses
+    }
+  ) }) });
 };
 
-function Tag({
-  id,
-  children,
-  color,
-  variant = 'normal',
-  size = 'medium',
-  isEditable,
-  onDelete
-}) {
-  const wrapperClasses = clsx$1('flex', 'items-center', 'justify-center', {
-    [tagColors[color]]: variant === 'normal',
-    [tagLightColors[color]]: variant === 'light',
-    'h-[14px] typography-label11regular': !isEditable && size === 'x-small',
-    'h-4 typography-label12regular': !isEditable && size === 'small',
-    'h-[18px] typography-label14regular': !isEditable && size === 'medium',
-    'h-[22px] typography-label14regular': isEditable && size === 'medium',
-    'rounded-full': isEditable,
+// src/tag/tag.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
+function Tag({ id, children, color, variant = "normal", size = "medium", isEditable, onDelete }) {
+  const wrapperClasses = (0, import_clsx28.default)("flex", "items-center", "justify-center", {
+    [import_component_theme18.tagColors[color]]: variant === "normal",
+    [import_component_theme18.tagLightColors[color]]: variant === "light",
+    "h-[14px] typography-label11regular": !isEditable && size === "x-small",
+    "h-4 typography-label12regular": !isEditable && size === "small",
+    "h-[18px] typography-label14regular": !isEditable && size === "medium",
+    "h-[22px] typography-label14regular": isEditable && size === "medium",
+    "rounded-full": isEditable,
     rounded: !isEditable,
-    'py-0.5 px-1': !isEditable,
-    'py-1 px-2': isEditable
-  });
-  return /*#__PURE__*/jsxs("div", {
-    className: wrapperClasses,
-    children: [children, isEditable ? /*#__PURE__*/jsx(DeleteIcon, {
-      onClick: () => onDelete(id),
-      color: color,
-      variant: variant
-    }) : null]
+    "py-0.5 px-1": !isEditable,
+    "py-1 px-2": isEditable
   });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: wrapperClasses, children: [
+    children,
+    isEditable ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DeleteIcon, { onClick: () => onDelete(id), color, variant }) : null
+  ] });
 }
 
-const _excluded$1 = ["size", "isResizable", "isError", "disabled"];
-const TextArea = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-      size = 'medium',
-      isResizable = false,
-      isError = false,
-      disabled = false
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  const classes = clsx('w-full rounded border outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder', {
-    'border-supportError': isError && !disabled,
-    'hover:border-hoverInput': !disabled && !isError,
-    'border-uiBorder02 hover:focus-within:border-activeInput focus-within:border-activeInput text-text01': !isError,
-    'bg-disabled02 border-disabled01': disabled,
-    ['typography-body14regular px-2 pt-1.5 pb-2']: size === 'medium',
-    ['text-4 leading-normal px-3.5 py-2.5']: size === 'large',
-    'text-supportError': isError,
-    'resize-none': !isResizable
-  });
-  return /*#__PURE__*/jsx("div", {
-    className: "flex",
-    children: /*#__PURE__*/jsx("textarea", _extends({
-      ref: ref,
-      className: classes
-    }, props, {
-      disabled: disabled,
-      style: {
-        height: props.height
+// src/text-area/text-area.tsx
+var import_clsx29 = require("clsx");
+var import_react21 = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var TextArea = (0, import_react21.forwardRef)(
+  ({
+    size = "medium",
+    isResizable = false,
+    autoHeight = false,
+    maxHeight,
+    isError = false,
+    disabled = false,
+    height,
+    ...props
+  }, ref) => {
+    const classes = (0, import_clsx29.clsx)(
+      "w-full rounded border outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder",
+      {
+        "border-supportError": isError && !disabled,
+        "hover:border-hoverInput": !disabled && !isError,
+        "border-uiBorder02 hover:focus-within:border-activeInput focus-within:border-activeInput text-text01": !isError,
+        "bg-disabled02 border-disabled01": disabled,
+        "typography-body14regular px-2 pt-1.5 pb-2": size === "medium",
+        "text-4 leading-normal px-3.5 py-2.5": size === "large",
+        "field-sizing-content": autoHeight,
+        "text-supportError": isError,
+        "resize-none": !isResizable
       }
-    }))
-  });
-});
-TextArea.displayName = 'TextArea';
-
-const _excluded = ["size", "isError", "disabled", "onClickClearButton"];
-const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-      size = 'medium',
-      isError = false,
-      disabled = false,
-      onClickClearButton
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const isShowClearButton = !!onClickClearButton && props.value.length !== 0 && !disabled;
-  const inputWrapClasses = 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 = 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__*/jsxs("div", {
-    className: inputWrapClasses,
-    children: [/*#__PURE__*/jsx("input", _extends({
-      ref: ref,
-      size: 1,
-      className: inputClasses,
-      disabled: disabled,
-      onChange: props.onChange
-    }, props)), isShowClearButton && /*#__PURE__*/jsx(IconButton, {
-      variant: "text",
-      icon: "close",
-      size: "small",
-      onClick: onClickClearButton
-    })]
-  });
-});
-TextInput.displayName = 'TextInput';
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      "textarea",
+      {
+        ref,
+        className: classes,
+        ...props,
+        style: {
+          ...{ maxHeight },
+          // 自動高さではない場合で、height 指定がある場合は設定する
+          ...!autoHeight && height !== null ? { height } : {},
+          // 自動高さの場合で、height が指定されている場合は、height を minHeight に設定する
+          ...autoHeight && height !== null ? { minHeight: height } : {}
+        }
+      }
+    ) });
+  }
+);
+TextArea.displayName = "TextArea";
+
+// src/text-input/text-input.tsx
+var import_clsx30 = require("clsx");
+var import_react22 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var TextInput = (0, import_react22.forwardRef)(
+  ({ size = "medium", isError = false, disabled = false, onClickClearButton, ...props }, ref) => {
+    const isShowClearButton = !!onClickClearButton && props.value.length !== 0 && !disabled;
+    const inputWrapClasses = (0, import_clsx30.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_clsx30.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_runtime40.jsxs)("div", { className: inputWrapClasses, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("input", { ref, size: 1, className: inputClasses, disabled, onChange: props.onChange, ...props }),
+      isShowClearButton && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(IconButton, { variant: "text", icon: "close", size: "small", onClick: onClickClearButton })
+    ] });
+  }
+);
+TextInput.displayName = "TextInput";
 
-const CLOSE_TIME_MSEC = 5000;
+// src/toast/toast.tsx
+var import_clsx31 = __toESM(require("clsx"));
+var import_react23 = require("react");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var CLOSE_TIME_MSEC = 5e3;
 function Toast({
-  state = 'information',
-  width = 'auto',
+  state = "information",
+  width = "auto",
   isAutoClose = false,
   isAnimation = false,
   children,
   onClickClose
 }) {
-  const [isRemoving, setIsRemoving] = useState(false);
-  const handleClose = useCallback(() => {
+  const [isRemoving, setIsRemoving] = (0, import_react23.useState)(false);
+  const handleClose = (0, import_react23.useCallback)(() => {
     if (isAnimation) {
       setIsRemoving(true);
     } else {
       onClickClose();
     }
   }, [isAnimation, onClickClose]);
-  const handleAnimationEnd = e => window.getComputedStyle(e.currentTarget).opacity === '0' && onClickClose();
-  const wrapperClasses = clsx$1('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 handleAnimationEnd = (e) => window.getComputedStyle(e.currentTarget).opacity === "0" && onClickClose();
+  const wrapperClasses = (0, import_clsx31.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 = clsx$1('flex items-center', {
-    'fill-supportSuccess': state === 'success',
-    'fill-supportError': state === 'error',
-    'fill-supportWarning': state === 'warning',
-    'fill-supportInfo': state === 'information'
+  const iconClasses = (0, import_clsx31.default)("flex items-center", {
+    "fill-supportSuccess": state === "success",
+    "fill-supportError": state === "error",
+    "fill-supportWarning": state === "warning",
+    "fill-supportInfo": state === "information"
   });
-  const textClasses = clsx$1('typography-body13regular flex-1 pt-[3px]', {
-    'text-supportError': state === 'error',
-    'text-text01': state === 'success' || state === 'warning' || state === 'information'
+  const textClasses = (0, import_clsx31.default)("typography-body13regular flex-1 pt-[3px]", {
+    "text-supportError": state === "error",
+    "text-text01": state === "success" || state === "warning" || state === "information"
   });
   const iconName = {
-    success: 'success-filled',
-    error: 'attention',
-    warning: 'warning',
-    information: 'information-filled'
+    success: "success-filled",
+    error: "attention",
+    warning: "warning",
+    information: "information-filled"
   };
-  useEffect(() => {
+  (0, import_react23.useEffect)(() => {
     const timer = window.setTimeout(() => {
       if (isAutoClose) {
         setIsRemoving(true);
@@ -1739,344 +1628,356 @@ function Toast({
     }, CLOSE_TIME_MSEC);
     return () => window.clearTimeout(timer);
   }, [isAutoClose]);
-  return /*#__PURE__*/jsxs("div", {
-    className: wrapperClasses,
-    style: {
-      width
-    },
-    onAnimationEnd: handleAnimationEnd,
-    children: [/*#__PURE__*/jsx("div", {
-      className: iconClasses,
-      children: /*#__PURE__*/jsx(Icon, {
-        name: iconName[state]
-      })
-    }), /*#__PURE__*/jsx("p", {
-      className: textClasses,
-      children: children
-    }), /*#__PURE__*/jsx(IconButton, {
-      icon: "close",
-      size: "medium",
-      variant: "text",
-      onClick: handleClose,
-      isNoPadding: true
-    })]
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: wrapperClasses, style: { width }, onAnimationEnd: handleAnimationEnd, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: iconClasses, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { name: iconName[state] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: textClasses, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(IconButton, { icon: "close", size: "medium", variant: "text", onClick: handleClose, isNoPadding: true })
+  ] });
 }
 
-const ToastContext = /*#__PURE__*/createContext({});
-const ToastProvider = ({
-  children
-}) => {
-  const [isClientRender, setIsClientRender] = useState(false);
-  const [toasts, setToasts] = useState([]);
-  const addToast = useCallback(({
-    message,
-    state
-  }) => {
-    setToasts(prev => [...prev, {
-      id: Math.trunc(Math.random() * 100000),
-      message,
-      state
-    }]);
+// src/toast/toast-provider.tsx
+var import_react24 = require("react");
+var import_react_dom3 = require("react-dom");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var ToastContext = (0, import_react24.createContext)({});
+var ToastProvider = ({ children }) => {
+  const [isClientRender, setIsClientRender] = (0, import_react24.useState)(false);
+  const [toasts, setToasts] = (0, import_react24.useState)([]);
+  const addToast = (0, import_react24.useCallback)(({ message, state }) => {
+    setToasts((prev) => [...prev, { id: Math.trunc(Math.random() * 1e5), message, state }]);
   }, []);
-  const removeToast = useCallback(id => {
-    setToasts(prev => prev.filter(snackbar => snackbar.id !== id));
+  const removeToast = (0, import_react24.useCallback)((id) => {
+    setToasts((prev) => prev.filter((snackbar) => snackbar.id !== id));
   }, []);
-  useEffect(() => {
+  (0, import_react24.useEffect)(() => {
     setIsClientRender(true);
   }, []);
-  return /*#__PURE__*/jsxs(ToastContext.Provider, {
-    value: {
-      addToast,
-      removeToast
-    },
-    children: [children, isClientRender && /*#__PURE__*/createPortal(/*#__PURE__*/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__*/jsx(Toast, {
-        state: state,
-        isAutoClose: true,
-        isAnimation: true,
-        onClickClose: () => removeToast(id),
-        width: 475,
-        children: message
-      }, id))
-    }), document.body)]
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(ToastContext.Provider, { value: { addToast, removeToast }, children: [
+    children,
+    isClientRender && (0, import_react_dom3.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime42.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_runtime42.jsx)(Toast, { state, isAutoClose: true, isAnimation: true, onClickClose: () => removeToast(id), width: 475, children: message }, id)) }),
+      document.body
+    )
+  ] });
 };
-const useToast = () => {
-  return useContext(ToastContext);
+var useToast = () => {
+  return (0, import_react24.useContext)(ToastContext);
 };
 
+// src/toggle/toggle.tsx
+var import_clsx32 = __toESM(require("clsx"));
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function Toggle({
   id,
-  size = 'medium',
+  size = "medium",
   isChecked,
   onChange,
   label,
-  labelPosition = 'right',
+  labelPosition = "right",
   isDisabled = false
 }) {
-  const baseClasses = clsx$1('relative flex items-center rounded-full', {
-    'bg-disabledOn': isDisabled && isChecked,
-    'bg-disabled01': isDisabled && !isChecked,
-    'bg-interactive01 peer-hover:bg-hover01': !isDisabled && isChecked,
-    'bg-interactive02 peer-hover:bg-hoverGray': !isDisabled && !isChecked,
-    'w-8 h-4 px-[3px]': size === 'small',
-    'w-12 h-6 px-1': size === 'medium' || size === 'large'
-  });
-  const inputClasses = clsx$1('peer absolute inset-0 z-[1] opacity-0', isDisabled ? 'cursor-not-allowed' : 'cursor-pointer');
-  const indicatorClasses = clsx$1('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 = clsx$1('break-all', {
-    'mr-2': labelPosition === 'left',
-    'ml-2': labelPosition === 'right',
-    'typography-label14regular': size === 'small' || size === 'medium',
-    'typography-label16regular': size === 'large',
-    'pointer-events-none cursor-not-allowed text-disabled01': isDisabled,
-    'cursor-pointer text-text01': !isDisabled
-  });
-  return /*#__PURE__*/jsxs("div", {
-    className: "relative flex flex-[0_0_auto] items-center",
-    children: [label != null && labelPosition === 'left' && /*#__PURE__*/jsx("label", {
-      htmlFor: id,
-      className: labelClasses,
-      children: label
-    }), /*#__PURE__*/jsx("input", {
-      className: inputClasses,
-      type: "checkbox",
-      name: id,
-      id: id,
-      checked: isChecked,
-      onChange: onChange,
-      disabled: isDisabled
-    }), /*#__PURE__*/jsx("div", {
-      className: baseClasses,
-      children: /*#__PURE__*/jsx("span", {
-        className: indicatorClasses
-      })
-    }), label != null && labelPosition === 'right' && /*#__PURE__*/jsx("label", {
-      htmlFor: id,
-      className: labelClasses,
-      children: label
-    })]
-  });
+  const baseClasses = (0, import_clsx32.default)("relative flex items-center rounded-full", {
+    "bg-disabledOn": isDisabled && isChecked,
+    "bg-disabled01": isDisabled && !isChecked,
+    "bg-interactive01 peer-hover:bg-hover01": !isDisabled && isChecked,
+    "bg-interactive02 peer-hover:bg-hoverGray": !isDisabled && !isChecked,
+    "w-8 h-4 px-[3px]": size === "small",
+    "w-12 h-6 px-1": size === "medium" || size === "large"
+  });
+  const inputClasses = (0, import_clsx32.default)(
+    "peer absolute inset-0 z-[1] opacity-0",
+    isDisabled ? "cursor-not-allowed" : "cursor-pointer"
+  );
+  const indicatorClasses = (0, import_clsx32.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_clsx32.default)("break-all", {
+    "mr-2": labelPosition === "left",
+    "ml-2": labelPosition === "right",
+    "typography-label14regular": size === "small" || size === "medium",
+    "typography-label16regular": size === "large",
+    "pointer-events-none cursor-not-allowed text-disabled01": isDisabled,
+    "cursor-pointer text-text01": !isDisabled
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "relative flex flex-[0_0_auto] items-center", children: [
+    label != null && labelPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("label", { htmlFor: id, className: labelClasses, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      "input",
+      {
+        className: inputClasses,
+        type: "checkbox",
+        name: id,
+        id,
+        checked: isChecked,
+        onChange,
+        disabled: isDisabled
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: baseClasses, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: indicatorClasses }) }),
+    label != null && labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("label", { htmlFor: id, className: labelClasses, children: label })
+  ] });
 }
 
-const useTooltip = () => {
-  const calculatePosition = useCallback(args => {
-    var _args$maxWidth;
-    const result = {
-      maxWidth: 'none',
-      width: 'auto',
-      left: '0px',
-      top: '0px',
-      bottom: '0px',
-      translateX: '0',
-      translateY: '0'
-    };
-    result.maxWidth = (_args$maxWidth = args.maxWidth) != null ? _args$maxWidth : 'none';
-    const offsetH = args.tooltipSize === 'small' ? 11 : 22;
-    const targetHorizontalCenter = args.dimensions.right - (args.dimensions.right - args.dimensions.left) / 2;
-    const targetLeft = args.dimensions.left;
-    const targetRight = args.dimensions.right;
-    const targetWidth = args.dimensions.width;
-    switch (args.horizontalAlign) {
-      case 'center':
-        result.left = `${targetHorizontalCenter}px`;
-        result.translateX = '-50%';
-        break;
-      case 'left':
-        result.left = `${targetLeft - offsetH}px`;
-        result.translateX = `${targetWidth / 2}px`;
-        break;
-      case 'right':
-        result.left = `${targetRight + offsetH}px`;
-        result.translateX = `-${targetWidth / 2}px`;
-        break;
-    }
-    switch (args.verticalPosition) {
-      case 'bottom':
-        result.top = `${args.dimensions.top + args.dimensions.height + window.scrollY}px`;
-        result.bottom = 'unset';
-        break;
-      case 'top':
-        result.top = `${args.dimensions.top + window.scrollY}px`;
-        result.bottom = 'unset';
-        result.translateY = '-100%';
-        break;
-    }
-    return result;
-  }, []);
+// src/tooltip/tooltip.tsx
+var import_react26 = require("react");
+var import_react_dom4 = require("react-dom");
+
+// src/tooltip/tooltip.hook.ts
+var import_react25 = require("react");
+var useTooltip = () => {
+  const calculatePosition = (0, import_react25.useCallback)(
+    (args) => {
+      const result = {
+        maxWidth: "none",
+        width: "auto",
+        left: "0px",
+        top: "0px",
+        bottom: "0px",
+        translateX: "0",
+        translateY: "0"
+      };
+      result.maxWidth = args.maxWidth ?? "none";
+      const offsetH = args.tooltipSize === "small" ? 11 : 22;
+      const targetHorizontalCenter = args.dimensions.right - (args.dimensions.right - args.dimensions.left) / 2;
+      const targetLeft = args.dimensions.left;
+      const targetRight = args.dimensions.right;
+      const targetWidth = args.dimensions.width;
+      switch (args.horizontalAlign) {
+        case "center":
+          result.left = `${targetHorizontalCenter}px`;
+          result.translateX = "-50%";
+          break;
+        case "left":
+          result.left = `${targetLeft - offsetH}px`;
+          result.translateX = `${targetWidth / 2}px`;
+          break;
+        case "right":
+          result.left = `${targetRight + offsetH}px`;
+          result.translateX = `-${targetWidth / 2}px`;
+          break;
+      }
+      switch (args.verticalPosition) {
+        case "bottom":
+          result.top = `${args.dimensions.top + args.dimensions.height + window.scrollY}px`;
+          result.bottom = "unset";
+          break;
+        case "top":
+          result.top = `${args.dimensions.top + window.scrollY}px`;
+          result.bottom = "unset";
+          result.translateY = "-100%";
+          break;
+      }
+      return result;
+    },
+    []
+  );
   return {
     calculatePosition
   };
 };
 
-const TailIcon = props => {
-  const tailClasses = clsx$1('absolute fill-uiBackgroundTooltip', {
-    'rotate-180': props.verticalPosition === 'bottom',
-    'rotate-0': props.verticalPosition !== 'bottom',
-    '-top-1': props.verticalPosition === 'bottom' && props.size === 'small',
-    '-top-2': props.verticalPosition === 'bottom' && props.size !== 'small',
-    '-bottom-1': props.verticalPosition !== 'bottom' && props.size === 'small',
-    '-bottom-2': props.verticalPosition !== 'bottom' && props.size !== 'small',
-    'right-2': props.horizontalAlign === 'right' && props.size === 'small',
-    'right-4': props.horizontalAlign === 'right' && props.size !== 'small',
-    'left-2': props.horizontalAlign === 'left' && props.size === 'small',
-    'left-4': props.horizontalAlign === 'left' && props.size !== 'small',
-    'left-1/2 -translate-x-1': props.horizontalAlign === 'center' && props.size === 'small',
-    'left-1/2 -translate-x-2': props.horizontalAlign === 'center' && props.size !== 'small'
-  });
-  if (props.size === 'small') {
-    return /*#__PURE__*/jsx("svg", {
-      className: tailClasses,
-      width: "8",
-      height: "4",
-      viewBox: "0 0 8 4",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: /*#__PURE__*/jsx("path", {
-        d: "M4 4L0 0H8L4 4Z"
-      })
-    });
+// src/tooltip/tooltip-content.tsx
+var import_clsx34 = __toESM(require("clsx"));
+
+// src/tooltip/tail-icon.tsx
+var import_clsx33 = __toESM(require("clsx"));
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var TailIcon = (props) => {
+  const tailClasses = (0, import_clsx33.default)("absolute fill-uiBackgroundTooltip", {
+    "rotate-180": props.verticalPosition === "bottom",
+    "rotate-0": props.verticalPosition !== "bottom",
+    "-top-1": props.verticalPosition === "bottom" && props.size === "small",
+    "-top-2": props.verticalPosition === "bottom" && props.size !== "small",
+    "-bottom-1": props.verticalPosition !== "bottom" && props.size === "small",
+    "-bottom-2": props.verticalPosition !== "bottom" && props.size !== "small",
+    "right-2": props.horizontalAlign === "right" && props.size === "small",
+    "right-4": props.horizontalAlign === "right" && props.size !== "small",
+    "left-2": props.horizontalAlign === "left" && props.size === "small",
+    "left-4": props.horizontalAlign === "left" && props.size !== "small",
+    "left-1/2 -translate-x-1": props.horizontalAlign === "center" && props.size === "small",
+    "left-1/2 -translate-x-2": props.horizontalAlign === "center" && props.size !== "small"
+  });
+  if (props.size === "small") {
+    return /* @__PURE__ */ (0, import_jsx_runtime44.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_runtime44.jsx)("path", { d: "M4 4L0 0H8L4 4Z" }) });
   } else {
-    return /*#__PURE__*/jsx("svg", {
-      className: tailClasses,
-      width: "14",
-      height: "8",
-      viewBox: "0 0 14 8",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: /*#__PURE__*/jsx("path", {
-        d: "M7 8L0 0H14L7 8Z"
-      })
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      "svg",
+      {
+        className: tailClasses,
+        width: "14",
+        height: "8",
+        viewBox: "0 0 14 8",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("path", { d: "M7 8L0 0H14L7 8Z" })
+      }
+    );
   }
 };
 
-const TooltipContent = ({
+// src/tooltip/tooltip-content.tsx
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var TooltipContent = ({
   content,
   horizontalAlign,
   verticalPosition,
   size,
   tooltipPosition,
   maxWidth,
-  isPortal: _isPortal = false
+  isPortal = false
 }) => {
-  const tooltipWrapperClasses = clsx$1('absolute z-tooltip m-auto flex', {
-    'top-0': !_isPortal && verticalPosition === 'top',
-    'bottom-0': !_isPortal && verticalPosition === 'bottom',
-    'justify-start': horizontalAlign === 'left',
-    'justify-center': horizontalAlign === 'center',
-    'justify-end': horizontalAlign === 'right',
-    'w-[24px]': size === 'small',
-    'w-[46px]': size !== 'small'
-  });
-  const tooltipBodyClasses = clsx$1('absolute z-tooltip inline-block w-max rounded bg-uiBackgroundTooltip text-textOnColor', {
-    'typography-body12regular': size === 'small',
-    'typography-body13regular': size === 'medium',
-    'px-2 pb-1 pt-1.5': size === 'small',
-    'px-4 py-3': size === 'medium',
-    'bottom-2': verticalPosition !== 'bottom' && size === 'small',
-    'bottom-3': verticalPosition !== 'bottom' && size === 'medium',
-    'top-2': verticalPosition === 'bottom' && size === 'small',
-    'top-3': verticalPosition === 'bottom' && size === 'medium'
-  });
-  const tooltipWrapperStyle = _isPortal ? _extends({
-    transform: `translate(${tooltipPosition.translateX}, ${tooltipPosition.translateY})`
-  }, tooltipPosition) : {};
-  return /*#__PURE__*/jsx("div", {
-    className: tooltipWrapperClasses,
-    style: tooltipWrapperStyle,
-    children: /*#__PURE__*/jsxs("div", {
+  const tooltipWrapperClasses = (0, import_clsx34.default)("absolute z-tooltip m-auto flex", {
+    "top-0": !isPortal && verticalPosition === "top",
+    "bottom-0": !isPortal && verticalPosition === "bottom",
+    "justify-start": horizontalAlign === "left",
+    "justify-center": horizontalAlign === "center",
+    "justify-end": horizontalAlign === "right",
+    "w-[24px]": size === "small",
+    "w-[46px]": size !== "small"
+  });
+  const tooltipBodyClasses = (0, import_clsx34.default)(
+    "absolute z-tooltip inline-block w-max rounded bg-uiBackgroundTooltip text-textOnColor",
+    {
+      "typography-body12regular": size === "small",
+      "typography-body13regular": size === "medium",
+      "px-2 pb-1 pt-1.5": size === "small",
+      "px-4 py-3": size === "medium",
+      "bottom-2": verticalPosition !== "bottom" && size === "small",
+      "bottom-3": verticalPosition !== "bottom" && size === "medium",
+      "top-2": verticalPosition === "bottom" && size === "small",
+      "top-3": verticalPosition === "bottom" && size === "medium"
+    }
+  );
+  const tooltipWrapperStyle = isPortal ? {
+    transform: `translate(${tooltipPosition.translateX}, ${tooltipPosition.translateY})`,
+    ...tooltipPosition
+  } : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: tooltipWrapperClasses, style: tooltipWrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    "div",
+    {
       className: tooltipBodyClasses,
       style: {
         maxWidth
       },
-      children: [content, /*#__PURE__*/jsx(TailIcon, {
-        size: size,
-        verticalPosition: verticalPosition,
-        horizontalAlign: horizontalAlign
-      })]
-    })
-  });
+      children: [
+        content,
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TailIcon, { size, verticalPosition, horizontalAlign })
+      ]
+    }
+  ) });
 };
 
+// src/tooltip/tooltip.tsx
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function Tooltip({
   children,
   content,
-  size = 'small',
+  size = "small",
   maxWidth,
-  verticalPosition = 'bottom',
-  horizontalAlign = 'center',
+  verticalPosition = "bottom",
+  horizontalAlign = "center",
   isDisabledHover = false,
   portalTarget
 }) {
-  const {
-    calculatePosition
-  } = useTooltip();
-  const [isVisible, setIsVisible] = useState(false);
-  const [tooltipPosition, setTooltipPosition] = useState({
-    maxWidth: 'none',
-    width: 'auto',
-    left: '0px',
-    top: '0px',
-    bottom: '0px',
-    translateX: '0',
-    translateY: '0'
-  });
-  const targetRef = useRef(null);
-  const handleMouseOverWrapper = useCallback(() => {
+  const { calculatePosition } = useTooltip();
+  const [isVisible, setIsVisible] = (0, import_react26.useState)(false);
+  const [tooltipPosition, setTooltipPosition] = (0, import_react26.useState)({
+    maxWidth: "none",
+    width: "auto",
+    left: "0px",
+    top: "0px",
+    bottom: "0px",
+    translateX: "0",
+    translateY: "0"
+  });
+  const targetRef = (0, import_react26.useRef)(null);
+  const handleMouseOverWrapper = (0, import_react26.useCallback)(() => {
     if (isDisabledHover) {
       return;
     }
     setIsVisible(true);
   }, [isDisabledHover]);
-  const handleMouseOutWrapper = useCallback(() => {
+  const handleMouseOutWrapper = (0, import_react26.useCallback)(() => {
     setIsVisible(false);
   }, []);
-  useEffect(() => {
-    var _targetRef$current;
+  (0, import_react26.useEffect)(() => {
     if (targetRef.current === null) return;
-    const dimensions = (_targetRef$current = targetRef.current) == null ? void 0 : _targetRef$current.getBoundingClientRect();
-    const position = calculatePosition({
-      dimensions,
-      maxWidth,
-      verticalPosition,
-      horizontalAlign,
-      tooltipSize: size
-    });
+    const dimensions = targetRef.current?.getBoundingClientRect();
+    const position = calculatePosition({ dimensions, maxWidth, verticalPosition, horizontalAlign, tooltipSize: size });
     setTooltipPosition(position);
   }, [calculatePosition, horizontalAlign, maxWidth, size, verticalPosition]);
-  return /*#__PURE__*/jsxs("div", {
-    ref: targetRef,
-    className: "relative flex items-center justify-center",
-    onMouseOver: handleMouseOverWrapper,
-    onMouseLeave: handleMouseOutWrapper,
-    children: [children, isVisible && (portalTarget == null ? /*#__PURE__*/jsx(TooltipContent, {
-      content: content,
-      size: size,
-      maxWidth: maxWidth,
-      verticalPosition: verticalPosition,
-      horizontalAlign: horizontalAlign,
-      tooltipPosition: tooltipPosition
-    }) : (/*#__PURE__*/createPortal(/*#__PURE__*/jsx(TooltipContent, {
-      isPortal: true,
-      content: content,
-      size: size,
-      maxWidth: maxWidth,
-      verticalPosition: verticalPosition,
-      horizontalAlign: horizontalAlign,
-      tooltipPosition: tooltipPosition
-    }), portalTarget)))]
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+    "div",
+    {
+      ref: targetRef,
+      className: "relative flex items-center justify-center",
+      onMouseOver: handleMouseOverWrapper,
+      onMouseLeave: handleMouseOutWrapper,
+      children: [
+        children,
+        isVisible && (portalTarget == null ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          TooltipContent,
+          {
+            content,
+            size,
+            maxWidth,
+            verticalPosition,
+            horizontalAlign,
+            tooltipPosition
+          }
+        ) : (0, import_react_dom4.createPortal)(
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            TooltipContent,
+            {
+              isPortal: true,
+              content,
+              size,
+              maxWidth,
+              verticalPosition,
+              horizontalAlign,
+              tooltipPosition
+            }
+          ),
+          portalTarget
+        ))
+      ]
+    }
+  );
 }
-
-export { Avatar, Breadcrumb, Button, Checkbox, Dropdown, EvaluationStar, Heading, Icon, IconButton, Loading, Modal, NotificationInline, Pagination, PaginationSelect, Radio, Search, Select, SelectSort, Tab, TabItem, Table, TableCell, TableRow, Tag, TextArea, TextInput, Toast, ToastProvider, Toggle, Tooltip, useOutsideClick, useToast };
-//# sourceMappingURL=index.js.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Avatar,
+  Breadcrumb,
+  Button,
+  Checkbox,
+  Dropdown,
+  EvaluationStar,
+  Heading,
+  Icon,
+  IconButton,
+  Loading,
+  Modal,
+  NotificationInline,
+  Pagination,
+  PaginationSelect,
+  Radio,
+  Search,
+  Select,
+  SelectSort,
+  Tab,
+  TabItem,
+  Table,
+  TableCell,
+  TableRow,
+  Tag,
+  TextArea,
+  TextInput,
+  Toast,
+  ToastProvider,
+  Toggle,
+  Tooltip,
+  useOutsideClick,
+  useToast
+});