@economic/taco 8.1.2-hanger-base-ui.2 → 8.1.2

package/dist/components/Menu/components/Item.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Item.cjs","sources":["../../../../src/components/Menu/components/Item.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Menu as MenuPrimitive } from '@base-ui/react/menu';\nimport cn from 'clsx';\nimport { IconName } from '../../Icon/Icon';\nimport { Icon as IconPrimitive } from '../../Icon/Icon';\nimport { useCurrentMenu } from '../Context';\nimport { DialogProps } from '../../Dialog/Dialog';\nimport { Shortcut } from '../../Shortcut/Shortcut';\nimport { KeyDownHandlerOptions } from '../../../utils/keyboard';\n\nexport const Icon = ({ name }: { name: IconName }) => (\n    <span className=\"absolute left-0 ml-1\">\n        <IconPrimitive className=\"-ml-px -mt-px !h-5 !w-5\" name={name} />\n    </span>\n);\n\nexport const useItemStyling = ({\n    disabled,\n    indented,\n    className,\n}: {\n    disabled?: boolean;\n    indented: boolean;\n    className?: string;\n}) => {\n    const menu = useCurrentMenu();\n\n    React.useEffect(() => {\n        if (indented && !menu?.indented) {\n            menu?.registerIndentation();\n        }\n    }, [indented]);\n\n    return cn(\n        'flex items-center justify-start h-8 pr-1.5 relative rounded w-full focus:outline-none group',\n        {\n            'pl-7': menu?.indented,\n            'pl-1.5': !menu?.indented,\n            /* TODO: Why have both hover and data-[highlighted]? */\n            /* shadow-none on hover is to prevent the focus style from showing up on hover */\n            'cursor-pointer text-black hover:wcag-gray-200 data-[highlighted]:wcag-gray-200 focus-visible:yt-focus hover:!shadow-none':\n                !disabled,\n            'cursor-not-allowed hover:bg-white text-gray-300': disabled,\n        },\n        className\n    );\n};\n\nexport type MenuItemProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> & {\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\n    disabled?: boolean;\n    icon?: IconName;\n    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n    shortcut?: string | KeyDownHandlerOptions;\n    subMenu?: any;\n};\n\nexport const Item = React.forwardRef(function MenuItem(props: MenuItemProps, ref: React.Ref<HTMLDivElement>) {\n    const { dialog, icon, onClick, shortcut, subMenu, ...otherProps } = props;\n    const menu = useCurrentMenu();\n\n    const className = useItemStyling({\n        disabled: props.disabled,\n        indented: !!icon,\n        className: props.className,\n    });\n\n    const disabled = !!props.disabled || props['aria-disabled'] === true || props['aria-disabled'] === 'true';\n\n    const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n\n        event.stopPropagation();\n\n        // For dialog items, use menu context to manage state (survives menu close)\n        if (dialog && menu) {\n            menu.openDialog(() =>\n                dialog({\n                    open: true,\n                    onChange: (open: boolean) => {\n                        if (!open) menu.closeDialog();\n                    },\n                    onClose: () => menu.closeDialog(),\n                })\n            );\n            return;\n        }\n\n        // Call onClick handler\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    if (subMenu) {\n        return (\n            <MenuPrimitive.SubmenuRoot>\n                <MenuPrimitive.SubmenuTrigger {...otherProps} className={className} ref={ref}>\n                    {icon ? <Icon name={icon} /> : null}\n                    {props.children}\n                    <IconPrimitive className=\"-mr-1.5 ml-auto !h-5 !w-5\" name=\"chevron-right\" />\n                </MenuPrimitive.SubmenuTrigger>\n                {subMenu()}\n            </MenuPrimitive.SubmenuRoot>\n        );\n    }\n\n    const menuItem = (\n        <MenuPrimitive.Item\n            {...otherProps}\n            // Need to set aria-haspopup=\"dialog\" otherwise there is no way to know item opens the dialo (in e2e tests), and we need to know this to be able to test this scenario in e2e tests.\n            {...(dialog ? { 'aria-haspopup': 'dialog' } : {})}\n            className={className}\n            onClick={handleClick}\n            ref={ref}\n            disabled={disabled}>\n            {icon ? <Icon name={icon} /> : null}\n            {props.children}\n            {shortcut ? (\n                <span className=\"ml-auto pl-5\">\n                    <Shortcut keys={shortcut} className=\"text-gray-700\" />\n                </span>\n            ) : null}\n        </MenuPrimitive.Item>\n    );\n\n    return menuItem;\n});\n"],"names":["React","IconPrimitive","menu","useCurrentMenu","MenuPrimitive","Shortcut"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAUO,MAAM,OAAO,CAAC,EAAE,WAClBA,iCAAA,cAAA,QAAA,EAAK,WAAU,uBAAA,GACXA,iCAAA,cAAAC,OAAA,MAAA,EAAc,WAAU,2BAA0B,MAAY,CACnE;AAGG,MAAM,iBAAiB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACJ,MAIM;AACF,QAAMC,QAAOC,QAAAA,eAAe;AAE5BH,mBAAM,UAAU,MAAM;AACd,QAAA,YAAY,EAACE,SAAA,gBAAAA,MAAM,WAAU;AAC7B,MAAAA,SAAA,gBAAAA,MAAM;AAAA,IAAoB;AAAA,EAC9B,GACD,CAAC,QAAQ,CAAC;AAEN,SAAA;AAAA,IACH;AAAA,IACA;AAAA,MACI,QAAQA,SAAA,gBAAAA,MAAM;AAAA,MACd,UAAU,EAACA,SAAA,gBAAAA,MAAM;AAAA;AAAA;AAAA,MAGjB,4HACI,CAAC;AAAA,MACL,mDAAmD;AAAA,IACvD;AAAA,IACA;AAAA,EACJ;AACJ;AAWO,MAAM,OAAOF,iBAAM,WAAW,SAAS,SAAS,OAAsB,KAAgC;AACnG,QAAA,EAAE,QAAQ,MAAM,SAAS,UAAU,SAAS,GAAG,eAAe;AACpE,QAAME,SAAOC,QAAAA,eAAe;AAE5B,QAAM,YAAY,eAAe;AAAA,IAC7B,UAAU,MAAM;AAAA,IAChB,UAAU,CAAC,CAAC;AAAA,IACZ,WAAW,MAAM;AAAA,EAAA,CACpB;AAEK,QAAA,WAAW,CAAC,CAAC,MAAM,YAAY,MAAM,eAAe,MAAM,QAAQ,MAAM,eAAe,MAAM;AAE7F,QAAA,cAAc,CAAC,UAA4C;AAC7D,QAAI,UAAU;AACV,YAAM,eAAe;AACrB;AAAA,IAAA;AAGJ,UAAM,gBAAgB;AAGtB,QAAI,UAAUD,QAAM;AACXA,aAAA;AAAA,QAAW,MACZ,OAAO;AAAA,UACH,MAAM;AAAA,UACN,UAAU,CAAC,SAAkB;AACrB,gBAAA,CAAC,KAAMA,QAAK,YAAY;AAAA,UAChC;AAAA,UACA,SAAS,MAAMA,OAAK,YAAY;AAAA,QACnC,CAAA;AAAA,MACL;AACA;AAAA,IAAA;AAIJ,QAAI,SAAS;AACT,cAAQ,KAAK;AAAA,IAAA;AAAA,EAErB;AAEA,MAAI,SAAS;AACT,WACKF,iCAAA,cAAAI,KAAA,KAAc,aAAd,MACIJ,iCAAA,cAAAI,KAAAA,KAAc,gBAAd,EAA8B,GAAG,YAAY,WAAsB,IAAA,GAC/D,OAAQJ,iCAAA,cAAA,MAAA,EAAK,MAAM,MAAM,IAAK,MAC9B,MAAM,UACNA,iCAAA,cAAAC,OAAAA,MAAA,EAAc,WAAU,6BAA4B,MAAK,iBAAgB,CAC9E,GACC,SACL;AAAA,EAAA;AAIR,QAAM,WACFD,iCAAA;AAAA,IAACI,KAAAA,KAAc;AAAA,IAAd;AAAA,MACI,GAAG;AAAA,MAEH,GAAI,SAAS,EAAE,iBAAiB,aAAa,CAAC;AAAA,MAC/C;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IACC,OAAOJ,iCAAA,cAAC,MAAK,EAAA,MAAM,KAAM,CAAA,IAAK;AAAA,IAC9B,MAAM;AAAA,IACN,WACGA,iCAAA,cAAC,QAAK,EAAA,WAAU,kBACZA,iCAAA,cAACK,SAAAA,UAAS,EAAA,MAAM,UAAU,WAAU,gBAAgB,CAAA,CACxD,IACA;AAAA,EACR;AAGG,SAAA;AACX,CAAC;;;;"}
+{"version":3,"file":"Item.cjs","sources":["../../../../src/components/Menu/components/Item.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Menu as MenuPrimitive } from '@base-ui/react/menu';\nimport cn from 'clsx';\nimport { IconName } from '../../Icon/Icon';\nimport { Icon as IconPrimitive } from '../../Icon/Icon';\nimport { useCurrentMenu } from '../Context';\nimport { DialogProps } from '../../Dialog/Dialog';\nimport { Shortcut } from '../../Shortcut/Shortcut';\nimport { KeyDownHandlerOptions } from '../../../utils/keyboard';\n\nexport const Icon = ({ name }: { name: IconName }) => (\n    <span className=\"absolute left-0 ml-1\">\n        <IconPrimitive className=\"-ml-px -mt-px !h-5 !w-5\" name={name} />\n    </span>\n);\n\nexport const useItemStyling = ({\n    disabled,\n    indented,\n    className,\n}: {\n    disabled?: boolean;\n    indented: boolean;\n    className?: string;\n}) => {\n    const menu = useCurrentMenu();\n\n    React.useEffect(() => {\n        if (indented && !menu?.indented) {\n            menu?.registerIndentation();\n        }\n    }, [indented]);\n\n    return cn(\n        'flex items-center justify-start h-8 pr-1.5 relative rounded w-full focus:outline-none group',\n        {\n            'pl-7': menu?.indented,\n            'pl-1.5': !menu?.indented,\n            /* TODO: Why have both hover and data-[highlighted]? */\n            /* shadow-none on hover is to prevent the focus style from showing up on hover */\n            'cursor-pointer text-black hover:wcag-gray-100 data-[highlighted]:wcag-gray-100 focus-visible:yt-focus hover:!shadow-none':\n                !disabled,\n            'cursor-not-allowed hover:bg-white text-gray-300': disabled,\n        },\n        className\n    );\n};\n\nexport type MenuItemProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> & {\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\n    disabled?: boolean;\n    icon?: IconName;\n    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n    shortcut?: string | KeyDownHandlerOptions;\n    subMenu?: any;\n};\n\nexport const Item = React.forwardRef(function MenuItem(props: MenuItemProps, ref: React.Ref<HTMLDivElement>) {\n    const { dialog, icon, onClick, shortcut, subMenu, ...otherProps } = props;\n    const menu = useCurrentMenu();\n\n    const className = useItemStyling({\n        disabled: props.disabled,\n        indented: !!icon,\n        className: props.className,\n    });\n\n    const disabled = !!props.disabled || props['aria-disabled'] === true || props['aria-disabled'] === 'true';\n\n    const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n\n        event.stopPropagation();\n\n        // For dialog items, use menu context to manage state (survives menu close)\n        if (dialog && menu) {\n            menu.openDialog(() =>\n                dialog({\n                    open: true,\n                    onChange: (open: boolean) => {\n                        if (!open) menu.closeDialog();\n                    },\n                    onClose: () => menu.closeDialog(),\n                })\n            );\n            return;\n        }\n\n        // Call onClick handler\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    if (subMenu) {\n        return (\n            <MenuPrimitive.SubmenuRoot>\n                <MenuPrimitive.SubmenuTrigger {...otherProps} className={className} ref={ref}>\n                    {icon ? <Icon name={icon} /> : null}\n                    {props.children}\n                    <IconPrimitive className=\"-mr-1.5 ml-auto !h-5 !w-5\" name=\"chevron-right\" />\n                </MenuPrimitive.SubmenuTrigger>\n                {subMenu()}\n            </MenuPrimitive.SubmenuRoot>\n        );\n    }\n\n    const menuItem = (\n        <MenuPrimitive.Item\n            {...otherProps}\n            // Need to set aria-haspopup=\"dialog\" otherwise there is no way to know item opens the dialo (in e2e tests), and we need to know this to be able to test this scenario in e2e tests.\n            {...(dialog ? { 'aria-haspopup': 'dialog' } : {})}\n            className={className}\n            onClick={handleClick}\n            ref={ref}\n            disabled={disabled}>\n            {icon ? <Icon name={icon} /> : null}\n            {props.children}\n            {shortcut ? (\n                <span className=\"ml-auto pl-5\">\n                    <Shortcut keys={shortcut} className=\"text-gray-700\" />\n                </span>\n            ) : null}\n        </MenuPrimitive.Item>\n    );\n\n    return menuItem;\n});\n"],"names":["React","IconPrimitive","menu","useCurrentMenu","MenuPrimitive","Shortcut"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAUO,MAAM,OAAO,CAAC,EAAE,WAClBA,iCAAA,cAAA,QAAA,EAAK,WAAU,uBAAA,GACXA,iCAAA,cAAAC,OAAA,MAAA,EAAc,WAAU,2BAA0B,MAAY,CACnE;AAGG,MAAM,iBAAiB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACJ,MAIM;AACF,QAAMC,QAAOC,QAAAA,eAAe;AAE5BH,mBAAM,UAAU,MAAM;AACd,QAAA,YAAY,EAACE,SAAA,gBAAAA,MAAM,WAAU;AAC7B,MAAAA,SAAA,gBAAAA,MAAM;AAAA,IAAoB;AAAA,EAC9B,GACD,CAAC,QAAQ,CAAC;AAEN,SAAA;AAAA,IACH;AAAA,IACA;AAAA,MACI,QAAQA,SAAA,gBAAAA,MAAM;AAAA,MACd,UAAU,EAACA,SAAA,gBAAAA,MAAM;AAAA;AAAA;AAAA,MAGjB,4HACI,CAAC;AAAA,MACL,mDAAmD;AAAA,IACvD;AAAA,IACA;AAAA,EACJ;AACJ;AAWO,MAAM,OAAOF,iBAAM,WAAW,SAAS,SAAS,OAAsB,KAAgC;AACnG,QAAA,EAAE,QAAQ,MAAM,SAAS,UAAU,SAAS,GAAG,eAAe;AACpE,QAAME,SAAOC,QAAAA,eAAe;AAE5B,QAAM,YAAY,eAAe;AAAA,IAC7B,UAAU,MAAM;AAAA,IAChB,UAAU,CAAC,CAAC;AAAA,IACZ,WAAW,MAAM;AAAA,EAAA,CACpB;AAEK,QAAA,WAAW,CAAC,CAAC,MAAM,YAAY,MAAM,eAAe,MAAM,QAAQ,MAAM,eAAe,MAAM;AAE7F,QAAA,cAAc,CAAC,UAA4C;AAC7D,QAAI,UAAU;AACV,YAAM,eAAe;AACrB;AAAA,IAAA;AAGJ,UAAM,gBAAgB;AAGtB,QAAI,UAAUD,QAAM;AACXA,aAAA;AAAA,QAAW,MACZ,OAAO;AAAA,UACH,MAAM;AAAA,UACN,UAAU,CAAC,SAAkB;AACrB,gBAAA,CAAC,KAAMA,QAAK,YAAY;AAAA,UAChC;AAAA,UACA,SAAS,MAAMA,OAAK,YAAY;AAAA,QACnC,CAAA;AAAA,MACL;AACA;AAAA,IAAA;AAIJ,QAAI,SAAS;AACT,cAAQ,KAAK;AAAA,IAAA;AAAA,EAErB;AAEA,MAAI,SAAS;AACT,WACKF,iCAAA,cAAAI,KAAA,KAAc,aAAd,MACIJ,iCAAA,cAAAI,KAAAA,KAAc,gBAAd,EAA8B,GAAG,YAAY,WAAsB,IAAA,GAC/D,OAAQJ,iCAAA,cAAA,MAAA,EAAK,MAAM,MAAM,IAAK,MAC9B,MAAM,UACNA,iCAAA,cAAAC,OAAAA,MAAA,EAAc,WAAU,6BAA4B,MAAK,iBAAgB,CAC9E,GACC,SACL;AAAA,EAAA;AAIR,QAAM,WACFD,iCAAA;AAAA,IAACI,KAAAA,KAAc;AAAA,IAAd;AAAA,MACI,GAAG;AAAA,MAEH,GAAI,SAAS,EAAE,iBAAiB,aAAa,CAAC;AAAA,MAC/C;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IACC,OAAOJ,iCAAA,cAAC,MAAK,EAAA,MAAM,KAAM,CAAA,IAAK;AAAA,IAC9B,MAAM;AAAA,IACN,WACGA,iCAAA,cAAC,QAAK,EAAA,WAAU,kBACZA,iCAAA,cAACK,SAAAA,UAAS,EAAA,MAAM,UAAU,WAAU,gBAAgB,CAAA,CACxD,IACA;AAAA,EACR;AAGG,SAAA;AACX,CAAC;;;;"}

package/dist/components/Menu/components/Item.js

@@ -23,7 +23,7 @@ const useItemStyling = ({
       "pl-1.5": !(menu == null ? void 0 : menu.indented),
       /* TODO: Why have both hover and data-[highlighted]? */
       /* shadow-none on hover is to prevent the focus style from showing up on hover */
-      "cursor-pointer text-black hover:wcag-gray-200 data-[highlighted]:wcag-gray-200 focus-visible:yt-focus hover:!shadow-none": !disabled,
+      "cursor-pointer text-black hover:wcag-gray-100 data-[highlighted]:wcag-gray-100 focus-visible:yt-focus hover:!shadow-none": !disabled,
       "cursor-not-allowed hover:bg-white text-gray-300": disabled
     },
     className

package/dist/components/Menu/components/Item.js.map

@@ -1 +1 @@
-{"version":3,"file":"Item.js","sources":["../../../../src/components/Menu/components/Item.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Menu as MenuPrimitive } from '@base-ui/react/menu';\nimport cn from 'clsx';\nimport { IconName } from '../../Icon/Icon';\nimport { Icon as IconPrimitive } from '../../Icon/Icon';\nimport { useCurrentMenu } from '../Context';\nimport { DialogProps } from '../../Dialog/Dialog';\nimport { Shortcut } from '../../Shortcut/Shortcut';\nimport { KeyDownHandlerOptions } from '../../../utils/keyboard';\n\nexport const Icon = ({ name }: { name: IconName }) => (\n    <span className=\"absolute left-0 ml-1\">\n        <IconPrimitive className=\"-ml-px -mt-px !h-5 !w-5\" name={name} />\n    </span>\n);\n\nexport const useItemStyling = ({\n    disabled,\n    indented,\n    className,\n}: {\n    disabled?: boolean;\n    indented: boolean;\n    className?: string;\n}) => {\n    const menu = useCurrentMenu();\n\n    React.useEffect(() => {\n        if (indented && !menu?.indented) {\n            menu?.registerIndentation();\n        }\n    }, [indented]);\n\n    return cn(\n        'flex items-center justify-start h-8 pr-1.5 relative rounded w-full focus:outline-none group',\n        {\n            'pl-7': menu?.indented,\n            'pl-1.5': !menu?.indented,\n            /* TODO: Why have both hover and data-[highlighted]? */\n            /* shadow-none on hover is to prevent the focus style from showing up on hover */\n            'cursor-pointer text-black hover:wcag-gray-200 data-[highlighted]:wcag-gray-200 focus-visible:yt-focus hover:!shadow-none':\n                !disabled,\n            'cursor-not-allowed hover:bg-white text-gray-300': disabled,\n        },\n        className\n    );\n};\n\nexport type MenuItemProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> & {\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\n    disabled?: boolean;\n    icon?: IconName;\n    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n    shortcut?: string | KeyDownHandlerOptions;\n    subMenu?: any;\n};\n\nexport const Item = React.forwardRef(function MenuItem(props: MenuItemProps, ref: React.Ref<HTMLDivElement>) {\n    const { dialog, icon, onClick, shortcut, subMenu, ...otherProps } = props;\n    const menu = useCurrentMenu();\n\n    const className = useItemStyling({\n        disabled: props.disabled,\n        indented: !!icon,\n        className: props.className,\n    });\n\n    const disabled = !!props.disabled || props['aria-disabled'] === true || props['aria-disabled'] === 'true';\n\n    const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n\n        event.stopPropagation();\n\n        // For dialog items, use menu context to manage state (survives menu close)\n        if (dialog && menu) {\n            menu.openDialog(() =>\n                dialog({\n                    open: true,\n                    onChange: (open: boolean) => {\n                        if (!open) menu.closeDialog();\n                    },\n                    onClose: () => menu.closeDialog(),\n                })\n            );\n            return;\n        }\n\n        // Call onClick handler\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    if (subMenu) {\n        return (\n            <MenuPrimitive.SubmenuRoot>\n                <MenuPrimitive.SubmenuTrigger {...otherProps} className={className} ref={ref}>\n                    {icon ? <Icon name={icon} /> : null}\n                    {props.children}\n                    <IconPrimitive className=\"-mr-1.5 ml-auto !h-5 !w-5\" name=\"chevron-right\" />\n                </MenuPrimitive.SubmenuTrigger>\n                {subMenu()}\n            </MenuPrimitive.SubmenuRoot>\n        );\n    }\n\n    const menuItem = (\n        <MenuPrimitive.Item\n            {...otherProps}\n            // Need to set aria-haspopup=\"dialog\" otherwise there is no way to know item opens the dialo (in e2e tests), and we need to know this to be able to test this scenario in e2e tests.\n            {...(dialog ? { 'aria-haspopup': 'dialog' } : {})}\n            className={className}\n            onClick={handleClick}\n            ref={ref}\n            disabled={disabled}>\n            {icon ? <Icon name={icon} /> : null}\n            {props.children}\n            {shortcut ? (\n                <span className=\"ml-auto pl-5\">\n                    <Shortcut keys={shortcut} className=\"text-gray-700\" />\n                </span>\n            ) : null}\n        </MenuPrimitive.Item>\n    );\n\n    return menuItem;\n});\n"],"names":["IconPrimitive","MenuPrimitive"],"mappings":";;;;;;AAUO,MAAM,OAAO,CAAC,EAAE,WAClB,sBAAA,cAAA,QAAA,EAAK,WAAU,uBAAA,GACX,sBAAA,cAAAA,QAAA,EAAc,WAAU,2BAA0B,MAAY,CACnE;AAGG,MAAM,iBAAiB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACJ,MAIM;AACF,QAAM,OAAO,eAAe;AAE5B,QAAM,UAAU,MAAM;AACd,QAAA,YAAY,EAAC,6BAAM,WAAU;AAC7B,mCAAM;AAAA,IAAoB;AAAA,EAC9B,GACD,CAAC,QAAQ,CAAC;AAEN,SAAA;AAAA,IACH;AAAA,IACA;AAAA,MACI,QAAQ,6BAAM;AAAA,MACd,UAAU,EAAC,6BAAM;AAAA;AAAA;AAAA,MAGjB,4HACI,CAAC;AAAA,MACL,mDAAmD;AAAA,IACvD;AAAA,IACA;AAAA,EACJ;AACJ;AAWO,MAAM,OAAO,MAAM,WAAW,SAAS,SAAS,OAAsB,KAAgC;AACnG,QAAA,EAAE,QAAQ,MAAM,SAAS,UAAU,SAAS,GAAG,eAAe;AACpE,QAAM,OAAO,eAAe;AAE5B,QAAM,YAAY,eAAe;AAAA,IAC7B,UAAU,MAAM;AAAA,IAChB,UAAU,CAAC,CAAC;AAAA,IACZ,WAAW,MAAM;AAAA,EAAA,CACpB;AAEK,QAAA,WAAW,CAAC,CAAC,MAAM,YAAY,MAAM,eAAe,MAAM,QAAQ,MAAM,eAAe,MAAM;AAE7F,QAAA,cAAc,CAAC,UAA4C;AAC7D,QAAI,UAAU;AACV,YAAM,eAAe;AACrB;AAAA,IAAA;AAGJ,UAAM,gBAAgB;AAGtB,QAAI,UAAU,MAAM;AACX,WAAA;AAAA,QAAW,MACZ,OAAO;AAAA,UACH,MAAM;AAAA,UACN,UAAU,CAAC,SAAkB;AACrB,gBAAA,CAAC,KAAM,MAAK,YAAY;AAAA,UAChC;AAAA,UACA,SAAS,MAAM,KAAK,YAAY;AAAA,QACnC,CAAA;AAAA,MACL;AACA;AAAA,IAAA;AAIJ,QAAI,SAAS;AACT,cAAQ,KAAK;AAAA,IAAA;AAAA,EAErB;AAEA,MAAI,SAAS;AACT,WACK,sBAAA,cAAAC,KAAc,aAAd,MACI,sBAAA,cAAAA,KAAc,gBAAd,EAA8B,GAAG,YAAY,WAAsB,IAAA,GAC/D,OAAQ,sBAAA,cAAA,MAAA,EAAK,MAAM,MAAM,IAAK,MAC9B,MAAM,UACN,sBAAA,cAAAD,QAAA,EAAc,WAAU,6BAA4B,MAAK,iBAAgB,CAC9E,GACC,SACL;AAAA,EAAA;AAIR,QAAM,WACF,sBAAA;AAAA,IAACC,KAAc;AAAA,IAAd;AAAA,MACI,GAAG;AAAA,MAEH,GAAI,SAAS,EAAE,iBAAiB,aAAa,CAAC;AAAA,MAC/C;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IACC,OAAO,sBAAA,cAAC,MAAK,EAAA,MAAM,KAAM,CAAA,IAAK;AAAA,IAC9B,MAAM;AAAA,IACN,WACG,sBAAA,cAAC,QAAK,EAAA,WAAU,kBACZ,sBAAA,cAAC,UAAS,EAAA,MAAM,UAAU,WAAU,gBAAgB,CAAA,CACxD,IACA;AAAA,EACR;AAGG,SAAA;AACX,CAAC;"}
+{"version":3,"file":"Item.js","sources":["../../../../src/components/Menu/components/Item.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Menu as MenuPrimitive } from '@base-ui/react/menu';\nimport cn from 'clsx';\nimport { IconName } from '../../Icon/Icon';\nimport { Icon as IconPrimitive } from '../../Icon/Icon';\nimport { useCurrentMenu } from '../Context';\nimport { DialogProps } from '../../Dialog/Dialog';\nimport { Shortcut } from '../../Shortcut/Shortcut';\nimport { KeyDownHandlerOptions } from '../../../utils/keyboard';\n\nexport const Icon = ({ name }: { name: IconName }) => (\n    <span className=\"absolute left-0 ml-1\">\n        <IconPrimitive className=\"-ml-px -mt-px !h-5 !w-5\" name={name} />\n    </span>\n);\n\nexport const useItemStyling = ({\n    disabled,\n    indented,\n    className,\n}: {\n    disabled?: boolean;\n    indented: boolean;\n    className?: string;\n}) => {\n    const menu = useCurrentMenu();\n\n    React.useEffect(() => {\n        if (indented && !menu?.indented) {\n            menu?.registerIndentation();\n        }\n    }, [indented]);\n\n    return cn(\n        'flex items-center justify-start h-8 pr-1.5 relative rounded w-full focus:outline-none group',\n        {\n            'pl-7': menu?.indented,\n            'pl-1.5': !menu?.indented,\n            /* TODO: Why have both hover and data-[highlighted]? */\n            /* shadow-none on hover is to prevent the focus style from showing up on hover */\n            'cursor-pointer text-black hover:wcag-gray-100 data-[highlighted]:wcag-gray-100 focus-visible:yt-focus hover:!shadow-none':\n                !disabled,\n            'cursor-not-allowed hover:bg-white text-gray-300': disabled,\n        },\n        className\n    );\n};\n\nexport type MenuItemProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> & {\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\n    disabled?: boolean;\n    icon?: IconName;\n    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n    shortcut?: string | KeyDownHandlerOptions;\n    subMenu?: any;\n};\n\nexport const Item = React.forwardRef(function MenuItem(props: MenuItemProps, ref: React.Ref<HTMLDivElement>) {\n    const { dialog, icon, onClick, shortcut, subMenu, ...otherProps } = props;\n    const menu = useCurrentMenu();\n\n    const className = useItemStyling({\n        disabled: props.disabled,\n        indented: !!icon,\n        className: props.className,\n    });\n\n    const disabled = !!props.disabled || props['aria-disabled'] === true || props['aria-disabled'] === 'true';\n\n    const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n\n        event.stopPropagation();\n\n        // For dialog items, use menu context to manage state (survives menu close)\n        if (dialog && menu) {\n            menu.openDialog(() =>\n                dialog({\n                    open: true,\n                    onChange: (open: boolean) => {\n                        if (!open) menu.closeDialog();\n                    },\n                    onClose: () => menu.closeDialog(),\n                })\n            );\n            return;\n        }\n\n        // Call onClick handler\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    if (subMenu) {\n        return (\n            <MenuPrimitive.SubmenuRoot>\n                <MenuPrimitive.SubmenuTrigger {...otherProps} className={className} ref={ref}>\n                    {icon ? <Icon name={icon} /> : null}\n                    {props.children}\n                    <IconPrimitive className=\"-mr-1.5 ml-auto !h-5 !w-5\" name=\"chevron-right\" />\n                </MenuPrimitive.SubmenuTrigger>\n                {subMenu()}\n            </MenuPrimitive.SubmenuRoot>\n        );\n    }\n\n    const menuItem = (\n        <MenuPrimitive.Item\n            {...otherProps}\n            // Need to set aria-haspopup=\"dialog\" otherwise there is no way to know item opens the dialo (in e2e tests), and we need to know this to be able to test this scenario in e2e tests.\n            {...(dialog ? { 'aria-haspopup': 'dialog' } : {})}\n            className={className}\n            onClick={handleClick}\n            ref={ref}\n            disabled={disabled}>\n            {icon ? <Icon name={icon} /> : null}\n            {props.children}\n            {shortcut ? (\n                <span className=\"ml-auto pl-5\">\n                    <Shortcut keys={shortcut} className=\"text-gray-700\" />\n                </span>\n            ) : null}\n        </MenuPrimitive.Item>\n    );\n\n    return menuItem;\n});\n"],"names":["IconPrimitive","MenuPrimitive"],"mappings":";;;;;;AAUO,MAAM,OAAO,CAAC,EAAE,WAClB,sBAAA,cAAA,QAAA,EAAK,WAAU,uBAAA,GACX,sBAAA,cAAAA,QAAA,EAAc,WAAU,2BAA0B,MAAY,CACnE;AAGG,MAAM,iBAAiB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACJ,MAIM;AACF,QAAM,OAAO,eAAe;AAE5B,QAAM,UAAU,MAAM;AACd,QAAA,YAAY,EAAC,6BAAM,WAAU;AAC7B,mCAAM;AAAA,IAAoB;AAAA,EAC9B,GACD,CAAC,QAAQ,CAAC;AAEN,SAAA;AAAA,IACH;AAAA,IACA;AAAA,MACI,QAAQ,6BAAM;AAAA,MACd,UAAU,EAAC,6BAAM;AAAA;AAAA;AAAA,MAGjB,4HACI,CAAC;AAAA,MACL,mDAAmD;AAAA,IACvD;AAAA,IACA;AAAA,EACJ;AACJ;AAWO,MAAM,OAAO,MAAM,WAAW,SAAS,SAAS,OAAsB,KAAgC;AACnG,QAAA,EAAE,QAAQ,MAAM,SAAS,UAAU,SAAS,GAAG,eAAe;AACpE,QAAM,OAAO,eAAe;AAE5B,QAAM,YAAY,eAAe;AAAA,IAC7B,UAAU,MAAM;AAAA,IAChB,UAAU,CAAC,CAAC;AAAA,IACZ,WAAW,MAAM;AAAA,EAAA,CACpB;AAEK,QAAA,WAAW,CAAC,CAAC,MAAM,YAAY,MAAM,eAAe,MAAM,QAAQ,MAAM,eAAe,MAAM;AAE7F,QAAA,cAAc,CAAC,UAA4C;AAC7D,QAAI,UAAU;AACV,YAAM,eAAe;AACrB;AAAA,IAAA;AAGJ,UAAM,gBAAgB;AAGtB,QAAI,UAAU,MAAM;AACX,WAAA;AAAA,QAAW,MACZ,OAAO;AAAA,UACH,MAAM;AAAA,UACN,UAAU,CAAC,SAAkB;AACrB,gBAAA,CAAC,KAAM,MAAK,YAAY;AAAA,UAChC;AAAA,UACA,SAAS,MAAM,KAAK,YAAY;AAAA,QACnC,CAAA;AAAA,MACL;AACA;AAAA,IAAA;AAIJ,QAAI,SAAS;AACT,cAAQ,KAAK;AAAA,IAAA;AAAA,EAErB;AAEA,MAAI,SAAS;AACT,WACK,sBAAA,cAAAC,KAAc,aAAd,MACI,sBAAA,cAAAA,KAAc,gBAAd,EAA8B,GAAG,YAAY,WAAsB,IAAA,GAC/D,OAAQ,sBAAA,cAAA,MAAA,EAAK,MAAM,MAAM,IAAK,MAC9B,MAAM,UACN,sBAAA,cAAAD,QAAA,EAAc,WAAU,6BAA4B,MAAK,iBAAgB,CAC9E,GACC,SACL;AAAA,EAAA;AAIR,QAAM,WACF,sBAAA;AAAA,IAACC,KAAc;AAAA,IAAd;AAAA,MACI,GAAG;AAAA,MAEH,GAAI,SAAS,EAAE,iBAAiB,aAAa,CAAC;AAAA,MAC/C;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IACC,OAAO,sBAAA,cAAC,MAAK,EAAA,MAAM,KAAM,CAAA,IAAK;AAAA,IAC9B,MAAM;AAAA,IACN,WACG,sBAAA,cAAC,QAAK,EAAA,WAAU,kBACZ,sBAAA,cAAC,UAAS,EAAA,MAAM,UAAU,WAAU,gBAAgB,CAAA,CACxD,IACA;AAAA,EACR;AAGG,SAAA;AACX,CAAC;"}

package/dist/components/Navigation2/Navigation2.cjs

@@ -8,7 +8,7 @@ const Section = require("./components/Section.cjs");
 const Content = require("./components/Content.cjs");
 const Navigation2 = React.forwardRef(function Navigation22(props, ref) {
   const { children, ...attributes } = props;
-  const className = cn("m-0 py-2 flex flex-col gap-y-px overflow-auto h-full w-full bg-gray-50", props.className);
+  const className = cn("m-0 py-2 flex flex-col gap-y-px overflow-auto h-full w-full bg-brand-noon", props.className);
   return /* @__PURE__ */ React.createElement("ul", { ...attributes, className, "data-taco": "navigation2", ref, role: "menubar", style: { opacity: 0.999 } }, children);
 });
 Navigation2.Group = Group.Group;

package/dist/components/Navigation2/Navigation2.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation2.cjs","sources":["../../../src/components/Navigation2/Navigation2.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Group } from './components/Group';\nimport { Link } from './components/Link';\nimport { Section } from './components/Section';\nimport { Content } from './components/Content';\n\nexport type Navigation2Props = React.HTMLAttributes<HTMLUListElement>;\n\nexport const Navigation2 = React.forwardRef<HTMLUListElement, Navigation2Props>(function Navigation2(props, ref) {\n    const { children, ...attributes } = props;\n    const className = cn('m-0 py-2 flex flex-col gap-y-px overflow-auto h-full w-full bg-gray-50', props.className);\n\n    return (\n        <ul {...attributes} className={className} data-taco=\"navigation2\" ref={ref} role=\"menubar\" style={{ opacity: 0.999 }}>\n            {children}\n        </ul>\n    );\n}) as React.ForwardRefExoticComponent<Navigation2Props> & {\n    Group: typeof Group;\n    Link: typeof Link;\n    Section: typeof Section;\n    Content: typeof Content;\n};\n\nNavigation2.Group = Group;\nNavigation2.Link = Link;\nNavigation2.Section = Section;\nNavigation2.Content = Content;\n\nexport { getNavigationLinkClasses } from './components/Link';\n\nexport type { Navigation2ContentProps } from './components/Content';\nexport type { Navigation2GroupProps } from './components/Group';\nexport type { Navigation2LinkProps } from './components/Link';\nexport type { Navigation2SectionProps } from './components/Section';\n"],"names":["Navigation2","Group","Link","Section","Content"],"mappings":";;;;;;;;AASO,MAAM,cAAc,MAAM,WAA+C,SAASA,aAAY,OAAO,KAAK;AAC7G,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,YAAY,GAAG,0EAA0E,MAAM,SAAS;AAE9G,SACK,sBAAA,cAAA,MAAA,EAAI,GAAG,YAAY,WAAsB,aAAU,eAAc,KAAU,MAAK,WAAU,OAAO,EAAE,SAAS,MAAA,KACxG,QACL;AAER,CAAC;AAOD,YAAY,QAAQC,MAAA;AACpB,YAAY,OAAOC,KAAA;AACnB,YAAY,UAAUC,QAAA;AACtB,YAAY,UAAUC,QAAA;;;"}
+{"version":3,"file":"Navigation2.cjs","sources":["../../../src/components/Navigation2/Navigation2.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Group } from './components/Group';\nimport { Link } from './components/Link';\nimport { Section } from './components/Section';\nimport { Content } from './components/Content';\n\nexport type Navigation2Props = React.HTMLAttributes<HTMLUListElement>;\n\nexport const Navigation2 = React.forwardRef<HTMLUListElement, Navigation2Props>(function Navigation2(props, ref) {\n    const { children, ...attributes } = props;\n    const className = cn('m-0 py-2 flex flex-col gap-y-px overflow-auto h-full w-full bg-brand-noon', props.className);\n\n    return (\n        <ul {...attributes} className={className} data-taco=\"navigation2\" ref={ref} role=\"menubar\" style={{ opacity: 0.999 }}>\n            {children}\n        </ul>\n    );\n}) as React.ForwardRefExoticComponent<Navigation2Props> & {\n    Group: typeof Group;\n    Link: typeof Link;\n    Section: typeof Section;\n    Content: typeof Content;\n};\n\nNavigation2.Group = Group;\nNavigation2.Link = Link;\nNavigation2.Section = Section;\nNavigation2.Content = Content;\n\nexport { getNavigationLinkClasses } from './components/Link';\n\nexport type { Navigation2ContentProps } from './components/Content';\nexport type { Navigation2GroupProps } from './components/Group';\nexport type { Navigation2LinkProps } from './components/Link';\nexport type { Navigation2SectionProps } from './components/Section';\n"],"names":["Navigation2","Group","Link","Section","Content"],"mappings":";;;;;;;;AASO,MAAM,cAAc,MAAM,WAA+C,SAASA,aAAY,OAAO,KAAK;AAC7G,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,YAAY,GAAG,6EAA6E,MAAM,SAAS;AAEjH,SACK,sBAAA,cAAA,MAAA,EAAI,GAAG,YAAY,WAAsB,aAAU,eAAc,KAAU,MAAK,WAAU,OAAO,EAAE,SAAS,MAAA,KACxG,QACL;AAER,CAAC;AAOD,YAAY,QAAQC,MAAA;AACpB,YAAY,OAAOC,KAAA;AACnB,YAAY,UAAUC,QAAA;AACtB,YAAY,UAAUC,QAAA;;;"}

package/dist/components/Navigation2/Navigation2.js

@@ -7,7 +7,7 @@ import { Section } from "./components/Section.js";
 import { Content } from "./components/Content.js";
 const Navigation2 = React__default.forwardRef(function Navigation22(props, ref) {
   const { children, ...attributes } = props;
-  const className = cn("m-0 py-2 flex flex-col gap-y-px overflow-auto h-full w-full bg-gray-50", props.className);
+  const className = cn("m-0 py-2 flex flex-col gap-y-px overflow-auto h-full w-full bg-brand-noon", props.className);
   return /* @__PURE__ */ React__default.createElement("ul", { ...attributes, className, "data-taco": "navigation2", ref, role: "menubar", style: { opacity: 0.999 } }, children);
 });
 Navigation2.Group = Group;

package/dist/components/Navigation2/Navigation2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation2.js","sources":["../../../src/components/Navigation2/Navigation2.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Group } from './components/Group';\nimport { Link } from './components/Link';\nimport { Section } from './components/Section';\nimport { Content } from './components/Content';\n\nexport type Navigation2Props = React.HTMLAttributes<HTMLUListElement>;\n\nexport const Navigation2 = React.forwardRef<HTMLUListElement, Navigation2Props>(function Navigation2(props, ref) {\n    const { children, ...attributes } = props;\n    const className = cn('m-0 py-2 flex flex-col gap-y-px overflow-auto h-full w-full bg-gray-50', props.className);\n\n    return (\n        <ul {...attributes} className={className} data-taco=\"navigation2\" ref={ref} role=\"menubar\" style={{ opacity: 0.999 }}>\n            {children}\n        </ul>\n    );\n}) as React.ForwardRefExoticComponent<Navigation2Props> & {\n    Group: typeof Group;\n    Link: typeof Link;\n    Section: typeof Section;\n    Content: typeof Content;\n};\n\nNavigation2.Group = Group;\nNavigation2.Link = Link;\nNavigation2.Section = Section;\nNavigation2.Content = Content;\n\nexport { getNavigationLinkClasses } from './components/Link';\n\nexport type { Navigation2ContentProps } from './components/Content';\nexport type { Navigation2GroupProps } from './components/Group';\nexport type { Navigation2LinkProps } from './components/Link';\nexport type { Navigation2SectionProps } from './components/Section';\n"],"names":["React","Navigation2"],"mappings":";;;;;;;AASO,MAAM,cAAcA,eAAM,WAA+C,SAASC,aAAY,OAAO,KAAK;AAC7G,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,YAAY,GAAG,0EAA0E,MAAM,SAAS;AAE9G,SACKD,+BAAA,cAAA,MAAA,EAAI,GAAG,YAAY,WAAsB,aAAU,eAAc,KAAU,MAAK,WAAU,OAAO,EAAE,SAAS,MAAA,KACxG,QACL;AAER,CAAC;AAOD,YAAY,QAAQ;AACpB,YAAY,OAAO;AACnB,YAAY,UAAU;AACtB,YAAY,UAAU;"}
+{"version":3,"file":"Navigation2.js","sources":["../../../src/components/Navigation2/Navigation2.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Group } from './components/Group';\nimport { Link } from './components/Link';\nimport { Section } from './components/Section';\nimport { Content } from './components/Content';\n\nexport type Navigation2Props = React.HTMLAttributes<HTMLUListElement>;\n\nexport const Navigation2 = React.forwardRef<HTMLUListElement, Navigation2Props>(function Navigation2(props, ref) {\n    const { children, ...attributes } = props;\n    const className = cn('m-0 py-2 flex flex-col gap-y-px overflow-auto h-full w-full bg-brand-noon', props.className);\n\n    return (\n        <ul {...attributes} className={className} data-taco=\"navigation2\" ref={ref} role=\"menubar\" style={{ opacity: 0.999 }}>\n            {children}\n        </ul>\n    );\n}) as React.ForwardRefExoticComponent<Navigation2Props> & {\n    Group: typeof Group;\n    Link: typeof Link;\n    Section: typeof Section;\n    Content: typeof Content;\n};\n\nNavigation2.Group = Group;\nNavigation2.Link = Link;\nNavigation2.Section = Section;\nNavigation2.Content = Content;\n\nexport { getNavigationLinkClasses } from './components/Link';\n\nexport type { Navigation2ContentProps } from './components/Content';\nexport type { Navigation2GroupProps } from './components/Group';\nexport type { Navigation2LinkProps } from './components/Link';\nexport type { Navigation2SectionProps } from './components/Section';\n"],"names":["React","Navigation2"],"mappings":";;;;;;;AASO,MAAM,cAAcA,eAAM,WAA+C,SAASC,aAAY,OAAO,KAAK;AAC7G,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,YAAY,GAAG,6EAA6E,MAAM,SAAS;AAEjH,SACKD,+BAAA,cAAA,MAAA,EAAI,GAAG,YAAY,WAAsB,aAAU,eAAc,KAAU,MAAK,WAAU,OAAO,EAAE,SAAS,MAAA,KACxG,QACL;AAER,CAAC;AAOD,YAAY,QAAQ;AACpB,YAAY,OAAO;AACnB,YAAY,UAAU;AACtB,YAAY,UAAU;"}

package/dist/components/Navigation2/components/Content.cjs

@@ -6,7 +6,7 @@ const util = require("./util.cjs");
 const Content = React.forwardRef(function Navigation2(props, ref) {
   const { children, ...attributes } = props;
   const className = cn(
-    "w-full overflow-auto p-3 mt-auto border-gray-200 flex-shrink-0 z-10 bg-gray-50 [[role=menubar]>&:last-child]:pb-0",
+    "w-full overflow-auto p-3 mt-auto border-gray-200 flex-shrink-0 z-10 [[role=menubar]>&:last-child]:pb-0",
     util.getAdjacentClasses(),
     props.className
   );

package/dist/components/Navigation2/components/Content.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Content.cjs","sources":["../../../../src/components/Navigation2/components/Content.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { getAdjacentClasses } from './util';\n\nexport type Navigation2ContentProps = React.LiHTMLAttributes<HTMLLIElement>;\n\nexport const Content = React.forwardRef<HTMLLIElement, Navigation2ContentProps>(function Navigation2(props, ref) {\n    const { children, ...attributes } = props;\n    const className = cn(\n        'w-full overflow-auto p-3 mt-auto border-gray-200 flex-shrink-0 z-10 bg-gray-50 [[role=menubar]>&:last-child]:pb-0',\n        getAdjacentClasses(),\n        props.className\n    );\n\n    return (\n        <li {...attributes} className={className} data-taco=\"navigation2-content\" ref={ref} role=\"none\">\n            {children}\n        </li>\n    );\n});\n"],"names":["getAdjacentClasses"],"mappings":";;;;;AAMO,MAAM,UAAU,MAAM,WAAmD,SAAS,YAAY,OAAO,KAAK;AAC7G,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,YAAY;AAAA,IACd;AAAA,IACAA,wBAAmB;AAAA,IACnB,MAAM;AAAA,EACV;AAGI,SAAA,sBAAA,cAAC,MAAI,EAAA,GAAG,YAAY,WAAsB,aAAU,uBAAsB,KAAU,MAAK,OAAA,GACpF,QACL;AAER,CAAC;;"}
+{"version":3,"file":"Content.cjs","sources":["../../../../src/components/Navigation2/components/Content.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { getAdjacentClasses } from './util';\n\nexport type Navigation2ContentProps = React.LiHTMLAttributes<HTMLLIElement>;\n\nexport const Content = React.forwardRef<HTMLLIElement, Navigation2ContentProps>(function Navigation2(props, ref) {\n    const { children, ...attributes } = props;\n    const className = cn(\n        'w-full overflow-auto p-3 mt-auto border-gray-200 flex-shrink-0 z-10 [[role=menubar]>&:last-child]:pb-0',\n        getAdjacentClasses(),\n        props.className\n    );\n\n    return (\n        <li {...attributes} className={className} data-taco=\"navigation2-content\" ref={ref} role=\"none\">\n            {children}\n        </li>\n    );\n});\n"],"names":["getAdjacentClasses"],"mappings":";;;;;AAMO,MAAM,UAAU,MAAM,WAAmD,SAAS,YAAY,OAAO,KAAK;AAC7G,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,YAAY;AAAA,IACd;AAAA,IACAA,wBAAmB;AAAA,IACnB,MAAM;AAAA,EACV;AAGI,SAAA,sBAAA,cAAC,MAAI,EAAA,GAAG,YAAY,WAAsB,aAAU,uBAAsB,KAAU,MAAK,OAAA,GACpF,QACL;AAER,CAAC;;"}

package/dist/components/Navigation2/components/Content.js

@@ -4,7 +4,7 @@ import { getAdjacentClasses } from "./util.js";
 const Content = React__default.forwardRef(function Navigation2(props, ref) {
   const { children, ...attributes } = props;
   const className = cn(
-    "w-full overflow-auto p-3 mt-auto border-gray-200 flex-shrink-0 z-10 bg-gray-50 [[role=menubar]>&:last-child]:pb-0",
+    "w-full overflow-auto p-3 mt-auto border-gray-200 flex-shrink-0 z-10 [[role=menubar]>&:last-child]:pb-0",
     getAdjacentClasses(),
     props.className
   );

package/dist/components/Navigation2/components/Content.js.map

@@ -1 +1 @@
-{"version":3,"file":"Content.js","sources":["../../../../src/components/Navigation2/components/Content.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { getAdjacentClasses } from './util';\n\nexport type Navigation2ContentProps = React.LiHTMLAttributes<HTMLLIElement>;\n\nexport const Content = React.forwardRef<HTMLLIElement, Navigation2ContentProps>(function Navigation2(props, ref) {\n    const { children, ...attributes } = props;\n    const className = cn(\n        'w-full overflow-auto p-3 mt-auto border-gray-200 flex-shrink-0 z-10 bg-gray-50 [[role=menubar]>&:last-child]:pb-0',\n        getAdjacentClasses(),\n        props.className\n    );\n\n    return (\n        <li {...attributes} className={className} data-taco=\"navigation2-content\" ref={ref} role=\"none\">\n            {children}\n        </li>\n    );\n});\n"],"names":["React"],"mappings":";;;AAMO,MAAM,UAAUA,eAAM,WAAmD,SAAS,YAAY,OAAO,KAAK;AAC7G,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,YAAY;AAAA,IACd;AAAA,IACA,mBAAmB;AAAA,IACnB,MAAM;AAAA,EACV;AAGI,SAAAA,+BAAA,cAAC,MAAI,EAAA,GAAG,YAAY,WAAsB,aAAU,uBAAsB,KAAU,MAAK,OAAA,GACpF,QACL;AAER,CAAC;"}
+{"version":3,"file":"Content.js","sources":["../../../../src/components/Navigation2/components/Content.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { getAdjacentClasses } from './util';\n\nexport type Navigation2ContentProps = React.LiHTMLAttributes<HTMLLIElement>;\n\nexport const Content = React.forwardRef<HTMLLIElement, Navigation2ContentProps>(function Navigation2(props, ref) {\n    const { children, ...attributes } = props;\n    const className = cn(\n        'w-full overflow-auto p-3 mt-auto border-gray-200 flex-shrink-0 z-10 [[role=menubar]>&:last-child]:pb-0',\n        getAdjacentClasses(),\n        props.className\n    );\n\n    return (\n        <li {...attributes} className={className} data-taco=\"navigation2-content\" ref={ref} role=\"none\">\n            {children}\n        </li>\n    );\n});\n"],"names":["React"],"mappings":";;;AAMO,MAAM,UAAUA,eAAM,WAAmD,SAAS,YAAY,OAAO,KAAK;AAC7G,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,YAAY;AAAA,IACd;AAAA,IACA,mBAAmB;AAAA,IACnB,MAAM;AAAA,EACV;AAGI,SAAAA,+BAAA,cAAC,MAAI,EAAA,GAAG,YAAY,WAAsB,aAAU,uBAAsB,KAAU,MAAK,OAAA,GACpF,QACL;AAER,CAAC;"}

package/dist/components/Navigation2/components/Group.cjs

@@ -7,7 +7,7 @@ const Group = React.forwardRef(function Group2(props, ref) {
   const { children, defaultExpanded = false, heading, onClick, ...attributes } = props;
   const [expanded, setExpanded] = React.useState(defaultExpanded);
   const className = cn(
-    "flex w-full cursor-pointer items-center rounded px-3 font-bold text-left leading-8 hover:bg-black/[.06] focus-visible:yt-focus-dark",
+    "flex w-full cursor-pointer items-center rounded px-3 font-bold text-left leading-8 hover:bg-black-subtle focus-visible:yt-focus-dark",
     attributes.className
   );
   const handleClick = (event) => {

package/dist/components/Navigation2/components/Group.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Group.cjs","sources":["../../../../src/components/Navigation2/components/Group.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Icon } from '../../Icon/Icon';\n\nexport type Navigation2GroupProps = Omit<React.LiHTMLAttributes<HTMLLIElement>, 'onClick'> & {\n    defaultExpanded?: boolean;\n    heading: string | JSX.Element;\n    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n};\n\nexport const Group = React.forwardRef<HTMLLIElement, Navigation2GroupProps>(function Group(props, ref) {\n    const { children, defaultExpanded = false, heading, onClick, ...attributes } = props;\n    const [expanded, setExpanded] = React.useState(defaultExpanded);\n    const className = cn(\n        'flex w-full cursor-pointer items-center rounded px-3 font-bold text-left leading-8 hover:bg-black/[.06] focus-visible:yt-focus-dark',\n        attributes.className\n    );\n\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        setExpanded(!expanded);\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    return (\n        <li {...attributes} role=\"none\" className=\"[[role=menubar]>&]:px-3\" ref={ref}>\n            <button\n                aria-haspopup=\"true\"\n                aria-expanded={expanded}\n                data-taco=\"navigation2-group\"\n                className={className}\n                onClick={handleClick}\n                role=\"menuitem\">\n                <Icon className=\"-ml-2 !h-5 !w-5\" name={expanded ? 'chevron-down-solid' : 'chevron-right-solid'} />\n                <span className=\"flex-grow truncate\">{heading}</span>\n            </button>\n            <ul className={cn('mb-0 flex flex-col gap-y-px pt-px', { hidden: !expanded })} role=\"menu\">\n                {children}\n            </ul>\n        </li>\n    );\n});\n"],"names":["Group","Icon"],"mappings":";;;;;AAUO,MAAM,QAAQ,MAAM,WAAiD,SAASA,OAAM,OAAO,KAAK;AAC7F,QAAA,EAAE,UAAU,kBAAkB,OAAO,SAAS,SAAS,GAAG,eAAe;AAC/E,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,eAAe;AAC9D,QAAM,YAAY;AAAA,IACd;AAAA,IACA,WAAW;AAAA,EACf;AAEM,QAAA,cAAc,CAAC,UAA+C;AAChE,gBAAY,CAAC,QAAQ;AAErB,QAAI,SAAS;AACT,cAAQ,KAAK;AAAA,IAAA;AAAA,EAErB;AAGI,SAAA,sBAAA,cAAC,QAAI,GAAG,YAAY,MAAK,QAAO,WAAU,2BAA0B,IAChE,GAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,iBAAc;AAAA,MACd,iBAAe;AAAA,MACf,aAAU;AAAA,MACV;AAAA,MACA,SAAS;AAAA,MACT,MAAK;AAAA,IAAA;AAAA,wCACJC,KAAK,MAAA,EAAA,WAAU,mBAAkB,MAAM,WAAW,uBAAuB,uBAAuB;AAAA,IAChG,sBAAA,cAAA,QAAA,EAAK,WAAU,qBAAA,GAAsB,OAAQ;AAAA,EAAA,GAElD,sBAAA,cAAC,MAAG,EAAA,WAAW,GAAG,qCAAqC,EAAE,QAAQ,CAAC,UAAU,GAAG,MAAK,OAAA,GAC/E,QACL,CACJ;AAER,CAAC;;"}
+{"version":3,"file":"Group.cjs","sources":["../../../../src/components/Navigation2/components/Group.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Icon } from '../../Icon/Icon';\n\nexport type Navigation2GroupProps = Omit<React.LiHTMLAttributes<HTMLLIElement>, 'onClick'> & {\n    defaultExpanded?: boolean;\n    heading: string | JSX.Element;\n    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n};\n\nexport const Group = React.forwardRef<HTMLLIElement, Navigation2GroupProps>(function Group(props, ref) {\n    const { children, defaultExpanded = false, heading, onClick, ...attributes } = props;\n    const [expanded, setExpanded] = React.useState(defaultExpanded);\n    const className = cn(\n        'flex w-full cursor-pointer items-center rounded px-3 font-bold text-left leading-8 hover:bg-black-subtle focus-visible:yt-focus-dark',\n        attributes.className\n    );\n\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        setExpanded(!expanded);\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    return (\n        <li {...attributes} role=\"none\" className=\"[[role=menubar]>&]:px-3\" ref={ref}>\n            <button\n                aria-haspopup=\"true\"\n                aria-expanded={expanded}\n                data-taco=\"navigation2-group\"\n                className={className}\n                onClick={handleClick}\n                role=\"menuitem\">\n                <Icon className=\"-ml-2 !h-5 !w-5\" name={expanded ? 'chevron-down-solid' : 'chevron-right-solid'} />\n                <span className=\"flex-grow truncate\">{heading}</span>\n            </button>\n            <ul className={cn('mb-0 flex flex-col gap-y-px pt-px', { hidden: !expanded })} role=\"menu\">\n                {children}\n            </ul>\n        </li>\n    );\n});\n"],"names":["Group","Icon"],"mappings":";;;;;AAUO,MAAM,QAAQ,MAAM,WAAiD,SAASA,OAAM,OAAO,KAAK;AAC7F,QAAA,EAAE,UAAU,kBAAkB,OAAO,SAAS,SAAS,GAAG,eAAe;AAC/E,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,eAAe;AAC9D,QAAM,YAAY;AAAA,IACd;AAAA,IACA,WAAW;AAAA,EACf;AAEM,QAAA,cAAc,CAAC,UAA+C;AAChE,gBAAY,CAAC,QAAQ;AAErB,QAAI,SAAS;AACT,cAAQ,KAAK;AAAA,IAAA;AAAA,EAErB;AAGI,SAAA,sBAAA,cAAC,QAAI,GAAG,YAAY,MAAK,QAAO,WAAU,2BAA0B,IAChE,GAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,iBAAc;AAAA,MACd,iBAAe;AAAA,MACf,aAAU;AAAA,MACV;AAAA,MACA,SAAS;AAAA,MACT,MAAK;AAAA,IAAA;AAAA,wCACJC,KAAK,MAAA,EAAA,WAAU,mBAAkB,MAAM,WAAW,uBAAuB,uBAAuB;AAAA,IAChG,sBAAA,cAAA,QAAA,EAAK,WAAU,qBAAA,GAAsB,OAAQ;AAAA,EAAA,GAElD,sBAAA,cAAC,MAAG,EAAA,WAAW,GAAG,qCAAqC,EAAE,QAAQ,CAAC,UAAU,GAAG,MAAK,OAAA,GAC/E,QACL,CACJ;AAER,CAAC;;"}

package/dist/components/Navigation2/components/Group.js

@@ -5,7 +5,7 @@ const Group = React__default.forwardRef(function Group2(props, ref) {
   const { children, defaultExpanded = false, heading, onClick, ...attributes } = props;
   const [expanded, setExpanded] = React__default.useState(defaultExpanded);
   const className = cn(
-    "flex w-full cursor-pointer items-center rounded px-3 font-bold text-left leading-8 hover:bg-black/[.06] focus-visible:yt-focus-dark",
+    "flex w-full cursor-pointer items-center rounded px-3 font-bold text-left leading-8 hover:bg-black-subtle focus-visible:yt-focus-dark",
     attributes.className
   );
   const handleClick = (event) => {

package/dist/components/Navigation2/components/Group.js.map

@@ -1 +1 @@
-{"version":3,"file":"Group.js","sources":["../../../../src/components/Navigation2/components/Group.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Icon } from '../../Icon/Icon';\n\nexport type Navigation2GroupProps = Omit<React.LiHTMLAttributes<HTMLLIElement>, 'onClick'> & {\n    defaultExpanded?: boolean;\n    heading: string | JSX.Element;\n    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n};\n\nexport const Group = React.forwardRef<HTMLLIElement, Navigation2GroupProps>(function Group(props, ref) {\n    const { children, defaultExpanded = false, heading, onClick, ...attributes } = props;\n    const [expanded, setExpanded] = React.useState(defaultExpanded);\n    const className = cn(\n        'flex w-full cursor-pointer items-center rounded px-3 font-bold text-left leading-8 hover:bg-black/[.06] focus-visible:yt-focus-dark',\n        attributes.className\n    );\n\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        setExpanded(!expanded);\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    return (\n        <li {...attributes} role=\"none\" className=\"[[role=menubar]>&]:px-3\" ref={ref}>\n            <button\n                aria-haspopup=\"true\"\n                aria-expanded={expanded}\n                data-taco=\"navigation2-group\"\n                className={className}\n                onClick={handleClick}\n                role=\"menuitem\">\n                <Icon className=\"-ml-2 !h-5 !w-5\" name={expanded ? 'chevron-down-solid' : 'chevron-right-solid'} />\n                <span className=\"flex-grow truncate\">{heading}</span>\n            </button>\n            <ul className={cn('mb-0 flex flex-col gap-y-px pt-px', { hidden: !expanded })} role=\"menu\">\n                {children}\n            </ul>\n        </li>\n    );\n});\n"],"names":["React","Group"],"mappings":";;;AAUO,MAAM,QAAQA,eAAM,WAAiD,SAASC,OAAM,OAAO,KAAK;AAC7F,QAAA,EAAE,UAAU,kBAAkB,OAAO,SAAS,SAAS,GAAG,eAAe;AAC/E,QAAM,CAAC,UAAU,WAAW,IAAID,eAAM,SAAS,eAAe;AAC9D,QAAM,YAAY;AAAA,IACd;AAAA,IACA,WAAW;AAAA,EACf;AAEM,QAAA,cAAc,CAAC,UAA+C;AAChE,gBAAY,CAAC,QAAQ;AAErB,QAAI,SAAS;AACT,cAAQ,KAAK;AAAA,IAAA;AAAA,EAErB;AAGI,SAAAA,+BAAA,cAAC,QAAI,GAAG,YAAY,MAAK,QAAO,WAAU,2BAA0B,IAChE,GAAAA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,iBAAc;AAAA,MACd,iBAAe;AAAA,MACf,aAAU;AAAA,MACV;AAAA,MACA,SAAS;AAAA,MACT,MAAK;AAAA,IAAA;AAAA,iDACJ,MAAK,EAAA,WAAU,mBAAkB,MAAM,WAAW,uBAAuB,uBAAuB;AAAA,IAChGA,+BAAA,cAAA,QAAA,EAAK,WAAU,qBAAA,GAAsB,OAAQ;AAAA,EAAA,GAElDA,+BAAA,cAAC,MAAG,EAAA,WAAW,GAAG,qCAAqC,EAAE,QAAQ,CAAC,UAAU,GAAG,MAAK,OAAA,GAC/E,QACL,CACJ;AAER,CAAC;"}
+{"version":3,"file":"Group.js","sources":["../../../../src/components/Navigation2/components/Group.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Icon } from '../../Icon/Icon';\n\nexport type Navigation2GroupProps = Omit<React.LiHTMLAttributes<HTMLLIElement>, 'onClick'> & {\n    defaultExpanded?: boolean;\n    heading: string | JSX.Element;\n    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n};\n\nexport const Group = React.forwardRef<HTMLLIElement, Navigation2GroupProps>(function Group(props, ref) {\n    const { children, defaultExpanded = false, heading, onClick, ...attributes } = props;\n    const [expanded, setExpanded] = React.useState(defaultExpanded);\n    const className = cn(\n        'flex w-full cursor-pointer items-center rounded px-3 font-bold text-left leading-8 hover:bg-black-subtle focus-visible:yt-focus-dark',\n        attributes.className\n    );\n\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        setExpanded(!expanded);\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    return (\n        <li {...attributes} role=\"none\" className=\"[[role=menubar]>&]:px-3\" ref={ref}>\n            <button\n                aria-haspopup=\"true\"\n                aria-expanded={expanded}\n                data-taco=\"navigation2-group\"\n                className={className}\n                onClick={handleClick}\n                role=\"menuitem\">\n                <Icon className=\"-ml-2 !h-5 !w-5\" name={expanded ? 'chevron-down-solid' : 'chevron-right-solid'} />\n                <span className=\"flex-grow truncate\">{heading}</span>\n            </button>\n            <ul className={cn('mb-0 flex flex-col gap-y-px pt-px', { hidden: !expanded })} role=\"menu\">\n                {children}\n            </ul>\n        </li>\n    );\n});\n"],"names":["React","Group"],"mappings":";;;AAUO,MAAM,QAAQA,eAAM,WAAiD,SAASC,OAAM,OAAO,KAAK;AAC7F,QAAA,EAAE,UAAU,kBAAkB,OAAO,SAAS,SAAS,GAAG,eAAe;AAC/E,QAAM,CAAC,UAAU,WAAW,IAAID,eAAM,SAAS,eAAe;AAC9D,QAAM,YAAY;AAAA,IACd;AAAA,IACA,WAAW;AAAA,EACf;AAEM,QAAA,cAAc,CAAC,UAA+C;AAChE,gBAAY,CAAC,QAAQ;AAErB,QAAI,SAAS;AACT,cAAQ,KAAK;AAAA,IAAA;AAAA,EAErB;AAGI,SAAAA,+BAAA,cAAC,QAAI,GAAG,YAAY,MAAK,QAAO,WAAU,2BAA0B,IAChE,GAAAA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,iBAAc;AAAA,MACd,iBAAe;AAAA,MACf,aAAU;AAAA,MACV;AAAA,MACA,SAAS;AAAA,MACT,MAAK;AAAA,IAAA;AAAA,iDACJ,MAAK,EAAA,WAAU,mBAAkB,MAAM,WAAW,uBAAuB,uBAAuB;AAAA,IAChGA,+BAAA,cAAA,QAAA,EAAK,WAAU,qBAAA,GAAsB,OAAQ;AAAA,EAAA,GAElDA,+BAAA,cAAC,MAAG,EAAA,WAAW,GAAG,qCAAqC,EAAE,QAAQ,CAAC,UAAU,GAAG,MAAK,OAAA,GAC/E,QACL,CACJ;AAER,CAAC;"}

package/dist/components/Navigation2/components/Link.cjs

@@ -16,7 +16,7 @@ const getNavigationLinkClasses = (isDraggedOver = false) => cn(
   // override styles to adjust badges included in menu links
   '[&>span_[data-taco="badge"]]:mr-2.5 [[role=menu]>li>&>span_[data-taco="badge"]]:mr-2',
   {
-    "hover:bg-black/[.06] aria-current-page:bg-blue-500/[.1]": !isDraggedOver,
+    "hover:bg-black-subtle aria-current-page:bg-blue-500/[.1]": !isDraggedOver,
     "!bg-blue-500 !text-white [&>*]:!text-white": isDraggedOver
   }
 );

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

@@ -1 +1 @@
-{"version":3,"file":"Link.cjs","sources":["../../../../src/components/Navigation2/components/Link.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { useDropTarget } from '../../../utils/hooks/useDropTarget';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { Badge } from '../../Badge/Badge';\nimport { MenuProps } from '../../Menu/Menu';\nimport { getAdjacentClasses } from './util';\n\nexport const getNavigationLinkClasses = (isDraggedOver = false) =>\n    cn(\n        'group relative flex w-full items-center rounded leading-8 !text-black px-2 focus-visible:yt-focus-dark',\n        // override styles for links that are children of collapsible menus\n        'font-bold [[role=menu]>li>&]:font-normal [[role=menu]>li>&]:pl-5',\n        // override styles to adjust icons included in menu links\n        '[&_[data-taco=\"icon\"]]:!h-5 [&_[data-taco=\"icon\"]]:!w-5',\n        // override styles to adjust badges included in menu links\n        '[&>span_[data-taco=\"badge\"]]:mr-2.5 [[role=menu]>li>&>span_[data-taco=\"badge\"]]:mr-2',\n        {\n            'hover:bg-black/[.06] aria-current-page:bg-blue-500/[.1]': !isDraggedOver,\n            '!bg-blue-500 !text-white [&>*]:!text-white': isDraggedOver,\n        }\n    );\n\nexport type Navigation2LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n    active?: boolean;\n    icon?: IconName;\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n    /** Handler to be used when dropping a dragged element over the Navigation2 link */\n    onDrop?: React.DragEventHandler;\n    /** Total shown inside a Badge component */\n    total?: number;\n};\n\nexport const Link = React.forwardRef<HTMLAnchorElement, Navigation2LinkProps>(function Link(props, ref) {\n    const { active, children, icon, menu, onDrop, total, ...attributes } = props;\n    const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);\n\n    const className = cn(getNavigationLinkClasses(isDraggedOver), attributes.className);\n\n    const listClassName = cn('[[role=menubar]>&]:px-3 border-gray-200', getAdjacentClasses(), {\n        '[&>*]:pointer-events-none': isDraggedOver,\n    });\n\n    return (\n        <li {...dropTargetProps} className={listClassName} data-taco=\"navigation2-link-item\" role=\"none\">\n            <a\n                {...attributes}\n                aria-current={active ? 'page' : undefined}\n                className={className}\n                data-taco=\"navigation2-link\"\n                ref={ref}\n                role=\"menuitem\"\n                tabIndex={0}>\n                {icon ? <Icon className=\"mr-1.5 [[role=menu]>li>a>&]:-ml-1.5 [[role=menu]>li>a>&]:mr-0.5\" name={icon} /> : null}\n                <span className=\"flex flex-grow items-center truncate\">{children}</span>\n                {menu ? (\n                    <IconButton\n                        appearance=\"discrete\"\n                        icon=\"more\"\n                        aria-label=\"More\"\n                        rounded\n                        className={cn(\n                            '-mr-1.5 hidden flex-shrink-0 flex-grow-0 transition-none group-hover:flex aria-expanded:flex',\n                            {\n                                'absolute right-0 !mr-0.5': total !== undefined,\n                            }\n                        )}\n                        menu={menu}\n                        onClick={event => {\n                            event.preventDefault();\n                            event.stopPropagation();\n                        }}\n                    />\n                ) : null}\n                {total === undefined ? null : (\n                    <Badge\n                        className={cn('flex-shrink-0 flex-grow-0 !font-normal', {\n                            'group-hover:hidden [[aria-expanded=\"true\"]+&]:hidden ': menu,\n                        })}\n                        color=\"transparent\">\n                        {total}\n                    </Badge>\n                )}\n            </a>\n        </li>\n    );\n});\n"],"names":["Link","useDropTarget","getAdjacentClasses","Icon","IconButton","Badge"],"mappings":";;;;;;;;;AASa,MAAA,2BAA2B,CAAC,gBAAgB,UACrD;AAAA,EACI;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,IACI,2DAA2D,CAAC;AAAA,IAC5D,8CAA8C;AAAA,EAAA;AAEtD;AAaG,MAAM,OAAO,MAAM,WAAoD,SAASA,MAAK,OAAO,KAAK;AAC9F,QAAA,EAAE,QAAQ,UAAU,MAAM,MAAM,QAAQ,OAAO,GAAG,WAAA,IAAe;AACvE,QAAM,CAAC,eAAe,eAAe,IAAIC,cAAAA,cAAc,MAAM;AAE7D,QAAM,YAAY,GAAG,yBAAyB,aAAa,GAAG,WAAW,SAAS;AAElF,QAAM,gBAAgB,GAAG,2CAA2CC,KAAA,mBAAA,GAAsB;AAAA,IACtF,6BAA6B;AAAA,EAAA,CAChC;AAGG,SAAA,sBAAA,cAAC,QAAI,GAAG,iBAAiB,WAAW,eAAe,aAAU,yBAAwB,MAAK,OACtF,GAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,gBAAc,SAAS,SAAS;AAAA,MAChC;AAAA,MACA,aAAU;AAAA,MACV;AAAA,MACA,MAAK;AAAA,MACL,UAAU;AAAA,IAAA;AAAA,IACT,OAAQ,sBAAA,cAAAC,WAAA,EAAK,WAAU,mEAAkE,MAAM,KAAM,CAAA,IAAK;AAAA,IAC1G,sBAAA,cAAA,QAAA,EAAK,WAAU,uCAAA,GAAwC,QAAS;AAAA,IAChE,OACG,sBAAA;AAAA,MAACC,WAAA;AAAA,MAAA;AAAA,QACG,YAAW;AAAA,QACX,MAAK;AAAA,QACL,cAAW;AAAA,QACX,SAAO;AAAA,QACP,WAAW;AAAA,UACP;AAAA,UACA;AAAA,YACI,4BAA4B,UAAU;AAAA,UAAA;AAAA,QAE9C;AAAA,QACA;AAAA,QACA,SAAS,CAAS,UAAA;AACd,gBAAM,eAAe;AACrB,gBAAM,gBAAgB;AAAA,QAAA;AAAA,MAC1B;AAAA,IAAA,IAEJ;AAAA,IACH,UAAU,SAAY,OACnB,sBAAA;AAAA,MAACC,MAAA;AAAA,MAAA;AAAA,QACG,WAAW,GAAG,0CAA0C;AAAA,UACpD,yDAAyD;AAAA,QAAA,CAC5D;AAAA,QACD,OAAM;AAAA,MAAA;AAAA,MACL;AAAA,IAAA;AAAA,EACL,CAGZ;AAER,CAAC;;;"}
+{"version":3,"file":"Link.cjs","sources":["../../../../src/components/Navigation2/components/Link.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { useDropTarget } from '../../../utils/hooks/useDropTarget';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { Badge } from '../../Badge/Badge';\nimport { MenuProps } from '../../Menu/Menu';\nimport { getAdjacentClasses } from './util';\n\nexport const getNavigationLinkClasses = (isDraggedOver = false) =>\n    cn(\n        'group relative flex w-full items-center rounded leading-8 !text-black px-2 focus-visible:yt-focus-dark',\n        // override styles for links that are children of collapsible menus\n        'font-bold [[role=menu]>li>&]:font-normal [[role=menu]>li>&]:pl-5',\n        // override styles to adjust icons included in menu links\n        '[&_[data-taco=\"icon\"]]:!h-5 [&_[data-taco=\"icon\"]]:!w-5',\n        // override styles to adjust badges included in menu links\n        '[&>span_[data-taco=\"badge\"]]:mr-2.5 [[role=menu]>li>&>span_[data-taco=\"badge\"]]:mr-2',\n        {\n            'hover:bg-black-subtle aria-current-page:bg-blue-500/[.1]': !isDraggedOver,\n            '!bg-blue-500 !text-white [&>*]:!text-white': isDraggedOver,\n        }\n    );\n\nexport type Navigation2LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n    active?: boolean;\n    icon?: IconName;\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n    /** Handler to be used when dropping a dragged element over the Navigation2 link */\n    onDrop?: React.DragEventHandler;\n    /** Total shown inside a Badge component */\n    total?: number;\n};\n\nexport const Link = React.forwardRef<HTMLAnchorElement, Navigation2LinkProps>(function Link(props, ref) {\n    const { active, children, icon, menu, onDrop, total, ...attributes } = props;\n    const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);\n\n    const className = cn(getNavigationLinkClasses(isDraggedOver), attributes.className);\n\n    const listClassName = cn('[[role=menubar]>&]:px-3 border-gray-200', getAdjacentClasses(), {\n        '[&>*]:pointer-events-none': isDraggedOver,\n    });\n\n    return (\n        <li {...dropTargetProps} className={listClassName} data-taco=\"navigation2-link-item\" role=\"none\">\n            <a\n                {...attributes}\n                aria-current={active ? 'page' : undefined}\n                className={className}\n                data-taco=\"navigation2-link\"\n                ref={ref}\n                role=\"menuitem\"\n                tabIndex={0}>\n                {icon ? <Icon className=\"mr-1.5 [[role=menu]>li>a>&]:-ml-1.5 [[role=menu]>li>a>&]:mr-0.5\" name={icon} /> : null}\n                <span className=\"flex flex-grow items-center truncate\">{children}</span>\n                {menu ? (\n                    <IconButton\n                        appearance=\"discrete\"\n                        icon=\"more\"\n                        aria-label=\"More\"\n                        rounded\n                        className={cn(\n                            '-mr-1.5 hidden flex-shrink-0 flex-grow-0 transition-none group-hover:flex aria-expanded:flex',\n                            {\n                                'absolute right-0 !mr-0.5': total !== undefined,\n                            }\n                        )}\n                        menu={menu}\n                        onClick={event => {\n                            event.preventDefault();\n                            event.stopPropagation();\n                        }}\n                    />\n                ) : null}\n                {total === undefined ? null : (\n                    <Badge\n                        className={cn('flex-shrink-0 flex-grow-0 !font-normal', {\n                            'group-hover:hidden [[aria-expanded=\"true\"]+&]:hidden ': menu,\n                        })}\n                        color=\"transparent\">\n                        {total}\n                    </Badge>\n                )}\n            </a>\n        </li>\n    );\n});\n"],"names":["Link","useDropTarget","getAdjacentClasses","Icon","IconButton","Badge"],"mappings":";;;;;;;;;AASa,MAAA,2BAA2B,CAAC,gBAAgB,UACrD;AAAA,EACI;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,IACI,4DAA4D,CAAC;AAAA,IAC7D,8CAA8C;AAAA,EAAA;AAEtD;AAaG,MAAM,OAAO,MAAM,WAAoD,SAASA,MAAK,OAAO,KAAK;AAC9F,QAAA,EAAE,QAAQ,UAAU,MAAM,MAAM,QAAQ,OAAO,GAAG,WAAA,IAAe;AACvE,QAAM,CAAC,eAAe,eAAe,IAAIC,cAAAA,cAAc,MAAM;AAE7D,QAAM,YAAY,GAAG,yBAAyB,aAAa,GAAG,WAAW,SAAS;AAElF,QAAM,gBAAgB,GAAG,2CAA2CC,KAAA,mBAAA,GAAsB;AAAA,IACtF,6BAA6B;AAAA,EAAA,CAChC;AAGG,SAAA,sBAAA,cAAC,QAAI,GAAG,iBAAiB,WAAW,eAAe,aAAU,yBAAwB,MAAK,OACtF,GAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,gBAAc,SAAS,SAAS;AAAA,MAChC;AAAA,MACA,aAAU;AAAA,MACV;AAAA,MACA,MAAK;AAAA,MACL,UAAU;AAAA,IAAA;AAAA,IACT,OAAQ,sBAAA,cAAAC,WAAA,EAAK,WAAU,mEAAkE,MAAM,KAAM,CAAA,IAAK;AAAA,IAC1G,sBAAA,cAAA,QAAA,EAAK,WAAU,uCAAA,GAAwC,QAAS;AAAA,IAChE,OACG,sBAAA;AAAA,MAACC,WAAA;AAAA,MAAA;AAAA,QACG,YAAW;AAAA,QACX,MAAK;AAAA,QACL,cAAW;AAAA,QACX,SAAO;AAAA,QACP,WAAW;AAAA,UACP;AAAA,UACA;AAAA,YACI,4BAA4B,UAAU;AAAA,UAAA;AAAA,QAE9C;AAAA,QACA;AAAA,QACA,SAAS,CAAS,UAAA;AACd,gBAAM,eAAe;AACrB,gBAAM,gBAAgB;AAAA,QAAA;AAAA,MAC1B;AAAA,IAAA,IAEJ;AAAA,IACH,UAAU,SAAY,OACnB,sBAAA;AAAA,MAACC,MAAA;AAAA,MAAA;AAAA,QACG,WAAW,GAAG,0CAA0C;AAAA,UACpD,yDAAyD;AAAA,QAAA,CAC5D;AAAA,QACD,OAAM;AAAA,MAAA;AAAA,MACL;AAAA,IAAA;AAAA,EACL,CAGZ;AAER,CAAC;;;"}

package/dist/components/Navigation2/components/Link.js

@@ -14,7 +14,7 @@ const getNavigationLinkClasses = (isDraggedOver = false) => cn(
   // override styles to adjust badges included in menu links
   '[&>span_[data-taco="badge"]]:mr-2.5 [[role=menu]>li>&>span_[data-taco="badge"]]:mr-2',
   {
-    "hover:bg-black/[.06] aria-current-page:bg-blue-500/[.1]": !isDraggedOver,
+    "hover:bg-black-subtle aria-current-page:bg-blue-500/[.1]": !isDraggedOver,
     "!bg-blue-500 !text-white [&>*]:!text-white": isDraggedOver
   }
 );

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

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../../../../src/components/Navigation2/components/Link.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { useDropTarget } from '../../../utils/hooks/useDropTarget';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { Badge } from '../../Badge/Badge';\nimport { MenuProps } from '../../Menu/Menu';\nimport { getAdjacentClasses } from './util';\n\nexport const getNavigationLinkClasses = (isDraggedOver = false) =>\n    cn(\n        'group relative flex w-full items-center rounded leading-8 !text-black px-2 focus-visible:yt-focus-dark',\n        // override styles for links that are children of collapsible menus\n        'font-bold [[role=menu]>li>&]:font-normal [[role=menu]>li>&]:pl-5',\n        // override styles to adjust icons included in menu links\n        '[&_[data-taco=\"icon\"]]:!h-5 [&_[data-taco=\"icon\"]]:!w-5',\n        // override styles to adjust badges included in menu links\n        '[&>span_[data-taco=\"badge\"]]:mr-2.5 [[role=menu]>li>&>span_[data-taco=\"badge\"]]:mr-2',\n        {\n            'hover:bg-black/[.06] aria-current-page:bg-blue-500/[.1]': !isDraggedOver,\n            '!bg-blue-500 !text-white [&>*]:!text-white': isDraggedOver,\n        }\n    );\n\nexport type Navigation2LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n    active?: boolean;\n    icon?: IconName;\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n    /** Handler to be used when dropping a dragged element over the Navigation2 link */\n    onDrop?: React.DragEventHandler;\n    /** Total shown inside a Badge component */\n    total?: number;\n};\n\nexport const Link = React.forwardRef<HTMLAnchorElement, Navigation2LinkProps>(function Link(props, ref) {\n    const { active, children, icon, menu, onDrop, total, ...attributes } = props;\n    const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);\n\n    const className = cn(getNavigationLinkClasses(isDraggedOver), attributes.className);\n\n    const listClassName = cn('[[role=menubar]>&]:px-3 border-gray-200', getAdjacentClasses(), {\n        '[&>*]:pointer-events-none': isDraggedOver,\n    });\n\n    return (\n        <li {...dropTargetProps} className={listClassName} data-taco=\"navigation2-link-item\" role=\"none\">\n            <a\n                {...attributes}\n                aria-current={active ? 'page' : undefined}\n                className={className}\n                data-taco=\"navigation2-link\"\n                ref={ref}\n                role=\"menuitem\"\n                tabIndex={0}>\n                {icon ? <Icon className=\"mr-1.5 [[role=menu]>li>a>&]:-ml-1.5 [[role=menu]>li>a>&]:mr-0.5\" name={icon} /> : null}\n                <span className=\"flex flex-grow items-center truncate\">{children}</span>\n                {menu ? (\n                    <IconButton\n                        appearance=\"discrete\"\n                        icon=\"more\"\n                        aria-label=\"More\"\n                        rounded\n                        className={cn(\n                            '-mr-1.5 hidden flex-shrink-0 flex-grow-0 transition-none group-hover:flex aria-expanded:flex',\n                            {\n                                'absolute right-0 !mr-0.5': total !== undefined,\n                            }\n                        )}\n                        menu={menu}\n                        onClick={event => {\n                            event.preventDefault();\n                            event.stopPropagation();\n                        }}\n                    />\n                ) : null}\n                {total === undefined ? null : (\n                    <Badge\n                        className={cn('flex-shrink-0 flex-grow-0 !font-normal', {\n                            'group-hover:hidden [[aria-expanded=\"true\"]+&]:hidden ': menu,\n                        })}\n                        color=\"transparent\">\n                        {total}\n                    </Badge>\n                )}\n            </a>\n        </li>\n    );\n});\n"],"names":["React","Link"],"mappings":";;;;;;;AASa,MAAA,2BAA2B,CAAC,gBAAgB,UACrD;AAAA,EACI;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,IACI,2DAA2D,CAAC;AAAA,IAC5D,8CAA8C;AAAA,EAAA;AAEtD;AAaG,MAAM,OAAOA,eAAM,WAAoD,SAASC,MAAK,OAAO,KAAK;AAC9F,QAAA,EAAE,QAAQ,UAAU,MAAM,MAAM,QAAQ,OAAO,GAAG,WAAA,IAAe;AACvE,QAAM,CAAC,eAAe,eAAe,IAAI,cAAc,MAAM;AAE7D,QAAM,YAAY,GAAG,yBAAyB,aAAa,GAAG,WAAW,SAAS;AAElF,QAAM,gBAAgB,GAAG,2CAA2C,mBAAA,GAAsB;AAAA,IACtF,6BAA6B;AAAA,EAAA,CAChC;AAGG,SAAAD,+BAAA,cAAC,QAAI,GAAG,iBAAiB,WAAW,eAAe,aAAU,yBAAwB,MAAK,OACtF,GAAAA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,gBAAc,SAAS,SAAS;AAAA,MAChC;AAAA,MACA,aAAU;AAAA,MACV;AAAA,MACA,MAAK;AAAA,MACL,UAAU;AAAA,IAAA;AAAA,IACT,OAAQA,+BAAA,cAAA,MAAA,EAAK,WAAU,mEAAkE,MAAM,KAAM,CAAA,IAAK;AAAA,IAC1GA,+BAAA,cAAA,QAAA,EAAK,WAAU,uCAAA,GAAwC,QAAS;AAAA,IAChE,OACGA,+BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,YAAW;AAAA,QACX,MAAK;AAAA,QACL,cAAW;AAAA,QACX,SAAO;AAAA,QACP,WAAW;AAAA,UACP;AAAA,UACA;AAAA,YACI,4BAA4B,UAAU;AAAA,UAAA;AAAA,QAE9C;AAAA,QACA;AAAA,QACA,SAAS,CAAS,UAAA;AACd,gBAAM,eAAe;AACrB,gBAAM,gBAAgB;AAAA,QAAA;AAAA,MAC1B;AAAA,IAAA,IAEJ;AAAA,IACH,UAAU,SAAY,OACnBA,+BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAG,0CAA0C;AAAA,UACpD,yDAAyD;AAAA,QAAA,CAC5D;AAAA,QACD,OAAM;AAAA,MAAA;AAAA,MACL;AAAA,IAAA;AAAA,EACL,CAGZ;AAER,CAAC;"}
+{"version":3,"file":"Link.js","sources":["../../../../src/components/Navigation2/components/Link.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { useDropTarget } from '../../../utils/hooks/useDropTarget';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { Badge } from '../../Badge/Badge';\nimport { MenuProps } from '../../Menu/Menu';\nimport { getAdjacentClasses } from './util';\n\nexport const getNavigationLinkClasses = (isDraggedOver = false) =>\n    cn(\n        'group relative flex w-full items-center rounded leading-8 !text-black px-2 focus-visible:yt-focus-dark',\n        // override styles for links that are children of collapsible menus\n        'font-bold [[role=menu]>li>&]:font-normal [[role=menu]>li>&]:pl-5',\n        // override styles to adjust icons included in menu links\n        '[&_[data-taco=\"icon\"]]:!h-5 [&_[data-taco=\"icon\"]]:!w-5',\n        // override styles to adjust badges included in menu links\n        '[&>span_[data-taco=\"badge\"]]:mr-2.5 [[role=menu]>li>&>span_[data-taco=\"badge\"]]:mr-2',\n        {\n            'hover:bg-black-subtle aria-current-page:bg-blue-500/[.1]': !isDraggedOver,\n            '!bg-blue-500 !text-white [&>*]:!text-white': isDraggedOver,\n        }\n    );\n\nexport type Navigation2LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n    active?: boolean;\n    icon?: IconName;\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n    /** Handler to be used when dropping a dragged element over the Navigation2 link */\n    onDrop?: React.DragEventHandler;\n    /** Total shown inside a Badge component */\n    total?: number;\n};\n\nexport const Link = React.forwardRef<HTMLAnchorElement, Navigation2LinkProps>(function Link(props, ref) {\n    const { active, children, icon, menu, onDrop, total, ...attributes } = props;\n    const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);\n\n    const className = cn(getNavigationLinkClasses(isDraggedOver), attributes.className);\n\n    const listClassName = cn('[[role=menubar]>&]:px-3 border-gray-200', getAdjacentClasses(), {\n        '[&>*]:pointer-events-none': isDraggedOver,\n    });\n\n    return (\n        <li {...dropTargetProps} className={listClassName} data-taco=\"navigation2-link-item\" role=\"none\">\n            <a\n                {...attributes}\n                aria-current={active ? 'page' : undefined}\n                className={className}\n                data-taco=\"navigation2-link\"\n                ref={ref}\n                role=\"menuitem\"\n                tabIndex={0}>\n                {icon ? <Icon className=\"mr-1.5 [[role=menu]>li>a>&]:-ml-1.5 [[role=menu]>li>a>&]:mr-0.5\" name={icon} /> : null}\n                <span className=\"flex flex-grow items-center truncate\">{children}</span>\n                {menu ? (\n                    <IconButton\n                        appearance=\"discrete\"\n                        icon=\"more\"\n                        aria-label=\"More\"\n                        rounded\n                        className={cn(\n                            '-mr-1.5 hidden flex-shrink-0 flex-grow-0 transition-none group-hover:flex aria-expanded:flex',\n                            {\n                                'absolute right-0 !mr-0.5': total !== undefined,\n                            }\n                        )}\n                        menu={menu}\n                        onClick={event => {\n                            event.preventDefault();\n                            event.stopPropagation();\n                        }}\n                    />\n                ) : null}\n                {total === undefined ? null : (\n                    <Badge\n                        className={cn('flex-shrink-0 flex-grow-0 !font-normal', {\n                            'group-hover:hidden [[aria-expanded=\"true\"]+&]:hidden ': menu,\n                        })}\n                        color=\"transparent\">\n                        {total}\n                    </Badge>\n                )}\n            </a>\n        </li>\n    );\n});\n"],"names":["React","Link"],"mappings":";;;;;;;AASa,MAAA,2BAA2B,CAAC,gBAAgB,UACrD;AAAA,EACI;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,IACI,4DAA4D,CAAC;AAAA,IAC7D,8CAA8C;AAAA,EAAA;AAEtD;AAaG,MAAM,OAAOA,eAAM,WAAoD,SAASC,MAAK,OAAO,KAAK;AAC9F,QAAA,EAAE,QAAQ,UAAU,MAAM,MAAM,QAAQ,OAAO,GAAG,WAAA,IAAe;AACvE,QAAM,CAAC,eAAe,eAAe,IAAI,cAAc,MAAM;AAE7D,QAAM,YAAY,GAAG,yBAAyB,aAAa,GAAG,WAAW,SAAS;AAElF,QAAM,gBAAgB,GAAG,2CAA2C,mBAAA,GAAsB;AAAA,IACtF,6BAA6B;AAAA,EAAA,CAChC;AAGG,SAAAD,+BAAA,cAAC,QAAI,GAAG,iBAAiB,WAAW,eAAe,aAAU,yBAAwB,MAAK,OACtF,GAAAA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,gBAAc,SAAS,SAAS;AAAA,MAChC;AAAA,MACA,aAAU;AAAA,MACV;AAAA,MACA,MAAK;AAAA,MACL,UAAU;AAAA,IAAA;AAAA,IACT,OAAQA,+BAAA,cAAA,MAAA,EAAK,WAAU,mEAAkE,MAAM,KAAM,CAAA,IAAK;AAAA,IAC1GA,+BAAA,cAAA,QAAA,EAAK,WAAU,uCAAA,GAAwC,QAAS;AAAA,IAChE,OACGA,+BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,YAAW;AAAA,QACX,MAAK;AAAA,QACL,cAAW;AAAA,QACX,SAAO;AAAA,QACP,WAAW;AAAA,UACP;AAAA,UACA;AAAA,YACI,4BAA4B,UAAU;AAAA,UAAA;AAAA,QAE9C;AAAA,QACA;AAAA,QACA,SAAS,CAAS,UAAA;AACd,gBAAM,eAAe;AACrB,gBAAM,gBAAgB;AAAA,QAAA;AAAA,MAC1B;AAAA,IAAA,IAEJ;AAAA,IACH,UAAU,SAAY,OACnBA,+BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,GAAG,0CAA0C;AAAA,UACpD,yDAAyD;AAAA,QAAA,CAC5D;AAAA,QACD,OAAM;AAAA,MAAA;AAAA,MACL;AAAA,IAAA;AAAA,EACL,CAGZ;AAER,CAAC;"}

package/dist/components/Navigation2/components/Section.cjs

@@ -6,7 +6,7 @@ const util = require("./util.cjs");
 const Section = React.forwardRef(function Navigation2(props, ref) {
   const { children, heading, ...attributes } = props;
   const className = cn(
-    "w-full overflow-auto px-3 py-2 flex-grow border-gray-200 bg-gray-50 [[role=menubar]>&:first-child]:pt-0",
+    "w-full overflow-auto px-3 py-2 flex-grow border-gray-200 [[role=menubar]>&:first-child]:pt-0",
     util.getAdjacentClasses(),
     props.className
   );

package/dist/components/Navigation2/components/Section.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Section.cjs","sources":["../../../../src/components/Navigation2/components/Section.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { getAdjacentClasses } from './util';\n\nexport type Navigation2SectionProps = React.LiHTMLAttributes<HTMLLIElement> & {\n    heading?: string;\n};\n\nexport const Section = React.forwardRef<HTMLLIElement, Navigation2SectionProps>(function Navigation2(props, ref) {\n    const { children, heading, ...attributes } = props;\n    const className = cn(\n        'w-full overflow-auto px-3 py-2 flex-grow border-gray-200 bg-gray-50 [[role=menubar]>&:first-child]:pt-0',\n        getAdjacentClasses(),\n        props.className\n    );\n\n    return (\n        <li {...attributes} className={className} data-taco=\"navigation2-section\" ref={ref} role=\"none\">\n            {heading ? (\n                <span className=\"mb-px truncate pl-5 text-xs font-bold uppercase leading-8 text-gray-500 lg:hidden\">\n                    {heading}\n                </span>\n            ) : null}\n            <ul className=\"mb-0 flex flex-col gap-y-px\">{children}</ul>\n        </li>\n    );\n});\n"],"names":["getAdjacentClasses"],"mappings":";;;;;AAQO,MAAM,UAAU,MAAM,WAAmD,SAAS,YAAY,OAAO,KAAK;AAC7G,QAAM,EAAE,UAAU,SAAS,GAAG,WAAe,IAAA;AAC7C,QAAM,YAAY;AAAA,IACd;AAAA,IACAA,wBAAmB;AAAA,IACnB,MAAM;AAAA,EACV;AAGI,SAAA,sBAAA,cAAC,QAAI,GAAG,YAAY,WAAsB,aAAU,uBAAsB,KAAU,MAAK,OACpF,GAAA,8CACI,QAAK,EAAA,WAAU,oFACX,GAAA,OACL,IACA,0CACH,MAAG,EAAA,WAAU,8BAA+B,GAAA,QAAS,CAC1D;AAER,CAAC;;"}
+{"version":3,"file":"Section.cjs","sources":["../../../../src/components/Navigation2/components/Section.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { getAdjacentClasses } from './util';\n\nexport type Navigation2SectionProps = React.LiHTMLAttributes<HTMLLIElement> & {\n    heading?: string;\n};\n\nexport const Section = React.forwardRef<HTMLLIElement, Navigation2SectionProps>(function Navigation2(props, ref) {\n    const { children, heading, ...attributes } = props;\n    const className = cn(\n        'w-full overflow-auto px-3 py-2 flex-grow border-gray-200 [[role=menubar]>&:first-child]:pt-0',\n        getAdjacentClasses(),\n        props.className\n    );\n\n    return (\n        <li {...attributes} className={className} data-taco=\"navigation2-section\" ref={ref} role=\"none\">\n            {heading ? (\n                <span className=\"mb-px truncate pl-5 text-xs font-bold uppercase leading-8 text-gray-500 lg:hidden\">\n                    {heading}\n                </span>\n            ) : null}\n            <ul className=\"mb-0 flex flex-col gap-y-px\">{children}</ul>\n        </li>\n    );\n});\n"],"names":["getAdjacentClasses"],"mappings":";;;;;AAQO,MAAM,UAAU,MAAM,WAAmD,SAAS,YAAY,OAAO,KAAK;AAC7G,QAAM,EAAE,UAAU,SAAS,GAAG,WAAe,IAAA;AAC7C,QAAM,YAAY;AAAA,IACd;AAAA,IACAA,wBAAmB;AAAA,IACnB,MAAM;AAAA,EACV;AAGI,SAAA,sBAAA,cAAC,QAAI,GAAG,YAAY,WAAsB,aAAU,uBAAsB,KAAU,MAAK,OACpF,GAAA,8CACI,QAAK,EAAA,WAAU,oFACX,GAAA,OACL,IACA,0CACH,MAAG,EAAA,WAAU,8BAA+B,GAAA,QAAS,CAC1D;AAER,CAAC;;"}

package/dist/components/Navigation2/components/Section.js

@@ -4,7 +4,7 @@ import { getAdjacentClasses } from "./util.js";
 const Section = React__default.forwardRef(function Navigation2(props, ref) {
   const { children, heading, ...attributes } = props;
   const className = cn(
-    "w-full overflow-auto px-3 py-2 flex-grow border-gray-200 bg-gray-50 [[role=menubar]>&:first-child]:pt-0",
+    "w-full overflow-auto px-3 py-2 flex-grow border-gray-200 [[role=menubar]>&:first-child]:pt-0",
     getAdjacentClasses(),
     props.className
   );

package/dist/components/Navigation2/components/Section.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.js","sources":["../../../../src/components/Navigation2/components/Section.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { getAdjacentClasses } from './util';\n\nexport type Navigation2SectionProps = React.LiHTMLAttributes<HTMLLIElement> & {\n    heading?: string;\n};\n\nexport const Section = React.forwardRef<HTMLLIElement, Navigation2SectionProps>(function Navigation2(props, ref) {\n    const { children, heading, ...attributes } = props;\n    const className = cn(\n        'w-full overflow-auto px-3 py-2 flex-grow border-gray-200 bg-gray-50 [[role=menubar]>&:first-child]:pt-0',\n        getAdjacentClasses(),\n        props.className\n    );\n\n    return (\n        <li {...attributes} className={className} data-taco=\"navigation2-section\" ref={ref} role=\"none\">\n            {heading ? (\n                <span className=\"mb-px truncate pl-5 text-xs font-bold uppercase leading-8 text-gray-500 lg:hidden\">\n                    {heading}\n                </span>\n            ) : null}\n            <ul className=\"mb-0 flex flex-col gap-y-px\">{children}</ul>\n        </li>\n    );\n});\n"],"names":["React"],"mappings":";;;AAQO,MAAM,UAAUA,eAAM,WAAmD,SAAS,YAAY,OAAO,KAAK;AAC7G,QAAM,EAAE,UAAU,SAAS,GAAG,WAAe,IAAA;AAC7C,QAAM,YAAY;AAAA,IACd;AAAA,IACA,mBAAmB;AAAA,IACnB,MAAM;AAAA,EACV;AAGI,SAAAA,+BAAA,cAAC,QAAI,GAAG,YAAY,WAAsB,aAAU,uBAAsB,KAAU,MAAK,OACpF,GAAA,uDACI,QAAK,EAAA,WAAU,oFACX,GAAA,OACL,IACA,mDACH,MAAG,EAAA,WAAU,8BAA+B,GAAA,QAAS,CAC1D;AAER,CAAC;"}
+{"version":3,"file":"Section.js","sources":["../../../../src/components/Navigation2/components/Section.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { getAdjacentClasses } from './util';\n\nexport type Navigation2SectionProps = React.LiHTMLAttributes<HTMLLIElement> & {\n    heading?: string;\n};\n\nexport const Section = React.forwardRef<HTMLLIElement, Navigation2SectionProps>(function Navigation2(props, ref) {\n    const { children, heading, ...attributes } = props;\n    const className = cn(\n        'w-full overflow-auto px-3 py-2 flex-grow border-gray-200 [[role=menubar]>&:first-child]:pt-0',\n        getAdjacentClasses(),\n        props.className\n    );\n\n    return (\n        <li {...attributes} className={className} data-taco=\"navigation2-section\" ref={ref} role=\"none\">\n            {heading ? (\n                <span className=\"mb-px truncate pl-5 text-xs font-bold uppercase leading-8 text-gray-500 lg:hidden\">\n                    {heading}\n                </span>\n            ) : null}\n            <ul className=\"mb-0 flex flex-col gap-y-px\">{children}</ul>\n        </li>\n    );\n});\n"],"names":["React"],"mappings":";;;AAQO,MAAM,UAAUA,eAAM,WAAmD,SAAS,YAAY,OAAO,KAAK;AAC7G,QAAM,EAAE,UAAU,SAAS,GAAG,WAAe,IAAA;AAC7C,QAAM,YAAY;AAAA,IACd;AAAA,IACA,mBAAmB;AAAA,IACnB,MAAM;AAAA,EACV;AAGI,SAAAA,+BAAA,cAAC,QAAI,GAAG,YAAY,WAAsB,aAAU,uBAAsB,KAAU,MAAK,OACpF,GAAA,uDACI,QAAK,EAAA,WAAU,oFACX,GAAA,OACL,IACA,mDACH,MAAG,EAAA,WAAU,8BAA+B,GAAA,QAAS,CAC1D;AAER,CAAC;"}

package/dist/components/SearchInput2/SearchInput2.cjs

@@ -89,7 +89,7 @@ const SearchInput2 = React.forwardRef(function SearchInput22(props, ref) {
         IconButton.IconButton,
         {
           "aria-label": texts.searchInput.clear,
-          className: "scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125",
+          className: "hover:!bg-black-subtle scale-75 !bg-transparent [&>svg]:scale-125",
           icon: "close",
           onMouseDown: handleClear,
           tabIndex: -1,
@@ -98,11 +98,11 @@ const SearchInput2 = React.forwardRef(function SearchInput22(props, ref) {
       );
     }
     if (hasFind && isActive) {
-      postfix = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "flex h-4 items-center text-gray-700" }, loading ? /* @__PURE__ */ React.createElement(Spinner.Spinner, { className: "h-4 w-4" }) : showTotal ? /* @__PURE__ */ React.createElement("span", { className: "border-r border-black/[0.25] pr-2", "data-taco": "search-matches-counter" }, `${findCurrent ?? 0}/${findTotal ?? 0}`) : null), findCurrent ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      postfix = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "flex h-4 items-center text-gray-700" }, loading ? /* @__PURE__ */ React.createElement(Spinner.Spinner, { className: "h-4 w-4" }) : showTotal ? /* @__PURE__ */ React.createElement("span", { className: "border-black-subtle border-r pr-2", "data-taco": "search-matches-counter" }, `${findCurrent ?? 0}/${findTotal ?? 0}`) : null), findCurrent ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
         IconButton.IconButton,
         {
           "aria-label": texts.searchInput.findPrevious,
-          className: "scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125",
+          className: "hover:!bg-black-subtle scale-75 !bg-transparent [&>svg]:scale-125",
           icon: "chevron-up",
           onMouseDown: handleClickFindPrevious,
           tabIndex: -1,
@@ -112,7 +112,7 @@ const SearchInput2 = React.forwardRef(function SearchInput22(props, ref) {
         IconButton.IconButton,
         {
           "aria-label": texts.searchInput.findNext,
-          className: "scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125",
+          className: "hover:!bg-black-subtle scale-75 !bg-transparent [&>svg]:scale-125",
           icon: "chevron-down",
           onMouseDown: handleClickFindNext,
           tabIndex: -1,

package/dist/components/SearchInput2/SearchInput2.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput2.cjs","sources":["../../../src/components/SearchInput2/SearchInput2.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { useGlobalKeyDown } from '../../hooks/useGlobalKeyDown';\nimport { useLocalization } from '../Provider/Localization';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Input } from '../Input/Input';\nimport { Shortcut } from '../Shortcut/Shortcut';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { KeyDownHandlerOptions } from '../../utils/keyboard';\nimport { Spinner } from '../Spinner/Spinner';\nimport { Icon } from '../Icon/Icon';\n\ninterface CommonSearchInput2Props\n    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'onChange' | 'value'> {\n    loading?: boolean;\n    onChange: (value: string) => void;\n    onClear?: () => void;\n    settingsContent?: JSX.Element;\n    shortcut?: string | KeyDownHandlerOptions;\n    value?: string;\n}\n\ninterface BasicSearchInput2Props extends CommonSearchInput2Props {\n    findCurrent?: never;\n    findTotal?: never;\n    onClickFindNext?: never;\n    onClickFindPrevious?: never;\n    showTotal?: never;\n}\n\ninterface ComplexSearchInput2Props extends CommonSearchInput2Props {\n    findCurrent: number | null;\n    findTotal: number | null;\n    onClickFindNext: () => void;\n    onClickFindPrevious: () => void;\n    showTotal?: boolean;\n}\n\nexport type SearchInput2Props = BasicSearchInput2Props | ComplexSearchInput2Props;\n\nexport const SearchInput2 = React.forwardRef(function SearchInput2(props: SearchInput2Props, ref: React.Ref<HTMLInputElement>) {\n    const {\n        findCurrent,\n        findTotal,\n        loading = false,\n        onChange: handleChange,\n        onClear,\n        onClickFindNext: handleClickFindNext,\n        onClickFindPrevious: handleClickFindPrevious,\n        settingsContent,\n        shortcut,\n        showTotal = true,\n        value,\n        ...attributes\n    } = props;\n    const internalRef = useMergedRef<HTMLInputElement>(ref);\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const [focused, setFocused] = React.useState(false);\n    const { texts } = useLocalization();\n    const isActive = value?.length;\n    const hasFind =\n        handleClickFindNext !== undefined &&\n        handleClickFindPrevious !== undefined &&\n        findCurrent !== undefined &&\n        findTotal !== undefined;\n\n    useGlobalKeyDown(shortcut, (event: KeyboardEvent) => {\n        if (document.activeElement !== internalRef.current) {\n            event.preventDefault();\n            internalRef.current?.focus();\n        }\n    });\n\n    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        if (\n            containerRef.current &&\n            (containerRef.current === event.relatedTarget || containerRef.current?.contains(event.relatedTarget))\n        ) {\n            return;\n        }\n\n        setFocused(false);\n        attributes.onBlur?.(event);\n    };\n\n    const handleClear = () => {\n        requestAnimationFrame(() => internalRef.current?.blur());\n        handleChange('');\n        onClear?.();\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        setFocused(true);\n        attributes.onFocus?.(event);\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        props.onKeyDown?.(event);\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        if (event.key === 'Enter') {\n            event.preventDefault();\n\n            if (hasFind && isActive) {\n                if (event.shiftKey) {\n                    handleClickFindPrevious?.();\n                } else {\n                    handleClickFindNext?.();\n                }\n            }\n\n            return;\n        }\n\n        if (event.key === 'Escape') {\n            handleClear();\n            event.stopPropagation();\n            return;\n        }\n    };\n\n    let postfix;\n\n    if (!attributes.disabled && !attributes.readOnly && (value || focused)) {\n        if (value) {\n            postfix = (\n                <IconButton\n                    aria-label={texts.searchInput.clear}\n                    className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125\"\n                    icon=\"close\"\n                    onMouseDown={handleClear}\n                    tabIndex={-1}\n                    tooltip={\n                        focused ? (\n                            <>\n                                {texts.searchInput.clear} <Shortcut keys=\"Escape\" />\n                            </>\n                        ) : (\n                            texts.searchInput.clear\n                        )\n                    }\n                />\n            );\n        }\n\n        if (hasFind && isActive) {\n            postfix = (\n                <>\n                    <span className=\"flex h-4 items-center text-gray-700\">\n                        {loading ? (\n                            <Spinner className=\"h-4 w-4\" />\n                        ) : showTotal ? (\n                            <span className=\"border-r border-black/[0.25] pr-2\" data-taco=\"search-matches-counter\">{`${\n                                findCurrent ?? 0\n                            }/${findTotal ?? 0}`}</span>\n                        ) : null}\n                    </span>\n                    {findCurrent ? (\n                        <>\n                            <IconButton\n                                aria-label={texts.searchInput.findPrevious}\n                                className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125\"\n                                icon=\"chevron-up\"\n                                onMouseDown={handleClickFindPrevious}\n                                tabIndex={-1}\n                                tooltip={\n                                    focused ? (\n                                        <>\n                                            {texts.searchInput.findPrevious} <Shortcut keys={{ shift: true, key: 'Enter' }} />\n                                        </>\n                                    ) : (\n                                        texts.searchInput.findPrevious\n                                    )\n                                }\n                            />\n                            <IconButton\n                                aria-label={texts.searchInput.findNext}\n                                className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125\"\n                                icon=\"chevron-down\"\n                                onMouseDown={handleClickFindNext}\n                                tabIndex={-1}\n                                tooltip={\n                                    focused ? (\n                                        <>\n                                            {texts.searchInput.findNext} <Shortcut keys=\"Enter\" />\n                                        </>\n                                    ) : (\n                                        texts.searchInput.findNext\n                                    )\n                                }\n                            />\n                        </>\n                    ) : null}\n                    {postfix}\n                </>\n            );\n        }\n    } else if (shortcut && !focused && !value) {\n        postfix = <Shortcut keys={shortcut} onClickCapture={() => internalRef.current?.focus()} />;\n    }\n\n    const className = cn(\n        '!pl-7 group-focus-within:!w-72 group-focus-within:yt-focus',\n        hasFind\n            ? {\n                  '!w-48': !value,\n                  '!w-72': value,\n              }\n            : '!w-48',\n        {\n            '!wcag-blue-100': isActive,\n        },\n        props.className\n    );\n\n    const icon = (\n        <Icon\n            aria-label={texts.searchInput.button}\n            className=\"-ml-0.5 scale-95\"\n            name=\"search\"\n            onClickCapture={() => internalRef.current?.focus()}\n        />\n    );\n\n    const input = (\n        <Input\n            {...attributes}\n            aria-label={attributes['aria-label'] ?? texts.searchInput.placeholder}\n            className={className}\n            data-taco=\"search-input2\"\n            onBlur={handleBlur}\n            onChange={event => handleChange(event.target.value)}\n            onFocus={handleFocus}\n            onKeyDown={handleKeyDown}\n            placeholder={attributes.placeholder ?? texts.searchInput.placeholder}\n            prefix={icon}\n            postfix={postfix}\n            ref={internalRef}\n            value={value ?? ''}\n        />\n    );\n\n    if (settingsContent) {\n        const settingsClassname = cn(\n            'border-gray-300 absolute left-0 right-0 -mt-0.5 hidden top-full group-focus-within:flex focus-within:flex flex-col gap-y-4 rounded-b border border-t-0 bg-white p-3 shadow !pt-[calc(theme(spacing.3)_+_theme(spacing[0.5]))]'\n        );\n\n        return (\n            <div\n                className={cn('group relative', { 'z-10 [&_[data-taco=input-container]]:z-10': focused })}\n                ref={containerRef}\n                // create a new stacking context so our internal z-indexes don't effect external components\n                // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n                style={{ opacity: 0.999 }}>\n                {input}\n                <div\n                    // We need to trigger blur when settings got blured as well, because settings is a part of SearchInput2 component\n                    onBlur={handleBlur}\n                    className={settingsClassname}\n                    onClickCapture={() => internalRef.current?.focus()}\n                    // tab index is important, it lets the element show as a relatedTarget on event handlers\n                    tabIndex={-1}>\n                    {settingsContent}\n                </div>\n            </div>\n        );\n    }\n\n    return input;\n});\n"],"names":["SearchInput2","useMergedRef","useLocalization","useGlobalKeyDown","IconButton","Shortcut","Spinner","Icon","Input"],"mappings":"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"}
+{"version":3,"file":"SearchInput2.cjs","sources":["../../../src/components/SearchInput2/SearchInput2.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { useGlobalKeyDown } from '../../hooks/useGlobalKeyDown';\nimport { useLocalization } from '../Provider/Localization';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Input } from '../Input/Input';\nimport { Shortcut } from '../Shortcut/Shortcut';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { KeyDownHandlerOptions } from '../../utils/keyboard';\nimport { Spinner } from '../Spinner/Spinner';\nimport { Icon } from '../Icon/Icon';\n\ninterface CommonSearchInput2Props\n    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'onChange' | 'value'> {\n    loading?: boolean;\n    onChange: (value: string) => void;\n    onClear?: () => void;\n    settingsContent?: JSX.Element;\n    shortcut?: string | KeyDownHandlerOptions;\n    value?: string;\n}\n\ninterface BasicSearchInput2Props extends CommonSearchInput2Props {\n    findCurrent?: never;\n    findTotal?: never;\n    onClickFindNext?: never;\n    onClickFindPrevious?: never;\n    showTotal?: never;\n}\n\ninterface ComplexSearchInput2Props extends CommonSearchInput2Props {\n    findCurrent: number | null;\n    findTotal: number | null;\n    onClickFindNext: () => void;\n    onClickFindPrevious: () => void;\n    showTotal?: boolean;\n}\n\nexport type SearchInput2Props = BasicSearchInput2Props | ComplexSearchInput2Props;\n\nexport const SearchInput2 = React.forwardRef(function SearchInput2(props: SearchInput2Props, ref: React.Ref<HTMLInputElement>) {\n    const {\n        findCurrent,\n        findTotal,\n        loading = false,\n        onChange: handleChange,\n        onClear,\n        onClickFindNext: handleClickFindNext,\n        onClickFindPrevious: handleClickFindPrevious,\n        settingsContent,\n        shortcut,\n        showTotal = true,\n        value,\n        ...attributes\n    } = props;\n    const internalRef = useMergedRef<HTMLInputElement>(ref);\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const [focused, setFocused] = React.useState(false);\n    const { texts } = useLocalization();\n    const isActive = value?.length;\n    const hasFind =\n        handleClickFindNext !== undefined &&\n        handleClickFindPrevious !== undefined &&\n        findCurrent !== undefined &&\n        findTotal !== undefined;\n\n    useGlobalKeyDown(shortcut, (event: KeyboardEvent) => {\n        if (document.activeElement !== internalRef.current) {\n            event.preventDefault();\n            internalRef.current?.focus();\n        }\n    });\n\n    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        if (\n            containerRef.current &&\n            (containerRef.current === event.relatedTarget || containerRef.current?.contains(event.relatedTarget))\n        ) {\n            return;\n        }\n\n        setFocused(false);\n        attributes.onBlur?.(event);\n    };\n\n    const handleClear = () => {\n        requestAnimationFrame(() => internalRef.current?.blur());\n        handleChange('');\n        onClear?.();\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        setFocused(true);\n        attributes.onFocus?.(event);\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        props.onKeyDown?.(event);\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        if (event.key === 'Enter') {\n            event.preventDefault();\n\n            if (hasFind && isActive) {\n                if (event.shiftKey) {\n                    handleClickFindPrevious?.();\n                } else {\n                    handleClickFindNext?.();\n                }\n            }\n\n            return;\n        }\n\n        if (event.key === 'Escape') {\n            handleClear();\n            event.stopPropagation();\n            return;\n        }\n    };\n\n    let postfix;\n\n    if (!attributes.disabled && !attributes.readOnly && (value || focused)) {\n        if (value) {\n            postfix = (\n                <IconButton\n                    aria-label={texts.searchInput.clear}\n                    className=\"hover:!bg-black-subtle scale-75 !bg-transparent [&>svg]:scale-125\"\n                    icon=\"close\"\n                    onMouseDown={handleClear}\n                    tabIndex={-1}\n                    tooltip={\n                        focused ? (\n                            <>\n                                {texts.searchInput.clear} <Shortcut keys=\"Escape\" />\n                            </>\n                        ) : (\n                            texts.searchInput.clear\n                        )\n                    }\n                />\n            );\n        }\n\n        if (hasFind && isActive) {\n            postfix = (\n                <>\n                    <span className=\"flex h-4 items-center text-gray-700\">\n                        {loading ? (\n                            <Spinner className=\"h-4 w-4\" />\n                        ) : showTotal ? (\n                            <span className=\"border-black-subtle border-r pr-2\" data-taco=\"search-matches-counter\">{`${\n                                findCurrent ?? 0\n                            }/${findTotal ?? 0}`}</span>\n                        ) : null}\n                    </span>\n                    {findCurrent ? (\n                        <>\n                            <IconButton\n                                aria-label={texts.searchInput.findPrevious}\n                                className=\"hover:!bg-black-subtle scale-75 !bg-transparent [&>svg]:scale-125\"\n                                icon=\"chevron-up\"\n                                onMouseDown={handleClickFindPrevious}\n                                tabIndex={-1}\n                                tooltip={\n                                    focused ? (\n                                        <>\n                                            {texts.searchInput.findPrevious} <Shortcut keys={{ shift: true, key: 'Enter' }} />\n                                        </>\n                                    ) : (\n                                        texts.searchInput.findPrevious\n                                    )\n                                }\n                            />\n                            <IconButton\n                                aria-label={texts.searchInput.findNext}\n                                className=\"hover:!bg-black-subtle scale-75 !bg-transparent [&>svg]:scale-125\"\n                                icon=\"chevron-down\"\n                                onMouseDown={handleClickFindNext}\n                                tabIndex={-1}\n                                tooltip={\n                                    focused ? (\n                                        <>\n                                            {texts.searchInput.findNext} <Shortcut keys=\"Enter\" />\n                                        </>\n                                    ) : (\n                                        texts.searchInput.findNext\n                                    )\n                                }\n                            />\n                        </>\n                    ) : null}\n                    {postfix}\n                </>\n            );\n        }\n    } else if (shortcut && !focused && !value) {\n        postfix = <Shortcut keys={shortcut} onClickCapture={() => internalRef.current?.focus()} />;\n    }\n\n    const className = cn(\n        '!pl-7 group-focus-within:!w-72 group-focus-within:yt-focus',\n        hasFind\n            ? {\n                  '!w-48': !value,\n                  '!w-72': value,\n              }\n            : '!w-48',\n        {\n            '!wcag-blue-100': isActive,\n        },\n        props.className\n    );\n\n    const icon = (\n        <Icon\n            aria-label={texts.searchInput.button}\n            className=\"-ml-0.5 scale-95\"\n            name=\"search\"\n            onClickCapture={() => internalRef.current?.focus()}\n        />\n    );\n\n    const input = (\n        <Input\n            {...attributes}\n            aria-label={attributes['aria-label'] ?? texts.searchInput.placeholder}\n            className={className}\n            data-taco=\"search-input2\"\n            onBlur={handleBlur}\n            onChange={event => handleChange(event.target.value)}\n            onFocus={handleFocus}\n            onKeyDown={handleKeyDown}\n            placeholder={attributes.placeholder ?? texts.searchInput.placeholder}\n            prefix={icon}\n            postfix={postfix}\n            ref={internalRef}\n            value={value ?? ''}\n        />\n    );\n\n    if (settingsContent) {\n        const settingsClassname = cn(\n            'border-gray-300 absolute left-0 right-0 -mt-0.5 hidden top-full group-focus-within:flex focus-within:flex flex-col gap-y-4 rounded-b border border-t-0 bg-white p-3 shadow !pt-[calc(theme(spacing.3)_+_theme(spacing[0.5]))]'\n        );\n\n        return (\n            <div\n                className={cn('group relative', { 'z-10 [&_[data-taco=input-container]]:z-10': focused })}\n                ref={containerRef}\n                // create a new stacking context so our internal z-indexes don't effect external components\n                // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n                style={{ opacity: 0.999 }}>\n                {input}\n                <div\n                    // We need to trigger blur when settings got blured as well, because settings is a part of SearchInput2 component\n                    onBlur={handleBlur}\n                    className={settingsClassname}\n                    onClickCapture={() => internalRef.current?.focus()}\n                    // tab index is important, it lets the element show as a relatedTarget on event handlers\n                    tabIndex={-1}>\n                    {settingsContent}\n                </div>\n            </div>\n        );\n    }\n\n    return input;\n});\n"],"names":["SearchInput2","useMergedRef","useLocalization","useGlobalKeyDown","IconButton","Shortcut","Spinner","Icon","Input"],"mappings":"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"}

package/dist/components/SearchInput2/SearchInput2.js

@@ -87,7 +87,7 @@ const SearchInput2 = React__default.forwardRef(function SearchInput22(props, ref
         IconButton,
         {
           "aria-label": texts.searchInput.clear,
-          className: "scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125",
+          className: "hover:!bg-black-subtle scale-75 !bg-transparent [&>svg]:scale-125",
           icon: "close",
           onMouseDown: handleClear,
           tabIndex: -1,
@@ -96,11 +96,11 @@ const SearchInput2 = React__default.forwardRef(function SearchInput22(props, ref
       );
     }
     if (hasFind && isActive) {
-      postfix = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("span", { className: "flex h-4 items-center text-gray-700" }, loading ? /* @__PURE__ */ React__default.createElement(Spinner, { className: "h-4 w-4" }) : showTotal ? /* @__PURE__ */ React__default.createElement("span", { className: "border-r border-black/[0.25] pr-2", "data-taco": "search-matches-counter" }, `${findCurrent ?? 0}/${findTotal ?? 0}`) : null), findCurrent ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+      postfix = /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("span", { className: "flex h-4 items-center text-gray-700" }, loading ? /* @__PURE__ */ React__default.createElement(Spinner, { className: "h-4 w-4" }) : showTotal ? /* @__PURE__ */ React__default.createElement("span", { className: "border-black-subtle border-r pr-2", "data-taco": "search-matches-counter" }, `${findCurrent ?? 0}/${findTotal ?? 0}`) : null), findCurrent ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
         IconButton,
         {
           "aria-label": texts.searchInput.findPrevious,
-          className: "scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125",
+          className: "hover:!bg-black-subtle scale-75 !bg-transparent [&>svg]:scale-125",
           icon: "chevron-up",
           onMouseDown: handleClickFindPrevious,
           tabIndex: -1,
@@ -110,7 +110,7 @@ const SearchInput2 = React__default.forwardRef(function SearchInput22(props, ref
         IconButton,
         {
           "aria-label": texts.searchInput.findNext,
-          className: "scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125",
+          className: "hover:!bg-black-subtle scale-75 !bg-transparent [&>svg]:scale-125",
           icon: "chevron-down",
           onMouseDown: handleClickFindNext,
           tabIndex: -1,

package/dist/components/SearchInput2/SearchInput2.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput2.js","sources":["../../../src/components/SearchInput2/SearchInput2.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { useGlobalKeyDown } from '../../hooks/useGlobalKeyDown';\nimport { useLocalization } from '../Provider/Localization';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Input } from '../Input/Input';\nimport { Shortcut } from '../Shortcut/Shortcut';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { KeyDownHandlerOptions } from '../../utils/keyboard';\nimport { Spinner } from '../Spinner/Spinner';\nimport { Icon } from '../Icon/Icon';\n\ninterface CommonSearchInput2Props\n    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'onChange' | 'value'> {\n    loading?: boolean;\n    onChange: (value: string) => void;\n    onClear?: () => void;\n    settingsContent?: JSX.Element;\n    shortcut?: string | KeyDownHandlerOptions;\n    value?: string;\n}\n\ninterface BasicSearchInput2Props extends CommonSearchInput2Props {\n    findCurrent?: never;\n    findTotal?: never;\n    onClickFindNext?: never;\n    onClickFindPrevious?: never;\n    showTotal?: never;\n}\n\ninterface ComplexSearchInput2Props extends CommonSearchInput2Props {\n    findCurrent: number | null;\n    findTotal: number | null;\n    onClickFindNext: () => void;\n    onClickFindPrevious: () => void;\n    showTotal?: boolean;\n}\n\nexport type SearchInput2Props = BasicSearchInput2Props | ComplexSearchInput2Props;\n\nexport const SearchInput2 = React.forwardRef(function SearchInput2(props: SearchInput2Props, ref: React.Ref<HTMLInputElement>) {\n    const {\n        findCurrent,\n        findTotal,\n        loading = false,\n        onChange: handleChange,\n        onClear,\n        onClickFindNext: handleClickFindNext,\n        onClickFindPrevious: handleClickFindPrevious,\n        settingsContent,\n        shortcut,\n        showTotal = true,\n        value,\n        ...attributes\n    } = props;\n    const internalRef = useMergedRef<HTMLInputElement>(ref);\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const [focused, setFocused] = React.useState(false);\n    const { texts } = useLocalization();\n    const isActive = value?.length;\n    const hasFind =\n        handleClickFindNext !== undefined &&\n        handleClickFindPrevious !== undefined &&\n        findCurrent !== undefined &&\n        findTotal !== undefined;\n\n    useGlobalKeyDown(shortcut, (event: KeyboardEvent) => {\n        if (document.activeElement !== internalRef.current) {\n            event.preventDefault();\n            internalRef.current?.focus();\n        }\n    });\n\n    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        if (\n            containerRef.current &&\n            (containerRef.current === event.relatedTarget || containerRef.current?.contains(event.relatedTarget))\n        ) {\n            return;\n        }\n\n        setFocused(false);\n        attributes.onBlur?.(event);\n    };\n\n    const handleClear = () => {\n        requestAnimationFrame(() => internalRef.current?.blur());\n        handleChange('');\n        onClear?.();\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        setFocused(true);\n        attributes.onFocus?.(event);\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        props.onKeyDown?.(event);\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        if (event.key === 'Enter') {\n            event.preventDefault();\n\n            if (hasFind && isActive) {\n                if (event.shiftKey) {\n                    handleClickFindPrevious?.();\n                } else {\n                    handleClickFindNext?.();\n                }\n            }\n\n            return;\n        }\n\n        if (event.key === 'Escape') {\n            handleClear();\n            event.stopPropagation();\n            return;\n        }\n    };\n\n    let postfix;\n\n    if (!attributes.disabled && !attributes.readOnly && (value || focused)) {\n        if (value) {\n            postfix = (\n                <IconButton\n                    aria-label={texts.searchInput.clear}\n                    className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125\"\n                    icon=\"close\"\n                    onMouseDown={handleClear}\n                    tabIndex={-1}\n                    tooltip={\n                        focused ? (\n                            <>\n                                {texts.searchInput.clear} <Shortcut keys=\"Escape\" />\n                            </>\n                        ) : (\n                            texts.searchInput.clear\n                        )\n                    }\n                />\n            );\n        }\n\n        if (hasFind && isActive) {\n            postfix = (\n                <>\n                    <span className=\"flex h-4 items-center text-gray-700\">\n                        {loading ? (\n                            <Spinner className=\"h-4 w-4\" />\n                        ) : showTotal ? (\n                            <span className=\"border-r border-black/[0.25] pr-2\" data-taco=\"search-matches-counter\">{`${\n                                findCurrent ?? 0\n                            }/${findTotal ?? 0}`}</span>\n                        ) : null}\n                    </span>\n                    {findCurrent ? (\n                        <>\n                            <IconButton\n                                aria-label={texts.searchInput.findPrevious}\n                                className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125\"\n                                icon=\"chevron-up\"\n                                onMouseDown={handleClickFindPrevious}\n                                tabIndex={-1}\n                                tooltip={\n                                    focused ? (\n                                        <>\n                                            {texts.searchInput.findPrevious} <Shortcut keys={{ shift: true, key: 'Enter' }} />\n                                        </>\n                                    ) : (\n                                        texts.searchInput.findPrevious\n                                    )\n                                }\n                            />\n                            <IconButton\n                                aria-label={texts.searchInput.findNext}\n                                className=\"scale-75 !bg-transparent hover:!bg-black/[0.08] [&>svg]:scale-125\"\n                                icon=\"chevron-down\"\n                                onMouseDown={handleClickFindNext}\n                                tabIndex={-1}\n                                tooltip={\n                                    focused ? (\n                                        <>\n                                            {texts.searchInput.findNext} <Shortcut keys=\"Enter\" />\n                                        </>\n                                    ) : (\n                                        texts.searchInput.findNext\n                                    )\n                                }\n                            />\n                        </>\n                    ) : null}\n                    {postfix}\n                </>\n            );\n        }\n    } else if (shortcut && !focused && !value) {\n        postfix = <Shortcut keys={shortcut} onClickCapture={() => internalRef.current?.focus()} />;\n    }\n\n    const className = cn(\n        '!pl-7 group-focus-within:!w-72 group-focus-within:yt-focus',\n        hasFind\n            ? {\n                  '!w-48': !value,\n                  '!w-72': value,\n              }\n            : '!w-48',\n        {\n            '!wcag-blue-100': isActive,\n        },\n        props.className\n    );\n\n    const icon = (\n        <Icon\n            aria-label={texts.searchInput.button}\n            className=\"-ml-0.5 scale-95\"\n            name=\"search\"\n            onClickCapture={() => internalRef.current?.focus()}\n        />\n    );\n\n    const input = (\n        <Input\n            {...attributes}\n            aria-label={attributes['aria-label'] ?? texts.searchInput.placeholder}\n            className={className}\n            data-taco=\"search-input2\"\n            onBlur={handleBlur}\n            onChange={event => handleChange(event.target.value)}\n            onFocus={handleFocus}\n            onKeyDown={handleKeyDown}\n            placeholder={attributes.placeholder ?? texts.searchInput.placeholder}\n            prefix={icon}\n            postfix={postfix}\n            ref={internalRef}\n            value={value ?? ''}\n        />\n    );\n\n    if (settingsContent) {\n        const settingsClassname = cn(\n            'border-gray-300 absolute left-0 right-0 -mt-0.5 hidden top-full group-focus-within:flex focus-within:flex flex-col gap-y-4 rounded-b border border-t-0 bg-white p-3 shadow !pt-[calc(theme(spacing.3)_+_theme(spacing[0.5]))]'\n        );\n\n        return (\n            <div\n                className={cn('group relative', { 'z-10 [&_[data-taco=input-container]]:z-10': focused })}\n                ref={containerRef}\n                // create a new stacking context so our internal z-indexes don't effect external components\n                // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n                style={{ opacity: 0.999 }}>\n                {input}\n                <div\n                    // We need to trigger blur when settings got blured as well, because settings is a part of SearchInput2 component\n                    onBlur={handleBlur}\n                    className={settingsClassname}\n                    onClickCapture={() => internalRef.current?.focus()}\n                    // tab index is important, it lets the element show as a relatedTarget on event handlers\n                    tabIndex={-1}>\n                    {settingsContent}\n                </div>\n            </div>\n        );\n    }\n\n    return input;\n});\n"],"names":["React","SearchInput2"],"mappings":"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"}
+{"version":3,"file":"SearchInput2.js","sources":["../../../src/components/SearchInput2/SearchInput2.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { useGlobalKeyDown } from '../../hooks/useGlobalKeyDown';\nimport { useLocalization } from '../Provider/Localization';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Input } from '../Input/Input';\nimport { Shortcut } from '../Shortcut/Shortcut';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { KeyDownHandlerOptions } from '../../utils/keyboard';\nimport { Spinner } from '../Spinner/Spinner';\nimport { Icon } from '../Icon/Icon';\n\ninterface CommonSearchInput2Props\n    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'onChange' | 'value'> {\n    loading?: boolean;\n    onChange: (value: string) => void;\n    onClear?: () => void;\n    settingsContent?: JSX.Element;\n    shortcut?: string | KeyDownHandlerOptions;\n    value?: string;\n}\n\ninterface BasicSearchInput2Props extends CommonSearchInput2Props {\n    findCurrent?: never;\n    findTotal?: never;\n    onClickFindNext?: never;\n    onClickFindPrevious?: never;\n    showTotal?: never;\n}\n\ninterface ComplexSearchInput2Props extends CommonSearchInput2Props {\n    findCurrent: number | null;\n    findTotal: number | null;\n    onClickFindNext: () => void;\n    onClickFindPrevious: () => void;\n    showTotal?: boolean;\n}\n\nexport type SearchInput2Props = BasicSearchInput2Props | ComplexSearchInput2Props;\n\nexport const SearchInput2 = React.forwardRef(function SearchInput2(props: SearchInput2Props, ref: React.Ref<HTMLInputElement>) {\n    const {\n        findCurrent,\n        findTotal,\n        loading = false,\n        onChange: handleChange,\n        onClear,\n        onClickFindNext: handleClickFindNext,\n        onClickFindPrevious: handleClickFindPrevious,\n        settingsContent,\n        shortcut,\n        showTotal = true,\n        value,\n        ...attributes\n    } = props;\n    const internalRef = useMergedRef<HTMLInputElement>(ref);\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const [focused, setFocused] = React.useState(false);\n    const { texts } = useLocalization();\n    const isActive = value?.length;\n    const hasFind =\n        handleClickFindNext !== undefined &&\n        handleClickFindPrevious !== undefined &&\n        findCurrent !== undefined &&\n        findTotal !== undefined;\n\n    useGlobalKeyDown(shortcut, (event: KeyboardEvent) => {\n        if (document.activeElement !== internalRef.current) {\n            event.preventDefault();\n            internalRef.current?.focus();\n        }\n    });\n\n    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        if (\n            containerRef.current &&\n            (containerRef.current === event.relatedTarget || containerRef.current?.contains(event.relatedTarget))\n        ) {\n            return;\n        }\n\n        setFocused(false);\n        attributes.onBlur?.(event);\n    };\n\n    const handleClear = () => {\n        requestAnimationFrame(() => internalRef.current?.blur());\n        handleChange('');\n        onClear?.();\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        setFocused(true);\n        attributes.onFocus?.(event);\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        props.onKeyDown?.(event);\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        if (event.key === 'Enter') {\n            event.preventDefault();\n\n            if (hasFind && isActive) {\n                if (event.shiftKey) {\n                    handleClickFindPrevious?.();\n                } else {\n                    handleClickFindNext?.();\n                }\n            }\n\n            return;\n        }\n\n        if (event.key === 'Escape') {\n            handleClear();\n            event.stopPropagation();\n            return;\n        }\n    };\n\n    let postfix;\n\n    if (!attributes.disabled && !attributes.readOnly && (value || focused)) {\n        if (value) {\n            postfix = (\n                <IconButton\n                    aria-label={texts.searchInput.clear}\n                    className=\"hover:!bg-black-subtle scale-75 !bg-transparent [&>svg]:scale-125\"\n                    icon=\"close\"\n                    onMouseDown={handleClear}\n                    tabIndex={-1}\n                    tooltip={\n                        focused ? (\n                            <>\n                                {texts.searchInput.clear} <Shortcut keys=\"Escape\" />\n                            </>\n                        ) : (\n                            texts.searchInput.clear\n                        )\n                    }\n                />\n            );\n        }\n\n        if (hasFind && isActive) {\n            postfix = (\n                <>\n                    <span className=\"flex h-4 items-center text-gray-700\">\n                        {loading ? (\n                            <Spinner className=\"h-4 w-4\" />\n                        ) : showTotal ? (\n                            <span className=\"border-black-subtle border-r pr-2\" data-taco=\"search-matches-counter\">{`${\n                                findCurrent ?? 0\n                            }/${findTotal ?? 0}`}</span>\n                        ) : null}\n                    </span>\n                    {findCurrent ? (\n                        <>\n                            <IconButton\n                                aria-label={texts.searchInput.findPrevious}\n                                className=\"hover:!bg-black-subtle scale-75 !bg-transparent [&>svg]:scale-125\"\n                                icon=\"chevron-up\"\n                                onMouseDown={handleClickFindPrevious}\n                                tabIndex={-1}\n                                tooltip={\n                                    focused ? (\n                                        <>\n                                            {texts.searchInput.findPrevious} <Shortcut keys={{ shift: true, key: 'Enter' }} />\n                                        </>\n                                    ) : (\n                                        texts.searchInput.findPrevious\n                                    )\n                                }\n                            />\n                            <IconButton\n                                aria-label={texts.searchInput.findNext}\n                                className=\"hover:!bg-black-subtle scale-75 !bg-transparent [&>svg]:scale-125\"\n                                icon=\"chevron-down\"\n                                onMouseDown={handleClickFindNext}\n                                tabIndex={-1}\n                                tooltip={\n                                    focused ? (\n                                        <>\n                                            {texts.searchInput.findNext} <Shortcut keys=\"Enter\" />\n                                        </>\n                                    ) : (\n                                        texts.searchInput.findNext\n                                    )\n                                }\n                            />\n                        </>\n                    ) : null}\n                    {postfix}\n                </>\n            );\n        }\n    } else if (shortcut && !focused && !value) {\n        postfix = <Shortcut keys={shortcut} onClickCapture={() => internalRef.current?.focus()} />;\n    }\n\n    const className = cn(\n        '!pl-7 group-focus-within:!w-72 group-focus-within:yt-focus',\n        hasFind\n            ? {\n                  '!w-48': !value,\n                  '!w-72': value,\n              }\n            : '!w-48',\n        {\n            '!wcag-blue-100': isActive,\n        },\n        props.className\n    );\n\n    const icon = (\n        <Icon\n            aria-label={texts.searchInput.button}\n            className=\"-ml-0.5 scale-95\"\n            name=\"search\"\n            onClickCapture={() => internalRef.current?.focus()}\n        />\n    );\n\n    const input = (\n        <Input\n            {...attributes}\n            aria-label={attributes['aria-label'] ?? texts.searchInput.placeholder}\n            className={className}\n            data-taco=\"search-input2\"\n            onBlur={handleBlur}\n            onChange={event => handleChange(event.target.value)}\n            onFocus={handleFocus}\n            onKeyDown={handleKeyDown}\n            placeholder={attributes.placeholder ?? texts.searchInput.placeholder}\n            prefix={icon}\n            postfix={postfix}\n            ref={internalRef}\n            value={value ?? ''}\n        />\n    );\n\n    if (settingsContent) {\n        const settingsClassname = cn(\n            'border-gray-300 absolute left-0 right-0 -mt-0.5 hidden top-full group-focus-within:flex focus-within:flex flex-col gap-y-4 rounded-b border border-t-0 bg-white p-3 shadow !pt-[calc(theme(spacing.3)_+_theme(spacing[0.5]))]'\n        );\n\n        return (\n            <div\n                className={cn('group relative', { 'z-10 [&_[data-taco=input-container]]:z-10': focused })}\n                ref={containerRef}\n                // create a new stacking context so our internal z-indexes don't effect external components\n                // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n                style={{ opacity: 0.999 }}>\n                {input}\n                <div\n                    // We need to trigger blur when settings got blured as well, because settings is a part of SearchInput2 component\n                    onBlur={handleBlur}\n                    className={settingsClassname}\n                    onClickCapture={() => internalRef.current?.focus()}\n                    // tab index is important, it lets the element show as a relatedTarget on event handlers\n                    tabIndex={-1}>\n                    {settingsContent}\n                </div>\n            </div>\n        );\n    }\n\n    return input;\n});\n"],"names":["React","SearchInput2"],"mappings":"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"}