@zenkigen-inc/component-ui 1.15.1 → 1.15.2

package/dist/index.mjs

@@ -0,0 +1,1915 @@
+// src/avatar/avatar.tsx
+import { userColors } from "@zenkigen-inc/component-theme";
+import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
+var isAsciiString = (str) => {
+  return str.charCodeAt(0) < 256;
+};
+function Avatar({ size = "medium", ...props }) {
+  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 ?? 0) % 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 });
+}
+
+// src/breadcrumb/breadcrumb-item.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var BreadcrumbItem = ({ children }) => {
+  return /* @__PURE__ */ jsx2("li", { className: "flex gap-2 after:content-['/'] last:after:content-none [&_a]:text-interactive02 [&_a]:hover:underline", children });
+};
+
+// src/breadcrumb/breadcrumb.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Breadcrumb({ children }) {
+  return /* @__PURE__ */ jsx3("nav", { "aria-label": "breadcrumb", children: /* @__PURE__ */ jsx3("ul", { className: "typography-label14regular flex flex-wrap gap-2 whitespace-nowrap text-text01", children }) });
+}
+Breadcrumb.Item = BreadcrumbItem;
+
+// src/button/button.tsx
+import { buttonColors, focusVisible } from "@zenkigen-inc/component-theme";
+import { clsx as clsx2 } from "clsx";
+import { jsxs } from "react/jsx-runtime";
+var Button = ({
+  size = "medium",
+  variant = "fill",
+  isDisabled,
+  isSelected = false,
+  width,
+  borderRadius,
+  justifyContent = "center",
+  before,
+  after,
+  elementAs,
+  children,
+  ...props
+}) => {
+  const baseClasses = clsx2(
+    "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 ?? "button";
+  return /* @__PURE__ */ jsxs(Component, { className: baseClasses, style: { width, borderRadius }, disabled: isDisabled, ...props, children: [
+    before,
+    children,
+    after
+  ] });
+};
+
+// src/checkbox/checkbox.tsx
+import { focusVisible as focusVisible2 } from "@zenkigen-inc/component-theme";
+import clsx3 from "clsx";
+import { useCallback, useState } from "react";
+
+// src/checkbox/checked-icon.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var CheckedIcon = () => {
+  return /* @__PURE__ */ jsx4(
+    "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__ */ jsx4(
+        "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/minus-icon.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var MinusIcon = () => {
+  return /* @__PURE__ */ jsx5(
+    "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__ */ jsx5("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
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+function Checkbox({
+  name,
+  value,
+  id,
+  isChecked = false,
+  isIndeterminate = false,
+  isDisabled = false,
+  onChange,
+  label,
+  color = "default"
+}) {
+  const [isMouseOver, setIsMouseOver] = useState(false);
+  const handleMouseOverInput = useCallback(() => {
+    setIsMouseOver(true);
+  }, []);
+  const handleMouseOutInput = useCallback(() => {
+    setIsMouseOver(false);
+  }, []);
+  const handleChange = useCallback(
+    (e) => !isDisabled && onChange?.(e),
+    [isDisabled, onChange]
+  );
+  const baseInputClasses = clsx3("peer absolute z-[1] size-5 opacity-0", {
+    "cursor-not-allowed": isDisabled,
+    "cursor-pointer": !isDisabled
+  });
+  const boxClasses = clsx3(
+    "inline-flex size-5 items-center justify-center rounded-sm border bg-white",
+    focusVisible2.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 = clsx3("relative flex size-5 flex-[0_0_auto] items-center justify-center", {
+    "bg-disabled01": isDisabled && isChecked,
+    "border-disabled01": isDisabled
+  });
+  const afterClasses = clsx3("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 = clsx3("inline-block size-3 rounded-[1px]", {
+    "bg-hoverUi": !isDisabled && !isChecked && isMouseOver
+  });
+  const labelClasses = clsx3("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__ */ jsxs2("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "relative flex size-6 items-center justify-center", children: [
+      /* @__PURE__ */ jsx6(
+        "input",
+        {
+          type: "checkbox",
+          value,
+          name,
+          id,
+          checked: isChecked,
+          disabled: isDisabled,
+          onChange: handleChange,
+          onMouseOver: handleMouseOverInput,
+          onMouseLeave: handleMouseOutInput,
+          className: baseInputClasses
+        }
+      ),
+      /* @__PURE__ */ jsx6("div", { className: boxClasses, children: /* @__PURE__ */ jsxs2("div", { className: indicatorClasses, children: [
+        /* @__PURE__ */ jsxs2("span", { className: afterClasses, children: [
+          isChecked && !isIndeterminate && /* @__PURE__ */ jsx6(CheckedIcon, {}),
+          isIndeterminate && /* @__PURE__ */ jsx6(MinusIcon, {})
+        ] }),
+        /* @__PURE__ */ jsx6("span", { className: hoverIndicatorClasses })
+      ] }) })
+    ] }),
+    label != null && /* @__PURE__ */ jsx6("label", { htmlFor: id, className: labelClasses, children: label })
+  ] });
+}
+
+// src/dropdown/dropdown.tsx
+import { buttonColors as buttonColors2, focusVisible as focusVisible4 } from "@zenkigen-inc/component-theme";
+import clsx7 from "clsx";
+import { useCallback as useCallback2, useRef, useState as useState2 } from "react";
+import { createPortal } from "react-dom";
+
+// src/hooks/use-outside-click.ts
+import { useEffect } from "react";
+var useOutsideClick = (ref, handler, enabled = true) => {
+  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);
+    }
+    return () => document.removeEventListener("click", listener);
+  }, [ref, enabled, handler]);
+};
+
+// src/icon/icon.tsx
+import { iconElements } from "@zenkigen-inc/component-icons";
+import { iconColors } from "@zenkigen-inc/component-theme";
+import { clsx as clsx4 } from "clsx";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Icon = ({ size = "medium", isDisabled = false, ...props }) => {
+  const classes = clsx4(
+    "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__ */ jsx7("span", { className: classes, children: iconElements[props.name] });
+};
+
+// src/dropdown/dropdown-context.ts
+import { createContext } from "react";
+var DropdownContext = createContext({
+  isVisible: false,
+  setIsVisible: () => false,
+  isDisabled: false,
+  targetDimensions: { width: 0, height: 0 },
+  variant: "outline"
+});
+
+// src/dropdown/dropdown-item.tsx
+import { focusVisible as focusVisible3 } from "@zenkigen-inc/component-theme";
+import clsx5 from "clsx";
+import { useContext } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function DropdownItem({ children, color = "gray", onClick }) {
+  const { setIsVisible } = useContext(DropdownContext);
+  const handleClickItem = (event) => {
+    setIsVisible(false);
+    onClick?.(event);
+  };
+  const itemClasses = clsx5(
+    "typography-label14regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02",
+    focusVisible3.inset,
+    {
+      "bg-uiBackground01 fill-icon01 text-interactive02": color === "gray",
+      "fill-supportDanger text-supportDanger": color === "red"
+    }
+  );
+  return /* @__PURE__ */ jsx8("li", { className: "flex w-full items-center", children: /* @__PURE__ */ jsx8("button", { className: itemClasses, type: "button", onClick: handleClickItem, children }) });
+}
+
+// src/dropdown/dropdown-menu.tsx
+import clsx6 from "clsx";
+import { useContext as useContext2 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function DropdownMenu({
+  children,
+  maxHeight,
+  isNoPadding = false,
+  verticalPosition = "bottom",
+  horizontalAlign = "left"
+}) {
+  const { isVisible, isDisabled, targetDimensions, variant, portalTargetRef } = useContext2(DropdownContext);
+  const wrapperClasses = clsx6("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__ */ jsx9(
+    "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
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+function Dropdown({
+  children,
+  target,
+  label,
+  icon,
+  size = "medium",
+  variant = "outline",
+  title,
+  isDisabled = false,
+  isArrowHidden = false,
+  portalTargetRef
+}) {
+  const [isVisible, setIsVisible] = useState2(false);
+  const [targetDimensions, setTargetDimensions] = useState2({
+    width: 0,
+    height: 0
+  });
+  const targetRef = useRef(null);
+  useOutsideClick(targetRef, () => setIsVisible(false));
+  const handleToggle = useCallback2(() => {
+    if (targetRef.current === null) {
+      return;
+    }
+    if (isVisible) {
+      setIsVisible(false);
+    } else {
+      const dimensions = targetRef.current.getBoundingClientRect();
+      const calculatedDimensions = {
+        width: dimensions.right - dimensions.left,
+        height: dimensions.bottom - dimensions.top
+      };
+      setTargetDimensions(calculatedDimensions);
+      setIsVisible(true);
+    }
+  }, [isVisible]);
+  const wrapperClasses = clsx7("relative flex shrink-0 items-center gap-1 rounded", {
+    "cursor-not-allowed": isDisabled
+  });
+  const childrenButtonClasses = clsx7(
+    "flex items-center justify-center rounded bg-uiBackground01 p-1 hover:bg-hover02 active:bg-active02",
+    focusVisible4.normal,
+    {
+      "pointer-events-none": isDisabled,
+      "border border-uiBorder02": variant === "outline"
+    }
+  );
+  const buttonClasses = clsx7(
+    "flex items-center rounded bg-uiBackground01",
+    buttonColors2[variant].base,
+    buttonColors2[variant].hover,
+    buttonColors2[variant].active,
+    buttonColors2[variant].disabled,
+    focusVisible4.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 = clsx7("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__ */ jsx10(
+    DropdownContext.Provider,
+    {
+      value: { isVisible, setIsVisible, isDisabled, targetDimensions, variant, portalTargetRef },
+      children: /* @__PURE__ */ jsxs3("div", { ref: targetRef, className: wrapperClasses, children: [
+        target ? /* @__PURE__ */ jsxs3(
+          "button",
+          {
+            type: "button",
+            title,
+            className: childrenButtonClasses,
+            onClick: handleToggle,
+            disabled: isDisabled,
+            children: [
+              target,
+              !isArrowHidden && /* @__PURE__ */ jsx10("div", { className: "ml-2 flex items-center fill-icon01", children: /* @__PURE__ */ jsx10(
+                Icon,
+                {
+                  name: isVisible ? "angle-small-up" : "angle-small-down",
+                  size: size === "large" ? "medium" : "small"
+                }
+              ) })
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs3("button", { type: "button", title, className: buttonClasses, onClick: handleToggle, disabled: isDisabled, children: [
+          icon && /* @__PURE__ */ jsx10("span", { className: "mr-1 flex", children: /* @__PURE__ */ jsx10(Icon, { name: icon, size: size === "large" ? "medium" : "small" }) }),
+          /* @__PURE__ */ jsx10("span", { className: labelClasses, children: label }),
+          !isArrowHidden && /* @__PURE__ */ jsx10("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx10(Icon, { name: isVisible ? "angle-small-up" : "angle-small-down", size: "small" }) })
+        ] }),
+        !portalTargetRef ? children : portalTargetRef != null && portalTargetRef.current && createPortal(children, portalTargetRef.current)
+      ] })
+    }
+  );
+}
+Dropdown.Menu = DropdownMenu;
+Dropdown.Item = DropdownItem;
+
+// src/evaluation-star/evaluation-star.tsx
+import { iconElements as iconElements2 } from "@zenkigen-inc/component-icons";
+import { focusVisible as focusVisible5 } from "@zenkigen-inc/component-theme";
+import clsx8 from "clsx";
+import { useCallback as useCallback3, useState as useState3 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+function EvaluationStar({ value, isEditable = false, onChangeRating, size = "medium" }) {
+  const maxRating = 5;
+  const [currentRating, setCurrentRating] = useState3(value);
+  const handleChangeRating = useCallback3(
+    (newRating) => {
+      if (isEditable) {
+        setCurrentRating(newRating);
+        if (onChangeRating) {
+          onChangeRating(newRating);
+        }
+      }
+    },
+    [isEditable, onChangeRating]
+  );
+  const starClasses = clsx8(focusVisible5.inset, { "w-6 h-6": size === "large", "w-4 h-4": size === "medium" });
+  const renderStar = (rating) => {
+    const color = rating <= currentRating ? "fill-yellow-yellow50" : "fill-icon03";
+    return /* @__PURE__ */ jsx11(
+      "button",
+      {
+        type: "button",
+        onClick: () => handleChangeRating(rating),
+        className: clsx8(color, starClasses),
+        disabled: !isEditable,
+        children: iconElements2["star-filled"]
+      },
+      rating
+    );
+  };
+  const ratingStars = Array.from({ length: maxRating }, (_, index) => renderStar(index + 1));
+  return /* @__PURE__ */ jsx11("span", { className: "flex flex-row", children: ratingStars });
+}
+
+// src/heading/heading.tsx
+import { typography } from "@zenkigen-inc/component-theme";
+import { clsx as clsx9 } from "clsx";
+import { jsxs as jsxs4 } from "react/jsx-runtime";
+function Heading(props) {
+  const TagName = `h${props.level}`;
+  const classes = clsx9(`flex items-center text-text01`, typography.heading[TagName], {
+    "gap-2": props.level === 1,
+    "gap-1": props.level > 1
+  });
+  return /* @__PURE__ */ jsxs4(TagName, { className: classes, children: [
+    props.before,
+    props.children,
+    props.after
+  ] });
+}
+
+// src/icon-button/icon-button.tsx
+import { buttonColors as buttonColors3, focusVisible as focusVisible6 } from "@zenkigen-inc/component-theme";
+import { clsx as clsx10 } from "clsx";
+import { jsx as jsx12 } from "react/jsx-runtime";
+function IconButton({
+  size = "medium",
+  variant = "outline",
+  isNoPadding = false,
+  isDisabled = false,
+  ...props
+}) {
+  const baseClasses = clsx10(
+    "typography-label16regular flex items-center justify-center gap-1 rounded",
+    buttonColors3[variant].base,
+    buttonColors3[variant].hover,
+    buttonColors3[variant].active,
+    buttonColors3[variant].disabled,
+    focusVisible6.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__ */ jsx12("a", { className: baseClasses, href: props.href, target: props.target, children: /* @__PURE__ */ jsx12(Icon, { name: props.icon, size: iconSize }) });
+  } else {
+    return /* @__PURE__ */ jsx12("button", { type: "button", className: baseClasses, disabled: isDisabled, onClick: props.onClick, children: /* @__PURE__ */ jsx12(Icon, { name: props.icon, size: iconSize }) });
+  }
+}
+
+// src/loading/loading.tsx
+import clsx11 from "clsx";
+import { Fragment, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+function Loading({ size = "medium", position = "fixed", height = "100%" }) {
+  const wrapperClasses = clsx11(position, "left-0 top-0 z-20 flex w-full items-center justify-center");
+  const svgClasses = clsx11({
+    "h-4 w-4": size === "small",
+    "h-8 w-8": size === "medium",
+    "h-16 w-16": size === "large"
+  });
+  return /* @__PURE__ */ jsx13(Fragment, { children: /* @__PURE__ */ jsxs5("div", { className: wrapperClasses, style: { height }, children: [
+    size === "small" && /* @__PURE__ */ jsx13("svg", { className: svgClasses, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx13(
+      "circle",
+      {
+        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__ */ jsx13("svg", { className: svgClasses, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx13(
+      "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__ */ jsx13("svg", { className: svgClasses, viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx13(
+      "circle",
+      {
+        className: "origin-center animate-circular-large-move stroke-interactive01",
+        cx: "32",
+        cy: "32",
+        r: "30",
+        stroke: "currentColor",
+        strokeWidth: "3",
+        fill: "none"
+      }
+    ) })
+  ] }) });
+}
+
+// src/modal/modal.tsx
+import { useEffect as useEffect2, useState as useState4 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+
+// src/modal/body-scroll-lock.tsx
+import { useLayoutEffect } from "react";
+var BodyScrollLock = () => {
+  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,
+      left: body.style.left,
+      width: body.style.width,
+      overflow: body.style.overflow,
+      paddingRight: body.style.paddingRight
+    };
+    body.style.position = "fixed";
+    body.style.top = `-${scrollY}px`;
+    body.style.left = `-${scrollX}px`;
+    body.style.width = "100%";
+    body.style.overflow = "hidden";
+    if (hasVerticalScrollbar && scrollbarWidth > 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);
+      window.scrollTo(scrollX, scrollY);
+    };
+  }, []);
+  return null;
+};
+function restoreProperty(element, property, value) {
+  if (value !== "") {
+    element.style.setProperty(property, value);
+  } else {
+    element.style.removeProperty(property);
+  }
+}
+
+// src/modal/modal-body.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+function ModalBody({ children }) {
+  return /* @__PURE__ */ jsx14("div", { className: "overflow-y-auto", children });
+}
+
+// src/modal/modal-context.ts
+import { createContext as createContext2 } from "react";
+var ModalContext = createContext2({
+  onClose: () => null
+});
+
+// src/modal/modal-footer.tsx
+import clsx12 from "clsx";
+import { jsx as jsx15 } from "react/jsx-runtime";
+function ModalFooter({ children, isNoBorder = false }) {
+  const wrapperClasses = clsx12("flex w-full shrink-0 items-center rounded-b-lg px-6 py-4", {
+    "border-t-[1px] border-uiBorder01": !isNoBorder
+  });
+  return /* @__PURE__ */ jsx15("div", { className: wrapperClasses, children });
+}
+
+// src/modal/modal-header.tsx
+import clsx13 from "clsx";
+import { useContext as useContext3 } from "react";
+import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
+function ModalHeader({ children, isNoBorder = false }) {
+  const { onClose } = useContext3(ModalContext);
+  const headerClasses = clsx13(
+    "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__ */ jsxs6("div", { className: headerClasses, children: [
+    /* @__PURE__ */ jsx16("div", { children }),
+    onClose && /* @__PURE__ */ jsx16(IconButton, { icon: "close", size: "small", variant: "text", onClick: onClose })
+  ] });
+}
+
+// src/modal/modal.tsx
+import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs7 } from "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] = useState4(false);
+  const renderWidth = typeof width === "number" ? Math.max(width, LIMIT_WIDTH) : width;
+  const renderHeight = typeof height === "number" ? Math.max(height, LIMIT_HEIGHT) : height;
+  useEffect2(() => {
+    setIsMounted(true);
+  }, []);
+  return isMounted && isOpen ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    /* @__PURE__ */ jsx17(BodyScrollLock, {}),
+    createPortal2(
+      /* @__PURE__ */ jsx17(ModalContext.Provider, { value: { onClose }, children: /* @__PURE__ */ jsx17("div", { className: "fixed left-0 top-0 z-overlay flex size-full items-center justify-center bg-backgroundOverlayBlack py-4", children: /* @__PURE__ */ jsx17(
+        "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, maxWidth },
+          children
+        }
+      ) }) }),
+      portalTargetRef?.current != null ? portalTargetRef.current : document.body
+    )
+  ] }) : null;
+}
+Modal.Body = ModalBody;
+Modal.Header = ModalHeader;
+Modal.Footer = ModalFooter;
+
+// src/notification-inline/notification-inline.tsx
+import { clsx as clsx14 } from "clsx";
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+function NotificationInline({ state = "default", size = "medium", ...props }) {
+  const wrapperClasses = clsx14("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 = clsx14("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"
+  };
+  const iconSize = {
+    small: "small",
+    medium: "medium"
+  };
+  return /* @__PURE__ */ jsxs8("div", { className: wrapperClasses, children: [
+    state !== "default" && /* @__PURE__ */ jsx18("div", { className: iconClasses, children: /* @__PURE__ */ jsx18(Icon, { name: iconName[state], size: iconSize[size] }) }),
+    /* @__PURE__ */ jsx18("p", { className: "flex-1", children: props.children }),
+    props.showClose === true && /* @__PURE__ */ jsx18("div", { className: "flex items-center", children: /* @__PURE__ */ jsx18(IconButton, { icon: "close", size: "small", variant: "text" }) })
+  ] });
+}
+
+// src/pagination/pagination-button.tsx
+import { clsx as clsx15 } from "clsx";
+import { useContext as useContext4 } from "react";
+
+// src/pagination/pagination-context.ts
+import { createContext as createContext3 } from "react";
+var PaginationContext = createContext3({
+  currentPage: 0
+});
+
+// src/pagination/pagination-button.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+function PaginationButton({ page, onClick }) {
+  const { currentPage } = useContext4(PaginationContext);
+  const buttonClasses = clsx15(
+    "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__ */ jsx19("button", { type: "button", className: buttonClasses, onClick: () => onClick(page), children: page });
+}
+
+// src/pagination/pagination.tsx
+import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+var START_PAGE = 1;
+function Pagination({ currentPage, totalPage, sideNumPagesToShow = 3, onClick }) {
+  let center = Math.max(currentPage, START_PAGE + 1);
+  center = Math.min(center, totalPage - 1);
+  const start = Math.max(center - sideNumPagesToShow, START_PAGE + 1);
+  const end = Math.min(center + sideNumPagesToShow, totalPage - 1);
+  const offsetStart = center + sideNumPagesToShow >= totalPage ? totalPage - center - sideNumPagesToShow : 0;
+  const offsetEnd = center <= sideNumPagesToShow ? sideNumPagesToShow - center + 1 : 0;
+  const pageList = [];
+  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__ */ jsx20(
+    PaginationContext.Provider,
+    {
+      value: {
+        currentPage
+      },
+      children: /* @__PURE__ */ jsxs9("ul", { className: "flex gap-1", children: [
+        /* @__PURE__ */ jsx20("li", { className: "flex items-center", children: /* @__PURE__ */ jsx20(
+          IconButton,
+          {
+            isDisabled: currentPage === START_PAGE,
+            variant: "text",
+            icon: "angle-left",
+            size: "small",
+            onClick: () => onClick(currentPage - 1)
+          }
+        ) }),
+        /* @__PURE__ */ jsx20("li", { children: /* @__PURE__ */ jsx20(PaginationButton, { onClick: () => onClick(START_PAGE), page: START_PAGE }) }),
+        pageList.length !== 0 && pageList[0] !== 2 && /* @__PURE__ */ jsx20("li", { className: threeDotIconClasses, children: /* @__PURE__ */ jsx20(Icon, { name: "more", size: "small" }) }),
+        pageList.map((page, index) => /* @__PURE__ */ jsx20("li", { children: /* @__PURE__ */ jsx20(PaginationButton, { onClick: () => onClick(page), page }) }, index)),
+        pageList.length !== 0 && pageList[pageList.length - 1] !== totalPage - 1 && /* @__PURE__ */ jsx20("li", { className: threeDotIconClasses, children: /* @__PURE__ */ jsx20(Icon, { name: "more", size: "small" }) }),
+        /* @__PURE__ */ jsx20("li", { children: /* @__PURE__ */ jsx20(PaginationButton, { onClick: () => onClick(totalPage), page: totalPage }) }),
+        /* @__PURE__ */ jsx20("li", { className: "flex items-center", children: /* @__PURE__ */ jsx20(
+          IconButton,
+          {
+            isDisabled: currentPage === totalPage,
+            variant: "text",
+            icon: "angle-right",
+            size: "small",
+            onClick: () => onClick(currentPage + 1)
+          }
+        ) })
+      ] })
+    }
+  );
+}
+
+// src/select/select.tsx
+import { buttonColors as buttonColors4, focusVisible as focusVisible9 } from "@zenkigen-inc/component-theme";
+import clsx18 from "clsx";
+import { useRef as useRef3, useState as useState5 } from "react";
+
+// src/select/select-context.ts
+import { createContext as createContext4 } from "react";
+var SelectContext = createContext4({
+  size: "medium",
+  setIsOptionListOpen: () => false,
+  variant: "outline"
+});
+
+// src/select/select-item.tsx
+import { focusVisible as focusVisible7 } from "@zenkigen-inc/component-theme";
+import clsx16 from "clsx";
+import { useContext as useContext5 } from "react";
+import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
+function SelectItem({ option }) {
+  const { setIsOptionListOpen, selectedOption, onChange } = useContext5(SelectContext);
+  const handleClickItem = (option2) => {
+    onChange?.(option2);
+    setIsOptionListOpen(false);
+  };
+  const itemClasses = clsx16(
+    "typography-label14regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02",
+    focusVisible7.inset,
+    {
+      "text-interactive01 fill-interactive01 bg-selectedUi": option.id === selectedOption?.id,
+      "text-interactive02 fill-icon01 bg-uiBackground01": option.id !== selectedOption?.id
+    }
+  );
+  return /* @__PURE__ */ jsx21("li", { className: "flex w-full items-center", "data-id": option.id, children: /* @__PURE__ */ jsxs10("button", { className: itemClasses, type: "button", onClick: () => handleClickItem(option), children: [
+    option.icon && /* @__PURE__ */ jsx21(Icon, { name: option.icon, size: "small" }),
+    /* @__PURE__ */ jsx21("span", { className: "ml-1 mr-6", children: option.label }),
+    option.id === selectedOption?.id && /* @__PURE__ */ jsx21("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx21(Icon, { name: "check", size: "small" }) })
+  ] }) }, option.id);
+}
+
+// src/select/select-list.tsx
+import { focusVisible as focusVisible8 } from "@zenkigen-inc/component-theme";
+import clsx17 from "clsx";
+import { useContext as useContext6, useLayoutEffect as useLayoutEffect2, useRef as useRef2 } from "react";
+import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+function SelectList({ children, maxHeight }) {
+  const ref = useRef2(null);
+  const { size, selectedOption, setIsOptionListOpen, variant, placeholder, onChange } = useContext6(SelectContext);
+  const handleClickDeselect = () => {
+    onChange?.(null);
+    setIsOptionListOpen(false);
+  };
+  useLayoutEffect2(() => {
+    if (maxHeight != null && ref.current) {
+      const element = Array.from(ref.current.children ?? []).find(
+        (item) => item.getAttribute("data-id") === selectedOption?.id
+      );
+      if (element != null && ref.current.scroll != null) {
+        const wrapRect = ref.current.getBoundingClientRect();
+        const rect = element.getBoundingClientRect();
+        ref.current.scroll(0, rect.top - wrapRect.top - wrapRect.height / 2 + rect.height / 2);
+      }
+    }
+  }, []);
+  const listClasses = clsx17(
+    "absolute z-dropdown w-max overflow-y-auto rounded bg-uiBackground01 py-2 shadow-floatingShadow",
+    {
+      "top-7": size === "x-small" || size === "small",
+      "top-9": size === "medium",
+      "top-11": size === "large",
+      "border-solid border border-uiBorder01": variant === "outline"
+    }
+  );
+  const deselectButtonClasses = clsx17(
+    "typography-label14regular flex h-8 w-full items-center px-3 text-interactive02 hover:bg-hover02 active:bg-active02",
+    focusVisible8.inset
+  );
+  return /* @__PURE__ */ jsxs11("ul", { className: listClasses, style: { maxHeight }, ref, children: [
+    children,
+    placeholder != null && selectedOption !== null && /* @__PURE__ */ jsx22("li", { children: /* @__PURE__ */ jsx22("button", { className: deselectButtonClasses, type: "button", onClick: handleClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
+  ] });
+}
+
+// src/select/select.tsx
+import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+function Select({
+  children,
+  size = "medium",
+  variant = "outline",
+  width,
+  maxWidth,
+  placeholder,
+  placeholderIcon,
+  selectedOption = null,
+  isDisabled = false,
+  isOptionSelected = false,
+  onChange,
+  optionListMaxHeight
+}) {
+  const [isOptionListOpen, setIsOptionListOpen] = useState5(false);
+  const targetRef = useRef3(null);
+  useOutsideClick(targetRef, () => setIsOptionListOpen(false));
+  const handleClickToggle = () => setIsOptionListOpen((prev) => !prev);
+  const wrapperClasses = clsx18("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 = clsx18(
+    "flex size-full items-center rounded",
+    buttonColors4[variant].hover,
+    buttonColors4[variant].active,
+    buttonColors4[variant].disabled,
+    focusVisible9.normal,
+    {
+      [buttonColors4[variant].selected]: isOptionSelected && !isDisabled && selectedOption,
+      [buttonColors4[variant].base]: !(isOptionSelected && !isDisabled && selectedOption),
+      "px-2": size === "x-small" || size === "small",
+      "px-4": size === "medium" || size === "large",
+      "pointer-events-none": isDisabled
+    }
+  );
+  const labelClasses = clsx18("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__ */ jsx23(
+    SelectContext.Provider,
+    {
+      value: {
+        size,
+        variant,
+        placeholder,
+        setIsOptionListOpen,
+        selectedOption,
+        onChange
+      },
+      children: /* @__PURE__ */ jsxs12("div", { className: wrapperClasses, style: { width, maxWidth }, ref: targetRef, children: [
+        /* @__PURE__ */ jsxs12("button", { className: buttonClasses, type: "button", onClick: handleClickToggle, disabled: isDisabled, children: [
+          selectedOption?.icon ? /* @__PURE__ */ jsx23("div", { className: "mr-1 flex", children: /* @__PURE__ */ jsx23(Icon, { name: selectedOption.icon, size: size === "large" ? "medium" : "small" }) }) : placeholder != null && placeholderIcon && /* @__PURE__ */ jsx23("div", { className: "mr-1 flex", children: /* @__PURE__ */ jsx23(Icon, { name: placeholderIcon, size: size === "large" ? "medium" : "small" }) }),
+          /* @__PURE__ */ jsx23("div", { className: labelClasses, children: /* @__PURE__ */ jsx23("div", { className: "truncate", children: selectedOption ? selectedOption.label : placeholder != null && placeholder }) }),
+          /* @__PURE__ */ jsx23("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx23(
+            Icon,
+            {
+              name: isOptionListOpen ? "angle-small-up" : "angle-small-down",
+              size: size === "large" ? "medium" : "small"
+            }
+          ) })
+        ] }),
+        isOptionListOpen && !isDisabled && /* @__PURE__ */ jsx23(SelectList, { maxHeight: optionListMaxHeight, children })
+      ] })
+    }
+  );
+}
+Select.Option = SelectItem;
+
+// src/pagination-select/pagination-select.tsx
+import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+function PaginationSelect({
+  totalSize,
+  currentPage,
+  sizePerPage,
+  countLabel = "\u4EF6",
+  pageLabel = "\u30DA\u30FC\u30B8",
+  optionListMaxHeight = 190,
+  onClickPrevButton,
+  onClickNextButton,
+  onChange
+}) {
+  const pageMax = Math.ceil(totalSize / sizePerPage);
+  const optionsList = [...Array(pageMax)].map((_, index) => {
+    const value = (index + 1).toString();
+    return {
+      id: value,
+      value,
+      label: value
+    };
+  });
+  const minCount = totalSize ? (currentPage - 1) * sizePerPage + 1 : 0;
+  const maxCount = currentPage * sizePerPage > totalSize ? totalSize : currentPage * sizePerPage;
+  return /* @__PURE__ */ jsxs13("nav", { "aria-label": "pagination", className: "flex items-center gap-x-1", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-x-2", children: [
+      /* @__PURE__ */ jsxs13("div", { className: "typography-label14regular text-text01", children: [
+        minCount > 0 && `${minCount} - `,
+        maxCount,
+        countLabel
+      ] }),
+      /* @__PURE__ */ jsx24(
+        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__ */ jsx24(Select.Option, { option }, option.id))
+        }
+      ),
+      /* @__PURE__ */ jsxs13("div", { className: "typography-label14regular text-text03", children: [
+        "/ ",
+        pageMax,
+        pageLabel
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs13("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx24(
+        IconButton,
+        {
+          variant: "text",
+          icon: "angle-left",
+          size: "small",
+          isDisabled: currentPage === 1,
+          onClick: onClickPrevButton
+        }
+      ),
+      /* @__PURE__ */ jsx24(
+        IconButton,
+        {
+          variant: "text",
+          icon: "angle-right",
+          size: "small",
+          isDisabled: currentPage === pageMax || pageMax === 0,
+          onClick: onClickNextButton
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/radio/radio.tsx
+import { focusVisible as focusVisible10 } from "@zenkigen-inc/component-theme";
+import clsx19 from "clsx";
+import { useCallback as useCallback4, useState as useState6 } from "react";
+import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+function Radio({ name, value, id, label, isChecked = false, isDisabled = false, onChange }) {
+  const [isMouseOver, setIsMouseOver] = useState6(false);
+  const handleMouseOverInput = useCallback4(() => {
+    setIsMouseOver(true);
+  }, []);
+  const handleMouseOutInput = useCallback4(() => {
+    setIsMouseOver(false);
+  }, []);
+  const handleChange = useCallback4(
+    (e) => !isDisabled && onChange?.(e),
+    [isDisabled, onChange]
+  );
+  const inputClasses = clsx19("peer absolute z-[1] size-6 opacity-0", {
+    "cursor-not-allowed": isDisabled,
+    "cursor-pointer": !isDisabled
+  });
+  const boxClasses = clsx19(
+    "inline-flex size-5 items-center justify-center rounded-full border border-solid bg-white",
+    focusVisible10.normalPeer,
+    {
+      "border-disabled01 hover:border-disabled01": isDisabled && !isMouseOver,
+      "border-hoverUiBorder": !isDisabled && isMouseOver,
+      "border-uiBorder03": !isDisabled,
+      "cursor-not-allowed": isDisabled,
+      "cursor-pointer": !isDisabled
+    }
+  );
+  const afterClasses = clsx19("absolute inset-0 m-auto block size-3 rounded-full", {
+    "bg-disabled01": isDisabled && isChecked,
+    "bg-activeSelectedUi": !isDisabled && isChecked,
+    "scale-0": !isChecked,
+    "scale-100": isChecked
+  });
+  const hoverIndicatorClasses = clsx19("inline-block size-3 rounded-full", {
+    "bg-hoverUi": !isDisabled && !isChecked && isMouseOver
+  });
+  const labelClasses = clsx19("typography-label14regular ml-2 flex-[1_0_0] select-none break-all", {
+    "pointer-events-none cursor-not-allowed text-disabled01": isDisabled,
+    "cursor-pointer text-text01": !isDisabled
+  });
+  return /* @__PURE__ */ jsxs14("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "flex size-6 items-center justify-center", children: [
+      /* @__PURE__ */ jsx25(
+        "input",
+        {
+          type: "checkbox",
+          value,
+          name,
+          id,
+          checked: isChecked,
+          disabled: isDisabled,
+          onChange: handleChange,
+          onMouseOver: handleMouseOverInput,
+          onMouseLeave: handleMouseOutInput,
+          className: inputClasses
+        }
+      ),
+      /* @__PURE__ */ jsx25("div", { className: boxClasses, children: /* @__PURE__ */ jsxs14("div", { className: "relative flex size-5 flex-[0_0_auto] items-center justify-center", children: [
+        /* @__PURE__ */ jsx25("span", { className: afterClasses }),
+        /* @__PURE__ */ jsx25("span", { className: hoverIndicatorClasses })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx25("label", { htmlFor: id, className: labelClasses, children: label })
+  ] });
+}
+
+// src/search/search.tsx
+import { clsx as clsx20 } from "clsx";
+import { forwardRef } from "react";
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+var Search = forwardRef(({ width = "100%", size = "medium", ...props }, ref) => {
+  const classes = clsx20(
+    "flex items-center rounded-full border border-uiBorder02 bg-uiBackground01 focus-within:border-activeInput",
+    { "h-8 px-3": size === "medium" },
+    { "h-10 px-4": size === "large" }
+  );
+  const inputClasses = clsx20("mx-2 h-full flex-1 text-text01 outline-0 placeholder:text-textPlaceholder", {
+    ["typography-label14regular"]: size === "medium",
+    ["typography-label16regular"]: size === "large"
+  });
+  return /* @__PURE__ */ jsx26("div", { className: "relative", ref, children: /* @__PURE__ */ jsx26("form", { onSubmit: props.onSubmit, children: /* @__PURE__ */ jsxs15("div", { className: classes, style: { width }, children: [
+    /* @__PURE__ */ jsx26(Icon, { name: "search", color: "icon01", size: "medium" }),
+    /* @__PURE__ */ jsx26(
+      "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__ */ jsx26(
+      IconButton,
+      {
+        variant: "text",
+        icon: "close",
+        size: size === "medium" ? "small" : "medium",
+        isNoPadding: true,
+        onClick: props.onClickClearButton
+      }
+    )
+  ] }) }) });
+});
+Search.displayName = "Search";
+
+// src/select-sort/select-sort.tsx
+import { buttonColors as buttonColors5, focusVisible as focusVisible13 } from "@zenkigen-inc/component-theme";
+import clsx23 from "clsx";
+import { useCallback as useCallback5, useRef as useRef4, useState as useState7 } from "react";
+
+// src/select-sort/select-list.tsx
+import { focusVisible as focusVisible12 } from "@zenkigen-inc/component-theme";
+import clsx22 from "clsx";
+
+// src/select-sort/select-item.tsx
+import { focusVisible as focusVisible11 } from "@zenkigen-inc/component-theme";
+import clsx21 from "clsx";
+import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+function SelectItem2({ children, isSortKey, onClickItem }) {
+  const itemClasses = clsx21(
+    "typography-label14regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02",
+    focusVisible11.inset,
+    {
+      "bg-selectedUi fill-interactive01 text-interactive01": isSortKey,
+      "bg-uiBackground01 fill-icon01 text-interactive02": !isSortKey
+    }
+  );
+  return /* @__PURE__ */ jsx27("li", { className: "flex w-full items-center", onClick: onClickItem, children: /* @__PURE__ */ jsxs16("button", { className: itemClasses, type: "button", children: [
+    /* @__PURE__ */ jsx27("span", { className: "ml-1 mr-6", children }),
+    isSortKey && /* @__PURE__ */ jsx27("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx27(Icon, { name: "check", size: "small" }) })
+  ] }) });
+}
+
+// src/select-sort/select-list.tsx
+import { jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
+function SelectList2({ size, variant, sortOrder, onClickItem, onClickDeselect }) {
+  const listClasses = clsx22(
+    "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 = clsx22(
+    "typography-label14regular flex h-8 w-full items-center px-3 text-interactive02 hover:bg-hover02 active:bg-active02",
+    focusVisible12.inset
+  );
+  return /* @__PURE__ */ jsxs17("ul", { className: listClasses, children: [
+    /* @__PURE__ */ jsx28(SelectItem2, { isSortKey: sortOrder === "ascend", onClickItem: () => onClickItem("ascend"), children: "\u6607\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
+    /* @__PURE__ */ jsx28(SelectItem2, { isSortKey: sortOrder === "descend", onClickItem: () => onClickItem("descend"), children: "\u964D\u9806\u3067\u4E26\u3073\u66FF\u3048" }),
+    sortOrder !== null && onClickDeselect && /* @__PURE__ */ jsx28("li", { children: /* @__PURE__ */ jsx28("button", { className: deselectButtonClasses, type: "button", onClick: onClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
+  ] });
+}
+
+// src/select-sort/select-sort.tsx
+import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
+function SelectSort({
+  size = "medium",
+  variant = "outline",
+  width,
+  label,
+  sortOrder,
+  isDisabled = false,
+  isSortKey = false,
+  onChange,
+  onClickDeselect
+}) {
+  const [isOptionListOpen, setIsOptionListOpen] = useState7(false);
+  const targetRef = useRef4(null);
+  useOutsideClick(targetRef, () => setIsOptionListOpen(false));
+  const handleClickToggle = () => setIsOptionListOpen((prev) => !prev);
+  const handleClickItem = useCallback5(
+    (value) => {
+      onChange?.(value);
+      setIsOptionListOpen(false);
+    },
+    [onChange]
+  );
+  const wrapperClasses = clsx23("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 = clsx23(
+    "flex size-full items-center rounded",
+    buttonColors5[variant].hover,
+    buttonColors5[variant].active,
+    buttonColors5[variant].disabled,
+    focusVisible13.normal,
+    {
+      [buttonColors5[variant].selected]: isSortKey,
+      [buttonColors5[variant].base]: !isSortKey,
+      "px-2": size === "x-small" || size === "small",
+      "px-4": size === "medium" || size === "large",
+      "pointer-events-none": isDisabled
+    }
+  );
+  const labelClasses = clsx23("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__ */ jsxs18("div", { className: wrapperClasses, style: { width }, ref: targetRef, children: [
+    /* @__PURE__ */ jsxs18("button", { className: buttonClasses, type: "button", onClick: handleClickToggle, disabled: isDisabled, children: [
+      /* @__PURE__ */ jsx29("div", { className: labelClasses, children: label }),
+      /* @__PURE__ */ jsx29("div", { className: "ml-auto flex items-center", children: isSortKey ? /* @__PURE__ */ jsx29(
+        Icon,
+        {
+          name: sortOrder === "ascend" ? "arrow-up" : "arrow-down",
+          size: size === "large" ? "medium" : "small"
+        }
+      ) : /* @__PURE__ */ jsx29(
+        Icon,
+        {
+          name: isOptionListOpen ? "angle-small-up" : "angle-small-down",
+          size: size === "large" ? "medium" : "small"
+        }
+      ) })
+    ] }),
+    isOptionListOpen && !isDisabled && /* @__PURE__ */ jsx29(
+      SelectList2,
+      {
+        size,
+        variant,
+        sortOrder,
+        onClickItem: handleClickItem,
+        onClickDeselect
+      }
+    )
+  ] });
+}
+
+// src/tab/tab-item.tsx
+import { clsx as clsx24 } from "clsx";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var TabItem = ({ isSelected = false, ...props }) => {
+  const classes = clsx24(
+    "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__ */ jsx30(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      "aria-selected": isSelected,
+      className: classes,
+      disabled: props.isDisabled,
+      onClick: () => props.onClick(props.id),
+      children: props.children
+    }
+  );
+};
+
+// src/tab/tab.tsx
+import { jsx as jsx31 } from "react/jsx-runtime";
+function Tab({ children }) {
+  return /* @__PURE__ */ jsx31(
+    "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;
+
+// src/table/table-cell.tsx
+import clsx25 from "clsx";
+import { jsx as jsx32 } from "react/jsx-runtime";
+function TableCell({ children, className, isHeader = false }) {
+  const classes = clsx25("border-b border-uiBorder01", { "sticky top-0 z-10 bg-white": isHeader }, className);
+  return /* @__PURE__ */ jsx32("div", { className: classes, children });
+}
+
+// src/table/table-row.tsx
+import clsx26 from "clsx";
+import { jsx as jsx33 } from "react/jsx-runtime";
+function TableRow({ children, isHoverBackgroundVisible = false }) {
+  const rowClasses = clsx26("contents", isHoverBackgroundVisible && "[&:hover>div]:bg-hoverUi02");
+  return /* @__PURE__ */ jsx33("div", { className: rowClasses, children });
+}
+
+// src/table/table.tsx
+import { jsx as jsx34 } from "react/jsx-runtime";
+function Table({
+  width,
+  templateRows,
+  templateColumns,
+  autoColumns,
+  autoRows,
+  children
+}) {
+  return /* @__PURE__ */ jsx34(
+    "div",
+    {
+      className: "grid",
+      style: {
+        width,
+        gridTemplateRows: templateRows,
+        gridTemplateColumns: templateColumns,
+        gridAutoColumns: autoColumns,
+        gridAutoRows: autoRows
+      },
+      children
+    }
+  );
+}
+Table.Row = TableRow;
+Table.Cell = TableCell;
+
+// src/tag/tag.tsx
+import { tagColors, tagLightColors } from "@zenkigen-inc/component-theme";
+import clsx28 from "clsx";
+
+// src/tag/delete-icon.tsx
+import { focusVisible as focusVisible14 } from "@zenkigen-inc/component-theme";
+import clsx27 from "clsx";
+import { jsx as jsx35 } from "react/jsx-runtime";
+var DeleteIcon = ({ color, variant, onClick }) => {
+  const deleteButtonClasses = clsx27(
+    "group ml-2 size-[14px] rounded-full p-0.5 hover:cursor-pointer hover:bg-iconOnColor focus-visible:bg-iconOnColor",
+    focusVisible14.normal
+  );
+  const deletePathClasses = clsx27({
+    "fill-interactive02": color === "gray" || variant === "light",
+    "group-hover:fill-interactive02 group-focus-visible:fill-interactive02 fill-iconOnColor": color !== "gray"
+  });
+  return /* @__PURE__ */ jsx35("button", { type: "button", className: deleteButtonClasses, onClick, children: /* @__PURE__ */ jsx35("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx35(
+    "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
+import { jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
+function Tag({ id, children, color, variant = "normal", size = "medium", isEditable, onDelete }) {
+  const wrapperClasses = clsx28("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,
+    rounded: !isEditable,
+    "py-0.5 px-1": !isEditable,
+    "py-1 px-2": isEditable
+  });
+  return /* @__PURE__ */ jsxs19("div", { className: wrapperClasses, children: [
+    children,
+    isEditable ? /* @__PURE__ */ jsx36(DeleteIcon, { onClick: () => onDelete(id), color, variant }) : null
+  ] });
+}
+
+// src/text-area/text-area.tsx
+import { clsx as clsx29 } from "clsx";
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx37 } from "react/jsx-runtime";
+var TextArea = forwardRef2(
+  ({
+    size = "medium",
+    isResizable = false,
+    autoHeight = false,
+    maxHeight,
+    isError = false,
+    disabled = false,
+    height,
+    ...props
+  }, ref) => {
+    const classes = clsx29(
+      "w-full rounded border outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder",
+      {
+        "border-supportError": isError && !disabled,
+        "hover:border-hoverInput": !disabled && !isError,
+        "border-uiBorder02 hover:focus-within:border-activeInput focus-within:border-activeInput text-text01": !isError,
+        "bg-disabled02 border-disabled01": disabled,
+        "typography-body14regular px-2 pt-1.5 pb-2": size === "medium",
+        "text-4 leading-normal px-3.5 py-2.5": size === "large",
+        "field-sizing-content": autoHeight,
+        "text-supportError": isError,
+        "resize-none": !isResizable
+      }
+    );
+    return /* @__PURE__ */ jsx37("div", { className: "flex", children: /* @__PURE__ */ jsx37(
+      "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
+import { clsx as clsx30 } from "clsx";
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
+var TextInput = forwardRef3(
+  ({ size = "medium", isError = false, disabled = false, onClickClearButton, ...props }, ref) => {
+    const isShowClearButton = !!onClickClearButton && props.value.length !== 0 && !disabled;
+    const inputWrapClasses = clsx30("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 = clsx30("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__ */ jsxs20("div", { className: inputWrapClasses, children: [
+      /* @__PURE__ */ jsx38("input", { ref, size: 1, className: inputClasses, disabled, onChange: props.onChange, ...props }),
+      isShowClearButton && /* @__PURE__ */ jsx38(IconButton, { variant: "text", icon: "close", size: "small", onClick: onClickClearButton })
+    ] });
+  }
+);
+TextInput.displayName = "TextInput";
+
+// src/toast/toast.tsx
+import clsx31 from "clsx";
+import { useCallback as useCallback6, useEffect as useEffect3, useState as useState8 } from "react";
+import { jsx as jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
+var CLOSE_TIME_MSEC = 5e3;
+function Toast({
+  state = "information",
+  width = "auto",
+  isAutoClose = false,
+  isAnimation = false,
+  children,
+  onClickClose
+}) {
+  const [isRemoving, setIsRemoving] = useState8(false);
+  const handleClose = useCallback6(() => {
+    if (isAnimation) {
+      setIsRemoving(true);
+    } else {
+      onClickClose();
+    }
+  }, [isAnimation, onClickClose]);
+  const handleAnimationEnd = (e) => window.getComputedStyle(e.currentTarget).opacity === "0" && onClickClose();
+  const wrapperClasses = clsx31("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 = clsx31("flex items-center", {
+    "fill-supportSuccess": state === "success",
+    "fill-supportError": state === "error",
+    "fill-supportWarning": state === "warning",
+    "fill-supportInfo": state === "information"
+  });
+  const textClasses = clsx31("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"
+  };
+  useEffect3(() => {
+    const timer = window.setTimeout(() => {
+      if (isAutoClose) {
+        setIsRemoving(true);
+      }
+    }, CLOSE_TIME_MSEC);
+    return () => window.clearTimeout(timer);
+  }, [isAutoClose]);
+  return /* @__PURE__ */ jsxs21("div", { className: wrapperClasses, style: { width }, onAnimationEnd: handleAnimationEnd, children: [
+    /* @__PURE__ */ jsx39("div", { className: iconClasses, children: /* @__PURE__ */ jsx39(Icon, { name: iconName[state] }) }),
+    /* @__PURE__ */ jsx39("p", { className: textClasses, children }),
+    /* @__PURE__ */ jsx39(IconButton, { icon: "close", size: "medium", variant: "text", onClick: handleClose, isNoPadding: true })
+  ] });
+}
+
+// src/toast/toast-provider.tsx
+import { createContext as createContext5, useCallback as useCallback7, useContext as useContext7, useEffect as useEffect4, useState as useState9 } from "react";
+import { createPortal as createPortal3 } from "react-dom";
+import { jsx as jsx40, jsxs as jsxs22 } from "react/jsx-runtime";
+var ToastContext = createContext5({});
+var ToastProvider = ({ children }) => {
+  const [isClientRender, setIsClientRender] = useState9(false);
+  const [toasts, setToasts] = useState9([]);
+  const addToast = useCallback7(({ message, state }) => {
+    setToasts((prev) => [...prev, { id: Math.trunc(Math.random() * 1e5), message, state }]);
+  }, []);
+  const removeToast = useCallback7((id) => {
+    setToasts((prev) => prev.filter((snackbar) => snackbar.id !== id));
+  }, []);
+  useEffect4(() => {
+    setIsClientRender(true);
+  }, []);
+  return /* @__PURE__ */ jsxs22(ToastContext.Provider, { value: { addToast, removeToast }, children: [
+    children,
+    isClientRender && createPortal3(
+      /* @__PURE__ */ jsx40("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__ */ jsx40(Toast, { state, isAutoClose: true, isAnimation: true, onClickClose: () => removeToast(id), width: 475, children: message }, id)) }),
+      document.body
+    )
+  ] });
+};
+var useToast = () => {
+  return useContext7(ToastContext);
+};
+
+// src/toggle/toggle.tsx
+import clsx32 from "clsx";
+import { jsx as jsx41, jsxs as jsxs23 } from "react/jsx-runtime";
+function Toggle({
+  id,
+  size = "medium",
+  isChecked,
+  onChange,
+  label,
+  labelPosition = "right",
+  isDisabled = false
+}) {
+  const baseClasses = clsx32("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 = clsx32(
+    "peer absolute inset-0 z-[1] opacity-0",
+    isDisabled ? "cursor-not-allowed" : "cursor-pointer"
+  );
+  const indicatorClasses = clsx32("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 = clsx32("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__ */ jsxs23("div", { className: "relative flex flex-[0_0_auto] items-center", children: [
+    label != null && labelPosition === "left" && /* @__PURE__ */ jsx41("label", { htmlFor: id, className: labelClasses, children: label }),
+    /* @__PURE__ */ jsx41(
+      "input",
+      {
+        className: inputClasses,
+        type: "checkbox",
+        name: id,
+        id,
+        checked: isChecked,
+        onChange,
+        disabled: isDisabled
+      }
+    ),
+    /* @__PURE__ */ jsx41("div", { className: baseClasses, children: /* @__PURE__ */ jsx41("span", { className: indicatorClasses }) }),
+    label != null && labelPosition === "right" && /* @__PURE__ */ jsx41("label", { htmlFor: id, className: labelClasses, children: label })
+  ] });
+}
+
+// src/tooltip/tooltip.tsx
+import { useCallback as useCallback9, useEffect as useEffect5, useRef as useRef5, useState as useState10 } from "react";
+import { createPortal as createPortal4 } from "react-dom";
+
+// src/tooltip/tooltip.hook.ts
+import { useCallback as useCallback8 } from "react";
+var useTooltip = () => {
+  const calculatePosition = useCallback8(
+    (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
+  };
+};
+
+// src/tooltip/tooltip-content.tsx
+import clsx34 from "clsx";
+
+// src/tooltip/tail-icon.tsx
+import clsx33 from "clsx";
+import { jsx as jsx42 } from "react/jsx-runtime";
+var TailIcon = (props) => {
+  const tailClasses = clsx33("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__ */ jsx42("svg", { className: tailClasses, width: "8", height: "4", viewBox: "0 0 8 4", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx42("path", { d: "M4 4L0 0H8L4 4Z" }) });
+  } else {
+    return /* @__PURE__ */ jsx42(
+      "svg",
+      {
+        className: tailClasses,
+        width: "14",
+        height: "8",
+        viewBox: "0 0 14 8",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /* @__PURE__ */ jsx42("path", { d: "M7 8L0 0H14L7 8Z" })
+      }
+    );
+  }
+};
+
+// src/tooltip/tooltip-content.tsx
+import { jsx as jsx43, jsxs as jsxs24 } from "react/jsx-runtime";
+var TooltipContent = ({
+  content,
+  horizontalAlign,
+  verticalPosition,
+  size,
+  tooltipPosition,
+  maxWidth,
+  isPortal = false
+}) => {
+  const tooltipWrapperClasses = clsx34("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 = clsx34(
+    "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__ */ jsx43("div", { className: tooltipWrapperClasses, style: tooltipWrapperStyle, children: /* @__PURE__ */ jsxs24(
+    "div",
+    {
+      className: tooltipBodyClasses,
+      style: {
+        maxWidth
+      },
+      children: [
+        content,
+        /* @__PURE__ */ jsx43(TailIcon, { size, verticalPosition, horizontalAlign })
+      ]
+    }
+  ) });
+};
+
+// src/tooltip/tooltip.tsx
+import { jsx as jsx44, jsxs as jsxs25 } from "react/jsx-runtime";
+function Tooltip({
+  children,
+  content,
+  size = "small",
+  maxWidth,
+  verticalPosition = "bottom",
+  horizontalAlign = "center",
+  isDisabledHover = false,
+  portalTarget
+}) {
+  const { calculatePosition } = useTooltip();
+  const [isVisible, setIsVisible] = useState10(false);
+  const [tooltipPosition, setTooltipPosition] = useState10({
+    maxWidth: "none",
+    width: "auto",
+    left: "0px",
+    top: "0px",
+    bottom: "0px",
+    translateX: "0",
+    translateY: "0"
+  });
+  const targetRef = useRef5(null);
+  const handleMouseOverWrapper = useCallback9(() => {
+    if (isDisabledHover) {
+      return;
+    }
+    setIsVisible(true);
+  }, [isDisabledHover]);
+  const handleMouseOutWrapper = useCallback9(() => {
+    setIsVisible(false);
+  }, []);
+  useEffect5(() => {
+    if (targetRef.current === null) return;
+    const dimensions = targetRef.current?.getBoundingClientRect();
+    const position = calculatePosition({ dimensions, maxWidth, verticalPosition, horizontalAlign, tooltipSize: size });
+    setTooltipPosition(position);
+  }, [calculatePosition, horizontalAlign, maxWidth, size, verticalPosition]);
+  return /* @__PURE__ */ jsxs25(
+    "div",
+    {
+      ref: targetRef,
+      className: "relative flex items-center justify-center",
+      onMouseOver: handleMouseOverWrapper,
+      onMouseLeave: handleMouseOutWrapper,
+      children: [
+        children,
+        isVisible && (portalTarget == null ? /* @__PURE__ */ jsx44(
+          TooltipContent,
+          {
+            content,
+            size,
+            maxWidth,
+            verticalPosition,
+            horizontalAlign,
+            tooltipPosition
+          }
+        ) : createPortal4(
+          /* @__PURE__ */ jsx44(
+            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
+};