@zenkigen-inc/component-ui 1.3.1 → 1.5.0

package/dist/index.esm.js

@@ -1,7 +1,7 @@
-import { userColors, typography, buttonColors, focusVisible, iconColors, tagColors, tagLightColors } from '@zenkigen-inc/component-theme';
+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 aa, { useState, useCallback, useEffect, createContext, useContext, useRef, forwardRef } from 'react';
+import aa, { useState, useCallback, useEffect, createContext, useContext, useRef, useLayoutEffect, forwardRef } from 'react';
 import { iconElements } from '@zenkigen-inc/component-icons';
 
 function _extends() {
@@ -31,16 +31,24 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var _excluded$6 = ["size"];
+var _excluded$7 = ["size"];
 var isAsciiString = function isAsciiString(str) {
   return str.charCodeAt(0) < 256;
 };
 function Avatar(_ref) {
-  var _clsx;
+  var _props$userId, _clsx;
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
-  var classes = clsx('text-text-textOnColor', 'rounded-full', 'flex items-center justify-center', props.isDisabled ? 'bg-disabled-disabled01' : props.userId ? userColors[props.userId % userColors.length] : 'bg-icon-icon01', (_clsx = {}, _clsx["w-16 h-16 " + typography.label.label1regular] = size === 'x-large', _clsx["w-12 h-12 " + typography.label.label2regular] = size === 'large', _clsx["w-10 h-10 " + typography.label.label2regular] = size === 'medium', _clsx["w-8 h-8 " + typography.label.label4regular] = size === 'small', _clsx["w-6 h-6 " + typography.label.label4regular] = size === 'x-small', _clsx));
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+  var classes = clsx('flex items-center justify-center rounded-full text-text-textOnColor', (_clsx = {
+    'w-16 h-16 typography-label1regular': size === 'x-large',
+    'w-12 h-12 typography-label2regular': size === 'large',
+    'w-10 h-10 typography-label2regular': size === 'medium',
+    'w-8 h-8 typography-label4regular': size === 'small',
+    'w-6 h-6 typography-label4regular': size === 'x-small',
+    'bg-disabled-disabled01': props.isDisabled,
+    'bg-icon-icon01': !props.userId
+  }, _clsx[userColors[((_props$userId = props.userId) != null ? _props$userId : 0) % userColors.length]] = props.userId && !props.isDisabled, _clsx));
   var trimmedFirstName = props.firstName.trim();
   var trimmedLastName = props.lastName.trim();
   var nameOnIcon = isAsciiString(trimmedLastName) ? trimmedFirstName.slice(0, 1).toUpperCase() + trimmedLastName.slice(0, 1).toUpperCase() : (trimmedLastName + trimmedFirstName).slice(0, 2);
@@ -63,36 +71,38 @@ function Breadcrumb(_ref) {
   return /*#__PURE__*/jsx("nav", {
     "aria-label": "breadcrumb",
     children: /*#__PURE__*/jsx("ul", {
-      className: typography.label.label2regular + " flex flex-wrap gap-2 whitespace-nowrap text-text-text01",
+      className: "typography-label2regular flex flex-wrap gap-2 whitespace-nowrap text-text-text01",
       children: children
     })
   });
 }
 Breadcrumb.Item = BreadcrumbItem;
 
-var _excluded$5 = ["size", "variant"];
+var _excluded$6 = ["size", "variant"];
 function Button(_ref) {
   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,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
-  var baseClasses = clsx('rounded-button', 'flex', 'shrink-0', 'gap-1', 'items-center', 'justify-center', buttonColors[variant].base, buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, size === 'large' ? typography.label.label1regular : typography.label.label2regular, {
-    'h-6 px-2.5': size === 'small'
-  }, {
-    'h-8 px-3': size === 'medium'
-  }, {
-    'h-10 px-4 leading-[24px]': size === 'large'
-  }, {
-    'inline-flex': props.isAnchor
-  }, {
-    'pointer-events-none': props.isDisabled
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+  var baseClasses = clsx('flex', 'shrink-0', 'gap-1', 'items-center', 'justify-center', buttonColors[variant].base, 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': props.isAnchor,
+    'pointer-events-none': props.isDisabled,
+    'rounded-button': !props.borderRadius,
+    'typography-label1regular': size === 'large',
+    'typography-label2regular': size !== 'large'
   });
   if (props.isAnchor) {
     return /*#__PURE__*/jsxs("a", {
       className: baseClasses,
       href: props.href,
       target: props.target,
+      style: {
+        borderRadius: props.borderRadius
+      },
       children: [props.before, props.children, props.after]
     });
   } else {
@@ -102,7 +112,8 @@ function Button(_ref) {
       disabled: props.isDisabled,
       onClick: props.onClick,
       style: {
-        width: props.width
+        width: props.width,
+        borderRadius: props.borderRadius
       },
       children: [props.before, props.children, props.after]
     });
@@ -172,7 +183,7 @@ function Checkbox(_ref) {
     'scale-100': isChecked
   });
   var hoverIndicatorClasses = clsx$1('w-3', 'h-3', 'inline-block', 'rounded-[1px]', !isDisabled && !isChecked && isMouseOver && 'bg-hover-hoverUi');
-  var labelClasses = clsx$1('flex-[1_0_0]', 'ml-2', typography.label.label2regular, 'break-all', isDisabled ? 'pointer-events-none cursor-not-allowed text-disabled-disabled01' : 'cursor-pointer text-text-text01');
+  var labelClasses = clsx$1('typography-label2regular ml-2 flex-[1_0_0] break-all', isDisabled ? 'pointer-events-none cursor-not-allowed text-disabled-disabled01' : 'cursor-pointer text-text-text01');
   return /*#__PURE__*/jsxs("div", {
     className: wrapperClasses,
     children: [/*#__PURE__*/jsxs("div", {
@@ -208,505 +219,129 @@ function Checkbox(_ref) {
   });
 }
 
-var useOutsideClick = function useOutsideClick(ref, handler, enabled) {
-  if (enabled === void 0) {
-    enabled = true;
-  }
-  useEffect(function () {
-    var listener = function listener(event) {
-      var element = ref == null ? void 0 : ref.current;
-      if (!element || element.contains((event == null ? void 0 : event.target) || null)) {
-        return;
-      }
-      handler(event);
-    };
-    if (enabled) {
-      document.addEventListener('click', listener);
-    }
-    return function () {
-      return document.removeEventListener('click', listener);
-    };
-  }, [ref, enabled, handler]);
-};
+function createCommonjsModule(fn) {
+  var module = { exports: {} };
+	return fn(module, module.exports), module.exports;
+}
 
-var _excluded$4 = ["size"];
-var Icon = function Icon(_ref) {
-  var _ref2;
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-  return /*#__PURE__*/jsx("span", {
-    className: clsx('inline-block', 'shrink-0', props.isDisabled ? 'fill-disabled-disabled01' : (_ref2 = {}, _ref2[iconColors.icon01] = props.color === 'icon01', _ref2[iconColors.icon01Dark] = props.color === 'icon01Dark', _ref2[iconColors.icon02] = props.color === 'icon02', _ref2[iconColors.icon02Dark] = props.color === 'icon02Dark', _ref2[iconColors.icon03] = props.color === 'icon03', _ref2[iconColors.icon03Dark] = props.color === 'icon03Dark', _ref2[iconColors.iconOnColor] = props.color === 'iconOnColor', _ref2), {
-      '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'
-    }),
-    children: iconElements[props.name]
-  });
-};
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 
-var DropdownContext = /*#__PURE__*/createContext({
-  isVisible: false,
-  setIsVisible: function setIsVisible() {
-    return false;
-  },
-  isDisabled: false,
-  targetDimensions: {
-    width: 0,
-    height: 0
-  },
-  variant: 'outline'
+var scheduler_production_min = createCommonjsModule(function (module, exports) {
+function f(a,b){var c=a.length;a.push(b);a:for(;0<c;){var d=c-1>>>1,e=a[d];if(0<g(e,b))a[d]=b,a[c]=e,c=d;else break a}}function h(a){return 0===a.length?null:a[0]}function k(a){if(0===a.length)return null;var b=a[0],c=a.pop();if(c!==b){a[0]=c;a:for(var d=0,e=a.length,w=e>>>1;d<w;){var m=2*(d+1)-1,C=a[m],n=m+1,x=a[n];if(0>g(C,c))n<e&&0>g(x,C)?(a[d]=x,a[n]=c,d=n):(a[d]=C,a[m]=c,d=m);else if(n<e&&0>g(x,c))a[d]=x,a[n]=c,d=n;else break a}}return b}
+function g(a,b){var c=a.sortIndex-b.sortIndex;return 0!==c?c:a.id-b.id}if("object"===typeof performance&&"function"===typeof performance.now){var l=performance;exports.unstable_now=function(){return l.now()};}else {var p=Date,q=p.now();exports.unstable_now=function(){return p.now()-q};}var r=[],t=[],u=1,v=null,y=3,z=!1,A=!1,B=!1,D="function"===typeof setTimeout?setTimeout:null,E="function"===typeof clearTimeout?clearTimeout:null,F="undefined"!==typeof setImmediate?setImmediate:null;
+"undefined"!==typeof navigator&&void 0!==navigator.scheduling&&void 0!==navigator.scheduling.isInputPending&&navigator.scheduling.isInputPending.bind(navigator.scheduling);function G(a){for(var b=h(t);null!==b;){if(null===b.callback)k(t);else if(b.startTime<=a)k(t),b.sortIndex=b.expirationTime,f(r,b);else break;b=h(t);}}function H(a){B=!1;G(a);if(!A)if(null!==h(r))A=!0,I(J);else {var b=h(t);null!==b&&K(H,b.startTime-a);}}
+function J(a,b){A=!1;B&&(B=!1,E(L),L=-1);z=!0;var c=y;try{G(b);for(v=h(r);null!==v&&(!(v.expirationTime>b)||a&&!M());){var d=v.callback;if("function"===typeof d){v.callback=null;y=v.priorityLevel;var e=d(v.expirationTime<=b);b=exports.unstable_now();"function"===typeof e?v.callback=e:v===h(r)&&k(r);G(b);}else k(r);v=h(r);}if(null!==v)var w=!0;else {var m=h(t);null!==m&&K(H,m.startTime-b);w=!1;}return w}finally{v=null,y=c,z=!1;}}var N=!1,O=null,L=-1,P=5,Q=-1;
+function M(){return exports.unstable_now()-Q<P?!1:!0}function R(){if(null!==O){var a=exports.unstable_now();Q=a;var b=!0;try{b=O(!0,a);}finally{b?S():(N=!1,O=null);}}else N=!1;}var S;if("function"===typeof F)S=function(){F(R);};else if("undefined"!==typeof MessageChannel){var T=new MessageChannel,U=T.port2;T.port1.onmessage=R;S=function(){U.postMessage(null);};}else S=function(){D(R,0);};function I(a){O=a;N||(N=!0,S());}function K(a,b){L=D(function(){a(exports.unstable_now());},b);}
+exports.unstable_IdlePriority=5;exports.unstable_ImmediatePriority=1;exports.unstable_LowPriority=4;exports.unstable_NormalPriority=3;exports.unstable_Profiling=null;exports.unstable_UserBlockingPriority=2;exports.unstable_cancelCallback=function(a){a.callback=null;};exports.unstable_continueExecution=function(){A||z||(A=!0,I(J));};
+exports.unstable_forceFrameRate=function(a){0>a||125<a?console.error("forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported"):P=0<a?Math.floor(1E3/a):5;};exports.unstable_getCurrentPriorityLevel=function(){return y};exports.unstable_getFirstCallbackNode=function(){return h(r)};exports.unstable_next=function(a){switch(y){case 1:case 2:case 3:var b=3;break;default:b=y;}var c=y;y=b;try{return a()}finally{y=c;}};exports.unstable_pauseExecution=function(){};
+exports.unstable_requestPaint=function(){};exports.unstable_runWithPriority=function(a,b){switch(a){case 1:case 2:case 3:case 4:case 5:break;default:a=3;}var c=y;y=a;try{return b()}finally{y=c;}};
+exports.unstable_scheduleCallback=function(a,b,c){var d=exports.unstable_now();"object"===typeof c&&null!==c?(c=c.delay,c="number"===typeof c&&0<c?d+c:d):c=d;switch(a){case 1:var e=-1;break;case 2:e=250;break;case 5:e=1073741823;break;case 4:e=1E4;break;default:e=5E3;}e=c+e;a={id:u++,callback:b,priorityLevel:a,startTime:c,expirationTime:e,sortIndex:-1};c>d?(a.sortIndex=c,f(t,a),null===h(r)&&a===h(t)&&(B?(E(L),L=-1):B=!0,K(H,c-d))):(a.sortIndex=e,f(r,a),A||z||(A=!0,I(J)));return a};
+exports.unstable_shouldYield=M;exports.unstable_wrapCallback=function(a){var b=y;return function(){var c=y;y=b;try{return a.apply(this,arguments)}finally{y=c;}}};
 });
 
-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 && onClick(event);
-  };
-  var listItemClasses = clsx$1('flex w-full items-center');
-  var itemClasses = clsx$1('flex', 'items-center', 'w-full', 'h-8', 'px-3', 'hover:bg-hover-hover02', 'active:bg-active-active02', focusVisible.inset, typography.label.label2regular, {
-    'bg-background-uiBackground01 fill-icon-icon01 text-interactive-interactive02': color === 'gray',
-    'fill-support-supportDanger text-support-supportDanger': color === 'red'
-  });
-  return /*#__PURE__*/jsx("li", {
-    className: listItemClasses,
-    children: /*#__PURE__*/jsx("button", {
-      className: itemClasses,
-      type: "button",
-      onClick: handleClickItem,
-      children: children
-    })
-  });
+/**
+ * @license React
+ * scheduler.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var scheduler_development = createCommonjsModule(function (module, exports) {
+
+if (process.env.NODE_ENV !== "production") {
+  (function() {
+
+/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+if (
+  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
+    'function'
+) {
+  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
 }
+          var enableSchedulerDebugging = false;
+var enableProfiling = false;
+var frameYieldMs = 5;
 
-function DropdownMenu(_ref) {
-  var children = _ref.children,
-    maxHeight = _ref.maxHeight,
-    isNoPadding = _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;
-  var wrapperClasses = clsx$1('z-dropdown', 'absolute', 'w-max', 'bg-background-uiBackground01', 'rounded', 'shadow-floatingShadow', 'overflow-y-auto', horizontalAlign === 'left' ? 'left-0' : horizontalAlign === 'right' ? 'right-0' : 'left-auto', {
-    'border-solid border border-border-uiBorder01': variant === 'outline',
-    'py-1': !isNoPadding
-  });
-  return isVisible && !isDisabled && /*#__PURE__*/jsx("ul", {
-    className: wrapperClasses,
-    style: {
-      top: verticalPosition === 'bottom' ? targetDimensions.height + 4 + "px" : 'unset',
-      bottom: verticalPosition === 'top' ? targetDimensions.height + 4 + "px" : 'unset',
-      maxHeight: maxHeight
-    },
-    children: children
-  });
+function push(heap, node) {
+  var index = heap.length;
+  heap.push(node);
+  siftUp(heap, node, index);
+}
+function peek(heap) {
+  return heap.length === 0 ? null : heap[0];
 }
+function pop(heap) {
+  if (heap.length === 0) {
+    return null;
+  }
 
-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 ? target ? 'text' : '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;
-  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) {
+  var first = heap[0];
+  var last = heap.pop();
+
+  if (last !== first) {
+    heap[0] = last;
+    siftDown(heap, last, 0);
+  }
+
+  return first;
+}
+
+function siftUp(heap, node, i) {
+  var index = i;
+
+  while (index > 0) {
+    var parentIndex = index - 1 >>> 1;
+    var parent = heap[parentIndex];
+
+    if (compare(parent, node) > 0) {
+      // The parent is larger. Swap positions.
+      heap[parentIndex] = node;
+      heap[index] = parent;
+      index = parentIndex;
+    } else {
+      // The parent is smaller. Exit.
       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', isDisabled && 'cursor-not-allowed');
-  var childrenButtonClasses = clsx$1('flex items-center justify-center', 'rounded', 'hover:bg-hover-hover02', 'active:bg-active-active02', focusVisible.normal, isDisabled && 'pointer-events-none', 'p-1', {
-    'border border-border-uiBorder02': variant === 'outline'
-  });
-  var buttonClasses = clsx$1('flex items-center', 'rounded', buttonColors[variant].base, buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, isDisabled && 'pointer-events-none', {
-    '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', !isArrowHidden ? size === 'x-small' ? 'mr-1' : 'mr-2' : null, typography.label[size === 'x-small' ? 'label3regular' : size === 'small' || size === 'medium' ? 'label2regular' : 'label1regular']);
-  return /*#__PURE__*/jsx(DropdownContext.Provider, {
-    value: {
-      isVisible: isVisible,
-      setIsVisible: setIsVisible,
-      isDisabled: isDisabled,
-      targetDimensions: targetDimensions,
-      variant: variant
-    },
-    children: /*#__PURE__*/jsxs("div", {
-      ref: targetRef,
-      className: wrapperClasses,
-      children: [target ? /*#__PURE__*/jsx("button", {
-        type: "button",
-        title: title,
-        className: childrenButtonClasses,
-        onClick: handleToggle,
-        disabled: isDisabled,
-        children: target
-      }) : /*#__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"
-          })
-        })]
-      }), children]
-    })
-  });
-}
-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'
-  });
-  var ratingStars = [];
-  var _loop = function _loop(i) {
-    var color = i <= currentRating ? 'fill-yellow-yellow50' : 'fill-icon-icon03';
-    ratingStars.push( /*#__PURE__*/jsx("button", {
-      type: "button",
-      onClick: function onClick() {
-        return handleChangeRating(i);
-      },
-      className: clsx$1(color, starClasses),
-      disabled: !isEditable,
-      children: iconElements['star-filled']
-    }, i));
-  };
-  for (var i = 1; i < maxRating + 1; i++) {
-    _loop(i);
-  }
-  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-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$3 = ["size", "variant"];
-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,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-  var baseClasses = clsx('rounded', 'flex', 'gap-1', 'items-center', 'justify-center', buttonColors[variant].base, buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, typography.label.label1regular, {
-    'h-6 w-6': size === 'small' && !props.isNoPadding
-  }, {
-    'h-8 w-8': size === 'medium' && !props.isNoPadding
-  }, {
-    'h-10 w-10': size === 'large' && !props.isNoPadding
-  }, {
-    'h-4 w-4': size === 'small' && props.isNoPadding
-  }, {
-    'h-6 w-6': size === 'medium' && props.isNoPadding
-  }, {
-    'h-6 w-6': size === 'large' && props.isNoPadding
-  }, {
-    'inline-flex': props.isAnchor
-  }, {
-    'pointer-events-none': props.isDisabled
-  });
-  var iconSize = size === 'small' ? 'small' : 'medium';
-  if (props.isAnchor) {
-    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: props.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, 'top-0', 'left-0', 'z-20', 'flex', 'items-center', 'justify-center', 'w-full');
-  var svgClasses = clsx$1(size === 'small' && 'h-4 w-4', size === 'medium' && 'h-8 w-8', size === 'large' && 'h-16 w-16');
-  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-interactive-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-interactive-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-interactive-interactive01",
-          cx: "32",
-          cy: "32",
-          r: "30",
-          stroke: "currentColor",
-          strokeWidth: "3",
-          fill: "none"
-        })
-      })]
-    })
-  });
-}
-
-function createCommonjsModule(fn) {
-  var module = { exports: {} };
-	return fn(module, module.exports), module.exports;
-}
-
-/**
- * @license React
- * scheduler.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var scheduler_production_min = createCommonjsModule(function (module, exports) {
-function f(a,b){var c=a.length;a.push(b);a:for(;0<c;){var d=c-1>>>1,e=a[d];if(0<g(e,b))a[d]=b,a[c]=e,c=d;else break a}}function h(a){return 0===a.length?null:a[0]}function k(a){if(0===a.length)return null;var b=a[0],c=a.pop();if(c!==b){a[0]=c;a:for(var d=0,e=a.length,w=e>>>1;d<w;){var m=2*(d+1)-1,C=a[m],n=m+1,x=a[n];if(0>g(C,c))n<e&&0>g(x,C)?(a[d]=x,a[n]=c,d=n):(a[d]=C,a[m]=c,d=m);else if(n<e&&0>g(x,c))a[d]=x,a[n]=c,d=n;else break a}}return b}
-function g(a,b){var c=a.sortIndex-b.sortIndex;return 0!==c?c:a.id-b.id}if("object"===typeof performance&&"function"===typeof performance.now){var l=performance;exports.unstable_now=function(){return l.now()};}else {var p=Date,q=p.now();exports.unstable_now=function(){return p.now()-q};}var r=[],t=[],u=1,v=null,y=3,z=!1,A=!1,B=!1,D="function"===typeof setTimeout?setTimeout:null,E="function"===typeof clearTimeout?clearTimeout:null,F="undefined"!==typeof setImmediate?setImmediate:null;
-"undefined"!==typeof navigator&&void 0!==navigator.scheduling&&void 0!==navigator.scheduling.isInputPending&&navigator.scheduling.isInputPending.bind(navigator.scheduling);function G(a){for(var b=h(t);null!==b;){if(null===b.callback)k(t);else if(b.startTime<=a)k(t),b.sortIndex=b.expirationTime,f(r,b);else break;b=h(t);}}function H(a){B=!1;G(a);if(!A)if(null!==h(r))A=!0,I(J);else {var b=h(t);null!==b&&K(H,b.startTime-a);}}
-function J(a,b){A=!1;B&&(B=!1,E(L),L=-1);z=!0;var c=y;try{G(b);for(v=h(r);null!==v&&(!(v.expirationTime>b)||a&&!M());){var d=v.callback;if("function"===typeof d){v.callback=null;y=v.priorityLevel;var e=d(v.expirationTime<=b);b=exports.unstable_now();"function"===typeof e?v.callback=e:v===h(r)&&k(r);G(b);}else k(r);v=h(r);}if(null!==v)var w=!0;else {var m=h(t);null!==m&&K(H,m.startTime-b);w=!1;}return w}finally{v=null,y=c,z=!1;}}var N=!1,O=null,L=-1,P=5,Q=-1;
-function M(){return exports.unstable_now()-Q<P?!1:!0}function R(){if(null!==O){var a=exports.unstable_now();Q=a;var b=!0;try{b=O(!0,a);}finally{b?S():(N=!1,O=null);}}else N=!1;}var S;if("function"===typeof F)S=function(){F(R);};else if("undefined"!==typeof MessageChannel){var T=new MessageChannel,U=T.port2;T.port1.onmessage=R;S=function(){U.postMessage(null);};}else S=function(){D(R,0);};function I(a){O=a;N||(N=!0,S());}function K(a,b){L=D(function(){a(exports.unstable_now());},b);}
-exports.unstable_IdlePriority=5;exports.unstable_ImmediatePriority=1;exports.unstable_LowPriority=4;exports.unstable_NormalPriority=3;exports.unstable_Profiling=null;exports.unstable_UserBlockingPriority=2;exports.unstable_cancelCallback=function(a){a.callback=null;};exports.unstable_continueExecution=function(){A||z||(A=!0,I(J));};
-exports.unstable_forceFrameRate=function(a){0>a||125<a?console.error("forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported"):P=0<a?Math.floor(1E3/a):5;};exports.unstable_getCurrentPriorityLevel=function(){return y};exports.unstable_getFirstCallbackNode=function(){return h(r)};exports.unstable_next=function(a){switch(y){case 1:case 2:case 3:var b=3;break;default:b=y;}var c=y;y=b;try{return a()}finally{y=c;}};exports.unstable_pauseExecution=function(){};
-exports.unstable_requestPaint=function(){};exports.unstable_runWithPriority=function(a,b){switch(a){case 1:case 2:case 3:case 4:case 5:break;default:a=3;}var c=y;y=a;try{return b()}finally{y=c;}};
-exports.unstable_scheduleCallback=function(a,b,c){var d=exports.unstable_now();"object"===typeof c&&null!==c?(c=c.delay,c="number"===typeof c&&0<c?d+c:d):c=d;switch(a){case 1:var e=-1;break;case 2:e=250;break;case 5:e=1073741823;break;case 4:e=1E4;break;default:e=5E3;}e=c+e;a={id:u++,callback:b,priorityLevel:a,startTime:c,expirationTime:e,sortIndex:-1};c>d?(a.sortIndex=c,f(t,a),null===h(r)&&a===h(t)&&(B?(E(L),L=-1):B=!0,K(H,c-d))):(a.sortIndex=e,f(r,a),A||z||(A=!0,I(J)));return a};
-exports.unstable_shouldYield=M;exports.unstable_wrapCallback=function(a){var b=y;return function(){var c=y;y=b;try{return a.apply(this,arguments)}finally{y=c;}}};
-});
-
-/**
- * @license React
- * scheduler.development.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var scheduler_development = createCommonjsModule(function (module, exports) {
-
-if (process.env.NODE_ENV !== "production") {
-  (function() {
-
-/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-if (
-  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
-  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
-    'function'
-) {
-  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
-}
-          var enableSchedulerDebugging = false;
-var enableProfiling = false;
-var frameYieldMs = 5;
-
-function push(heap, node) {
-  var index = heap.length;
-  heap.push(node);
-  siftUp(heap, node, index);
-}
-function peek(heap) {
-  return heap.length === 0 ? null : heap[0];
-}
-function pop(heap) {
-  if (heap.length === 0) {
-    return null;
-  }
-
-  var first = heap[0];
-  var last = heap.pop();
-
-  if (last !== first) {
-    heap[0] = last;
-    siftDown(heap, last, 0);
-  }
-
-  return first;
-}
-
-function siftUp(heap, node, i) {
-  var index = i;
-
-  while (index > 0) {
-    var parentIndex = index - 1 >>> 1;
-    var parent = heap[parentIndex];
-
-    if (compare(parent, node) > 0) {
-      // The parent is larger. Swap positions.
-      heap[parentIndex] = node;
-      heap[index] = parent;
-      index = parentIndex;
-    } else {
-      // The parent is smaller. Exit.
-      return;
-    }
-  }
-}
-
-function siftDown(heap, node, i) {
-  var index = i;
-  var length = heap.length;
-  var halfLength = length >>> 1;
-
-  while (index < halfLength) {
-    var leftIndex = (index + 1) * 2 - 1;
-    var left = heap[leftIndex];
-    var rightIndex = leftIndex + 1;
-    var right = heap[rightIndex]; // If the left or right node is smaller, swap with the smaller of those.
-
-    if (compare(left, node) < 0) {
-      if (rightIndex < length && compare(right, left) < 0) {
-        heap[index] = right;
-        heap[rightIndex] = node;
-        index = rightIndex;
-      } else {
-        heap[index] = left;
-        heap[leftIndex] = node;
-        index = leftIndex;
-      }
-    } else if (rightIndex < length && compare(right, node) < 0) {
-      heap[index] = right;
-      heap[rightIndex] = node;
-      index = rightIndex;
+  }
+}
+
+function siftDown(heap, node, i) {
+  var index = i;
+  var length = heap.length;
+  var halfLength = length >>> 1;
+
+  while (index < halfLength) {
+    var leftIndex = (index + 1) * 2 - 1;
+    var left = heap[leftIndex];
+    var rightIndex = leftIndex + 1;
+    var right = heap[rightIndex]; // If the left or right node is smaller, swap with the smaller of those.
+
+    if (compare(left, node) < 0) {
+      if (rightIndex < length && compare(right, left) < 0) {
+        heap[index] = right;
+        heap[rightIndex] = node;
+        index = rightIndex;
+      } else {
+        heap[index] = left;
+        heap[leftIndex] = node;
+        index = leftIndex;
+      }
+    } else if (rightIndex < length && compare(right, node) < 0) {
+      heap[index] = right;
+      heap[rightIndex] = node;
+      index = rightIndex;
     } else {
       // Neither child is smaller. Exit.
       return;
@@ -31298,149 +30933,538 @@ setAttemptHydrationAtPriority(runWithPriority);
   }
 }
 
-setRestoreImplementation(restoreControlledState$3);
-setBatchingImplementation(batchedUpdates$1, discreteUpdates, flushSync);
-
-function createPortal$1(children, container) {
-  var key = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-
-  if (!isValidContainer(container)) {
-    throw new Error('Target container is not a DOM element.');
-  } // TODO: pass ReactDOM portal implementation as third argument
-  // $FlowFixMe The Flow type is opaque but there's no way to actually create it.
-
-
-  return createPortal(children, container, null, key);
-}
-
-function renderSubtreeIntoContainer(parentComponent, element, containerNode, callback) {
-  return unstable_renderSubtreeIntoContainer(parentComponent, element, containerNode, callback);
+setRestoreImplementation(restoreControlledState$3);
+setBatchingImplementation(batchedUpdates$1, discreteUpdates, flushSync);
+
+function createPortal$1(children, container) {
+  var key = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+
+  if (!isValidContainer(container)) {
+    throw new Error('Target container is not a DOM element.');
+  } // TODO: pass ReactDOM portal implementation as third argument
+  // $FlowFixMe The Flow type is opaque but there's no way to actually create it.
+
+
+  return createPortal(children, container, null, key);
+}
+
+function renderSubtreeIntoContainer(parentComponent, element, containerNode, callback) {
+  return unstable_renderSubtreeIntoContainer(parentComponent, element, containerNode, callback);
+}
+
+var Internals = {
+  usingClientEntryPoint: false,
+  // Keep in sync with ReactTestUtils.js.
+  // This is an array for better minification.
+  Events: [getInstanceFromNode, getNodeFromInstance, getFiberCurrentPropsFromNode, enqueueStateRestore, restoreStateIfNeeded, batchedUpdates$1]
+};
+
+function createRoot$1(container, options) {
+  {
+    if (!Internals.usingClientEntryPoint && !false) {
+      error('You are importing createRoot from "react-dom" which is not supported. ' + 'You should instead import it from "react-dom/client".');
+    }
+  }
+
+  return createRoot(container, options);
+}
+
+function hydrateRoot$1(container, initialChildren, options) {
+  {
+    if (!Internals.usingClientEntryPoint && !false) {
+      error('You are importing hydrateRoot from "react-dom" which is not supported. ' + 'You should instead import it from "react-dom/client".');
+    }
+  }
+
+  return hydrateRoot(container, initialChildren, options);
+} // Overload the definition to the two valid signatures.
+// Warning, this opts-out of checking the function body.
+
+
+// eslint-disable-next-line no-redeclare
+function flushSync$1(fn) {
+  {
+    if (isAlreadyRendering()) {
+      error('flushSync was called from inside a lifecycle method. React cannot ' + 'flush when React is already rendering. Consider moving this call to ' + 'a scheduler task or micro task.');
+    }
+  }
+
+  return flushSync(fn);
+}
+var foundDevTools = injectIntoDevTools({
+  findFiberByHostInstance: getClosestInstanceFromNode,
+  bundleType:  1 ,
+  version: ReactVersion,
+  rendererPackageName: 'react-dom'
+});
+
+{
+  if (!foundDevTools && canUseDOM && window.top === window.self) {
+    // If we're in Chrome or Firefox, provide a download link if not installed.
+    if (navigator.userAgent.indexOf('Chrome') > -1 && navigator.userAgent.indexOf('Edge') === -1 || navigator.userAgent.indexOf('Firefox') > -1) {
+      var protocol = window.location.protocol; // Don't warn in exotic cases like chrome-extension://.
+
+      if (/^(https?|file):$/.test(protocol)) {
+        // eslint-disable-next-line react-internal/no-production-logging
+        console.info('%cDownload the React DevTools ' + 'for a better development experience: ' + 'https://reactjs.org/link/react-devtools' + (protocol === 'file:' ? '\nYou might need to use a local HTTP server (instead of file://): ' + 'https://reactjs.org/link/react-devtools-faq' : ''), 'font-weight:bold');
+      }
+    }
+  }
+}
+
+exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;
+exports.createPortal = createPortal$1;
+exports.createRoot = createRoot$1;
+exports.findDOMNode = findDOMNode;
+exports.flushSync = flushSync$1;
+exports.hydrate = hydrate;
+exports.hydrateRoot = hydrateRoot$1;
+exports.render = render;
+exports.unmountComponentAtNode = unmountComponentAtNode;
+exports.unstable_batchedUpdates = batchedUpdates$1;
+exports.unstable_renderSubtreeIntoContainer = renderSubtreeIntoContainer;
+exports.version = ReactVersion;
+          /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+if (
+  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
+    'function'
+) {
+  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
+}
+        
+  })();
+}
+});
+
+var reactDom = createCommonjsModule(function (module) {
+
+function checkDCE() {
+  /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+  if (
+    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined' ||
+    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE !== 'function'
+  ) {
+    return;
+  }
+  if (process.env.NODE_ENV !== 'production') {
+    // This branch is unreachable because this function is only called
+    // in production, but the condition is true only in development.
+    // Therefore if the branch is still here, dead code elimination wasn't
+    // properly applied.
+    // Don't change the message. React DevTools relies on it. Also make sure
+    // this message doesn't occur elsewhere in this function, or it will cause
+    // a false positive.
+    throw new Error('^_^');
+  }
+  try {
+    // Verify that the code above has been dead code eliminated (DCE'd).
+    __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(checkDCE);
+  } catch (err) {
+    // DevTools shouldn't crash React, no matter what.
+    // We should still report in case we break this code.
+    console.error(err);
+  }
+}
+
+if (process.env.NODE_ENV === 'production') {
+  // DCE check should happen before ReactDOM bundle executes so that
+  // DevTools can report bad minification during injection.
+  checkDCE();
+  module.exports = reactDom_production_min;
+} else {
+  module.exports = reactDom_development;
 }
+});
 
-var Internals = {
-  usingClientEntryPoint: false,
-  // Keep in sync with ReactTestUtils.js.
-  // This is an array for better minification.
-  Events: [getInstanceFromNode, getNodeFromInstance, getFiberCurrentPropsFromNode, enqueueStateRestore, restoreStateIfNeeded, batchedUpdates$1]
-};
-
-function createRoot$1(container, options) {
-  {
-    if (!Internals.usingClientEntryPoint && !false) {
-      error('You are importing createRoot from "react-dom" which is not supported. ' + 'You should instead import it from "react-dom/client".');
-    }
+var useOutsideClick = function useOutsideClick(ref, handler, enabled) {
+  if (enabled === void 0) {
+    enabled = true;
   }
-
-  return createRoot(container, options);
-}
-
-function hydrateRoot$1(container, initialChildren, options) {
-  {
-    if (!Internals.usingClientEntryPoint && !false) {
-      error('You are importing hydrateRoot from "react-dom" which is not supported. ' + 'You should instead import it from "react-dom/client".');
+  useEffect(function () {
+    var listener = function listener(event) {
+      var element = ref == null ? void 0 : ref.current;
+      if (!element || element.contains((event == null ? void 0 : event.target) || null)) {
+        return;
+      }
+      handler(event);
+    };
+    if (enabled) {
+      document.addEventListener('click', listener);
     }
-  }
+    return function () {
+      return document.removeEventListener('click', listener);
+    };
+  }, [ref, enabled, handler]);
+};
 
-  return hydrateRoot(container, initialChildren, options);
-} // Overload the definition to the two valid signatures.
-// Warning, this opts-out of checking the function body.
+var _excluded$5 = ["size"];
+var Icon = function Icon(_ref) {
+  var _ref2;
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+  return /*#__PURE__*/jsx("span", {
+    className: clsx('inline-block', 'shrink-0', props.isDisabled ? 'fill-disabled-disabled01' : (_ref2 = {}, _ref2[iconColors.icon01] = props.color === 'icon01', _ref2[iconColors.icon01Dark] = props.color === 'icon01Dark', _ref2[iconColors.icon02] = props.color === 'icon02', _ref2[iconColors.icon02Dark] = props.color === 'icon02Dark', _ref2[iconColors.icon03] = props.color === 'icon03', _ref2[iconColors.icon03Dark] = props.color === 'icon03Dark', _ref2[iconColors.iconOnColor] = props.color === 'iconOnColor', _ref2), {
+      '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'
+    }),
+    children: iconElements[props.name]
+  });
+};
 
+var DropdownContext = /*#__PURE__*/createContext({
+  isVisible: false,
+  setIsVisible: function setIsVisible() {
+    return false;
+  },
+  isDisabled: false,
+  targetDimensions: {
+    width: 0,
+    height: 0
+  },
+  variant: 'outline'
+});
 
-// eslint-disable-next-line no-redeclare
-function flushSync$1(fn) {
-  {
-    if (isAlreadyRendering()) {
-      error('flushSync was called from inside a lifecycle method. React cannot ' + 'flush when React is already rendering. Consider moving this call to ' + 'a scheduler task or micro task.');
-    }
-  }
+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 && onClick(event);
+  };
+  var listItemClasses = clsx$1('flex w-full items-center');
+  var itemClasses = clsx$1('typography-label2regular flex h-8 w-full items-center px-3 hover:bg-hover-hover02 active:bg-active-active02', focusVisible.inset, {
+    'bg-background-uiBackground01 fill-icon-icon01 text-interactive-interactive02': color === 'gray',
+    'fill-support-supportDanger text-support-supportDanger': color === 'red'
+  });
+  return /*#__PURE__*/jsx("li", {
+    className: listItemClasses,
+    children: /*#__PURE__*/jsx("button", {
+      className: itemClasses,
+      type: "button",
+      onClick: handleClickItem,
+      children: children
+    })
+  });
+}
 
-  return flushSync(fn);
+function DropdownMenu(_ref) {
+  var children = _ref.children,
+    maxHeight = _ref.maxHeight,
+    isNoPadding = _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-background-uiBackground01 shadow-floatingShadow', {
+    absolute: !portalTargetRef,
+    'border-solid border 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
+  });
 }
-var foundDevTools = injectIntoDevTools({
-  findFiberByHostInstance: getClosestInstanceFromNode,
-  bundleType:  1 ,
-  version: ReactVersion,
-  rendererPackageName: 'react-dom'
-});
 
-{
-  if (!foundDevTools && canUseDOM && window.top === window.self) {
-    // If we're in Chrome or Firefox, provide a download link if not installed.
-    if (navigator.userAgent.indexOf('Chrome') > -1 && navigator.userAgent.indexOf('Edge') === -1 || navigator.userAgent.indexOf('Firefox') > -1) {
-      var protocol = window.location.protocol; // Don't warn in exotic cases like chrome-extension://.
+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 ? target ? 'text' : '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', isDisabled && 'cursor-not-allowed');
+  var childrenButtonClasses = clsx$1('flex items-center justify-center', 'rounded', 'hover:bg-hover-hover02', 'active:bg-active-active02', focusVisible.normal, isDisabled && 'pointer-events-none', 'p-1', {
+    'border border-border-uiBorder02': variant === 'outline'
+  });
+  var buttonClasses = clsx$1('flex items-center', 'rounded', buttonColors[variant].base, buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, isDisabled && 'pointer-events-none', {
+    '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-label3regular': size === 'x-small',
+    'typography-label2regular': size === 'small' || size === 'medium',
+    'typography-label1regular': 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__*/jsx("button", {
+        type: "button",
+        title: title,
+        className: childrenButtonClasses,
+        onClick: handleToggle,
+        disabled: isDisabled,
+        children: target
+      }) : /*#__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 && portalTargetRef.current && /*#__PURE__*/reactDom.createPortal(children, portalTargetRef.current)]
+    })
+  });
+}
+Dropdown.Menu = DropdownMenu;
+Dropdown.Item = DropdownItem;
 
-      if (/^(https?|file):$/.test(protocol)) {
-        // eslint-disable-next-line react-internal/no-production-logging
-        console.info('%cDownload the React DevTools ' + 'for a better development experience: ' + 'https://reactjs.org/link/react-devtools' + (protocol === 'file:' ? '\nYou might need to use a local HTTP server (instead of file://): ' + 'https://reactjs.org/link/react-devtools-faq' : ''), 'font-weight:bold');
+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'
+  });
+  var ratingStars = [];
+  var _loop = function _loop(i) {
+    var color = i <= currentRating ? 'fill-yellow-yellow50' : 'fill-icon-icon03';
+    ratingStars.push( /*#__PURE__*/jsx("button", {
+      type: "button",
+      onClick: function onClick() {
+        return handleChangeRating(i);
+      },
+      className: clsx$1(color, starClasses),
+      disabled: !isEditable,
+      children: iconElements['star-filled']
+    }, i));
+  };
+  for (var i = 1; i < maxRating + 1; i++) {
+    _loop(i);
   }
+  return /*#__PURE__*/jsx("span", {
+    className: "flex flex-row",
+    children: ratingStars
+  });
 }
 
-exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;
-exports.createPortal = createPortal$1;
-exports.createRoot = createRoot$1;
-exports.findDOMNode = findDOMNode;
-exports.flushSync = flushSync$1;
-exports.hydrate = hydrate;
-exports.hydrateRoot = hydrateRoot$1;
-exports.render = render;
-exports.unmountComponentAtNode = unmountComponentAtNode;
-exports.unstable_batchedUpdates = batchedUpdates$1;
-exports.unstable_renderSubtreeIntoContainer = renderSubtreeIntoContainer;
-exports.version = ReactVersion;
-          /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-if (
-  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
-  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
-    'function'
-) {
-  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
-}
-        
-  })();
+function Heading(props) {
+  var TagName = "h" + props.level;
+  var classes = clsx("flex items-center text-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 reactDom = createCommonjsModule(function (module) {
 
-function checkDCE() {
-  /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-  if (
-    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined' ||
-    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE !== 'function'
-  ) {
-    return;
-  }
-  if (process.env.NODE_ENV !== 'production') {
-    // This branch is unreachable because this function is only called
-    // in production, but the condition is true only in development.
-    // Therefore if the branch is still here, dead code elimination wasn't
-    // properly applied.
-    // Don't change the message. React DevTools relies on it. Also make sure
-    // this message doesn't occur elsewhere in this function, or it will cause
-    // a false positive.
-    throw new Error('^_^');
-  }
-  try {
-    // Verify that the code above has been dead code eliminated (DCE'd).
-    __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(checkDCE);
-  } catch (err) {
-    // DevTools shouldn't crash React, no matter what.
-    // We should still report in case we break this code.
-    console.error(err);
+var _excluded$4 = ["size", "variant"];
+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,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+  var baseClasses = clsx('typography-label1regular flex items-center justify-center gap-1 rounded', buttonColors[variant].base, buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, {
+    'h-6 w-6': size === 'small' && !props.isNoPadding
+  }, {
+    'h-8 w-8': size === 'medium' && !props.isNoPadding
+  }, {
+    'h-10 w-10': size === 'large' && !props.isNoPadding
+  }, {
+    'h-4 w-4': size === 'small' && props.isNoPadding
+  }, {
+    'h-6 w-6': size === 'medium' && props.isNoPadding
+  }, {
+    'h-6 w-6': size === 'large' && props.isNoPadding
+  }, {
+    'inline-flex': props.isAnchor
+  }, {
+    'pointer-events-none': props.isDisabled
+  });
+  var iconSize = size === 'small' ? 'small' : 'medium';
+  if (props.isAnchor) {
+    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: props.isDisabled,
+      onClick: props.onClick,
+      children: /*#__PURE__*/jsx(Icon, {
+        name: props.icon,
+        size: iconSize
+      })
+    });
   }
 }
 
-if (process.env.NODE_ENV === 'production') {
-  // DCE check should happen before ReactDOM bundle executes so that
-  // DevTools can report bad minification during injection.
-  checkDCE();
-  module.exports = reactDom_production_min;
-} else {
-  module.exports = reactDom_development;
+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, 'top-0', 'left-0', 'z-20', 'flex', 'items-center', 'justify-center', 'w-full');
+  var svgClasses = clsx$1(size === 'small' && 'h-4 w-4', size === 'medium' && 'h-8 w-8', size === 'large' && 'h-16 w-16');
+  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-interactive-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-interactive-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-interactive-interactive01",
+          cx: "32",
+          cy: "32",
+          r: "30",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          fill: "none"
+        })
+      })]
+    })
+  });
 }
-});
 
 function ModalBody(_ref) {
   var children = _ref.children;
@@ -31474,7 +31498,7 @@ function ModalHeader(_ref) {
     isNoCloseButton = _ref.isNoCloseButton;
   var _useContext = useContext(ModalContext),
     setIsOpen = _useContext.setIsOpen;
-  var headerClasses = clsx$1('flex', 'shrink-0', 'items-center', 'justify-between', 'w-full', 'rounded-t-lg', 'px-6', 'text-text-text01', typography.heading.h5, {
+  var headerClasses = clsx$1('typography-h5 flex w-full shrink-0 items-center justify-between rounded-t-lg px-6 text-text-text01', {
     'border-b-[1px] border-border-uiBorder01': !isNoBorder,
     'h-14': !isNoCloseButton,
     'h-12': isNoCloseButton
@@ -31527,14 +31551,14 @@ Modal.Body = ModalBody;
 Modal.Header = ModalHeader;
 Modal.Footer = ModalFooter;
 
-var _excluded$2 = ["state", "size"];
+var _excluded$3 = ["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$2);
-  var wrapperClasses = clsx('rounded', 'text-text-text01', 'flex', 'gap-1', 'items-center', typography.body.body2regular, {
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+  var wrapperClasses = clsx('typography-body2regular flex items-center gap-1 rounded text-text-text01', {
     'bg-background-uiBackgroundError': state === 'attention',
     'bg-background-uiBackgroundWarning': state === 'warning',
     'bg-background-uiBackgroundBlue': state === 'information',
@@ -31701,13 +31725,13 @@ function SelectItem$1(_ref) {
     onChange == null || onChange(option);
     setIsOptionListOpen(false);
   };
-  var listItemClasses = clsx$1('flex w-full items-center');
-  var itemClasses = clsx$1('flex', 'items-center', 'w-full', 'h-8', 'px-3', 'hover:bg-hover-hover02', 'active:bg-active-active02', focusVisible.inset, typography.label.label2regular, {
+  var itemClasses = clsx$1('typography-label2regular flex h-8 w-full items-center px-3 hover:bg-hover-hover02 active:bg-active-active02', focusVisible.inset, {
     'text-interactive-interactive01 fill-interactive-interactive01 bg-selected-selectedUi': option.id === (selectedOption == null ? void 0 : selectedOption.id),
     'text-interactive-interactive02 fill-icon-icon01 bg-background-uiBackground01': option.id !== (selectedOption == null ? void 0 : selectedOption.id)
   });
   return /*#__PURE__*/jsx("li", {
-    className: listItemClasses,
+    className: "flex w-full items-center",
+    "data-id": option.id,
     children: /*#__PURE__*/jsxs("button", {
       className: itemClasses,
       type: "button",
@@ -31734,6 +31758,7 @@ function SelectItem$1(_ref) {
 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,
@@ -31745,18 +31770,32 @@ function SelectList$1(_ref) {
     onChange == null || onChange(null);
     setIsOptionListOpen(false);
   };
-  var listClasses = clsx$1('z-dropdown', 'absolute', 'w-max', 'py-2', 'overflow-y-auto', 'bg-background-uiBackground01', 'rounded', 'shadow-floatingShadow', {
+  useLayoutEffect(function () {
+    if (maxHeight && ref.current) {
+      var element = Array.from(ref.current.children || []).find(function (item) {
+        return item.getAttribute('data-id') === (selectedOption == null ? void 0 : selectedOption.id);
+      });
+      if (element) {
+        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-background-uiBackground01 py-2 shadow-floatingShadow', {
     'top-7': size === 'x-small' || size === 'small',
     'top-9': size === 'medium',
     'top-11': size === 'large',
     'border-solid border border-border-uiBorder01': variant === 'outline'
   });
-  var deselectButtonClasses = clsx$1('flex', 'items-center', 'w-full', 'h-8', 'px-3', 'hover:bg-hover-hover02', 'active:bg-active-active02', 'text-interactive-interactive02', focusVisible.inset, typography.label.label2regular);
+  var deselectButtonClasses = clsx$1('typography-label2regular flex h-8 w-full items-center px-3 text-interactive-interactive02 hover:bg-hover-hover02 active:bg-active-active02', focusVisible.inset);
   return /*#__PURE__*/jsxs("ul", {
     className: listClasses,
     style: {
       maxHeight: maxHeight
     },
+    ref: ref,
     children: [children, placeholder && selectedOption !== null && /*#__PURE__*/jsx("li", {
       children: /*#__PURE__*/jsx("button", {
         className: deselectButtonClasses,
@@ -31795,18 +31834,24 @@ function Select(_ref) {
       return !prev;
     });
   };
-  var wrapperClasses = clsx$1('relative', 'flex', 'shrink-0', 'gap-1', 'items-center', 'rounded', {
+  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', 'items-center', 'w-full', 'h-full', 'rounded', buttonColors[variant].base, buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, {
+  var buttonClasses = clsx$1('flex h-full w-full items-center rounded', buttonColors[variant].base, buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, {
     'px-2': size === 'x-small' || size === 'small',
     'px-4': size === 'medium' || size === 'large',
     'pointer-events-none': isDisabled
   });
-  var labelClasses = clsx$1('overflow-hidden', size === 'x-small' ? 'mr-1' : 'mr-2', typography.label[size === 'x-small' ? 'label3regular' : size === 'small' || size === 'medium' ? 'label2regular' : 'label1regular']);
+  var labelClasses = clsx$1('overflow-hidden', {
+    'mr-1': size === 'x-small',
+    'mr-2': size !== 'x-small',
+    'typography-label3regular': size === 'x-small',
+    'typography-label2regular': size === 'small' || size === 'medium',
+    'typography-label1regular': size === 'large'
+  });
   return /*#__PURE__*/jsx(SelectContext.Provider, {
     value: {
       size: size,
@@ -31889,7 +31934,7 @@ function PaginationSelect(_ref) {
     children: [/*#__PURE__*/jsxs("div", {
       className: "flex items-center gap-x-2",
       children: [/*#__PURE__*/jsxs("div", {
-        className: clsx$1('text-text-text01', typography.label.label2regular),
+        className: "typography-label2regular text-text-text01",
         children: [(currentPage - 1) * sizePerPage + 1, " -", ' ', currentPage * sizePerPage > totalSize ? totalSize : currentPage * sizePerPage, countLabel]
       }), /*#__PURE__*/jsx(Select, {
         size: "medium",
@@ -31907,7 +31952,7 @@ function PaginationSelect(_ref) {
           }, option.id);
         })
       }), /*#__PURE__*/jsxs("div", {
-        className: clsx$1('text-text-text03', typography.label.label2regular),
+        className: "typography-label2regular text-text-text03",
         children: ["/ ", pageMax, pageLabel]
       })]
     }), /*#__PURE__*/jsxs("div", {
@@ -31951,25 +31996,27 @@ function Radio(_ref) {
   var handleChange = useCallback(function (e) {
     return !isDisabled && (onChange == null ? void 0 : onChange(e));
   }, [isDisabled, onChange]);
-  var inputClasses = clsx$1('absolute', 'z-[1]', 'opacity-0', 'peer', 'h-6', 'w-6', {
+  var inputClasses = clsx$1('peer absolute z-[1] h-6 w-6 opacity-0', {
     'cursor-not-allowed': isDisabled,
     'cursor-pointer': !isDisabled
   });
-  var boxClasses = clsx$1('inline-flex', 'items-center', 'justify-center', 'h-5', 'w-5', 'bg-white', 'border', 'border-solid', 'rounded-full', focusVisible.normalPeer, {
+  var boxClasses = clsx$1('inline-flex h-5 w-5 items-center justify-center rounded-full border border-solid bg-white', focusVisible.normalPeer, {
     'border-disabled-disabled01 hover:border-disabled-disabled01': isDisabled && !isMouseOver,
     'border-hover-hoverUiBorder': !isDisabled && isMouseOver,
     'border-border-uiBorder03': !isDisabled,
     'cursor-not-allowed': isDisabled,
     'cursor-pointer': !isDisabled
   });
-  var afterClasses = clsx$1('h-3', 'w-3', 'absolute', 'top-0', 'right-0', 'bottom-0', 'left-0', 'block', 'm-auto', 'rounded-full', {
+  var afterClasses = clsx$1('absolute inset-0 m-auto block h-3 w-3 rounded-full', {
     'bg-disabled-disabled01': isDisabled && isChecked,
     'bg-active-activeSelectedUi': !isDisabled && isChecked,
     'scale-0': !isChecked,
     'scale-100': isChecked
   });
-  var hoverIndicatorClasses = clsx$1('w-3', 'h-3', 'inline-block', 'rounded-full', !isDisabled && !isChecked && isMouseOver && 'bg-hover-hoverUi');
-  var labelClasses = clsx$1('flex-[1_0_0]', 'ml-2', typography.label.label2regular, 'break-all', 'select-none', {
+  var hoverIndicatorClasses = clsx$1('inline-block h-3 w-3 rounded-full', {
+    'bg-hover-hoverUi': !isDisabled && !isChecked && isMouseOver
+  });
+  var labelClasses = clsx$1('typography-label2regular ml-2 flex-[1_0_0] select-none break-all', {
     'pointer-events-none cursor-not-allowed text-disabled-disabled01': isDisabled,
     'cursor-pointer text-text-text01': !isDisabled
   });
@@ -32007,20 +32054,20 @@ function Radio(_ref) {
   });
 }
 
-var _excluded$1 = ["width", "size"];
+var _excluded$2 = ["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$1);
-  var classes = clsx('flex', 'items-center', 'rounded-full', 'border', 'border-border-uiBorder02', 'focus-within:border-active-activeInput', {
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  var classes = clsx('flex items-center rounded-full border border-border-uiBorder02 focus-within:border-active-activeInput', {
     'h-8 px-3': size === 'medium'
   }, {
     'h-10 px-4': size === 'large'
   });
-  var inputClasses = clsx('ml-2.5', 'mr-2.5', 'h-full', 'flex-1', 'outline-0', 'text-text-text01', 'placeholder:text-text-textPlaceholder', (_clsx = {}, _clsx["" + typography.label.label2regular] = size === 'medium', _clsx["" + typography.label.label1regular] = size === 'large', _clsx));
+  var inputClasses = clsx('mx-2.5 h-full flex-1 text-text-text01 outline-0 placeholder:text-text-textPlaceholder', (_clsx = {}, _clsx['typography-label2regular'] = size === 'medium', _clsx['typography-label1regular'] = size === 'large', _clsx));
   return /*#__PURE__*/jsx("div", {
     className: "relative",
     ref: ref,
@@ -32060,7 +32107,10 @@ function SelectItem(_ref) {
     isSortKey = _ref.isSortKey,
     onClickItem = _ref.onClickItem;
   var listItemClasses = clsx$1('flex w-full items-center');
-  var itemClasses = clsx$1('flex', 'items-center', 'w-full', 'h-8', 'px-3', 'hover:bg-hover-hover02', 'active:bg-active-active02', focusVisible.inset, typography.label.label2regular, isSortKey ? 'bg-selected-selectedUi fill-interactive-interactive01 text-interactive-interactive01' : 'bg-background-uiBackground01 fill-icon-icon01 text-interactive-interactive02');
+  var itemClasses = clsx$1('typography-label2regular flex h-8 w-full items-center px-3 hover:bg-hover-hover02 active:bg-active-active02', focusVisible.inset, {
+    'bg-selected-selectedUi fill-interactive-interactive01 text-interactive-interactive01': isSortKey,
+    'bg-background-uiBackground01 fill-icon-icon01 text-interactive-interactive02': !isSortKey
+  });
   return /*#__PURE__*/jsx("li", {
     className: listItemClasses,
     onClick: onClickItem,
@@ -32087,13 +32137,13 @@ function SelectList(_ref) {
     sortOrder = _ref.sortOrder,
     _onClickItem = _ref.onClickItem,
     onClickDeselect = _ref.onClickDeselect;
-  var listClasses = clsx$1('z-dropdown', 'absolute', 'w-max', 'py-2', 'overflow-y-auto', 'bg-background-uiBackground01', 'rounded', 'shadow-floatingShadow', {
+  var listClasses = clsx$1('absolute z-dropdown w-max overflow-y-auto rounded bg-background-uiBackground01 py-2 shadow-floatingShadow', {
     'top-7': size === 'x-small' || size === 'small',
     'top-9': size === 'medium',
     'top-11': size === 'large',
     'border-solid border border-border-uiBorder01': variant === 'outline'
   });
-  var deselectButtonClasses = clsx$1('flex', 'items-center', 'w-full', 'h-8', 'px-3', 'hover:bg-hover-hover02', 'active:bg-active-active02', 'text-interactive-interactive02', focusVisible.inset, typography.label.label2regular);
+  var deselectButtonClasses = clsx$1('typography-label2regular flex h-8 w-full items-center px-3 text-interactive-interactive02 hover:bg-hover-hover02 active:bg-active-active02', focusVisible.inset);
   return /*#__PURE__*/jsxs("ul", {
     className: listClasses,
     children: [/*#__PURE__*/jsx(SelectItem, {
@@ -32196,7 +32246,7 @@ function SelectSort(_ref) {
 
 var TabItem = function TabItem(props) {
   var _clsx;
-  var classes = clsx('relative', 'flex', 'z-0', 'py-2', 'leading-[24px]', 'before:h-px', 'before:absolute', 'before:left-0', 'before:right-0', 'before:bottom-0', 'hover:text-text-text01', 'disabled:text-disabled-disabled01', 'disabled:pointer-events-none', (_clsx = {}, _clsx["" + typography.label.label2regular] = !props.isSelected, _clsx['text-interactive-interactive02 hover:before:bg-border-uiBorder02Dark'] = !props.isSelected, _clsx["" + typography.label.label2bold] = props.isSelected, _clsx['before:bg-interactive-interactive01 hover:before:bg-interactive-interactive01 pointer-events-none'] = props.isSelected, _clsx));
+  var classes = clsx('relative', 'flex', 'z-0', 'py-2', 'leading-[24px]', 'before:h-px', 'before:absolute', 'before:left-0', 'before:right-0', 'before:bottom-0', 'hover:text-text-text01', 'disabled:text-disabled-disabled01', 'disabled:pointer-events-none', (_clsx = {}, _clsx['typography-label2regular'] = !props.isSelected, _clsx['text-interactive-interactive02 hover:before:bg-border-uiBorder02Dark'] = !props.isSelected, _clsx['typography-label2bold'] = props.isSelected, _clsx['before:bg-interactive-interactive01 hover:before:bg-interactive-interactive01 pointer-events-none'] = props.isSelected, _clsx));
   return /*#__PURE__*/jsx("button", {
     type: "button",
     role: "tab",
@@ -32296,7 +32346,7 @@ function Tag(_ref) {
     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.label.label4regular] = !isEditable && size === 'x-small', _clsx["h-4 " + typography.label.label3regular] = !isEditable && size === 'small', _clsx["h-[18px] " + typography.label.label2regular] = !isEditable && size === 'medium', _clsx["h-[22px] " + typography.label.label2regular] = isEditable && size === 'medium', _clsx['rounded-full'] = isEditable, _clsx.rounded = !isEditable, _clsx['py-0.5 px-1'] = !isEditable, _clsx['py-1 px-2'] = isEditable, _clsx));
+  var wrapperClasses = clsx$1('flex', 'items-center', 'justify-center', (_clsx = {}, _clsx[tagColors[color]] = variant === 'normal', _clsx[tagLightColors[color]] = variant === 'light', _clsx['h-[14px] typography-label4regular'] = !isEditable && size === 'x-small', _clsx['h-4 typography-label3regular'] = !isEditable && size === 'small', _clsx['h-[18px] typography-label2regular'] = !isEditable && size === 'medium', _clsx['h-[22px] typography-label2regular'] = 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, {
@@ -32309,6 +32359,35 @@ function Tag(_ref) {
   });
 }
 
+var _excluded$1 = ["size", "isResizable", "isError"];
+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,
+    isError = _ref.isError,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  var classes = clsx('w-full rounded border outline-0 placeholder:text-text-textPlaceholder disabled:text-text-textPlaceholder', (_clsx = {
+    'border-support-supportError': isError && !props.disabled,
+    'hover:border-hover-hoverInput': !props.disabled && !isError,
+    'border-border-uiBorder01 hover:focus-within:border-active-activeInput focus-within:border-active-activeInput text-text-text01': !isError,
+    'bg-disabled-disabled02 border-disabled-disabled02': props.disabled
+  }, _clsx['typography-body1regular px-2 pt-1.5 pb-2'] = size === 'medium', _clsx['text-4 px-3.5 py-2.5'] = size === 'large', _clsx['text-support-supportError'] = isError, _clsx['resize-none'] = !isResizable, _clsx));
+  return /*#__PURE__*/jsx("div", {
+    className: "flex",
+    children: /*#__PURE__*/jsx("textarea", _extends({
+      ref: ref,
+      className: classes
+    }, props, {
+      style: {
+        height: props.height
+      }
+    }))
+  });
+});
+TextArea.displayName = 'TextArea';
+
 var _excluded = ["size", "isError", "onClickClearButton"];
 var TextInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _clsx;
@@ -32325,7 +32404,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
     'focus-within:border-active-activeInput': !isError,
     'bg-disabled-disabled02 border-disabled-disabled02': props.disabled
   });
-  var inputClasses = clsx('flex-1 outline-0 placeholder:text-text-textPlaceholder disabled:text-text-textPlaceholder', (_clsx = {}, _clsx[typography.label.label2regular + " pt-1.5 pb-2"] = size === 'medium', _clsx[typography.label.label1regular + " py-2.5"] = size === 'large', _clsx['text-text-text01'] = !isError, _clsx['text-support-supportError'] = isError, _clsx));
+  var inputClasses = clsx('flex-1 outline-0 placeholder:text-text-textPlaceholder disabled:text-text-textPlaceholder', (_clsx = {}, _clsx['typography-label2regular pt-1.5 pb-2'] = size === 'medium', _clsx['typography-label1regular py-2.5'] = size === 'large', _clsx['text-text-text01'] = !isError, _clsx['text-support-supportError'] = isError, _clsx));
   return /*#__PURE__*/jsxs("div", {
     className: inputWrapClasses,
     children: [/*#__PURE__*/jsx("input", _extends({
@@ -32369,13 +32448,13 @@ function Toast(_ref) {
     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', {
+  var iconClasses = clsx$1('flex items-center', {
     'fill-support-supportSuccess': state === 'success',
     'fill-support-supportError': state === 'error',
     'fill-support-supportWarning': state === 'warning',
     'fill-support-supportInfo': state === 'information'
   });
-  var textClasses = clsx$1('flex-1', 'pt-[3px]', typography.body.body2regular, {
+  var textClasses = clsx$1('typography-body2regular flex-1 pt-[3px]', {
     'text-support-supportError': state === 'error',
     'text-text-text01': state === 'success' || state === 'warning' || state === 'information'
   });
@@ -32488,8 +32567,8 @@ function Toggle(_ref) {
     _ref$labelPosition = _ref.labelPosition,
     labelPosition = _ref$labelPosition === void 0 ? 'right' : _ref$labelPosition,
     isDisabled = _ref.isDisabled;
-  var wrapperClasses = clsx$1('flex', 'flex-[0_0_auto]', 'items-center', 'relative');
-  var baseClasses = clsx$1('relative', 'flex', 'items-center', 'rounded-full', {
+  var wrapperClasses = 'flex flex-[0_0_auto] items-center relative';
+  var baseClasses = clsx$1('relative flex items-center rounded-full', {
     'w-8 h-4 px-[3px]': size === 'small',
     'w-12 h-6 px-1': size === 'medium'
   }, isDisabled ? {
@@ -32499,13 +32578,20 @@ function Toggle(_ref) {
     'bg-interactive-interactive01 peer-hover:bg-hover-hover01': isChecked,
     'bg-interactive-interactive02 peer-hover:bg-hover-hover02Dark': !isChecked
   });
-  var inputClasses = clsx$1('peer', 'absolute', 'inset-0', 'z-[1]', 'opacity-0', isDisabled ? 'cursor-not-allowed' : 'cursor-pointer');
+  var inputClasses = clsx$1('peer absolute inset-0 z-[1] opacity-0', isDisabled ? 'cursor-not-allowed' : 'cursor-pointer');
   var indicatorClasses = clsx$1('bg-icon-iconOnColor', 'rounded-full', {
     'w-2.5 h-2.5': size === 'small',
     'w-4 h-4': size === 'medium',
     'ml-auto': isChecked
   });
-  var labelClasses = clsx$1(labelPosition === 'right' ? 'ml-2' : 'mr-2', typography.label[size === 'small' ? 'label3regular' : 'label1regular'], 'break-all', isDisabled ? 'pointer-events-none cursor-not-allowed text-disabled-disabled01' : 'cursor-pointer text-text-text01');
+  var labelClasses = clsx$1('break-all', {
+    'mr-2': labelPosition === 'left',
+    'ml-2': labelPosition === 'right',
+    'typography-label3regular': size === 'small',
+    'typography-label1regular': size === 'medium',
+    'pointer-events-none cursor-not-allowed text-disabled-disabled01': isDisabled,
+    'cursor-pointer text-text-text01': !isDisabled
+  });
   return /*#__PURE__*/jsxs("div", {
     className: wrapperClasses,
     children: [label && labelPosition === 'left' && /*#__PURE__*/jsx("label", {
@@ -32599,7 +32685,15 @@ function Tooltip(_ref) {
     setIsVisible(false);
   }, []);
   var targetClasses = clsx$1('relative', 'flex', 'items-center', 'justify-center');
-  var tooltipBodyClasses = clsx$1('z-tooltip', 'absolute', 'w-max', horizontalAlign === 'left' ? 'left-0' : horizontalAlign === 'right' ? 'right-0' : 'left-auto', 'inline-block', size === 'small' ? 'px-2 pb-1 pt-1.5' : 'px-4 py-3', 'text-text-textOnColor', 'bg-background-uiBackgroundTooltip', 'rounded', typography.body[size === 'small' ? 'body3regular' : 'body2regular']);
+  var tooltipBodyClasses = clsx$1('absolute z-tooltip inline-block w-max rounded bg-background-uiBackgroundTooltip text-text-textOnColor', {
+    'typography-body3regular': size === 'small',
+    'typography-body2regular': size === 'medium',
+    'px-2 pb-1 pt-1.5': size === 'small',
+    'px-4 py-3': size === 'medium',
+    'left-0': horizontalAlign === 'left',
+    'right-0': horizontalAlign === 'right',
+    'left-auto': horizontalAlign === 'center'
+  });
   return /*#__PURE__*/jsxs("div", {
     ref: targetRef,
     className: targetClasses,
@@ -32621,5 +32715,5 @@ function Tooltip(_ref) {
   });
 }
 
-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, TextInput, Toast, ToastProvider, Toggle, Tooltip, useToast };
+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, useToast };
 //# sourceMappingURL=index.esm.js.map