@frontify/fondue-components 7.0.0 → 8.0.0

package/dist/fondue-components9.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components9.js","sources":["../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretRight } from '@frontify/fondue-icons';\nimport * as RadixDropdown from '@radix-ui/react-dropdown-menu';\nimport { forwardRef, useRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { usePreventDropdownOverflow } from '#/hooks/usePreventDropdownOverflow';\nimport { syncRefs } from '#/utilities/domUtilities';\n\nimport styles from './styles/dropdown.module.scss';\n\nexport type DropdownRootProps = {\n    children?: ReactNode;\n    /**\n     * Controls the open state of the dropdown.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the dropdown changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    'data-test-id'?: string;\n};\n\nexport const DropdownRoot = ({\n    children,\n    open,\n    onOpenChange,\n    'data-test-id': dataTestId = 'fondue-dropdown',\n}: DropdownRootProps) => {\n    return (\n        <RadixDropdown.Root open={open} onOpenChange={onOpenChange} data-test-id={dataTestId}>\n            {children}\n        </RadixDropdown.Root>\n    );\n};\nDropdownRoot.displayName = 'Dropdown.Root';\n\nexport type DropdownTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default true\n     */\n    asChild?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const DropdownTrigger = (\n    {\n        asChild = true,\n        children,\n        'data-test-id': dataTestId = 'fondue-dropdown-trigger',\n        ...props\n    }: DropdownTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDropdown.Trigger asChild={asChild} data-test-id={dataTestId} ref={ref} {...props}>\n            {children}\n        </RadixDropdown.Trigger>\n    );\n};\nDropdownTrigger.displayName = 'Dropdown.Trigger';\n\nexport type DropdownContentProps = {\n    children?: ReactNode;\n    'data-test-id'?: string;\n    onOpen?: () => void;\n    onClose?: () => void;\n    /**\n     * The vertical padding around each dropdown item.\n     * @default \"comfortable\"\n     */\n    padding?: 'comfortable' | 'compact';\n    /**\n     * Defines the alignment of the dropdown.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Defines the preferred side of the dropdown. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n};\n\nexport const DropdownContent = (\n    {\n        onOpen,\n        onClose,\n        side = 'bottom',\n        padding = 'comfortable',\n        align = 'start',\n        children,\n        'data-test-id': dataTestId = 'fondue-dropdown-content',\n    }: DropdownContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const localRef = useRef(null);\n    const dropdownIsOpen = useRef(false);\n\n    const { setMaxHeight } = usePreventDropdownOverflow(localRef);\n\n    return (\n        <RadixDropdown.Portal>\n            <RadixDropdown.Content\n                align={align}\n                collisionPadding={8}\n                sideOffset={8}\n                side={side}\n                className={styles.content}\n                data-padding={padding}\n                data-test-id={dataTestId}\n                ref={localRef}\n                onCloseAutoFocus={() => {\n                    syncRefs(localRef, ref);\n                    onClose && onClose();\n                    dropdownIsOpen.current = false;\n                }}\n                onFocus={() => {\n                    if (!dropdownIsOpen.current) {\n                        setMaxHeight();\n                        syncRefs(localRef, ref);\n                        onOpen && onOpen();\n                        dropdownIsOpen.current = true;\n                    }\n                }}\n            >\n                {children}\n            </RadixDropdown.Content>\n        </RadixDropdown.Portal>\n    );\n};\nDropdownContent.displayName = 'Dropdown.Content';\n\nexport type DropdownGroupProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownGroup = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-group' }: DropdownGroupProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.Group className={styles.group} data-test-id={dataTestId} ref={ref}>\n            {children}\n        </RadixDropdown.Group>\n    );\n};\nDropdownGroup.displayName = 'Dropdown.Group';\n\nexport type DropdownSubMenuProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownSubMenu = ({\n    children,\n    'data-test-id': dataTestId = 'fondue-dropdown-submenu',\n}: DropdownSubMenuProps) => {\n    return <RadixDropdown.Sub data-test-id={dataTestId}>{children}</RadixDropdown.Sub>;\n};\nDropdownSubMenu.displayName = 'Dropdown.SubMenu';\n\nexport type DropdownSubTriggerProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownSubTrigger = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-subtrigger' }: DropdownSubTriggerProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.SubTrigger className={styles.subTrigger} data-test-id={dataTestId} ref={ref}>\n            <div className={styles.itemContent}>{children}</div>\n            <IconCaretRight className={styles.subMenuIndicator} size={16} />\n        </RadixDropdown.SubTrigger>\n    );\n};\nDropdownSubTrigger.displayName = 'Dropdown.SubTrigger';\n\nexport type DropdownSubContentProps = {\n    /**\n     * The vertical padding around each dropdown item.\n     * @default \"comfortable\"\n     */\n    padding?: 'comfortable' | 'compact';\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const DropdownSubContent = (\n    {\n        padding = 'comfortable',\n        children,\n        'data-test-id': dataTestId = 'fondue-dropdown-subcontent',\n    }: DropdownSubContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.Portal>\n            <RadixDropdown.SubContent\n                className={styles.subContent}\n                data-padding={padding}\n                data-test-id={dataTestId}\n                ref={ref}\n            >\n                {children}\n            </RadixDropdown.SubContent>\n        </RadixDropdown.Portal>\n    );\n};\nDropdownSubContent.displayName = 'Dropdown.SubContent';\n\nexport type DropdownItemProps = {\n    children: ReactNode;\n    /**\n     * Disables the item.\n     */\n    disabled?: boolean;\n    /**\n     * The text value of the item that is passed to the onSelect callback.\n     */\n    textValue?: string;\n    /**\n     * The style of the item.\n     * @default \"default\"\n     */\n    emphasis?: 'default' | 'danger';\n    /**\n     * Callback that is called when the item is selected.\n     */\n    onSelect?: (event: Event) => void;\n    'data-test-id'?: string;\n};\n\nexport const DropdownItem = (\n    {\n        children,\n        disabled,\n        textValue,\n        onSelect,\n        emphasis = 'default',\n        'data-test-id': dataTestId = 'fondue-dropdown-subtrigger',\n        ...props\n    }: DropdownItemProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.Item\n            onSelect={onSelect}\n            className={styles.item}\n            textValue={textValue}\n            data-test-id={dataTestId}\n            data-emphasis={emphasis}\n            ref={ref}\n            disabled={disabled}\n            {...props}\n        >\n            <div className={styles.itemContent}>{children}</div>\n        </RadixDropdown.Item>\n    );\n};\nDropdownItem.displayName = 'Dropdown.Item';\n\nexport type DropdownSlotProps = { children: ReactNode; name?: 'left' | 'right'; 'data-test-id'?: string };\n\nexport const DropdownSlot = (\n    { children, name, 'data-test-id': dataTestId = 'fondue-dropdown-slot' }: DropdownSlotProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-name={name} className={styles.slot} data-test-id={dataTestId} ref={ref}>\n            {children}\n        </div>\n    );\n};\nDropdownSlot.displayName = 'Dropdown.Slot';\n\nconst ForwardedRefDropdownTrigger = forwardRef<HTMLButtonElement, DropdownTriggerProps>(DropdownTrigger);\nconst ForwardedRefDropdownContent = forwardRef<HTMLDivElement, DropdownContentProps>(DropdownContent);\nconst ForwardedRefDropdownGroup = forwardRef<HTMLDivElement, DropdownGroupProps>(DropdownGroup);\nconst ForwardedRefDropdownSubTrigger = forwardRef<HTMLDivElement, DropdownSubTriggerProps>(DropdownSubTrigger);\nconst ForwardedRefDropdownSubContent = forwardRef<HTMLDivElement, DropdownSubContentProps>(DropdownSubContent);\nconst ForwardedRefDropdownItem = forwardRef<HTMLDivElement, DropdownItemProps>(DropdownItem);\nconst ForwardedRefDropdownSlot = forwardRef<HTMLDivElement, DropdownSlotProps>(DropdownSlot);\n\nexport const Dropdown = {\n    Root: DropdownRoot,\n    Trigger: ForwardedRefDropdownTrigger,\n    Content: ForwardedRefDropdownContent,\n    Group: ForwardedRefDropdownGroup,\n    SubMenu: DropdownSubMenu,\n    SubTrigger: ForwardedRefDropdownSubTrigger,\n    SubContent: ForwardedRefDropdownSubContent,\n    Item: ForwardedRefDropdownItem,\n    Slot: ForwardedRefDropdownSlot,\n};\n"],"names":["DropdownRoot","children","open","onOpenChange","dataTestId","jsx","RadixDropdown","DropdownTrigger","asChild","props","ref","DropdownContent","onOpen","onClose","side","padding","align","localRef","useRef","dropdownIsOpen","setMaxHeight","usePreventDropdownOverflow","styles","syncRefs","DropdownGroup","DropdownSubMenu","DropdownSubTrigger","jsxs","IconCaretRight","DropdownSubContent","DropdownItem","disabled","textValue","onSelect","emphasis","DropdownSlot","name","ForwardedRefDropdownTrigger","forwardRef","ForwardedRefDropdownContent","ForwardedRefDropdownGroup","ForwardedRefDropdownSubTrigger","ForwardedRefDropdownSubContent","ForwardedRefDropdownItem","ForwardedRefDropdownSlot","Dropdown"],"mappings":"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"}
+{"version":3,"file":"fondue-components9.js","sources":["../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretRight } from '@frontify/fondue-icons';\nimport * as RadixDropdown from '@radix-ui/react-dropdown-menu';\nimport { Slot } from '@radix-ui/react-slot';\nimport { forwardRef, useRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { usePreventDropdownOverflow } from '#/hooks/usePreventDropdownOverflow';\nimport { syncRefs } from '#/utilities/domUtilities';\n\nimport { useProcessedChildren } from './hooks/useProcessedChildren';\nimport styles from './styles/dropdown.module.scss';\n\nexport type DropdownRootProps = {\n    children?: ReactNode;\n    /**\n     * Controls the open state of the dropdown.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the dropdown changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n\n    'data-test-id'?: string;\n};\n\nexport const DropdownRoot = ({\n    children,\n    open,\n    onOpenChange,\n\n    'data-test-id': dataTestId = 'fondue-dropdown',\n}: DropdownRootProps) => {\n    return (\n        <RadixDropdown.Root open={open} onOpenChange={onOpenChange} data-test-id={dataTestId}>\n            {children}\n        </RadixDropdown.Root>\n    );\n};\nDropdownRoot.displayName = 'Dropdown.Root';\n\nexport type DropdownTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default true\n     */\n    asChild?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const DropdownTrigger = (\n    {\n        asChild = true,\n        children,\n        'data-test-id': dataTestId = 'fondue-dropdown-trigger',\n        ...props\n    }: DropdownTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDropdown.Trigger asChild={asChild} data-test-id={dataTestId} ref={ref} {...props}>\n            {children}\n        </RadixDropdown.Trigger>\n    );\n};\nDropdownTrigger.displayName = 'Dropdown.Trigger';\n\nexport type DropdownContentProps = {\n    children?: ReactNode;\n    'data-test-id'?: string;\n    onOpen?: () => void;\n    onClose?: () => void;\n    /**\n     * The vertical padding around each dropdown item.\n     * @default \"comfortable\"\n     */\n    padding?: 'comfortable' | 'compact';\n    /**\n     * Defines the alignment of the dropdown.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Defines the preferred side of the dropdown. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    /**\n     * Prevents the focus from being set on the trigger when the dropdown is closed.\n     */\n    preventTriggerFocusOnClose?: boolean;\n};\n\nexport const DropdownContent = (\n    {\n        onOpen,\n        onClose,\n        side = 'bottom',\n        padding = 'comfortable',\n        align = 'start',\n        children,\n        preventTriggerFocusOnClose,\n        'data-test-id': dataTestId = 'fondue-dropdown-content',\n    }: DropdownContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const localRef = useRef(null);\n    const dropdownIsOpen = useRef(false);\n\n    const { setMaxHeight } = usePreventDropdownOverflow(localRef);\n\n    return (\n        <RadixDropdown.Portal>\n            <RadixDropdown.Content\n                align={align}\n                collisionPadding={8}\n                sideOffset={8}\n                side={side}\n                className={styles.content}\n                data-padding={padding}\n                data-test-id={dataTestId}\n                ref={localRef}\n                onCloseAutoFocus={(event) => {\n                    if (preventTriggerFocusOnClose) {\n                        event.preventDefault();\n                    }\n                    syncRefs(localRef, ref);\n                    onClose && onClose();\n                    dropdownIsOpen.current = false;\n                }}\n                onFocus={() => {\n                    if (!dropdownIsOpen.current) {\n                        setMaxHeight();\n                        syncRefs(localRef, ref);\n                        onOpen && onOpen();\n                        dropdownIsOpen.current = true;\n                    }\n                }}\n            >\n                {children}\n            </RadixDropdown.Content>\n        </RadixDropdown.Portal>\n    );\n};\nDropdownContent.displayName = 'Dropdown.Content';\n\nexport type DropdownGroupProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownGroup = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-group' }: DropdownGroupProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.Group className={styles.group} data-test-id={dataTestId} ref={ref}>\n            {children}\n        </RadixDropdown.Group>\n    );\n};\nDropdownGroup.displayName = 'Dropdown.Group';\n\nexport type DropdownSubMenuProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownSubMenu = ({\n    children,\n    'data-test-id': dataTestId = 'fondue-dropdown-submenu',\n}: DropdownSubMenuProps) => {\n    return <RadixDropdown.Sub data-test-id={dataTestId}>{children}</RadixDropdown.Sub>;\n};\nDropdownSubMenu.displayName = 'Dropdown.SubMenu';\n\nexport type DropdownSubTriggerProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownSubTrigger = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-subtrigger' }: DropdownSubTriggerProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { content } = useProcessedChildren(children);\n    return (\n        <RadixDropdown.SubTrigger className={styles.subTrigger} data-test-id={dataTestId} ref={ref}>\n            {content}\n            <IconCaretRight className={styles.subMenuIndicator} size={16} />\n        </RadixDropdown.SubTrigger>\n    );\n};\nDropdownSubTrigger.displayName = 'Dropdown.SubTrigger';\n\nexport type DropdownSubContentProps = {\n    /**\n     * The vertical padding around each dropdown item.\n     * @default \"comfortable\"\n     */\n    padding?: 'comfortable' | 'compact';\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const DropdownSubContent = (\n    {\n        padding = 'comfortable',\n        children,\n        'data-test-id': dataTestId = 'fondue-dropdown-subcontent',\n    }: DropdownSubContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.Portal>\n            <RadixDropdown.SubContent\n                className={styles.subContent}\n                data-padding={padding}\n                data-test-id={dataTestId}\n                ref={ref}\n            >\n                {children}\n            </RadixDropdown.SubContent>\n        </RadixDropdown.Portal>\n    );\n};\nDropdownSubContent.displayName = 'Dropdown.SubContent';\n\nexport type DropdownItemProps = {\n    children: ReactNode;\n    /**\n     * Disables the item.\n     */\n    disabled?: boolean;\n    /**\n     * The text value of the item that is passed to the onSelect callback.\n     */\n    textValue?: string;\n    /**\n     * The style of the item.\n     * @default \"default\"\n     */\n    emphasis?: 'default' | 'danger';\n    /**\n     * Callback that is called when the item is selected.\n     */\n    onSelect?: (event: Event) => void;\n    'data-test-id'?: string;\n};\n\nexport const DropdownItem = (\n    {\n        children,\n        disabled,\n        textValue,\n        onSelect,\n        emphasis = 'default',\n        'data-test-id': dataTestId = 'fondue-dropdown-subtrigger',\n        ...props\n    }: DropdownItemProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { content, isLink } = useProcessedChildren(children);\n\n    const Wrapper = isLink ? Slot : 'div';\n\n    return (\n        <RadixDropdown.Item\n            onSelect={onSelect}\n            className={styles.item}\n            textValue={textValue}\n            data-test-id={dataTestId}\n            data-emphasis={emphasis}\n            ref={ref}\n            disabled={disabled}\n            asChild\n            {...props}\n        >\n            <Wrapper>{content}</Wrapper>\n        </RadixDropdown.Item>\n    );\n};\nDropdownItem.displayName = 'Dropdown.Item';\n\nexport type DropdownSlotProps = { children: ReactNode; name?: 'left' | 'right'; 'data-test-id'?: string };\n\nexport const DropdownSlot = (\n    { children, name, 'data-test-id': dataTestId = 'fondue-dropdown-slot' }: DropdownSlotProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-name={name} className={styles.slot} data-test-id={dataTestId} ref={ref}>\n            {children}\n        </div>\n    );\n};\nDropdownSlot.displayName = 'Dropdown.Slot';\n\nconst ForwardedRefDropdownTrigger = forwardRef<HTMLButtonElement, DropdownTriggerProps>(DropdownTrigger);\nconst ForwardedRefDropdownContent = forwardRef<HTMLDivElement, DropdownContentProps>(DropdownContent);\nconst ForwardedRefDropdownGroup = forwardRef<HTMLDivElement, DropdownGroupProps>(DropdownGroup);\nconst ForwardedRefDropdownSubTrigger = forwardRef<HTMLDivElement, DropdownSubTriggerProps>(DropdownSubTrigger);\nconst ForwardedRefDropdownSubContent = forwardRef<HTMLDivElement, DropdownSubContentProps>(DropdownSubContent);\nconst ForwardedRefDropdownItem = forwardRef<HTMLDivElement, DropdownItemProps>(DropdownItem);\nconst ForwardedRefDropdownSlot = forwardRef<HTMLDivElement, DropdownSlotProps>(DropdownSlot);\n\nexport const Dropdown = {\n    Root: DropdownRoot,\n    Trigger: ForwardedRefDropdownTrigger,\n    Content: ForwardedRefDropdownContent,\n    Group: ForwardedRefDropdownGroup,\n    SubMenu: DropdownSubMenu,\n    SubTrigger: ForwardedRefDropdownSubTrigger,\n    SubContent: ForwardedRefDropdownSubContent,\n    Item: ForwardedRefDropdownItem,\n    Slot: ForwardedRefDropdownSlot,\n};\n"],"names":["DropdownRoot","children","open","onOpenChange","dataTestId","jsx","RadixDropdown","DropdownTrigger","asChild","props","ref","DropdownContent","onOpen","onClose","side","padding","align","preventTriggerFocusOnClose","localRef","useRef","dropdownIsOpen","setMaxHeight","usePreventDropdownOverflow","styles","event","syncRefs","DropdownGroup","DropdownSubMenu","DropdownSubTrigger","content","useProcessedChildren","jsxs","IconCaretRight","DropdownSubContent","DropdownItem","disabled","textValue","onSelect","emphasis","isLink","Wrapper","Slot","DropdownSlot","name","ForwardedRefDropdownTrigger","forwardRef","ForwardedRefDropdownContent","ForwardedRefDropdownGroup","ForwardedRefDropdownSubTrigger","ForwardedRefDropdownSubContent","ForwardedRefDropdownItem","ForwardedRefDropdownSlot","Dropdown"],"mappings":";;;;;;;;;AA2BO,MAAMA,IAAe,CAAC;AAAA,EACzB,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EAEA,gBAAgBC,IAAa;AACjC,MAEQ,gBAAAC,EAACC,EAAc,MAAd,EAAmB,MAAAJ,GAAY,cAAAC,GAA4B,gBAAcC,GACrE,UAAAH,GACL;AAGRD,EAAa,cAAc;AAYpB,MAAMO,IAAkB,CAC3B;AAAA,EACI,SAAAC,IAAU;AAAA,EACV,UAAAP;AAAA,EACA,gBAAgBG,IAAa;AAAA,EAC7B,GAAGK;AACP,GACAC,MAGI,gBAAAL,EAACC,EAAc,SAAd,EAAsB,SAAAE,GAAkB,gBAAcJ,GAAY,KAAAM,GAAW,GAAGD,GAC5E,UAAAR,EACL,CAAA;AAGRM,EAAgB,cAAc;AA4BvB,MAAMI,IAAkB,CAC3B;AAAA,EACI,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,OAAAC,IAAQ;AAAA,EACR,UAAAf;AAAA,EACA,4BAAAgB;AAAA,EACA,gBAAgBb,IAAa;AACjC,GACAM,MACC;AACK,QAAAQ,IAAWC,EAAO,IAAI,GACtBC,IAAiBD,EAAO,EAAK,GAE7B,EAAE,cAAAE,EAAA,IAAiBC,EAA2BJ,CAAQ;AAGxD,SAAA,gBAAAb,EAACC,EAAc,QAAd,EACG,UAAA,gBAAAD;AAAA,IAACC,EAAc;AAAA,IAAd;AAAA,MACG,OAAAU;AAAA,MACA,kBAAkB;AAAA,MAClB,YAAY;AAAA,MACZ,MAAAF;AAAA,MACA,WAAWS,EAAO;AAAA,MAClB,gBAAcR;AAAA,MACd,gBAAcX;AAAA,MACd,KAAKc;AAAA,MACL,kBAAkB,CAACM,MAAU;AACzB,QAAIP,KACAO,EAAM,eAAe,GAEzBC,EAASP,GAAUR,CAAG,GACtBG,KAAWA,EAAQ,GACnBO,EAAe,UAAU;AAAA,MAC7B;AAAA,MACA,SAAS,MAAM;AACP,QAACA,EAAe,YACHC,EAAA,GACbI,EAASP,GAAUR,CAAG,GACtBE,KAAUA,EAAO,GACjBQ,EAAe,UAAU;AAAA,MAEjC;AAAA,MAEC,UAAAnB;AAAA,IAAA;AAAA,EAAA,GAET;AAER;AACAU,EAAgB,cAAc;AAIjB,MAAAe,IAAgB,CACzB,EAAE,UAAAzB,GAAU,gBAAgBG,IAAa,2BACzCM,MAGI,gBAAAL,EAACC,EAAc,OAAd,EAAoB,WAAWiB,EAAO,OAAO,gBAAcnB,GAAY,KAAAM,GACnE,UAAAT,EACL,CAAA;AAGRyB,EAAc,cAAc;AAIrB,MAAMC,IAAkB,CAAC;AAAA,EAC5B,UAAA1B;AAAA,EACA,gBAAgBG,IAAa;AACjC,wBACYE,EAAc,KAAd,EAAkB,gBAAcF,GAAa,UAAAH,GAAS;AAElE0B,EAAgB,cAAc;AAIjB,MAAAC,IAAqB,CAC9B,EAAE,UAAA3B,GAAU,gBAAgBG,IAAa,gCACzCM,MACC;AACD,QAAM,EAAE,SAAAmB,EAAA,IAAYC,EAAqB7B,CAAQ;AAE7C,SAAA,gBAAA8B,EAACzB,EAAc,YAAd,EAAyB,WAAWiB,EAAO,YAAY,gBAAcnB,GAAY,KAAAM,GAC7E,UAAA;AAAA,IAAAmB;AAAA,sBACAG,GAAe,EAAA,WAAWT,EAAO,kBAAkB,MAAM,GAAI,CAAA;AAAA,EAAA,GAClE;AAER;AACAK,EAAmB,cAAc;AAY1B,MAAMK,IAAqB,CAC9B;AAAA,EACI,SAAAlB,IAAU;AAAA,EACV,UAAAd;AAAA,EACA,gBAAgBG,IAAa;AACjC,GACAM,MAGI,gBAAAL,EAACC,EAAc,QAAd,EACG,UAAA,gBAAAD;AAAA,EAACC,EAAc;AAAA,EAAd;AAAA,IACG,WAAWiB,EAAO;AAAA,IAClB,gBAAcR;AAAA,IACd,gBAAcX;AAAA,IACd,KAAAM;AAAA,IAEC,UAAAT;AAAA,EAAA;AAAA,GAET;AAGRgC,EAAmB,cAAc;AAwB1B,MAAMC,IAAe,CACxB;AAAA,EACI,UAAAjC;AAAA,EACA,UAAAkC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,gBAAgBlC,IAAa;AAAA,EAC7B,GAAGK;AACP,GACAC,MACC;AACD,QAAM,EAAE,SAAAmB,GAAS,QAAAU,MAAWT,EAAqB7B,CAAQ,GAEnDuC,IAAUD,IAASE,IAAO;AAG5B,SAAA,gBAAApC;AAAA,IAACC,EAAc;AAAA,IAAd;AAAA,MACG,UAAA+B;AAAA,MACA,WAAWd,EAAO;AAAA,MAClB,WAAAa;AAAA,MACA,gBAAchC;AAAA,MACd,iBAAekC;AAAA,MACf,KAAA5B;AAAA,MACA,UAAAyB;AAAA,MACA,SAAO;AAAA,MACN,GAAG1B;AAAA,MAEJ,UAAA,gBAAAJ,EAACmC,KAAS,UAAQX,EAAA,CAAA;AAAA,IAAA;AAAA,EACtB;AAER;AACAK,EAAa,cAAc;AAId,MAAAQ,IAAe,CACxB,EAAE,UAAAzC,GAAU,MAAA0C,GAAM,gBAAgBvC,IAAa,uBAAuB,GACtEM,MAGI,gBAAAL,EAAC,OAAI,EAAA,aAAWsC,GAAM,WAAWpB,EAAO,MAAM,gBAAcnB,GAAY,KAAAM,GACnE,UAAAT,EACL,CAAA;AAGRyC,EAAa,cAAc;AAE3B,MAAME,IAA8BC,EAAoDtC,CAAe,GACjGuC,IAA8BD,EAAiDlC,CAAe,GAC9FoC,IAA4BF,EAA+CnB,CAAa,GACxFsB,IAAiCH,EAAoDjB,CAAkB,GACvGqB,IAAiCJ,EAAoDZ,CAAkB,GACvGiB,IAA2BL,EAA8CX,CAAY,GACrFiB,IAA2BN,EAA8CH,CAAY,GAE9EU,IAAW;AAAA,EACpB,MAAMpD;AAAA,EACN,SAAS4C;AAAA,EACT,SAASE;AAAA,EACT,OAAOC;AAAA,EACP,SAASpB;AAAA,EACT,YAAYqB;AAAA,EACZ,YAAYC;AAAA,EACZ,MAAMC;AAAA,EACN,MAAMC;AACV;"}

package/dist/index.d.ts

@@ -43,25 +43,20 @@ declare type BaseTableRowProps = {
     'data-test-id'?: string;
 };
 
-export declare const Box: {
-    ({ as: Component, "data-test-id": dataTestId, children, role, "aria-label": ariaLabel, "aria-hidden": ariaHidden, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, ...props }: BoxProps): JSX_2.Element;
-    displayName: string;
-};
-
-declare type BoxProps = LayoutComponentProps & {
-    /**
-     * The element to render the Box component as.
-     * @default 'div'
-     */
-    as?: 'div' | 'span';
-    /**
-     * The display property.
-     * @default 'block'
-     */
-    display?: Responsive<'none' | 'block' | 'inline-block' | 'inline'>;
-    children?: ReactNode;
-    'data-test-id'?: string;
-} & CommonAriaProps;
+export declare const Box: ForwardRefExoticComponent<LayoutComponentProps & {
+/**
+* The element to render the Box component as.
+* @default 'div'
+*/
+as?: "div" | "span";
+/**
+* The display property.
+* @default 'block'
+*/
+display?: Responsive<"none" | "block" | "inline-block" | "inline">;
+children?: ReactNode;
+'data-test-id'?: string;
+} & CommonAriaProps & RefAttributes<HTMLDivElement>>;
 
 declare type Breakpoint = keyof typeof screens;
 
@@ -532,6 +527,10 @@ declare type DropdownContentProps = {
      * @default "bottom"
      */
     side?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Prevents the focus from being set on the trigger when the dropdown is closed.
+     */
+    preventTriggerFocusOnClose?: boolean;
 };
 
 declare type DropdownGroupProps = {
@@ -610,54 +609,49 @@ declare type DropdownTriggerProps = {
     'data-test-id'?: string;
 };
 
-export declare const Flex: {
-    ({ as: Component, "data-test-id": dataTestId, children, role, "aria-label": ariaLabel, "aria-hidden": ariaHidden, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, ...props }: FlexProps): JSX_2.Element;
-    displayName: string;
-};
-
-declare type FlexProps = LayoutComponentProps & {
-    /**
-     * The element to render the Flex component as.
-     * @default 'div'
-     */
-    as?: 'div' | 'span';
-    /**
-     * The display property.
-     * @default 'flex'
-     */
-    display?: Responsive<'none' | 'flex' | 'inline-flex'>;
-    /**
-     * The direction of the children.
-     * @default 'row'
-     */
-    direction?: Responsive<'row' | 'row-reverse' | 'column' | 'column-reverse'>;
-    /**
-     * The alignment of the children.
-     */
-    align?: Responsive<'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'>;
-    /**
-     * The justification of the children.
-     */
-    justify?: Responsive<'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'>;
-    /**
-     * The wrap property.
-     */
-    wrap?: Responsive<'nowrap' | 'wrap' | 'wrap-reverse'>;
-    /**
-     * The gap between the children.
-     */
-    gap?: Responsive<SizeValue>;
-    /**
-     * The horizontal gap between the children.
-     */
-    gapX?: Responsive<SizeValue>;
-    /**
-     * The vertical gap between the children.
-     */
-    gapY?: Responsive<SizeValue>;
-    children?: ReactNode;
-    'data-test-id'?: string;
-} & CommonAriaProps;
+export declare const Flex: ForwardRefExoticComponent<LayoutComponentProps & {
+/**
+* The element to render the Flex component as.
+* @default 'div'
+*/
+as?: "div" | "span";
+/**
+* The display property.
+* @default 'flex'
+*/
+display?: Responsive<"none" | "flex" | "inline-flex">;
+/**
+* The direction of the children.
+* @default 'row'
+*/
+direction?: Responsive<"row" | "row-reverse" | "column" | "column-reverse">;
+/**
+* The alignment of the children.
+*/
+align?: Responsive<"flex-start" | "center" | "flex-end" | "stretch" | "baseline">;
+/**
+* The justification of the children.
+*/
+justify?: Responsive<"flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly">;
+/**
+* The wrap property.
+*/
+wrap?: Responsive<"nowrap" | "wrap" | "wrap-reverse">;
+/**
+* The gap between the children.
+*/
+gap?: Responsive<SizeValue>;
+/**
+* The horizontal gap between the children.
+*/
+gapX?: Responsive<SizeValue>;
+/**
+* The vertical gap between the children.
+*/
+gapY?: Responsive<SizeValue>;
+children?: ReactNode;
+'data-test-id'?: string;
+} & CommonAriaProps & RefAttributes<HTMLDivElement>>;
 
 export declare const Flyout: {
     Root: {
@@ -771,57 +765,52 @@ declare const ForwardedRefTextFieldRoot: ForwardRefExoticComponent<TextInputProp
 
 declare const ForwardedRefTextFieldSlot: ForwardRefExoticComponent<TextFieldSlotProps & RefAttributes<HTMLDivElement>>;
 
-export declare const Grid: {
-    ({ as: Component, "data-test-id": dataTestId, children, role, "aria-label": ariaLabel, "aria-hidden": ariaHidden, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, ...props }: GridProps): JSX_2.Element;
-    displayName: string;
-};
-
-declare type GridProps = LayoutComponentProps & {
-    /**
-     * The element to render the Grid component as.
-     * @default 'div'
-     */
-    as?: 'div' | 'span';
-    /**
-     * The display property.
-     * @default 'grid'
-     */
-    display?: 'none' | 'grid' | 'inline-grid';
-    /**
-     * The columns property.
-     */
-    columns?: Responsive<string | number>;
-    /**
-     * The rows property.
-     */
-    rows?: Responsive<string | number>;
-    /**
-     * The flow property.
-     */
-    flow?: Responsive<'row' | 'column' | 'dense' | 'row-dense' | 'column-dense'>;
-    /**
-     * The alignment of the children.
-     */
-    align?: Responsive<'start' | 'center' | 'end' | 'baseline' | 'stretch'>;
-    /**
-     * The justification of the children.
-     */
-    justify?: Responsive<'start' | 'center' | 'end' | 'between'>;
-    /**
-     * The gap between the children.
-     */
-    gap?: Responsive<SizeValue>;
-    /**
-     * The horizontal gap between the children.
-     */
-    gapX?: Responsive<SizeValue>;
-    /**
-     * The vertical gap between the children.
-     */
-    gapY?: Responsive<SizeValue>;
-    children?: ReactNode;
-    'data-test-id'?: string;
-} & CommonAriaProps;
+export declare const Grid: ForwardRefExoticComponent<LayoutComponentProps & {
+/**
+* The element to render the Grid component as.
+* @default 'div'
+*/
+as?: "div" | "span";
+/**
+* The display property.
+* @default 'grid'
+*/
+display?: "none" | "grid" | "inline-grid";
+/**
+* The columns property.
+*/
+columns?: Responsive<string | number>;
+/**
+* The rows property.
+*/
+rows?: Responsive<string | number>;
+/**
+* The flow property.
+*/
+flow?: Responsive<"row" | "column" | "dense" | "row-dense" | "column-dense">;
+/**
+* The alignment of the children.
+*/
+align?: Responsive<"start" | "center" | "end" | "baseline" | "stretch">;
+/**
+* The justification of the children.
+*/
+justify?: Responsive<"start" | "center" | "end" | "between">;
+/**
+* The gap between the children.
+*/
+gap?: Responsive<SizeValue>;
+/**
+* The horizontal gap between the children.
+*/
+gapX?: Responsive<SizeValue>;
+/**
+* The vertical gap between the children.
+*/
+gapY?: Responsive<SizeValue>;
+children?: ReactNode;
+'data-test-id'?: string;
+} & CommonAriaProps & RefAttributes<HTMLDivElement>>;
 
 declare type HorizontalAlignment = 'left' | 'center' | 'right';
 
@@ -943,19 +932,19 @@ declare type LayoutComponentProps = {
     /**
      * The top property of the component.
      */
-    top?: Responsive<string>;
+    top?: Responsive<SpacingValue>;
     /**
      * The right property of the component.
      */
-    right?: Responsive<string>;
+    right?: Responsive<SpacingValue>;
     /**
      * The bottom property of the component.
      */
-    bottom?: Responsive<string>;
+    bottom?: Responsive<SpacingValue>;
     /**
      * The left property of the component.
      */
-    left?: Responsive<string>;
+    left?: Responsive<SpacingValue>;
 };
 
 export declare const LoadingBar: ForwardRefExoticComponent<LoadingBarProps & RefAttributes<HTMLDivElement>>;
@@ -1076,20 +1065,15 @@ declare type ScrollAreaProps = {
     children: ReactNode;
 };
 
-export declare const Section: {
-    ({ "data-test-id": dataTestId, children, role, "aria-label": ariaLabel, "aria-hidden": ariaHidden, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, ...props }: SectionProps): JSX_2.Element;
-    displayName: string;
-};
-
-declare type SectionProps = LayoutComponentProps & {
-    /**
-     * The display property.
-     * @default 'block'
-     */
-    display?: Responsive<'none' | 'block' | 'inline-block' | 'inline'>;
-    children?: ReactNode;
-    'data-test-id'?: string;
-} & CommonAriaProps;
+export declare const Section: ForwardRefExoticComponent<LayoutComponentProps & {
+/**
+* The display property.
+* @default 'block'
+*/
+display?: Responsive<"none" | "block" | "inline-block" | "inline">;
+children?: ReactNode;
+'data-test-id'?: string;
+} & CommonAriaProps & RefAttributes<HTMLDivElement>>;
 
 export declare const SegmentedControl: {
     Root: ForwardRefExoticComponent<SegmentedControlRootProps & RefAttributes<HTMLDivElement>>;
@@ -1234,7 +1218,7 @@ declare type SelectSlotProps = {
     'data-test-id'?: string;
 };
 
-declare type SizeValue = (string & {}) | 'auto' | 'fit-content' | 'intrinsic' | 'max-content' | 'min-content';
+declare type SizeValue = SpacingValue | 'auto' | 'fit-content' | 'intrinsic' | 'max-content' | 'min-content';
 
 export declare const Slider: ForwardRefExoticComponent<SliderProps & RefAttributes<HTMLButtonElement>>;
 
@@ -1284,7 +1268,7 @@ declare type SliderProps = {
 
 declare type SortDirection = 'ascending' | 'descending' | undefined;
 
-declare type SpacingValue = (string & {}) | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64;
+declare type SpacingValue = (string & {}) | (number & {}) | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64;
 
 export declare const Switch: ForwardRefExoticComponent<SwitchProps & RefAttributes<HTMLButtonElement>>;