@economic/taco 10.0.1-improve-publish-scripts.0 → 10.0.1-react-19.0

package/dist/components/Hanger/Hanger.js.map

@@ -1 +1 @@
-{"version":3,"file":"Hanger.js","sources":["../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { Placement } from '../..';\nimport { UnstyledArrow } from './Arrow';\nimport { useLocalization } from '../Provider/Localization';\nimport { mergeRefs } from '../../utils/mergeRefs';\nimport './Hanger.css';\n\ntype HangerContextValue = {\n    /** Handler called when hanger closes by user interaction */\n    onClose?: () => void;\n    anchorRef: React.RefObject<HTMLElement>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n    anchorRef: { current: null },\n    onClose: undefined,\n});\n\nexport type HangerTexts = {\n    /** Aria-label for the close icon button of hanger */\n    close: string;\n};\n\nexport type HangerAnchorProps = React.PropsWithChildren;\n// `Hanger.Anchor` is a pure pass-through that renders its child untouched. It exists only to keep\n// the composable API (<Hanger.Anchor>…</Hanger.Anchor>) — the Hanger root owns the single DOM\n// wrapper that serves as the positioning anchor, so this adds no DOM and needs no ref.\nconst Anchor: React.FC<HangerAnchorProps> = ({ children }) => <>{children}</>;\n\nexport type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: HangerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('mb-1 text-base font-bold flex w-full', props.className);\n    return <span {...props} className={className} ref={ref} />;\n});\n\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\n    placement?: Placement;\n    hideWhenDetached?: boolean;\n    container?: HTMLElement | null;\n};\n\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side, hideWhenDetached = false, container, ...popoverContentProps } = props;\n    const context = React.useContext(HangerContext);\n    const { texts } = useLocalization();\n    const className = cn(\n        'wcag-blue-500 border border-transparent rounded p-3 pr-12 yt-shadow focus:border-transparent max-w-sm print:hidden',\n        props.className\n    );\n\n    return (\n        <PopoverPrimitive.Portal container={container}>\n            <PopoverPrimitive.Positioner\n                anchor={context.anchorRef}\n                className={hideWhenDetached ? 'data-[anchor-hidden]:hidden' : undefined}\n                side={side}\n                sideOffset={11}>\n                <PopoverPrimitive.Popup {...popoverContentProps} className={className} data-taco=\"hanger\" ref={ref}>\n                    {props.children}\n                    <UnstyledArrow className=\"text-blue-500\" />\n                    <PopoverPrimitive.Close\n                        render={\n                            <LegacyIconButton\n                                appearance=\"primary\"\n                                aria-label={texts.hanger.close}\n                                className=\"absolute right-0 top-0 mx-2 mt-2 text-white\"\n                                icon=\"close\"\n                                onClick={context.onClose}\n                            />\n                        }\n                    />\n                </PopoverPrimitive.Popup>\n            </PopoverPrimitive.Positioner>\n        </PopoverPrimitive.Portal>\n    );\n});\n\nexport type HangerProps = React.PropsWithChildren<{\n    /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\n    anchor?: JSX.Element;\n    /**\n     * Shows or hides hanger depending on the value\n     * @defaultValue true\n     */\n    defaultOpen?: boolean;\n    /** Handler called when user closes the hanger */\n    onClose?: () => void;\n}>;\n\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\n    Anchor: React.FC<HangerAnchorProps>;\n    Content: React.ForwardRefExoticComponent<HangerContentProps>;\n    Title: React.ForwardRefExoticComponent<HangerTitleProps>;\n};\n\nexport const Hanger = React.forwardRef<HTMLSpanElement, HangerProps>(function Hanger(props, ref) {\n    const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;\n    const anchorRef = React.useRef<HTMLElement>(null);\n    const combinedRef = mergeRefs([anchorRef as React.MutableRefObject<HTMLElement | null>, ref]);\n    const context = React.useMemo(() => ({ anchorRef, onClose }), [onClose]);\n\n    // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\n    const [open, setOpen] = React.useState(false);\n    React.useEffect(() => {\n        if (defaultOpen) {\n            setOpen(defaultOpen);\n        }\n    }, []);\n\n    // Hanger should only close from its close button, matching the previous Radix onInteractOutside behavior.\n    const handleOpenChange = (nextOpen: boolean, eventDetails: PopoverPrimitive.Root.ChangeEventDetails) => {\n        if (!nextOpen && (eventDetails.reason === 'outside-press' || eventDetails.reason === 'focus-out')) {\n            eventDetails.cancel();\n            return;\n        }\n\n        setOpen(nextOpen);\n    };\n\n    // Single inline <span> wrapper: serves as the Floating UI anchor (its rect matches the\n    // in-flow trigger child) and contains the FloatingFocusManager guard spans Base UI injects\n    // when open, so they aren't siblings of the Hanger in parent IntersectionObservers\n    // (e.g. OverflowGroup's) and don't get counted as overflowed children.\n    return (\n        <HangerContext.Provider value={context}>\n            <span {...otherProps} ref={combinedRef as React.Ref<HTMLSpanElement>}>\n                <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>\n                    {/* Anchor via the `anchor` prop. */}\n                    {anchor}\n                    {/* Composition (<Hanger.Anchor>) and the popup Content (portaled out) come through {children}. */}\n                    {children}\n                </PopoverPrimitive.Root>\n            </span>\n        </HangerContext.Provider>\n    );\n}) as ForwardedHangerWithStatics;\nHanger.Anchor = Anchor;\nHanger.Content = Content;\nHanger.Title = Title;\n"],"names":["PopoverPrimitive","Hanger"],"mappings":";;;;;;;;AAgBA,MAAM,gBAAgB,MAAM,cAAkC;AAAA,EAC1D,WAAW,EAAE,SAAS,KAAK;AAAA,EAC3B,SAAS;AACb,CAAC;AAWD,MAAM,SAAsC,CAAC,EAAE,SAAS,gEAAS,QAAS;AAGnE,MAAM,QAAQ,MAAM,WAAW,SAAS,YAAY,OAAyB,KAAoC;AACpH,QAAM,YAAY,GAAG,wCAAwC,MAAM,SAAS;AAC5E,SAAQ,sBAAA,cAAA,QAAA,EAAM,GAAG,OAAO,WAAsB,KAAU;AAC5D,CAAC;AASD,MAAM,UAAU,MAAM,WAAW,SAAS,cAAc,OAA2B,KAAgC;AACzG,QAAA,EAAE,WAAW,MAAM,mBAAmB,OAAO,WAAW,GAAG,wBAAwB;AACnF,QAAA,UAAU,MAAM,WAAW,aAAa;AACxC,QAAA,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EACV;AAEA,SACK,sBAAA,cAAAA,QAAiB,QAAjB,EAAwB,UACrB,GAAA,sBAAA;AAAA,IAACA,QAAiB;AAAA,IAAjB;AAAA,MACG,QAAQ,QAAQ;AAAA,MAChB,WAAW,mBAAmB,gCAAgC;AAAA,MAC9D;AAAA,MACA,YAAY;AAAA,IAAA;AAAA,wCACXA,QAAiB,OAAjB,EAAwB,GAAG,qBAAqB,WAAsB,aAAU,UAAS,IAAA,GACrF,MAAM,UACP,sBAAA,cAAC,eAAc,EAAA,WAAU,iBAAgB,GACzC,sBAAA;AAAA,MAACA,QAAiB;AAAA,MAAjB;AAAA,QACG,QACI,sBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,YAAW;AAAA,YACX,cAAY,MAAM,OAAO;AAAA,YACzB,WAAU;AAAA,YACV,MAAK;AAAA,YACL,SAAS,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,MACrB;AAAA,IAGZ,CAAA;AAAA,EAAA,CAER;AAER,CAAC;AAoBM,MAAM,SAAS,MAAM,WAAyC,SAASC,QAAO,OAAO,KAAK;AACvF,QAAA,EAAE,QAAQ,UAAU,cAAc,MAAM,SAAS,GAAG,eAAe;AACnE,QAAA,YAAY,MAAM,OAAoB,IAAI;AAChD,QAAM,cAAc,UAAU,CAAC,WAAyD,GAAG,CAAC;AACtF,QAAA,UAAU,MAAM,QAAQ,OAAO,EAAE,WAAW,QAAQ,IAAI,CAAC,OAAO,CAAC;AAGvE,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAC5C,QAAM,UAAU,MAAM;AAClB,QAAI,aAAa;AACb,cAAQ,WAAW;AAAA,IAAA;AAAA,EAE3B,GAAG,EAAE;AAGC,QAAA,mBAAmB,CAAC,UAAmB,iBAA2D;AACpG,QAAI,CAAC,aAAa,aAAa,WAAW,mBAAmB,aAAa,WAAW,cAAc;AAC/F,mBAAa,OAAO;AACpB;AAAA,IAAA;AAGJ,YAAQ,QAAQ;AAAA,EACpB;AAOI,SAAA,sBAAA,cAAC,cAAc,UAAd,EAAuB,OAAO,QAC3B,GAAA,sBAAA,cAAC,QAAM,EAAA,GAAG,YAAY,KAAK,eACtB,sBAAA,cAAAD,QAAiB,MAAjB,EAAsB,MAAY,cAAc,iBAE5C,GAAA,QAEA,QACL,CACJ,CACJ;AAER,CAAC;AACD,OAAO,SAAS;AAChB,OAAO,UAAU;AACjB,OAAO,QAAQ;"}
+{"version":3,"file":"Hanger.js","sources":["../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { Placement } from '../..';\nimport { UnstyledArrow } from './Arrow';\nimport { useLocalization } from '../Provider/Localization';\nimport { mergeRefs } from '../../utils/mergeRefs';\nimport './Hanger.css';\n\ntype HangerContextValue = {\n    /** Handler called when hanger closes by user interaction */\n    onClose?: () => void;\n    anchorRef: React.RefObject<HTMLElement | null>;\n};\nconst HangerContext = React.createContext<HangerContextValue>({\n    anchorRef: { current: null },\n    onClose: undefined,\n});\n\nexport type HangerTexts = {\n    /** Aria-label for the close icon button of hanger */\n    close: string;\n};\n\nexport type HangerAnchorProps = React.PropsWithChildren;\n// `Hanger.Anchor` is a pure pass-through that renders its child untouched. It exists only to keep\n// the composable API (<Hanger.Anchor>…</Hanger.Anchor>) — the Hanger root owns the single DOM\n// wrapper that serves as the positioning anchor, so this adds no DOM and needs no ref.\nconst Anchor: React.FC<HangerAnchorProps> = ({ children }) => <>{children}</>;\n\nexport type HangerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DialogTitle(props: HangerTitleProps, ref: React.Ref<HTMLHeadingElement>) {\n    const className = cn('mb-1 flex w-full text-base font-bold', props.className);\n    return <span {...props} className={className} ref={ref} />;\n});\n\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\n    placement?: Placement;\n    hideWhenDetached?: boolean;\n    container?: HTMLElement | null;\n};\n\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side, hideWhenDetached = false, container, ...popoverContentProps } = props;\n    const context = React.useContext(HangerContext);\n    const { texts } = useLocalization();\n    const className = cn(\n        'max-w-sm rounded border border-transparent p-3 pr-12 wcag-blue-500 yt-shadow focus:border-transparent print:hidden',\n        props.className\n    );\n\n    return (\n        <PopoverPrimitive.Portal container={container}>\n            <PopoverPrimitive.Positioner\n                anchor={context.anchorRef}\n                className={hideWhenDetached ? 'data-[anchor-hidden]:hidden' : undefined}\n                side={side}\n                sideOffset={11}>\n                <PopoverPrimitive.Popup {...popoverContentProps} className={className} data-taco=\"hanger\" ref={ref}>\n                    {props.children}\n                    <UnstyledArrow className=\"text-blue-500\" />\n                    <PopoverPrimitive.Close\n                        render={\n                            <LegacyIconButton\n                                appearance=\"primary\"\n                                aria-label={texts.hanger.close}\n                                className=\"absolute right-0 top-0 mx-2 mt-2 text-white\"\n                                icon=\"close\"\n                                onClick={context.onClose}\n                            />\n                        }\n                    />\n                </PopoverPrimitive.Popup>\n            </PopoverPrimitive.Positioner>\n        </PopoverPrimitive.Portal>\n    );\n});\n\nexport type HangerProps = React.PropsWithChildren<{\n    /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\n    anchor?: React.JSX.Element;\n    /**\n     * Shows or hides hanger depending on the value\n     * @defaultValue true\n     */\n    defaultOpen?: boolean;\n    /** Handler called when user closes the hanger */\n    onClose?: () => void;\n}>;\n\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\n    Anchor: React.FC<HangerAnchorProps>;\n    Content: React.ForwardRefExoticComponent<HangerContentProps>;\n    Title: React.ForwardRefExoticComponent<HangerTitleProps>;\n};\n\nexport const Hanger = React.forwardRef<HTMLSpanElement, HangerProps>(function Hanger(props, ref) {\n    const { anchor, children, defaultOpen = true, onClose, ...otherProps } = props;\n    const anchorRef = React.useRef<HTMLElement>(null);\n    const combinedRef = mergeRefs([anchorRef as React.MutableRefObject<HTMLElement | null>, ref]);\n    const context = React.useMemo(() => ({ anchorRef, onClose }), [onClose]);\n\n    // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\n    const [open, setOpen] = React.useState(false);\n    React.useEffect(() => {\n        if (defaultOpen) {\n            setOpen(defaultOpen);\n        }\n    }, []);\n\n    // Hanger should only close from its close button, matching the previous Radix onInteractOutside behavior.\n    const handleOpenChange = (nextOpen: boolean, eventDetails: PopoverPrimitive.Root.ChangeEventDetails) => {\n        if (!nextOpen && (eventDetails.reason === 'outside-press' || eventDetails.reason === 'focus-out')) {\n            eventDetails.cancel();\n            return;\n        }\n\n        setOpen(nextOpen);\n    };\n\n    // Single inline <span> wrapper: serves as the Floating UI anchor (its rect matches the\n    // in-flow trigger child) and contains the FloatingFocusManager guard spans Base UI injects\n    // when open, so they aren't siblings of the Hanger in parent IntersectionObservers\n    // (e.g. OverflowGroup's) and don't get counted as overflowed children.\n    return (\n        <HangerContext.Provider value={context}>\n            <span {...otherProps} ref={combinedRef as React.Ref<HTMLSpanElement>}>\n                <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>\n                    {/* Anchor via the `anchor` prop. */}\n                    {anchor}\n                    {/* Composition (<Hanger.Anchor>) and the popup Content (portaled out) come through {children}. */}\n                    {children}\n                </PopoverPrimitive.Root>\n            </span>\n        </HangerContext.Provider>\n    );\n}) as ForwardedHangerWithStatics;\nHanger.Anchor = Anchor;\nHanger.Content = Content;\nHanger.Title = Title;\n"],"names":["PopoverPrimitive","Hanger"],"mappings":";;;;;;;;AAgBA,MAAM,gBAAgB,MAAM,cAAkC;AAAA,EAC1D,WAAW,EAAE,SAAS,KAAA;AAAA,EACtB,SAAS;AACb,CAAC;AAWD,MAAM,SAAsC,CAAC,EAAE,SAAA,gEAAkB,QAAS;AAGnE,MAAM,QAAQ,MAAM,WAAW,SAAS,YAAY,OAAyB,KAAoC;AACpH,QAAM,YAAY,GAAG,wCAAwC,MAAM,SAAS;AAC5E,SAAO,sBAAA,cAAC,QAAA,EAAM,GAAG,OAAO,WAAsB,KAAU;AAC5D,CAAC;AASD,MAAM,UAAU,MAAM,WAAW,SAAS,cAAc,OAA2B,KAAgC;AAC/G,QAAM,EAAE,WAAW,MAAM,mBAAmB,OAAO,WAAW,GAAG,wBAAwB;AACzF,QAAM,UAAU,MAAM,WAAW,aAAa;AAC9C,QAAM,EAAE,MAAA,IAAU,gBAAA;AAClB,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EAAA;AAGV,SACI,sBAAA,cAACA,QAAiB,QAAjB,EAAwB,UAAA,GACrB,sBAAA;AAAA,IAACA,QAAiB;AAAA,IAAjB;AAAA,MACG,QAAQ,QAAQ;AAAA,MAChB,WAAW,mBAAmB,gCAAgC;AAAA,MAC9D;AAAA,MACA,YAAY;AAAA,IAAA;AAAA,wCACXA,QAAiB,OAAjB,EAAwB,GAAG,qBAAqB,WAAsB,aAAU,UAAS,IAAA,GACrF,MAAM,UACP,sBAAA,cAAC,eAAA,EAAc,WAAU,iBAAgB,GACzC,sBAAA;AAAA,MAACA,QAAiB;AAAA,MAAjB;AAAA,QACG,QACI,sBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,YAAW;AAAA,YACX,cAAY,MAAM,OAAO;AAAA,YACzB,WAAU;AAAA,YACV,MAAK;AAAA,YACL,SAAS,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,MACrB;AAAA,IAAA,CAGZ;AAAA,EAAA,CAER;AAER,CAAC;AAoBM,MAAM,SAAS,MAAM,WAAyC,SAASC,QAAO,OAAO,KAAK;AAC7F,QAAM,EAAE,QAAQ,UAAU,cAAc,MAAM,SAAS,GAAG,eAAe;AACzE,QAAM,YAAY,MAAM,OAAoB,IAAI;AAChD,QAAM,cAAc,UAAU,CAAC,WAAyD,GAAG,CAAC;AAC5F,QAAM,UAAU,MAAM,QAAQ,OAAO,EAAE,WAAW,QAAA,IAAY,CAAC,OAAO,CAAC;AAGvE,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAC5C,QAAM,UAAU,MAAM;AAClB,QAAI,aAAa;AACb,cAAQ,WAAW;AAAA,IACvB;AAAA,EACJ,GAAG,CAAA,CAAE;AAGL,QAAM,mBAAmB,CAAC,UAAmB,iBAA2D;AACpG,QAAI,CAAC,aAAa,aAAa,WAAW,mBAAmB,aAAa,WAAW,cAAc;AAC/F,mBAAa,OAAA;AACb;AAAA,IACJ;AAEA,YAAQ,QAAQ;AAAA,EACpB;AAMA,SACI,sBAAA,cAAC,cAAc,UAAd,EAAuB,OAAO,QAAA,GAC3B,sBAAA,cAAC,QAAA,EAAM,GAAG,YAAY,KAAK,eACvB,sBAAA,cAACD,QAAiB,MAAjB,EAAsB,MAAY,cAAc,iBAAA,GAE5C,QAEA,QACL,CACJ,CACJ;AAER,CAAC;AACD,OAAO,SAAS;AAChB,OAAO,UAAU;AACjB,OAAO,QAAQ;"}

package/dist/components/Header/Header.cjs

@@ -11,7 +11,7 @@ const MenuButton = require("./components/MenuButton.cjs");
 const AgreementSelector = require("./components/AgreementSelector.cjs");
 const Header = React.forwardRef(function Header2(props, ref) {
   const className = cn(
-    "bg-brand-midnight flex h-16 w-full shrink-0 items-center gap-2 pl-4",
+    "flex h-16 w-full shrink-0 items-center gap-2 bg-brand-midnight pl-4",
     "[&>*:focus-visible]:yt-focus-dark [&>*]:rounded",
     // styles for logo wrapped inside an anchor
     props.className

package/dist/components/Header/Header.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Header.cjs","sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Button } from './components/Button';\nimport { Link } from './components/Link';\nimport { Logo, LogoLegacy } 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 * from './components/Agreement/types';\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    LogoLegacy: typeof LogoLegacy;\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-brand-midnight flex h-16 w-full shrink-0 items-center gap-2 pl-4',\n        '[&>*:focus-visible]:yt-focus-dark [&>*]:rounded', // 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.LogoLegacy = LogoLegacy;\nHeader.PrimaryNavigation = PrimaryNavigation;\nHeader.SecondaryNavigation = SecondaryNavigation;\nHeader.MenuButton = MenuButton;\n"],"names":["Header","AgreementDisplay","AgreementSelector","Button","Link","Logo","LogoLegacy","PrimaryNavigation","SecondaryNavigation","MenuButton"],"mappings":";;;;;;;;;;;AAkCO,MAAM,SAAS,MAAM,WAAwC,SAASA,QAAO,OAAO,KAAK;AAC5F,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA;AAAA,IACA,MAAM;AAAA,EACV;AAEA,SAAQ,sBAAA,cAAA,UAAA,EAAQ,GAAG,OAAO,WAAsB,KAAU;AAC9D,CAAC;AAED,OAAO,mBAAmBC,kBAAA;AAC1B,OAAO,oBAAoBC,kBAAA;AAC3B,OAAO,SAASC,OAAA;AAChB,OAAO,OAAOC,KAAA;AACd,OAAO,OAAOC,KAAA;AACd,OAAO,aAAaC,KAAA;AACpB,OAAO,oBAAoBC,kBAAA;AAC3B,OAAO,sBAAsBC,oBAAA;AAC7B,OAAO,aAAaC,WAAA;;"}
+{"version":3,"file":"Header.cjs","sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Button } from './components/Button';\nimport { Link } from './components/Link';\nimport { Logo, LogoLegacy } 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 * from './components/Agreement/types';\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    LogoLegacy: typeof LogoLegacy;\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        'flex h-16 w-full shrink-0 items-center gap-2 bg-brand-midnight pl-4',\n        '[&>*:focus-visible]:yt-focus-dark [&>*]:rounded', // 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.LogoLegacy = LogoLegacy;\nHeader.PrimaryNavigation = PrimaryNavigation;\nHeader.SecondaryNavigation = SecondaryNavigation;\nHeader.MenuButton = MenuButton;\n"],"names":["Header","AgreementDisplay","AgreementSelector","Button","Link","Logo","LogoLegacy","PrimaryNavigation","SecondaryNavigation","MenuButton"],"mappings":";;;;;;;;;;;AAkCO,MAAM,SAAS,MAAM,WAAwC,SAASA,QAAO,OAAO,KAAK;AAC5F,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA;AAAA,IACA,MAAM;AAAA,EAAA;AAGV,SAAO,sBAAA,cAAC,UAAA,EAAQ,GAAG,OAAO,WAAsB,KAAU;AAC9D,CAAC;AAED,OAAO,mBAAmBC,kBAAAA;AAC1B,OAAO,oBAAoBC,kBAAAA;AAC3B,OAAO,SAASC,OAAAA;AAChB,OAAO,OAAOC,KAAAA;AACd,OAAO,OAAOC,KAAAA;AACd,OAAO,aAAaC,KAAAA;AACpB,OAAO,oBAAoBC,kBAAAA;AAC3B,OAAO,sBAAsBC,oBAAAA;AAC7B,OAAO,aAAaC,WAAAA;;"}

package/dist/components/Header/Header.js

@@ -9,7 +9,7 @@ import { MenuButton } from "./components/MenuButton.js";
 import { AgreementDisplay, AgreementSelector } from "./components/AgreementSelector.js";
 const Header = React__default.forwardRef(function Header2(props, ref) {
   const className = cn(
-    "bg-brand-midnight flex h-16 w-full shrink-0 items-center gap-2 pl-4",
+    "flex h-16 w-full shrink-0 items-center gap-2 bg-brand-midnight pl-4",
     "[&>*:focus-visible]:yt-focus-dark [&>*]:rounded",
     // styles for logo wrapped inside an anchor
     props.className

package/dist/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 'clsx';\nimport { Button } from './components/Button';\nimport { Link } from './components/Link';\nimport { Logo, LogoLegacy } 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 * from './components/Agreement/types';\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    LogoLegacy: typeof LogoLegacy;\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-brand-midnight flex h-16 w-full shrink-0 items-center gap-2 pl-4',\n        '[&>*:focus-visible]:yt-focus-dark [&>*]:rounded', // 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.LogoLegacy = LogoLegacy;\nHeader.PrimaryNavigation = PrimaryNavigation;\nHeader.SecondaryNavigation = SecondaryNavigation;\nHeader.MenuButton = MenuButton;\n"],"names":["React","Header"],"mappings":";;;;;;;;;AAkCO,MAAM,SAASA,eAAM,WAAwC,SAASC,QAAO,OAAO,KAAK;AAC5F,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA;AAAA,IACA,MAAM;AAAA,EACV;AAEA,SAAQD,+BAAA,cAAA,UAAA,EAAQ,GAAG,OAAO,WAAsB,KAAU;AAC9D,CAAC;AAED,OAAO,mBAAmB;AAC1B,OAAO,oBAAoB;AAC3B,OAAO,SAAS;AAChB,OAAO,OAAO;AACd,OAAO,OAAO;AACd,OAAO,aAAa;AACpB,OAAO,oBAAoB;AAC3B,OAAO,sBAAsB;AAC7B,OAAO,aAAa;"}
+{"version":3,"file":"Header.js","sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Button } from './components/Button';\nimport { Link } from './components/Link';\nimport { Logo, LogoLegacy } 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 * from './components/Agreement/types';\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    LogoLegacy: typeof LogoLegacy;\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        'flex h-16 w-full shrink-0 items-center gap-2 bg-brand-midnight pl-4',\n        '[&>*:focus-visible]:yt-focus-dark [&>*]:rounded', // 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.LogoLegacy = LogoLegacy;\nHeader.PrimaryNavigation = PrimaryNavigation;\nHeader.SecondaryNavigation = SecondaryNavigation;\nHeader.MenuButton = MenuButton;\n"],"names":["React","Header"],"mappings":";;;;;;;;;AAkCO,MAAM,SAASA,eAAM,WAAwC,SAASC,QAAO,OAAO,KAAK;AAC5F,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA;AAAA,IACA,MAAM;AAAA,EAAA;AAGV,SAAOD,+BAAA,cAAC,UAAA,EAAQ,GAAG,OAAO,WAAsB,KAAU;AAC9D,CAAC;AAED,OAAO,mBAAmB;AAC1B,OAAO,oBAAoB;AAC3B,OAAO,SAAS;AAChB,OAAO,OAAO;AACd,OAAO,OAAO;AACd,OAAO,aAAa;AACpB,OAAO,oBAAoB;AAC3B,OAAO,sBAAsB;AAC7B,OAAO,aAAa;"}

package/dist/components/Header/components/Agreement/Avatar.cjs

@@ -10,7 +10,7 @@ const AgreementAvatar = React.forwardRef(function AgreementAvatar2(props, ref) {
     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",
+    "h-9 w-9 shrink-0 rounded-full group-focus:yt-focus-dark xl:group-focus:shadow-none",
     {
       visible: loaded
     },

package/dist/components/Header/components/Agreement/Avatar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.cjs","sources":["../../../../../src/components/Header/components/Agreement/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\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: React.SyntheticEvent<HTMLImageElement, Event>) => {\n        (event.target as HTMLImageElement).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"],"mappings":";;;;AAKO,MAAM,kBAAkB,MAAM,WAAmD,SAASA,iBAAgB,OAAO,KAAK;AACzH,QAAM,EAAE,KAAK,aAAa,GAAG,WAAe,IAAA;AAC5C,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,KAAK;AAC1C,QAAA,aAAa,MAAM,UAAU,IAAI;AACjC,QAAA,cAAc,CAAC,UAAyD;AACzE,UAAM,OAA4B,MAAM;AAAA,EAC7C;AAEA,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,SAAS;AAAA,IACb;AAAA,IACA,MAAM;AAAA,EACV;AAEO,SAAA,sBAAA,cAAC,OAAK,EAAA,GAAG,YAAY,WAAsB,KAAU,QAAQ,YAAY,SAAS,aAAa,IAAU,CAAA;AACpH,CAAC;;"}
+{"version":3,"file":"Avatar.cjs","sources":["../../../../../src/components/Header/components/Agreement/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\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: React.SyntheticEvent<HTMLImageElement, Event>) => {\n        (event.target as HTMLImageElement).src = fallbackSrc;\n    };\n\n    const className = cn(\n        'h-9 w-9 shrink-0 rounded-full 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"],"mappings":";;;;AAKO,MAAM,kBAAkB,MAAM,WAAmD,SAASA,iBAAgB,OAAO,KAAK;AACzH,QAAM,EAAE,KAAK,aAAa,GAAG,eAAe;AAC5C,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,KAAK;AAChD,QAAM,aAAa,MAAM,UAAU,IAAI;AACvC,QAAM,cAAc,CAAC,UAAyD;AACzE,UAAM,OAA4B,MAAM;AAAA,EAC7C;AAEA,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,SAAS;AAAA,IAAA;AAAA,IAEb,MAAM;AAAA,EAAA;AAGV,SAAO,sBAAA,cAAC,OAAA,EAAK,GAAG,YAAY,WAAsB,KAAU,QAAQ,YAAY,SAAS,aAAa,IAAA,CAAU;AACpH,CAAC;;"}

package/dist/components/Header/components/Agreement/Avatar.js

@@ -8,7 +8,7 @@ const AgreementAvatar = React__default.forwardRef(function AgreementAvatar2(prop
     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",
+    "h-9 w-9 shrink-0 rounded-full group-focus:yt-focus-dark xl:group-focus:shadow-none",
     {
       visible: loaded
     },

package/dist/components/Header/components/Agreement/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../../../src/components/Header/components/Agreement/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\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: React.SyntheticEvent<HTMLImageElement, Event>) => {\n        (event.target as HTMLImageElement).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":["React","AgreementAvatar"],"mappings":";;AAKO,MAAM,kBAAkBA,eAAM,WAAmD,SAASC,iBAAgB,OAAO,KAAK;AACzH,QAAM,EAAE,KAAK,aAAa,GAAG,WAAe,IAAA;AAC5C,QAAM,CAAC,QAAQ,SAAS,IAAID,eAAM,SAAS,KAAK;AAC1C,QAAA,aAAa,MAAM,UAAU,IAAI;AACjC,QAAA,cAAc,CAAC,UAAyD;AACzE,UAAM,OAA4B,MAAM;AAAA,EAC7C;AAEA,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,SAAS;AAAA,IACb;AAAA,IACA,MAAM;AAAA,EACV;AAEO,SAAAA,+BAAA,cAAC,OAAK,EAAA,GAAG,YAAY,WAAsB,KAAU,QAAQ,YAAY,SAAS,aAAa,IAAU,CAAA;AACpH,CAAC;"}
+{"version":3,"file":"Avatar.js","sources":["../../../../../src/components/Header/components/Agreement/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\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: React.SyntheticEvent<HTMLImageElement, Event>) => {\n        (event.target as HTMLImageElement).src = fallbackSrc;\n    };\n\n    const className = cn(\n        'h-9 w-9 shrink-0 rounded-full 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":["React","AgreementAvatar"],"mappings":";;AAKO,MAAM,kBAAkBA,eAAM,WAAmD,SAASC,iBAAgB,OAAO,KAAK;AACzH,QAAM,EAAE,KAAK,aAAa,GAAG,eAAe;AAC5C,QAAM,CAAC,QAAQ,SAAS,IAAID,eAAM,SAAS,KAAK;AAChD,QAAM,aAAa,MAAM,UAAU,IAAI;AACvC,QAAM,cAAc,CAAC,UAAyD;AACzE,UAAM,OAA4B,MAAM;AAAA,EAC7C;AAEA,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,SAAS;AAAA,IAAA;AAAA,IAEb,MAAM;AAAA,EAAA;AAGV,SAAOA,+BAAA,cAAC,OAAA,EAAK,GAAG,YAAY,WAAsB,KAAU,QAAQ,YAAY,SAAS,aAAa,IAAA,CAAU;AACpH,CAAC;"}

package/dist/components/Header/components/Agreement/Badge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.cjs","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    }\n    if (agreement.isDeveloper) {\n        return (\n            <Badge {...props} color=\"blue\" small>\n                Developer\n            </Badge>\n        );\n    }\n\n    return null;\n};\n"],"names":["Badge"],"mappings":";;;;AAQO,MAAM,iBAAiB,CAAC,EAAE,WAAW,GAAG,YAAiC;AAC5E,MAAI,UAAU,iBAAiB;AAEvB,WAAA,sBAAA,cAACA,eAAO,GAAG,OAAO,OAAM,QAAO,OAAK,QAAC,OAErC;AAAA,EAAA;AAGR,MAAI,UAAU,aAAa;AAEnB,WAAA,sBAAA,cAACA,eAAO,GAAG,OAAO,OAAM,QAAO,OAAK,QAAC,WAErC;AAAA,EAAA;AAID,SAAA;AACX;;"}
+{"version":3,"file":"Badge.cjs","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    }\n    if (agreement.isDeveloper) {\n        return (\n            <Badge {...props} color=\"blue\" small>\n                Developer\n            </Badge>\n        );\n    }\n\n    return null;\n};\n"],"names":["Badge"],"mappings":";;;;AAQO,MAAM,iBAAiB,CAAC,EAAE,WAAW,GAAG,YAAiC;AAC5E,MAAI,UAAU,iBAAiB;AAC3B,WACI,sBAAA,cAACA,MAAAA,SAAO,GAAG,OAAO,OAAM,QAAO,OAAK,QAAC,OAErC;AAAA,EAER;AACA,MAAI,UAAU,aAAa;AACvB,WACI,sBAAA,cAACA,MAAAA,SAAO,GAAG,OAAO,OAAM,QAAO,OAAK,QAAC,WAErC;AAAA,EAER;AAEA,SAAO;AACX;;"}

package/dist/components/Header/components/Agreement/Badge.js.map

@@ -1 +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    }\n    if (agreement.isDeveloper) {\n        return (\n            <Badge {...props} color=\"blue\" small>\n                Developer\n            </Badge>\n        );\n    }\n\n    return null;\n};\n"],"names":["React"],"mappings":";;AAQO,MAAM,iBAAiB,CAAC,EAAE,WAAW,GAAG,YAAiC;AAC5E,MAAI,UAAU,iBAAiB;AAEvB,WAAAA,+BAAA,cAAC,SAAO,GAAG,OAAO,OAAM,QAAO,OAAK,QAAC,OAErC;AAAA,EAAA;AAGR,MAAI,UAAU,aAAa;AAEnB,WAAAA,+BAAA,cAAC,SAAO,GAAG,OAAO,OAAM,QAAO,OAAK,QAAC,WAErC;AAAA,EAAA;AAID,SAAA;AACX;"}
+{"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    }\n    if (agreement.isDeveloper) {\n        return (\n            <Badge {...props} color=\"blue\" small>\n                Developer\n            </Badge>\n        );\n    }\n\n    return null;\n};\n"],"names":["React"],"mappings":";;AAQO,MAAM,iBAAiB,CAAC,EAAE,WAAW,GAAG,YAAiC;AAC5E,MAAI,UAAU,iBAAiB;AAC3B,WACIA,+BAAA,cAAC,SAAO,GAAG,OAAO,OAAM,QAAO,OAAK,QAAC,OAErC;AAAA,EAER;AACA,MAAI,UAAU,aAAa;AACvB,WACIA,+BAAA,cAAC,SAAO,GAAG,OAAO,OAAM,QAAO,OAAK,QAAC,WAErC;AAAA,EAER;AAEA,SAAO;AACX;"}

package/dist/components/Header/components/Agreement/Display.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Display.cjs","sources":["../../../../../src/components/Header/components/Agreement/Display.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\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 right-0 top-0 -mr-1 w-8 !justify-start\" />\n        </span>\n    );\n};\n"],"names":["useMatchMedia","AgreementItem","AgreementAvatar","AgreementBadge"],"mappings":";;;;;;;;AAea,MAAA,mBAAmB,CAAC,UAAiC;AAC9D,QAAM,EAAE,UAAU,kBAAkB,iBAAqB,IAAA;AACzD,QAAM,aAAaA,cAAAA,cAAc,uBAAuB,OAAO,aAAa,IAAI;AAEhF,MAAI,YAAY;AACZ,UAAM,YAAY,GAAG,sDAAsD,MAAM,SAAS;AAC1F,+CACKC,oBAAe,EAAA,GAAG,kBAAkB,UAAoB,WAAsB,kBAAoC;AAAA,EAAA;AAKvH,SAAA,sBAAA,cAAC,QAAK,EAAA,WAAU,iDACZ,GAAA,sBAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACG,aAAa;AAAA,MACb,KAAK,iBAAiB;AAAA,MACtB,OAAO,GAAG,iBAAiB,IAAI,MAAM,iBAAiB,MAAM,IAAI,iBAAiB,MAAM;AAAA,IAAA;AAAA,EAAA,GAE1F,sBAAA,cAAAC,sBAAA,EAAe,WAAW,kBAAkB,WAAU,mDAAkD,CAC7G;AAER;;"}
+{"version":3,"file":"Display.cjs","sources":["../../../../../src/components/Header/components/Agreement/Display.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\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?: React.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 right-0 top-0 -mr-1 w-8 !justify-start\" />\n        </span>\n    );\n};\n"],"names":["useMatchMedia","AgreementItem","AgreementAvatar","AgreementBadge"],"mappings":";;;;;;;;AAeO,MAAM,mBAAmB,CAAC,UAAiC;AAC9D,QAAM,EAAE,UAAU,kBAAkB,iBAAA,IAAqB;AACzD,QAAM,aAAaA,cAAAA,cAAc,uBAAuB,OAAO,aAAa,IAAI;AAEhF,MAAI,YAAY;AACZ,UAAM,YAAY,GAAG,sDAAsD,MAAM,SAAS;AAC1F,+CACKC,oBAAA,EAAe,GAAG,kBAAkB,UAAoB,WAAsB,kBAAoC;AAAA,EAE3H;AAEA,SACI,sBAAA,cAAC,QAAA,EAAK,WAAU,iDAAA,GACZ,sBAAA;AAAA,IAACC,OAAAA;AAAAA,IAAA;AAAA,MACG,aAAa;AAAA,MACb,KAAK,iBAAiB;AAAA,MACtB,OAAO,GAAG,iBAAiB,IAAI,MAAM,iBAAiB,MAAM,IAAI,iBAAiB,MAAM;AAAA,IAAA;AAAA,EAAA,GAE3F,sBAAA,cAACC,sBAAA,EAAe,WAAW,kBAAkB,WAAU,mDAAkD,CAC7G;AAER;;"}

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

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { Agreement } from './types';
 export type AgreementDisplayProps = {
-    children?: JSX.Element | null;
+    children?: React.JSX.Element | null;
     className?: string;
     currentAgreement: Agreement;
     fallbackImageSrc: string;

package/dist/components/Header/components/Agreement/Display.js.map

@@ -1 +1 @@
-{"version":3,"file":"Display.js","sources":["../../../../../src/components/Header/components/Agreement/Display.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\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 right-0 top-0 -mr-1 w-8 !justify-start\" />\n        </span>\n    );\n};\n"],"names":["React"],"mappings":";;;;;;AAea,MAAA,mBAAmB,CAAC,UAAiC;AAC9D,QAAM,EAAE,UAAU,kBAAkB,iBAAqB,IAAA;AACzD,QAAM,aAAa,cAAc,uBAAuB,OAAO,aAAa,IAAI;AAEhF,MAAI,YAAY;AACZ,UAAM,YAAY,GAAG,sDAAsD,MAAM,SAAS;AAC1F,wDACK,eAAe,EAAA,GAAG,kBAAkB,UAAoB,WAAsB,kBAAoC;AAAA,EAAA;AAKvH,SAAAA,+BAAA,cAAC,QAAK,EAAA,WAAU,iDACZ,GAAAA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,aAAa;AAAA,MACb,KAAK,iBAAiB;AAAA,MACtB,OAAO,GAAG,iBAAiB,IAAI,MAAM,iBAAiB,MAAM,IAAI,iBAAiB,MAAM;AAAA,IAAA;AAAA,EAAA,GAE1FA,+BAAA,cAAA,gBAAA,EAAe,WAAW,kBAAkB,WAAU,mDAAkD,CAC7G;AAER;"}
+{"version":3,"file":"Display.js","sources":["../../../../../src/components/Header/components/Agreement/Display.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\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?: React.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 right-0 top-0 -mr-1 w-8 !justify-start\" />\n        </span>\n    );\n};\n"],"names":["React"],"mappings":";;;;;;AAeO,MAAM,mBAAmB,CAAC,UAAiC;AAC9D,QAAM,EAAE,UAAU,kBAAkB,iBAAA,IAAqB;AACzD,QAAM,aAAa,cAAc,uBAAuB,OAAO,aAAa,IAAI;AAEhF,MAAI,YAAY;AACZ,UAAM,YAAY,GAAG,sDAAsD,MAAM,SAAS;AAC1F,wDACK,eAAA,EAAe,GAAG,kBAAkB,UAAoB,WAAsB,kBAAoC;AAAA,EAE3H;AAEA,SACIA,+BAAA,cAAC,QAAA,EAAK,WAAU,iDAAA,GACZA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,aAAa;AAAA,MACb,KAAK,iBAAiB;AAAA,MACtB,OAAO,GAAG,iBAAiB,IAAI,MAAM,iBAAiB,MAAM,IAAI,iBAAiB,MAAM;AAAA,IAAA;AAAA,EAAA,GAE3FA,+BAAA,cAAC,gBAAA,EAAe,WAAW,kBAAkB,WAAU,mDAAkD,CAC7G;AAER;"}

package/dist/components/Header/components/Agreement/Item.cjs

@@ -7,7 +7,7 @@ const Avatar = require("./Avatar.cjs");
 const Badge = require("./Badge.cjs");
 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);
+  const className = cn("flex w-full items-center gap-2 overflow-hidden rounded px-2 text-left", customClassName);
   return /* @__PURE__ */ React.createElement("span", { className }, /* @__PURE__ */ React.createElement(
     Avatar.AgreementAvatar,
     {

package/dist/components/Header/components/Agreement/Item.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Item.cjs","sources":["../../../../../src/components/Header/components/Agreement/Item.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\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=\"mb-0.5 ml-1 mt-0.5 !h-4 !w-4 flex-shrink-0 flex-grow-0\" />\n                    ) : null}\n                </span>\n                <span className=\"whitespace-nowrap text-xs text-gray-100\">\n                    {agreement.number} {agreement.userId} <AgreementBadge agreement={agreement} />\n                </span>\n            </span>\n            {children}\n        </span>\n    );\n};\n"],"names":["AgreementAvatar","Icon","AgreementBadge"],"mappings":";;;;;;;AAaa,MAAA,gBAAgB,CAAC,UAA8B;AACxD,QAAM,EAAE,UAAU,WAAW,iBAAiB,kBAAkB,GAAG,cAAc;AAC3E,QAAA,YAAY,GAAG,yEAAyE,eAAe;AAGzG,SAAA,sBAAA,cAAC,UAAK,UACF,GAAA,sBAAA;AAAA,IAACA,OAAA;AAAA,IAAA;AAAA,MACG,aAAa;AAAA,MACb,KAAK,UAAU;AAAA,MACf,OAAO,GAAG,UAAU,IAAI,MAAM,UAAU,MAAM,IAAI,UAAU,MAAM;AAAA,IAAA;AAAA,EACtE,uCACC,QAAK,EAAA,WAAU,mCACX,sBAAA,cAAA,QAAA,EAAK,WAAU,4BAA2B,OAAO,UAAU,KACxD,GAAA,sBAAA,cAAC,UAAK,WAAU,cAAY,UAAU,IAAK,GAAQ,KAClD,UAAU,SACP,sBAAA,cAACC,KAAAA,QAAK,MAAK,eAAc,WAAU,yDAAyD,CAAA,IAC5F,IACR,GACA,sBAAA,cAAC,QAAK,EAAA,WAAU,0CACX,GAAA,UAAU,QAAO,KAAE,UAAU,QAAO,KAAC,sBAAA,cAACC,wBAAe,UAAsB,CAAA,CAChF,CACJ,GACC,QACL;AAER;;"}
+{"version":3,"file":"Item.cjs","sources":["../../../../../src/components/Header/components/Agreement/Item.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Icon } from '../../../Icon/Icon';\nimport { AgreementAvatar } from './Avatar';\nimport { Agreement } from './types';\nimport { AgreementBadge } from './Badge';\n\nexport type AgreementItemProps = Agreement & {\n    children?: React.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('flex w-full items-center gap-2 overflow-hidden rounded px-2 text-left', 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=\"mb-0.5 ml-1 mt-0.5 !h-4 !w-4 flex-shrink-0 flex-grow-0\" />\n                    ) : null}\n                </span>\n                <span className=\"whitespace-nowrap text-xs text-gray-100\">\n                    {agreement.number} {agreement.userId} <AgreementBadge agreement={agreement} />\n                </span>\n            </span>\n            {children}\n        </span>\n    );\n};\n"],"names":["AgreementAvatar","Icon","AgreementBadge"],"mappings":";;;;;;;AAaO,MAAM,gBAAgB,CAAC,UAA8B;AACxD,QAAM,EAAE,UAAU,WAAW,iBAAiB,kBAAkB,GAAG,cAAc;AACjF,QAAM,YAAY,GAAG,yEAAyE,eAAe;AAE7G,SACI,sBAAA,cAAC,UAAK,UAAA,GACF,sBAAA;AAAA,IAACA,OAAAA;AAAAA,IAAA;AAAA,MACG,aAAa;AAAA,MACb,KAAK,UAAU;AAAA,MACf,OAAO,GAAG,UAAU,IAAI,MAAM,UAAU,MAAM,IAAI,UAAU,MAAM;AAAA,IAAA;AAAA,EAAA,uCAErE,QAAA,EAAK,WAAU,mCACZ,sBAAA,cAAC,QAAA,EAAK,WAAU,4BAA2B,OAAO,UAAU,KAAA,GACxD,sBAAA,cAAC,UAAK,WAAU,cAAY,UAAU,IAAK,GAAQ,KAClD,UAAU,SACP,sBAAA,cAACC,KAAAA,QAAK,MAAK,eAAc,WAAU,yDAAA,CAAyD,IAC5F,IACR,GACA,sBAAA,cAAC,QAAA,EAAK,WAAU,0CAAA,GACX,UAAU,QAAO,KAAE,UAAU,QAAO,KAAC,sBAAA,cAACC,MAAAA,kBAAe,UAAA,CAAsB,CAChF,CACJ,GACC,QACL;AAER;;"}

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

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { Agreement } from './types';
 export type AgreementItemProps = Agreement & {
-    children?: JSX.Element | null;
+    children?: React.JSX.Element | null;
     className?: string;
     fallbackImageSrc: string;
 };

package/dist/components/Header/components/Agreement/Item.js

@@ -5,7 +5,7 @@ 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);
+  const className = cn("flex w-full items-center gap-2 overflow-hidden rounded px-2 text-left", customClassName);
   return /* @__PURE__ */ React__default.createElement("span", { className }, /* @__PURE__ */ React__default.createElement(
     AgreementAvatar,
     {

package/dist/components/Header/components/Agreement/Item.js.map

@@ -1 +1 @@
-{"version":3,"file":"Item.js","sources":["../../../../../src/components/Header/components/Agreement/Item.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\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=\"mb-0.5 ml-1 mt-0.5 !h-4 !w-4 flex-shrink-0 flex-grow-0\" />\n                    ) : null}\n                </span>\n                <span className=\"whitespace-nowrap text-xs text-gray-100\">\n                    {agreement.number} {agreement.userId} <AgreementBadge agreement={agreement} />\n                </span>\n            </span>\n            {children}\n        </span>\n    );\n};\n"],"names":["React"],"mappings":";;;;;AAaa,MAAA,gBAAgB,CAAC,UAA8B;AACxD,QAAM,EAAE,UAAU,WAAW,iBAAiB,kBAAkB,GAAG,cAAc;AAC3E,QAAA,YAAY,GAAG,yEAAyE,eAAe;AAGzG,SAAAA,+BAAA,cAAC,UAAK,UACF,GAAAA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,aAAa;AAAA,MACb,KAAK,UAAU;AAAA,MACf,OAAO,GAAG,UAAU,IAAI,MAAM,UAAU,MAAM,IAAI,UAAU,MAAM;AAAA,IAAA;AAAA,EACtE,gDACC,QAAK,EAAA,WAAU,mCACXA,+BAAA,cAAA,QAAA,EAAK,WAAU,4BAA2B,OAAO,UAAU,KACxD,GAAAA,+BAAA,cAAC,UAAK,WAAU,cAAY,UAAU,IAAK,GAAQ,KAClD,UAAU,SACPA,+BAAA,cAAC,QAAK,MAAK,eAAc,WAAU,yDAAyD,CAAA,IAC5F,IACR,GACAA,+BAAA,cAAC,QAAK,EAAA,WAAU,0CACX,GAAA,UAAU,QAAO,KAAE,UAAU,QAAO,KAACA,+BAAA,cAAC,kBAAe,UAAsB,CAAA,CAChF,CACJ,GACC,QACL;AAER;"}
+{"version":3,"file":"Item.js","sources":["../../../../../src/components/Header/components/Agreement/Item.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Icon } from '../../../Icon/Icon';\nimport { AgreementAvatar } from './Avatar';\nimport { Agreement } from './types';\nimport { AgreementBadge } from './Badge';\n\nexport type AgreementItemProps = Agreement & {\n    children?: React.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('flex w-full items-center gap-2 overflow-hidden rounded px-2 text-left', 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=\"mb-0.5 ml-1 mt-0.5 !h-4 !w-4 flex-shrink-0 flex-grow-0\" />\n                    ) : null}\n                </span>\n                <span className=\"whitespace-nowrap text-xs text-gray-100\">\n                    {agreement.number} {agreement.userId} <AgreementBadge agreement={agreement} />\n                </span>\n            </span>\n            {children}\n        </span>\n    );\n};\n"],"names":["React"],"mappings":";;;;;AAaO,MAAM,gBAAgB,CAAC,UAA8B;AACxD,QAAM,EAAE,UAAU,WAAW,iBAAiB,kBAAkB,GAAG,cAAc;AACjF,QAAM,YAAY,GAAG,yEAAyE,eAAe;AAE7G,SACIA,+BAAA,cAAC,UAAK,UAAA,GACFA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,aAAa;AAAA,MACb,KAAK,UAAU;AAAA,MACf,OAAO,GAAG,UAAU,IAAI,MAAM,UAAU,MAAM,IAAI,UAAU,MAAM;AAAA,IAAA;AAAA,EAAA,gDAErE,QAAA,EAAK,WAAU,mCACZA,+BAAA,cAAC,QAAA,EAAK,WAAU,4BAA2B,OAAO,UAAU,KAAA,GACxDA,+BAAA,cAAC,UAAK,WAAU,cAAY,UAAU,IAAK,GAAQ,KAClD,UAAU,SACPA,+BAAA,cAAC,QAAK,MAAK,eAAc,WAAU,yDAAA,CAAyD,IAC5F,IACR,GACAA,+BAAA,cAAC,QAAA,EAAK,WAAU,0CAAA,GACX,UAAU,QAAO,KAAE,UAAU,QAAO,KAACA,+BAAA,cAAC,kBAAe,UAAA,CAAsB,CAChF,CACJ,GACC,QACL;AAER;"}

package/dist/components/Header/components/AgreementSelector.cjs

@@ -41,10 +41,9 @@ function AgreementSelector(props) {
     setSearch("");
   }, [open]);
   const handleKeyDown = (event) => {
-    var _a;
     if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter") {
       event.preventDefault();
-      (_a = collectionRef.current) == null ? void 0 : _a.dispatchEvent(input.createCustomKeyboardEvent(event));
+      collectionRef.current?.dispatchEvent(input.createCustomKeyboardEvent(event));
     }
   };
   const handleChangeAgreement = (agreement) => {
@@ -55,7 +54,7 @@ function AgreementSelector(props) {
     popover.Popover.Trigger,
     {
       "data-testid": "agreement-selector-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"
+      className: "w-full rounded outline-none xl:focus-visible:yt-focus-dark [&:focus-visible_img]:yt-focus-dark xl:[&:focus-visible_img]:shadow-none"
     },
     /* @__PURE__ */ React.createElement(Display.AgreementDisplay, { currentAgreement, fallbackImageSrc }, agreements ? /* @__PURE__ */ React.createElement(
       Icon.Icon,
@@ -73,11 +72,11 @@ function AgreementSelector(props) {
       collisionPadding: 0,
       sideOffset: 8
     },
-    /* @__PURE__ */ React.createElement(popover.Popover.Popup, { className: "bg-brand-midnight flex h-[calc(100vh_-_theme(spacing.16))] w-64 flex-col gap-1" }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(popover.Popover.Popup, { className: "flex h-[calc(100vh_-_theme(spacing.16))] w-64 flex-col gap-1 bg-brand-midnight" }, /* @__PURE__ */ React.createElement(
       SearchInput.SearchInput,
       {
         autoFocus: true,
-        className: "focus-visible:!yt-focus-dark !bg-white-subtle mx-2 !border-transparent !text-white hover:!bg-white/[0.16] hover:!shadow-none focus:!bg-white/[0.16] active:!bg-white/[0.16] [&+div>button]:!text-white",
+        className: "mx-2 !border-transparent !bg-white-subtle !text-white hover:!bg-white/[0.16] hover:!shadow-none focus:!bg-white/[0.16] focus-visible:!yt-focus-dark active:!bg-white/[0.16] [&+div>button]:!text-white",
         onChange: (event) => setSearch(event.target.value),
         onKeyDown: handleKeyDown,
         placeholder: texts.header.search
@@ -90,7 +89,7 @@ function AgreementSelector(props) {
         ref: collectionRef,
         tabIndex: -1
       },
-      agreements == null ? void 0 : agreements.filter((agreement) => filterAgreement(agreement, filterBySearchValue(search))).map((agreement) => {
+      agreements?.filter((agreement) => filterAgreement(agreement, filterBySearchValue(search))).map((agreement) => {
         const button = createAgreementButton(
           agreement,
           fallbackImageSrc,
@@ -122,14 +121,14 @@ function AgreementSelector(props) {
     ), handleAddAgreement ? /* @__PURE__ */ React.createElement(
       Button.LegacyButton,
       {
-        className: "focus-visible:!yt-focus-dark !bg-white-subtle mx-2 my-1 !h-9 shrink-0 !text-white hover:!bg-white/[0.16]",
+        className: "mx-2 my-1 !h-9 shrink-0 !bg-white-subtle !text-white hover:!bg-white/[0.16] focus-visible:!yt-focus-dark",
         onClick: handleAddAgreement
       },
       texts.header.addAgreement
-    ) : null, /* @__PURE__ */ React.createElement("hr", { className: "bg-white-subtle my-0 h-px w-full" }), /* @__PURE__ */ React.createElement(
+    ) : null, /* @__PURE__ */ React.createElement("hr", { className: "my-0 h-px w-full bg-white-subtle" }), /* @__PURE__ */ React.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",
+        className: "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 focus-visible:yt-focus-dark",
         onClick: handleLogout,
         tabIndex: 0
       },
@@ -158,7 +157,7 @@ const createAgreementButton = (agreement, fallbackImageSrc, onChangeAgreement, i
     "button",
     {
       "aria-current": isCurrentAgreement2 ? "true" : void 0,
-      className: "focus:yt-focus-dark w-full rounded outline-none",
+      className: "w-full rounded outline-none focus:yt-focus-dark",
       "data-taco": "header-agreements-agreement",
       key: `${agreement.number}_${agreement.userId}`,
       onClick: () => onChangeAgreement(agreement),
@@ -169,7 +168,7 @@ const createAgreementButton = (agreement, fallbackImageSrc, onChangeAgreement, i
       Item.AgreementItem,
       {
         ...agreement,
-        className: "bg-white-subtle h-14 xl:hover:bg-white/[0.16] [[aria-current='true']>&]:bg-white/[0.16]",
+        className: "h-14 bg-white-subtle xl:hover:bg-white/[0.16] [[aria-current='true']>&]:bg-white/[0.16]",
         fallbackImageSrc
       }
     )

package/dist/components/Header/components/AgreementSelector.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AgreementSelector.cjs","sources":["../../../../src/components/Header/components/AgreementSelector.tsx"],"sourcesContent":["import React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\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 { LegacyButton } from '../../LegacyComponents/Button/Button';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Agreement } from './Agreement/types';\nimport { AgreementDisplay as Display } from './Agreement/Display';\n\nconst Container = (props: React.PropsWithChildren<unknown>) => {\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, searchValue: string, 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,\n        setOpen,\n    } = props;\n    const { texts } = useLocalization();\n    const collectionRef = React.useRef<CollectionPrimitive.CollectionRef | null>(null);\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\n                    data-testid=\"agreement-selector-trigger\"\n                    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.Portal>\n                    <PopoverPrimitive.Positioner\n                        collisionAvoidance={{\n                            side: 'none',\n                        }}\n                        collisionPadding={0}\n                        sideOffset={8}>\n                        <PopoverPrimitive.Popup className=\"bg-brand-midnight flex h-[calc(100vh_-_theme(spacing.16))] w-64 flex-col gap-1\">\n                            <SearchInput\n                                autoFocus\n                                className=\"focus-visible:!yt-focus-dark !bg-white-subtle mx-2 !border-transparent !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, search, 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                                <LegacyButton\n                                    className=\"focus-visible:!yt-focus-dark !bg-white-subtle mx-2 my-1 !h-9 shrink-0 !text-white hover:!bg-white/[0.16]\"\n                                    onClick={handleAddAgreement}>\n                                    {texts.header.addAgreement}\n                                </LegacyButton>\n                            ) : null}\n                            <hr className=\"bg-white-subtle my-0 h-px w-full\" />\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.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\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=\"bg-white-subtle h-14 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":["useLocalization","createCustomKeyboardEvent","PopoverPrimitive","Display","Icon","SearchInput","CollectionPrimitive.Root","agreement","LegacyButton","isCurrentAgreement","AgreementItem"],"mappings":"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"}
+{"version":3,"file":"AgreementSelector.cjs","sources":["../../../../src/components/Header/components/AgreementSelector.tsx"],"sourcesContent":["import React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\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 { LegacyButton } from '../../LegacyComponents/Button/Button';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Agreement } from './Agreement/types';\nimport { AgreementDisplay as Display } from './Agreement/Display';\n\nconst Container = (props: React.PropsWithChildren<unknown>) => {\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, searchValue: string, 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,\n        setOpen,\n    } = props;\n    const { texts } = useLocalization();\n    const collectionRef = React.useRef<CollectionPrimitive.CollectionRef | null>(null);\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\n                    data-testid=\"agreement-selector-trigger\"\n                    className=\"w-full rounded outline-none xl:focus-visible:yt-focus-dark [&:focus-visible_img]:yt-focus-dark 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.Portal>\n                    <PopoverPrimitive.Positioner\n                        collisionAvoidance={{\n                            side: 'none',\n                        }}\n                        collisionPadding={0}\n                        sideOffset={8}>\n                        <PopoverPrimitive.Popup className=\"flex h-[calc(100vh_-_theme(spacing.16))] w-64 flex-col gap-1 bg-brand-midnight\">\n                            <SearchInput\n                                autoFocus\n                                className=\"mx-2 !border-transparent !bg-white-subtle !text-white hover:!bg-white/[0.16] hover:!shadow-none focus:!bg-white/[0.16] focus-visible:!yt-focus-dark 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, search, 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                                <LegacyButton\n                                    className=\"mx-2 my-1 !h-9 shrink-0 !bg-white-subtle !text-white hover:!bg-white/[0.16] focus-visible:!yt-focus-dark\"\n                                    onClick={handleAddAgreement}>\n                                    {texts.header.addAgreement}\n                                </LegacyButton>\n                            ) : null}\n                            <hr className=\"my-0 h-px w-full bg-white-subtle\" />\n                            <a\n                                className=\"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 focus-visible:yt-focus-dark\"\n                                onClick={handleLogout}\n                                tabIndex={0}>\n                                {texts.header.logout}\n                            </a>\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\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=\"w-full rounded outline-none focus:yt-focus-dark\"\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-subtle 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":["useLocalization","createCustomKeyboardEvent","PopoverPrimitive","Display","Icon","SearchInput","CollectionPrimitive.Root","agreement","LegacyButton","isCurrentAgreement","AgreementItem"],"mappings":"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"}

package/dist/components/Header/components/AgreementSelector.js

@@ -39,10 +39,9 @@ function AgreementSelector(props) {
     setSearch("");
   }, [open]);
   const handleKeyDown = (event) => {
-    var _a;
     if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter") {
       event.preventDefault();
-      (_a = collectionRef.current) == null ? void 0 : _a.dispatchEvent(createCustomKeyboardEvent(event));
+      collectionRef.current?.dispatchEvent(createCustomKeyboardEvent(event));
     }
   };
   const handleChangeAgreement = (agreement) => {
@@ -53,7 +52,7 @@ function AgreementSelector(props) {
     Popover.Trigger,
     {
       "data-testid": "agreement-selector-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"
+      className: "w-full rounded outline-none xl:focus-visible:yt-focus-dark [&:focus-visible_img]:yt-focus-dark xl:[&:focus-visible_img]:shadow-none"
     },
     /* @__PURE__ */ React__default.createElement(AgreementDisplay$1, { currentAgreement, fallbackImageSrc }, agreements ? /* @__PURE__ */ React__default.createElement(
       Icon,
@@ -71,11 +70,11 @@ function AgreementSelector(props) {
       collisionPadding: 0,
       sideOffset: 8
     },
-    /* @__PURE__ */ React__default.createElement(Popover.Popup, { className: "bg-brand-midnight flex h-[calc(100vh_-_theme(spacing.16))] w-64 flex-col gap-1" }, /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement(Popover.Popup, { className: "flex h-[calc(100vh_-_theme(spacing.16))] w-64 flex-col gap-1 bg-brand-midnight" }, /* @__PURE__ */ React__default.createElement(
       SearchInput,
       {
         autoFocus: true,
-        className: "focus-visible:!yt-focus-dark !bg-white-subtle mx-2 !border-transparent !text-white hover:!bg-white/[0.16] hover:!shadow-none focus:!bg-white/[0.16] active:!bg-white/[0.16] [&+div>button]:!text-white",
+        className: "mx-2 !border-transparent !bg-white-subtle !text-white hover:!bg-white/[0.16] hover:!shadow-none focus:!bg-white/[0.16] focus-visible:!yt-focus-dark active:!bg-white/[0.16] [&+div>button]:!text-white",
         onChange: (event) => setSearch(event.target.value),
         onKeyDown: handleKeyDown,
         placeholder: texts.header.search
@@ -88,7 +87,7 @@ function AgreementSelector(props) {
         ref: collectionRef,
         tabIndex: -1
       },
-      agreements == null ? void 0 : agreements.filter((agreement) => filterAgreement(agreement, filterBySearchValue(search))).map((agreement) => {
+      agreements?.filter((agreement) => filterAgreement(agreement, filterBySearchValue(search))).map((agreement) => {
         const button = createAgreementButton(
           agreement,
           fallbackImageSrc,
@@ -120,14 +119,14 @@ function AgreementSelector(props) {
     ), handleAddAgreement ? /* @__PURE__ */ React__default.createElement(
       LegacyButton,
       {
-        className: "focus-visible:!yt-focus-dark !bg-white-subtle mx-2 my-1 !h-9 shrink-0 !text-white hover:!bg-white/[0.16]",
+        className: "mx-2 my-1 !h-9 shrink-0 !bg-white-subtle !text-white hover:!bg-white/[0.16] focus-visible:!yt-focus-dark",
         onClick: handleAddAgreement
       },
       texts.header.addAgreement
-    ) : null, /* @__PURE__ */ React__default.createElement("hr", { className: "bg-white-subtle my-0 h-px w-full" }), /* @__PURE__ */ React__default.createElement(
+    ) : null, /* @__PURE__ */ React__default.createElement("hr", { className: "my-0 h-px w-full bg-white-subtle" }), /* @__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",
+        className: "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 focus-visible:yt-focus-dark",
         onClick: handleLogout,
         tabIndex: 0
       },
@@ -156,7 +155,7 @@ const createAgreementButton = (agreement, fallbackImageSrc, onChangeAgreement, i
     "button",
     {
       "aria-current": isCurrentAgreement2 ? "true" : void 0,
-      className: "focus:yt-focus-dark w-full rounded outline-none",
+      className: "w-full rounded outline-none focus:yt-focus-dark",
       "data-taco": "header-agreements-agreement",
       key: `${agreement.number}_${agreement.userId}`,
       onClick: () => onChangeAgreement(agreement),
@@ -167,7 +166,7 @@ const createAgreementButton = (agreement, fallbackImageSrc, onChangeAgreement, i
       AgreementItem,
       {
         ...agreement,
-        className: "bg-white-subtle h-14 xl:hover:bg-white/[0.16] [[aria-current='true']>&]:bg-white/[0.16]",
+        className: "h-14 bg-white-subtle xl:hover:bg-white/[0.16] [[aria-current='true']>&]:bg-white/[0.16]",
         fallbackImageSrc
       }
     )

package/dist/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 { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\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 { LegacyButton } from '../../LegacyComponents/Button/Button';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Agreement } from './Agreement/types';\nimport { AgreementDisplay as Display } from './Agreement/Display';\n\nconst Container = (props: React.PropsWithChildren<unknown>) => {\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, searchValue: string, 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,\n        setOpen,\n    } = props;\n    const { texts } = useLocalization();\n    const collectionRef = React.useRef<CollectionPrimitive.CollectionRef | null>(null);\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\n                    data-testid=\"agreement-selector-trigger\"\n                    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.Portal>\n                    <PopoverPrimitive.Positioner\n                        collisionAvoidance={{\n                            side: 'none',\n                        }}\n                        collisionPadding={0}\n                        sideOffset={8}>\n                        <PopoverPrimitive.Popup className=\"bg-brand-midnight flex h-[calc(100vh_-_theme(spacing.16))] w-64 flex-col gap-1\">\n                            <SearchInput\n                                autoFocus\n                                className=\"focus-visible:!yt-focus-dark !bg-white-subtle mx-2 !border-transparent !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, search, 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                                <LegacyButton\n                                    className=\"focus-visible:!yt-focus-dark !bg-white-subtle mx-2 my-1 !h-9 shrink-0 !text-white hover:!bg-white/[0.16]\"\n                                    onClick={handleAddAgreement}>\n                                    {texts.header.addAgreement}\n                                </LegacyButton>\n                            ) : null}\n                            <hr className=\"bg-white-subtle my-0 h-px w-full\" />\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.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\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=\"bg-white-subtle h-14 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":["React","PopoverPrimitive","Display","CollectionPrimitive.Root","agreement","isCurrentAgreement"],"mappings":"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"}
+{"version":3,"file":"AgreementSelector.js","sources":["../../../../src/components/Header/components/AgreementSelector.tsx"],"sourcesContent":["import React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\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 { LegacyButton } from '../../LegacyComponents/Button/Button';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Agreement } from './Agreement/types';\nimport { AgreementDisplay as Display } from './Agreement/Display';\n\nconst Container = (props: React.PropsWithChildren<unknown>) => {\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, searchValue: string, 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,\n        setOpen,\n    } = props;\n    const { texts } = useLocalization();\n    const collectionRef = React.useRef<CollectionPrimitive.CollectionRef | null>(null);\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\n                    data-testid=\"agreement-selector-trigger\"\n                    className=\"w-full rounded outline-none xl:focus-visible:yt-focus-dark [&:focus-visible_img]:yt-focus-dark 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.Portal>\n                    <PopoverPrimitive.Positioner\n                        collisionAvoidance={{\n                            side: 'none',\n                        }}\n                        collisionPadding={0}\n                        sideOffset={8}>\n                        <PopoverPrimitive.Popup className=\"flex h-[calc(100vh_-_theme(spacing.16))] w-64 flex-col gap-1 bg-brand-midnight\">\n                            <SearchInput\n                                autoFocus\n                                className=\"mx-2 !border-transparent !bg-white-subtle !text-white hover:!bg-white/[0.16] hover:!shadow-none focus:!bg-white/[0.16] focus-visible:!yt-focus-dark 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, search, 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                                <LegacyButton\n                                    className=\"mx-2 my-1 !h-9 shrink-0 !bg-white-subtle !text-white hover:!bg-white/[0.16] focus-visible:!yt-focus-dark\"\n                                    onClick={handleAddAgreement}>\n                                    {texts.header.addAgreement}\n                                </LegacyButton>\n                            ) : null}\n                            <hr className=\"my-0 h-px w-full bg-white-subtle\" />\n                            <a\n                                className=\"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 focus-visible:yt-focus-dark\"\n                                onClick={handleLogout}\n                                tabIndex={0}>\n                                {texts.header.logout}\n                            </a>\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\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=\"w-full rounded outline-none focus:yt-focus-dark\"\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-subtle 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":["React","PopoverPrimitive","Display","CollectionPrimitive.Root","agreement","isCurrentAgreement"],"mappings":";;;;;;;;;;AAaA,MAAM,YAAY,CAAC,UAA4C;AAC3D,SACIA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,aAAU;AAAA,IAAA;AAAA,IACVA,+BAAA,cAAC,QAAA,EAAK,WAAU,mEAAA,CAAmE;AAAA,IAClF,MAAM;AAAA,EAAA;AAGnB;AAeO,SAAS,kBAAkB,OAA+B;AAC7D,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB,MAAM;AAAA,IACxB,wBAAwB,MAAM;AAAA,IAC9B,gBAAgB;AAAA,IAChB;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,EAAA,IACA;AACJ,QAAM,EAAE,MAAA,IAAU,gBAAA;AAClB,QAAM,gBAAgBA,eAAM,OAAiD,IAAI;AAEjF,QAAM,CAAC,QAAQ,SAAS,IAAIA,eAAM,SAAS,EAAE;AAE7CA,iBAAM,UAAU,MAAM;AAClB,cAAU,EAAE;AAAA,EAChB,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,gBAAgB,CAAC,UAA+B;AAClD,QAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,aAAa,MAAM,QAAQ,SAAS;AAC/E,YAAM,eAAA;AACN,oBAAc,SAAS,cAAc,0BAA0B,KAA8C,CAAC;AAAA,IAClH;AAAA,EACJ;AAEA,QAAM,wBAAwB,CAAC,cAAyB;AACpD,sBAAkB,SAAS;AAC3B,YAAQ,KAAK;AAAA,EACjB;AAEA,SACIA,+BAAA,cAAC,iBACGA,+BAAA,cAACC,QAAiB,MAAjB,EAAsB,MAAY,cAAc,QAAA,GAC7CD,+BAAA;AAAA,IAACC,QAAiB;AAAA,IAAjB;AAAA,MACG,eAAY;AAAA,MACZ,WAAU;AAAA,IAAA;AAAA,IACVD,+BAAA,cAACE,oBAAA,EAAQ,kBAAoC,oBACxC,aACGF,+BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,MAAM,OAAO,eAAe;AAAA,MAAA;AAAA,IAAA,IAEhC,IACR;AAAA,EAAA,GAEJA,+BAAA,cAACC,QAAiB,QAAjB,MACGD,+BAAA;AAAA,IAACC,QAAiB;AAAA,IAAjB;AAAA,MACG,oBAAoB;AAAA,QAChB,MAAM;AAAA,MAAA;AAAA,MAEV,kBAAkB;AAAA,MAClB,YAAY;AAAA,IAAA;AAAA,IACZD,+BAAA,cAACC,QAAiB,OAAjB,EAAuB,WAAU,iFAAA,GAC9BD,+BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAS;AAAA,QACT,WAAU;AAAA,QACV,UAAU,CAAA,UAAS,UAAU,MAAM,OAAO,KAAK;AAAA,QAC/C,WAAW;AAAA,QACX,aAAa,MAAM,OAAO;AAAA,MAAA;AAAA,IAAA,GAE9BA,+BAAA;AAAA,MAACG;AAAAA,MAAA;AAAA,QACG,eAAc;AAAA,QACd,WAAU;AAAA,QACV,KAAK;AAAA,QACL,UAAU;AAAA,MAAA;AAAA,MACT,YACK,OAAO,CAAA,cAAa,gBAAgB,WAAW,oBAAoB,MAAM,CAAC,CAAC,EAC5E,IAAI,CAAA,cAAa;AACd,cAAM,SAAS;AAAA,UACX;AAAA,UACA;AAAA,UACA;AAAA,UACA,mBAAmB,WAAW,gBAAgB;AAAA,QAAA;AAGlD,YAAI,UAAU,SAAS;AACnB,iBACIH,+BAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAU;AAAA,cACV,KAAK,GAAG,UAAU,MAAM,IAAI,UAAU,MAAM;AAAA,YAAA;AAAA,YAC3C,oBAAoB,MAAM,EAAE,SAAS,IAAI,SAAS;AAAA,YAClD,UAAU,QACN;AAAA,cAAO,CAAAI,eACJ,sBAAsBA,YAAW,QAAQ,oBAAoB,MAAM,CAAC;AAAA,YAAA,EAEvE;AAAA,cAAI,CAAA,oBACD;AAAA,gBACI;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,mBAAmB,iBAAiB,gBAAgB;AAAA,cAAA;AAAA,YACxD;AAAA,UACJ;AAAA,QAGhB;AAEA,eAAO;AAAA,MACX,CAAC;AAAA,IAAA,GAER,qBACGJ,+BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,SAAS;AAAA,MAAA;AAAA,MACR,MAAM,OAAO;AAAA,IAAA,IAElB,MACJA,+BAAA,cAAC,MAAA,EAAG,WAAU,oCAAmC,GACjDA,+BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,MAAA;AAAA,MACT,MAAM,OAAO;AAAA,IAAA,CAEtB;AAAA,EAAA,CAER,CACJ,CACJ;AAER;AAEA,MAAM,sBAAsB,CAAC,WAAmB,CAAC,cAAyB;AACtE,MAAI,CAAC,UAAU,CAAC,OAAO,QAAQ;AAC3B,WAAO;AAAA,EACX;AAEA,QAAM,yBAAyB,OAAO,UAAU,MAAM,EAAE,QAAQ,MAAM,IAAI;AAC1E,QAAM,qBAAqB,UAAU,KAAK,YAAA,EAAc,QAAQ,OAAO,YAAA,CAAa,IAAI;AAExF,SAAO,0BAA0B;AACrC;AAEA,MAAM,qBAAqB,CAAC,WAAsB,qBAAgC;AAC9E,SAAO,UAAU,WAAW,iBAAiB,UAAU,UAAU,WAAW,iBAAiB;AACjG;AAEA,MAAM,wBAAwB,CAC1B,WACA,kBACA,mBACAK,sBAAqB,UACpB;AACD,QAAM,gBAAgB,CAAC,UAAkD;AACrE,QAAI,MAAM,QAAQ,SAAS;AACvB,wBAAkB,SAAS;AAAA,IAC/B;AAAA,EACJ;AAEA,SACIL,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAcK,sBAAqB,SAAS;AAAA,MAC5C,WAAU;AAAA,MACV,aAAU;AAAA,MACV,KAAK,GAAG,UAAU,MAAM,IAAI,UAAU,MAAM;AAAA,MAC5C,SAAS,MAAM,kBAAkB,SAAS;AAAA,MAC1C,WAAW;AAAA,MACX,UAAU;AAAA,IAAA;AAAA,IACVL,+BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ,WAAU;AAAA,QACV;AAAA,MAAA;AAAA,IAAA;AAAA,EACJ;AAGZ;AAOO,SAAS,iBAAiB,OAA8B;AAC3D,QAAM,EAAE,kBAAkB,iBAAA,IAAqB;AAE/C,sDACK,WAAA,MACGA,+BAAA,cAACE,oBAAA,EAAQ,kBAAoC,kBAAoC,CACrF;AAER;"}