@economic/taco 1.23.1 → 1.25.0

package/dist/taco.cjs.development.js

@@ -19,14 +19,14 @@ var dateFns = require('date-fns');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 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 reactUseControllableState = require('@radix-ui/react-use-controllable-state');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
-var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var reactTable = require('react-table');
 var reactIntersectionObserver = require('react-intersection-observer');
-var focus = require('@react-aria/focus');
 var reactWindow = require('react-window');
 var InfiniteLoader = _interopDefault(require('react-window-infinite-loader'));
 var set = _interopDefault(require('lodash/set'));
@@ -44,6 +44,7 @@ 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 => {
@@ -3648,6 +3649,7 @@ const createButtonWithTooltip = (props, className, ref) => {
 const createButtonWithOverlays = (props, buttonBase) => {
   const {
     dialog,
+    drawer,
     hanger,
     menu,
     popover
@@ -3657,6 +3659,10 @@ const createButtonWithOverlays = (props, buttonBase) => {
     button = dialog({
       trigger: button
     });
+  } else if (typeof drawer === 'function') {
+    button = drawer({
+      trigger: button
+    });
   } else if (typeof menu === 'function') {
     button = menu({
       trigger: button
@@ -3718,6 +3724,9 @@ const IconButton = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
 });
 
 const defaultLocalisationTexts = {
+  banner: {
+    close: 'Close'
+  },
   calendar: {
     months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
     weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
@@ -3738,21 +3747,25 @@ const defaultLocalisationTexts = {
     expand: 'Show calendar',
     shortcuts: 'Shortcuts'
   },
+  dialog: {
+    close: 'Close',
+    drag: 'Drag'
+  },
   hanger: {
     close: 'Close'
   },
-  banner: {
-    close: 'Close'
+  header: {
+    addAgreement: 'Add agreement',
+    logout: 'Log off',
+    more: 'More',
+    new: 'New',
+    search: 'Search for agreement...'
   },
   listbox: {
     loading: 'Loading results...',
     empty: 'No results found',
     allOption: 'All'
   },
-  dialog: {
-    close: 'Close',
-    drag: 'Drag'
-  },
   pagination: {
     label: 'Pagination',
     pageSize: 'Items per page',
@@ -3863,6 +3876,11 @@ const defaultLocalisationTexts = {
       collapseRow: 'Collapse current row'
     }
   },
+  searchInput: {
+    button: 'Search',
+    placeholder: 'Search...',
+    clear: 'Clear'
+  },
   select: {
     allOptionsSelected: 'All'
   },
@@ -3888,10 +3906,8 @@ const defaultLocalisationTexts = {
     next: 'Next',
     open: 'Open'
   },
-  searchInput: {
-    button: 'Search',
-    placeholder: 'Search...',
-    clear: 'Clear'
+  drawer: {
+    close: 'Close'
   }
 };
 const defaultLocalizationContext = {
@@ -3953,6 +3969,7 @@ const Base$1 = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
 const Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
   const {
     dialog,
+    drawer,
     hanger,
     menu,
     popover,
@@ -3974,6 +3991,7 @@ const Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
   }), children);
   return createButtonWithOverlays({
     dialog,
+    drawer,
     hanger,
     menu,
     popover
@@ -4116,7 +4134,7 @@ const Card = /*#__PURE__*/React.forwardRef(function Card(props, ref) {
     menu,
     children
   } = props;
-  const className = cn('bg-white flex flex-col rounded-xl shadow-[0px_0px_1px_rgba(0,0,0,0.1),0px_6px_18px_rgba(47,51,68,0.2)]', props.className);
+  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",
@@ -5523,10 +5541,17 @@ const useDraggable = ref => {
       setDragging(false);
     }
   });
+  const resetPosition = () => {
+    setPosition({
+      x: 0,
+      y: 0
+    });
+  };
   return {
     position,
     dragging,
-    handleProps: moveProps
+    handleProps: moveProps,
+    resetPosition
   };
 };
 
@@ -5633,7 +5658,7 @@ const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
   })) : null), dialog.elements.drawer, dialog.elements.extra))));
 });
 
-const Drawer = /*#__PURE__*/React.forwardRef(function DialogDrawer(props, ref) {
+const DialogDrawer = /*#__PURE__*/React.forwardRef(function DialogDrawer(props, ref) {
   var _dialog$drawer, _dialog$drawer2;
   const dialog = useCurrentDialog();
   const className = cn('absolute top-0  -ml-[4px] hidden h-full w-full overflow-y-auto rounded-r bg-white p-6 text-left', props.className);
@@ -5665,7 +5690,7 @@ const Drawer = /*#__PURE__*/React.forwardRef(function DialogDrawer(props, ref) {
     ref: ref
   }), typeof props.children === 'function' ? props.children(dialog.drawer) : props.children);
 });
-Drawer.displayName = 'DialogDrawer';
+DialogDrawer.displayName = 'DialogDrawer';
 
 const Extra = /*#__PURE__*/React.forwardRef(function DialogExtra(props, ref) {
   const className = cn('wcag-grey-100 absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left', props.className);
@@ -5684,7 +5709,7 @@ const useSeparatedChildren = initialChildren => {
     let extra;
     React.Children.toArray(initialChildren).forEach(child => {
       var _child$type, _child$type2;
-      if (((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === Drawer.displayName) {
+      if (((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === DialogDrawer.displayName) {
         drawer = child;
       } else if (((_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.displayName) === Extra.displayName) {
         extra = child;
@@ -5741,50 +5766,9 @@ Dialog.Content = Content$4;
 Dialog.Title = Title$1;
 Dialog.Footer = Footer$1;
 Dialog.Extra = Extra;
-Dialog.Drawer = Drawer;
+Dialog.Drawer = DialogDrawer;
 Dialog.Close = Close$2;
 
-const Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
-  const {
-    disabled,
-    children,
-    invalid = false,
-    message,
-    ...otherProps
-  } = props;
-  const className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
-    'text-grey-300': disabled
-  }, props.className);
-  const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
-    'text-grey-700': !invalid,
-    'text-red-500': invalid,
-    'opacity-50': disabled
-  }, props.className);
-  return /*#__PURE__*/React.createElement("label", Object.assign({}, otherProps, {
-    className: className,
-    "data-taco": "label",
-    ref: ref
-  }), children, message && /*#__PURE__*/React.createElement("span", {
-    className: messageClassName,
-    role: invalid ? 'alert' : undefined
-  }, message));
-});
-
-const Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
-  const {
-    horizontal = false,
-    ...otherProps
-  } = props;
-  const className = cn('yt-form', {
-    'yt-form--horizontal flex flex-wrap': horizontal
-  }, props.className);
-  return /*#__PURE__*/React.createElement("form", Object.assign({}, otherProps, {
-    className: className,
-    "data-taco": "form",
-    ref: ref
-  }));
-});
-
 const Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
   const {
     as: Tag = 'span',
@@ -5801,486 +5785,996 @@ const Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
   }));
 });
 
-const HangerContext = /*#__PURE__*/React.createContext({
-  onClose: undefined,
+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,
+  showCloseButton: true,
+  onClose: () => {},
+  onResize: () => {},
   props: {},
-  ref: null
+  ref: null,
+  size: 'md',
+  variant: 'embedded'
 });
-const Anchor = /*#__PURE__*/React.forwardRef(function HangerAnchor(props, externalRef) {
-  var _props$children;
-  const {
-    ref: parentRef,
-    props: parentProps
-  } = React.useContext(HangerContext);
-  const refCallback = mergeRefs([parentRef, externalRef]);
-  let children = props.children;
-  if ( /*#__PURE__*/React.isValidElement(props.children) && typeof ((_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === 'function') {
-    console.warn(`Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`);
-    children = /*#__PURE__*/React.createElement("span", null, props.children);
+const useCurrentDrawer = () => {
+  return React.useContext(DrawerContext);
+};
+
+const getDrawerSizeClassnames = size => {
+  switch (size) {
+    case 'lg':
+      return 'w-[600px]';
+    case 'md':
+    default:
+      return 'w-[420px]';
   }
-  return /*#__PURE__*/React.createElement(PopoverPrimitive.Anchor, Object.assign({}, parentProps, props, {
-    ref: refCallback,
-    asChild: true
-  }), children);
+};
+const getDrawerContentClassNames = (size, variant, open) => {
+  return cn('bg-white h-full bottom-0 top-0 right-0 transition-none', {
+    block: open,
+    hidden: !open,
+    fixed: variant === 'overlay',
+    'relative h-full overflow-hidden': variant === 'embedded'
+  }, getDrawerSizeClassnames(size));
+};
+const getDrawerContainerClassNames = variant => {
+  return cn('bg-white mx-auto absolute h-full w-full flex flex-col ', {
+    'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]': variant === 'overlay',
+    'border-l border-grey h-full': variant === 'embedded'
+  });
+};
+const getDrawerDragHandlerClassNames = () => {
+  return cn('border-[2px] absolute border-transparent top-0 w-2 h-full cursor-ew-resize left-0 hover:border-l-blue-500');
+};
+const getBackdropClassNames = open => {
+  return cn({
+    block: open,
+    hidden: !open
+  });
+};
+
+const useGlobalKeyboardShortcut = handler => {
+  React__default.useEffect(() => {
+    document.addEventListener('keydown', handler);
+    return () => {
+      document.removeEventListener('keydown', handler);
+    };
+  }, [handler]);
+};
+
+const Bar = props => {
+  const className = cn(`flex select-none touch-none transition-colors hover:bg-grey`, {
+    'w-[7px] hover:w-[14px] mr-[2px] hover:px-[2px] hover:mr-0': props.orientation === 'vertical',
+    'flex-col h-[7px] hover:h-[14px] mb-[2px] hover:py-[2px] hover:mb-0': props.orientation === 'horizontal'
+  });
+  return /*#__PURE__*/React__default.createElement(ScrollAreaPrimitive.Scrollbar, Object.assign({}, props, {
+    className: className
+  }));
+};
+const Thumb = props => /*#__PURE__*/React__default.createElement(ScrollAreaPrimitive.Thumb, Object.assign({}, props, {
+  className: "flex-[1] rounded bg-black opacity-50"
+}));
+const Corner = props => /*#__PURE__*/React__default.createElement(ScrollAreaPrimitive.Corner, Object.assign({}, props, {
+  classname: "bg-grey-500"
+}));
+const ScrollArea = props => {
+  const {
+    children,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/React__default.createElement(ScrollAreaPrimitive.Root, Object.assign({}, otherProps, {
+    className: cn('overflow-hidden', props.className)
+  }), /*#__PURE__*/React__default.createElement(ScrollAreaPrimitive.Viewport, {
+    className: "h-full w-full"
+  }, children), /*#__PURE__*/React__default.createElement(Bar, {
+    orientation: "vertical"
+  }, /*#__PURE__*/React__default.createElement(Thumb, null)), /*#__PURE__*/React__default.createElement(Bar, {
+    orientation: "horizontal"
+  }, /*#__PURE__*/React__default.createElement(Thumb, null)), /*#__PURE__*/React__default.createElement(Corner, null));
+};
+
+const RESIZE_MIN = 360;
+const RESIZE_MAX = 1000;
+var DrawerAnimationDefinition;
+(function (DrawerAnimationDefinition) {
+  DrawerAnimationDefinition["Visible"] = "visible";
+  DrawerAnimationDefinition["Hidden"] = "hidden";
+})(DrawerAnimationDefinition || (DrawerAnimationDefinition = {}));
+const RenderPropWrapper$2 = /*#__PURE__*/React__default.forwardRef(function RenderPropWrapper({
+  children,
+  onClick,
+  renderProps
+}, ref) {
+  const close = () => {
+    onClick(new CustomEvent('close'));
+  };
+  return children({
+    close,
+    ref,
+    ...renderProps
+  });
 });
-const Title$2 = /*#__PURE__*/React.forwardRef(function DialogTitle(props, ref) {
-  const className = cn('mb-1 text-base font-bold flex w-full', props.className);
-  return /*#__PURE__*/React.createElement("span", Object.assign({}, props, {
-    className: className,
+const Title$2 = /*#__PURE__*/React__default.forwardRef(function DrawerTitle(props, ref) {
+  const {
+    className,
+    children,
+    ...otherProps
+  } = props;
+  /**
+   * By design in default drawer version Title has grey separator, but we might have exceptions like Drawer + Tabs scenario,
+   * where we might want to hide the grey separator. For this reason separator was rendedr with using of classNames,
+   * so it can be easily overriden in exceptional scenarious.
+   *  */
+  const cName = cn('grow-0 py-4 pl-4 justyfy-self-start mb-0 border-b-[1px] border-grey-300', className);
+  return /*#__PURE__*/React__default.createElement(DialogPrimitive.Title, Object.assign({
+    className: cName
+  }, otherProps, {
     ref: ref
-  }));
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "line-clamp-2 inline-block w-4/6 overflow-y-hidden"
+  }, children));
 });
-const Content$5 = /*#__PURE__*/React.forwardRef(function HangerContent(props, ref) {
+const Footer$2 = /*#__PURE__*/React__default.forwardRef(function DrawerFooter(props, ref) {
   const {
-    placement: side
+    className,
+    ...otherProps
   } = props;
-  const context = React.useContext(HangerContext);
+  /**
+   * The same scenario as Title, grey separator rendered using classNames to have posibility to override it.
+   */
+  const cName = cn('mt-auto flex justify-end grow-0 p-4 border-t-[1px] border-grey-300', props.className);
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
+    className: cName,
+    ref: ref
+  }));
+});
+const Actions = /*#__PURE__*/React__default.forwardRef(function Actions(props, ref) {
   const {
-    texts
-  } = useLocalization();
-  const className = cn('wcag-blue-500 border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm', props.className);
-  const handleInteractOutside = event => {
-    event.preventDefault();
-  };
-  return /*#__PURE__*/React.createElement(PopoverPrimitive.Portal, null, /*#__PURE__*/React.createElement(PopoverPrimitive.Content, {
-    className: className,
-    "data-taco": "hanger",
-    onInteractOutside: handleInteractOutside,
-    side: side,
-    sideOffset: 1,
+    className,
+    ...otherProps
+  } = props;
+  const cName = cn('absolute top-0 right-10 mr-[8px] mt-4', className);
+  return /*#__PURE__*/React__default.createElement(Group, Object.assign({}, otherProps, {
+    className: cName,
     ref: ref
-  }, props.children, /*#__PURE__*/React.createElement(UnstyledArrow, {
-    className: "text-blue-500"
-  }), /*#__PURE__*/React.createElement(PopoverPrimitive.Close, {
+  }));
+});
+const Close$3 = /*#__PURE__*/React__default.forwardRef(function DrawerClose(props, ref) {
+  const {
+    onClose
+  } = useCurrentDrawer();
+  return /*#__PURE__*/React__default.createElement(DialogPrimitive.Close, Object.assign({}, props, {
+    onClick: onClose,
+    ref: ref,
     asChild: true
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    appearance: "primary",
-    "aria-label": texts.hanger.close,
-    className: "absolute top-0 right-0 ml-2 mr-2 mt-2 text-white",
-    icon: "close",
-    onClick: context.onClose
-  }))));
+  }));
 });
-const Hanger = /*#__PURE__*/React.forwardRef(function Hanger(props, ref) {
+const InnerContent = /*#__PURE__*/React__default.forwardRef(function InnerContent(props, ref) {
   const {
-    anchor,
+    className,
+    isScrollable = true,
     children,
-    defaultOpen = true,
-    onClose,
     ...otherProps
   } = props;
-  const context = React.useMemo(() => ({
-    onClose,
-    props: otherProps,
-    ref
-  }), [onClose, otherProps]);
-  // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal
-  const [open, setOpen] = React.useState(false);
-  React.useEffect(() => {
-    if (defaultOpen) {
-      setOpen(defaultOpen);
-    }
-  }, []);
-  return /*#__PURE__*/React.createElement(HangerContext.Provider, {
-    value: context
-  }, /*#__PURE__*/React.createElement(PopoverPrimitive.Root, {
-    key: String(open),
-    defaultOpen: open
-  }, anchor && /*#__PURE__*/React.createElement(Anchor, null, anchor), children));
+  const cName = cn('grow-1 p-4', className);
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
+    className: cName,
+    ref: ref
+  }), isScrollable ? /*#__PURE__*/React__default.createElement(ScrollArea, {
+    className: "w-full gap-y-0.5"
+  }, children) : {
+    children
+  });
 });
-Hanger.Anchor = Anchor;
-Hanger.Content = Content$5;
-Hanger.Title = Title$2;
-
-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)'
+const Portal = props => {
+  const {
+    children,
+    ...otherProps
+  } = props;
+  const {
+    open = false,
+    variant,
+    outlet
+  } = useCurrentDrawer();
+  const backdropClassNames = React__default.useMemo(() => {
+    return getBackdropClassNames(open);
+  }, [open]);
+  if (!outlet) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.createElement(DialogPrimitive.Portal, Object.assign({}, otherProps, {
+    container: outlet !== null && outlet !== void 0 ? outlet : undefined
+  }), variant === 'overlay' ? /*#__PURE__*/React__default.createElement(DialogPrimitive.Overlay, {
+    forceMount: true
+  }, /*#__PURE__*/React__default.createElement(Backdrop, {
+    className: backdropClassNames
+  })) : null, children);
+};
+const UntrappedFocusDrawerContent = /*#__PURE__*/React__default.forwardRef(function EmbeddedDrawerContent(props, ref) {
+  const {
+    onEscape,
+    children,
+    ...otherProps
+  } = props;
+  useGlobalKeyboardShortcut(event => {
+    if (event.key === 'Escape') {
+      onEscape(event);
     }
-  }), /*#__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$4 = /*#__PURE__*/React.forwardRef(function HoverCardTrigger(props, ref) {
-  return /*#__PURE__*/React.createElement(HoverCardPrimitive.Trigger, Object.assign({}, props, {
-    asChild: true,
+  });
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
     ref: ref
-  }));
+  }), /*#__PURE__*/React__default.createElement(focus.FocusScope, {
+    autoFocus: true,
+    restoreFocus: true
+  }, children));
 });
-const Content$6 = /*#__PURE__*/React.forwardRef(function HoverCardContent(props, ref) {
+const DrawerContent = /*#__PURE__*/React__default.forwardRef(function Content(props, externalRef) {
   const {
-    placement: side
+    size,
+    onClose,
+    onResize,
+    open = false,
+    closeOnEscape,
+    variant,
+    focusTrap,
+    showCloseButton,
+    setOpen
+  } = useCurrentDrawer();
+  const {
+    className,
+    style,
+    children,
+    ...otherProps
   } = 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$4;
-HoverCard.Content = Content$6;
-
-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 ref = useMergedRef(externalRef);
+  // if the drawer was opened by a menu, we need to close the menu when the drawer closes
+  // the menu is still open (and mounted) because it is the trigger for the drawer
+  const menu = useCurrentMenu();
+  let handleCloseAutoFocus;
+  if (menu) {
+    handleCloseAutoFocus = () => {
+      menu.close();
+    };
+  }
+  const containerClassName = React__default.useMemo(() => cn(getDrawerContainerClassNames(variant), className), [className]);
+  const {
+    contentClassName,
+    dragHandlerClassName
+  } = React__default.useMemo(() => {
+    const contentClassName = getDrawerContentClassNames(size, variant, open);
+    const dragHandlerClassName = getDrawerDragHandlerClassNames();
+    return {
+      contentClassName,
+      dragHandlerClassName
+    };
+  }, [size, variant, open]);
+  const handleEscapeKeyDown = event => {
+    var _ref$current;
+    const isTargetInsideDrawerContent = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.contains(event.target);
+    if (isTargetInsideDrawerContent) {
+      if (!closeOnEscape) {
+        event.preventDefault();
+      } else {
+        setOpen && setOpen(false);
+        if (onClose) {
+          onClose();
+        }
+      }
+    }
   };
-  const handleKeyDown = event => {
-    var _props$onKeyDown;
-    if (event.key === 'Enter') {
-      event.preventDefault();
-      handleClick();
-      return;
+  const [containerWidth, setContainerWidth] = React__default.useState();
+  const dragHandlerRef = React__default.useRef(null);
+  const {
+    position,
+    dragging,
+    handleProps: dragHandleProps,
+    resetPosition
+  } = useDraggable(useMergedRef(dragHandlerRef));
+  const contentRef = React__default.useRef(null);
+  React__default.useEffect(() => {
+    if (onResize) {
+      onResize(position.x);
+    }
+  }, [position]);
+  React__default.useEffect(() => {
+    var _contentRef$current;
+    setContainerWidth((_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.offsetWidth);
+  }, [contentRef, open]);
+  const resizedWidth = React__default.useMemo(() => {
+    if (containerWidth) {
+      return Math.min(RESIZE_MAX, Math.max(RESIZE_MIN, containerWidth - position.x || 0));
+    }
+    return;
+  }, [containerWidth, position]);
+  React__default.useEffect(() => {
+    if (!dragging && resizedWidth) {
+      setContainerWidth(resizedWidth);
+      resetPosition();
+    }
+  }, [dragging]);
+  let output;
+  if (typeof children === 'function') {
+    output = /*#__PURE__*/React__default.createElement(Close$3, null, /*#__PURE__*/React__default.createElement(RenderPropWrapper$2, null, children));
+  } else {
+    output = children;
+  }
+  const content = /*#__PURE__*/React__default.createElement("div", {
+    ref: contentRef,
+    "data-taco": "drawer",
+    className: containerClassName
+  }, /*#__PURE__*/React__default.createElement("div", Object.assign({
+    className: dragHandlerClassName
+  }, dragHandleProps, {
+    "data-testid": "resize-handler",
+    ref: dragHandlerRef
+  })), output, showCloseButton ? /*#__PURE__*/React__default.createElement(Close$3, null, /*#__PURE__*/React__default.createElement(IconButton, {
+    appearance: "discrete",
+    "aria-label": texts.drawer.close,
+    className: "absolute top-0 right-0 mt-4 mr-2",
+    icon: "close"
+  })) : null);
+  const styleProp = {
+    ...style,
+    ...{
+      width: resizedWidth
     }
-    (_props$onKeyDown = props.onKeyDown) === null || _props$onKeyDown === void 0 ? void 0 : _props$onKeyDown.call(props, event);
   };
-  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"
+  return focusTrap ? /*#__PURE__*/React__default.createElement(DialogPrimitive.Content, Object.assign({
+    forceMount: true
+  }, otherProps, {
+    className: contentClassName,
+    onEscapeKeyDown: handleEscapeKeyDown,
+    onInteractOutside: variant === 'overlay' ? undefined : event => event.preventDefault(),
+    onCloseAutoFocus: handleCloseAutoFocus,
+    ref: ref,
+    style: styleProp
+  }), content) : /*#__PURE__*/React__default.createElement(UntrappedFocusDrawerContent, {
+    onEscape: handleEscapeKeyDown,
+    className: contentClassName,
+    style: styleProp,
+    ref: ref
+  }, content);
+});
+const Content$5 = /*#__PURE__*/React__default.forwardRef(function Content(props, externalRef) {
+  const {
+    children
+  } = props;
+  return /*#__PURE__*/React__default.createElement(Portal, null, /*#__PURE__*/React__default.createElement(DrawerContent, Object.assign({}, props, {
+    ref: externalRef
+  }), children));
+});
+
+const Trigger$4 = /*#__PURE__*/React.forwardRef(function DrawerTrigger(props, ref) {
+  return /*#__PURE__*/React.createElement(DialogPrimitive.Trigger, Object.assign({}, props, {
+    ref: ref,
+    asChild: true
   }));
 });
 
-function useTimer(duration = 0, callback) {
-  const timer = React.useRef();
-  const [tracker, setTracker] = React.useState({
-    remaining: duration,
-    started: null
+const Outlet = /*#__PURE__*/React.forwardRef(function Outlet(props, ref) {
+  const className = cn('h-full ml-auto overflow-hidden flex-shrink-0', props.className);
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
+    className: className,
+    "data-taco": "drawer-outlet",
+    ref: ref
+  }));
+});
+// drawerStack getting set by previous drawer instance, to be able to close previous instance, when new instance getting opened.
+let drawerStack;
+const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(props, ref) {
+  const {
+    open: openProp,
+    defaultOpen: defaultOpenProp,
+    // if onChange is not provided, then replace it with empty function, needed for useControllableState
+    onChange = () => {
+      // do nothing.
+    },
+    variant = 'embedded',
+    className,
+    closeOnEscape = true,
+    onResize,
+    onClose,
+    size = 'md',
+    trigger,
+    children,
+    focusTrap = props.focusTrap === undefined && props.variant === 'overlay' ? true : props.focusTrap,
+    showCloseButton = true,
+    ...otherProps
+  } = props;
+  const [open, setOpen] = reactUseControllableState.useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpenProp,
+    onChange
   });
+  const [outlet, setOutlet] = React.useState();
+  const context = React.useMemo(() => ({
+    closeOnEscape,
+    onClose,
+    onResize,
+    props: otherProps,
+    size,
+    ref,
+    open,
+    setOpen,
+    variant,
+    focusTrap,
+    showCloseButton,
+    outlet
+  }), [closeOnEscape, open, setOpen, otherProps, variant, onResize, onClose, size, focusTrap, showCloseButton, outlet]);
+  // this prevents two drawers being open at once and used when one drawer getting opened before another one got closed.
+  const close = React.useCallback(() => {
+    setOpen(false);
+    onClose && onClose();
+  }, []);
   React.useEffect(() => {
-    if (duration) {
-      if (tracker.started) {
-        timer.current = window.setTimeout(callback, tracker.remaining);
-      } else {
-        clearTimeout(timer.current);
-      }
-    }
-    return () => {
-      clearTimeout(timer.current);
-    };
-  }, [tracker.started]);
-  return {
-    running: !!tracker.started,
-    start: () => {
-      setTracker({
-        remaining: duration,
-        started: Date.now()
-      });
-    },
-    pause: () => {
-      if (tracker.started) {
-        setTracker({
-          remaining: tracker.remaining - (Date.now() - tracker.started),
-          started: null
-        });
+    var _document$querySelect;
+    const outletElement = (_document$querySelect = document.querySelector('[data-taco="drawer-outlet"]')) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.body;
+    setOutlet(outletElement);
+  }, []);
+  React.useEffect(() => {
+    if (open) {
+      // if drawerStack is defined, this means that another drawer was opened before
+      if (drawerStack) {
+        drawerStack();
       }
-    },
-    resume: () => {
-      if (tracker.remaining && !tracker.started) {
-        setTracker({
-          remaining: tracker.remaining,
-          started: Date.now()
-        });
+      drawerStack = close;
+    } else {
+      // if drawerStack is equal to current close callback,
+      // this means that drawer getting closed completely instead of getting closed on re-open
+      if (drawerStack === close) {
+        drawerStack = undefined;
       }
     }
-  };
-}
-
-const useTypeahead = ({
-  data,
-  currentIndex
-}) => {
-  const typeaheadQuery = React.useRef();
-  const typeaheadQueryTimer = useTimer(1000, () => {
-    typeaheadQuery.current = undefined;
-  });
-  const getNextIndex = charKey => {
-    const query = (typeaheadQuery.current ? typeaheadQuery.current + charKey : charKey).toLowerCase();
-    const nextIndex = findNextIndexByValue(data, query, currentIndex);
-    typeaheadQueryTimer.start();
-    typeaheadQuery.current = query;
-    return nextIndex;
-  };
-  return {
-    getNextIndex
-  };
-};
+  }, [open]);
+  return /*#__PURE__*/React.createElement(DrawerContext.Provider, {
+    value: context
+  }, /*#__PURE__*/React.createElement(DialogPrimitive.Root, {
+    modal: variant === 'overlay' ? true : false,
+    open: open,
+    onOpenChange: setOpen
+  }, trigger && /*#__PURE__*/React.createElement(Trigger$4, null, trigger), children));
+});
+Drawer.Trigger = Trigger$4;
+Drawer.Content = Content$5;
+Drawer.InnerContent = InnerContent;
+Drawer.Title = Title$2;
+Drawer.Footer = Footer$2;
+Drawer.Close = Close$3;
+Drawer.Actions = Actions;
+Drawer.Outlet = Outlet;
 
-const useListbox = ({
-  data: externalData = [],
-  defaultValue,
-  disabled,
-  emptyValue,
-  id: nativeId,
-  invalid,
-  name,
-  onChange,
-  onFocus,
-  onKeyDown,
-  value = emptyValue,
-  ...otherProps
-}, ref) => {
-  const data = useFlattenedData(emptyValue !== undefined ? [{
-    text: '',
-    value: emptyValue
-  }, ...externalData] : externalData);
-  const id = React.useMemo(() => nativeId || uuid.v4(), [nativeId]);
-  const inputRef = useMergedRef(ref);
-  const currentIndex = value !== undefined ? getIndexFromValue(data, value) : undefined;
+const Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
   const {
-    getNextIndex
-  } = useTypeahead({
-    data,
-    currentIndex
-  });
-  const setInputValueByIndex = index => {
-    if (index !== undefined) {
-      const option = data[index];
-      if (option && !option.disabled) {
-        setInputValueByRef$1(inputRef.current, option.value);
-      }
-    }
-  };
-  const handleListboxChange = index => {
-    setInputValueByIndex(index);
-  };
-  React.useEffect(() => {
-    if (data.length && currentIndex === undefined) {
-      if (defaultValue !== undefined) {
-        const defaultValueIndex = getIndexFromValue(data, defaultValue);
-        if (defaultValueIndex !== undefined) {
-          setInputValueByIndex(defaultValueIndex);
-        }
-      } else {
-        setInputValueByIndex(0);
-      }
-    }
-  }, [data]);
-  const handleListboxKeyDown = event => {
-    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) {
-        setInputValueByIndex(nextIndex);
-      }
-      return;
-    }
-    if (onKeyDown) {
-      event.persist();
-      onKeyDown(event);
-    }
-  };
-  const handleListboxFocus = event => {
-    if (currentIndex === undefined && data.length) {
-      setInputValueByIndex(0);
-    }
-    if (onFocus) {
-      event.persist();
-      onFocus(event);
-    }
-  };
-  const handleInputChange = event => {
-    event.persist();
-    if (onChange) {
-      var _item$path$split, _item$path;
-      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) {
-        // we don't want to map the current item
-        indexes.pop();
-        // we need to rebuild the path as we map
-        let lastPath;
-        event.detail.parents = indexes.map(i => {
-          lastPath = lastPath ? [lastPath, i].join('.') : i;
-          return sanitizeItem(data.find(i => i.path === lastPath));
-        });
-      }
-      onChange(event);
-    }
-  };
-  const list = {
-    ...otherProps,
-    'aria-activedescendant': getActiveDescendant(data, currentIndex, id),
-    data,
     disabled,
-    id,
-    invalid,
-    onChange: handleListboxChange,
-    onFocus: handleListboxFocus,
-    onKeyDown: handleListboxKeyDown,
-    scrollOnFocus: true,
-    tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,
-    value: currentIndex
-  };
-  const input = {
-    name,
-    onChange: handleInputChange,
-    ref: inputRef,
-    tabIndex: -1,
-    value: value !== null && value !== void 0 ? value : ''
-  };
-  return {
-    list,
-    input
-  };
-};
+    children,
+    invalid = false,
+    message,
+    ...otherProps
+  } = props;
+  const className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
+    'text-grey-300': disabled
+  }, props.className);
+  const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
+    'text-grey-700': !invalid,
+    'text-red-500': invalid,
+    'opacity-50': disabled
+  }, props.className);
+  return /*#__PURE__*/React.createElement("label", Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "label",
+    ref: ref
+  }), children, message && /*#__PURE__*/React.createElement("span", {
+    className: messageClassName,
+    role: invalid ? 'alert' : undefined
+  }, message));
+});
 
-const useMultiListbox = ({
-  data: externalData = [],
-  defaultValue,
-  disabled,
-  emptyValue: _,
-  id: nativeId,
-  name,
-  onClick,
-  onChange,
-  onFocus,
-  onKeyDown,
-  value,
-  ...otherProps
-}, ref) => {
+const Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
+  const {
+    horizontal = false,
+    ...otherProps
+  } = props;
+  const className = cn('yt-form', {
+    'yt-form--horizontal flex flex-wrap': horizontal
+  }, props.className);
+  return /*#__PURE__*/React.createElement("form", Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "form",
+    ref: ref
+  }));
+});
+
+const HangerContext = /*#__PURE__*/React.createContext({
+  onClose: undefined,
+  props: {},
+  ref: null
+});
+const Anchor = /*#__PURE__*/React.forwardRef(function HangerAnchor(props, externalRef) {
+  var _props$children;
+  const {
+    ref: parentRef,
+    props: parentProps
+  } = React.useContext(HangerContext);
+  const refCallback = mergeRefs([parentRef, externalRef]);
+  let children = props.children;
+  if ( /*#__PURE__*/React.isValidElement(props.children) && typeof ((_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === 'function') {
+    console.warn(`Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`);
+    children = /*#__PURE__*/React.createElement("span", null, props.children);
+  }
+  return /*#__PURE__*/React.createElement(PopoverPrimitive.Anchor, Object.assign({}, parentProps, props, {
+    ref: refCallback,
+    asChild: true
+  }), children);
+});
+const Title$3 = /*#__PURE__*/React.forwardRef(function DialogTitle(props, ref) {
+  const className = cn('mb-1 text-base font-bold flex w-full', props.className);
+  return /*#__PURE__*/React.createElement("span", Object.assign({}, props, {
+    className: className,
+    ref: ref
+  }));
+});
+const Content$6 = /*#__PURE__*/React.forwardRef(function HangerContent(props, ref) {
+  const {
+    placement: side
+  } = props;
+  const context = React.useContext(HangerContext);
   const {
     texts
   } = useLocalization();
-  const id = React.useMemo(() => nativeId || uuid.v4(), [nativeId]);
-  const inputRef = useMergedRef(ref);
-  const data = React.useMemo(() => {
-    return [{
-      text: texts.listbox.allOption,
-      value: '#ALL-OPTIONS#'
-    }, ...externalData];
-  }, [externalData]);
-  const [currentIndex, setCurrentIndex] = React.useState(getIndexFromValue(data, value) || 0);
-  const [allOptionsSelected, setAllOptionsSelected] = React.useState(false);
+  const className = cn('wcag-blue-500 border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm', props.className);
+  const handleInteractOutside = event => {
+    event.preventDefault();
+  };
+  return /*#__PURE__*/React.createElement(PopoverPrimitive.Portal, null, /*#__PURE__*/React.createElement(PopoverPrimitive.Content, {
+    className: className,
+    "data-taco": "hanger",
+    onInteractOutside: handleInteractOutside,
+    side: side,
+    sideOffset: 1,
+    ref: ref
+  }, props.children, /*#__PURE__*/React.createElement(UnstyledArrow, {
+    className: "text-blue-500"
+  }), /*#__PURE__*/React.createElement(PopoverPrimitive.Close, {
+    asChild: true
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    appearance: "primary",
+    "aria-label": texts.hanger.close,
+    className: "absolute top-0 right-0 ml-2 mr-2 mt-2 text-white",
+    icon: "close",
+    onClick: context.onClose
+  }))));
+});
+const Hanger = /*#__PURE__*/React.forwardRef(function Hanger(props, ref) {
   const {
-    getNextIndex
-  } = useTypeahead({
-    data,
-    currentIndex
-  });
-  const [selectedIndexes, setSelectedIndexes] = React.useState(getSelectedIndexesFromValue(data, value));
+    anchor,
+    children,
+    defaultOpen = true,
+    onClose,
+    ...otherProps
+  } = props;
+  const context = React.useMemo(() => ({
+    onClose,
+    props: otherProps,
+    ref
+  }), [onClose, otherProps]);
+  // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal
+  const [open, setOpen] = React.useState(false);
   React.useEffect(() => {
-    if (defaultValue && !value) {
-      setInputValueByRef$1(inputRef.current, defaultValue.toString());
+    if (defaultOpen) {
+      setOpen(defaultOpen);
     }
   }, []);
-  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 => {
+  return /*#__PURE__*/React.createElement(HangerContext.Provider, {
+    value: context
+  }, /*#__PURE__*/React.createElement(PopoverPrimitive.Root, {
+    key: String(open),
+    defaultOpen: open
+  }, anchor && /*#__PURE__*/React.createElement(Anchor, null, anchor), children));
+});
+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;
+
+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"
+  }));
+});
+
+function useTimer(duration = 0, callback) {
+  const timer = React.useRef();
+  const [tracker, setTracker] = React.useState({
+    remaining: duration,
+    started: null
+  });
+  React.useEffect(() => {
+    if (duration) {
+      if (tracker.started) {
+        timer.current = window.setTimeout(callback, tracker.remaining);
+      } else {
+        clearTimeout(timer.current);
+      }
+    }
+    return () => {
+      clearTimeout(timer.current);
+    };
+  }, [tracker.started]);
+  return {
+    running: !!tracker.started,
+    start: () => {
+      setTracker({
+        remaining: duration,
+        started: Date.now()
+      });
+    },
+    pause: () => {
+      if (tracker.started) {
+        setTracker({
+          remaining: tracker.remaining - (Date.now() - tracker.started),
+          started: null
+        });
+      }
+    },
+    resume: () => {
+      if (tracker.remaining && !tracker.started) {
+        setTracker({
+          remaining: tracker.remaining,
+          started: Date.now()
+        });
+      }
+    }
+  };
+}
+
+const useTypeahead = ({
+  data,
+  currentIndex
+}) => {
+  const typeaheadQuery = React.useRef();
+  const typeaheadQueryTimer = useTimer(1000, () => {
+    typeaheadQuery.current = undefined;
+  });
+  const getNextIndex = charKey => {
+    const query = (typeaheadQuery.current ? typeaheadQuery.current + charKey : charKey).toLowerCase();
+    const nextIndex = findNextIndexByValue(data, query, currentIndex);
+    typeaheadQueryTimer.start();
+    typeaheadQuery.current = query;
+    return nextIndex;
+  };
+  return {
+    getNextIndex
+  };
+};
+
+const useListbox = ({
+  data: externalData = [],
+  defaultValue,
+  disabled,
+  emptyValue,
+  id: nativeId,
+  invalid,
+  name,
+  onChange,
+  onFocus,
+  onKeyDown,
+  value = emptyValue,
+  ...otherProps
+}, ref) => {
+  const data = useFlattenedData(emptyValue !== undefined ? [{
+    text: '',
+    value: emptyValue
+  }, ...externalData] : externalData);
+  const id = React.useMemo(() => nativeId || uuid.v4(), [nativeId]);
+  const inputRef = useMergedRef(ref);
+  const currentIndex = value !== undefined ? getIndexFromValue(data, value) : undefined;
+  const {
+    getNextIndex
+  } = useTypeahead({
+    data,
+    currentIndex
+  });
+  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);
+        setInputValueByRef$1(inputRef.current, option.value);
       }
     }
   };
-  const handleListboxClick = (event, index) => {
-    event.preventDefault();
-    if (!data[index].disabled) {
-      setCurrentIndex(index);
-      setInputValueByIndex(index);
-    }
-    if (onClick) {
-      onClick(event);
-    }
+  const handleListboxChange = index => {
+    setInputValueByIndex(index);
   };
-  const handleListboxKeyDown = (event, index) => {
+  React.useEffect(() => {
+    if (data.length && currentIndex === undefined) {
+      if (defaultValue !== undefined) {
+        const defaultValueIndex = getIndexFromValue(data, defaultValue);
+        if (defaultValueIndex !== undefined) {
+          setInputValueByIndex(defaultValueIndex);
+        }
+      } else {
+        setInputValueByIndex(0);
+      }
+    }
+  }, [data]);
+  const handleListboxKeyDown = event => {
     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);
+        setInputValueByIndex(nextIndex);
       }
       return;
     }
-    switch (event.key) {
-      case ' ':
-        {
-          event.preventDefault();
+    if (onKeyDown) {
+      event.persist();
+      onKeyDown(event);
+    }
+  };
+  const handleListboxFocus = event => {
+    if (currentIndex === undefined && data.length) {
+      setInputValueByIndex(0);
+    }
+    if (onFocus) {
+      event.persist();
+      onFocus(event);
+    }
+  };
+  const handleInputChange = event => {
+    event.persist();
+    if (onChange) {
+      var _item$path$split, _item$path;
+      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) {
+        // we don't want to map the current item
+        indexes.pop();
+        // we need to rebuild the path as we map
+        let lastPath;
+        event.detail.parents = indexes.map(i => {
+          lastPath = lastPath ? [lastPath, i].join('.') : i;
+          return sanitizeItem(data.find(i => i.path === lastPath));
+        });
+      }
+      onChange(event);
+    }
+  };
+  const list = {
+    ...otherProps,
+    'aria-activedescendant': getActiveDescendant(data, currentIndex, id),
+    data,
+    disabled,
+    id,
+    invalid,
+    onChange: handleListboxChange,
+    onFocus: handleListboxFocus,
+    onKeyDown: handleListboxKeyDown,
+    scrollOnFocus: true,
+    tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,
+    value: currentIndex
+  };
+  const input = {
+    name,
+    onChange: handleInputChange,
+    ref: inputRef,
+    tabIndex: -1,
+    value: value !== null && value !== void 0 ? value : ''
+  };
+  return {
+    list,
+    input
+  };
+};
+
+const useMultiListbox = ({
+  data: externalData = [],
+  defaultValue,
+  disabled,
+  emptyValue: _,
+  id: nativeId,
+  name,
+  onClick,
+  onChange,
+  onFocus,
+  onKeyDown,
+  value,
+  ...otherProps
+}, ref) => {
+  const {
+    texts
+  } = useLocalization();
+  const id = React.useMemo(() => nativeId || uuid.v4(), [nativeId]);
+  const inputRef = useMergedRef(ref);
+  const data = React.useMemo(() => {
+    return [{
+      text: texts.listbox.allOption,
+      value: '#ALL-OPTIONS#'
+    }, ...externalData];
+  }, [externalData]);
+  const [currentIndex, setCurrentIndex] = React.useState(getIndexFromValue(data, value) || 0);
+  const [allOptionsSelected, setAllOptionsSelected] = React.useState(false);
+  const {
+    getNextIndex
+  } = useTypeahead({
+    data,
+    currentIndex
+  });
+  const [selectedIndexes, setSelectedIndexes] = React.useState(getSelectedIndexesFromValue(data, value));
+  React.useEffect(() => {
+    if (defaultValue && !value) {
+      setInputValueByRef$1(inputRef.current, defaultValue.toString());
+    }
+  }, []);
+  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);
+    }
+    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;
         }
@@ -6396,12 +6890,7 @@ const MultiListbox = /*#__PURE__*/React.forwardRef(function Listbox(props, ref)
   })));
 });
 
-const MenuContext = /*#__PURE__*/React.createContext(undefined);
-const useCurrentMenu = () => {
-  return React.useContext(MenuContext);
-};
-
-const Content$7 = /*#__PURE__*/React.forwardRef(function MenuContent(props, ref) {
+const Content$8 = /*#__PURE__*/React.forwardRef(function MenuContent(props, ref) {
   const internalRef = useMergedRef(ref);
   const menu = useCurrentMenu();
   const {
@@ -6534,7 +7023,7 @@ const Link = /*#__PURE__*/React.forwardRef(function MenuLink(props, ref) {
   }), props.children));
 });
 
-const Trigger$5 = /*#__PURE__*/React.forwardRef(function MenuTrigger(props, ref) {
+const Trigger$6 = /*#__PURE__*/React.forwardRef(function MenuTrigger(props, ref) {
   const menu = useCurrentMenu();
   const internalRef = useMergedRef(ref);
   React.useEffect(() => {
@@ -6763,12 +7252,12 @@ const Menu$1 = /*#__PURE__*/React.forwardRef(function Menu(externalProps, ref) {
     modal: false,
     open: open,
     onOpenChange: setOpen
-  }), trigger && /*#__PURE__*/React.createElement(Trigger$5, {
+  }), trigger && /*#__PURE__*/React.createElement(Trigger$6, {
     ref: ref
   }, trigger), children));
 });
-Menu$1.Trigger = Trigger$5;
-Menu$1.Content = Content$7;
+Menu$1.Trigger = Trigger$6;
+Menu$1.Content = Content$8;
 Menu$1.Item = Item$1;
 Menu$1.Link = Link;
 Menu$1.Checkbox = Checkbox$1;
@@ -7766,7 +8255,10 @@ const Root = /*#__PURE__*/React__default.forwardRef(function CollectionRoot(prop
     if (internalRef.current) {
       const options = getOptionsFromCollection(internalRef.current, querySelector);
       if (options.length && options.length !== lastLengthRef.current) {
-        const selected = internalRef.current.querySelectorAll(`[aria-selected]`);
+        let selected = internalRef.current.querySelectorAll(`[aria-current="true"]`);
+        if (selected.length === 0) {
+          selected = internalRef.current.querySelectorAll(`[aria-selected]`);
+        }
         if (selected.length === 1) {
           if (options) {
             const firstSelected = selected.item(0);
@@ -7870,6 +8362,13 @@ const isSkippableItem = element => {
   return element.getAttribute('role') === 'presentation' || !!element.hasAttribute('disabled') || !!element.getAttribute('aria-disabled') || !!element.getAttribute('aria-hidden');
 };
 
+
+
+var Collection = {
+    __proto__: null,
+    Root: Root
+};
+
 const Listbox2Context = /*#__PURE__*/React__default.createContext({});
 const useListbox2Context = () => React__default.useContext(Listbox2Context);
 
@@ -7992,7 +8491,7 @@ const Group$1 = /*#__PURE__*/React__default.forwardRef(function Listbox2Group(pr
 const Listbox2GroupContext = /*#__PURE__*/React__default.createContext({});
 const useListbox2GroupContext = () => React__default.useContext(Listbox2GroupContext);
 
-const Title$3 = /*#__PURE__*/React__default.forwardRef(function Listbox2Group(props, ref) {
+const Title$4 = /*#__PURE__*/React__default.forwardRef(function Listbox2Group(props, ref) {
   const {
     id: nativeId,
     ...otherProps
@@ -8352,14 +8851,14 @@ const Group$2 = /*#__PURE__*/React__default.forwardRef(function Select2Group(pro
   return /*#__PURE__*/React__default.createElement(Group$1, Object.assign({}, attributes, {
     className: className,
     ref: ref
-  }), /*#__PURE__*/React__default.createElement(Title$3, {
+  }), /*#__PURE__*/React__default.createElement(Title$4, {
     className: "sticky top-0 bg-white px-2 font-bold leading-8"
   }, heading), children);
 });
 
-const Title$4 = /*#__PURE__*/React__default.forwardRef(function Select2Title(props, ref) {
+const Title$5 = /*#__PURE__*/React__default.forwardRef(function Select2Title(props, ref) {
   const className = cn('flex items-center text-xs pl-2 h-8', props.className);
-  return /*#__PURE__*/React__default.createElement(Title$3, Object.assign({}, props, {
+  return /*#__PURE__*/React__default.createElement(Title$4, Object.assign({}, props, {
     className: className,
     ref: ref
   }));
@@ -8382,38 +8881,7 @@ const getIndexOfFirstChildOverflowingParent = (element, overscan = 0) => {
   return boundaryChildIndex;
 };
 
-const Bar = props => {
-  const className = cn(`flex select-none touch-none transition-colors hover:bg-grey`, {
-    'w-[7px] hover:w-[14px] mr-[2px] hover:px-[2px] hover:mr-0': props.orientation === 'vertical',
-    'flex-col h-[7px] hover:h-[14px] mb-[2px] hover:py-[2px] hover:mb-0': props.orientation === 'horizontal'
-  });
-  return /*#__PURE__*/React__default.createElement(ScrollAreaPrimitive.Scrollbar, Object.assign({}, props, {
-    className: className
-  }));
-};
-const Thumb = props => /*#__PURE__*/React__default.createElement(ScrollAreaPrimitive.Thumb, Object.assign({}, props, {
-  className: "flex-[1] rounded bg-black opacity-50"
-}));
-const Corner = props => /*#__PURE__*/React__default.createElement(ScrollAreaPrimitive.Corner, Object.assign({}, props, {
-  classname: "bg-grey-500"
-}));
-const ScrollArea = props => {
-  const {
-    children,
-    ...otherProps
-  } = props;
-  return /*#__PURE__*/React__default.createElement(ScrollAreaPrimitive.Root, Object.assign({}, otherProps, {
-    className: cn('overflow-hidden', props.className)
-  }), /*#__PURE__*/React__default.createElement(ScrollAreaPrimitive.Viewport, {
-    className: "h-full w-full"
-  }, children), /*#__PURE__*/React__default.createElement(Bar, {
-    orientation: "vertical"
-  }, /*#__PURE__*/React__default.createElement(Thumb, null)), /*#__PURE__*/React__default.createElement(Bar, {
-    orientation: "horizontal"
-  }, /*#__PURE__*/React__default.createElement(Thumb, null)), /*#__PURE__*/React__default.createElement(Corner, null));
-};
-
-const Trigger$6 = /*#__PURE__*/React__default.forwardRef(function Select2Trigger(props, ref) {
+const Trigger$7 = /*#__PURE__*/React__default.forwardRef(function Select2Trigger(props, ref) {
   const {
     multiple,
     value
@@ -8900,7 +9368,7 @@ const Create = props => {
   }, searchQuery)));
 };
 
-const Collection = props => {
+const Collection$1 = props => {
   const {
     children
   } = props;
@@ -9052,7 +9520,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
   }), /*#__PURE__*/React__default.createElement(PopoverPrimitive.Trigger, {
     asChild: true,
     "data-taco": "Select2"
-  }, /*#__PURE__*/React__default.createElement(Trigger$6, Object.assign({}, otherProps, {
+  }, /*#__PURE__*/React__default.createElement(Trigger$7, Object.assign({}, otherProps, {
     "aria-haspopup": "listbox",
     onBlur: handleBlur,
     onKeyDown: handleKeyDown,
@@ -9096,14 +9564,14 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     setValue: setValue,
     tabIndex: -1,
     value: value
-  }, /*#__PURE__*/React__default.createElement(Collection, null, filteredChildren), onCreate ? /*#__PURE__*/React__default.createElement(Create, {
+  }, /*#__PURE__*/React__default.createElement(Collection$1, null, filteredChildren), onCreate ? /*#__PURE__*/React__default.createElement(Create, {
     onCreate: onCreate,
     options: flattenedChildren
   }) : null))))));
 });
 Select2.Option = Option$1;
 Select2.Group = Group$2;
-Select2.Title = Title$4;
+Select2.Title = Title$5;
 const ControlledHiddenField = props => {
   const {
     emptyValue,
@@ -12153,7 +12621,7 @@ const HeaderMenu = ({
   })) : null;
 };
 
-const Footer$2 = function Footer(props) {
+const Footer$3 = function Footer(props) {
   const {
     children,
     footer,
@@ -13049,12 +13517,13 @@ const ExpandedRow = ({
 
 const useBoundaryOverflowDetection = (ref, dependencies = []) => {
   const [boundaryIndex, setBoundaryIndex] = React__default.useState();
+  const dimensions = useBoundingClientRectListener(ref, dependencies);
   React__default.useEffect(() => {
     if (ref.current) {
       const boundaryChildIndex = getIndexOfFirstChildOverflowingParent(ref.current);
       setBoundaryIndex(boundaryChildIndex);
     }
-  }, [ref, ...dependencies]);
+  }, [ref, dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, ...dependencies]);
   return boundaryIndex;
 };
 
@@ -13452,15 +13921,6 @@ const guessComparatorsBasedOnControl = (instance, control) => {
   }
 };
 
-const useGlobalKeyboardShortcut = handler => {
-  React__default.useEffect(() => {
-    document.addEventListener('keydown', handler);
-    return () => {
-      document.removeEventListener('keydown', handler);
-    };
-  }, [handler]);
-};
-
 const FiltersButton = ({
   length,
   table
@@ -13999,7 +14459,7 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
     key: footerGroup.id,
     role: "row",
     className: "contents"
-  }, footerGroup.headers.map((footer, cellIndex) => /*#__PURE__*/React__default.createElement(Footer$2, {
+  }, footerGroup.headers.map((footer, cellIndex) => /*#__PURE__*/React__default.createElement(Footer$3, {
     key: footer.id,
     footer: footer,
     index: cellIndex,
@@ -14012,228 +14472,1003 @@ const Table2 = /*#__PURE__*/React__default.forwardRef(function Table2(props, ref
     table: table
   }) : null);
 });
-Table2.Column = Column$2;
+Table2.Column = Column$2;
+
+const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
+  const {
+    id,
+    defaultId,
+    children,
+    onChange,
+    orientation = 'horizontal',
+    ...otherProps
+  } = props;
+  const className = cn('yt-tabs', `yt-tabs--${orientation}`, {
+    'flex w-full': orientation === 'vertical'
+  }, props.className);
+  return /*#__PURE__*/React.createElement(TabsPrimitive.Root, Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "tabs",
+    defaultValue: defaultId,
+    dir: "ltr",
+    onValueChange: onChange,
+    orientation: orientation,
+    ref: ref,
+    value: id
+  }), children);
+});
+const TabList = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
+  const className = cn('yt-tab__list border-b border-grey-300 flex flex-row m-0 mb-4', props.className);
+  return /*#__PURE__*/React.createElement(TabsPrimitive.List, Object.assign({}, props, {
+    className: className,
+    ref: ref
+  }));
+});
+const TabTrigger = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
+  const {
+    id,
+    disabled,
+    ...otherProps
+  } = props;
+  const className = cn('yt-tab bg-transparent border-b-2 border-transparent text-grey-700 m-0 py-2 px-4', disabled ? 'cursor-not-allowed !text-grey-500' : 'cursor-pointer rounded-t hover:border-grey-300 aria-selected:border-blue-500 aria-selected:text-black aria-selected:hover:border-blue-300 hover:text-black active:yt-focus active:border-blue-500 focus:yt-focus focus:border-blue-500', props.className);
+  return /*#__PURE__*/React.createElement(TabsPrimitive.Trigger, Object.assign({}, otherProps, {
+    className: className,
+    disabled: disabled,
+    ref: ref,
+    style: {
+      transition: 'border 0.2s ease-in'
+    },
+    value: id
+  }));
+});
+const TabContent = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
+  const {
+    id,
+    ...otherProps
+  } = props;
+  const className = cn('yt-tab__panel outline-none', props.className);
+  return /*#__PURE__*/React.createElement(TabsPrimitive.Content, Object.assign({}, otherProps, {
+    className: className,
+    ref: ref,
+    value: id
+  }));
+});
+Tabs.List = TabList;
+Tabs.Trigger = TabTrigger;
+Tabs.Content = TabContent;
+
+const Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
+  const {
+    defaultValue: _,
+    highlighted,
+    invalid,
+    onKeyDown,
+    ...otherProps
+  } = props;
+  const classNames = cn(getInputClasses(props), 'py-1 min-h-[75px] disabled:resize-none', props.className);
+  // home and end keys only navigate to the start/end of textarea value if the textarea container does not scroll
+  // if it has scroll height then the browser reverts to native scrolling behaviour only
+  // so we manually override it to ensure _our_ desired behaviour remains intact
+  const handleKeyDown = event => {
+    if (event.key === 'Home' || event.key === 'End') {
+      event.preventDefault();
+      const position = event.key === 'End' ? event.currentTarget.value.length : 0;
+      event.currentTarget.setSelectionRange(position, position);
+      event.currentTarget.scrollTop = event.key === 'End' ? event.currentTarget.scrollHeight : 0;
+    }
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
+  };
+  return /*#__PURE__*/React.createElement("textarea", Object.assign({}, otherProps, {
+    className: classNames,
+    "data-taco": "textarea",
+    onKeyDown: handleKeyDown,
+    ref: ref
+  }));
+});
+
+const Tooltip$1 = ({
+  continuous,
+  index,
+  isLastStep,
+  step,
+  backProps,
+  primaryProps,
+  skipProps,
+  tooltipProps,
+  size,
+  locale,
+  disableTourSkipOnEsc
+}) => {
+  const skipButtonRef = React.useRef(null);
+  React.useEffect(() => {
+    const onWindowKeyDown = event => {
+      if (!disableTourSkipOnEsc) {
+        if (event.key === 'Escape' && skipButtonRef.current !== null) {
+          event.preventDefault();
+          skipButtonRef.current.click();
+          return;
+        }
+      }
+    };
+    window.addEventListener('keydown', onWindowKeyDown);
+    return () => {
+      window.removeEventListener('keydown', onWindowKeyDown);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, tooltipProps, {
+    className: "yt-tour__step w-88 relative rounded bg-white p-4"
+  }), /*#__PURE__*/React.createElement(IconButton, Object.assign({}, skipProps, {
+    ref: skipButtonRef,
+    appearance: "discrete",
+    icon: "close",
+    title: locale.skip,
+    "aria-label": locale.skip,
+    className: "absolute top-0 right-0 mt-1 mr-1"
+  })), step.title && /*#__PURE__*/React.createElement("h5", null, step.title), step.content, /*#__PURE__*/React.createElement(Group, {
+    className: "mt-4 justify-end"
+  }, index > 0 && /*#__PURE__*/React.createElement(Button$1, Object.assign({}, backProps, {
+    appearance: "discrete"
+  }), locale.back), /*#__PURE__*/React.createElement(Button$1, Object.assign({}, primaryProps, {
+    appearance: "primary"
+  }), continuous ? isLastStep ? `${locale.last} (${index + 1}/${size})` : `${locale.next} (${index + 1}/${size})` : locale.close)));
+};
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const TourStep = _props => null;
+const Tour = props => {
+  const {
+    texts: {
+      tour
+    }
+  } = useLocalization();
+  const {
+    autoStart: run,
+    onComplete,
+    onClose,
+    onReady,
+    spotlightClicks,
+    disableCloseOnEsc: disableTourSkipOnEsc,
+    disableScrollParentFix = false,
+    scrollOffset,
+    ...rest
+  } = props;
+  const steps = React.useMemo(() => {
+    return React.Children.map(props.children, child => {
+      const step = {
+        disableBeacon: !child.props.showBeacon,
+        target: child.props.selector,
+        placement: child.props.position,
+        title: child.props.title,
+        content: child.props.children
+      };
+      return step;
+    });
+  }, [props.children]);
+  const getStep = React.useCallback(selector => {
+    var _props$children$find;
+    return (_props$children$find = props.children.find(child => child.props.selector === selector)) === null || _props$children$find === void 0 ? void 0 : _props$children$find.props;
+  }, [props.children]);
+  const callback = state => {
+    if (state.action === Joyride.ACTIONS.SKIP && state.lifecycle === Joyride.LIFECYCLE.COMPLETE) {
+      if (onClose) {
+        onClose(getStep(state.step.target));
+      }
+    }
+    if (state.type === Joyride.EVENTS.TOUR_END) {
+      if (onComplete) {
+        onComplete();
+      }
+    }
+    if (state.lifecycle === Joyride.LIFECYCLE.READY) {
+      if (onReady) {
+        onReady(getStep(state.step.target));
+      }
+    }
+  };
+  return /*#__PURE__*/React.createElement(Joyride__default, Object.assign({}, rest, {
+    run: run,
+    steps: steps,
+    showProgress: true,
+    floaterProps: {
+      disableAnimation: true
+    },
+    tooltipComponent: tooltipProps => /*#__PURE__*/React.createElement(Tooltip$1, Object.assign({}, tooltipProps, {
+      locale: tour,
+      disableTourSkipOnEsc: disableTourSkipOnEsc
+    })),
+    locale: tour,
+    spotlightPadding: 8,
+    spotlightClicks: spotlightClicks,
+    disableScrollParentFix: disableScrollParentFix,
+    callback: callback,
+    scrollOffset: scrollOffset,
+    styles: {
+      /** style beacon */
+      options: {
+        // tailwind.theme.colors.blue.300
+        primaryColor: '#6ba4ff'
+      }
+    },
+    disableCloseOnEsc: true
+  }));
+};
+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, {
+    appearance: "discrete",
+    className: className,
+    "data-taco": "header-button",
+    ref: ref
+  })));
+});
+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,
+    tooltip,
+    ...otherProps
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const Tag = as;
+  const className = cn(getLinkClasses(icon), 'relative', props.className);
+  let link = /*#__PURE__*/React__default.createElement("a", Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "header-link",
+    ref: ref,
+    tabIndex: 0
+  }), icon ? /*#__PURE__*/React__default.createElement(Icon, {
+    name: icon
+  }) : null, children, isNew ? /*#__PURE__*/React__default.createElement(Badge, {
+    color: "blue",
+    small: true,
+    className: "absolute top-0 right-0 -mt-1.5 -mr-2.5 !h-3 !px-0.5 text-[0.55rem] font-normal"
+  }, texts.header.new) : null);
+  if (tooltip) {
+    link = /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: tooltip
+    }, link);
+  }
+  return /*#__PURE__*/React__default.createElement(Tag, {
+    className: "contents"
+  }, 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,
+  'whitespace-nowrap px-3 rounded text-sm hidden lg:flex': !icon
+});
+
+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);
+  return /*#__PURE__*/React__default.createElement("svg", Object.assign({}, props, {
+    className: className,
+    ref: ref,
+    viewBox: "0 0 127 13",
+    xmlns: "http://www.w3.org/2000/svg"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    className: "fill-white"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    className: "fill-white",
+    d: "M5.716016 1.34924242c3.029712.25015152 6.374384 1.74121213 8.2804 3.86060606 2.4384 2.71227273 1.603248 5.42454542-1.877568 6.05681822-3.480816.6322727-8.2804-1.0498485-10.720832-3.76212125C-.471424 5.42848485-.41656 3.35242424 1.27 2.2080303l9.67232 6.92742425-5.226304-7.78621213z",
+    fillRule: "nonzero"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    className: "hidden md:flex"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M53.67528 11.2509091l-1.2192-4.72727274c-.176784-.56333333-.24384-1.12666666-.36576-1.6880303h-.026416c-.107696.57515152-.148336 1.13848485-.308864 1.71363636l-1.22936 4.70954548h-2.101088l2.822448-9.87409093h1.647952l2.942336 9.86424243-2.162048.0019697z",
+    fillRule: "nonzero"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M21.553424 1.38469697l1.2192 4.72727273c.174752.56333333.241808 1.12469697.363728 1.6880303h.026416c.107696-.57515152.148336-1.13848485.310896-1.71363636l1.2192-4.70954546h2.105152L23.9776 11.2410606h-1.64592l-2.938272-9.85636363h2.160016z",
+    fillRule: "nonzero"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "nonzero",
+    d: "M28.313888 1.38666667h2.01168v9.86424243h-2.01168z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "nonzero",
+    d: "M41.694608 1.38666667l.983488 5.82045454h.026416l.808736-5.82045454h2.700528l1.0668 9.86424243h-2.064512l-.485648-7.10469698h-.028448l-.323088 2.43257576-.865632 4.67212122h-1.550416l-.98552-4.72333334L40.64 4.32939394v-.18318182h-.026416l-.296672 7.10469698h-2.160016l.890016-9.86424243z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M35.310064 1.38469697c-.3577988.27917284-.6303655.64756811-.788416 1.06560606-.526288 1.22909091.036576 2.16666667.534416 3.00575758.073152.12409091.148336.24818181.217424.37227272 1.085088 1.80424243 1.515872 3.13378788.705104 5.02863637-.056896.1339394-.191008.3939394-.191008.3939394h-2.424176c.3204254-.2482168.5741848-.5678542.739648-.9316667.556768-1.30196967-.099568-2.49166664-.735584-3.64393937-.764032-1.37878788-1.552448-2.81863636-.715264-4.78045455.079248-.18712121.254-.50424242.254-.50424242l2.403856-.00590909z",
+    fillRule: "nonzero"
+  }))), /*#__PURE__*/React__default.createElement("g", {
+    className: "xs:flex xs:-translate-x-[40px] hidden md:!translate-x-0"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    className: "stroke-white",
+    d: "M61.496448 0v12.8680303",
+    strokeWidth: "1.68"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    className: "fill-white"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M70.841616 9.70863636c-.999744 0-1.7888373-.29479798-2.36728-.88439394-.5784427-.58959596-.867664-1.40964646-.867664-2.46015151 0-1.05707071.2709333-1.89681818.8128-2.51924243.5304376-.61728629 1.3256457-.96197654 2.15392-.93363636.7626734-.03509605 1.5014967.26264579 2.013712.81151515.4944533.53969697.7410027 1.25272728.739648 2.13909091v.62833334h-4.659376c.022352.77015151.221488 1.35318181.6096 1.7530303.388112.39984848.916432.59090909 1.607312.59090909.743701-.00293405 1.4788698-.15377248 2.160016-.44318182v.88636364c-.3298144.14174433-.6736336.25063692-1.02616.325-.3855929.07188992-.7778273.1048941-1.170432.09848485m-.27432-5.95242425c-.4900374-.02138848-.9649513.16736328-1.298448.51606061-.3477231.40033357-.5485505.90121019-.570992 1.42409091h3.53568c0-.62636364-.14224-1.1069697-.430784-1.43984849-.3103282-.34233825-.7661196-.52691285-1.235456-.50030303",
+    fillRule: "nonzero"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M75.053952 6.25575758c-.0151689-.21657791.0536783-.43083638.19304-.60075758.1381463-.1429001.3347885-.21871211.536448-.20681818.2081607-.01140173.4114497.0638378.5588.20681818.2680858.35762602.2680858.84191943 0 1.19954545-.3018073.26987298-.7638609.27916874-1.07696.02166667-.1529999-.17086259-.2265151-.39533511-.2032-.62045454",
+    fillRule: "nonzero"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M81.586832 9.70863636c-.979424 0-1.73736-.29217171-2.273808-.87651515-.536448-.58434343-.8073813-1.41095959-.8128-2.47984848 0-1.09777778.2709333-1.94540404.8128-2.54287879.5418667-.59747475 1.318768-.89686869 2.330704-.89818182.3279782-.00003668.654999.03430434.97536.10242424.2639542.04817256.5206342.12824173.764032.23833334l-.31496.845c-.2397537-.0929503-.4871838-.16608946-.739648-.21863637-.2330197-.05435362-.4715521-.08342113-.7112-.08666666-1.373632 0-2.060448.84959596-2.060448 2.54878788 0 .80494949.1673013 1.42343434.501904 1.85545454.33528.42939394.83312.64606061 1.491488.64606061.5966181-.00678768 1.1861142-.12655871 1.735328-.35257576v.87848485c-.5339642.24467285-1.120715.3615322-1.710944.34075757",
+    fillRule: "nonzero"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M90.690192 6.30893939c0 1.06757576-.278384 1.90207071-.835152 2.50348485-.556768.60141414-1.3241867.90146465-2.302256.90015152-.5660565.00980534-1.1238362-.13269357-1.611376-.41166667-.4744234-.28111893-.8520726-.69243374-1.085088-1.18181818-.2674171-.5661279-.3987341-1.18372355-.384048-1.80621212 0-1.06888889.2756747-1.90207071.827024-2.49954546.5513493-.59747474 1.316736-.89555555 2.29616-.89424242.8559447-.03726298 1.6841715.29875604 2.257552.91590909.556768.61060606.8358293 1.43656566.837184 2.47787879m-5.155184 0c0 .83777778.17272 1.47595959.51816 1.91454545.34544.43858586.85344.65787879 1.524.65787879s1.1799147-.21863636 1.528064-.65590909.522224-1.07611111.522224-1.91651515c0-.83515152-.1740747-1.46873738-.522224-1.90075758-.3481493-.4320202-.861568-.64868687-1.540256-.65-.67056 0-1.176528.21469697-1.517904.64015152-.341376.42545454-.512064 1.06363636-.512064 1.91060606",
+    fillRule: "nonzero"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M96.989392 9.58848485V5.34575758c0-.53444445-.1253067-.9329798-.37592-1.19560606-.251968-.2639394-.644144-.3939394-1.180592-.3939394-.707136 0-1.225296.18580808-1.55448.55742424-.329184.37161617-.493776.98419192-.493776 1.83772728v3.43909091h-1.02616V3.03136364h.83312l.168656.89621212h.048768c.213947-.32669621.5199877-.58712571.881888-.75045455.3956439-.18075251.8285923-.27169306 1.265936-.26590909.8128 0 1.4257867.19040404 1.83896.57121212.4131733.38080808.6163733.99010101.6096 1.82787879v4.27818182h-1.016z",
+    fillRule: "nonzero"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M105.759504 6.30893939c0 1.06757576-.277707 1.90207071-.83312 2.50348485-.555413.60141414-1.322832.90146465-2.302256.90015152-.566147.01053143-1.124127-.1320188-1.611376-.41166667-.474546-.2815508-.852738-.69268701-1.08712-1.18181818-.2666505-.56630799-.397268-1.18388155-.382016-1.80621212 0-1.06888889.2756747-1.90207071.827024-2.49954546.551349-.59747474 1.316736-.89555555 2.29616-.89424242.948267 0 1.700107.30530303 2.25552.91590909.555413.61060606.834475 1.43525253.837184 2.47393939m-5.155184 0c0 .83777778.17272 1.4759596.51816 1.91454546.34544.43924242.855472.65787879 1.526032.65787879.589088.03526465 1.159066-.20939357 1.528064-.65590909.348149-.43727273.521547-1.07611112.520192-1.91651516-.001355-.84040404-.174752-1.4739899-.520192-1.90075757-.349504-.43333334-.861568-.65-1.540256-.65-.678688 0-1.17856.21469697-1.519936.64015151-.341376.42545455-.512064 1.06363637-.512064 1.91060606",
+    fillRule: "nonzero"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M116.1796 9.58848485V5.32409091c0-.52525253-.115147-.91919192-.34544-1.18181818-.229616-.26-.58928-.3939394-1.074928-.3939394-.635339 0-1.109472.1779293-1.4224.53378788-.312928.35585859-.465328.90212121-.4572 1.63878788v3.66166667h-1.016V5.32409091c0-.52525253-.115824-.91919192-.347472-1.18181818-.229616-.26-.58928-.3939394-1.078992-.3939394-.642112 0-1.113536.1969697-1.410208.55939394-.296672.36242425-.449072.98484849-.449072 1.83575758v3.43909091h-1.016V3.03136364h.83312l.166624.89621212h.0508c.192326-.31859024.474248-.57752095.8128-.74651515.36534-.18279258.771528-.27547583 1.182624-.26984849 1.05664 0 1.748197.3709596 2.074672 1.11287879h.048768c.20551-.34688729.509496-.62924665.875792-.81348485.403616-.20402984.853472-.30695163 1.308608-.29939394.765387 0 1.338411.19040404 1.719072.57121212.380661.38080808.570992.99010101.570992 1.82787879v4.27818182h-1.02616z",
+    fillRule: "nonzero"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M119.16664 1.25272727c-.016875-.18221767.045768-.36295537.17272-.49833333.243232-.21393452.614272-.21393452.857504 0 .129279.13353172.194239.31385023.178816.49636364.015568.18371514-.049334.36530074-.178816.50030303-.240531.22061195-.616973.22061195-.857504 0-.125769-.13683457-.188192-.31765204-.17272-.50030303v.00196969zm1.111504 8.33378788h-1.02616V3.03136364h1.02616v6.55515151z",
+    fillRule: "nonzero"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M125.091952 9.70863636c-.979424 0-1.738037-.29217171-2.27584-.87651515-.537803-.58434343-.808736-1.41095959-.8128-2.47984848 0-1.09777778.270933-1.94540404.8128-2.54287879.541867-.59747475 1.318768-.89686869 2.330704-.89818182.327978-.00003668.654999.03430434.97536.10242424.264596.04821437.521943.12827865.766064.23833334l-.31496.845c-.239852-.09267891-.487258-.16581103-.739648-.21863637-.233047-.05421-.471563-.08327549-.7112-.08666666-1.373632 0-2.061125.84959596-2.06248 2.54878788 0 .80494949.167979 1.42343434.503936 1.85545454.33528.42939394.83312.64606061 1.491488.64606061.595961-.00679074 1.184792-.12656681 1.733296-.35257576v.87848485c-.533172.24487796-1.119318.3617557-1.708912.34075757",
+    fillRule: "nonzero"
+  }))));
+});
+
+const getChildWidths = parent => {
+  const widths = [];
+  for (let index = 0; index < parent.children.length; index++) {
+    const childRect = parent.children[index].getBoundingClientRect();
+    widths.push(childRect.width);
+  }
+  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]);
+  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
+  }, 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, {
+    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');
+  return /*#__PURE__*/React__default.createElement(IconButton, Object.assign({}, props, {
+    className: className,
+    "data-taco": "header-toggle-sidebar",
+    icon: "menu",
+    ref: ref
+  }));
+});
+
+const AgreementDetails = props => {
+  const {
+    children,
+    className: customClassName,
+    fallbackImageSrc,
+    ...agreement
+  } = props;
+  const className = cn('w-full rounded flex w-full px-1.5 xl:px-2 gap-2 overflow-hidden text-left items-center', customClassName);
+  let badge;
+  if (agreement.isAdministrator) {
+    badge = /*#__PURE__*/React__default.createElement(Badge, {
+      color: "blue",
+      small: true,
+      className: "ml-2"
+    }, "Admin");
+  } else if (agreement.isDeveloper) {
+    badge = /*#__PURE__*/React__default.createElement(Badge, {
+      color: "blue",
+      small: true,
+      className: "ml-2"
+    }, "Developer");
+  }
+  return /*#__PURE__*/React__default.createElement("span", {
+    className: className
+  }, /*#__PURE__*/React__default.createElement(Image, {
+    fallbackSrc: fallbackImageSrc,
+    src: agreement.imageSrc,
+    title: `${agreement.name} - ${agreement.number} ${agreement.userId}`
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "flex flex-col overflow-hidden"
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "flex truncate text-white",
+    title: agreement.name
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "truncate"
+  }, agreement.name), ' ', agreement.secure ? /*#__PURE__*/React__default.createElement(Icon, {
+    name: "secure-tick",
+    className: "ml-1 mt-0.5 mb-0.5 !h-4 !w-4 flex-shrink-0 flex-grow-0"
+  }) : null), /*#__PURE__*/React__default.createElement("span", {
+    className: "text-grey-100 whitespace-nowrap text-xs"
+  }, agreement.number, " ", agreement.userId, " ", badge)), children);
+};
+const Image = /*#__PURE__*/React__default.forwardRef(function AccountImage(props, ref) {
+  const {
+    src,
+    fallbackSrc,
+    ...otherProps
+  } = props;
+  const [loaded, setLoaded] = React__default.useState(false);
+  const handleLoad = () => setLoaded(true);
+  const handleError = event => {
+    event.target.src = fallbackSrc;
+  };
+  const className = cn('h-9 w-9 rounded-full shrink-0 group-focus:yt-focus-dark xl:group-focus:shadow-none', {
+    visible: loaded
+  }, props.className);
+  return /*#__PURE__*/React__default.createElement("img", Object.assign({}, otherProps, {
+    className: className,
+    src: src,
+    onLoad: handleLoad,
+    onError: handleError,
+    alt: "Company logo",
+    ref: ref
+  }));
+});
+
+const Container$1 = props => {
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "-ml-3 flex flex-shrink-0 flex-grow-0 items-center gap-2 xl:ml-auto xl:w-64 xl:pr-2",
+    "data-taco": "header-agreements"
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "hidden h-8 w-px flex-shrink-0 flex-grow-0 bg-white/[0.3] xl:flex"
+  }), props.children);
+};
+function AgreementDisplay(props) {
+  const {
+    currentAgreement,
+    fallbackImageSrc
+  } = props;
+  return /*#__PURE__*/React__default.createElement(Container$1, null, /*#__PURE__*/React__default.createElement(AgreementDetails, Object.assign({}, currentAgreement, {
+    className: "h-12 [&>span>span]:hidden xl:[&>span>span]:flex ",
+    fallbackImageSrc: fallbackImageSrc
+  })));
+}
+function AgreementSelector(props) {
+  const {
+    agreements,
+    currentAgreement,
+    fallbackImageSrc,
+    filterAgreement = () => true,
+    filterClientAgreement = () => true,
+    onAddAgreement: handleAddAgreement,
+    onChangeAgreement,
+    onLogout: handleLogout,
+    open: prop,
+    setOpen: onChange
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const collectionRef = React__default.useRef(null);
+  const [open, setOpen] = reactUseControllableState.useControllableState({
+    onChange,
+    prop
+  });
+  const [search, setSearch] = React__default.useState('');
+  React__default.useEffect(() => {
+    setSearch('');
+  }, [open]);
+  const handleKeyDown = event => {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter') {
+      var _collectionRef$curren;
+      event.preventDefault();
+      (_collectionRef$curren = collectionRef.current) === null || _collectionRef$curren === void 0 ? void 0 : _collectionRef$curren.dispatchEvent(createCustomKeyboardEvent(event));
+    }
+  };
+  const handleChangeAgreement = agreement => {
+    onChangeAgreement(agreement);
+    setOpen(false);
+  };
+  return /*#__PURE__*/React__default.createElement(Container$1, null, /*#__PURE__*/React__default.createElement(PopoverPrimitive.Root, {
+    open: open,
+    onOpenChange: setOpen
+  }, /*#__PURE__*/React__default.createElement(PopoverPrimitive.Trigger, {
+    className: "xl:focus-visible:yt-focus-dark [&:focus-visible_img]:yt-focus-dark w-full rounded outline-none xl:[&:focus-visible_img]:shadow-none"
+  }, /*#__PURE__*/React__default.createElement(AgreementDetails, Object.assign({}, currentAgreement, {
+    className: "h-12 flex-grow xl:hover:bg-white/[0.16] [&>span>span]:hidden xl:[&>span>span]:flex [[aria-current='true']>&]:bg-white/[0.16]",
+    fallbackImageSrc: fallbackImageSrc
+  }), agreements ? /*#__PURE__*/React__default.createElement(Icon, {
+    className: "ml-auto hidden flex-shrink-0 flex-grow-0 text-white xl:flex",
+    name: open ? 'chevron-up' : 'chevron-down'
+  }) : null)), /*#__PURE__*/React__default.createElement(PopoverPrimitive.Content, {
+    className: "z-[996] mt-2 flex h-[calc(100vh_-_theme(spacing.16))] w-64 flex-col gap-1 bg-blue-900"
+  }, /*#__PURE__*/React__default.createElement(SearchInput, {
+    autoFocus: true,
+    className: "focus-visible:!yt-focus-dark mx-2 !border-transparent !bg-white/[0.08] !text-white hover:!bg-white/[0.16] hover:!shadow-none focus:!bg-white/[0.16] active:!bg-white/[0.16] [&+div>button]:!text-white",
+    onChange: event => setSearch(event.target.value),
+    onKeyDown: handleKeyDown,
+    placeholder: texts.header.search
+  }), /*#__PURE__*/React__default.createElement(Root, {
+    querySelector: "button",
+    className: "-my-1 flex w-full flex-grow flex-col gap-1 overflow-auto px-2 py-1 outline-none",
+    ref: collectionRef,
+    tabIndex: -1
+  }, agreements === null || agreements === void 0 ? void 0 : agreements.filter(agreement => filterAgreement(agreement, filterBySearchValue(search))).map(agreement => {
+    const button = createAgreementButton(agreement, fallbackImageSrc, handleChangeAgreement, isCurrentAgreement(agreement, currentAgreement));
+    if (agreement.clients) {
+      return /*#__PURE__*/React__default.createElement("span", {
+        className: "flex flex-col gap-px [&>*:first-child>span]:!rounded-t [&>*:last-child>span]:!rounded-b [&>*>span]:!rounded-none",
+        key: `${agreement.number}_${agreement.userId}_clients`
+      }, filterBySearchValue(search)(agreement) ? button : null, agreement.clients.filter(agreement => filterClientAgreement(agreement, filterBySearchValue(search))).map(clientAgreement => createAgreementButton(clientAgreement, fallbackImageSrc, handleChangeAgreement, isCurrentAgreement(clientAgreement, currentAgreement))));
+    }
+    return button;
+  })), handleAddAgreement ? /*#__PURE__*/React__default.createElement(Button$1, {
+    className: "focus-visible:!yt-focus-dark my-1 mx-2 !h-9 shrink-0 !bg-white/[0.08] !text-white hover:!bg-white/[0.16]",
+    onClick: handleAddAgreement
+  }, texts.header.addAgreement) : null, /*#__PURE__*/React__default.createElement("hr", {
+    className: "my-0 h-px w-full bg-white/[0.08]"
+  }), /*#__PURE__*/React__default.createElement("a", {
+    className: "focus-visible:yt-focus-dark mx-2 mb-2 flex h-8 shrink-0 items-center justify-center rounded text-white hover:cursor-pointer hover:text-white hover:underline focus-visible:outline-none",
+    onClick: handleLogout,
+    tabIndex: 0
+  }, texts.header.logout))));
+}
+const filterBySearchValue = search => agreement => {
+  if (!search || !search.length) {
+    return true;
+  }
+  const matchesAgreementNumber = String(agreement.number).indexOf(search) > -1;
+  const matchesCompanyName = agreement.name.toLowerCase().indexOf(search.toLowerCase()) > -1;
+  return matchesAgreementNumber || matchesCompanyName;
+};
+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 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)]',
+  // styles for logo wrapped inside an anchor
+  props.className);
+  return /*#__PURE__*/React__default.createElement("header", Object.assign({}, props, {
+    className: className,
+    ref: ref
+  }));
+});
+Header$2.AgreementDisplay = AgreementDisplay;
+Header$2.AgreementSelector = AgreementSelector;
+Header$2.Button = Button$3;
+Header$2.Link = Link$1;
+Header$2.Logo = Logo;
+Header$2.PrimaryNavigation = PrimaryNavigation;
+Header$2.SecondaryNavigation = SecondaryNavigation;
+Header$2.MenuButton = MenuButton;
+
+const LayoutContext = /*#__PURE__*/React__default.createContext({
+  sidebarOpen: false,
+  setSidebarOpen: () => undefined
+});
+
+const Content$9 = /*#__PURE__*/React__default.forwardRef(function LayoutContent(props, ref) {
+  const className = cn('flex-grow overflow-y-auto bg-white flex flex-shrink flex-col relative', props.className);
+  return /*#__PURE__*/React__default.createElement("main", Object.assign({}, props, {
+    className: className,
+    ref: ref
+  }));
+});
+
+const useMatchMedia = (query, defaultMatches = false) => {
+  const [matches, setMatches] = React__default.useState(defaultMatches);
+  const handleChange = React__default.useCallback(event => setMatches(event.matches), []);
+  React__default.useEffect(() => {
+    const mediaQuery = window.matchMedia(query);
+    setMatches(mediaQuery.matches);
+    mediaQuery.addEventListener('change', handleChange);
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, []);
+  return matches;
+};
+
+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 Sidebar = /*#__PURE__*/React__default.forwardRef(function LayoutSidebar(props, ref) {
+  const {
+    children,
+    ...attributes
+  } = props;
+  const {
+    sidebarOpen,
+    setSidebarOpen
+  } = React__default.useContext(LayoutContext);
+  const isLargeScreen = useIsLargeScreen();
+  const isSmallScreen = !isLargeScreen;
+  // if it's a large screen we override the open state and make it always visible
+  const isVisible = isLargeScreen || sidebarOpen;
+  // ensures the menu is always closed by default when resizing to a smaller window size
+  React__default.useEffect(() => {
+    setSidebarOpen(isLargeScreen);
+  }, [isLargeScreen]);
+  React__default.useEffect(() => {
+    const handleEscapeKey = event => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopPropagation();
+        setSidebarOpen(false);
+      }
+    };
+    if (isSmallScreen && sidebarOpen) {
+      window.addEventListener('keydown', handleEscapeKey);
+    }
+    return () => {
+      window.removeEventListener('keydown', handleEscapeKey);
+    };
+  }, [isSmallScreen, sidebarOpen]);
+  const showBackdrop = isSmallScreen && sidebarOpen === true;
+  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,
+    'border-r-2 border-black/[.08] ': !showBackdrop
+  }, props.className);
+  const toggleSidebar = () => setSidebarOpen(open => !open);
+  const content = typeof children === 'function' ? children({
+    isLargeScreen,
+    open: sidebarOpen,
+    toggleSidebar
+  }) : children;
+  if (!content) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("nav", Object.assign({}, attributes, {
+    "data-responsive": isSmallScreen,
+    "aria-hidden": !isVisible,
+    className: className,
+    ref: ref
+  }), content), showBackdrop ? /*#__PURE__*/React__default.createElement(SidebarBackdrop, {
+    onClick: () => setSidebarOpen(false)
+  }) : null);
+});
+
+const Top = props => {
+  const {
+    setSidebarOpen
+  } = React__default.useContext(LayoutContext);
+  const toggleSidebar = () => setSidebarOpen(open => !open);
+  return typeof props.children === 'function' ? props.children({
+    toggleSidebar
+  }) : props.children;
+};
+
+const Page = /*#__PURE__*/React__default.forwardRef(function LayoutPage(props, ref) {
+  const className = cn('flex flex-grow overflow-hidden relative', props.className);
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
+    className: className,
+    ref: ref
+  }));
+});
+
+const Layout$1 = /*#__PURE__*/React__default.forwardRef(function Layout(props, ref) {
+  const [sidebarOpen, setSidebarOpen] = React__default.useState(false);
+  const className = cn('flex h-screen w-screen flex-col overflow-hidden relative', props.className);
+  return /*#__PURE__*/React__default.createElement(LayoutContext.Provider, {
+    value: {
+      sidebarOpen,
+      setSidebarOpen
+    }
+  }, /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
+    className: className,
+    ref: ref
+  })));
+});
+Layout$1.Top = Top;
+Layout$1.Page = Page;
+Layout$1.Sidebar = Sidebar;
+Layout$1.Content = Content$9;
 
-const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
+const Group$3 = /*#__PURE__*/React__default.forwardRef(function Group(props, ref) {
   const {
-    id,
-    defaultId,
     children,
-    onChange,
-    orientation = 'horizontal',
-    ...otherProps
+    defaultExpanded = false,
+    heading,
+    onClick,
+    ...attributes
   } = props;
-  const className = cn('yt-tabs', `yt-tabs--${orientation}`, {
-    'flex w-full': orientation === 'vertical'
-  }, props.className);
-  return /*#__PURE__*/React.createElement(TabsPrimitive.Root, Object.assign({}, otherProps, {
+  const [expanded, setExpanded] = React__default.useState(defaultExpanded);
+  const className = cn('flex w-full cursor-pointer items-center rounded px-3 font-bold text-left leading-8 hover:bg-black/[.06] focus-visible:yt-focus-dark', attributes.className);
+  const handleClick = event => {
+    setExpanded(!expanded);
+    if (onClick) {
+      onClick(event);
+    }
+  };
+  return /*#__PURE__*/React__default.createElement("li", {
+    role: "none",
+    className: "[[role=menubar]>&]:px-3"
+  }, /*#__PURE__*/React__default.createElement("button", Object.assign({}, attributes, {
+    "aria-haspopup": "true",
+    "aria-expanded": expanded,
+    "data-taco": "navigation2-group",
     className: className,
-    "data-taco": "tabs",
-    defaultValue: defaultId,
-    dir: "ltr",
-    onValueChange: onChange,
-    orientation: orientation,
+    onClick: handleClick,
     ref: ref,
-    value: id
-  }), children);
+    role: "menuitem"
+  }), /*#__PURE__*/React__default.createElement(Icon, {
+    className: "-ml-2 !h-5 !w-5",
+    name: expanded ? 'chevron-down-solid' : 'chevron-right-solid'
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "flex-grow truncate"
+  }, heading)), /*#__PURE__*/React__default.createElement("ul", {
+    className: cn('mb-0 flex flex-col gap-y-px pt-px', {
+      hidden: !expanded
+    }),
+    role: "menu"
+  }, children));
 });
-const TabList = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
-  const className = cn('yt-tab__list border-b border-grey-300 flex flex-row m-0 mb-4', props.className);
-  return /*#__PURE__*/React.createElement(TabsPrimitive.List, Object.assign({}, props, {
-    className: className,
-    ref: ref
-  }));
+
+const getAdjacentClasses = () => cn(
+// styling if the element is proceeded by a link item
+'[[role=menubar]>[data-taco=navigation2-link-item]+&]:mt-2', "[[role=menubar]>[data-taco='navigation2-link-item']+&]:border-t-2", "[[role=menubar]>[data-taco='navigation2-link-item']+&]:pt-2 ",
+// styling if the element is proceeded by content
+"[[role=menubar]>[data-taco='navigation2-content']+&]:border-t-2", "[[role=menubar]>[data-taco='navigation2-content']+&]:pt-2",
+// styling if the element is proceeded by a section
+"[[role=menubar]>[data-taco='navigation2-section']+&]:border-t-2", "[[role=menubar]>[data-taco='navigation2-section']+&]:pt-2");
+
+const getNavigationLinkClasses = (isDraggedOver = false) => cn('group relative flex w-full items-center rounded leading-8 !text-black px-2 focus-visible:yt-focus-dark',
+// override styles for links that are children of collapsible menus
+'font-bold [[role=menu]>li>&]:font-normal [[role=menu]>li>&]:pl-5',
+// override styles to adjust icons included in menu links
+'[&_[data-taco="icon"]]:!h-5 [&_[data-taco="icon"]]:!w-5',
+// override styles to adjust badges included in menu links
+'[&>span_[data-taco="badge"]]:mr-2.5 [[role=menu]>li>&>span_[data-taco="badge"]]:mr-2', {
+  'hover:bg-black/[.06] aria-current-page:bg-blue-500/[.1]': !isDraggedOver,
+  '!bg-blue-500 !text-white [&>*]:!text-white': isDraggedOver
 });
-const TabTrigger = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
+const Link$2 = /*#__PURE__*/React__default.forwardRef(function Link(props, ref) {
   const {
-    id,
-    disabled,
-    ...otherProps
+    active,
+    children,
+    icon,
+    menu,
+    onDrop,
+    total,
+    ...attributes
   } = props;
-  const className = cn('yt-tab bg-transparent border-b-2 border-transparent text-grey-700 m-0 py-2 px-4', disabled ? 'cursor-not-allowed !text-grey-500' : 'cursor-pointer rounded-t hover:border-grey-300 aria-selected:border-blue-500 aria-selected:text-black aria-selected:hover:border-blue-300 hover:text-black active:yt-focus active:border-blue-500 focus:yt-focus focus:border-blue-500', props.className);
-  return /*#__PURE__*/React.createElement(TabsPrimitive.Trigger, Object.assign({}, otherProps, {
+  const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);
+  const className = cn(getNavigationLinkClasses(isDraggedOver), attributes.className);
+  const listClassName = cn('[[role=menubar]>&]:px-3 border-grey-200', getAdjacentClasses(), {
+    '[&>*]:pointer-events-none': isDraggedOver
+  });
+  return /*#__PURE__*/React__default.createElement("li", Object.assign({}, dropTargetProps, {
+    className: listClassName,
+    "data-taco": "navigation2-link-item",
+    role: "none"
+  }), /*#__PURE__*/React__default.createElement("a", Object.assign({}, attributes, {
+    "aria-current": active ? 'page' : undefined,
     className: className,
-    disabled: disabled,
+    "data-taco": "navigation2-link",
     ref: ref,
-    style: {
-      transition: 'border 0.2s ease-in'
-    },
-    value: id
-  }));
+    role: "menuitem",
+    tabIndex: 0
+  }), icon ? /*#__PURE__*/React__default.createElement(Icon, {
+    className: "mr-1.5 [[role=menu]>li>a>&]:mr-0.5 [[role=menu]>li>a>&]:-ml-1.5",
+    name: icon
+  }) : null, /*#__PURE__*/React__default.createElement("span", {
+    className: "flex flex-grow items-center truncate"
+  }, children), menu ? /*#__PURE__*/React__default.createElement(IconButton, {
+    appearance: "discrete",
+    icon: "more",
+    "aria-label": "More",
+    rounded: true,
+    className: cn('-mr-1.5 hidden flex-shrink-0 flex-grow-0 transition-none group-hover:flex aria-expanded:flex', {
+      'absolute right-0 !mr-0.5': total !== undefined
+    }),
+    menu: menu,
+    onClick: event => {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }) : null, total !== undefined ? /*#__PURE__*/React__default.createElement(Badge, {
+    className: cn('flex-shrink-0 flex-grow-0 !font-normal', {
+      'group-hover:hidden [[aria-expanded="true"]+&]:hidden ': menu
+    }),
+    color: "transparent"
+  }, total) : null));
 });
-const TabContent = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
+
+const Section = /*#__PURE__*/React__default.forwardRef(function Navigation2(props, ref) {
   const {
-    id,
-    ...otherProps
+    children,
+    heading,
+    ...attributes
   } = props;
-  const className = cn('yt-tab__panel outline-none', props.className);
-  return /*#__PURE__*/React.createElement(TabsPrimitive.Content, Object.assign({}, otherProps, {
+  const className = cn('w-full overflow-auto px-3 py-2 flex-grow border-grey-200 bg-grey-50 [[role=menubar]>&:first-child]:pt-0', getAdjacentClasses(), props.className);
+  return /*#__PURE__*/React__default.createElement("li", Object.assign({}, attributes, {
     className: className,
+    "data-taco": "navigation2-section",
     ref: ref,
-    value: id
-  }));
+    role: "none"
+  }), heading ? /*#__PURE__*/React__default.createElement("span", {
+    className: "text-grey-500 mb-px truncate pl-5 text-xs font-bold uppercase leading-8 lg:hidden"
+  }, heading) : null, /*#__PURE__*/React__default.createElement("ul", {
+    className: "mb-0 flex flex-col gap-y-px"
+  }, children));
 });
-Tabs.List = TabList;
-Tabs.Trigger = TabTrigger;
-Tabs.Content = TabContent;
 
-const Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
+const Content$a = /*#__PURE__*/React__default.forwardRef(function Navigation2(props, ref) {
   const {
-    defaultValue: _,
-    highlighted,
-    invalid,
-    onKeyDown,
-    ...otherProps
+    children,
+    ...attributes
   } = props;
-  const classNames = cn(getInputClasses(props), 'py-1 min-h-[75px] disabled:resize-none', props.className);
-  // home and end keys only navigate to the start/end of textarea value if the textarea container does not scroll
-  // if it has scroll height then the browser reverts to native scrolling behaviour only
-  // so we manually override it to ensure _our_ desired behaviour remains intact
-  const handleKeyDown = event => {
-    if (event.key === 'Home' || event.key === 'End') {
-      event.preventDefault();
-      const position = event.key === 'End' ? event.currentTarget.value.length : 0;
-      event.currentTarget.setSelectionRange(position, position);
-      event.currentTarget.scrollTop = event.key === 'End' ? event.currentTarget.scrollHeight : 0;
-    }
-    if (onKeyDown) {
-      onKeyDown(event);
-    }
-  };
-  return /*#__PURE__*/React.createElement("textarea", Object.assign({}, otherProps, {
-    className: classNames,
-    "data-taco": "textarea",
-    onKeyDown: handleKeyDown,
-    ref: ref
-  }));
+  const className = cn('w-full overflow-auto p-3 mt-auto border-grey-200 flex-shrink-0 z-10 bg-grey-50 [[role=menubar]>&:last-child]:pb-0', getAdjacentClasses(), props.className);
+  return /*#__PURE__*/React__default.createElement("li", Object.assign({}, attributes, {
+    className: className,
+    "data-taco": "navigation2-content",
+    ref: ref,
+    role: "none"
+  }), children);
 });
 
-const Tooltip$1 = ({
-  continuous,
-  index,
-  isLastStep,
-  step,
-  backProps,
-  primaryProps,
-  skipProps,
-  tooltipProps,
-  size,
-  locale,
-  disableTourSkipOnEsc
-}) => {
-  const skipButtonRef = React.useRef(null);
-  React.useEffect(() => {
-    const onWindowKeyDown = event => {
-      if (!disableTourSkipOnEsc) {
-        if (event.key === 'Escape' && skipButtonRef.current !== null) {
-          event.preventDefault();
-          skipButtonRef.current.click();
-          return;
-        }
-      }
-    };
-    window.addEventListener('keydown', onWindowKeyDown);
-    return () => {
-      window.removeEventListener('keydown', onWindowKeyDown);
-    };
-  }, []);
-  return /*#__PURE__*/React.createElement("div", Object.assign({}, tooltipProps, {
-    className: "yt-tour__step w-88 relative rounded bg-white p-4"
-  }), /*#__PURE__*/React.createElement(IconButton, Object.assign({}, skipProps, {
-    ref: skipButtonRef,
-    appearance: "discrete",
-    icon: "close",
-    title: locale.skip,
-    "aria-label": locale.skip,
-    className: "absolute top-0 right-0 mt-1 mr-1"
-  })), step.title && /*#__PURE__*/React.createElement("h5", null, step.title), step.content, /*#__PURE__*/React.createElement(Group, {
-    className: "mt-4 justify-end"
-  }, index > 0 && /*#__PURE__*/React.createElement(Button$1, Object.assign({}, backProps, {
-    appearance: "discrete"
-  }), locale.back), /*#__PURE__*/React.createElement(Button$1, Object.assign({}, primaryProps, {
-    appearance: "primary"
-  }), continuous ? isLastStep ? `${locale.last} (${index + 1}/${size})` : `${locale.next} (${index + 1}/${size})` : locale.close)));
-};
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const TourStep = _props => null;
-const Tour = props => {
-  const {
-    texts: {
-      tour
-    }
-  } = useLocalization();
+const Navigation2 = /*#__PURE__*/React__default.forwardRef(function Navigation2(props, ref) {
   const {
-    autoStart: run,
-    onComplete,
-    onClose,
-    onReady,
-    spotlightClicks,
-    disableCloseOnEsc: disableTourSkipOnEsc,
-    disableScrollParentFix = false,
-    scrollOffset,
-    ...rest
+    children,
+    ...attributes
   } = props;
-  const steps = React.useMemo(() => {
-    return React.Children.map(props.children, child => {
-      const step = {
-        disableBeacon: !child.props.showBeacon,
-        target: child.props.selector,
-        placement: child.props.position,
-        title: child.props.title,
-        content: child.props.children
-      };
-      return step;
-    });
-  }, [props.children]);
-  const getStep = React.useCallback(selector => {
-    var _props$children$find;
-    return (_props$children$find = props.children.find(child => child.props.selector === selector)) === null || _props$children$find === void 0 ? void 0 : _props$children$find.props;
-  }, [props.children]);
-  const callback = state => {
-    if (state.action === Joyride.ACTIONS.SKIP && state.lifecycle === Joyride.LIFECYCLE.COMPLETE) {
-      if (onClose) {
-        onClose(getStep(state.step.target));
-      }
-    }
-    if (state.type === Joyride.EVENTS.TOUR_END) {
-      if (onComplete) {
-        onComplete();
-      }
-    }
-    if (state.lifecycle === Joyride.LIFECYCLE.READY) {
-      if (onReady) {
-        onReady(getStep(state.step.target));
-      }
+  const className = cn('m-0 py-2 flex flex-col gap-y-px overflow-auto h-full w-full bg-grey-50', props.className);
+  return /*#__PURE__*/React__default.createElement("ul", Object.assign({}, attributes, {
+    className: className,
+    "data-taco": "navigation2",
+    ref: ref,
+    role: "menubar",
+    style: {
+      opacity: 0.999
     }
-  };
-  return /*#__PURE__*/React.createElement(Joyride__default, Object.assign({}, rest, {
-    run: run,
-    steps: steps,
-    showProgress: true,
-    floaterProps: {
-      disableAnimation: true
-    },
-    tooltipComponent: tooltipProps => /*#__PURE__*/React.createElement(Tooltip$1, Object.assign({}, tooltipProps, {
-      locale: tour,
-      disableTourSkipOnEsc: disableTourSkipOnEsc
-    })),
-    locale: tour,
-    spotlightPadding: 8,
-    spotlightClicks: spotlightClicks,
-    disableScrollParentFix: disableScrollParentFix,
-    callback: callback,
-    scrollOffset: scrollOffset,
-    styles: {
-      /** style beacon */
-      options: {
-        // tailwind.theme.colors.blue.300
-        primaryColor: '#6ba4ff'
-      }
-    },
-    disableCloseOnEsc: true
-  }));
-};
-Tour.Step = TourStep;
+  }), children);
+});
+Navigation2.Group = Group$3;
+Navigation2.Link = Link$2;
+Navigation2.Section = Section;
+Navigation2.Content = Content$a;
 
 const useOnClickOutside = (ref, callback) => {
   React__default.useEffect(() => {
@@ -14265,23 +15500,28 @@ exports.Button = Button$1;
 exports.Calendar = Calendar$1;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
+exports.CollectionPrimitive = Collection;
 exports.Combobox = Combobox;
 exports.Datepicker = Datepicker;
 exports.Dialog = Dialog;
+exports.Drawer = Drawer;
 exports.Field = Field;
 exports.Form = Form;
 exports.Group = Group;
 exports.Hanger = Hanger;
+exports.Header = Header$2;
 exports.HoverCard = HoverCard;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.Input = Input;
+exports.Layout = Layout$1;
 exports.Listbox = Listbox;
 exports.LocalizationContext = LocalizationContext;
 exports.LocalizationProvider = LocalizationProvider;
 exports.Menu = Menu$1;
 exports.MultiListbox = MultiListbox;
 exports.Navigation = Navigation;
+exports.Navigation2 = Navigation2;
 exports.PaginatedTable = PaginatedTable;
 exports.Pagination = Pagination;
 exports.Popover = Popover;
@@ -14299,7 +15539,7 @@ exports.Table2 = Table2;
 exports.Tabs = Tabs;
 exports.Tag = Tag$1;
 exports.Textarea = Textarea;
-exports.Title = Title$2;
+exports.Title = Title$3;
 exports.ToastProvider = ToastProvider;
 exports.Tooltip = Tooltip;
 exports.Tour = Tour;
@@ -14312,6 +15552,7 @@ exports.defaultLocalisationTexts = defaultLocalisationTexts;
 exports.findByValue = findByValue$1;
 exports.format = format;
 exports.getByRowIndexPath = getByRowIndexPath;
+exports.getNavigationLinkClasses = getNavigationLinkClasses;
 exports.getNextIndexFromKey = getNextIndexFromKey;
 exports.getParentRowIndexPath = getParentRowIndexPath;
 exports.getRadioGroupItemValueAsString = getRadioGroupItemValueAsString;
@@ -14323,11 +15564,14 @@ exports.parseFromCustomString = parseFromCustomString;
 exports.parseFromISOString = parseFromISOString;
 exports.removeChildTableRow = removeChildTableRow;
 exports.setByRowIndexPath = setByRowIndexPath;
+exports.useBoundaryOverflowDetection = useBoundaryOverflowDetection;
 exports.useBoundingClientRectListener = useBoundingClientRectListener;
 exports.useDropTarget = useDropTarget;
+exports.useIsLargeScreen = useIsLargeScreen;
 exports.useListKeyboardNavigation = useListKeyboardNavigation;
 exports.useListScrollTo = useListScrollTo;
 exports.useLocalization = useLocalization;
+exports.useMatchMedia = useMatchMedia;
 exports.useMergedRef = useMergedRef;
 exports.useOnClickOutside = useOnClickOutside;
 exports.usePagination = usePagination;