@economic/taco 1.25.3 → 1.26.1

package/dist/components/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ButtonProps } from '../Button/Button';
+export declare const ButtonGroup: React.ForwardRefExoticComponent<Pick<React.HTMLAttributes<HTMLElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+    children: React.ReactElement<ButtonProps>[];
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Header/Header.d.ts

@@ -5,7 +5,7 @@ import { Logo } from './components/Logo';
 import { PrimaryNavigation } from './components/PrimaryNavigation';
 import { SecondaryNavigation } from './components/SecondaryNavigation';
 import { MenuButton } from './components/MenuButton';
-import { AgreementDisplay, AgreementSelector } from './components/AgreementSelector';
+import { AgreementSelector, AgreementDisplay } from './components/AgreementSelector';
 export declare type HeaderTexts = {
     addAgreement: string;
     logout: string;

package/dist/components/Header/components/Agreement/Avatar.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare type AgreementAvatarProps = React.ImgHTMLAttributes<HTMLImageElement> & {
+    fallbackSrc: string;
+};
+export declare const AgreementAvatar: React.ForwardRefExoticComponent<React.ImgHTMLAttributes<HTMLImageElement> & {
+    fallbackSrc: string;
+} & React.RefAttributes<HTMLImageElement>>;

package/dist/components/Header/components/Agreement/Badge.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Agreement } from './types';
+export declare type AgreementBadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
+    agreement: Agreement;
+};
+export declare const AgreementBadge: ({ agreement, ...props }: AgreementBadgeProps) => JSX.Element | null;

package/dist/components/Header/components/Agreement/Display.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Agreement } from './types';
+export declare type AgreementDisplayProps = {
+    children?: JSX.Element | null;
+    className?: string;
+    currentAgreement: Agreement;
+    fallbackImageSrc: string;
+};
+export declare const AgreementDisplay: (props: AgreementDisplayProps) => JSX.Element;

package/dist/components/Header/components/Agreement/Item.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Agreement } from './types';
+export declare type AgreementItemProps = Agreement & {
+    children?: JSX.Element | null;
+    className?: string;
+    fallbackImageSrc: string;
+};
+export declare const AgreementItem: (props: AgreementItemProps) => JSX.Element;

package/dist/components/Header/components/{Agreements/AgreementDetails.d.ts → Agreement/types.d.ts}

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare type Agreement = {
     adminAgreementNumber?: number;
     number: number;
@@ -12,9 +11,3 @@ export declare type Agreement = {
     statuses?: any[];
     secure: boolean;
 };
-export declare type AgreementDetailsProps = Agreement & {
-    children?: JSX.Element | null;
-    className?: string;
-    fallbackImageSrc: string;
-};
-export declare const AgreementDetails: (props: AgreementDetailsProps) => JSX.Element;

package/dist/components/Header/components/AgreementSelector.d.ts

@@ -1,12 +1,9 @@
 import React from 'react';
-import { Agreement } from './Agreements/AgreementDetails';
-export declare type AgreementDisplayProps = React.HTMLAttributes<HTMLDivElement> & {
+import { Agreement } from './Agreement/types';
+export declare type AgreementSelectorProps = {
+    agreements: Agreement[];
     currentAgreement: Agreement;
     fallbackImageSrc: string;
-};
-export declare function AgreementDisplay(props: AgreementDisplayProps): JSX.Element;
-export declare type AgreementSelectorProps = AgreementDisplayProps & {
-    agreements: Agreement[];
     filterAgreement: (agreement: Agreement, filter: (agreement: Agreement) => boolean) => void;
     filterClientAgreement: (agreement: Agreement, filter: (agreement: Agreement) => boolean) => void;
     onAddAgreement?: () => void;
@@ -16,3 +13,8 @@ export declare type AgreementSelectorProps = AgreementDisplayProps & {
     setOpen?: (open: boolean) => void;
 };
 export declare function AgreementSelector(props: AgreementSelectorProps): JSX.Element;
+export declare type AgreementDisplayProps = React.HTMLAttributes<HTMLDivElement> & {
+    currentAgreement: Agreement;
+    fallbackImageSrc: string;
+};
+export declare function AgreementDisplay(props: AgreementDisplayProps): JSX.Element;

package/dist/esm/packages/taco/src/components/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,46 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { IconButton } from '../IconButton/IconButton.js';
+import { useMergedRef } from '../../hooks/useMergedRef.js';
+import { Group } from '../Group/Group.js';
+import { Menu } from '../Menu/Menu.js';
+import { useIntersectionObserver } from '../../hooks/useIntersectionObserver.js';
+
+const sanitizeButtonPropsForMenuItem = props => {
+  const {
+    appearance: _1,
+    drawer: _2,
+    fluid: _3,
+    hanger: _4,
+    menu: _5,
+    popover: _6,
+    tooltip: _7,
+    ...attributes
+  } = props;
+  return attributes;
+};
+const OFFSET = 32 + 8;
+const ButtonGroup = /*#__PURE__*/React__default.forwardRef(function ButtonGroup(props, ref) {
+  const internalRef = useMergedRef(ref);
+  const intersectedChildIndex = useIntersectionObserver(internalRef, OFFSET);
+  const children = React__default.Children.toArray(props.children);
+  const hidden = intersectedChildIndex !== undefined ? children.slice(intersectedChildIndex) : [];
+  return /*#__PURE__*/React__default.createElement(Group, Object.assign({}, props, {
+    ref: internalRef
+  }), children.map((child, index) => /*#__PURE__*/React__default.cloneElement(child, {
+    className: cn(child.props.className, {
+      visible: intersectedChildIndex === undefined || index < intersectedChildIndex,
+      'invisible order-[100] pointer-events-none': intersectedChildIndex !== undefined && index >= intersectedChildIndex
+    })
+  })), hidden.length ? /*#__PURE__*/React__default.createElement(IconButton, {
+    className: "sticky right-0 order-[99]",
+    "data-intesection-observer": "ignore",
+    icon: "more",
+    menu: menuProps => /*#__PURE__*/React__default.createElement(Menu, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu.Content, null, hidden.map((button, index) => /*#__PURE__*/React__default.createElement(Menu.Item, Object.assign({
+      key: index
+    }, sanitizeButtonPropsForMenuItem(button.props))))))
+  }) : null);
+});
+
+export { ButtonGroup };
+//# sourceMappingURL=ButtonGroup.js.map

package/dist/esm/packages/taco/src/components/ButtonGroup/ButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.js","sources":["../../../../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { ButtonProps } from '../Button/Button';\nimport { Group } from '../Group/Group';\nimport { Menu } from '../Menu/Menu';\nimport { useIntersectionObserver } from '../../hooks/useIntersectionObserver';\nimport { IconButton } from '../IconButton/IconButton';\n\nconst sanitizeButtonPropsForMenuItem = props => {\n    const { appearance: _1, drawer: _2, fluid: _3, hanger: _4, menu: _5, popover: _6, tooltip: _7, ...attributes } = props;\n    return attributes;\n};\n\ntype ButtonGroupProps = Omit<React.HTMLAttributes<HTMLElement>, 'children'> & {\n    children: React.ReactElement<ButtonProps>[];\n};\n\nconst OFFSET = 32 + 8;\n\nexport const ButtonGroup = React.forwardRef(function ButtonGroup(props: ButtonGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const internalRef = useMergedRef<HTMLDivElement>(ref);\n    const intersectedChildIndex = useIntersectionObserver(internalRef, OFFSET);\n    const children = React.Children.toArray(props.children) as React.ReactElement<ButtonProps>[];\n\n    const hidden = intersectedChildIndex !== undefined ? children.slice(intersectedChildIndex) : [];\n\n    return (\n        <Group {...props} ref={internalRef}>\n            {children.map((child, index) =>\n                React.cloneElement(child, {\n                    className: cn(child.props.className, {\n                        visible: intersectedChildIndex === undefined || index < intersectedChildIndex,\n                        'invisible order-[100] pointer-events-none':\n                            intersectedChildIndex !== undefined && index >= intersectedChildIndex,\n                    }),\n                })\n            )}\n            {hidden.length ? (\n                <IconButton\n                    className=\"sticky right-0 order-[99]\"\n                    data-intesection-observer=\"ignore\"\n                    icon=\"more\"\n                    menu={menuProps => (\n                        <Menu {...menuProps}>\n                            <Menu.Content>\n                                {hidden.map((button, index) => (\n                                    <Menu.Item key={index} {...sanitizeButtonPropsForMenuItem(button.props)} />\n                                ))}\n                            </Menu.Content>\n                        </Menu>\n                    )}\n                />\n            ) : null}\n        </Group>\n    );\n});\n"],"names":["sanitizeButtonPropsForMenuItem","props","appearance","_1","drawer","_2","fluid","_3","hanger","_4","menu","_5","popover","_6","tooltip","_7","attributes","OFFSET","ButtonGroup","React","forwardRef","ref","internalRef","useMergedRef","intersectedChildIndex","useIntersectionObserver","children","Children","toArray","hidden","undefined","slice","Group","map","child","index","cloneElement","className","cn","visible","length","IconButton","icon","menuProps","Menu","Content","button","Item","key"],"mappings":";;;;;;;;AASA,MAAMA,8BAA8B,GAAGC,KAAK;EACxC,MAAM;IAAEC,UAAU,EAAEC,EAAE;IAAEC,MAAM,EAAEC,EAAE;IAAEC,KAAK,EAAEC,EAAE;IAAEC,MAAM,EAAEC,EAAE;IAAEC,IAAI,EAAEC,EAAE;IAAEC,OAAO,EAAEC,EAAE;IAAEC,OAAO,EAAEC,EAAE;IAAE,GAAGC;GAAY,GAAGf,KAAK;EACtH,OAAOe,UAAU;AACrB,CAAC;AAMD,MAAMC,MAAM,GAAG,EAAE,GAAG,CAAC;MAERC,WAAW,gBAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,WAAW,CAACjB,KAAuB,EAAEoB,GAA8B;EACpH,MAAMC,WAAW,GAAGC,YAAY,CAAiBF,GAAG,CAAC;EACrD,MAAMG,qBAAqB,GAAGC,uBAAuB,CAACH,WAAW,EAAEL,MAAM,CAAC;EAC1E,MAAMS,QAAQ,GAAGP,cAAK,CAACQ,QAAQ,CAACC,OAAO,CAAC3B,KAAK,CAACyB,QAAQ,CAAsC;EAE5F,MAAMG,MAAM,GAAGL,qBAAqB,KAAKM,SAAS,GAAGJ,QAAQ,CAACK,KAAK,CAACP,qBAAqB,CAAC,GAAG,EAAE;EAE/F,oBACIL,6BAACa,KAAK,oBAAK/B,KAAK;IAAEoB,GAAG,EAAEC;MAClBI,QAAQ,CAACO,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK,kBACvBhB,cAAK,CAACiB,YAAY,CAACF,KAAK,EAAE;IACtBG,SAAS,EAAEC,EAAE,CAACJ,KAAK,CAACjC,KAAK,CAACoC,SAAS,EAAE;MACjCE,OAAO,EAAEf,qBAAqB,KAAKM,SAAS,IAAIK,KAAK,GAAGX,qBAAqB;MAC7E,2CAA2C,EACvCA,qBAAqB,KAAKM,SAAS,IAAIK,KAAK,IAAIX;KACvD;GACJ,CAAC,CACL,EACAK,MAAM,CAACW,MAAM,gBACVrB,6BAACsB,UAAU;IACPJ,SAAS,EAAC,2BAA2B;iCACX,QAAQ;IAClCK,IAAI,EAAC,MAAM;IACXhC,IAAI,EAAEiC,SAAS,iBACXxB,6BAACyB,IAAI,oBAAKD,SAAS,gBACfxB,6BAACyB,IAAI,CAACC,OAAO,QACRhB,MAAM,CAACI,GAAG,CAAC,CAACa,MAAM,EAAEX,KAAK,kBACtBhB,6BAACyB,IAAI,CAACG,IAAI;MAACC,GAAG,EAAEb;OAAWnC,8BAA8B,CAAC8C,MAAM,CAAC7C,KAAK,CAAC,EAC1E,CAAC,CACS;IAGzB,GACF,IAAI,CACJ;AAEhB,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Combobox/useCombobox.js

@@ -1,6 +1,6 @@
 import { useRef, useState, useMemo, useEffect } from 'react';
-import { v4 } from 'uuid';
 import { useMergedRef } from '../../hooks/useMergedRef.js';
+import { v4 } from 'uuid';
 import debounce from 'lodash-es/debounce';
 import { getId } from '../Listbox/ScrollableList.js';
 import { createCustomKeyboardEvent } from '../../utils/input.js';

package/dist/esm/packages/taco/src/components/Drawer/Drawer.js

@@ -1,9 +1,9 @@
 import { forwardRef, useState, useMemo, useCallback, useEffect, createElement } from 'react';
 import cn from 'classnames';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { Root } from '@radix-ui/react-dialog';
 import { DrawerContext } from './Context.js';
 import { Content, InnerContent, Title, Footer, Close, Actions } from './components/Content.js';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { Trigger } from './components/Trigger.js';
 
 const Outlet = /*#__PURE__*/forwardRef(function Outlet(props, ref) {

package/dist/esm/packages/taco/src/components/Drawer/components/Content.js

@@ -4,10 +4,10 @@ import { Backdrop } from '../../Backdrop/Backdrop.js';
 import { IconButton } from '../../IconButton/IconButton.js';
 import { useLocalization } from '../../Provider/Localization.js';
 import { useMergedRef } from '../../../hooks/useMergedRef.js';
-import { Title as Title$1, Close as Close$1, Portal as Portal$1, Overlay, Content as Content$1 } from '@radix-ui/react-dialog';
-import { useDraggable } from '../../../utils/hooks/useDraggable.js';
 import { Group } from '../../Group/Group.js';
 import { useCurrentMenu } from '../../Menu/Context.js';
+import { Title as Title$1, Close as Close$1, Portal as Portal$1, Overlay, Content as Content$1 } from '@radix-ui/react-dialog';
+import { useDraggable } from '../../../utils/hooks/useDraggable.js';
 import { useCurrentDrawer } from '../Context.js';
 import { getBackdropClassNames, getDrawerContainerClassNames, getDrawerContentClassNames, getDrawerDragHandlerClassNames } from '../util.js';
 import { useGlobalKeyboardShortcut } from '../../../hooks/useGlobalKeyboardShortcut.js';

package/dist/esm/packages/taco/src/components/Group/Group.js

@@ -7,7 +7,7 @@ const Group = /*#__PURE__*/forwardRef(function Group(props, ref) {
     orientation = 'horizontal',
     ...otherProps
   } = props;
-  const className = cn('flex ', 'gap-2', {
+  const className = cn('flex gap-2', {
     'flex-col ': orientation === 'vertical'
   }, props.className);
   return /*#__PURE__*/createElement(Tag, Object.assign({}, otherProps, {

package/dist/esm/packages/taco/src/components/Group/Group.js.map

@@ -1 +1 @@
-{"version":3,"file":"Group.js","sources":["../../../../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Orientation } from '../../types';\n\nexport type GroupProps = React.HTMLAttributes<HTMLElement> & {\n    /**\n     * Change what html tag element will render.\n     * Default value is `span`\n     */\n    as?: 'div' | 'span' | 'nav';\n    /** Content should be composed of other Taco elements */\n    children: React.ReactNode;\n    /**\n     * Define orientation of grouping.\n     * @defaultValue horizontal\n     */\n    orientation?: Orientation;\n};\n\nexport const Group = React.forwardRef(function Group(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { as: Tag = 'span', orientation = 'horizontal', ...otherProps } = props;\n    const className = cn('flex ', 'gap-2', { 'flex-col ': orientation === 'vertical' }, props.className);\n    return <Tag {...otherProps} className={className} data-taco=\"group\" ref={ref} />;\n});\n"],"names":["Group","React","props","ref","as","Tag","orientation","otherProps","className","cn"],"mappings":";;;MAmBaA,KAAK,gBAAGC,UAAgB,CAAC,SAASD,KAAK,CAACE,KAAiB,EAAEC,GAA8B;EAClG,MAAM;IAAEC,EAAE,EAAEC,GAAG,GAAG,MAAM;IAAEC,WAAW,GAAG,YAAY;IAAE,GAAGC;GAAY,GAAGL,KAAK;EAC7E,MAAMM,SAAS,GAAGC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE;IAAE,WAAW,EAAEH,WAAW,KAAK;GAAY,EAAEJ,KAAK,CAACM,SAAS,CAAC;EACpG,oBAAOP,cAACI,GAAG,oBAAKE,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,OAAO;IAACL,GAAG,EAAEA;KAAO;AACpF,CAAC;;;;"}
+{"version":3,"file":"Group.js","sources":["../../../../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Orientation } from '../../types';\n\nexport type GroupProps = React.HTMLAttributes<HTMLElement> & {\n    /**\n     * Change what html tag element will render.\n     * Default value is `span`\n     */\n    as?: 'div' | 'span' | 'nav';\n    /** Content should be composed of other Taco elements */\n    children: React.ReactNode;\n    /**\n     * Define orientation of grouping.\n     * @defaultValue horizontal\n     */\n    orientation?: Orientation;\n};\n\nexport const Group = React.forwardRef(function Group(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { as: Tag = 'span', orientation = 'horizontal', ...otherProps } = props;\n    const className = cn('flex gap-2', { 'flex-col ': orientation === 'vertical' }, props.className);\n    return <Tag {...otherProps} className={className} data-taco=\"group\" ref={ref} />;\n});\n"],"names":["Group","React","props","ref","as","Tag","orientation","otherProps","className","cn"],"mappings":";;;MAmBaA,KAAK,gBAAGC,UAAgB,CAAC,SAASD,KAAK,CAACE,KAAiB,EAAEC,GAA8B;EAClG,MAAM;IAAEC,EAAE,EAAEC,GAAG,GAAG,MAAM;IAAEC,WAAW,GAAG,YAAY;IAAE,GAAGC;GAAY,GAAGL,KAAK;EAC7E,MAAMM,SAAS,GAAGC,EAAE,CAAC,YAAY,EAAE;IAAE,WAAW,EAAEH,WAAW,KAAK;GAAY,EAAEJ,KAAK,CAACM,SAAS,CAAC;EAChG,oBAAOP,cAACI,GAAG,oBAAKE,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,OAAO;IAACL,GAAG,EAAEA;KAAO;AACpF,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../../../../../src/components/Header/Header.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Button } from './components/Button';\nimport { Link } from './components/Link';\nimport { Logo } from './components/Logo';\nimport { PrimaryNavigation } from './components/PrimaryNavigation';\nimport { SecondaryNavigation } from './components/SecondaryNavigation';\nimport { MenuButton } from './components/MenuButton';\nimport { AgreementDisplay, AgreementSelector } from './components/AgreementSelector';\n\nexport type HeaderTexts = {\n    addAgreement: string;\n    logout: string;\n    more: string;\n    new: string;\n    search: string;\n};\n\ntype HeaderProps = React.HTMLAttributes<HTMLElement>;\n\nexport type ForwardedHeaderWithStatics = React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLDivElement>> & {\n    AgreementDisplay: typeof AgreementDisplay;\n    AgreementSelector: typeof AgreementSelector;\n    Button: typeof Button;\n    Link: typeof Link;\n    Logo: typeof Logo;\n    PrimaryNavigation: typeof PrimaryNavigation;\n    SecondaryNavigation: typeof SecondaryNavigation;\n    MenuButton: typeof MenuButton;\n};\n\nexport const Header = React.forwardRef<HTMLDivElement, HeaderProps>(function Header(props, ref) {\n    const className = cn(\n        'bg-blue-900 flex h-16 w-full shrink-0 items-center gap-4 pl-2',\n        '[&>a:focus-visible]:yt-focus-dark [&>a]:px-2 [&>a]:rounded [&>a]:h-[calc(100%-14px)]', // styles for logo wrapped inside an anchor\n        props.className\n    );\n\n    return <header {...props} className={className} ref={ref} />;\n}) as ForwardedHeaderWithStatics;\n\nHeader.AgreementDisplay = AgreementDisplay;\nHeader.AgreementSelector = AgreementSelector;\nHeader.Button = Button;\nHeader.Link = Link;\nHeader.Logo = Logo;\nHeader.PrimaryNavigation = PrimaryNavigation;\nHeader.SecondaryNavigation = SecondaryNavigation;\nHeader.MenuButton = MenuButton;\n"],"names":["Header","React","forwardRef","props","ref","className","cn","AgreementDisplay","AgreementSelector","Button","Link","Logo","PrimaryNavigation","SecondaryNavigation","MenuButton"],"mappings":";;;;;;;;;;MA+BaA,MAAM,gBAAGC,cAAK,CAACC,UAAU,CAA8B,SAASF,MAAM,CAACG,KAAK,EAAEC,GAAG;EAC1F,MAAMC,SAAS,GAAGC,EAAE,CAChB,+DAA+D,EAC/D,sFAAsF;;EACtFH,KAAK,CAACE,SAAS,CAClB;EAED,oBAAOJ,yDAAYE,KAAK;IAAEE,SAAS,EAAEA,SAAS;IAAED,GAAG,EAAEA;KAAO;AAChE,CAAC;AAEDJ,MAAM,CAACO,gBAAgB,GAAGA,gBAAgB;AAC1CP,MAAM,CAACQ,iBAAiB,GAAGA,iBAAiB;AAC5CR,MAAM,CAACS,MAAM,GAAGA,MAAM;AACtBT,MAAM,CAACU,IAAI,GAAGA,IAAI;AAClBV,MAAM,CAACW,IAAI,GAAGA,IAAI;AAClBX,MAAM,CAACY,iBAAiB,GAAGA,iBAAiB;AAC5CZ,MAAM,CAACa,mBAAmB,GAAGA,mBAAmB;AAChDb,MAAM,CAACc,UAAU,GAAGA,UAAU;;;;"}
+{"version":3,"file":"Header.js","sources":["../../../../../../../src/components/Header/Header.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Button } from './components/Button';\nimport { Link } from './components/Link';\nimport { Logo } from './components/Logo';\nimport { PrimaryNavigation } from './components/PrimaryNavigation';\nimport { SecondaryNavigation } from './components/SecondaryNavigation';\nimport { MenuButton } from './components/MenuButton';\nimport { AgreementSelector, AgreementDisplay } from './components/AgreementSelector';\n\nexport type HeaderTexts = {\n    addAgreement: string;\n    logout: string;\n    more: string;\n    new: string;\n    search: string;\n};\n\ntype HeaderProps = React.HTMLAttributes<HTMLElement>;\n\nexport type ForwardedHeaderWithStatics = React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLDivElement>> & {\n    AgreementDisplay: typeof AgreementDisplay;\n    AgreementSelector: typeof AgreementSelector;\n    Button: typeof Button;\n    Link: typeof Link;\n    Logo: typeof Logo;\n    PrimaryNavigation: typeof PrimaryNavigation;\n    SecondaryNavigation: typeof SecondaryNavigation;\n    MenuButton: typeof MenuButton;\n};\n\nexport const Header = React.forwardRef<HTMLDivElement, HeaderProps>(function Header(props, ref) {\n    const className = cn(\n        'bg-blue-900 flex h-16 w-full shrink-0 items-center gap-4 pl-2',\n        '[&>a:focus-visible]:yt-focus-dark [&>a]:px-2 [&>a]:rounded [&>a]:h-[calc(100%-14px)]', // styles for logo wrapped inside an anchor\n        props.className\n    );\n\n    return <header {...props} className={className} ref={ref} />;\n}) as ForwardedHeaderWithStatics;\n\nHeader.AgreementDisplay = AgreementDisplay;\nHeader.AgreementSelector = AgreementSelector;\nHeader.Button = Button;\nHeader.Link = Link;\nHeader.Logo = Logo;\nHeader.PrimaryNavigation = PrimaryNavigation;\nHeader.SecondaryNavigation = SecondaryNavigation;\nHeader.MenuButton = MenuButton;\n"],"names":["Header","React","forwardRef","props","ref","className","cn","AgreementDisplay","AgreementSelector","Button","Link","Logo","PrimaryNavigation","SecondaryNavigation","MenuButton"],"mappings":";;;;;;;;;;MA+BaA,MAAM,gBAAGC,cAAK,CAACC,UAAU,CAA8B,SAASF,MAAM,CAACG,KAAK,EAAEC,GAAG;EAC1F,MAAMC,SAAS,GAAGC,EAAE,CAChB,+DAA+D,EAC/D,sFAAsF;;EACtFH,KAAK,CAACE,SAAS,CAClB;EAED,oBAAOJ,yDAAYE,KAAK;IAAEE,SAAS,EAAEA,SAAS;IAAED,GAAG,EAAEA;KAAO;AAChE,CAAC;AAEDJ,MAAM,CAACO,gBAAgB,GAAGA,gBAAgB;AAC1CP,MAAM,CAACQ,iBAAiB,GAAGA,iBAAiB;AAC5CR,MAAM,CAACS,MAAM,GAAGA,MAAM;AACtBT,MAAM,CAACU,IAAI,GAAGA,IAAI;AAClBV,MAAM,CAACW,IAAI,GAAGA,IAAI;AAClBX,MAAM,CAACY,iBAAiB,GAAGA,iBAAiB;AAC5CZ,MAAM,CAACa,mBAAmB,GAAGA,mBAAmB;AAChDb,MAAM,CAACc,UAAU,GAAGA,UAAU;;;;"}

package/dist/esm/packages/taco/src/components/Header/components/Agreement/Avatar.js

@@ -0,0 +1,28 @@
+import React__default from 'react';
+import cn from 'classnames';
+
+const AgreementAvatar = /*#__PURE__*/React__default.forwardRef(function AgreementAvatar(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,
+    ref: ref
+  }));
+});
+
+export { AgreementAvatar };
+//# sourceMappingURL=Avatar.js.map

package/dist/esm/packages/taco/src/components/Header/components/Agreement/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sources":["../../../../../../../../../src/components/Header/components/Agreement/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nexport type AgreementAvatarProps = React.ImgHTMLAttributes<HTMLImageElement> & { fallbackSrc: string };\n\nexport const AgreementAvatar = React.forwardRef<HTMLImageElement, AgreementAvatarProps>(function AgreementAvatar(props, ref) {\n    const { src, fallbackSrc, ...otherProps } = props;\n    const [loaded, setLoaded] = React.useState(false);\n    const handleLoad = () => setLoaded(true);\n    const handleError = event => {\n        event.target.src = fallbackSrc;\n    };\n\n    const className = cn(\n        'h-9 w-9 rounded-full shrink-0 group-focus:yt-focus-dark xl:group-focus:shadow-none',\n        {\n            visible: loaded,\n        },\n        props.className\n    );\n\n    return <img {...otherProps} className={className} src={src} onLoad={handleLoad} onError={handleError} ref={ref} />;\n});\n"],"names":["AgreementAvatar","React","forwardRef","props","ref","src","fallbackSrc","otherProps","loaded","setLoaded","useState","handleLoad","handleError","event","target","className","cn","visible","onLoad","onError"],"mappings":";;;MAKaA,eAAe,gBAAGC,cAAK,CAACC,UAAU,CAAyC,SAASF,eAAe,CAACG,KAAK,EAAEC,GAAG;EACvH,MAAM;IAAEC,GAAG;IAAEC,WAAW;IAAE,GAAGC;GAAY,GAAGJ,KAAK;EACjD,MAAM,CAACK,MAAM,EAAEC,SAAS,CAAC,GAAGR,cAAK,CAACS,QAAQ,CAAC,KAAK,CAAC;EACjD,MAAMC,UAAU,GAAG,MAAMF,SAAS,CAAC,IAAI,CAAC;EACxC,MAAMG,WAAW,GAAGC,KAAK;IACrBA,KAAK,CAACC,MAAM,CAACT,GAAG,GAAGC,WAAW;GACjC;EAED,MAAMS,SAAS,GAAGC,EAAE,CAChB,oFAAoF,EACpF;IACIC,OAAO,EAAET;GACZ,EACDL,KAAK,CAACY,SAAS,CAClB;EAED,oBAAOd,sDAASM,UAAU;IAAEQ,SAAS,EAAEA,SAAS;IAAEV,GAAG,EAAEA,GAAG;IAAEa,MAAM,EAAEP,UAAU;IAAEQ,OAAO,EAAEP,WAAW;IAAER,GAAG,EAAEA;KAAO;AACtH,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Header/components/Agreement/Badge.js

@@ -0,0 +1,23 @@
+import React__default from 'react';
+import { Badge } from '../../../Badge/Badge.js';
+
+const AgreementBadge = ({
+  agreement,
+  ...props
+}) => {
+  if (agreement.isAdministrator) {
+    return /*#__PURE__*/React__default.createElement(Badge, Object.assign({}, props, {
+      color: "blue",
+      small: true
+    }), "Admin");
+  } else if (agreement.isDeveloper) {
+    return /*#__PURE__*/React__default.createElement(Badge, Object.assign({}, props, {
+      color: "blue",
+      small: true
+    }), "Developer");
+  }
+  return null;
+};
+
+export { AgreementBadge };
+//# sourceMappingURL=Badge.js.map

package/dist/esm/packages/taco/src/components/Header/components/Agreement/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sources":["../../../../../../../../../src/components/Header/components/Agreement/Badge.tsx"],"sourcesContent":["import React from 'react';\nimport { Badge } from '../../../Badge/Badge';\nimport { Agreement } from './types';\n\nexport type AgreementBadgeProps = React.HTMLAttributes<HTMLSpanElement> & {\n    agreement: Agreement;\n};\n\nexport const AgreementBadge = ({ agreement, ...props }: AgreementBadgeProps) => {\n    if (agreement.isAdministrator) {\n        return (\n            <Badge {...props} color=\"blue\" small>\n                Admin\n            </Badge>\n        );\n    } else if (agreement.isDeveloper) {\n        return (\n            <Badge {...props} color=\"blue\" small>\n                Developer\n            </Badge>\n        );\n    }\n\n    return null;\n};\n"],"names":["AgreementBadge","agreement","props","isAdministrator","React","Badge","color","small","isDeveloper"],"mappings":";;;MAQaA,cAAc,GAAG,CAAC;EAAEC,SAAS;EAAE,GAAGC;CAA4B;EACvE,IAAID,SAAS,CAACE,eAAe,EAAE;IAC3B,oBACIC,6BAACC,KAAK,oBAAKH,KAAK;MAAEI,KAAK,EAAC,MAAM;MAACC,KAAK;gBAE5B;GAEf,MAAM,IAAIN,SAAS,CAACO,WAAW,EAAE;IAC9B,oBACIJ,6BAACC,KAAK,oBAAKH,KAAK;MAAEI,KAAK,EAAC,MAAM;MAACC,KAAK;oBAE5B;;EAIhB,OAAO,IAAI;AACf;;;;"}

package/dist/esm/packages/taco/src/components/Header/components/Agreement/Display.js

@@ -0,0 +1,36 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { AgreementAvatar } from './Avatar.js';
+import { AgreementBadge } from './Badge.js';
+import { AgreementItem } from './Item.js';
+import { useMatchMedia } from '../../../../hooks/useMatchMedia.js';
+
+const AgreementDisplay = props => {
+  const {
+    children,
+    currentAgreement,
+    fallbackImageSrc
+  } = props;
+  const isXlScreen = useMatchMedia('(min-width: 1280px)', window.innerWidth > 1280);
+  if (isXlScreen) {
+    const className = cn('h-12 flex-grow xl:[button>&]:hover:bg-white/[0.16]', props.className);
+    return /*#__PURE__*/React__default.createElement(AgreementItem, Object.assign({}, currentAgreement, {
+      children: children,
+      className: className,
+      fallbackImageSrc: fallbackImageSrc
+    }));
+  }
+  return /*#__PURE__*/React__default.createElement("span", {
+    className: "relative flex h-12 flex-grow items-center pr-2"
+  }, /*#__PURE__*/React__default.createElement(AgreementAvatar, {
+    fallbackSrc: fallbackImageSrc,
+    src: currentAgreement.imageSrc,
+    title: `${currentAgreement.name} - ${currentAgreement.number} ${currentAgreement.userId}`
+  }), /*#__PURE__*/React__default.createElement(AgreementBadge, {
+    agreement: currentAgreement,
+    className: "absolute top-0 right-0 -mr-1 w-8 !justify-start"
+  }));
+};
+
+export { AgreementDisplay };
+//# sourceMappingURL=Display.js.map

package/dist/esm/packages/taco/src/components/Header/components/Agreement/Display.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Display.js","sources":["../../../../../../../../../src/components/Header/components/Agreement/Display.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Agreement } from './types';\nimport { AgreementAvatar } from './Avatar';\nimport { AgreementItem } from './Item';\nimport { AgreementBadge } from './Badge';\nimport { useMatchMedia } from '../../../../hooks/useMatchMedia';\n\nexport type AgreementDisplayProps = {\n    children?: JSX.Element | null;\n    className?: string;\n    currentAgreement: Agreement;\n    fallbackImageSrc: string;\n};\n\nexport const AgreementDisplay = (props: AgreementDisplayProps) => {\n    const { children, currentAgreement, fallbackImageSrc } = props;\n    const isXlScreen = useMatchMedia('(min-width: 1280px)', window.innerWidth > 1280);\n\n    if (isXlScreen) {\n        const className = cn('h-12 flex-grow xl:[button>&]:hover:bg-white/[0.16]', props.className);\n        return (\n            <AgreementItem {...currentAgreement} children={children} className={className} fallbackImageSrc={fallbackImageSrc} />\n        );\n    }\n\n    return (\n        <span className=\"relative flex h-12 flex-grow items-center pr-2\">\n            <AgreementAvatar\n                fallbackSrc={fallbackImageSrc}\n                src={currentAgreement.imageSrc}\n                title={`${currentAgreement.name} - ${currentAgreement.number} ${currentAgreement.userId}`}\n            />\n            <AgreementBadge agreement={currentAgreement} className=\"absolute top-0 right-0 -mr-1 w-8 !justify-start\" />\n        </span>\n    );\n};\n"],"names":["AgreementDisplay","props","children","currentAgreement","fallbackImageSrc","isXlScreen","useMatchMedia","window","innerWidth","className","cn","React","AgreementItem","AgreementAvatar","fallbackSrc","src","imageSrc","title","name","number","userId","AgreementBadge","agreement"],"mappings":";;;;;;;MAeaA,gBAAgB,GAAIC,KAA4B;EACzD,MAAM;IAAEC,QAAQ;IAAEC,gBAAgB;IAAEC;GAAkB,GAAGH,KAAK;EAC9D,MAAMI,UAAU,GAAGC,aAAa,CAAC,qBAAqB,EAAEC,MAAM,CAACC,UAAU,GAAG,IAAI,CAAC;EAEjF,IAAIH,UAAU,EAAE;IACZ,MAAMI,SAAS,GAAGC,EAAE,CAAC,oDAAoD,EAAET,KAAK,CAACQ,SAAS,CAAC;IAC3F,oBACIE,6BAACC,aAAa,oBAAKT,gBAAgB;MAAED,QAAQ,EAAEA,QAAQ;MAAEO,SAAS,EAAEA,SAAS;MAAEL,gBAAgB,EAAEA;OAAoB;;EAI7H,oBACIO;IAAMF,SAAS,EAAC;kBACZE,6BAACE,eAAe;IACZC,WAAW,EAAEV,gBAAgB;IAC7BW,GAAG,EAAEZ,gBAAgB,CAACa,QAAQ;IAC9BC,KAAK,KAAKd,gBAAgB,CAACe,UAAUf,gBAAgB,CAACgB,UAAUhB,gBAAgB,CAACiB;IACnF,eACFT,6BAACU,cAAc;IAACC,SAAS,EAAEnB,gBAAgB;IAAEM,SAAS,EAAC;IAAoD,CACxG;AAEf;;;;"}

package/dist/esm/packages/taco/src/components/Header/components/Agreement/Item.js

@@ -0,0 +1,39 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { Icon } from '../../../Icon/Icon.js';
+import { AgreementAvatar } from './Avatar.js';
+import { AgreementBadge } from './Badge.js';
+
+const AgreementItem = props => {
+  const {
+    children,
+    className: customClassName,
+    fallbackImageSrc,
+    ...agreement
+  } = props;
+  const className = cn('w-full rounded flex px-2 gap-2 overflow-hidden text-left items-center', customClassName);
+  return /*#__PURE__*/React__default.createElement("span", {
+    className: className
+  }, /*#__PURE__*/React__default.createElement(AgreementAvatar, {
+    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, " ", /*#__PURE__*/React__default.createElement(AgreementBadge, {
+    agreement: agreement
+  }))), children);
+};
+
+export { AgreementItem };
+//# sourceMappingURL=Item.js.map

package/dist/esm/packages/taco/src/components/Header/components/Agreement/Item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Item.js","sources":["../../../../../../../../../src/components/Header/components/Agreement/Item.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Icon } from '../../../Icon/Icon';\nimport { AgreementAvatar } from './Avatar';\nimport { Agreement } from './types';\nimport { AgreementBadge } from './Badge';\n\nexport type AgreementItemProps = Agreement & {\n    children?: JSX.Element | null;\n    className?: string;\n    fallbackImageSrc: string;\n};\n\nexport const AgreementItem = (props: AgreementItemProps) => {\n    const { children, className: customClassName, fallbackImageSrc, ...agreement } = props;\n    const className = cn('w-full rounded flex px-2 gap-2 overflow-hidden text-left items-center', customClassName);\n\n    return (\n        <span className={className}>\n            <AgreementAvatar\n                fallbackSrc={fallbackImageSrc}\n                src={agreement.imageSrc}\n                title={`${agreement.name} - ${agreement.number} ${agreement.userId}`}\n            />\n            <span className=\"flex flex-col overflow-hidden\">\n                <span className=\"flex truncate text-white\" title={agreement.name}>\n                    <span className=\"truncate\">{agreement.name}</span>{' '}\n                    {agreement.secure ? (\n                        <Icon name=\"secure-tick\" className=\"ml-1 mt-0.5 mb-0.5 !h-4 !w-4 flex-shrink-0 flex-grow-0\" />\n                    ) : null}\n                </span>\n                <span className=\"text-grey-100 whitespace-nowrap text-xs\">\n                    {agreement.number} {agreement.userId} <AgreementBadge agreement={agreement} />\n                </span>\n            </span>\n            {children}\n        </span>\n    );\n};\n"],"names":["AgreementItem","props","children","className","customClassName","fallbackImageSrc","agreement","cn","React","AgreementAvatar","fallbackSrc","src","imageSrc","title","name","number","userId","secure","Icon","AgreementBadge"],"mappings":";;;;;;MAaaA,aAAa,GAAIC,KAAyB;EACnD,MAAM;IAAEC,QAAQ;IAAEC,SAAS,EAAEC,eAAe;IAAEC,gBAAgB;IAAE,GAAGC;GAAW,GAAGL,KAAK;EACtF,MAAME,SAAS,GAAGI,EAAE,CAAC,uEAAuE,EAAEH,eAAe,CAAC;EAE9G,oBACII;IAAML,SAAS,EAAEA;kBACbK,6BAACC,eAAe;IACZC,WAAW,EAAEL,gBAAgB;IAC7BM,GAAG,EAAEL,SAAS,CAACM,QAAQ;IACvBC,KAAK,KAAKP,SAAS,CAACQ,UAAUR,SAAS,CAACS,UAAUT,SAAS,CAACU;IAC9D,eACFR;IAAML,SAAS,EAAC;kBACZK;IAAML,SAAS,EAAC,0BAA0B;IAACU,KAAK,EAAEP,SAAS,CAACQ;kBACxDN;IAAML,SAAS,EAAC;KAAYG,SAAS,CAACQ,IAAI,CAAQ,EAAC,GAAG,EACrDR,SAAS,CAACW,MAAM,gBACbT,6BAACU,IAAI;IAACJ,IAAI,EAAC,aAAa;IAACX,SAAS,EAAC;IAA2D,GAC9F,IAAI,CACL,eACPK;IAAML,SAAS,EAAC;KACXG,SAAS,CAACS,MAAM,OAAGT,SAAS,CAACU,MAAM,oBAAER,6BAACW,cAAc;IAACb,SAAS,EAAEA;IAAa,CAC3E,CACJ,EACNJ,QAAQ,CACN;AAEf;;;;"}

package/dist/esm/packages/taco/src/components/Header/components/AgreementSelector.js

@@ -2,32 +2,23 @@ import React__default from 'react';
 import { Icon } from '../../Icon/Icon.js';
 import { useLocalization } from '../../Provider/Localization.js';
 import { Button } from '../../Button/Button.js';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { Root, Trigger, Content } from '@radix-ui/react-popover';
 import { createCustomKeyboardEvent } from '../../../utils/input.js';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { SearchInput } from '../../SearchInput/SearchInput.js';
 import { Root as Root$1 } from '../../../primitives/Collection/components/Root.js';
 import '../../../primitives/Collection/Collection.js';
-import { AgreementDetails } from './Agreements/AgreementDetails.js';
+import { AgreementItem } from './Agreement/Item.js';
+import { AgreementDisplay as AgreementDisplay$1 } from './Agreement/Display.js';
 
 const Container = 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-2 flex flex-shrink-0 flex-grow-0 items-center gap-2 pr-2 xl:ml-auto xl:w-64",
     "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, 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,
@@ -69,10 +60,10 @@ function AgreementSelector(props) {
     onOpenChange: setOpen
   }, /*#__PURE__*/React__default.createElement(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]",
+  }, /*#__PURE__*/React__default.createElement(AgreementDisplay$1, {
+    currentAgreement: currentAgreement,
     fallbackImageSrc: fallbackImageSrc
-  }), agreements ? /*#__PURE__*/React__default.createElement(Icon, {
+  }, 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(Content, {
@@ -133,11 +124,21 @@ const createAgreementButton = (agreement, fallbackImageSrc, onChangeAgreement, i
     onClick: () => onChangeAgreement(agreement),
     onKeyDown: handleKeyDown,
     tabIndex: 0
-  }, /*#__PURE__*/React__default.createElement(AgreementDetails, Object.assign({}, agreement, {
+  }, /*#__PURE__*/React__default.createElement(AgreementItem, 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
   })));
 };
+function AgreementDisplay(props) {
+  const {
+    currentAgreement,
+    fallbackImageSrc
+  } = props;
+  return /*#__PURE__*/React__default.createElement(Container, null, /*#__PURE__*/React__default.createElement(AgreementDisplay$1, {
+    currentAgreement: currentAgreement,
+    fallbackImageSrc: fallbackImageSrc
+  }));
+}
 
 export { AgreementDisplay, AgreementSelector };
 //# sourceMappingURL=AgreementSelector.js.map

package/dist/esm/packages/taco/src/components/Header/components/AgreementSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"AgreementSelector.js","sources":["../../../../../../../../src/components/Header/components/AgreementSelector.tsx"],"sourcesContent":["import React from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport * as CollectionPrimitive from '../../../primitives/Collection/Collection';\nimport { Agreement, AgreementDetails } from './Agreements/AgreementDetails';\nimport { createCustomKeyboardEvent } from '../../../utils/input';\nimport { Icon } from '../../Icon/Icon';\nimport { SearchInput } from '../../SearchInput/SearchInput';\nimport { Button } from '../../Button/Button';\nimport { useLocalization } from '../../Provider/Localization';\n\nconst Container = props => {\n    return (\n        <div\n            className=\"-ml-3 flex flex-shrink-0 flex-grow-0 items-center gap-2 xl:ml-auto xl:w-64 xl:pr-2\"\n            data-taco=\"header-agreements\">\n            <span className=\"hidden h-8 w-px flex-shrink-0 flex-grow-0 bg-white/[0.3] xl:flex\" />\n            {props.children}\n        </div>\n    );\n};\n\nexport type AgreementDisplayProps = React.HTMLAttributes<HTMLDivElement> & {\n    currentAgreement: Agreement;\n    fallbackImageSrc: string;\n};\n\nexport function AgreementDisplay(props: AgreementDisplayProps) {\n    const { currentAgreement, fallbackImageSrc } = props;\n\n    return (\n        <Container>\n            <AgreementDetails\n                {...currentAgreement}\n                className=\"h-12 [&>span>span]:hidden xl:[&>span>span]:flex \"\n                fallbackImageSrc={fallbackImageSrc}\n            />\n        </Container>\n    );\n}\n\nexport type AgreementSelectorProps = AgreementDisplayProps & {\n    agreements: Agreement[];\n    filterAgreement: (agreement: Agreement, filter: (agreement: Agreement) => boolean) => void;\n    filterClientAgreement: (agreement: Agreement, filter: (agreement: Agreement) => boolean) => void;\n    onAddAgreement?: () => void;\n    onChangeAgreement: (agreement: Agreement) => void;\n    onLogout: () => void;\n    open?: boolean;\n    setOpen?: (open: boolean) => void;\n};\n\nexport function AgreementSelector(props: AgreementSelectorProps) {\n    const {\n        agreements,\n        currentAgreement,\n        fallbackImageSrc,\n        filterAgreement = () => true,\n        filterClientAgreement = () => true,\n        onAddAgreement: handleAddAgreement,\n        onChangeAgreement,\n        onLogout: handleLogout,\n        open: prop,\n        setOpen: onChange,\n    } = props;\n    const { texts } = useLocalization();\n    const collectionRef = React.useRef<CollectionPrimitive.CollectionRef | null>(null);\n    const [open, setOpen] = useControllableState<boolean>({\n        onChange,\n        prop,\n    });\n    const [search, setSearch] = React.useState('');\n\n    React.useEffect(() => {\n        setSearch('');\n    }, [open]);\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter') {\n            event.preventDefault();\n            collectionRef.current?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n        }\n    };\n\n    const handleChangeAgreement = (agreement: Agreement) => {\n        onChangeAgreement(agreement);\n        setOpen(false);\n    };\n\n    return (\n        <Container>\n            <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n                <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\">\n                    <AgreementDetails\n                        {...currentAgreement}\n                        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]\"\n                        fallbackImageSrc={fallbackImageSrc}>\n                        {agreements ? (\n                            <Icon\n                                className=\"ml-auto hidden flex-shrink-0 flex-grow-0 text-white xl:flex\"\n                                name={open ? 'chevron-up' : 'chevron-down'}\n                            />\n                        ) : null}\n                    </AgreementDetails>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Content className=\"z-[996] mt-2 flex h-[calc(100vh_-_theme(spacing.16))] w-64 flex-col gap-1 bg-blue-900\">\n                    <SearchInput\n                        autoFocus\n                        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\"\n                        onChange={event => setSearch(event.target.value)}\n                        onKeyDown={handleKeyDown}\n                        placeholder={texts.header.search}\n                    />\n                    <CollectionPrimitive.Root\n                        querySelector=\"button\"\n                        className=\"-my-1 flex w-full flex-grow flex-col gap-1 overflow-auto px-2 py-1 outline-none\"\n                        ref={collectionRef}\n                        tabIndex={-1}>\n                        {agreements\n                            ?.filter(agreement => filterAgreement(agreement, filterBySearchValue(search)))\n                            .map(agreement => {\n                                const button = createAgreementButton(\n                                    agreement,\n                                    fallbackImageSrc,\n                                    handleChangeAgreement,\n                                    isCurrentAgreement(agreement, currentAgreement)\n                                );\n\n                                if (agreement.clients) {\n                                    return (\n                                        <span\n                                            className=\"flex flex-col gap-px [&>*:first-child>span]:!rounded-t [&>*:last-child>span]:!rounded-b [&>*>span]:!rounded-none\"\n                                            key={`${agreement.number}_${agreement.userId}_clients`}>\n                                            {filterBySearchValue(search)(agreement) ? button : null}\n                                            {agreement.clients\n                                                .filter(agreement =>\n                                                    filterClientAgreement(agreement, filterBySearchValue(search))\n                                                )\n                                                .map(clientAgreement =>\n                                                    createAgreementButton(\n                                                        clientAgreement,\n                                                        fallbackImageSrc,\n                                                        handleChangeAgreement,\n                                                        isCurrentAgreement(clientAgreement, currentAgreement)\n                                                    )\n                                                )}\n                                        </span>\n                                    );\n                                }\n\n                                return button;\n                            })}\n                    </CollectionPrimitive.Root>\n                    {handleAddAgreement ? (\n                        <Button\n                            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]\"\n                            onClick={handleAddAgreement}>\n                            {texts.header.addAgreement}\n                        </Button>\n                    ) : null}\n                    <hr className=\"my-0 h-px w-full bg-white/[0.08]\" />\n                    <a\n                        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\"\n                        onClick={handleLogout}\n                        tabIndex={0}>\n                        {texts.header.logout}\n                    </a>\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive.Root>\n        </Container>\n    );\n}\n\nconst filterBySearchValue = (search: string) => (agreement: Agreement) => {\n    if (!search || !search.length) {\n        return true;\n    }\n\n    const matchesAgreementNumber = String(agreement.number).indexOf(search) > -1;\n    const matchesCompanyName = agreement.name.toLowerCase().indexOf(search.toLowerCase()) > -1;\n\n    return matchesAgreementNumber || matchesCompanyName;\n};\n\nconst isCurrentAgreement = (agreement: Agreement, currentAgreement: Agreement) => {\n    return agreement.number === currentAgreement.number && agreement.userId === currentAgreement.userId;\n};\n\nconst createAgreementButton = (\n    agreement: Agreement,\n    fallbackImageSrc: string,\n    onChangeAgreement: (agreement: Agreement) => void,\n    isCurrentAgreement = false\n) => {\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (event.key === 'Enter') {\n            onChangeAgreement(agreement);\n        }\n    };\n\n    return (\n        <button\n            aria-current={isCurrentAgreement ? 'true' : undefined}\n            className=\"focus:yt-focus-dark w-full rounded outline-none\"\n            data-taco=\"header-agreements-agreement\"\n            key={`${agreement.number}_${agreement.userId}`}\n            onClick={() => onChangeAgreement(agreement)}\n            onKeyDown={handleKeyDown}\n            tabIndex={0}>\n            <AgreementDetails\n                {...agreement}\n                className=\"h-14 bg-white/[0.08] xl:hover:bg-white/[0.16] [[aria-current='true']>&]:bg-white/[0.16]\"\n                fallbackImageSrc={fallbackImageSrc}\n            />\n        </button>\n    );\n};\n"],"names":["Container","props","React","className","children","AgreementDisplay","currentAgreement","fallbackImageSrc","AgreementDetails","AgreementSelector","agreements","filterAgreement","filterClientAgreement","onAddAgreement","handleAddAgreement","onChangeAgreement","onLogout","handleLogout","open","prop","setOpen","onChange","texts","useLocalization","collectionRef","useRef","useControllableState","search","setSearch","useState","useEffect","handleKeyDown","event","key","preventDefault","current","dispatchEvent","createCustomKeyboardEvent","handleChangeAgreement","agreement","PopoverPrimitive","onOpenChange","Icon","name","SearchInput","autoFocus","target","value","onKeyDown","placeholder","header","CollectionPrimitive","querySelector","ref","tabIndex","filter","filterBySearchValue","map","button","createAgreementButton","isCurrentAgreement","clients","number","userId","clientAgreement","Button","onClick","addAgreement","logout","length","matchesAgreementNumber","String","indexOf","matchesCompanyName","toLowerCase","undefined"],"mappings":"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"}
+{"version":3,"file":"AgreementSelector.js","sources":["../../../../../../../../src/components/Header/components/AgreementSelector.tsx"],"sourcesContent":["import React from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport * as CollectionPrimitive from '../../../primitives/Collection/Collection';\nimport { AgreementItem } from './Agreement/Item';\nimport { createCustomKeyboardEvent } from '../../../utils/input';\nimport { Icon } from '../../Icon/Icon';\nimport { SearchInput } from '../../SearchInput/SearchInput';\nimport { Button } from '../../Button/Button';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Agreement } from './Agreement/types';\nimport { AgreementDisplay as Display } from './Agreement/Display';\n\nconst Container = props => {\n    return (\n        <div\n            className=\"-ml-2 flex flex-shrink-0 flex-grow-0 items-center gap-2 pr-2 xl:ml-auto xl:w-64\"\n            data-taco=\"header-agreements\">\n            <span className=\"hidden h-8 w-px flex-shrink-0 flex-grow-0 bg-white/[0.3] xl:flex\" />\n            {props.children}\n        </div>\n    );\n};\n\nexport type AgreementSelectorProps = {\n    agreements: Agreement[];\n    currentAgreement: Agreement;\n    fallbackImageSrc: string;\n    filterAgreement: (agreement: Agreement, filter: (agreement: Agreement) => boolean) => void;\n    filterClientAgreement: (agreement: Agreement, filter: (agreement: Agreement) => boolean) => void;\n    onAddAgreement?: () => void;\n    onChangeAgreement: (agreement: Agreement) => void;\n    onLogout: () => void;\n    open?: boolean;\n    setOpen?: (open: boolean) => void;\n};\n\nexport function AgreementSelector(props: AgreementSelectorProps) {\n    const {\n        agreements,\n        currentAgreement,\n        fallbackImageSrc,\n        filterAgreement = () => true,\n        filterClientAgreement = () => true,\n        onAddAgreement: handleAddAgreement,\n        onChangeAgreement,\n        onLogout: handleLogout,\n        open: prop,\n        setOpen: onChange,\n    } = props;\n    const { texts } = useLocalization();\n    const collectionRef = React.useRef<CollectionPrimitive.CollectionRef | null>(null);\n    const [open, setOpen] = useControllableState<boolean>({\n        onChange,\n        prop,\n    });\n    const [search, setSearch] = React.useState('');\n\n    React.useEffect(() => {\n        setSearch('');\n    }, [open]);\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter') {\n            event.preventDefault();\n            collectionRef.current?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n        }\n    };\n\n    const handleChangeAgreement = (agreement: Agreement) => {\n        onChangeAgreement(agreement);\n        setOpen(false);\n    };\n\n    return (\n        <Container>\n            <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n                <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\">\n                    <Display currentAgreement={currentAgreement} fallbackImageSrc={fallbackImageSrc}>\n                        {agreements ? (\n                            <Icon\n                                className=\"ml-auto hidden flex-shrink-0 flex-grow-0 text-white xl:flex\"\n                                name={open ? 'chevron-up' : 'chevron-down'}\n                            />\n                        ) : null}\n                    </Display>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Content className=\"z-[996] mt-2 flex h-[calc(100vh_-_theme(spacing.16))] w-64 flex-col gap-1 bg-blue-900\">\n                    <SearchInput\n                        autoFocus\n                        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\"\n                        onChange={event => setSearch(event.target.value)}\n                        onKeyDown={handleKeyDown}\n                        placeholder={texts.header.search}\n                    />\n                    <CollectionPrimitive.Root\n                        querySelector=\"button\"\n                        className=\"-my-1 flex w-full flex-grow flex-col gap-1 overflow-auto px-2 py-1 outline-none\"\n                        ref={collectionRef}\n                        tabIndex={-1}>\n                        {agreements\n                            ?.filter(agreement => filterAgreement(agreement, filterBySearchValue(search)))\n                            .map(agreement => {\n                                const button = createAgreementButton(\n                                    agreement,\n                                    fallbackImageSrc,\n                                    handleChangeAgreement,\n                                    isCurrentAgreement(agreement, currentAgreement)\n                                );\n\n                                if (agreement.clients) {\n                                    return (\n                                        <span\n                                            className=\"flex flex-col gap-px [&>*:first-child>span]:!rounded-t [&>*:last-child>span]:!rounded-b [&>*>span]:!rounded-none\"\n                                            key={`${agreement.number}_${agreement.userId}_clients`}>\n                                            {filterBySearchValue(search)(agreement) ? button : null}\n                                            {agreement.clients\n                                                .filter(agreement =>\n                                                    filterClientAgreement(agreement, filterBySearchValue(search))\n                                                )\n                                                .map(clientAgreement =>\n                                                    createAgreementButton(\n                                                        clientAgreement,\n                                                        fallbackImageSrc,\n                                                        handleChangeAgreement,\n                                                        isCurrentAgreement(clientAgreement, currentAgreement)\n                                                    )\n                                                )}\n                                        </span>\n                                    );\n                                }\n\n                                return button;\n                            })}\n                    </CollectionPrimitive.Root>\n                    {handleAddAgreement ? (\n                        <Button\n                            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]\"\n                            onClick={handleAddAgreement}>\n                            {texts.header.addAgreement}\n                        </Button>\n                    ) : null}\n                    <hr className=\"my-0 h-px w-full bg-white/[0.08]\" />\n                    <a\n                        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\"\n                        onClick={handleLogout}\n                        tabIndex={0}>\n                        {texts.header.logout}\n                    </a>\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive.Root>\n        </Container>\n    );\n}\n\nconst filterBySearchValue = (search: string) => (agreement: Agreement) => {\n    if (!search || !search.length) {\n        return true;\n    }\n\n    const matchesAgreementNumber = String(agreement.number).indexOf(search) > -1;\n    const matchesCompanyName = agreement.name.toLowerCase().indexOf(search.toLowerCase()) > -1;\n\n    return matchesAgreementNumber || matchesCompanyName;\n};\n\nconst isCurrentAgreement = (agreement: Agreement, currentAgreement: Agreement) => {\n    return agreement.number === currentAgreement.number && agreement.userId === currentAgreement.userId;\n};\n\nconst createAgreementButton = (\n    agreement: Agreement,\n    fallbackImageSrc: string,\n    onChangeAgreement: (agreement: Agreement) => void,\n    isCurrentAgreement = false\n) => {\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (event.key === 'Enter') {\n            onChangeAgreement(agreement);\n        }\n    };\n\n    return (\n        <button\n            aria-current={isCurrentAgreement ? 'true' : undefined}\n            className=\"focus:yt-focus-dark w-full rounded outline-none\"\n            data-taco=\"header-agreements-agreement\"\n            key={`${agreement.number}_${agreement.userId}`}\n            onClick={() => onChangeAgreement(agreement)}\n            onKeyDown={handleKeyDown}\n            tabIndex={0}>\n            <AgreementItem\n                {...agreement}\n                className=\"h-14 bg-white/[0.08] xl:hover:bg-white/[0.16] [[aria-current='true']>&]:bg-white/[0.16]\"\n                fallbackImageSrc={fallbackImageSrc}\n            />\n        </button>\n    );\n};\n\nexport type AgreementDisplayProps = React.HTMLAttributes<HTMLDivElement> & {\n    currentAgreement: Agreement;\n    fallbackImageSrc: string;\n};\n\nexport function AgreementDisplay(props: AgreementDisplayProps) {\n    const { currentAgreement, fallbackImageSrc } = props;\n\n    return (\n        <Container>\n            <Display currentAgreement={currentAgreement} fallbackImageSrc={fallbackImageSrc} />\n        </Container>\n    );\n}\n"],"names":["Container","props","React","className","children","AgreementSelector","agreements","currentAgreement","fallbackImageSrc","filterAgreement","filterClientAgreement","onAddAgreement","handleAddAgreement","onChangeAgreement","onLogout","handleLogout","open","prop","setOpen","onChange","texts","useLocalization","collectionRef","useRef","useControllableState","search","setSearch","useState","useEffect","handleKeyDown","event","key","preventDefault","current","dispatchEvent","createCustomKeyboardEvent","handleChangeAgreement","agreement","PopoverPrimitive","onOpenChange","Display","Icon","name","SearchInput","autoFocus","target","value","onKeyDown","placeholder","header","CollectionPrimitive","querySelector","ref","tabIndex","filter","filterBySearchValue","map","button","createAgreementButton","isCurrentAgreement","clients","number","userId","clientAgreement","Button","onClick","addAgreement","logout","length","matchesAgreementNumber","String","indexOf","matchesCompanyName","toLowerCase","undefined","AgreementItem","AgreementDisplay"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Header/components/PrimaryNavigation.js

@@ -2,17 +2,18 @@ import React__default from 'react';
 import cn from 'classnames';
 import { useLocalization } from '../../Provider/Localization.js';
 import { Button } from '../../Button/Button.js';
-import { useBoundingClientRectListener } from '../../../hooks/useBoundingClientRectListener.js';
 import { useMergedRef } from '../../../hooks/useMergedRef.js';
 import { Menu } from '../../Menu/Menu.js';
+import { useBoundingClientRectListener } from '../../../hooks/useBoundingClientRectListener.js';
 import { getLinkClasses } from './Link.js';
 import { Portal } from '@radix-ui/react-portal';
 
 const getChildWidths = parent => {
   const widths = [];
   for (let index = 0; index < parent.children.length; index++) {
-    const childRect = parent.children[index].getBoundingClientRect();
-    widths.push(childRect.width);
+    var _parent$children$inde, _childRect$width;
+    const childRect = (_parent$children$inde = parent.children[index].firstElementChild) === null || _parent$children$inde === void 0 ? void 0 : _parent$children$inde.getBoundingClientRect();
+    widths.push((_childRect$width = childRect === null || childRect === void 0 ? void 0 : childRect.width) !== null && _childRect$width !== void 0 ? _childRect$width : 0);
   }
   return widths;
 };