@economic/taco 1.37.0 → 1.38.1

package/dist/taco.cjs.development.js

@@ -3786,25 +3786,25 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
 });
 
 const getButtonClasses = () => {
-  return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center';
+  return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus disabled:cursor-not-allowed';
 };
 const getAppearanceClasses = (value, icon = false) => {
   switch (value) {
     case 'primary':
-      return `wcag-blue-500 focus:bg-blue-500 focus:text-white focus:yt-focus active:bg-blue-700 active:text-white hover:bg-blue-300 hover:text-white hover:focus:bg-blue-300 hover:focus:border-blue-300 hover:focus:text-white disabled:hover:wcag-blue-500 disabled:hover:hover:border-blue-500`;
+      return `wcag-blue-500 enabled:hover:wcag-blue-700 enabled:hover:active:wcag-blue-500 disabled:bg-blue-500/50`;
     case 'danger':
-      return `wcag-red-500 focus:bg-red-500 focus:text-white focus:yt-focus-red active:bg-red-700 active:text-white hover:bg-red-300 hover:text-white hover:focus:bg-red-300 hover:focus:text-white disabled:hover:wcag-red-500`;
+      return `wcag-red-500 enabled:hover:wcag-red-700 enabled:hover:active:wcag-red-500 disabled:bg-red-500/50`;
     case 'ghost':
-      return `bg-white shadow-[inset_0_0_0_1px_theme(colors.blue.500)] text-blue-500 focus:bg-transparent focus:text-blue-500 active:bg-blue-100 focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.500),0_0_0_2px_rgba(0,99,255,0.25)] active:text-blue-700 hover:bg-blue-100 hover:shadow-[inset_0_0_0_1px_theme(colors.blue.300)] hover:text-blue-300 hover:focus:bg-blue-100 hover:focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.300),0_0_0_2px_rgba(0,99,255,0.25)] hover:focus:text-blue-300`;
+      return `bg-white border border-blue-500 text-blue-500 enabled:hover:bg-blue-100 enabled:hover:text-blue-700 disabled:border-blue-500/50 disabled:text-blue-500/50`;
     case 'discrete':
       {
         if (icon) {
-          return `bg-transparent text-black border-transparent focus:text-black focus:yt-focus active:text-black hover:text-grey-700 hover:focus:text-grey-700 disabled:hover:text-black `;
+          return `bg-transparent text-black enabled:hover:bg-grey-200/80 disabled:text-black/30`;
         }
-        return `yt-transparent focus:text-blue-500 focus:yt-focus active:text-blue-700 hover:text-blue-300 hover:focus:text-blue-300 disabled:hover:yt-transparent`;
+        return `bg-transparent text-blue-500 enabled:hover:text-blue-700 disabled:text-blue-500/50`;
       }
     default:
-      return `wcag-grey-200 focus:bg-grey-200 focus:yt-focus active:bg-grey-300 active:text-black hover:bg-grey-100 hover:text-grey-700 hover:focus:bg-grey-100 hover:focus:text-grey-700 disabled:hover:wcag-grey-200`;
+      return `wcag-grey-200 enabled:hover:wcag-grey-300 disabled:bg-grey-200/50 disabled:text-black/30`;
   }
 };
 const createButtonWithTooltip = (props, className, ref) => {
@@ -3865,9 +3865,7 @@ const Base = /*#__PURE__*/React.forwardRef(function IconButtonBase(props, ref) {
   } = props;
   const className = cn('w-8', getButtonClasses(), getAppearanceClasses(otherProps.appearance, true), {
     'rounded-full': rounded,
-    rounded: !rounded,
-    'cursor-not-allowed opacity-50': props.disabled,
-    'focus:yt-focus active:focus:yt-focus': !props.disabled
+    rounded: !rounded
   }, props.className);
   if (!icon) {
     return null;
@@ -4146,8 +4144,6 @@ const Base$1 = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     ...otherProps
   } = props;
   const className = cn(getButtonClasses(), getAppearanceClasses(appearance), 'rounded px-3', {
-    'cursor-not-allowed opacity-50': props.disabled,
-    'focus:yt-focus active:focus:yt-focus': !props.disabled,
     'w-full': fluid
   }, props.className);
   return createButtonWithTooltip({
@@ -4355,7 +4351,6 @@ const useId = nativeId => {
 const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
   const {
     checked,
-    highlighted,
     indeterminate,
     invalid,
     label,
@@ -4363,14 +4358,14 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
     ...otherProps
   } = props;
   const id = useId(props.id);
-  const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 mt-[0.1rem] focus:yt-focus',
-  //hover:shadow-[0_0_0_1px_rgba(235,235,235,1)]
-  {
-    'border-grey-300 text-blue-500 hover:text-blue-300 focus:border-blue-500 focus:hover:border-blue-300': !props.disabled && !invalid,
-    'border-grey-200 text-blue-300 cursor-not-allowed': props.disabled,
-    'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,
-    'border-red-500 text-red-500 hover:text-red-300 hover:border-red-300 focus:border-red-500 focus:hover:border-red-300': invalid && !props.disabled,
+  const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 mt-[0.1rem] focus-visible:yt-focus disabled:cursor-not-allowed text-white', {
     'self-start': !!label
+  }, invalid ? {
+    'border-red-500 hover:border-red-700 aria-checked:border-red-500 aria-checked-mixed:border-red-500 aria-checked:bg-red-500 aria-checked-mixed:bg-red-500 aria-checked:hover:border-red-700 aria-checked-mixed:hover:border-red-700 aria-checked:hover:bg-red-700 aria-checked-mixed:hover:bg-red-700': !props.disabled,
+    'border-red-500/50 aria-checked:wcag-red-500/50 aria-checked-mixed:wcag-red-500/50': props.disabled
+  } : {
+    'border-grey-500 hover:border-grey-700 aria-checked:border-blue-500 aria-checked-mixed:border-blue-500 aria-checked:bg-blue-500 aria-checked-mixed:bg-blue-500 aria-checked:hover:border-blue-700 aria-checked-mixed:hover:border-blue-700 aria-checked:hover:bg-blue-700 aria-checked-mixed:hover:bg-blue-700': !props.disabled,
+    'border-grey-500/50 aria-checked:bg-blue-500/50 aria-checked-mixed:bg-blue-500/50': props.disabled
   }, props.className);
   let handleChange;
   if (onChange) {
@@ -4421,28 +4416,28 @@ const getInputClasses = props => {
   const disabled = props.disabled || !!props['aria-disabled'];
   const readOnly = props.readOnly || !!props['aria-readonly'];
   const invalid = props.invalid || !!props['aria-invalid'];
-  return cn('peer text-black text-sm border font-normal not-italic no-underline rounded flex items-center leading-6 px-2 relative w-full text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)]', {
+  return cn('peer text-black text-sm border font-normal not-italic no-underline rounded flex items-center leading-6 px-2 relative w-full text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)] focus-visible:yt-focus', {
     'bg-white': !props.highlighted && !readOnly,
     // default
-    'border-grey-300 focus:border-blue-300 focus:yt-focus': !invalid,
-    'hover:shadow-[0_0_0.1rem_theme(colors.grey.500)] active:border-blue-700': !invalid && !disabled,
+    'border-grey-300 enabled:hover:border-grey-500 disabled:border-grey-200': !invalid,
     // disabled
-    'border-grey-200 text-opacity-25 cursor-not-allowed placeholder:text-grey-700': disabled,
+    'text-opacity-25 cursor-not-allowed placeholder:text-grey-700': disabled,
     // highlighted
-    'bg-[rgba(255,255,0,0.075)]': props.highlighted && disabled,
-    'bg-[rgba(255,255,0,0.2)]': props.highlighted && !disabled,
+    'bg-yellow-100/50': props.highlighted && disabled,
+    'bg-yellow-100': props.highlighted && !disabled,
     // invalid
-    'border-red focus:border-red-300 focus:yt-focus-red active:border-red-700': invalid,
-    'hover:shadow-[0_0_0.15rem_theme(colors.red.500)]': invalid && !disabled,
+    'border-red-500 enabled:hover:border-red-700 disabled:border-red-500/50': invalid,
     // readOnly
     'cursor-not-allowed text-black bg-grey-200': readOnly
   });
 };
-const getButtonStateClasses = invalid => {
+const getButtonStateClasses = (invalid, disabled = false) => {
   if (invalid) {
-    return 'border !border-red-500 group-peer-focus:!border-red-300 focus:yt-focus-red group-focus:group-active:!border-red-300 transition-colors ease-in';
+    return cn('border border-red-500 group-peer-hover:enabled:border-red-700 transition-colors ease-in', {
+      'border-red-500/30': disabled
+    });
   }
-  return 'border border-grey-300 focus:!border-blue-300 group-peer-focus:!border-blue-300 group-peer-focus:group-peer-active:!border-blue-700 transition-colors transition-opacity ease-in';
+  return 'border border-grey-300 group-peer-hover:enabled:border-grey-500 transition-colors transition-opacity ease-in';
 };
 
 const debounce = (fn, delay) => {
@@ -4587,7 +4582,7 @@ const Input = /*#__PURE__*/React.forwardRef(function LegacyInput(props, ref) {
   let postfix;
   if (button) {
     const disabled = button.props.disabled || attributes.disabled;
-    const buttonClassName = cn('items-center focus:z-10 flex justify-center rounded-l-none rounded-r h-full focus:rounded focus:outline-none', getButtonStateClasses(attributes.invalid), button.props.className);
+    const buttonClassName = cn('items-center focus:z-10 flex justify-center rounded-l-none rounded-r h-full focus:rounded focus:outline-none', getButtonStateClasses(attributes.invalid, disabled), button.props.className);
     postfix = /*#__PURE__*/React.cloneElement(button, {
       className: buttonClassName,
       disabled
@@ -5611,14 +5606,11 @@ const Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref)
     "data-taco": "datepicker",
     style: style
   }, /*#__PURE__*/React.createElement(Input, Object.assign({}, input, {
-    button: /*#__PURE__*/React.createElement(Tooltip, {
-      title: texts.datepicker.calendar
-    }, /*#__PURE__*/React.createElement(IconButton, {
+    button: /*#__PURE__*/React.createElement(IconButton, {
       "aria-label": texts.datepicker.expand,
       disabled: input.disabled || input.readOnly,
       icon: "calendar",
       tabIndex: -1,
-      className: " border-grey-300 group-peer-focus:!border-blue-300 group-peer-focus:group-peer-active:!border-blue-700 flex h-full items-center justify-center rounded-l-none rounded-r border transition-colors transition-opacity ease-in focus:z-10 focus:rounded focus:!border-blue-300 focus:outline-none",
       popover: props => /*#__PURE__*/React.createElement(Popover, Object.assign({}, props), /*#__PURE__*/React.createElement(Popover.Content, null, ({
         close
       }) => /*#__PURE__*/React.createElement("div", {
@@ -5644,14 +5636,15 @@ const Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref)
         }
       }, shortcut.text)))), handleReset && /*#__PURE__*/React.createElement("button", {
         type: "button",
-        className: "my-4 mx-auto mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300",
+        className: "mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300",
         onClick: event => {
           event.persist();
           handleReset(event);
           close();
         }
-      }, texts.datepicker.clear)))))
-    }))
+      }, texts.datepicker.clear))))),
+      tooltip: texts.datepicker.calendar
+    })
   })));
 });
 Datepicker.displayName = 'Datepicker';
@@ -6146,15 +6139,16 @@ const InnerContent = /*#__PURE__*/React__default.forwardRef(function InnerConten
     children,
     ...otherProps
   } = props;
-  const cName = cn('grow-1 p-4', className);
+  const cName = cn('grow flex flex-col', {
+    'overflow-y-hidden': isScrollable,
+    'p-4': !isScrollable
+  }, className);
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
     className: cName,
     ref: ref
   }), isScrollable ? /*#__PURE__*/React__default.createElement(ScrollArea, {
-    className: "w-full gap-y-0.5"
-  }, children) : {
-    children
-  });
+    className: "w-full gap-y-0.5 p-4"
+  }, children) : children);
 });
 const Portal = props => {
   const {
@@ -6447,7 +6441,7 @@ const Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
     'text-grey-700': !invalid,
     'text-red-500': invalid,
     'opacity-50': disabled
-  }, props.className);
+  });
   return /*#__PURE__*/React.createElement("label", Object.assign({}, otherProps, {
     className: className,
     "data-taco": "label",
@@ -7245,10 +7239,12 @@ const RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(pro
     ...otherProps
   } = props;
   const isDisabled = context.disabled || props.disabled;
-  const className = cn('flex flex-shrink-0 self-start items-center justify-center h-4 w-4 mt-[0.2rem] rounded-full bg-white border-2', {
-    'border-grey-300 hover:border-4 focus:yt-focus aria-checked:bg-blue-500 aria-checked:border-blue-500 hover:aria-checked:border-blue-300': !isDisabled && !context.invalid,
-    'border-grey-200 cursor-not-allowed aria-checked:bg-blue-300 aria-checked:border-blue-300 ': isDisabled,
-    'border-red-500 hover:border-4 text-red-500 focus:border-red-500 focus:yt-focus-red aria-checked:bg-red-500 aria-checked:border-red': context.invalid && !isDisabled
+  const className = cn('flex flex-shrink-0 self-start items-center justify-center h-4 w-4 mt-[0.2rem] rounded-full bg-white border-2 focus-visible:yt-focus disabled:cursor-not-allowed hover:border-4', context.invalid ? {
+    'border-red-500 hover:border-red-700 aria-checked:bg-red-500 aria-checked:border-red-500 hover:aria-checked:border-red-700': !isDisabled,
+    'border-red-500/50 aria-checked:bg-red-500/50 aria-checked:border-red-500/50': isDisabled
+  } : {
+    'border-grey-500 hover:border-grey-700 aria-checked:bg-blue-500 aria-checked:border-blue-500 hover:aria-checked:border-blue-700': !isDisabled,
+    'border-grey-500/50 aria-checked:bg-blue-500/50 aria-checked:border-blue-500/50': isDisabled
   });
   const labelClassName = cn('flex items-center gap-2', {
     'cursor-pointer': !isDisabled,
@@ -9170,10 +9166,9 @@ const Option$1 = /*#__PURE__*/React__default.forwardRef(function Select2Option(p
   }, /*#__PURE__*/React__default.createElement("span", null, children), description ? /*#__PURE__*/React__default.createElement("span", {
     className: "text-grey-700 -mt-1.5 mb-1.5 text-xs"
   }, description) : null)), popover ? /*#__PURE__*/React__default.createElement(IconButton, {
-    rounded: true,
     icon: "ellipsis-vertical",
     appearance: "discrete",
-    className: cn('group-aria-current:visible invisible ml-auto -mr-2 focus:!shadow-none group-hover:visible', {
+    className: cn('group-aria-current:visible invisible -mr-1 ml-auto !h-5 min-h-[theme(spacing.6)] !w-5 min-w-[theme(spacing.6)] hover:!bg-black/[.08] focus:!shadow-none group-hover:visible', {
       '!visible': isMobileDevice((_window = window) === null || _window === void 0 ? void 0 : _window.navigator)
     }),
     onClick: event => {
@@ -9639,15 +9634,22 @@ const filterOption = (child, searchQuery) => {
 };
 
 const getNextColor = options => {
-  const occurences = options.reduce((occurences, option) => {
+  let occurrences = {};
+  AVAILABLE_COLORS.filter(color => color !== 'transparent').forEach(color => {
+    occurrences = {
+      ...occurrences,
+      [color]: 0
+    };
+  });
+  options.reduce((occurrences, option) => {
     if (option.props.color) {
-      occurences[option.props.color] = occurences[option.props.color] ? occurences[option.props.color] + 1 : 1;
+      occurrences[option.props.color] = occurrences[option.props.color] ? occurrences[option.props.color] + 1 : 1;
     }
-    return occurences;
-  }, {});
-  const colors = Object.keys(occurences);
+    return occurrences;
+  }, occurrences);
+  const colors = Object.keys(occurrences);
   if (colors.length) {
-    return colors.sort((a, b) => occurences[a] - occurences[b])[0];
+    return colors.sort((a, b) => occurrences[a] - occurrences[b])[0];
   }
   return undefined;
 };
@@ -9977,10 +9979,10 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
     ...otherProps
   } = props;
   const id = useId(props.id);
-  const className = cn('group h-5 w-9 flex flex-shrink-0 rounded-full inline-flex', {
+  const className = cn('group h-5 w-9 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus', {
     'mr-2': !!label,
-    'bg-grey-500 hover:bg-grey-300 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-300 focus:yt-focus': !props.disabled,
-    'bg-grey-100 cursor-not-allowed aria-checked:bg-blue-300': props.disabled
+    'bg-grey-500 hover:bg-grey-700 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700': !props.disabled,
+    'bg-grey-500/50 aria-checked:bg-blue-500/50 cursor-not-allowed': props.disabled
   }, props.className);
   let labelledByProps = null;
   if (label) {
@@ -12959,7 +12961,9 @@ const Header$1 = function Header(props) {
       const nextSizes = {
         ...sizes
       };
-      if (size) {
+      if (size === 'grow') {
+        nextSizes[header.id] = '1fr';
+      } else if (typeof size === 'number') {
         nextSizes[header.id] = !isInternalFrozenColumn(header.id) && size < MIN_COLUMN_SIZE ? MIN_COLUMN_SIZE : size;
       } else {
         delete nextSizes[header.id];
@@ -13063,7 +13067,7 @@ const HeaderMenu = ({
     '!flex': open
   });
   const menuItems = [];
-  if (table.options.enableHiding) {
+  if (table.options.enableHiding && header.column.getCanHide()) {
     // we do this in the next tick, otherwise the menu closes and react throws a "state update on unmounted component" error
     const handleClick = () => setTimeout(() => header.column.toggleVisibility(), 1);
     menuItems.push( /*#__PURE__*/React__default.createElement(Menu$1.Item, {
@@ -13174,8 +13178,9 @@ function useColumnDefinitions(children, options, tableRef) {
     React__default.Children.toArray(children).filter(child => !!child).forEach(child => {
       if ( /*#__PURE__*/React__default.isValidElement(child)) {
         var _child$props$minWidth;
-        if (child.props.defaultWidth) {
-          defaultColumnSizing[child.props.accessor] = child.props.defaultWidth;
+        const defaultWidth = child.props.defaultWidth === 'grow' ? '1fr' : child.props.defaultWidth;
+        if (defaultWidth) {
+          defaultColumnSizing[child.props.accessor] = defaultWidth;
         }
         if (child.props.defaultHidden && options.enableColumnHiding) {
           defaultColumnVisibility[child.props.accessor] = false;
@@ -13211,7 +13216,7 @@ function useColumnDefinitions(children, options, tableRef) {
             className: child.props.className,
             control: child.props.control,
             dataType: child.props.dataType,
-            defaultWidth: child.props.defaultWidth,
+            defaultWidth,
             disableReordering: child.props.disableReordering,
             menu: child.props.menu,
             tooltip: child.props.tooltip
@@ -13632,7 +13637,9 @@ const useGridTemplate = table => {
     } else if (isInternalColumn(column.id)) {
       size = `${column.getSize()}px`;
     } else if (width) {
-      if (isLastColumn) {
+      if (width === '1fr') {
+        size = 'minmax(max-content, 1fr)';
+      } else if (isLastColumn) {
         size = `minmax(${width}px, auto)`;
       } else if (column.columnDef.minSize && width < column.columnDef.minSize) {
         // react-table is supposed to handle minSize itself but it is really buggy
@@ -14965,7 +14972,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
     orientation = 'horizontal',
     ...otherProps
   } = props;
-  const className = cn('yt-tabs', `yt-tabs--${orientation}`, {
+  const className = cn({
     'flex w-full': orientation === 'vertical'
   }, props.className);
   return /*#__PURE__*/React.createElement(TabsPrimitive.Root, Object.assign({}, otherProps, {
@@ -14980,7 +14987,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
   }), children);
 });
 const TabList = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
-  const className = cn('yt-tab__list border-b border-grey-300 flex flex-row m-0 mb-4', props.className);
+  const className = cn('border-grey-300 flex flex-row m-0 mb-4', 'aria-orientation-horizontal:border-b', 'aria-orientation-vertical:border-r aria-orientation-vertical:m-0 aria-orientation-vertical:mr-4 aria-orientation-vertical:flex-col ', props.className);
   return /*#__PURE__*/React.createElement(TabsPrimitive.List, Object.assign({}, props, {
     className: className,
     ref: ref
@@ -14988,19 +14995,31 @@ const TabList = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
 });
 const TabTrigger = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
   const {
+    children,
     id,
     disabled,
     ...otherProps
   } = props;
-  const className = cn('yt-tab bg-transparent border-b-2 border-transparent text-grey-700 m-0 py-2 px-4', disabled ? 'cursor-not-allowed !text-grey-500' : 'cursor-pointer rounded-t hover:border-grey-300 aria-selected:border-blue-500 aria-selected:text-black aria-selected:hover:border-blue-300 hover:text-black active:yt-focus active:border-blue-500 focus:yt-focus focus:border-blue-500', props.className);
+  const triggerClassName = cn('group relative p-0.5 outline-none disabled:cursor-not-allowed disabled:text-black/50',
+  // horizontal
+  '[[aria-orientation="horizontal"]_&]:pb-1',
+  // horizontal
+  '[[aria-orientation="vertical"]_&]:pr-1');
+  const buttonClassName = cn(getButtonClasses(), 'group-focus-visible:yt-focus-inset group-enabled:group-hover:wcag-grey-200 pointer-events-none rounded px-3');
+  const activeClassName = cn('pointer-events-none absolute hidden bg-blue-500 group-aria-selected:flex',
+  // horizontal
+  '[[aria-orientation="horizontal"]_&]:rounded-t-sm [[aria-orientation="horizontal"]_&]:bottom-0 [[aria-orientation="horizontal"]_&]:left-0 [[aria-orientation="horizontal"]_&]:right-0 [[aria-orientation="horizontal"]_&]:-mb-px [[aria-orientation="horizontal"]_&]:h-0.5',
+  // vertical
+  '[[aria-orientation="vertical"]_&]:rounded-l-sm [[aria-orientation="vertical"]_&]:right-0 [[aria-orientation="vertical"]_&]:top-0 [[aria-orientation="vertical"]_&]:bottom-0 [[aria-orientation="vertical"]_&]:-mr-px [[aria-orientation="vertical"]_&]:w-0.5');
   return /*#__PURE__*/React.createElement(TabsPrimitive.Trigger, Object.assign({}, otherProps, {
-    className: className,
+    className: triggerClassName,
     disabled: disabled,
     ref: ref,
-    style: {
-      transition: 'border 0.2s ease-in'
-    },
     value: id
+  }), /*#__PURE__*/React.createElement("span", {
+    className: buttonClassName
+  }, children), /*#__PURE__*/React.createElement("span", {
+    className: activeClassName
   }));
 });
 const TabContent = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
@@ -15008,7 +15027,7 @@ const TabContent = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
     id,
     ...otherProps
   } = props;
-  const className = cn('yt-tab__panel outline-none', props.className);
+  const className = cn('[&[data-orientation="vertical"]]:grow outline-none', props.className);
   return /*#__PURE__*/React.createElement(TabsPrimitive.Content, Object.assign({}, otherProps, {
     className: className,
     ref: ref,
@@ -15189,7 +15208,7 @@ const Button$3 = /*#__PURE__*/React__default.forwardRef(function Button(props, r
     ref: ref
   }));
 });
-const getButtonClasses$1 = (rounded = true) => cn('!h-9 !w-9 flex-shrink-0 flex-grow-0 cursor-pointer relative', 'focus:!outline-none focus:!shadow-none focus-visible:!yt-focus-dark ', 'bg-transparent hover:bg-white/[.08] focus:bg-white/[.08] aria-current-page:bg-white/[.08]', '!text-white hover:text-white focus:text-white', {
+const getButtonClasses$1 = (rounded = true) => cn('!h-9 !w-9 flex-shrink-0 flex-grow-0 cursor-pointer relative', 'focus:!outline-none focus:!shadow-none focus-visible:!yt-focus-dark ', 'bg-transparent enabled:hover:bg-white/[.08] focus:bg-white/[.08] aria-current-page:bg-white/[.08]', 'text-white', {
   '!rounded-full': rounded
 });
 
@@ -15215,7 +15234,7 @@ const Link$1 = /*#__PURE__*/React__default.forwardRef(function Link(props, ref)
   }) : null, children, isNew ? /*#__PURE__*/React__default.createElement(Badge, {
     color: "blue",
     small: true,
-    className: "absolute top-0 right-0 -mt-1.5 -mr-2.5 !h-3 !px-0.5 text-[0.55rem] font-normal"
+    className: "absolute right-0 top-0 -mr-2.5 -mt-1.5 !h-3 !px-0.5 text-[0.55rem] font-normal"
   }, texts.header.new) : null);
   if (tooltip) {
     return /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -15224,7 +15243,7 @@ const Link$1 = /*#__PURE__*/React__default.forwardRef(function Link(props, ref)
   }
   return link;
 });
-const getLinkClasses = (icon = undefined) => cn('flex h-8 flex-shrink-0 flex-grow-0 cursor-pointer items-center justify-center ', 'focus:!shadow-none focus:!outline-none focus-visible:!yt-focus-dark', 'bg-transparent hover:bg-white/[.08] focus:bg-white/[.08] aria-current-page:bg-white/[.08]', '!text-white hover:text-white focus:text-white', {
+const getLinkClasses = (icon = undefined) => cn('flex h-8 flex-shrink-0 flex-grow-0 cursor-pointer items-center justify-center ', 'focus:!shadow-none focus:!outline-none focus-visible:!yt-focus-dark', 'bg-transparent hover:bg-white/[.08] focus:bg-white/[.08] aria-current-page:bg-white/[.08]', 'text-white hover:text-white focus:text-white', {
   '!rounded-full !h-9 !w-9': icon,
   'whitespace-nowrap px-3 rounded text-sm hidden lg:flex': !icon
 });