@zenkigen-inc/component-ui 1.9.9 → 1.10.0

package/dist/icon/icon.d.ts

@@ -8,6 +8,7 @@ type Props = {
     size?: Size;
     color?: Color;
     isDisabled?: boolean;
+    className?: string;
 };
 export declare const Icon: ({ size, isDisabled, ...props }: Props) => import("react").JSX.Element;
 export {};

package/dist/index.esm.js

@@ -5,30 +5,22 @@ import aa, { useState, useCallback, useEffect, createContext, useContext, useRef
 import { iconElements } from '@zenkigen-inc/component-icons';
 
 function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  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 target;
-  };
-  return _extends.apply(this, arguments);
-}
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
+    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 (e.indexOf(n) >= 0) continue;
+    t[n] = r[n];
   }
-  return target;
+  return t;
 }
 
 var _excluded$8 = ["size"];
@@ -41,11 +33,11 @@ function Avatar(_ref) {
     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-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',
+    '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));
@@ -71,7 +63,7 @@ function Breadcrumb(_ref) {
   return /*#__PURE__*/jsx("nav", {
     "aria-label": "breadcrumb",
     children: /*#__PURE__*/jsx("ul", {
-      className: "typography-label2regular flex flex-wrap gap-2 whitespace-nowrap text-text01",
+      className: "typography-label14regular flex flex-wrap gap-2 whitespace-nowrap text-text01",
       children: children
     })
   });
@@ -100,7 +92,7 @@ var Button = function Button(_ref) {
     '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['typography-label1regular'] = size === 'large', _clsx['typography-label2regular'] = size !== 'large', _clsx));
+  }, _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['typography-label16regular'] = size === 'large', _clsx['typography-label14regular'] = size !== 'large', _clsx));
   var Component = elementAs != null ? elementAs : 'button';
   return /*#__PURE__*/jsxs(Component, _extends({
     className: baseClasses,
@@ -194,7 +186,7 @@ function Checkbox(_ref) {
   var hoverIndicatorClasses = clsx$1('inline-block size-3 rounded-[1px]', {
     'bg-hoverUi': !isDisabled && !isChecked && isMouseOver
   });
-  var labelClasses = clsx$1('typography-label2regular ml-2 flex-[1_0_0] break-all', {
+  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
   });
@@ -1202,14 +1194,14 @@ function ql(a,b,c,d,e){if(e){if("function"===typeof d){var f=d;d=function(){var
 function rl(a,b,c,d,e){var f=c._reactRootContainer;if(f){var g=f;if("function"===typeof e){var h=e;e=function(){var a=gl(g);h.call(a);};}fl(b,g,a,e);}else g=ql(c,b,a,e,d);return gl(g)}Ec=function(a){switch(a.tag){case 3:var b=a.stateNode;if(b.current.memoizedState.isDehydrated){var c=tc(b.pendingLanes);0!==c&&(Cc(b,c|1),Dk(b,B()),0===(K&6)&&(Gj=B()+500,jg()));}break;case 13:Rk(function(){var b=ih(a,1);if(null!==b){var c=R();gi(b,a,1,c);}}),il(a,1);}};
 Fc=function(a){if(13===a.tag){var b=ih(a,134217728);if(null!==b){var c=R();gi(b,a,134217728,c);}il(a,134217728);}};Gc=function(a){if(13===a.tag){var b=yi(a),c=ih(a,b);if(null!==c){var d=R();gi(c,a,b,d);}il(a,b);}};Hc=function(){return C};Ic=function(a,b){var c=C;try{return C=a,b()}finally{C=c;}};
 yb=function(a,b,c){switch(b){case "input":bb(a,c);b=c.name;if("radio"===c.type&&null!=b){for(c=a;c.parentNode;)c=c.parentNode;c=c.querySelectorAll("input[name="+JSON.stringify(""+b)+'][type="radio"]');for(b=0;b<c.length;b++){var d=c[b];if(d!==a&&d.form===a.form){var e=Db(d);if(!e)throw Error(p(90));Wa(d);bb(d,e);}}}break;case "textarea":ib(a,c);break;case "select":b=c.value,null!=b&&fb(a,!!c.multiple,b,!1);}};Gb=Qk;Hb=Rk;
-var sl={usingClientEntryPoint:!1,Events:[Cb,ue,Db,Eb,Fb,Qk]},tl={findFiberByHostInstance:Wc,bundleType:0,version:"18.3.0",rendererPackageName:"react-dom"};
+var sl={usingClientEntryPoint:!1,Events:[Cb,ue,Db,Eb,Fb,Qk]},tl={findFiberByHostInstance:Wc,bundleType:0,version:"18.3.1",rendererPackageName:"react-dom"};
 var ul={bundleType:tl.bundleType,version:tl.version,rendererPackageName:tl.rendererPackageName,rendererConfig:tl.rendererConfig,overrideHookState:null,overrideHookStateDeletePath:null,overrideHookStateRenamePath:null,overrideProps:null,overridePropsDeletePath:null,overridePropsRenamePath:null,setErrorHandler:null,setSuspenseHandler:null,scheduleUpdate:null,currentDispatcherRef:ua.ReactCurrentDispatcher,findHostInstanceByFiber:function(a){a=Zb(a);return null===a?null:a.stateNode},findFiberByHostInstance:tl.findFiberByHostInstance||
-jl,findHostInstancesForRefresh:null,scheduleRefresh:null,scheduleRoot:null,setRefreshHandler:null,getCurrentFiber:null,reconcilerVersion:"18.3.0-next-8a015b68cc-20240425"};if("undefined"!==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__){var vl=__REACT_DEVTOOLS_GLOBAL_HOOK__;if(!vl.isDisabled&&vl.supportsFiber)try{kc=vl.inject(ul),lc=vl;}catch(a){}}var __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=sl;
+jl,findHostInstancesForRefresh:null,scheduleRefresh:null,scheduleRoot:null,setRefreshHandler:null,getCurrentFiber:null,reconcilerVersion:"18.3.1-next-f1338f8080-20240426"};if("undefined"!==typeof __REACT_DEVTOOLS_GLOBAL_HOOK__){var vl=__REACT_DEVTOOLS_GLOBAL_HOOK__;if(!vl.isDisabled&&vl.supportsFiber)try{kc=vl.inject(ul),lc=vl;}catch(a){}}var __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=sl;
 var createPortal=function(a,b){var c=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;if(!nl(b))throw Error(p(200));return cl(a,b,null,c)};var createRoot=function(a,b){if(!nl(a))throw Error(p(299));var c=!1,d="",e=kl;null!==b&&void 0!==b&&(!0===b.unstable_strictMode&&(c=!0),void 0!==b.identifierPrefix&&(d=b.identifierPrefix),void 0!==b.onRecoverableError&&(e=b.onRecoverableError));b=bl(a,1,!1,null,null,c,!1,d,e);a[uf]=b.current;sf(8===a.nodeType?a.parentNode:a);return new ll(b)};
 var findDOMNode=function(a){if(null==a)return null;if(1===a.nodeType)return a;var b=a._reactInternals;if(void 0===b){if("function"===typeof a.render)throw Error(p(188));a=Object.keys(a).join(",");throw Error(p(268,a));}a=Zb(b);a=null===a?null:a.stateNode;return a};var flushSync=function(a){return Rk(a)};var hydrate=function(a,b,c){if(!ol(b))throw Error(p(200));return rl(null,a,b,!0,c)};
 var hydrateRoot=function(a,b,c){if(!nl(a))throw Error(p(405));var d=null!=c&&c.hydratedSources||null,e=!1,f="",g=kl;null!==c&&void 0!==c&&(!0===c.unstable_strictMode&&(e=!0),void 0!==c.identifierPrefix&&(f=c.identifierPrefix),void 0!==c.onRecoverableError&&(g=c.onRecoverableError));b=el(b,null,a,1,null!=c?c:null,e,!1,f,g);a[uf]=b.current;sf(a);if(d)for(a=0;a<d.length;a++)c=d[a],e=c._getVersion,e=e(c._source),null==b.mutableSourceEagerHydrationData?b.mutableSourceEagerHydrationData=[c,e]:b.mutableSourceEagerHydrationData.push(c,
 e);return new ml(b)};var render=function(a,b,c){if(!ol(b))throw Error(p(200));return rl(null,a,b,!1,c)};var unmountComponentAtNode=function(a){if(!ol(a))throw Error(p(40));return a._reactRootContainer?(Rk(function(){rl(null,null,a,!1,function(){a._reactRootContainer=null;a[uf]=null;});}),!0):!1};var unstable_batchedUpdates=Qk;
-var unstable_renderSubtreeIntoContainer=function(a,b,c,d){if(!ol(c))throw Error(p(200));if(null==a||void 0===a._reactInternals)throw Error(p(38));return rl(a,b,c,!1,d)};var version="18.3.0-next-8a015b68cc-20240425";
+var unstable_renderSubtreeIntoContainer=function(a,b,c,d){if(!ol(c))throw Error(p(200));if(null==a||void 0===a._reactInternals)throw Error(p(38));return rl(a,b,c,!1,d)};var version="18.3.1-next-f1338f8080-20240426";
 
 var reactDom_production_min = {
 	__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
@@ -29908,7 +29900,7 @@ identifierPrefix, onRecoverableError, transitionCallbacks) {
   return root;
 }
 
-var ReactVersion = '18.3.0';
+var ReactVersion = '18.3.1';
 
 function createPortal(children, containerInfo, // TODO: figure out the API for cross-renderer implementation.
 implementation) {
@@ -31177,7 +31169,7 @@ var Icon = function Icon(_ref) {
     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.icon01Dark] = !isDisabled && props.color === 'icon01Dark', _clsx[iconColors.icon02] = !isDisabled && props.color === 'icon02', _clsx[iconColors.icon02Dark] = !isDisabled && props.color === 'icon02Dark', _clsx[iconColors.icon03] = !isDisabled && props.color === 'icon03', _clsx[iconColors.icon03Dark] = !isDisabled && props.color === 'icon03Dark', _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));
+  }, _clsx[iconColors.icon01] = !isDisabled && props.color === 'icon01', _clsx[iconColors.icon01Dark] = !isDisabled && props.color === 'icon01Dark', _clsx[iconColors.icon02] = !isDisabled && props.color === 'icon02', _clsx[iconColors.icon02Dark] = !isDisabled && props.color === 'icon02Dark', _clsx[iconColors.icon03] = !isDisabled && props.color === 'icon03', _clsx[iconColors.icon03Dark] = !isDisabled && props.color === 'icon03Dark', _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]
@@ -31208,7 +31200,7 @@ function DropdownItem(_ref) {
     setIsVisible(false);
     onClick && onClick(event);
   };
-  var itemClasses = clsx$1('typography-label2regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02', focusVisible.inset, {
+  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'
   });
@@ -31317,9 +31309,9 @@ function Dropdown(_ref) {
   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'
+    'typography-label12regular': size === 'x-small',
+    'typography-label14regular': size === 'small' || size === 'medium',
+    'typography-label16regular': size === 'large'
   });
   return /*#__PURE__*/jsx(DropdownContext.Provider, {
     value: {
@@ -31443,7 +31435,7 @@ function IconButton(_ref) {
     _ref$isDisabled = _ref.isDisabled,
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
-  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, {
+  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,
@@ -31639,7 +31631,7 @@ function NotificationInline(_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-  var wrapperClasses = clsx('typography-body2regular flex items-center gap-1 rounded text-text01', {
+  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',
@@ -31695,8 +31687,14 @@ function PaginationButton(_ref) {
     _onClick = _ref.onClick;
   var _useContext = useContext(PaginationContext),
     currentPage = _useContext.currentPage;
-  return /*#__PURE__*/jsx(Button, {
-    variant: page === currentPage ? 'outline' : 'text',
+  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);
     },
@@ -31727,13 +31725,14 @@ function Pagination(_ref) {
       currentPage: currentPage
     },
     children: /*#__PURE__*/jsxs("ul", {
-      className: "flex gap-2",
+      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: "medium",
+          size: "small",
           onClick: function onClick() {
             return _onClick(currentPage - 1);
           }
@@ -31774,11 +31773,12 @@ function Pagination(_ref) {
           page: totalPage
         })
       }), /*#__PURE__*/jsx("li", {
+        className: "flex items-center",
         children: /*#__PURE__*/jsx(IconButton, {
           isDisabled: currentPage === totalPage,
           variant: "text",
           icon: "angle-right",
-          size: "medium",
+          size: "small",
           onClick: function onClick() {
             return _onClick(currentPage + 1);
           }
@@ -31806,7 +31806,7 @@ function SelectItem$1(_ref) {
     onChange == null || onChange(option);
     setIsOptionListOpen(false);
   };
-  var itemClasses = clsx$1('typography-label2regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02', focusVisible.inset, {
+  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)
   });
@@ -31871,7 +31871,7 @@ function SelectList$1(_ref) {
     'top-11': size === 'large',
     'border-solid border border-uiBorder01': variant === 'outline'
   });
-  var deselectButtonClasses = clsx$1('typography-label2regular flex h-8 w-full items-center px-3 text-interactive02 hover:bg-hover02 active:bg-active02', focusVisible.inset);
+  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: {
@@ -31930,9 +31930,9 @@ function Select(_ref) {
   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'
+    'typography-label12regular': size === 'x-small',
+    'typography-label14regular': size === 'small' || size === 'medium',
+    'typography-label16regular': size === 'large'
   });
   return /*#__PURE__*/jsx(SelectContext.Provider, {
     value: {
@@ -32019,7 +32019,7 @@ function PaginationSelect(_ref) {
     children: [/*#__PURE__*/jsxs("div", {
       className: "flex items-center gap-x-2",
       children: [/*#__PURE__*/jsxs("div", {
-        className: "typography-label2regular text-text01",
+        className: "typography-label14regular text-text01",
         children: [minCount > 0 && minCount + " - ", maxCount, countLabel]
       }), /*#__PURE__*/jsx(Select, {
         size: "medium",
@@ -32038,7 +32038,7 @@ function PaginationSelect(_ref) {
           }, option.id);
         })
       }), /*#__PURE__*/jsxs("div", {
-        className: "typography-label2regular text-text03",
+        className: "typography-label14regular text-text03",
         children: ["/ ", pageMax, pageLabel]
       })]
     }), /*#__PURE__*/jsxs("div", {
@@ -32102,7 +32102,7 @@ function Radio(_ref) {
   var hoverIndicatorClasses = clsx$1('inline-block size-3 rounded-full', {
     'bg-hoverUi': !isDisabled && !isChecked && isMouseOver
   });
-  var labelClasses = clsx$1('typography-label2regular ml-2 flex-[1_0_0] select-none break-all', {
+  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
   });
@@ -32153,7 +32153,7 @@ var Search = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, {
     'h-10 px-4': size === 'large'
   });
-  var inputClasses = clsx('mx-2.5 h-full flex-1 text-text01 outline-0 placeholder:text-textPlaceholder', (_clsx = {}, _clsx['typography-label2regular'] = size === 'medium', _clsx['typography-label1regular'] = size === 'large', _clsx));
+  var inputClasses = clsx('mx-2.5 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,
@@ -32192,7 +32192,7 @@ function SelectItem(_ref) {
   var children = _ref.children,
     isSortKey = _ref.isSortKey,
     onClickItem = _ref.onClickItem;
-  var itemClasses = clsx$1('typography-label2regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02', focusVisible.inset, {
+  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
   });
@@ -32228,7 +32228,7 @@ function SelectList(_ref) {
     'top-11': size === 'large',
     'border-solid border border-uiBorder01': variant === 'outline'
   });
-  var deselectButtonClasses = clsx$1('typography-label2regular flex h-8 w-full items-center px-3 text-interactive02 hover:bg-hover02 active:bg-active02', focusVisible.inset);
+  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, {
@@ -32293,9 +32293,9 @@ function SelectSort(_ref) {
   });
   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-label3regular': size === 'x-small',
-    'typography-label2regular': size === 'small' || size === 'medium',
-    'typography-label1regular': size === 'large',
+    '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'
   });
@@ -32339,9 +32339,9 @@ var TabItem = function TabItem(_ref) {
     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-label2regular': !isSelected,
+    'typography-label14regular': !isSelected,
     'text-interactive02 hover:before:bg-uiBorder02Dark': !isSelected,
-    'typography-label2bold': isSelected,
+    'typography-label14bold': isSelected,
     'before:bg-interactive01 hover:before:bg-interactive01 pointer-events-none': isSelected
   });
   return /*#__PURE__*/jsx("button", {
@@ -32446,7 +32446,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-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));
+  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, {
@@ -32474,9 +32474,9 @@ var TextArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
   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-uiBorder01 hover:focus-within:border-activeInput focus-within:border-activeInput text-text01': !isError,
+    'border-uiBorder02 hover:focus-within:border-activeInput focus-within:border-activeInput text-text01': !isError,
     'bg-disabled02 border-disabled01': 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-supportError'] = isError, _clsx['resize-none'] = !isResizable, _clsx));
+  }, _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({
@@ -32504,14 +32504,14 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onClickClearButton = _ref.onClickClearButton,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var inputWrapClasses = clsx('relative flex items-center gap-2 overflow-hidden rounded border', {
-    'border-uiBorder01': !isError,
+    '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
   });
-  var inputClasses = clsx('flex-1 pl-2 pr-3 outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder', (_clsx = {}, _clsx['typography-label2regular pt-1.5 pb-2'] = size === 'medium', _clsx['typography-label1regular py-2.5'] = size === 'large', _clsx['text-text01'] = !isError, _clsx['text-supportError'] = isError, _clsx));
+  var inputClasses = clsx('flex-1 pl-2 pr-3 outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder', (_clsx = {}, _clsx['typography-label14regular min-h-8'] = size === 'medium', _clsx['typography-label16regular min-h-10'] = size === 'large', _clsx['text-text01'] = !isError, _clsx['text-supportError'] = isError, _clsx));
   return /*#__PURE__*/jsxs("div", {
     className: inputWrapClasses,
     children: [/*#__PURE__*/jsx("input", _extends({
@@ -32567,7 +32567,7 @@ function Toast(_ref) {
     'fill-supportWarning': state === 'warning',
     'fill-supportInfo': state === 'information'
   });
-  var textClasses = clsx$1('typography-body2regular flex-1 pt-[3px]', {
+  var textClasses = clsx$1('typography-body13regular flex-1 pt-[3px]', {
     'text-supportError': state === 'error',
     'text-text01': state === 'success' || state === 'warning' || state === 'information'
   });
@@ -32698,8 +32698,8 @@ function Toggle(_ref) {
   var labelClasses = clsx$1('break-all', {
     'mr-2': labelPosition === 'left',
     'ml-2': labelPosition === 'right',
-    'typography-label3regular': size === 'small',
-    'typography-label1regular': size === 'medium',
+    'typography-label12regular': size === 'small',
+    'typography-label16regular': size === 'medium',
     'pointer-events-none cursor-not-allowed text-disabled01': isDisabled,
     'cursor-pointer text-text01': !isDisabled
   });
@@ -32840,8 +32840,8 @@ var TooltipContent = function TooltipContent(_ref) {
     'w-[46px]': size !== 'small'
   });
   var tooltipBodyClasses = clsx$1('absolute z-tooltip inline-block w-max rounded bg-uiBackgroundTooltip text-textOnColor', {
-    'typography-body3regular': size === 'small',
-    'typography-body2regular': size === 'medium',
+    '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',