@zenkigen-inc/component-ui 1.8.2 → 1.9.1

package/dist/index.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() {
@@ -41,14 +41,14 @@ function Avatar(_ref) {
       size = 'medium'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
-  const classes = clsx('flex items-center justify-center rounded-full text-text-textOnColor', {
+  const classes = clsx('flex items-center justify-center rounded-full text-textOnColor', {
     '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,
     [userColors[((_props$userId = props.userId) != null ? _props$userId : 0) % userColors.length]]: props.userId && !props.isDisabled
   });
   const trimmedFirstName = props.firstName.replace('　', ' ').trim();
@@ -64,7 +64,7 @@ const BreadcrumbItem = ({
   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
   });
 };
@@ -75,7 +75,7 @@ function Breadcrumb({
   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
     })
   });
@@ -83,7 +83,7 @@ function Breadcrumb({
 Breadcrumb.Item = BreadcrumbItem;
 
 const _excluded$6 = ["size", "variant", "type", "href", "target", "onClick"];
-function Button(_ref) {
+const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       size = 'medium',
       variant = 'fill',
@@ -100,7 +100,7 @@ function Button(_ref) {
     'inline-flex': type === 'anchor',
     [buttonColors[variant].selected]: props.isSelected,
     [buttonColors[variant].base]: !props.isSelected,
-    'hover:text-text-textOnColor active:text-text-textOnColor [&:hover>*]:fill-icon-iconOnColor [&:active>*]:fill-icon-iconOnColor': props.isSelected && variant !== 'outline' && variant !== 'text',
+    'hover:text-textOnColor active:text-textOnColor [&:hover>*]:fill-iconOnColor [&:active>*]:fill-iconOnColor': props.isSelected && variant !== 'outline' && variant !== 'text',
     'pointer-events-none': props.isDisabled,
     'rounded-button': !props.borderRadius,
     'typography-label1regular': size === 'large',
@@ -114,6 +114,7 @@ function Button(_ref) {
       style: {
         borderRadius: props.borderRadius
       },
+      ref: ref,
       children: [props.before, props.children, props.after]
     });
   } else {
@@ -126,16 +127,18 @@ function Button(_ref) {
         width: props.width,
         borderRadius: props.borderRadius
       },
+      ref: ref,
       children: [props.before, props.children, props.after]
     });
   }
-}
+});
+Button.displayName = 'Button';
 
 const 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",
@@ -148,7 +151,7 @@ const 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"
     })
@@ -181,34 +184,34 @@ function Checkbox({
     'cursor-pointer': !isDisabled
   });
   const 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'
   });
   const 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
   });
   const 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
   });
   const hoverIndicatorClasses = clsx$1('inline-block size-3 rounded-[1px]', {
-    'bg-hover-hoverUi': !isDisabled && !isChecked && isMouseOver
+    'bg-hoverUi': !isDisabled && !isChecked && isMouseOver
   });
   const 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",
@@ -31126,7 +31129,7 @@ const Icon = _ref => {
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   const classes = clsx('inline-block shrink-0', {
-    'fill-disabled-disabled01': props.isDisabled,
+    'fill-disabled01': props.isDisabled,
     [iconColors.icon01]: !props.isDisabled && props.color === 'icon01',
     [iconColors.icon01Dark]: !props.isDisabled && props.color === 'icon01Dark',
     [iconColors.icon02]: !props.isDisabled && props.color === 'icon02',
@@ -31169,9 +31172,9 @@ function DropdownItem({
     setIsVisible(false);
     onClick && onClick(event);
   };
-  const 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'
+  const 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",
@@ -31198,9 +31201,9 @@ function DropdownMenu({
     variant,
     portalTargetRef
   } = useContext(DropdownContext);
-  const wrapperClasses = clsx$1('z-dropdown w-max overflow-y-auto rounded bg-background-uiBackground01 shadow-floatingShadow', {
+  const 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',
@@ -31255,9 +31258,9 @@ function Dropdown({
   const wrapperClasses = clsx$1('relative flex shrink-0 items-center gap-1 rounded', {
     'cursor-not-allowed': isDisabled
   });
-  const childrenButtonClasses = clsx$1('flex items-center justify-center rounded p-1 hover:bg-hover-hover02 active:bg-active-active02', focusVisible.normal, {
+  const 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'
   });
   const 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,
@@ -31291,7 +31294,7 @@ function Dropdown({
         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'
@@ -31348,7 +31351,7 @@ function EvaluationStar({
   });
   const ratingStars = [];
   for (let i = 1; i < maxRating + 1; i++) {
-    const color = i <= currentRating ? 'fill-yellow-yellow50' : 'fill-icon-icon03';
+    const color = i <= currentRating ? 'fill-yellow-yellow50' : 'fill-icon03';
     ratingStars.push( /*#__PURE__*/jsx("button", {
       type: "button",
       onClick: () => handleChangeRating(i),
@@ -31365,7 +31368,7 @@ function EvaluationStar({
 
 function Heading(props) {
   const TagName = `h${props.level}`;
-  const classes = clsx(`flex items-center text-text-text01`, typography.heading[TagName], {
+  const classes = clsx(`flex items-center text-text01`, typography.heading[TagName], {
     'gap-2': props.level === 1,
     'gap-1': props.level > 1
   });
@@ -31438,7 +31441,7 @@ function Loading({
         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",
@@ -31452,7 +31455,7 @@ function Loading({
         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",
@@ -31466,7 +31469,7 @@ function Loading({
         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",
@@ -31497,7 +31500,7 @@ function ModalFooter({
   isNoBorder
 }) {
   const 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,
@@ -31512,8 +31515,8 @@ function ModalHeader({
   const {
     onClose
   } = useContext(ModalContext);
-  const 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,
+  const 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
   });
@@ -31551,9 +31554,9 @@ function Modal({
       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
@@ -31574,20 +31577,20 @@ function NotificationInline(_ref) {
       size = 'medium'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-  const 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',
+  const 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'
   });
   const 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'
   });
   const iconName = {
     attention: 'attention',
@@ -31656,7 +31659,7 @@ function Pagination({
   for (let i = start + offsetStart; i <= end + offsetEnd; i++) {
     pageList.push(i);
   }
-  const threeDotIconClasses = 'flex h-8 w-8 items-center justify-center gap-1 fill-icon-icon01';
+  const threeDotIconClasses = 'flex h-8 w-8 items-center justify-center gap-1 fill-icon01';
   return /*#__PURE__*/jsx(PaginationContext.Provider, {
     value: {
       currentPage
@@ -31729,9 +31732,9 @@ function SelectItem$1({
     onChange == null || onChange(option);
     setIsOptionListOpen(false);
   };
-  const 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)
+  const 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",
@@ -31785,13 +31788,13 @@ function SelectList$1({
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  const listClasses = clsx$1('absolute z-dropdown w-max overflow-y-auto rounded bg-background-uiBackground01 py-2 shadow-floatingShadow', {
+  const 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'
   });
-  const 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);
+  const 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: {
@@ -31923,7 +31926,7 @@ function PaginationSelect({
     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",
@@ -31935,7 +31938,7 @@ function PaginationSelect({
           option: option
         }, option.id))
       }), /*#__PURE__*/jsxs("div", {
-        className: "typography-label2regular text-text-text03",
+        className: "typography-label2regular text-text03",
         children: ["/ ", pageMax, pageLabel]
       })]
     }), /*#__PURE__*/jsxs("div", {
@@ -31979,24 +31982,24 @@ function Radio({
     'cursor-pointer': !isDisabled
   });
   const 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
   });
   const 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
   });
   const hoverIndicatorClasses = clsx$1('inline-block size-3 rounded-full', {
-    'bg-hover-hoverUi': !isDisabled && !isChecked && isMouseOver
+    'bg-hoverUi': !isDisabled && !isChecked && isMouseOver
   });
   const 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",
@@ -32039,12 +32042,12 @@ const Search = /*#__PURE__*/forwardRef((_ref, ref) => {
       size = 'medium'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-  const classes = clsx('flex items-center rounded-full border border-border-uiBorder02 focus-within:border-active-activeInput', {
+  const 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'
   });
-  const inputClasses = clsx('mx-2.5 h-full flex-1 text-text-text01 outline-0 placeholder:text-text-textPlaceholder', {
+  const inputClasses = clsx('mx-2.5 h-full flex-1 text-text01 outline-0 placeholder:text-textPlaceholder', {
     ['typography-label2regular']: size === 'medium',
     ['typography-label1regular']: size === 'large'
   });
@@ -32087,9 +32090,9 @@ function SelectItem({
   isSortKey,
   onClickItem
 }) {
-  const 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
+  const 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",
@@ -32118,13 +32121,13 @@ function SelectList({
   onClickItem,
   onClickDeselect
 }) {
-  const listClasses = clsx$1('absolute z-dropdown w-max overflow-y-auto rounded bg-background-uiBackground01 py-2 shadow-floatingShadow', {
+  const 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'
   });
-  const 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);
+  const 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, {
@@ -32220,11 +32223,11 @@ function SelectSort({
 }
 
 const TabItem = props => {
-  const 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', {
+  const 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",
@@ -32242,7 +32245,7 @@ function Tab({
 }) {
   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
   });
 }
@@ -32253,7 +32256,7 @@ function TableCell({
   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
   });
 }
@@ -32262,7 +32265,7 @@ function TableRow({
   children,
   isHoverBackgroundVisible
 }) {
-  const rowClasses = clsx$1('contents', isHoverBackgroundVisible && '[&:hover>div]:bg-hover-hoverUi02');
+  const rowClasses = clsx$1('contents', isHoverBackgroundVisible && '[&:hover>div]:bg-hoverUi02');
   return /*#__PURE__*/jsx("div", {
     className: rowClasses,
     children: children
@@ -32297,10 +32300,10 @@ const DeleteIcon = ({
   variant,
   onClick
 }) => {
-  const 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);
+  const 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);
   const 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",
@@ -32358,14 +32361,14 @@ const TextArea = /*#__PURE__*/forwardRef((_ref, ref) => {
       isError
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  const classes = clsx('w-full rounded border outline-0 placeholder:text-text-textPlaceholder disabled:text-text-textPlaceholder', {
-    '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,
+  const classes = clsx('w-full rounded border outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder', {
+    '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,
     ['typography-body1regular px-2 pt-1.5 pb-2']: size === 'medium',
     ['text-4 px-3.5 py-2.5']: size === 'large',
-    'text-support-supportError': isError,
+    'text-supportError': isError,
     'resize-none': !isResizable
   });
   return /*#__PURE__*/jsx("div", {
@@ -32391,18 +32394,18 @@ const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const 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
   });
-  const inputClasses = clsx('flex-1 pl-2 pr-3 outline-0 placeholder:text-text-textPlaceholder disabled:text-text-textPlaceholder', {
+  const inputClasses = clsx('flex-1 pl-2 pr-3 outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder', {
     ['typography-label2regular pt-1.5 pb-2']: size === 'medium',
     ['typography-label1regular py-2.5']: size === 'large',
-    'text-text-text01': !isError,
-    'text-support-supportError': isError
+    'text-text01': !isError,
+    'text-supportError': isError
   });
   return /*#__PURE__*/jsxs("div", {
     className: inputWrapClasses,
@@ -32450,14 +32453,14 @@ function Toast({
     ['animate-toast-out opacity-0']: isAnimation && isRemoving
   });
   const 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'
   });
   const 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'
   });
   const iconName = {
     success: 'success-filled',
@@ -32555,15 +32558,15 @@ function Toggle({
   isDisabled
 }) {
   const 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'
   });
   const inputClasses = clsx$1('peer absolute inset-0 z-[1] opacity-0', isDisabled ? 'cursor-not-allowed' : 'cursor-pointer');
-  const indicatorClasses = clsx$1('rounded-full bg-icon-iconOnColor', {
+  const indicatorClasses = clsx$1('rounded-full bg-iconOnColor', {
     'w-2.5 h-2.5': size === 'small',
     'w-4 h-4': size === 'medium',
     'ml-auto': isChecked
@@ -32573,8 +32576,8 @@ function Toggle({
     '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",
@@ -32654,7 +32657,7 @@ const useTooltip = () => {
 };
 
 const TailIcon = props => {
-  const tailClasses = clsx$1('absolute fill-background-uiBackgroundTooltip', {
+  const tailClasses = clsx$1('absolute fill-uiBackgroundTooltip', {
     'rotate-180': props.verticalPosition === 'bottom',
     'rotate-0': props.verticalPosition !== 'bottom',
     '-top-1': props.verticalPosition === 'bottom' && props.size === 'small',
@@ -32712,7 +32715,7 @@ const TooltipContent = ({
     'w-[24px]': size === 'small',
     'w-[46px]': size !== 'small'
   });
-  const tooltipBodyClasses = clsx$1('absolute z-tooltip inline-block w-max rounded bg-background-uiBackgroundTooltip text-text-textOnColor', {
+  const 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',