@economic/taco 1.24.0 → 1.25.1

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'));
@@ -3649,6 +3649,7 @@ const createButtonWithTooltip = (props, className, ref) => {
 const createButtonWithOverlays = (props, buttonBase) => {
   const {
     dialog,
+    drawer,
     hanger,
     menu,
     popover
@@ -3658,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
@@ -3900,6 +3905,9 @@ const defaultLocalisationTexts = {
     last: 'Done',
     next: 'Next',
     open: 'Open'
+  },
+  drawer: {
+    close: 'Close'
   }
 };
 const defaultLocalizationContext = {
@@ -3961,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,
@@ -3982,6 +3991,7 @@ const Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
   }), children);
   return createButtonWithOverlays({
     dialog,
+    drawer,
     hanger,
     menu,
     popover
@@ -5531,10 +5541,17 @@ const useDraggable = ref => {
       setDragging(false);
     }
   });
+  const resetPosition = () => {
+    setPosition({
+      x: 0,
+      y: 0
+    });
+  };
   return {
     position,
     dragging,
-    handleProps: moveProps
+    handleProps: moveProps,
+    resetPosition
   };
 };
 
@@ -5641,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);
@@ -5673,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);
@@ -5692,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;
@@ -5749,9 +5766,491 @@ 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 Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
+  const {
+    as: Tag = 'span',
+    orientation = 'horizontal',
+    ...otherProps
+  } = props;
+  const className = cn('flex ', 'gap-2', {
+    'flex-col ': orientation === 'vertical'
+  }, props.className);
+  return /*#__PURE__*/React.createElement(Tag, Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "group",
+    ref: ref
+  }));
+});
+
+const MenuContext = /*#__PURE__*/React.createContext(undefined);
+const useCurrentMenu = () => {
+  return React.useContext(MenuContext);
+};
+
+/* eslint-disable @typescript-eslint/no-empty-function */
+const DrawerContext = /*#__PURE__*/React.createContext({
+  closeOnEscape: true,
+  showCloseButton: true,
+  onClose: () => {},
+  onResize: () => {},
+  props: {},
+  ref: null,
+  size: 'md',
+  variant: 'embedded'
+});
+const useCurrentDrawer = () => {
+  return React.useContext(DrawerContext);
+};
+
+const getDrawerSizeClassnames = size => {
+  switch (size) {
+    case 'lg':
+      return 'w-[600px]';
+    case 'md':
+    default:
+      return 'w-[420px]';
+  }
+};
+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__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 Footer$2 = /*#__PURE__*/React__default.forwardRef(function DrawerFooter(props, ref) {
+  const {
+    className,
+    ...otherProps
+  } = props;
+  /**
+   * 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 {
+    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
+  }));
+});
+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
+  }));
+});
+const InnerContent = /*#__PURE__*/React__default.forwardRef(function InnerContent(props, ref) {
+  const {
+    className,
+    isScrollable = true,
+    children,
+    ...otherProps
+  } = props;
+  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
+  });
+});
+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);
+    }
+  });
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement(focus.FocusScope, {
+    autoFocus: true,
+    restoreFocus: true
+  }, children));
+});
+const DrawerContent = /*#__PURE__*/React__default.forwardRef(function Content(props, externalRef) {
+  const {
+    size,
+    onClose,
+    onResize,
+    open = false,
+    closeOnEscape,
+    variant,
+    focusTrap,
+    showCloseButton,
+    setOpen
+  } = useCurrentDrawer();
+  const {
+    className,
+    style,
+    children,
+    ...otherProps
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  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 [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
+    }
+  };
+  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
+  }));
+});
+
+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(() => {
+    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();
+      }
+      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;
+      }
+    }
+  }, [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 Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
   const {
     disabled,
@@ -5793,22 +6292,6 @@ const Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
   }));
 });
 
-const Group = /*#__PURE__*/React.forwardRef(function Group(props, ref) {
-  const {
-    as: Tag = 'span',
-    orientation = 'horizontal',
-    ...otherProps
-  } = props;
-  const className = cn('flex ', 'gap-2', {
-    'flex-col ': orientation === 'vertical'
-  }, props.className);
-  return /*#__PURE__*/React.createElement(Tag, Object.assign({}, otherProps, {
-    className: className,
-    "data-taco": "group",
-    ref: ref
-  }));
-});
-
 const HangerContext = /*#__PURE__*/React.createContext({
   onClose: undefined,
   props: {},
@@ -5831,14 +6314,14 @@ const Anchor = /*#__PURE__*/React.forwardRef(function HangerAnchor(props, extern
     asChild: true
   }), children);
 });
-const Title$2 = /*#__PURE__*/React.forwardRef(function DialogTitle(props, ref) {
+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$5 = /*#__PURE__*/React.forwardRef(function HangerContent(props, ref) {
+const Content$6 = /*#__PURE__*/React.forwardRef(function HangerContent(props, ref) {
   const {
     placement: side
   } = props;
@@ -5897,8 +6380,8 @@ const Hanger = /*#__PURE__*/React.forwardRef(function Hanger(props, ref) {
   }, anchor && /*#__PURE__*/React.createElement(Anchor, null, anchor), children));
 });
 Hanger.Anchor = Anchor;
-Hanger.Content = Content$5;
-Hanger.Title = Title$2;
+Hanger.Content = Content$6;
+Hanger.Title = Title$3;
 
 const UnstyledArrow$1 = /*#__PURE__*/React.forwardRef(function HoverCardArrow(props, ref) {
   return /*#__PURE__*/React.createElement(HoverCardPrimitive.Arrow, {
@@ -5922,13 +6405,13 @@ const UnstyledArrow$1 = /*#__PURE__*/React.forwardRef(function HoverCardArrow(pr
   })));
 });
 
-const Trigger$4 = /*#__PURE__*/React.forwardRef(function HoverCardTrigger(props, ref) {
+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$6 = /*#__PURE__*/React.forwardRef(function HoverCardContent(props, ref) {
+const Content$7 = /*#__PURE__*/React.forwardRef(function HoverCardContent(props, ref) {
   const {
     placement: side
   } = props;
@@ -5948,8 +6431,8 @@ const HoverCard = props => {
     openDelay: 300
   }));
 };
-HoverCard.Trigger = Trigger$4;
-HoverCard.Content = Content$6;
+HoverCard.Trigger = Trigger$5;
+HoverCard.Content = Content$7;
 
 const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
   onSearch,
@@ -6407,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 {
@@ -6545,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(() => {
@@ -6774,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;
@@ -8013,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
@@ -8373,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
   }));
@@ -8403,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
@@ -9073,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,
@@ -9124,7 +9571,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
 });
 Select2.Option = Option$1;
 Select2.Group = Group$2;
-Select2.Title = Title$4;
+Select2.Title = Title$5;
 const ControlledHiddenField = props => {
   const {
     emptyValue,
@@ -12174,7 +12621,7 @@ const HeaderMenu = ({
   })) : null;
 };
 
-const Footer$2 = function Footer(props) {
+const Footer$3 = function Footer(props) {
   const {
     children,
     footer,
@@ -13474,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
@@ -14021,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,
@@ -14269,6 +14707,7 @@ const Button$3 = /*#__PURE__*/React__default.forwardRef(function Button(props, r
   }, /*#__PURE__*/React__default.createElement(IconButton, Object.assign({}, attributes, {
     appearance: "discrete",
     className: className,
+    "data-taco": "header-button",
     ref: ref
   })));
 });
@@ -14290,6 +14729,7 @@ const Link$1 = /*#__PURE__*/React__default.forwardRef(function Link(props, ref)
   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, {
@@ -14515,6 +14955,7 @@ const MenuButton = /*#__PURE__*/React__default.forwardRef(function MenuButton(pr
   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
   }));
@@ -14588,7 +15029,8 @@ const Image = /*#__PURE__*/React__default.forwardRef(function AccountImage(props
 
 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"
+    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);
@@ -14697,6 +15139,7 @@ const isCurrentAgreement = (agreement, currentAgreement) => {
 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),
@@ -14729,7 +15172,7 @@ const LayoutContext = /*#__PURE__*/React__default.createContext({
   setSidebarOpen: () => undefined
 });
 
-const Content$8 = /*#__PURE__*/React__default.forwardRef(function LayoutContent(props, ref) {
+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,
@@ -14861,7 +15304,7 @@ const Layout$1 = /*#__PURE__*/React__default.forwardRef(function Layout(props, r
 Layout$1.Top = Top;
 Layout$1.Page = Page;
 Layout$1.Sidebar = Sidebar;
-Layout$1.Content = Content$8;
+Layout$1.Content = Content$9;
 
 const Group$3 = /*#__PURE__*/React__default.forwardRef(function Group(props, ref) {
   const {
@@ -14879,18 +15322,18 @@ const Group$3 = /*#__PURE__*/React__default.forwardRef(function Group(props, ref
       onClick(event);
     }
   };
-  return /*#__PURE__*/React__default.createElement("li", {
+  return /*#__PURE__*/React__default.createElement("li", Object.assign({}, attributes, {
     role: "none",
-    className: "[[role=menubar]>&]:px-3"
-  }, /*#__PURE__*/React__default.createElement("button", Object.assign({}, attributes, {
-    "aria-haspopup": "menu",
+    className: "[[role=menubar]>&]:px-3",
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement("button", {
+    "aria-haspopup": "true",
     "aria-expanded": expanded,
     "data-taco": "navigation2-group",
     className: className,
     onClick: handleClick,
-    ref: ref,
     role: "menuitem"
-  }), /*#__PURE__*/React__default.createElement(Icon, {
+  }, /*#__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", {
@@ -14903,6 +15346,14 @@ const Group$3 = /*#__PURE__*/React__default.forwardRef(function Group(props, ref
   }, children));
 });
 
+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',
@@ -14925,7 +15376,7 @@ const Link$2 = /*#__PURE__*/React__default.forwardRef(function Link(props, ref)
   } = props;
   const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);
   const className = cn(getNavigationLinkClasses(isDraggedOver), attributes.className);
-  const listClassName = cn('[[role=menubar]>&]:px-3', {
+  const listClassName = cn('[[role=menubar]>&]:px-3 border-grey-200', getAdjacentClasses(), {
     '[&>*]:pointer-events-none': isDraggedOver
   });
   return /*#__PURE__*/React__default.createElement("li", Object.assign({}, dropTargetProps, {
@@ -14971,7 +15422,7 @@ const Section = /*#__PURE__*/React__default.forwardRef(function Navigation2(prop
     heading,
     ...attributes
   } = props;
-  const className = cn('w-full overflow-auto px-3 py-2 -mt-3 border-grey-200 [[data-taco="navigation2-link-item"]+&]:mt-2 bg-grey-50', '[[data-taco="navigation2-link-item"]+&]:border-t-2 [[data-taco="navigation2-section"]+&]:border-t-2', '[[data-taco="navigation2-link-item"]+&]:pt-2 [[data-taco="navigation2-section"]+&]:pt-2', props.className);
+  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",
@@ -14984,12 +15435,12 @@ const Section = /*#__PURE__*/React__default.forwardRef(function Navigation2(prop
   }, children));
 });
 
-const Content$9 = /*#__PURE__*/React__default.forwardRef(function Navigation2(props, ref) {
+const Content$a = /*#__PURE__*/React__default.forwardRef(function Navigation2(props, ref) {
   const {
     children,
     ...attributes
   } = props;
-  const className = cn('w-full overflow-auto p-3 mt-auto border-grey-200 flex-shrink-0 z-10 bg-grey-50', '[[data-taco="navigation2-link"]+&]:border-t-2 [[data-taco="navigation2-section"]+&]:border-t-2', props.className);
+  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",
@@ -15003,7 +15454,7 @@ const Navigation2 = /*#__PURE__*/React__default.forwardRef(function Navigation2(
     children,
     ...attributes
   } = props;
-  const className = cn('mb-0 flex h-full flex-col gap-y-px overflow-auto pt-2 pb-0 w-full bg-grey-50', props.className);
+  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",
@@ -15017,7 +15468,7 @@ const Navigation2 = /*#__PURE__*/React__default.forwardRef(function Navigation2(
 Navigation2.Group = Group$3;
 Navigation2.Link = Link$2;
 Navigation2.Section = Section;
-Navigation2.Content = Content$9;
+Navigation2.Content = Content$a;
 
 const useOnClickOutside = (ref, callback) => {
   React__default.useEffect(() => {
@@ -15053,6 +15504,7 @@ exports.CollectionPrimitive = Collection;
 exports.Combobox = Combobox;
 exports.Datepicker = Datepicker;
 exports.Dialog = Dialog;
+exports.Drawer = Drawer;
 exports.Field = Field;
 exports.Form = Form;
 exports.Group = Group;
@@ -15087,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;