@zenkigen-inc/component-ui 1.5.1 → 1.6.1

package/dist/button/button.d.ts

@@ -4,6 +4,7 @@ type Variant = 'fill' | 'fillDanger' | 'outline' | 'text';
 type Props = {
     size?: Size;
     width?: CSSProperties['width'];
+    isSelected?: boolean;
     isDisabled?: boolean;
     variant?: Variant;
     before?: ReactNode;

package/dist/index.esm.js

@@ -80,21 +80,18 @@ Breadcrumb.Item = BreadcrumbItem;
 
 var _excluded$6 = ["size", "variant"];
 function Button(_ref) {
+  var _clsx;
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'fill' : _ref$variant,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
-  var baseClasses = clsx('flex', 'shrink-0', 'gap-1', 'items-center', 'justify-center', buttonColors[variant].base, buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, {
+  var baseClasses = clsx('flex shrink-0 items-center justify-center gap-1', buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, (_clsx = {
     'h-6 px-2.5': size === 'small',
     'h-8 px-3': size === 'medium',
     'h-10 px-4 leading-[24px]': size === 'large',
-    'inline-flex': props.isAnchor,
-    'pointer-events-none': props.isDisabled,
-    'rounded-button': !props.borderRadius,
-    'typography-label1regular': size === 'large',
-    'typography-label2regular': size !== 'large'
-  });
+    'inline-flex': props.isAnchor
+  }, _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));
   if (props.isAnchor) {
     return /*#__PURE__*/jsxs("a", {
       className: baseClasses,
@@ -170,24 +167,44 @@ function Checkbox(_ref) {
   var handleChange = useCallback(function (e) {
     !isDisabled && (onChange == null ? void 0 : onChange(e));
   }, [isDisabled, onChange]);
-  var wrapperClasses = clsx$1('flex', 'items-center');
-  var baseClasses = clsx$1('flex', 'items-center', 'justify-center', 'h-6', 'w-6');
-  var baseInputClasses = clsx$1('absolute', 'z-[1]', 'opacity-0', 'w-5', 'h-5', 'peer', isDisabled ? 'cursor-not-allowed' : 'cursor-pointer');
-  var boxClasses = clsx$1('inline-flex', 'items-center', 'justify-center', 'h-5', 'w-5', 'bg-white', 'border', 'rounded-sm', focusVisible.normalPeer, isDisabled ? 'border-disabled-disabled01' : color === 'error' ? isMouseOver ? 'border-hover-hoverError' : 'border-support-supportError' : color === 'gray' ? isMouseOver ? 'border-hover-hoverUiBorder' : 'border-interactive-interactive02' : isMouseOver ? 'border-hover-hoverUiBorder' : 'border-border-uiBorder03');
-  var indicatorClasses = clsx$1('h-5', 'w-5', 'relative', 'flex', 'flex-[0_0_auto]', 'items-center', 'justify-center', {
+  var baseInputClasses = clsx$1('peer absolute z-[1] h-5 w-5 opacity-0', {
+    'cursor-not-allowed': isDisabled,
+    'cursor-pointer': !isDisabled
+  });
+  var boxClasses = clsx$1('inline-flex h-5 w-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'
+  });
+  var indicatorClasses = clsx$1('relative flex h-5 w-5 flex-[0_0_auto] items-center justify-center', {
     'bg-disabled-disabled01': isDisabled && isChecked,
     'border-disabled-disabled01': isDisabled
   });
-  var afterClasses = clsx$1('absolute', 'top-0', 'right-0', 'bottom-0', 'left-0', 'block', 'm-auto', 'rounded-sm', isDisabled && isChecked ? 'bg-disabled-disabled01' : color === 'gray' ? isMouseOver ? 'bg-hover-hover02Dark' : 'bg-interactive-interactive02' : color === 'error' ? isMouseOver ? 'bg-hover-hoverError' : 'bg-support-supportError' : isMouseOver ? 'bg-hover-hover01' : 'bg-interactive-interactive01', {
+  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',
     'scale-0': !isChecked,
     'scale-100': isChecked
   });
-  var hoverIndicatorClasses = clsx$1('w-3', 'h-3', 'inline-block', 'rounded-[1px]', !isDisabled && !isChecked && isMouseOver && 'bg-hover-hoverUi');
-  var labelClasses = clsx$1('typography-label2regular ml-2 flex-[1_0_0] break-all', isDisabled ? 'pointer-events-none cursor-not-allowed text-disabled-disabled01' : 'cursor-pointer text-text-text01');
+  var hoverIndicatorClasses = clsx$1('inline-block h-3 w-3 rounded-[1px]', {
+    'bg-hover-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
+  });
   return /*#__PURE__*/jsxs("div", {
-    className: wrapperClasses,
+    className: "flex items-center",
     children: [/*#__PURE__*/jsxs("div", {
-      className: baseClasses,
+      className: "flex h-6 w-6 items-center justify-center",
       children: [/*#__PURE__*/jsx("input", {
         type: "checkbox",
         value: value,
@@ -31100,18 +31117,15 @@ var useOutsideClick = function useOutsideClick(ref, handler, enabled) {
 
 var _excluded$5 = ["size"];
 var Icon = function Icon(_ref) {
-  var _ref2;
+  var _clsx;
   var _ref$size = _ref.size,
     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
+  }, _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: clsx('inline-block', 'shrink-0', props.isDisabled ? 'fill-disabled-disabled01' : (_ref2 = {}, _ref2[iconColors.icon01] = props.color === 'icon01', _ref2[iconColors.icon01Dark] = props.color === 'icon01Dark', _ref2[iconColors.icon02] = props.color === 'icon02', _ref2[iconColors.icon02Dark] = props.color === 'icon02Dark', _ref2[iconColors.icon03] = props.color === 'icon03', _ref2[iconColors.icon03Dark] = props.color === 'icon03Dark', _ref2[iconColors.iconOnColor] = props.color === 'iconOnColor', _ref2), {
-      'w-3 h-3': size === 'x-small',
-      'w-4 h-4': size === 'small',
-      'w-6 h-6': size === 'medium',
-      'w-8 h-8': size === 'large',
-      'w-10 h-10': size === 'x-large'
-    }),
+    className: classes,
     children: iconElements[props.name]
   });
 };
@@ -31140,13 +31154,12 @@ function DropdownItem(_ref) {
     setIsVisible(false);
     onClick && onClick(event);
   };
-  var listItemClasses = clsx$1('flex w-full items-center');
   var itemClasses = clsx$1('typography-label2regular flex h-8 w-full items-center px-3 hover:bg-hover-hover02 active:bg-active-active02', focusVisible.inset, {
     'bg-background-uiBackground01 fill-icon-icon01 text-interactive-interactive02': color === 'gray',
     'fill-support-supportDanger text-support-supportDanger': color === 'red'
   });
   return /*#__PURE__*/jsx("li", {
-    className: listItemClasses,
+    className: "flex w-full items-center",
     children: /*#__PURE__*/jsx("button", {
       className: itemClasses,
       type: "button",
@@ -31233,11 +31246,15 @@ function Dropdown(_ref) {
       setIsVisible(true);
     }
   }, [isVisible]);
-  var wrapperClasses = clsx$1('relative', 'flex shrink-0 items-center gap-1', 'rounded', isDisabled && 'cursor-not-allowed');
-  var childrenButtonClasses = clsx$1('flex items-center justify-center', 'rounded', 'hover:bg-hover-hover02', 'active:bg-active-active02', focusVisible.normal, isDisabled && 'pointer-events-none', 'p-1', {
+  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, {
+    'pointer-events-none': isDisabled,
     'border border-border-uiBorder02': variant === 'outline'
   });
-  var buttonClasses = clsx$1('flex items-center', 'rounded', buttonColors[variant].base, buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, isDisabled && 'pointer-events-none', {
+  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,
     'h-6 px-2': size === 'x-small' || size === 'small',
     'h-8 px-4': size === 'medium',
     'h-10 px-4': size === 'large'
@@ -31345,8 +31362,7 @@ function EvaluationStar(_ref) {
 function Heading(props) {
   var TagName = "h" + props.level;
   var classes = clsx("flex items-center text-text-text01", typography.heading[TagName], {
-    'gap-2': props.level === 1
-  }, {
+    'gap-2': props.level === 1,
     'gap-1': props.level > 1
   });
   return /*#__PURE__*/jsxs(TagName, {
@@ -31363,20 +31379,11 @@ function IconButton(_ref) {
     variant = _ref$variant === void 0 ? 'outline' : _ref$variant,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   var baseClasses = clsx('typography-label1regular flex items-center justify-center gap-1 rounded', buttonColors[variant].base, buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, {
-    'h-6 w-6': size === 'small' && !props.isNoPadding
-  }, {
-    'h-8 w-8': size === 'medium' && !props.isNoPadding
-  }, {
-    'h-10 w-10': size === 'large' && !props.isNoPadding
-  }, {
-    'h-4 w-4': size === 'small' && props.isNoPadding
-  }, {
-    'h-6 w-6': size === 'medium' && props.isNoPadding
-  }, {
-    'h-6 w-6': size === 'large' && props.isNoPadding
-  }, {
-    'inline-flex': props.isAnchor
-  }, {
+    'h-4 w-4': size === 'small' && props.isNoPadding,
+    'h-6 w-6': size === 'small' && !props.isNoPadding || (size === 'medium' || size === 'large') && props.isNoPadding,
+    'h-8 w-8': size === 'medium' && !props.isNoPadding,
+    'h-10 w-10': size === 'large' && !props.isNoPadding,
+    'inline-flex': props.isAnchor,
     'pointer-events-none': props.isDisabled
   });
   var iconSize = size === 'small' ? 'small' : 'medium';
@@ -31411,8 +31418,12 @@ function Loading(_ref) {
     position = _ref$position === void 0 ? 'fixed' : _ref$position,
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? '100%' : _ref$height;
-  var wrapperClasses = clsx$1(position, 'top-0', 'left-0', 'z-20', 'flex', 'items-center', 'justify-center', 'w-full');
-  var svgClasses = clsx$1(size === 'small' && 'h-4 w-4', size === 'medium' && 'h-8 w-8', size === 'large' && 'h-16 w-16');
+  var wrapperClasses = clsx$1(position, 'left-0 top-0 z-20 flex w-full items-center justify-center');
+  var svgClasses = clsx$1({
+    'h-4 w-4': size === 'small',
+    'h-8 w-8': size === 'medium',
+    'h-16 w-16': size === 'large'
+  });
   return /*#__PURE__*/jsx(Fragment, {
     children: /*#__PURE__*/jsxs("div", {
       className: wrapperClasses,
@@ -31475,15 +31486,15 @@ function ModalBody(_ref) {
 }
 
 var ModalContext = /*#__PURE__*/createContext({
-  setIsOpen: function setIsOpen() {
-    return false;
+  onClose: function onClose() {
+    return null;
   }
 });
 
 function ModalFooter(_ref) {
   var children = _ref.children,
     isNoBorder = _ref.isNoBorder;
-  var wrapperClasses = clsx$1('flex', 'shrink-0', 'items-center', 'w-full', 'rounded-b-lg', 'py-4', 'px-6', {
+  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
   });
   return /*#__PURE__*/jsx("div", {
@@ -31494,26 +31505,23 @@ function ModalFooter(_ref) {
 
 function ModalHeader(_ref) {
   var children = _ref.children,
-    isNoBorder = _ref.isNoBorder,
-    isNoCloseButton = _ref.isNoCloseButton;
+    isNoBorder = _ref.isNoBorder;
   var _useContext = useContext(ModalContext),
-    setIsOpen = _useContext.setIsOpen;
+    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,
-    'h-14': !isNoCloseButton,
-    'h-12': isNoCloseButton
+    'h-14': !onClose,
+    'h-12': onClose
   });
   return /*#__PURE__*/jsxs("div", {
     className: headerClasses,
     children: [/*#__PURE__*/jsx("div", {
       children: children
-    }), !isNoCloseButton && /*#__PURE__*/jsx(IconButton, {
+    }), onClose && /*#__PURE__*/jsx(IconButton, {
       icon: "close",
       size: "small",
       variant: "text",
-      onClick: function onClick() {
-        return setIsOpen(false);
-      }
+      onClick: onClose
     })]
   });
 }
@@ -31526,13 +31534,13 @@ function Modal(_ref) {
     width = _ref$width === void 0 ? 480 : _ref$width,
     height = _ref.height,
     isOpen = _ref.isOpen,
-    setIsOpen = _ref.setIsOpen,
+    onClose = _ref.onClose,
     portalTargetRef = _ref.portalTargetRef;
   var renderWidth = typeof width === 'number' ? Math.max(width, LIMIT_WIDTH) : width;
   var renderHeight = typeof height === 'number' ? Math.max(height, LIMIT_HEIGHT) : height;
   return /*#__PURE__*/reactDom.createPortal(isOpen && /*#__PURE__*/jsx(ModalContext.Provider, {
     value: {
-      setIsOpen: setIsOpen
+      onClose: onClose
     },
     children: /*#__PURE__*/jsx("div", {
       className: "fixed left-0 top-0 z-overlay flex h-full w-full items-center justify-center bg-background-backgroundOverlayBlack",
@@ -31567,7 +31575,7 @@ function NotificationInline(_ref) {
     'p-2': size === 'small',
     'p-3': size === 'medium'
   });
-  var iconClasses = clsx('flex', 'items-center', {
+  var iconClasses = clsx('flex items-center', {
     'fill-support-supportError': state === 'attention',
     'fill-support-supportWarning': state === 'warning',
     'fill-blue-blue50': state === 'information',
@@ -32106,13 +32114,12 @@ function SelectItem(_ref) {
   var children = _ref.children,
     isSortKey = _ref.isSortKey,
     onClickItem = _ref.onClickItem;
-  var listItemClasses = clsx$1('flex w-full items-center');
   var itemClasses = clsx$1('typography-label2regular flex h-8 w-full items-center px-3 hover:bg-hover-hover02 active:bg-active-active02', focusVisible.inset, {
     'bg-selected-selectedUi fill-interactive-interactive01 text-interactive-interactive01': isSortKey,
     'bg-background-uiBackground01 fill-icon-icon01 text-interactive-interactive02': !isSortKey
   });
   return /*#__PURE__*/jsx("li", {
-    className: listItemClasses,
+    className: "flex w-full items-center",
     onClick: onClickItem,
     children: /*#__PURE__*/jsxs("button", {
       className: itemClasses,
@@ -32170,6 +32177,7 @@ function SelectList(_ref) {
 }
 
 function SelectSort(_ref) {
+  var _clsx;
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     _ref$variant = _ref.variant,
@@ -32198,18 +32206,20 @@ function SelectSort(_ref) {
     onChange == null || onChange(value);
     setIsOptionListOpen(false);
   }, [onChange]);
-  var wrapperClasses = clsx$1('relative', 'flex', 'shrink-0', 'gap-1', 'items-center', 'rounded', {
+  var wrapperClasses = clsx$1('relative flex shrink-0 items-center gap-1 rounded', {
     'h-6': size === 'x-small' || size === 'small',
     'h-8': size === 'medium',
     'h-10': size === 'large',
     'cursor-not-allowed': isDisabled
   });
-  var buttonClasses = clsx$1('flex', 'items-center', 'w-full', 'h-full', 'rounded', isSortKey ? buttonColors[variant].selected : buttonColors[variant].base, buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, {
-    'px-2': size === 'x-small' || size === 'small',
-    'px-4': size === 'medium' || size === 'large',
-    'pointer-events-none': isDisabled
+  var buttonClasses = clsx$1('flex h-full w-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',
+    'mr-1': size === 'x-small',
+    'mr-2': size !== 'x-small'
   });
-  var labelClasses = clsx$1('truncate', size === 'x-small' ? 'mr-1' : 'mr-2', typography.label[size === 'x-small' ? 'label3regular' : size === 'small' || size === 'medium' ? 'label2regular' : 'label1regular']);
   return /*#__PURE__*/jsxs("div", {
     className: wrapperClasses,
     style: {
@@ -32245,8 +32255,12 @@ function SelectSort(_ref) {
 }
 
 var TabItem = function TabItem(props) {
-  var _clsx;
-  var classes = clsx('relative', 'flex', 'z-0', 'py-2', 'leading-[24px]', 'before:h-px', 'before:absolute', 'before:left-0', 'before:right-0', 'before:bottom-0', 'hover:text-text-text01', 'disabled:text-disabled-disabled01', 'disabled:pointer-events-none', (_clsx = {}, _clsx['typography-label2regular'] = !props.isSelected, _clsx['text-interactive-interactive02 hover:before:bg-border-uiBorder02Dark'] = !props.isSelected, _clsx['typography-label2bold'] = props.isSelected, _clsx['before:bg-interactive-interactive01 hover:before:bg-interactive-interactive01 pointer-events-none'] = props.isSelected, _clsx));
+  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', {
+    'typography-label2regular': !props.isSelected,
+    'text-interactive-interactive02 hover:before:bg-border-uiBorder02Dark': !props.isSelected,
+    'typography-label2bold': props.isSelected,
+    'before:bg-interactive-interactive01 hover:before:bg-interactive-interactive01 pointer-events-none': props.isSelected
+  });
   return /*#__PURE__*/jsx("button", {
     type: "button",
     role: "tab",
@@ -32262,10 +32276,9 @@ var TabItem = function TabItem(props) {
 
 function Tab(_ref) {
   var children = _ref.children;
-  var classes = clsx('flex', 'px-6', 'gap-4', 'relative', 'before:bg-border-uiBorder01', 'before:h-px', 'before:bottom-0', 'before:left-0', 'before:right-0', 'before:absolute', {});
   return /*#__PURE__*/jsx("div", {
     role: "tablist",
-    className: classes,
+    className: "relative flex gap-4 px-6 before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-border-uiBorder01",
     children: children
   });
 }
@@ -32274,9 +32287,8 @@ Tab.Item = TabItem;
 function TableCell(_ref) {
   var children = _ref.children,
     className = _ref.className;
-  var cellClasses = clsx$1('border-b-[1px] border-border-uiBorder01');
   return /*#__PURE__*/jsx("div", {
-    className: clsx$1(cellClasses, className),
+    className: clsx$1('border-b-[1px] border-border-uiBorder01', className),
     children: children
   });
 }
@@ -32293,15 +32305,19 @@ function TableRow(_ref) {
 
 function Table(_ref) {
   var width = _ref.width,
-    rows = _ref.rows,
-    columns = _ref.columns,
+    templateRows = _ref.templateRows,
+    templateColumns = _ref.templateColumns,
+    autoColumns = _ref.autoColumns,
+    autoRows = _ref.autoRows,
     children = _ref.children;
   return /*#__PURE__*/jsx("div", {
     className: "grid",
     style: {
       width: width,
-      gridTemplateRows: rows,
-      gridTemplateColumns: columns
+      gridTemplateRows: templateRows,
+      gridTemplateColumns: templateColumns,
+      gridAutoColumns: autoColumns,
+      gridAutoRows: autoRows
     },
     children: children
   });
@@ -32313,7 +32329,7 @@ var DeleteIcon = function DeleteIcon(_ref) {
   var color = _ref.color,
     variant = _ref.variant,
     onClick = _ref.onClick;
-  var deleteButtonClasses = clsx$1('h-[14px]', 'w-[14px]', 'ml-2', 'p-0.5', 'rounded-full', 'group', 'hover:bg-icon-iconOnColor', 'hover:cursor-pointer', 'focus-visible:bg-icon-iconOnColor', focusVisible.normal);
+  var deleteButtonClasses = clsx$1('group ml-2 h-[14px] w-[14px] rounded-full p-0.5 hover:cursor-pointer hover:bg-icon-iconOnColor focus-visible:bg-icon-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'
@@ -32567,19 +32583,16 @@ function Toggle(_ref) {
     _ref$labelPosition = _ref.labelPosition,
     labelPosition = _ref$labelPosition === void 0 ? 'right' : _ref$labelPosition,
     isDisabled = _ref.isDisabled;
-  var wrapperClasses = 'flex flex-[0_0_auto] items-center relative';
   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,
     'w-8 h-4 px-[3px]': size === 'small',
     'w-12 h-6 px-1': size === 'medium'
-  }, isDisabled ? {
-    'bg-disabled-disabledOn': isChecked,
-    'bg-disabled-disabled01': !isChecked
-  } : {
-    'bg-interactive-interactive01 peer-hover:bg-hover-hover01': isChecked,
-    'bg-interactive-interactive02 peer-hover:bg-hover-hover02Dark': !isChecked
   });
   var inputClasses = clsx$1('peer absolute inset-0 z-[1] opacity-0', isDisabled ? 'cursor-not-allowed' : 'cursor-pointer');
-  var indicatorClasses = clsx$1('bg-icon-iconOnColor', 'rounded-full', {
+  var indicatorClasses = clsx$1('rounded-full bg-icon-iconOnColor', {
     'w-2.5 h-2.5': size === 'small',
     'w-4 h-4': size === 'medium',
     'ml-auto': isChecked
@@ -32593,7 +32606,7 @@ function Toggle(_ref) {
     'cursor-pointer text-text-text01': !isDisabled
   });
   return /*#__PURE__*/jsxs("div", {
-    className: wrapperClasses,
+    className: "relative flex flex-[0_0_auto] items-center",
     children: [label && labelPosition === 'left' && /*#__PURE__*/jsx("label", {
       htmlFor: id,
       className: labelClasses,
@@ -32620,7 +32633,20 @@ function Toggle(_ref) {
 }
 
 var TailIcon = function TailIcon(props) {
-  var tailClasses = clsx$1('absolute', props.verticalPosition === 'bottom' ? 'rotate-180' : 'rotate-0', props.verticalPosition === 'bottom' ? props.size === 'small' ? '-top-1' : '-top-2' : props.size === 'small' ? '-bottom-1' : '-bottom-2', props.horizontalAlign === 'right' ? props.size === 'small' ? 'right-2' : 'right-4' : props.horizontalAlign === 'left' ? props.size === 'small' ? 'left-2' : 'left-4' : props.size === 'small' ? 'left-2/4 -translate-x-1' : 'left-2/4 -translate-x-2', 'fill-background-uiBackgroundTooltip');
+  var tailClasses = clsx$1('absolute fill-background-uiBackgroundTooltip', {
+    'rotate-180': props.verticalPosition === 'bottom',
+    'rotate-0': props.verticalPosition !== 'bottom',
+    '-top-1': props.verticalPosition === 'bottom' && props.size === 'small',
+    '-top-2': props.verticalPosition === 'bottom' && props.size !== 'small',
+    '-bottom-1': props.verticalPosition !== 'bottom' && props.size === 'small',
+    '-bottom-2': props.verticalPosition !== 'bottom' && props.size !== 'small',
+    'right-2': props.horizontalAlign === 'right' && props.size === 'small',
+    'right-4': props.horizontalAlign === 'right' && props.size !== 'small',
+    'left-2': props.horizontalAlign === 'left' && props.size === 'small',
+    'left-4': props.horizontalAlign === 'left' && props.size !== 'small',
+    'left-2/4 -translate-x-1': props.horizontalAlign === 'center' && props.size === 'small',
+    'left-2/4 -translate-x-2': props.horizontalAlign === 'center' && props.size !== 'small'
+  });
   if (props.size === 'small') {
     return /*#__PURE__*/jsx("svg", {
       className: tailClasses,
@@ -32684,7 +32710,6 @@ function Tooltip(_ref) {
   var handleMouseOutWrapper = useCallback(function () {
     setIsVisible(false);
   }, []);
-  var targetClasses = clsx$1('relative', 'flex', 'items-center', 'justify-center');
   var tooltipBodyClasses = clsx$1('absolute z-tooltip inline-block w-max rounded bg-background-uiBackgroundTooltip text-text-textOnColor', {
     'typography-body3regular': size === 'small',
     'typography-body2regular': size === 'medium',
@@ -32696,7 +32721,7 @@ function Tooltip(_ref) {
   });
   return /*#__PURE__*/jsxs("div", {
     ref: targetRef,
-    className: targetClasses,
+    className: "relative flex items-center justify-center",
     onMouseOver: handleMouseOverWrapper,
     onMouseLeave: handleMouseOutWrapper,
     children: [children, isVisible && /*#__PURE__*/jsxs("div", {