@economic/taco 2.50.0-alpha.0 → 2.50.0

package/dist/taco.cjs.development.js

@@ -6,7 +6,8 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var React = require('react');
 var React__default = _interopDefault(React);
-var cn = _interopDefault(require('clsx'));
+var cn = require('clsx');
+var cn__default = _interopDefault(cn);
 var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
@@ -3845,7 +3846,7 @@ const Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
   } = props;
   const Component = icons[name];
   /* 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem */
-  const className = cn('inline-flex h-[1.715em] w-[1.715em] flex-shrink-0', props.className, {
+  const className = cn__default('inline-flex h-[1.715em] w-[1.715em] flex-shrink-0', props.className, {
     'p-[3px]': (_props$className = props.className) === null || _props$className === void 0 ? void 0 : _props$className.includes('rounded-full')
   });
   return Component ? (/*#__PURE__*/React__default.createElement(Component, Object.assign({}, otherProps, {
@@ -3866,7 +3867,7 @@ const BadgeIcon = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
     small,
     ...otherProps
   } = props;
-  const className = cn(`rounded-full border overflow-hidden whitespace-nowrap inline-flex items-center justify-center border-transparent [&>*]:max-h-full shrink-0`, {
+  const className = cn__default(`rounded-full border overflow-hidden whitespace-nowrap inline-flex items-center justify-center border-transparent [&>*]:max-h-full shrink-0`, {
     'w-5 h-5': !small
   }, {
     'w-4 h-4 text-xs': small
@@ -3913,7 +3914,7 @@ const Alert = /*#__PURE__*/React__default.forwardRef(function Alert(props, ref)
     state,
     onClose
   } = props;
-  const className = cn(`flex w-full flex-row items-start gap-2 rounded-md border-transparent p-3 ${getSubtleColorShadeClasses(getColorByState(state))}`, props.className);
+  const className = cn__default(`flex w-full flex-row items-start gap-2 rounded-md border-transparent p-3 ${getSubtleColorShadeClasses(getColorByState(state))}`, props.className);
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
     ref: ref,
     className: className,
@@ -3989,7 +3990,7 @@ const Action = /*#__PURE__*/React.forwardRef(function AlertDialogAction(props, r
 });
 
 const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(props, ref) {
-  const className = cn('fixed inset-0 cursor-default overflow-y-auto bg-blue-900/[0.3] aria-hidden:invisible print:overflow-visible print:absolute', props.className);
+  const className = cn__default('fixed inset-0 cursor-default overflow-y-auto bg-blue-900/[0.3] aria-hidden:invisible print:overflow-visible print:absolute', props.className);
   return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
     className: className,
     "data-taco": "backdrop",
@@ -4041,14 +4042,14 @@ const Title = /*#__PURE__*/React.forwardRef(function AlertDialogTitle(props, ref
   } = useCurrentAlertDialog();
   const iconProps = iconPropsByVariant(parentProps.variant);
   return /*#__PURE__*/React.createElement(AlertDialogPrimitive.Title, Object.assign({}, props, {
-    className: cn('flex items-center', props.className),
+    className: cn__default('flex items-center', props.className),
     ref: ref
   }), iconProps ? /*#__PURE__*/React.createElement(BadgeIcon, Object.assign({}, iconProps, {
     className: "mr-2"
   })) : undefined, props.children);
 });
 const Content = /*#__PURE__*/React.forwardRef(function AlertDialogContent(props, ref) {
-  const className = cn('p-6', getDialogPositionClassnames(), getDialogStylingClassnames(), getDialogSizeClassnames('dialog'));
+  const className = cn__default('p-6', getDialogPositionClassnames(), getDialogStylingClassnames(), getDialogSizeClassnames('dialog'));
   return /*#__PURE__*/React.createElement(AlertDialogPrimitive.Portal, null, /*#__PURE__*/React.createElement(AlertDialogPrimitive.Overlay, {
     asChild: true
   }, /*#__PURE__*/React.createElement(Backdrop, null, /*#__PURE__*/React.createElement(AlertDialogPrimitive.Content, Object.assign({}, props, {
@@ -4091,7 +4092,7 @@ const AccordionContext = /*#__PURE__*/React__default.createContext({
 });
 const StyledTrigger = /*#__PURE__*/React__default.forwardRef(function AccordionStyledTrigger(props, ref) {
   const isExpanded = !!props['aria-expanded'];
-  const className = cn('w-full inline-flex justify-between items-center align-middle', 'focus:rounded-sm focus:border-blue-500 focus:yt-focus', props.className);
+  const className = cn__default('w-full inline-flex justify-between items-center align-middle', 'focus:rounded-sm focus:border-blue-500 focus:yt-focus', props.className);
   return /*#__PURE__*/React__default.createElement("button", Object.assign({}, props, {
     ref: ref,
     className: className
@@ -4152,7 +4153,7 @@ const Accordion = props => {
     };
   }
   const type = typeof valueProps.defaultValue === 'string' || typeof valueProps.value === 'string' ? 'single' : 'multiple';
-  const className = cn('divide-y divide-grey-200', props.className);
+  const className = cn__default('divide-y divide-grey-200', props.className);
   return /*#__PURE__*/React__default.createElement(AccordionContext.Provider, {
     value: context
   }, /*#__PURE__*/React__default.createElement(AccordionPrimitive.Root, Object.assign({}, otherProps, valueProps, {
@@ -4184,7 +4185,7 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
     ...otherProps
   } = props;
   const isTransparent = color === 'transparent';
-  const className = cn('rounded-full border box-border overflow-hidden whitespace-nowrap inline-flex items-center justify-center', {
+  const className = cn__default('rounded-full border box-border overflow-hidden whitespace-nowrap inline-flex items-center justify-center', {
     [`border ${getOutlineColorShadeClasses(color)}`]: outline,
     [`border-none font-normal ${getSubtleColorShadeClasses(color)}`]: subtle,
     [`border-none ${getColorShadeClasses(color)}`]: !outline && !subtle,
@@ -4204,7 +4205,7 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
     }, children) : children;
     if (status) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: cn('mr-1 h-2 w-2 shrink-0 rounded-full', getColorShadeClasses(color))
+        className: cn__default('mr-1 h-2 w-2 shrink-0 rounded-full', getColorShadeClasses(color))
       }), contentToRender);
     }
     return contentToRender;
@@ -4471,7 +4472,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
     hide = false,
     ...otherProps
   } = props;
-  const className = cn('break-words', otherProps.className);
+  const className = cn__default('break-words', otherProps.className);
   if (hide) {
     return children;
   }
@@ -4481,19 +4482,16 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
     asChild: true,
     ref: ref
   }, children), /*#__PURE__*/React.createElement(TooltipPrimitive.Portal, null, /*#__PURE__*/React.createElement(TooltipPrimitive.Content, Object.assign({}, otherProps, {
-    asChild: true,
-    className: className,
     side: placement,
-    sideOffset: 3
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded bg-blue-900 px-2 py-1 text-xs text-white print:hidden",
+    sideOffset: 3,
+    className: cn.clsx('xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded bg-blue-900 px-2 py-1 text-xs text-white print:hidden', className),
     "data-taco": "tooltip",
     style: {
       transformOrigin: 'var(--radix-tooltip-content-transform-origin)'
     }
-  }, /*#__PURE__*/React.createElement(TooltipPrimitive.Arrow, {
+  }), title, /*#__PURE__*/React.createElement(TooltipPrimitive.Arrow, {
     className: "-mt-px fill-blue-900 stroke-blue-900"
-  }), title))));
+  }))));
 });
 
 const getButtonClasses = () => {
@@ -4578,7 +4576,7 @@ const Base = /*#__PURE__*/React.forwardRef(function IconButtonBase(props, ref) {
     rounded = false,
     ...otherProps
   } = props;
-  const className = cn('w-8', getButtonClasses(), getAppearanceClasses(otherProps.appearance, true), {
+  const className = cn__default('w-8', getButtonClasses(), getAppearanceClasses(otherProps.appearance, true), {
     'rounded-full': rounded,
     rounded: !rounded
   }, props.className);
@@ -4953,7 +4951,7 @@ const Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
   const {
     texts
   } = useLocalization();
-  const className = cn('bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10', props.className);
+  const className = cn__default('bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10', props.className);
   return /*#__PURE__*/React.createElement("div", {
     className: className,
     "data-taco": "banner",
@@ -4973,7 +4971,7 @@ const Base$1 = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     fluid,
     ...otherProps
   } = props;
-  const className = cn(getButtonClasses(), getAppearanceClasses(appearance), 'rounded px-3', {
+  const className = cn__default(getButtonClasses(), getAppearanceClasses(appearance), 'rounded px-3', {
     'w-full': fluid
   }, props.className);
   return createButtonWithTooltip({
@@ -5124,7 +5122,7 @@ const Calendar$1 = props => {
     }
     handleChange(date, event);
   };
-  const className = cn('flex bg-white text-xs p-2', otherProps.className);
+  const className = cn__default('flex bg-white text-xs p-2', otherProps.className);
   return /*#__PURE__*/React.createElement("div", {
     "data-taco": "calendar"
   }, /*#__PURE__*/React.createElement(reactDayPicker.DayPicker, {
@@ -5191,7 +5189,7 @@ const Truncate = ({
   }, []);
   const clonedChildrenWithRef = /*#__PURE__*/React__default.cloneElement(React__default.Children.only(children), {
     ref,
-    className: cn(children.props.className, 'truncate', {
+    className: cn__default(children.props.className, 'truncate', {
       'hover:cursor-pointer': isTruncated
     })
   });
@@ -5208,8 +5206,8 @@ const Content$2 = /*#__PURE__*/React.forwardRef(function CardContent(externalPro
     noPadding,
     ...props
   } = externalProps;
-  const className = cn('flex-grow overflow-auto', {
-    'mx-4 mb-4': !noPadding
+  const className = cn__default('flex-grow overflow-auto', {
+    'px-4 pb-4': !noPadding
   }, props.className);
   return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
     className: className,
@@ -5225,13 +5223,13 @@ const Card = /*#__PURE__*/React.forwardRef(function Card(props, ref) {
     className,
     ...otherProps
   } = props;
-  const cardClassName = cn('bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500', className);
+  const cardClassName = cn__default('bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500', className);
   return /*#__PURE__*/React.createElement("div", Object.assign({}, otherProps, {
     className: cardClassName,
     "data-taco": "card",
     ref: ref
   }), /*#__PURE__*/React.createElement("div", {
-    className: "mx-4 mb-2 mt-4 flex justify-between"
+    className: "flex justify-between px-4 pb-2 pt-4"
   }, title && (/*#__PURE__*/React.createElement(Truncate, {
     tooltip: title
   }, /*#__PURE__*/React.createElement("h4", {
@@ -5271,7 +5269,7 @@ const Spinner = /*#__PURE__*/React__default.forwardRef(function Spinner(props, r
   if (!visible) {
     return null;
   }
-  const className = cn('inline-flex flex-col relative items-center', otherProps.className);
+  const className = cn__default('inline-flex flex-col relative items-center', otherProps.className);
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
     className: className,
     "data-taco": "spinner",
@@ -5300,8 +5298,9 @@ 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-visible:yt-focus disabled:cursor-not-allowed text-white', {
-    'self-start': !!label
+  const className = cn__default('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 focus-visible:yt-focus disabled:cursor-not-allowed text-white', {
+    'self-start': !!label,
+    'mt-[0.1rem]': !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
@@ -5326,7 +5325,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
       event.currentTarget.click();
     }
   };
-  const spinnerClassname = cn(
+  const spinnerClassname = cn__default(
   //Spinner is slightly bigger then 'line' and 'tick' icons, so making it 2px smaller from each side
   "m-0.5 !h-[calc(100%-theme('spacing.1'))] !w-[calc(100%-theme('spacing.1'))]", {
     'text-blue-500': !checked && !indeterminate
@@ -5348,7 +5347,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
     className: "!h-full !w-full"
   }))));
   if (label) {
-    const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {
+    const labelContainerClassName = cn__default('flex items-center cursor-pointer gap-2', {
       'cursor-not-allowed text-grey-300': props.disabled
     });
     return /*#__PURE__*/React.createElement("span", {
@@ -5367,7 +5366,7 @@ 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)] focus:yt-focus',
+  return cn__default('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:yt-focus',
   // hide the arrow controls on input[type=number]
   '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none', {
     'bg-white': !props.highlighted && !readOnly,
@@ -5386,7 +5385,7 @@ const getInputClasses = props => {
 };
 const getButtonStateClasses = (invalid, disabled = false) => {
   if (invalid) {
-    return cn('border border-red-500 group-peer-hover:enabled:border-red-700 transition-colors ease-in', {
+    return cn__default('border border-red-500 group-peer-hover:enabled:border-red-700 transition-colors ease-in', {
       'border-red-500/30': disabled
     });
   }
@@ -5496,7 +5495,7 @@ const InputWithoutDeprecatedFeatures = /*#__PURE__*/React.forwardRef(function In
   const prefixRect = useBoundingClientRectListener(prefixRef);
   const postfixRef = React.useRef(null);
   const postfixRect = useBoundingClientRectListener(postfixRef, [postfix]);
-  const className = cn(getInputClasses(props), {
+  const className = cn__default(getInputClasses(props), {
     'pl-8': !!prefix,
     'pr-8': !!postfix
   }, attributes.className);
@@ -5551,7 +5550,7 @@ const Affix = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function Aff
     type
   } = props;
   return /*#__PURE__*/React.createElement("div", {
-    className: cn('group absolute top-0 flex h-full items-center justify-center px-2',
+    className: cn__default('group absolute top-0 flex h-full items-center justify-center px-2',
     // icon
     '[&_[data-taco="icon"]]:!h-5 [&_[data-taco="icon"]]:!w-5', {
       'text-grey-300': disabled,
@@ -5573,7 +5572,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, disabled), button.props.className);
+    const buttonClassName = cn__default('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
@@ -5749,7 +5748,7 @@ const ScrollableList = /*#__PURE__*/React.forwardRef(function ScrollableList(pro
       'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,
       'data-focused': currentIndex === index,
       children: option.text,
-      className: cn('flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue-500 focus:border-blue-500', {
+      className: cn__default('flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue-500 focus:border-blue-500', {
         'sticky top-0 font-bold': depth === 0 && !!option.hasChildren
       }),
       disabled: option.disabled,
@@ -5766,7 +5765,7 @@ const ScrollableList = /*#__PURE__*/React.forwardRef(function ScrollableList(pro
   });
   const list = {
     ...otherProps,
-    className: cn('inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto', getInputClasses(props), {
+    className: cn__default('inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto', getInputClasses(props), {
       'yt-list--multiselect': multiselect,
       'pointer-events-none': disabled,
       'cursor-not-allowed': disabled || readOnly
@@ -6247,7 +6246,7 @@ const Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
     texts
   } = useLocalization();
   const selectDimensions = useBoundingClientRectListener(internalRef);
-  const className = cn('inline-flex relative', {
+  const className = cn__default('inline-flex relative', {
     'yt-combobox--inline': props.inline
   }, externalClassName);
   return /*#__PURE__*/React.createElement("span", {
@@ -6298,7 +6297,7 @@ const Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
     },
     sideOffset: 4
   }, /*#__PURE__*/React.createElement(ScrollableList, Object.assign({}, list, {
-    className: cn('max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500'),
+    className: cn__default('max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500'),
     style: {
       minWidth: selectDimensions === null || selectDimensions === void 0 ? void 0 : selectDimensions.width
     },
@@ -6529,7 +6528,7 @@ const Content$3 = /*#__PURE__*/React.forwardRef(function PopoverContent(props, r
     placement: side,
     ...popoverContentProps
   } = props;
-  const className = cn(getPopoverStyleClassnames(), props.className);
+  const className = cn__default(getPopoverStyleClassnames(), props.className);
   let output;
   if (typeof props.children === 'function') {
     output = /*#__PURE__*/React.createElement(PopoverPrimitive.Close, {
@@ -6598,7 +6597,7 @@ const Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref)
   const {
     texts
   } = useLocalization();
-  const className = cn('inline-flex w-full text-black font-normal', externalClassName);
+  const className = cn__default('inline-flex w-full text-black font-normal', externalClassName);
   const popoverContentRef = React.useRef(null);
   const handleOpenAutofocus = React.useCallback(e => {
     var _popoverContentRef$cu, _popoverContentRef$cu2;
@@ -6760,14 +6759,14 @@ const useDraggable = ref => {
 };
 
 const Title$1 = /*#__PURE__*/React.forwardRef(function DialogTitle(props, ref) {
-  const className = cn('text-center', props.className);
+  const className = cn__default('text-center', props.className);
   return /*#__PURE__*/React.createElement(DialogPrimitive.Title, Object.assign({}, props, {
     className: className,
     ref: ref
   }));
 });
 const Footer$1 = /*#__PURE__*/React.forwardRef(function DialogFooter(props, ref) {
-  const className = cn('mt-8 flex justify-end', props.className);
+  const className = cn__default('mt-8 flex justify-end', props.className);
   return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
     className: className,
     ref: ref
@@ -6807,8 +6806,8 @@ const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
   const {
     texts
   } = useLocalization();
-  const className = cn('relative bg-white animate-[fade-in_150ms] rounded print:!static', getDialogPositionClassnames(), getDialogSizeClassnames(dialog.size), 'print:w-full print:h-max print:m-0 print:overflow-visible');
-  const containerClassName = cn('bg-white p-6 rounded relative z-10 shadow print:p-0',
+  const className = cn__default('relative bg-white animate-[fade-in_150ms] rounded print:!static', getDialogPositionClassnames(), getDialogSizeClassnames(dialog.size), 'print:w-full print:h-max print:m-0 print:overflow-visible');
+  const containerClassName = cn__default('bg-white p-6 rounded relative z-10 shadow print:p-0',
   // The `!fixed` property is crucial to ensure that when a draggable dialog is moved, the printed document still displays its content across the full page.
   'print:overflow-visible print:h-max print:!transform-none print:!inset-0 print:!m-0', {
     'rounded-b-none': !!dialog.elements.extra
@@ -6867,7 +6866,7 @@ const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
 const DialogDrawer = /*#__PURE__*/React.forwardRef(function DialogDrawer(props, ref) {
   var _dialog$drawer, _dialog$drawer2;
   const dialog = useCurrentDialog();
-  const className = cn('absolute top-0  -ml-[4px] hidden h-full w-full overflow-y-auto rounded-r bg-white p-6 text-left', props.className);
+  const className = cn__default('absolute top-0  -ml-[4px] hidden h-full w-full overflow-y-auto rounded-r bg-white p-6 text-left', props.className);
   return /*#__PURE__*/React.createElement(framerMotion.motion.div, Object.assign({}, props, {
     className: className,
     "data-taco": "dialog-drawer",
@@ -6899,7 +6898,7 @@ const DialogDrawer = /*#__PURE__*/React.forwardRef(function DialogDrawer(props,
 DialogDrawer.displayName = 'DialogDrawer';
 
 const Extra = /*#__PURE__*/React.forwardRef(function DialogExtra(props, ref) {
-  const className = cn('wcag-grey-100 absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left', props.className);
+  const className = cn__default('wcag-grey-100 absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left', props.className);
   return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
     className: className,
     "data-taco": "dialog-extra",
@@ -6981,7 +6980,7 @@ const Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
     orientation = 'horizontal',
     ...otherProps
   } = props;
-  const className = cn('flex gap-2 [&:has([data-taco="tag"])]:!gap-1', {
+  const className = cn__default('flex gap-2 [&:has([data-taco="tag"])]:!gap-1', {
     'flex-col ': orientation === 'vertical'
   }, props.className);
   return /*#__PURE__*/React.createElement(Tag, Object.assign({}, otherProps, {
@@ -7022,7 +7021,7 @@ const getDrawerSizeClassnames = size => {
   }
 };
 const getDrawerContentClassNames = (size, variant, open) => {
-  return cn('bg-white h-full bottom-0 top-0 right-0 transition-none', {
+  return cn__default('bg-white h-full bottom-0 top-0 right-0 transition-none', {
     block: open,
     hidden: !open,
     fixed: variant === 'overlay',
@@ -7030,23 +7029,23 @@ const getDrawerContentClassNames = (size, variant, open) => {
   }, getDrawerSizeClassnames(size));
 };
 const getDrawerContainerClassNames = variant => {
-  return cn('bg-white mx-auto absolute h-full w-full flex flex-col ', {
+  return cn__default('bg-white mx-auto absolute h-full w-full flex flex-col ', {
     'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]': variant === 'overlay',
     'border-l border-grey-300 h-full': variant === 'embedded'
   });
 };
 const getDrawerDragHandlerClassNames = () => {
-  return cn('border-[2px] absolute border-transparent top-0 w-2 h-full cursor-ew-resize left-0 hover:border-l-blue-500');
+  return cn__default('border-[2px] absolute border-transparent top-0 w-2 h-full cursor-ew-resize left-0 hover:border-l-blue-500');
 };
 const getBackdropClassNames = open => {
-  return cn({
+  return cn__default({
     block: open,
     hidden: !open
   });
 };
 
 const Bar = props => {
-  const className = cn(`flex select-none touch-none transition-colors hover:bg-grey`, {
+  const className = cn__default(`flex select-none touch-none transition-colors hover:bg-grey`, {
     'w-[7px] hover:w-[14px] mr-[2px] hover:px-[2px] hover:mr-0': props.orientation === 'vertical',
     'flex-col h-[7px] hover:h-[14px] mb-[2px] hover:py-[2px] hover:mb-0': props.orientation === 'horizontal'
   });
@@ -7066,7 +7065,7 @@ const ScrollArea = props => {
     ...otherProps
   } = props;
   return /*#__PURE__*/React__default.createElement(ScrollAreaPrimitive.Root, Object.assign({}, otherProps, {
-    className: cn('overflow-hidden', props.className),
+    className: cn__default('overflow-hidden', props.className),
     "data-taco": "scrollarea"
   }), /*#__PURE__*/React__default.createElement(ScrollAreaPrimitive.Viewport, {
     className: "h-full w-full"
@@ -7117,7 +7116,7 @@ const Title$2 = /*#__PURE__*/React__default.forwardRef(function DrawerTitle(prop
    * where we might want to hide the grey separator. For this reason separator was rendered with using of classNames,
    * so it can be easily overriden in exceptional scenarios.
    *  */
-  const cName = cn('grow-0 py-4 px-4 justify-self-start mb-0 border-b-[1px] border-grey-300 flex items-start', className);
+  const cName = cn__default('grow-0 py-4 px-4 justify-self-start mb-0 border-b-[1px] border-grey-300 flex items-start', className);
   React__default.useEffect(() => {
     var _ref$current, _drawer$querySelector, _closeButton$offsetWi, _drawer$querySelector2, _actionsWrapper$offse;
     const drawer = ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.closest('[data-taco="drawer"]');
@@ -7157,7 +7156,7 @@ const Footer$2 = /*#__PURE__*/React__default.forwardRef(function DrawerFooter(pr
   /**
    * The same scenario as Title, grey separator rendered using classNames to have posibility to override it.
    */
-  const cName = cn('mt-auto flex justify-end grow-0 p-4 border-t-[1px] border-grey-300', props.className);
+  const cName = cn__default('mt-auto flex justify-end grow-0 p-4 border-t-[1px] border-grey-300', props.className);
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
     className: cName,
     ref: ref
@@ -7168,7 +7167,7 @@ const Actions = /*#__PURE__*/React__default.forwardRef(function Actions(props, r
     className,
     ...otherProps
   } = props;
-  const cName = cn('absolute top-0 right-10 mr-[8px] mt-4', className);
+  const cName = cn__default('absolute top-0 right-10 mr-[8px] mt-4', className);
   // Id is added to identify the actions wrapper inside a useEffect in Dialog.Title
   return /*#__PURE__*/React__default.createElement(Group, Object.assign({}, otherProps, {
     className: cName,
@@ -7193,7 +7192,7 @@ const InnerContent = /*#__PURE__*/React__default.forwardRef(function InnerConten
     children,
     ...otherProps
   } = props;
-  const cName = cn('grow flex flex-col', {
+  const cName = cn__default('grow flex flex-col', {
     'overflow-y-hidden': isScrollable,
     'p-4': !isScrollable
   }, className);
@@ -7273,7 +7272,7 @@ const DrawerContent = /*#__PURE__*/React__default.forwardRef(function Content(pr
       menu.close();
     };
   }
-  const containerClassName = React__default.useMemo(() => cn(getDrawerContainerClassNames(variant), className), [className]);
+  const containerClassName = React__default.useMemo(() => cn__default(getDrawerContainerClassNames(variant), className), [className]);
   const {
     contentClassName,
     dragHandlerClassName
@@ -7394,7 +7393,7 @@ const Trigger$4 = /*#__PURE__*/React.forwardRef(function DrawerTrigger(props, re
 const DEFAULT_OUTLET_NAME = 'default';
 const Outlet = /*#__PURE__*/React.forwardRef(function Outlet(props, ref) {
   var _props$name;
-  const className = cn('h-full ml-auto overflow-hidden flex-shrink-0', props.className);
+  const className = cn__default('h-full ml-auto overflow-hidden flex-shrink-0', props.className);
   return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
     className: className,
     "data-taco": "drawer-outlet",
@@ -7500,10 +7499,10 @@ const Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
     message,
     ...otherProps
   } = props;
-  const className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
+  const className = cn__default('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
     'text-grey-300': disabled
   }, props.className);
-  const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
+  const messageClassName = cn__default('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
     'text-grey-700': !invalid && !warning,
     'text-red-500': invalid,
     'text-yellow-700': warning && !invalid,
@@ -7528,7 +7527,7 @@ const Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
     horizontal = false,
     ...otherProps
   } = props;
-  const className = cn('yt-form', {
+  const className = cn__default('yt-form', {
     'yt-form--horizontal flex flex-wrap': horizontal
   }, props.className);
   return /*#__PURE__*/React.createElement("form", Object.assign({}, otherProps, {
@@ -7561,7 +7560,7 @@ const Anchor$1 = /*#__PURE__*/React.forwardRef(function HangerAnchor(props, exte
   }), children);
 });
 const Title$3 = /*#__PURE__*/React.forwardRef(function DialogTitle(props, ref) {
-  const className = cn('mb-1 text-base font-bold flex w-full', props.className);
+  const className = cn__default('mb-1 text-base font-bold flex w-full', props.className);
   return /*#__PURE__*/React.createElement("span", Object.assign({}, props, {
     className: className,
     ref: ref
@@ -7576,7 +7575,7 @@ const Content$6 = /*#__PURE__*/React.forwardRef(function HangerContent(props, re
   const {
     texts
   } = useLocalization();
-  const className = cn('wcag-blue-500 border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm', props.className);
+  const className = cn__default('wcag-blue-500 border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm', props.className);
   const handleInteractOutside = event => {
     event.preventDefault();
   };
@@ -7663,7 +7662,7 @@ const Content$7 = /*#__PURE__*/React.forwardRef(function HoverCardContent(props,
   const {
     placement: side
   } = props;
-  const className = cn(getPopoverStyleClassnames(), 'min-w-[theme(spacing.40)] max-w-[theme(spacing.96)]', props.className);
+  const className = cn__default(getPopoverStyleClassnames(), 'min-w-[theme(spacing.40)] max-w-[theme(spacing.96)]', props.className);
   return /*#__PURE__*/React.createElement(HoverCardPrimitive.Portal, null, /*#__PURE__*/React.createElement(HoverCardPrimitive.Content, {
     className: className,
     "data-taco": "hover-card",
@@ -7701,7 +7700,7 @@ const Item$1 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref)
     title,
     ...attributes
   } = props;
-  const iconClassName = cn('flex shrink-0 h-10 w-10 items-center justify-center rounded-md border border-black/10', getSubtleColorShadeClasses(color !== null && color !== void 0 ? color : 'transparent'));
+  const iconClassName = cn__default('flex shrink-0 h-10 w-10 items-center justify-center rounded-md border border-black/10', getSubtleColorShadeClasses(color !== null && color !== void 0 ? color : 'transparent'));
   return /*#__PURE__*/React__default.createElement(Tag, Object.assign({}, attributes, {
     "aria-disabled": disabled ? true : undefined,
     "data-taco": "list-item",
@@ -7773,7 +7772,7 @@ 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 focus-visible:yt-focus', {
+  const className = cn__default('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-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
@@ -7794,7 +7793,7 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
     className: "pointer-events-none mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform will-change-transform group-disabled:opacity-50 group-aria-checked:translate-x-[1.1rem]"
   }));
   if (label) {
-    const labelContainerClassName = cn('flex self-start cursor-pointer', {
+    const labelContainerClassName = cn__default('flex self-start cursor-pointer', {
       'cursor-not-allowed text-grey-300': props.disabled
     });
     return /*#__PURE__*/React.createElement("span", {
@@ -7843,7 +7842,7 @@ const ToggleItem = /*#__PURE__*/React__default.forwardRef(function Toggle(props,
       return;
     }
   }
-  const className = cn('group/toggle', props.className);
+  const className = cn__default('group/toggle', props.className);
   return /*#__PURE__*/React__default.createElement(Item$1, Object.assign({}, attributes, {
     className: className,
     onClick: handleClick,
@@ -8289,7 +8288,7 @@ const Listbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
     list,
     input
   } = useListbox(otherProps, ref);
-  const className = cn('bg-white inline-flex relative w-full', externalClassName);
+  const className = cn__default('bg-white inline-flex relative w-full', externalClassName);
   return /*#__PURE__*/React.createElement("span", {
     "data-taco": "listbox",
     className: className
@@ -8312,7 +8311,7 @@ const MultiListbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref)
     list,
     input
   } = useMultiListbox(otherProps, ref);
-  const className = cn('bg-white inline-flex relative w-full', externalClassName);
+  const className = cn__default('bg-white inline-flex relative w-full', externalClassName);
   return /*#__PURE__*/React.createElement("span", {
     "data-taco": "listbox",
     className: className
@@ -8336,7 +8335,7 @@ const Content$8 = /*#__PURE__*/React.forwardRef(function MenuContent(props, ref)
     placement: side,
     ...otherProps
   } = props;
-  const className = cn('border border-transparent rounded block outline-none p-1 yt-shadow wcag-white', props.className);
+  const className = cn__default('border border-transparent rounded block outline-none p-1 yt-shadow wcag-white', props.className);
   // attach refs to each child
   const childrenRefs = React.useRef([]);
   const childrenWithRefs = React.Children.toArray(props.children).filter(child => !!child) // remove falsey children
@@ -8426,7 +8425,7 @@ const Shortcut = ({
   keys,
   ...props
 }) => {
-  const className = cn('inline-flex gap-0.5', props.className);
+  const className = cn__default('inline-flex gap-0.5', props.className);
   const texts = getShortcutText(keys);
   return /*#__PURE__*/React__default.createElement("span", Object.assign({}, props, {
     className: className
@@ -8455,7 +8454,7 @@ const useItemStyling = ({
       menu === null || menu === void 0 ? void 0 : menu.registerIndentation();
     }
   }, [indented]);
-  return cn('flex items-center justify-start h-8 pr-1.5 relative rounded w-full focus:outline-none group', {
+  return cn__default('flex items-center justify-start h-8 pr-1.5 relative rounded w-full focus:outline-none group', {
     'pl-7': menu === null || menu === void 0 ? void 0 : menu.indented,
     'pl-1.5': !(menu !== null && menu !== void 0 && menu.indented),
     'cursor-pointer text-black hover:wcag-grey-200 data-[highlighted]:wcag-grey-200': !disabled,
@@ -8614,7 +8613,7 @@ const Checkbox$2 = /*#__PURE__*/React.forwardRef(function MenuCheckboxItem(props
 });
 
 const getRadioClassnames = (disabled = false, invalid = false) => {
-  return cn('flex flex-shrink-0 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', invalid ? {
+  return cn__default('flex flex-shrink-0 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', invalid ? {
     'border-red-500 hover:border-red-700 aria-checked:bg-red-500 aria-checked:border-red-500 hover:aria-checked:border-red-700': !disabled,
     'border-red-500/50 aria-checked:bg-red-500/50 aria-checked:border-red-500/50': disabled
   } : {
@@ -8637,8 +8636,8 @@ const RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(pro
     ...otherProps
   } = props;
   const isDisabled = context.disabled || props.disabled;
-  const className = cn('self-start', getRadioClassnames(isDisabled, context.invalid));
-  const labelClassName = cn('flex items-center gap-2', {
+  const className = cn__default('self-start', getRadioClassnames(isDisabled, context.invalid));
+  const labelClassName = cn__default('flex items-center gap-2', {
     'cursor-pointer': !isDisabled,
     'cursor-not-allowed text-grey-300': isDisabled
   }, props.className);
@@ -8705,7 +8704,7 @@ const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref)
     context,
     props: otherProps
   } = useRadioGroup(props);
-  const className = cn('flex items-start gap-y-2', {
+  const className = cn__default('flex items-start gap-y-2', {
     'flex-wrap gap-x-4 ': otherProps.orientation === 'horizontal',
     'flex-col': otherProps.orientation === 'vertical'
   }, otherProps.className);
@@ -8750,7 +8749,7 @@ const RadioGroup$1 = /*#__PURE__*/React.forwardRef(function MenuRadioItem(props,
     context,
     props: otherProps
   } = useRadioGroup(props);
-  const className = cn('flex flex-col', props.className);
+  const className = cn__default('flex flex-col', props.className);
   return /*#__PURE__*/React.createElement(MenuRadioGroupContext.Provider, {
     value: context
   }, /*#__PURE__*/React.createElement(DropdownMenuPrimitive.RadioGroup, Object.assign({}, otherProps, {
@@ -8770,7 +8769,7 @@ const Separator = /*#__PURE__*/React.forwardRef(function Separator(props, ref) {
 
 const Header = /*#__PURE__*/React.forwardRef(function MenuHeader(props, ref) {
   const menu = useCurrentMenu();
-  const className = cn('flex items-center justify-start h-7 pr-1.5 text-xs text-grey-700', {
+  const className = cn__default('flex items-center justify-start h-7 pr-1.5 text-xs text-grey-700', {
     'pl-7': menu === null || menu === void 0 ? void 0 : menu.indented,
     'pl-1.5': !(menu !== null && menu !== void 0 && menu.indented)
   }, props.className);
@@ -8786,7 +8785,7 @@ const SubMenu = /*#__PURE__*/React.forwardRef(function MenuSubMenu(props, ref) {
     children,
     ...otherProps
   } = props;
-  const className = cn('border border-transparent rounded block outline-none p-1 yt-shadow wcag-white', props.className);
+  const className = cn__default('border border-transparent rounded block outline-none p-1 yt-shadow wcag-white', props.className);
   return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Portal, null, /*#__PURE__*/React.createElement(DropdownMenuPrimitive.SubContent, Object.assign({}, otherProps, {
     className: className,
     "data-taco": "menu-submenu",
@@ -8846,7 +8845,7 @@ const ModeSwitch = /*#__PURE__*/React.forwardRef(function ModeSwitch(props, ref)
     onChange,
     ...otherProps
   } = props;
-  const className = cn('group w-14 h-8 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus p-1', {
+  const className = cn__default('group w-14 h-8 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus p-1', {
     'bg-grey-500 hover:bg-grey-700 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700': !props.disabled,
     'bg-grey-500 aria-checked:bg-blue-500 cursor-not-allowed opacity-50': props.disabled
   }, props.className);
@@ -8885,7 +8884,7 @@ const TreeviewGroup = /*#__PURE__*/React__default.forwardRef(function TreeviewGr
       setExpanded(fixed || initialExpanded);
     }
   }, [fixed, initialExpanded]);
-  const listClassName = cn('flex-col mb-0', {
+  const listClassName = cn__default('flex-col mb-0', {
     flex: expanded,
     hidden: !expanded
   });
@@ -8974,7 +8973,7 @@ const Item$3 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref)
   const proxyRef = useMergedRef(ref);
   const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);
   const isTreeitem = role === 'treeitem';
-  const className = cn('yt-navigation__item cursor-pointer', {
+  const className = cn__default('yt-navigation__item cursor-pointer', {
     'w-full mb-px py-1 px-3 flex items-center hover:bg-grey-300': isTreeitem,
     'bg-white w-full h-10 px-3 flex-shrink-0 flex items-center justify-between cursor-pointer': !isTreeitem,
     'yt-navigation__item--active': active && !isDraggedOver,
@@ -9004,16 +9003,16 @@ const Item$3 = /*#__PURE__*/React__default.forwardRef(function Item(props, ref)
 });
 const Panel = /*#__PURE__*/React__default.forwardRef(function Panel(props, ref) {
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
-    className: cn('w-full bg-white p-3', props.className),
+    className: cn__default('w-full bg-white p-3', props.className),
     ref: ref
   }));
 });
 const MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props, ref) {
-  const className = cn('flex-shrink-0 space-y-1 outline-none', {
+  const className = cn__default('flex-shrink-0 space-y-1 outline-none', {
     'bg-white pb-2': props.fixed
   }, typeof props.className === 'function' ? props.className(false) : props.className);
   const title = expanded => {
-    const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {
+    const className = cn__default('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {
       'mb-1': expanded,
       'cursor-pointer hover:text-blue-500': !props.fixed
     });
@@ -9048,7 +9047,7 @@ const Menu$2 = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref)
     return scrollableAreas;
   }, [props.children]);
   return /*#__PURE__*/React__default.createElement(Treeview, Object.assign({}, props, {
-    className: cn('divide-grey-100 flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className),
+    className: cn__default('divide-grey-100 flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className),
     ref: ref
   }), scrollableAreas.map((area, i) => Array.isArray(area) ? (/*#__PURE__*/React__default.createElement("div", {
     className: "divide-grey-100 flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto",
@@ -9061,7 +9060,7 @@ const Navigation = /*#__PURE__*/React__default.forwardRef(function Navigation(pr
     children,
     ...otherProps
   } = props;
-  const className = cn('h-full flex flex-col bg-grey-100 divide-y-2 divide-grey-100', props.className);
+  const className = cn__default('h-full flex flex-col bg-grey-100 divide-y-2 divide-grey-100', props.className);
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
     className: className,
     "data-taco": "navigation",
@@ -9171,18 +9170,18 @@ const OverflowGroup = /*#__PURE__*/React__default.forwardRef(function OverflowGr
   const MoreButton = (_moreButton = moreButton === null || moreButton === void 0 ? void 0 : moreButton(moreButtonText)) !== null && _moreButton !== void 0 ? _moreButton : /*#__PURE__*/React__default.createElement(IconButton, {
     icon: "more"
   });
-  const className = cn('flex overflow-hidden', props.className);
+  const className = cn__default('flex overflow-hidden', props.className);
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
     className: className,
     "data-taco": "overflow-group",
     ref: internalRef
   }), children.map((child, index) => /*#__PURE__*/React__default.cloneElement(child, {
-    className: cn(child.props.className, {
+    className: cn__default(child.props.className, {
       visible: intersectedChildIndex === undefined || index < intersectedChildIndex,
       'invisible order-[100] pointer-events-none': intersectedChildIndex !== undefined && index >= intersectedChildIndex
     })
   })), hiddenChildren.length ? /*#__PURE__*/React__default.cloneElement(MoreButton, {
-    className: cn('sticky right-0 order-[99]', MoreButton.props.className),
+    className: cn__default('sticky right-0 order-[99]', MoreButton.props.className),
     'data-observer-ignore': true,
     menu: menuProps => (/*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, hiddenChildren.map((child, index) => wrapChild ? (/*#__PURE__*/React__default.createElement(Menu$1.Item, {
       key: index
@@ -9338,7 +9337,7 @@ const useSelect = ({
       const item = findByValue(flattenedData, value);
       if (item) {
         text = item.icon ? (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(item.icon, {
-          className: cn(item.icon.props.className, 'mr-1 -mt-px')
+          className: cn__default(item.icon.props.className, 'mr-1 -mt-px')
         }), item.text)) : item.text;
       }
     }
@@ -9448,10 +9447,10 @@ const BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref)
   } = useSelect(otherProps, ref);
   const internalRef = React.useRef(null);
   const selectDimensions = useBoundingClientRectListener(internalRef);
-  const className = cn('inline-flex relative w-full', {
+  const className = cn__default('inline-flex relative w-full', {
     'yt-select--readonly': props.readOnly
   }, externalClassName);
-  const inputClassname = cn(getInputClasses(props), 'h-8 text-left !pr-0', {
+  const inputClassname = cn__default(getInputClasses(props), 'h-8 text-left !pr-0', {
     'border-blue-500': popover.open,
     'select-text': otherProps.readOnly
   });
@@ -9599,7 +9598,7 @@ const Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref)
   const pageCount = Math.ceil(length / pageSize);
   const canPreviousPage = pageIndex > 0;
   const canNextPage = pageIndex < pageCount - 1;
-  const className = cn('inline-flex relative justify-between items-center', props.className);
+  const className = cn__default('inline-flex relative justify-between items-center', props.className);
   return /*#__PURE__*/React.createElement("div", Object.assign({}, otherProps, {
     className: className,
     "data-taco": "pagination",
@@ -9666,8 +9665,8 @@ const Progress = ({
       animationDuration: `${duration}ms`
     };
   }
-  const className = cn('bg-grey-100 rounded block h-1 overflow-hidden w-full', props.className);
-  const progressClassName = cn('yt-progress__bar block h-1', {
+  const className = cn__default('bg-grey-100 rounded block h-1 overflow-hidden w-full', props.className);
+  const progressClassName = cn__default('yt-progress__bar block h-1', {
     "w-full before:h-1 before:bg-grey-300 before:block before:animate-[progress-indeterminate_2s_cubic-bezier(0.4,0,0.2,1)_infinite] before:content-[' ']": !duration,
     [`w-0 bg-grey-300 animate-[progress_linear]`]: duration
   });
@@ -9732,7 +9731,7 @@ const Toast = ({
     autoClose,
     type = 'default'
   } = options;
-  const className = cn('bg-white relative flex items-center py-1 px-2 mt-3 w-full rounded yt-shadow print:hidden', {
+  const className = cn__default('bg-white relative flex items-center py-1 px-2 mt-3 w-full rounded yt-shadow print:hidden', {
     'border border-grey-200': type === 'default' || type === 'loading' || !type,
     'border border-grey-500': type === 'success',
     'border border-blue-500': type === 'information',
@@ -10442,7 +10441,8 @@ function processChildren(child, columns, defaultSizing, defaultSorting, defaultV
       // To avoid errors caused by undefined row data values, we pass accessorFn as a preventive measure
       // accessorKey can be dot notated strings, so we use lodash.get to access deeply nested children
       accessorFn: row => get(row, accessorKey),
-      header: header,
+      // The header can be either a string or a JSX.Element, but react-table expects it to be a string or a renderer function, so `() => header` ensures compatibility
+      header: () => header,
       // features
       enableColumnFilter,
       enableGlobalFilter,
@@ -10945,8 +10945,17 @@ function useTablePrintingSettings(tableId) {
 
 const DEFAULT_ROW_ACTIONS_LENGTH = 4;
 function useTableRowActions(isEnabled = false, rowActions, rowActionsLength = DEFAULT_ROW_ACTIONS_LENGTH) {
+  const [handlers, setHandlers] = React__default.useState({});
+  const registerHandler = (key, handler) => {
+    return setHandlers(h => ({
+      ...h,
+      [key]: handler
+    }));
+  };
   return {
+    handlers,
     isEnabled,
+    registerHandler,
     rowActions: isEnabled ? rowActions : undefined,
     rowActionsLength: rowActions ? Math.min(rowActions.length, rowActionsLength) : 0
   };
@@ -12058,7 +12067,7 @@ function useTableStyleGrid(tableId, table, fontSize) {
     };
     // printing grid
     // we have to be specific so that nested tables don't inherit the same css
-    const hiddenColumns = printHiddenColumns.map(id => `table[data-taco^='table']#${tableId} > thead > tr > th[data-cell-id='${id}']\n,table[data-taco^='table']#${tableId} > tbody > tr > td[data-cell-id='${id}']\n`).join(',');
+    const hiddenColumns = printHiddenColumns.map(id => `table[data-taco^='table']#${tableId} > thead > tr > th[data-cell-id='${id}']\n,table[data-taco^='table']#${tableId} tr > td[data-cell-id='${id}']\n`).join(',');
     const stylesheet = `@media print { table[data-taco^='table']#${tableId} { grid-template-columns: repeat(${printGridTemplateColumns}, auto) !important; }
         table[data-taco^='table']#${tableId} [data-cell-id^='__']${hiddenColumns ? `, ${hiddenColumns}` : ''} { display: none; } table[data-taco^='table']#${tableId} tr { page-break-inside: avoid; break-inside: avoid;}}`;
     return {
@@ -12624,11 +12633,12 @@ function Actions$1(props) {
   const {
     texts
   } = useLocalization();
+  const tableMeta = table.options.meta;
   // we don't want to document passing table, so it isn't on the type
-  const visibleActions = actions.map(action => action(data, rowId, table)).filter(action => !!action);
+  const visibleActions = actions.map(action => action(data, rowId, tableMeta.rowActions.handlers['cleanup'], table)).filter(action => !!action);
   const actionsOnRow = visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);
   const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);
-  const className = cn('flex justify-end text-right bg-[inherit] shadow-[-6px_0px_6px_var(--table-row-actions-shadow)] print:hidden');
+  const className = cn__default('flex justify-end text-right bg-[inherit] shadow-[-6px_0px_6px_var(--table-row-actions-shadow)] print:hidden');
   return /*#__PURE__*/React__default.createElement("span", {
     className: className
   }, actionsOnRow.map((button, index) => {
@@ -12692,7 +12702,7 @@ const renderer = {
   renderer: Cell,
   meta: {
     align: 'right',
-    className: /*#__PURE__*/cn('print:opacity-0 !px-0 !pr-1 overflow-hidden [table_&]:group-[[data-row-active="true"]]/row:sticky right-0', 'group-[[data-row-active="true"][data-selected="false"]]/row:text-grey-200', 'group-[[data-row-selected="true"]]/row:text-blue-100', 'group-[[data-row-selected="false"]:hover]/row:text-grey-100'),
+    className: /*#__PURE__*/cn__default('print:opacity-0 !px-0 !pr-1 overflow-hidden [table_&]:group-[[data-row-active="true"]]/row:sticky right-0', 'group-[[data-row-active="true"][data-selected="false"]]/row:text-grey-200', 'group-[[data-row-selected="true"]]/row:text-blue-100', 'group-[[data-row-selected="false"]:hover]/row:text-grey-100'),
     // TODO: remove when table3 is migrated, this satisfies the legacy table3 type
     enableSearch: false,
     header: ''
@@ -12715,7 +12725,7 @@ function Cell$1() {
   return /*#__PURE__*/React__default.createElement(Icon, {
     "aria-label": texts.table.columns.drag.tooltip,
     name: "drag",
-    className: cn("text-grey-darkest invisible -mt-1 ml-[2px] cursor-grab active:cursor-grabbing group-hover/row:visible group-[[aria-grabbed='true']]/row:text-white", '[[data-table-editing-mode]_&]:!invisible')
+    className: cn__default("text-grey-darkest invisible -mt-1 ml-[2px] cursor-grab active:cursor-grabbing group-hover/row:visible group-[[aria-grabbed='true']]/row:text-white", '[[data-table-editing-mode]_&]:!invisible')
   });
 }
 const renderer$1 = {
@@ -13255,7 +13265,7 @@ const DisplayRow = /*#__PURE__*/React__default.memo(function DisplayRow(props) {
   const expansionRef = React__default.useRef(null);
   const isExpanded = !!attributes['data-row-expanded'];
   useSetVirtualisedRowHeight(measureRow, ref.current, expansionRef.current, isExpanded);
-  const className = cn('group/row', otherAttributes.className, {
+  const className = cn__default('group/row', otherAttributes.className, {
     'hover:cursor-grab': tableMeta.rowDrag.isEnabled && typeof attributes.onClick !== 'function',
     'hover:cursor-pointer': typeof attributes.onClick === 'function'
   });
@@ -13410,14 +13420,14 @@ function Resizer(props) {
     }
   };
   const handle = /*#__PURE__*/React__default.createElement("div", {
-    className: cn('invisible absolute right-0 top-0 z-10 -mr-2 flex h-full w-4 cursor-col-resize touch-none select-none justify-center rounded py-0.5', 'group-hover/header:visible', '[th:last-child>&]:!mr-0 [th:last-child>&]:w-2', {
+    className: cn__default('invisible absolute right-0 top-0 z-10 -mr-2 flex h-full w-4 cursor-col-resize touch-none select-none justify-center rounded py-0.5', 'group-hover/header:visible', '[th:last-child>&]:!mr-0 [th:last-child>&]:w-2', {
       '!visible': isResizing
     }),
     onClick: handleClick,
     onMouseDown: handleResize,
     onTouchStart: handleResize
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: cn('h-full w-1 rounded', {
+    className: cn__default('h-full w-1 rounded', {
       '!bg-blue-500': isResizing,
       'bg-grey-500 hover:bg-grey-700': !isResizing
     })
@@ -13635,7 +13645,7 @@ function HeaderMenu(props) {
     }));
   }, [canFilter, canGoto, canHide, canPin, canSort, customMenu, handleGoto, handleSortToggle, index, isFiltered, sortDirection]);
   // can't use display: none because the button needs to be focusable
-  const className = cn(
+  const className = cn__default(
   // positioning
   'justify-end overflow-hidden',
   // sizing
@@ -13727,7 +13737,7 @@ function Header$5(props) {
     canPin,
     canResize,
     canSort,
-    className: cn('group/header', columnMeta.headerClassName),
+    className: cn__default('group/header', columnMeta.headerClassName),
     children: reactTable.flexRender(header.column.columnDef.header, header.getContext()),
     colSpan: header.colSpan,
     customMenu: columnMeta.menu,
@@ -13748,7 +13758,7 @@ function Header$5(props) {
   };
   if (header.isPlaceholder) {
     const nextHeader = header.headerGroup.headers[header.index + 1];
-    memoedProps.className = cn('!bg-white before:!content-none', memoedProps.className, {
+    memoedProps.className = cn__default('!bg-white before:!content-none', memoedProps.className, {
       'after:!content-none': nextHeader === null || nextHeader === void 0 ? void 0 : nextHeader.isPlaceholder
     });
   }
@@ -13859,12 +13869,12 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     "data-cell-pinned": isPinned ? isPinned : undefined,
     style: style,
     ref: setRef
-  }), isPlaceholder ? null : isInternalColumn(id) ? children : (/*#__PURE__*/React__default.createElement(Tooltip, {
+  }), !isPlaceholder && (isInternalColumn(id) || typeof children !== 'string' ? children : (/*#__PURE__*/React__default.createElement(Tooltip, {
     title: String(tooltip !== null && tooltip !== void 0 ? tooltip : children),
     placement: "top"
   }, /*#__PURE__*/React__default.createElement("span", {
     className: "truncate"
-  }, children))), sortDirection ? /*#__PURE__*/React__default.createElement(SortIndicator, {
+  }, children)))), sortDirection ? /*#__PURE__*/React__default.createElement(SortIndicator, {
     direction: sortDirection
   }) : null, hasMenu ? (/*#__PURE__*/React__default.createElement(HeaderMenu, {
     canFilter: canFilter,
@@ -13872,7 +13882,7 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     canHide: canHide,
     canPin: canPin,
     canSort: canSort,
-    className: cn({
+    className: cn__default({
       'ml-auto': align !== 'right',
       'ml-0': align === 'right'
     }),
@@ -14263,7 +14273,7 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
       }
     });
   }
-  const className = cn('!pl-7 group-focus-within:!w-72 group-focus-within:yt-focus', hasFind ? {
+  const className = cn__default('!pl-7 group-focus-within:!w-72 group-focus-within:yt-focus', hasFind ? {
     '!w-48': !value,
     '!w-72': value
   } : '!w-48', {
@@ -14293,9 +14303,9 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
     value: value !== null && value !== void 0 ? value : ''
   }));
   if (settingsContent) {
-    const settingsClassname = cn('border-grey-300 absolute left-0 right-0 -mt-0.5 hidden top-full group-focus-within:flex focus-within:flex flex-col gap-y-4 rounded-b border border-t-0 bg-white p-3 shadow !pt-[calc(theme(spacing.3)_+_theme(spacing[0.5]))]');
+    const settingsClassname = cn__default('border-grey-300 absolute left-0 right-0 -mt-0.5 hidden top-full group-focus-within:flex focus-within:flex flex-col gap-y-4 rounded-b border border-t-0 bg-white p-3 shadow !pt-[calc(theme(spacing.3)_+_theme(spacing[0.5]))]');
     return /*#__PURE__*/React__default.createElement("div", {
-      className: cn('group relative', {
+      className: cn__default('group relative', {
         'z-10 [&_[data-taco=input-container]]:z-10': focused
       }),
       ref: containerRef,
@@ -14577,7 +14587,7 @@ const Column = /*#__PURE__*/React__default.forwardRef(function Column(props, ref
     ...dragAttributes
   } = props;
   const canHide = column.getCanHide();
-  const className = cn('group/column flex items-center gap-x-2 rounded py-1 px-2', {
+  const className = cn__default('group/column flex items-center gap-x-2 rounded py-1 px-2', {
     'hover:bg-grey-200': canHide || draggable,
     'hover:cursor-pointer': canHide,
     'active:cursor-move active:bg-grey-300': draggable
@@ -15111,7 +15121,7 @@ const Tag$1 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     ...otherProps
   } = props;
   const textRef = React__default.useRef(null);
-  const className = cn('inline-flex items-center rounded h-6 cursor-default', {
+  const className = cn__default('inline-flex items-center rounded h-6 cursor-default', {
     'opacity-50': disabled,
     'hover:bg-opacity-75': !disabled,
     'cursor-pointer': !!otherProps.onClick,
@@ -15128,7 +15138,7 @@ const Tag$1 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     name: icon,
     className: "-ml-1 mr-1 !h-5 !w-5"
   })) : (/*#__PURE__*/React__default.cloneElement(icon, {
-    className: cn(icon.props.className, 'mr-1 -ml-1')
+    className: cn__default(icon.props.className, 'mr-1 -ml-1')
   })) : null, /*#__PURE__*/React__default.createElement("span", {
     className: "truncate"
   }, children)), onDelete ? (/*#__PURE__*/React__default.createElement(Icon, {
@@ -15138,7 +15148,7 @@ const Tag$1 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   })) : null);
 });
 
-const createOptionClassName = (shouldPauseHoverState = false) => cn('group mb-px flex w-full text-sm flex-shrink-0 font-normal cursor-pointer items-center rounded bg-white px-2 leading-8 text-black aria-hidden:hidden gap-1.5 bg-white aria-current:wcag-grey-200 aria-disabled:text-black/25 aria-disabled:pointer-events-none !justify-normal', {
+const createOptionClassName = (shouldPauseHoverState = false) => cn__default('group mb-px flex w-full text-sm flex-shrink-0 font-normal cursor-pointer items-center rounded bg-white px-2 leading-8 text-black aria-hidden:hidden gap-1.5 bg-white aria-current:wcag-grey-200 aria-disabled:text-black/25 aria-disabled:pointer-events-none !justify-normal', {
   'hover:wcag-grey-200': !shouldPauseHoverState
 });
 const createCollectionClassName = () => 'flex flex-col gap-px';
@@ -15288,7 +15298,7 @@ const EditPopover = props => {
   }) => (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: "flex w-32 flex-col space-y-2"
   }, onEdit ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Field, {
-    className: cn('!min-h-fit', {
+    className: cn__default('!min-h-fit', {
       '!pb-0': !validationError
     }),
     invalid: !!validationError,
@@ -15336,7 +15346,7 @@ const Colours = props => {
     value: color
   }, AVAILABLE_COLORS.map(availableColor => (/*#__PURE__*/React__default.createElement(RadioGroupPrimitive.Item, {
     "aria-label": color,
-    className: cn('flex h-6 w-6 cursor-pointer items-center justify-center rounded', getSubtleColorShadeClasses(availableColor)),
+    className: cn__default('flex h-6 w-6 cursor-pointer items-center justify-center rounded', getSubtleColorShadeClasses(availableColor)),
     key: availableColor,
     onFocus: () => onChangeColor(availableColor),
     value: availableColor
@@ -15374,7 +15384,7 @@ const Option$1 = /*#__PURE__*/React__default.forwardRef(function Select2Option(p
     tags,
     value
   } = useSelect2Context();
-  const className = cn(createOptionClassName(shouldPauseHoverState), getFontSize(fontSize), cName);
+  const className = cn__default(createOptionClassName(shouldPauseHoverState), getFontSize(fontSize), cName);
   const hasValue = Array.isArray(value) ? !!value.length : value !== undefined;
   const isTag = tags && !!color;
   const handleClick = () => {
@@ -15431,7 +15441,7 @@ const Option$1 = /*#__PURE__*/React__default.forwardRef(function Select2Option(p
   })) : postfix : null)))), popover ? (/*#__PURE__*/React__default.createElement(IconButton, {
     icon: "ellipsis-vertical",
     appearance: "discrete",
-    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', {
+    className: cn__default('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 => {
@@ -15451,7 +15461,7 @@ const Group$3 = /*#__PURE__*/React__default.forwardRef(function Select2Group(pro
     hasSeparator,
     ...attributes
   } = props;
-  const className = cn(createCollectionClassName(), {
+  const className = cn__default(createCollectionClassName(), {
     "last:after:content-none after:content-[''] after:bg-grey-300 after:mx-2 after:my-1 after:h-px": hasSeparator && children.length
   }, props.className);
   return /*#__PURE__*/React__default.createElement(Group$2, Object.assign({}, attributes, {
@@ -15463,7 +15473,7 @@ const Group$3 = /*#__PURE__*/React__default.forwardRef(function Select2Group(pro
 });
 
 const Title$5 = /*#__PURE__*/React__default.forwardRef(function Select2Title(props, ref) {
-  const className = cn('flex items-center text-xs pl-2 h-8', props.className);
+  const className = cn__default('flex items-center text-xs pl-2 h-8', props.className);
   return /*#__PURE__*/React__default.createElement(Title$4, Object.assign({}, props, {
     className: className,
     ref: ref
@@ -15479,7 +15489,7 @@ const Placeholder = ({
     return null;
   }
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
-    className: cn({
+    className: cn__default({
       'text-grey-700': disabled,
       'text-grey-500': !disabled
     })
@@ -15520,7 +15530,7 @@ const Button$3 = /*#__PURE__*/React__default.forwardRef(function Select2TriggerB
     open,
     readOnly
   } = useSelect2Context();
-  const className = cn('px-1.5 h-fit', getInputClasses({
+  const className = cn__default('px-1.5 h-fit', getInputClasses({
     ...props,
     disabled,
     highlighted,
@@ -15594,7 +15604,7 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
     readOnly,
     tags
   } = useSelect2Context();
-  const contentClassName = cn('truncate flex items-center gap-1');
+  const contentClassName = cn__default('truncate flex items-center gap-1');
   const currentValue = children.find(matchesValue(value));
   let output;
   if (placeholder && currentValue === undefined) {
@@ -15652,7 +15662,7 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
     className
   } = buttonProps;
   if (open) {
-    className = cn('!absolute z-20 !h-fit', buttonProps.className);
+    className = cn__default('!absolute z-20 !h-fit', buttonProps.className);
     content = /*#__PURE__*/React__default.createElement(ScrollArea, {
       className: "my-1 flex max-h-[5.5rem] flex-col",
       onClick: forwardClick
@@ -15752,14 +15762,14 @@ const MultipleValue = ({
     if (typeof child.props.children === 'string') {
       output = /*#__PURE__*/React__default.createElement(Tag$1, {
         key: String(child.props.value),
-        className: cn('cursor-pointer', classNames),
+        className: cn__default('cursor-pointer', classNames),
         color: tags ? child.props.color : undefined,
         disabled: disabled,
         icon: child.props.prefix,
         readOnly: readOnly
       }, child.props.children);
     } else output = /*#__PURE__*/React__default.cloneElement(child.props.children, {
-      className: cn('cursor-pointer', {
+      className: cn__default('cursor-pointer', {
         'shrink-0': index !== boundaryIndex
       }, classNames),
       key: String(child.props.value)
@@ -15897,7 +15907,7 @@ const Search$2 = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(p
     }
   };
   return /*#__PURE__*/React__default.createElement(Field, {
-    className: cn('mx-1.5 mb-1.5 !min-h-fit', {
+    className: cn__default('mx-1.5 mb-1.5 !min-h-fit', {
       '!pb-0': !validationError
     }),
     invalid: !!validationError,
@@ -16034,7 +16044,7 @@ const Create = props => {
       event.currentTarget.click();
     }
   };
-  const className = cn(createOptionClassName(), {
+  const className = cn__default(createOptionClassName(), {
     '!w-[calc(100%_-_theme(spacing.3))] ml-1.5': !createDialog,
     'leading-normal border-grey-300 h-9 border-t py-2.5 px-4 !-mb-1.5': !!createDialog
   });
@@ -16271,7 +16281,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
       setValue(nextValue);
     }
   };
-  const className = cn('border-grey-300 rounded border bg-white py-1.5 shadow-md ', {
+  const className = cn__default('border-grey-300 rounded border bg-white py-1.5 shadow-md ', {
     'focus-within:yt-focus': !hasSearch,
     'outline-none': hasSearch
   }, createCollectionClassName());
@@ -16311,10 +16321,10 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
   }, selectAllText), /*#__PURE__*/React__default.createElement("div", {
     className: "border-grey-300 mx-3 rounded border-t"
   }))))) : null, loading ? (/*#__PURE__*/React__default.createElement("span", {
-    className: cn('text-grey-700 flex items-center italic', fontSize && getFontSize(fontSize))
+    className: cn__default('text-grey-700 flex items-center italic', fontSize && getFontSize(fontSize))
   }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(Spinner, {
     delay: 0,
-    className: cn('ml-3 mr-2 mt-1.5 h-5 w-5', {
+    className: cn__default('ml-3 mr-2 mt-1.5 h-5 w-5', {
       '!mt-1 !h-3.5 !w-3.5': fontSize === exports.FontSizes.small,
       '!h-4 !w-4': fontSize === exports.FontSizes.medium,
       '!h-5 !w-5': fontSize === exports.FontSizes.large
@@ -18244,7 +18254,7 @@ const useTable$1 = (props, ref) => {
 const renderCell = (cell, row) => {
   const props = {
     ...cell.getCellProps(),
-    className: cn('yt-table__cell flex-1 truncate p-2 align-middle', cell.column.className, {
+    className: cn__default('yt-table__cell flex-1 truncate p-2 align-middle', cell.column.className, {
       'justify-start text-left': cell.column.align === 'left',
       'justify-end text-right': cell.column.align === 'right',
       'text-center': !cell.column.align
@@ -18284,7 +18294,7 @@ const Row$1 = /*#__PURE__*/React__default.forwardRef(function TableRow({
       minHeight: rowHeight ? `${rowHeight}px` : undefined,
       paddingLeft: row.depth ? `${row.depth * 2}rem` : undefined
     },
-    className: cn('yt-table__row border-grey-300 flex border-b min-h-[2.5rem] hover:bg-grey-100', {
+    className: cn__default('yt-table__row border-grey-300 flex border-b min-h-[2.5rem] hover:bg-grey-100', {
       'yt-table__row--active bg-grey-200 hover:bg-grey-200': activeIndex === index,
       'yt-table__row--clickable': !!onRowClick,
       'yt-table__row--dragging': !!row.isDragging,
@@ -18342,7 +18352,7 @@ const Column$2 = ({
     ...(cell.getSortByToggleProps && cell.getSortByToggleProps({
       title: undefined
     })),
-    className: cn('yt-table__cell flex flex-1 truncate p-2 align-middle text-grey-700 hover:text-black', cell.className, {
+    className: cn__default('yt-table__cell flex flex-1 truncate p-2 align-middle text-grey-700 hover:text-black', cell.className, {
       'yt-table__cell__group': !!cell.columns,
       'cursor-pointer': !cell.disableSorting,
       'justify-start text-left': cell.align === 'left',
@@ -18385,7 +18395,7 @@ const BaseTable = /*#__PURE__*/React__default.forwardRef(function BaseTable(prop
       tableRef.current.focus();
     }
   }, []);
-  const className = cn('yt-table flex flex-col focus:yt-focus focus:rounded-sm', props.className);
+  const className = cn__default('yt-table flex flex-col focus:yt-focus focus:rounded-sm', props.className);
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
     role: "table",
     className: className,
@@ -18569,7 +18579,7 @@ const WindowedTable = /*#__PURE__*/React__default.forwardRef(function WindowedTa
   }, [rows.length]);
   const contentHeight = estimatedRowHeight * props.data.length || 0;
   const isScrollbarVisible = height !== null ? contentHeight > height : false;
-  const className = cn(tableProps.className, 'yt-table--windowed', {
+  const className = cn__default(tableProps.className, 'yt-table--windowed', {
     'table-with-scrollbar': isScrollbarVisible
   });
   let list;
@@ -18899,21 +18909,13 @@ function useTableEditingListener(table, tableRef, scrollToIndex) {
     document.addEventListener('click', onClickOutside);
     return () => document.removeEventListener('click', onClickOutside);
   }, [tableMeta.editing.isEditing, tableMeta.editing.saveChanges]);
-  /*
-  const rows = table.getRowModel().rows;
-   // make sure pending changes are removed for rows that no longer exist
-  useLazyEffect(() => {
-      const pendingChanges = tableMeta.editing.getErrorsShownInAlert();
-       pendingChanges.forEach(pendingChange => {
-          try {
-              table.getRow(pendingChange.rowId);
-          } catch {
-              // TODO: this has the potential to remove changes for "unloaded" rows in server loading
-              //tableMeta.editing.discardChanges(pendingChange.rowId, table);
-          }
-      });
-  }, [rows.length]);
-  */
+  React__default.useEffect(() => {
+    if (tableMeta.editing.isEnabled) {
+      tableMeta.rowActions.registerHandler('cleanup', rowId => {
+        tableMeta.editing.discardChanges(rowId, table);
+      });
+    }
+  }, []);
   // shortcuts
   useGlobalKeyDown(tableMeta.editing.isEnabled ? shortcut : undefined, event => {
     event.preventDefault();
@@ -19622,7 +19624,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
     onKeyDown,
     ...otherProps
   } = props;
-  const classNames = cn(getInputClasses(props), 'pt-[5px] pb-[7px] min-h-[75px] disabled:resize-none !leading-5', props.className);
+  const classNames = cn__default(getInputClasses(props), 'pt-[5px] pb-[7px] min-h-[75px] disabled:resize-none !leading-5', props.className);
   // home and end keys only navigate to the start/end of textarea value if the textarea container does not scroll
   // if it has scroll height then the browser reverts to native scrolling behaviour only
   // so we manually override it to ensure _our_ desired behaviour remains intact
@@ -20125,7 +20127,7 @@ function SaveStatus(props) {
   } = useLocalization();
   const tableMeta = table.options.meta;
   const status = tableMeta.editing.getRowStatus(rowId);
-  const className = cn('col-span-full sticky ml-auto right-0 top-0 -mb-[100%] z-10 h-8 bg-[inherit] flex items-center px-1.5 shadow-[-6px_0px_6px_var(--table-row-actions-shadow)]', {
+  const className = cn__default('col-span-full sticky ml-auto right-0 top-0 -mb-[100%] z-10 h-8 bg-[inherit] flex items-center px-1.5 shadow-[-6px_0px_6px_var(--table-row-actions-shadow)]', {
     'mt-0.5': tableMeta.rowHeight.height === 'short',
     'mt-1': tableMeta.rowHeight.height === 'medium',
     'mt-1.5': tableMeta.rowHeight.height === 'tall',
@@ -20235,7 +20237,7 @@ function useTable3(props, ref) {
     data,
     enableRowActions: editing.isEditing ? true : props.enableRowActions,
     // Display EditingActionMenu instead of row actions while editing
-    rowActions: editing.isEditing ? [(_, rowId, table) => {
+    rowActions: editing.isEditing ? [(_, rowId, __, table) => {
       const tableMeta = table.options.meta;
       return /*#__PURE__*/React__default.createElement(EditingActionsMenu, {
         hasChanges: editing.hasChanges(rowId),
@@ -20478,7 +20480,7 @@ function CreateNewRow(props) {
       keys: shortcut
     });
   }
-  const className = cn('group/row border-grey-300 !sticky z-[21]', {
+  const className = cn__default('group/row border-grey-300 !sticky z-[21]', {
     'bottom-10': tableMeta.footer.isEnabled,
     'bottom-0': !tableMeta.footer.isEnabled,
     'border-b': !isScrolled
@@ -20568,7 +20570,7 @@ function TemporaryRow(props) {
       }
     }
   };
-  const className = cn('group/row border-grey-300 !sticky z-[22] print:hidden', {
+  const className = cn__default('group/row border-grey-300 !sticky z-[22] print:hidden', {
     'bottom-[calc(5rem_+_2px)] data-[row-editing-move]:bottom-[calc(5rem_+_2px)]': tableMeta.footer.isEnabled,
     'bottom-[calc(2.5rem_+_2px)] data-[row-editing-move]:bottom-[calc(2.5rem_+_2px)]': !tableMeta.footer.isEnabled,
     'border-t-2 shadow-[0px_-5px_20px_0px_rgba(0,0,0,0.1)] [&>td]:!border-b-0': isScrolled
@@ -20605,7 +20607,14 @@ const BaseTable3 = /*#__PURE__*/fixedForwardRef(function BaseTable3(props, ref)
     'data-table-editing-mode': (_table3$meta$editing = table3.meta.editing) !== null && _table3$meta$editing !== void 0 && _table3$meta$editing.isEditing ? (_table3$meta$editing2 = table3.meta.editing) !== null && _table3$meta$editing2 !== void 0 && _table3$meta$editing2.isDetailedMode ? 'detailed' : 'normal' : undefined,
     enableHorizontalArrowKeyNavigation: table3.meta.editing.isEditing
   };
-  const hasAlertErrors = table3.meta.editing.getErrorsShownInAlert().length;
+  const rowsById = table3.instance.getCoreRowModel().rowsById;
+  const hasAlertErrors = table3.meta.editing.getErrorsShownInAlert().filter(row => {
+    if (table3.meta.server._experimentalDataLoader2) {
+      // consumers of dataloader2 need to run a cleanup function, as this would otherwise return false when pages are unloaded.
+      return true;
+    }
+    return rowsById[row.rowId];
+  }).length;
   const hasCreateWorkflow = table3.meta.editing.isEnabled && props.onEditingCreate;
   const isScrolled = isTableScrolled(table3.ref);
   let createWorkflow;
@@ -20661,7 +20670,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
     orientation = 'horizontal',
     ...otherProps
   } = props;
-  const className = cn({
+  const className = cn__default({
     'flex w-full': orientation === 'vertical'
   }, props.className);
   return /*#__PURE__*/React.createElement(TabsPrimitive.Root, Object.assign({}, otherProps, {
@@ -20679,7 +20688,7 @@ const TabList = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
   const {
     children
   } = props;
-  const className = cn('border-grey-300 flex flex-row m-0 mb-4 print:hidden', '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);
+  const className = cn__default('border-grey-300 flex flex-row m-0 mb-4 print:hidden', '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
@@ -20702,13 +20711,13 @@ const TabTrigger = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
     tooltip,
     ...otherProps
   } = props;
-  const triggerClassName = cn(props.className, 'group relative p-0.5 outline-none disabled:cursor-not-allowed disabled:text-black/50',
+  const triggerClassName = cn__default(props.className, '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',
+  const buttonClassName = cn__default(getButtonClasses(), 'group-focus-visible:yt-focus-inset group-enabled:group-hover:wcag-grey-200 pointer-events-none rounded px-3');
+  const activeClassName = cn__default('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
@@ -20735,7 +20744,7 @@ const TabContent = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
     id,
     ...otherProps
   } = props;
-  const className = cn('[&[data-orientation="vertical"]]:grow outline-none', props.className);
+  const className = cn__default('[&[data-orientation="vertical"]]:grow outline-none', props.className);
   return /*#__PURE__*/React.createElement(TabsPrimitive.Content, Object.assign({}, otherProps, {
     className: className,
     ref: ref,
@@ -21039,7 +21048,7 @@ function Legend(props) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: "mx-auto w-auto max-w-full overflow-hidden"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: cn('mb-0 ml-0 flex justify-center', {
+    className: cn__default('mb-0 ml-0 flex justify-center', {
       'flex-col': layout === 'vertical'
     })
   }, /*#__PURE__*/React__default.createElement(OverflowGroup, {
@@ -21047,7 +21056,7 @@ function Legend(props) {
     moreButton: moreButton
   }, payload.map((entry, index) => (/*#__PURE__*/React__default.createElement("span", {
     key: `${entry.dataKey}-${index}`,
-    className: cn(' hover:bg-grey-100 cursor-pointer px-[8px] py-[2px] hover:rounded-[4px]', {
+    className: cn__default(' hover:bg-grey-100 cursor-pointer px-[8px] py-[2px] hover:rounded-[4px]', {
       'bg-grey-100 rounded': activeIndex === index
     }),
     onMouseEnter: () => handleMouseEnter(entry, index),
@@ -21056,7 +21065,7 @@ function Legend(props) {
   }, /*#__PURE__*/React__default.createElement("span", {
     className: "text-grey-700 flex items-center gap-[4px]"
   }, /*#__PURE__*/React__default.createElement("span", {
-    className: cn('-mt-px ml-1 flex h-3 w-3 rounded-sm', {
+    className: cn__default('-mt-px ml-1 flex h-3 w-3 rounded-sm', {
       'border-grey-300 border !bg-white': !activeItems[entry.dataKey]
     }),
     style: {
@@ -21339,7 +21348,7 @@ const Legend$1 = ({
     const isHovered = isTotal ? isTotalLegendHovered : hoveredItem.includes(itemData.id);
     return /*#__PURE__*/React__default.createElement("li", {
       key: isTotal ? 'total' : `${itemData.label}-${index}`,
-      className: cn('mr-2 flex cursor-pointer gap-2 rounded pl-0 pr-1', {
+      className: cn__default('mr-2 flex cursor-pointer gap-2 rounded pl-0 pr-1', {
         'bg-grey-100': isHovered && (!isTotal || legendPosition === 'right'),
         'bg-grey-200': isSelected && (!isTotal || legendPosition === 'right')
       }),
@@ -21349,7 +21358,7 @@ const Legend$1 = ({
     }, legendPosition === 'bottom' ? (/*#__PURE__*/React__default.createElement("div", {
       className: "flex items-center gap-1"
     }, /*#__PURE__*/React__default.createElement("span", {
-      className: cn('ml-1 h-3 w-3 rounded-sm', {
+      className: cn__default('ml-1 h-3 w-3 rounded-sm', {
         'border-grey-300 border !bg-white': !visibleItems[itemData.id]
       }),
       style: {
@@ -21371,13 +21380,13 @@ const Legend$1 = ({
     appearance: "transparent",
     className: "text-grey-700"
   }, moreButtonText));
-  const className = cn('flex-grow pl-4', {
+  const className = cn__default('flex-grow pl-4', {
     'w-full': legendPosition === 'bottom'
   });
   return /*#__PURE__*/React__default.createElement("div", {
     className: className
   }, /*#__PURE__*/React__default.createElement("ul", {
-    className: cn('mb-0 ml-0 mt-4 flex justify-center space-y-1', legendPosition === 'right' ? 'flex-col gap-1' : 'flex-row')
+    className: cn__default('mb-0 ml-0 mt-4 flex justify-center space-y-1', legendPosition === 'right' ? 'flex-col gap-1' : 'flex-row')
   }, legendPosition === 'right' ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderLegendItem(null), data.map(renderLegendItem))) : (/*#__PURE__*/React__default.createElement(OverflowGroup, {
     className: "w-full items-center py-1",
     moreButton: moreButton
@@ -21425,7 +21434,7 @@ const ActiveShape = props => {
   } = props;
   return /*#__PURE__*/React__default.createElement("g", {
     onClick: () => onClick(id),
-    className: cn({
+    className: cn__default({
       'cursor-pointer': !!onClick
     })
   }, /*#__PURE__*/React__default.createElement(Recharts.Sector, {
@@ -21551,7 +21560,7 @@ const DonutChart = function DonutChart({
     }));
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: cn('relative h-full w-full', {
+    className: cn__default('relative h-full w-full', {
       [`flex `]: showLegend,
       'flex-col items-center': legendPosition === 'bottom'
     }),
@@ -21667,7 +21676,7 @@ const Button$4 = /*#__PURE__*/React__default.forwardRef(function Button(props, r
   const {
     ...attributes
   } = props;
-  const className = cn(getButtonClasses$1(), props.className);
+  const className = cn__default(getButtonClasses$1(), props.className);
   return /*#__PURE__*/React__default.createElement(IconButton, Object.assign({}, attributes, {
     appearance: "discrete",
     className: className,
@@ -21675,7 +21684,7 @@ const Button$4 = /*#__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 enabled:hover:bg-white/[.08] focus:bg-white/[.08] aria-current-page:bg-white/[.08]', 'text-white', {
+const getButtonClasses$1 = (rounded = true) => cn__default('!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
 });
 
@@ -21690,7 +21699,7 @@ const Link$2 = /*#__PURE__*/React__default.forwardRef(function Link(props, ref)
   const {
     texts
   } = useLocalization();
-  const className = cn(getLinkClasses(icon), 'relative', props.className);
+  const className = cn__default(getLinkClasses(icon), 'relative', props.className);
   const link = /*#__PURE__*/React__default.createElement("a", Object.assign({}, otherProps, {
     className: className,
     "data-taco": "header-link",
@@ -21710,13 +21719,13 @@ const Link$2 = /*#__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__default('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
 });
 
 const Logo = /*#__PURE__*/React__default.forwardRef(function Logo(props, ref) {
-  const className = cn('h-7 w-7 m-1 self-center justify-self-center flex-shrink-0 flex-grow-0', props.className);
+  const className = cn__default('h-7 w-7 m-1 self-center justify-self-center flex-shrink-0 flex-grow-0', props.className);
   return /*#__PURE__*/React__default.createElement("svg", Object.assign({}, props, {
     className: className,
     ref: ref,
@@ -21733,7 +21742,7 @@ const Logo = /*#__PURE__*/React__default.forwardRef(function Logo(props, ref) {
   })));
 });
 const LogoLegacy = /*#__PURE__*/React__default.forwardRef(function Logo(props, ref) {
-  const className = cn('-mr-[156px] xs:-mr-14 md:!mr-0 h-9 shrink-0 w-[180px] px-1', props.className);
+  const className = cn__default('-mr-[156px] xs:-mr-14 md:!mr-0 h-9 shrink-0 w-[180px] px-1', props.className);
   return /*#__PURE__*/React__default.createElement("svg", Object.assign({}, props, {
     className: className,
     ref: ref,
@@ -21805,9 +21814,9 @@ const PrimaryNavigation = /*#__PURE__*/React__default.forwardRef(function Primar
     texts
   } = useLocalization();
   const internalRef = useMergedRef(ref);
-  const className = cn('flex h-full w-full flex-grow items-center overflow-hidden active:outline-none relative', props.className);
+  const className = cn__default('flex h-full w-full flex-grow items-center overflow-hidden active:outline-none relative', props.className);
   const moreButton = () => (/*#__PURE__*/React__default.createElement(Button$1, {
-    className: cn(getLinkClasses(), '!bg-transparent aria-expanded:!bg-white/[.08]')
+    className: cn__default(getLinkClasses(), '!bg-transparent aria-expanded:!bg-white/[.08]')
   }, texts.header.more));
   return /*#__PURE__*/React__default.createElement("nav", Object.assign({}, props, {
     className: className,
@@ -21819,7 +21828,7 @@ const PrimaryNavigation = /*#__PURE__*/React__default.forwardRef(function Primar
 });
 
 const SecondaryNavigation = /*#__PURE__*/React__default.forwardRef(function SecondaryNavigation(props, ref) {
-  const className = cn('flex h-full items-center gap-2 mb-0 flex-shrink-0 mr-2', props.className);
+  const className = cn__default('flex h-full items-center gap-2 mb-0 flex-shrink-0 mr-2', props.className);
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
     className: className,
     ref: ref
@@ -21827,7 +21836,7 @@ const SecondaryNavigation = /*#__PURE__*/React__default.forwardRef(function Seco
 });
 
 const MenuButton = /*#__PURE__*/React__default.forwardRef(function MenuButton(props, ref) {
-  const className = cn(getButtonClasses$1(false), 'mr-1 !bg-transparent hover:!bg-white/[.08] focus:!bg-white/[.08]] lg:hidden z-[2] !text-white');
+  const className = cn__default(getButtonClasses$1(false), 'mr-1 !bg-transparent hover:!bg-white/[.08] focus:!bg-white/[.08]] lg:hidden z-[2] !text-white');
   return /*#__PURE__*/React__default.createElement(IconButton, Object.assign({}, props, {
     className: className,
     "data-taco": "header-toggle-sidebar",
@@ -21847,7 +21856,7 @@ const AgreementAvatar = /*#__PURE__*/React__default.forwardRef(function Agreemen
   const handleError = event => {
     event.target.src = fallbackSrc;
   };
-  const className = cn('h-9 w-9 rounded-full shrink-0 group-focus:yt-focus-dark xl:group-focus:shadow-none', {
+  const className = cn__default('h-9 w-9 rounded-full shrink-0 group-focus:yt-focus-dark xl:group-focus:shadow-none', {
     visible: loaded
   }, props.className);
   return /*#__PURE__*/React__default.createElement("img", Object.assign({}, otherProps, {
@@ -21884,7 +21893,7 @@ const AgreementItem = props => {
     fallbackImageSrc,
     ...agreement
   } = props;
-  const className = cn('w-full rounded flex px-2 gap-2 overflow-hidden text-left items-center', customClassName);
+  const className = cn__default('w-full rounded flex px-2 gap-2 overflow-hidden text-left items-center', customClassName);
   return /*#__PURE__*/React__default.createElement("span", {
     className: className
   }, /*#__PURE__*/React__default.createElement(AgreementAvatar, {
@@ -21916,7 +21925,7 @@ const AgreementDisplay = props => {
   } = props;
   const isXlScreen = useMatchMedia('(min-width: 1280px)', window.innerWidth > 1280);
   if (isXlScreen) {
-    const className = cn('h-12 flex-grow xl:[button>&]:hover:bg-white/[0.16]', props.className);
+    const className = cn__default('h-12 flex-grow xl:[button>&]:hover:bg-white/[0.16]', props.className);
     return /*#__PURE__*/React__default.createElement(AgreementItem, Object.assign({}, currentAgreement, {
       children: children,
       className: className,
@@ -22065,7 +22074,7 @@ function AgreementDisplay$1(props) {
 }
 
 const Header$6 = /*#__PURE__*/React__default.forwardRef(function Header(props, ref) {
-  const className = cn('bg-blue-900 flex h-16 w-full shrink-0 items-center gap-2 pl-4', '[&>*:focus-visible]:yt-focus-dark [&>*]:rounded',
+  const className = cn__default('bg-blue-900 flex h-16 w-full shrink-0 items-center gap-2 pl-4', '[&>*:focus-visible]:yt-focus-dark [&>*]:rounded',
   // styles for logo wrapped inside an anchor
   props.className);
   return /*#__PURE__*/React__default.createElement("header", Object.assign({}, props, {
@@ -22089,7 +22098,7 @@ const LayoutContext = /*#__PURE__*/React__default.createContext({
 });
 
 const Content$9 = /*#__PURE__*/React__default.forwardRef(function LayoutContent(props, ref) {
-  const className = cn('flex-grow overflow-y-auto print:overflow-visible print:h-full print:!p-0 bg-white flex flex-shrink flex-col relative', props.className);
+  const className = cn__default('flex-grow overflow-y-auto print:overflow-visible print:h-full print:!p-0 bg-white flex flex-shrink flex-col relative', props.className);
   return /*#__PURE__*/React__default.createElement("main", Object.assign({}, props, {
     className: className,
     ref: ref
@@ -22131,7 +22140,7 @@ const Sidebar = /*#__PURE__*/React__default.forwardRef(function LayoutSidebar(pr
   }, [isSmallScreen, sidebarOpen]);
   const showBackdrop = isSmallScreen && sidebarOpen === true;
   const [ready, setReady] = React__default.useState(isSmallScreen);
-  const className = cn('bg-grey-50 h-full w-64 flex-shrink-0 flex-grow-0 print:hidden', {
+  const className = cn__default('bg-grey-50 h-full w-64 flex-shrink-0 flex-grow-0 print:hidden', {
     'absolute z-10 aria-hidden:-translate-x-64 ': isSmallScreen,
     // prevent animation when crossing the boundary from large to small screen,
     // this prevents awkward animation in the edge case (resizing the browser, instead of starting at a given size)
@@ -22185,7 +22194,7 @@ const Top = props => {
 };
 
 const Page = /*#__PURE__*/React__default.forwardRef(function LayoutPage(props, ref) {
-  const className = cn('flex flex-grow overflow-hidden print:overflow-visible print:h-full relative', props.className);
+  const className = cn__default('flex flex-grow overflow-hidden print:overflow-visible print:h-full relative', props.className);
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
     className: className,
     ref: ref
@@ -22194,7 +22203,7 @@ const Page = /*#__PURE__*/React__default.forwardRef(function LayoutPage(props, r
 
 const Layout$1 = /*#__PURE__*/React__default.forwardRef(function Layout(props, ref) {
   const [sidebarOpen, setSidebarOpen] = React__default.useState(false);
-  const className = cn('flex h-screen w-screen flex-col overflow-hidden print:overflow-visible print:h-full relative', props.className);
+  const className = cn__default('flex h-screen w-screen flex-col overflow-hidden print:overflow-visible print:h-full relative', props.className);
   return /*#__PURE__*/React__default.createElement(LayoutContext.Provider, {
     value: {
       sidebarOpen,
@@ -22219,7 +22228,7 @@ const Group$6 = /*#__PURE__*/React__default.forwardRef(function Group(props, ref
     ...attributes
   } = props;
   const [expanded, setExpanded] = React__default.useState(defaultExpanded);
-  const className = cn('flex w-full cursor-pointer items-center rounded px-3 font-bold text-left leading-8 hover:bg-black/[.06] focus-visible:yt-focus-dark', attributes.className);
+  const className = cn__default('flex w-full cursor-pointer items-center rounded px-3 font-bold text-left leading-8 hover:bg-black/[.06] focus-visible:yt-focus-dark', attributes.className);
   const handleClick = event => {
     setExpanded(!expanded);
     if (onClick) {
@@ -22243,14 +22252,14 @@ const Group$6 = /*#__PURE__*/React__default.forwardRef(function Group(props, ref
   }), /*#__PURE__*/React__default.createElement("span", {
     className: "flex-grow truncate"
   }, heading)), /*#__PURE__*/React__default.createElement("ul", {
-    className: cn('mb-0 flex flex-col gap-y-px pt-px', {
+    className: cn__default('mb-0 flex flex-col gap-y-px pt-px', {
       hidden: !expanded
     }),
     role: "menu"
   }, children));
 });
 
-const getAdjacentClasses = () => cn(
+const getAdjacentClasses = () => cn__default(
 // styling if the element is proceeded by a link item
 '[[role=menubar]>[data-taco=navigation2-link-item]+&]:mt-2', "[[role=menubar]>[data-taco='navigation2-link-item']+&]:border-t-2", "[[role=menubar]>[data-taco='navigation2-link-item']+&]:pt-2 ",
 // styling if the element is proceeded by content
@@ -22258,7 +22267,7 @@ const getAdjacentClasses = () => cn(
 // styling if the element is proceeded by a section
 "[[role=menubar]>[data-taco='navigation2-section']+&]:border-t-2", "[[role=menubar]>[data-taco='navigation2-section']+&]:pt-2");
 
-const getNavigationLinkClasses = (isDraggedOver = false) => cn('group relative flex w-full items-center rounded leading-8 !text-black px-2 focus-visible:yt-focus-dark',
+const getNavigationLinkClasses = (isDraggedOver = false) => cn__default('group relative flex w-full items-center rounded leading-8 !text-black px-2 focus-visible:yt-focus-dark',
 // override styles for links that are children of collapsible menus
 'font-bold [[role=menu]>li>&]:font-normal [[role=menu]>li>&]:pl-5',
 // override styles to adjust icons included in menu links
@@ -22279,8 +22288,8 @@ const Link$3 = /*#__PURE__*/React__default.forwardRef(function Link(props, ref)
     ...attributes
   } = props;
   const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);
-  const className = cn(getNavigationLinkClasses(isDraggedOver), attributes.className);
-  const listClassName = cn('[[role=menubar]>&]:px-3 border-grey-200', getAdjacentClasses(), {
+  const className = cn__default(getNavigationLinkClasses(isDraggedOver), attributes.className);
+  const listClassName = cn__default('[[role=menubar]>&]:px-3 border-grey-200', getAdjacentClasses(), {
     '[&>*]:pointer-events-none': isDraggedOver
   });
   return /*#__PURE__*/React__default.createElement("li", Object.assign({}, dropTargetProps, {
@@ -22304,7 +22313,7 @@ const Link$3 = /*#__PURE__*/React__default.forwardRef(function Link(props, ref)
     icon: "more",
     "aria-label": "More",
     rounded: true,
-    className: cn('-mr-1.5 hidden flex-shrink-0 flex-grow-0 transition-none group-hover:flex aria-expanded:flex', {
+    className: cn__default('-mr-1.5 hidden flex-shrink-0 flex-grow-0 transition-none group-hover:flex aria-expanded:flex', {
       'absolute right-0 !mr-0.5': total !== undefined
     }),
     menu: menu,
@@ -22313,7 +22322,7 @@ const Link$3 = /*#__PURE__*/React__default.forwardRef(function Link(props, ref)
       event.stopPropagation();
     }
   })) : null, total !== undefined ? (/*#__PURE__*/React__default.createElement(Badge, {
-    className: cn('flex-shrink-0 flex-grow-0 !font-normal', {
+    className: cn__default('flex-shrink-0 flex-grow-0 !font-normal', {
       'group-hover:hidden [[aria-expanded="true"]+&]:hidden ': menu
     }),
     color: "transparent"
@@ -22326,7 +22335,7 @@ const Section = /*#__PURE__*/React__default.forwardRef(function Navigation2(prop
     heading,
     ...attributes
   } = props;
-  const className = cn('w-full overflow-auto px-3 py-2 flex-grow border-grey-200 bg-grey-50 [[role=menubar]>&:first-child]:pt-0', getAdjacentClasses(), props.className);
+  const className = cn__default('w-full overflow-auto px-3 py-2 flex-grow border-grey-200 bg-grey-50 [[role=menubar]>&:first-child]:pt-0', getAdjacentClasses(), props.className);
   return /*#__PURE__*/React__default.createElement("li", Object.assign({}, attributes, {
     className: className,
     "data-taco": "navigation2-section",
@@ -22344,7 +22353,7 @@ const Content$a = /*#__PURE__*/React__default.forwardRef(function Navigation2(pr
     children,
     ...attributes
   } = props;
-  const className = cn('w-full overflow-auto p-3 mt-auto border-grey-200 flex-shrink-0 z-10 bg-grey-50 [[role=menubar]>&:last-child]:pb-0', getAdjacentClasses(), props.className);
+  const className = cn__default('w-full overflow-auto p-3 mt-auto border-grey-200 flex-shrink-0 z-10 bg-grey-50 [[role=menubar]>&:last-child]:pb-0', getAdjacentClasses(), props.className);
   return /*#__PURE__*/React__default.createElement("li", Object.assign({}, attributes, {
     className: className,
     "data-taco": "navigation2-content",
@@ -22358,7 +22367,7 @@ const Navigation2 = /*#__PURE__*/React__default.forwardRef(function Navigation2(
     children,
     ...attributes
   } = props;
-  const className = cn('m-0 py-2 flex flex-col gap-y-px overflow-auto h-full w-full bg-grey-50', props.className);
+  const className = cn__default('m-0 py-2 flex flex-col gap-y-px overflow-auto h-full w-full bg-grey-50', props.className);
   return /*#__PURE__*/React__default.createElement("ul", Object.assign({}, attributes, {
     className: className,
     "data-taco": "navigation2",