@economic/taco 2.19.0 → 2.20.0

package/dist/esm/packages/taco/src/components/Listbox/ScrollableList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollableList.js","sources":["../../../../../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { getNextIndexFromKey } from '../../utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '../../utils/hooks/useListScrollTo';\nimport './ScrollableList.css';\nimport { Spinner } from '../Spinner/Spinner';\nimport { useLocalization } from '../Provider/Localization';\nimport { Checkbox } from '../Checkbox/Checkbox';\nimport { getInputClasses } from '../Input/util';\n\nexport type ScrollableListItemValue = string | number | boolean | null;\n\nexport type ScrollableListItem = {\n    /**\n     * Set whether the item is disabled.\n     * This will both change the style and make the item unselectable\n     */\n    disabled?: boolean;\n    /* Specifies whether the item has child items -- intended for internal use only */\n    hasChildren?: boolean;\n    /** Place an icon before the item's text */\n    icon?: React.ReactElement;\n    /* The index path to the item -- intended for internal use only */\n    path?: string;\n    /** Text describing the item */\n    text: string | JSX.Element;\n    /** Value of the item */\n    value: ScrollableListItemValue;\n    /** Child items to show hierarchical data */\n    children?: ScrollableListItem[];\n};\n\n/** @internal */\nexport type ScrollableListProps = Omit<\n    React.HTMLAttributes<HTMLUListElement>,\n    'defaultValue' | 'id' | 'onChange' | 'onClick' | 'onKeyDown'\n> & {\n    /** Data indicating the options in scrollable list */\n    data: ScrollableListItem[];\n    /** Sets the list to be disabled */\n    disabled?: boolean;\n    /** Draws attention to the scrollable list by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Set an id for the scrollable list */\n    id: string;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    /**\n     * Shows a loading indicator with a text next to it.\n     * Read more about how to provide the text in `Provider` component.\n     */\n    loading?: boolean;\n    /**\n     * Handler called when current active/selected option changes in a scrollable list.\n     * @param index indicates the index of the current active option\n     */\n    onChange: (index: number) => void;\n    /** Handler called when option is clicked */\n    onClick?: (event: React.MouseEvent<HTMLLIElement>, index: number) => void;\n    /**\n     * Set whether the selected item should be scrolled into view when listbox is focused.\n     * Default value is `false`\n     */\n    scrollOnFocus?: boolean;\n    /** Handler called when a key is pressed */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>, index: number | undefined) => void;\n    /* Sets the list to read only mode */\n    readOnly?: boolean;\n    /**\n     * Value of the scrollable list representing the selected item.\n     * It needs to be an existing value from the provided data.\n     */\n    value: number | undefined;\n    /**\n     * Allows to select multiple items from the list\n     */\n    multiselect?: boolean;\n    /**\n     * Contains the currently selected values when multiselect mode is ON.\n     */\n    selectedIndexes?: number[];\n    /**\n     * True when all available (not disabled) options are selected\n     */\n    allOptionsSelected?: boolean;\n};\n\n/** @internal */\nexport type ScrollableListPropsWithRef = ScrollableListProps & React.RefAttributes<HTMLUListElement>;\n\nexport const getId = (id: string, value: ScrollableListItemValue): string => `${id}_${value}`;\n\nconst getNextEnabledItem = (\n    event: React.KeyboardEvent<HTMLElement>,\n    data: ScrollableListItem[],\n    index: number | undefined\n): number | undefined => {\n    const nextIndex = getNextIndexFromKey(event.key, data.length, index);\n\n    if (nextIndex) {\n        if (nextIndex === index) {\n            return index;\n        } else if (data[nextIndex] && data[nextIndex].disabled) {\n            return getNextEnabledItem(event, data, nextIndex);\n        }\n    }\n\n    return nextIndex;\n};\n\nexport const ScrollableList = React.forwardRef(function ScrollableList(\n    props: ScrollableListProps,\n    ref: React.Ref<HTMLUListElement>\n) {\n    const {\n        data,\n        disabled,\n        highlighted,\n        id,\n        invalid: _,\n        loading,\n        onChange: setCurrentIndex,\n        onClick,\n        onFocus,\n        onKeyDown,\n        readOnly,\n        scrollOnFocus = false,\n        value: currentIndex,\n        multiselect,\n        selectedIndexes = [],\n        allOptionsSelected = false,\n        ...otherProps\n    } = props;\n    const listRef = useMergedRef<HTMLUListElement>(ref);\n    const itemRefs = React.useMemo(() => data.map(() => React.createRef<HTMLLIElement>()), [data]);\n    const { texts } = useLocalization();\n    const { scrollTo } = useListScrollTo(listRef, itemRefs);\n\n    React.useEffect(() => {\n        if (currentIndex && itemRefs[currentIndex]?.current) {\n            itemRefs[currentIndex].current?.scrollIntoView({\n                block: 'center',\n            });\n        }\n    }, []);\n\n    React.useEffect(() => {\n        scrollTo(currentIndex);\n    }, [currentIndex]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>): void => {\n        const nextIndex = getNextEnabledItem(event, data, currentIndex);\n\n        if (nextIndex !== undefined && nextIndex !== currentIndex) {\n            event.preventDefault();\n            scrollTo(nextIndex);\n            setCurrentIndex(nextIndex);\n        }\n\n        if (onKeyDown) {\n            event.persist();\n            const index = nextIndex !== undefined ? nextIndex : currentIndex;\n            onKeyDown(event, index);\n        }\n\n        // Stops the keyboard event from propagating so that keyboard event on other components outside the scrollable\n        // list are not executed.\n        event.stopPropagation();\n    };\n\n    const handleClick = (index: number) => (event: React.MouseEvent<HTMLLIElement>) => {\n        setCurrentIndex(index);\n\n        if (onClick) {\n            event.persist();\n            onClick(event, index);\n        }\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLUListElement>): void => {\n        if (scrollOnFocus) {\n            scrollTo(currentIndex);\n        }\n\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const getOptionCheckedState = (optionValue: string, index: number): boolean => {\n        if (optionValue === '#ALL-OPTIONS#') {\n            return allOptionsSelected;\n        } else if (!optionValue || !selectedIndexes) {\n            return false;\n        } else {\n            return selectedIndexes.findIndex(i => i === index) !== -1;\n        }\n    };\n\n    const options = data.map((option, index) => {\n        const depth = option.path ? option.path.split('.').length - 1 : 0;\n\n        return {\n            'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,\n            'data-focused': currentIndex === index,\n            children: option.text,\n            className: cn(\n                'flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue-500 focus:border-blue-500',\n                {\n                    'sticky top-0 font-bold': depth === 0 && !!option.hasChildren,\n                }\n            ),\n            disabled: option.disabled,\n            icon: option.icon,\n            id: getId(id, option.value),\n            key: getId(id, option.value),\n            onClick: !disabled && !readOnly ? handleClick(index) : undefined,\n            ref: itemRefs[index],\n            role: 'option',\n            style:\n                depth > 0\n                    ? {\n                          paddingLeft: `${depth + 1}rem`,\n                      }\n                    : undefined,\n        };\n    });\n\n    const list: React.HTMLAttributes<HTMLUListElement> &\n        React.RefAttributes<HTMLUListElement> & { disabled?: boolean; readOnly?: boolean } = {\n        ...otherProps,\n        className: cn(\n            'inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto',\n            getInputClasses(props),\n            {\n                'yt-list--multiselect': multiselect,\n                'pointer-events-none': disabled,\n                'cursor-not-allowed': disabled || readOnly,\n            },\n            otherProps.className\n        ),\n        disabled,\n        id,\n        onFocus: !disabled && !readOnly ? handleFocus : undefined,\n        onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,\n        readOnly,\n        ref: listRef,\n        role: options.length <= 0 || loading ? 'presentation' : 'listbox',\n        tabIndex: otherProps.tabIndex || 0,\n    };\n\n    return (\n        <ul {...list} data-taco=\"scrollable-list\">\n            {loading ? (\n                <li className=\"yt-list__empty\">\n                    <span>\n                        <Spinner delay={0} />\n                    </span>\n                    <span>{texts.listbox.loading}</span>\n                </li>\n            ) : options.length ? (\n                options.map(({ children, icon, ...optionProps }) => (\n                    <li {...optionProps}>\n                        {icon}\n                        <span className=\"flex-grow truncate text-left\">{children}</span>\n                        {multiselect && (\n                            <Checkbox\n                                // In multiselect variant, this checkbox only acts as visual representation of item being selected,\n                                // so need to be taken out of screen reader scope.\n                                aria-hidden\n                                tabIndex={-1}\n                                checked={optionProps['aria-selected']}\n                                onChange={() => null}\n                                className=\"pointer-events-none ml-2 self-center p-px\"\n                            />\n                        )}\n                    </li>\n                ))\n            ) : (\n                <li className=\"yt-list__empty\">\n                    <span>{texts.listbox.empty}</span>\n                </li>\n            )}\n        </ul>\n    );\n});\n"],"names":["getId","id","value","getNextEnabledItem","event","data","index","nextIndex","getNextIndexFromKey","key","length","disabled","ScrollableList","React","props","ref","highlighted","invalid","_","loading","onChange","setCurrentIndex","onClick","onFocus","onKeyDown","readOnly","scrollOnFocus","currentIndex","multiselect","selectedIndexes","allOptionsSelected","otherProps","listRef","useMergedRef","itemRefs","map","texts","useLocalization","scrollTo","useListScrollTo","_itemRefs$currentInde","current","_itemRefs$currentInde2","scrollIntoView","block","handleKeyDown","undefined","preventDefault","persist","stopPropagation","handleClick","handleFocus","getOptionCheckedState","optionValue","findIndex","i","options","option","depth","path","split","String","children","text","className","cn","hasChildren","icon","role","style","paddingLeft","list","getInputClasses","tabIndex","Spinner","delay","listbox","optionProps","Checkbox","checked","empty"],"mappings":"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"}
+{"version":3,"file":"ScrollableList.js","sources":["../../../../../../../src/components/Listbox/ScrollableList.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { getNextIndexFromKey } from '../../utils/hooks/useListKeyboardNavigation';\nimport { useListScrollTo } from '../../utils/hooks/useListScrollTo';\nimport './ScrollableList.css';\nimport { Spinner } from '../Spinner/Spinner';\nimport { useLocalization } from '../Provider/Localization';\nimport { Checkbox } from '../Checkbox/Checkbox';\nimport { getInputClasses } from '../Input/util';\n\nexport type ScrollableListItemValue = string | number | boolean | null;\n\nexport type ScrollableListItem = {\n    /**\n     * Set whether the item is disabled.\n     * This will both change the style and make the item unselectable\n     */\n    disabled?: boolean;\n    /* Specifies whether the item has child items -- intended for internal use only */\n    hasChildren?: boolean;\n    /** Place an icon before the item's text */\n    icon?: React.ReactElement;\n    /* The index path to the item -- intended for internal use only */\n    path?: string;\n    /** Text describing the item */\n    text: string | JSX.Element;\n    /** Value of the item */\n    value: ScrollableListItemValue;\n    /** Child items to show hierarchical data */\n    children?: ScrollableListItem[];\n};\n\n/** @internal */\nexport type ScrollableListProps = Omit<\n    React.HTMLAttributes<HTMLUListElement>,\n    'defaultValue' | 'id' | 'onChange' | 'onClick' | 'onKeyDown'\n> & {\n    /** Data indicating the options in scrollable list */\n    data: ScrollableListItem[];\n    /** Sets the list to be disabled */\n    disabled?: boolean;\n    /** Draws attention to the scrollable list by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Set an id for the scrollable list */\n    id: string;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    /**\n     * Shows a loading indicator with a text next to it.\n     * Read more about how to provide the text in `Provider` component.\n     */\n    loading?: boolean;\n    /**\n     * Handler called when current active/selected option changes in a scrollable list.\n     * @param index indicates the index of the current active option\n     */\n    onChange: (index: number) => void;\n    /** Handler called when option is clicked */\n    onClick?: (event: React.MouseEvent<HTMLLIElement>, index: number) => void;\n    /**\n     * Set whether the selected item should be scrolled into view when listbox is focused.\n     * Default value is `false`\n     */\n    scrollOnFocus?: boolean;\n    /** Handler called when a key is pressed */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLUListElement>, index: number | undefined) => void;\n    /* Sets the list to read only mode */\n    readOnly?: boolean;\n    /**\n     * Value of the scrollable list representing the selected item.\n     * It needs to be an existing value from the provided data.\n     */\n    value: number | undefined;\n    /**\n     * Allows to select multiple items from the list\n     */\n    multiselect?: boolean;\n    /**\n     * Contains the currently selected values when multiselect mode is ON.\n     */\n    selectedIndexes?: number[];\n    /**\n     * True when all available (not disabled) options are selected\n     */\n    allOptionsSelected?: boolean;\n};\n\n/** @internal */\nexport type ScrollableListPropsWithRef = ScrollableListProps & React.RefAttributes<HTMLUListElement>;\n\nexport const getId = (id: string, value: ScrollableListItemValue): string => `${id}_${value}`;\n\nconst getNextEnabledItem = (\n    event: React.KeyboardEvent<HTMLElement>,\n    data: ScrollableListItem[],\n    index: number | undefined\n): number | undefined => {\n    const nextIndex = getNextIndexFromKey(event.key, data.length, index);\n\n    if (nextIndex) {\n        if (nextIndex === index) {\n            return index;\n        } else if (data[nextIndex] && data[nextIndex].disabled) {\n            return getNextEnabledItem(event, data, nextIndex);\n        }\n    }\n\n    return nextIndex;\n};\n\nexport const ScrollableList = React.forwardRef(function ScrollableList(\n    props: ScrollableListProps,\n    ref: React.Ref<HTMLUListElement>\n) {\n    const {\n        data,\n        disabled,\n        highlighted,\n        id,\n        invalid: _,\n        loading,\n        onChange: setCurrentIndex,\n        onClick,\n        onFocus,\n        onKeyDown,\n        readOnly,\n        scrollOnFocus = false,\n        value: currentIndex,\n        multiselect,\n        selectedIndexes = [],\n        allOptionsSelected = false,\n        ...otherProps\n    } = props;\n    const listRef = useMergedRef<HTMLUListElement>(ref);\n    const itemRefs = React.useMemo(() => data.map(() => React.createRef<HTMLLIElement>()), [data]);\n    const { texts } = useLocalization();\n    const { scrollTo } = useListScrollTo(listRef, itemRefs);\n\n    React.useEffect(() => {\n        if (currentIndex && itemRefs[currentIndex]?.current) {\n            itemRefs[currentIndex].current?.scrollIntoView({\n                block: 'center',\n            });\n        }\n    }, []);\n\n    React.useEffect(() => {\n        scrollTo(currentIndex);\n    }, [currentIndex]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>): void => {\n        const nextIndex = getNextEnabledItem(event, data, currentIndex);\n\n        if (nextIndex !== undefined && nextIndex !== currentIndex) {\n            event.preventDefault();\n            scrollTo(nextIndex);\n            setCurrentIndex(nextIndex);\n        }\n\n        if (onKeyDown) {\n            event.persist();\n            const index = nextIndex !== undefined ? nextIndex : currentIndex;\n            onKeyDown(event, index);\n        }\n\n        // Stops the keyboard event from propagating so that keyboard event on other components outside the scrollable\n        // list are not executed.\n        event.stopPropagation();\n    };\n\n    const handleClick = (index: number) => (event: React.MouseEvent<HTMLLIElement>) => {\n        setCurrentIndex(index);\n\n        if (onClick) {\n            event.persist();\n            onClick(event, index);\n        }\n    };\n\n    const handleFocus = (event: React.FocusEvent<HTMLUListElement>): void => {\n        if (scrollOnFocus) {\n            scrollTo(currentIndex);\n        }\n\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const getOptionCheckedState = (optionValue: string, index: number): boolean => {\n        if (optionValue === '#ALL-OPTIONS#') {\n            return allOptionsSelected;\n        } else if (!optionValue || !selectedIndexes) {\n            return false;\n        } else {\n            return selectedIndexes.findIndex(i => i === index) !== -1;\n        }\n    };\n\n    const options = data.map((option, index) => {\n        const depth = option.path ? option.path.split('.').length - 1 : 0;\n\n        return {\n            'aria-selected': multiselect ? getOptionCheckedState(String(option.value), index) : currentIndex === index,\n            'data-focused': currentIndex === index,\n            children: option.text,\n            className: cn(\n                'flex items-center px-3 w-full cursor-pointer bg-white flex-[0_0_2rem] focus:wcag-blue-500 focus:border-blue-500',\n                {\n                    'sticky top-0 font-bold': depth === 0 && !!option.hasChildren,\n                }\n            ),\n            disabled: option.disabled,\n            icon: option.icon,\n            id: getId(id, option.value),\n            key: getId(id, option.value),\n            onClick: !disabled && !readOnly ? handleClick(index) : undefined,\n            ref: itemRefs[index],\n            role: 'option',\n            style:\n                depth > 0\n                    ? {\n                          paddingLeft: `${depth + 1}rem`,\n                      }\n                    : undefined,\n        };\n    });\n\n    const list: React.HTMLAttributes<HTMLUListElement> &\n        React.RefAttributes<HTMLUListElement> & { disabled?: boolean; readOnly?: boolean } = {\n        ...otherProps,\n        className: cn(\n            'inline-flex flex-col list-none !p-0 m-0 overflow-y-auto h-auto',\n            getInputClasses(props),\n            {\n                'yt-list--multiselect': multiselect,\n                'pointer-events-none': disabled,\n                'cursor-not-allowed': disabled || readOnly,\n            },\n            otherProps.className\n        ),\n        disabled,\n        id,\n        onFocus: !disabled && !readOnly ? handleFocus : undefined,\n        onKeyDown: !disabled && !readOnly ? handleKeyDown : undefined,\n        readOnly,\n        ref: listRef,\n        role: options.length <= 0 || loading ? 'presentation' : 'listbox',\n        tabIndex: otherProps.tabIndex || 0,\n    };\n\n    return (\n        <ul {...list} data-taco=\"scrollable-list\">\n            {loading ? (\n                <li className=\"yt-list__empty\">\n                    <span>\n                        <Spinner delay={0} />\n                    </span>\n                    <span>{texts.listbox.loading}</span>\n                </li>\n            ) : options.length ? (\n                options.map(({ children, icon, ...optionProps }) => (\n                    <li {...optionProps}>\n                        {icon}\n                        <span className=\"flex-grow truncate text-left\">{children}</span>\n                        {multiselect && (\n                            <Checkbox\n                                // In multiselect variant, this checkbox only acts as visual representation of item being selected,\n                                // so need to be taken out of screen reader scope.\n                                aria-hidden\n                                tabIndex={-1}\n                                checked={optionProps['aria-selected']}\n                                onChange={() => null}\n                                className=\"pointer-events-none ml-2 self-center p-px\"\n                            />\n                        )}\n                    </li>\n                ))\n            ) : (\n                <li className=\"yt-list__empty\">\n                    <span>{texts.listbox.empty}</span>\n                </li>\n            )}\n        </ul>\n    );\n});\n"],"names":["getId","id","value","getNextEnabledItem","event","data","index","nextIndex","getNextIndexFromKey","key","length","disabled","ScrollableList","React","props","ref","highlighted","invalid","_","loading","onChange","setCurrentIndex","onClick","onFocus","onKeyDown","readOnly","scrollOnFocus","currentIndex","multiselect","selectedIndexes","allOptionsSelected","otherProps","listRef","useMergedRef","itemRefs","map","texts","useLocalization","scrollTo","useListScrollTo","_itemRefs$currentInde","current","_itemRefs$currentInde2","scrollIntoView","block","handleKeyDown","undefined","preventDefault","persist","stopPropagation","handleClick","handleFocus","getOptionCheckedState","optionValue","findIndex","i","options","option","depth","path","split","String","children","text","className","cn","hasChildren","icon","role","style","paddingLeft","list","getInputClasses","tabIndex","Spinner","delay","listbox","optionProps","Checkbox","checked","empty"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { forwardRef, useRef, Children, createRef, cloneElement, useEffect, createElement } from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { useMergedRef } from '../../../hooks/useMergedRef.js';
 import { createShortcutKeyDownHandler } from '../../../utils/keyboard.js';
 import { useCurrentMenu } from '../Context.js';

package/dist/esm/packages/taco/src/components/Menu/components/Content.js.map

@@ -1 +1 @@
-{"version":3,"file":"Content.js","sources":["../../../../../../../../src/components/Menu/components/Content.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'classnames';\nimport { Align, Placement } from '../../../types';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { useCurrentMenu } from '../Context';\nimport { createShortcutKeyDownHandler } from '../../../utils/keyboard';\nimport { MenuItemProps } from './Item';\n\nexport type MenuContentProps = Omit<DropdownMenuPrimitive.DropdownMenuContentProps, 'children' | 'side'> & {\n    align?: Align;\n    children: React.ReactNode;\n    /** Set the position of the Menu relative to its trigger. Default value is `bottom` */\n    placement?: Placement;\n};\n\nexport const Content = React.forwardRef(function MenuContent(props: MenuContentProps, ref: React.Ref<HTMLDivElement>) {\n    const internalRef = useMergedRef<any>(ref);\n    const menu = useCurrentMenu();\n    const { align = 'start', children, placement: side, ...otherProps } = props;\n    const className = cn('border border-transparent rounded block outline-none p-1 yt-shadow wcag-white', props.className);\n\n    // attach refs to each child\n    const childrenRefs = React.useRef<React.RefObject<HTMLDivElement>[]>([]);\n    const childrenWithRefs = (React.Children.toArray(props.children) as React.ReactElement<MenuItemProps & { ref: any }>[])\n        .filter(child => !!child) // remove falsey children\n        .map((child, index) => {\n            childrenRefs.current[index] = React.createRef<HTMLDivElement>();\n            return React.cloneElement(child, { ref: childrenRefs.current[index] });\n        });\n\n    // register any shortcuts attached to children\n    React.useEffect(() => {\n        const shortcuts: ((event: KeyboardEvent) => void)[] = [];\n        childrenWithRefs.forEach((child, index) => {\n            if (child.props.shortcut) {\n                shortcuts.push(\n                    createShortcutKeyDownHandler(child.props.shortcut, event => {\n                        event.preventDefault();\n                        menu?.open();\n                        setTimeout(() => childrenRefs.current[index]?.current?.click(), 1);\n                    })\n                );\n            }\n        });\n\n        shortcuts.forEach(handler => document.addEventListener('keydown', handler));\n\n        return () => {\n            shortcuts.forEach(handler => document.removeEventListener('keydown', handler));\n        };\n    }, [childrenWithRefs]);\n\n    return (\n        <DropdownMenuPrimitive.Portal>\n            <DropdownMenuPrimitive.Content\n                {...otherProps}\n                align={align}\n                className={className}\n                data-taco=\"menu\"\n                side={side}\n                sideOffset={3}\n                style={{ minWidth: menu?.minWidth }}\n                ref={internalRef}>\n                {childrenWithRefs}\n            </DropdownMenuPrimitive.Content>\n        </DropdownMenuPrimitive.Portal>\n    );\n});\n"],"names":["Content","React","MenuContent","props","ref","internalRef","useMergedRef","menu","useCurrentMenu","align","children","placement","side","otherProps","className","cn","childrenRefs","childrenWithRefs","toArray","filter","child","map","index","current","shortcuts","forEach","shortcut","push","createShortcutKeyDownHandler","event","preventDefault","open","setTimeout","_childrenRefs$current","_childrenRefs$current2","click","handler","document","addEventListener","removeEventListener","DropdownMenuPrimitive","sideOffset","style","minWidth"],"mappings":";;;;;;;MAgBaA,OAAO,gBAAGC,UAAgB,CAAC,SAASC,WAAWA,CAACC,KAAuB,EAAEC,GAA8B;EAChH,MAAMC,WAAW,GAAGC,YAAY,CAAMF,GAAG,CAAC;EAC1C,MAAMG,IAAI,GAAGC,cAAc,EAAE;EAC7B,MAAM;IAAEC,KAAK,GAAG,OAAO;IAAEC,QAAQ;IAAEC,SAAS,EAAEC,IAAI;IAAE,GAAGC;GAAY,GAAGV,KAAK;EAC3E,MAAMW,SAAS,GAAGC,EAAE,CAAC,+EAA+E,EAAEZ,KAAK,CAACW,SAAS,CAAC;;EAGtH,MAAME,YAAY,GAAGf,MAAY,CAAoC,EAAE,CAAC;EACxE,MAAMgB,gBAAgB,GAAIhB,QAAc,CAACiB,OAAO,CAACf,KAAK,CAACO,QAAQ,CAAwD,CAClHS,MAAM,CAACC,KAAK,IAAI,CAAC,CAACA,KAAK,CAAC;GACxBC,GAAG,CAAC,CAACD,KAAK,EAAEE,KAAK;IACdN,YAAY,CAACO,OAAO,CAACD,KAAK,CAAC,gBAAGrB,SAAe,EAAkB;IAC/D,oBAAOA,YAAkB,CAACmB,KAAK,EAAE;MAAEhB,GAAG,EAAEY,YAAY,CAACO,OAAO,CAACD,KAAK;KAAG,CAAC;GACzE,CAAC;;EAGNrB,SAAe,CAAC;IACZ,MAAMuB,SAAS,GAAuC,EAAE;IACxDP,gBAAgB,CAACQ,OAAO,CAAC,CAACL,KAAK,EAAEE,KAAK;MAClC,IAAIF,KAAK,CAACjB,KAAK,CAACuB,QAAQ,EAAE;QACtBF,SAAS,CAACG,IAAI,CACVC,4BAA4B,CAACR,KAAK,CAACjB,KAAK,CAACuB,QAAQ,EAAEG,KAAK;UACpDA,KAAK,CAACC,cAAc,EAAE;UACtBvB,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEwB,IAAI,EAAE;UACZC,UAAU,CAAC;YAAA,IAAAC,qBAAA,EAAAC,sBAAA;YAAA,QAAAD,qBAAA,GAAMjB,YAAY,CAACO,OAAO,CAACD,KAAK,CAAC,cAAAW,qBAAA,wBAAAC,sBAAA,GAA3BD,qBAAA,CAA6BV,OAAO,cAAAW,sBAAA,uBAApCA,sBAAA,CAAsCC,KAAK,EAAE;aAAE,CAAC,CAAC;SACrE,CAAC,CACL;;KAER,CAAC;IAEFX,SAAS,CAACC,OAAO,CAACW,OAAO,IAAIC,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEF,OAAO,CAAC,CAAC;IAE3E,OAAO;MACHZ,SAAS,CAACC,OAAO,CAACW,OAAO,IAAIC,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEH,OAAO,CAAC,CAAC;KACjF;GACJ,EAAE,CAACnB,gBAAgB,CAAC,CAAC;EAEtB,oBACIhB,cAACuC,MAA4B,qBACzBvC,cAACuC,SAA6B,oBACtB3B,UAAU;IACdJ,KAAK,EAAEA,KAAK;IACZK,SAAS,EAAEA,SAAS;iBACV,MAAM;IAChBF,IAAI,EAAEA,IAAI;IACV6B,UAAU,EAAE,CAAC;IACbC,KAAK,EAAE;MAAEC,QAAQ,EAAEpC,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEoC;KAAU;IACnCvC,GAAG,EAAEC;MACJY,gBAAgB,CACW,CACL;AAEvC,CAAC;;;;"}
+{"version":3,"file":"Content.js","sources":["../../../../../../../../src/components/Menu/components/Content.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'clsx';\nimport { Align, Placement } from '../../../types';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { useCurrentMenu } from '../Context';\nimport { createShortcutKeyDownHandler } from '../../../utils/keyboard';\nimport { MenuItemProps } from './Item';\n\nexport type MenuContentProps = Omit<DropdownMenuPrimitive.DropdownMenuContentProps, 'children' | 'side'> & {\n    align?: Align;\n    children: React.ReactNode;\n    /** Set the position of the Menu relative to its trigger. Default value is `bottom` */\n    placement?: Placement;\n};\n\nexport const Content = React.forwardRef(function MenuContent(props: MenuContentProps, ref: React.Ref<HTMLDivElement>) {\n    const internalRef = useMergedRef<any>(ref);\n    const menu = useCurrentMenu();\n    const { align = 'start', children, placement: side, ...otherProps } = props;\n    const className = cn('border border-transparent rounded block outline-none p-1 yt-shadow wcag-white', props.className);\n\n    // attach refs to each child\n    const childrenRefs = React.useRef<React.RefObject<HTMLDivElement>[]>([]);\n    const childrenWithRefs = (React.Children.toArray(props.children) as React.ReactElement<MenuItemProps & { ref: any }>[])\n        .filter(child => !!child) // remove falsey children\n        .map((child, index) => {\n            childrenRefs.current[index] = React.createRef<HTMLDivElement>();\n            return React.cloneElement(child, { ref: childrenRefs.current[index] });\n        });\n\n    // register any shortcuts attached to children\n    React.useEffect(() => {\n        const shortcuts: ((event: KeyboardEvent) => void)[] = [];\n        childrenWithRefs.forEach((child, index) => {\n            if (child.props.shortcut) {\n                shortcuts.push(\n                    createShortcutKeyDownHandler(child.props.shortcut, event => {\n                        event.preventDefault();\n                        menu?.open();\n                        setTimeout(() => childrenRefs.current[index]?.current?.click(), 1);\n                    })\n                );\n            }\n        });\n\n        shortcuts.forEach(handler => document.addEventListener('keydown', handler));\n\n        return () => {\n            shortcuts.forEach(handler => document.removeEventListener('keydown', handler));\n        };\n    }, [childrenWithRefs]);\n\n    return (\n        <DropdownMenuPrimitive.Portal>\n            <DropdownMenuPrimitive.Content\n                {...otherProps}\n                align={align}\n                className={className}\n                data-taco=\"menu\"\n                side={side}\n                sideOffset={3}\n                style={{ minWidth: menu?.minWidth }}\n                ref={internalRef}>\n                {childrenWithRefs}\n            </DropdownMenuPrimitive.Content>\n        </DropdownMenuPrimitive.Portal>\n    );\n});\n"],"names":["Content","React","MenuContent","props","ref","internalRef","useMergedRef","menu","useCurrentMenu","align","children","placement","side","otherProps","className","cn","childrenRefs","childrenWithRefs","toArray","filter","child","map","index","current","shortcuts","forEach","shortcut","push","createShortcutKeyDownHandler","event","preventDefault","open","setTimeout","_childrenRefs$current","_childrenRefs$current2","click","handler","document","addEventListener","removeEventListener","DropdownMenuPrimitive","sideOffset","style","minWidth"],"mappings":";;;;;;;MAgBaA,OAAO,gBAAGC,UAAgB,CAAC,SAASC,WAAWA,CAACC,KAAuB,EAAEC,GAA8B;EAChH,MAAMC,WAAW,GAAGC,YAAY,CAAMF,GAAG,CAAC;EAC1C,MAAMG,IAAI,GAAGC,cAAc,EAAE;EAC7B,MAAM;IAAEC,KAAK,GAAG,OAAO;IAAEC,QAAQ;IAAEC,SAAS,EAAEC,IAAI;IAAE,GAAGC;GAAY,GAAGV,KAAK;EAC3E,MAAMW,SAAS,GAAGC,EAAE,CAAC,+EAA+E,EAAEZ,KAAK,CAACW,SAAS,CAAC;;EAGtH,MAAME,YAAY,GAAGf,MAAY,CAAoC,EAAE,CAAC;EACxE,MAAMgB,gBAAgB,GAAIhB,QAAc,CAACiB,OAAO,CAACf,KAAK,CAACO,QAAQ,CAAwD,CAClHS,MAAM,CAACC,KAAK,IAAI,CAAC,CAACA,KAAK,CAAC;GACxBC,GAAG,CAAC,CAACD,KAAK,EAAEE,KAAK;IACdN,YAAY,CAACO,OAAO,CAACD,KAAK,CAAC,gBAAGrB,SAAe,EAAkB;IAC/D,oBAAOA,YAAkB,CAACmB,KAAK,EAAE;MAAEhB,GAAG,EAAEY,YAAY,CAACO,OAAO,CAACD,KAAK;KAAG,CAAC;GACzE,CAAC;;EAGNrB,SAAe,CAAC;IACZ,MAAMuB,SAAS,GAAuC,EAAE;IACxDP,gBAAgB,CAACQ,OAAO,CAAC,CAACL,KAAK,EAAEE,KAAK;MAClC,IAAIF,KAAK,CAACjB,KAAK,CAACuB,QAAQ,EAAE;QACtBF,SAAS,CAACG,IAAI,CACVC,4BAA4B,CAACR,KAAK,CAACjB,KAAK,CAACuB,QAAQ,EAAEG,KAAK;UACpDA,KAAK,CAACC,cAAc,EAAE;UACtBvB,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEwB,IAAI,EAAE;UACZC,UAAU,CAAC;YAAA,IAAAC,qBAAA,EAAAC,sBAAA;YAAA,QAAAD,qBAAA,GAAMjB,YAAY,CAACO,OAAO,CAACD,KAAK,CAAC,cAAAW,qBAAA,wBAAAC,sBAAA,GAA3BD,qBAAA,CAA6BV,OAAO,cAAAW,sBAAA,uBAApCA,sBAAA,CAAsCC,KAAK,EAAE;aAAE,CAAC,CAAC;SACrE,CAAC,CACL;;KAER,CAAC;IAEFX,SAAS,CAACC,OAAO,CAACW,OAAO,IAAIC,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEF,OAAO,CAAC,CAAC;IAE3E,OAAO;MACHZ,SAAS,CAACC,OAAO,CAACW,OAAO,IAAIC,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEH,OAAO,CAAC,CAAC;KACjF;GACJ,EAAE,CAACnB,gBAAgB,CAAC,CAAC;EAEtB,oBACIhB,cAACuC,MAA4B,qBACzBvC,cAACuC,SAA6B,oBACtB3B,UAAU;IACdJ,KAAK,EAAEA,KAAK;IACZK,SAAS,EAAEA,SAAS;iBACV,MAAM;IAChBF,IAAI,EAAEA,IAAI;IACV6B,UAAU,EAAE,CAAC;IACbC,KAAK,EAAE;MAAEC,QAAQ,EAAEpC,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEoC;KAAU;IACnCvC,GAAG,EAAEC;MACJY,gBAAgB,CACW,CACL;AAEvC,CAAC;;;;"}

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

@@ -1,5 +1,5 @@
 import { forwardRef, createElement } from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { useCurrentMenu } from '../Context.js';
 import { Label } from '@radix-ui/react-dropdown-menu';
 

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

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../../../../../../src/components/Menu/components/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'classnames';\nimport { useCurrentMenu } from '../Context';\n\nexport type MenuHeaderProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Header = React.forwardRef<HTMLDivElement, MenuHeaderProps>(function MenuHeader(props, ref) {\n    const menu = useCurrentMenu();\n    const className = cn(\n        'flex items-center justify-start h-7 pr-1.5 text-xs text-grey-700',\n        {\n            'pl-7': menu?.indented,\n            'pl-1.5': !menu?.indented,\n        },\n        props.className\n    );\n\n    return <DropdownMenuPrimitive.Label {...props} className={className} ref={ref} />;\n});\n"],"names":["Header","React","MenuHeader","props","ref","menu","useCurrentMenu","className","cn","indented","DropdownMenuPrimitive"],"mappings":";;;;;MAOaA,MAAM,gBAAGC,UAAgB,CAAkC,SAASC,UAAUA,CAACC,KAAK,EAAEC,GAAG;EAClG,MAAMC,IAAI,GAAGC,cAAc,EAAE;EAC7B,MAAMC,SAAS,GAAGC,EAAE,CAChB,kEAAkE,EAClE;IACI,MAAM,EAAEH,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEI,QAAQ;IACtB,QAAQ,EAAE,EAACJ,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAEI,QAAQ;GAC5B,EACDN,KAAK,CAACI,SAAS,CAClB;EAED,oBAAON,cAACS,KAA2B,oBAAKP,KAAK;IAAEI,SAAS,EAAEA,SAAS;IAAEH,GAAG,EAAEA;KAAO;AACrF,CAAC;;;;"}
+{"version":3,"file":"Header.js","sources":["../../../../../../../../src/components/Menu/components/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'clsx';\nimport { useCurrentMenu } from '../Context';\n\nexport type MenuHeaderProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Header = React.forwardRef<HTMLDivElement, MenuHeaderProps>(function MenuHeader(props, ref) {\n    const menu = useCurrentMenu();\n    const className = cn(\n        'flex items-center justify-start h-7 pr-1.5 text-xs text-grey-700',\n        {\n            'pl-7': menu?.indented,\n            'pl-1.5': !menu?.indented,\n        },\n        props.className\n    );\n\n    return <DropdownMenuPrimitive.Label {...props} className={className} ref={ref} />;\n});\n"],"names":["Header","React","MenuHeader","props","ref","menu","useCurrentMenu","className","cn","indented","DropdownMenuPrimitive"],"mappings":";;;;;MAOaA,MAAM,gBAAGC,UAAgB,CAAkC,SAASC,UAAUA,CAACC,KAAK,EAAEC,GAAG;EAClG,MAAMC,IAAI,GAAGC,cAAc,EAAE;EAC7B,MAAMC,SAAS,GAAGC,EAAE,CAChB,kEAAkE,EAClE;IACI,MAAM,EAAEH,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEI,QAAQ;IACtB,QAAQ,EAAE,EAACJ,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAEI,QAAQ;GAC5B,EACDN,KAAK,CAACI,SAAS,CAClB;EAED,oBAAON,cAACS,KAA2B,oBAAKP,KAAK;IAAEI,SAAS,EAAEA,SAAS;IAAEH,GAAG,EAAEA;KAAO;AACrF,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Menu/components/Item.js

@@ -1,5 +1,5 @@
 import { forwardRef, createElement, useEffect } from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { Icon as Icon$1 } from '../../Icon/Icon.js';
 import { useCurrentMenu } from '../Context.js';
 import { Sub, SubTrigger, Item as Item$1 } from '@radix-ui/react-dropdown-menu';

package/dist/esm/packages/taco/src/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 * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'classnames';\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 { PopoverProps } from '../../Popover/Popover';\nimport { KeyDownHandlerOptions } from '../../../utils/keyboard';\n\nexport const Icon = ({ name }) => (\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 = ({ disabled, indented, className }) => {\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            'cursor-pointer text-black hover:wcag-grey-200 data-[highlighted]:wcag-grey-200': !disabled,\n            'cursor-not-allowed hover:bg-white text-grey-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    popover?: (props: Partial<PopoverProps>) => JSX.Element;\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, popover, shortcut, subMenu, ...otherProps } = props;\n    const menu = useCurrentMenu();\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'];\n\n    let handleClick;\n\n    // radix has a bug that does not disable clicks when disabled is set on items\n    if (disabled) {\n        handleClick = event => {\n            event.preventDefault();\n            event.stopPropagation();\n        };\n    }\n\n    if (subMenu) {\n        return (\n            <DropdownMenuPrimitive.Sub>\n                <DropdownMenuPrimitive.SubTrigger {...otherProps} className={className} onClick={handleClick} 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                </DropdownMenuPrimitive.SubTrigger>\n                {subMenu()}\n            </DropdownMenuPrimitive.Sub>\n        );\n    }\n\n    const handleSelect = event => {\n        if (onClick) {\n            onClick(event);\n        }\n\n        if (props['aria-haspopup'] || typeof dialog === 'function' || typeof popover === 'function') {\n            event.preventDefault();\n        }\n    };\n\n    let button = (\n        <DropdownMenuPrimitive.Item {...otherProps} className={className} onClick={handleClick} onSelect={handleSelect} ref={ref}>\n            {icon ? <Icon name={icon} /> : null}\n            {props.children}\n            {shortcut ? (\n                <span className=\"ml-auto pl-5\">\n                    <Shortcut keys={shortcut} className=\"text-grey-700\" />\n                </span>\n            ) : null}\n        </DropdownMenuPrimitive.Item>\n    );\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button, onClose: menu?.close });\n    } else if (typeof popover === 'function') {\n        button = popover({ trigger: button });\n    }\n\n    return button;\n});\n"],"names":["Icon","name","React","className","IconPrimitive","useItemStyling","disabled","indented","menu","useCurrentMenu","registerIndentation","cn","Item","MenuItem","props","ref","dialog","icon","onClick","popover","shortcut","subMenu","otherProps","_props$disabled","handleClick","event","preventDefault","stopPropagation","DropdownMenuPrimitive","children","handleSelect","button","onSelect","Shortcut","keys","trigger","onClose","close"],"mappings":"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"}
+{"version":3,"file":"Item.js","sources":["../../../../../../../../src/components/Menu/components/Item.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-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 { PopoverProps } from '../../Popover/Popover';\nimport { KeyDownHandlerOptions } from '../../../utils/keyboard';\n\nexport const Icon = ({ name }) => (\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 = ({ disabled, indented, className }) => {\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            'cursor-pointer text-black hover:wcag-grey-200 data-[highlighted]:wcag-grey-200': !disabled,\n            'cursor-not-allowed hover:bg-white text-grey-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    popover?: (props: Partial<PopoverProps>) => JSX.Element;\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, popover, shortcut, subMenu, ...otherProps } = props;\n    const menu = useCurrentMenu();\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'];\n\n    let handleClick;\n\n    // radix has a bug that does not disable clicks when disabled is set on items\n    if (disabled) {\n        handleClick = event => {\n            event.preventDefault();\n            event.stopPropagation();\n        };\n    }\n\n    if (subMenu) {\n        return (\n            <DropdownMenuPrimitive.Sub>\n                <DropdownMenuPrimitive.SubTrigger {...otherProps} className={className} onClick={handleClick} 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                </DropdownMenuPrimitive.SubTrigger>\n                {subMenu()}\n            </DropdownMenuPrimitive.Sub>\n        );\n    }\n\n    const handleSelect = event => {\n        if (onClick) {\n            onClick(event);\n        }\n\n        if (props['aria-haspopup'] || typeof dialog === 'function' || typeof popover === 'function') {\n            event.preventDefault();\n        }\n    };\n\n    let button = (\n        <DropdownMenuPrimitive.Item {...otherProps} className={className} onClick={handleClick} onSelect={handleSelect} ref={ref}>\n            {icon ? <Icon name={icon} /> : null}\n            {props.children}\n            {shortcut ? (\n                <span className=\"ml-auto pl-5\">\n                    <Shortcut keys={shortcut} className=\"text-grey-700\" />\n                </span>\n            ) : null}\n        </DropdownMenuPrimitive.Item>\n    );\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button, onClose: menu?.close });\n    } else if (typeof popover === 'function') {\n        button = popover({ trigger: button });\n    }\n\n    return button;\n});\n"],"names":["Icon","name","React","className","IconPrimitive","useItemStyling","disabled","indented","menu","useCurrentMenu","registerIndentation","cn","Item","MenuItem","props","ref","dialog","icon","onClick","popover","shortcut","subMenu","otherProps","_props$disabled","handleClick","event","preventDefault","stopPropagation","DropdownMenuPrimitive","children","handleSelect","button","onSelect","Shortcut","keys","trigger","onClose","close"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Menu/components/RadioGroup.js

@@ -1,5 +1,5 @@
 import { useContext, createElement, createContext, forwardRef } from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { RadioItem as RadioItem$1, ItemIndicator, RadioGroup as RadioGroup$1 } from '@radix-ui/react-dropdown-menu';
 import { useItemStyling } from './Item.js';
 import { getRadioGroupItemValueAsString, useRadioGroup } from '../../RadioGroup/RadioGroup.js';

package/dist/esm/packages/taco/src/components/Menu/components/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../../../../../../src/components/Menu/components/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'classnames';\nimport { getRadioGroupItemValueAsString, RadioGroupItemProps, RadioGroupProps, useRadioGroup } from '../../RadioGroup/RadioGroup';\nimport { useItemStyling } from './Item';\n\nexport type MenuRadioGroupItemProps = RadioGroupItemProps<HTMLDivElement>;\n\nexport const RadioItem = (props: MenuRadioGroupItemProps) => {\n    const context = React.useContext(MenuRadioGroupContext);\n    const { children, value, ...otherProps } = props;\n    const disabled = context.disabled || props.disabled;\n    const className = useItemStyling({\n        disabled: disabled,\n        indented: true,\n        className: props.className,\n    });\n\n    return (\n        <DropdownMenuPrimitive.RadioItem\n            {...otherProps}\n            className={className}\n            disabled={disabled}\n            value={getRadioGroupItemValueAsString(value)}>\n            <DropdownMenuPrimitive.ItemIndicator className=\"absolute left-0 ml-1.5\">\n                <span className=\"ml-1 flex h-1.5 w-1.5 rounded-full bg-current \" />\n            </DropdownMenuPrimitive.ItemIndicator>\n            {children}\n        </DropdownMenuPrimitive.RadioItem>\n    );\n};\n\nconst MenuRadioGroupContext = React.createContext({ disabled: false });\n\nexport type MenuRadioGroupProps = RadioGroupProps;\n\nexport type ForwardedMenuRadioGroupWithStatics = React.ForwardRefExoticComponent<\n    MenuRadioGroupProps & React.RefAttributes<HTMLElement>\n> & {\n    Item: React.FunctionComponent<MenuRadioGroupItemProps>;\n};\n\nexport const RadioGroup = React.forwardRef<HTMLDivElement, MenuRadioGroupProps>(function MenuRadioItem(props, ref) {\n    const { context, props: otherProps } = useRadioGroup(props);\n    const className = cn('flex flex-col', props.className);\n\n    return (\n        <MenuRadioGroupContext.Provider value={context}>\n            <DropdownMenuPrimitive.RadioGroup {...otherProps} className={className} ref={ref} />\n        </MenuRadioGroupContext.Provider>\n    );\n}) as ForwardedMenuRadioGroupWithStatics;\nRadioGroup.Item = RadioItem;\n"],"names":["RadioItem","props","context","React","MenuRadioGroupContext","children","value","otherProps","disabled","className","useItemStyling","indented","DropdownMenuPrimitive","getRadioGroupItemValueAsString","RadioGroup","MenuRadioItem","ref","useRadioGroup","cn","Provider","Item"],"mappings":";;;;;;MAQaA,SAAS,GAAIC,KAA8B;EACpD,MAAMC,OAAO,GAAGC,UAAgB,CAACC,qBAAqB,CAAC;EACvD,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAChD,MAAMO,QAAQ,GAAGN,OAAO,CAACM,QAAQ,IAAIP,KAAK,CAACO,QAAQ;EACnD,MAAMC,SAAS,GAAGC,cAAc,CAAC;IAC7BF,QAAQ,EAAEA,QAAQ;IAClBG,QAAQ,EAAE,IAAI;IACdF,SAAS,EAAER,KAAK,CAACQ;GACpB,CAAC;EAEF,oBACIN,cAACS,WAA+B,oBACxBL,UAAU;IACdE,SAAS,EAAEA,SAAS;IACpBD,QAAQ,EAAEA,QAAQ;IAClBF,KAAK,EAAEO,8BAA8B,CAACP,KAAK;mBAC3CH,cAACS,aAAmC;IAACH,SAAS,EAAC;kBAC3CN;IAAMM,SAAS,EAAC;IAAmD,CACjC,EACrCJ,QAAQ,CACqB;AAE1C;AAEA,MAAMD,qBAAqB,gBAAGD,aAAmB,CAAC;EAAEK,QAAQ,EAAE;CAAO,CAAC;MAUzDM,UAAU,gBAAGX,UAAgB,CAAsC,SAASY,aAAaA,CAACd,KAAK,EAAEe,GAAG;EAC7G,MAAM;IAAEd,OAAO;IAAED,KAAK,EAAEM;GAAY,GAAGU,aAAa,CAAChB,KAAK,CAAC;EAC3D,MAAMQ,SAAS,GAAGS,EAAE,CAAC,eAAe,EAAEjB,KAAK,CAACQ,SAAS,CAAC;EAEtD,oBACIN,cAACC,qBAAqB,CAACe,QAAQ;IAACb,KAAK,EAAEJ;kBACnCC,cAACS,YAAgC,oBAAKL,UAAU;IAAEE,SAAS,EAAEA,SAAS;IAAEO,GAAG,EAAEA;KAAO,CACvD;AAEzC,CAAC;AACDF,UAAU,CAACM,IAAI,GAAGpB,SAAS;;;;"}
+{"version":3,"file":"RadioGroup.js","sources":["../../../../../../../../src/components/Menu/components/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'clsx';\nimport { getRadioGroupItemValueAsString, RadioGroupItemProps, RadioGroupProps, useRadioGroup } from '../../RadioGroup/RadioGroup';\nimport { useItemStyling } from './Item';\n\nexport type MenuRadioGroupItemProps = RadioGroupItemProps<HTMLDivElement>;\n\nexport const RadioItem = (props: MenuRadioGroupItemProps) => {\n    const context = React.useContext(MenuRadioGroupContext);\n    const { children, value, ...otherProps } = props;\n    const disabled = context.disabled || props.disabled;\n    const className = useItemStyling({\n        disabled: disabled,\n        indented: true,\n        className: props.className,\n    });\n\n    return (\n        <DropdownMenuPrimitive.RadioItem\n            {...otherProps}\n            className={className}\n            disabled={disabled}\n            value={getRadioGroupItemValueAsString(value)}>\n            <DropdownMenuPrimitive.ItemIndicator className=\"absolute left-0 ml-1.5\">\n                <span className=\"ml-1 flex h-1.5 w-1.5 rounded-full bg-current \" />\n            </DropdownMenuPrimitive.ItemIndicator>\n            {children}\n        </DropdownMenuPrimitive.RadioItem>\n    );\n};\n\nconst MenuRadioGroupContext = React.createContext({ disabled: false });\n\nexport type MenuRadioGroupProps = RadioGroupProps;\n\nexport type ForwardedMenuRadioGroupWithStatics = React.ForwardRefExoticComponent<\n    MenuRadioGroupProps & React.RefAttributes<HTMLElement>\n> & {\n    Item: React.FunctionComponent<MenuRadioGroupItemProps>;\n};\n\nexport const RadioGroup = React.forwardRef<HTMLDivElement, MenuRadioGroupProps>(function MenuRadioItem(props, ref) {\n    const { context, props: otherProps } = useRadioGroup(props);\n    const className = cn('flex flex-col', props.className);\n\n    return (\n        <MenuRadioGroupContext.Provider value={context}>\n            <DropdownMenuPrimitive.RadioGroup {...otherProps} className={className} ref={ref} />\n        </MenuRadioGroupContext.Provider>\n    );\n}) as ForwardedMenuRadioGroupWithStatics;\nRadioGroup.Item = RadioItem;\n"],"names":["RadioItem","props","context","React","MenuRadioGroupContext","children","value","otherProps","disabled","className","useItemStyling","indented","DropdownMenuPrimitive","getRadioGroupItemValueAsString","RadioGroup","MenuRadioItem","ref","useRadioGroup","cn","Provider","Item"],"mappings":";;;;;;MAQaA,SAAS,GAAIC,KAA8B;EACpD,MAAMC,OAAO,GAAGC,UAAgB,CAACC,qBAAqB,CAAC;EACvD,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAChD,MAAMO,QAAQ,GAAGN,OAAO,CAACM,QAAQ,IAAIP,KAAK,CAACO,QAAQ;EACnD,MAAMC,SAAS,GAAGC,cAAc,CAAC;IAC7BF,QAAQ,EAAEA,QAAQ;IAClBG,QAAQ,EAAE,IAAI;IACdF,SAAS,EAAER,KAAK,CAACQ;GACpB,CAAC;EAEF,oBACIN,cAACS,WAA+B,oBACxBL,UAAU;IACdE,SAAS,EAAEA,SAAS;IACpBD,QAAQ,EAAEA,QAAQ;IAClBF,KAAK,EAAEO,8BAA8B,CAACP,KAAK;mBAC3CH,cAACS,aAAmC;IAACH,SAAS,EAAC;kBAC3CN;IAAMM,SAAS,EAAC;IAAmD,CACjC,EACrCJ,QAAQ,CACqB;AAE1C;AAEA,MAAMD,qBAAqB,gBAAGD,aAAmB,CAAC;EAAEK,QAAQ,EAAE;CAAO,CAAC;MAUzDM,UAAU,gBAAGX,UAAgB,CAAsC,SAASY,aAAaA,CAACd,KAAK,EAAEe,GAAG;EAC7G,MAAM;IAAEd,OAAO;IAAED,KAAK,EAAEM;GAAY,GAAGU,aAAa,CAAChB,KAAK,CAAC;EAC3D,MAAMQ,SAAS,GAAGS,EAAE,CAAC,eAAe,EAAEjB,KAAK,CAACQ,SAAS,CAAC;EAEtD,oBACIN,cAACC,qBAAqB,CAACe,QAAQ;IAACb,KAAK,EAAEJ;kBACnCC,cAACS,YAAgC,oBAAKL,UAAU;IAAEE,SAAS,EAAEA,SAAS;IAAEO,GAAG,EAAEA;KAAO,CACvD;AAEzC,CAAC;AACDF,UAAU,CAACM,IAAI,GAAGpB,SAAS;;;;"}

package/dist/esm/packages/taco/src/components/Menu/components/SubMenu.js

@@ -1,5 +1,5 @@
 import { forwardRef, createElement } from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { useMergedRef } from '../../../hooks/useMergedRef.js';
 import { Portal, SubContent } from '@radix-ui/react-dropdown-menu';
 

package/dist/esm/packages/taco/src/components/Menu/components/SubMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubMenu.js","sources":["../../../../../../../../src/components/Menu/components/SubMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'classnames';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\n\nexport type MenuSubMenuProps = Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps, 'children' | 'side'> & {\n    children: React.ReactNode;\n};\n\nexport const SubMenu = React.forwardRef(function MenuSubMenu(props: MenuSubMenuProps, ref: React.Ref<HTMLDivElement>) {\n    const internalRef = useMergedRef<any>(ref);\n    const { children, ...otherProps } = props;\n    const className = cn('border border-transparent rounded block outline-none p-1 yt-shadow wcag-white', props.className);\n\n    return (\n        <DropdownMenuPrimitive.Portal>\n            <DropdownMenuPrimitive.SubContent\n                {...otherProps}\n                className={className}\n                data-taco=\"menu-submenu\"\n                sideOffset={4}\n                ref={internalRef}>\n                {children}\n            </DropdownMenuPrimitive.SubContent>\n        </DropdownMenuPrimitive.Portal>\n    );\n});\n"],"names":["SubMenu","React","MenuSubMenu","props","ref","internalRef","useMergedRef","children","otherProps","className","cn","DropdownMenuPrimitive","sideOffset"],"mappings":";;;;;MASaA,OAAO,gBAAGC,UAAgB,CAAC,SAASC,WAAWA,CAACC,KAAuB,EAAEC,GAA8B;EAChH,MAAMC,WAAW,GAAGC,YAAY,CAAMF,GAAG,CAAC;EAC1C,MAAM;IAAEG,QAAQ;IAAE,GAAGC;GAAY,GAAGL,KAAK;EACzC,MAAMM,SAAS,GAAGC,EAAE,CAAC,+EAA+E,EAAEP,KAAK,CAACM,SAAS,CAAC;EAEtH,oBACIR,cAACU,MAA4B,qBACzBV,cAACU,UAAgC,oBACzBH,UAAU;IACdC,SAAS,EAAEA,SAAS;iBACV,cAAc;IACxBG,UAAU,EAAE,CAAC;IACbR,GAAG,EAAEC;MACJE,QAAQ,CACsB,CACR;AAEvC,CAAC;;;;"}
+{"version":3,"file":"SubMenu.js","sources":["../../../../../../../../src/components/Menu/components/SubMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'clsx';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\n\nexport type MenuSubMenuProps = Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps, 'children' | 'side'> & {\n    children: React.ReactNode;\n};\n\nexport const SubMenu = React.forwardRef(function MenuSubMenu(props: MenuSubMenuProps, ref: React.Ref<HTMLDivElement>) {\n    const internalRef = useMergedRef<any>(ref);\n    const { children, ...otherProps } = props;\n    const className = cn('border border-transparent rounded block outline-none p-1 yt-shadow wcag-white', props.className);\n\n    return (\n        <DropdownMenuPrimitive.Portal>\n            <DropdownMenuPrimitive.SubContent\n                {...otherProps}\n                className={className}\n                data-taco=\"menu-submenu\"\n                sideOffset={4}\n                ref={internalRef}>\n                {children}\n            </DropdownMenuPrimitive.SubContent>\n        </DropdownMenuPrimitive.Portal>\n    );\n});\n"],"names":["SubMenu","React","MenuSubMenu","props","ref","internalRef","useMergedRef","children","otherProps","className","cn","DropdownMenuPrimitive","sideOffset"],"mappings":";;;;;MASaA,OAAO,gBAAGC,UAAgB,CAAC,SAASC,WAAWA,CAACC,KAAuB,EAAEC,GAA8B;EAChH,MAAMC,WAAW,GAAGC,YAAY,CAAMF,GAAG,CAAC;EAC1C,MAAM;IAAEG,QAAQ;IAAE,GAAGC;GAAY,GAAGL,KAAK;EACzC,MAAMM,SAAS,GAAGC,EAAE,CAAC,+EAA+E,EAAEP,KAAK,CAACM,SAAS,CAAC;EAEtH,oBACIR,cAACU,MAA4B,qBACzBV,cAACU,UAAgC,oBACzBH,UAAU;IACdC,SAAS,EAAEA,SAAS;iBACV,cAAc;IACxBG,UAAU,EAAE,CAAC;IACbR,GAAG,EAAEC;MACJE,QAAQ,CACsB,CACR;AAEvC,CAAC;;;;"}

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

@@ -1,5 +1,5 @@
 import { forwardRef, createElement } from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { Icon } from '../Icon/Icon.js';
 import { Root, Thumb } from '@radix-ui/react-switch';
 

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

@@ -1 +1 @@
-{"version":3,"file":"ModeSwitch.js","sources":["../../../../../../../src/components/ModeSwitch/ModeSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PrimitiveSwitch from '@radix-ui/react-switch';\n\nimport { Icon } from '../Icon/Icon';\n\ntype ModeSwitchBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n    /* Whether user input is required */\n    required?: boolean;\n};\n\ninterface UncontrolledModeSwitchProps extends ModeSwitchBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\ninterface ControlledModeSwitchProps extends ModeSwitchBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type ModeSwitchProps = UncontrolledModeSwitchProps | ControlledModeSwitchProps;\n\nexport const ModeSwitch = React.forwardRef(function ModeSwitch(props: ModeSwitchProps, ref: React.Ref<HTMLButtonElement>) {\n    const { onChange, ...otherProps } = props;\n\n    const className = cn(\n        'group w-14 h-8 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus p-1',\n        {\n            'bg-grey-500 hover:bg-grey-700 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700': !props.disabled,\n            'bg-grey-500 aria-checked:bg-blue-500 cursor-not-allowed opacity-50': props.disabled,\n        },\n        props.className\n    );\n\n    return (\n        <PrimitiveSwitch.Root {...otherProps} className={className} data-taco=\"mode\" onCheckedChange={onChange} ref={ref}>\n            <PrimitiveSwitch.Thumb className=\"'will-change-transform flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform group-disabled:opacity-50 group-aria-checked:translate-x-[100%]\">\n                <Icon name=\"edit-simple\" className=\"!h-5 !w-5\" />\n            </PrimitiveSwitch.Thumb>\n        </PrimitiveSwitch.Root>\n    );\n});\nModeSwitch.displayName = 'ModeSwitch';\n"],"names":["ModeSwitch","React","props","ref","onChange","otherProps","className","cn","disabled","PrimitiveSwitch","onCheckedChange","Icon","name","displayName"],"mappings":";;;;;MA4BaA,UAAU,gBAAGC,UAAgB,CAAC,SAASD,UAAUA,CAACE,KAAsB,EAAEC,GAAiC;EACpH,MAAM;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGH,KAAK;EAEzC,MAAMI,SAAS,GAAGC,EAAE,CAChB,uFAAuF,EACvF;IACI,uFAAuF,EAAE,CAACL,KAAK,CAACM,QAAQ;IACxG,oEAAoE,EAAEN,KAAK,CAACM;GAC/E,EACDN,KAAK,CAACI,SAAS,CAClB;EAED,oBACIL,cAACQ,IAAoB,oBAAKJ,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,MAAM;IAACI,eAAe,EAAEN,QAAQ;IAAED,GAAG,EAAEA;mBACzGF,cAACQ,KAAqB;IAACH,SAAS,EAAC;kBAC7BL,cAACU,IAAI;IAACC,IAAI,EAAC,aAAa;IAACN,SAAS,EAAC;IAAc,CAC7B,CACL;AAE/B,CAAC;AACDN,UAAU,CAACa,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"ModeSwitch.js","sources":["../../../../../../../src/components/ModeSwitch/ModeSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as PrimitiveSwitch from '@radix-ui/react-switch';\n\nimport { Icon } from '../Icon/Icon';\n\ntype ModeSwitchBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n    /* Whether user input is required */\n    required?: boolean;\n};\n\ninterface UncontrolledModeSwitchProps extends ModeSwitchBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\ninterface ControlledModeSwitchProps extends ModeSwitchBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type ModeSwitchProps = UncontrolledModeSwitchProps | ControlledModeSwitchProps;\n\nexport const ModeSwitch = React.forwardRef(function ModeSwitch(props: ModeSwitchProps, ref: React.Ref<HTMLButtonElement>) {\n    const { onChange, ...otherProps } = props;\n\n    const className = cn(\n        'group w-14 h-8 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus p-1',\n        {\n            'bg-grey-500 hover:bg-grey-700 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700': !props.disabled,\n            'bg-grey-500 aria-checked:bg-blue-500 cursor-not-allowed opacity-50': props.disabled,\n        },\n        props.className\n    );\n\n    return (\n        <PrimitiveSwitch.Root {...otherProps} className={className} data-taco=\"mode\" onCheckedChange={onChange} ref={ref}>\n            <PrimitiveSwitch.Thumb className=\"'will-change-transform flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform group-disabled:opacity-50 group-aria-checked:translate-x-[100%]\">\n                <Icon name=\"edit-simple\" className=\"!h-5 !w-5\" />\n            </PrimitiveSwitch.Thumb>\n        </PrimitiveSwitch.Root>\n    );\n});\nModeSwitch.displayName = 'ModeSwitch';\n"],"names":["ModeSwitch","React","props","ref","onChange","otherProps","className","cn","disabled","PrimitiveSwitch","onCheckedChange","Icon","name","displayName"],"mappings":";;;;;MA4BaA,UAAU,gBAAGC,UAAgB,CAAC,SAASD,UAAUA,CAACE,KAAsB,EAAEC,GAAiC;EACpH,MAAM;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGH,KAAK;EAEzC,MAAMI,SAAS,GAAGC,EAAE,CAChB,uFAAuF,EACvF;IACI,uFAAuF,EAAE,CAACL,KAAK,CAACM,QAAQ;IACxG,oEAAoE,EAAEN,KAAK,CAACM;GAC/E,EACDN,KAAK,CAACI,SAAS,CAClB;EAED,oBACIL,cAACQ,IAAoB,oBAAKJ,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,MAAM;IAACI,eAAe,EAAEN,QAAQ;IAAED,GAAG,EAAEA;mBACzGF,cAACQ,KAAqB;IAACH,SAAS,EAAC;kBAC7BL,cAACU,IAAI;IAACC,IAAI,EAAC,aAAa;IAACN,SAAS,EAAC;IAAc,CAC7B,CACL;AAE/B,CAAC;AACDN,UAAU,CAACa,WAAW,GAAG,YAAY;;;;"}

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

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { Icon } from '../Icon/Icon.js';
 import { useMergedRef } from '../../hooks/useMergedRef.js';
 import { Treeview } from '../Treeview/Treeview.js';

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

@@ -1 +1 @@
-{"version":3,"file":"Navigation.js","sources":["../../../../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { TreeviewProps, Treeview, TreeviewGroupProps, TreeviewItemProps } from '../Treeview/Treeview';\nimport { Icon } from '../Icon/Icon';\nimport { useDropTarget } from '../../utils/hooks/useDropTarget';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport './Navigation.css';\n\n// Item\nexport type NavigationItemProps = Omit<TreeviewItemProps, 'prefix'> & {\n    /** Change the style to indicate the link is selected */\n    active?: boolean;\n    /** Handler to be used when dropping a dragged element over the navigation link */\n    onDrop?: React.DragEventHandler;\n    /**\n     * Small amount of information placed next to the text of the link.\n     * This can be any valid react element, for e.g. a `span`.\n     * Should be used to indicate a relevant information of the link,\n     * for e.g. the number of unread notifications\n     */\n    postfix?: React.ReactNode;\n    /**\n     * Small amount of information placed before the text of the link.\n     * This can be any valid react element, for e.g. a `span`.\n     * Should be used to indicate a feedback for user,\n     * for e.g. display some sort of visual informational state or a relevant icon.\n     */\n    prefix?: React.ReactNode;\n    /** Target of the link */\n    target?: string;\n};\n\nconst Item = React.forwardRef(function Item(props: NavigationItemProps, ref: React.Ref<HTMLAnchorElement>) {\n    const { active, children, onDrop, postfix, prefix, role, ...otherProps } = props;\n    const proxyRef = useMergedRef<HTMLAnchorElement>(ref);\n    const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);\n    const isTreeitem = role === 'treeitem';\n    const className = cn(\n        'yt-navigation__item cursor-pointer',\n        {\n            'w-full mb-px py-1 px-3 flex items-center hover:bg-grey-300': isTreeitem,\n            'bg-white w-full h-10 px-3 flex-shrink-0 flex items-center justify-between cursor-pointer': !isTreeitem,\n            'yt-navigation__item--active': active && !isDraggedOver,\n            'bg-grey-300': isTreeitem && active && !isDraggedOver,\n            'yt-navigation__item--dropping bg-blue-500': isDraggedOver,\n        },\n        props.className\n    );\n\n    const handleClick = (event: React.MouseEvent<HTMLSpanElement>): void => {\n        if (event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement) {\n            return;\n        }\n\n        if (proxyRef.current) {\n            proxyRef.current.click();\n        }\n    };\n\n    return (\n        <span {...dropTargetProps} className={className} onClick={handleClick} role={role}>\n            {prefix && <span className=\"yt-navigation__item__prefix flex items-center\">{prefix}</span>}\n            <a {...otherProps} className=\"block flex-grow truncate\" ref={proxyRef}>\n                {children}\n            </a>\n            {postfix && <span className=\"yt-navigation__item__postfix ml-1\">{postfix}</span>}\n        </span>\n    );\n});\n\n// Panel\nexport type NavigationPanelProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst Panel = React.forwardRef(function Panel(props: NavigationPanelProps, ref: React.Ref<HTMLDivElement>) {\n    return <div {...props} className={cn('w-full bg-white p-3', props.className)} ref={ref} />;\n});\n\n// Group\nexport type NavigationMenuGroupProps = TreeviewGroupProps;\n\nconst MenuGroup = React.forwardRef(function MenuGroup(props: NavigationMenuGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn(\n        'flex-shrink-0 space-y-1 outline-none',\n        {\n            'bg-white pb-2': props.fixed,\n        },\n        typeof props.className === 'function' ? props.className(false) : props.className\n    );\n    const title = (expanded: boolean): JSX.Element => {\n        const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {\n            'mb-1': expanded,\n            'cursor-pointer hover:text-blue-500': !props.fixed,\n        });\n\n        return (\n            <span className={className}>\n                {typeof props.title === 'function' ? props.title(expanded) : props.title}\n                {!props.fixed && <Icon name={expanded ? 'chevron-up' : 'chevron-down'} />}\n            </span>\n        );\n    };\n\n    return <Treeview.Group {...props} className={className} title={title} ref={ref} />;\n});\n\n// Menu\nexport type NavigationMenuProps = React.PropsWithChildren<TreeviewProps>;\n\nexport type ForwardedNavigationMenuWithStatics = React.ForwardRefExoticComponent<\n    NavigationMenuProps & React.RefAttributes<HTMLDivElement>\n> & {\n    /** Expandable region reprezenting a group of related links */\n    Group: React.ForwardRefExoticComponent<NavigationMenuGroupProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nconst Menu = React.forwardRef(function Menu(props: NavigationMenuProps, ref: React.Ref<HTMLDivElement>) {\n    const scrollableAreas = React.useMemo(() => {\n        const scrollableAreas: React.ReactNode[] = [];\n\n        const children = React.Children.toArray(props.children).filter(\n            child => !!child\n        ) as React.ReactElement<NavigationMenuGroupProps>[];\n\n        children.forEach(child => {\n            if (child.props.fixed) {\n                scrollableAreas.push(child);\n            } else {\n                const x = scrollableAreas[scrollableAreas.length - 1];\n                if (Array.isArray(x)) {\n                    x.push(child);\n                } else {\n                    scrollableAreas.push([child]);\n                }\n            }\n        });\n\n        return scrollableAreas;\n    }, [props.children]);\n\n    return (\n        <Treeview\n            {...props}\n            className={cn('divide-grey-100 flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className)}\n            ref={ref}>\n            {scrollableAreas.map((area, i) =>\n                Array.isArray(area) ? (\n                    <div\n                        className=\"divide-grey-100 flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto\"\n                        key={i}>\n                        {area}\n                    </div>\n                ) : (\n                    area\n                )\n            )}\n        </Treeview>\n    );\n}) as ForwardedNavigationMenuWithStatics;\n\nMenu.Group = MenuGroup;\n\n// Navigation\nexport type NavigationProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport type ForwardedNavigationWithStatics = React.ForwardRefExoticComponent<\n    NavigationProps & React.RefAttributes<HTMLDivElement>\n> & {\n    /** Navigation link */\n    Item: React.ForwardRefExoticComponent<NavigationItemProps & React.RefAttributes<HTMLAnchorElement>>;\n    /**\n     * Container for the expandable groups that hold navigation links.\n     * Should be used as a direct child of Navigation component, e.g. `Navigation.Menu`.\n     * Should have the menu groups as a direct child, e.g. `Navigation.Menu.Group`\n     */\n    Menu: ForwardedNavigationMenuWithStatics;\n    /**\n     * Isolated container within the Navigation.\n     * This can be used to create a region in the Navigation that is usually not scrollable, nor expandable,\n     * containing useful information for user and quick actions\n     */\n    Panel: React.ForwardRefExoticComponent<NavigationPanelProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Navigation = React.forwardRef(function Navigation(props: NavigationProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, ...otherProps } = props;\n    const className = cn('h-full flex flex-col bg-grey-100 divide-y-2 divide-grey-100', props.className);\n\n    return (\n        <div {...otherProps} className={className} data-taco=\"navigation\" ref={ref}>\n            {children}\n        </div>\n    );\n}) as ForwardedNavigationWithStatics;\n\nNavigation.Menu = Menu;\nNavigation.Item = Item;\nNavigation.Panel = Panel;\n"],"names":["Item","React","forwardRef","props","ref","active","children","onDrop","postfix","prefix","role","otherProps","proxyRef","useMergedRef","isDraggedOver","dropTargetProps","useDropTarget","isTreeitem","className","cn","handleClick","event","target","HTMLAnchorElement","HTMLButtonElement","current","click","onClick","Panel","MenuGroup","fixed","title","expanded","Icon","name","Treeview","Group","Menu","scrollableAreas","useMemo","Children","toArray","filter","child","forEach","push","x","length","Array","isArray","map","area","i","key","Navigation"],"mappings":"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"}
+{"version":3,"file":"Navigation.js","sources":["../../../../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { TreeviewProps, Treeview, TreeviewGroupProps, TreeviewItemProps } from '../Treeview/Treeview';\nimport { Icon } from '../Icon/Icon';\nimport { useDropTarget } from '../../utils/hooks/useDropTarget';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport './Navigation.css';\n\n// Item\nexport type NavigationItemProps = Omit<TreeviewItemProps, 'prefix'> & {\n    /** Change the style to indicate the link is selected */\n    active?: boolean;\n    /** Handler to be used when dropping a dragged element over the navigation link */\n    onDrop?: React.DragEventHandler;\n    /**\n     * Small amount of information placed next to the text of the link.\n     * This can be any valid react element, for e.g. a `span`.\n     * Should be used to indicate a relevant information of the link,\n     * for e.g. the number of unread notifications\n     */\n    postfix?: React.ReactNode;\n    /**\n     * Small amount of information placed before the text of the link.\n     * This can be any valid react element, for e.g. a `span`.\n     * Should be used to indicate a feedback for user,\n     * for e.g. display some sort of visual informational state or a relevant icon.\n     */\n    prefix?: React.ReactNode;\n    /** Target of the link */\n    target?: string;\n};\n\nconst Item = React.forwardRef(function Item(props: NavigationItemProps, ref: React.Ref<HTMLAnchorElement>) {\n    const { active, children, onDrop, postfix, prefix, role, ...otherProps } = props;\n    const proxyRef = useMergedRef<HTMLAnchorElement>(ref);\n    const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);\n    const isTreeitem = role === 'treeitem';\n    const className = cn(\n        'yt-navigation__item cursor-pointer',\n        {\n            'w-full mb-px py-1 px-3 flex items-center hover:bg-grey-300': isTreeitem,\n            'bg-white w-full h-10 px-3 flex-shrink-0 flex items-center justify-between cursor-pointer': !isTreeitem,\n            'yt-navigation__item--active': active && !isDraggedOver,\n            'bg-grey-300': isTreeitem && active && !isDraggedOver,\n            'yt-navigation__item--dropping bg-blue-500': isDraggedOver,\n        },\n        props.className\n    );\n\n    const handleClick = (event: React.MouseEvent<HTMLSpanElement>): void => {\n        if (event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement) {\n            return;\n        }\n\n        if (proxyRef.current) {\n            proxyRef.current.click();\n        }\n    };\n\n    return (\n        <span {...dropTargetProps} className={className} onClick={handleClick} role={role}>\n            {prefix && <span className=\"yt-navigation__item__prefix flex items-center\">{prefix}</span>}\n            <a {...otherProps} className=\"block flex-grow truncate\" ref={proxyRef}>\n                {children}\n            </a>\n            {postfix && <span className=\"yt-navigation__item__postfix ml-1\">{postfix}</span>}\n        </span>\n    );\n});\n\n// Panel\nexport type NavigationPanelProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst Panel = React.forwardRef(function Panel(props: NavigationPanelProps, ref: React.Ref<HTMLDivElement>) {\n    return <div {...props} className={cn('w-full bg-white p-3', props.className)} ref={ref} />;\n});\n\n// Group\nexport type NavigationMenuGroupProps = TreeviewGroupProps;\n\nconst MenuGroup = React.forwardRef(function MenuGroup(props: NavigationMenuGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn(\n        'flex-shrink-0 space-y-1 outline-none',\n        {\n            'bg-white pb-2': props.fixed,\n        },\n        typeof props.className === 'function' ? props.className(false) : props.className\n    );\n    const title = (expanded: boolean): JSX.Element => {\n        const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {\n            'mb-1': expanded,\n            'cursor-pointer hover:text-blue-500': !props.fixed,\n        });\n\n        return (\n            <span className={className}>\n                {typeof props.title === 'function' ? props.title(expanded) : props.title}\n                {!props.fixed && <Icon name={expanded ? 'chevron-up' : 'chevron-down'} />}\n            </span>\n        );\n    };\n\n    return <Treeview.Group {...props} className={className} title={title} ref={ref} />;\n});\n\n// Menu\nexport type NavigationMenuProps = React.PropsWithChildren<TreeviewProps>;\n\nexport type ForwardedNavigationMenuWithStatics = React.ForwardRefExoticComponent<\n    NavigationMenuProps & React.RefAttributes<HTMLDivElement>\n> & {\n    /** Expandable region reprezenting a group of related links */\n    Group: React.ForwardRefExoticComponent<NavigationMenuGroupProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nconst Menu = React.forwardRef(function Menu(props: NavigationMenuProps, ref: React.Ref<HTMLDivElement>) {\n    const scrollableAreas = React.useMemo(() => {\n        const scrollableAreas: React.ReactNode[] = [];\n\n        const children = React.Children.toArray(props.children).filter(\n            child => !!child\n        ) as React.ReactElement<NavigationMenuGroupProps>[];\n\n        children.forEach(child => {\n            if (child.props.fixed) {\n                scrollableAreas.push(child);\n            } else {\n                const x = scrollableAreas[scrollableAreas.length - 1];\n                if (Array.isArray(x)) {\n                    x.push(child);\n                } else {\n                    scrollableAreas.push([child]);\n                }\n            }\n        });\n\n        return scrollableAreas;\n    }, [props.children]);\n\n    return (\n        <Treeview\n            {...props}\n            className={cn('divide-grey-100 flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className)}\n            ref={ref}>\n            {scrollableAreas.map((area, i) =>\n                Array.isArray(area) ? (\n                    <div\n                        className=\"divide-grey-100 flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto\"\n                        key={i}>\n                        {area}\n                    </div>\n                ) : (\n                    area\n                )\n            )}\n        </Treeview>\n    );\n}) as ForwardedNavigationMenuWithStatics;\n\nMenu.Group = MenuGroup;\n\n// Navigation\nexport type NavigationProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport type ForwardedNavigationWithStatics = React.ForwardRefExoticComponent<\n    NavigationProps & React.RefAttributes<HTMLDivElement>\n> & {\n    /** Navigation link */\n    Item: React.ForwardRefExoticComponent<NavigationItemProps & React.RefAttributes<HTMLAnchorElement>>;\n    /**\n     * Container for the expandable groups that hold navigation links.\n     * Should be used as a direct child of Navigation component, e.g. `Navigation.Menu`.\n     * Should have the menu groups as a direct child, e.g. `Navigation.Menu.Group`\n     */\n    Menu: ForwardedNavigationMenuWithStatics;\n    /**\n     * Isolated container within the Navigation.\n     * This can be used to create a region in the Navigation that is usually not scrollable, nor expandable,\n     * containing useful information for user and quick actions\n     */\n    Panel: React.ForwardRefExoticComponent<NavigationPanelProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Navigation = React.forwardRef(function Navigation(props: NavigationProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, ...otherProps } = props;\n    const className = cn('h-full flex flex-col bg-grey-100 divide-y-2 divide-grey-100', props.className);\n\n    return (\n        <div {...otherProps} className={className} data-taco=\"navigation\" ref={ref}>\n            {children}\n        </div>\n    );\n}) as ForwardedNavigationWithStatics;\n\nNavigation.Menu = Menu;\nNavigation.Item = Item;\nNavigation.Panel = Panel;\n"],"names":["Item","React","forwardRef","props","ref","active","children","onDrop","postfix","prefix","role","otherProps","proxyRef","useMergedRef","isDraggedOver","dropTargetProps","useDropTarget","isTreeitem","className","cn","handleClick","event","target","HTMLAnchorElement","HTMLButtonElement","current","click","onClick","Panel","MenuGroup","fixed","title","expanded","Icon","name","Treeview","Group","Menu","scrollableAreas","useMemo","Children","toArray","filter","child","forEach","push","x","length","Array","isArray","map","area","i","key","Navigation"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { Group } from './components/Group.js';
 import { Link } from './components/Link.js';
 export { getNavigationLinkClasses } from './components/Link.js';

package/dist/esm/packages/taco/src/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 'classnames';\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-grey-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","React","forwardRef","props","ref","children","attributes","className","cn","role","style","opacity","Group","Link","Section","Content"],"mappings":";;;;;;;;MASaA,WAAW,gBAAGC,cAAK,CAACC,UAAU,CAAqC,SAASF,WAAWA,CAACG,KAAK,EAAEC,GAAG;EAC3G,MAAM;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGH,KAAK;EACzC,MAAMI,SAAS,GAAGC,EAAE,CAAC,wEAAwE,EAAEL,KAAK,CAACI,SAAS,CAAC;EAE/G,oBACIN,qDAAQK,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,aAAa;IAACH,GAAG,EAAEA,GAAG;IAAEK,IAAI,EAAC,SAAS;IAACC,KAAK,EAAE;MAAEC,OAAO,EAAE;;MACxGN,QAAQ,CACR;AAEb,CAAC;AAODL,WAAW,CAACY,KAAK,GAAGA,KAAK;AACzBZ,WAAW,CAACa,IAAI,GAAGA,IAAI;AACvBb,WAAW,CAACc,OAAO,GAAGA,OAAO;AAC7Bd,WAAW,CAACe,OAAO,GAAGA,OAAO;;;;"}
+{"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-grey-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","React","forwardRef","props","ref","children","attributes","className","cn","role","style","opacity","Group","Link","Section","Content"],"mappings":";;;;;;;;MASaA,WAAW,gBAAGC,cAAK,CAACC,UAAU,CAAqC,SAASF,WAAWA,CAACG,KAAK,EAAEC,GAAG;EAC3G,MAAM;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGH,KAAK;EACzC,MAAMI,SAAS,GAAGC,EAAE,CAAC,wEAAwE,EAAEL,KAAK,CAACI,SAAS,CAAC;EAE/G,oBACIN,qDAAQK,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,aAAa;IAACH,GAAG,EAAEA,GAAG;IAAEK,IAAI,EAAC,SAAS;IAACC,KAAK,EAAE;MAAEC,OAAO,EAAE;;MACxGN,QAAQ,CACR;AAEb,CAAC;AAODL,WAAW,CAACY,KAAK,GAAGA,KAAK;AACzBZ,WAAW,CAACa,IAAI,GAAGA,IAAI;AACvBb,WAAW,CAACc,OAAO,GAAGA,OAAO;AAC7Bd,WAAW,CAACe,OAAO,GAAGA,OAAO;;;;"}

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

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { getAdjacentClasses } from './util.js';
 
 const Content = /*#__PURE__*/React__default.forwardRef(function Navigation2(props, ref) {

package/dist/esm/packages/taco/src/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 'classnames';\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-grey-200 flex-shrink-0 z-10 bg-grey-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":["Content","React","forwardRef","Navigation2","props","ref","children","attributes","className","cn","getAdjacentClasses","role"],"mappings":";;;;MAMaA,OAAO,gBAAGC,cAAK,CAACC,UAAU,CAAyC,SAASC,WAAWA,CAACC,KAAK,EAAEC,GAAG;EAC3G,MAAM;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGH,KAAK;EACzC,MAAMI,SAAS,GAAGC,EAAE,CAChB,mHAAmH,EACnHC,kBAAkB,EAAE,EACpBN,KAAK,CAACI,SAAS,CAClB;EAED,oBACIP,qDAAQM,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,qBAAqB;IAACH,GAAG,EAAEA,GAAG;IAAEM,IAAI,EAAC;MACpFL,QAAQ,CACR;AAEb,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-grey-200 flex-shrink-0 z-10 bg-grey-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":["Content","React","forwardRef","Navigation2","props","ref","children","attributes","className","cn","getAdjacentClasses","role"],"mappings":";;;;MAMaA,OAAO,gBAAGC,cAAK,CAACC,UAAU,CAAyC,SAASC,WAAWA,CAACC,KAAK,EAAEC,GAAG;EAC3G,MAAM;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGH,KAAK;EACzC,MAAMI,SAAS,GAAGC,EAAE,CAChB,mHAAmH,EACnHC,kBAAkB,EAAE,EACpBN,KAAK,CAACI,SAAS,CAClB;EAED,oBACIP,qDAAQM,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,qBAAqB;IAACH,GAAG,EAAEA,GAAG;IAAEM,IAAI,EAAC;MACpFL,QAAQ,CACR;AAEb,CAAC;;;;"}

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

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { Icon } from '../../Icon/Icon.js';
 
 const Group = /*#__PURE__*/React__default.forwardRef(function Group(props, ref) {

package/dist/esm/packages/taco/src/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 'classnames';\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","React","forwardRef","props","ref","children","defaultExpanded","heading","onClick","attributes","expanded","setExpanded","useState","className","cn","handleClick","event","role","Icon","name","hidden"],"mappings":";;;;MAUaA,KAAK,gBAAGC,cAAK,CAACC,UAAU,CAAuC,SAASF,KAAKA,CAACG,KAAK,EAAEC,GAAG;EACjG,MAAM;IAAEC,QAAQ;IAAEC,eAAe,GAAG,KAAK;IAAEC,OAAO;IAAEC,OAAO;IAAE,GAAGC;GAAY,GAAGN,KAAK;EACpF,MAAM,CAACO,QAAQ,EAAEC,WAAW,CAAC,GAAGV,cAAK,CAACW,QAAQ,CAACN,eAAe,CAAC;EAC/D,MAAMO,SAAS,GAAGC,EAAE,CAChB,qIAAqI,EACrIL,UAAU,CAACI,SAAS,CACvB;EAED,MAAME,WAAW,GAAIC,KAA0C;IAC3DL,WAAW,CAAC,CAACD,QAAQ,CAAC;IAEtB,IAAIF,OAAO,EAAE;MACTA,OAAO,CAACQ,KAAK,CAAC;;GAErB;EAED,oBACIf,qDAAQQ,UAAU;IAAEQ,IAAI,EAAC,MAAM;IAACJ,SAAS,EAAC,yBAAyB;IAACT,GAAG,EAAEA;mBACrEH;qBACkB,MAAM;qBACLS,QAAQ;iBACb,mBAAmB;IAC7BG,SAAS,EAAEA,SAAS;IACpBL,OAAO,EAAEO,WAAW;IACpBE,IAAI,EAAC;kBACLhB,6BAACiB,IAAI;IAACL,SAAS,EAAC,iBAAiB;IAACM,IAAI,EAAET,QAAQ,GAAG,oBAAoB,GAAG;IAAyB,eACnGT;IAAMY,SAAS,EAAC;KAAsBN,OAAO,CAAQ,CAChD,eACTN;IAAIY,SAAS,EAAEC,EAAE,CAAC,mCAAmC,EAAE;MAAEM,MAAM,EAAE,CAACV;KAAU,CAAC;IAAEO,IAAI,EAAC;KAC/EZ,QAAQ,CACR,CACJ;AAEb,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/[.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","React","forwardRef","props","ref","children","defaultExpanded","heading","onClick","attributes","expanded","setExpanded","useState","className","cn","handleClick","event","role","Icon","name","hidden"],"mappings":";;;;MAUaA,KAAK,gBAAGC,cAAK,CAACC,UAAU,CAAuC,SAASF,KAAKA,CAACG,KAAK,EAAEC,GAAG;EACjG,MAAM;IAAEC,QAAQ;IAAEC,eAAe,GAAG,KAAK;IAAEC,OAAO;IAAEC,OAAO;IAAE,GAAGC;GAAY,GAAGN,KAAK;EACpF,MAAM,CAACO,QAAQ,EAAEC,WAAW,CAAC,GAAGV,cAAK,CAACW,QAAQ,CAACN,eAAe,CAAC;EAC/D,MAAMO,SAAS,GAAGC,EAAE,CAChB,qIAAqI,EACrIL,UAAU,CAACI,SAAS,CACvB;EAED,MAAME,WAAW,GAAIC,KAA0C;IAC3DL,WAAW,CAAC,CAACD,QAAQ,CAAC;IAEtB,IAAIF,OAAO,EAAE;MACTA,OAAO,CAACQ,KAAK,CAAC;;GAErB;EAED,oBACIf,qDAAQQ,UAAU;IAAEQ,IAAI,EAAC,MAAM;IAACJ,SAAS,EAAC,yBAAyB;IAACT,GAAG,EAAEA;mBACrEH;qBACkB,MAAM;qBACLS,QAAQ;iBACb,mBAAmB;IAC7BG,SAAS,EAAEA,SAAS;IACpBL,OAAO,EAAEO,WAAW;IACpBE,IAAI,EAAC;kBACLhB,6BAACiB,IAAI;IAACL,SAAS,EAAC,iBAAiB;IAACM,IAAI,EAAET,QAAQ,GAAG,oBAAoB,GAAG;IAAyB,eACnGT;IAAMY,SAAS,EAAC;KAAsBN,OAAO,CAAQ,CAChD,eACTN;IAAIY,SAAS,EAAEC,EAAE,CAAC,mCAAmC,EAAE;MAAEM,MAAM,EAAE,CAACV;KAAU,CAAC;IAAEO,IAAI,EAAC;KAC/EZ,QAAQ,CACR,CACJ;AAEb,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Navigation2/components/Link.js

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { Icon } from '../../Icon/Icon.js';
 import { Badge } from '../../Badge/Badge.js';
 import { IconButton } from '../../IconButton/IconButton.js';
@@ -43,7 +43,7 @@ const Link = /*#__PURE__*/React__default.forwardRef(function Link(props, ref) {
     role: "menuitem",
     tabIndex: 0
   }), icon ? /*#__PURE__*/React__default.createElement(Icon, {
-    className: "mr-1.5 [[role=menu]>li>a>&]:mr-0.5 [[role=menu]>li>a>&]:-ml-1.5",
+    className: "mr-1.5 [[role=menu]>li>a>&]:-ml-1.5 [[role=menu]>li>a>&]:mr-0.5",
     name: icon
   }) : null, /*#__PURE__*/React__default.createElement("span", {
     className: "flex flex-grow items-center truncate"

package/dist/esm/packages/taco/src/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 'classnames';\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-grey-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>&]:mr-0.5 [[role=menu]>li>a>&]:-ml-1.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 ? (\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                ) : null}\n            </a>\n        </li>\n    );\n});\n"],"names":["getNavigationLinkClasses","isDraggedOver","cn","Link","React","forwardRef","props","ref","active","children","icon","menu","onDrop","total","attributes","dropTargetProps","useDropTarget","className","listClassName","getAdjacentClasses","role","undefined","tabIndex","Icon","name","IconButton","appearance","rounded","onClick","event","preventDefault","stopPropagation","Badge","color"],"mappings":";;;;;;;;MASaA,wBAAwB,GAAGA,CAACC,aAAa,GAAG,KAAK,KAC1DC,EAAE,CACE,wGAAwG;AACxG;AACA,kEAAkE;AAClE;AACA,yDAAyD;AACzD;AACA,sFAAsF,EACtF;EACI,yDAAyD,EAAE,CAACD,aAAa;EACzE,4CAA4C,EAAEA;CACjD;MAcIE,IAAI,gBAAGC,cAAK,CAACC,UAAU,CAA0C,SAASF,IAAIA,CAACG,KAAK,EAAEC,GAAG;EAClG,MAAM;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,IAAI;IAAEC,MAAM;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGR,KAAK;EAC5E,MAAM,CAACL,aAAa,EAAEc,eAAe,CAAC,GAAGC,aAAa,CAACJ,MAAM,CAAC;EAE9D,MAAMK,SAAS,GAAGf,EAAE,CAACF,wBAAwB,CAACC,aAAa,CAAC,EAAEa,UAAU,CAACG,SAAS,CAAC;EAEnF,MAAMC,aAAa,GAAGhB,EAAE,CAAC,yCAAyC,EAAEiB,kBAAkB,EAAE,EAAE;IACtF,2BAA2B,EAAElB;GAChC,CAAC;EAEF,oBACIG,qDAAQW,eAAe;IAAEE,SAAS,EAAEC,aAAa;iBAAY,uBAAuB;IAACE,IAAI,EAAC;mBACtFhB,oDACQU,UAAU;oBACAN,MAAM,GAAG,MAAM,GAAGa,SAAS;IACzCJ,SAAS,EAAEA,SAAS;iBACV,kBAAkB;IAC5BV,GAAG,EAAEA,GAAG;IACRa,IAAI,EAAC,UAAU;IACfE,QAAQ,EAAE;MACTZ,IAAI,gBAAGN,6BAACmB,IAAI;IAACN,SAAS,EAAC,iEAAiE;IAACO,IAAI,EAAEd;IAAQ,GAAG,IAAI,eAC/GN;IAAMa,SAAS,EAAC;KAAwCR,QAAQ,CAAQ,EACvEE,IAAI,kBACDP,6BAACqB,UAAU;IACPC,UAAU,EAAC,UAAU;IACrBhB,IAAI,EAAC,MAAM;kBACA,MAAM;IACjBiB,OAAO;IACPV,SAAS,EAAEf,EAAE,CACT,8FAA8F,EAC9F;MACI,0BAA0B,EAAEW,KAAK,KAAKQ;KACzC,CACJ;IACDV,IAAI,EAAEA,IAAI;IACViB,OAAO,EAAEC,KAAK;MACVA,KAAK,CAACC,cAAc,EAAE;MACtBD,KAAK,CAACE,eAAe,EAAE;;IAE7B,IACF,IAAI,EACPlB,KAAK,KAAKQ,SAAS,kBAChBjB,6BAAC4B,KAAK;IACFf,SAAS,EAAEf,EAAE,CAAC,wCAAwC,EAAE;MACpD,uDAAuD,EAAES;KAC5D,CAAC;IACFsB,KAAK,EAAC;KACLpB,KAAK,CACF,IACR,IAAI,CACR,CACH;AAEb,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/[.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-grey-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 ? (\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                ) : null}\n            </a>\n        </li>\n    );\n});\n"],"names":["getNavigationLinkClasses","isDraggedOver","cn","Link","React","forwardRef","props","ref","active","children","icon","menu","onDrop","total","attributes","dropTargetProps","useDropTarget","className","listClassName","getAdjacentClasses","role","undefined","tabIndex","Icon","name","IconButton","appearance","rounded","onClick","event","preventDefault","stopPropagation","Badge","color"],"mappings":";;;;;;;;MASaA,wBAAwB,GAAGA,CAACC,aAAa,GAAG,KAAK,KAC1DC,EAAE,CACE,wGAAwG;AACxG;AACA,kEAAkE;AAClE;AACA,yDAAyD;AACzD;AACA,sFAAsF,EACtF;EACI,yDAAyD,EAAE,CAACD,aAAa;EACzE,4CAA4C,EAAEA;CACjD;MAcIE,IAAI,gBAAGC,cAAK,CAACC,UAAU,CAA0C,SAASF,IAAIA,CAACG,KAAK,EAAEC,GAAG;EAClG,MAAM;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,IAAI;IAAEC,MAAM;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGR,KAAK;EAC5E,MAAM,CAACL,aAAa,EAAEc,eAAe,CAAC,GAAGC,aAAa,CAACJ,MAAM,CAAC;EAE9D,MAAMK,SAAS,GAAGf,EAAE,CAACF,wBAAwB,CAACC,aAAa,CAAC,EAAEa,UAAU,CAACG,SAAS,CAAC;EAEnF,MAAMC,aAAa,GAAGhB,EAAE,CAAC,yCAAyC,EAAEiB,kBAAkB,EAAE,EAAE;IACtF,2BAA2B,EAAElB;GAChC,CAAC;EAEF,oBACIG,qDAAQW,eAAe;IAAEE,SAAS,EAAEC,aAAa;iBAAY,uBAAuB;IAACE,IAAI,EAAC;mBACtFhB,oDACQU,UAAU;oBACAN,MAAM,GAAG,MAAM,GAAGa,SAAS;IACzCJ,SAAS,EAAEA,SAAS;iBACV,kBAAkB;IAC5BV,GAAG,EAAEA,GAAG;IACRa,IAAI,EAAC,UAAU;IACfE,QAAQ,EAAE;MACTZ,IAAI,gBAAGN,6BAACmB,IAAI;IAACN,SAAS,EAAC,iEAAiE;IAACO,IAAI,EAAEd;IAAQ,GAAG,IAAI,eAC/GN;IAAMa,SAAS,EAAC;KAAwCR,QAAQ,CAAQ,EACvEE,IAAI,kBACDP,6BAACqB,UAAU;IACPC,UAAU,EAAC,UAAU;IACrBhB,IAAI,EAAC,MAAM;kBACA,MAAM;IACjBiB,OAAO;IACPV,SAAS,EAAEf,EAAE,CACT,8FAA8F,EAC9F;MACI,0BAA0B,EAAEW,KAAK,KAAKQ;KACzC,CACJ;IACDV,IAAI,EAAEA,IAAI;IACViB,OAAO,EAAEC,KAAK;MACVA,KAAK,CAACC,cAAc,EAAE;MACtBD,KAAK,CAACE,eAAe,EAAE;;IAE7B,IACF,IAAI,EACPlB,KAAK,KAAKQ,SAAS,kBAChBjB,6BAAC4B,KAAK;IACFf,SAAS,EAAEf,EAAE,CAAC,wCAAwC,EAAE;MACpD,uDAAuD,EAAES;KAC5D,CAAC;IACFsB,KAAK,EAAC;KACLpB,KAAK,CACF,IACR,IAAI,CACR,CACH;AAEb,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Navigation2/components/Section.js

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { getAdjacentClasses } from './util.js';
 
 const Section = /*#__PURE__*/React__default.forwardRef(function Navigation2(props, ref) {

package/dist/esm/packages/taco/src/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 'classnames';\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-grey-200 bg-grey-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=\"text-grey-500 mb-px truncate pl-5 text-xs font-bold uppercase leading-8 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":["Section","React","forwardRef","Navigation2","props","ref","children","heading","attributes","className","cn","getAdjacentClasses","role"],"mappings":";;;;MAQaA,OAAO,gBAAGC,cAAK,CAACC,UAAU,CAAyC,SAASC,WAAWA,CAACC,KAAK,EAAEC,GAAG;EAC3G,MAAM;IAAEC,QAAQ;IAAEC,OAAO;IAAE,GAAGC;GAAY,GAAGJ,KAAK;EAClD,MAAMK,SAAS,GAAGC,EAAE,CAChB,yGAAyG,EACzGC,kBAAkB,EAAE,EACpBP,KAAK,CAACK,SAAS,CAClB;EAED,oBACIR,qDAAQO,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,qBAAqB;IAACJ,GAAG,EAAEA,GAAG;IAAEO,IAAI,EAAC;MACpFL,OAAO,kBACJN;IAAMQ,SAAS,EAAC;KACXF,OAAO,CACL,IACP,IAAI,eACRN;IAAIQ,SAAS,EAAC;KAA+BH,QAAQ,CAAM,CAC1D;AAEb,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-grey-200 bg-grey-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=\"text-grey-500 mb-px truncate pl-5 text-xs font-bold uppercase leading-8 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":["Section","React","forwardRef","Navigation2","props","ref","children","heading","attributes","className","cn","getAdjacentClasses","role"],"mappings":";;;;MAQaA,OAAO,gBAAGC,cAAK,CAACC,UAAU,CAAyC,SAASC,WAAWA,CAACC,KAAK,EAAEC,GAAG;EAC3G,MAAM;IAAEC,QAAQ;IAAEC,OAAO;IAAE,GAAGC;GAAY,GAAGJ,KAAK;EAClD,MAAMK,SAAS,GAAGC,EAAE,CAChB,yGAAyG,EACzGC,kBAAkB,EAAE,EACpBP,KAAK,CAACK,SAAS,CAClB;EAED,oBACIR,qDAAQO,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,qBAAqB;IAACJ,GAAG,EAAEA,GAAG;IAAEO,IAAI,EAAC;MACpFL,OAAO,kBACJN;IAAMQ,SAAS,EAAC;KACXF,OAAO,CACL,IACP,IAAI,eACRN;IAAIQ,SAAS,EAAC;KAA+BH,QAAQ,CAAM,CAC1D;AAEb,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Navigation2/components/util.js

@@ -1,4 +1,4 @@
-import cn from 'classnames';
+import cn from 'clsx';
 
 const getAdjacentClasses = () => cn(
 // styling if the element is proceeded by a link item

package/dist/esm/packages/taco/src/components/Navigation2/components/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../../../../../src/components/Navigation2/components/util.ts"],"sourcesContent":["import cn from 'classnames';\n\nexport const getAdjacentClasses = () =>\n    cn(\n        // styling if the element is proceeded by a link item\n        '[[role=menubar]>[data-taco=navigation2-link-item]+&]:mt-2',\n        \"[[role=menubar]>[data-taco='navigation2-link-item']+&]:border-t-2\",\n        \"[[role=menubar]>[data-taco='navigation2-link-item']+&]:pt-2 \",\n        // styling if the element is proceeded by content\n        \"[[role=menubar]>[data-taco='navigation2-content']+&]:border-t-2\",\n        \"[[role=menubar]>[data-taco='navigation2-content']+&]:pt-2\",\n        // styling if the element is proceeded by a section\n        \"[[role=menubar]>[data-taco='navigation2-section']+&]:border-t-2\",\n        \"[[role=menubar]>[data-taco='navigation2-section']+&]:pt-2\"\n    );\n"],"names":["getAdjacentClasses","cn"],"mappings":";;MAEaA,kBAAkB,GAAGA,MAC9BC,EAAE;AACE;AACA,2DAA2D,EAC3D,mEAAmE,EACnE,8DAA8D;AAC9D;AACA,iEAAiE,EACjE,2DAA2D;AAC3D;AACA,iEAAiE,EACjE,2DAA2D;;;;"}
+{"version":3,"file":"util.js","sources":["../../../../../../../../src/components/Navigation2/components/util.ts"],"sourcesContent":["import cn from 'clsx';\n\nexport const getAdjacentClasses = () =>\n    cn(\n        // styling if the element is proceeded by a link item\n        '[[role=menubar]>[data-taco=navigation2-link-item]+&]:mt-2',\n        \"[[role=menubar]>[data-taco='navigation2-link-item']+&]:border-t-2\",\n        \"[[role=menubar]>[data-taco='navigation2-link-item']+&]:pt-2 \",\n        // styling if the element is proceeded by content\n        \"[[role=menubar]>[data-taco='navigation2-content']+&]:border-t-2\",\n        \"[[role=menubar]>[data-taco='navigation2-content']+&]:pt-2\",\n        // styling if the element is proceeded by a section\n        \"[[role=menubar]>[data-taco='navigation2-section']+&]:border-t-2\",\n        \"[[role=menubar]>[data-taco='navigation2-section']+&]:pt-2\"\n    );\n"],"names":["getAdjacentClasses","cn"],"mappings":";;MAEaA,kBAAkB,GAAGA,MAC9BC,EAAE;AACE;AACA,2DAA2D,EAC3D,mEAAmE,EACnE,8DAA8D;AAC9D;AACA,iEAAiE,EACjE,2DAA2D;AAC3D;AACA,iEAAiE,EACjE,2DAA2D;;;;"}

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

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { useMergedRef } from '../../hooks/useMergedRef.js';
 import { IconButton } from '../IconButton/IconButton.js';
 import { Menu } from '../Menu/Menu.js';

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

@@ -1 +1 @@
-{"version":3,"file":"OverflowGroup.js","sources":["../../../../../../../src/components/OverflowGroup/OverflowGroup.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { ButtonProps } from '../Button/Button';\nimport { Menu } from '../Menu/Menu';\nimport { useIntersectionObserver } from '../../hooks/useIntersectionObserver';\nimport { IconButton } from '../IconButton/IconButton';\n\nconst sanitizeButtonPropsForMenuItem = (button: any, index) => {\n    const href: string | undefined = button.props.to || button.props.href;\n    const Tag = href ? Menu.Link : Menu.Item;\n\n    // Removing className prop so that custom styling cannot be applied on Menu.Link\n    const {\n        as,\n        className: _,\n        appearance: _1,\n        drawer: _2,\n        fluid: _3,\n        hanger: _4,\n        menu: _5,\n        popover: _6,\n        tooltip: _7,\n        ...attributes\n    } = button.props;\n\n    const props = {\n        ...attributes,\n        key: index,\n        target: href ? (href.startsWith('http') ? '_blank' : '_self') : undefined,\n    };\n\n    if (as) {\n        return React.cloneElement(button, { as: Tag, ...props });\n    }\n\n    return <Tag {...props} />;\n};\n\ntype OverflowGroupProps = React.HTMLAttributes<HTMLElement> & {\n    moreButton?: React.ReactElement<ButtonProps>;\n};\n\nconst DEFAULT_OFFSET = 32 + 8;\n\nexport const OverflowGroup = React.forwardRef(function OverflowGroup(props: OverflowGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { moreButton: MoreButton, ...attributes } = props;\n    const internalRef = useMergedRef<HTMLDivElement>(ref);\n    // determine width of more button, to add intersection observer margin\n    const [buttonWidth, setButtonWidth] = React.useState(DEFAULT_OFFSET);\n    const buttonRefCallback = React.useCallback((el: HTMLElement) => setButtonWidth(el?.getBoundingClientRect()?.width), []);\n    const button = MoreButton ?? <IconButton icon=\"more\" />;\n\n    const intersectedChildIndex = useIntersectionObserver(internalRef, buttonWidth);\n    const children = React.Children.toArray(props.children) as React.ReactElement<ButtonProps>[];\n    const hiddenChildren = intersectedChildIndex !== undefined ? children.slice(intersectedChildIndex) : [];\n\n    const className = cn('flex overflow-hidden', props.className);\n\n    return (\n        <div {...attributes} className={className} data-taco=\"overflow-group\" ref={internalRef}>\n            {children.map((child, index) =>\n                React.cloneElement(child, {\n                    className: cn(child.props.className, {\n                        visible: intersectedChildIndex === undefined || index < intersectedChildIndex,\n                        'invisible order-[100] pointer-events-none':\n                            intersectedChildIndex !== undefined && index >= intersectedChildIndex,\n                    }),\n                })\n            )}\n            {hiddenChildren.length\n                ? React.cloneElement(button, {\n                      className: cn('sticky right-0 order-[99]', button.props.className),\n                      'data-observer-ignore': true,\n                      menu: menuProps => (\n                          <Menu {...menuProps}>\n                              <Menu.Content>{hiddenChildren.map(sanitizeButtonPropsForMenuItem)}</Menu.Content>\n                          </Menu>\n                      ),\n                      ref: buttonRefCallback,\n                  })\n                : null}\n        </div>\n    );\n});\n"],"names":["sanitizeButtonPropsForMenuItem","button","index","href","props","to","Tag","Menu","Link","Item","as","className","_","appearance","_1","drawer","_2","fluid","_3","hanger","_4","menu","_5","popover","_6","tooltip","_7","attributes","key","target","startsWith","undefined","React","cloneElement","DEFAULT_OFFSET","OverflowGroup","forwardRef","ref","moreButton","MoreButton","internalRef","useMergedRef","buttonWidth","setButtonWidth","useState","buttonRefCallback","useCallback","el","_el$getBoundingClient","getBoundingClientRect","width","IconButton","icon","intersectedChildIndex","useIntersectionObserver","children","Children","toArray","hiddenChildren","slice","cn","map","child","visible","length","menuProps","Content"],"mappings":"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"}
+{"version":3,"file":"OverflowGroup.js","sources":["../../../../../../../src/components/OverflowGroup/OverflowGroup.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { ButtonProps } from '../Button/Button';\nimport { Menu } from '../Menu/Menu';\nimport { useIntersectionObserver } from '../../hooks/useIntersectionObserver';\nimport { IconButton } from '../IconButton/IconButton';\n\nconst sanitizeButtonPropsForMenuItem = (button: any, index) => {\n    const href: string | undefined = button.props.to || button.props.href;\n    const Tag = href ? Menu.Link : Menu.Item;\n\n    // Removing className prop so that custom styling cannot be applied on Menu.Link\n    const {\n        as,\n        className: _,\n        appearance: _1,\n        drawer: _2,\n        fluid: _3,\n        hanger: _4,\n        menu: _5,\n        popover: _6,\n        tooltip: _7,\n        ...attributes\n    } = button.props;\n\n    const props = {\n        ...attributes,\n        key: index,\n        target: href ? (href.startsWith('http') ? '_blank' : '_self') : undefined,\n    };\n\n    if (as) {\n        return React.cloneElement(button, { as: Tag, ...props });\n    }\n\n    return <Tag {...props} />;\n};\n\ntype OverflowGroupProps = React.HTMLAttributes<HTMLElement> & {\n    moreButton?: React.ReactElement<ButtonProps>;\n};\n\nconst DEFAULT_OFFSET = 32 + 8;\n\nexport const OverflowGroup = React.forwardRef(function OverflowGroup(props: OverflowGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { moreButton: MoreButton, ...attributes } = props;\n    const internalRef = useMergedRef<HTMLDivElement>(ref);\n    // determine width of more button, to add intersection observer margin\n    const [buttonWidth, setButtonWidth] = React.useState(DEFAULT_OFFSET);\n    const buttonRefCallback = React.useCallback((el: HTMLElement) => setButtonWidth(el?.getBoundingClientRect()?.width), []);\n    const button = MoreButton ?? <IconButton icon=\"more\" />;\n\n    const intersectedChildIndex = useIntersectionObserver(internalRef, buttonWidth);\n    const children = React.Children.toArray(props.children) as React.ReactElement<ButtonProps>[];\n    const hiddenChildren = intersectedChildIndex !== undefined ? children.slice(intersectedChildIndex) : [];\n\n    const className = cn('flex overflow-hidden', props.className);\n\n    return (\n        <div {...attributes} className={className} data-taco=\"overflow-group\" ref={internalRef}>\n            {children.map((child, index) =>\n                React.cloneElement(child, {\n                    className: cn(child.props.className, {\n                        visible: intersectedChildIndex === undefined || index < intersectedChildIndex,\n                        'invisible order-[100] pointer-events-none':\n                            intersectedChildIndex !== undefined && index >= intersectedChildIndex,\n                    }),\n                })\n            )}\n            {hiddenChildren.length\n                ? React.cloneElement(button, {\n                      className: cn('sticky right-0 order-[99]', button.props.className),\n                      'data-observer-ignore': true,\n                      menu: menuProps => (\n                          <Menu {...menuProps}>\n                              <Menu.Content>{hiddenChildren.map(sanitizeButtonPropsForMenuItem)}</Menu.Content>\n                          </Menu>\n                      ),\n                      ref: buttonRefCallback,\n                  })\n                : null}\n        </div>\n    );\n});\n"],"names":["sanitizeButtonPropsForMenuItem","button","index","href","props","to","Tag","Menu","Link","Item","as","className","_","appearance","_1","drawer","_2","fluid","_3","hanger","_4","menu","_5","popover","_6","tooltip","_7","attributes","key","target","startsWith","undefined","React","cloneElement","DEFAULT_OFFSET","OverflowGroup","forwardRef","ref","moreButton","MoreButton","internalRef","useMergedRef","buttonWidth","setButtonWidth","useState","buttonRefCallback","useCallback","el","_el$getBoundingClient","getBoundingClientRect","width","IconButton","icon","intersectedChildIndex","useIntersectionObserver","children","Children","toArray","hiddenChildren","slice","cn","map","child","visible","length","menuProps","Content"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { forwardRef, createElement } from 'react';
-import cn from 'classnames';
+import cn from 'clsx';
 import { IconButton } from '../IconButton/IconButton.js';
 import { useLocalization } from '../Provider/Localization.js';
 import { Group } from '../Group/Group.js';