@zenkigen-inc/component-ui 1.15.1 → 1.15.2

package/dist/index.esm.js

@@ -1,2147 +0,0 @@
-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];
-  }
-  return t;
-}
-
-var _excluded$8 = ["size"];
-var isAsciiString = function isAsciiString(str) {
-  return str.charCodeAt(0) < 256;
-};
-function Avatar(_ref) {
-  var _props$userId, _props$isDisabled, _clsx;
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
-  var classes = clsx('flex items-center justify-center rounded-full text-textOnColor', (_clsx = {
-    '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
-  }, _clsx[userColors[((_props$userId = props.userId) != null ? _props$userId : 0) % userColors.length]] = props.userId != null && !((_props$isDisabled = props.isDisabled) != null ? _props$isDisabled : false), _clsx));
-  var trimmedFirstName = props.firstName.replace('　', ' ').trim();
-  var trimmedLastName = props.lastName.replace('　', ' ').trim().trim();
-  var 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
-  });
-}
-
-var BreadcrumbItem = function BreadcrumbItem(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/jsx("li", {
-    className: "flex gap-2 after:content-['/'] last:after:content-none [&_a]:text-interactive02 [&_a]:hover:underline",
-    children: children
-  });
-};
-
-function Breadcrumb(_ref) {
-  var children = _ref.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
-    })
-  });
-}
-Breadcrumb.Item = BreadcrumbItem;
-
-var _excluded$7 = ["size", "variant", "isDisabled", "isSelected", "width", "borderRadius", "justifyContent", "before", "after", "elementAs", "children"];
-var Button = function Button(_ref) {
-  var _clsx;
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'fill' : _ref$variant,
-    isDisabled = _ref.isDisabled,
-    _ref$isSelected = _ref.isSelected,
-    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
-    width = _ref.width,
-    borderRadius = _ref.borderRadius,
-    _ref$justifyContent = _ref.justifyContent,
-    justifyContent = _ref$justifyContent === void 0 ? 'center' : _ref$justifyContent,
-    before = _ref.before,
-    after = _ref.after,
-    elementAs = _ref.elementAs,
-    children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
-  var baseClasses = clsx('flex shrink-0 items-center gap-1', buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, (_clsx = {
-    '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'
-  }, _clsx[buttonColors[variant].selected] = isSelected, _clsx[buttonColors[variant].base] = !isSelected, _clsx['hover:text-textOnColor active:text-textOnColor [&:hover>*]:fill-iconOnColor [&:active>*]:fill-iconOnColor'] = isSelected && variant !== 'outline' && variant !== 'text', _clsx['pointer-events-none'] = isDisabled, _clsx['rounded-button'] = borderRadius == null, _clsx['justify-start'] = justifyContent === 'start', _clsx['justify-center'] = justifyContent === 'center', _clsx['typography-label16regular'] = size === 'large', _clsx['typography-label14regular'] = size !== 'large', _clsx));
-  var Component = elementAs != null ? elementAs : 'button';
-  return /*#__PURE__*/jsxs(Component, _extends({
-    className: baseClasses,
-    style: {
-      width: width,
-      borderRadius: borderRadius
-    },
-    disabled: isDisabled
-  }, props, {
-    children: [before, children, after]
-  }));
-};
-
-var CheckedIcon = function 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"
-    })
-  });
-};
-
-var MinusIcon = function 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"
-    })
-  });
-};
-
-function Checkbox(_ref) {
-  var name = _ref.name,
-    value = _ref.value,
-    id = _ref.id,
-    _ref$isChecked = _ref.isChecked,
-    isChecked = _ref$isChecked === void 0 ? false : _ref$isChecked,
-    _ref$isIndeterminate = _ref.isIndeterminate,
-    isIndeterminate = _ref$isIndeterminate === void 0 ? false : _ref$isIndeterminate,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    onChange = _ref.onChange,
-    label = _ref.label,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'default' : _ref$color;
-  var _useState = useState(false),
-    isMouseOver = _useState[0],
-    setIsMouseOver = _useState[1];
-  var handleMouseOverInput = useCallback(function () {
-    setIsMouseOver(true);
-  }, []);
-  var handleMouseOutInput = useCallback(function () {
-    setIsMouseOver(false);
-  }, []);
-  var handleChange = useCallback(function (e) {
-    return !isDisabled && (onChange == null ? void 0 : onChange(e));
-  }, [isDisabled, onChange]);
-  var baseInputClasses = clsx$1('peer absolute z-[1] size-5 opacity-0', {
-    'cursor-not-allowed': isDisabled,
-    'cursor-pointer': !isDisabled
-  });
-  var 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'
-  });
-  var indicatorClasses = clsx$1('relative flex size-5 flex-[0_0_auto] items-center justify-center', {
-    'bg-disabled01': isDisabled && isChecked,
-    'border-disabled01': isDisabled
-  });
-  var 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
-  });
-  var hoverIndicatorClasses = clsx$1('inline-block size-3 rounded-[1px]', {
-    'bg-hoverUi': !isDisabled && !isChecked && isMouseOver
-  });
-  var 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
-    })]
-  });
-}
-
-var useOutsideClick = function useOutsideClick(ref, handler, enabled) {
-  if (enabled === void 0) {
-    enabled = true;
-  }
-  useEffect(function () {
-    var listener = function listener(event) {
-      var _event$target;
-      var 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))) {
-        return;
-      }
-      handler(event);
-    };
-    if (enabled) {
-      document.addEventListener('click', listener);
-    }
-    return function () {
-      return document.removeEventListener('click', listener);
-    };
-  }, [ref, enabled, handler]);
-};
-
-var _excluded$6 = ["size", "isDisabled"];
-var Icon = function Icon(_ref) {
-  var _clsx;
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
-  var classes = clsx('inline-block shrink-0', (_clsx = {
-    'fill-disabled01': isDisabled
-  }, _clsx[iconColors.icon01] = !isDisabled && props.color === 'icon01', _clsx[iconColors.icon02] = !isDisabled && props.color === 'icon02', _clsx[iconColors.icon03] = !isDisabled && props.color === 'icon03', _clsx[iconColors.iconOnColor] = !isDisabled && props.color === 'iconOnColor', _clsx['w-3 h-3'] = size === 'x-small', _clsx['w-4 h-4'] = size === 'small', _clsx['w-6 h-6'] = size === 'medium', _clsx['w-8 h-8'] = size === 'large', _clsx['w-10 h-10'] = size === 'x-large', _clsx), props.className);
-  return /*#__PURE__*/jsx("span", {
-    className: classes,
-    children: iconElements[props.name]
-  });
-};
-
-var DropdownContext = /*#__PURE__*/createContext({
-  isVisible: false,
-  setIsVisible: function setIsVisible() {
-    return false;
-  },
-  isDisabled: false,
-  targetDimensions: {
-    width: 0,
-    height: 0
-  },
-  variant: 'outline'
-});
-
-function DropdownItem(_ref) {
-  var children = _ref.children,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'gray' : _ref$color,
-    onClick = _ref.onClick;
-  var _useContext = useContext(DropdownContext),
-    setIsVisible = _useContext.setIsVisible;
-  var handleClickItem = function handleClickItem(event) {
-    setIsVisible(false);
-    onClick == null || onClick(event);
-  };
-  var 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
-    })
-  });
-}
-
-function DropdownMenu(_ref) {
-  var children = _ref.children,
-    maxHeight = _ref.maxHeight,
-    _ref$isNoPadding = _ref.isNoPadding,
-    isNoPadding = _ref$isNoPadding === void 0 ? false : _ref$isNoPadding,
-    _ref$verticalPosition = _ref.verticalPosition,
-    verticalPosition = _ref$verticalPosition === void 0 ? 'bottom' : _ref$verticalPosition,
-    _ref$horizontalAlign = _ref.horizontalAlign,
-    horizontalAlign = _ref$horizontalAlign === void 0 ? 'left' : _ref$horizontalAlign;
-  var _useContext = useContext(DropdownContext),
-    isVisible = _useContext.isVisible,
-    isDisabled = _useContext.isDisabled,
-    targetDimensions = _useContext.targetDimensions,
-    variant = _useContext.variant,
-    portalTargetRef = _useContext.portalTargetRef;
-  var wrapperClasses = clsx$1('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: maxHeight
-    },
-    children: children
-  });
-}
-
-function Dropdown(_ref) {
-  var children = _ref.children,
-    target = _ref.target,
-    label = _ref.label,
-    icon = _ref.icon,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'outline' : _ref$variant,
-    title = _ref.title,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    _ref$isArrowHidden = _ref.isArrowHidden,
-    isArrowHidden = _ref$isArrowHidden === void 0 ? false : _ref$isArrowHidden,
-    portalTargetRef = _ref.portalTargetRef;
-  var _useState = useState(false),
-    isVisible = _useState[0],
-    setIsVisible = _useState[1];
-  var _useState2 = useState({
-      width: 0,
-      height: 0
-    }),
-    targetDimensions = _useState2[0],
-    setTargetDimensions = _useState2[1];
-  var targetRef = useRef(null);
-  useOutsideClick(targetRef, function () {
-    return setIsVisible(false);
-  });
-  var handleToggle = useCallback(function () {
-    if (targetRef.current === null) {
-      return;
-    }
-    if (isVisible) {
-      setIsVisible(false);
-    } else {
-      var dimensions = targetRef.current.getBoundingClientRect();
-      var calculatedDimensions = {
-        width: dimensions.right - dimensions.left,
-        height: dimensions.bottom - dimensions.top
-      };
-      setTargetDimensions(calculatedDimensions);
-      setIsVisible(true);
-    }
-  }, [isVisible]);
-  var wrapperClasses = clsx$1('relative flex shrink-0 items-center gap-1 rounded', {
-    'cursor-not-allowed': isDisabled
-  });
-  var 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'
-  });
-  var 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'
-  });
-  var 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: isVisible,
-      setIsVisible: setIsVisible,
-      isDisabled: isDisabled,
-      targetDimensions: targetDimensions,
-      variant: variant,
-      portalTargetRef: 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)]
-    })
-  });
-}
-Dropdown.Menu = DropdownMenu;
-Dropdown.Item = DropdownItem;
-
-function EvaluationStar(_ref) {
-  var value = _ref.value,
-    _ref$isEditable = _ref.isEditable,
-    isEditable = _ref$isEditable === void 0 ? false : _ref$isEditable,
-    onChangeRating = _ref.onChangeRating,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size;
-  var maxRating = 5;
-  var _useState = useState(value),
-    currentRating = _useState[0],
-    setCurrentRating = _useState[1];
-  var handleChangeRating = useCallback(function (newRating) {
-    if (isEditable) {
-      setCurrentRating(newRating);
-      if (onChangeRating) {
-        onChangeRating(newRating);
-      }
-    }
-  }, [isEditable, onChangeRating]);
-  var starClasses = clsx$1(focusVisible.inset, {
-    'w-6 h-6': size === 'large',
-    'w-4 h-4': size === 'medium'
-  });
-  // 各評価のレンダリングロジックを分離（React Hooksのルールに準拠）
-  var renderStar = function renderStar(rating) {
-    var color = rating <= currentRating ? 'fill-yellow-yellow50' : 'fill-icon03';
-    return /*#__PURE__*/jsx("button", {
-      type: "button",
-      onClick: function onClick() {
-        return handleChangeRating(rating);
-      },
-      className: clsx$1(color, starClasses),
-      disabled: !isEditable,
-      children: iconElements['star-filled']
-    }, rating);
-  };
-  // 宣言的な方法で評価の配列を生成
-  var ratingStars = Array.from({
-    length: maxRating
-  }, function (_, index) {
-    return renderStar(index + 1);
-  });
-  return /*#__PURE__*/jsx("span", {
-    className: "flex flex-row",
-    children: ratingStars
-  });
-}
-
-function Heading(props) {
-  var TagName = "h" + props.level;
-  var 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]
-  });
-}
-
-var _excluded$5 = ["size", "variant", "isNoPadding", "isDisabled"];
-function IconButton(_ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'outline' : _ref$variant,
-    _ref$isNoPadding = _ref.isNoPadding,
-    isNoPadding = _ref$isNoPadding === void 0 ? false : _ref$isNoPadding,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
-  var 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
-  });
-  var 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
-      })
-    });
-  } else {
-    return /*#__PURE__*/jsx("button", {
-      type: "button",
-      className: baseClasses,
-      disabled: isDisabled,
-      onClick: props.onClick,
-      children: /*#__PURE__*/jsx(Icon, {
-        name: props.icon,
-        size: iconSize
-      })
-    });
-  }
-}
-
-function Loading(_ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    _ref$position = _ref.position,
-    position = _ref$position === void 0 ? 'fixed' : _ref$position,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? '100%' : _ref$height;
-  var wrapperClasses = clsx$1(position, 'left-0 top-0 z-20 flex w-full items-center justify-center');
-  var 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: 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"
-        })
-      })]
-    })
-  });
-}
-
-/**
- * モーダル表示時にバックグラウンドのスクロールを防止するコンポーネント。
- * コンポーネントがマウントされている間、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>
- *       )}
- *     </>
- *   );
- * };
- */
-var BodyScrollLock = function BodyScrollLock() {
-  useLayoutEffect(function () {
-    // 現在の縦横スクロール位置を記録
-    var _window = window,
-      scrollX = _window.scrollX,
-      scrollY = _window.scrollY;
-    var _document = document,
-      body = _document.body;
-    // スクロールバーの有無と幅を検出
-    var hasVerticalScrollbar = document.documentElement.scrollHeight > document.documentElement.clientHeight;
-    var scrollbarWidth = hasVerticalScrollbar ? window.innerWidth - document.documentElement.clientWidth : 0;
-    // 元のインラインスタイルの値を保存
-    var 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';
-    // スクロールバーがある場合、その幅分だけpadding-rightを調整
-    if (hasVerticalScrollbar && scrollbarWidth > 0) {
-      // 現在のpadding-rightの値を取得
-      var _window$getComputedSt = window.getComputedStyle(body),
-        paddingRight = _window$getComputedSt.paddingRight;
-      var paddingRightValue = paddingRight !== '' ? parseInt(paddingRight, 10) : 0;
-      // スクロールバーの幅を加算
-      body.style.paddingRight = paddingRightValue + scrollbarWidth + "px";
-    }
-    // クリーンアップ関数
-    return function () {
-      // 元のスタイル値を取得
-      var position = originalInlineStyles.position,
-        top = originalInlineStyles.top,
-        left = originalInlineStyles.left,
-        width = originalInlineStyles.width,
-        overflow = originalInlineStyles.overflow,
-        paddingRight = originalInlineStyles.paddingRight;
-      // プロパティごとに元の値を復元
-      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 !== '') {
-    element.style.setProperty(property, value);
-  } else {
-    element.style.removeProperty(property);
-  }
-}
-
-function ModalBody(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/jsx("div", {
-    className: "overflow-y-auto",
-    children: children
-  });
-}
-
-var ModalContext = /*#__PURE__*/createContext({
-  onClose: function onClose() {
-    return null;
-  }
-});
-
-function ModalFooter(_ref) {
-  var children = _ref.children,
-    _ref$isNoBorder = _ref.isNoBorder,
-    isNoBorder = _ref$isNoBorder === void 0 ? false : _ref$isNoBorder;
-  var 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
-  });
-}
-
-function ModalHeader(_ref) {
-  var children = _ref.children,
-    _ref$isNoBorder = _ref.isNoBorder,
-    isNoBorder = _ref$isNoBorder === void 0 ? false : _ref$isNoBorder;
-  var _useContext = useContext(ModalContext),
-    onClose = _useContext.onClose;
-  var 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
-    })]
-  });
-}
-
-var LIMIT_WIDTH = 320;
-var LIMIT_HEIGHT = 184;
-function Modal(_ref) {
-  var children = _ref.children,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? 480 : _ref$width,
-    height = _ref.height,
-    isOpen = _ref.isOpen,
-    onClose = _ref.onClose,
-    portalTargetRef = _ref.portalTargetRef;
-  var _useState = useState(false),
-    isMounted = _useState[0],
-    setIsMounted = _useState[1];
-  var renderWidth = typeof width === 'number' ? Math.max(width, LIMIT_WIDTH) : width;
-  var renderHeight = typeof height === 'number' ? Math.max(height, LIMIT_HEIGHT) : height;
-  useEffect(function () {
-    setIsMounted(true);
-  }, []);
-  return isMounted && isOpen ? /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(BodyScrollLock, {}), /*#__PURE__*/createPortal(/*#__PURE__*/jsx(ModalContext.Provider, {
-      value: {
-        onClose: 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", {
-          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;
-}
-Modal.Body = ModalBody;
-Modal.Header = ModalHeader;
-Modal.Footer = ModalFooter;
-
-var _excluded$4 = ["state", "size"];
-function NotificationInline(_ref) {
-  var _ref$state = _ref.state,
-    state = _ref$state === void 0 ? 'default' : _ref$state,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-  var 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'
-  });
-  var iconClasses = clsx('flex items-center', {
-    'fill-supportError': state === 'attention',
-    'fill-supportWarning': state === 'warning',
-    'fill-blue-blue50': state === 'information',
-    'fill-supportSuccess': state === 'success'
-  });
-  var iconName = {
-    attention: 'attention',
-    success: 'success-filled',
-    warning: 'warning',
-    information: 'information-filled'
-  };
-  var iconSize = {
-    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"
-      })
-    })]
-  });
-}
-
-var PaginationContext = /*#__PURE__*/createContext({
-  currentPage: 0
-});
-
-function PaginationButton(_ref) {
-  var page = _ref.page,
-    _onClick = _ref.onClick;
-  var _useContext = useContext(PaginationContext),
-    currentPage = _useContext.currentPage;
-  var 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: function onClick() {
-      return _onClick(page);
-    },
-    children: page
-  });
-}
-
-var START_PAGE = 1;
-function Pagination(_ref) {
-  var currentPage = _ref.currentPage,
-    totalPage = _ref.totalPage,
-    _ref$sideNumPagesToSh = _ref.sideNumPagesToShow,
-    sideNumPagesToShow = _ref$sideNumPagesToSh === void 0 ? 3 : _ref$sideNumPagesToSh,
-    _onClick = _ref.onClick;
-  var center = Math.max(currentPage, START_PAGE + 1);
-  center = Math.min(center, totalPage - 1);
-  var start = Math.max(center - sideNumPagesToShow, START_PAGE + 1);
-  var end = Math.min(center + sideNumPagesToShow, totalPage - 1);
-  var offsetStart = center + sideNumPagesToShow >= totalPage ? totalPage - center - sideNumPagesToShow : 0;
-  var offsetEnd = center <= sideNumPagesToShow ? sideNumPagesToShow - center + 1 : 0;
-  var pageList = [];
-  for (var i = start + offsetStart; i <= end + offsetEnd; i++) {
-    pageList.push(i);
-  }
-  var threeDotIconClasses = 'flex h-8 w-8 items-center justify-center gap-1 fill-icon01';
-  return /*#__PURE__*/jsx(PaginationContext.Provider, {
-    value: {
-      currentPage: 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: function onClick() {
-            return _onClick(currentPage - 1);
-          }
-        })
-      }), /*#__PURE__*/jsx("li", {
-        children: /*#__PURE__*/jsx(PaginationButton, {
-          onClick: function onClick() {
-            return _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(function (page, index) {
-        return /*#__PURE__*/jsx("li", {
-          children: /*#__PURE__*/jsx(PaginationButton, {
-            onClick: function onClick() {
-              return _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: function onClick() {
-            return _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: function onClick() {
-            return _onClick(currentPage + 1);
-          }
-        })
-      })]
-    })
-  });
-}
-
-var SelectContext = /*#__PURE__*/createContext({
-  size: 'medium',
-  setIsOptionListOpen: function setIsOptionListOpen() {
-    return false;
-  },
-  variant: 'outline'
-});
-
-function SelectItem$1(_ref) {
-  var option = _ref.option;
-  var _useContext = useContext(SelectContext),
-    setIsOptionListOpen = _useContext.setIsOptionListOpen,
-    selectedOption = _useContext.selectedOption,
-    onChange = _useContext.onChange;
-  var handleClickItem = function handleClickItem(option) {
-    onChange == null || onChange(option);
-    setIsOptionListOpen(false);
-  };
-  var 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: function onClick() {
-        return 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);
-}
-
-function SelectList$1(_ref) {
-  var children = _ref.children,
-    maxHeight = _ref.maxHeight;
-  var ref = useRef(null);
-  var _useContext = useContext(SelectContext),
-    size = _useContext.size,
-    selectedOption = _useContext.selectedOption,
-    setIsOptionListOpen = _useContext.setIsOptionListOpen,
-    variant = _useContext.variant,
-    placeholder = _useContext.placeholder,
-    onChange = _useContext.onChange;
-  var handleClickDeselect = function handleClickDeselect() {
-    onChange == null || onChange(null);
-    setIsOptionListOpen(false);
-  };
-  useLayoutEffect(function () {
-    if (maxHeight != null && ref.current) {
-      var _ref$current$children;
-      var element = Array.from((_ref$current$children = ref.current.children) != null ? _ref$current$children : []).find(function (item) {
-        return item.getAttribute('data-id') === (selectedOption == null ? void 0 : selectedOption.id);
-      });
-      if (element != null && ref.current.scroll != null) {
-        var wrapRect = ref.current.getBoundingClientRect();
-        var 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
-  }, []);
-  var 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'
-  });
-  var 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: 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"
-      })
-    })]
-  });
-}
-
-function Select(_ref) {
-  var _clsx;
-  var children = _ref.children,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'outline' : _ref$variant,
-    width = _ref.width,
-    maxWidth = _ref.maxWidth,
-    placeholder = _ref.placeholder,
-    placeholderIcon = _ref.placeholderIcon,
-    _ref$selectedOption = _ref.selectedOption,
-    selectedOption = _ref$selectedOption === void 0 ? null : _ref$selectedOption,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    _ref$isOptionSelected = _ref.isOptionSelected,
-    isOptionSelected = _ref$isOptionSelected === void 0 ? false : _ref$isOptionSelected,
-    onChange = _ref.onChange,
-    optionListMaxHeight = _ref.optionListMaxHeight;
-  var _useState = useState(false),
-    isOptionListOpen = _useState[0],
-    setIsOptionListOpen = _useState[1];
-  var targetRef = useRef(null);
-  useOutsideClick(targetRef, function () {
-    return setIsOptionListOpen(false);
-  });
-  var handleClickToggle = function handleClickToggle() {
-    return setIsOptionListOpen(function (prev) {
-      return !prev;
-    });
-  };
-  var 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
-  });
-  var buttonClasses = clsx$1('flex size-full items-center rounded', buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, (_clsx = {}, _clsx[buttonColors[variant].selected] = isOptionSelected && !isDisabled && selectedOption, _clsx[buttonColors[variant].base] = !(isOptionSelected && !isDisabled && selectedOption), _clsx['px-2'] = size === 'x-small' || size === 'small', _clsx['px-4'] = size === 'medium' || size === 'large', _clsx['pointer-events-none'] = isDisabled, _clsx));
-  var 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: size,
-      variant: variant,
-      placeholder: placeholder,
-      setIsOptionListOpen: setIsOptionListOpen,
-      selectedOption: selectedOption,
-      onChange: onChange
-    },
-    children: /*#__PURE__*/jsxs("div", {
-      className: wrapperClasses,
-      style: {
-        width: width,
-        maxWidth: maxWidth
-      },
-      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
-      })]
-    })
-  });
-}
-Select.Option = SelectItem$1;
-
-function PaginationSelect(_ref) {
-  var totalSize = _ref.totalSize,
-    currentPage = _ref.currentPage,
-    sizePerPage = _ref.sizePerPage,
-    _ref$countLabel = _ref.countLabel,
-    countLabel = _ref$countLabel === void 0 ? '件' : _ref$countLabel,
-    _ref$pageLabel = _ref.pageLabel,
-    pageLabel = _ref$pageLabel === void 0 ? 'ページ' : _ref$pageLabel,
-    _ref$optionListMaxHei = _ref.optionListMaxHeight,
-    optionListMaxHeight = _ref$optionListMaxHei === void 0 ? 190 : _ref$optionListMaxHei,
-    onClickPrevButton = _ref.onClickPrevButton,
-    onClickNextButton = _ref.onClickNextButton,
-    _onChange = _ref.onChange;
-  var pageMax = Math.ceil(totalSize / sizePerPage);
-  var optionsList = [].concat(Array(pageMax)).map(function (_, index) {
-    var value = (index + 1).toString();
-    return {
-      id: value,
-      value: value,
-      label: value
-    };
-  });
-  var minCount = totalSize ? (currentPage - 1) * sizePerPage + 1 : 0;
-  var 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(function (option) {
-          return option.value === currentPage.toString();
-        }),
-        optionListMaxHeight: optionListMaxHeight,
-        onChange: function onChange(option) {
-          return option && _onChange(Number(option.value));
-        },
-        isDisabled: pageMax === 0,
-        children: optionsList.map(function (option) {
-          return /*#__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
-      })]
-    })]
-  });
-}
-
-function Radio(_ref) {
-  var name = _ref.name,
-    value = _ref.value,
-    id = _ref.id,
-    label = _ref.label,
-    _ref$isChecked = _ref.isChecked,
-    isChecked = _ref$isChecked === void 0 ? false : _ref$isChecked,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    onChange = _ref.onChange;
-  var _useState = useState(false),
-    isMouseOver = _useState[0],
-    setIsMouseOver = _useState[1];
-  var handleMouseOverInput = useCallback(function () {
-    setIsMouseOver(true);
-  }, []);
-  var handleMouseOutInput = useCallback(function () {
-    setIsMouseOver(false);
-  }, []);
-  var handleChange = useCallback(function (e) {
-    return !isDisabled && (onChange == null ? void 0 : onChange(e));
-  }, [isDisabled, onChange]);
-  var inputClasses = clsx$1('peer absolute z-[1] size-6 opacity-0', {
-    'cursor-not-allowed': isDisabled,
-    'cursor-pointer': !isDisabled
-  });
-  var 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
-  });
-  var 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
-  });
-  var hoverIndicatorClasses = clsx$1('inline-block size-3 rounded-full', {
-    'bg-hoverUi': !isDisabled && !isChecked && isMouseOver
-  });
-  var 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
-    })]
-  });
-}
-
-var _excluded$3 = ["width", "size"];
-var Search = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _clsx;
-  var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? '100%' : _ref$width,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-  var 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'
-  });
-  var inputClasses = clsx('mx-2 h-full flex-1 text-text01 outline-0 placeholder:text-textPlaceholder', (_clsx = {}, _clsx['typography-label14regular'] = size === 'medium', _clsx['typography-label16regular'] = size === 'large', _clsx));
-  return /*#__PURE__*/jsx("div", {
-    className: "relative",
-    ref: ref,
-    children: /*#__PURE__*/jsx("form", {
-      onSubmit: props.onSubmit,
-      children: /*#__PURE__*/jsxs("div", {
-        className: classes,
-        style: {
-          width: 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
-        })]
-      })
-    })
-  });
-});
-Search.displayName = 'Search';
-
-function SelectItem(_ref) {
-  var children = _ref.children,
-    isSortKey = _ref.isSortKey,
-    onClickItem = _ref.onClickItem;
-  var 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"
-        })
-      })]
-    })
-  });
-}
-
-function SelectList(_ref) {
-  var size = _ref.size,
-    variant = _ref.variant,
-    sortOrder = _ref.sortOrder,
-    _onClickItem = _ref.onClickItem,
-    onClickDeselect = _ref.onClickDeselect;
-  var 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'
-  });
-  var 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: function onClickItem() {
-        return _onClickItem('ascend');
-      },
-      children: "\u6607\u9806\u3067\u4E26\u3073\u66FF\u3048"
-    }), /*#__PURE__*/jsx(SelectItem, {
-      isSortKey: sortOrder === 'descend',
-      onClickItem: function onClickItem() {
-        return _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"
-      })
-    })]
-  });
-}
-
-function SelectSort(_ref) {
-  var _clsx;
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'outline' : _ref$variant,
-    width = _ref.width,
-    label = _ref.label,
-    sortOrder = _ref.sortOrder,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    _ref$isSortKey = _ref.isSortKey,
-    isSortKey = _ref$isSortKey === void 0 ? false : _ref$isSortKey,
-    onChange = _ref.onChange,
-    onClickDeselect = _ref.onClickDeselect;
-  var _useState = useState(false),
-    isOptionListOpen = _useState[0],
-    setIsOptionListOpen = _useState[1];
-  var targetRef = useRef(null);
-  useOutsideClick(targetRef, function () {
-    return setIsOptionListOpen(false);
-  });
-  var handleClickToggle = function handleClickToggle() {
-    return setIsOptionListOpen(function (prev) {
-      return !prev;
-    });
-  };
-  var handleClickItem = useCallback(function (value) {
-    onChange == null || onChange(value);
-    setIsOptionListOpen(false);
-  }, [onChange]);
-  var 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
-  });
-  var buttonClasses = clsx$1('flex size-full items-center rounded', buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, (_clsx = {}, _clsx[buttonColors[variant].selected] = isSortKey, _clsx[buttonColors[variant].base] = !isSortKey, _clsx['px-2'] = size === 'x-small' || size === 'small', _clsx['px-4'] = size === 'medium' || size === 'large', _clsx['pointer-events-none'] = isDisabled, _clsx));
-  var 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: width
-    },
-    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
-    })]
-  });
-}
-
-var _excluded$2 = ["isSelected"];
-var TabItem = function TabItem(_ref) {
-  var _ref$isSelected = _ref.isSelected,
-    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-  var 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: function onClick() {
-      return props.onClick(props.id);
-    },
-    children: props.children
-  });
-};
-
-function Tab(_ref) {
-  var children = _ref.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
-  });
-}
-Tab.Item = TabItem;
-
-function TableCell(_ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    _ref$isHeader = _ref.isHeader,
-    isHeader = _ref$isHeader === void 0 ? false : _ref$isHeader;
-  var classes = clsx$1('border-b border-uiBorder01', {
-    'sticky top-0 z-10 bg-white': isHeader
-  }, className);
-  return /*#__PURE__*/jsx("div", {
-    className: classes,
-    children: children
-  });
-}
-
-function TableRow(_ref) {
-  var children = _ref.children,
-    _ref$isHoverBackgroun = _ref.isHoverBackgroundVisible,
-    isHoverBackgroundVisible = _ref$isHoverBackgroun === void 0 ? false : _ref$isHoverBackgroun;
-  var rowClasses = clsx$1('contents', isHoverBackgroundVisible && '[&:hover>div]:bg-hoverUi02');
-  return /*#__PURE__*/jsx("div", {
-    className: rowClasses,
-    children: children
-  });
-}
-
-function Table(_ref) {
-  var width = _ref.width,
-    templateRows = _ref.templateRows,
-    templateColumns = _ref.templateColumns,
-    autoColumns = _ref.autoColumns,
-    autoRows = _ref.autoRows,
-    children = _ref.children;
-  return /*#__PURE__*/jsx("div", {
-    className: "grid",
-    style: {
-      width: width,
-      gridTemplateRows: templateRows,
-      gridTemplateColumns: templateColumns,
-      gridAutoColumns: autoColumns,
-      gridAutoRows: autoRows
-    },
-    children: children
-  });
-}
-Table.Row = TableRow;
-Table.Cell = TableCell;
-
-var DeleteIcon = function DeleteIcon(_ref) {
-  var color = _ref.color,
-    variant = _ref.variant,
-    onClick = _ref.onClick;
-  var 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);
-  var 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
-      })
-    })
-  });
-};
-
-function Tag(_ref) {
-  var _clsx;
-  var id = _ref.id,
-    children = _ref.children,
-    color = _ref.color,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'normal' : _ref$variant,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    isEditable = _ref.isEditable,
-    onDelete = _ref.onDelete;
-  var wrapperClasses = clsx$1('flex', 'items-center', 'justify-center', (_clsx = {}, _clsx[tagColors[color]] = variant === 'normal', _clsx[tagLightColors[color]] = variant === 'light', _clsx['h-[14px] typography-label11regular'] = !isEditable && size === 'x-small', _clsx['h-4 typography-label12regular'] = !isEditable && size === 'small', _clsx['h-[18px] typography-label14regular'] = !isEditable && size === 'medium', _clsx['h-[22px] typography-label14regular'] = isEditable && size === 'medium', _clsx['rounded-full'] = isEditable, _clsx.rounded = !isEditable, _clsx['py-0.5 px-1'] = !isEditable, _clsx['py-1 px-2'] = isEditable, _clsx));
-  return /*#__PURE__*/jsxs("div", {
-    className: wrapperClasses,
-    children: [children, isEditable ? /*#__PURE__*/jsx(DeleteIcon, {
-      onClick: function onClick() {
-        return onDelete(id);
-      },
-      color: color,
-      variant: variant
-    }) : null]
-  });
-}
-
-var _excluded$1 = ["size", "isResizable", "isError", "disabled"];
-var TextArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _clsx;
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    _ref$isResizable = _ref.isResizable,
-    isResizable = _ref$isResizable === void 0 ? false : _ref$isResizable,
-    _ref$isError = _ref.isError,
-    isError = _ref$isError === void 0 ? false : _ref$isError,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  var classes = clsx('w-full rounded border outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder', (_clsx = {
-    '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
-  }, _clsx['typography-body14regular px-2 pt-1.5 pb-2'] = size === 'medium', _clsx['text-4 leading-normal px-3.5 py-2.5'] = size === 'large', _clsx['text-supportError'] = isError, _clsx['resize-none'] = !isResizable, _clsx));
-  return /*#__PURE__*/jsx("div", {
-    className: "flex",
-    children: /*#__PURE__*/jsx("textarea", _extends({
-      ref: ref,
-      className: classes
-    }, props, {
-      disabled: disabled,
-      style: {
-        height: props.height
-      }
-    }))
-  });
-});
-TextArea.displayName = 'TextArea';
-
-var _excluded = ["size", "isError", "disabled", "onClickClearButton"];
-var TextInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _clsx;
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    _ref$isError = _ref.isError,
-    isError = _ref$isError === void 0 ? false : _ref$isError,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    onClickClearButton = _ref.onClickClearButton,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var isShowClearButton = !!onClickClearButton && props.value.length !== 0 && !disabled;
-  var 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
-  });
-  var inputClasses = clsx('flex-1 outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder', (_clsx = {}, _clsx['typography-label14regular min-h-8 px-2'] = size === 'medium', _clsx['typography-label16regular min-h-10 px-3'] = size === 'large', _clsx['text-text01'] = !isError, _clsx['text-supportError'] = isError, _clsx['pr-0'] = isShowClearButton, _clsx));
-  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';
-
-var CLOSE_TIME_MSEC = 5000;
-function Toast(_ref) {
-  var _clsx;
-  var _ref$state = _ref.state,
-    state = _ref$state === void 0 ? 'information' : _ref$state,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? 'auto' : _ref$width,
-    _ref$isAutoClose = _ref.isAutoClose,
-    isAutoClose = _ref$isAutoClose === void 0 ? false : _ref$isAutoClose,
-    _ref$isAnimation = _ref.isAnimation,
-    isAnimation = _ref$isAnimation === void 0 ? false : _ref$isAnimation,
-    children = _ref.children,
-    onClickClose = _ref.onClickClose;
-  var _useState = useState(false),
-    isRemoving = _useState[0],
-    setIsRemoving = _useState[1];
-  var handleClose = useCallback(function () {
-    if (isAnimation) {
-      setIsRemoving(true);
-    } else {
-      onClickClose();
-    }
-  }, [isAnimation, onClickClose]);
-  var handleAnimationEnd = function handleAnimationEnd(e) {
-    return window.getComputedStyle(e.currentTarget).opacity === '0' && onClickClose();
-  };
-  var wrapperClasses = clsx$1('pointer-events-auto flex items-start gap-1 bg-white p-4 shadow-floatingShadow', (_clsx = {}, _clsx['animate-toast-in'] = isAnimation && !isRemoving, _clsx['animate-toast-out opacity-0'] = isAnimation && isRemoving, _clsx));
-  var iconClasses = clsx$1('flex items-center', {
-    'fill-supportSuccess': state === 'success',
-    'fill-supportError': state === 'error',
-    'fill-supportWarning': state === 'warning',
-    'fill-supportInfo': state === 'information'
-  });
-  var textClasses = clsx$1('typography-body13regular flex-1 pt-[3px]', {
-    'text-supportError': state === 'error',
-    'text-text01': state === 'success' || state === 'warning' || state === 'information'
-  });
-  var iconName = {
-    success: 'success-filled',
-    error: 'attention',
-    warning: 'warning',
-    information: 'information-filled'
-  };
-  useEffect(function () {
-    var timer = window.setTimeout(function () {
-      if (isAutoClose) {
-        setIsRemoving(true);
-      }
-    }, CLOSE_TIME_MSEC);
-    return function () {
-      return window.clearTimeout(timer);
-    };
-  }, [isAutoClose]);
-  return /*#__PURE__*/jsxs("div", {
-    className: wrapperClasses,
-    style: {
-      width: 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
-    })]
-  });
-}
-
-var ToastContext = /*#__PURE__*/createContext({});
-var ToastProvider = function ToastProvider(_ref) {
-  var children = _ref.children;
-  var _useState = useState(false),
-    isClientRender = _useState[0],
-    setIsClientRender = _useState[1];
-  var _useState2 = useState([]),
-    toasts = _useState2[0],
-    setToasts = _useState2[1];
-  var addToast = useCallback(function (_ref2) {
-    var message = _ref2.message,
-      state = _ref2.state;
-    setToasts(function (prev) {
-      return [].concat(prev, [{
-        id: Math.trunc(Math.random() * 100000),
-        message: message,
-        state: state
-      }]);
-    });
-  }, []);
-  var removeToast = useCallback(function (id) {
-    setToasts(function (prev) {
-      return prev.filter(function (snackbar) {
-        return snackbar.id !== id;
-      });
-    });
-  }, []);
-  useEffect(function () {
-    setIsClientRender(true);
-  }, []);
-  return /*#__PURE__*/jsxs(ToastContext.Provider, {
-    value: {
-      addToast: addToast,
-      removeToast: 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(function (_ref3) {
-        var id = _ref3.id,
-          message = _ref3.message,
-          state = _ref3.state;
-        return /*#__PURE__*/jsx(Toast, {
-          state: state,
-          isAutoClose: true,
-          isAnimation: true,
-          onClickClose: function onClickClose() {
-            return removeToast(id);
-          },
-          width: 475,
-          children: message
-        }, id);
-      })
-    }), document.body)]
-  });
-};
-var useToast = function useToast() {
-  return useContext(ToastContext);
-};
-
-function Toggle(_ref) {
-  var id = _ref.id,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    isChecked = _ref.isChecked,
-    onChange = _ref.onChange,
-    label = _ref.label,
-    _ref$labelPosition = _ref.labelPosition,
-    labelPosition = _ref$labelPosition === void 0 ? 'right' : _ref$labelPosition,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
-  var 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'
-  });
-  var inputClasses = clsx$1('peer absolute inset-0 z-[1] opacity-0', isDisabled ? 'cursor-not-allowed' : 'cursor-pointer');
-  var 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
-  });
-  var 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
-    })]
-  });
-}
-
-var useTooltip = function useTooltip() {
-  var calculatePosition = useCallback(function (args) {
-    var _args$maxWidth;
-    var 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';
-    var offsetH = args.tooltipSize === 'small' ? 11 : 22;
-    var targetHorizontalCenter = args.dimensions.right - (args.dimensions.right - args.dimensions.left) / 2;
-    var targetLeft = args.dimensions.left;
-    var targetRight = args.dimensions.right;
-    var 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: calculatePosition
-  };
-};
-
-var TailIcon = function TailIcon(props) {
-  var 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"
-      })
-    });
-  } 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"
-      })
-    });
-  }
-};
-
-var TooltipContent = function TooltipContent(_ref) {
-  var content = _ref.content,
-    horizontalAlign = _ref.horizontalAlign,
-    verticalPosition = _ref.verticalPosition,
-    size = _ref.size,
-    tooltipPosition = _ref.tooltipPosition,
-    maxWidth = _ref.maxWidth,
-    _ref$isPortal = _ref.isPortal,
-    isPortal = _ref$isPortal === void 0 ? false : _ref$isPortal;
-  var 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'
-  });
-  var 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'
-  });
-  var tooltipWrapperStyle = isPortal ? _extends({
-    transform: "translate(" + tooltipPosition.translateX + ", " + tooltipPosition.translateY + ")"
-  }, tooltipPosition) : {};
-  return /*#__PURE__*/jsx("div", {
-    className: tooltipWrapperClasses,
-    style: tooltipWrapperStyle,
-    children: /*#__PURE__*/jsxs("div", {
-      className: tooltipBodyClasses,
-      style: {
-        maxWidth: maxWidth
-      },
-      children: [content, /*#__PURE__*/jsx(TailIcon, {
-        size: size,
-        verticalPosition: verticalPosition,
-        horizontalAlign: horizontalAlign
-      })]
-    })
-  });
-};
-
-function Tooltip(_ref) {
-  var children = _ref.children,
-    content = _ref.content,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'small' : _ref$size,
-    maxWidth = _ref.maxWidth,
-    _ref$verticalPosition = _ref.verticalPosition,
-    verticalPosition = _ref$verticalPosition === void 0 ? 'bottom' : _ref$verticalPosition,
-    _ref$horizontalAlign = _ref.horizontalAlign,
-    horizontalAlign = _ref$horizontalAlign === void 0 ? 'center' : _ref$horizontalAlign,
-    _ref$isDisabledHover = _ref.isDisabledHover,
-    isDisabledHover = _ref$isDisabledHover === void 0 ? false : _ref$isDisabledHover,
-    portalTarget = _ref.portalTarget;
-  var _useTooltip = useTooltip(),
-    calculatePosition = _useTooltip.calculatePosition;
-  var _useState = useState(false),
-    isVisible = _useState[0],
-    setIsVisible = _useState[1];
-  var _useState2 = useState({
-      maxWidth: 'none',
-      width: 'auto',
-      left: '0px',
-      top: '0px',
-      bottom: '0px',
-      translateX: '0',
-      translateY: '0'
-    }),
-    tooltipPosition = _useState2[0],
-    setTooltipPosition = _useState2[1];
-  var targetRef = useRef(null);
-  var handleMouseOverWrapper = useCallback(function () {
-    if (isDisabledHover) {
-      return;
-    }
-    setIsVisible(true);
-  }, [isDisabledHover]);
-  var handleMouseOutWrapper = useCallback(function () {
-    setIsVisible(false);
-  }, []);
-  useEffect(function () {
-    var _targetRef$current;
-    if (targetRef.current === null) return;
-    var dimensions = (_targetRef$current = targetRef.current) == null ? void 0 : _targetRef$current.getBoundingClientRect();
-    var position = calculatePosition({
-      dimensions: dimensions,
-      maxWidth: maxWidth,
-      verticalPosition: verticalPosition,
-      horizontalAlign: 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)))]
-  });
-}
-
-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.esm.js.map