@economic/taco 1.25.2 → 1.26.0

package/dist/taco.cjs.development.js

@@ -10,6 +10,9 @@ 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');
@@ -21,10 +24,7 @@ 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 reactTable = require('react-table');
 var reactIntersectionObserver = require('react-intersection-observer');
 var reactWindow = require('react-window');
@@ -3998,241 +3998,732 @@ const Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
   }, button);
 });
 
-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
+// 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;
       }
     }
-  } = 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) {
+  }, [ref]);
+  return internalRef;
+};
+
+const Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
   const {
-    onChange: handleChange,
-    value,
-    disabledDays,
+    as: Tag = 'span',
+    orientation = 'horizontal',
     ...otherProps
   } = props;
-  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());
-    }
-  }, [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-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$2 = /*#__PURE__*/React.forwardRef(function CardContent(externalProps, ref) {
-  const {
-    noPadding,
-    ...props
-  } = externalProps;
-  const className = cn('flex-grow overflow-auto', {
-    'mx-4 mb-4': !noPadding
+  const className = cn('flex gap-2', {
+    'flex-col ': orientation === 'vertical'
   }, props.className);
-  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(Tag, Object.assign({}, otherProps, {
     className: className,
+    "data-taco": "group",
     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$2;
 
-// 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 MenuContext = /*#__PURE__*/React.createContext(undefined);
+const useCurrentMenu = () => {
+  return React.useContext(MenuContext);
 };
 
-const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
+const Content$2 = /*#__PURE__*/React.forwardRef(function MenuContent(props, ref) {
+  const internalRef = useMergedRef(ref);
+  const menu = useCurrentMenu();
   const {
-    checked,
-    highlighted,
-    indeterminate,
-    invalid,
-    label,
-    onChange,
+    align = 'start',
+    children,
+    placement: side,
     ...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,
+  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,
-    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;
+    "data-taco": "menu",
+    side: side,
+    sideOffset: 3,
+    style: {
+      minWidth: menu === null || menu === void 0 ? void 0 : menu.minWidth
+    },
+    ref: internalRef
+  }), children));
 });
-Checkbox.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 bg-white 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)]', {
-    // 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
+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);
+    }
+    if (props['aria-haspopup'] || typeof dialog === 'function') {
+      event.preventDefault();
+    }
+  };
+  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();
+  };
+  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);
+  React.useEffect(() => {
+    if (internalRef.current) {
+      menu === null || menu === void 0 ? void 0 : menu.setMinWidth(internalRef.current.getBoundingClientRect().width);
+    }
+  }, [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);
+});
+
+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 => {
+  const {
+    children,
+    defaultValue,
+    disabled,
+    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(values, value));
+    valueProps = {
+      onValueChange: handleChange,
+      value: value !== undefined ? getRadioGroupItemValueAsString(value) : undefined
+    };
+  } else {
+    valueProps = {
+      defaultValue: defaultValue !== undefined ? getRadioGroupItemValueAsString(defaultValue) : undefined
+    };
+  }
+  return {
+    context,
+    props: {
+      ...otherProps,
+      ...valueProps,
+      children,
+      disabled,
+      orientation
+    }
+  };
+};
+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, {
+    className: className,
+    "data-taco": "radio-group",
+    ref: ref
+  })));
+});
+RadioGroup.Item = RadioGroupItem;
+
+const RadioItem = props => {
+  const context = React.useContext(MenuRadioGroupContext);
+  const {
+    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 {
+    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$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;
+  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);
+        }
+      });
+    }
+    return () => {
+      observer.disconnect();
+    };
+  }, [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);
+});
+
+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
+      }
+    }
+  } = 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) {
+  const {
+    onChange: handleChange,
+    value,
+    disabledDays,
+    ...otherProps
+  } = props;
+  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());
+    }
+  }, [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-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 bg-white 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)]', {
+    // 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
@@ -4285,29 +4776,14 @@ const useBoundingClientRectListener = (ref, dependencies) => {
       // 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;
-};
-
-// 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;
-      }
+  });
+  React.useEffect(() => {
+    if (dependencies) {
+      var _ref$current2;
+      setDimensions((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.getBoundingClientRect());
     }
-  }, [ref]);
-  return internalRef;
+  }, dependencies);
+  return dimensions;
 };
 
 const validSetSelectionRangeTypes = ['text', 'search', 'url', 'tel', 'password'];
@@ -4661,7 +5137,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
+  }, children), multiselect && /*#__PURE__*/React.createElement(Checkbox$1
   // In multiselect variant, this checkbox only acts as visual representation of item being selected,
   // so need to be taken out of screen reader scope.
   , {
@@ -4727,7 +5203,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 = (data, value) => {
+const findByValue$1 = (data, value) => {
   return data.find(option => getValue(option.value) === getValue(value));
 };
 const searchForString = (child, value, strategy = 'includes') => {
@@ -4938,7 +5414,7 @@ const useCombobox = ({
       return;
     }
     if (onChange && event.target.value !== value) {
-      const item = findByValue(flattenedData, event.target.value);
+      const item = findByValue$1(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) {
@@ -5323,7 +5799,7 @@ const PopoverContext = /*#__PURE__*/React.createContext({
   props: {},
   ref: null
 });
-const Trigger$2 = /*#__PURE__*/React.forwardRef(function PopoverAnchor(props, externalRef) {
+const Trigger$3 = /*#__PURE__*/React.forwardRef(function PopoverAnchor(props, externalRef) {
   var _props$children;
   const {
     ref: parentRef,
@@ -5352,7 +5828,7 @@ const RenderPropWrapper = /*#__PURE__*/React.forwardRef(function RenderPropWrapp
     ref
   });
 });
-const Content$3 = /*#__PURE__*/React.forwardRef(function PopoverContent(props, ref) {
+const Content$4 = /*#__PURE__*/React.forwardRef(function PopoverContent(props, ref) {
   const {
     placement: side,
     ...popoverContentProps
@@ -5401,10 +5877,10 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(props, ref) {
     modal: modal,
     open: open,
     onOpenChange: onChange
-  }, trigger && /*#__PURE__*/React.createElement(Trigger$2, null, trigger), children));
+  }, trigger && /*#__PURE__*/React.createElement(Trigger$3, null, trigger), children));
 });
-Popover.Trigger = Trigger$2;
-Popover.Content = Content$3;
+Popover.Trigger = Trigger$3;
+Popover.Content = Content$4;
 Popover.Close = Close$1;
 Popover.Portal = PopoverPrimitive.Portal;
 
@@ -5494,7 +5970,7 @@ const useCurrentDialog = () => {
   return React.useContext(DialogContext);
 };
 
-const Trigger$3 = /*#__PURE__*/React.forwardRef(function DialogTrigger(props, externalRef) {
+const Trigger$4 = /*#__PURE__*/React.forwardRef(function DialogTrigger(props, externalRef) {
   const {
     ref: parentRef,
     props: parentProps
@@ -5592,7 +6068,7 @@ const RenderPropWrapper$1 = /*#__PURE__*/React.forwardRef(function RenderPropWra
     ...renderProps
   });
 });
-const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, ref) {
+const Content$5 = /*#__PURE__*/React.forwardRef(function DialogContent(props, ref) {
   const dialog = useCurrentDialog();
   const internalRef = useMergedRef(ref);
   const {
@@ -5759,37 +6235,16 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(props, ref) {
     defaultOpen: defaultOpen,
     open: open,
     onOpenChange: onChange
-  }, trigger && /*#__PURE__*/React.createElement(Trigger$3, null, trigger), children));
+  }, trigger && /*#__PURE__*/React.createElement(Trigger$4, null, trigger), children));
 });
-Dialog.Trigger = Trigger$3;
-Dialog.Content = Content$4;
+Dialog.Trigger = Trigger$4;
+Dialog.Content = Content$5;
 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,
@@ -6143,7 +6598,7 @@ const DrawerContent = /*#__PURE__*/React__default.forwardRef(function Content(pr
     ref: ref
   }, content);
 });
-const Content$5 = /*#__PURE__*/React__default.forwardRef(function Content(props, externalRef) {
+const Content$6 = /*#__PURE__*/React__default.forwardRef(function Content(props, externalRef) {
   const {
     children
   } = props;
@@ -6152,7 +6607,7 @@ const Content$5 = /*#__PURE__*/React__default.forwardRef(function Content(props,
   }), children));
 });
 
-const Trigger$4 = /*#__PURE__*/React.forwardRef(function DrawerTrigger(props, ref) {
+const Trigger$5 = /*#__PURE__*/React.forwardRef(function DrawerTrigger(props, ref) {
   return /*#__PURE__*/React.createElement(DialogPrimitive.Trigger, Object.assign({}, props, {
     ref: ref,
     asChild: true
@@ -6240,10 +6695,10 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(props, ref) {
     modal: variant === 'overlay' ? true : false,
     open: open,
     onOpenChange: setOpen
-  }, trigger && /*#__PURE__*/React.createElement(Trigger$4, null, trigger), children));
+  }, trigger && /*#__PURE__*/React.createElement(Trigger$5, null, trigger), children));
 });
-Drawer.Trigger = Trigger$4;
-Drawer.Content = Content$5;
+Drawer.Trigger = Trigger$5;
+Drawer.Content = Content$6;
 Drawer.InnerContent = InnerContent;
 Drawer.Title = Title$2;
 Drawer.Footer = Footer$2;
@@ -6321,7 +6776,7 @@ const Title$3 = /*#__PURE__*/React.forwardRef(function DialogTitle(props, ref) {
     ref: ref
   }));
 });
-const Content$6 = /*#__PURE__*/React.forwardRef(function HangerContent(props, ref) {
+const Content$7 = /*#__PURE__*/React.forwardRef(function HangerContent(props, ref) {
   const {
     placement: side
   } = props;
@@ -6380,7 +6835,7 @@ const Hanger = /*#__PURE__*/React.forwardRef(function Hanger(props, ref) {
   }, anchor && /*#__PURE__*/React.createElement(Anchor, null, anchor), children));
 });
 Hanger.Anchor = Anchor;
-Hanger.Content = Content$6;
+Hanger.Content = Content$7;
 Hanger.Title = Title$3;
 
 const UnstyledArrow$1 = /*#__PURE__*/React.forwardRef(function HoverCardArrow(props, ref) {
@@ -6405,13 +6860,13 @@ const UnstyledArrow$1 = /*#__PURE__*/React.forwardRef(function HoverCardArrow(pr
   })));
 });
 
-const Trigger$5 = /*#__PURE__*/React.forwardRef(function HoverCardTrigger(props, ref) {
+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$7 = /*#__PURE__*/React.forwardRef(function HoverCardContent(props, ref) {
+const Content$8 = /*#__PURE__*/React.forwardRef(function HoverCardContent(props, ref) {
   const {
     placement: side
   } = props;
@@ -6431,8 +6886,8 @@ const HoverCard = props => {
     openDelay: 300
   }));
 };
-HoverCard.Trigger = Trigger$5;
-HoverCard.Content = Content$7;
+HoverCard.Trigger = Trigger$6;
+HoverCard.Content = Content$8;
 
 const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
   onSearch,
@@ -6632,7 +7087,7 @@ const useListbox = ({
     event.persist();
     if (onChange) {
       var _item$path$split, _item$path;
-      const item = findByValue(data, event.target.value);
+      const item = findByValue$1(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) {
@@ -6803,7 +7258,7 @@ const useMultiListbox = ({
       const detail = [];
       const valuesArray = event.target.value.split(',');
       valuesArray.forEach(val => {
-        const item = findByValue(data, val);
+        const item = findByValue$1(data, val);
         if (item) {
           detail.push(item);
         }
@@ -6834,436 +7289,61 @@ const useMultiListbox = ({
     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 hover:wcag-grey-200 text-black': !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);
-    }
-    if (props['aria-haspopup'] || typeof dialog === 'function') {
-      event.preventDefault();
-    }
-  };
-  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();
-  };
-  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);
-    }
-  }, [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);
-});
+    tabIndex: -1,
+    value: value !== null && value !== void 0 ? value : ''
+  };
+  return {
+    list,
+    input
+  };
+};
 
-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 Listbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
   const {
-    children,
-    value,
+    className: externalClassName,
     ...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,
-    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 {
-    context,
-    props: {
-      ...otherProps,
-      ...valueProps,
-      children,
-      disabled,
-      orientation
+    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 */
     }
-  };
-};
-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, {
-    className: className,
-    "data-taco": "radio-group",
-    ref: ref
+  })), /*#__PURE__*/React.createElement("input", Object.assign({}, input, {
+    className: "hidden",
+    type: "text"
   })));
 });
-RadioGroup.Item = RadioGroupItem;
-
-const RadioItem = props => {
-  const context = React.useContext(MenuRadioGroupContext);
+const MultiListbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref) {
   const {
-    children,
-    value,
+    className: externalClassName,
     ...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 {
-    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
+    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"
   })));
 });
-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, {
@@ -7544,7 +7624,7 @@ const useSelect = ({
   }, [open]);
   React.useEffect(() => {
     if (value === undefined) {
-      if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {
+      if (defaultValue !== undefined && findByValue$1(flattenedData, defaultValue)) {
         setInputValueByRef$1(inputRef.current, defaultValue);
       } else {
         if (emptyValue !== undefined) {
@@ -7554,7 +7634,7 @@ const useSelect = ({
         }
       }
     } else {
-      if (!multiselect && !findByValue(flattenedData, value)) {
+      if (!multiselect && !findByValue$1(flattenedData, value)) {
         if (emptyValue !== undefined) {
           setInputValueByRef$1(inputRef.current, emptyValue);
         } else if (data.length > 0) {
@@ -7613,11 +7693,11 @@ const useSelect = ({
         text = texts.select.allOptionsSelected;
       } else {
         var _findByValue$text, _findByValue;
-        text = (_findByValue$text = (_findByValue = findByValue(flattenedData, selectedValues[0])) === null || _findByValue === void 0 ? void 0 : _findByValue.text) !== null && _findByValue$text !== void 0 ? _findByValue$text : '';
+        text = (_findByValue$text = (_findByValue = findByValue$1(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(flattenedData, value);
+      const item = findByValue$1(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')
@@ -7629,7 +7709,7 @@ const useSelect = ({
     event.persist();
     if (onChange) {
       var _item$path$split, _item$path;
-      const item = findByValue(flattenedData, event.target.value);
+      const item = findByValue$1(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) {
@@ -10124,7 +10204,7 @@ const useRowSelect = onSelectedRows => {
               onSelectedRows({});
             }
           };
-          return /*#__PURE__*/React__default.createElement(Checkbox, Object.assign({}, props, {
+          return /*#__PURE__*/React__default.createElement(Checkbox$1, Object.assign({}, props, {
             onChange: onChange
           }));
         },
@@ -10149,7 +10229,7 @@ const useRowSelect = onSelectedRows => {
             }
             lastSelectedSortedIndex.current = sortedIndex;
           };
-          return /*#__PURE__*/React__default.createElement(Checkbox, Object.assign({}, props, {
+          return /*#__PURE__*/React__default.createElement(Checkbox$1, Object.assign({}, props, {
             className: "!mt-2.5",
             onClick: onClick,
             // this is necessary to remove console spam from eslint
@@ -11239,7 +11319,7 @@ const SelectCell = /*#__PURE__*/React__default.memo(({
       className: "ml-2",
       keys: ['Space']
     }))
-  }, /*#__PURE__*/React__default.createElement(Checkbox, {
+  }, /*#__PURE__*/React__default.createElement(Checkbox$1, {
     "aria-label": isSelected ? texts.table2.columns.select.select : texts.table2.columns.select.deselect,
     className: "hover:border-blue !mt-0",
     checked: isSelected,
@@ -11260,7 +11340,7 @@ function createRowSelectionColumn(enableMultipleRowSelection, lastSelectedRowInd
         className: "ml-2",
         keys: ['Ctrl', 'A']
       }))
-    }, /*#__PURE__*/React__default.createElement(Checkbox, {
+    }, /*#__PURE__*/React__default.createElement(Checkbox$1, {
       "aria-label": table.getIsAllPageRowsSelected() ? texts.table2.columns.select.deselectAll : texts.table2.columns.select.selectAll,
       className: "hover:border-blue !mt-0",
       checked: table.getIsAllPageRowsSelected(),
@@ -13283,7 +13363,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, {
+  }, 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, {
     checked: column.getIsVisible(),
     onChange: column.toggleVisibility
   }) : null);
@@ -14952,7 +15032,7 @@ const SecondaryNavigation = /*#__PURE__*/React__default.forwardRef(function Seco
 });
 
 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');
+  const className = cn(getButtonClasses$1(), 'ml-1 -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",
@@ -15136,18 +15216,25 @@ const filterBySearchValue = search => agreement => {
 const isCurrentAgreement = (agreement, currentAgreement) => {
   return agreement.number === currentAgreement.number && agreement.userId === currentAgreement.userId;
 };
-const createAgreementButton = (agreement, fallbackImageSrc, onChangeAgreement, isCurrentAgreement = false) => /*#__PURE__*/React__default.createElement("button", {
-  "aria-current": isCurrentAgreement ? 'true' : undefined,
-  className: "focus:yt-focus-dark w-full rounded outline-none",
-  "data-taco": "header-agreements-agreement",
-  key: `${agreement.number}_${agreement.userId}`,
-  onClick: () => onChangeAgreement(agreement),
-  onKeyDown: () => onChangeAgreement(agreement),
-  tabIndex: 0
-}, /*#__PURE__*/React__default.createElement(AgreementDetails, Object.assign({}, agreement, {
-  className: "h-14 bg-white/[0.08] xl:hover:bg-white/[0.16] [[aria-current='true']>&]:bg-white/[0.16]",
-  fallbackImageSrc: fallbackImageSrc
-})));
+const createAgreementButton = (agreement, fallbackImageSrc, onChangeAgreement, isCurrentAgreement = false) => {
+  const handleKeyDown = event => {
+    if (event.key === 'Enter') {
+      onChangeAgreement(agreement);
+    }
+  };
+  return /*#__PURE__*/React__default.createElement("button", {
+    "aria-current": isCurrentAgreement ? 'true' : undefined,
+    className: "focus:yt-focus-dark w-full rounded outline-none",
+    "data-taco": "header-agreements-agreement",
+    key: `${agreement.number}_${agreement.userId}`,
+    onClick: () => onChangeAgreement(agreement),
+    onKeyDown: handleKeyDown,
+    tabIndex: 0
+  }, /*#__PURE__*/React__default.createElement(AgreementDetails, Object.assign({}, agreement, {
+    className: "h-14 bg-white/[0.08] xl:hover:bg-white/[0.16] [[aria-current='true']>&]:bg-white/[0.16]",
+    fallbackImageSrc: fallbackImageSrc
+  })));
+};
 
 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)]',
@@ -15196,24 +15283,7 @@ const useMatchMedia = (query, defaultMatches = false) => {
 
 const useIsLargeScreen = () => useMatchMedia('(min-width: 1024px)', window.innerWidth > 1024);
 
-const SidebarBackdrop = /*#__PURE__*/React__default.forwardRef(function SidebarBackdrop(props, ref) {
-  const internalRef = useMergedRef(ref);
-  React__default.useEffect(() => {
-    if (internalRef.current) {
-      internalRef.current.style.opacity = '1'; // Trigger the animation
-    }
-
-    return () => {
-      if (internalRef.current) {
-        internalRef.current.style.opacity = '0'; // Reset to the initial value
-      }
-    };
-  }, []);
-  return /*#__PURE__*/React__default.createElement(Backdrop, Object.assign({}, props, {
-    className: "absolute z-[1] opacity-0 transition-opacity duration-300",
-    ref: internalRef
-  }));
-});
+const SidebarBackdrop = /*#__PURE__*/framerMotion.motion(Backdrop);
 const Sidebar = /*#__PURE__*/React__default.forwardRef(function LayoutSidebar(props, ref) {
   const {
     children,
@@ -15247,10 +15317,21 @@ const Sidebar = /*#__PURE__*/React__default.forwardRef(function LayoutSidebar(pr
     };
   }, [isSmallScreen, sidebarOpen]);
   const showBackdrop = isSmallScreen && sidebarOpen === true;
+  const [ready, setReady] = React__default.useState(isSmallScreen);
   const className = cn('bg-grey-50 h-full w-64 flex-shrink-0 flex-grow-0', {
-    'transition-[transform] duration-300 absolute z-10 aria-hidden:-translate-x-64': isSmallScreen,
+    'absolute z-10 aria-hidden:-translate-x-64 ': isSmallScreen,
+    // prevent animation when crossing the boundary from large to small screen,
+    // this prevents awkward animation in the edge case (resizing the browser, instead of starting at a given size)
+    invisible: isSmallScreen && !ready,
+    'transition-[transform] duration-300 visible': isSmallScreen && ready,
     'border-r-2 border-black/[.08] ': !showBackdrop
   }, props.className);
+  React__default.useEffect(() => {
+    // ensure state is updated in the next cpu tick so that the animation definitely doesn't run
+    setTimeout(() => {
+      setReady(isSmallScreen);
+    }, 1);
+  }, [isSmallScreen]);
   const toggleSidebar = () => setSidebarOpen(open => !open);
   const content = typeof children === 'function' ? children({
     isLargeScreen,
@@ -15265,9 +15346,19 @@ const Sidebar = /*#__PURE__*/React__default.forwardRef(function LayoutSidebar(pr
     "aria-hidden": !isVisible,
     className: className,
     ref: ref
-  }), content), showBackdrop ? /*#__PURE__*/React__default.createElement(SidebarBackdrop, {
+  }), content), /*#__PURE__*/React__default.createElement(framerMotion.AnimatePresence, null, showBackdrop && /*#__PURE__*/React__default.createElement(SidebarBackdrop, {
+    initial: {
+      opacity: 0
+    },
+    animate: {
+      opacity: 1
+    },
+    exit: {
+      opacity: 0
+    },
+    className: "z-[1]",
     onClick: () => setSidebarOpen(false)
-  }) : null);
+  })));
 });
 
 const Top = props => {
@@ -15497,9 +15588,10 @@ 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;
+exports.Checkbox = Checkbox$1;
 exports.CollectionPrimitive = Collection;
 exports.Combobox = Combobox;
 exports.Datepicker = Datepicker;
@@ -15549,7 +15641,7 @@ exports.VisuallyHidden = VisuallyHidden;
 exports.WindowedTable = WindowedTable;
 exports.convertRowIndexPathToNumberArray = convertRowIndexPathToNumberArray;
 exports.defaultLocalisationTexts = defaultLocalisationTexts;
-exports.findByValue = findByValue$1;
+exports.findByValue = findByValue;
 exports.format = format;
 exports.getByRowIndexPath = getByRowIndexPath;
 exports.getNavigationLinkClasses = getNavigationLinkClasses;
@@ -15567,6 +15659,7 @@ exports.setByRowIndexPath = setByRowIndexPath;
 exports.useBoundaryOverflowDetection = useBoundaryOverflowDetection;
 exports.useBoundingClientRectListener = useBoundingClientRectListener;
 exports.useDropTarget = useDropTarget;
+exports.useIntersectionObserver = useIntersectionObserver;
 exports.useIsLargeScreen = useIsLargeScreen;
 exports.useListKeyboardNavigation = useListKeyboardNavigation;
 exports.useListScrollTo = useListScrollTo;