@zenkigen-inc/component-ui 1.5.1 → 1.6.0

package/dist/index.js

@@ -89,11 +89,14 @@ function Button(_ref) {
       variant = 'fill'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
-  const 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, {
+  const baseClasses = clsx('flex shrink-0 items-center justify-center gap-1', buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, {
     'h-6 px-2.5': size === 'small',
     'h-8 px-3': size === 'medium',
     'h-10 px-4 leading-[24px]': size === 'large',
     'inline-flex': props.isAnchor,
+    [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',
     'pointer-events-none': props.isDisabled,
     'rounded-button': !props.borderRadius,
     'typography-label1regular': size === 'large',
@@ -169,24 +172,44 @@ function Checkbox({
   const handleChange = useCallback(e => {
     !isDisabled && (onChange == null ? void 0 : onChange(e));
   }, [isDisabled, onChange]);
-  const wrapperClasses = clsx$1('flex', 'items-center');
-  const baseClasses = clsx$1('flex', 'items-center', 'justify-center', 'h-6', 'w-6');
-  const baseInputClasses = clsx$1('absolute', 'z-[1]', 'opacity-0', 'w-5', 'h-5', 'peer', isDisabled ? 'cursor-not-allowed' : 'cursor-pointer');
-  const 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');
-  const indicatorClasses = clsx$1('h-5', 'w-5', 'relative', 'flex', 'flex-[0_0_auto]', 'items-center', 'justify-center', {
+  const baseInputClasses = clsx$1('peer absolute z-[1] h-5 w-5 opacity-0', {
+    'cursor-not-allowed': isDisabled,
+    'cursor-pointer': !isDisabled
+  });
+  const 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'
+  });
+  const 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
   });
-  const 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', {
+  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',
     'scale-0': !isChecked,
     'scale-100': isChecked
   });
-  const hoverIndicatorClasses = clsx$1('w-3', 'h-3', 'inline-block', 'rounded-[1px]', !isDisabled && !isChecked && isMouseOver && 'bg-hover-hoverUi');
-  const 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');
+  const hoverIndicatorClasses = clsx$1('inline-block h-3 w-3 rounded-[1px]', {
+    'bg-hover-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
+  });
   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,
@@ -31098,22 +31121,23 @@ const Icon = _ref => {
       size = 'medium'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+  const classes = clsx('inline-block shrink-0', {
+    'fill-disabled-disabled01': props.isDisabled,
+    [iconColors.icon01]: !props.isDisabled && props.color === 'icon01',
+    [iconColors.icon01Dark]: !props.isDisabled && props.color === 'icon01Dark',
+    [iconColors.icon02]: !props.isDisabled && props.color === 'icon02',
+    [iconColors.icon02Dark]: !props.isDisabled && props.color === 'icon02Dark',
+    [iconColors.icon03]: !props.isDisabled && props.color === 'icon03',
+    [iconColors.icon03Dark]: !props.isDisabled && props.color === 'icon03Dark',
+    [iconColors.iconOnColor]: !props.isDisabled && props.color === 'iconOnColor',
+    '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'
+  });
   return /*#__PURE__*/jsx("span", {
-    className: clsx('inline-block', 'shrink-0', props.isDisabled ? 'fill-disabled-disabled01' : {
-      [iconColors.icon01]: props.color === 'icon01',
-      [iconColors.icon01Dark]: props.color === 'icon01Dark',
-      [iconColors.icon02]: props.color === 'icon02',
-      [iconColors.icon02Dark]: props.color === 'icon02Dark',
-      [iconColors.icon03]: props.color === 'icon03',
-      [iconColors.icon03Dark]: props.color === 'icon03Dark',
-      [iconColors.iconOnColor]: props.color === 'iconOnColor'
-    }, {
-      '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]
   });
 };
@@ -31141,13 +31165,12 @@ function DropdownItem({
     setIsVisible(false);
     onClick && onClick(event);
   };
-  const listItemClasses = clsx$1('flex w-full items-center');
   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'
   });
   return /*#__PURE__*/jsx("li", {
-    className: listItemClasses,
+    className: "flex w-full items-center",
     children: /*#__PURE__*/jsx("button", {
       className: itemClasses,
       type: "button",
@@ -31225,11 +31248,15 @@ function Dropdown({
       setIsVisible(true);
     }
   }, [isVisible]);
-  const wrapperClasses = clsx$1('relative', 'flex shrink-0 items-center gap-1', 'rounded', isDisabled && 'cursor-not-allowed');
-  const 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', {
+  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, {
+    'pointer-events-none': isDisabled,
     'border 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, isDisabled && 'pointer-events-none', {
+  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,
     'h-6 px-2': size === 'x-small' || size === 'small',
     'h-8 px-4': size === 'medium',
     'h-10 px-4': size === 'large'
@@ -31329,8 +31356,7 @@ function EvaluationStar({
 function Heading(props) {
   const TagName = `h${props.level}`;
   const 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, {
@@ -31347,20 +31373,11 @@ function IconButton(_ref) {
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   const 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
   });
   const iconSize = size === 'small' ? 'small' : 'medium';
@@ -31393,8 +31410,12 @@ function Loading({
   position = 'fixed',
   height = '100%'
 }) {
-  const wrapperClasses = clsx$1(position, 'top-0', 'left-0', 'z-20', 'flex', 'items-center', 'justify-center', 'w-full');
-  const svgClasses = clsx$1(size === 'small' && 'h-4 w-4', size === 'medium' && 'h-8 w-8', size === 'large' && 'h-16 w-16');
+  const wrapperClasses = clsx$1(position, 'left-0 top-0 z-20 flex w-full items-center justify-center');
+  const 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,
@@ -31458,14 +31479,14 @@ function ModalBody({
 }
 
 const ModalContext = /*#__PURE__*/createContext({
-  setIsOpen: () => false
+  onClose: () => null
 });
 
 function ModalFooter({
   children,
   isNoBorder
 }) {
-  const wrapperClasses = clsx$1('flex', 'shrink-0', 'items-center', 'w-full', 'rounded-b-lg', 'py-4', 'px-6', {
+  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
   });
   return /*#__PURE__*/jsx("div", {
@@ -31480,7 +31501,7 @@ function ModalHeader({
   isNoCloseButton
 }) {
   const {
-    setIsOpen
+    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,
@@ -31495,7 +31516,7 @@ function ModalHeader({
       icon: "close",
       size: "small",
       variant: "text",
-      onClick: () => setIsOpen(false)
+      onClick: () => onClose()
     })]
   });
 }
@@ -31507,14 +31528,14 @@ function Modal({
   width = 480,
   height,
   isOpen,
-  setIsOpen,
+  onClose,
   portalTargetRef
 }) {
   const renderWidth = typeof width === 'number' ? Math.max(width, LIMIT_WIDTH) : width;
   const renderHeight = typeof height === 'number' ? Math.max(height, LIMIT_HEIGHT) : height;
   return /*#__PURE__*/reactDom.createPortal(isOpen && /*#__PURE__*/jsx(ModalContext.Provider, {
     value: {
-      setIsOpen
+      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",
@@ -31549,7 +31570,7 @@ function NotificationInline(_ref) {
     'p-2': size === 'small',
     'p-3': size === 'medium'
   });
-  const iconClasses = clsx('flex', 'items-center', {
+  const iconClasses = clsx('flex items-center', {
     'fill-support-supportError': state === 'attention',
     'fill-support-supportWarning': state === 'warning',
     'fill-blue-blue50': state === 'information',
@@ -32053,13 +32074,12 @@ function SelectItem({
   isSortKey,
   onClickItem
 }) {
-  const listItemClasses = clsx$1('flex w-full items-center');
   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
   });
   return /*#__PURE__*/jsx("li", {
-    className: listItemClasses,
+    className: "flex w-full items-center",
     onClick: onClickItem,
     children: /*#__PURE__*/jsxs("button", {
       className: itemClasses,
@@ -32132,18 +32152,26 @@ function SelectSort({
     onChange == null || onChange(value);
     setIsOptionListOpen(false);
   }, [onChange]);
-  const wrapperClasses = clsx$1('relative', 'flex', 'shrink-0', 'gap-1', 'items-center', 'rounded', {
+  const 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
   });
-  const 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, {
+  const buttonClasses = clsx$1('flex h-full w-full items-center rounded', buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, {
+    [buttonColors[variant].selected]: isSortKey,
+    [buttonColors[variant].base]: !isSortKey,
     'px-2': size === 'x-small' || size === 'small',
     'px-4': size === 'medium' || size === 'large',
     'pointer-events-none': isDisabled
   });
-  const labelClasses = clsx$1('truncate', size === 'x-small' ? 'mr-1' : 'mr-2', typography.label[size === 'x-small' ? 'label3regular' : size === 'small' || size === 'medium' ? 'label2regular' : 'label1regular']);
+  const 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'
+  });
   return /*#__PURE__*/jsxs("div", {
     className: wrapperClasses,
     style: {
@@ -32179,11 +32207,11 @@ function SelectSort({
 }
 
 const TabItem = props => {
-  const 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', {
-    ['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
+  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', {
+    '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",
@@ -32199,10 +32227,9 @@ const TabItem = props => {
 function Tab({
   children
 }) {
-  const 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
   });
 }
@@ -32212,9 +32239,8 @@ function TableCell({
   children,
   className
 }) {
-  const 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
   });
 }
@@ -32232,16 +32258,20 @@ function TableRow({
 
 function Table({
   width,
-  rows,
-  columns,
+  templateRows,
+  templateColumns,
+  autoColumns,
+  autoRows,
   children
 }) {
   return /*#__PURE__*/jsx("div", {
     className: "grid",
     style: {
       width,
-      gridTemplateRows: rows,
-      gridTemplateColumns: columns
+      gridTemplateRows: templateRows,
+      gridTemplateColumns: templateColumns,
+      gridAutoColumns: autoColumns,
+      gridAutoRows: autoRows
     },
     children: children
   });
@@ -32254,7 +32284,7 @@ const DeleteIcon = ({
   variant,
   onClick
 }) => {
-  const 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);
+  const 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);
   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'
@@ -32288,10 +32318,10 @@ function Tag({
   const wrapperClasses = clsx$1('flex', 'items-center', 'justify-center', {
     [tagColors[color]]: variant === 'normal',
     [tagLightColors[color]]: variant === 'light',
-    ['h-[14px] typography-label4regular']: !isEditable && size === 'x-small',
-    ['h-4 typography-label3regular']: !isEditable && size === 'small',
-    ['h-[18px] typography-label2regular']: !isEditable && size === 'medium',
-    ['h-[22px] typography-label2regular']: isEditable && size === 'medium',
+    'h-[14px] typography-label4regular': !isEditable && size === 'x-small',
+    'h-4 typography-label3regular': !isEditable && size === 'small',
+    'h-[18px] typography-label2regular': !isEditable && size === 'medium',
+    'h-[22px] typography-label2regular': isEditable && size === 'medium',
     'rounded-full': isEditable,
     rounded: !isEditable,
     'py-0.5 px-1': !isEditable,
@@ -32508,19 +32538,16 @@ function Toggle({
   labelPosition = 'right',
   isDisabled
 }) {
-  const wrapperClasses = 'flex flex-[0_0_auto] items-center relative';
   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,
     '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
   });
   const inputClasses = clsx$1('peer absolute inset-0 z-[1] opacity-0', isDisabled ? 'cursor-not-allowed' : 'cursor-pointer');
-  const indicatorClasses = clsx$1('bg-icon-iconOnColor', 'rounded-full', {
+  const 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
@@ -32534,7 +32561,7 @@ function Toggle({
     '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,
@@ -32561,7 +32588,20 @@ function Toggle({
 }
 
 const TailIcon = props => {
-  const 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');
+  const 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,
@@ -32618,7 +32658,6 @@ function Tooltip({
   const handleMouseOutWrapper = useCallback(() => {
     setIsVisible(false);
   }, []);
-  const targetClasses = clsx$1('relative', 'flex', 'items-center', 'justify-center');
   const 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',
@@ -32630,7 +32669,7 @@ function Tooltip({
   });
   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", {