@economic/taco 14.0.0 → 14.1.0-EC-85807-code-report-fixes.0

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

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

package/dist/components/Header/Header.cjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"Header.cjs","sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { AgreementSelector, AgreementDisplay } from './components/AgreementSelector';\nimport { Button } from './components/Button';\nimport { Link } from './components/Link';\nimport { Logo, LogoLegacy } from './components/Logo';\nimport { MenuButton } from './components/MenuButton';\nimport { PrimaryNavigation } from './components/PrimaryNavigation';\nimport { SecondaryNavigation } from './components/SecondaryNavigation';\n\nexport * from './components/Agreement/types';\n\nexport type HeaderTexts = {\n    addAgreement: string;\n    logout: string;\n    more: string;\n    new: string;\n    search: string;\n};\n\ntype HeaderProps = React.HTMLAttributes<HTMLElement>;\n\nexport type ForwardedHeaderWithStatics = React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLDivElement>> & {\n    AgreementDisplay: typeof AgreementDisplay;\n    AgreementSelector: typeof AgreementSelector;\n    Button: typeof Button;\n    Link: typeof Link;\n    Logo: typeof Logo;\n    LogoLegacy: typeof LogoLegacy;\n    PrimaryNavigation: typeof PrimaryNavigation;\n    SecondaryNavigation: typeof SecondaryNavigation;\n    MenuButton: typeof MenuButton;\n};\n\nexport const Header = React.forwardRef<HTMLDivElement, HeaderProps>(function Header(props, ref) {\n    const className = cn(\n        'flex h-16 w-full shrink-0 items-center gap-2 bg-brand-midnight pl-4',\n        '[&>*:focus-visible]:yt-focus-dark [&>*]:rounded', // styles for logo wrapped inside an anchor\n        props.className\n    );\n\n    return <header {...props} className={className} ref={ref} />;\n}) as ForwardedHeaderWithStatics;\n\nHeader.AgreementDisplay = AgreementDisplay;\nHeader.AgreementSelector = AgreementSelector;\nHeader.Button = Button;\nHeader.Link = Link;\nHeader.Logo = Logo;\nHeader.LogoLegacy = LogoLegacy;\nHeader.PrimaryNavigation = PrimaryNavigation;\nHeader.SecondaryNavigation = SecondaryNavigation;\nHeader.MenuButton = MenuButton;\n"],"names":["Header","AgreementDisplay","AgreementSelector","Button","Link","Logo","LogoLegacy","PrimaryNavigation","SecondaryNavigation","MenuButton"],"mappings":";;;;;;;;;;;AAmCO,MAAM,SAAS,MAAM,WAAwC,SAASA,QAAO,OAAO,KAAK;AAC5F,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA;AAAA,IACA,MAAM;AAAA,EAAA;AAGV,SAAO,sBAAA,cAAC,UAAA,EAAQ,GAAG,OAAO,WAAsB,KAAU;AAC9D,CAAC;AAED,OAAO,mBAAmBC,kBAAAA;AAC1B,OAAO,oBAAoBC,kBAAAA;AAC3B,OAAO,SAASC,OAAAA;AAChB,OAAO,OAAOC,KAAAA;AACd,OAAO,OAAOC,KAAAA;AACd,OAAO,aAAaC,KAAAA;AACpB,OAAO,oBAAoBC,kBAAAA;AAC3B,OAAO,sBAAsBC,oBAAAA;AAC7B,OAAO,aAAaC,WAAAA;;"}
+{"version":3,"file":"Header.cjs","sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { AgreementSelector, AgreementDisplay } from './components/AgreementSelector';\nimport { Button } from './components/Button';\nimport { Link } from './components/Link';\nimport { Logo, LogoLegacy } from './components/Logo';\nimport { MenuButton } from './components/MenuButton';\nimport { PrimaryNavigation } from './components/PrimaryNavigation';\nimport { SecondaryNavigation } from './components/SecondaryNavigation';\n\nexport * from './components/Agreement/types';\n\nexport type HeaderTexts = {\n    addAgreement: string;\n    logout: string;\n    more: string;\n    new: string;\n    search: string;\n};\n\ntype HeaderProps = React.HTMLAttributes<HTMLElement>;\n\nexport type ForwardedHeaderWithStatics = React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLDivElement>> & {\n    AgreementDisplay: typeof AgreementDisplay;\n    AgreementSelector: typeof AgreementSelector;\n    Button: typeof Button;\n    Link: typeof Link;\n    Logo: typeof Logo;\n    LogoLegacy: typeof LogoLegacy;\n    PrimaryNavigation: typeof PrimaryNavigation;\n    SecondaryNavigation: typeof SecondaryNavigation;\n    MenuButton: typeof MenuButton;\n};\n\nexport const Header = React.forwardRef<HTMLDivElement, HeaderProps>(function Header(props, ref) {\n    const className = cn(\n        'flex h-16 w-full shrink-0 items-center gap-2 bg-brand-midnight pl-4',\n        // styles for logo wrapped inside an anchor\n        '[&>*:focus-visible]:yt-focus-dark [&>*]:rounded',\n        props.className\n    );\n\n    return <header {...props} className={className} ref={ref} />;\n}) as ForwardedHeaderWithStatics;\n\nHeader.AgreementDisplay = AgreementDisplay;\nHeader.AgreementSelector = AgreementSelector;\nHeader.Button = Button;\nHeader.Link = Link;\nHeader.Logo = Logo;\nHeader.LogoLegacy = LogoLegacy;\nHeader.PrimaryNavigation = PrimaryNavigation;\nHeader.SecondaryNavigation = SecondaryNavigation;\nHeader.MenuButton = MenuButton;\n"],"names":["Header","AgreementDisplay","AgreementSelector","Button","Link","Logo","LogoLegacy","PrimaryNavigation","SecondaryNavigation","MenuButton"],"mappings":";;;;;;;;;;;AAmCO,MAAM,SAAS,MAAM,WAAwC,SAASA,QAAO,OAAO,KAAK;AAC5F,QAAM,YAAY;AAAA,IACd;AAAA;AAAA,IAEA;AAAA,IACA,MAAM;AAAA,EAAA;AAGV,SAAO,sBAAA,cAAC,UAAA,EAAQ,GAAG,OAAO,WAAsB,KAAU;AAC9D,CAAC;AAED,OAAO,mBAAmBC,kBAAAA;AAC1B,OAAO,oBAAoBC,kBAAAA;AAC3B,OAAO,SAASC,OAAAA;AAChB,OAAO,OAAOC,KAAAA;AACd,OAAO,OAAOC,KAAAA;AACd,OAAO,aAAaC,KAAAA;AACpB,OAAO,oBAAoBC,kBAAAA;AAC3B,OAAO,sBAAsBC,oBAAAA;AAC7B,OAAO,aAAaC,WAAAA;;"}

package/dist/components/Header/Header.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { AgreementSelector, AgreementDisplay } from './components/AgreementSelector';\nimport { Button } from './components/Button';\nimport { Link } from './components/Link';\nimport { Logo, LogoLegacy } from './components/Logo';\nimport { MenuButton } from './components/MenuButton';\nimport { PrimaryNavigation } from './components/PrimaryNavigation';\nimport { SecondaryNavigation } from './components/SecondaryNavigation';\n\nexport * from './components/Agreement/types';\n\nexport type HeaderTexts = {\n    addAgreement: string;\n    logout: string;\n    more: string;\n    new: string;\n    search: string;\n};\n\ntype HeaderProps = React.HTMLAttributes<HTMLElement>;\n\nexport type ForwardedHeaderWithStatics = React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLDivElement>> & {\n    AgreementDisplay: typeof AgreementDisplay;\n    AgreementSelector: typeof AgreementSelector;\n    Button: typeof Button;\n    Link: typeof Link;\n    Logo: typeof Logo;\n    LogoLegacy: typeof LogoLegacy;\n    PrimaryNavigation: typeof PrimaryNavigation;\n    SecondaryNavigation: typeof SecondaryNavigation;\n    MenuButton: typeof MenuButton;\n};\n\nexport const Header = React.forwardRef<HTMLDivElement, HeaderProps>(function Header(props, ref) {\n    const className = cn(\n        'flex h-16 w-full shrink-0 items-center gap-2 bg-brand-midnight pl-4',\n        '[&>*:focus-visible]:yt-focus-dark [&>*]:rounded', // styles for logo wrapped inside an anchor\n        props.className\n    );\n\n    return <header {...props} className={className} ref={ref} />;\n}) as ForwardedHeaderWithStatics;\n\nHeader.AgreementDisplay = AgreementDisplay;\nHeader.AgreementSelector = AgreementSelector;\nHeader.Button = Button;\nHeader.Link = Link;\nHeader.Logo = Logo;\nHeader.LogoLegacy = LogoLegacy;\nHeader.PrimaryNavigation = PrimaryNavigation;\nHeader.SecondaryNavigation = SecondaryNavigation;\nHeader.MenuButton = MenuButton;\n"],"names":["React","Header"],"mappings":";;;;;;;;;AAmCO,MAAM,SAASA,eAAM,WAAwC,SAASC,QAAO,OAAO,KAAK;AAC5F,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA;AAAA,IACA,MAAM;AAAA,EAAA;AAGV,SAAOD,+BAAA,cAAC,UAAA,EAAQ,GAAG,OAAO,WAAsB,KAAU;AAC9D,CAAC;AAED,OAAO,mBAAmB;AAC1B,OAAO,oBAAoB;AAC3B,OAAO,SAAS;AAChB,OAAO,OAAO;AACd,OAAO,OAAO;AACd,OAAO,aAAa;AACpB,OAAO,oBAAoB;AAC3B,OAAO,sBAAsB;AAC7B,OAAO,aAAa;"}
+{"version":3,"file":"Header.js","sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport { AgreementSelector, AgreementDisplay } from './components/AgreementSelector';\nimport { Button } from './components/Button';\nimport { Link } from './components/Link';\nimport { Logo, LogoLegacy } from './components/Logo';\nimport { MenuButton } from './components/MenuButton';\nimport { PrimaryNavigation } from './components/PrimaryNavigation';\nimport { SecondaryNavigation } from './components/SecondaryNavigation';\n\nexport * from './components/Agreement/types';\n\nexport type HeaderTexts = {\n    addAgreement: string;\n    logout: string;\n    more: string;\n    new: string;\n    search: string;\n};\n\ntype HeaderProps = React.HTMLAttributes<HTMLElement>;\n\nexport type ForwardedHeaderWithStatics = React.ForwardRefExoticComponent<HeaderProps & React.RefAttributes<HTMLDivElement>> & {\n    AgreementDisplay: typeof AgreementDisplay;\n    AgreementSelector: typeof AgreementSelector;\n    Button: typeof Button;\n    Link: typeof Link;\n    Logo: typeof Logo;\n    LogoLegacy: typeof LogoLegacy;\n    PrimaryNavigation: typeof PrimaryNavigation;\n    SecondaryNavigation: typeof SecondaryNavigation;\n    MenuButton: typeof MenuButton;\n};\n\nexport const Header = React.forwardRef<HTMLDivElement, HeaderProps>(function Header(props, ref) {\n    const className = cn(\n        'flex h-16 w-full shrink-0 items-center gap-2 bg-brand-midnight pl-4',\n        // styles for logo wrapped inside an anchor\n        '[&>*:focus-visible]:yt-focus-dark [&>*]:rounded',\n        props.className\n    );\n\n    return <header {...props} className={className} ref={ref} />;\n}) as ForwardedHeaderWithStatics;\n\nHeader.AgreementDisplay = AgreementDisplay;\nHeader.AgreementSelector = AgreementSelector;\nHeader.Button = Button;\nHeader.Link = Link;\nHeader.Logo = Logo;\nHeader.LogoLegacy = LogoLegacy;\nHeader.PrimaryNavigation = PrimaryNavigation;\nHeader.SecondaryNavigation = SecondaryNavigation;\nHeader.MenuButton = MenuButton;\n"],"names":["React","Header"],"mappings":";;;;;;;;;AAmCO,MAAM,SAASA,eAAM,WAAwC,SAASC,QAAO,OAAO,KAAK;AAC5F,QAAM,YAAY;AAAA,IACd;AAAA;AAAA,IAEA;AAAA,IACA,MAAM;AAAA,EAAA;AAGV,SAAOD,+BAAA,cAAC,UAAA,EAAQ,GAAG,OAAO,WAAsB,KAAU;AAC9D,CAAC;AAED,OAAO,mBAAmB;AAC1B,OAAO,oBAAoB;AAC3B,OAAO,SAAS;AAChB,OAAO,OAAO;AACd,OAAO,OAAO;AACd,OAAO,aAAa;AACpB,OAAO,oBAAoB;AAC3B,OAAO,sBAAsB;AAC7B,OAAO,aAAa;"}

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

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

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

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

package/dist/components/Icon/Icon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.cjs","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport type { IconName } from './components/index';\nimport { icons } from './components/index';\n\nexport { icons } from './components/index';\nexport type { IconName } from './components/index';\n\nexport type IconProps = React.SVGAttributes<SVGSVGElement> & {\n    /** Set what svg icon should be rendered */\n    name: IconName; // this dynamic type causes the type extraction for props to fail\n};\n\nexport const Icon = React.forwardRef(function Icon(props: IconProps, ref: React.Ref<SVGSVGElement>) {\n    const { name, ...otherProps } = props;\n    const Component = icons[name];\n    // 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem\n    const className = cn('inline-flex h-[1.715em] w-[1.715em] flex-shrink-0', props.className, {\n        'p-[3px]': props.className?.includes('rounded-full'),\n    });\n\n    return Component ? (\n        <Component\n            data-taco=\"icon\"\n            {...otherProps}\n            className={className}\n            data-icon-name={name}\n            focusable=\"false\"\n            ref={ref}\n            role=\"img\"\n        />\n    ) : null;\n});\n"],"names":["Icon","icons"],"mappings":";;;;;AAcO,MAAM,OAAO,MAAM,WAAW,SAASA,MAAK,OAAkB,KAA+B;AAChG,QAAM,EAAE,MAAM,GAAG,WAAA,IAAe;AAChC,QAAM,YAAYC,MAAAA,MAAM,IAAI;AAE5B,QAAM,YAAY,GAAG,qDAAqD,MAAM,WAAW;AAAA,IACvF,WAAW,MAAM,WAAW,SAAS,cAAc;AAAA,EAAA,CACtD;AAED,SAAO,YACH,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,aAAU;AAAA,MACT,GAAG;AAAA,MACJ;AAAA,MACA,kBAAgB;AAAA,MAChB,WAAU;AAAA,MACV;AAAA,MACA,MAAK;AAAA,IAAA;AAAA,EAAA,IAET;AACR,CAAC;;;"}
+{"version":3,"file":"Icon.cjs","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport type { IconName } from './components/index';\nimport { icons } from './components/index';\n\nexport { icons } from './components/index';\nexport type { IconName } from './components/index';\n\nexport type IconProps = React.SVGAttributes<SVGSVGElement> & {\n    /** Set what svg icon should be rendered */\n    // this dynamic type causes the type extraction for props to fail\n    name: IconName;\n};\n\nexport const Icon = React.forwardRef(function Icon(props: IconProps, ref: React.Ref<SVGSVGElement>) {\n    const { name, ...otherProps } = props;\n    const Component = icons[name];\n    // 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem\n    const className = cn('inline-flex h-[1.715em] w-[1.715em] flex-shrink-0', props.className, {\n        'p-[3px]': props.className?.includes('rounded-full'),\n    });\n\n    return Component ? (\n        <Component\n            data-taco=\"icon\"\n            {...otherProps}\n            className={className}\n            data-icon-name={name}\n            focusable=\"false\"\n            ref={ref}\n            role=\"img\"\n        />\n    ) : null;\n});\n"],"names":["Icon","icons"],"mappings":";;;;;AAeO,MAAM,OAAO,MAAM,WAAW,SAASA,MAAK,OAAkB,KAA+B;AAChG,QAAM,EAAE,MAAM,GAAG,WAAA,IAAe;AAChC,QAAM,YAAYC,MAAAA,MAAM,IAAI;AAE5B,QAAM,YAAY,GAAG,qDAAqD,MAAM,WAAW;AAAA,IACvF,WAAW,MAAM,WAAW,SAAS,cAAc;AAAA,EAAA,CACtD;AAED,SAAO,YACH,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,aAAU;AAAA,MACT,GAAG;AAAA,MACJ;AAAA,MACA,kBAAgB;AAAA,MAChB,WAAU;AAAA,MACV;AAAA,MACA,MAAK;AAAA,IAAA;AAAA,EAAA,IAET;AACR,CAAC;;;"}

package/dist/components/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport type { IconName } from './components/index';\nimport { icons } from './components/index';\n\nexport { icons } from './components/index';\nexport type { IconName } from './components/index';\n\nexport type IconProps = React.SVGAttributes<SVGSVGElement> & {\n    /** Set what svg icon should be rendered */\n    name: IconName; // this dynamic type causes the type extraction for props to fail\n};\n\nexport const Icon = React.forwardRef(function Icon(props: IconProps, ref: React.Ref<SVGSVGElement>) {\n    const { name, ...otherProps } = props;\n    const Component = icons[name];\n    // 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem\n    const className = cn('inline-flex h-[1.715em] w-[1.715em] flex-shrink-0', props.className, {\n        'p-[3px]': props.className?.includes('rounded-full'),\n    });\n\n    return Component ? (\n        <Component\n            data-taco=\"icon\"\n            {...otherProps}\n            className={className}\n            data-icon-name={name}\n            focusable=\"false\"\n            ref={ref}\n            role=\"img\"\n        />\n    ) : null;\n});\n"],"names":["React","Icon"],"mappings":";;;AAcO,MAAM,OAAOA,eAAM,WAAW,SAASC,MAAK,OAAkB,KAA+B;AAChG,QAAM,EAAE,MAAM,GAAG,WAAA,IAAe;AAChC,QAAM,YAAY,MAAM,IAAI;AAE5B,QAAM,YAAY,GAAG,qDAAqD,MAAM,WAAW;AAAA,IACvF,WAAW,MAAM,WAAW,SAAS,cAAc;AAAA,EAAA,CACtD;AAED,SAAO,YACHD,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,aAAU;AAAA,MACT,GAAG;AAAA,MACJ;AAAA,MACA,kBAAgB;AAAA,MAChB,WAAU;AAAA,MACV;AAAA,MACA,MAAK;AAAA,IAAA;AAAA,EAAA,IAET;AACR,CAAC;"}
+{"version":3,"file":"Icon.js","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport type { IconName } from './components/index';\nimport { icons } from './components/index';\n\nexport { icons } from './components/index';\nexport type { IconName } from './components/index';\n\nexport type IconProps = React.SVGAttributes<SVGSVGElement> & {\n    /** Set what svg icon should be rendered */\n    // this dynamic type causes the type extraction for props to fail\n    name: IconName;\n};\n\nexport const Icon = React.forwardRef(function Icon(props: IconProps, ref: React.Ref<SVGSVGElement>) {\n    const { name, ...otherProps } = props;\n    const Component = icons[name];\n    // 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem\n    const className = cn('inline-flex h-[1.715em] w-[1.715em] flex-shrink-0', props.className, {\n        'p-[3px]': props.className?.includes('rounded-full'),\n    });\n\n    return Component ? (\n        <Component\n            data-taco=\"icon\"\n            {...otherProps}\n            className={className}\n            data-icon-name={name}\n            focusable=\"false\"\n            ref={ref}\n            role=\"img\"\n        />\n    ) : null;\n});\n"],"names":["React","Icon"],"mappings":";;;AAeO,MAAM,OAAOA,eAAM,WAAW,SAASC,MAAK,OAAkB,KAA+B;AAChG,QAAM,EAAE,MAAM,GAAG,WAAA,IAAe;AAChC,QAAM,YAAY,MAAM,IAAI;AAE5B,QAAM,YAAY,GAAG,qDAAqD,MAAM,WAAW;AAAA,IACvF,WAAW,MAAM,WAAW,SAAS,cAAc;AAAA,EAAA,CACtD;AAED,SAAO,YACHD,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,aAAU;AAAA,MACT,GAAG;AAAA,MACJ;AAAA,MACA,kBAAgB;AAAA,MAChB,WAAU;AAAA,MACV;AAAA,MACA,MAAK;AAAA,IAAA;AAAA,EAAA,IAET;AACR,CAAC;"}

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

@@ -44,9 +44,10 @@ const Sidebar = React.forwardRef(function LayoutSidebar(props, ref) {
     props.className
   );
   React.useEffect(() => {
-    setTimeout(() => {
+    const id = setTimeout(() => {
       setReady(isSmallScreen);
     }, 1);
+    return () => clearTimeout(id);
   }, [isSmallScreen]);
   const toggleSidebar = () => setSidebarOpen((open) => !open);
   const content = typeof children === "function" ? children({ isLargeScreen, open: sidebarOpen, toggleSidebar }) : children;

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

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.cjs","sources":["../../../../src/components/Layout/components/Sidebar.tsx"],"sourcesContent":["import cn from 'clsx';\nimport { AnimatePresence, motion } from 'motion/react';\nimport React from 'react';\n\nimport { useIsLargeScreen } from '@/hooks/useIsLargeScreen';\n\nimport { LayoutContext } from './Context';\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        'h-full w-64 flex-shrink-0 flex-grow-0 bg-gray-50 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            'visible transition-[transform] duration-300': 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=\"fixed inset-0 z-[1] cursor-default overflow-y-auto bg-brand-midnight/[0.3] print:absolute print:overflow-visible\"\n                    />\n                )}\n            </AnimatePresence>\n        </>\n    );\n});\n"],"names":["LayoutContext","useIsLargeScreen","AnimatePresence","motion"],"mappings":";;;;;;;AAsBO,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,iBAAA;AACtB,QAAM,gBAAgB,CAAC;AAGvB,QAAM,YAAY,iBAAiB;AAGnC,QAAM,UAAU,MAAM;AAClB,mBAAe,aAAa;AAAA,EAChC,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,UAAU,MAAM;AAClB,UAAM,kBAAkB,CAAC,UAAyB;AAC9C,UAAI,MAAM,QAAQ,UAAU;AACxB,cAAM,eAAA;AACN,cAAM,gBAAA;AACN,uBAAe,KAAK;AAAA,MACxB;AAAA,IACJ;AAEA,QAAI,iBAAiB,aAAa;AAC9B,aAAO,iBAAiB,WAAW,eAAe;AAAA,IACtD;AAEA,WAAO,MAAM;AACT,aAAO,oBAAoB,WAAW,eAAe;AAAA,IACzD;AAAA,EACJ,GAAG,CAAC,eAAe,WAAW,CAAC;AAE/B,QAAM,eAAe,iBAAiB,gBAAgB;AAEtD,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,aAAa;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,6CAA6C;AAAA;AAAA;AAAA,MAG7C,WAAW,iBAAiB,CAAC;AAAA,MAC7B,+CAA+C,iBAAiB;AAAA,MAChE,8BAA8B,CAAC;AAAA,IAAA;AAAA,IAEnC,MAAM;AAAA,EAAA;AAGV,QAAM,UAAU,MAAM;AAElB,eAAW,MAAM;AACb,eAAS,aAAa;AAAA,IAC1B,GAAG,CAAC;AAAA,EACR,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,gBAAgB,MAAM,eAAe,CAAA,SAAQ,CAAC,IAAI;AACxD,QAAM,UAAU,OAAO,aAAa,aAAa,SAAS,EAAE,eAAe,MAAM,aAAa,cAAA,CAAe,IAAI;AAEjH,MAAI,CAAC,SAAS;AACV,WAAO;AAAA,EACX;AAEA,mEAEQ,sBAAA,cAAC,OAAA,EAAK,GAAG,YAAY,mBAAiB,eAAe,eAAa,CAAC,WAAW,WAAsB,IAAA,GAC/F,OACL,GACA,sBAAA,cAACC,MAAAA,uBACI,gBACG,sBAAA;AAAA,IAACC,MAAAA,OAAO;AAAA,IAAP;AAAA,MACG,eAAW;AAAA,MACX,SAAS,EAAE,SAAS,EAAA;AAAA,MACpB,SAAS,EAAE,SAAS,EAAA;AAAA,MACpB,MAAM,EAAE,SAAS,EAAA;AAAA,MACjB,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 cn from 'clsx';\nimport { AnimatePresence, motion } from 'motion/react';\nimport React from 'react';\n\nimport { useIsLargeScreen } from '@/hooks/useIsLargeScreen';\n\nimport { LayoutContext } from './Context';\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        'h-full w-64 flex-shrink-0 flex-grow-0 bg-gray-50 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            'visible transition-[transform] duration-300': 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        const id = setTimeout(() => {\n            setReady(isSmallScreen);\n        }, 1);\n        return () => clearTimeout(id);\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=\"fixed inset-0 z-[1] cursor-default overflow-y-auto bg-brand-midnight/[0.3] print:absolute print:overflow-visible\"\n                    />\n                )}\n            </AnimatePresence>\n        </>\n    );\n});\n"],"names":["LayoutContext","useIsLargeScreen","AnimatePresence","motion"],"mappings":";;;;;;;AAsBO,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,iBAAA;AACtB,QAAM,gBAAgB,CAAC;AAGvB,QAAM,YAAY,iBAAiB;AAGnC,QAAM,UAAU,MAAM;AAClB,mBAAe,aAAa;AAAA,EAChC,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,UAAU,MAAM;AAClB,UAAM,kBAAkB,CAAC,UAAyB;AAC9C,UAAI,MAAM,QAAQ,UAAU;AACxB,cAAM,eAAA;AACN,cAAM,gBAAA;AACN,uBAAe,KAAK;AAAA,MACxB;AAAA,IACJ;AAEA,QAAI,iBAAiB,aAAa;AAC9B,aAAO,iBAAiB,WAAW,eAAe;AAAA,IACtD;AAEA,WAAO,MAAM;AACT,aAAO,oBAAoB,WAAW,eAAe;AAAA,IACzD;AAAA,EACJ,GAAG,CAAC,eAAe,WAAW,CAAC;AAE/B,QAAM,eAAe,iBAAiB,gBAAgB;AAEtD,QAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAS,aAAa;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,6CAA6C;AAAA;AAAA;AAAA,MAG7C,WAAW,iBAAiB,CAAC;AAAA,MAC7B,+CAA+C,iBAAiB;AAAA,MAChE,8BAA8B,CAAC;AAAA,IAAA;AAAA,IAEnC,MAAM;AAAA,EAAA;AAGV,QAAM,UAAU,MAAM;AAElB,UAAM,KAAK,WAAW,MAAM;AACxB,eAAS,aAAa;AAAA,IAC1B,GAAG,CAAC;AACJ,WAAO,MAAM,aAAa,EAAE;AAAA,EAChC,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,gBAAgB,MAAM,eAAe,CAAA,SAAQ,CAAC,IAAI;AACxD,QAAM,UAAU,OAAO,aAAa,aAAa,SAAS,EAAE,eAAe,MAAM,aAAa,cAAA,CAAe,IAAI;AAEjH,MAAI,CAAC,SAAS;AACV,WAAO;AAAA,EACX;AAEA,mEAEQ,sBAAA,cAAC,OAAA,EAAK,GAAG,YAAY,mBAAiB,eAAe,eAAa,CAAC,WAAW,WAAsB,IAAA,GAC/F,OACL,GACA,sBAAA,cAACC,MAAAA,uBACI,gBACG,sBAAA;AAAA,IAACC,MAAAA,OAAO;AAAA,IAAP;AAAA,MACG,eAAW;AAAA,MACX,SAAS,EAAE,SAAS,EAAA;AAAA,MACpB,SAAS,EAAE,SAAS,EAAA;AAAA,MACpB,MAAM,EAAE,SAAS,EAAA;AAAA,MACjB,SAAS,MAAM,eAAe,KAAK;AAAA,MACnC,WAAU;AAAA,IAAA;AAAA,EAAA,CAGtB,CACJ;AAER,CAAC;;"}

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

@@ -42,9 +42,10 @@ const Sidebar = React__default.forwardRef(function LayoutSidebar(props, ref) {
     props.className
   );
   React__default.useEffect(() => {
-    setTimeout(() => {
+    const id = setTimeout(() => {
       setReady(isSmallScreen);
     }, 1);
+    return () => clearTimeout(id);
   }, [isSmallScreen]);
   const toggleSidebar = () => setSidebarOpen((open) => !open);
   const content = typeof children === "function" ? children({ isLargeScreen, open: sidebarOpen, toggleSidebar }) : children;

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

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../../../src/components/Layout/components/Sidebar.tsx"],"sourcesContent":["import cn from 'clsx';\nimport { AnimatePresence, motion } from 'motion/react';\nimport React from 'react';\n\nimport { useIsLargeScreen } from '@/hooks/useIsLargeScreen';\n\nimport { LayoutContext } from './Context';\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        'h-full w-64 flex-shrink-0 flex-grow-0 bg-gray-50 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            'visible transition-[transform] duration-300': 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=\"fixed inset-0 z-[1] cursor-default overflow-y-auto bg-brand-midnight/[0.3] print:absolute print:overflow-visible\"\n                    />\n                )}\n            </AnimatePresence>\n        </>\n    );\n});\n"],"names":["React"],"mappings":";;;;;AAsBO,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,iBAAA;AACtB,QAAM,gBAAgB,CAAC;AAGvB,QAAM,YAAY,iBAAiB;AAGnCA,iBAAM,UAAU,MAAM;AAClB,mBAAe,aAAa;AAAA,EAChC,GAAG,CAAC,aAAa,CAAC;AAElBA,iBAAM,UAAU,MAAM;AAClB,UAAM,kBAAkB,CAAC,UAAyB;AAC9C,UAAI,MAAM,QAAQ,UAAU;AACxB,cAAM,eAAA;AACN,cAAM,gBAAA;AACN,uBAAe,KAAK;AAAA,MACxB;AAAA,IACJ;AAEA,QAAI,iBAAiB,aAAa;AAC9B,aAAO,iBAAiB,WAAW,eAAe;AAAA,IACtD;AAEA,WAAO,MAAM;AACT,aAAO,oBAAoB,WAAW,eAAe;AAAA,IACzD;AAAA,EACJ,GAAG,CAAC,eAAe,WAAW,CAAC;AAE/B,QAAM,eAAe,iBAAiB,gBAAgB;AAEtD,QAAM,CAAC,OAAO,QAAQ,IAAIA,eAAM,SAAS,aAAa;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,6CAA6C;AAAA;AAAA;AAAA,MAG7C,WAAW,iBAAiB,CAAC;AAAA,MAC7B,+CAA+C,iBAAiB;AAAA,MAChE,8BAA8B,CAAC;AAAA,IAAA;AAAA,IAEnC,MAAM;AAAA,EAAA;AAGVA,iBAAM,UAAU,MAAM;AAElB,eAAW,MAAM;AACb,eAAS,aAAa;AAAA,IAC1B,GAAG,CAAC;AAAA,EACR,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,gBAAgB,MAAM,eAAe,CAAA,SAAQ,CAAC,IAAI;AACxD,QAAM,UAAU,OAAO,aAAa,aAAa,SAAS,EAAE,eAAe,MAAM,aAAa,cAAA,CAAe,IAAI;AAEjH,MAAI,CAAC,SAAS;AACV,WAAO;AAAA,EACX;AAEA,qFAEQA,+BAAA,cAAC,OAAA,EAAK,GAAG,YAAY,mBAAiB,eAAe,eAAa,CAAC,WAAW,WAAsB,IAAA,GAC/F,OACL,GACAA,+BAAA,cAAC,uBACI,gBACGA,+BAAA;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACG,eAAW;AAAA,MACX,SAAS,EAAE,SAAS,EAAA;AAAA,MACpB,SAAS,EAAE,SAAS,EAAA;AAAA,MACpB,MAAM,EAAE,SAAS,EAAA;AAAA,MACjB,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 cn from 'clsx';\nimport { AnimatePresence, motion } from 'motion/react';\nimport React from 'react';\n\nimport { useIsLargeScreen } from '@/hooks/useIsLargeScreen';\n\nimport { LayoutContext } from './Context';\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        'h-full w-64 flex-shrink-0 flex-grow-0 bg-gray-50 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            'visible transition-[transform] duration-300': 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        const id = setTimeout(() => {\n            setReady(isSmallScreen);\n        }, 1);\n        return () => clearTimeout(id);\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=\"fixed inset-0 z-[1] cursor-default overflow-y-auto bg-brand-midnight/[0.3] print:absolute print:overflow-visible\"\n                    />\n                )}\n            </AnimatePresence>\n        </>\n    );\n});\n"],"names":["React"],"mappings":";;;;;AAsBO,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,iBAAA;AACtB,QAAM,gBAAgB,CAAC;AAGvB,QAAM,YAAY,iBAAiB;AAGnCA,iBAAM,UAAU,MAAM;AAClB,mBAAe,aAAa;AAAA,EAChC,GAAG,CAAC,aAAa,CAAC;AAElBA,iBAAM,UAAU,MAAM;AAClB,UAAM,kBAAkB,CAAC,UAAyB;AAC9C,UAAI,MAAM,QAAQ,UAAU;AACxB,cAAM,eAAA;AACN,cAAM,gBAAA;AACN,uBAAe,KAAK;AAAA,MACxB;AAAA,IACJ;AAEA,QAAI,iBAAiB,aAAa;AAC9B,aAAO,iBAAiB,WAAW,eAAe;AAAA,IACtD;AAEA,WAAO,MAAM;AACT,aAAO,oBAAoB,WAAW,eAAe;AAAA,IACzD;AAAA,EACJ,GAAG,CAAC,eAAe,WAAW,CAAC;AAE/B,QAAM,eAAe,iBAAiB,gBAAgB;AAEtD,QAAM,CAAC,OAAO,QAAQ,IAAIA,eAAM,SAAS,aAAa;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,6CAA6C;AAAA;AAAA;AAAA,MAG7C,WAAW,iBAAiB,CAAC;AAAA,MAC7B,+CAA+C,iBAAiB;AAAA,MAChE,8BAA8B,CAAC;AAAA,IAAA;AAAA,IAEnC,MAAM;AAAA,EAAA;AAGVA,iBAAM,UAAU,MAAM;AAElB,UAAM,KAAK,WAAW,MAAM;AACxB,eAAS,aAAa;AAAA,IAC1B,GAAG,CAAC;AACJ,WAAO,MAAM,aAAa,EAAE;AAAA,EAChC,GAAG,CAAC,aAAa,CAAC;AAElB,QAAM,gBAAgB,MAAM,eAAe,CAAA,SAAQ,CAAC,IAAI;AACxD,QAAM,UAAU,OAAO,aAAa,aAAa,SAAS,EAAE,eAAe,MAAM,aAAa,cAAA,CAAe,IAAI;AAEjH,MAAI,CAAC,SAAS;AACV,WAAO;AAAA,EACX;AAEA,qFAEQA,+BAAA,cAAC,OAAA,EAAK,GAAG,YAAY,mBAAiB,eAAe,eAAa,CAAC,WAAW,WAAsB,IAAA,GAC/F,OACL,GACAA,+BAAA,cAAC,uBACI,gBACGA,+BAAA;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACG,eAAW;AAAA,MACX,SAAS,EAAE,SAAS,EAAA;AAAA,MACpB,SAAS,EAAE,SAAS,EAAA;AAAA,MACpB,MAAM,EAAE,SAAS,EAAA;AAAA,MACjB,SAAS,MAAM,eAAe,KAAK;AAAA,MACnC,WAAU;AAAA,IAAA;AAAA,EAAA,CAGtB,CACJ;AAER,CAAC;"}

package/dist/components/LegacyComponents/IconButton/IconButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.cjs","sources":["../../../../src/components/LegacyComponents/IconButton/IconButton.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type { DialogProps, HangerProps, MenuProps, PopoverProps, IconName } from '@/components';\nimport { Icon } from '@/components';\nimport type * as ButtonPrimitive from '@/primitives/Button';\nimport type { Appearance } from '@/types';\n\nimport { ICON_APPEARANCE_CLASSNAME, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from '../Button/util';\n\n/**\n * @deprecated Use the `<Button>` component instead. This legacy API will be removed in a future major version.\n */\nexport type LegacyIconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => React.JSX.Element;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => React.JSX.Element;\n    /** Set which icon should be rendered within button */\n    icon: IconName; // this dynamic type causes the type extraction for props to fail\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => React.JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => React.JSX.Element;\n    /**\n     * Set whether the button is rounded.\n     * Default value is `false`\n     */\n    rounded?: boolean;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string | React.JSX.Element;\n};\n\n/**\n * @deprecated Use the `<Button>` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButtonBase = React.forwardRef(function LegacyIconButtonBase(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { icon, rounded = false, appearance = 'default', ...otherProps } = props;\n\n    const className = cn(\n        'w-8',\n        getButtonClasses(),\n        ICON_APPEARANCE_CLASSNAME[appearance],\n        {\n            'rounded-full': rounded,\n            rounded: !rounded,\n        },\n        props.className\n    );\n\n    if (!icon) {\n        return null;\n    }\n\n    return createButtonWithTooltip(\n        // forward the caller's own appearance so an omitted prop stays omitted from the DOM\n        {\n            'data-taco': 'legacy-icon-button',\n            appearance: props.appearance,\n            ...otherProps,\n            children: <Icon name={icon} className=\"m-0 p-0\" />,\n        },\n        className,\n        ref\n    );\n});\n\n/**\n * @deprecated Use the `<Button>` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButton = React.forwardRef(function LegacyIconButton(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, hanger, menu, popover, ...buttonProps } = props;\n    const button = <LegacyIconButtonBase {...buttonProps} ref={ref} />;\n\n    return createButtonWithOverlays({ dialog, hanger, menu, popover }, button);\n});\n"],"names":["React","LegacyIconButtonBase","getButtonClasses","ICON_APPEARANCE_CLASSNAME","createButtonWithTooltip","Icon","LegacyIconButton","createButtonWithOverlays"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA8CO,MAAM,uBAAuBA,iBAAM,WAAW,SAASC,sBAC1D,OACA,KACF;AACE,QAAM,EAAE,MAAM,UAAU,OAAO,aAAa,WAAW,GAAG,eAAe;AAEzE,QAAM,YAAY;AAAA,IACd;AAAA,IACAC,sBAAA;AAAA,IACAC,KAAAA,0BAA0B,UAAU;AAAA,IACpC;AAAA,MACI,gBAAgB;AAAA,MAChB,SAAS,CAAC;AAAA,IAAA;AAAA,IAEd,MAAM;AAAA,EAAA;AAGV,MAAI,CAAC,MAAM;AACP,WAAO;AAAA,EACX;AAEA,SAAOC,KAAAA;AAAAA;AAAAA,IAEH;AAAA,MACI,aAAa;AAAA,MACb,YAAY,MAAM;AAAA,MAClB,GAAG;AAAA,MACH,UAAUJ,iCAAA,cAACK,KAAAA,MAAA,EAAK,MAAM,MAAM,WAAU,UAAA,CAAU;AAAA,IAAA;AAAA,IAEpD;AAAA,IACA;AAAA,EAAA;AAER,CAAC;AAKM,MAAM,mBAAmBL,iBAAM,WAAW,SAASM,kBACtD,OACA,KACF;AACE,QAAM,EAAE,QAAQ,QAAQ,MAAM,SAAS,GAAG,gBAAgB;AAC1D,QAAM,SAASN,iCAAA,cAAC,sBAAA,EAAsB,GAAG,aAAa,KAAU;AAEhE,SAAOO,KAAAA,yBAAyB,EAAE,QAAQ,QAAQ,MAAM,QAAA,GAAW,MAAM;AAC7E,CAAC;;;"}
+{"version":3,"file":"IconButton.cjs","sources":["../../../../src/components/LegacyComponents/IconButton/IconButton.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type { DialogProps, HangerProps, MenuProps, PopoverProps, IconName } from '@/components';\nimport { Icon } from '@/components';\nimport type * as ButtonPrimitive from '@/primitives/Button';\nimport type { Appearance } from '@/types';\n\nimport { ICON_APPEARANCE_CLASSNAME, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from '../Button/util';\n\n/**\n * @deprecated Use the `<Button>` component instead. This legacy API will be removed in a future major version.\n */\nexport type LegacyIconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => React.JSX.Element;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => React.JSX.Element;\n    /** Set which icon should be rendered within button */\n    // this dynamic type causes the type extraction for props to fail\n    icon: IconName;\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => React.JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => React.JSX.Element;\n    /**\n     * Set whether the button is rounded.\n     * Default value is `false`\n     */\n    rounded?: boolean;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string | React.JSX.Element;\n};\n\n/**\n * @deprecated Use the `<Button>` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButtonBase = React.forwardRef(function LegacyIconButtonBase(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { icon, rounded = false, appearance = 'default', ...otherProps } = props;\n\n    const className = cn(\n        'w-8',\n        getButtonClasses(),\n        ICON_APPEARANCE_CLASSNAME[appearance],\n        {\n            'rounded-full': rounded,\n            rounded: !rounded,\n        },\n        props.className\n    );\n\n    if (!icon) {\n        return null;\n    }\n\n    return createButtonWithTooltip(\n        // forward the caller's own appearance so an omitted prop stays omitted from the DOM\n        {\n            'data-taco': 'legacy-icon-button',\n            appearance: props.appearance,\n            ...otherProps,\n            children: <Icon name={icon} className=\"m-0 p-0\" />,\n        },\n        className,\n        ref\n    );\n});\n\n/**\n * @deprecated Use the `<Button>` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButton = React.forwardRef(function LegacyIconButton(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, hanger, menu, popover, ...buttonProps } = props;\n    const button = <LegacyIconButtonBase {...buttonProps} ref={ref} />;\n\n    return createButtonWithOverlays({ dialog, hanger, menu, popover }, button);\n});\n"],"names":["React","LegacyIconButtonBase","getButtonClasses","ICON_APPEARANCE_CLASSNAME","createButtonWithTooltip","Icon","LegacyIconButton","createButtonWithOverlays"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA+CO,MAAM,uBAAuBA,iBAAM,WAAW,SAASC,sBAC1D,OACA,KACF;AACE,QAAM,EAAE,MAAM,UAAU,OAAO,aAAa,WAAW,GAAG,eAAe;AAEzE,QAAM,YAAY;AAAA,IACd;AAAA,IACAC,sBAAA;AAAA,IACAC,KAAAA,0BAA0B,UAAU;AAAA,IACpC;AAAA,MACI,gBAAgB;AAAA,MAChB,SAAS,CAAC;AAAA,IAAA;AAAA,IAEd,MAAM;AAAA,EAAA;AAGV,MAAI,CAAC,MAAM;AACP,WAAO;AAAA,EACX;AAEA,SAAOC,KAAAA;AAAAA;AAAAA,IAEH;AAAA,MACI,aAAa;AAAA,MACb,YAAY,MAAM;AAAA,MAClB,GAAG;AAAA,MACH,UAAUJ,iCAAA,cAACK,KAAAA,MAAA,EAAK,MAAM,MAAM,WAAU,UAAA,CAAU;AAAA,IAAA;AAAA,IAEpD;AAAA,IACA;AAAA,EAAA;AAER,CAAC;AAKM,MAAM,mBAAmBL,iBAAM,WAAW,SAASM,kBACtD,OACA,KACF;AACE,QAAM,EAAE,QAAQ,QAAQ,MAAM,SAAS,GAAG,gBAAgB;AAC1D,QAAM,SAASN,iCAAA,cAAC,sBAAA,EAAsB,GAAG,aAAa,KAAU;AAEhE,SAAOO,KAAAA,yBAAyB,EAAE,QAAQ,QAAQ,MAAM,QAAA,GAAW,MAAM;AAC7E,CAAC;;;"}

package/dist/components/LegacyComponents/IconButton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../../src/components/LegacyComponents/IconButton/IconButton.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type { DialogProps, HangerProps, MenuProps, PopoverProps, IconName } from '@/components';\nimport { Icon } from '@/components';\nimport type * as ButtonPrimitive from '@/primitives/Button';\nimport type { Appearance } from '@/types';\n\nimport { ICON_APPEARANCE_CLASSNAME, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from '../Button/util';\n\n/**\n * @deprecated Use the `<Button>` component instead. This legacy API will be removed in a future major version.\n */\nexport type LegacyIconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => React.JSX.Element;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => React.JSX.Element;\n    /** Set which icon should be rendered within button */\n    icon: IconName; // this dynamic type causes the type extraction for props to fail\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => React.JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => React.JSX.Element;\n    /**\n     * Set whether the button is rounded.\n     * Default value is `false`\n     */\n    rounded?: boolean;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string | React.JSX.Element;\n};\n\n/**\n * @deprecated Use the `<Button>` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButtonBase = React.forwardRef(function LegacyIconButtonBase(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { icon, rounded = false, appearance = 'default', ...otherProps } = props;\n\n    const className = cn(\n        'w-8',\n        getButtonClasses(),\n        ICON_APPEARANCE_CLASSNAME[appearance],\n        {\n            'rounded-full': rounded,\n            rounded: !rounded,\n        },\n        props.className\n    );\n\n    if (!icon) {\n        return null;\n    }\n\n    return createButtonWithTooltip(\n        // forward the caller's own appearance so an omitted prop stays omitted from the DOM\n        {\n            'data-taco': 'legacy-icon-button',\n            appearance: props.appearance,\n            ...otherProps,\n            children: <Icon name={icon} className=\"m-0 p-0\" />,\n        },\n        className,\n        ref\n    );\n});\n\n/**\n * @deprecated Use the `<Button>` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButton = React.forwardRef(function LegacyIconButton(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, hanger, menu, popover, ...buttonProps } = props;\n    const button = <LegacyIconButtonBase {...buttonProps} ref={ref} />;\n\n    return createButtonWithOverlays({ dialog, hanger, menu, popover }, button);\n});\n"],"names":["LegacyIconButtonBase","LegacyIconButton"],"mappings":";;;;AA8CO,MAAM,uBAAuB,MAAM,WAAW,SAASA,sBAC1D,OACA,KACF;AACE,QAAM,EAAE,MAAM,UAAU,OAAO,aAAa,WAAW,GAAG,eAAe;AAEzE,QAAM,YAAY;AAAA,IACd;AAAA,IACA,iBAAA;AAAA,IACA,0BAA0B,UAAU;AAAA,IACpC;AAAA,MACI,gBAAgB;AAAA,MAChB,SAAS,CAAC;AAAA,IAAA;AAAA,IAEd,MAAM;AAAA,EAAA;AAGV,MAAI,CAAC,MAAM;AACP,WAAO;AAAA,EACX;AAEA,SAAO;AAAA;AAAA,IAEH;AAAA,MACI,aAAa;AAAA,MACb,YAAY,MAAM;AAAA,MAClB,GAAG;AAAA,MACH,UAAU,sBAAA,cAAC,MAAA,EAAK,MAAM,MAAM,WAAU,UAAA,CAAU;AAAA,IAAA;AAAA,IAEpD;AAAA,IACA;AAAA,EAAA;AAER,CAAC;AAKM,MAAM,mBAAmB,MAAM,WAAW,SAASC,kBACtD,OACA,KACF;AACE,QAAM,EAAE,QAAQ,QAAQ,MAAM,SAAS,GAAG,gBAAgB;AAC1D,QAAM,SAAS,sBAAA,cAAC,sBAAA,EAAsB,GAAG,aAAa,KAAU;AAEhE,SAAO,yBAAyB,EAAE,QAAQ,QAAQ,MAAM,QAAA,GAAW,MAAM;AAC7E,CAAC;"}
+{"version":3,"file":"IconButton.js","sources":["../../../../src/components/LegacyComponents/IconButton/IconButton.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type { DialogProps, HangerProps, MenuProps, PopoverProps, IconName } from '@/components';\nimport { Icon } from '@/components';\nimport type * as ButtonPrimitive from '@/primitives/Button';\nimport type { Appearance } from '@/types';\n\nimport { ICON_APPEARANCE_CLASSNAME, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from '../Button/util';\n\n/**\n * @deprecated Use the `<Button>` component instead. This legacy API will be removed in a future major version.\n */\nexport type LegacyIconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => React.JSX.Element;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => React.JSX.Element;\n    /** Set which icon should be rendered within button */\n    // this dynamic type causes the type extraction for props to fail\n    icon: IconName;\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => React.JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => React.JSX.Element;\n    /**\n     * Set whether the button is rounded.\n     * Default value is `false`\n     */\n    rounded?: boolean;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string | React.JSX.Element;\n};\n\n/**\n * @deprecated Use the `<Button>` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButtonBase = React.forwardRef(function LegacyIconButtonBase(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { icon, rounded = false, appearance = 'default', ...otherProps } = props;\n\n    const className = cn(\n        'w-8',\n        getButtonClasses(),\n        ICON_APPEARANCE_CLASSNAME[appearance],\n        {\n            'rounded-full': rounded,\n            rounded: !rounded,\n        },\n        props.className\n    );\n\n    if (!icon) {\n        return null;\n    }\n\n    return createButtonWithTooltip(\n        // forward the caller's own appearance so an omitted prop stays omitted from the DOM\n        {\n            'data-taco': 'legacy-icon-button',\n            appearance: props.appearance,\n            ...otherProps,\n            children: <Icon name={icon} className=\"m-0 p-0\" />,\n        },\n        className,\n        ref\n    );\n});\n\n/**\n * @deprecated Use the `<Button>` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButton = React.forwardRef(function LegacyIconButton(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, hanger, menu, popover, ...buttonProps } = props;\n    const button = <LegacyIconButtonBase {...buttonProps} ref={ref} />;\n\n    return createButtonWithOverlays({ dialog, hanger, menu, popover }, button);\n});\n"],"names":["LegacyIconButtonBase","LegacyIconButton"],"mappings":";;;;AA+CO,MAAM,uBAAuB,MAAM,WAAW,SAASA,sBAC1D,OACA,KACF;AACE,QAAM,EAAE,MAAM,UAAU,OAAO,aAAa,WAAW,GAAG,eAAe;AAEzE,QAAM,YAAY;AAAA,IACd;AAAA,IACA,iBAAA;AAAA,IACA,0BAA0B,UAAU;AAAA,IACpC;AAAA,MACI,gBAAgB;AAAA,MAChB,SAAS,CAAC;AAAA,IAAA;AAAA,IAEd,MAAM;AAAA,EAAA;AAGV,MAAI,CAAC,MAAM;AACP,WAAO;AAAA,EACX;AAEA,SAAO;AAAA;AAAA,IAEH;AAAA,MACI,aAAa;AAAA,MACb,YAAY,MAAM;AAAA,MAClB,GAAG;AAAA,MACH,UAAU,sBAAA,cAAC,MAAA,EAAK,MAAM,MAAM,WAAU,UAAA,CAAU;AAAA,IAAA;AAAA,IAEpD;AAAA,IACA;AAAA,EAAA;AAER,CAAC;AAKM,MAAM,mBAAmB,MAAM,WAAW,SAASC,kBACtD,OACA,KACF;AACE,QAAM,EAAE,QAAQ,QAAQ,MAAM,SAAS,GAAG,gBAAgB;AAC1D,QAAM,SAAS,sBAAA,cAAC,sBAAA,EAAsB,GAAG,aAAa,KAAU;AAEhE,SAAO,yBAAyB,EAAE,QAAQ,QAAQ,MAAM,QAAA,GAAW,MAAM;AAC7E,CAAC;"}

package/dist/components/List/components/Toggle.cjs

@@ -17,7 +17,6 @@ const ToggleItem = React.forwardRef(function Toggle(props, ref) {
     }
     if (event.target !== controlRef.current && !controlRef.current?.contains(event.target)) {
       onToggle();
-      return;
     }
   }
   function handleKeyDown(event) {
@@ -29,7 +28,6 @@ const ToggleItem = React.forwardRef(function Toggle(props, ref) {
     }
     if ((event.key === "Enter" || event.key === " ") && event.target !== controlRef.current && !controlRef.current?.contains(event.target)) {
       onToggle();
-      return;
     }
   }
   const className = cn("group/toggle", props.className);

package/dist/components/List/components/Toggle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.cjs","sources":["../../../../src/components/List/components/Toggle.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport type { ControlledCheckboxProps, ControlledSwitchProps } from '@/components';\nimport { Checkbox as TacoCheckbox, Switch as TacoSwitch } from '@/components';\nimport { useControlled } from '@/hooks/useControlled';\n\nimport type { ComposableListItemProps } from './Item';\nimport { Item } from './Item';\n\ntype ToggleProps = ComposableListItemProps<'div'> & {\n    control: React.JSX.Element;\n    controlRef: React.RefObject<HTMLInputElement | null> | React.RefObject<HTMLButtonElement | null>;\n    onToggle: () => void;\n};\n\nconst ToggleItem = React.forwardRef<HTMLDivElement, ToggleProps>(function Toggle(props, ref) {\n    const { controlRef, onToggle, ...attributes } = props;\n\n    function handleClick(event: React.MouseEvent<HTMLDivElement>) {\n        if (typeof props.onClick === 'function') {\n            props.onClick(event);\n        }\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        // If event target is not a control and not an element inside the control, then trigger click of the control\n        if (event.target !== controlRef.current && !controlRef.current?.contains(event.target as HTMLElement)) {\n            onToggle();\n            return;\n        }\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n        if (typeof props.onKeyDown === 'function') {\n            props.onKeyDown(event);\n        }\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        // If event target is not a control and not an element inside the control, then send appropriate \"activate\" keyboard shortcuts to the control as a click\n        if (\n            (event.key === 'Enter' || event.key === ' ') &&\n            event.target !== controlRef.current &&\n            !controlRef.current?.contains(event.target as HTMLElement)\n        ) {\n            onToggle();\n            return;\n        }\n    }\n\n    const className = cn('group/toggle', props.className);\n    return <Item {...attributes} className={className} onClick={handleClick} onKeyDown={handleKeyDown} ref={ref} />;\n});\n\nexport type ListSwitchProps = ComposableListItemProps<'div'> & Omit<ControlledSwitchProps, 'title'>;\n\nexport const Switch = React.forwardRef<HTMLDivElement, ListSwitchProps>(function Switch(props, ref) {\n    const { checked: externalChecked, onChange, ...attributes } = props;\n    const [checked, setChecked] = useControlled<boolean>({\n        value: externalChecked,\n        onChange,\n    });\n\n    const switchRef = React.useRef<HTMLInputElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(previousChecked => !previousChecked);\n    }, [setChecked]);\n\n    const control = (\n        <TacoSwitch\n            checked={checked}\n            className=\"group-hover/toggle:[&[aria-checked=false]]:bg-gray-700 group-hover/toggle:[&[aria-checked=true]]:bg-blue-700\"\n            disabled={props.disabled}\n            onChange={toggle}\n            ref={switchRef}\n            tabIndex={-1}\n        />\n    );\n\n    return <ToggleItem {...attributes} control={control} controlRef={switchRef} ref={ref} onToggle={toggle} />;\n});\n\nexport type ListCheckboxProps = ComposableListItemProps<'div'> & ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef<HTMLDivElement, ListCheckboxProps>(function Switch(props, ref) {\n    const { checked: externalChecked, onChange, ...attributes } = props;\n    const [checked, setChecked] = useControlled<boolean>({\n        value: externalChecked,\n        onChange,\n    });\n\n    const checkboxRef = React.useRef<HTMLInputElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(previousChecked => !previousChecked);\n    }, [setChecked]);\n\n    const control = (\n        <TacoCheckbox\n            checked={checked}\n            className=\"group-hover/toggle:[&[aria-checked=false]]:border-gray-700 group-hover/toggle:[&[aria-checked=true]]:border-blue-700 group-hover/checkbox:[&[aria-checked=true]]:bg-blue-700\"\n            disabled={props.disabled}\n            onChange={toggle}\n            ref={checkboxRef}\n            tabIndex={-1}\n        />\n    );\n\n    return <ToggleItem {...attributes} control={control} controlRef={checkboxRef} ref={ref} onToggle={toggle} />;\n});\n"],"names":["Item","Switch","useControlled","TacoSwitch","TacoCheckbox"],"mappings":";;;;;;;;AAgBA,MAAM,aAAa,MAAM,WAAwC,SAAS,OAAO,OAAO,KAAK;AACzF,QAAM,EAAE,YAAY,UAAU,GAAG,eAAe;AAEhD,WAAS,YAAY,OAAyC;AAC1D,QAAI,OAAO,MAAM,YAAY,YAAY;AACrC,YAAM,QAAQ,KAAK;AAAA,IACvB;AAEA,QAAI,MAAM,sBAAsB;AAC5B;AAAA,IACJ;AAGA,QAAI,MAAM,WAAW,WAAW,WAAW,CAAC,WAAW,SAAS,SAAS,MAAM,MAAqB,GAAG;AACnG,eAAA;AACA;AAAA,IACJ;AAAA,EACJ;AAEA,WAAS,cAAc,OAA4C;AAC/D,QAAI,OAAO,MAAM,cAAc,YAAY;AACvC,YAAM,UAAU,KAAK;AAAA,IACzB;AAEA,QAAI,MAAM,sBAAsB;AAC5B;AAAA,IACJ;AAGA,SACK,MAAM,QAAQ,WAAW,MAAM,QAAQ,QACxC,MAAM,WAAW,WAAW,WAC5B,CAAC,WAAW,SAAS,SAAS,MAAM,MAAqB,GAC3D;AACE,eAAA;AACA;AAAA,IACJ;AAAA,EACJ;AAEA,QAAM,YAAY,GAAG,gBAAgB,MAAM,SAAS;AACpD,SAAO,sBAAA,cAACA,KAAAA,QAAM,GAAG,YAAY,WAAsB,SAAS,aAAa,WAAW,eAAe,IAAA,CAAU;AACjH,CAAC;AAIM,MAAM,SAAS,MAAM,WAA4C,SAASC,QAAO,OAAO,KAAK;AAChG,QAAM,EAAE,SAAS,iBAAiB,UAAU,GAAG,eAAe;AAC9D,QAAM,CAAC,SAAS,UAAU,IAAIC,4BAAuB;AAAA,IACjD,OAAO;AAAA,IACP;AAAA,EAAA,CACH;AAED,QAAM,YAAY,MAAM,OAAyB,IAAI;AAErD,QAAM,SAAS,MAAM,YAAY,MAAM;AACnC,eAAW,CAAA,oBAAmB,CAAC,eAAe;AAAA,EAClD,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,UACF,sBAAA;AAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAChB,UAAU;AAAA,MACV,KAAK;AAAA,MACL,UAAU;AAAA,IAAA;AAAA,EAAA;AAIlB,SAAO,sBAAA,cAAC,cAAY,GAAG,YAAY,SAAkB,YAAY,WAAW,KAAU,UAAU,OAAA,CAAQ;AAC5G,CAAC;AAIM,MAAM,WAAW,MAAM,WAA8C,SAASF,QAAO,OAAO,KAAK;AACpG,QAAM,EAAE,SAAS,iBAAiB,UAAU,GAAG,eAAe;AAC9D,QAAM,CAAC,SAAS,UAAU,IAAIC,4BAAuB;AAAA,IACjD,OAAO;AAAA,IACP;AAAA,EAAA,CACH;AAED,QAAM,cAAc,MAAM,OAAyB,IAAI;AAEvD,QAAM,SAAS,MAAM,YAAY,MAAM;AACnC,eAAW,CAAA,oBAAmB,CAAC,eAAe;AAAA,EAClD,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,UACF,sBAAA;AAAA,IAACE,WAAAA;AAAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAChB,UAAU;AAAA,MACV,KAAK;AAAA,MACL,UAAU;AAAA,IAAA;AAAA,EAAA;AAIlB,SAAO,sBAAA,cAAC,cAAY,GAAG,YAAY,SAAkB,YAAY,aAAa,KAAU,UAAU,OAAA,CAAQ;AAC9G,CAAC;;;"}
+{"version":3,"file":"Toggle.cjs","sources":["../../../../src/components/List/components/Toggle.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport type { ControlledCheckboxProps, ControlledSwitchProps } from '@/components';\nimport { Checkbox as TacoCheckbox, Switch as TacoSwitch } from '@/components';\nimport { useControlled } from '@/hooks/useControlled';\n\nimport type { ComposableListItemProps } from './Item';\nimport { Item } from './Item';\n\ntype ToggleProps = ComposableListItemProps<'div'> & {\n    control: React.JSX.Element;\n    controlRef: React.RefObject<HTMLInputElement | null> | React.RefObject<HTMLButtonElement | null>;\n    onToggle: () => void;\n};\n\nconst ToggleItem = React.forwardRef<HTMLDivElement, ToggleProps>(function Toggle(props, ref) {\n    const { controlRef, onToggle, ...attributes } = props;\n\n    function handleClick(event: React.MouseEvent<HTMLDivElement>) {\n        if (typeof props.onClick === 'function') {\n            props.onClick(event);\n        }\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        // If event target is not a control and not an element inside the control, then trigger click of the control\n        if (event.target !== controlRef.current && !controlRef.current?.contains(event.target as HTMLElement)) {\n            onToggle();\n        }\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n        if (typeof props.onKeyDown === 'function') {\n            props.onKeyDown(event);\n        }\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        // If event target is not a control and not an element inside the control, then send appropriate \"activate\" keyboard shortcuts to the control as a click\n        if (\n            (event.key === 'Enter' || event.key === ' ') &&\n            event.target !== controlRef.current &&\n            !controlRef.current?.contains(event.target as HTMLElement)\n        ) {\n            onToggle();\n        }\n    }\n\n    const className = cn('group/toggle', props.className);\n    return <Item {...attributes} className={className} onClick={handleClick} onKeyDown={handleKeyDown} ref={ref} />;\n});\n\nexport type ListSwitchProps = ComposableListItemProps<'div'> & Omit<ControlledSwitchProps, 'title'>;\n\nexport const Switch = React.forwardRef<HTMLDivElement, ListSwitchProps>(function Switch(props, ref) {\n    const { checked: externalChecked, onChange, ...attributes } = props;\n    const [checked, setChecked] = useControlled<boolean>({\n        value: externalChecked,\n        onChange,\n    });\n\n    const switchRef = React.useRef<HTMLInputElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(previousChecked => !previousChecked);\n    }, [setChecked]);\n\n    const control = (\n        <TacoSwitch\n            checked={checked}\n            className=\"group-hover/toggle:[&[aria-checked=false]]:bg-gray-700 group-hover/toggle:[&[aria-checked=true]]:bg-blue-700\"\n            disabled={props.disabled}\n            onChange={toggle}\n            ref={switchRef}\n            tabIndex={-1}\n        />\n    );\n\n    return <ToggleItem {...attributes} control={control} controlRef={switchRef} ref={ref} onToggle={toggle} />;\n});\n\nexport type ListCheckboxProps = ComposableListItemProps<'div'> & ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef<HTMLDivElement, ListCheckboxProps>(function Switch(props, ref) {\n    const { checked: externalChecked, onChange, ...attributes } = props;\n    const [checked, setChecked] = useControlled<boolean>({\n        value: externalChecked,\n        onChange,\n    });\n\n    const checkboxRef = React.useRef<HTMLInputElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(previousChecked => !previousChecked);\n    }, [setChecked]);\n\n    const control = (\n        <TacoCheckbox\n            checked={checked}\n            className=\"group-hover/toggle:[&[aria-checked=false]]:border-gray-700 group-hover/toggle:[&[aria-checked=true]]:border-blue-700 group-hover/checkbox:[&[aria-checked=true]]:bg-blue-700\"\n            disabled={props.disabled}\n            onChange={toggle}\n            ref={checkboxRef}\n            tabIndex={-1}\n        />\n    );\n\n    return <ToggleItem {...attributes} control={control} controlRef={checkboxRef} ref={ref} onToggle={toggle} />;\n});\n"],"names":["Item","Switch","useControlled","TacoSwitch","TacoCheckbox"],"mappings":";;;;;;;;AAgBA,MAAM,aAAa,MAAM,WAAwC,SAAS,OAAO,OAAO,KAAK;AACzF,QAAM,EAAE,YAAY,UAAU,GAAG,eAAe;AAEhD,WAAS,YAAY,OAAyC;AAC1D,QAAI,OAAO,MAAM,YAAY,YAAY;AACrC,YAAM,QAAQ,KAAK;AAAA,IACvB;AAEA,QAAI,MAAM,sBAAsB;AAC5B;AAAA,IACJ;AAGA,QAAI,MAAM,WAAW,WAAW,WAAW,CAAC,WAAW,SAAS,SAAS,MAAM,MAAqB,GAAG;AACnG,eAAA;AAAA,IACJ;AAAA,EACJ;AAEA,WAAS,cAAc,OAA4C;AAC/D,QAAI,OAAO,MAAM,cAAc,YAAY;AACvC,YAAM,UAAU,KAAK;AAAA,IACzB;AAEA,QAAI,MAAM,sBAAsB;AAC5B;AAAA,IACJ;AAGA,SACK,MAAM,QAAQ,WAAW,MAAM,QAAQ,QACxC,MAAM,WAAW,WAAW,WAC5B,CAAC,WAAW,SAAS,SAAS,MAAM,MAAqB,GAC3D;AACE,eAAA;AAAA,IACJ;AAAA,EACJ;AAEA,QAAM,YAAY,GAAG,gBAAgB,MAAM,SAAS;AACpD,SAAO,sBAAA,cAACA,KAAAA,QAAM,GAAG,YAAY,WAAsB,SAAS,aAAa,WAAW,eAAe,IAAA,CAAU;AACjH,CAAC;AAIM,MAAM,SAAS,MAAM,WAA4C,SAASC,QAAO,OAAO,KAAK;AAChG,QAAM,EAAE,SAAS,iBAAiB,UAAU,GAAG,eAAe;AAC9D,QAAM,CAAC,SAAS,UAAU,IAAIC,4BAAuB;AAAA,IACjD,OAAO;AAAA,IACP;AAAA,EAAA,CACH;AAED,QAAM,YAAY,MAAM,OAAyB,IAAI;AAErD,QAAM,SAAS,MAAM,YAAY,MAAM;AACnC,eAAW,CAAA,oBAAmB,CAAC,eAAe;AAAA,EAClD,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,UACF,sBAAA;AAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAChB,UAAU;AAAA,MACV,KAAK;AAAA,MACL,UAAU;AAAA,IAAA;AAAA,EAAA;AAIlB,SAAO,sBAAA,cAAC,cAAY,GAAG,YAAY,SAAkB,YAAY,WAAW,KAAU,UAAU,OAAA,CAAQ;AAC5G,CAAC;AAIM,MAAM,WAAW,MAAM,WAA8C,SAASF,QAAO,OAAO,KAAK;AACpG,QAAM,EAAE,SAAS,iBAAiB,UAAU,GAAG,eAAe;AAC9D,QAAM,CAAC,SAAS,UAAU,IAAIC,4BAAuB;AAAA,IACjD,OAAO;AAAA,IACP;AAAA,EAAA,CACH;AAED,QAAM,cAAc,MAAM,OAAyB,IAAI;AAEvD,QAAM,SAAS,MAAM,YAAY,MAAM;AACnC,eAAW,CAAA,oBAAmB,CAAC,eAAe;AAAA,EAClD,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,UACF,sBAAA;AAAA,IAACE,WAAAA;AAAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAChB,UAAU;AAAA,MACV,KAAK;AAAA,MACL,UAAU;AAAA,IAAA;AAAA,EAAA;AAIlB,SAAO,sBAAA,cAAC,cAAY,GAAG,YAAY,SAAkB,YAAY,aAAa,KAAU,UAAU,OAAA,CAAQ;AAC9G,CAAC;;;"}

package/dist/components/List/components/Toggle.js

@@ -15,7 +15,6 @@ const ToggleItem = React__default.forwardRef(function Toggle(props, ref) {
     }
     if (event.target !== controlRef.current && !controlRef.current?.contains(event.target)) {
       onToggle();
-      return;
     }
   }
   function handleKeyDown(event) {
@@ -27,7 +26,6 @@ const ToggleItem = React__default.forwardRef(function Toggle(props, ref) {
     }
     if ((event.key === "Enter" || event.key === " ") && event.target !== controlRef.current && !controlRef.current?.contains(event.target)) {
       onToggle();
-      return;
     }
   }
   const className = cn("group/toggle", props.className);

package/dist/components/List/components/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sources":["../../../../src/components/List/components/Toggle.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport type { ControlledCheckboxProps, ControlledSwitchProps } from '@/components';\nimport { Checkbox as TacoCheckbox, Switch as TacoSwitch } from '@/components';\nimport { useControlled } from '@/hooks/useControlled';\n\nimport type { ComposableListItemProps } from './Item';\nimport { Item } from './Item';\n\ntype ToggleProps = ComposableListItemProps<'div'> & {\n    control: React.JSX.Element;\n    controlRef: React.RefObject<HTMLInputElement | null> | React.RefObject<HTMLButtonElement | null>;\n    onToggle: () => void;\n};\n\nconst ToggleItem = React.forwardRef<HTMLDivElement, ToggleProps>(function Toggle(props, ref) {\n    const { controlRef, onToggle, ...attributes } = props;\n\n    function handleClick(event: React.MouseEvent<HTMLDivElement>) {\n        if (typeof props.onClick === 'function') {\n            props.onClick(event);\n        }\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        // If event target is not a control and not an element inside the control, then trigger click of the control\n        if (event.target !== controlRef.current && !controlRef.current?.contains(event.target as HTMLElement)) {\n            onToggle();\n            return;\n        }\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n        if (typeof props.onKeyDown === 'function') {\n            props.onKeyDown(event);\n        }\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        // If event target is not a control and not an element inside the control, then send appropriate \"activate\" keyboard shortcuts to the control as a click\n        if (\n            (event.key === 'Enter' || event.key === ' ') &&\n            event.target !== controlRef.current &&\n            !controlRef.current?.contains(event.target as HTMLElement)\n        ) {\n            onToggle();\n            return;\n        }\n    }\n\n    const className = cn('group/toggle', props.className);\n    return <Item {...attributes} className={className} onClick={handleClick} onKeyDown={handleKeyDown} ref={ref} />;\n});\n\nexport type ListSwitchProps = ComposableListItemProps<'div'> & Omit<ControlledSwitchProps, 'title'>;\n\nexport const Switch = React.forwardRef<HTMLDivElement, ListSwitchProps>(function Switch(props, ref) {\n    const { checked: externalChecked, onChange, ...attributes } = props;\n    const [checked, setChecked] = useControlled<boolean>({\n        value: externalChecked,\n        onChange,\n    });\n\n    const switchRef = React.useRef<HTMLInputElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(previousChecked => !previousChecked);\n    }, [setChecked]);\n\n    const control = (\n        <TacoSwitch\n            checked={checked}\n            className=\"group-hover/toggle:[&[aria-checked=false]]:bg-gray-700 group-hover/toggle:[&[aria-checked=true]]:bg-blue-700\"\n            disabled={props.disabled}\n            onChange={toggle}\n            ref={switchRef}\n            tabIndex={-1}\n        />\n    );\n\n    return <ToggleItem {...attributes} control={control} controlRef={switchRef} ref={ref} onToggle={toggle} />;\n});\n\nexport type ListCheckboxProps = ComposableListItemProps<'div'> & ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef<HTMLDivElement, ListCheckboxProps>(function Switch(props, ref) {\n    const { checked: externalChecked, onChange, ...attributes } = props;\n    const [checked, setChecked] = useControlled<boolean>({\n        value: externalChecked,\n        onChange,\n    });\n\n    const checkboxRef = React.useRef<HTMLInputElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(previousChecked => !previousChecked);\n    }, [setChecked]);\n\n    const control = (\n        <TacoCheckbox\n            checked={checked}\n            className=\"group-hover/toggle:[&[aria-checked=false]]:border-gray-700 group-hover/toggle:[&[aria-checked=true]]:border-blue-700 group-hover/checkbox:[&[aria-checked=true]]:bg-blue-700\"\n            disabled={props.disabled}\n            onChange={toggle}\n            ref={checkboxRef}\n            tabIndex={-1}\n        />\n    );\n\n    return <ToggleItem {...attributes} control={control} controlRef={checkboxRef} ref={ref} onToggle={toggle} />;\n});\n"],"names":["React","Switch","TacoSwitch","TacoCheckbox"],"mappings":";;;;;;AAgBA,MAAM,aAAaA,eAAM,WAAwC,SAAS,OAAO,OAAO,KAAK;AACzF,QAAM,EAAE,YAAY,UAAU,GAAG,eAAe;AAEhD,WAAS,YAAY,OAAyC;AAC1D,QAAI,OAAO,MAAM,YAAY,YAAY;AACrC,YAAM,QAAQ,KAAK;AAAA,IACvB;AAEA,QAAI,MAAM,sBAAsB;AAC5B;AAAA,IACJ;AAGA,QAAI,MAAM,WAAW,WAAW,WAAW,CAAC,WAAW,SAAS,SAAS,MAAM,MAAqB,GAAG;AACnG,eAAA;AACA;AAAA,IACJ;AAAA,EACJ;AAEA,WAAS,cAAc,OAA4C;AAC/D,QAAI,OAAO,MAAM,cAAc,YAAY;AACvC,YAAM,UAAU,KAAK;AAAA,IACzB;AAEA,QAAI,MAAM,sBAAsB;AAC5B;AAAA,IACJ;AAGA,SACK,MAAM,QAAQ,WAAW,MAAM,QAAQ,QACxC,MAAM,WAAW,WAAW,WAC5B,CAAC,WAAW,SAAS,SAAS,MAAM,MAAqB,GAC3D;AACE,eAAA;AACA;AAAA,IACJ;AAAA,EACJ;AAEA,QAAM,YAAY,GAAG,gBAAgB,MAAM,SAAS;AACpD,SAAOA,+BAAA,cAAC,QAAM,GAAG,YAAY,WAAsB,SAAS,aAAa,WAAW,eAAe,IAAA,CAAU;AACjH,CAAC;AAIM,MAAM,SAASA,eAAM,WAA4C,SAASC,QAAO,OAAO,KAAK;AAChG,QAAM,EAAE,SAAS,iBAAiB,UAAU,GAAG,eAAe;AAC9D,QAAM,CAAC,SAAS,UAAU,IAAI,cAAuB;AAAA,IACjD,OAAO;AAAA,IACP;AAAA,EAAA,CACH;AAED,QAAM,YAAYD,eAAM,OAAyB,IAAI;AAErD,QAAM,SAASA,eAAM,YAAY,MAAM;AACnC,eAAW,CAAA,oBAAmB,CAAC,eAAe;AAAA,EAClD,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,UACFA,+BAAA;AAAA,IAACE;AAAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAChB,UAAU;AAAA,MACV,KAAK;AAAA,MACL,UAAU;AAAA,IAAA;AAAA,EAAA;AAIlB,SAAOF,+BAAA,cAAC,cAAY,GAAG,YAAY,SAAkB,YAAY,WAAW,KAAU,UAAU,OAAA,CAAQ;AAC5G,CAAC;AAIM,MAAM,WAAWA,eAAM,WAA8C,SAASC,QAAO,OAAO,KAAK;AACpG,QAAM,EAAE,SAAS,iBAAiB,UAAU,GAAG,eAAe;AAC9D,QAAM,CAAC,SAAS,UAAU,IAAI,cAAuB;AAAA,IACjD,OAAO;AAAA,IACP;AAAA,EAAA,CACH;AAED,QAAM,cAAcD,eAAM,OAAyB,IAAI;AAEvD,QAAM,SAASA,eAAM,YAAY,MAAM;AACnC,eAAW,CAAA,oBAAmB,CAAC,eAAe;AAAA,EAClD,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,UACFA,+BAAA;AAAA,IAACG;AAAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAChB,UAAU;AAAA,MACV,KAAK;AAAA,MACL,UAAU;AAAA,IAAA;AAAA,EAAA;AAIlB,SAAOH,+BAAA,cAAC,cAAY,GAAG,YAAY,SAAkB,YAAY,aAAa,KAAU,UAAU,OAAA,CAAQ;AAC9G,CAAC;"}
+{"version":3,"file":"Toggle.js","sources":["../../../../src/components/List/components/Toggle.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\n\nimport type { ControlledCheckboxProps, ControlledSwitchProps } from '@/components';\nimport { Checkbox as TacoCheckbox, Switch as TacoSwitch } from '@/components';\nimport { useControlled } from '@/hooks/useControlled';\n\nimport type { ComposableListItemProps } from './Item';\nimport { Item } from './Item';\n\ntype ToggleProps = ComposableListItemProps<'div'> & {\n    control: React.JSX.Element;\n    controlRef: React.RefObject<HTMLInputElement | null> | React.RefObject<HTMLButtonElement | null>;\n    onToggle: () => void;\n};\n\nconst ToggleItem = React.forwardRef<HTMLDivElement, ToggleProps>(function Toggle(props, ref) {\n    const { controlRef, onToggle, ...attributes } = props;\n\n    function handleClick(event: React.MouseEvent<HTMLDivElement>) {\n        if (typeof props.onClick === 'function') {\n            props.onClick(event);\n        }\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        // If event target is not a control and not an element inside the control, then trigger click of the control\n        if (event.target !== controlRef.current && !controlRef.current?.contains(event.target as HTMLElement)) {\n            onToggle();\n        }\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n        if (typeof props.onKeyDown === 'function') {\n            props.onKeyDown(event);\n        }\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        // If event target is not a control and not an element inside the control, then send appropriate \"activate\" keyboard shortcuts to the control as a click\n        if (\n            (event.key === 'Enter' || event.key === ' ') &&\n            event.target !== controlRef.current &&\n            !controlRef.current?.contains(event.target as HTMLElement)\n        ) {\n            onToggle();\n        }\n    }\n\n    const className = cn('group/toggle', props.className);\n    return <Item {...attributes} className={className} onClick={handleClick} onKeyDown={handleKeyDown} ref={ref} />;\n});\n\nexport type ListSwitchProps = ComposableListItemProps<'div'> & Omit<ControlledSwitchProps, 'title'>;\n\nexport const Switch = React.forwardRef<HTMLDivElement, ListSwitchProps>(function Switch(props, ref) {\n    const { checked: externalChecked, onChange, ...attributes } = props;\n    const [checked, setChecked] = useControlled<boolean>({\n        value: externalChecked,\n        onChange,\n    });\n\n    const switchRef = React.useRef<HTMLInputElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(previousChecked => !previousChecked);\n    }, [setChecked]);\n\n    const control = (\n        <TacoSwitch\n            checked={checked}\n            className=\"group-hover/toggle:[&[aria-checked=false]]:bg-gray-700 group-hover/toggle:[&[aria-checked=true]]:bg-blue-700\"\n            disabled={props.disabled}\n            onChange={toggle}\n            ref={switchRef}\n            tabIndex={-1}\n        />\n    );\n\n    return <ToggleItem {...attributes} control={control} controlRef={switchRef} ref={ref} onToggle={toggle} />;\n});\n\nexport type ListCheckboxProps = ComposableListItemProps<'div'> & ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef<HTMLDivElement, ListCheckboxProps>(function Switch(props, ref) {\n    const { checked: externalChecked, onChange, ...attributes } = props;\n    const [checked, setChecked] = useControlled<boolean>({\n        value: externalChecked,\n        onChange,\n    });\n\n    const checkboxRef = React.useRef<HTMLInputElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(previousChecked => !previousChecked);\n    }, [setChecked]);\n\n    const control = (\n        <TacoCheckbox\n            checked={checked}\n            className=\"group-hover/toggle:[&[aria-checked=false]]:border-gray-700 group-hover/toggle:[&[aria-checked=true]]:border-blue-700 group-hover/checkbox:[&[aria-checked=true]]:bg-blue-700\"\n            disabled={props.disabled}\n            onChange={toggle}\n            ref={checkboxRef}\n            tabIndex={-1}\n        />\n    );\n\n    return <ToggleItem {...attributes} control={control} controlRef={checkboxRef} ref={ref} onToggle={toggle} />;\n});\n"],"names":["React","Switch","TacoSwitch","TacoCheckbox"],"mappings":";;;;;;AAgBA,MAAM,aAAaA,eAAM,WAAwC,SAAS,OAAO,OAAO,KAAK;AACzF,QAAM,EAAE,YAAY,UAAU,GAAG,eAAe;AAEhD,WAAS,YAAY,OAAyC;AAC1D,QAAI,OAAO,MAAM,YAAY,YAAY;AACrC,YAAM,QAAQ,KAAK;AAAA,IACvB;AAEA,QAAI,MAAM,sBAAsB;AAC5B;AAAA,IACJ;AAGA,QAAI,MAAM,WAAW,WAAW,WAAW,CAAC,WAAW,SAAS,SAAS,MAAM,MAAqB,GAAG;AACnG,eAAA;AAAA,IACJ;AAAA,EACJ;AAEA,WAAS,cAAc,OAA4C;AAC/D,QAAI,OAAO,MAAM,cAAc,YAAY;AACvC,YAAM,UAAU,KAAK;AAAA,IACzB;AAEA,QAAI,MAAM,sBAAsB;AAC5B;AAAA,IACJ;AAGA,SACK,MAAM,QAAQ,WAAW,MAAM,QAAQ,QACxC,MAAM,WAAW,WAAW,WAC5B,CAAC,WAAW,SAAS,SAAS,MAAM,MAAqB,GAC3D;AACE,eAAA;AAAA,IACJ;AAAA,EACJ;AAEA,QAAM,YAAY,GAAG,gBAAgB,MAAM,SAAS;AACpD,SAAOA,+BAAA,cAAC,QAAM,GAAG,YAAY,WAAsB,SAAS,aAAa,WAAW,eAAe,IAAA,CAAU;AACjH,CAAC;AAIM,MAAM,SAASA,eAAM,WAA4C,SAASC,QAAO,OAAO,KAAK;AAChG,QAAM,EAAE,SAAS,iBAAiB,UAAU,GAAG,eAAe;AAC9D,QAAM,CAAC,SAAS,UAAU,IAAI,cAAuB;AAAA,IACjD,OAAO;AAAA,IACP;AAAA,EAAA,CACH;AAED,QAAM,YAAYD,eAAM,OAAyB,IAAI;AAErD,QAAM,SAASA,eAAM,YAAY,MAAM;AACnC,eAAW,CAAA,oBAAmB,CAAC,eAAe;AAAA,EAClD,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,UACFA,+BAAA;AAAA,IAACE;AAAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAChB,UAAU;AAAA,MACV,KAAK;AAAA,MACL,UAAU;AAAA,IAAA;AAAA,EAAA;AAIlB,SAAOF,+BAAA,cAAC,cAAY,GAAG,YAAY,SAAkB,YAAY,WAAW,KAAU,UAAU,OAAA,CAAQ;AAC5G,CAAC;AAIM,MAAM,WAAWA,eAAM,WAA8C,SAASC,QAAO,OAAO,KAAK;AACpG,QAAM,EAAE,SAAS,iBAAiB,UAAU,GAAG,eAAe;AAC9D,QAAM,CAAC,SAAS,UAAU,IAAI,cAAuB;AAAA,IACjD,OAAO;AAAA,IACP;AAAA,EAAA,CACH;AAED,QAAM,cAAcD,eAAM,OAAyB,IAAI;AAEvD,QAAM,SAASA,eAAM,YAAY,MAAM;AACnC,eAAW,CAAA,oBAAmB,CAAC,eAAe;AAAA,EAClD,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,UACFA,+BAAA;AAAA,IAACG;AAAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAChB,UAAU;AAAA,MACV,KAAK;AAAA,MACL,UAAU;AAAA,IAAA;AAAA,EAAA;AAIlB,SAAOH,+BAAA,cAAC,cAAY,GAAG,YAAY,SAAkB,YAAY,aAAa,KAAU,UAAU,OAAA,CAAQ;AAC9G,CAAC;"}

package/dist/components/Listbox/Listbox.cjs

@@ -30,11 +30,7 @@ const Listbox = React__namespace.forwardRef(function Listbox2(props, ref) {
     ScrollableList.ScrollableList,
     {
       ...list,
-      style: {
-        ...list.style,
-        maxHeight: "calc(12rem + 2px)"
-        /* (6 * option height) + listbox border */
-      }
+      style: { ...list.style, maxHeight: "calc(12rem + 2px)" }
     }
   ), /* @__PURE__ */ React__namespace.createElement("input", { ...input, className: "hidden", type: "text" }));
 });
@@ -48,6 +44,7 @@ const MultiListbox = React__namespace.forwardRef(function Listbox3(props, ref) {
       ...list,
       style: {
         ...list.style,
+        // (6 * option height) + listbox border + ALL_OPTIONS bottom border
         maxHeight: "calc(12rem + 2px + 2px)"
       }
     }

package/dist/components/Listbox/Listbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Listbox.cjs","sources":["../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type { ScrollableListItemValue, ScrollableListItem } from './ScrollableList';\nimport { ScrollableList } from './ScrollableList';\nimport { useListbox } from './useListbox';\nimport { useMultiListbox } from './useMultiListbox';\n\nexport type ListboxItem = ScrollableListItem;\nexport type ListboxValue = ScrollableListItemValue;\n\nexport type ListboxTexts = {\n    /**\n     * Text displayed in the listbox if no data provided.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    empty: string;\n    /**\n     * Text displayed in the listbox to indicate the data is loading.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    loading: string;\n    /**\n     * The first option displayed in a multiselect listbox that selects all available options.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    allOption: string;\n};\n\nexport type ListboxProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> &\n    Omit<React.InputHTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'value'> & {\n        /** Data indicating the options in listbox */\n        data?: ListboxItem[];\n        /**\n         * Initial value of the listbox.\n         * This is used when listbox is mounted, if no value is provided.\n         * *Note* that listbox is a controlled component, setting this will also trigger the `onChange` event\n         */\n        defaultValue?: ListboxValue;\n        /** Set what value should have an empty option in listbox */\n        emptyValue?: ListboxValue;\n        /** Draws attention to the listbox by changing its style and making it visually prominent */\n        highlighted?: boolean;\n        /** Whether the input is in an invalid state */\n        invalid?: boolean;\n        /**\n         * Shows a loading indicator with a text next to it.\n         * Read more about how to provide the text in [Provider](component:provider) component\n         */\n        loading?: boolean;\n        /**\n         * Value of the listbox representing the selected item.\n         * It needs to be an existing value from the provided data\n         */\n        value?: ListboxValue;\n    };\n\nexport const Listbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useListbox(otherProps, ref);\n    const className = cn('relative inline-flex w-full bg-white', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{ ...list.style, maxHeight: 'calc(12rem + 2px)' /* (6 * option height) + listbox border */ }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n\nexport const MultiListbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useMultiListbox(otherProps, ref);\n    const className = cn('relative inline-flex w-full bg-white', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{\n                    ...list.style,\n                    maxHeight: 'calc(12rem + 2px + 2px)' /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */,\n                }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n"],"names":["React","Listbox","useListbox","ScrollableList","useMultiListbox"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAyDO,MAAM,UAAUA,iBAAM,WAAW,SAASC,SAAQ,OAAqB,KAAkC;AAC5G,QAAM,EAAE,WAAW,mBAAmB,GAAG,eAAe;AACxD,QAAM,EAAE,MAAM,MAAA,IAAUC,WAAAA,WAAW,YAAY,GAAG;AAClD,QAAM,YAAY,GAAG,wCAAwC,iBAAiB;AAE9E,SACIF,iCAAA,cAAC,QAAA,EAAK,aAAU,WAAU,aACtBA,iCAAA;AAAA,IAACG,eAAAA;AAAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,OAAO;AAAA,QAAE,GAAG,KAAK;AAAA,QAAO,WAAW;AAAA;AAAA,MAAA;AAAA,IAA+D;AAAA,EAAA,kDAErG,SAAA,EAAO,GAAG,OAAO,WAAU,UAAS,MAAK,OAAA,CAAO,CACrD;AAER,CAAC;AAEM,MAAM,eAAeH,iBAAM,WAAW,SAASC,SAAQ,OAAqB,KAAkC;AACjH,QAAM,EAAE,WAAW,mBAAmB,GAAG,eAAe;AACxD,QAAM,EAAE,MAAM,MAAA,IAAUG,gBAAAA,gBAAgB,YAAY,GAAG;AACvD,QAAM,YAAY,GAAG,wCAAwC,iBAAiB;AAE9E,SACIJ,iCAAA,cAAC,QAAA,EAAK,aAAU,WAAU,aACtBA,iCAAA;AAAA,IAACG,eAAAA;AAAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,OAAO;AAAA,QACH,GAAG,KAAK;AAAA,QACR,WAAW;AAAA,MAAA;AAAA,IACf;AAAA,EAAA,kDAEH,SAAA,EAAO,GAAG,OAAO,WAAU,UAAS,MAAK,OAAA,CAAO,CACrD;AAER,CAAC;;;"}
+{"version":3,"file":"Listbox.cjs","sources":["../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type { ScrollableListItemValue, ScrollableListItem } from './ScrollableList';\nimport { ScrollableList } from './ScrollableList';\nimport { useListbox } from './useListbox';\nimport { useMultiListbox } from './useMultiListbox';\n\nexport type ListboxItem = ScrollableListItem;\nexport type ListboxValue = ScrollableListItemValue;\n\nexport type ListboxTexts = {\n    /**\n     * Text displayed in the listbox if no data provided.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    empty: string;\n    /**\n     * Text displayed in the listbox to indicate the data is loading.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    loading: string;\n    /**\n     * The first option displayed in a multiselect listbox that selects all available options.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    allOption: string;\n};\n\nexport type ListboxProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> &\n    Omit<React.InputHTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'value'> & {\n        /** Data indicating the options in listbox */\n        data?: ListboxItem[];\n        /**\n         * Initial value of the listbox.\n         * This is used when listbox is mounted, if no value is provided.\n         * *Note* that listbox is a controlled component, setting this will also trigger the `onChange` event\n         */\n        defaultValue?: ListboxValue;\n        /** Set what value should have an empty option in listbox */\n        emptyValue?: ListboxValue;\n        /** Draws attention to the listbox by changing its style and making it visually prominent */\n        highlighted?: boolean;\n        /** Whether the input is in an invalid state */\n        invalid?: boolean;\n        /**\n         * Shows a loading indicator with a text next to it.\n         * Read more about how to provide the text in [Provider](component:provider) component\n         */\n        loading?: boolean;\n        /**\n         * Value of the listbox representing the selected item.\n         * It needs to be an existing value from the provided data\n         */\n        value?: ListboxValue;\n    };\n\nexport const Listbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useListbox(otherProps, ref);\n    const className = cn('relative inline-flex w-full bg-white', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                // (6 * option height) + listbox border\n                style={{ ...list.style, maxHeight: 'calc(12rem + 2px)' }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n\nexport const MultiListbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useMultiListbox(otherProps, ref);\n    const className = cn('relative inline-flex w-full bg-white', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{\n                    ...list.style,\n                    // (6 * option height) + listbox border + ALL_OPTIONS bottom border\n                    maxHeight: 'calc(12rem + 2px + 2px)',\n                }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n"],"names":["React","Listbox","useListbox","ScrollableList","useMultiListbox"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAyDO,MAAM,UAAUA,iBAAM,WAAW,SAASC,SAAQ,OAAqB,KAAkC;AAC5G,QAAM,EAAE,WAAW,mBAAmB,GAAG,eAAe;AACxD,QAAM,EAAE,MAAM,MAAA,IAAUC,WAAAA,WAAW,YAAY,GAAG;AAClD,QAAM,YAAY,GAAG,wCAAwC,iBAAiB;AAE9E,SACIF,iCAAA,cAAC,QAAA,EAAK,aAAU,WAAU,aACtBA,iCAAA;AAAA,IAACG,eAAAA;AAAAA,IAAA;AAAA,MACI,GAAG;AAAA,MAEJ,OAAO,EAAE,GAAG,KAAK,OAAO,WAAW,oBAAA;AAAA,IAAoB;AAAA,EAAA,kDAE1D,SAAA,EAAO,GAAG,OAAO,WAAU,UAAS,MAAK,OAAA,CAAO,CACrD;AAER,CAAC;AAEM,MAAM,eAAeH,iBAAM,WAAW,SAASC,SAAQ,OAAqB,KAAkC;AACjH,QAAM,EAAE,WAAW,mBAAmB,GAAG,eAAe;AACxD,QAAM,EAAE,MAAM,MAAA,IAAUG,gBAAAA,gBAAgB,YAAY,GAAG;AACvD,QAAM,YAAY,GAAG,wCAAwC,iBAAiB;AAE9E,SACIJ,iCAAA,cAAC,QAAA,EAAK,aAAU,WAAU,aACtBA,iCAAA;AAAA,IAACG,eAAAA;AAAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,OAAO;AAAA,QACH,GAAG,KAAK;AAAA;AAAA,QAER,WAAW;AAAA,MAAA;AAAA,IACf;AAAA,EAAA,kDAEH,SAAA,EAAO,GAAG,OAAO,WAAU,UAAS,MAAK,OAAA,CAAO,CACrD;AAER,CAAC;;;"}

package/dist/components/Listbox/Listbox.js

@@ -11,11 +11,7 @@ const Listbox = React.forwardRef(function Listbox2(props, ref) {
     ScrollableList,
     {
       ...list,
-      style: {
-        ...list.style,
-        maxHeight: "calc(12rem + 2px)"
-        /* (6 * option height) + listbox border */
-      }
+      style: { ...list.style, maxHeight: "calc(12rem + 2px)" }
     }
   ), /* @__PURE__ */ React.createElement("input", { ...input, className: "hidden", type: "text" }));
 });
@@ -29,6 +25,7 @@ const MultiListbox = React.forwardRef(function Listbox3(props, ref) {
       ...list,
       style: {
         ...list.style,
+        // (6 * option height) + listbox border + ALL_OPTIONS bottom border
         maxHeight: "calc(12rem + 2px + 2px)"
       }
     }

package/dist/components/Listbox/Listbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Listbox.js","sources":["../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type { ScrollableListItemValue, ScrollableListItem } from './ScrollableList';\nimport { ScrollableList } from './ScrollableList';\nimport { useListbox } from './useListbox';\nimport { useMultiListbox } from './useMultiListbox';\n\nexport type ListboxItem = ScrollableListItem;\nexport type ListboxValue = ScrollableListItemValue;\n\nexport type ListboxTexts = {\n    /**\n     * Text displayed in the listbox if no data provided.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    empty: string;\n    /**\n     * Text displayed in the listbox to indicate the data is loading.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    loading: string;\n    /**\n     * The first option displayed in a multiselect listbox that selects all available options.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    allOption: string;\n};\n\nexport type ListboxProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> &\n    Omit<React.InputHTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'value'> & {\n        /** Data indicating the options in listbox */\n        data?: ListboxItem[];\n        /**\n         * Initial value of the listbox.\n         * This is used when listbox is mounted, if no value is provided.\n         * *Note* that listbox is a controlled component, setting this will also trigger the `onChange` event\n         */\n        defaultValue?: ListboxValue;\n        /** Set what value should have an empty option in listbox */\n        emptyValue?: ListboxValue;\n        /** Draws attention to the listbox by changing its style and making it visually prominent */\n        highlighted?: boolean;\n        /** Whether the input is in an invalid state */\n        invalid?: boolean;\n        /**\n         * Shows a loading indicator with a text next to it.\n         * Read more about how to provide the text in [Provider](component:provider) component\n         */\n        loading?: boolean;\n        /**\n         * Value of the listbox representing the selected item.\n         * It needs to be an existing value from the provided data\n         */\n        value?: ListboxValue;\n    };\n\nexport const Listbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useListbox(otherProps, ref);\n    const className = cn('relative inline-flex w-full bg-white', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{ ...list.style, maxHeight: 'calc(12rem + 2px)' /* (6 * option height) + listbox border */ }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n\nexport const MultiListbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useMultiListbox(otherProps, ref);\n    const className = cn('relative inline-flex w-full bg-white', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{\n                    ...list.style,\n                    maxHeight: 'calc(12rem + 2px + 2px)' /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */,\n                }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n"],"names":["Listbox"],"mappings":";;;;;AAyDO,MAAM,UAAU,MAAM,WAAW,SAASA,SAAQ,OAAqB,KAAkC;AAC5G,QAAM,EAAE,WAAW,mBAAmB,GAAG,eAAe;AACxD,QAAM,EAAE,MAAM,MAAA,IAAU,WAAW,YAAY,GAAG;AAClD,QAAM,YAAY,GAAG,wCAAwC,iBAAiB;AAE9E,SACI,sBAAA,cAAC,QAAA,EAAK,aAAU,WAAU,aACtB,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,OAAO;AAAA,QAAE,GAAG,KAAK;AAAA,QAAO,WAAW;AAAA;AAAA,MAAA;AAAA,IAA+D;AAAA,EAAA,uCAErG,SAAA,EAAO,GAAG,OAAO,WAAU,UAAS,MAAK,OAAA,CAAO,CACrD;AAER,CAAC;AAEM,MAAM,eAAe,MAAM,WAAW,SAASA,SAAQ,OAAqB,KAAkC;AACjH,QAAM,EAAE,WAAW,mBAAmB,GAAG,eAAe;AACxD,QAAM,EAAE,MAAM,MAAA,IAAU,gBAAgB,YAAY,GAAG;AACvD,QAAM,YAAY,GAAG,wCAAwC,iBAAiB;AAE9E,SACI,sBAAA,cAAC,QAAA,EAAK,aAAU,WAAU,aACtB,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,OAAO;AAAA,QACH,GAAG,KAAK;AAAA,QACR,WAAW;AAAA,MAAA;AAAA,IACf;AAAA,EAAA,uCAEH,SAAA,EAAO,GAAG,OAAO,WAAU,UAAS,MAAK,OAAA,CAAO,CACrD;AAER,CAAC;"}
+{"version":3,"file":"Listbox.js","sources":["../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import cn from 'clsx';\nimport * as React from 'react';\n\nimport type { ScrollableListItemValue, ScrollableListItem } from './ScrollableList';\nimport { ScrollableList } from './ScrollableList';\nimport { useListbox } from './useListbox';\nimport { useMultiListbox } from './useMultiListbox';\n\nexport type ListboxItem = ScrollableListItem;\nexport type ListboxValue = ScrollableListItemValue;\n\nexport type ListboxTexts = {\n    /**\n     * Text displayed in the listbox if no data provided.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    empty: string;\n    /**\n     * Text displayed in the listbox to indicate the data is loading.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    loading: string;\n    /**\n     * The first option displayed in a multiselect listbox that selects all available options.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    allOption: string;\n};\n\nexport type ListboxProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> &\n    Omit<React.InputHTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'value'> & {\n        /** Data indicating the options in listbox */\n        data?: ListboxItem[];\n        /**\n         * Initial value of the listbox.\n         * This is used when listbox is mounted, if no value is provided.\n         * *Note* that listbox is a controlled component, setting this will also trigger the `onChange` event\n         */\n        defaultValue?: ListboxValue;\n        /** Set what value should have an empty option in listbox */\n        emptyValue?: ListboxValue;\n        /** Draws attention to the listbox by changing its style and making it visually prominent */\n        highlighted?: boolean;\n        /** Whether the input is in an invalid state */\n        invalid?: boolean;\n        /**\n         * Shows a loading indicator with a text next to it.\n         * Read more about how to provide the text in [Provider](component:provider) component\n         */\n        loading?: boolean;\n        /**\n         * Value of the listbox representing the selected item.\n         * It needs to be an existing value from the provided data\n         */\n        value?: ListboxValue;\n    };\n\nexport const Listbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useListbox(otherProps, ref);\n    const className = cn('relative inline-flex w-full bg-white', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                // (6 * option height) + listbox border\n                style={{ ...list.style, maxHeight: 'calc(12rem + 2px)' }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n\nexport const MultiListbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useMultiListbox(otherProps, ref);\n    const className = cn('relative inline-flex w-full bg-white', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{\n                    ...list.style,\n                    // (6 * option height) + listbox border + ALL_OPTIONS bottom border\n                    maxHeight: 'calc(12rem + 2px + 2px)',\n                }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n"],"names":["Listbox"],"mappings":";;;;;AAyDO,MAAM,UAAU,MAAM,WAAW,SAASA,SAAQ,OAAqB,KAAkC;AAC5G,QAAM,EAAE,WAAW,mBAAmB,GAAG,eAAe;AACxD,QAAM,EAAE,MAAM,MAAA,IAAU,WAAW,YAAY,GAAG;AAClD,QAAM,YAAY,GAAG,wCAAwC,iBAAiB;AAE9E,SACI,sBAAA,cAAC,QAAA,EAAK,aAAU,WAAU,aACtB,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MAEJ,OAAO,EAAE,GAAG,KAAK,OAAO,WAAW,oBAAA;AAAA,IAAoB;AAAA,EAAA,uCAE1D,SAAA,EAAO,GAAG,OAAO,WAAU,UAAS,MAAK,OAAA,CAAO,CACrD;AAER,CAAC;AAEM,MAAM,eAAe,MAAM,WAAW,SAASA,SAAQ,OAAqB,KAAkC;AACjH,QAAM,EAAE,WAAW,mBAAmB,GAAG,eAAe;AACxD,QAAM,EAAE,MAAM,MAAA,IAAU,gBAAgB,YAAY,GAAG;AACvD,QAAM,YAAY,GAAG,wCAAwC,iBAAiB;AAE9E,SACI,sBAAA,cAAC,QAAA,EAAK,aAAU,WAAU,aACtB,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,OAAO;AAAA,QACH,GAAG,KAAK;AAAA;AAAA,QAER,WAAW;AAAA,MAAA;AAAA,IACf;AAAA,EAAA,uCAEH,SAAA,EAAO,GAAG,OAAO,WAAU,UAAS,MAAK,OAAA,CAAO,CACrD;AAER,CAAC;"}

package/dist/components/Listbox/useListbox.cjs

@@ -66,7 +66,7 @@ const useListbox = ({
   }, [data]);
   const handleListboxKeyDown = (event) => {
     const charKey = event.key;
-    if (charKey.length === 1 && /(\w)/g.test(charKey)) {
+    if (charKey.length === 1 && /(\w)/gu.test(charKey)) {
       const nextIndex = getNextIndex(charKey);
       if (nextIndex > -1 && nextIndex !== currentIndex) {
         setInputValueByIndex(nextIndex);

package/dist/components/Listbox/useListbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useListbox.cjs","sources":["../../../src/components/Listbox/useListbox.tsx"],"sourcesContent":["import { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport { useMergedRef } from '@/hooks/useMergedRef';\n\nimport type { ListboxProps } from './Listbox';\nimport type { ScrollableListProps } from './ScrollableList';\nimport { useTypeahead } from './useTypeahead';\nimport { setInputValueByRef, getIndexFromValue, findByValue, getActiveDescendant, useFlattenedData, sanitizeItem } from './util';\n\ntype useListbox = {\n    list: ScrollableListProps;\n    input: Omit<React.HTMLAttributes<HTMLInputElement>, 'defaultValue'>;\n};\n\nexport const useListbox = (\n    {\n        data: externalData = [],\n        defaultValue,\n        disabled,\n        emptyValue,\n        id: nativeId,\n        invalid,\n        name,\n        onChange,\n        onFocus,\n        onKeyDown,\n        value = emptyValue,\n        ...otherProps\n    }: ListboxProps,\n    ref: React.Ref<HTMLInputElement>\n): useListbox => {\n    const data = useFlattenedData(emptyValue === undefined ? externalData : [{ text: '', value: emptyValue }, ...externalData]);\n    const id = React.useMemo(() => nativeId || nanoid(), [nativeId]);\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const currentIndex = value === undefined ? undefined : getIndexFromValue(data, value);\n    const { getNextIndex } = useTypeahead({ data, currentIndex });\n\n    const setInputValueByIndex = (index: number | undefined): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                setInputValueByRef(inputRef.current, option.value);\n            }\n        }\n    };\n\n    const handleListboxChange = (index: number): void => {\n        setInputValueByIndex(index);\n    };\n\n    React.useEffect(() => {\n        if (data.length && currentIndex === undefined) {\n            if (defaultValue === undefined) {\n                setInputValueByIndex(0);\n            } else {\n                const defaultValueIndex = getIndexFromValue(data, defaultValue);\n\n                if (defaultValueIndex !== undefined) {\n                    setInputValueByIndex(defaultValueIndex);\n                }\n            }\n        }\n    }, [data]);\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n        const charKey = event.key;\n\n        // event.key always returns the whole string (String.fromCharCode(event.keyCode) does not)\n        // We need to filter out only alphabetical or numeric letters, that's why that condition has been changed\n        if (charKey.length === 1 && /(\\w)/g.test(charKey)) {\n            const nextIndex = getNextIndex(charKey);\n\n            if (nextIndex > -1 && nextIndex !== currentIndex) {\n                setInputValueByIndex(nextIndex);\n            }\n            return;\n        }\n\n        if (onKeyDown) {\n            event.persist();\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxFocus = (event: React.FocusEvent<HTMLElement>): void => {\n        if (currentIndex === undefined && data.length) {\n            setInputValueByIndex(0);\n        }\n\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (onChange) {\n            const item = findByValue(data, 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(data.find(i => i.path === lastPath));\n                });\n            }\n\n            onChange(event);\n        }\n    };\n\n    const list: ScrollableListProps = {\n        ...otherProps,\n        'aria-activedescendant': getActiveDescendant(data, currentIndex, id),\n        data,\n        disabled,\n        id,\n        invalid,\n        onChange: handleListboxChange,\n        onFocus: handleListboxFocus,\n        onKeyDown: handleListboxKeyDown,\n        scrollOnFocus: true,\n        tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,\n        value: currentIndex,\n    };\n\n    const input = {\n        name,\n        onChange: handleInputChange,\n        ref: inputRef,\n        tabIndex: -1,\n        value: value ?? '',\n    };\n\n    return { list, input };\n};\n"],"names":["useFlattenedData","React","nanoid","useMergedRef","getIndexFromValue","useTypeahead","setInputValueByRef","findByValue","sanitizeItem","i","getActiveDescendant"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAeO,MAAM,aAAa,CACtB;AAAA,EACI,MAAM,eAAe,CAAA;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACP,GACA,QACa;AACb,QAAM,OAAOA,KAAAA,iBAAiB,eAAe,SAAY,eAAe,CAAC,EAAE,MAAM,IAAI,OAAO,WAAA,GAAc,GAAG,YAAY,CAAC;AAC1H,QAAM,KAAKC,iBAAM,QAAQ,MAAM,YAAYC,cAAA,GAAU,CAAC,QAAQ,CAAC;AAC/D,QAAM,WAAWC,aAAAA,aAA+B,GAAG;AACnD,QAAM,eAAe,UAAU,SAAY,SAAYC,KAAAA,kBAAkB,MAAM,KAAK;AACpF,QAAM,EAAE,aAAA,IAAiBC,aAAAA,aAAa,EAAE,MAAM,cAAc;AAE5D,QAAM,uBAAuB,CAAC,UAAoC;AAC9D,QAAI,UAAU,QAAW;AACrB,YAAM,SAAS,KAAK,KAAK;AAEzB,UAAI,UAAU,CAAC,OAAO,UAAU;AAC5BC,aAAAA,mBAAmB,SAAS,SAAS,OAAO,KAAK;AAAA,MACrD;AAAA,IACJ;AAAA,EACJ;AAEA,QAAM,sBAAsB,CAAC,UAAwB;AACjD,yBAAqB,KAAK;AAAA,EAC9B;AAEAL,mBAAM,UAAU,MAAM;AAClB,QAAI,KAAK,UAAU,iBAAiB,QAAW;AAC3C,UAAI,iBAAiB,QAAW;AAC5B,6BAAqB,CAAC;AAAA,MAC1B,OAAO;AACH,cAAM,oBAAoBG,KAAAA,kBAAkB,MAAM,YAAY;AAE9D,YAAI,sBAAsB,QAAW;AACjC,+BAAqB,iBAAiB;AAAA,QAC1C;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,uBAAuB,CAAC,UAAkD;AAC5E,UAAM,UAAU,MAAM;AAItB,QAAI,QAAQ,WAAW,KAAK,QAAQ,KAAK,OAAO,GAAG;AAC/C,YAAM,YAAY,aAAa,OAAO;AAEtC,UAAI,YAAY,MAAM,cAAc,cAAc;AAC9C,6BAAqB,SAAS;AAAA,MAClC;AACA;AAAA,IACJ;AAEA,QAAI,WAAW;AACX,YAAM,QAAA;AACN,gBAAU,KAAK;AAAA,IACnB;AAAA,EACJ;AAEA,QAAM,qBAAqB,CAAC,UAA+C;AACvE,QAAI,iBAAiB,UAAa,KAAK,QAAQ;AAC3C,2BAAqB,CAAC;AAAA,IAC1B;AAEA,QAAI,SAAS;AACT,YAAM,QAAA;AACN,cAAQ,KAAK;AAAA,IACjB;AAAA,EACJ;AAEA,QAAM,oBAAoB,CAAC,UAAqD;AAC5E,UAAM,QAAA;AAEN,QAAI,UAAU;AACV,YAAM,OAAOG,KAAAA,YAAY,MAAM,MAAM,OAAO,KAAK;AAChD,YAAc,SAASC,KAAAA,aAAa,IAAI;AAEzC,YAAM,UAAU,MAAM,MAAM,MAAM,GAAG,KAAK,CAAA;AAE1C,UAAI,QAAQ,SAAS,GAAG;AAEpB,gBAAQ,IAAA;AAER,YAAI;AAEH,cAAc,OAAO,UAAU,QAAQ,IAAI,CAAA,MAAK;AAC7C,qBAAW,WAAW,CAAC,UAAU,CAAC,EAAE,KAAK,GAAG,IAAI;AAChD,iBAAOA,KAAAA,aAAa,KAAK,KAAK,CAAAC,OAAKA,GAAE,SAAS,QAAQ,CAAC;AAAA,QAC3D,CAAC;AAAA,MACL;AAEA,eAAS,KAAK;AAAA,IAClB;AAAA,EACJ;AAEA,QAAM,OAA4B;AAAA,IAC9B,GAAG;AAAA,IACH,yBAAyBC,KAAAA,oBAAoB,MAAM,cAAc,EAAE;AAAA,IACnE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAe;AAAA,IACf,UAAU,WAAW,KAAK,WAAW,WAAW,WAAW,WAAW;AAAA,IACtE,OAAO;AAAA,EAAA;AAGX,QAAM,QAAQ;AAAA,IACV;AAAA,IACA,UAAU;AAAA,IACV,KAAK;AAAA,IACL,UAAU;AAAA,IACV,OAAO,SAAS;AAAA,EAAA;AAGpB,SAAO,EAAE,MAAM,MAAA;AACnB;;"}
+{"version":3,"file":"useListbox.cjs","sources":["../../../src/components/Listbox/useListbox.tsx"],"sourcesContent":["import { nanoid } from 'nanoid';\nimport * as React from 'react';\n\nimport { useMergedRef } from '@/hooks/useMergedRef';\n\nimport type { ListboxProps } from './Listbox';\nimport type { ScrollableListProps } from './ScrollableList';\nimport { useTypeahead } from './useTypeahead';\nimport { setInputValueByRef, getIndexFromValue, findByValue, getActiveDescendant, useFlattenedData, sanitizeItem } from './util';\n\ntype useListbox = {\n    list: ScrollableListProps;\n    input: Omit<React.HTMLAttributes<HTMLInputElement>, 'defaultValue'>;\n};\n\nexport const useListbox = (\n    {\n        data: externalData = [],\n        defaultValue,\n        disabled,\n        emptyValue,\n        id: nativeId,\n        invalid,\n        name,\n        onChange,\n        onFocus,\n        onKeyDown,\n        value = emptyValue,\n        ...otherProps\n    }: ListboxProps,\n    ref: React.Ref<HTMLInputElement>\n): useListbox => {\n    const data = useFlattenedData(emptyValue === undefined ? externalData : [{ text: '', value: emptyValue }, ...externalData]);\n    const id = React.useMemo(() => nativeId || nanoid(), [nativeId]);\n    const inputRef = useMergedRef<HTMLInputElement>(ref);\n    const currentIndex = value === undefined ? undefined : getIndexFromValue(data, value);\n    const { getNextIndex } = useTypeahead({ data, currentIndex });\n\n    const setInputValueByIndex = (index: number | undefined): void => {\n        if (index !== undefined) {\n            const option = data[index];\n\n            if (option && !option.disabled) {\n                setInputValueByRef(inputRef.current, option.value);\n            }\n        }\n    };\n\n    const handleListboxChange = (index: number): void => {\n        setInputValueByIndex(index);\n    };\n\n    React.useEffect(() => {\n        if (data.length && currentIndex === undefined) {\n            if (defaultValue === undefined) {\n                setInputValueByIndex(0);\n            } else {\n                const defaultValueIndex = getIndexFromValue(data, defaultValue);\n\n                if (defaultValueIndex !== undefined) {\n                    setInputValueByIndex(defaultValueIndex);\n                }\n            }\n        }\n    }, [data]);\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n        const charKey = event.key;\n\n        // event.key always returns the whole string (String.fromCharCode(event.keyCode) does not)\n        // We need to filter out only alphabetical or numeric letters, that's why that condition has been changed\n        if (charKey.length === 1 && /(\\w)/gu.test(charKey)) {\n            const nextIndex = getNextIndex(charKey);\n\n            if (nextIndex > -1 && nextIndex !== currentIndex) {\n                setInputValueByIndex(nextIndex);\n            }\n            return;\n        }\n\n        if (onKeyDown) {\n            event.persist();\n            onKeyDown(event);\n        }\n    };\n\n    const handleListboxFocus = (event: React.FocusEvent<HTMLElement>): void => {\n        if (currentIndex === undefined && data.length) {\n            setInputValueByIndex(0);\n        }\n\n        if (onFocus) {\n            event.persist();\n            onFocus(event);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (onChange) {\n            const item = findByValue(data, 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(data.find(i => i.path === lastPath));\n                });\n            }\n\n            onChange(event);\n        }\n    };\n\n    const list: ScrollableListProps = {\n        ...otherProps,\n        'aria-activedescendant': getActiveDescendant(data, currentIndex, id),\n        data,\n        disabled,\n        id,\n        invalid,\n        onChange: handleListboxChange,\n        onFocus: handleListboxFocus,\n        onKeyDown: handleListboxKeyDown,\n        scrollOnFocus: true,\n        tabIndex: disabled ? -1 : otherProps.tabIndex ? otherProps.tabIndex : 0,\n        value: currentIndex,\n    };\n\n    const input = {\n        name,\n        onChange: handleInputChange,\n        ref: inputRef,\n        tabIndex: -1,\n        value: value ?? '',\n    };\n\n    return { list, input };\n};\n"],"names":["useFlattenedData","React","nanoid","useMergedRef","getIndexFromValue","useTypeahead","setInputValueByRef","findByValue","sanitizeItem","i","getActiveDescendant"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAeO,MAAM,aAAa,CACtB;AAAA,EACI,MAAM,eAAe,CAAA;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACP,GACA,QACa;AACb,QAAM,OAAOA,KAAAA,iBAAiB,eAAe,SAAY,eAAe,CAAC,EAAE,MAAM,IAAI,OAAO,WAAA,GAAc,GAAG,YAAY,CAAC;AAC1H,QAAM,KAAKC,iBAAM,QAAQ,MAAM,YAAYC,cAAA,GAAU,CAAC,QAAQ,CAAC;AAC/D,QAAM,WAAWC,aAAAA,aAA+B,GAAG;AACnD,QAAM,eAAe,UAAU,SAAY,SAAYC,KAAAA,kBAAkB,MAAM,KAAK;AACpF,QAAM,EAAE,aAAA,IAAiBC,aAAAA,aAAa,EAAE,MAAM,cAAc;AAE5D,QAAM,uBAAuB,CAAC,UAAoC;AAC9D,QAAI,UAAU,QAAW;AACrB,YAAM,SAAS,KAAK,KAAK;AAEzB,UAAI,UAAU,CAAC,OAAO,UAAU;AAC5BC,aAAAA,mBAAmB,SAAS,SAAS,OAAO,KAAK;AAAA,MACrD;AAAA,IACJ;AAAA,EACJ;AAEA,QAAM,sBAAsB,CAAC,UAAwB;AACjD,yBAAqB,KAAK;AAAA,EAC9B;AAEAL,mBAAM,UAAU,MAAM;AAClB,QAAI,KAAK,UAAU,iBAAiB,QAAW;AAC3C,UAAI,iBAAiB,QAAW;AAC5B,6BAAqB,CAAC;AAAA,MAC1B,OAAO;AACH,cAAM,oBAAoBG,KAAAA,kBAAkB,MAAM,YAAY;AAE9D,YAAI,sBAAsB,QAAW;AACjC,+BAAqB,iBAAiB;AAAA,QAC1C;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,uBAAuB,CAAC,UAAkD;AAC5E,UAAM,UAAU,MAAM;AAItB,QAAI,QAAQ,WAAW,KAAK,SAAS,KAAK,OAAO,GAAG;AAChD,YAAM,YAAY,aAAa,OAAO;AAEtC,UAAI,YAAY,MAAM,cAAc,cAAc;AAC9C,6BAAqB,SAAS;AAAA,MAClC;AACA;AAAA,IACJ;AAEA,QAAI,WAAW;AACX,YAAM,QAAA;AACN,gBAAU,KAAK;AAAA,IACnB;AAAA,EACJ;AAEA,QAAM,qBAAqB,CAAC,UAA+C;AACvE,QAAI,iBAAiB,UAAa,KAAK,QAAQ;AAC3C,2BAAqB,CAAC;AAAA,IAC1B;AAEA,QAAI,SAAS;AACT,YAAM,QAAA;AACN,cAAQ,KAAK;AAAA,IACjB;AAAA,EACJ;AAEA,QAAM,oBAAoB,CAAC,UAAqD;AAC5E,UAAM,QAAA;AAEN,QAAI,UAAU;AACV,YAAM,OAAOG,KAAAA,YAAY,MAAM,MAAM,OAAO,KAAK;AAChD,YAAc,SAASC,KAAAA,aAAa,IAAI;AAEzC,YAAM,UAAU,MAAM,MAAM,MAAM,GAAG,KAAK,CAAA;AAE1C,UAAI,QAAQ,SAAS,GAAG;AAEpB,gBAAQ,IAAA;AAER,YAAI;AAEH,cAAc,OAAO,UAAU,QAAQ,IAAI,CAAA,MAAK;AAC7C,qBAAW,WAAW,CAAC,UAAU,CAAC,EAAE,KAAK,GAAG,IAAI;AAChD,iBAAOA,KAAAA,aAAa,KAAK,KAAK,CAAAC,OAAKA,GAAE,SAAS,QAAQ,CAAC;AAAA,QAC3D,CAAC;AAAA,MACL;AAEA,eAAS,KAAK;AAAA,IAClB;AAAA,EACJ;AAEA,QAAM,OAA4B;AAAA,IAC9B,GAAG;AAAA,IACH,yBAAyBC,KAAAA,oBAAoB,MAAM,cAAc,EAAE;AAAA,IACnE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAe;AAAA,IACf,UAAU,WAAW,KAAK,WAAW,WAAW,WAAW,WAAW;AAAA,IACtE,OAAO;AAAA,EAAA;AAGX,QAAM,QAAQ;AAAA,IACV;AAAA,IACA,UAAU;AAAA,IACV,KAAK;AAAA,IACL,UAAU;AAAA,IACV,OAAO,SAAS;AAAA,EAAA;AAGpB,SAAO,EAAE,MAAM,MAAA;AACnB;;"}

package/dist/components/Listbox/useListbox.js

@@ -47,7 +47,7 @@ const useListbox = ({
   }, [data]);
   const handleListboxKeyDown = (event) => {
     const charKey = event.key;
-    if (charKey.length === 1 && /(\w)/g.test(charKey)) {
+    if (charKey.length === 1 && /(\w)/gu.test(charKey)) {
       const nextIndex = getNextIndex(charKey);
       if (nextIndex > -1 && nextIndex !== currentIndex) {
         setInputValueByIndex(nextIndex);