@economic/taco 1.23.1 → 1.24.0

package/dist/taco.cjs.development.js

@@ -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 => {
@@ -3718,6 +3719,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 +3742,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 +3871,11 @@ const defaultLocalisationTexts = {
       collapseRow: 'Collapse current row'
     }
   },
+  searchInput: {
+    button: 'Search',
+    placeholder: 'Search...',
+    clear: 'Clear'
+  },
   select: {
     allOptionsSelected: 'All'
   },
@@ -3887,11 +3900,6 @@ const defaultLocalisationTexts = {
     last: 'Done',
     next: 'Next',
     open: 'Open'
-  },
-  searchInput: {
-    button: 'Search',
-    placeholder: 'Search...',
-    clear: 'Clear'
   }
 };
 const defaultLocalizationContext = {
@@ -4116,7 +4124,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",
@@ -5960,12 +5968,15 @@ const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
   };
   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;
     }
-    (_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,
@@ -7766,7 +7777,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 +7884,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);
 
@@ -8900,7 +8921,7 @@ const Create = props => {
   }, searchQuery)));
 };
 
-const Collection = props => {
+const Collection$1 = props => {
   const {
     children
   } = props;
@@ -9096,7 +9117,7 @@ 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))))));
@@ -13049,12 +13070,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;
 };
 
@@ -14235,6 +14257,768 @@ const Tour = props => {
 };
 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,
+    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,
+    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,
+    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"
+  }, /*#__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",
+  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$8 = /*#__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$8;
+
+const Group$3 = /*#__PURE__*/React__default.forwardRef(function Group(props, ref) {
+  const {
+    children,
+    defaultExpanded = false,
+    heading,
+    onClick,
+    ...attributes
+  } = props;
+  const [expanded, setExpanded] = React__default.useState(defaultExpanded);
+  const className = cn('flex w-full cursor-pointer items-center rounded px-3 font-bold text-left leading-8 hover:bg-black/[.06] focus-visible:yt-focus-dark', attributes.className);
+  const 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": "menu",
+    "aria-expanded": expanded,
+    "data-taco": "navigation2-group",
+    className: className,
+    onClick: handleClick,
+    ref: ref,
+    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 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 Link$2 = /*#__PURE__*/React__default.forwardRef(function Link(props, ref) {
+  const {
+    active,
+    children,
+    icon,
+    menu,
+    onDrop,
+    total,
+    ...attributes
+  } = props;
+  const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);
+  const className = cn(getNavigationLinkClasses(isDraggedOver), attributes.className);
+  const listClassName = cn('[[role=menubar]>&]:px-3', {
+    '[&>*]: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,
+    "data-taco": "navigation2-link",
+    ref: ref,
+    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 Section = /*#__PURE__*/React__default.forwardRef(function Navigation2(props, ref) {
+  const {
+    children,
+    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);
+  return /*#__PURE__*/React__default.createElement("li", Object.assign({}, attributes, {
+    className: className,
+    "data-taco": "navigation2-section",
+    ref: ref,
+    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));
+});
+
+const Content$9 = /*#__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);
+  return /*#__PURE__*/React__default.createElement("li", Object.assign({}, attributes, {
+    className: className,
+    "data-taco": "navigation2-content",
+    ref: ref,
+    role: "none"
+  }), children);
+});
+
+const Navigation2 = /*#__PURE__*/React__default.forwardRef(function Navigation2(props, ref) {
+  const {
+    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);
+  return /*#__PURE__*/React__default.createElement("ul", Object.assign({}, attributes, {
+    className: className,
+    "data-taco": "navigation2",
+    ref: ref,
+    role: "menubar",
+    style: {
+      opacity: 0.999
+    }
+  }), children);
+});
+Navigation2.Group = Group$3;
+Navigation2.Link = Link$2;
+Navigation2.Section = Section;
+Navigation2.Content = Content$9;
+
 const useOnClickOutside = (ref, callback) => {
   React__default.useEffect(() => {
     const listener = event => {
@@ -14265,6 +15049,7 @@ 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;
@@ -14272,16 +15057,19 @@ 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;
@@ -14312,6 +15100,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 +15112,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;