@economic/taco 1.27.0 → 1.28.1

package/dist/taco.cjs.development.js

@@ -10,9 +10,6 @@ var cn = _interopDefault(require('classnames'));
 var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
-var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
-var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
-var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var ReactDayPicker = _interopDefault(require('react-day-picker'));
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var uuid = require('uuid');
@@ -24,7 +21,11 @@ var interactions = require('@react-aria/interactions');
 var framerMotion = require('framer-motion');
 var focus = require('@react-aria/focus');
 var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
+var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
 var HoverCardPrimitive = require('@radix-ui/react-hover-card');
+var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
+var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
+var PrimitiveSwitch = require('@radix-ui/react-switch');
 var reactTable = require('react-table');
 var reactIntersectionObserver = require('react-intersection-observer');
 var reactWindow = require('react-window');
@@ -35,7 +36,6 @@ var get = _interopDefault(require('lodash/get'));
 var compact = _interopDefault(require('lodash/compact'));
 var pullAt = _interopDefault(require('lodash/pullAt'));
 var reactTable$1 = require('@tanstack/react-table');
-var PrimitiveSwitch = require('@radix-ui/react-switch');
 var ReactDOM = _interopDefault(require('react-dom'));
 var reactVirtual = require('react-virtual');
 var core = require('@dnd-kit/core');
@@ -44,7 +44,6 @@ var utilities = require('@dnd-kit/utilities');
 var TabsPrimitive = require('@radix-ui/react-tabs');
 var Joyride = require('react-joyride');
 var Joyride__default = _interopDefault(Joyride);
-var reactPortal = require('@radix-ui/react-portal');
 
 const AVAILABLE_COLORS = ['green', 'yellow', 'red', 'blue', 'purple', 'brown', 'pink', 'orange', 'grey', 'transparent'];
 const getColorByState = state => {
@@ -3223,6 +3222,7 @@ const Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
   return Component ? /*#__PURE__*/React__default.createElement(Component, Object.assign({}, otherProps, {
     className: className,
     "data-taco": "icon",
+    "data-icon-name": name,
     focusable: "false",
     ref: ref,
     role: "img"
@@ -3745,6 +3745,7 @@ const defaultLocalisationTexts = {
   calendar: {
     months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
     weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
     actions: {
       previousMonth: 'Previous month',
       nextMonth: 'Next month',
@@ -4013,1078 +4014,608 @@ const Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
   }, button);
 });
 
-// merges an external ref (optional) with an internal ref (required)
-const useMergedRef = ref => {
-  const internalRef = React__default.useRef(null);
-  React__default.useEffect(() => {
-    if (ref) {
-      if (typeof ref === 'function') {
-        ref(internalRef.current);
-      } else {
-        ref.current = internalRef.current;
+const thisYear = /*#__PURE__*/new Date().getFullYear();
+const years = [];
+for (let i = thisYear - 50; i <= thisYear + 10; i += 1) {
+  years.push(i);
+}
+const Navbar = /*#__PURE__*/React.memo(({
+  onMonthChange,
+  onNextClick,
+  onPreviousClick,
+  value = new Date()
+}) => {
+  const {
+    texts: {
+      calendar: {
+        actions,
+        months
       }
     }
-  }, [ref]);
-  return internalRef;
-};
-
-const Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
+  } = useLocalization();
+  const handleChange = function handleChange(event) {
+    const {
+      year,
+      month
+    } = event.target.form;
+    onMonthChange(new Date(year.value, month.value));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "mb-1 flex items-center justify-between"
+  }, /*#__PURE__*/React.createElement("form", {
+    className: "inline-flex space-x-1"
+  }, /*#__PURE__*/React.createElement("select", {
+    className: "h-8 px-2",
+    name: "month",
+    onChange: handleChange,
+    value: value.getMonth()
+  }, months.map((month, i) => /*#__PURE__*/React.createElement("option", {
+    key: month,
+    value: i
+  }, month))), /*#__PURE__*/React.createElement("select", {
+    className: "h-8 px-2",
+    name: "year",
+    onChange: handleChange,
+    value: value.getFullYear()
+  }, years.map(year => /*#__PURE__*/React.createElement("option", {
+    key: year,
+    value: year
+  }, String(year))))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Tooltip, {
+    title: actions.previousMonth
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    appearance: "discrete",
+    icon: "chevron-left",
+    "aria-label": actions.previousMonth,
+    onClick: () => onPreviousClick(),
+    rounded: true
+  })), /*#__PURE__*/React.createElement(Tooltip, {
+    title: actions.nextMonth
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    appearance: "discrete",
+    icon: "chevron-right",
+    "aria-label": actions.nextMonth,
+    onClick: () => onNextClick(),
+    rounded: true
+  }))));
+});
+const Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
   const {
-    as: Tag = 'span',
-    orientation = 'horizontal',
+    onChange: handleChange,
+    value,
+    disabledDays,
     ...otherProps
   } = props;
-  const className = cn('flex gap-2', {
-    'flex-col ': orientation === 'vertical'
+  const {
+    locale,
+    texts
+  } = useLocalization();
+  const [visibleMonth, setVisibleMonth] = React.useState(value !== null && value !== void 0 ? value : new Date());
+  React.useEffect(() => {
+    if (visibleMonth !== value) {
+      setVisibleMonth(value !== null && value !== void 0 ? value : new Date());
+    }
+    // visibleMonth in deps array breaking month switching logic. It should not be in deps array.
+  }, [value]);
+  const handleDayClick = (date, modifiers, event) => {
+    if (modifiers.outside || modifiers.disabled) {
+      return;
+    }
+    handleChange(date, event);
+  };
+  const handleCalendarClickToday = () => {
+    const today = new Date();
+    // set to midday to avoid UTC offset causing dates to be mismatched server side
+    today.setHours(12);
+    today.setMinutes(0);
+    today.setSeconds(0);
+    handleChange(today);
+  };
+  const className = cn('flex bg-white text-xs p-2', otherProps.className);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-taco": "calendar"
+  }, /*#__PURE__*/React.createElement(ReactDayPicker, Object.assign({}, otherProps, {
+    className: className,
+    month: visibleMonth,
+    selectedDays: value,
+    locale: locale.substring(0, 2),
+    firstDayOfWeek: 1,
+    months: texts.calendar.months,
+    weekdaysLong: texts.calendar.weekdays,
+    weekdaysShort: texts.calendar.weekdaysShort,
+    navbarElement: navProps => /*#__PURE__*/React.createElement(Navbar, Object.assign({}, navProps, {
+      onMonthChange: setVisibleMonth,
+      value: visibleMonth
+    })),
+    onDayClick: handleDayClick,
+    onMonthChange: setVisibleMonth,
+    onTodayButtonClick: handleCalendarClickToday,
+    captionElement: () => null,
+    todayButton: texts.calendar.actions.today,
+    numberOfMonths: 1,
+    ref: ref,
+    disabledDays: disabledDays
+  })));
+});
+
+const Content$2 = /*#__PURE__*/React.forwardRef(function CardContent(externalProps, ref) {
+  const {
+    noPadding,
+    ...props
+  } = externalProps;
+  const className = cn('flex-grow overflow-auto', {
+    'mx-4 mb-4': !noPadding
   }, props.className);
-  return /*#__PURE__*/React.createElement(Tag, Object.assign({}, otherProps, {
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
     className: className,
-    "data-taco": "group",
     ref: ref
   }));
 });
-
-const MenuContext = /*#__PURE__*/React.createContext(undefined);
-const useCurrentMenu = () => {
-  return React.useContext(MenuContext);
-};
-
-const Content$2 = /*#__PURE__*/React.forwardRef(function MenuContent(props, ref) {
-  const internalRef = useMergedRef(ref);
-  const menu = useCurrentMenu();
+const Card = /*#__PURE__*/React.forwardRef(function Card(props, ref) {
   const {
-    align = 'start',
-    children,
-    placement: side,
-    ...otherProps
+    title,
+    menu,
+    children
   } = props;
-  const className = cn('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.Content, Object.assign({}, otherProps, {
-    align: align,
+  const className = cn('bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500', props.className);
+  return /*#__PURE__*/React.createElement("div", {
     className: className,
-    "data-taco": "menu",
-    side: side,
-    sideOffset: 3,
-    style: {
-      minWidth: menu === null || menu === void 0 ? void 0 : menu.minWidth
-    },
-    ref: internalRef
-  }), children));
+    "data-taco": "card",
+    ref: ref
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "mx-4 mt-4 mb-2 flex"
+  }, title && /*#__PURE__*/React.createElement("h4", {
+    className: "mb-0 flex-grow text-left"
+  }, title), menu ? /*#__PURE__*/React.createElement(IconButton, {
+    icon: "ellipsis-horizontal",
+    appearance: "discrete",
+    menu: menu,
+    className: "-mt-[4px]"
+  }) : null), children);
 });
+Card.Content = Content$2;
 
-const Icon$1 = ({
-  name
-}) => /*#__PURE__*/React.createElement("span", {
-  className: "absolute left-0 ml-1"
-}, /*#__PURE__*/React.createElement(Icon, {
-  className: "-ml-px -mt-px !h-5 !w-5",
-  name: name
-}));
-const useItemStyling = ({
-  disabled,
-  indented,
-  className
-}) => {
-  const menu = useCurrentMenu();
-  React.useEffect(() => {
-    if (indented && !(menu !== null && menu !== void 0 && menu.indented)) {
-      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', {
-    '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,
-    'cursor-not-allowed hover:bg-white text-grey-300': disabled
-  }, className);
-};
-const Shortcut = props => {
-  return /*#__PURE__*/React.createElement("span", Object.assign({}, props, {
-    className: "text-grey-700 ml-auto pl-3"
-  }));
+// React 18 has this built-in, when we upgrade this hook should be removed and the uuid dependency should be removed
+const useId = nativeId => {
+  return React__default.useMemo(() => nativeId !== null && nativeId !== void 0 ? nativeId : uuid.v4(), []);
 };
-const Item$1 = /*#__PURE__*/React.forwardRef(function MenuItem(props, ref) {
-  var _props$disabled;
+
+const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
   const {
-    dialog,
-    icon,
-    onClick,
-    shortcut,
+    checked,
+    highlighted,
+    indeterminate,
+    invalid,
+    label,
+    onChange,
     ...otherProps
   } = props;
-  const menu = useCurrentMenu();
-  const className = useItemStyling({
-    disabled: props.disabled,
-    indented: !!icon,
-    className: props.className
-  });
-  const disabled = (_props$disabled = props.disabled) !== null && _props$disabled !== void 0 ? _props$disabled : props['aria-disabled'];
-  let handleClick;
-  // radix has a bug that does not disable clicks when disabled is set on items
-  if (disabled) {
-    handleClick = event => {
-      event.preventDefault();
-      event.stopPropagation();
-    };
-  }
-  const handleSelect = event => {
-    if (onClick) {
-      onClick(event);
-    }
-    if (props['aria-haspopup'] || typeof dialog === 'function') {
-      event.preventDefault();
-    }
-  };
-  let button = /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Item, Object.assign({}, otherProps, {
+  const id = useId(props.id);
+  const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 mt-[0.1rem] focus:yt-focus',
+  //hover:shadow-[0_0_0_1px_rgba(235,235,235,1)]
+  {
+    'border-grey-300 text-blue-500 hover:text-blue-300 focus:border-blue-500 focus:hover:border-blue-300': !props.disabled && !invalid,
+    'border-grey-200 text-blue-300 cursor-not-allowed': props.disabled,
+    'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,
+    'border-red-500 text-red-500 hover:text-red-300 hover:border-red-300 focus:border-red-500 focus:hover:border-red-300': invalid && !props.disabled,
+    'self-start': !!label
+  }, props.className);
+  let handleChange;
+  if (onChange) {
+    handleChange = checked => onChange(checked === 'indeterminate' ? false : checked);
+  }
+  let labelledByProps = null;
+  if (label) {
+    labelledByProps = {
+      'aria-labelledby': `${id}-label`,
+      id
+    };
+  }
+  // the enter keyboard shortcut isn't supported by default, but we want it
+  const handleKeyDown = event => {
+    if (event.key === 'Enter') {
+      event.currentTarget.click();
+    }
+  };
+  const element = /*#__PURE__*/React.createElement(CheckboxPrimitive.Root, Object.assign({}, otherProps, labelledByProps, {
+    "data-taco": "checkbox",
+    checked: indeterminate ? 'indeterminate' : checked,
     className: className,
-    onClick: handleClick,
-    onSelect: handleSelect,
+    onCheckedChange: handleChange,
+    onKeyDown: handleKeyDown,
     ref: ref
-  }), icon && /*#__PURE__*/React.createElement(Icon$1, {
-    name: icon
-  }), props.children, shortcut && /*#__PURE__*/React.createElement(Shortcut, null, shortcut));
-  if (typeof dialog === 'function') {
-    button = dialog({
-      trigger: button,
-      onClose: menu === null || menu === void 0 ? void 0 : menu.close
+  }), /*#__PURE__*/React.createElement(CheckboxPrimitive.Indicator, {
+    className: "flex h-full w-full"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: indeterminate ? 'line' : 'tick',
+    className: "!h-full !w-full"
+  })));
+  if (label) {
+    const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {
+      'cursor-not-allowed text-grey-300': props.disabled
     });
+    return /*#__PURE__*/React.createElement("span", {
+      className: labelContainerClassName
+    }, element, /*#__PURE__*/React.createElement("label", {
+      htmlFor: id,
+      id: `${id}-label`
+    }, label));
   }
-  return button;
+  return element;
 });
+Checkbox.displayName = 'Checkbox';
 
-const Link = /*#__PURE__*/React.forwardRef(function MenuLink(props, ref) {
-  const {
-    href,
-    icon,
-    onClick,
-    ...otherProps
-  } = props;
-  const menu = useCurrentMenu();
-  const className = useItemStyling({
-    disabled: props.disabled,
-    indented: !!icon,
-    className: props.className
+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)]', {
+    'bg-white': !props.highlighted && !readOnly,
+    // default
+    'border-grey-300 focus:border-blue-300 focus:yt-focus': !invalid,
+    'hover:shadow-[0_0_0.1rem_theme(colors.grey.500)] active:border-blue-700': !invalid && !disabled,
+    // disabled
+    'border-grey-200 text-opacity-25 cursor-not-allowed placeholder:text-grey-700': disabled,
+    // highlighted
+    'bg-[rgba(255,255,0,0.075)]': props.highlighted && disabled,
+    'bg-[rgba(255,255,0,0.2)]': props.highlighted && !disabled,
+    // invalid
+    'border-red focus:border-red-300 focus:yt-focus-red active:border-red-700': invalid,
+    'hover:shadow-[0_0_0.15rem_theme(colors.red.500)]': invalid && !disabled,
+    // readOnly
+    'cursor-not-allowed text-black bg-grey-200': readOnly
   });
-  const handleClick = event => {
-    onClick === null || onClick === void 0 ? void 0 : onClick(event);
-    menu === null || menu === void 0 ? void 0 : menu.close();
+};
+const getButtonStateClasses = invalid => {
+  if (invalid) {
+    return 'border !border-red-500 group-peer-focus:!border-red-300 focus:yt-focus-red group-focus:group-active:!border-red-300 transition-colors ease-in';
+  }
+  return 'border border-grey-300 focus:!border-blue-300 group-peer-focus:!border-blue-300 group-peer-focus:group-peer-active:!border-blue-700 transition-colors transition-opacity ease-in';
+};
+
+const debounce = (fn, delay) => {
+  let timeoutId;
+  return function (...args) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => fn.apply(this, args), delay);
   };
-  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Item, Object.assign({}, otherProps, {
-    asChild: true,
-    className: className,
-    ref: ref,
-    onClick: handleClick
-  }), /*#__PURE__*/React.createElement("a", {
-    href: href,
-    target: "_blank"
-  }, icon && /*#__PURE__*/React.createElement(Icon$1, {
-    name: icon
-  }), props.children));
-});
+};
 
-const Trigger$2 = /*#__PURE__*/React.forwardRef(function MenuTrigger(props, ref) {
-  const menu = useCurrentMenu();
-  const internalRef = useMergedRef(ref);
+const getVisibility = element => Boolean(element && (element.offsetWidth || element.offsetHeight || element.getClientRects().length));
+const useBoundingClientRectListener = (ref, dependencies) => {
+  const [dimensions, setDimensions] = React.useState(undefined);
+  const isRefElementVisible = getVisibility(ref.current);
+  const [visibility, setVisibility] = React.useState(isRefElementVisible);
+  const resize = () => {
+    if (visibility) {
+      var _ref$current;
+      setDimensions((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect());
+    }
+  };
   React.useEffect(() => {
-    if (internalRef.current) {
-      menu === null || menu === void 0 ? void 0 : menu.setMinWidth(internalRef.current.getBoundingClientRect().width);
+    const timeout = setTimeout(resize, 0);
+    const debouncedResize = debounce(resize, 250);
+    window.addEventListener('resize', debouncedResize);
+    return () => {
+      clearTimeout(timeout);
+      window.removeEventListener('resize', debouncedResize);
+    };
+  }, [ref.current, visibility]);
+  React.useEffect(() => {
+    const newRefElementVisibility = getVisibility(ref.current);
+    if (visibility !== newRefElementVisibility) {
+      // When visibility of an element changes, then the new visibility of the element can only be checked after the
+      // component has rendered. That's why the visibility check is inside the useEffect. This useEffect will cause
+      // the consumer to rerender and that will cause the above hook to recalculate the dimensions
+      setVisibility(newRefElementVisibility);
     }
-  }, [internalRef]);
-  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Trigger, Object.assign({}, props, {
-    asChild: true,
-    ref: internalRef
-  }));
-});
-
-const Checkbox = /*#__PURE__*/React.forwardRef(function MenuCheckboxItem(props, ref) {
-  const {
-    checked,
-    children,
-    onChange,
-    ...otherProps
-  } = props;
-  const className = useItemStyling({
-    disabled: props.disabled,
-    indented: true,
-    className: props.className
   });
-  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.CheckboxItem, Object.assign({}, otherProps, {
-    checked: checked,
-    className: className,
-    onCheckedChange: onChange,
-    ref: ref
-  }), /*#__PURE__*/React.createElement(DropdownMenuPrimitive.ItemIndicator, {
-    className: "absolute left-0 ml-1.5"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: "tick",
-    className: "-ml-px !h-4 !w-4"
-  })), children);
-});
+  React.useEffect(() => {
+    if (dependencies) {
+      var _ref$current2;
+      setDimensions((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.getBoundingClientRect());
+    }
+  }, dependencies);
+  return dimensions;
+};
 
-const getRadioGroupItemValueAsString = value => String(value !== null && value !== void 0 ? value : '');
-const findByValue = (values, valueAsString) => values.find(value => getRadioGroupItemValueAsString(value) === valueAsString);
-const RadioGroupContext = /*#__PURE__*/React.createContext({
-  disabled: false,
-  invalid: false
-});
-const RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(props, ref) {
-  const context = React.useContext(RadioGroupContext);
-  const {
-    children,
-    value,
-    ...otherProps
-  } = props;
-  const isDisabled = context.disabled || props.disabled;
-  const className = cn('flex flex-shrink-0 self-start items-center justify-center h-4 w-4 mt-[0.2rem] rounded-full bg-white border-2', {
-    'border-grey-300 hover:border-4 focus:yt-focus aria-checked:bg-blue-500 aria-checked:border-blue-500 hover:aria-checked:border-blue-300': !isDisabled && !context.invalid,
-    'border-grey-200 cursor-not-allowed aria-checked:bg-blue-300 aria-checked:border-blue-300 ': isDisabled,
-    'border-red-500 hover:border-4 text-red-500 focus:border-red-500 focus:yt-focus-red aria-checked:bg-red-500 aria-checked:border-red': context.invalid && !isDisabled
-  });
-  const labelClassName = cn('flex items-center gap-2', {
-    'cursor-pointer': !isDisabled,
-    'cursor-not-allowed text-grey-300': isDisabled
-  }, props.className);
-  return /*#__PURE__*/React.createElement("label", {
-    className: labelClassName
-  }, /*#__PURE__*/React.createElement(RadioGroupPrimitive.Item, Object.assign({}, otherProps, {
-    className: className,
-    disabled: isDisabled,
-    ref: ref,
-    value: getRadioGroupItemValueAsString(value)
-  }), /*#__PURE__*/React.createElement(RadioGroupPrimitive.Indicator, {
-    className: "h-2 w-2 rounded-full bg-white"
-  })), children);
-});
-const useRadioGroup = props => {
+// merges an external ref (optional) with an internal ref (required)
+const useMergedRef = ref => {
+  const internalRef = React__default.useRef(null);
+  React__default.useEffect(() => {
+    if (ref) {
+      if (typeof ref === 'function') {
+        ref(internalRef.current);
+      } else {
+        ref.current = internalRef.current;
+      }
+    }
+  }, [ref]);
+  return internalRef;
+};
+
+const validSetSelectionRangeTypes = ['text', 'search', 'url', 'tel', 'password'];
+const InputWithoutDeprecatedFeatures = /*#__PURE__*/React.forwardRef(function InputWithoutDeprecatedFeatures(props, ref) {
   const {
-    children,
-    defaultValue,
-    disabled,
+    highlighted,
     invalid,
-    onChange,
-    orientation = 'vertical',
-    value,
-    ...otherProps
+    onKeyDown,
+    postfix,
+    prefix,
+    type = 'text',
+    ...attributes
   } = props;
-  const values = React.useMemo(() => {
-    const radioGroupItemValues = [];
-    React.Children.forEach(children, child => {
-      if ( /*#__PURE__*/React.isValidElement(child)) {
-        radioGroupItemValues.push(child.props.value);
-      }
-    });
-    return radioGroupItemValues;
-  }, [children]);
-  const context = React.useMemo(() => ({
-    disabled: disabled !== null && disabled !== void 0 ? disabled : false,
-    invalid: invalid !== null && invalid !== void 0 ? invalid : false
-  }), [disabled, invalid]);
-  let valueProps;
-  if (onChange !== undefined) {
-    const handleChange = value => onChange(findByValue(values, value));
-    valueProps = {
-      onValueChange: handleChange,
-      value: value !== undefined ? getRadioGroupItemValueAsString(value) : undefined
-    };
-  } else {
-    valueProps = {
-      defaultValue: defaultValue !== undefined ? getRadioGroupItemValueAsString(defaultValue) : undefined
+  const internalRef = useMergedRef(ref);
+  let handleKeyDown = onKeyDown;
+  // home and end keys only navigate to the start/end of input value if the input 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
+  // only the 'text', 'search', 'url', 'tel', 'password' input types support setSelectionRange
+  if (validSetSelectionRangeTypes.includes(type)) {
+    handleKeyDown = event => {
+      if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {
+        event.preventDefault();
+        const position = event.key === 'End' ? event.currentTarget.value.length : 0;
+        event.currentTarget.setSelectionRange(position, position);
+      }
+      if (typeof onKeyDown === 'function') {
+        onKeyDown(event);
+      }
     };
   }
-  return {
-    context,
-    props: {
-      ...otherProps,
-      ...valueProps,
-      children,
-      disabled,
-      orientation
+  const prefixRef = React.useRef(null);
+  const prefixRect = useBoundingClientRectListener(prefixRef);
+  const postfixRef = React.useRef(null);
+  const postfixRect = useBoundingClientRectListener(postfixRef);
+  const className = cn(getInputClasses(props), {
+    'pl-8': !!prefix,
+    'pr-8': !!postfix
+  }, attributes.className);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "relative inline-flex w-full",
+    "data-taco": "input-container",
+    style: {
+      opacity: 0.999
     }
-  };
-};
-const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
-  const {
-    context,
-    props: otherProps
-  } = useRadioGroup(props);
-  const className = cn('flex items-start gap-y-2', {
-    'flex-wrap gap-x-4 ': otherProps.orientation === 'horizontal',
-    'flex-col': otherProps.orientation === 'vertical'
-  }, otherProps.className);
-  return /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
-    value: context
-  }, /*#__PURE__*/React.createElement(RadioGroupPrimitive.Root, Object.assign({}, otherProps, {
+  }, /*#__PURE__*/React.createElement("input", Object.assign({}, attributes, {
     className: className,
-    "data-taco": "radio-group",
-    ref: ref
-  })));
+    "data-taco": "input",
+    onKeyDown: handleKeyDown,
+    ref: internalRef,
+    style: {
+      paddingLeft: prefixRect ? `${prefixRect.width - 1}px` : undefined,
+      paddingRight: postfixRect ? `${postfixRect.width - 1}px` : undefined
+    },
+    type: type
+  })), prefix ? /*#__PURE__*/React.createElement(Affix, {
+    type: "prefix",
+    children: prefix,
+    disabled: attributes.disabled,
+    ref: prefixRef
+  }) : null, postfix ? /*#__PURE__*/React.createElement(Affix, {
+    type: "postfix",
+    children: postfix,
+    disabled: attributes.disabled,
+    ref: postfixRef
+  }) : null);
 });
-RadioGroup.Item = RadioGroupItem;
-
-const RadioItem = props => {
-  const context = React.useContext(MenuRadioGroupContext);
+const Affix = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Affix(props, ref) {
   const {
     children,
-    value,
-    ...otherProps
+    disabled,
+    type
   } = props;
-  const disabled = context.disabled || props.disabled;
-  const className = useItemStyling({
-    disabled: disabled,
-    indented: true,
-    className: props.className
-  });
-  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.RadioItem, Object.assign({}, otherProps, {
-    className: className,
-    disabled: disabled,
-    value: getRadioGroupItemValueAsString(value)
-  }), /*#__PURE__*/React.createElement(DropdownMenuPrimitive.ItemIndicator, {
-    className: "absolute left-0 ml-1.5"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "ml-1 flex h-1.5 w-1.5 rounded-full bg-current "
-  })), children);
-};
-const MenuRadioGroupContext = /*#__PURE__*/React.createContext({
-  disabled: false
-});
-const RadioGroup$1 = /*#__PURE__*/React.forwardRef(function MenuRadioItem(props, ref) {
+  if (children) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('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,
+        'text-grey-700': !disabled,
+        'left-0 [&>button]:!-ml-2': type === 'prefix',
+        'right-0 [&>button]:!-mr-2': type === 'postfix'
+      }),
+      ref: ref
+    }, children);
+  }
+  return null;
+}));
+const Input = /*#__PURE__*/React.forwardRef(function LegacyInput(props, ref) {
+  var _attributes$postfix;
   const {
-    context,
-    props: otherProps
-  } = useRadioGroup(props);
-  const className = cn('flex flex-col', props.className);
-  return /*#__PURE__*/React.createElement(MenuRadioGroupContext.Provider, {
-    value: context
-  }, /*#__PURE__*/React.createElement(DropdownMenuPrimitive.RadioGroup, Object.assign({}, otherProps, {
-    className: className,
+    button,
+    icon,
+    ...attributes
+  } = props;
+  let postfix;
+  if (button) {
+    const disabled = button.props.disabled || attributes.disabled;
+    const buttonClassName = cn('items-center focus:z-10 flex justify-center rounded-l-none rounded-r h-full focus:rounded focus:outline-none', getButtonStateClasses(attributes.invalid), button.props.className);
+    postfix = /*#__PURE__*/React.cloneElement(button, {
+      className: buttonClassName,
+      disabled
+    });
+  } else if (icon) {
+    postfix = typeof icon === 'string' ? /*#__PURE__*/React.createElement(Icon, {
+      name: icon
+    }) : icon;
+  }
+  return /*#__PURE__*/React.createElement(InputWithoutDeprecatedFeatures, Object.assign({}, attributes, {
+    postfix: (_attributes$postfix = attributes.postfix) !== null && _attributes$postfix !== void 0 ? _attributes$postfix : postfix,
     ref: ref
-  })));
+  }));
 });
-RadioGroup$1.Item = RadioItem;
 
-const Separator = () => {
-  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Separator, {
-    className: "bg-grey-300 my-1 h-px"
-  });
+const getNextIndexFromKey = (key, length, index, direction = 'vertical') => {
+  const previousKey = direction === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
+  const nextKey = direction === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
+  switch (key) {
+    case previousKey:
+      return index !== undefined ? index - 1 < 0 ? 0 : index - 1 : index;
+    case nextKey:
+      return index !== undefined ? index + 1 >= length ? index : index + 1 : index;
+    case 'Home':
+      return 0;
+    case 'End':
+      return length - 1;
+    default:
+      return;
+  }
+};
+const useListKeyboardNavigation = (length = 0, options = {
+  direction: 'vertical'
+}) => {
+  const [index, setIndex] = React__default.useState(options.initialIndex);
+  const getNextIndex = event => {
+    const nextIndex = getNextIndexFromKey(event.key, length, index, options.direction);
+    if (nextIndex !== undefined) {
+      event.preventDefault();
+    }
+    return nextIndex;
+  };
+  return [index, setIndex, getNextIndex];
 };
 
-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', {
-    'pl-7': menu === null || menu === void 0 ? void 0 : menu.indented,
-    'pl-1.5': !(menu !== null && menu !== void 0 && menu.indented)
-  }, props.className);
-  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Label, Object.assign({}, props, {
-    className: className,
-    ref: ref
-  }));
-});
+const scrollToChildElement = (parent, child) => {
+  const clientHeight = parent.clientHeight;
+  if (parent.scrollHeight > clientHeight) {
+    const scrollTop = parent.scrollTop;
+    const scrollBottom = clientHeight + scrollTop;
+    const childBottom = child.offsetTop + child.offsetHeight;
+    if (childBottom > scrollBottom) {
+      parent.scrollTop = childBottom - clientHeight;
+    } else if (child.offsetTop < scrollTop) {
+      parent.scrollTop = child.offsetTop;
+    }
+  }
+};
+const useListScrollTo = (internalRef, itemRefs) => {
+  const scrollTo = index => {
+    if (internalRef && internalRef.current) {
+      if (index !== undefined) {
+        const activeRef = itemRefs[index];
+        if (activeRef && activeRef.current) {
+          scrollToChildElement(internalRef.current, activeRef.current);
+        }
+      } else {
+        internalRef.current.scrollTop = 0;
+      }
+    }
+  };
+  return {
+    scrollTo
+  };
+};
 
-const Menu$1 = /*#__PURE__*/React.forwardRef(function Menu(externalProps, ref) {
+const Spinner = /*#__PURE__*/React__default.forwardRef(function Spinner(props, ref) {
   const {
-    children,
-    defaultOpen: defaultProp,
-    onChange,
-    open: prop,
-    trigger,
-    ...props
-  } = externalProps;
-  const [indented, setIndented] = React.useState(false);
-  const [minWidth, setMinWidth] = React.useState(undefined);
-  const [open, setOpen] = reactUseControllableState.useControllableState({
-    // uncontrolled
-    defaultProp,
-    // controlled
-    onChange,
-    prop
-  });
-  const context = React.useMemo(() => ({
-    indented,
-    registerIndentation: () => setIndented(true),
-    minWidth,
-    setMinWidth: width => setMinWidth(width),
-    close: () => setOpen(false)
-  }), [indented, minWidth]);
-  return /*#__PURE__*/React.createElement(MenuContext.Provider, {
-    value: context
-  }, /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Root, Object.assign({}, props, {
-    modal: false,
-    open: open,
-    onOpenChange: setOpen
-  }), trigger && /*#__PURE__*/React.createElement(Trigger$2, {
-    ref: ref
-  }, trigger), children));
-});
-Menu$1.Trigger = Trigger$2;
-Menu$1.Content = Content$2;
-Menu$1.Item = Item$1;
-Menu$1.Link = Link;
-Menu$1.Checkbox = Checkbox;
-Menu$1.Separator = Separator;
-Menu$1.Header = Header;
-Menu$1.RadioGroup = RadioGroup$1;
-
-const useIntersectionObserver = (ref, offset) => {
-  const [intersectedIndexes, setIntersectedIndexes] = React__default.useState({});
-  const handleIntersection = (entries, observer) => {
-    if (observer.root) {
-      const children = Array.from(observer.root.children);
-      const map = {};
-      entries.forEach(entry => {
-        // entries only contains the items being intersected not all children of the ref
-        // so use root and the the entry being intersected to find its real index
-        // on first mount this is different - all children are present
-        map[children.indexOf(entry.target)] = entry.isIntersecting;
-      });
-      setIntersectedIndexes(prev => ({
-        ...prev,
-        ...map
-      }));
-    }
-  };
-  const intersectedChildIndex = React__default.useMemo(() => {
-    const index = Object.values(intersectedIndexes).indexOf(false);
-    return index > -1 ? index : undefined;
-  }, [intersectedIndexes]);
-  const hasRootMargin = intersectedChildIndex !== undefined && offset;
+    delay = 500,
+    label,
+    ...otherProps
+  } = props;
+  const [visible, setVisibility] = React__default.useState(!delay);
   React__default.useEffect(() => {
-    const observer = new IntersectionObserver(handleIntersection, {
-      root: ref.current,
-      // offset the button, but only after the first item has been intersected
-      rootMargin: hasRootMargin ? `0px -${offset}px 0px 0px` : undefined,
-      threshold: 1
-    });
-    if (observer.root) {
-      Array.from(observer.root.children).forEach(item => {
-        if (item.getAttribute('data-intersection-observer') !== 'ignore') {
-          observer.observe(item);
-        }
-      });
+    let timeout;
+    if (delay) {
+      timeout = window.setTimeout(() => setVisibility(true), delay);
     }
     return () => {
-      observer.disconnect();
+      if (timeout) {
+        clearTimeout(timeout);
+      }
     };
-  }, [hasRootMargin]);
-  return intersectedChildIndex;
-};
-
-const sanitizeButtonPropsForMenuItem = props => {
-  const {
-    appearance: _1,
-    drawer: _2,
-    fluid: _3,
-    hanger: _4,
-    menu: _5,
-    popover: _6,
-    tooltip: _7,
-    ...attributes
-  } = props;
-  return attributes;
-};
-const OFFSET = 32 + 8;
-const ButtonGroup = /*#__PURE__*/React__default.forwardRef(function ButtonGroup(props, ref) {
-  const internalRef = useMergedRef(ref);
-  const intersectedChildIndex = useIntersectionObserver(internalRef, OFFSET);
-  const children = React__default.Children.toArray(props.children);
-  const hidden = intersectedChildIndex !== undefined ? children.slice(intersectedChildIndex) : [];
-  return /*#__PURE__*/React__default.createElement(Group, Object.assign({}, props, {
-    ref: internalRef
-  }), children.map((child, index) => /*#__PURE__*/React__default.cloneElement(child, {
-    className: cn(child.props.className, {
-      visible: intersectedChildIndex === undefined || index < intersectedChildIndex,
-      'invisible order-[100] pointer-events-none': intersectedChildIndex !== undefined && index >= intersectedChildIndex
-    })
-  })), hidden.length ? /*#__PURE__*/React__default.createElement(IconButton, {
-    className: "sticky right-0 order-[99]",
-    "data-intesection-observer": "ignore",
-    icon: "more",
-    menu: menuProps => /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, hidden.map((button, index) => /*#__PURE__*/React__default.createElement(Menu$1.Item, Object.assign({
-      key: index
-    }, sanitizeButtonPropsForMenuItem(button.props))))))
-  }) : null);
+  }, [delay]);
+  if (!visible) {
+    return null;
+  }
+  const className = cn('inline-flex flex-col relative items-center', otherProps.className);
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "spinner",
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement("svg", {
+    className: "h-10 w-10 animate-[spinnerRotation_2s_linear_infinite]",
+    viewBox: "0 0 100 100",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("circle", {
+    cx: "50",
+    cy: "50",
+    r: "45"
+  })), label && /*#__PURE__*/React__default.createElement("span", {
+    className: "mt-4"
+  }, label));
 });
 
-const thisYear = /*#__PURE__*/new Date().getFullYear();
-const years = [];
-for (let i = thisYear - 50; i <= thisYear + 10; i += 1) {
-  years.push(i);
-}
-const Navbar = /*#__PURE__*/React.memo(({
-  onMonthChange,
-  onNextClick,
-  onPreviousClick,
-  value = new Date()
-}) => {
-  const {
-    texts: {
-      calendar: {
-        actions,
-        months
-      }
+const getId = (id, value) => `${id}_${value}`;
+const getNextEnabledItem = (event, data, index) => {
+  const nextIndex = getNextIndexFromKey(event.key, data.length, index);
+  if (nextIndex) {
+    if (nextIndex === index) {
+      return index;
+    } else if (data[nextIndex] && data[nextIndex].disabled) {
+      return getNextEnabledItem(event, data, nextIndex);
     }
-  } = useLocalization();
-  const handleChange = function handleChange(event) {
-    const {
-      year,
-      month
-    } = event.target.form;
-    onMonthChange(new Date(year.value, month.value));
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "mb-2 flex items-center justify-between"
-  }, /*#__PURE__*/React.createElement("form", {
-    className: "inline-flex space-x-1"
-  }, /*#__PURE__*/React.createElement("select", {
-    className: "h-8 px-2",
-    name: "month",
-    onChange: handleChange,
-    value: value.getMonth()
-  }, months.map((month, i) => /*#__PURE__*/React.createElement("option", {
-    key: month,
-    value: i
-  }, month))), /*#__PURE__*/React.createElement("select", {
-    className: "h-8 px-2",
-    name: "year",
-    onChange: handleChange,
-    value: value.getFullYear()
-  }, years.map(year => /*#__PURE__*/React.createElement("option", {
-    key: year,
-    value: year
-  }, String(year))))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconButton, {
-    appearance: "discrete",
-    icon: "chevron-left",
-    "aria-label": actions.previousMonth,
-    onClick: () => onPreviousClick(),
-    rounded: true
-  }), /*#__PURE__*/React.createElement(IconButton, {
-    appearance: "discrete",
-    icon: "chevron-right",
-    "aria-label": actions.nextMonth,
-    onClick: () => onNextClick(),
-    rounded: true
-  })));
-});
-const Calendar$1 = /*#__PURE__*/React.forwardRef(function Calendar(props, ref) {
+  }
+  return nextIndex;
+};
+const ScrollableList = /*#__PURE__*/React.forwardRef(function ScrollableList(props, ref) {
   const {
-    onChange: handleChange,
-    value,
-    disabledDays,
+    data,
+    disabled,
+    highlighted,
+    id,
+    invalid: _,
+    loading,
+    onChange: setCurrentIndex,
+    onClick,
+    onFocus,
+    onKeyDown,
+    readOnly,
+    scrollOnFocus = false,
+    value: currentIndex,
+    multiselect,
+    selectedIndexes = [],
+    allOptionsSelected = false,
     ...otherProps
   } = props;
+  const listRef = useMergedRef(ref);
+  const itemRefs = React.useMemo(() => data.map(() => /*#__PURE__*/React.createRef()), [data]);
   const {
-    locale,
     texts
   } = useLocalization();
-  const [visibleMonth, setVisibleMonth] = React.useState(value !== null && value !== void 0 ? value : new Date());
+  const {
+    scrollTo
+  } = useListScrollTo(listRef, itemRefs);
   React.useEffect(() => {
-    if (visibleMonth !== value) {
-      setVisibleMonth(value !== null && value !== void 0 ? value : new Date());
+    var _itemRefs$currentInde;
+    if (currentIndex && (_itemRefs$currentInde = itemRefs[currentIndex]) !== null && _itemRefs$currentInde !== void 0 && _itemRefs$currentInde.current) {
+      var _itemRefs$currentInde2;
+      (_itemRefs$currentInde2 = itemRefs[currentIndex].current) === null || _itemRefs$currentInde2 === void 0 ? void 0 : _itemRefs$currentInde2.scrollIntoView({
+        block: 'center'
+      });
     }
-  }, [value]);
-  const handleDayClick = (date, modifiers, event) => {
-    if (modifiers.outside || modifiers.disabled) {
-      return;
+  }, []);
+  React.useEffect(() => {
+    scrollTo(currentIndex);
+  }, [currentIndex]);
+  const handleKeyDown = event => {
+    const nextIndex = getNextEnabledItem(event, data, currentIndex);
+    if (nextIndex !== undefined && nextIndex !== currentIndex) {
+      event.preventDefault();
+      scrollTo(nextIndex);
+      setCurrentIndex(nextIndex);
+    }
+    if (onKeyDown) {
+      event.persist();
+      const index = nextIndex !== undefined ? nextIndex : currentIndex;
+      onKeyDown(event, index);
     }
-    handleChange(date, event);
   };
-  const handleCalendarClickToday = () => {
-    const today = new Date();
-    // set to midday to avoid UTC offset causing dates to be mismatched server side
-    today.setHours(12);
-    today.setMinutes(0);
-    today.setSeconds(0);
-    handleChange(today);
-  };
-  const className = cn('flex bg-white text-xs p-4', otherProps.className);
-  return /*#__PURE__*/React.createElement("div", {
-    "data-taco": "calendar"
-  }, /*#__PURE__*/React.createElement(ReactDayPicker, Object.assign({}, otherProps, {
-    className: className,
-    month: visibleMonth,
-    selectedDays: value,
-    locale: locale.substring(0, 2),
-    firstDayOfWeek: 1,
-    months: texts.calendar.months,
-    weekdaysShort: texts.calendar.weekdaysShort,
-    navbarElement: navProps => /*#__PURE__*/React.createElement(Navbar, Object.assign({}, navProps, {
-      onMonthChange: setVisibleMonth,
-      value: visibleMonth
-    })),
-    onDayClick: handleDayClick,
-    onMonthChange: setVisibleMonth,
-    onTodayButtonClick: handleCalendarClickToday,
-    captionElement: () => null,
-    todayButton: texts.calendar.actions.today,
-    numberOfMonths: 1,
-    ref: ref,
-    disabledDays: disabledDays
-  })));
-});
-
-const Content$3 = /*#__PURE__*/React.forwardRef(function CardContent(externalProps, ref) {
-  const {
-    noPadding,
-    ...props
-  } = externalProps;
-  const className = cn('flex-grow overflow-auto', {
-    'mx-4 mb-4': !noPadding
-  }, props.className);
-  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
-    className: className,
-    ref: ref
-  }));
-});
-const Card = /*#__PURE__*/React.forwardRef(function Card(props, ref) {
-  const {
-    title,
-    menu,
-    children
-  } = props;
-  const className = cn('bg-white flex flex-col rounded-xl border border-solid border-radius-[12px] border-grey-300 hover:border-grey-500', props.className);
-  return /*#__PURE__*/React.createElement("div", {
-    className: className,
-    "data-taco": "card",
-    ref: ref
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "mx-4 mt-4 mb-2 flex"
-  }, title && /*#__PURE__*/React.createElement("h4", {
-    className: "mb-0 flex-grow text-left"
-  }, title), menu ? /*#__PURE__*/React.createElement(IconButton, {
-    icon: "ellipsis-horizontal",
-    appearance: "discrete",
-    menu: menu,
-    className: "-mt-[4px]"
-  }) : null), children);
-});
-Card.Content = Content$3;
-
-// React 18 has this built-in, when we upgrade this hook should be removed and the uuid dependency should be removed
-const useId = nativeId => {
-  return React__default.useMemo(() => nativeId !== null && nativeId !== void 0 ? nativeId : uuid.v4(), []);
-};
-
-const Checkbox$1 = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
-  const {
-    checked,
-    highlighted,
-    indeterminate,
-    invalid,
-    label,
-    onChange,
-    ...otherProps
-  } = props;
-  const id = useId(props.id);
-  const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 mt-[0.1rem] focus:yt-focus',
-  //hover:shadow-[0_0_0_1px_rgba(235,235,235,1)]
-  {
-    'border-grey-300 text-blue-500 hover:text-blue-300 focus:border-blue-500 focus:hover:border-blue-300': !props.disabled && !invalid,
-    'border-grey-200 text-blue-300 cursor-not-allowed': props.disabled,
-    'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,
-    'border-red-500 text-red-500 hover:text-red-300 hover:border-red-300 focus:border-red-500 focus:hover:border-red-300': invalid && !props.disabled,
-    'self-start': !!label
-  }, props.className);
-  let handleChange;
-  if (onChange) {
-    handleChange = checked => onChange(checked === 'indeterminate' ? false : checked);
-  }
-  let labelledByProps = null;
-  if (label) {
-    labelledByProps = {
-      'aria-labelledby': `${id}-label`,
-      id
-    };
-  }
-  // the enter keyboard shortcut isn't supported by default, but we want it
-  const handleKeyDown = event => {
-    if (event.key === 'Enter') {
-      event.currentTarget.click();
-    }
-  };
-  const element = /*#__PURE__*/React.createElement(CheckboxPrimitive.Root, Object.assign({}, otherProps, labelledByProps, {
-    "data-taco": "checkbox",
-    checked: indeterminate ? 'indeterminate' : checked,
-    className: className,
-    onCheckedChange: handleChange,
-    onKeyDown: handleKeyDown,
-    ref: ref
-  }), /*#__PURE__*/React.createElement(CheckboxPrimitive.Indicator, {
-    className: "flex h-full w-full"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: indeterminate ? 'line' : 'tick',
-    className: "!h-full !w-full"
-  })));
-  if (label) {
-    const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {
-      'cursor-not-allowed text-grey-300': props.disabled
-    });
-    return /*#__PURE__*/React.createElement("span", {
-      className: labelContainerClassName
-    }, element, /*#__PURE__*/React.createElement("label", {
-      htmlFor: id,
-      id: `${id}-label`
-    }, label));
-  }
-  return element;
-});
-Checkbox$1.displayName = 'Checkbox';
-
-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)]', {
-    'bg-white': !props.highlighted && !readOnly,
-    // default
-    'border-grey-300 focus:border-blue-300 focus:yt-focus': !invalid,
-    'hover:shadow-[0_0_0.1rem_theme(colors.grey.500)] active:border-blue-700': !invalid && !disabled,
-    // disabled
-    'border-grey-200 text-opacity-25 cursor-not-allowed placeholder:text-grey-700': disabled,
-    // highlighted
-    'bg-[rgba(255,255,0,0.075)]': props.highlighted && disabled,
-    'bg-[rgba(255,255,0,0.2)]': props.highlighted && !disabled,
-    // invalid
-    'border-red focus:border-red-300 focus:yt-focus-red active:border-red-700': invalid,
-    'hover:shadow-[0_0_0.15rem_theme(colors.red.500)]': invalid && !disabled,
-    // readOnly
-    'cursor-not-allowed text-black bg-grey-200': readOnly
-  });
-};
-const getButtonStateClasses = invalid => {
-  if (invalid) {
-    return 'border !border-red-500 group-peer-focus:!border-red-300 focus:yt-focus-red group-focus:group-active:!border-red-300 transition-colors ease-in';
-  }
-  return 'border border-grey-300 focus:!border-blue-300 group-peer-focus:!border-blue-300 group-peer-focus:group-peer-active:!border-blue-700 transition-colors transition-opacity ease-in';
-};
-
-const debounce = (fn, delay) => {
-  let timeoutId;
-  return function (...args) {
-    clearTimeout(timeoutId);
-    timeoutId = setTimeout(() => fn.apply(this, args), delay);
-  };
-};
-
-const getVisibility = element => Boolean(element && (element.offsetWidth || element.offsetHeight || element.getClientRects().length));
-const useBoundingClientRectListener = (ref, dependencies) => {
-  const [dimensions, setDimensions] = React.useState(undefined);
-  const isRefElementVisible = getVisibility(ref.current);
-  const [visibility, setVisibility] = React.useState(isRefElementVisible);
-  const resize = () => {
-    if (visibility) {
-      var _ref$current;
-      setDimensions((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect());
-    }
-  };
-  React.useEffect(() => {
-    const timeout = setTimeout(resize, 0);
-    const debouncedResize = debounce(resize, 250);
-    window.addEventListener('resize', debouncedResize);
-    return () => {
-      clearTimeout(timeout);
-      window.removeEventListener('resize', debouncedResize);
-    };
-  }, [ref.current, visibility]);
-  React.useEffect(() => {
-    const newRefElementVisibility = getVisibility(ref.current);
-    if (visibility !== newRefElementVisibility) {
-      // When visibility of an element changes, then the new visibility of the element can only be checked after the
-      // component has rendered. That's why the visibility check is inside the useEffect. This useEffect will cause
-      // the consumer to rerender and that will cause the above hook to recalculate the dimensions
-      setVisibility(newRefElementVisibility);
-    }
-  });
-  React.useEffect(() => {
-    if (dependencies) {
-      var _ref$current2;
-      setDimensions((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.getBoundingClientRect());
-    }
-  }, dependencies);
-  return dimensions;
-};
-
-const validSetSelectionRangeTypes = ['text', 'search', 'url', 'tel', 'password'];
-const InputWithoutDeprecatedFeatures = /*#__PURE__*/React.forwardRef(function InputWithoutDeprecatedFeatures(props, ref) {
-  const {
-    highlighted,
-    invalid,
-    onKeyDown,
-    postfix,
-    prefix,
-    type = 'text',
-    ...attributes
-  } = props;
-  const internalRef = useMergedRef(ref);
-  let handleKeyDown = onKeyDown;
-  // home and end keys only navigate to the start/end of input value if the input 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
-  // only the 'text', 'search', 'url', 'tel', 'password' input types support setSelectionRange
-  if (validSetSelectionRangeTypes.includes(type)) {
-    handleKeyDown = event => {
-      if (!event.shiftKey && (event.key === 'Home' || event.key === 'End')) {
-        event.preventDefault();
-        const position = event.key === 'End' ? event.currentTarget.value.length : 0;
-        event.currentTarget.setSelectionRange(position, position);
-      }
-      if (typeof onKeyDown === 'function') {
-        onKeyDown(event);
-      }
-    };
-  }
-  const prefixRef = React.useRef(null);
-  const prefixRect = useBoundingClientRectListener(prefixRef);
-  const postfixRef = React.useRef(null);
-  const postfixRect = useBoundingClientRectListener(postfixRef);
-  const className = cn(getInputClasses(props), {
-    'pl-8': !!prefix,
-    'pr-8': !!postfix
-  }, attributes.className);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "relative inline-flex w-full",
-    "data-taco": "input-container",
-    style: {
-      opacity: 0.999
-    }
-  }, /*#__PURE__*/React.createElement("input", Object.assign({}, attributes, {
-    className: className,
-    "data-taco": "input",
-    onKeyDown: handleKeyDown,
-    ref: internalRef,
-    style: {
-      paddingLeft: prefixRect ? `${prefixRect.width - 1}px` : undefined,
-      paddingRight: postfixRect ? `${postfixRect.width - 1}px` : undefined
-    },
-    type: type
-  })), prefix ? /*#__PURE__*/React.createElement(Affix, {
-    type: "prefix",
-    children: prefix,
-    disabled: attributes.disabled,
-    ref: prefixRef
-  }) : null, postfix ? /*#__PURE__*/React.createElement(Affix, {
-    type: "postfix",
-    children: postfix,
-    disabled: attributes.disabled,
-    ref: postfixRef
-  }) : null);
-});
-const Affix = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function Affix(props, ref) {
-  const {
-    children,
-    disabled,
-    type
-  } = props;
-  if (children) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: cn('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,
-        'text-grey-700': !disabled,
-        'left-0 [&>button]:!-ml-2': type === 'prefix',
-        'right-0 [&>button]:!-mr-2': type === 'postfix'
-      }),
-      ref: ref
-    }, children);
-  }
-  return null;
-}));
-const Input = /*#__PURE__*/React.forwardRef(function LegacyInput(props, ref) {
-  var _attributes$postfix;
-  const {
-    button,
-    icon,
-    ...attributes
-  } = props;
-  let postfix;
-  if (button) {
-    const disabled = button.props.disabled || attributes.disabled;
-    const buttonClassName = cn('items-center focus:z-10 flex justify-center rounded-l-none rounded-r h-full focus:rounded focus:outline-none', getButtonStateClasses(attributes.invalid), button.props.className);
-    postfix = /*#__PURE__*/React.cloneElement(button, {
-      className: buttonClassName,
-      disabled
-    });
-  } else if (icon) {
-    postfix = typeof icon === 'string' ? /*#__PURE__*/React.createElement(Icon, {
-      name: icon
-    }) : icon;
-  }
-  return /*#__PURE__*/React.createElement(InputWithoutDeprecatedFeatures, Object.assign({}, attributes, {
-    postfix: (_attributes$postfix = attributes.postfix) !== null && _attributes$postfix !== void 0 ? _attributes$postfix : postfix,
-    ref: ref
-  }));
-});
-
-const getNextIndexFromKey = (key, length, index, direction = 'vertical') => {
-  const previousKey = direction === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
-  const nextKey = direction === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
-  switch (key) {
-    case previousKey:
-      return index !== undefined ? index - 1 < 0 ? 0 : index - 1 : index;
-    case nextKey:
-      return index !== undefined ? index + 1 >= length ? index : index + 1 : index;
-    case 'Home':
-      return 0;
-    case 'End':
-      return length - 1;
-    default:
-      return;
-  }
-};
-const useListKeyboardNavigation = (length = 0, options = {
-  direction: 'vertical'
-}) => {
-  const [index, setIndex] = React__default.useState(options.initialIndex);
-  const getNextIndex = event => {
-    const nextIndex = getNextIndexFromKey(event.key, length, index, options.direction);
-    if (nextIndex !== undefined) {
-      event.preventDefault();
-    }
-    return nextIndex;
-  };
-  return [index, setIndex, getNextIndex];
-};
-
-const scrollToChildElement = (parent, child) => {
-  const clientHeight = parent.clientHeight;
-  if (parent.scrollHeight > clientHeight) {
-    const scrollTop = parent.scrollTop;
-    const scrollBottom = clientHeight + scrollTop;
-    const childBottom = child.offsetTop + child.offsetHeight;
-    if (childBottom > scrollBottom) {
-      parent.scrollTop = childBottom - clientHeight;
-    } else if (child.offsetTop < scrollTop) {
-      parent.scrollTop = child.offsetTop;
-    }
-  }
-};
-const useListScrollTo = (internalRef, itemRefs) => {
-  const scrollTo = index => {
-    if (internalRef && internalRef.current) {
-      if (index !== undefined) {
-        const activeRef = itemRefs[index];
-        if (activeRef && activeRef.current) {
-          scrollToChildElement(internalRef.current, activeRef.current);
-        }
-      } else {
-        internalRef.current.scrollTop = 0;
-      }
-    }
-  };
-  return {
-    scrollTo
-  };
-};
-
-const Spinner = /*#__PURE__*/React__default.forwardRef(function Spinner(props, ref) {
-  const {
-    delay = 500,
-    label,
-    ...otherProps
-  } = props;
-  const [visible, setVisibility] = React__default.useState(!delay);
-  React__default.useEffect(() => {
-    let timeout;
-    if (delay) {
-      timeout = window.setTimeout(() => setVisibility(true), delay);
-    }
-    return () => {
-      if (timeout) {
-        clearTimeout(timeout);
-      }
-    };
-  }, [delay]);
-  if (!visible) {
-    return null;
-  }
-  const className = cn('inline-flex flex-col relative items-center', otherProps.className);
-  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
-    className: className,
-    "data-taco": "spinner",
-    ref: ref
-  }), /*#__PURE__*/React__default.createElement("svg", {
-    className: "h-10 w-10 animate-[spinnerRotation_2s_linear_infinite]",
-    viewBox: "0 0 100 100",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default.createElement("circle", {
-    cx: "50",
-    cy: "50",
-    r: "45"
-  })), label && /*#__PURE__*/React__default.createElement("span", {
-    className: "mt-4"
-  }, label));
-});
-
-const getId = (id, value) => `${id}_${value}`;
-const getNextEnabledItem = (event, data, index) => {
-  const nextIndex = getNextIndexFromKey(event.key, data.length, index);
-  if (nextIndex) {
-    if (nextIndex === index) {
-      return index;
-    } else if (data[nextIndex] && data[nextIndex].disabled) {
-      return getNextEnabledItem(event, data, nextIndex);
-    }
-  }
-  return nextIndex;
-};
-const ScrollableList = /*#__PURE__*/React.forwardRef(function ScrollableList(props, ref) {
-  const {
-    data,
-    disabled,
-    highlighted,
-    id,
-    invalid: _,
-    loading,
-    onChange: setCurrentIndex,
-    onClick,
-    onFocus,
-    onKeyDown,
-    readOnly,
-    scrollOnFocus = false,
-    value: currentIndex,
-    multiselect,
-    selectedIndexes = [],
-    allOptionsSelected = false,
-    ...otherProps
-  } = props;
-  const listRef = useMergedRef(ref);
-  const itemRefs = React.useMemo(() => data.map(() => /*#__PURE__*/React.createRef()), [data]);
-  const {
-    texts
-  } = useLocalization();
-  const {
-    scrollTo
-  } = useListScrollTo(listRef, itemRefs);
-  React.useEffect(() => {
-    var _itemRefs$currentInde;
-    if (currentIndex && (_itemRefs$currentInde = itemRefs[currentIndex]) !== null && _itemRefs$currentInde !== void 0 && _itemRefs$currentInde.current) {
-      var _itemRefs$currentInde2;
-      (_itemRefs$currentInde2 = itemRefs[currentIndex].current) === null || _itemRefs$currentInde2 === void 0 ? void 0 : _itemRefs$currentInde2.scrollIntoView({
-        block: 'center'
-      });
-    }
-  }, []);
-  React.useEffect(() => {
-    scrollTo(currentIndex);
-  }, [currentIndex]);
-  const handleKeyDown = event => {
-    const nextIndex = getNextEnabledItem(event, data, currentIndex);
-    if (nextIndex !== undefined && nextIndex !== currentIndex) {
-      event.preventDefault();
-      scrollTo(nextIndex);
-      setCurrentIndex(nextIndex);
-    }
-    if (onKeyDown) {
-      event.persist();
-      const index = nextIndex !== undefined ? nextIndex : currentIndex;
-      onKeyDown(event, index);
-    }
-  };
-  const handleClick = index => event => {
-    setCurrentIndex(index);
-    if (onClick) {
-      event.persist();
-      onClick(event, index);
-    }
+  const handleClick = index => event => {
+    setCurrentIndex(index);
+    if (onClick) {
+      event.persist();
+      onClick(event, index);
+    }
   };
   const handleFocus = event => {
     if (scrollOnFocus) {
@@ -5153,7 +4684,7 @@ const ScrollableList = /*#__PURE__*/React.forwardRef(function ScrollableList(pro
     ...optionProps
   }) => /*#__PURE__*/React.createElement("li", Object.assign({}, optionProps), icon, /*#__PURE__*/React.createElement("span", {
     className: "flex-grow truncate text-left"
-  }, children), multiselect && /*#__PURE__*/React.createElement(Checkbox$1
+  }, children), multiselect && /*#__PURE__*/React.createElement(Checkbox
   // In multiselect variant, this checkbox only acts as visual representation of item being selected,
   // so need to be taken out of screen reader scope.
   , {
@@ -5219,7 +4750,7 @@ const getSelectedIndexesFromValue = (data, value) => {
   if (typeof value !== 'string') return [];
   return value.split(',').map(v => data.findIndex(o => String(o.value) === v)).filter(v => v !== -1);
 };
-const findByValue$1 = (data, value) => {
+const findByValue = (data, value) => {
   return data.find(option => getValue(option.value) === getValue(value));
 };
 const searchForString = (child, value, strategy = 'includes') => {
@@ -5430,7 +4961,7 @@ const useCombobox = ({
       return;
     }
     if (onChange && event.target.value !== value) {
-      const item = findByValue$1(flattenedData, event.target.value);
+      const item = findByValue(flattenedData, event.target.value);
       event.detail = sanitizeItem(item);
       const parents = getOptionParents(flattenedData, item === null || item === void 0 ? void 0 : item.path);
       if (parents !== null && parents.length > 0) {
@@ -5815,7 +5346,7 @@ const PopoverContext = /*#__PURE__*/React.createContext({
   props: {},
   ref: null
 });
-const Trigger$3 = /*#__PURE__*/React.forwardRef(function PopoverAnchor(props, externalRef) {
+const Trigger$2 = /*#__PURE__*/React.forwardRef(function PopoverAnchor(props, externalRef) {
   var _props$children;
   const {
     ref: parentRef,
@@ -5844,7 +5375,7 @@ const RenderPropWrapper = /*#__PURE__*/React.forwardRef(function RenderPropWrapp
     ref
   });
 });
-const Content$4 = /*#__PURE__*/React.forwardRef(function PopoverContent(props, ref) {
+const Content$3 = /*#__PURE__*/React.forwardRef(function PopoverContent(props, ref) {
   const {
     placement: side,
     ...popoverContentProps
@@ -5893,10 +5424,10 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(props, ref) {
     modal: modal,
     open: open,
     onOpenChange: onChange
-  }, trigger && /*#__PURE__*/React.createElement(Trigger$3, null, trigger), children));
+  }, trigger && /*#__PURE__*/React.createElement(Trigger$2, null, trigger), children));
 });
-Popover.Trigger = Trigger$3;
-Popover.Content = Content$4;
+Popover.Trigger = Trigger$2;
+Popover.Content = Content$3;
 Popover.Close = Close$1;
 Popover.Portal = PopoverPrimitive.Portal;
 
@@ -5922,10 +5453,14 @@ const Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref)
     "data-taco": "datepicker",
     style: style
   }, /*#__PURE__*/React.createElement(Input, Object.assign({}, input, {
-    button: /*#__PURE__*/React.createElement(IconButton, {
+    button: /*#__PURE__*/React.createElement(Tooltip, {
+      title: texts.datepicker.calendar
+    }, /*#__PURE__*/React.createElement(IconButton, {
       "aria-label": texts.datepicker.expand,
       disabled: input.disabled || input.readOnly,
       icon: "calendar",
+      tabIndex: -1,
+      className: " border-grey-300 group-peer-focus:!border-blue-300 group-peer-focus:group-peer-active:!border-blue-700 flex h-full items-center justify-center rounded-l-none rounded-r border transition-colors transition-opacity ease-in focus:z-10 focus:rounded focus:!border-blue-300 focus:outline-none",
       popover: props => /*#__PURE__*/React.createElement(Popover, Object.assign({}, props), /*#__PURE__*/React.createElement(Popover.Content, null, ({
         close
       }) => /*#__PURE__*/React.createElement("div", {
@@ -5934,8 +5469,7 @@ const Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref)
         onChange: (date, event) => {
           calendar.onChange(date, event);
           close();
-        },
-        tabIndex: -1
+        }
       })), shortcuts && /*#__PURE__*/React.createElement("div", {
         className: "border-grey-300 flex flex-col border-l"
       }, /*#__PURE__*/React.createElement("span", {
@@ -5959,7 +5493,7 @@ const Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref)
           close();
         }
       }, texts.datepicker.clear)))))
-    })
+    }))
   })));
 });
 Datepicker.displayName = 'Datepicker';
@@ -5986,7 +5520,7 @@ const useCurrentDialog = () => {
   return React.useContext(DialogContext);
 };
 
-const Trigger$4 = /*#__PURE__*/React.forwardRef(function DialogTrigger(props, externalRef) {
+const Trigger$3 = /*#__PURE__*/React.forwardRef(function DialogTrigger(props, externalRef) {
   const {
     ref: parentRef,
     props: parentProps
@@ -6084,7 +5618,7 @@ const RenderPropWrapper$1 = /*#__PURE__*/React.forwardRef(function RenderPropWra
     ...renderProps
   });
 });
-const Content$5 = /*#__PURE__*/React.forwardRef(function DialogContent(props, ref) {
+const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, ref) {
   const dialog = useCurrentDialog();
   const internalRef = useMergedRef(ref);
   const {
@@ -6251,16 +5785,37 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(props, ref) {
     defaultOpen: defaultOpen,
     open: open,
     onOpenChange: onChange
-  }, trigger && /*#__PURE__*/React.createElement(Trigger$4, null, trigger), children));
+  }, trigger && /*#__PURE__*/React.createElement(Trigger$3, null, trigger), children));
 });
-Dialog.Trigger = Trigger$4;
-Dialog.Content = Content$5;
+Dialog.Trigger = Trigger$3;
+Dialog.Content = Content$4;
 Dialog.Title = Title$1;
 Dialog.Footer = Footer$1;
 Dialog.Extra = Extra;
 Dialog.Drawer = DialogDrawer;
 Dialog.Close = Close$2;
 
+const Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
+  const {
+    as: Tag = 'span',
+    orientation = 'horizontal',
+    ...otherProps
+  } = props;
+  const className = cn('flex gap-2', {
+    'flex-col ': orientation === 'vertical'
+  }, props.className);
+  return /*#__PURE__*/React.createElement(Tag, Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "group",
+    ref: ref
+  }));
+});
+
+const MenuContext = /*#__PURE__*/React.createContext(undefined);
+const useCurrentMenu = () => {
+  return React.useContext(MenuContext);
+};
+
 /* eslint-disable @typescript-eslint/no-empty-function */
 const DrawerContext = /*#__PURE__*/React.createContext({
   closeOnEscape: true,
@@ -6614,7 +6169,7 @@ const DrawerContent = /*#__PURE__*/React__default.forwardRef(function Content(pr
     ref: ref
   }, content);
 });
-const Content$6 = /*#__PURE__*/React__default.forwardRef(function Content(props, externalRef) {
+const Content$5 = /*#__PURE__*/React__default.forwardRef(function Content(props, externalRef) {
   const {
     children
   } = props;
@@ -6623,7 +6178,7 @@ const Content$6 = /*#__PURE__*/React__default.forwardRef(function Content(props,
   }), children));
 });
 
-const Trigger$5 = /*#__PURE__*/React.forwardRef(function DrawerTrigger(props, ref) {
+const Trigger$4 = /*#__PURE__*/React.forwardRef(function DrawerTrigger(props, ref) {
   return /*#__PURE__*/React.createElement(DialogPrimitive.Trigger, Object.assign({}, props, {
     ref: ref,
     asChild: true
@@ -6711,10 +6266,10 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(props, ref) {
     modal: variant === 'overlay' ? true : false,
     open: open,
     onOpenChange: setOpen
-  }, trigger && /*#__PURE__*/React.createElement(Trigger$5, null, trigger), children));
+  }, trigger && /*#__PURE__*/React.createElement(Trigger$4, null, trigger), children));
 });
-Drawer.Trigger = Trigger$5;
-Drawer.Content = Content$6;
+Drawer.Trigger = Trigger$4;
+Drawer.Content = Content$5;
 Drawer.InnerContent = InnerContent;
 Drawer.Title = Title$2;
 Drawer.Footer = Footer$2;
@@ -6792,7 +6347,7 @@ const Title$3 = /*#__PURE__*/React.forwardRef(function DialogTitle(props, ref) {
     ref: ref
   }));
 });
-const Content$7 = /*#__PURE__*/React.forwardRef(function HangerContent(props, ref) {
+const Content$6 = /*#__PURE__*/React.forwardRef(function HangerContent(props, ref) {
   const {
     placement: side
   } = props;
@@ -6850,114 +6405,60 @@ const Hanger = /*#__PURE__*/React.forwardRef(function Hanger(props, ref) {
     defaultOpen: open
   }, anchor && /*#__PURE__*/React.createElement(Anchor, null, anchor), children));
 });
-Hanger.Anchor = Anchor;
-Hanger.Content = Content$7;
-Hanger.Title = Title$3;
-
-const UnstyledArrow$1 = /*#__PURE__*/React.forwardRef(function HoverCardArrow(props, ref) {
-  return /*#__PURE__*/React.createElement(HoverCardPrimitive.Arrow, {
-    className: "pointer-events-none -mt-px",
-    asChild: true,
-    offset: 2,
-    width: 30,
-    height: 11
-  }, /*#__PURE__*/React.createElement("svg", Object.assign({}, props, {
-    ref: ref,
-    viewBox: "0 19 30 11",
-    style: {
-      transform: 'rotateZ(180deg)'
-    }
-  }), /*#__PURE__*/React.createElement("path", {
-    className: "text-grey-300 fill-current group-focus:text-blue-300",
-    d: "M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z"
-  }), /*#__PURE__*/React.createElement("path", {
-    className: "fill-current",
-    d: "M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z"
-  })));
-});
-
-const Trigger$6 = /*#__PURE__*/React.forwardRef(function HoverCardTrigger(props, ref) {
-  return /*#__PURE__*/React.createElement(HoverCardPrimitive.Trigger, Object.assign({}, props, {
-    asChild: true,
-    ref: ref
-  }));
-});
-const Content$8 = /*#__PURE__*/React.forwardRef(function HoverCardContent(props, ref) {
-  const {
-    placement: side
-  } = props;
-  const className = cn(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",
-    side: side,
-    sideOffset: 1,
-    ref: ref
-  }, props.children, /*#__PURE__*/React.createElement(UnstyledArrow$1, {
-    className: "text-white"
-  })));
-});
-const HoverCard = props => {
-  return /*#__PURE__*/React.createElement(HoverCardPrimitive.Root, Object.assign({}, props, {
-    openDelay: 300
-  }));
-};
-HoverCard.Trigger = Trigger$6;
-HoverCard.Content = Content$8;
-
-const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
-  onSearch,
-  ...props
-}, ref) {
-  const internalRef = useMergedRef(ref);
-  const {
-    texts
-  } = useLocalization();
-  const handleClick = () => {
-    var _internalRef$current$, _internalRef$current;
-    onSearch === null || onSearch === void 0 ? void 0 : onSearch((_internalRef$current$ = (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.value) !== null && _internalRef$current$ !== void 0 ? _internalRef$current$ : '');
-  };
-  const handleCancelClick = () => {
-    setInputValueByRef(internalRef.current, '');
-  };
-  const handleKeyDown = event => {
-    var _props$onKeyDown;
-    (_props$onKeyDown = props.onKeyDown) === null || _props$onKeyDown === void 0 ? void 0 : _props$onKeyDown.call(props, event);
-    if (event.isDefaultPrevented()) {
-      return;
-    }
-    if (event.key === 'Enter') {
-      event.preventDefault();
-      handleClick();
-      return;
-    }
-  };
-  return /*#__PURE__*/React.createElement(Input, Object.assign({
-    "aria-label": texts.searchInput.placeholder,
-    placeholder: texts.searchInput.placeholder
-  }, props, {
-    onKeyDown: handleKeyDown,
-    postfix: /*#__PURE__*/React.createElement(React.Fragment, null, props.disabled || props.readOnly || !props.value ? null : /*#__PURE__*/React.createElement(IconButton, {
-      "aria-hidden": true,
-      className: "group-peer-focus:visible group-peer-hover:visible !text-grey-700 invisible mr-0.5 !h-5 !min-h-[theme(spacing.4)] !w-5 !min-w-[theme(spacing.4)] text-xs hover:visible group-hover:visible",
-      icon: "close",
-      onClick: handleCancelClick,
-      rounded: true,
-      tabIndex: -1,
-      tooltip: texts.searchInput.clear
-    }), /*#__PURE__*/React.createElement(IconButton, {
-      "aria-label": texts.searchInput.button,
-      icon: "search",
-      className: "group-peer-focus:!border-transparent group-peer-focus:group-peer-active:!border-transparent -mr-2 !border-transparent !bg-transparent focus:!border-transparent",
-      disabled: props.disabled || props.readOnly,
-      onClick: handleClick,
-      tabIndex: -1,
-      tooltip: texts.searchInput.button
-    })),
-    ref: internalRef,
-    type: "search"
+Hanger.Anchor = Anchor;
+Hanger.Content = Content$6;
+Hanger.Title = Title$3;
+
+const UnstyledArrow$1 = /*#__PURE__*/React.forwardRef(function HoverCardArrow(props, ref) {
+  return /*#__PURE__*/React.createElement(HoverCardPrimitive.Arrow, {
+    className: "pointer-events-none -mt-px",
+    asChild: true,
+    offset: 2,
+    width: 30,
+    height: 11
+  }, /*#__PURE__*/React.createElement("svg", Object.assign({}, props, {
+    ref: ref,
+    viewBox: "0 19 30 11",
+    style: {
+      transform: 'rotateZ(180deg)'
+    }
+  }), /*#__PURE__*/React.createElement("path", {
+    className: "text-grey-300 fill-current group-focus:text-blue-300",
+    d: "M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z"
+  }), /*#__PURE__*/React.createElement("path", {
+    className: "fill-current",
+    d: "M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z"
+  })));
+});
+
+const Trigger$5 = /*#__PURE__*/React.forwardRef(function HoverCardTrigger(props, ref) {
+  return /*#__PURE__*/React.createElement(HoverCardPrimitive.Trigger, Object.assign({}, props, {
+    asChild: true,
+    ref: ref
   }));
 });
+const Content$7 = /*#__PURE__*/React.forwardRef(function HoverCardContent(props, ref) {
+  const {
+    placement: side
+  } = props;
+  const className = cn(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",
+    side: side,
+    sideOffset: 1,
+    ref: ref
+  }, props.children, /*#__PURE__*/React.createElement(UnstyledArrow$1, {
+    className: "text-white"
+  })));
+});
+const HoverCard = props => {
+  return /*#__PURE__*/React.createElement(HoverCardPrimitive.Root, Object.assign({}, props, {
+    openDelay: 300
+  }));
+};
+HoverCard.Trigger = Trigger$5;
+HoverCard.Content = Content$7;
 
 function useTimer(duration = 0, callback) {
   const timer = React.useRef();
@@ -7103,7 +6604,7 @@ const useListbox = ({
     event.persist();
     if (onChange) {
       var _item$path$split, _item$path;
-      const item = findByValue$1(data, event.target.value);
+      const item = findByValue(data, event.target.value);
       event.detail = sanitizeItem(item);
       const indexes = (_item$path$split = item === null || item === void 0 ? void 0 : (_item$path = item.path) === null || _item$path === void 0 ? void 0 : _item$path.split('.')) !== null && _item$path$split !== void 0 ? _item$path$split : [];
       if (indexes.length > 1) {
@@ -7186,180 +6687,555 @@ const useMultiListbox = ({
     }
   }, []);
   React.useEffect(() => {
-    const selectableItemsCount = data.filter(item => !item.disabled).length - 1;
-    if (selectableItemsCount === selectedIndexes.length) {
-      setAllOptionsSelected(true);
-    } else {
-      setAllOptionsSelected(false);
-    }
-  }, [selectedIndexes, data]);
-  const setInputValueByIndex = index => {
-    if (index !== undefined) {
-      const option = data[index];
-      if (option && !option.disabled) {
-        var _inputRef$current;
-        let newInputValue = '';
-        const currentInputValue = (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value;
-        const currentValuesArray = (currentInputValue === null || currentInputValue === void 0 ? void 0 : currentInputValue.split(',')) || [];
-        const optionAlreadySelected = currentValuesArray.findIndex(val => val === String(option.value)) !== -1;
-        // Handling the select_all option
-        if (option.value === '#ALL-OPTIONS#') {
-          if (!allOptionsSelected) {
-            newInputValue = data.filter((option, index) => index !== 0 && !option.disabled).map(option => option.value).join(',');
-          } else {
-            newInputValue = '';
-          }
-        } else {
-          // Handling rest options
-          if (optionAlreadySelected) {
-            newInputValue = currentValuesArray.filter(val => val !== String(option.value)).join(',');
-          } else {
-            newInputValue = currentInputValue ? `${currentInputValue},${option.value}` : option.value;
-          }
-        }
-        setInputValueByRef$1(inputRef.current, newInputValue);
-      }
-    }
-  };
-  const handleListboxClick = (event, index) => {
-    event.preventDefault();
-    if (!data[index].disabled) {
-      setCurrentIndex(index);
-      setInputValueByIndex(index);
+    const selectableItemsCount = data.filter(item => !item.disabled).length - 1;
+    if (selectableItemsCount === selectedIndexes.length) {
+      setAllOptionsSelected(true);
+    } else {
+      setAllOptionsSelected(false);
+    }
+  }, [selectedIndexes, data]);
+  const setInputValueByIndex = index => {
+    if (index !== undefined) {
+      const option = data[index];
+      if (option && !option.disabled) {
+        var _inputRef$current;
+        let newInputValue = '';
+        const currentInputValue = (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value;
+        const currentValuesArray = (currentInputValue === null || currentInputValue === void 0 ? void 0 : currentInputValue.split(',')) || [];
+        const optionAlreadySelected = currentValuesArray.findIndex(val => val === String(option.value)) !== -1;
+        // Handling the select_all option
+        if (option.value === '#ALL-OPTIONS#') {
+          if (!allOptionsSelected) {
+            newInputValue = data.filter((option, index) => index !== 0 && !option.disabled).map(option => option.value).join(',');
+          } else {
+            newInputValue = '';
+          }
+        } else {
+          // Handling rest options
+          if (optionAlreadySelected) {
+            newInputValue = currentValuesArray.filter(val => val !== String(option.value)).join(',');
+          } else {
+            newInputValue = currentInputValue ? `${currentInputValue},${option.value}` : option.value;
+          }
+        }
+        setInputValueByRef$1(inputRef.current, newInputValue);
+      }
+    }
+  };
+  const handleListboxClick = (event, index) => {
+    event.preventDefault();
+    if (!data[index].disabled) {
+      setCurrentIndex(index);
+      setInputValueByIndex(index);
+    }
+    if (onClick) {
+      onClick(event);
+    }
+  };
+  const handleListboxKeyDown = (event, index) => {
+    const charKey = event.key;
+    // event.key always returns the whole string (String.fromCharCode(event.keyCode) does not)
+    // We need to filter out only alphabetical or numeric letters, that's why that condition has been changed
+    if (charKey.length === 1 && /(\w)/g.test(charKey)) {
+      const nextIndex = getNextIndex(charKey);
+      if (nextIndex > -1 && nextIndex !== currentIndex) {
+        setCurrentIndex(nextIndex);
+      }
+      return;
+    }
+    switch (event.key) {
+      case ' ':
+        {
+          event.preventDefault();
+          setInputValueByIndex(index);
+          break;
+        }
+      case 'Enter':
+        {
+          setInputValueByIndex(index);
+          break;
+        }
+    }
+    setCurrentIndex(index !== undefined ? index : 0);
+    if (onKeyDown) {
+      event.persist();
+      onKeyDown(event);
+    }
+  };
+  const handleListboxFocus = event => {
+    if (onFocus) {
+      event.persist();
+      onFocus(event);
+    }
+  };
+  const handleInputChange = event => {
+    event.persist();
+    setSelectedIndexes(getSelectedIndexesFromValue(data, event.target.value));
+    if (onChange) {
+      const detail = [];
+      const valuesArray = event.target.value.split(',');
+      valuesArray.forEach(val => {
+        const item = findByValue(data, val);
+        if (item) {
+          detail.push(item);
+        }
+      });
+      event.detail = detail;
+      onChange(event);
+    }
+  };
+  const list = {
+    ...otherProps,
+    'aria-activedescendant': getActiveDescendant(data, currentIndex, id),
+    'aria-multiselectable': true,
+    data,
+    disabled,
+    id,
+    onChange: () => null,
+    onClick: handleListboxClick,
+    onFocus: handleListboxFocus,
+    onKeyDown: handleListboxKeyDown,
+    scrollOnFocus: false,
+    tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,
+    value: currentIndex,
+    selectedIndexes,
+    multiselect: true,
+    allOptionsSelected
+  };
+  const input = {
+    name,
+    onChange: handleInputChange,
+    ref: inputRef,
+    tabIndex: -1,
+    value: value !== null && value !== void 0 ? value : ''
+  };
+  return {
+    list,
+    input
+  };
+};
+
+const Listbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
+  const {
+    className: externalClassName,
+    ...otherProps
+  } = props;
+  const {
+    list,
+    input
+  } = useListbox(otherProps, ref);
+  const className = cn('bg-white inline-flex relative w-full', externalClassName);
+  return /*#__PURE__*/React.createElement("span", {
+    "data-taco": "listbox",
+    className: className
+  }, /*#__PURE__*/React.createElement(ScrollableList, Object.assign({}, list, {
+    style: {
+      ...list.style,
+      maxHeight: 'calc(12rem + 2px)' /* (6 * option height) + listbox border */
+    }
+  })), /*#__PURE__*/React.createElement("input", Object.assign({}, input, {
+    className: "hidden",
+    type: "text"
+  })));
+});
+const MultiListbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
+  const {
+    className: externalClassName,
+    ...otherProps
+  } = props;
+  const {
+    list,
+    input
+  } = useMultiListbox(otherProps, ref);
+  const className = cn('bg-white inline-flex relative w-full', externalClassName);
+  return /*#__PURE__*/React.createElement("span", {
+    "data-taco": "listbox",
+    className: className
+  }, /*#__PURE__*/React.createElement(ScrollableList, Object.assign({}, list, {
+    style: {
+      ...list.style,
+      maxHeight: 'calc(12rem + 2px + 2px)' /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */
+    }
+  })), /*#__PURE__*/React.createElement("input", Object.assign({}, input, {
+    className: "hidden",
+    type: "text"
+  })));
+});
+
+const Content$8 = /*#__PURE__*/React.forwardRef(function MenuContent(props, ref) {
+  const internalRef = useMergedRef(ref);
+  const menu = useCurrentMenu();
+  const {
+    align = 'start',
+    children,
+    placement: side,
+    ...otherProps
+  } = props;
+  const className = cn('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.Content, Object.assign({}, otherProps, {
+    align: align,
+    className: className,
+    "data-taco": "menu",
+    side: side,
+    sideOffset: 3,
+    style: {
+      minWidth: menu === null || menu === void 0 ? void 0 : menu.minWidth
+    },
+    ref: internalRef
+  }), children));
+});
+
+const Icon$1 = ({
+  name
+}) => /*#__PURE__*/React.createElement("span", {
+  className: "absolute left-0 ml-1"
+}, /*#__PURE__*/React.createElement(Icon, {
+  className: "-ml-px -mt-px !h-5 !w-5",
+  name: name
+}));
+const useItemStyling = ({
+  disabled,
+  indented,
+  className
+}) => {
+  const menu = useCurrentMenu();
+  React.useEffect(() => {
+    if (indented && !(menu !== null && menu !== void 0 && menu.indented)) {
+      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', {
+    '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,
+    'cursor-not-allowed hover:bg-white text-grey-300': disabled
+  }, className);
+};
+const Shortcut = props => {
+  return /*#__PURE__*/React.createElement("span", Object.assign({}, props, {
+    className: "text-grey-700 ml-auto pl-3"
+  }));
+};
+const Item$1 = /*#__PURE__*/React.forwardRef(function MenuItem(props, ref) {
+  var _props$disabled;
+  const {
+    dialog,
+    icon,
+    onClick,
+    shortcut,
+    ...otherProps
+  } = props;
+  const menu = useCurrentMenu();
+  const className = useItemStyling({
+    disabled: props.disabled,
+    indented: !!icon,
+    className: props.className
+  });
+  const disabled = (_props$disabled = props.disabled) !== null && _props$disabled !== void 0 ? _props$disabled : props['aria-disabled'];
+  let handleClick;
+  // radix has a bug that does not disable clicks when disabled is set on items
+  if (disabled) {
+    handleClick = event => {
+      event.preventDefault();
+      event.stopPropagation();
+    };
+  }
+  const handleSelect = event => {
     if (onClick) {
       onClick(event);
     }
-  };
-  const handleListboxKeyDown = (event, index) => {
-    const charKey = event.key;
-    // event.key always returns the whole string (String.fromCharCode(event.keyCode) does not)
-    // We need to filter out only alphabetical or numeric letters, that's why that condition has been changed
-    if (charKey.length === 1 && /(\w)/g.test(charKey)) {
-      const nextIndex = getNextIndex(charKey);
-      if (nextIndex > -1 && nextIndex !== currentIndex) {
-        setCurrentIndex(nextIndex);
-      }
-      return;
-    }
-    switch (event.key) {
-      case ' ':
-        {
-          event.preventDefault();
-          setInputValueByIndex(index);
-          break;
-        }
-      case 'Enter':
-        {
-          setInputValueByIndex(index);
-          break;
-        }
-    }
-    setCurrentIndex(index !== undefined ? index : 0);
-    if (onKeyDown) {
-      event.persist();
-      onKeyDown(event);
+    if (props['aria-haspopup'] || typeof dialog === 'function') {
+      event.preventDefault();
     }
   };
-  const handleListboxFocus = event => {
-    if (onFocus) {
-      event.persist();
-      onFocus(event);
-    }
+  let button = /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Item, Object.assign({}, otherProps, {
+    className: className,
+    onClick: handleClick,
+    onSelect: handleSelect,
+    ref: ref
+  }), icon && /*#__PURE__*/React.createElement(Icon$1, {
+    name: icon
+  }), props.children, shortcut && /*#__PURE__*/React.createElement(Shortcut, null, shortcut));
+  if (typeof dialog === 'function') {
+    button = dialog({
+      trigger: button,
+      onClose: menu === null || menu === void 0 ? void 0 : menu.close
+    });
+  }
+  return button;
+});
+
+const Link = /*#__PURE__*/React.forwardRef(function MenuLink(props, ref) {
+  const {
+    href,
+    icon,
+    onClick,
+    ...otherProps
+  } = props;
+  const menu = useCurrentMenu();
+  const className = useItemStyling({
+    disabled: props.disabled,
+    indented: !!icon,
+    className: props.className
+  });
+  const handleClick = event => {
+    onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    menu === null || menu === void 0 ? void 0 : menu.close();
   };
-  const handleInputChange = event => {
-    event.persist();
-    setSelectedIndexes(getSelectedIndexesFromValue(data, event.target.value));
-    if (onChange) {
-      const detail = [];
-      const valuesArray = event.target.value.split(',');
-      valuesArray.forEach(val => {
-        const item = findByValue$1(data, val);
-        if (item) {
-          detail.push(item);
-        }
-      });
-      event.detail = detail;
-      onChange(event);
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Item, Object.assign({}, otherProps, {
+    asChild: true,
+    className: className,
+    ref: ref,
+    onClick: handleClick
+  }), /*#__PURE__*/React.createElement("a", {
+    href: href,
+    target: "_blank"
+  }, icon && /*#__PURE__*/React.createElement(Icon$1, {
+    name: icon
+  }), props.children));
+});
+
+const Trigger$6 = /*#__PURE__*/React.forwardRef(function MenuTrigger(props, ref) {
+  const menu = useCurrentMenu();
+  const internalRef = useMergedRef(ref);
+  React.useEffect(() => {
+    if (internalRef.current) {
+      menu === null || menu === void 0 ? void 0 : menu.setMinWidth(internalRef.current.getBoundingClientRect().width);
     }
-  };
-  const list = {
-    ...otherProps,
-    'aria-activedescendant': getActiveDescendant(data, currentIndex, id),
-    'aria-multiselectable': true,
-    data,
+  }, [internalRef]);
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Trigger, Object.assign({}, props, {
+    asChild: true,
+    ref: internalRef
+  }));
+});
+
+const Checkbox$1 = /*#__PURE__*/React.forwardRef(function MenuCheckboxItem(props, ref) {
+  const {
+    checked,
+    children,
+    onChange,
+    ...otherProps
+  } = props;
+  const className = useItemStyling({
+    disabled: props.disabled,
+    indented: true,
+    className: props.className
+  });
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.CheckboxItem, Object.assign({}, otherProps, {
+    checked: checked,
+    className: className,
+    onCheckedChange: onChange,
+    ref: ref
+  }), /*#__PURE__*/React.createElement(DropdownMenuPrimitive.ItemIndicator, {
+    className: "absolute left-0 ml-1.5"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "tick",
+    className: "-ml-px !h-4 !w-4"
+  })), children);
+});
+
+const getRadioGroupItemValueAsString = value => String(value !== null && value !== void 0 ? value : '');
+const findByValue$1 = (values, valueAsString) => values.find(value => getRadioGroupItemValueAsString(value) === valueAsString);
+const RadioGroupContext = /*#__PURE__*/React.createContext({
+  disabled: false,
+  invalid: false
+});
+const RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(props, ref) {
+  const context = React.useContext(RadioGroupContext);
+  const {
+    children,
+    value,
+    ...otherProps
+  } = props;
+  const isDisabled = context.disabled || props.disabled;
+  const className = cn('flex flex-shrink-0 self-start items-center justify-center h-4 w-4 mt-[0.2rem] rounded-full bg-white border-2', {
+    'border-grey-300 hover:border-4 focus:yt-focus aria-checked:bg-blue-500 aria-checked:border-blue-500 hover:aria-checked:border-blue-300': !isDisabled && !context.invalid,
+    'border-grey-200 cursor-not-allowed aria-checked:bg-blue-300 aria-checked:border-blue-300 ': isDisabled,
+    'border-red-500 hover:border-4 text-red-500 focus:border-red-500 focus:yt-focus-red aria-checked:bg-red-500 aria-checked:border-red': context.invalid && !isDisabled
+  });
+  const labelClassName = cn('flex items-center gap-2', {
+    'cursor-pointer': !isDisabled,
+    'cursor-not-allowed text-grey-300': isDisabled
+  }, props.className);
+  return /*#__PURE__*/React.createElement("label", {
+    className: labelClassName
+  }, /*#__PURE__*/React.createElement(RadioGroupPrimitive.Item, Object.assign({}, otherProps, {
+    className: className,
+    disabled: isDisabled,
+    ref: ref,
+    value: getRadioGroupItemValueAsString(value)
+  }), /*#__PURE__*/React.createElement(RadioGroupPrimitive.Indicator, {
+    className: "h-2 w-2 rounded-full bg-white"
+  })), children);
+});
+const useRadioGroup = props => {
+  const {
+    children,
+    defaultValue,
     disabled,
-    id,
-    onChange: () => null,
-    onClick: handleListboxClick,
-    onFocus: handleListboxFocus,
-    onKeyDown: handleListboxKeyDown,
-    scrollOnFocus: false,
-    tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,
-    value: currentIndex,
-    selectedIndexes,
-    multiselect: true,
-    allOptionsSelected
-  };
-  const input = {
-    name,
-    onChange: handleInputChange,
-    ref: inputRef,
-    tabIndex: -1,
-    value: value !== null && value !== void 0 ? value : ''
-  };
+    invalid,
+    onChange,
+    orientation = 'vertical',
+    value,
+    ...otherProps
+  } = props;
+  const values = React.useMemo(() => {
+    const radioGroupItemValues = [];
+    React.Children.forEach(children, child => {
+      if ( /*#__PURE__*/React.isValidElement(child)) {
+        radioGroupItemValues.push(child.props.value);
+      }
+    });
+    return radioGroupItemValues;
+  }, [children]);
+  const context = React.useMemo(() => ({
+    disabled: disabled !== null && disabled !== void 0 ? disabled : false,
+    invalid: invalid !== null && invalid !== void 0 ? invalid : false
+  }), [disabled, invalid]);
+  let valueProps;
+  if (onChange !== undefined) {
+    const handleChange = value => onChange(findByValue$1(values, value));
+    valueProps = {
+      onValueChange: handleChange,
+      value: value !== undefined ? getRadioGroupItemValueAsString(value) : undefined
+    };
+  } else {
+    valueProps = {
+      defaultValue: defaultValue !== undefined ? getRadioGroupItemValueAsString(defaultValue) : undefined
+    };
+  }
   return {
-    list,
-    input
+    context,
+    props: {
+      ...otherProps,
+      ...valueProps,
+      children,
+      disabled,
+      orientation
+    }
   };
 };
-
-const Listbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
-  const {
-    className: externalClassName,
-    ...otherProps
-  } = props;
+const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
   const {
-    list,
-    input
-  } = useListbox(otherProps, ref);
-  const className = cn('bg-white inline-flex relative w-full', externalClassName);
-  return /*#__PURE__*/React.createElement("span", {
-    "data-taco": "listbox",
-    className: className
-  }, /*#__PURE__*/React.createElement(ScrollableList, Object.assign({}, list, {
-    style: {
-      ...list.style,
-      maxHeight: 'calc(12rem + 2px)' /* (6 * option height) + listbox border */
-    }
-  })), /*#__PURE__*/React.createElement("input", Object.assign({}, input, {
-    className: "hidden",
-    type: "text"
+    context,
+    props: otherProps
+  } = useRadioGroup(props);
+  const className = cn('flex items-start gap-y-2', {
+    'flex-wrap gap-x-4 ': otherProps.orientation === 'horizontal',
+    'flex-col': otherProps.orientation === 'vertical'
+  }, otherProps.className);
+  return /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
+    value: context
+  }, /*#__PURE__*/React.createElement(RadioGroupPrimitive.Root, Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "radio-group",
+    ref: ref
   })));
 });
-const MultiListbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
+RadioGroup.Item = RadioGroupItem;
+
+const RadioItem = props => {
+  const context = React.useContext(MenuRadioGroupContext);
   const {
-    className: externalClassName,
+    children,
+    value,
     ...otherProps
   } = props;
+  const disabled = context.disabled || props.disabled;
+  const className = useItemStyling({
+    disabled: disabled,
+    indented: true,
+    className: props.className
+  });
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.RadioItem, Object.assign({}, otherProps, {
+    className: className,
+    disabled: disabled,
+    value: getRadioGroupItemValueAsString(value)
+  }), /*#__PURE__*/React.createElement(DropdownMenuPrimitive.ItemIndicator, {
+    className: "absolute left-0 ml-1.5"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ml-1 flex h-1.5 w-1.5 rounded-full bg-current "
+  })), children);
+};
+const MenuRadioGroupContext = /*#__PURE__*/React.createContext({
+  disabled: false
+});
+const RadioGroup$1 = /*#__PURE__*/React.forwardRef(function MenuRadioItem(props, ref) {
   const {
-    list,
-    input
-  } = useMultiListbox(otherProps, ref);
-  const className = cn('bg-white inline-flex relative w-full', externalClassName);
-  return /*#__PURE__*/React.createElement("span", {
-    "data-taco": "listbox",
-    className: className
-  }, /*#__PURE__*/React.createElement(ScrollableList, Object.assign({}, list, {
-    style: {
-      ...list.style,
-      maxHeight: 'calc(12rem + 2px + 2px)' /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */
-    }
-  })), /*#__PURE__*/React.createElement("input", Object.assign({}, input, {
-    className: "hidden",
-    type: "text"
+    context,
+    props: otherProps
+  } = useRadioGroup(props);
+  const className = cn('flex flex-col', props.className);
+  return /*#__PURE__*/React.createElement(MenuRadioGroupContext.Provider, {
+    value: context
+  }, /*#__PURE__*/React.createElement(DropdownMenuPrimitive.RadioGroup, Object.assign({}, otherProps, {
+    className: className,
+    ref: ref
   })));
 });
+RadioGroup$1.Item = RadioItem;
+
+const Separator = () => {
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Separator, {
+    className: "bg-grey-300 my-1 h-px"
+  });
+};
+
+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', {
+    'pl-7': menu === null || menu === void 0 ? void 0 : menu.indented,
+    'pl-1.5': !(menu !== null && menu !== void 0 && menu.indented)
+  }, props.className);
+  return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Label, Object.assign({}, props, {
+    className: className,
+    ref: ref
+  }));
+});
+
+const Menu$1 = /*#__PURE__*/React.forwardRef(function Menu(externalProps, ref) {
+  const {
+    children,
+    defaultOpen: defaultProp,
+    onChange,
+    open: prop,
+    trigger,
+    ...props
+  } = externalProps;
+  const [indented, setIndented] = React.useState(false);
+  const [minWidth, setMinWidth] = React.useState(undefined);
+  const [open, setOpen] = reactUseControllableState.useControllableState({
+    // uncontrolled
+    defaultProp,
+    // controlled
+    onChange,
+    prop
+  });
+  const context = React.useMemo(() => ({
+    indented,
+    registerIndentation: () => setIndented(true),
+    minWidth,
+    setMinWidth: width => setMinWidth(width),
+    close: () => setOpen(false)
+  }), [indented, minWidth]);
+  return /*#__PURE__*/React.createElement(MenuContext.Provider, {
+    value: context
+  }, /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Root, Object.assign({}, props, {
+    modal: false,
+    open: open,
+    onOpenChange: setOpen
+  }), trigger && /*#__PURE__*/React.createElement(Trigger$6, {
+    ref: ref
+  }, trigger), children));
+});
+Menu$1.Trigger = Trigger$6;
+Menu$1.Content = Content$8;
+Menu$1.Item = Item$1;
+Menu$1.Link = Link;
+Menu$1.Checkbox = Checkbox$1;
+Menu$1.Separator = Separator;
+Menu$1.Header = Header;
+Menu$1.RadioGroup = RadioGroup$1;
 
 const TreeviewItem = /*#__PURE__*/React__default.forwardRef(function TreeviewItem(props, ref) {
   return /*#__PURE__*/React__default.createElement("a", Object.assign({}, props, {
@@ -7540,34 +7416,144 @@ const Menu$2 = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref)
         } else {
           scrollableAreas.push([child]);
         }
-      }
+      }
+    });
+    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),
+    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",
+    key: i
+  }, area) : area));
+});
+Menu$2.Group = MenuGroup;
+const Navigation = /*#__PURE__*/React__default.forwardRef(function Navigation(props, ref) {
+  const {
+    children,
+    ...otherProps
+  } = props;
+  const className = cn('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",
+    ref: ref
+  }), children);
+});
+Navigation.Menu = Menu$2;
+Navigation.Item = Item$2;
+Navigation.Panel = Panel;
+
+const useIntersectionObserver = (ref, offset) => {
+  const [intersectedIndexes, setIntersectedIndexes] = React__default.useState({});
+  const handleIntersection = (entries, observer) => {
+    if (observer.root) {
+      const children = Array.from(observer.root.children);
+      const map = {};
+      entries.forEach(entry => {
+        // entries only contains the items being intersected not all children of the ref
+        // so use root and the the entry being intersected to find its real index
+        // on first mount this is different - all children are present
+        map[children.indexOf(entry.target)] = entry.isIntersecting;
+      });
+      setIntersectedIndexes(prev => ({
+        ...prev,
+        ...map
+      }));
+    }
+  };
+  const intersectedChildIndex = React__default.useMemo(() => {
+    const index = Object.values(intersectedIndexes).indexOf(false);
+    return index > -1 ? index : undefined;
+  }, [intersectedIndexes]);
+  const hasRootMargin = intersectedChildIndex !== undefined && offset;
+  React__default.useEffect(() => {
+    const observer = new IntersectionObserver(handleIntersection, {
+      root: ref.current,
+      // offset the button, but only after the first item has been intersected
+      rootMargin: hasRootMargin ? `0px -${offset}px 0px 0px` : undefined,
+      threshold: 1
+    });
+    if (observer.root) {
+      Array.from(observer.root.children).forEach(item => {
+        if (!item.hasAttribute('data-observer-ignore')) {
+          observer.observe(item);
+        }
+      });
+    }
+    return () => {
+      observer.disconnect();
+    };
+  }, [hasRootMargin]);
+  return intersectedChildIndex;
+};
+
+const sanitizeButtonPropsForMenuItem = (button, index) => {
+  const href = button.props.to || button.props.href;
+  const Tag = href ? Menu$1.Link : Menu$1.Item;
+  // Removing className prop so that custom styling cannot be applied on Menu.Link
+  const {
+    as,
+    className: _,
+    appearance: _1,
+    drawer: _2,
+    fluid: _3,
+    hanger: _4,
+    menu: _5,
+    popover: _6,
+    tooltip: _7,
+    ...attributes
+  } = button.props;
+  const props = {
+    ...attributes,
+    key: index,
+    target: href ? href.startsWith('http') ? '_blank' : '_self' : undefined
+  };
+  if (as) {
+    return /*#__PURE__*/React__default.cloneElement(button, {
+      as: Tag,
+      ...props
     });
-    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),
-    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",
-    key: i
-  }, area) : area));
-});
-Menu$2.Group = MenuGroup;
-const Navigation = /*#__PURE__*/React__default.forwardRef(function Navigation(props, ref) {
+  }
+  return /*#__PURE__*/React__default.createElement(Tag, Object.assign({}, props));
+};
+const DEFAULT_OFFSET = 32 + 8;
+const OverflowGroup = /*#__PURE__*/React__default.forwardRef(function OverflowGroup(props, ref) {
   const {
-    children,
-    ...otherProps
+    moreButton: MoreButton,
+    ...attributes
   } = props;
-  const className = cn('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, {
+  const internalRef = useMergedRef(ref);
+  // determine width of more button, to add intersection observer margin
+  const [buttonWidth, setButtonWidth] = React__default.useState(DEFAULT_OFFSET);
+  const buttonRefCallback = React__default.useCallback(el => {
+    var _el$getBoundingClient;
+    return setButtonWidth(el === null || el === void 0 ? void 0 : (_el$getBoundingClient = el.getBoundingClientRect()) === null || _el$getBoundingClient === void 0 ? void 0 : _el$getBoundingClient.width);
+  }, []);
+  const button = MoreButton !== null && MoreButton !== void 0 ? MoreButton : /*#__PURE__*/React__default.createElement(IconButton, {
+    icon: "more"
+  });
+  const intersectedChildIndex = useIntersectionObserver(internalRef, buttonWidth);
+  const children = React__default.Children.toArray(props.children);
+  const hiddenChildren = intersectedChildIndex !== undefined ? children.slice(intersectedChildIndex) : [];
+  const className = cn('flex overflow-hidden', props.className);
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
     className: className,
-    "data-taco": "navigation",
-    ref: ref
-  }), children);
+    "data-taco": "overflow-group",
+    ref: internalRef
+  }), children.map((child, index) => /*#__PURE__*/React__default.cloneElement(child, {
+    className: cn(child.props.className, {
+      visible: intersectedChildIndex === undefined || index < intersectedChildIndex,
+      'invisible order-[100] pointer-events-none': intersectedChildIndex !== undefined && index >= intersectedChildIndex
+    })
+  })), hiddenChildren.length ? /*#__PURE__*/React__default.cloneElement(button, {
+    className: cn('sticky right-0 order-[99]', button.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(sanitizeButtonPropsForMenuItem))),
+    ref: buttonRefCallback
+  }) : null);
 });
-Navigation.Menu = Menu$2;
-Navigation.Item = Item$2;
-Navigation.Panel = Panel;
 
 const createPageRange = (pageCount, pageNumber) => {
   let lowerLimit = Math.min(pageNumber, pageCount);
@@ -7640,7 +7626,7 @@ const useSelect = ({
   }, [open]);
   React.useEffect(() => {
     if (value === undefined) {
-      if (defaultValue !== undefined && findByValue$1(flattenedData, defaultValue)) {
+      if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {
         setInputValueByRef$1(inputRef.current, defaultValue);
       } else {
         if (emptyValue !== undefined) {
@@ -7650,7 +7636,7 @@ const useSelect = ({
         }
       }
     } else {
-      if (!multiselect && !findByValue$1(flattenedData, value)) {
+      if (!multiselect && !findByValue(flattenedData, value)) {
         if (emptyValue !== undefined) {
           setInputValueByRef$1(inputRef.current, emptyValue);
         } else if (data.length > 0) {
@@ -7709,11 +7695,11 @@ const useSelect = ({
         text = texts.select.allOptionsSelected;
       } else {
         var _findByValue$text, _findByValue;
-        text = (_findByValue$text = (_findByValue = findByValue$1(flattenedData, selectedValues[0])) === null || _findByValue === void 0 ? void 0 : _findByValue.text) !== null && _findByValue$text !== void 0 ? _findByValue$text : '';
+        text = (_findByValue$text = (_findByValue = findByValue(flattenedData, selectedValues[0])) === null || _findByValue === void 0 ? void 0 : _findByValue.text) !== null && _findByValue$text !== void 0 ? _findByValue$text : '';
         more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;
       }
     } else {
-      const item = findByValue$1(flattenedData, value);
+      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')
@@ -7725,7 +7711,7 @@ const useSelect = ({
     event.persist();
     if (onChange) {
       var _item$path$split, _item$path;
-      const item = findByValue$1(flattenedData, event.target.value);
+      const item = findByValue(flattenedData, event.target.value);
       event.detail = sanitizeItem(item);
       const indexes = (_item$path$split = item === null || item === void 0 ? void 0 : (_item$path = item.path) === null || _item$path === void 0 ? void 0 : _item$path.split('.')) !== null && _item$path$split !== void 0 ? _item$path$split : [];
       if (indexes.length > 1) {
@@ -8072,6 +8058,7 @@ const getBadgeIcon = type => {
       return null;
   }
 };
+const getToastEmptyContentWarning = content => `Toast requires 'content' property, which can't be empty string, null or undefined. Current content value is set to ${content === '' ? 'empty string' : content}.`;
 
 const Toast = ({
   content,
@@ -8097,7 +8084,7 @@ const Toast = ({
   const timer = useTimer(autoClose, handleClose);
   const controls = framerMotion.useAnimation();
   if (!content) {
-    console.warn(`Toast requires 'content' property, which can't be empty string, null or undefined. Current content value is set to ${content === '' ? 'empty string' : content}.`);
+    console.warn(getToastEmptyContentWarning(content));
   }
   React__default.useEffect(() => {
     if (autoClose) {
@@ -8296,6 +8283,60 @@ const Provider = props => {
   }, /*#__PURE__*/React.createElement(TooltipPrimitive.Provider, null, /*#__PURE__*/React.createElement(ToastProvider, null, children)));
 };
 
+const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
+  onSearch,
+  ...props
+}, ref) {
+  const internalRef = useMergedRef(ref);
+  const {
+    texts
+  } = useLocalization();
+  const handleClick = () => {
+    var _internalRef$current$, _internalRef$current;
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch((_internalRef$current$ = (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.value) !== null && _internalRef$current$ !== void 0 ? _internalRef$current$ : '');
+  };
+  const handleCancelClick = () => {
+    setInputValueByRef(internalRef.current, '');
+  };
+  const handleKeyDown = event => {
+    var _props$onKeyDown;
+    (_props$onKeyDown = props.onKeyDown) === null || _props$onKeyDown === void 0 ? void 0 : _props$onKeyDown.call(props, event);
+    if (event.isDefaultPrevented()) {
+      return;
+    }
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      handleClick();
+      return;
+    }
+  };
+  return /*#__PURE__*/React.createElement(Input, Object.assign({
+    "aria-label": texts.searchInput.placeholder,
+    placeholder: texts.searchInput.placeholder
+  }, props, {
+    onKeyDown: handleKeyDown,
+    postfix: /*#__PURE__*/React.createElement(React.Fragment, null, props.disabled || props.readOnly || !props.value ? null : /*#__PURE__*/React.createElement(IconButton, {
+      "aria-hidden": true,
+      className: "group-peer-focus:visible group-peer-hover:visible !text-grey-700 invisible mr-0.5 !h-5 !min-h-[theme(spacing.4)] !w-5 !min-w-[theme(spacing.4)] text-xs hover:visible group-hover:visible",
+      icon: "close",
+      onClick: handleCancelClick,
+      rounded: true,
+      tabIndex: -1,
+      tooltip: texts.searchInput.clear
+    }), /*#__PURE__*/React.createElement(IconButton, {
+      "aria-label": texts.searchInput.button,
+      icon: "search",
+      className: "group-peer-focus:!border-transparent group-peer-focus:group-peer-active:!border-transparent -mr-2 !border-transparent !bg-transparent focus:!border-transparent",
+      disabled: props.disabled || props.readOnly,
+      onClick: handleClick,
+      tabIndex: -1,
+      tooltip: texts.searchInput.button
+    })),
+    ref: internalRef,
+    type: "search"
+  }));
+});
+
 const isAriaSelectionKey = event => {
   if (event.key === 'Enter' || event.key === ' ' || event.key === 'Tab') {
     return true;
@@ -9718,6 +9759,47 @@ const Shortcut$1 = ({
   }, key)));
 };
 
+const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
+  const {
+    label,
+    onChange,
+    ...otherProps
+  } = props;
+  const id = useId(props.id);
+  const className = cn('group h-5 w-9 flex flex-shrink-0 rounded-full inline-flex', {
+    'mr-2': !!label,
+    'bg-grey-500 hover:bg-grey-300 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-300 focus:yt-focus': !props.disabled,
+    'bg-grey-100 cursor-not-allowed aria-checked:bg-blue-300': props.disabled
+  }, props.className);
+  let labelledByProps = null;
+  if (label) {
+    labelledByProps = {
+      'aria-labelledby': `${id}-label`,
+      id
+    };
+  }
+  const element = /*#__PURE__*/React.createElement(PrimitiveSwitch.Root, Object.assign({}, otherProps, labelledByProps, {
+    className: className,
+    onCheckedChange: onChange,
+    ref: ref
+  }), /*#__PURE__*/React.createElement(PrimitiveSwitch.Thumb, {
+    className: "'will-change-transform mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform group-disabled:opacity-50 group-aria-checked:translate-x-[1.1rem]"
+  }));
+  if (label) {
+    const labelContainerClassName = cn('flex self-start cursor-pointer', {
+      'cursor-not-allowed text-grey-300': props.disabled
+    });
+    return /*#__PURE__*/React.createElement("span", {
+      className: labelContainerClassName
+    }, element, /*#__PURE__*/React.createElement("label", {
+      htmlFor: id,
+      id: `${id}-label`
+    }, label));
+  }
+  return element;
+});
+Switch.displayName = 'Switch';
+
 const sanitizeRowProps = (row, rowExpansionRenderer) => {
   var _row$subRows;
   const props = {
@@ -10220,7 +10302,7 @@ const useRowSelect = onSelectedRows => {
               onSelectedRows({});
             }
           };
-          return /*#__PURE__*/React__default.createElement(Checkbox$1, Object.assign({}, props, {
+          return /*#__PURE__*/React__default.createElement(Checkbox, Object.assign({}, props, {
             onChange: onChange
           }));
         },
@@ -10245,7 +10327,7 @@ const useRowSelect = onSelectedRows => {
             }
             lastSelectedSortedIndex.current = sortedIndex;
           };
-          return /*#__PURE__*/React__default.createElement(Checkbox$1, Object.assign({}, props, {
+          return /*#__PURE__*/React__default.createElement(Checkbox, Object.assign({}, props, {
             className: "!mt-2.5",
             onClick: onClick,
             // this is necessary to remove console spam from eslint
@@ -11335,7 +11417,7 @@ const SelectCell = /*#__PURE__*/React__default.memo(({
       className: "ml-2",
       keys: ['Space']
     }))
-  }, /*#__PURE__*/React__default.createElement(Checkbox$1, {
+  }, /*#__PURE__*/React__default.createElement(Checkbox, {
     "aria-label": isSelected ? texts.table2.columns.select.select : texts.table2.columns.select.deselect,
     className: "hover:border-blue !mt-0",
     checked: isSelected,
@@ -11356,7 +11438,7 @@ function createRowSelectionColumn(enableMultipleRowSelection, lastSelectedRowInd
         className: "ml-2",
         keys: ['Ctrl', 'A']
       }))
-    }, /*#__PURE__*/React__default.createElement(Checkbox$1, {
+    }, /*#__PURE__*/React__default.createElement(Checkbox, {
       "aria-label": table.getIsAllPageRowsSelected() ? texts.table2.columns.select.deselectAll : texts.table2.columns.select.selectAll,
       className: "hover:border-blue !mt-0",
       checked: table.getIsAllPageRowsSelected(),
@@ -11647,47 +11729,6 @@ const ColumnBase = /*#__PURE__*/React__default.forwardRef(function Table2ColumnB
   }));
 });
 
-const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
-  const {
-    label,
-    onChange,
-    ...otherProps
-  } = props;
-  const id = useId(props.id);
-  const className = cn('group h-5 w-9 flex flex-shrink-0 rounded-full inline-flex', {
-    'mr-2': !!label,
-    'bg-grey-500 hover:bg-grey-300 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-300 focus:yt-focus': !props.disabled,
-    'bg-grey-100 cursor-not-allowed aria-checked:bg-blue-300': props.disabled
-  }, props.className);
-  let labelledByProps = null;
-  if (label) {
-    labelledByProps = {
-      'aria-labelledby': `${id}-label`,
-      id
-    };
-  }
-  const element = /*#__PURE__*/React.createElement(PrimitiveSwitch.Root, Object.assign({}, otherProps, labelledByProps, {
-    className: className,
-    onCheckedChange: onChange,
-    ref: ref
-  }), /*#__PURE__*/React.createElement(PrimitiveSwitch.Thumb, {
-    className: "'will-change-transform mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform group-disabled:opacity-50 group-aria-checked:translate-x-[1.1rem]"
-  }));
-  if (label) {
-    const labelContainerClassName = cn('flex self-start cursor-pointer', {
-      'cursor-not-allowed text-grey-300': props.disabled
-    });
-    return /*#__PURE__*/React.createElement("span", {
-      className: labelContainerClassName
-    }, element, /*#__PURE__*/React.createElement("label", {
-      htmlFor: id,
-      id: `${id}-label`
-    }, label));
-  }
-  return element;
-});
-Switch.displayName = 'Switch';
-
 var Table2FilterComparator;
 (function (Table2FilterComparator) {
   Table2FilterComparator[Table2FilterComparator["Contains"] = 0] = "Contains";
@@ -13379,7 +13420,7 @@ const OrderableColumn = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     ref: ref
   }), /*#__PURE__*/React__default.createElement("span", {
     className: "pointer-events-none"
-  }, icon, (_column$columnDef$hea = column.columnDef.header) !== null && _column$columnDef$hea !== void 0 ? _column$columnDef$hea : column.columnDef.id), column.getCanHide() ? /*#__PURE__*/React__default.createElement(Checkbox$1, {
+  }, icon, (_column$columnDef$hea = column.columnDef.header) !== null && _column$columnDef$hea !== void 0 ? _column$columnDef$hea : column.columnDef.id), column.getCanHide() ? /*#__PURE__*/React__default.createElement(Checkbox, {
     checked: column.getIsVisible(),
     onChange: column.toggleVisibility
   }) : null);
@@ -14793,25 +14834,22 @@ Tour.Step = TourStep;
 
 const Button$3 = /*#__PURE__*/React__default.forwardRef(function Button(props, ref) {
   const {
-    as = 'li',
     ...attributes
   } = props;
   const className = cn(getButtonClasses$1(), props.className);
-  const Tag = as;
-  return /*#__PURE__*/React__default.createElement(Tag, {
-    className: "contents"
-  }, /*#__PURE__*/React__default.createElement(IconButton, Object.assign({}, attributes, {
+  return /*#__PURE__*/React__default.createElement(IconButton, Object.assign({}, attributes, {
     appearance: "discrete",
     className: className,
     "data-taco": "header-button",
     ref: ref
-  })));
+  }));
+});
+const getButtonClasses$1 = (rounded = true) => cn('!h-9 !w-9 flex-shrink-0 flex-grow-0 cursor-pointer relative', 'focus:!outline-none focus:!shadow-none focus-visible:!yt-focus-dark ', 'bg-transparent hover:bg-white/[.08] focus:bg-white/[.08] aria-current-page:bg-white/[.08]', '!text-white hover:text-white focus:text-white', {
+  '!rounded-full': rounded
 });
-const getButtonClasses$1 = () => cn('!h-9 !w-9 flex-shrink-0 flex-grow-0 cursor-pointer !rounded-full relative', 'focus:!outline-none focus:!shadow-none focus-visible:!yt-focus-dark ', 'bg-transparent hover:bg-white/[.08] focus:bg-white/[.08] aria-current-page:bg-white/[.08]', '!text-white hover:text-white focus:text-white');
 
 const Link$1 = /*#__PURE__*/React__default.forwardRef(function Link(props, ref) {
   const {
-    as = 'li',
     children,
     icon,
     isNew,
@@ -14821,9 +14859,8 @@ const Link$1 = /*#__PURE__*/React__default.forwardRef(function Link(props, ref)
   const {
     texts
   } = useLocalization();
-  const Tag = as;
   const className = cn(getLinkClasses(icon), 'relative', props.className);
-  let link = /*#__PURE__*/React__default.createElement("a", Object.assign({}, otherProps, {
+  const link = /*#__PURE__*/React__default.createElement("a", Object.assign({}, otherProps, {
     className: className,
     "data-taco": "header-link",
     ref: ref,
@@ -14836,13 +14873,11 @@ const Link$1 = /*#__PURE__*/React__default.forwardRef(function Link(props, ref)
     className: "absolute top-0 right-0 -mt-1.5 -mr-2.5 !h-3 !px-0.5 text-[0.55rem] font-normal"
   }, texts.header.new) : null);
   if (tooltip) {
-    link = /*#__PURE__*/React__default.createElement(Tooltip, {
+    return /*#__PURE__*/React__default.createElement(Tooltip, {
       title: tooltip
     }, link);
   }
-  return /*#__PURE__*/React__default.createElement(Tag, {
-    className: "contents"
-  }, link);
+  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', {
   '!rounded-full !h-9 !w-9': icon,
@@ -14850,7 +14885,24 @@ const getLinkClasses = (icon = undefined) => cn('flex h-8 flex-shrink-0 flex-gro
 });
 
 const Logo = /*#__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]', props.className);
+  const className = cn('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,
+    viewBox: "0 0 28 28",
+    xmlns: "http://www.w3.org/2000/svg"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    className: "fill-brand-sunsetOrange"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M3.2496172 16.0366c-1.44938-.2893-2.857854.6517-3.1442248 2.1011-.2863702 1.4493.6516388 2.8578 2.1010248 3.1442 1.44938.2893 2.85786-.6517 3.14423-2.101.28929-1.4465-.65164-2.855-2.10103-3.1443z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M18.9911672 19.1692c-2.4137-.4792-4.7602 1.0871-5.2423 3.5037-.4793 2.4137 1.087 4.7602 3.5036 5.2423 2.4137.4793 4.7602-1.087 5.2424-3.5036.4792-2.4166-1.0871-4.7631-3.5037-5.2424z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M23.6958672.105135c-2.8988-.578585-5.7157 1.303275-6.2943 4.199125l-.5172 2.62116c-.3828 1.93446-2.2647 3.19098-4.1992 2.80819l-1.7474-.35651c-1.92569-.3828-3.18221-2.25589-2.79941-4.19035l.08766-.43832c.33021-1.68608-.7656-3.33417-2.45168-3.66438-1.69776-.336043-3.33709.75976-3.67606 2.45461-.33897 1.68607.76561 3.3254 2.45168 3.66437l.43833.09058c1.93446.3828 3.19098 2.26467 2.79941 4.19039l-.16948.8737c-.3828 1.9345.87372 3.8163 2.79945 4.1991 1.9344.3828 3.8163-.8737 4.1991-2.8082l.1695-.8737c.3828-1.9257 2.2646-3.1822 4.1903-2.7994l2.63.526c2.8987.5698 5.7157-1.31206 6.2855-4.20791.5844-2.90169-1.2974-5.718636-4.1962-6.288455z"
+  })));
+});
+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);
   return /*#__PURE__*/React__default.createElement("svg", Object.assign({}, props, {
     className: className,
     ref: ref,
@@ -14917,139 +14969,34 @@ const Logo = /*#__PURE__*/React__default.forwardRef(function Logo(props, ref) {
   }))));
 });
 
-const getChildWidths = parent => {
-  const widths = [];
-  for (let index = 0; index < parent.children.length; index++) {
-    var _parent$children$inde, _childRect$width;
-    const childRect = (_parent$children$inde = parent.children[index].firstElementChild) === null || _parent$children$inde === void 0 ? void 0 : _parent$children$inde.getBoundingClientRect();
-    widths.push((_childRect$width = childRect === null || childRect === void 0 ? void 0 : childRect.width) !== null && _childRect$width !== void 0 ? _childRect$width : 0);
-  }
-  return widths;
-};
-const ChildrenWidth = ({
-  setWidth,
-  children
-}) => {
-  const ref = React__default.useRef(null);
-  const [show, setShow] = React__default.useState(true);
-  React__default.useEffect(() => {
-    // Calculate the width of children, and then hides the portal
-    if (ref.current && show) {
-      setWidth(getChildWidths(ref.current));
-      setShow(false);
-    }
-  }, [show]);
-  React__default.useEffect(() => {
-    // If children changes, then we render the children to calculate their width
-    if (!show) {
-      setShow(true);
-    }
-  }, [children]);
-  return show ? /*#__PURE__*/React__default.createElement(reactPortal.Portal, {
-    className: cn('invisible absolute z-[-10] flex translate-x-[-1000px]'),
-    ref: ref
-  }, children) : null;
-};
-const useBoundaryIndex = (wrapperWidth, buttonRef, childWidths) => {
-  // Primary navigation has a gap of gap-1, so we need to take the gap value in account as well
-  // left gap + right gap = 8px
-  const GAP = 8;
-  return React__default.useMemo(() => {
-    if (childWidths.length && wrapperWidth && buttonRef.current) {
-      const realWidth = wrapperWidth - buttonRef.current.getBoundingClientRect().width - GAP;
-      let boundary;
-      let total = 0;
-      childWidths.every((width, index) => {
-        const nextWidth = total + width + GAP;
-        if (nextWidth > realWidth) {
-          boundary = index;
-          return false;
-        }
-        total = nextWidth;
-        return true;
-      });
-      return boundary;
-    }
-    return undefined;
-  }, [childWidths, wrapperWidth]);
-};
 const PrimaryNavigation = /*#__PURE__*/React__default.forwardRef(function PrimaryNavigation(props, ref) {
-  var _rect$width;
   const {
     texts
   } = useLocalization();
   const internalRef = useMergedRef(ref);
-  const rect = useBoundingClientRectListener(internalRef);
-  const buttonRef = React__default.useRef(null);
-  const [childWidths, setChildWidths] = React__default.useState([]);
-  const boundaryIndex = useBoundaryIndex((_rect$width = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _rect$width !== void 0 ? _rect$width : 0, buttonRef, childWidths);
   const className = cn('flex h-full w-full flex-grow items-center overflow-hidden active:outline-none relative', props.className);
-  const moreButtonClassName = cn(getLinkClasses(), '!bg-transparent aria-expanded:!bg-white/[.08]');
-  const [visibleChildren, hiddenChildren] = React__default.useMemo(() => {
-    const visibleChildren = [];
-    const hiddenChildren = [];
-    React__default.Children.forEach(props.children, (child, index) => {
-      if ( /*#__PURE__*/React__default.isValidElement(child) && !!child) {
-        if (boundaryIndex && index >= boundaryIndex) {
-          hiddenChildren.push(child);
-        } else {
-          visibleChildren.push(child);
-        }
-      }
-    });
-    return [visibleChildren, hiddenChildren];
-  }, [boundaryIndex, props.children]);
+  const moreButton = /*#__PURE__*/React__default.createElement(Button$1, {
+    className: cn(getLinkClasses(), '!bg-transparent aria-expanded:!bg-white/[.08]')
+  }, texts.header.more);
   return /*#__PURE__*/React__default.createElement("nav", Object.assign({}, props, {
     className: className,
     ref: internalRef
-  }), /*#__PURE__*/React__default.createElement("ul", {
-    className: "mb-0 flex h-full w-full items-center gap-1 overflow-hidden px-1"
-  }, visibleChildren, /*#__PURE__*/React__default.createElement("li", {
-    className: cn({
-      invisible: boundaryIndex === undefined
-    })
-  }, /*#__PURE__*/React__default.createElement(Button$1, {
-    className: moreButtonClassName,
-    menu: menuProps => /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, {
-      className: "hidden lg:block"
-    }, hiddenChildren.map((child, index) => {
-      const href = child.props.to || child.props.href;
-      const target = href !== null && href !== void 0 && href.startsWith('http') ? '_blank' : '_self';
-      // Removing className prop so that custom styling cannot be applied on Menu.Link
-      const {
-        as,
-        className: _,
-        ...otherProps
-      } = child.props;
-      if (as) {
-        return /*#__PURE__*/React__default.cloneElement(child, {
-          as: Menu$1.Link,
-          key: index,
-          target,
-          ...otherProps
-        });
-      }
-      return /*#__PURE__*/React__default.createElement(Menu$1.Link, Object.assign({
-        key: index,
-        target: target
-      }, otherProps));
-    }))),
-    ref: buttonRef
-  }, texts.header.more))), /*#__PURE__*/React__default.createElement(ChildrenWidth, {
-    setWidth: setChildWidths
+  }), /*#__PURE__*/React__default.createElement(OverflowGroup, {
+    className: "h-full flex-grow items-center gap-1 px-1",
+    moreButton: moreButton
   }, props.children));
 });
 
 const SecondaryNavigation = /*#__PURE__*/React__default.forwardRef(function SecondaryNavigation(props, ref) {
-  const className = cn('flex h-full items-center gap-2 mb-0', props.className);
-  return /*#__PURE__*/React__default.createElement("ul", Object.assign({}, props, {
+  const className = cn('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
   }));
 });
 
 const MenuButton = /*#__PURE__*/React__default.forwardRef(function MenuButton(props, ref) {
-  const className = cn(getButtonClasses$1(), 'ml-1 -mr-1 !bg-transparent hover:!bg-white/[.08] focus:!bg-white/[.08]] lg:hidden z-[2]');
+  const className = cn(getButtonClasses$1(false), 'mr-1 !bg-transparent hover:!bg-white/[.08] focus:!bg-white/[.08]] lg:hidden z-[2]');
   return /*#__PURE__*/React__default.createElement(IconButton, Object.assign({}, props, {
     className: className,
     "data-taco": "header-toggle-sidebar",
@@ -15301,7 +15248,7 @@ function AgreementDisplay$1(props) {
 }
 
 const Header$2 = /*#__PURE__*/React__default.forwardRef(function Header(props, ref) {
-  const className = cn('bg-blue-900 flex h-16 w-full shrink-0 items-center gap-4 pl-2', '[&>a:focus-visible]:yt-focus-dark [&>a]:px-2 [&>a]:rounded [&>a]:h-[calc(100%-14px)]',
+  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',
   // styles for logo wrapped inside an anchor
   props.className);
   return /*#__PURE__*/React__default.createElement("header", Object.assign({}, props, {
@@ -15314,6 +15261,7 @@ Header$2.AgreementSelector = AgreementSelector;
 Header$2.Button = Button$3;
 Header$2.Link = Link$1;
 Header$2.Logo = Logo;
+Header$2.LogoLegacy = LogoLegacy;
 Header$2.PrimaryNavigation = PrimaryNavigation;
 Header$2.SecondaryNavigation = SecondaryNavigation;
 Header$2.MenuButton = MenuButton;
@@ -15638,10 +15586,9 @@ exports.BadgeIcon = BadgeIcon;
 exports.Banner = Banner;
 exports.Base = Base;
 exports.Button = Button$1;
-exports.ButtonGroup = ButtonGroup;
 exports.Calendar = Calendar$1;
 exports.Card = Card;
-exports.Checkbox = Checkbox$1;
+exports.Checkbox = Checkbox;
 exports.CollectionPrimitive = Collection;
 exports.Combobox = Combobox;
 exports.Datepicker = Datepicker;
@@ -15664,6 +15611,7 @@ exports.Menu = Menu$1;
 exports.MultiListbox = MultiListbox;
 exports.Navigation = Navigation;
 exports.Navigation2 = Navigation2;
+exports.OverflowGroup = OverflowGroup;
 exports.PaginatedTable = PaginatedTable;
 exports.Pagination = Pagination;
 exports.Popover = Popover;
@@ -15691,7 +15639,7 @@ exports.VisuallyHidden = VisuallyHidden;
 exports.WindowedTable = WindowedTable;
 exports.convertRowIndexPathToNumberArray = convertRowIndexPathToNumberArray;
 exports.defaultLocalisationTexts = defaultLocalisationTexts;
-exports.findByValue = findByValue;
+exports.findByValue = findByValue$1;
 exports.format = format;
 exports.getByRowIndexPath = getByRowIndexPath;
 exports.getNavigationLinkClasses = getNavigationLinkClasses;