@economic/taco 12.0.0 → 14.0.0-tanstack-virtual-update.0

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

@@ -1,8 +1,8 @@
 import cn from "clsx";
 import React__default from "react";
-import { Icon } from "../../../Icon/Icon.js";
 import { AgreementAvatar } from "./Avatar.js";
 import { AgreementBadge } from "./Badge.js";
+import { Icon } from "../../../Icon/Icon.js";
 const AgreementItem = (props) => {
   const { children, className: customClassName, fallbackImageSrc, ...agreement } = props;
   const className = cn("flex w-full items-center gap-2 overflow-hidden rounded px-2 text-left", customClassName);

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 cn from 'clsx';\nimport React from 'react';\n\nimport { Icon } from '../../../Icon/Icon';\n\nimport { AgreementAvatar } from './Avatar';\nimport { AgreementBadge } from './Badge';\nimport type { Agreement } from './types';\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":";;;;;AAeO,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;"}
+{"version":3,"file":"Item.js","sources":["../../../../../src/components/Header/components/Agreement/Item.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { Icon } from '@/components';\n\nimport { AgreementAvatar } from './Avatar';\nimport { AgreementBadge } from './Badge';\nimport type { Agreement } from './types';\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":";;;;;AAeO,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

@@ -3,11 +3,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const popover = require("@base-ui/react/popover");
 const React = require("react");
 const input = require("../../../utils/input.cjs");
-const Icon = require("../../Icon/Icon.cjs");
-const Localization = require("../../Provider/Localization.cjs");
-const SearchInput = require("../../SearchInput/SearchInput.cjs");
 const Display = require("./Agreement/Display.cjs");
 const Item = require("./Agreement/Item.cjs");
+const Localization = require("../../Provider/Localization.cjs");
+const Icon = require("../../Icon/Icon.cjs");
+const SearchInput = require("../../SearchInput/SearchInput.cjs");
 const Root = require("../../../primitives/Collection/components/Root.cjs");
 const Container = (props) => {
   return /* @__PURE__ */ React.createElement(

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

@@ -1 +1 @@
-{"version":3,"file":"AgreementSelector.cjs","sources":["../../../../src/components/Header/components/AgreementSelector.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport React from 'react';\n\nimport * as CollectionPrimitive from '../../../primitives/Collection/Collection';\nimport { createCustomKeyboardEvent } from '../../../utils/input';\nimport { Icon } from '../../Icon/Icon';\nimport { useLocalization } from '../../Provider/Localization';\nimport { SearchInput } from '../../SearchInput/SearchInput';\n\nimport { AgreementDisplay as Display } from './Agreement/Display';\nimport { AgreementItem } from './Agreement/Item';\nimport type { Agreement } from './Agreement/types';\n\nconst Container = (props: React.PropsWithChildren<unknown>) => {\n    return (\n        <div\n            // oxlint-disable-next-line taco/no-component-margin -- grandfathered; removing this margin is a visual breaking change\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));\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                                <button\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                                </button>\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","isCurrentAgreement","AgreementItem"],"mappings":"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"}
+{"version":3,"file":"AgreementSelector.cjs","sources":["../../../../src/components/Header/components/AgreementSelector.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport React from 'react';\n\nimport { Icon, SearchInput, useLocalization } from '@/components';\nimport * as CollectionPrimitive from '@/primitives/Collection/Collection';\nimport { createCustomKeyboardEvent } from '@/utils/input';\n\nimport { AgreementDisplay as Display } from './Agreement/Display';\nimport { AgreementItem } from './Agreement/Item';\nimport type { Agreement } from './Agreement/types';\n\nconst Container = (props: React.PropsWithChildren<unknown>) => {\n    return (\n        <div\n            // oxlint-disable-next-line taco/no-component-margin -- grandfathered; removing this margin is a visual breaking change\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));\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                                <button\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                                </button>\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","isCurrentAgreement","AgreementItem"],"mappings":"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"}

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

@@ -1,11 +1,11 @@
 import { Popover } from "@base-ui/react/popover";
 import React__default from "react";
 import { createCustomKeyboardEvent } from "../../../utils/input.js";
-import { Icon } from "../../Icon/Icon.js";
-import { useLocalization } from "../../Provider/Localization.js";
-import { SearchInput } from "../../SearchInput/SearchInput.js";
 import { AgreementDisplay as AgreementDisplay$1 } from "./Agreement/Display.js";
 import { AgreementItem } from "./Agreement/Item.js";
+import { useLocalization } from "../../Provider/Localization.js";
+import { Icon } from "../../Icon/Icon.js";
+import { SearchInput } from "../../SearchInput/SearchInput.js";
 import { Root } from "../../../primitives/Collection/components/Root.js";
 const Container = (props) => {
   return /* @__PURE__ */ React__default.createElement(

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

@@ -1 +1 @@
-{"version":3,"file":"AgreementSelector.js","sources":["../../../../src/components/Header/components/AgreementSelector.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport React from 'react';\n\nimport * as CollectionPrimitive from '../../../primitives/Collection/Collection';\nimport { createCustomKeyboardEvent } from '../../../utils/input';\nimport { Icon } from '../../Icon/Icon';\nimport { useLocalization } from '../../Provider/Localization';\nimport { SearchInput } from '../../SearchInput/SearchInput';\n\nimport { AgreementDisplay as Display } from './Agreement/Display';\nimport { AgreementItem } from './Agreement/Item';\nimport type { Agreement } from './Agreement/types';\n\nconst Container = (props: React.PropsWithChildren<unknown>) => {\n    return (\n        <div\n            // oxlint-disable-next-line taco/no-component-margin -- grandfathered; removing this margin is a visual breaking change\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));\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                                <button\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                                </button>\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":"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"}
+{"version":3,"file":"AgreementSelector.js","sources":["../../../../src/components/Header/components/AgreementSelector.tsx"],"sourcesContent":["import { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport React from 'react';\n\nimport { Icon, SearchInput, useLocalization } from '@/components';\nimport * as CollectionPrimitive from '@/primitives/Collection/Collection';\nimport { createCustomKeyboardEvent } from '@/utils/input';\n\nimport { AgreementDisplay as Display } from './Agreement/Display';\nimport { AgreementItem } from './Agreement/Item';\nimport type { Agreement } from './Agreement/types';\n\nconst Container = (props: React.PropsWithChildren<unknown>) => {\n    return (\n        <div\n            // oxlint-disable-next-line taco/no-component-margin -- grandfathered; removing this margin is a visual breaking change\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));\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                                <button\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                                </button>\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":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../../src/components/Header/components/Button.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport type { LegacyIconButtonProps } from '../../LegacyComponents/IconButton/IconButton';\nimport { LegacyIconButton } from '../../LegacyComponents/IconButton/IconButton';\n\nexport type ButtonProps = Omit<LegacyIconButtonProps, 'appearance' | 'aria-label'> & {\n    'aria-label': string;\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(props, ref) {\n    const { ...attributes } = props;\n    const className = cn(getButtonClasses(), props.className);\n\n    return <LegacyIconButton {...attributes} appearance=\"discrete\" className={className} data-taco=\"header-button\" ref={ref} />;\n});\n\nexport const getButtonClasses = (rounded = true) =>\n    cn(\n        'relative !h-9 !w-9 flex-shrink-0 flex-grow-0 cursor-pointer',\n        'focus:!shadow-none focus:!outline-none focus-visible:!yt-focus-dark',\n        'bg-transparent focus:!bg-white-subtle enabled:hover:bg-white-subtle aria-current-page:bg-white-subtle',\n        'text-white',\n        {\n            '!rounded-full': rounded,\n        }\n    );\n"],"names":["Button","LegacyIconButton"],"mappings":";;;;;AAUO,MAAM,SAAS,MAAM,WAA2C,SAASA,QAAO,OAAO,KAAK;AAC/F,QAAM,EAAE,GAAG,WAAA,IAAe;AAC1B,QAAM,YAAY,GAAG,iBAAA,GAAoB,MAAM,SAAS;AAExD,SAAO,sBAAA,cAACC,WAAAA,oBAAkB,GAAG,YAAY,YAAW,YAAW,WAAsB,aAAU,iBAAgB,IAAA,CAAU;AAC7H,CAAC;AAEM,MAAM,mBAAmB,CAAC,UAAU,SACvC;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,IACI,iBAAiB;AAAA,EAAA;AAEzB;;;"}
+{"version":3,"file":"Button.cjs","sources":["../../../../src/components/Header/components/Button.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport type { LegacyIconButtonProps } from '@/components';\nimport { LegacyIconButton } from '@/components';\n\nexport type ButtonProps = Omit<LegacyIconButtonProps, 'appearance' | 'aria-label'> & {\n    'aria-label': string;\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(props, ref) {\n    const { ...attributes } = props;\n    const className = cn(getButtonClasses(), props.className);\n\n    return <LegacyIconButton {...attributes} appearance=\"discrete\" className={className} data-taco=\"header-button\" ref={ref} />;\n});\n\nexport const getButtonClasses = (rounded = true) =>\n    cn(\n        'relative !h-9 !w-9 flex-shrink-0 flex-grow-0 cursor-pointer',\n        'focus:!shadow-none focus:!outline-none focus-visible:!yt-focus-dark',\n        'bg-transparent focus:!bg-white-subtle enabled:hover:bg-white-subtle aria-current-page:bg-white-subtle',\n        'text-white',\n        {\n            '!rounded-full': rounded,\n        }\n    );\n"],"names":["Button","LegacyIconButton"],"mappings":";;;;;AAUO,MAAM,SAAS,MAAM,WAA2C,SAASA,QAAO,OAAO,KAAK;AAC/F,QAAM,EAAE,GAAG,WAAA,IAAe;AAC1B,QAAM,YAAY,GAAG,iBAAA,GAAoB,MAAM,SAAS;AAExD,SAAO,sBAAA,cAACC,WAAAA,oBAAkB,GAAG,YAAY,YAAW,YAAW,WAAsB,aAAU,iBAAgB,IAAA,CAAU;AAC7H,CAAC;AAEM,MAAM,mBAAmB,CAAC,UAAU,SACvC;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,IACI,iBAAiB;AAAA,EAAA;AAEzB;;;"}

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

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { LegacyIconButtonProps } from '../../LegacyComponents/IconButton/IconButton';
+import { LegacyIconButtonProps } from '../..';
 export type ButtonProps = Omit<LegacyIconButtonProps, 'appearance' | 'aria-label'> & {
     'aria-label': string;
 };

package/dist/components/Header/components/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/Header/components/Button.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport type { LegacyIconButtonProps } from '../../LegacyComponents/IconButton/IconButton';\nimport { LegacyIconButton } from '../../LegacyComponents/IconButton/IconButton';\n\nexport type ButtonProps = Omit<LegacyIconButtonProps, 'appearance' | 'aria-label'> & {\n    'aria-label': string;\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(props, ref) {\n    const { ...attributes } = props;\n    const className = cn(getButtonClasses(), props.className);\n\n    return <LegacyIconButton {...attributes} appearance=\"discrete\" className={className} data-taco=\"header-button\" ref={ref} />;\n});\n\nexport const getButtonClasses = (rounded = true) =>\n    cn(\n        'relative !h-9 !w-9 flex-shrink-0 flex-grow-0 cursor-pointer',\n        'focus:!shadow-none focus:!outline-none focus-visible:!yt-focus-dark',\n        'bg-transparent focus:!bg-white-subtle enabled:hover:bg-white-subtle aria-current-page:bg-white-subtle',\n        'text-white',\n        {\n            '!rounded-full': rounded,\n        }\n    );\n"],"names":["React","Button"],"mappings":";;;AAUO,MAAM,SAASA,eAAM,WAA2C,SAASC,QAAO,OAAO,KAAK;AAC/F,QAAM,EAAE,GAAG,WAAA,IAAe;AAC1B,QAAM,YAAY,GAAG,iBAAA,GAAoB,MAAM,SAAS;AAExD,SAAOD,+BAAA,cAAC,oBAAkB,GAAG,YAAY,YAAW,YAAW,WAAsB,aAAU,iBAAgB,IAAA,CAAU;AAC7H,CAAC;AAEM,MAAM,mBAAmB,CAAC,UAAU,SACvC;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,IACI,iBAAiB;AAAA,EAAA;AAEzB;"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/Header/components/Button.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport type { LegacyIconButtonProps } from '@/components';\nimport { LegacyIconButton } from '@/components';\n\nexport type ButtonProps = Omit<LegacyIconButtonProps, 'appearance' | 'aria-label'> & {\n    'aria-label': string;\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(props, ref) {\n    const { ...attributes } = props;\n    const className = cn(getButtonClasses(), props.className);\n\n    return <LegacyIconButton {...attributes} appearance=\"discrete\" className={className} data-taco=\"header-button\" ref={ref} />;\n});\n\nexport const getButtonClasses = (rounded = true) =>\n    cn(\n        'relative !h-9 !w-9 flex-shrink-0 flex-grow-0 cursor-pointer',\n        'focus:!shadow-none focus:!outline-none focus-visible:!yt-focus-dark',\n        'bg-transparent focus:!bg-white-subtle enabled:hover:bg-white-subtle aria-current-page:bg-white-subtle',\n        'text-white',\n        {\n            '!rounded-full': rounded,\n        }\n    );\n"],"names":["React","Button"],"mappings":";;;AAUO,MAAM,SAASA,eAAM,WAA2C,SAASC,QAAO,OAAO,KAAK;AAC/F,QAAM,EAAE,GAAG,WAAA,IAAe;AAC1B,QAAM,YAAY,GAAG,iBAAA,GAAoB,MAAM,SAAS;AAExD,SAAOD,+BAAA,cAAC,oBAAkB,GAAG,YAAY,YAAW,YAAW,WAAsB,aAAU,iBAAgB,IAAA,CAAU;AAC7H,CAAC;AAEM,MAAM,mBAAmB,CAAC,UAAU,SACvC;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,IACI,iBAAiB;AAAA,EAAA;AAEzB;"}

package/dist/components/Header/components/Link.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const cn = require("clsx");
 const React = require("react");
-const Badge = require("../../Badge/Badge.cjs");
-const Icon = require("../../Icon/Icon.cjs");
 const Localization = require("../../Provider/Localization.cjs");
+const Icon = require("../../Icon/Icon.cjs");
+const Badge = require("../../Badge/Badge.cjs");
 const Tooltip = require("../../Tooltip/Tooltip.cjs");
 const Link = React.forwardRef(function Link2(props, ref) {
   const { children, icon, isNew, tooltip, ...otherProps } = props;

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

@@ -1 +1 @@
-{"version":3,"file":"Link.cjs","sources":["../../../../src/components/Header/components/Link.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { Badge } from '../../Badge/Badge';\nimport type { IconName } from '../../Icon/Icon';\nimport { Icon } from '../../Icon/Icon';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Tooltip } from '../../Tooltip/Tooltip';\n\nexport type BaseLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n    tooltip?: string;\n};\n\ntype LinkPropsWithoutIcon = {\n    children: React.JSX.Element | string;\n    icon?: never;\n    isNew?: never;\n} & BaseLinkProps;\n\ntype LinkPropsWithIcon = {\n    'aria-label': string;\n    children?: never;\n    icon: IconName;\n    isNew?: boolean;\n} & Omit<BaseLinkProps, 'aria-label'>;\n\nexport type LinkProps = LinkPropsWithoutIcon | LinkPropsWithIcon;\n\nexport const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props, ref) {\n    const { children, icon, isNew, tooltip, ...otherProps } = props;\n    const { texts } = useLocalization();\n    const className = cn(getLinkClasses(icon), 'relative', props.className);\n\n    const link = (\n        <a {...otherProps} className={className} data-taco=\"header-link\" ref={ref} tabIndex={0}>\n            {icon ? <Icon name={icon} /> : null}\n            {children}\n            {isNew ? (\n                <Badge color=\"blue\" small className=\"absolute right-0 top-0 -mr-3 -mt-2 !h-4 !px-1 text-xs font-normal\">\n                    {texts.header.new}\n                </Badge>\n            ) : null}\n        </a>\n    );\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{link}</Tooltip>;\n    }\n\n    return link;\n});\n\nexport const getLinkClasses = (icon: IconName | undefined = undefined) =>\n    cn(\n        'flex h-8 flex-shrink-0 flex-grow-0 cursor-pointer items-center justify-center',\n        'focus:!shadow-none focus:!outline-none focus-visible:!yt-focus-dark',\n        'bg-transparent hover:bg-white-subtle focus:bg-white-subtle aria-current-page:bg-white-subtle',\n        '!text-white hover:text-white focus:text-white',\n        {\n            '!h-9 !w-9 !rounded-full': icon,\n            'hidden whitespace-nowrap rounded px-3 text-sm lg:flex': !icon,\n        }\n    );\n"],"names":["Link","useLocalization","Icon","Badge","Tooltip"],"mappings":";;;;;;;;AA4BO,MAAM,OAAO,MAAM,WAAyC,SAASA,MAAK,OAAO,KAAK;AACzF,QAAM,EAAE,UAAU,MAAM,OAAO,SAAS,GAAG,eAAe;AAC1D,QAAM,EAAE,MAAA,IAAUC,6BAAA;AAClB,QAAM,YAAY,GAAG,eAAe,IAAI,GAAG,YAAY,MAAM,SAAS;AAEtE,QAAM,OACF,sBAAA,cAAC,KAAA,EAAG,GAAG,YAAY,WAAsB,aAAU,eAAc,KAAU,UAAU,KAChF,OAAO,sBAAA,cAACC,KAAAA,QAAK,MAAM,KAAA,CAAM,IAAK,MAC9B,UACA,QACG,sBAAA,cAACC,MAAAA,OAAA,EAAM,OAAM,QAAO,OAAK,MAAC,WAAU,oEAAA,GAC/B,MAAM,OAAO,GAClB,IACA,IACR;AAGJ,MAAI,SAAS;AACT,WAAO,sBAAA,cAACC,QAAAA,SAAA,EAAQ,OAAO,QAAA,GAAU,IAAK;AAAA,EAC1C;AAEA,SAAO;AACX,CAAC;AAEM,MAAM,iBAAiB,CAAC,OAA6B,WACxD;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,IACI,2BAA2B;AAAA,IAC3B,yDAAyD,CAAC;AAAA,EAAA;AAElE;;;"}
+{"version":3,"file":"Link.cjs","sources":["../../../../src/components/Header/components/Link.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport type { IconName } from '@/components';\nimport { Badge, Icon, Tooltip, useLocalization } from '@/components';\n\nexport type BaseLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n    tooltip?: string;\n};\n\ntype LinkPropsWithoutIcon = {\n    children: React.JSX.Element | string;\n    icon?: never;\n    isNew?: never;\n} & BaseLinkProps;\n\ntype LinkPropsWithIcon = {\n    'aria-label': string;\n    children?: never;\n    icon: IconName;\n    isNew?: boolean;\n} & Omit<BaseLinkProps, 'aria-label'>;\n\nexport type LinkProps = LinkPropsWithoutIcon | LinkPropsWithIcon;\n\nexport const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props, ref) {\n    const { children, icon, isNew, tooltip, ...otherProps } = props;\n    const { texts } = useLocalization();\n    const className = cn(getLinkClasses(icon), 'relative', props.className);\n\n    const link = (\n        <a {...otherProps} className={className} data-taco=\"header-link\" ref={ref} tabIndex={0}>\n            {icon ? <Icon name={icon} /> : null}\n            {children}\n            {isNew ? (\n                <Badge color=\"blue\" small className=\"absolute right-0 top-0 -mr-3 -mt-2 !h-4 !px-1 text-xs font-normal\">\n                    {texts.header.new}\n                </Badge>\n            ) : null}\n        </a>\n    );\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{link}</Tooltip>;\n    }\n\n    return link;\n});\n\nexport const getLinkClasses = (icon: IconName | undefined = undefined) =>\n    cn(\n        'flex h-8 flex-shrink-0 flex-grow-0 cursor-pointer items-center justify-center',\n        'focus:!shadow-none focus:!outline-none focus-visible:!yt-focus-dark',\n        'bg-transparent hover:bg-white-subtle focus:bg-white-subtle aria-current-page:bg-white-subtle',\n        '!text-white hover:text-white focus:text-white',\n        {\n            '!h-9 !w-9 !rounded-full': icon,\n            'hidden whitespace-nowrap rounded px-3 text-sm lg:flex': !icon,\n        }\n    );\n"],"names":["Link","useLocalization","Icon","Badge","Tooltip"],"mappings":";;;;;;;;AAyBO,MAAM,OAAO,MAAM,WAAyC,SAASA,MAAK,OAAO,KAAK;AACzF,QAAM,EAAE,UAAU,MAAM,OAAO,SAAS,GAAG,eAAe;AAC1D,QAAM,EAAE,MAAA,IAAUC,6BAAA;AAClB,QAAM,YAAY,GAAG,eAAe,IAAI,GAAG,YAAY,MAAM,SAAS;AAEtE,QAAM,OACF,sBAAA,cAAC,KAAA,EAAG,GAAG,YAAY,WAAsB,aAAU,eAAc,KAAU,UAAU,KAChF,OAAO,sBAAA,cAACC,KAAAA,QAAK,MAAM,KAAA,CAAM,IAAK,MAC9B,UACA,QACG,sBAAA,cAACC,MAAAA,OAAA,EAAM,OAAM,QAAO,OAAK,MAAC,WAAU,oEAAA,GAC/B,MAAM,OAAO,GAClB,IACA,IACR;AAGJ,MAAI,SAAS;AACT,WAAO,sBAAA,cAACC,QAAAA,SAAA,EAAQ,OAAO,QAAA,GAAU,IAAK;AAAA,EAC1C;AAEA,SAAO;AACX,CAAC;AAEM,MAAM,iBAAiB,CAAC,OAA6B,WACxD;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,IACI,2BAA2B;AAAA,IAC3B,yDAAyD,CAAC;AAAA,EAAA;AAElE;;;"}

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

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { IconName } from '../../Icon/Icon';
+import { IconName } from '../..';
 export type BaseLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
     tooltip?: string;
 };

package/dist/components/Header/components/Link.js

@@ -1,8 +1,8 @@
 import cn from "clsx";
 import React__default from "react";
-import { Badge } from "../../Badge/Badge.js";
-import { Icon } from "../../Icon/Icon.js";
 import { useLocalization } from "../../Provider/Localization.js";
+import { Icon } from "../../Icon/Icon.js";
+import { Badge } from "../../Badge/Badge.js";
 import { Tooltip } from "../../Tooltip/Tooltip.js";
 const Link = React__default.forwardRef(function Link2(props, ref) {
   const { children, icon, isNew, tooltip, ...otherProps } = props;

package/dist/components/Header/components/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../../../../src/components/Header/components/Link.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { Badge } from '../../Badge/Badge';\nimport type { IconName } from '../../Icon/Icon';\nimport { Icon } from '../../Icon/Icon';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Tooltip } from '../../Tooltip/Tooltip';\n\nexport type BaseLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n    tooltip?: string;\n};\n\ntype LinkPropsWithoutIcon = {\n    children: React.JSX.Element | string;\n    icon?: never;\n    isNew?: never;\n} & BaseLinkProps;\n\ntype LinkPropsWithIcon = {\n    'aria-label': string;\n    children?: never;\n    icon: IconName;\n    isNew?: boolean;\n} & Omit<BaseLinkProps, 'aria-label'>;\n\nexport type LinkProps = LinkPropsWithoutIcon | LinkPropsWithIcon;\n\nexport const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props, ref) {\n    const { children, icon, isNew, tooltip, ...otherProps } = props;\n    const { texts } = useLocalization();\n    const className = cn(getLinkClasses(icon), 'relative', props.className);\n\n    const link = (\n        <a {...otherProps} className={className} data-taco=\"header-link\" ref={ref} tabIndex={0}>\n            {icon ? <Icon name={icon} /> : null}\n            {children}\n            {isNew ? (\n                <Badge color=\"blue\" small className=\"absolute right-0 top-0 -mr-3 -mt-2 !h-4 !px-1 text-xs font-normal\">\n                    {texts.header.new}\n                </Badge>\n            ) : null}\n        </a>\n    );\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{link}</Tooltip>;\n    }\n\n    return link;\n});\n\nexport const getLinkClasses = (icon: IconName | undefined = undefined) =>\n    cn(\n        'flex h-8 flex-shrink-0 flex-grow-0 cursor-pointer items-center justify-center',\n        'focus:!shadow-none focus:!outline-none focus-visible:!yt-focus-dark',\n        'bg-transparent hover:bg-white-subtle focus:bg-white-subtle aria-current-page:bg-white-subtle',\n        '!text-white hover:text-white focus:text-white',\n        {\n            '!h-9 !w-9 !rounded-full': icon,\n            'hidden whitespace-nowrap rounded px-3 text-sm lg:flex': !icon,\n        }\n    );\n"],"names":["React","Link"],"mappings":";;;;;;AA4BO,MAAM,OAAOA,eAAM,WAAyC,SAASC,MAAK,OAAO,KAAK;AACzF,QAAM,EAAE,UAAU,MAAM,OAAO,SAAS,GAAG,eAAe;AAC1D,QAAM,EAAE,MAAA,IAAU,gBAAA;AAClB,QAAM,YAAY,GAAG,eAAe,IAAI,GAAG,YAAY,MAAM,SAAS;AAEtE,QAAM,OACFD,+BAAA,cAAC,KAAA,EAAG,GAAG,YAAY,WAAsB,aAAU,eAAc,KAAU,UAAU,KAChF,OAAOA,+BAAA,cAAC,QAAK,MAAM,KAAA,CAAM,IAAK,MAC9B,UACA,QACGA,+BAAA,cAAC,OAAA,EAAM,OAAM,QAAO,OAAK,MAAC,WAAU,oEAAA,GAC/B,MAAM,OAAO,GAClB,IACA,IACR;AAGJ,MAAI,SAAS;AACT,WAAOA,+BAAA,cAAC,SAAA,EAAQ,OAAO,QAAA,GAAU,IAAK;AAAA,EAC1C;AAEA,SAAO;AACX,CAAC;AAEM,MAAM,iBAAiB,CAAC,OAA6B,WACxD;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,IACI,2BAA2B;AAAA,IAC3B,yDAAyD,CAAC;AAAA,EAAA;AAElE;"}
+{"version":3,"file":"Link.js","sources":["../../../../src/components/Header/components/Link.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport type { IconName } from '@/components';\nimport { Badge, Icon, Tooltip, useLocalization } from '@/components';\n\nexport type BaseLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n    tooltip?: string;\n};\n\ntype LinkPropsWithoutIcon = {\n    children: React.JSX.Element | string;\n    icon?: never;\n    isNew?: never;\n} & BaseLinkProps;\n\ntype LinkPropsWithIcon = {\n    'aria-label': string;\n    children?: never;\n    icon: IconName;\n    isNew?: boolean;\n} & Omit<BaseLinkProps, 'aria-label'>;\n\nexport type LinkProps = LinkPropsWithoutIcon | LinkPropsWithIcon;\n\nexport const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props, ref) {\n    const { children, icon, isNew, tooltip, ...otherProps } = props;\n    const { texts } = useLocalization();\n    const className = cn(getLinkClasses(icon), 'relative', props.className);\n\n    const link = (\n        <a {...otherProps} className={className} data-taco=\"header-link\" ref={ref} tabIndex={0}>\n            {icon ? <Icon name={icon} /> : null}\n            {children}\n            {isNew ? (\n                <Badge color=\"blue\" small className=\"absolute right-0 top-0 -mr-3 -mt-2 !h-4 !px-1 text-xs font-normal\">\n                    {texts.header.new}\n                </Badge>\n            ) : null}\n        </a>\n    );\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{link}</Tooltip>;\n    }\n\n    return link;\n});\n\nexport const getLinkClasses = (icon: IconName | undefined = undefined) =>\n    cn(\n        'flex h-8 flex-shrink-0 flex-grow-0 cursor-pointer items-center justify-center',\n        'focus:!shadow-none focus:!outline-none focus-visible:!yt-focus-dark',\n        'bg-transparent hover:bg-white-subtle focus:bg-white-subtle aria-current-page:bg-white-subtle',\n        '!text-white hover:text-white focus:text-white',\n        {\n            '!h-9 !w-9 !rounded-full': icon,\n            'hidden whitespace-nowrap rounded px-3 text-sm lg:flex': !icon,\n        }\n    );\n"],"names":["React","Link"],"mappings":";;;;;;AAyBO,MAAM,OAAOA,eAAM,WAAyC,SAASC,MAAK,OAAO,KAAK;AACzF,QAAM,EAAE,UAAU,MAAM,OAAO,SAAS,GAAG,eAAe;AAC1D,QAAM,EAAE,MAAA,IAAU,gBAAA;AAClB,QAAM,YAAY,GAAG,eAAe,IAAI,GAAG,YAAY,MAAM,SAAS;AAEtE,QAAM,OACFD,+BAAA,cAAC,KAAA,EAAG,GAAG,YAAY,WAAsB,aAAU,eAAc,KAAU,UAAU,KAChF,OAAOA,+BAAA,cAAC,QAAK,MAAM,KAAA,CAAM,IAAK,MAC9B,UACA,QACGA,+BAAA,cAAC,OAAA,EAAM,OAAM,QAAO,OAAK,MAAC,WAAU,oEAAA,GAC/B,MAAM,OAAO,GAClB,IACA,IACR;AAGJ,MAAI,SAAS;AACT,WAAOA,+BAAA,cAAC,SAAA,EAAQ,OAAO,QAAA,GAAU,IAAK;AAAA,EAC1C;AAEA,SAAO;AACX,CAAC;AAEM,MAAM,iBAAiB,CAAC,OAA6B,WACxD;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,IACI,2BAA2B;AAAA,IAC3B,yDAAyD,CAAC;AAAA,EAAA;AAElE;"}

package/dist/components/Header/components/MenuButton.cjs

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const cn = require("clsx");
 const React = require("react");
-const IconButton = require("../../LegacyComponents/IconButton/IconButton.cjs");
 const Button = require("./Button.cjs");
+const IconButton = require("../../LegacyComponents/IconButton/IconButton.cjs");
 const MenuButton = React.forwardRef(function MenuButton2(props, ref) {
   const className = cn(
     Button.getButtonClasses(false),

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

@@ -1 +1 @@
-{"version":3,"file":"MenuButton.cjs","sources":["../../../../src/components/Header/components/MenuButton.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { LegacyIconButton } from '../../LegacyComponents/IconButton/IconButton';\n\nimport { getButtonClasses } from './Button';\n\nexport type MenuButtonProps = {\n    onClick: () => void;\n};\n\nexport const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(function MenuButton(props, ref) {\n    const className = cn(\n        getButtonClasses(false),\n        'z-[2] mr-1 !bg-transparent !text-white hover:!bg-white-subtle focus:!bg-white-subtle lg:hidden'\n    );\n\n    return <LegacyIconButton {...props} className={className} data-taco=\"header-toggle-sidebar\" icon=\"menu\" ref={ref} />;\n});\n"],"names":["MenuButton","getButtonClasses","LegacyIconButton"],"mappings":";;;;;;AAWO,MAAM,aAAa,MAAM,WAA+C,SAASA,YAAW,OAAO,KAAK;AAC3G,QAAM,YAAY;AAAA,IACdC,OAAAA,iBAAiB,KAAK;AAAA,IACtB;AAAA,EAAA;AAGJ,SAAO,sBAAA,cAACC,WAAAA,oBAAkB,GAAG,OAAO,WAAsB,aAAU,yBAAwB,MAAK,QAAO,IAAA,CAAU;AACtH,CAAC;;"}
+{"version":3,"file":"MenuButton.cjs","sources":["../../../../src/components/Header/components/MenuButton.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { LegacyIconButton } from '@/components';\n\nimport { getButtonClasses } from './Button';\n\nexport type MenuButtonProps = {\n    onClick: () => void;\n};\n\nexport const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(function MenuButton(props, ref) {\n    const className = cn(\n        getButtonClasses(false),\n        'z-[2] mr-1 !bg-transparent !text-white hover:!bg-white-subtle focus:!bg-white-subtle lg:hidden'\n    );\n\n    return <LegacyIconButton {...props} className={className} data-taco=\"header-toggle-sidebar\" icon=\"menu\" ref={ref} />;\n});\n"],"names":["MenuButton","getButtonClasses","LegacyIconButton"],"mappings":";;;;;;AAWO,MAAM,aAAa,MAAM,WAA+C,SAASA,YAAW,OAAO,KAAK;AAC3G,QAAM,YAAY;AAAA,IACdC,OAAAA,iBAAiB,KAAK;AAAA,IACtB;AAAA,EAAA;AAGJ,SAAO,sBAAA,cAACC,WAAAA,oBAAkB,GAAG,OAAO,WAAsB,aAAU,yBAAwB,MAAK,QAAO,IAAA,CAAU;AACtH,CAAC;;"}

package/dist/components/Header/components/MenuButton.js

@@ -1,7 +1,7 @@
 import cn from "clsx";
 import React__default from "react";
-import { LegacyIconButton } from "../../LegacyComponents/IconButton/IconButton.js";
 import { getButtonClasses } from "./Button.js";
+import { LegacyIconButton } from "../../LegacyComponents/IconButton/IconButton.js";
 const MenuButton = React__default.forwardRef(function MenuButton2(props, ref) {
   const className = cn(
     getButtonClasses(false),

package/dist/components/Header/components/MenuButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuButton.js","sources":["../../../../src/components/Header/components/MenuButton.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { LegacyIconButton } from '../../LegacyComponents/IconButton/IconButton';\n\nimport { getButtonClasses } from './Button';\n\nexport type MenuButtonProps = {\n    onClick: () => void;\n};\n\nexport const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(function MenuButton(props, ref) {\n    const className = cn(\n        getButtonClasses(false),\n        'z-[2] mr-1 !bg-transparent !text-white hover:!bg-white-subtle focus:!bg-white-subtle lg:hidden'\n    );\n\n    return <LegacyIconButton {...props} className={className} data-taco=\"header-toggle-sidebar\" icon=\"menu\" ref={ref} />;\n});\n"],"names":["React","MenuButton"],"mappings":";;;;AAWO,MAAM,aAAaA,eAAM,WAA+C,SAASC,YAAW,OAAO,KAAK;AAC3G,QAAM,YAAY;AAAA,IACd,iBAAiB,KAAK;AAAA,IACtB;AAAA,EAAA;AAGJ,SAAOD,+BAAA,cAAC,oBAAkB,GAAG,OAAO,WAAsB,aAAU,yBAAwB,MAAK,QAAO,IAAA,CAAU;AACtH,CAAC;"}
+{"version":3,"file":"MenuButton.js","sources":["../../../../src/components/Header/components/MenuButton.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { LegacyIconButton } from '@/components';\n\nimport { getButtonClasses } from './Button';\n\nexport type MenuButtonProps = {\n    onClick: () => void;\n};\n\nexport const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(function MenuButton(props, ref) {\n    const className = cn(\n        getButtonClasses(false),\n        'z-[2] mr-1 !bg-transparent !text-white hover:!bg-white-subtle focus:!bg-white-subtle lg:hidden'\n    );\n\n    return <LegacyIconButton {...props} className={className} data-taco=\"header-toggle-sidebar\" icon=\"menu\" ref={ref} />;\n});\n"],"names":["React","MenuButton"],"mappings":";;;;AAWO,MAAM,aAAaA,eAAM,WAA+C,SAASC,YAAW,OAAO,KAAK;AAC3G,QAAM,YAAY;AAAA,IACd,iBAAiB,KAAK;AAAA,IACtB;AAAA,EAAA;AAGJ,SAAOD,+BAAA,cAAC,oBAAkB,GAAG,OAAO,WAAsB,aAAU,yBAAwB,MAAK,QAAO,IAAA,CAAU;AACtH,CAAC;"}

package/dist/components/Header/components/PrimaryNavigation.cjs

@@ -3,10 +3,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const cn = require("clsx");
 const React = require("react");
 const useMergedRef = require("../../../hooks/useMergedRef.cjs");
-const Button = require("../../LegacyComponents/Button/Button.cjs");
-const OverflowGroup = require("../../OverflowGroup/OverflowGroup.cjs");
-const Localization = require("../../Provider/Localization.cjs");
 const Link = require("./Link.cjs");
+const Localization = require("../../Provider/Localization.cjs");
+const OverflowGroup = require("../../OverflowGroup/OverflowGroup.cjs");
+const Button = require("../../LegacyComponents/Button/Button.cjs");
 const PrimaryNavigation = React.forwardRef(function PrimaryNavigation2(props, ref) {
   const { texts } = Localization.useLocalization();
   const internalRef = useMergedRef.useMergedRef(ref);

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

@@ -1 +1 @@
-{"version":3,"file":"PrimaryNavigation.cjs","sources":["../../../../src/components/Header/components/PrimaryNavigation.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { LegacyButton } from '../../LegacyComponents/Button/Button';\nimport { OverflowGroup } from '../../OverflowGroup/OverflowGroup';\nimport { useLocalization } from '../../Provider/Localization';\n\nimport { getLinkClasses } from './Link';\n\nexport type PrimaryNavigationProps = React.HTMLAttributes<HTMLElement>;\n\nexport const PrimaryNavigation = React.forwardRef<HTMLElement, PrimaryNavigationProps>(function PrimaryNavigation(props, ref) {\n    const { texts } = useLocalization();\n    const internalRef = useMergedRef<HTMLDivElement>(ref);\n\n    const className = cn(\n        'relative flex h-full w-full flex-grow items-center overflow-hidden active:outline-none',\n        props.className\n    );\n\n    const moreButton = () => (\n        <LegacyButton className={cn(getLinkClasses(), '!bg-transparent aria-expanded:!bg-white-subtle')}>\n            {texts.header.more}\n        </LegacyButton>\n    );\n    return (\n        <nav {...props} className={className} ref={internalRef}>\n            <OverflowGroup className=\"h-full flex-grow items-center gap-1 px-1\" moreButton={moreButton}>\n                {props.children}\n            </OverflowGroup>\n        </nav>\n    );\n});\n"],"names":["PrimaryNavigation","useLocalization","useMergedRef","LegacyButton","getLinkClasses","OverflowGroup"],"mappings":";;;;;;;;;AAYO,MAAM,oBAAoB,MAAM,WAAgD,SAASA,mBAAkB,OAAO,KAAK;AAC1H,QAAM,EAAE,MAAA,IAAUC,6BAAA;AAClB,QAAM,cAAcC,aAAAA,aAA6B,GAAG;AAEpD,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EAAA;AAGV,QAAM,aAAa,MACf,sBAAA,cAACC,OAAAA,cAAA,EAAa,WAAW,GAAGC,KAAAA,eAAA,GAAkB,gDAAgD,EAAA,GACzF,MAAM,OAAO,IAClB;AAEJ,SACI,sBAAA,cAAC,OAAA,EAAK,GAAG,OAAO,WAAsB,KAAK,YAAA,GACvC,sBAAA,cAACC,cAAAA,eAAA,EAAc,WAAU,4CAA2C,cAC/D,MAAM,QACX,CACJ;AAER,CAAC;;"}
+{"version":3,"file":"PrimaryNavigation.cjs","sources":["../../../../src/components/Header/components/PrimaryNavigation.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { LegacyButton, OverflowGroup, useLocalization } from '@/components';\nimport { useMergedRef } from '@/hooks/useMergedRef';\n\nimport { getLinkClasses } from './Link';\n\nexport type PrimaryNavigationProps = React.HTMLAttributes<HTMLElement>;\n\nexport const PrimaryNavigation = React.forwardRef<HTMLElement, PrimaryNavigationProps>(function PrimaryNavigation(props, ref) {\n    const { texts } = useLocalization();\n    const internalRef = useMergedRef<HTMLDivElement>(ref);\n\n    const className = cn(\n        'relative flex h-full w-full flex-grow items-center overflow-hidden active:outline-none',\n        props.className\n    );\n\n    const moreButton = () => (\n        <LegacyButton className={cn(getLinkClasses(), '!bg-transparent aria-expanded:!bg-white-subtle')}>\n            {texts.header.more}\n        </LegacyButton>\n    );\n    return (\n        <nav {...props} className={className} ref={internalRef}>\n            <OverflowGroup className=\"h-full flex-grow items-center gap-1 px-1\" moreButton={moreButton}>\n                {props.children}\n            </OverflowGroup>\n        </nav>\n    );\n});\n"],"names":["PrimaryNavigation","useLocalization","useMergedRef","LegacyButton","getLinkClasses","OverflowGroup"],"mappings":";;;;;;;;;AAUO,MAAM,oBAAoB,MAAM,WAAgD,SAASA,mBAAkB,OAAO,KAAK;AAC1H,QAAM,EAAE,MAAA,IAAUC,6BAAA;AAClB,QAAM,cAAcC,aAAAA,aAA6B,GAAG;AAEpD,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EAAA;AAGV,QAAM,aAAa,MACf,sBAAA,cAACC,OAAAA,cAAA,EAAa,WAAW,GAAGC,KAAAA,eAAA,GAAkB,gDAAgD,EAAA,GACzF,MAAM,OAAO,IAClB;AAEJ,SACI,sBAAA,cAAC,OAAA,EAAK,GAAG,OAAO,WAAsB,KAAK,YAAA,GACvC,sBAAA,cAACC,cAAAA,eAAA,EAAc,WAAU,4CAA2C,cAC/D,MAAM,QACX,CACJ;AAER,CAAC;;"}

package/dist/components/Header/components/PrimaryNavigation.js

@@ -1,10 +1,10 @@
 import cn from "clsx";
 import React__default from "react";
 import { useMergedRef } from "../../../hooks/useMergedRef.js";
-import { LegacyButton } from "../../LegacyComponents/Button/Button.js";
-import { OverflowGroup } from "../../OverflowGroup/OverflowGroup.js";
-import { useLocalization } from "../../Provider/Localization.js";
 import { getLinkClasses } from "./Link.js";
+import { useLocalization } from "../../Provider/Localization.js";
+import { OverflowGroup } from "../../OverflowGroup/OverflowGroup.js";
+import { LegacyButton } from "../../LegacyComponents/Button/Button.js";
 const PrimaryNavigation = React__default.forwardRef(function PrimaryNavigation2(props, ref) {
   const { texts } = useLocalization();
   const internalRef = useMergedRef(ref);

package/dist/components/Header/components/PrimaryNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimaryNavigation.js","sources":["../../../../src/components/Header/components/PrimaryNavigation.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { LegacyButton } from '../../LegacyComponents/Button/Button';\nimport { OverflowGroup } from '../../OverflowGroup/OverflowGroup';\nimport { useLocalization } from '../../Provider/Localization';\n\nimport { getLinkClasses } from './Link';\n\nexport type PrimaryNavigationProps = React.HTMLAttributes<HTMLElement>;\n\nexport const PrimaryNavigation = React.forwardRef<HTMLElement, PrimaryNavigationProps>(function PrimaryNavigation(props, ref) {\n    const { texts } = useLocalization();\n    const internalRef = useMergedRef<HTMLDivElement>(ref);\n\n    const className = cn(\n        'relative flex h-full w-full flex-grow items-center overflow-hidden active:outline-none',\n        props.className\n    );\n\n    const moreButton = () => (\n        <LegacyButton className={cn(getLinkClasses(), '!bg-transparent aria-expanded:!bg-white-subtle')}>\n            {texts.header.more}\n        </LegacyButton>\n    );\n    return (\n        <nav {...props} className={className} ref={internalRef}>\n            <OverflowGroup className=\"h-full flex-grow items-center gap-1 px-1\" moreButton={moreButton}>\n                {props.children}\n            </OverflowGroup>\n        </nav>\n    );\n});\n"],"names":["React","PrimaryNavigation"],"mappings":";;;;;;;AAYO,MAAM,oBAAoBA,eAAM,WAAgD,SAASC,mBAAkB,OAAO,KAAK;AAC1H,QAAM,EAAE,MAAA,IAAU,gBAAA;AAClB,QAAM,cAAc,aAA6B,GAAG;AAEpD,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EAAA;AAGV,QAAM,aAAa,MACfD,+BAAA,cAAC,cAAA,EAAa,WAAW,GAAG,eAAA,GAAkB,gDAAgD,EAAA,GACzF,MAAM,OAAO,IAClB;AAEJ,SACIA,+BAAA,cAAC,OAAA,EAAK,GAAG,OAAO,WAAsB,KAAK,YAAA,GACvCA,+BAAA,cAAC,eAAA,EAAc,WAAU,4CAA2C,cAC/D,MAAM,QACX,CACJ;AAER,CAAC;"}
+{"version":3,"file":"PrimaryNavigation.js","sources":["../../../../src/components/Header/components/PrimaryNavigation.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { LegacyButton, OverflowGroup, useLocalization } from '@/components';\nimport { useMergedRef } from '@/hooks/useMergedRef';\n\nimport { getLinkClasses } from './Link';\n\nexport type PrimaryNavigationProps = React.HTMLAttributes<HTMLElement>;\n\nexport const PrimaryNavigation = React.forwardRef<HTMLElement, PrimaryNavigationProps>(function PrimaryNavigation(props, ref) {\n    const { texts } = useLocalization();\n    const internalRef = useMergedRef<HTMLDivElement>(ref);\n\n    const className = cn(\n        'relative flex h-full w-full flex-grow items-center overflow-hidden active:outline-none',\n        props.className\n    );\n\n    const moreButton = () => (\n        <LegacyButton className={cn(getLinkClasses(), '!bg-transparent aria-expanded:!bg-white-subtle')}>\n            {texts.header.more}\n        </LegacyButton>\n    );\n    return (\n        <nav {...props} className={className} ref={internalRef}>\n            <OverflowGroup className=\"h-full flex-grow items-center gap-1 px-1\" moreButton={moreButton}>\n                {props.children}\n            </OverflowGroup>\n        </nav>\n    );\n});\n"],"names":["React","PrimaryNavigation"],"mappings":";;;;;;;AAUO,MAAM,oBAAoBA,eAAM,WAAgD,SAASC,mBAAkB,OAAO,KAAK;AAC1H,QAAM,EAAE,MAAA,IAAU,gBAAA;AAClB,QAAM,cAAc,aAA6B,GAAG;AAEpD,QAAM,YAAY;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EAAA;AAGV,QAAM,aAAa,MACfD,+BAAA,cAAC,cAAA,EAAa,WAAW,GAAG,eAAA,GAAkB,gDAAgD,EAAA,GACzF,MAAM,OAAO,IAClB;AAEJ,SACIA,+BAAA,cAAC,OAAA,EAAK,GAAG,OAAO,WAAsB,KAAK,YAAA,GACvCA,+BAAA,cAAC,eAAA,EAAc,WAAU,4CAA2C,cAC/D,MAAM,QACX,CACJ;AAER,CAAC;"}

package/dist/components/HoverCard/HoverCard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HoverCard.cjs","sources":["../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport type { Placement } from '../..';\nimport { getPopoverStyleClassnames } from '../Popover/util';\n\nconst Arrow = () => (\n    <PreviewCardPrimitive.Arrow className=\"data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=right]:left-[-13px] data-[side=top]:bottom-[-8px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n        <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\">\n            <path\n                d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                className=\"fill-[canvas]\"\n            />\n            <path\n                d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n                className=\"fill-gray-100 dark:fill-none\"\n            />\n            <path\n                d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n                className=\"dark:fill-gray-100\"\n            />\n        </svg>\n    </PreviewCardPrimitive.Arrow>\n);\n\n/**\n * @deprecated\n */\nexport type HoverCardTriggerProps = React.HTMLAttributes<HTMLAnchorElement> & { children: React.ReactElement };\nconst Trigger = React.forwardRef(function HoverCardTrigger(props: HoverCardTriggerProps, ref: React.Ref<HTMLAnchorElement>) {\n    const { children, className, ...otherProps } = props;\n\n    return (\n        <PreviewCardPrimitive.Trigger\n            {...otherProps}\n            className={cn('text-black', className)}\n            delay={300}\n            ref={ref}\n            render={children}\n        />\n    );\n});\n\n/**\n * @deprecated\n */\nexport type HoverCardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the HoverCard relative to its trigger. Default value is `bottom` */\n    placement?: Placement;\n};\nconst Content = React.forwardRef(function HoverCardContent(props: HoverCardContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side } = props;\n    const className = cn(getPopoverStyleClassnames(), 'min-w-[theme(spacing.40)] max-w-[theme(spacing.96)]', props.className);\n\n    return (\n        <PreviewCardPrimitive.Portal>\n            <PreviewCardPrimitive.Positioner side={side} sideOffset={12}>\n                <PreviewCardPrimitive.Popup className={className} data-taco=\"hover-card\" ref={ref}>\n                    {props.children}\n                    <Arrow />\n                </PreviewCardPrimitive.Popup>\n            </PreviewCardPrimitive.Positioner>\n        </PreviewCardPrimitive.Portal>\n    );\n});\n\n/**\n * @deprecated\n */\nexport type HoverCardProps = React.PropsWithChildren<object>;\n\n/**\n * @deprecated\n */\nexport const HoverCard = Object.assign((props: HoverCardProps) => <PreviewCardPrimitive.Root {...props} />, {\n    Trigger,\n    Content,\n});\n"],"names":["React","PreviewCardPrimitive","getPopoverStyleClassnames"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,QAAQ,MACVA,iCAAA,cAACC,YAAAA,YAAqB,OAArB,EAA2B,WAAU,kNAClCD,iCAAA,cAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,UACjDA,iCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,GAAE;AAAA,IACF,WAAU;AAAA,EAAA;AACd,GACAA,iCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,GAAE;AAAA,IACF,WAAU;AAAA,EAAA;AACd,GACAA,iCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,GAAE;AAAA,IACF,WAAU;AAAA,EAAA;AACd,CACJ,CACJ;AAOJ,MAAM,UAAUA,iBAAM,WAAW,SAAS,iBAAiB,OAA8B,KAAmC;AACxH,QAAM,EAAE,UAAU,WAAW,GAAG,eAAe;AAE/C,SACIA,iCAAA;AAAA,IAACC,YAAAA,YAAqB;AAAA,IAArB;AAAA,MACI,GAAG;AAAA,MACJ,WAAW,GAAG,cAAc,SAAS;AAAA,MACrC,OAAO;AAAA,MACP;AAAA,MACA,QAAQ;AAAA,IAAA;AAAA,EAAA;AAGpB,CAAC;AASD,MAAM,UAAUD,iBAAM,WAAW,SAAS,iBAAiB,OAA8B,KAAgC;AACrH,QAAM,EAAE,WAAW,KAAA,IAAS;AAC5B,QAAM,YAAY,GAAGE,KAAAA,0BAAA,GAA6B,uDAAuD,MAAM,SAAS;AAExH,SACIF,iCAAA,cAACC,YAAAA,YAAqB,QAArB,MACGD,iCAAA,cAACC,YAAAA,YAAqB,YAArB,EAAgC,MAAY,YAAY,GAAA,GACrDD,iCAAA,cAACC,YAAAA,YAAqB,OAArB,EAA2B,WAAsB,aAAU,cAAa,IAAA,GACpE,MAAM,UACPD,iCAAA,cAAC,OAAA,IAAM,CACX,CACJ,CACJ;AAER,CAAC;AAUM,MAAM,YAAY,OAAO,OAAO,CAAC,UAA0BA,iCAAA,cAACC,YAAAA,YAAqB,MAArB,EAA2B,GAAG,MAAA,CAAO,GAAI;AAAA,EACxG;AAAA,EACA;AACJ,CAAC;;"}
+{"version":3,"file":"HoverCard.cjs","sources":["../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { getPopoverStyleClassnames } from '@/components/Popover/util';\nimport type { Placement } from '@/types';\n\nconst Arrow = () => (\n    <PreviewCardPrimitive.Arrow className=\"data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=right]:left-[-13px] data-[side=top]:bottom-[-8px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n        <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\">\n            <path\n                d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                className=\"fill-[canvas]\"\n            />\n            <path\n                d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n                className=\"fill-gray-100 dark:fill-none\"\n            />\n            <path\n                d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n                className=\"dark:fill-gray-100\"\n            />\n        </svg>\n    </PreviewCardPrimitive.Arrow>\n);\n\n/**\n * @deprecated\n */\nexport type HoverCardTriggerProps = React.HTMLAttributes<HTMLAnchorElement> & { children: React.ReactElement };\nconst Trigger = React.forwardRef(function HoverCardTrigger(props: HoverCardTriggerProps, ref: React.Ref<HTMLAnchorElement>) {\n    const { children, className, ...otherProps } = props;\n\n    return (\n        <PreviewCardPrimitive.Trigger\n            {...otherProps}\n            className={cn('text-black', className)}\n            delay={300}\n            ref={ref}\n            render={children}\n        />\n    );\n});\n\n/**\n * @deprecated\n */\nexport type HoverCardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the HoverCard relative to its trigger. Default value is `bottom` */\n    placement?: Placement;\n};\nconst Content = React.forwardRef(function HoverCardContent(props: HoverCardContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side } = props;\n    const className = cn(getPopoverStyleClassnames(), 'min-w-[theme(spacing.40)] max-w-[theme(spacing.96)]', props.className);\n\n    return (\n        <PreviewCardPrimitive.Portal>\n            <PreviewCardPrimitive.Positioner side={side} sideOffset={12}>\n                <PreviewCardPrimitive.Popup className={className} data-taco=\"hover-card\" ref={ref}>\n                    {props.children}\n                    <Arrow />\n                </PreviewCardPrimitive.Popup>\n            </PreviewCardPrimitive.Positioner>\n        </PreviewCardPrimitive.Portal>\n    );\n});\n\n/**\n * @deprecated\n */\nexport type HoverCardProps = React.PropsWithChildren<object>;\n\n/**\n * @deprecated\n */\nexport const HoverCard = Object.assign((props: HoverCardProps) => <PreviewCardPrimitive.Root {...props} />, {\n    Trigger,\n    Content,\n});\n"],"names":["React","PreviewCardPrimitive","getPopoverStyleClassnames"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,QAAQ,MACVA,iCAAA,cAACC,YAAAA,YAAqB,OAArB,EAA2B,WAAU,kNAClCD,iCAAA,cAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,UACjDA,iCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,GAAE;AAAA,IACF,WAAU;AAAA,EAAA;AACd,GACAA,iCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,GAAE;AAAA,IACF,WAAU;AAAA,EAAA;AACd,GACAA,iCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,GAAE;AAAA,IACF,WAAU;AAAA,EAAA;AACd,CACJ,CACJ;AAOJ,MAAM,UAAUA,iBAAM,WAAW,SAAS,iBAAiB,OAA8B,KAAmC;AACxH,QAAM,EAAE,UAAU,WAAW,GAAG,eAAe;AAE/C,SACIA,iCAAA;AAAA,IAACC,YAAAA,YAAqB;AAAA,IAArB;AAAA,MACI,GAAG;AAAA,MACJ,WAAW,GAAG,cAAc,SAAS;AAAA,MACrC,OAAO;AAAA,MACP;AAAA,MACA,QAAQ;AAAA,IAAA;AAAA,EAAA;AAGpB,CAAC;AASD,MAAM,UAAUD,iBAAM,WAAW,SAAS,iBAAiB,OAA8B,KAAgC;AACrH,QAAM,EAAE,WAAW,KAAA,IAAS;AAC5B,QAAM,YAAY,GAAGE,KAAAA,0BAAA,GAA6B,uDAAuD,MAAM,SAAS;AAExH,SACIF,iCAAA,cAACC,YAAAA,YAAqB,QAArB,MACGD,iCAAA,cAACC,YAAAA,YAAqB,YAArB,EAAgC,MAAY,YAAY,GAAA,GACrDD,iCAAA,cAACC,YAAAA,YAAqB,OAArB,EAA2B,WAAsB,aAAU,cAAa,IAAA,GACpE,MAAM,UACPD,iCAAA,cAAC,OAAA,IAAM,CACX,CACJ,CACJ;AAER,CAAC;AAUM,MAAM,YAAY,OAAO,OAAO,CAAC,UAA0BA,iCAAA,cAACC,YAAAA,YAAqB,MAArB,EAA2B,GAAG,MAAA,CAAO,GAAI;AAAA,EACxG;AAAA,EACA;AACJ,CAAC;;"}

package/dist/components/HoverCard/HoverCard.d.ts

@@ -1,4 +1,4 @@
-import { Placement } from '../..';
+import { Placement } from '../../types';
 import * as React from 'react';
 /**
  * @deprecated

package/dist/components/HoverCard/HoverCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"HoverCard.js","sources":["../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport type { Placement } from '../..';\nimport { getPopoverStyleClassnames } from '../Popover/util';\n\nconst Arrow = () => (\n    <PreviewCardPrimitive.Arrow className=\"data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=right]:left-[-13px] data-[side=top]:bottom-[-8px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n        <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\">\n            <path\n                d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                className=\"fill-[canvas]\"\n            />\n            <path\n                d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n                className=\"fill-gray-100 dark:fill-none\"\n            />\n            <path\n                d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n                className=\"dark:fill-gray-100\"\n            />\n        </svg>\n    </PreviewCardPrimitive.Arrow>\n);\n\n/**\n * @deprecated\n */\nexport type HoverCardTriggerProps = React.HTMLAttributes<HTMLAnchorElement> & { children: React.ReactElement };\nconst Trigger = React.forwardRef(function HoverCardTrigger(props: HoverCardTriggerProps, ref: React.Ref<HTMLAnchorElement>) {\n    const { children, className, ...otherProps } = props;\n\n    return (\n        <PreviewCardPrimitive.Trigger\n            {...otherProps}\n            className={cn('text-black', className)}\n            delay={300}\n            ref={ref}\n            render={children}\n        />\n    );\n});\n\n/**\n * @deprecated\n */\nexport type HoverCardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the HoverCard relative to its trigger. Default value is `bottom` */\n    placement?: Placement;\n};\nconst Content = React.forwardRef(function HoverCardContent(props: HoverCardContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side } = props;\n    const className = cn(getPopoverStyleClassnames(), 'min-w-[theme(spacing.40)] max-w-[theme(spacing.96)]', props.className);\n\n    return (\n        <PreviewCardPrimitive.Portal>\n            <PreviewCardPrimitive.Positioner side={side} sideOffset={12}>\n                <PreviewCardPrimitive.Popup className={className} data-taco=\"hover-card\" ref={ref}>\n                    {props.children}\n                    <Arrow />\n                </PreviewCardPrimitive.Popup>\n            </PreviewCardPrimitive.Positioner>\n        </PreviewCardPrimitive.Portal>\n    );\n});\n\n/**\n * @deprecated\n */\nexport type HoverCardProps = React.PropsWithChildren<object>;\n\n/**\n * @deprecated\n */\nexport const HoverCard = Object.assign((props: HoverCardProps) => <PreviewCardPrimitive.Root {...props} />, {\n    Trigger,\n    Content,\n});\n"],"names":["PreviewCardPrimitive"],"mappings":";;;;AAOA,MAAM,QAAQ,MACV,sBAAA,cAACA,YAAqB,OAArB,EAA2B,WAAU,kNAClC,sBAAA,cAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,UACjD,sBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,GAAE;AAAA,IACF,WAAU;AAAA,EAAA;AACd,GACA,sBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,GAAE;AAAA,IACF,WAAU;AAAA,EAAA;AACd,GACA,sBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,GAAE;AAAA,IACF,WAAU;AAAA,EAAA;AACd,CACJ,CACJ;AAOJ,MAAM,UAAU,MAAM,WAAW,SAAS,iBAAiB,OAA8B,KAAmC;AACxH,QAAM,EAAE,UAAU,WAAW,GAAG,eAAe;AAE/C,SACI,sBAAA;AAAA,IAACA,YAAqB;AAAA,IAArB;AAAA,MACI,GAAG;AAAA,MACJ,WAAW,GAAG,cAAc,SAAS;AAAA,MACrC,OAAO;AAAA,MACP;AAAA,MACA,QAAQ;AAAA,IAAA;AAAA,EAAA;AAGpB,CAAC;AASD,MAAM,UAAU,MAAM,WAAW,SAAS,iBAAiB,OAA8B,KAAgC;AACrH,QAAM,EAAE,WAAW,KAAA,IAAS;AAC5B,QAAM,YAAY,GAAG,0BAAA,GAA6B,uDAAuD,MAAM,SAAS;AAExH,SACI,sBAAA,cAACA,YAAqB,QAArB,MACG,sBAAA,cAACA,YAAqB,YAArB,EAAgC,MAAY,YAAY,GAAA,GACrD,sBAAA,cAACA,YAAqB,OAArB,EAA2B,WAAsB,aAAU,cAAa,IAAA,GACpE,MAAM,UACP,sBAAA,cAAC,OAAA,IAAM,CACX,CACJ,CACJ;AAER,CAAC;AAUM,MAAM,YAAY,OAAO,OAAO,CAAC,UAA0B,sBAAA,cAACA,YAAqB,MAArB,EAA2B,GAAG,MAAA,CAAO,GAAI;AAAA,EACxG;AAAA,EACA;AACJ,CAAC;"}
+{"version":3,"file":"HoverCard.js","sources":["../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';\nimport cn from 'clsx';\nimport * as React from 'react';\n\nimport { getPopoverStyleClassnames } from '@/components/Popover/util';\nimport type { Placement } from '@/types';\n\nconst Arrow = () => (\n    <PreviewCardPrimitive.Arrow className=\"data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=right]:left-[-13px] data-[side=top]:bottom-[-8px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n        <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\">\n            <path\n                d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                className=\"fill-[canvas]\"\n            />\n            <path\n                d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n                className=\"fill-gray-100 dark:fill-none\"\n            />\n            <path\n                d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n                className=\"dark:fill-gray-100\"\n            />\n        </svg>\n    </PreviewCardPrimitive.Arrow>\n);\n\n/**\n * @deprecated\n */\nexport type HoverCardTriggerProps = React.HTMLAttributes<HTMLAnchorElement> & { children: React.ReactElement };\nconst Trigger = React.forwardRef(function HoverCardTrigger(props: HoverCardTriggerProps, ref: React.Ref<HTMLAnchorElement>) {\n    const { children, className, ...otherProps } = props;\n\n    return (\n        <PreviewCardPrimitive.Trigger\n            {...otherProps}\n            className={cn('text-black', className)}\n            delay={300}\n            ref={ref}\n            render={children}\n        />\n    );\n});\n\n/**\n * @deprecated\n */\nexport type HoverCardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Set the position of the HoverCard relative to its trigger. Default value is `bottom` */\n    placement?: Placement;\n};\nconst Content = React.forwardRef(function HoverCardContent(props: HoverCardContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { placement: side } = props;\n    const className = cn(getPopoverStyleClassnames(), 'min-w-[theme(spacing.40)] max-w-[theme(spacing.96)]', props.className);\n\n    return (\n        <PreviewCardPrimitive.Portal>\n            <PreviewCardPrimitive.Positioner side={side} sideOffset={12}>\n                <PreviewCardPrimitive.Popup className={className} data-taco=\"hover-card\" ref={ref}>\n                    {props.children}\n                    <Arrow />\n                </PreviewCardPrimitive.Popup>\n            </PreviewCardPrimitive.Positioner>\n        </PreviewCardPrimitive.Portal>\n    );\n});\n\n/**\n * @deprecated\n */\nexport type HoverCardProps = React.PropsWithChildren<object>;\n\n/**\n * @deprecated\n */\nexport const HoverCard = Object.assign((props: HoverCardProps) => <PreviewCardPrimitive.Root {...props} />, {\n    Trigger,\n    Content,\n});\n"],"names":["PreviewCardPrimitive"],"mappings":";;;;AAOA,MAAM,QAAQ,MACV,sBAAA,cAACA,YAAqB,OAArB,EAA2B,WAAU,kNAClC,sBAAA,cAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,UACjD,sBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,GAAE;AAAA,IACF,WAAU;AAAA,EAAA;AACd,GACA,sBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,GAAE;AAAA,IACF,WAAU;AAAA,EAAA;AACd,GACA,sBAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,GAAE;AAAA,IACF,WAAU;AAAA,EAAA;AACd,CACJ,CACJ;AAOJ,MAAM,UAAU,MAAM,WAAW,SAAS,iBAAiB,OAA8B,KAAmC;AACxH,QAAM,EAAE,UAAU,WAAW,GAAG,eAAe;AAE/C,SACI,sBAAA;AAAA,IAACA,YAAqB;AAAA,IAArB;AAAA,MACI,GAAG;AAAA,MACJ,WAAW,GAAG,cAAc,SAAS;AAAA,MACrC,OAAO;AAAA,MACP;AAAA,MACA,QAAQ;AAAA,IAAA;AAAA,EAAA;AAGpB,CAAC;AASD,MAAM,UAAU,MAAM,WAAW,SAAS,iBAAiB,OAA8B,KAAgC;AACrH,QAAM,EAAE,WAAW,KAAA,IAAS;AAC5B,QAAM,YAAY,GAAG,0BAAA,GAA6B,uDAAuD,MAAM,SAAS;AAExH,SACI,sBAAA,cAACA,YAAqB,QAArB,MACG,sBAAA,cAACA,YAAqB,YAArB,EAAgC,MAAY,YAAY,GAAA,GACrD,sBAAA,cAACA,YAAqB,OAArB,EAA2B,WAAsB,aAAU,cAAa,IAAA,GACpE,MAAM,UACP,sBAAA,cAAC,OAAA,IAAM,CACX,CACJ,CACJ;AAER,CAAC;AAUM,MAAM,YAAY,OAAO,OAAO,CAAC,UAA0B,sBAAA,cAACA,YAAqB,MAArB,EAA2B,GAAG,MAAA,CAAO,GAAI;AAAA,EACxG;AAAA,EACA;AACJ,CAAC;"}

package/dist/components/Inline/Inline.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const cn = require("clsx");
 const React = require("react");
+const flattenChildren = require("../../utils/flattenChildren.cjs");
 const layout = require("../../utils/layout.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -38,12 +39,7 @@ const Inline = React__namespace.forwardRef(function Inline2(props, ref) {
     layout.ALIGN_ITEMS_MAP[alignBlock],
     noWrap ? "flex-nowrap" : "flex-wrap"
   );
-  const wrappedChildren = React__namespace.Children.map(children, (child, index) => {
-    if (child === null || child === void 0 || child === false) {
-      return null;
-    }
-    return /* @__PURE__ */ React__namespace.createElement("div", { key: index }, child);
-  });
+  const wrappedChildren = flattenChildren.flattenChildren(children).map(({ key, child }) => /* @__PURE__ */ React__namespace.createElement("div", { key }, child));
   return /* @__PURE__ */ React__namespace.createElement("div", { className: inlineClassName, ...restProps, "data-taco": "inline", ref }, wrappedChildren);
 });
 exports.Inline = Inline;

package/dist/components/Inline/Inline.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Inline.cjs","sources":["../../../src/components/Inline/Inline.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { SPACING_MAP, JUSTIFY_CONTENT_MAP, ALIGN_ITEMS_MAP } from '../../utils/layout';\n\nexport type InlineSpacing = keyof typeof SPACING_MAP;\nexport type InlineAlignInline = keyof typeof JUSTIFY_CONTENT_MAP;\nexport type InlineAlignBlock = keyof typeof ALIGN_ITEMS_MAP;\n\nexport type InlineProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'style'> & {\n    /**\n     * Spacing between inline items in pixels.\n     * Available values: 0, 4, 8, 12, 16, 24, 32, 48\n     */\n    spacing: InlineSpacing;\n    /**\n     * Align children on the inline axis (horizontal).\n     * @defaultValue start\n     */\n    alignInline?: InlineAlignInline;\n    /**\n     * Align children on the block axis (vertical).\n     * @defaultValue stretch\n     */\n    alignBlock?: InlineAlignBlock;\n    /**\n     * Prevents contents from wrapping to a new line.\n     * @defaultValue false\n     */\n    noWrap?: boolean;\n    /** Content to be distributed horizontally */\n    children: React.ReactNode;\n};\n\nexport const Inline = React.forwardRef<HTMLDivElement, InlineProps>(function Inline(props, ref) {\n    // In cases where people ignoring the type errors and still passing in className and style, we destructure them to make sure they're not applied.\n    const {\n        spacing,\n        alignInline = 'start',\n        alignBlock = 'stretch',\n        noWrap = false,\n        children,\n        className: _className,\n        style: _style,\n        ...restProps\n    } = props as InlineProps & { className?: string; style?: React.CSSProperties };\n\n    const inlineClassName = cn(\n        'flex flex-row',\n        SPACING_MAP[spacing],\n        JUSTIFY_CONTENT_MAP[alignInline],\n        ALIGN_ITEMS_MAP[alignBlock],\n        noWrap ? 'flex-nowrap' : 'flex-wrap'\n    );\n\n    // Wrap each child in a div to prevent it from inheriting flex properties\n    const wrappedChildren = React.Children.map(children, (child, index) => {\n        if (child === null || child === undefined || child === false) {\n            return null;\n        }\n        return <div key={index}>{child}</div>;\n    });\n\n    return (\n        <div className={inlineClassName} {...restProps} data-taco=\"inline\" ref={ref}>\n            {wrappedChildren}\n        </div>\n    );\n});\n"],"names":["React","Inline","SPACING_MAP","JUSTIFY_CONTENT_MAP","ALIGN_ITEMS_MAP"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAkCO,MAAM,SAASA,iBAAM,WAAwC,SAASC,QAAO,OAAO,KAAK;AAE5F,QAAM;AAAA,IACF;AAAA,IACA,cAAc;AAAA,IACd,aAAa;AAAA,IACb,SAAS;AAAA,IACT;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH;AAEJ,QAAM,kBAAkB;AAAA,IACpB;AAAA,IACAC,OAAAA,YAAY,OAAO;AAAA,IACnBC,OAAAA,oBAAoB,WAAW;AAAA,IAC/BC,OAAAA,gBAAgB,UAAU;AAAA,IAC1B,SAAS,gBAAgB;AAAA,EAAA;AAI7B,QAAM,kBAAkBJ,iBAAM,SAAS,IAAI,UAAU,CAAC,OAAO,UAAU;AACnE,QAAI,UAAU,QAAQ,UAAU,UAAa,UAAU,OAAO;AAC1D,aAAO;AAAA,IACX;AACA,WAAOA,iCAAA,cAAC,OAAA,EAAI,KAAK,MAAA,GAAQ,KAAM;AAAA,EACnC,CAAC;AAED,SACIA,iCAAA,cAAC,SAAI,WAAW,iBAAkB,GAAG,WAAW,aAAU,UAAS,IAAA,GAC9D,eACL;AAER,CAAC;;"}
+{"version":3,"file":"Inline.cjs","sources":["../../../src/components/Inline/Inline.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { flattenChildren } from '@/utils/flattenChildren';\nimport { SPACING_MAP, JUSTIFY_CONTENT_MAP, ALIGN_ITEMS_MAP } from '@/utils/layout';\n\nexport type InlineSpacing = keyof typeof SPACING_MAP;\nexport type InlineAlignInline = keyof typeof JUSTIFY_CONTENT_MAP;\nexport type InlineAlignBlock = keyof typeof ALIGN_ITEMS_MAP;\n\nexport type InlineProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'style'> & {\n    /**\n     * Spacing between inline items in pixels.\n     * Available values: 0, 4, 8, 12, 16, 24, 32, 48\n     */\n    spacing: InlineSpacing;\n    /**\n     * Align children on the inline axis (horizontal).\n     * @defaultValue start\n     */\n    alignInline?: InlineAlignInline;\n    /**\n     * Align children on the block axis (vertical).\n     * @defaultValue stretch\n     */\n    alignBlock?: InlineAlignBlock;\n    /**\n     * Prevents contents from wrapping to a new line.\n     * @defaultValue false\n     */\n    noWrap?: boolean;\n    /** Content to be distributed horizontally */\n    children: React.ReactNode;\n};\n\nexport const Inline = React.forwardRef<HTMLDivElement, InlineProps>(function Inline(props, ref) {\n    // In cases where people ignoring the type errors and still passing in className and style, we destructure them to make sure they're not applied.\n    const {\n        spacing,\n        alignInline = 'start',\n        alignBlock = 'stretch',\n        noWrap = false,\n        children,\n        className: _className,\n        style: _style,\n        ...restProps\n    } = props as InlineProps & { className?: string; style?: React.CSSProperties };\n\n    const inlineClassName = cn(\n        'flex flex-row',\n        SPACING_MAP[spacing],\n        JUSTIFY_CONTENT_MAP[alignInline],\n        ALIGN_ITEMS_MAP[alignBlock],\n        noWrap ? 'flex-nowrap' : 'flex-wrap'\n    );\n\n    // Wrap each child in a div to prevent it from inheriting flex properties.\n    // Fragments are flattened so their children are wrapped at the same level as direct children.\n    const wrappedChildren = flattenChildren(children).map(({ key, child }) => <div key={key}>{child}</div>);\n\n    return (\n        <div className={inlineClassName} {...restProps} data-taco=\"inline\" ref={ref}>\n            {wrappedChildren}\n        </div>\n    );\n});\n"],"names":["React","Inline","SPACING_MAP","JUSTIFY_CONTENT_MAP","ALIGN_ITEMS_MAP","flattenChildren"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAmCO,MAAM,SAASA,iBAAM,WAAwC,SAASC,QAAO,OAAO,KAAK;AAE5F,QAAM;AAAA,IACF;AAAA,IACA,cAAc;AAAA,IACd,aAAa;AAAA,IACb,SAAS;AAAA,IACT;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH;AAEJ,QAAM,kBAAkB;AAAA,IACpB;AAAA,IACAC,OAAAA,YAAY,OAAO;AAAA,IACnBC,OAAAA,oBAAoB,WAAW;AAAA,IAC/BC,OAAAA,gBAAgB,UAAU;AAAA,IAC1B,SAAS,gBAAgB;AAAA,EAAA;AAK7B,QAAM,kBAAkBC,gBAAAA,gBAAgB,QAAQ,EAAE,IAAI,CAAC,EAAE,KAAK,MAAA,MAAYL,iCAAA,cAAC,OAAA,EAAI,IAAA,GAAW,KAAM,CAAM;AAEtG,SACIA,iCAAA,cAAC,SAAI,WAAW,iBAAkB,GAAG,WAAW,aAAU,UAAS,IAAA,GAC9D,eACL;AAER,CAAC;;"}

package/dist/components/Inline/Inline.d.ts

@@ -27,7 +27,7 @@ export type InlineProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'
     /** Content to be distributed horizontally */
     children: React.ReactNode;
 };
-export declare const Inline: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "style" | "children"> & {
+export declare const Inline: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "className" | "style"> & {
     /**
      * Spacing between inline items in pixels.
      * Available values: 0, 4, 8, 12, 16, 24, 32, 48

package/dist/components/Inline/Inline.js

@@ -1,5 +1,6 @@
 import cn from "clsx";
 import * as React from "react";
+import { flattenChildren } from "../../utils/flattenChildren.js";
 import { SPACING_MAP, JUSTIFY_CONTENT_MAP, ALIGN_ITEMS_MAP } from "../../utils/layout.js";
 const Inline = React.forwardRef(function Inline2(props, ref) {
   const {
@@ -19,12 +20,7 @@ const Inline = React.forwardRef(function Inline2(props, ref) {
     ALIGN_ITEMS_MAP[alignBlock],
     noWrap ? "flex-nowrap" : "flex-wrap"
   );
-  const wrappedChildren = React.Children.map(children, (child, index) => {
-    if (child === null || child === void 0 || child === false) {
-      return null;
-    }
-    return /* @__PURE__ */ React.createElement("div", { key: index }, child);
-  });
+  const wrappedChildren = flattenChildren(children).map(({ key, child }) => /* @__PURE__ */ React.createElement("div", { key }, child));
   return /* @__PURE__ */ React.createElement("div", { className: inlineClassName, ...restProps, "data-taco": "inline", ref }, wrappedChildren);
 });
 export {

package/dist/components/Inline/Inline.js.map

@@ -1 +1 @@
-{"version":3,"file":"Inline.js","sources":["../../../src/components/Inline/Inline.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { SPACING_MAP, JUSTIFY_CONTENT_MAP, ALIGN_ITEMS_MAP } from '../../utils/layout';\n\nexport type InlineSpacing = keyof typeof SPACING_MAP;\nexport type InlineAlignInline = keyof typeof JUSTIFY_CONTENT_MAP;\nexport type InlineAlignBlock = keyof typeof ALIGN_ITEMS_MAP;\n\nexport type InlineProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'style'> & {\n    /**\n     * Spacing between inline items in pixels.\n     * Available values: 0, 4, 8, 12, 16, 24, 32, 48\n     */\n    spacing: InlineSpacing;\n    /**\n     * Align children on the inline axis (horizontal).\n     * @defaultValue start\n     */\n    alignInline?: InlineAlignInline;\n    /**\n     * Align children on the block axis (vertical).\n     * @defaultValue stretch\n     */\n    alignBlock?: InlineAlignBlock;\n    /**\n     * Prevents contents from wrapping to a new line.\n     * @defaultValue false\n     */\n    noWrap?: boolean;\n    /** Content to be distributed horizontally */\n    children: React.ReactNode;\n};\n\nexport const Inline = React.forwardRef<HTMLDivElement, InlineProps>(function Inline(props, ref) {\n    // In cases where people ignoring the type errors and still passing in className and style, we destructure them to make sure they're not applied.\n    const {\n        spacing,\n        alignInline = 'start',\n        alignBlock = 'stretch',\n        noWrap = false,\n        children,\n        className: _className,\n        style: _style,\n        ...restProps\n    } = props as InlineProps & { className?: string; style?: React.CSSProperties };\n\n    const inlineClassName = cn(\n        'flex flex-row',\n        SPACING_MAP[spacing],\n        JUSTIFY_CONTENT_MAP[alignInline],\n        ALIGN_ITEMS_MAP[alignBlock],\n        noWrap ? 'flex-nowrap' : 'flex-wrap'\n    );\n\n    // Wrap each child in a div to prevent it from inheriting flex properties\n    const wrappedChildren = React.Children.map(children, (child, index) => {\n        if (child === null || child === undefined || child === false) {\n            return null;\n        }\n        return <div key={index}>{child}</div>;\n    });\n\n    return (\n        <div className={inlineClassName} {...restProps} data-taco=\"inline\" ref={ref}>\n            {wrappedChildren}\n        </div>\n    );\n});\n"],"names":["Inline"],"mappings":";;;AAkCO,MAAM,SAAS,MAAM,WAAwC,SAASA,QAAO,OAAO,KAAK;AAE5F,QAAM;AAAA,IACF;AAAA,IACA,cAAc;AAAA,IACd,aAAa;AAAA,IACb,SAAS;AAAA,IACT;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH;AAEJ,QAAM,kBAAkB;AAAA,IACpB;AAAA,IACA,YAAY,OAAO;AAAA,IACnB,oBAAoB,WAAW;AAAA,IAC/B,gBAAgB,UAAU;AAAA,IAC1B,SAAS,gBAAgB;AAAA,EAAA;AAI7B,QAAM,kBAAkB,MAAM,SAAS,IAAI,UAAU,CAAC,OAAO,UAAU;AACnE,QAAI,UAAU,QAAQ,UAAU,UAAa,UAAU,OAAO;AAC1D,aAAO;AAAA,IACX;AACA,WAAO,sBAAA,cAAC,OAAA,EAAI,KAAK,MAAA,GAAQ,KAAM;AAAA,EACnC,CAAC;AAED,SACI,sBAAA,cAAC,SAAI,WAAW,iBAAkB,GAAG,WAAW,aAAU,UAAS,IAAA,GAC9D,eACL;AAER,CAAC;"}
+{"version":3,"file":"Inline.js","sources":["../../../src/components/Inline/Inline.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport { flattenChildren } from '@/utils/flattenChildren';\nimport { SPACING_MAP, JUSTIFY_CONTENT_MAP, ALIGN_ITEMS_MAP } from '@/utils/layout';\n\nexport type InlineSpacing = keyof typeof SPACING_MAP;\nexport type InlineAlignInline = keyof typeof JUSTIFY_CONTENT_MAP;\nexport type InlineAlignBlock = keyof typeof ALIGN_ITEMS_MAP;\n\nexport type InlineProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'style'> & {\n    /**\n     * Spacing between inline items in pixels.\n     * Available values: 0, 4, 8, 12, 16, 24, 32, 48\n     */\n    spacing: InlineSpacing;\n    /**\n     * Align children on the inline axis (horizontal).\n     * @defaultValue start\n     */\n    alignInline?: InlineAlignInline;\n    /**\n     * Align children on the block axis (vertical).\n     * @defaultValue stretch\n     */\n    alignBlock?: InlineAlignBlock;\n    /**\n     * Prevents contents from wrapping to a new line.\n     * @defaultValue false\n     */\n    noWrap?: boolean;\n    /** Content to be distributed horizontally */\n    children: React.ReactNode;\n};\n\nexport const Inline = React.forwardRef<HTMLDivElement, InlineProps>(function Inline(props, ref) {\n    // In cases where people ignoring the type errors and still passing in className and style, we destructure them to make sure they're not applied.\n    const {\n        spacing,\n        alignInline = 'start',\n        alignBlock = 'stretch',\n        noWrap = false,\n        children,\n        className: _className,\n        style: _style,\n        ...restProps\n    } = props as InlineProps & { className?: string; style?: React.CSSProperties };\n\n    const inlineClassName = cn(\n        'flex flex-row',\n        SPACING_MAP[spacing],\n        JUSTIFY_CONTENT_MAP[alignInline],\n        ALIGN_ITEMS_MAP[alignBlock],\n        noWrap ? 'flex-nowrap' : 'flex-wrap'\n    );\n\n    // Wrap each child in a div to prevent it from inheriting flex properties.\n    // Fragments are flattened so their children are wrapped at the same level as direct children.\n    const wrappedChildren = flattenChildren(children).map(({ key, child }) => <div key={key}>{child}</div>);\n\n    return (\n        <div className={inlineClassName} {...restProps} data-taco=\"inline\" ref={ref}>\n            {wrappedChildren}\n        </div>\n    );\n});\n"],"names":["Inline"],"mappings":";;;;AAmCO,MAAM,SAAS,MAAM,WAAwC,SAASA,QAAO,OAAO,KAAK;AAE5F,QAAM;AAAA,IACF;AAAA,IACA,cAAc;AAAA,IACd,aAAa;AAAA,IACb,SAAS;AAAA,IACT;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH;AAEJ,QAAM,kBAAkB;AAAA,IACpB;AAAA,IACA,YAAY,OAAO;AAAA,IACnB,oBAAoB,WAAW;AAAA,IAC/B,gBAAgB,UAAU;AAAA,IAC1B,SAAS,gBAAgB;AAAA,EAAA;AAK7B,QAAM,kBAAkB,gBAAgB,QAAQ,EAAE,IAAI,CAAC,EAAE,KAAK,MAAA,MAAY,sBAAA,cAAC,OAAA,EAAI,IAAA,GAAW,KAAM,CAAM;AAEtG,SACI,sBAAA,cAAC,SAAI,WAAW,iBAAkB,GAAG,WAAW,aAAU,UAAS,IAAA,GAC9D,eACL;AAER,CAAC;"}

package/dist/components/Input/Input.cjs

@@ -5,8 +5,8 @@ const React = require("react");
 const useBoundingClientRectListener = require("../../hooks/useBoundingClientRectListener.cjs");
 const useMergedRef = require("../../hooks/useMergedRef.cjs");
 const keyboard = require("../../utils/keyboard.cjs");
-const Icon = require("../Icon/Icon.cjs");
 const util = require("./util.cjs");
+const Icon = require("../Icon/Icon.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {