@economic/taco 8.1.4-hanger-base-ui-migration.2 → 8.1.4-test-docs.0

package/dist/components/Layout/components/Sidebar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.cjs","sources":["../../../../src/components/Layout/components/Sidebar.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { LayoutContext } from './Context';\nimport { useIsLargeScreen } from '../../../hooks/useIsLargeScreen';\n\nexport type LayoutSidebarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    children:\n        | React.ReactNode\n        | (({\n              isLargeScreen,\n              open,\n              toggleSidebar,\n          }: {\n              isLargeScreen: boolean;\n              open: boolean;\n              toggleSidebar: () => void;\n          }) => React.ReactNode);\n};\n\nexport const Sidebar = React.forwardRef<HTMLDivElement, LayoutSidebarProps>(function LayoutSidebar(props, ref) {\n    const { children, ...attributes } = props;\n    const { sidebarOpen, setSidebarOpen } = React.useContext(LayoutContext);\n    const isLargeScreen = useIsLargeScreen();\n    const isSmallScreen = !isLargeScreen;\n\n    // if it's a large screen we override the open state and make it always visible\n    const isVisible = isLargeScreen || sidebarOpen;\n\n    // ensures the menu is always closed by default when resizing to a smaller window size\n    React.useEffect(() => {\n        setSidebarOpen(isLargeScreen);\n    }, [isLargeScreen]);\n\n    React.useEffect(() => {\n        const handleEscapeKey = (event: KeyboardEvent) => {\n            if (event.key === 'Escape') {\n                event.preventDefault();\n                event.stopPropagation();\n                setSidebarOpen(false);\n            }\n        };\n\n        if (isSmallScreen && sidebarOpen) {\n            window.addEventListener('keydown', handleEscapeKey);\n        }\n\n        return () => {\n            window.removeEventListener('keydown', handleEscapeKey);\n        };\n    }, [isSmallScreen, sidebarOpen]);\n\n    const showBackdrop = isSmallScreen && sidebarOpen === true;\n\n    const [ready, setReady] = React.useState(isSmallScreen);\n\n    const className = cn(\n        'bg-gray-50 h-full w-64 flex-shrink-0 flex-grow-0 print:hidden',\n        {\n            'absolute z-10 aria-hidden:-translate-x-64 ': isSmallScreen,\n            // prevent animation when crossing the boundary from large to small screen,\n            // this prevents awkward animation in the edge case (resizing the browser, instead of starting at a given size)\n            invisible: isSmallScreen && !ready,\n            'transition-[transform] duration-300 visible': isSmallScreen && ready,\n            'border-r-2 border-black-subtle ': !showBackdrop,\n        },\n        props.className\n    );\n\n    React.useEffect(() => {\n        // ensure state is updated in the next cpu tick so that the animation definitely doesn't run\n        setTimeout(() => {\n            setReady(isSmallScreen);\n        }, 1);\n    }, [isSmallScreen]);\n\n    const toggleSidebar = () => setSidebarOpen(open => !open);\n    const content = typeof children === 'function' ? children({ isLargeScreen, open: sidebarOpen, toggleSidebar }) : children;\n\n    if (!content) {\n        return null;\n    }\n\n    return (\n        <>\n            <nav {...attributes} data-responsive={isSmallScreen} aria-hidden={!isVisible} className={className} ref={ref}>\n                {content}\n            </nav>\n            <AnimatePresence>\n                {showBackdrop && (\n                    <motion.div\n                        aria-hidden\n                        initial={{ opacity: 0 }}\n                        animate={{ opacity: 1 }}\n                        exit={{ opacity: 0 }}\n                        onClick={() => setSidebarOpen(false)}\n                        className=\"bg-brand-midnight/[0.3] fixed inset-0 z-[1] cursor-default overflow-y-auto print:absolute print:overflow-visible\"\n                    />\n                )}\n            </AnimatePresence>\n        </>\n    );\n});\n"],"names":["LayoutContext","useIsLargeScreen","AnimatePresence","motion"],"mappings":";;;;;;;AAoBO,MAAM,UAAU,MAAM,WAA+C,SAAS,cAAc,OAAO,KAAK;AAC3G,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,EAAE,aAAa,eAAA,IAAmB,MAAM,WAAWA,QAAAA,aAAa;AACtE,QAAM,gBAAgBC,iBAAAA,iBAAiB;AACvC,QAAM,gBAAgB,CAAC;AAGvB,QAAM,YAAY,iBAAiB;AAGnC,QAAM,UAAU,MAAM;AAClB,mBAAe,aAAa;AAAA,EAAA,GAC7B,CAAC,aAAa,CAAC;AAElB,QAAM,UAAU,MAAM;AACZ,UAAA,kBAAkB,CAAC,UAAyB;AAC1C,UAAA,MAAM,QAAQ,UAAU;AACxB,cAAM,eAAe;AACrB,cAAM,gBAAgB;AACtB,uBAAe,KAAK;AAAA,MAAA;AAAA,IAE5B;AAEA,QAAI,iBAAiB,aAAa;AACvB,aAAA,iBAAiB,WAAW,eAAe;AAAA,IAAA;AAGtD,WAAO,MAAM;AACF,aAAA,oBAAoB,WAAW,eAAe;AAAA,IACzD;AAAA,EAAA,GACD,CAAC,eAAe,WAAW,CAAC;AAEzB,QAAA,eAAe,iBAAiB,gBAAgB;AAEtD,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,aAAa;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,8CAA8C;AAAA;AAAA;AAAA,MAG9C,WAAW,iBAAiB,CAAC;AAAA,MAC7B,+CAA+C,iBAAiB;AAAA,MAChE,mCAAmC,CAAC;AAAA,IACxC;AAAA,IACA,MAAM;AAAA,EACV;AAEA,QAAM,UAAU,MAAM;AAElB,eAAW,MAAM;AACb,eAAS,aAAa;AAAA,OACvB,CAAC;AAAA,EAAA,GACL,CAAC,aAAa,CAAC;AAElB,QAAM,gBAAgB,MAAM,eAAe,CAAA,SAAQ,CAAC,IAAI;AAClD,QAAA,UAAU,OAAO,aAAa,aAAa,SAAS,EAAE,eAAe,MAAM,aAAa,cAAc,CAAC,IAAI;AAEjH,MAAI,CAAC,SAAS;AACH,WAAA;AAAA,EAAA;AAGX,mEAES,sBAAA,cAAA,OAAA,EAAK,GAAG,YAAY,mBAAiB,eAAe,eAAa,CAAC,WAAW,WAAsB,IAC/F,GAAA,OACL,GACA,sBAAA,cAACC,aAAAA,uBACI,gBACG,sBAAA;AAAA,IAACC,aAAAA,OAAO;AAAA,IAAP;AAAA,MACG,eAAW;AAAA,MACX,SAAS,EAAE,SAAS,EAAE;AAAA,MACtB,SAAS,EAAE,SAAS,EAAE;AAAA,MACtB,MAAM,EAAE,SAAS,EAAE;AAAA,MACnB,SAAS,MAAM,eAAe,KAAK;AAAA,MACnC,WAAU;AAAA,IAAA;AAAA,EAAA,CAGtB,CACJ;AAER,CAAC;;"}
+{"version":3,"file":"Sidebar.cjs","sources":["../../../../src/components/Layout/components/Sidebar.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { LayoutContext } from './Context';\nimport { useIsLargeScreen } from '../../../hooks/useIsLargeScreen';\n\nexport type LayoutSidebarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    children:\n        | React.ReactNode\n        | (({\n              isLargeScreen,\n              open,\n              toggleSidebar,\n          }: {\n              isLargeScreen: boolean;\n              open: boolean;\n              toggleSidebar: () => void;\n          }) => React.ReactNode);\n};\n\nexport const Sidebar = React.forwardRef<HTMLDivElement, LayoutSidebarProps>(function LayoutSidebar(props, ref) {\n    const { children, ...attributes } = props;\n    const { sidebarOpen, setSidebarOpen } = React.useContext(LayoutContext);\n    const isLargeScreen = useIsLargeScreen();\n    const isSmallScreen = !isLargeScreen;\n\n    // if it's a large screen we override the open state and make it always visible\n    const isVisible = isLargeScreen || sidebarOpen;\n\n    // ensures the menu is always closed by default when resizing to a smaller window size\n    React.useEffect(() => {\n        setSidebarOpen(isLargeScreen);\n    }, [isLargeScreen]);\n\n    React.useEffect(() => {\n        const handleEscapeKey = (event: KeyboardEvent) => {\n            if (event.key === 'Escape') {\n                event.preventDefault();\n                event.stopPropagation();\n                setSidebarOpen(false);\n            }\n        };\n\n        if (isSmallScreen && sidebarOpen) {\n            window.addEventListener('keydown', handleEscapeKey);\n        }\n\n        return () => {\n            window.removeEventListener('keydown', handleEscapeKey);\n        };\n    }, [isSmallScreen, sidebarOpen]);\n\n    const showBackdrop = isSmallScreen && sidebarOpen === true;\n\n    const [ready, setReady] = React.useState(isSmallScreen);\n\n    const className = cn(\n        'bg-gray-50 h-full w-64 flex-shrink-0 flex-grow-0 print:hidden',\n        {\n            'absolute z-10 aria-hidden:-translate-x-64 ': isSmallScreen,\n            // prevent animation when crossing the boundary from large to small screen,\n            // this prevents awkward animation in the edge case (resizing the browser, instead of starting at a given size)\n            invisible: isSmallScreen && !ready,\n            'transition-[transform] duration-300 visible': isSmallScreen && ready,\n            'border-r-2 border-gray-100 ': !showBackdrop,\n        },\n        props.className\n    );\n\n    React.useEffect(() => {\n        // ensure state is updated in the next cpu tick so that the animation definitely doesn't run\n        setTimeout(() => {\n            setReady(isSmallScreen);\n        }, 1);\n    }, [isSmallScreen]);\n\n    const toggleSidebar = () => setSidebarOpen(open => !open);\n    const content = typeof children === 'function' ? children({ isLargeScreen, open: sidebarOpen, toggleSidebar }) : children;\n\n    if (!content) {\n        return null;\n    }\n\n    return (\n        <>\n            <nav {...attributes} data-responsive={isSmallScreen} aria-hidden={!isVisible} className={className} ref={ref}>\n                {content}\n            </nav>\n            <AnimatePresence>\n                {showBackdrop && (\n                    <motion.div\n                        aria-hidden\n                        initial={{ opacity: 0 }}\n                        animate={{ opacity: 1 }}\n                        exit={{ opacity: 0 }}\n                        onClick={() => setSidebarOpen(false)}\n                        className=\"bg-brand-midnight/[0.3] fixed inset-0 z-[1] cursor-default overflow-y-auto print:absolute print:overflow-visible\"\n                    />\n                )}\n            </AnimatePresence>\n        </>\n    );\n});\n"],"names":["LayoutContext","useIsLargeScreen","AnimatePresence","motion"],"mappings":";;;;;;;AAoBO,MAAM,UAAU,MAAM,WAA+C,SAAS,cAAc,OAAO,KAAK;AAC3G,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,EAAE,aAAa,eAAA,IAAmB,MAAM,WAAWA,QAAAA,aAAa;AACtE,QAAM,gBAAgBC,iBAAAA,iBAAiB;AACvC,QAAM,gBAAgB,CAAC;AAGvB,QAAM,YAAY,iBAAiB;AAGnC,QAAM,UAAU,MAAM;AAClB,mBAAe,aAAa;AAAA,EAAA,GAC7B,CAAC,aAAa,CAAC;AAElB,QAAM,UAAU,MAAM;AACZ,UAAA,kBAAkB,CAAC,UAAyB;AAC1C,UAAA,MAAM,QAAQ,UAAU;AACxB,cAAM,eAAe;AACrB,cAAM,gBAAgB;AACtB,uBAAe,KAAK;AAAA,MAAA;AAAA,IAE5B;AAEA,QAAI,iBAAiB,aAAa;AACvB,aAAA,iBAAiB,WAAW,eAAe;AAAA,IAAA;AAGtD,WAAO,MAAM;AACF,aAAA,oBAAoB,WAAW,eAAe;AAAA,IACzD;AAAA,EAAA,GACD,CAAC,eAAe,WAAW,CAAC;AAEzB,QAAA,eAAe,iBAAiB,gBAAgB;AAEtD,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,aAAa;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,8CAA8C;AAAA;AAAA;AAAA,MAG9C,WAAW,iBAAiB,CAAC;AAAA,MAC7B,+CAA+C,iBAAiB;AAAA,MAChE,+BAA+B,CAAC;AAAA,IACpC;AAAA,IACA,MAAM;AAAA,EACV;AAEA,QAAM,UAAU,MAAM;AAElB,eAAW,MAAM;AACb,eAAS,aAAa;AAAA,OACvB,CAAC;AAAA,EAAA,GACL,CAAC,aAAa,CAAC;AAElB,QAAM,gBAAgB,MAAM,eAAe,CAAA,SAAQ,CAAC,IAAI;AAClD,QAAA,UAAU,OAAO,aAAa,aAAa,SAAS,EAAE,eAAe,MAAM,aAAa,cAAc,CAAC,IAAI;AAEjH,MAAI,CAAC,SAAS;AACH,WAAA;AAAA,EAAA;AAGX,mEAES,sBAAA,cAAA,OAAA,EAAK,GAAG,YAAY,mBAAiB,eAAe,eAAa,CAAC,WAAW,WAAsB,IAC/F,GAAA,OACL,GACA,sBAAA,cAACC,aAAAA,uBACI,gBACG,sBAAA;AAAA,IAACC,aAAAA,OAAO;AAAA,IAAP;AAAA,MACG,eAAW;AAAA,MACX,SAAS,EAAE,SAAS,EAAE;AAAA,MACtB,SAAS,EAAE,SAAS,EAAE;AAAA,MACtB,MAAM,EAAE,SAAS,EAAE;AAAA,MACnB,SAAS,MAAM,eAAe,KAAK;AAAA,MACnC,WAAU;AAAA,IAAA;AAAA,EAAA,CAGtB,CACJ;AAER,CAAC;;"}

package/dist/components/Layout/components/Sidebar.js

@@ -37,7 +37,7 @@ const Sidebar = React__default.forwardRef(function LayoutSidebar(props, ref) {
       // this prevents awkward animation in the edge case (resizing the browser, instead of starting at a given size)
       invisible: isSmallScreen && !ready,
       "transition-[transform] duration-300 visible": isSmallScreen && ready,
-      "border-r-2 border-black-subtle ": !showBackdrop
+      "border-r-2 border-gray-100 ": !showBackdrop
     },
     props.className
   );

package/dist/components/Layout/components/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../../../src/components/Layout/components/Sidebar.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { LayoutContext } from './Context';\nimport { useIsLargeScreen } from '../../../hooks/useIsLargeScreen';\n\nexport type LayoutSidebarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    children:\n        | React.ReactNode\n        | (({\n              isLargeScreen,\n              open,\n              toggleSidebar,\n          }: {\n              isLargeScreen: boolean;\n              open: boolean;\n              toggleSidebar: () => void;\n          }) => React.ReactNode);\n};\n\nexport const Sidebar = React.forwardRef<HTMLDivElement, LayoutSidebarProps>(function LayoutSidebar(props, ref) {\n    const { children, ...attributes } = props;\n    const { sidebarOpen, setSidebarOpen } = React.useContext(LayoutContext);\n    const isLargeScreen = useIsLargeScreen();\n    const isSmallScreen = !isLargeScreen;\n\n    // if it's a large screen we override the open state and make it always visible\n    const isVisible = isLargeScreen || sidebarOpen;\n\n    // ensures the menu is always closed by default when resizing to a smaller window size\n    React.useEffect(() => {\n        setSidebarOpen(isLargeScreen);\n    }, [isLargeScreen]);\n\n    React.useEffect(() => {\n        const handleEscapeKey = (event: KeyboardEvent) => {\n            if (event.key === 'Escape') {\n                event.preventDefault();\n                event.stopPropagation();\n                setSidebarOpen(false);\n            }\n        };\n\n        if (isSmallScreen && sidebarOpen) {\n            window.addEventListener('keydown', handleEscapeKey);\n        }\n\n        return () => {\n            window.removeEventListener('keydown', handleEscapeKey);\n        };\n    }, [isSmallScreen, sidebarOpen]);\n\n    const showBackdrop = isSmallScreen && sidebarOpen === true;\n\n    const [ready, setReady] = React.useState(isSmallScreen);\n\n    const className = cn(\n        'bg-gray-50 h-full w-64 flex-shrink-0 flex-grow-0 print:hidden',\n        {\n            'absolute z-10 aria-hidden:-translate-x-64 ': isSmallScreen,\n            // prevent animation when crossing the boundary from large to small screen,\n            // this prevents awkward animation in the edge case (resizing the browser, instead of starting at a given size)\n            invisible: isSmallScreen && !ready,\n            'transition-[transform] duration-300 visible': isSmallScreen && ready,\n            'border-r-2 border-black-subtle ': !showBackdrop,\n        },\n        props.className\n    );\n\n    React.useEffect(() => {\n        // ensure state is updated in the next cpu tick so that the animation definitely doesn't run\n        setTimeout(() => {\n            setReady(isSmallScreen);\n        }, 1);\n    }, [isSmallScreen]);\n\n    const toggleSidebar = () => setSidebarOpen(open => !open);\n    const content = typeof children === 'function' ? children({ isLargeScreen, open: sidebarOpen, toggleSidebar }) : children;\n\n    if (!content) {\n        return null;\n    }\n\n    return (\n        <>\n            <nav {...attributes} data-responsive={isSmallScreen} aria-hidden={!isVisible} className={className} ref={ref}>\n                {content}\n            </nav>\n            <AnimatePresence>\n                {showBackdrop && (\n                    <motion.div\n                        aria-hidden\n                        initial={{ opacity: 0 }}\n                        animate={{ opacity: 1 }}\n                        exit={{ opacity: 0 }}\n                        onClick={() => setSidebarOpen(false)}\n                        className=\"bg-brand-midnight/[0.3] fixed inset-0 z-[1] cursor-default overflow-y-auto print:absolute print:overflow-visible\"\n                    />\n                )}\n            </AnimatePresence>\n        </>\n    );\n});\n"],"names":["React"],"mappings":";;;;;AAoBO,MAAM,UAAUA,eAAM,WAA+C,SAAS,cAAc,OAAO,KAAK;AAC3G,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,EAAE,aAAa,eAAA,IAAmBA,eAAM,WAAW,aAAa;AACtE,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,gBAAgB,CAAC;AAGvB,QAAM,YAAY,iBAAiB;AAGnCA,iBAAM,UAAU,MAAM;AAClB,mBAAe,aAAa;AAAA,EAAA,GAC7B,CAAC,aAAa,CAAC;AAElBA,iBAAM,UAAU,MAAM;AACZ,UAAA,kBAAkB,CAAC,UAAyB;AAC1C,UAAA,MAAM,QAAQ,UAAU;AACxB,cAAM,eAAe;AACrB,cAAM,gBAAgB;AACtB,uBAAe,KAAK;AAAA,MAAA;AAAA,IAE5B;AAEA,QAAI,iBAAiB,aAAa;AACvB,aAAA,iBAAiB,WAAW,eAAe;AAAA,IAAA;AAGtD,WAAO,MAAM;AACF,aAAA,oBAAoB,WAAW,eAAe;AAAA,IACzD;AAAA,EAAA,GACD,CAAC,eAAe,WAAW,CAAC;AAEzB,QAAA,eAAe,iBAAiB,gBAAgB;AAEtD,QAAM,CAAC,OAAO,QAAQ,IAAIA,eAAM,SAAS,aAAa;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,8CAA8C;AAAA;AAAA;AAAA,MAG9C,WAAW,iBAAiB,CAAC;AAAA,MAC7B,+CAA+C,iBAAiB;AAAA,MAChE,mCAAmC,CAAC;AAAA,IACxC;AAAA,IACA,MAAM;AAAA,EACV;AAEAA,iBAAM,UAAU,MAAM;AAElB,eAAW,MAAM;AACb,eAAS,aAAa;AAAA,OACvB,CAAC;AAAA,EAAA,GACL,CAAC,aAAa,CAAC;AAElB,QAAM,gBAAgB,MAAM,eAAe,CAAA,SAAQ,CAAC,IAAI;AAClD,QAAA,UAAU,OAAO,aAAa,aAAa,SAAS,EAAE,eAAe,MAAM,aAAa,cAAc,CAAC,IAAI;AAEjH,MAAI,CAAC,SAAS;AACH,WAAA;AAAA,EAAA;AAGX,qFAESA,+BAAA,cAAA,OAAA,EAAK,GAAG,YAAY,mBAAiB,eAAe,eAAa,CAAC,WAAW,WAAsB,IAC/F,GAAA,OACL,GACAA,+BAAA,cAAC,uBACI,gBACGA,+BAAA;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACG,eAAW;AAAA,MACX,SAAS,EAAE,SAAS,EAAE;AAAA,MACtB,SAAS,EAAE,SAAS,EAAE;AAAA,MACtB,MAAM,EAAE,SAAS,EAAE;AAAA,MACnB,SAAS,MAAM,eAAe,KAAK;AAAA,MACnC,WAAU;AAAA,IAAA;AAAA,EAAA,CAGtB,CACJ;AAER,CAAC;"}
+{"version":3,"file":"Sidebar.js","sources":["../../../../src/components/Layout/components/Sidebar.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { LayoutContext } from './Context';\nimport { useIsLargeScreen } from '../../../hooks/useIsLargeScreen';\n\nexport type LayoutSidebarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    children:\n        | React.ReactNode\n        | (({\n              isLargeScreen,\n              open,\n              toggleSidebar,\n          }: {\n              isLargeScreen: boolean;\n              open: boolean;\n              toggleSidebar: () => void;\n          }) => React.ReactNode);\n};\n\nexport const Sidebar = React.forwardRef<HTMLDivElement, LayoutSidebarProps>(function LayoutSidebar(props, ref) {\n    const { children, ...attributes } = props;\n    const { sidebarOpen, setSidebarOpen } = React.useContext(LayoutContext);\n    const isLargeScreen = useIsLargeScreen();\n    const isSmallScreen = !isLargeScreen;\n\n    // if it's a large screen we override the open state and make it always visible\n    const isVisible = isLargeScreen || sidebarOpen;\n\n    // ensures the menu is always closed by default when resizing to a smaller window size\n    React.useEffect(() => {\n        setSidebarOpen(isLargeScreen);\n    }, [isLargeScreen]);\n\n    React.useEffect(() => {\n        const handleEscapeKey = (event: KeyboardEvent) => {\n            if (event.key === 'Escape') {\n                event.preventDefault();\n                event.stopPropagation();\n                setSidebarOpen(false);\n            }\n        };\n\n        if (isSmallScreen && sidebarOpen) {\n            window.addEventListener('keydown', handleEscapeKey);\n        }\n\n        return () => {\n            window.removeEventListener('keydown', handleEscapeKey);\n        };\n    }, [isSmallScreen, sidebarOpen]);\n\n    const showBackdrop = isSmallScreen && sidebarOpen === true;\n\n    const [ready, setReady] = React.useState(isSmallScreen);\n\n    const className = cn(\n        'bg-gray-50 h-full w-64 flex-shrink-0 flex-grow-0 print:hidden',\n        {\n            'absolute z-10 aria-hidden:-translate-x-64 ': isSmallScreen,\n            // prevent animation when crossing the boundary from large to small screen,\n            // this prevents awkward animation in the edge case (resizing the browser, instead of starting at a given size)\n            invisible: isSmallScreen && !ready,\n            'transition-[transform] duration-300 visible': isSmallScreen && ready,\n            'border-r-2 border-gray-100 ': !showBackdrop,\n        },\n        props.className\n    );\n\n    React.useEffect(() => {\n        // ensure state is updated in the next cpu tick so that the animation definitely doesn't run\n        setTimeout(() => {\n            setReady(isSmallScreen);\n        }, 1);\n    }, [isSmallScreen]);\n\n    const toggleSidebar = () => setSidebarOpen(open => !open);\n    const content = typeof children === 'function' ? children({ isLargeScreen, open: sidebarOpen, toggleSidebar }) : children;\n\n    if (!content) {\n        return null;\n    }\n\n    return (\n        <>\n            <nav {...attributes} data-responsive={isSmallScreen} aria-hidden={!isVisible} className={className} ref={ref}>\n                {content}\n            </nav>\n            <AnimatePresence>\n                {showBackdrop && (\n                    <motion.div\n                        aria-hidden\n                        initial={{ opacity: 0 }}\n                        animate={{ opacity: 1 }}\n                        exit={{ opacity: 0 }}\n                        onClick={() => setSidebarOpen(false)}\n                        className=\"bg-brand-midnight/[0.3] fixed inset-0 z-[1] cursor-default overflow-y-auto print:absolute print:overflow-visible\"\n                    />\n                )}\n            </AnimatePresence>\n        </>\n    );\n});\n"],"names":["React"],"mappings":";;;;;AAoBO,MAAM,UAAUA,eAAM,WAA+C,SAAS,cAAc,OAAO,KAAK;AAC3G,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,EAAE,aAAa,eAAA,IAAmBA,eAAM,WAAW,aAAa;AACtE,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,gBAAgB,CAAC;AAGvB,QAAM,YAAY,iBAAiB;AAGnCA,iBAAM,UAAU,MAAM;AAClB,mBAAe,aAAa;AAAA,EAAA,GAC7B,CAAC,aAAa,CAAC;AAElBA,iBAAM,UAAU,MAAM;AACZ,UAAA,kBAAkB,CAAC,UAAyB;AAC1C,UAAA,MAAM,QAAQ,UAAU;AACxB,cAAM,eAAe;AACrB,cAAM,gBAAgB;AACtB,uBAAe,KAAK;AAAA,MAAA;AAAA,IAE5B;AAEA,QAAI,iBAAiB,aAAa;AACvB,aAAA,iBAAiB,WAAW,eAAe;AAAA,IAAA;AAGtD,WAAO,MAAM;AACF,aAAA,oBAAoB,WAAW,eAAe;AAAA,IACzD;AAAA,EAAA,GACD,CAAC,eAAe,WAAW,CAAC;AAEzB,QAAA,eAAe,iBAAiB,gBAAgB;AAEtD,QAAM,CAAC,OAAO,QAAQ,IAAIA,eAAM,SAAS,aAAa;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,8CAA8C;AAAA;AAAA;AAAA,MAG9C,WAAW,iBAAiB,CAAC;AAAA,MAC7B,+CAA+C,iBAAiB;AAAA,MAChE,+BAA+B,CAAC;AAAA,IACpC;AAAA,IACA,MAAM;AAAA,EACV;AAEAA,iBAAM,UAAU,MAAM;AAElB,eAAW,MAAM;AACb,eAAS,aAAa;AAAA,OACvB,CAAC;AAAA,EAAA,GACL,CAAC,aAAa,CAAC;AAElB,QAAM,gBAAgB,MAAM,eAAe,CAAA,SAAQ,CAAC,IAAI;AAClD,QAAA,UAAU,OAAO,aAAa,aAAa,SAAS,EAAE,eAAe,MAAM,aAAa,cAAc,CAAC,IAAI;AAEjH,MAAI,CAAC,SAAS;AACH,WAAA;AAAA,EAAA;AAGX,qFAESA,+BAAA,cAAA,OAAA,EAAK,GAAG,YAAY,mBAAiB,eAAe,eAAa,CAAC,WAAW,WAAsB,IAC/F,GAAA,OACL,GACAA,+BAAA,cAAC,uBACI,gBACGA,+BAAA;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACG,eAAW;AAAA,MACX,SAAS,EAAE,SAAS,EAAE;AAAA,MACtB,SAAS,EAAE,SAAS,EAAE;AAAA,MACtB,MAAM,EAAE,SAAS,EAAE;AAAA,MACnB,SAAS,MAAM,eAAe,KAAK;AAAA,MACnC,WAAU;AAAA,IAAA;AAAA,EAAA,CAGtB,CACJ;AAER,CAAC;"}

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

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

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

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

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

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

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

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

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

@@ -24,7 +24,7 @@ const Link = React.forwardRef(function Link2(props, ref) {
   const { active, children, icon, menu, onDrop, total, ...attributes } = props;
   const [isDraggedOver, dropTargetProps] = useDropTarget.useDropTarget(onDrop);
   const className = cn(getNavigationLinkClasses(isDraggedOver), attributes.className);
-  const listClassName = cn("[[role=menubar]>&]:px-3 border-gray-200", util.getAdjacentClasses(), {
+  const listClassName = cn("[[role=menubar]>&]:px-3 border-gray-100", util.getAdjacentClasses(), {
     "[&>*]:pointer-events-none": isDraggedOver
   });
   return /* @__PURE__ */ React.createElement("li", { ...dropTargetProps, className: listClassName, "data-taco": "navigation2-link-item", role: "none" }, /* @__PURE__ */ React.createElement(

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

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

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

@@ -22,7 +22,7 @@ const Link = React__default.forwardRef(function Link2(props, ref) {
   const { active, children, icon, menu, onDrop, total, ...attributes } = props;
   const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);
   const className = cn(getNavigationLinkClasses(isDraggedOver), attributes.className);
-  const listClassName = cn("[[role=menubar]>&]:px-3 border-gray-200", getAdjacentClasses(), {
+  const listClassName = cn("[[role=menubar]>&]:px-3 border-gray-100", getAdjacentClasses(), {
     "[&>*]:pointer-events-none": isDraggedOver
   });
   return /* @__PURE__ */ React__default.createElement("li", { ...dropTargetProps, className: listClassName, "data-taco": "navigation2-link-item", role: "none" }, /* @__PURE__ */ React__default.createElement(

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

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

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

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

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

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

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

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

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

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

package/dist/components/Navigation2/components/util.cjs

@@ -4,13 +4,13 @@ const cn = require("clsx");
 const getAdjacentClasses = () => cn(
   // styling if the element is proceeded by a link item
   "[[role=menubar]>[data-taco=navigation2-link-item]+&]:mt-2",
-  "[[role=menubar]>[data-taco='navigation2-link-item']+&]:border-t-2",
+  "[[role=menubar]>[data-taco='navigation2-link-item']+&]:border-t",
   "[[role=menubar]>[data-taco='navigation2-link-item']+&]:pt-2 ",
   // styling if the element is proceeded by content
-  "[[role=menubar]>[data-taco='navigation2-content']+&]:border-t-2",
+  "[[role=menubar]>[data-taco='navigation2-content']+&]:border-t",
   "[[role=menubar]>[data-taco='navigation2-content']+&]:pt-2",
   // styling if the element is proceeded by a section
-  "[[role=menubar]>[data-taco='navigation2-section']+&]:border-t-2",
+  "[[role=menubar]>[data-taco='navigation2-section']+&]:border-t",
   "[[role=menubar]>[data-taco='navigation2-section']+&]:pt-2"
 );
 exports.getAdjacentClasses = getAdjacentClasses;

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

@@ -1 +1 @@
-{"version":3,"file":"util.cjs","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":[],"mappings":";;;AAEO,MAAM,qBAAqB,MAC9B;AAAA;AAAA,EAEI;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AACJ;;"}
+{"version":3,"file":"util.cjs","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\",\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\",\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\",\n        \"[[role=menubar]>[data-taco='navigation2-section']+&]:pt-2\"\n    );\n"],"names":[],"mappings":";;;AAEO,MAAM,qBAAqB,MAC9B;AAAA;AAAA,EAEI;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AACJ;;"}

package/dist/components/Navigation2/components/util.js

@@ -2,13 +2,13 @@ import cn from "clsx";
 const getAdjacentClasses = () => cn(
   // styling if the element is proceeded by a link item
   "[[role=menubar]>[data-taco=navigation2-link-item]+&]:mt-2",
-  "[[role=menubar]>[data-taco='navigation2-link-item']+&]:border-t-2",
+  "[[role=menubar]>[data-taco='navigation2-link-item']+&]:border-t",
   "[[role=menubar]>[data-taco='navigation2-link-item']+&]:pt-2 ",
   // styling if the element is proceeded by content
-  "[[role=menubar]>[data-taco='navigation2-content']+&]:border-t-2",
+  "[[role=menubar]>[data-taco='navigation2-content']+&]:border-t",
   "[[role=menubar]>[data-taco='navigation2-content']+&]:pt-2",
   // styling if the element is proceeded by a section
-  "[[role=menubar]>[data-taco='navigation2-section']+&]:border-t-2",
+  "[[role=menubar]>[data-taco='navigation2-section']+&]:border-t",
   "[[role=menubar]>[data-taco='navigation2-section']+&]:pt-2"
 );
 export {

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

@@ -1 +1 @@
-{"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":[],"mappings":";AAEO,MAAM,qBAAqB,MAC9B;AAAA;AAAA,EAEI;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AACJ;"}
+{"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\",\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\",\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\",\n        \"[[role=menubar]>[data-taco='navigation2-section']+&]:pt-2\"\n    );\n"],"names":[],"mappings":";AAEO,MAAM,qBAAqB,MAC9B;AAAA;AAAA,EAEI;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AACJ;"}

package/dist/components/Select/useSelect.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useSelect.cjs","sources":["../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { nanoid } from 'nanoid';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport { useLocalization } from '../Provider/Localization';\nimport { SelectProps } from './Select';\nimport { ListboxProps } from '../Listbox/Listbox';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\nimport { ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { createCustomEvent } from '../../utils/input';\n\ntype InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\ntype InternalListboxProps = ListboxProps & { ref: React.ForwardedRef<HTMLInputElement> };\ntype InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.ForwardedRef<HTMLInputElement> };\n\ntype useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {\n    button: InternalButtonProps;\n    listbox: InternalListboxProps;\n    input: InternalInputProps;\n    popover: Pick<PopoverPrimitive.Root.Props, 'onOpenChange' | 'open'>;\n    text: string | JSX.Element;\n    more?: number;\n};\n\nexport const useSelect = (\n    {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data = [],\n        defaultValue,\n        disabled,\n        emptyValue,\n        id: nativeId,\n        multiselect,\n        onBlur,\n        onClick: _1,\n        onChange,\n        readOnly,\n        tabIndex,\n        value,\n        ...otherProps\n    }: SelectProps,\n    ref: React.Ref<HTMLInputElement>\n): useSelect => {\n    const { texts } = useLocalization();\n    const flattenedData = useFlattenedData(data);\n    const listboxInputRef = useMergedRef<HTMLInputElement>(ref);\n    const [open, setOpen] = React.useState(false);\n    const id = React.useMemo(() => nativeId || `select_${nanoid()}`, [nativeId]);\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const buttonId = `${id}-button`;\n    // support 'escape' resetting to the value that was set when the listbox opened\n    const [lastValue, setLastValue] = React.useState<ScrollableListItemValue | undefined>(value);\n\n    React.useEffect(() => {\n        setLastValue(value);\n    }, [open]);\n\n    React.useEffect(() => {\n        if (value === undefined) {\n            if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {\n                setInputValueByRef(inputRef.current, defaultValue);\n            } else if (emptyValue !== undefined) {\n                setInputValueByRef(inputRef.current, emptyValue);\n            } else if (data.length > 0) {\n                setInputValueByRef(inputRef.current, data[0]?.value);\n            }\n        } else if (!multiselect && !findByValue(flattenedData, value)) {\n            if (emptyValue !== undefined) {\n                setInputValueByRef(inputRef.current, emptyValue);\n            } else if (data.length > 0) {\n                setInputValueByRef(inputRef.current, data[0]?.value);\n            }\n        }\n    }, []);\n\n    // event handlers\n    const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n            event.preventDefault();\n            setOpen(true);\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n        switch (event.key) {\n            case 'Escape': {\n                event.preventDefault();\n                if (lastValue !== undefined) {\n                    setInputValueByRef(listboxInputRef.current, lastValue);\n                }\n\n                setOpen(false);\n                break;\n            }\n\n            case 'Tab':\n            case 'Enter': {\n                if (event.key !== 'Tab') {\n                    event.preventDefault();\n                }\n                setOpen(false);\n                break;\n            }\n\n            default:\n        }\n\n        if (otherProps.onKeyDown) {\n            otherProps.onKeyDown(event);\n        }\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n        event.preventDefault();\n        if (!multiselect) {\n            setOpen(false);\n            if (onBlur) {\n                onBlur(createCustomEvent('blur') as unknown as React.FocusEvent<HTMLElement, Element>);\n            }\n        }\n    };\n\n    let text: string | JSX.Element = '';\n    let more = 0;\n\n    if (value !== undefined) {\n        if (multiselect) {\n            const selectedValues = value?.toString().split(',') || [];\n\n            if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {\n                text = texts.select.allOptionsSelected;\n            } else {\n                text = findByValue(flattenedData, selectedValues[0])?.text ?? '';\n                more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n            }\n        } else {\n            const item = findByValue(flattenedData, value);\n\n            if (item) {\n                text = item.icon ? (\n                    <>\n                        {React.cloneElement(item.icon, {\n                            className: cn(item.icon.props.className, 'mr-1 -mt-px'),\n                        })}\n                        {item.text}\n                    </>\n                ) : (\n                    item.text\n                );\n            }\n        }\n    }\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (onChange) {\n            const item = findByValue(flattenedData, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const indexes = item?.path?.split('.') ?? [];\n\n            if (indexes.length > 1) {\n                // we don't want to map the current item\n                indexes.pop();\n                // we need to rebuild the path as we map\n                let lastPath: string;\n\n                (event as any).detail.parents = indexes.map(i => {\n                    lastPath = lastPath ? [lastPath, i].join('.') : i;\n                    return sanitizeItem(flattenedData.find(i => i.path === lastPath));\n                });\n            }\n\n            onChange(event);\n        }\n    };\n\n    const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            event.preventDefault();\n        }\n    };\n\n    // select the value text if the select is readonly\n    const handleButtonFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            const value = event.currentTarget.querySelector(':first-child');\n\n            if (value) {\n                window.getSelection()?.selectAllChildren?.(value);\n            }\n        }\n    };\n\n    const button: InternalButtonProps = {\n        'aria-haspopup': 'listbox' as const,\n        'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n        'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\n        'aria-readonly': readOnly ? 'true' : undefined,\n        disabled: disabled,\n        id: buttonId,\n        onClick: handleButtonClick,\n        onFocus: handleButtonFocus,\n        onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n        tabIndex,\n        type: 'button',\n    };\n\n    const listbox: InternalListboxProps = {\n        ...otherProps,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        emptyValue,\n        onBlur,\n        onClick: handleListboxClick,\n        onChange: event => {\n            setInputValueByRef(inputRef.current, event.target.value);\n        },\n        onKeyDown: handleListboxKeyDown,\n        ref: listboxInputRef,\n        value,\n    };\n\n    const input: InternalInputProps = {\n        onChange: handleInputChange,\n        ref: inputRef,\n        value: String(value ?? ''),\n    };\n\n    return {\n        button,\n        listbox,\n        input,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n        },\n        text,\n        more,\n    };\n};\n"],"names":["useLocalization","useFlattenedData","useMergedRef","React","nanoid","findByValue","setInputValueByRef","_a","createCustomEvent","sanitizeItem","i","value","input"],"mappings":"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"}
+{"version":3,"file":"useSelect.cjs","sources":["../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { nanoid } from 'nanoid';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { useLocalization } from '../Provider/Localization';\nimport { SelectProps } from './Select';\nimport { ListboxProps } from '../Listbox/Listbox';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\nimport { ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { createCustomEvent } from '../../utils/input';\n\ntype InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\ntype InternalListboxProps = ListboxProps & { ref: React.ForwardedRef<HTMLInputElement> };\ntype InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.ForwardedRef<HTMLInputElement> };\n\ntype useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {\n    button: InternalButtonProps;\n    listbox: InternalListboxProps;\n    input: InternalInputProps;\n    popover: Pick<PopoverPrimitive.PopoverProps, 'onOpenChange' | 'open'>;\n    text: string | JSX.Element;\n    more?: number;\n};\n\nexport const useSelect = (\n    {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data = [],\n        defaultValue,\n        disabled,\n        emptyValue,\n        id: nativeId,\n        multiselect,\n        onBlur,\n        onClick: _1,\n        onChange,\n        readOnly,\n        tabIndex,\n        value,\n        ...otherProps\n    }: SelectProps,\n    ref: React.Ref<HTMLInputElement>\n): useSelect => {\n    const { texts } = useLocalization();\n    const flattenedData = useFlattenedData(data);\n    const listboxInputRef = useMergedRef<HTMLInputElement>(ref);\n    const [open, setOpen] = React.useState(false);\n    const id = React.useMemo(() => nativeId || `select_${nanoid()}`, [nativeId]);\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const buttonId = `${id}-button`;\n    // support 'escape' resetting to the value that was set when the listbox opened\n    const [lastValue, setLastValue] = React.useState<ScrollableListItemValue | undefined>(value);\n\n    React.useEffect(() => {\n        setLastValue(value);\n    }, [open]);\n\n    React.useEffect(() => {\n        if (value === undefined) {\n            if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {\n                setInputValueByRef(inputRef.current, defaultValue);\n            } else if (emptyValue !== undefined) {\n                setInputValueByRef(inputRef.current, emptyValue);\n            } else if (data.length > 0) {\n                setInputValueByRef(inputRef.current, data[0]?.value);\n            }\n        } else if (!multiselect && !findByValue(flattenedData, value)) {\n            if (emptyValue !== undefined) {\n                setInputValueByRef(inputRef.current, emptyValue);\n            } else if (data.length > 0) {\n                setInputValueByRef(inputRef.current, data[0]?.value);\n            }\n        }\n    }, []);\n\n    // event handlers\n    const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n            event.preventDefault();\n            setOpen(true);\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n        switch (event.key) {\n            case 'Escape': {\n                event.preventDefault();\n                if (lastValue !== undefined) {\n                    setInputValueByRef(listboxInputRef.current, lastValue);\n                }\n\n                setOpen(false);\n                break;\n            }\n\n            case 'Tab':\n            case 'Enter': {\n                if (event.key !== 'Tab') {\n                    event.preventDefault();\n                }\n                setOpen(false);\n                break;\n            }\n\n            default:\n        }\n\n        if (otherProps.onKeyDown) {\n            otherProps.onKeyDown(event);\n        }\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n        event.preventDefault();\n        if (!multiselect) {\n            setOpen(false);\n            if (onBlur) {\n                onBlur(createCustomEvent('blur') as unknown as React.FocusEvent<HTMLElement, Element>);\n            }\n        }\n    };\n\n    let text: string | JSX.Element = '';\n    let more = 0;\n\n    if (value !== undefined) {\n        if (multiselect) {\n            const selectedValues = value?.toString().split(',') || [];\n\n            if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {\n                text = texts.select.allOptionsSelected;\n            } else {\n                text = findByValue(flattenedData, selectedValues[0])?.text ?? '';\n                more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n            }\n        } else {\n            const item = findByValue(flattenedData, value);\n\n            if (item) {\n                text = item.icon ? (\n                    <>\n                        {React.cloneElement(item.icon, {\n                            className: cn(item.icon.props.className, 'mr-1 -mt-px'),\n                        })}\n                        {item.text}\n                    </>\n                ) : (\n                    item.text\n                );\n            }\n        }\n    }\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (onChange) {\n            const item = findByValue(flattenedData, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const indexes = item?.path?.split('.') ?? [];\n\n            if (indexes.length > 1) {\n                // we don't want to map the current item\n                indexes.pop();\n                // we need to rebuild the path as we map\n                let lastPath: string;\n\n                (event as any).detail.parents = indexes.map(i => {\n                    lastPath = lastPath ? [lastPath, i].join('.') : i;\n                    return sanitizeItem(flattenedData.find(i => i.path === lastPath));\n                });\n            }\n\n            onChange(event);\n        }\n    };\n\n    const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            event.preventDefault();\n        }\n    };\n\n    // select the value text if the select is readonly\n    const handleButtonFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            const value = event.currentTarget.querySelector(':first-child');\n\n            if (value) {\n                window.getSelection()?.selectAllChildren?.(value);\n            }\n        }\n    };\n\n    const button: InternalButtonProps = {\n        'aria-haspopup': 'listbox' as const,\n        'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n        'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\n        'aria-readonly': readOnly ? 'true' : undefined,\n        disabled: disabled,\n        id: buttonId,\n        onClick: handleButtonClick,\n        onFocus: handleButtonFocus,\n        onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n        tabIndex,\n        type: 'button',\n    };\n\n    const listbox: InternalListboxProps = {\n        ...otherProps,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        emptyValue,\n        onBlur,\n        onClick: handleListboxClick,\n        onChange: event => {\n            setInputValueByRef(inputRef.current, event.target.value);\n        },\n        onKeyDown: handleListboxKeyDown,\n        ref: listboxInputRef,\n        value,\n    };\n\n    const input: InternalInputProps = {\n        onChange: handleInputChange,\n        ref: inputRef,\n        value: String(value ?? ''),\n    };\n\n    return {\n        button,\n        listbox,\n        input,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n        },\n        text,\n        more,\n    };\n};\n"],"names":["useLocalization","useFlattenedData","useMergedRef","React","nanoid","findByValue","setInputValueByRef","_a","createCustomEvent","sanitizeItem","i","value","input"],"mappings":"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"}

package/dist/components/Select/useSelect.d.ts

@@ -1,7 +1,7 @@
-import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
 import { SelectProps } from './Select';
 import { ListboxProps } from '../Listbox/Listbox';
 import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 type InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
 type InternalListboxProps = ListboxProps & {
     ref: React.ForwardedRef<HTMLInputElement>;
@@ -13,7 +13,7 @@ type useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {
     button: InternalButtonProps;
     listbox: InternalListboxProps;
     input: InternalInputProps;
-    popover: Pick<PopoverPrimitive.Root.Props, 'onOpenChange' | 'open'>;
+    popover: Pick<PopoverPrimitive.PopoverProps, 'onOpenChange' | 'open'>;
     text: string | JSX.Element;
     more?: number;
 };

package/dist/components/Select/useSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSelect.js","sources":["../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { nanoid } from 'nanoid';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport { useLocalization } from '../Provider/Localization';\nimport { SelectProps } from './Select';\nimport { ListboxProps } from '../Listbox/Listbox';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\nimport { ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { createCustomEvent } from '../../utils/input';\n\ntype InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\ntype InternalListboxProps = ListboxProps & { ref: React.ForwardedRef<HTMLInputElement> };\ntype InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.ForwardedRef<HTMLInputElement> };\n\ntype useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {\n    button: InternalButtonProps;\n    listbox: InternalListboxProps;\n    input: InternalInputProps;\n    popover: Pick<PopoverPrimitive.Root.Props, 'onOpenChange' | 'open'>;\n    text: string | JSX.Element;\n    more?: number;\n};\n\nexport const useSelect = (\n    {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data = [],\n        defaultValue,\n        disabled,\n        emptyValue,\n        id: nativeId,\n        multiselect,\n        onBlur,\n        onClick: _1,\n        onChange,\n        readOnly,\n        tabIndex,\n        value,\n        ...otherProps\n    }: SelectProps,\n    ref: React.Ref<HTMLInputElement>\n): useSelect => {\n    const { texts } = useLocalization();\n    const flattenedData = useFlattenedData(data);\n    const listboxInputRef = useMergedRef<HTMLInputElement>(ref);\n    const [open, setOpen] = React.useState(false);\n    const id = React.useMemo(() => nativeId || `select_${nanoid()}`, [nativeId]);\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const buttonId = `${id}-button`;\n    // support 'escape' resetting to the value that was set when the listbox opened\n    const [lastValue, setLastValue] = React.useState<ScrollableListItemValue | undefined>(value);\n\n    React.useEffect(() => {\n        setLastValue(value);\n    }, [open]);\n\n    React.useEffect(() => {\n        if (value === undefined) {\n            if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {\n                setInputValueByRef(inputRef.current, defaultValue);\n            } else if (emptyValue !== undefined) {\n                setInputValueByRef(inputRef.current, emptyValue);\n            } else if (data.length > 0) {\n                setInputValueByRef(inputRef.current, data[0]?.value);\n            }\n        } else if (!multiselect && !findByValue(flattenedData, value)) {\n            if (emptyValue !== undefined) {\n                setInputValueByRef(inputRef.current, emptyValue);\n            } else if (data.length > 0) {\n                setInputValueByRef(inputRef.current, data[0]?.value);\n            }\n        }\n    }, []);\n\n    // event handlers\n    const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n            event.preventDefault();\n            setOpen(true);\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n        switch (event.key) {\n            case 'Escape': {\n                event.preventDefault();\n                if (lastValue !== undefined) {\n                    setInputValueByRef(listboxInputRef.current, lastValue);\n                }\n\n                setOpen(false);\n                break;\n            }\n\n            case 'Tab':\n            case 'Enter': {\n                if (event.key !== 'Tab') {\n                    event.preventDefault();\n                }\n                setOpen(false);\n                break;\n            }\n\n            default:\n        }\n\n        if (otherProps.onKeyDown) {\n            otherProps.onKeyDown(event);\n        }\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n        event.preventDefault();\n        if (!multiselect) {\n            setOpen(false);\n            if (onBlur) {\n                onBlur(createCustomEvent('blur') as unknown as React.FocusEvent<HTMLElement, Element>);\n            }\n        }\n    };\n\n    let text: string | JSX.Element = '';\n    let more = 0;\n\n    if (value !== undefined) {\n        if (multiselect) {\n            const selectedValues = value?.toString().split(',') || [];\n\n            if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {\n                text = texts.select.allOptionsSelected;\n            } else {\n                text = findByValue(flattenedData, selectedValues[0])?.text ?? '';\n                more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n            }\n        } else {\n            const item = findByValue(flattenedData, value);\n\n            if (item) {\n                text = item.icon ? (\n                    <>\n                        {React.cloneElement(item.icon, {\n                            className: cn(item.icon.props.className, 'mr-1 -mt-px'),\n                        })}\n                        {item.text}\n                    </>\n                ) : (\n                    item.text\n                );\n            }\n        }\n    }\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (onChange) {\n            const item = findByValue(flattenedData, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const indexes = item?.path?.split('.') ?? [];\n\n            if (indexes.length > 1) {\n                // we don't want to map the current item\n                indexes.pop();\n                // we need to rebuild the path as we map\n                let lastPath: string;\n\n                (event as any).detail.parents = indexes.map(i => {\n                    lastPath = lastPath ? [lastPath, i].join('.') : i;\n                    return sanitizeItem(flattenedData.find(i => i.path === lastPath));\n                });\n            }\n\n            onChange(event);\n        }\n    };\n\n    const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            event.preventDefault();\n        }\n    };\n\n    // select the value text if the select is readonly\n    const handleButtonFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            const value = event.currentTarget.querySelector(':first-child');\n\n            if (value) {\n                window.getSelection()?.selectAllChildren?.(value);\n            }\n        }\n    };\n\n    const button: InternalButtonProps = {\n        'aria-haspopup': 'listbox' as const,\n        'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n        'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\n        'aria-readonly': readOnly ? 'true' : undefined,\n        disabled: disabled,\n        id: buttonId,\n        onClick: handleButtonClick,\n        onFocus: handleButtonFocus,\n        onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n        tabIndex,\n        type: 'button',\n    };\n\n    const listbox: InternalListboxProps = {\n        ...otherProps,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        emptyValue,\n        onBlur,\n        onClick: handleListboxClick,\n        onChange: event => {\n            setInputValueByRef(inputRef.current, event.target.value);\n        },\n        onKeyDown: handleListboxKeyDown,\n        ref: listboxInputRef,\n        value,\n    };\n\n    const input: InternalInputProps = {\n        onChange: handleInputChange,\n        ref: inputRef,\n        value: String(value ?? ''),\n    };\n\n    return {\n        button,\n        listbox,\n        input,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n        },\n        text,\n        more,\n    };\n};\n"],"names":["_a","i","value"],"mappings":"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"}
+{"version":3,"file":"useSelect.js","sources":["../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { nanoid } from 'nanoid';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { useLocalization } from '../Provider/Localization';\nimport { SelectProps } from './Select';\nimport { ListboxProps } from '../Listbox/Listbox';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\nimport { ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { createCustomEvent } from '../../utils/input';\n\ntype InternalButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;\ntype InternalListboxProps = ListboxProps & { ref: React.ForwardedRef<HTMLInputElement> };\ntype InternalInputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.ForwardedRef<HTMLInputElement> };\n\ntype useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {\n    button: InternalButtonProps;\n    listbox: InternalListboxProps;\n    input: InternalInputProps;\n    popover: Pick<PopoverPrimitive.PopoverProps, 'onOpenChange' | 'open'>;\n    text: string | JSX.Element;\n    more?: number;\n};\n\nexport const useSelect = (\n    {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data = [],\n        defaultValue,\n        disabled,\n        emptyValue,\n        id: nativeId,\n        multiselect,\n        onBlur,\n        onClick: _1,\n        onChange,\n        readOnly,\n        tabIndex,\n        value,\n        ...otherProps\n    }: SelectProps,\n    ref: React.Ref<HTMLInputElement>\n): useSelect => {\n    const { texts } = useLocalization();\n    const flattenedData = useFlattenedData(data);\n    const listboxInputRef = useMergedRef<HTMLInputElement>(ref);\n    const [open, setOpen] = React.useState(false);\n    const id = React.useMemo(() => nativeId || `select_${nanoid()}`, [nativeId]);\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const buttonId = `${id}-button`;\n    // support 'escape' resetting to the value that was set when the listbox opened\n    const [lastValue, setLastValue] = React.useState<ScrollableListItemValue | undefined>(value);\n\n    React.useEffect(() => {\n        setLastValue(value);\n    }, [open]);\n\n    React.useEffect(() => {\n        if (value === undefined) {\n            if (defaultValue !== undefined && findByValue(flattenedData, defaultValue)) {\n                setInputValueByRef(inputRef.current, defaultValue);\n            } else if (emptyValue !== undefined) {\n                setInputValueByRef(inputRef.current, emptyValue);\n            } else if (data.length > 0) {\n                setInputValueByRef(inputRef.current, data[0]?.value);\n            }\n        } else if (!multiselect && !findByValue(flattenedData, value)) {\n            if (emptyValue !== undefined) {\n                setInputValueByRef(inputRef.current, emptyValue);\n            } else if (data.length > 0) {\n                setInputValueByRef(inputRef.current, data[0]?.value);\n            }\n        }\n    }, []);\n\n    // event handlers\n    const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n            event.preventDefault();\n            setOpen(true);\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n        switch (event.key) {\n            case 'Escape': {\n                event.preventDefault();\n                if (lastValue !== undefined) {\n                    setInputValueByRef(listboxInputRef.current, lastValue);\n                }\n\n                setOpen(false);\n                break;\n            }\n\n            case 'Tab':\n            case 'Enter': {\n                if (event.key !== 'Tab') {\n                    event.preventDefault();\n                }\n                setOpen(false);\n                break;\n            }\n\n            default:\n        }\n\n        if (otherProps.onKeyDown) {\n            otherProps.onKeyDown(event);\n        }\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n        event.preventDefault();\n        if (!multiselect) {\n            setOpen(false);\n            if (onBlur) {\n                onBlur(createCustomEvent('blur') as unknown as React.FocusEvent<HTMLElement, Element>);\n            }\n        }\n    };\n\n    let text: string | JSX.Element = '';\n    let more = 0;\n\n    if (value !== undefined) {\n        if (multiselect) {\n            const selectedValues = value?.toString().split(',') || [];\n\n            if (selectedValues.length === flattenedData.filter(item => !item.disabled).length) {\n                text = texts.select.allOptionsSelected;\n            } else {\n                text = findByValue(flattenedData, selectedValues[0])?.text ?? '';\n                more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n            }\n        } else {\n            const item = findByValue(flattenedData, value);\n\n            if (item) {\n                text = item.icon ? (\n                    <>\n                        {React.cloneElement(item.icon, {\n                            className: cn(item.icon.props.className, 'mr-1 -mt-px'),\n                        })}\n                        {item.text}\n                    </>\n                ) : (\n                    item.text\n                );\n            }\n        }\n    }\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (onChange) {\n            const item = findByValue(flattenedData, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const indexes = item?.path?.split('.') ?? [];\n\n            if (indexes.length > 1) {\n                // we don't want to map the current item\n                indexes.pop();\n                // we need to rebuild the path as we map\n                let lastPath: string;\n\n                (event as any).detail.parents = indexes.map(i => {\n                    lastPath = lastPath ? [lastPath, i].join('.') : i;\n                    return sanitizeItem(flattenedData.find(i => i.path === lastPath));\n                });\n            }\n\n            onChange(event);\n        }\n    };\n\n    const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            event.preventDefault();\n        }\n    };\n\n    // select the value text if the select is readonly\n    const handleButtonFocus = (event: React.FocusEvent<HTMLButtonElement>) => {\n        if (readOnly) {\n            const value = event.currentTarget.querySelector(':first-child');\n\n            if (value) {\n                window.getSelection()?.selectAllChildren?.(value);\n            }\n        }\n    };\n\n    const button: InternalButtonProps = {\n        'aria-haspopup': 'listbox' as const,\n        'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n        'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\n        'aria-readonly': readOnly ? 'true' : undefined,\n        disabled: disabled,\n        id: buttonId,\n        onClick: handleButtonClick,\n        onFocus: handleButtonFocus,\n        onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n        tabIndex,\n        type: 'button',\n    };\n\n    const listbox: InternalListboxProps = {\n        ...otherProps,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        emptyValue,\n        onBlur,\n        onClick: handleListboxClick,\n        onChange: event => {\n            setInputValueByRef(inputRef.current, event.target.value);\n        },\n        onKeyDown: handleListboxKeyDown,\n        ref: listboxInputRef,\n        value,\n    };\n\n    const input: InternalInputProps = {\n        onChange: handleInputChange,\n        ref: inputRef,\n        value: String(value ?? ''),\n    };\n\n    return {\n        button,\n        listbox,\n        input,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n        },\n        text,\n        more,\n    };\n};\n"],"names":["_a","i","value"],"mappings":"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"}

package/dist/taco.css

@@ -1529,6 +1529,11 @@ table[data-taco='table3'] td [data-taco='combobox'] {
 table[data-taco='table3'] td[data-taco='save-status'] [data-taco='spinner'] svg {
     @apply h-full w-full;
 }
+
+/* Specifically remove :hover background color on the table header for nested tables */
+table[data-taco='table3'] > tbody > tr table[data-taco='table3'] thead th:hover {
+    @apply bg-transparent;
+}
 [data-taco='card-content'] > [data-taco='chart-wrapper']:not(:has([data-taco='chart-donut'], [data-taco='chart-pie'])) {
     @apply w-full;
 }

package/dist/utils/tailwind.cjs

@@ -47,7 +47,7 @@ const getOutlineColorShadeClasses = (state) => {
     case "orange":
       return "border-orange-500 text-orange-500";
     default:
-      return "border-gray-100 text-gray-500";
+      return "border-gray-500 text-gray-500";
   }
 };
 const getSubtleColorShadeClasses = (value) => {

package/dist/utils/tailwind.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind.cjs","sources":["../../src/utils/tailwind.ts"],"sourcesContent":["import { Color, State } from '../types';\n\nexport const AVAILABLE_COLORS = [\n    'green',\n    'yellow',\n    'red',\n    'blue',\n    'purple',\n    'brown',\n    'pink',\n    'orange',\n    'grey',\n    'transparent',\n] as const;\n\nexport const getColorByState = (state: State | undefined): Color => {\n    switch (state) {\n        case 'information':\n            return 'blue';\n        case 'warning':\n            return 'yellow';\n        case 'error':\n            return 'red';\n        case 'experiment':\n            return 'purple';\n        case 'success':\n            return 'green';\n        default:\n            return 'grey';\n    }\n};\n\nexport const getOutlineColorShadeClasses = (state: Color | undefined): string => {\n    switch (state) {\n        case 'green':\n            return 'border-green-500 text-green-500';\n        case 'yellow':\n            return 'border-yellow-500 text-yellow-500';\n        case 'red':\n            return 'border-red-500 text-red-500';\n        case 'blue':\n            return 'border-blue-500 text-blue-500';\n        case 'purple':\n            return 'border-purple-500 text-purple-500';\n        case 'brown':\n            return 'border-brown-500 text-brown-500';\n        case 'pink':\n            return 'border-pink-500 text-pink-500';\n        case 'orange':\n            return 'border-orange-500 text-orange-500';\n\n        default:\n            return 'border-gray-100 text-gray-500';\n    }\n};\n\nexport const getSubtleColorShadeClasses = (value: Color | undefined): string => {\n    switch (value) {\n        case 'green':\n            return 'bg-green-100 text-green-700';\n        case 'yellow':\n            return 'bg-yellow-100 text-yellow-700';\n        case 'red':\n            return 'bg-red-100 text-red-700';\n        case 'blue':\n            return 'bg-blue-100 text-blue-700';\n        case 'purple':\n            return 'bg-purple-100 text-purple-700';\n        case 'brown':\n            return 'bg-brown-100 text-brown-700';\n        case 'pink':\n            return 'bg-pink-100 text-pink-700';\n        case 'orange':\n            return 'bg-orange-100 text-orange-700';\n        case 'transparent':\n            return 'wcag-transparent';\n\n        default:\n            return 'bg-gray-100 text-black';\n    }\n};\n\nexport const getColorShadeClasses = (value: Color | undefined): string => {\n    switch (value) {\n        case 'green':\n            return 'bg-green-500 text-white';\n        case 'yellow':\n            return 'bg-yellow-200 text-black';\n        case 'red':\n            return 'bg-red-500 text-white';\n        case 'blue':\n            return 'bg-blue-500 text-white';\n        case 'purple':\n            return 'bg-purple-500 text-white';\n        case 'brown':\n            return 'bg-brown-700 text-white';\n        case 'pink':\n            return 'bg-pink-500 text-white';\n        case 'orange':\n            return 'bg-orange-700 text-orange-900';\n        case 'transparent':\n            return 'bg-black-subtle text-black';\n\n        default:\n            return 'bg-gray-500 text-white';\n    }\n};\n"],"names":[],"mappings":";;AAEO,MAAM,mBAAmB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ;AAEa,MAAA,kBAAkB,CAAC,UAAoC;AAChE,UAAQ,OAAO;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX;AACW,aAAA;AAAA,EAAA;AAEnB;AAEa,MAAA,8BAA8B,CAAC,UAAqC;AAC7E,UAAQ,OAAO;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IAEX;AACW,aAAA;AAAA,EAAA;AAEnB;AAEa,MAAA,6BAA6B,CAAC,UAAqC;AAC5E,UAAQ,OAAO;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IAEX;AACW,aAAA;AAAA,EAAA;AAEnB;AAEa,MAAA,uBAAuB,CAAC,UAAqC;AACtE,UAAQ,OAAO;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IAEX;AACW,aAAA;AAAA,EAAA;AAEnB;;;;;;"}
+{"version":3,"file":"tailwind.cjs","sources":["../../src/utils/tailwind.ts"],"sourcesContent":["import { Color, State } from '../types';\n\nexport const AVAILABLE_COLORS = [\n    'green',\n    'yellow',\n    'red',\n    'blue',\n    'purple',\n    'brown',\n    'pink',\n    'orange',\n    'grey',\n    'transparent',\n] as const;\n\nexport const getColorByState = (state: State | undefined): Color => {\n    switch (state) {\n        case 'information':\n            return 'blue';\n        case 'warning':\n            return 'yellow';\n        case 'error':\n            return 'red';\n        case 'experiment':\n            return 'purple';\n        case 'success':\n            return 'green';\n        default:\n            return 'grey';\n    }\n};\n\nexport const getOutlineColorShadeClasses = (state: Color | undefined): string => {\n    switch (state) {\n        case 'green':\n            return 'border-green-500 text-green-500';\n        case 'yellow':\n            return 'border-yellow-500 text-yellow-500';\n        case 'red':\n            return 'border-red-500 text-red-500';\n        case 'blue':\n            return 'border-blue-500 text-blue-500';\n        case 'purple':\n            return 'border-purple-500 text-purple-500';\n        case 'brown':\n            return 'border-brown-500 text-brown-500';\n        case 'pink':\n            return 'border-pink-500 text-pink-500';\n        case 'orange':\n            return 'border-orange-500 text-orange-500';\n\n        default:\n            return 'border-gray-500 text-gray-500';\n    }\n};\n\nexport const getSubtleColorShadeClasses = (value: Color | undefined): string => {\n    switch (value) {\n        case 'green':\n            return 'bg-green-100 text-green-700';\n        case 'yellow':\n            return 'bg-yellow-100 text-yellow-700';\n        case 'red':\n            return 'bg-red-100 text-red-700';\n        case 'blue':\n            return 'bg-blue-100 text-blue-700';\n        case 'purple':\n            return 'bg-purple-100 text-purple-700';\n        case 'brown':\n            return 'bg-brown-100 text-brown-700';\n        case 'pink':\n            return 'bg-pink-100 text-pink-700';\n        case 'orange':\n            return 'bg-orange-100 text-orange-700';\n        case 'transparent':\n            return 'wcag-transparent';\n\n        default:\n            return 'bg-gray-100 text-black';\n    }\n};\n\nexport const getColorShadeClasses = (value: Color | undefined): string => {\n    switch (value) {\n        case 'green':\n            return 'bg-green-500 text-white';\n        case 'yellow':\n            return 'bg-yellow-200 text-black';\n        case 'red':\n            return 'bg-red-500 text-white';\n        case 'blue':\n            return 'bg-blue-500 text-white';\n        case 'purple':\n            return 'bg-purple-500 text-white';\n        case 'brown':\n            return 'bg-brown-700 text-white';\n        case 'pink':\n            return 'bg-pink-500 text-white';\n        case 'orange':\n            return 'bg-orange-700 text-orange-900';\n        case 'transparent':\n            return 'bg-black-subtle text-black';\n\n        default:\n            return 'bg-gray-500 text-white';\n    }\n};\n"],"names":[],"mappings":";;AAEO,MAAM,mBAAmB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ;AAEa,MAAA,kBAAkB,CAAC,UAAoC;AAChE,UAAQ,OAAO;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX;AACW,aAAA;AAAA,EAAA;AAEnB;AAEa,MAAA,8BAA8B,CAAC,UAAqC;AAC7E,UAAQ,OAAO;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IAEX;AACW,aAAA;AAAA,EAAA;AAEnB;AAEa,MAAA,6BAA6B,CAAC,UAAqC;AAC5E,UAAQ,OAAO;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IAEX;AACW,aAAA;AAAA,EAAA;AAEnB;AAEa,MAAA,uBAAuB,CAAC,UAAqC;AACtE,UAAQ,OAAO;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IAEX;AACW,aAAA;AAAA,EAAA;AAEnB;;;;;;"}

package/dist/utils/tailwind.js

@@ -45,7 +45,7 @@ const getOutlineColorShadeClasses = (state) => {
     case "orange":
       return "border-orange-500 text-orange-500";
     default:
-      return "border-gray-100 text-gray-500";
+      return "border-gray-500 text-gray-500";
   }
 };
 const getSubtleColorShadeClasses = (value) => {

package/dist/utils/tailwind.js.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind.js","sources":["../../src/utils/tailwind.ts"],"sourcesContent":["import { Color, State } from '../types';\n\nexport const AVAILABLE_COLORS = [\n    'green',\n    'yellow',\n    'red',\n    'blue',\n    'purple',\n    'brown',\n    'pink',\n    'orange',\n    'grey',\n    'transparent',\n] as const;\n\nexport const getColorByState = (state: State | undefined): Color => {\n    switch (state) {\n        case 'information':\n            return 'blue';\n        case 'warning':\n            return 'yellow';\n        case 'error':\n            return 'red';\n        case 'experiment':\n            return 'purple';\n        case 'success':\n            return 'green';\n        default:\n            return 'grey';\n    }\n};\n\nexport const getOutlineColorShadeClasses = (state: Color | undefined): string => {\n    switch (state) {\n        case 'green':\n            return 'border-green-500 text-green-500';\n        case 'yellow':\n            return 'border-yellow-500 text-yellow-500';\n        case 'red':\n            return 'border-red-500 text-red-500';\n        case 'blue':\n            return 'border-blue-500 text-blue-500';\n        case 'purple':\n            return 'border-purple-500 text-purple-500';\n        case 'brown':\n            return 'border-brown-500 text-brown-500';\n        case 'pink':\n            return 'border-pink-500 text-pink-500';\n        case 'orange':\n            return 'border-orange-500 text-orange-500';\n\n        default:\n            return 'border-gray-100 text-gray-500';\n    }\n};\n\nexport const getSubtleColorShadeClasses = (value: Color | undefined): string => {\n    switch (value) {\n        case 'green':\n            return 'bg-green-100 text-green-700';\n        case 'yellow':\n            return 'bg-yellow-100 text-yellow-700';\n        case 'red':\n            return 'bg-red-100 text-red-700';\n        case 'blue':\n            return 'bg-blue-100 text-blue-700';\n        case 'purple':\n            return 'bg-purple-100 text-purple-700';\n        case 'brown':\n            return 'bg-brown-100 text-brown-700';\n        case 'pink':\n            return 'bg-pink-100 text-pink-700';\n        case 'orange':\n            return 'bg-orange-100 text-orange-700';\n        case 'transparent':\n            return 'wcag-transparent';\n\n        default:\n            return 'bg-gray-100 text-black';\n    }\n};\n\nexport const getColorShadeClasses = (value: Color | undefined): string => {\n    switch (value) {\n        case 'green':\n            return 'bg-green-500 text-white';\n        case 'yellow':\n            return 'bg-yellow-200 text-black';\n        case 'red':\n            return 'bg-red-500 text-white';\n        case 'blue':\n            return 'bg-blue-500 text-white';\n        case 'purple':\n            return 'bg-purple-500 text-white';\n        case 'brown':\n            return 'bg-brown-700 text-white';\n        case 'pink':\n            return 'bg-pink-500 text-white';\n        case 'orange':\n            return 'bg-orange-700 text-orange-900';\n        case 'transparent':\n            return 'bg-black-subtle text-black';\n\n        default:\n            return 'bg-gray-500 text-white';\n    }\n};\n"],"names":[],"mappings":"AAEO,MAAM,mBAAmB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ;AAEa,MAAA,kBAAkB,CAAC,UAAoC;AAChE,UAAQ,OAAO;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX;AACW,aAAA;AAAA,EAAA;AAEnB;AAEa,MAAA,8BAA8B,CAAC,UAAqC;AAC7E,UAAQ,OAAO;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IAEX;AACW,aAAA;AAAA,EAAA;AAEnB;AAEa,MAAA,6BAA6B,CAAC,UAAqC;AAC5E,UAAQ,OAAO;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IAEX;AACW,aAAA;AAAA,EAAA;AAEnB;AAEa,MAAA,uBAAuB,CAAC,UAAqC;AACtE,UAAQ,OAAO;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IAEX;AACW,aAAA;AAAA,EAAA;AAEnB;"}
+{"version":3,"file":"tailwind.js","sources":["../../src/utils/tailwind.ts"],"sourcesContent":["import { Color, State } from '../types';\n\nexport const AVAILABLE_COLORS = [\n    'green',\n    'yellow',\n    'red',\n    'blue',\n    'purple',\n    'brown',\n    'pink',\n    'orange',\n    'grey',\n    'transparent',\n] as const;\n\nexport const getColorByState = (state: State | undefined): Color => {\n    switch (state) {\n        case 'information':\n            return 'blue';\n        case 'warning':\n            return 'yellow';\n        case 'error':\n            return 'red';\n        case 'experiment':\n            return 'purple';\n        case 'success':\n            return 'green';\n        default:\n            return 'grey';\n    }\n};\n\nexport const getOutlineColorShadeClasses = (state: Color | undefined): string => {\n    switch (state) {\n        case 'green':\n            return 'border-green-500 text-green-500';\n        case 'yellow':\n            return 'border-yellow-500 text-yellow-500';\n        case 'red':\n            return 'border-red-500 text-red-500';\n        case 'blue':\n            return 'border-blue-500 text-blue-500';\n        case 'purple':\n            return 'border-purple-500 text-purple-500';\n        case 'brown':\n            return 'border-brown-500 text-brown-500';\n        case 'pink':\n            return 'border-pink-500 text-pink-500';\n        case 'orange':\n            return 'border-orange-500 text-orange-500';\n\n        default:\n            return 'border-gray-500 text-gray-500';\n    }\n};\n\nexport const getSubtleColorShadeClasses = (value: Color | undefined): string => {\n    switch (value) {\n        case 'green':\n            return 'bg-green-100 text-green-700';\n        case 'yellow':\n            return 'bg-yellow-100 text-yellow-700';\n        case 'red':\n            return 'bg-red-100 text-red-700';\n        case 'blue':\n            return 'bg-blue-100 text-blue-700';\n        case 'purple':\n            return 'bg-purple-100 text-purple-700';\n        case 'brown':\n            return 'bg-brown-100 text-brown-700';\n        case 'pink':\n            return 'bg-pink-100 text-pink-700';\n        case 'orange':\n            return 'bg-orange-100 text-orange-700';\n        case 'transparent':\n            return 'wcag-transparent';\n\n        default:\n            return 'bg-gray-100 text-black';\n    }\n};\n\nexport const getColorShadeClasses = (value: Color | undefined): string => {\n    switch (value) {\n        case 'green':\n            return 'bg-green-500 text-white';\n        case 'yellow':\n            return 'bg-yellow-200 text-black';\n        case 'red':\n            return 'bg-red-500 text-white';\n        case 'blue':\n            return 'bg-blue-500 text-white';\n        case 'purple':\n            return 'bg-purple-500 text-white';\n        case 'brown':\n            return 'bg-brown-700 text-white';\n        case 'pink':\n            return 'bg-pink-500 text-white';\n        case 'orange':\n            return 'bg-orange-700 text-orange-900';\n        case 'transparent':\n            return 'bg-black-subtle text-black';\n\n        default:\n            return 'bg-gray-500 text-white';\n    }\n};\n"],"names":[],"mappings":"AAEO,MAAM,mBAAmB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ;AAEa,MAAA,kBAAkB,CAAC,UAAoC;AAChE,UAAQ,OAAO;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX;AACW,aAAA;AAAA,EAAA;AAEnB;AAEa,MAAA,8BAA8B,CAAC,UAAqC;AAC7E,UAAQ,OAAO;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IAEX;AACW,aAAA;AAAA,EAAA;AAEnB;AAEa,MAAA,6BAA6B,CAAC,UAAqC;AAC5E,UAAQ,OAAO;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IAEX;AACW,aAAA;AAAA,EAAA;AAEnB;AAEa,MAAA,uBAAuB,CAAC,UAAqC;AACtE,UAAQ,OAAO;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IAEX;AACW,aAAA;AAAA,EAAA;AAEnB;"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@economic/taco",
-    "version": "8.1.4-hanger-base-ui-migration.2",
+    "version": "8.1.4-test-docs.0",
     "license": "MIT",
     "type": "module",
     "main": "./dist/index.cjs",
@@ -46,7 +46,8 @@
         "@dnd-kit/modifiers": "^7.0.0",
         "@dnd-kit/sortable": "^7.0.2",
         "@dnd-kit/utilities": "^3.2.2",
-        "@economic/taco-tokens": "^2.2.6-hanger-base-ui-migration.0",
+        "@economic/taco-tokens": "^2.2.6-test-docs.0",
+        "@radix-ui/react-popover": "1.0.2",
         "@radix-ui/react-scroll-area": "1.2.10",
         "@react-aria/focus": "^3.19.0",
         "@react-aria/interactions": "^3.12.0",
@@ -101,5 +102,5 @@
     "optionalDependencies": {
         "@rollup/rollup-linux-x64-gnu": "^4.62.2"
     },
-    "gitHead": "2687a6b2e1ecd0869c99bdd1a7b2d9bbca880e3a"
+    "gitHead": "5e492905efd44588042c2ea32b70909cf8c007c0"
 }