@zenkigen-inc/component-ui 1.8.2 → 1.9.1

package/dist/button/button.d.ts

@@ -12,7 +12,7 @@ type Props = {
     borderRadius?: CSSProperties['borderRadius'];
 } & ({
     type?: 'anchor';
-    href: string;
+    href?: string;
     target?: HTMLAnchorElement['target'];
     onClick?: never;
 } | {
@@ -26,5 +26,5 @@ type Props = {
     target?: never;
     onClick?: () => void;
 });
-export declare function Button({ size, variant, type, href, target, onClick, ...props }: PropsWithChildren<Props>): import("react").JSX.Element;
+export declare const Button: import("react").ForwardRefExoticComponent<PropsWithChildren<Props> & import("react").RefAttributes<HTMLAnchorElement & HTMLButtonElement>>;
 export {};

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 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, useLayoutEffect, forwardRef } from 'react';
+import aa, { forwardRef, useState, useCallback, useEffect, createContext, useContext, useRef, useLayoutEffect } from 'react';
 import { iconElements } from '@zenkigen-inc/component-icons';
 
 function _extends() {
@@ -40,14 +40,14 @@ function Avatar(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
-  var classes = clsx('flex items-center justify-center rounded-full text-text-textOnColor', (_clsx = {
+  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',
-    'bg-disabled-disabled01': props.isDisabled,
-    'bg-icon-icon01': !props.userId
+    'bg-disabled01': props.isDisabled,
+    'bg-icon01': !props.userId
   }, _clsx[userColors[((_props$userId = props.userId) != null ? _props$userId : 0) % userColors.length]] = props.userId && !props.isDisabled, _clsx));
   var trimmedFirstName = props.firstName.replace('　', ' ').trim();
   var trimmedLastName = props.lastName.replace('　', ' ').trim().trim();
@@ -61,7 +61,7 @@ function Avatar(_ref) {
 var BreadcrumbItem = function BreadcrumbItem(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/jsx("li", {
-    className: "flex gap-2 after:content-['/'] last:after:content-none [&_a]:text-interactive-interactive02 [&_a]:hover:underline",
+    className: "flex gap-2 after:content-['/'] last:after:content-none [&_a]:text-interactive02 [&_a]:hover:underline",
     children: children
   });
 };
@@ -71,7 +71,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-text-text01",
+      className: "typography-label2regular flex flex-wrap gap-2 whitespace-nowrap text-text01",
       children: children
     })
   });
@@ -79,7 +79,7 @@ function Breadcrumb(_ref) {
 Breadcrumb.Item = BreadcrumbItem;
 
 var _excluded$6 = ["size", "variant", "type", "href", "target", "onClick"];
-function Button(_ref) {
+var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _clsx;
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
@@ -96,7 +96,7 @@ function Button(_ref) {
     'h-8 px-3': size === 'medium',
     'h-10 px-4 leading-[24px]': size === 'large',
     'inline-flex': type === 'anchor'
-  }, _clsx[buttonColors[variant].selected] = props.isSelected, _clsx[buttonColors[variant].base] = !props.isSelected, _clsx['hover:text-text-textOnColor active:text-text-textOnColor [&:hover>*]:fill-icon-iconOnColor [&:active>*]:fill-icon-iconOnColor'] = props.isSelected && variant !== 'outline' && variant !== 'text', _clsx['pointer-events-none'] = props.isDisabled, _clsx['rounded-button'] = !props.borderRadius, _clsx['typography-label1regular'] = size === 'large', _clsx['typography-label2regular'] = size !== 'large', _clsx));
+  }, _clsx[buttonColors[variant].selected] = props.isSelected, _clsx[buttonColors[variant].base] = !props.isSelected, _clsx['hover:text-textOnColor active:text-textOnColor [&:hover>*]:fill-iconOnColor [&:active>*]:fill-iconOnColor'] = props.isSelected && variant !== 'outline' && variant !== 'text', _clsx['pointer-events-none'] = props.isDisabled, _clsx['rounded-button'] = !props.borderRadius, _clsx['typography-label1regular'] = size === 'large', _clsx['typography-label2regular'] = size !== 'large', _clsx));
   if (type === 'anchor') {
     return /*#__PURE__*/jsxs("a", {
       className: baseClasses,
@@ -105,6 +105,7 @@ function Button(_ref) {
       style: {
         borderRadius: props.borderRadius
       },
+      ref: ref,
       children: [props.before, props.children, props.after]
     });
   } else {
@@ -117,16 +118,18 @@ function Button(_ref) {
         width: props.width,
         borderRadius: props.borderRadius
       },
+      ref: ref,
       children: [props.before, props.children, props.after]
     });
   }
-}
+});
+Button.displayName = 'Button';
 
 var CheckedIcon = function CheckedIcon() {
   return /*#__PURE__*/jsx("svg", {
     viewBox: "0 0 20 20",
     xmlns: "http://www.w3.org/2000/svg",
-    className: "absolute z-10 size-5 rounded-sm fill-icon-iconOnColor hover:rounded-sm",
+    className: "absolute z-10 size-5 rounded-sm fill-iconOnColor hover:rounded-sm",
     children: /*#__PURE__*/jsx("path", {
       fillRule: "evenodd",
       clipRule: "evenodd",
@@ -139,7 +142,7 @@ var MinusIcon = function MinusIcon() {
   return /*#__PURE__*/jsx("svg", {
     viewBox: "0 0 20 20",
     xmlns: "http://www.w3.org/2000/svg",
-    className: "absolute z-10 size-5 rounded-sm fill-icon-iconOnColor hover:rounded-sm",
+    className: "absolute z-10 size-5 rounded-sm fill-iconOnColor hover:rounded-sm",
     children: /*#__PURE__*/jsx("path", {
       d: "M4.94723 10.5028H9.49726H10.5028H15.0528C15.3293 10.5028 15.5556 10.2766 15.5556 10C15.5556 9.72352 15.3293 9.49725 15.0528 9.49725H10.5028H9.49726H4.94723C4.67071 9.49725 4.44446 9.72352 4.44446 10C4.44446 10.2766 4.67071 10.5028 4.94723 10.5028Z"
     })
@@ -177,34 +180,34 @@ function Checkbox(_ref) {
     'cursor-pointer': !isDisabled
   });
   var boxClasses = clsx$1('inline-flex size-5 items-center justify-center rounded-sm border bg-white', focusVisible.normalPeer, {
-    'border-disabled-disabled01': isDisabled,
-    'border-hover-hoverUiBorder': !isDisabled && isMouseOver,
-    'border-border-uiBorder03': !isDisabled && !isMouseOver,
-    'border-interactive-interactive02': !isDisabled && !isMouseOver && color === 'gray',
-    'border-hover-hoverError': !isDisabled && isMouseOver && color === 'error',
-    'border-support-supportError': !isDisabled && !isMouseOver && color === 'error'
+    'border-disabled01': isDisabled,
+    'border-hoverUiBorder': !isDisabled && isMouseOver && color === 'default',
+    'border-uiBorder03': !isDisabled && !isMouseOver && color === 'default',
+    'border-interactive02': !isDisabled && !isMouseOver && color === 'gray',
+    'border-hoverError': !isDisabled && isMouseOver && color === 'error',
+    'border-supportError': !isDisabled && !isMouseOver && color === 'error'
   });
   var indicatorClasses = clsx$1('relative flex size-5 flex-[0_0_auto] items-center justify-center', {
-    'bg-disabled-disabled01': isDisabled && isChecked,
-    'border-disabled-disabled01': isDisabled
+    'bg-disabled01': isDisabled && isChecked,
+    'border-disabled01': isDisabled
   });
   var afterClasses = clsx$1('absolute inset-0 m-auto block rounded-sm', {
-    'bg-disabled-disabled01': isDisabled && isChecked,
-    'bg-hover-hover01': !(isDisabled && isChecked) && isMouseOver,
-    'bg-interactive-interactive01': !(isDisabled && isChecked) && !isMouseOver,
-    'bg-hover-hover02Dark': !(isDisabled && isChecked) && isMouseOver && color === 'gray',
-    'bg-interactive-interactive02': !(isDisabled && isChecked) && !isMouseOver && color === 'gray',
-    'bg-hover-hoverError': !(isDisabled && isChecked) && isMouseOver && color === 'error',
-    'bg-support-supportError': !(isDisabled && isChecked) && !isMouseOver && color === 'error',
+    'bg-disabled01': isDisabled && isChecked,
+    'bg-hover01': !(isDisabled && isChecked) && isMouseOver,
+    'bg-interactive01': !(isDisabled && isChecked) && !isMouseOver,
+    'bg-hover02Dark': !(isDisabled && isChecked) && isMouseOver && color === 'gray',
+    'bg-interactive02': !(isDisabled && isChecked) && !isMouseOver && color === 'gray',
+    'bg-hoverError': !(isDisabled && isChecked) && isMouseOver && color === 'error',
+    'bg-supportError': !(isDisabled && isChecked) && !isMouseOver && color === 'error',
     'scale-0': !isChecked,
     'scale-100': isChecked
   });
   var hoverIndicatorClasses = clsx$1('inline-block size-3 rounded-[1px]', {
-    'bg-hover-hoverUi': !isDisabled && !isChecked && isMouseOver
+    'bg-hoverUi': !isDisabled && !isChecked && isMouseOver
   });
   var labelClasses = clsx$1('typography-label2regular ml-2 flex-[1_0_0] break-all', {
-    'pointer-events-none cursor-not-allowed text-disabled-disabled01': isDisabled,
-    'cursor-pointer text-text-text01': !isDisabled
+    'pointer-events-none cursor-not-allowed text-disabled01': isDisabled,
+    'cursor-pointer text-text01': !isDisabled
   });
   return /*#__PURE__*/jsxs("div", {
     className: "flex items-center",
@@ -31127,7 +31130,7 @@ var Icon = function Icon(_ref) {
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   var classes = clsx('inline-block shrink-0', (_clsx = {
-    'fill-disabled-disabled01': props.isDisabled
+    'fill-disabled01': props.isDisabled
   }, _clsx[iconColors.icon01] = !props.isDisabled && props.color === 'icon01', _clsx[iconColors.icon01Dark] = !props.isDisabled && props.color === 'icon01Dark', _clsx[iconColors.icon02] = !props.isDisabled && props.color === 'icon02', _clsx[iconColors.icon02Dark] = !props.isDisabled && props.color === 'icon02Dark', _clsx[iconColors.icon03] = !props.isDisabled && props.color === 'icon03', _clsx[iconColors.icon03Dark] = !props.isDisabled && props.color === 'icon03Dark', _clsx[iconColors.iconOnColor] = !props.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));
   return /*#__PURE__*/jsx("span", {
     className: classes,
@@ -31159,9 +31162,9 @@ 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-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'
+  var itemClasses = clsx$1('typography-label2regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02', focusVisible.inset, {
+    'bg-uiBackground01 fill-icon01 text-interactive02': color === 'gray',
+    'fill-supportDanger text-supportDanger': color === 'red'
   });
   return /*#__PURE__*/jsx("li", {
     className: "flex w-full items-center",
@@ -31188,9 +31191,9 @@ function DropdownMenu(_ref) {
     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', {
+  var wrapperClasses = clsx$1('z-dropdown w-max overflow-y-auto rounded bg-uiBackground01 shadow-floatingShadow', {
     absolute: !portalTargetRef,
-    'border-solid border border-border-uiBorder01': variant === 'outline',
+    'border-solid border border-uiBorder01': variant === 'outline',
     'py-1': !isNoPadding,
     'left-0': horizontalAlign === 'left',
     'right-0': horizontalAlign === 'right',
@@ -31254,9 +31257,9 @@ function Dropdown(_ref) {
   var wrapperClasses = clsx$1('relative flex shrink-0 items-center gap-1 rounded', {
     'cursor-not-allowed': isDisabled
   });
-  var childrenButtonClasses = clsx$1('flex items-center justify-center rounded p-1 hover:bg-hover-hover02 active:bg-active-active02', focusVisible.normal, {
+  var childrenButtonClasses = clsx$1('flex items-center justify-center rounded p-1 hover:bg-hover02 active:bg-active02', focusVisible.normal, {
     'pointer-events-none': isDisabled,
-    'border border-border-uiBorder02': variant === 'outline'
+    '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, {
     'pointer-events-none': isDisabled,
@@ -31290,7 +31293,7 @@ function Dropdown(_ref) {
         onClick: handleToggle,
         disabled: isDisabled,
         children: [target, !isArrowHidden && /*#__PURE__*/jsx("div", {
-          className: "ml-2 flex items-center fill-icon-icon01",
+          className: "ml-2 flex items-center fill-icon01",
           children: /*#__PURE__*/jsx(Icon, {
             name: isVisible ? 'angle-small-up' : 'angle-small-down',
             size: size === 'large' ? 'medium' : 'small'
@@ -31350,7 +31353,7 @@ function EvaluationStar(_ref) {
   });
   var ratingStars = [];
   var _loop = function _loop(i) {
-    var color = i <= currentRating ? 'fill-yellow-yellow50' : 'fill-icon-icon03';
+    var color = i <= currentRating ? 'fill-yellow-yellow50' : 'fill-icon03';
     ratingStars.push( /*#__PURE__*/jsx("button", {
       type: "button",
       onClick: function onClick() {
@@ -31372,7 +31375,7 @@ function EvaluationStar(_ref) {
 
 function Heading(props) {
   var TagName = "h" + props.level;
-  var classes = clsx("flex items-center text-text-text01", typography.heading[TagName], {
+  var classes = clsx("flex items-center text-text01", typography.heading[TagName], {
     'gap-2': props.level === 1,
     'gap-1': props.level > 1
   });
@@ -31447,7 +31450,7 @@ function Loading(_ref) {
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         children: /*#__PURE__*/jsx("circle", {
-          className: "origin-center animate-circular-small-move stroke-interactive-interactive01",
+          className: "origin-center animate-circular-small-move stroke-interactive01",
           cx: "8",
           cy: "8",
           r: "7",
@@ -31461,7 +31464,7 @@ function Loading(_ref) {
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         children: /*#__PURE__*/jsx("circle", {
-          className: "origin-center animate-circular-medium-move stroke-interactive-interactive01",
+          className: "origin-center animate-circular-medium-move stroke-interactive01",
           cx: "16",
           cy: "16",
           r: "15",
@@ -31475,7 +31478,7 @@ function Loading(_ref) {
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         children: /*#__PURE__*/jsx("circle", {
-          className: "origin-center animate-circular-large-move stroke-interactive-interactive01",
+          className: "origin-center animate-circular-large-move stroke-interactive01",
           cx: "32",
           cy: "32",
           r: "30",
@@ -31506,7 +31509,7 @@ function ModalFooter(_ref) {
   var children = _ref.children,
     isNoBorder = _ref.isNoBorder;
   var wrapperClasses = clsx$1('flex w-full shrink-0 items-center rounded-b-lg px-6 py-4', {
-    'border-t-[1px] border-border-uiBorder01': !isNoBorder
+    'border-t-[1px] border-uiBorder01': !isNoBorder
   });
   return /*#__PURE__*/jsx("div", {
     className: wrapperClasses,
@@ -31519,8 +31522,8 @@ function ModalHeader(_ref) {
     isNoBorder = _ref.isNoBorder;
   var _useContext = useContext(ModalContext),
     onClose = _useContext.onClose;
-  var headerClasses = clsx$1('typography-h5 flex w-full shrink-0 items-center justify-between rounded-t-lg px-6 text-text-text01', {
-    'border-b-[1px] border-border-uiBorder01': !isNoBorder,
+  var headerClasses = clsx$1('typography-h5 flex w-full shrink-0 items-center justify-between rounded-t-lg px-6 text-text01', {
+    'border-b-[1px] border-uiBorder01': !isNoBorder,
     'h-14': !onClose,
     'h-12': onClose
   });
@@ -31560,9 +31563,9 @@ function Modal(_ref) {
       onClose: onClose
     },
     children: /*#__PURE__*/jsx("div", {
-      className: "fixed left-0 top-0 z-overlay flex size-full items-center justify-center bg-background-backgroundOverlayBlack py-4",
+      className: "fixed left-0 top-0 z-overlay flex size-full items-center justify-center bg-backgroundOverlayBlack py-4",
       children: /*#__PURE__*/jsx("div", {
-        className: "grid max-h-full min-h-[120px] grid-rows-[max-content_1fr_max-content] flex-col rounded-lg bg-background-uiBackground01 shadow-modalShadow",
+        className: "grid max-h-full min-h-[120px] grid-rows-[max-content_1fr_max-content] flex-col rounded-lg bg-uiBackground01 shadow-modalShadow",
         style: {
           width: renderWidth,
           height: renderHeight
@@ -31583,20 +31586,20 @@ function NotificationInline(_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     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',
-    'bg-background-uiBackgroundSuccess': state === 'success',
-    'bg-background-uiBackgroundGray': state === 'default',
+  var wrapperClasses = clsx('typography-body2regular flex items-center gap-1 rounded text-text01', {
+    'bg-uiBackgroundError': state === 'attention',
+    'bg-uiBackgroundWarning': state === 'warning',
+    'bg-uiBackgroundBlue': state === 'information',
+    'bg-uiBackgroundSuccess': state === 'success',
+    'bg-uiBackgroundGray': state === 'default',
     'p-2': size === 'small',
     'p-3': size === 'medium'
   });
   var iconClasses = clsx('flex items-center', {
-    'fill-support-supportError': state === 'attention',
-    'fill-support-supportWarning': state === 'warning',
+    'fill-supportError': state === 'attention',
+    'fill-supportWarning': state === 'warning',
     'fill-blue-blue50': state === 'information',
-    'fill-support-supportSuccess': state === 'success'
+    'fill-supportSuccess': state === 'success'
   });
   var iconName = {
     attention: 'attention',
@@ -31665,7 +31668,7 @@ function Pagination(_ref) {
   for (var i = start + offsetStart; i <= end + offsetEnd; i++) {
     pageList.push(i);
   }
-  var threeDotIconClasses = 'flex h-8 w-8 items-center justify-center gap-1 fill-icon-icon01';
+  var threeDotIconClasses = 'flex h-8 w-8 items-center justify-center gap-1 fill-icon01';
   return /*#__PURE__*/jsx(PaginationContext.Provider, {
     value: {
       currentPage: currentPage
@@ -31750,9 +31753,9 @@ 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-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)
+  var itemClasses = clsx$1('typography-label2regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02', focusVisible.inset, {
+    'text-interactive01 fill-interactive01 bg-selectedUi': option.id === (selectedOption == null ? void 0 : selectedOption.id),
+    'text-interactive02 fill-icon01 bg-uiBackground01': option.id !== (selectedOption == null ? void 0 : selectedOption.id)
   });
   return /*#__PURE__*/jsx("li", {
     className: "flex w-full items-center",
@@ -31808,13 +31811,13 @@ function SelectList$1(_ref) {
     }
     // 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', {
+  var listClasses = clsx$1('absolute z-dropdown w-max overflow-y-auto rounded bg-uiBackground01 py-2 shadow-floatingShadow', {
     'top-7': size === 'x-small' || size === 'small',
     'top-9': size === 'medium',
     'top-11': size === 'large',
-    'border-solid border border-border-uiBorder01': variant === 'outline'
+    'border-solid border border-uiBorder01': variant === 'outline'
   });
-  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);
+  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);
   return /*#__PURE__*/jsxs("ul", {
     className: listClasses,
     style: {
@@ -31959,7 +31962,7 @@ function PaginationSelect(_ref) {
     children: [/*#__PURE__*/jsxs("div", {
       className: "flex items-center gap-x-2",
       children: [/*#__PURE__*/jsxs("div", {
-        className: "typography-label2regular text-text-text01",
+        className: "typography-label2regular text-text01",
         children: [(currentPage - 1) * sizePerPage + 1, " -", ' ', currentPage * sizePerPage > totalSize ? totalSize : currentPage * sizePerPage, countLabel]
       }), /*#__PURE__*/jsx(Select, {
         size: "medium",
@@ -31977,7 +31980,7 @@ function PaginationSelect(_ref) {
           }, option.id);
         })
       }), /*#__PURE__*/jsxs("div", {
-        className: "typography-label2regular text-text-text03",
+        className: "typography-label2regular text-text03",
         children: ["/ ", pageMax, pageLabel]
       })]
     }), /*#__PURE__*/jsxs("div", {
@@ -32026,24 +32029,24 @@ function Radio(_ref) {
     'cursor-pointer': !isDisabled
   });
   var boxClasses = clsx$1('inline-flex size-5 items-center justify-center rounded-full border border-solid bg-white', focusVisible.normalPeer, {
-    'border-disabled-disabled01 hover:border-disabled-disabled01': isDisabled && !isMouseOver,
-    'border-hover-hoverUiBorder': !isDisabled && isMouseOver,
-    'border-border-uiBorder03': !isDisabled,
+    'border-disabled01 hover:border-disabled01': isDisabled && !isMouseOver,
+    'border-hoverUiBorder': !isDisabled && isMouseOver,
+    'border-uiBorder03': !isDisabled,
     'cursor-not-allowed': isDisabled,
     'cursor-pointer': !isDisabled
   });
   var afterClasses = clsx$1('absolute inset-0 m-auto block size-3 rounded-full', {
-    'bg-disabled-disabled01': isDisabled && isChecked,
-    'bg-active-activeSelectedUi': !isDisabled && isChecked,
+    'bg-disabled01': isDisabled && isChecked,
+    'bg-activeSelectedUi': !isDisabled && isChecked,
     'scale-0': !isChecked,
     'scale-100': isChecked
   });
   var hoverIndicatorClasses = clsx$1('inline-block size-3 rounded-full', {
-    'bg-hover-hoverUi': !isDisabled && !isChecked && isMouseOver
+    'bg-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
+    'pointer-events-none cursor-not-allowed text-disabled01': isDisabled,
+    'cursor-pointer text-text01': !isDisabled
   });
   return /*#__PURE__*/jsxs("div", {
     className: "flex items-center",
@@ -32087,12 +32090,12 @@ var Search = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-  var classes = clsx('flex items-center rounded-full border border-border-uiBorder02 focus-within:border-active-activeInput', {
+  var classes = clsx('flex items-center rounded-full border border-uiBorder02 focus-within:border-activeInput', {
     'h-8 px-3': size === 'medium'
   }, {
     'h-10 px-4': size === 'large'
   });
-  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));
+  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));
   return /*#__PURE__*/jsx("div", {
     className: "relative",
     ref: ref,
@@ -32131,9 +32134,9 @@ 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-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
+  var itemClasses = clsx$1('typography-label2regular flex h-8 w-full items-center px-3 hover:bg-hover02 active:bg-active02', focusVisible.inset, {
+    'bg-selectedUi fill-interactive01 text-interactive01': isSortKey,
+    'bg-uiBackground01 fill-icon01 text-interactive02': !isSortKey
   });
   return /*#__PURE__*/jsx("li", {
     className: "flex w-full items-center",
@@ -32161,13 +32164,13 @@ function SelectList(_ref) {
     sortOrder = _ref.sortOrder,
     _onClickItem = _ref.onClickItem,
     onClickDeselect = _ref.onClickDeselect;
-  var listClasses = clsx$1('absolute z-dropdown w-max overflow-y-auto rounded bg-background-uiBackground01 py-2 shadow-floatingShadow', {
+  var listClasses = clsx$1('absolute z-dropdown w-max overflow-y-auto rounded bg-uiBackground01 py-2 shadow-floatingShadow', {
     'top-7': size === 'x-small' || size === 'small',
     'top-9': size === 'medium',
     'top-11': size === 'large',
-    'border-solid border border-border-uiBorder01': variant === 'outline'
+    'border-solid border border-uiBorder01': variant === 'outline'
   });
-  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);
+  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);
   return /*#__PURE__*/jsxs("ul", {
     className: listClasses,
     children: [/*#__PURE__*/jsx(SelectItem, {
@@ -32272,11 +32275,11 @@ function SelectSort(_ref) {
 }
 
 var TabItem = function TabItem(props) {
-  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-text-text01 disabled:pointer-events-none disabled:text-disabled-disabled01', {
+  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': !props.isSelected,
-    'text-interactive-interactive02 hover:before:bg-border-uiBorder02Dark': !props.isSelected,
+    'text-interactive02 hover:before:bg-uiBorder02Dark': !props.isSelected,
     'typography-label2bold': props.isSelected,
-    'before:bg-interactive-interactive01 hover:before:bg-interactive-interactive01 pointer-events-none': props.isSelected
+    'before:bg-interactive01 hover:before:bg-interactive01 pointer-events-none': props.isSelected
   });
   return /*#__PURE__*/jsx("button", {
     type: "button",
@@ -32295,7 +32298,7 @@ function Tab(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/jsx("div", {
     role: "tablist",
-    className: "relative flex gap-4 px-6 before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-border-uiBorder01",
+    className: "relative flex gap-4 px-6 before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-uiBorder01",
     children: children
   });
 }
@@ -32305,7 +32308,7 @@ function TableCell(_ref) {
   var children = _ref.children,
     className = _ref.className;
   return /*#__PURE__*/jsx("div", {
-    className: clsx$1('border-b-[1px] border-border-uiBorder01', className),
+    className: clsx$1('border-b-[1px] border-uiBorder01', className),
     children: children
   });
 }
@@ -32313,7 +32316,7 @@ function TableCell(_ref) {
 function TableRow(_ref) {
   var children = _ref.children,
     isHoverBackgroundVisible = _ref.isHoverBackgroundVisible;
-  var rowClasses = clsx$1('contents', isHoverBackgroundVisible && '[&:hover>div]:bg-hover-hoverUi02');
+  var rowClasses = clsx$1('contents', isHoverBackgroundVisible && '[&:hover>div]:bg-hoverUi02');
   return /*#__PURE__*/jsx("div", {
     className: rowClasses,
     children: children
@@ -32346,10 +32349,10 @@ var DeleteIcon = function DeleteIcon(_ref) {
   var color = _ref.color,
     variant = _ref.variant,
     onClick = _ref.onClick;
-  var deleteButtonClasses = clsx$1('group ml-2 size-[14px] rounded-full p-0.5 hover:cursor-pointer hover:bg-icon-iconOnColor focus-visible:bg-icon-iconOnColor', focusVisible.normal);
+  var deleteButtonClasses = clsx$1('group ml-2 size-[14px] rounded-full p-0.5 hover:cursor-pointer hover:bg-iconOnColor focus-visible:bg-iconOnColor', focusVisible.normal);
   var deletePathClasses = clsx$1({
-    'fill-interactive-interactive02': color === 'gray' || variant === 'light',
-    'group-hover:fill-interactive-interactive02 group-focus-visible:fill-interactive-interactive02 fill-icon-iconOnColor': color !== 'gray'
+    'fill-interactive02': color === 'gray' || variant === 'light',
+    'group-hover:fill-interactive02 group-focus-visible:fill-interactive02 fill-iconOnColor': color !== 'gray'
   });
   return /*#__PURE__*/jsx("button", {
     type: "button",
@@ -32401,12 +32404,12 @@ var TextArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
     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));
+  var classes = clsx('w-full rounded border outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder', (_clsx = {
+    'border-supportError': isError && !props.disabled,
+    'hover:border-hoverInput': !props.disabled && !isError,
+    'border-uiBorder01 hover:focus-within:border-activeInput focus-within:border-activeInput text-text01': !isError,
+    'bg-disabled02 border-disabled01': 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-supportError'] = isError, _clsx['resize-none'] = !isResizable, _clsx));
   return /*#__PURE__*/jsx("div", {
     className: "flex",
     children: /*#__PURE__*/jsx("textarea", _extends({
@@ -32430,14 +32433,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-border-uiBorder01': !isError,
-    'border-support-supportError': isError && !props.disabled,
-    'hover:border-hover-hoverInput': !props.disabled && !isError,
-    'hover:focus-within:border-active-activeInput': !isError,
-    'focus-within:border-active-activeInput': !isError,
-    'bg-disabled-disabled02 border-disabled-disabled02': props.disabled
+    'border-uiBorder01': !isError,
+    'border-supportError': isError && !props.disabled,
+    'hover:border-hoverInput': !props.disabled && !isError,
+    'hover:focus-within:border-activeInput': !isError,
+    'focus-within:border-activeInput': !isError,
+    'bg-disabled02 border-disabled01': props.disabled
   });
-  var inputClasses = clsx('flex-1 pl-2 pr-3 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));
+  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));
   return /*#__PURE__*/jsxs("div", {
     className: inputWrapClasses,
     children: [/*#__PURE__*/jsx("input", _extends({
@@ -32485,14 +32488,14 @@ function Toast(_ref) {
   };
   var wrapperClasses = clsx$1('pointer-events-auto flex items-start gap-1 bg-white p-4 shadow-floatingShadow', (_clsx = {}, _clsx['animate-toast-in'] = isAnimation && !isRemoving, _clsx['animate-toast-out opacity-0'] = isAnimation && isRemoving, _clsx));
   var iconClasses = clsx$1('flex items-center', {
-    'fill-support-supportSuccess': state === 'success',
-    'fill-support-supportError': state === 'error',
-    'fill-support-supportWarning': state === 'warning',
-    'fill-support-supportInfo': state === 'information'
+    'fill-supportSuccess': state === 'success',
+    'fill-supportError': state === 'error',
+    'fill-supportWarning': state === 'warning',
+    'fill-supportInfo': state === 'information'
   });
   var textClasses = clsx$1('typography-body2regular flex-1 pt-[3px]', {
-    'text-support-supportError': state === 'error',
-    'text-text-text01': state === 'success' || state === 'warning' || state === 'information'
+    'text-supportError': state === 'error',
+    'text-text01': state === 'success' || state === 'warning' || state === 'information'
   });
   var iconName = {
     success: 'success-filled',
@@ -32604,15 +32607,15 @@ function Toggle(_ref) {
     labelPosition = _ref$labelPosition === void 0 ? 'right' : _ref$labelPosition,
     isDisabled = _ref.isDisabled;
   var baseClasses = clsx$1('relative flex items-center rounded-full', {
-    'bg-disabled-disabledOn': isDisabled && isChecked,
-    'bg-disabled-disabled01': isDisabled && !isChecked,
-    'bg-interactive-interactive01 peer-hover:bg-hover-hover01': !isDisabled && isChecked,
-    'bg-interactive-interactive02 peer-hover:bg-hover-hover02Dark': !isDisabled && !isChecked,
+    'bg-disabledOn': isDisabled && isChecked,
+    'bg-disabled01': isDisabled && !isChecked,
+    'bg-interactive01 peer-hover:bg-hover01': !isDisabled && isChecked,
+    'bg-interactive02 peer-hover:bg-hover02Dark': !isDisabled && !isChecked,
     'w-8 h-4 px-[3px]': size === 'small',
     'w-12 h-6 px-1': size === 'medium'
   });
   var inputClasses = clsx$1('peer absolute inset-0 z-[1] opacity-0', isDisabled ? 'cursor-not-allowed' : 'cursor-pointer');
-  var indicatorClasses = clsx$1('rounded-full bg-icon-iconOnColor', {
+  var indicatorClasses = clsx$1('rounded-full bg-iconOnColor', {
     'w-2.5 h-2.5': size === 'small',
     'w-4 h-4': size === 'medium',
     'ml-auto': isChecked
@@ -32622,8 +32625,8 @@ function Toggle(_ref) {
     '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
+    'pointer-events-none cursor-not-allowed text-disabled01': isDisabled,
+    'cursor-pointer text-text01': !isDisabled
   });
   return /*#__PURE__*/jsxs("div", {
     className: "relative flex flex-[0_0_auto] items-center",
@@ -32703,7 +32706,7 @@ var useTooltip = function useTooltip() {
 };
 
 var TailIcon = function TailIcon(props) {
-  var tailClasses = clsx$1('absolute fill-background-uiBackgroundTooltip', {
+  var tailClasses = clsx$1('absolute fill-uiBackgroundTooltip', {
     'rotate-180': props.verticalPosition === 'bottom',
     'rotate-0': props.verticalPosition !== 'bottom',
     '-top-1': props.verticalPosition === 'bottom' && props.size === 'small',
@@ -32760,7 +32763,7 @@ var TooltipContent = function TooltipContent(_ref) {
     'w-[24px]': size === 'small',
     'w-[46px]': size !== 'small'
   });
-  var tooltipBodyClasses = clsx$1('absolute z-tooltip inline-block w-max rounded bg-background-uiBackgroundTooltip text-text-textOnColor', {
+  var tooltipBodyClasses = clsx$1('absolute z-tooltip inline-block w-max rounded bg-uiBackgroundTooltip text-textOnColor', {
     'typography-body3regular': size === 'small',
     'typography-body2regular': size === 'medium',
     'px-2 pb-1 pt-1.5': size === 'small',