@frontify/fondue-components 10.0.1 → 12.0.0

package/dist/fondue-components7.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components7.js","sources":["../src/components/Dialog/Dialog.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixDialog from '@radix-ui/react-dialog';\nimport { createContext, forwardRef, useContext, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\n\nimport styles from './styles/dialog.module.scss';\n\nexport type DialogRootProps = {\n    /**\n     * Disable interaction with the rest of the page\n     * @default false\n     */\n    modal?: boolean;\n    /**\n     * The controlled `open` state of the dialog\n     * @default false\n     */\n    open?: boolean;\n    /**\n     * Event handler called when the `open` state changes\n     */\n    onOpenChange?: (open: boolean) => void;\n    children?: ReactNode;\n};\n\nexport type DialogContentProps = {\n    /**\n     * Add rounded corners to the dialog\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * Define the padding of the dialog\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * The vertical alignment of the divider\n     * @default \"center\"\n     */\n    verticalAlign?: 'top' | 'center';\n\n    /**\n     * Define a maximum width for the dialog\n     * @default \"800px\"\n     */\n    maxWidth?: string;\n    /**\n     * Define a minimum width for the dialog\n     * @default \"400px\"\n     */\n    minWidth?: string;\n    /**\n     * Define a minimum height for the dialog\n     * @default \"200px\"\n     */\n    minHeight?: string;\n    /**\n     * Show a dark underlay behind the dialog\n     * @default false\n     */\n    showUnderlay?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogTriggerProps = {\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 type DialogHeaderProps = {\n    /**\n     * Define the padding for the dialog header\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Show a border at the bottom of the header\n     * @default true\n     */\n    showBorder?: boolean;\n    /**\n     * Show a close button in the header\n     * @default true\n     */\n    showCloseButton?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogFooterProps = {\n    /**\n     * Define the padding for the dialog footer\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Show a border at the top of the footer\n     * @default true\n     */\n    showBorder?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogBodyProps = {\n    /**\n     * Define the padding for the dialog body\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogSideContentProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogCloseProps = { children?: ReactNode };\n\nexport type DialogAnnouncementProps = { children?: ReactNode; asChild?: boolean };\n\ntype DialogContextType = {\n    isModal: boolean;\n};\n\nconst DialogContext = createContext<DialogContextType>({ isModal: false });\n\nexport const DialogRoot = ({ children, ...props }: DialogRootProps) => {\n    return (\n        <DialogContext.Provider value={{ isModal: props.modal ?? false }}>\n            <RadixDialog.Root {...props}>{children}</RadixDialog.Root>\n        </DialogContext.Provider>\n    );\n};\nDialogRoot.displayName = 'Dialog.Root';\n\nexport const DialogTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-dialog-trigger', ...props }: DialogTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDialog.Trigger\n            onMouseDown={addAutoFocusAttribute}\n            data-auto-focus-visible=\"true\"\n            data-auto-focus-trigger\n            data-test-id={dataTestId}\n            asChild={asChild}\n            ref={ref}\n            {...props}\n        >\n            {children}\n        </RadixDialog.Trigger>\n    );\n};\nDialogTrigger.displayName = 'Dialog.Trigger';\n\nconst DialogUnderlay = ({ children, showUnderlay }: { children: ReactNode; showUnderlay: boolean }) => {\n    const { isModal } = useContext(DialogContext);\n    if (isModal) {\n        return (\n            <RadixDialog.Overlay data-visible={showUnderlay} className={styles.underlay}>\n                {children}\n            </RadixDialog.Overlay>\n        );\n    }\n    return (\n        <div className={styles.underlay} data-visible={showUnderlay}>\n            {children}\n        </div>\n    );\n};\n\nexport const DialogContent = (\n    {\n        maxWidth = '800px',\n        minWidth = '400px',\n        minHeight = '200px',\n        padding = 'compact',\n        verticalAlign = 'center',\n        'data-test-id': dataTestId = 'fondue-dialog-content',\n        showUnderlay = false,\n        rounded = true,\n        children,\n        ...props\n    }: DialogContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDialog.Portal>\n            <DialogUnderlay showUnderlay={showUnderlay}>\n                <RadixDialog.Content\n                    style={\n                        {\n                            '--dialog-max-width': maxWidth,\n                            '--dialog-min-width': minWidth,\n                            '--dialog-min-height': minHeight,\n                        } as CSSProperties\n                    }\n                    ref={ref}\n                    className={styles.content}\n                    onFocus={addShowFocusRing}\n                    data-dialog-padding={padding}\n                    data-dialog-rounded={rounded}\n                    data-test-id={dataTestId}\n                    data-dialog-vertical-align={verticalAlign}\n                    {...props}\n                >\n                    {children}\n                </RadixDialog.Content>\n            </DialogUnderlay>\n        </RadixDialog.Portal>\n    );\n};\nDialogContent.displayName = 'Dialog.Content';\n\nexport const DialogHeader = (\n    {\n        padding,\n        showBorder = true,\n        showCloseButton = true,\n        children,\n        'data-test-id': dataTestId = 'fondue-dialog-header',\n    }: DialogHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.header}\n            data-dialog-header-padding={padding}\n            data-show-border={showBorder}\n            data-dialog-layout-component\n        >\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixDialog.Close role=\"button\" data-test-id={`${dataTestId}-close`} className=\"tw-cursor-pointer\">\n                    <IconCross size={20} />\n                </RadixDialog.Close>\n            )}\n        </div>\n    );\n};\nDialogHeader.displayName = 'Dialog.Header';\n\nexport const DialogFooter = (\n    { padding, showBorder = true, children, 'data-test-id': dataTestId = 'fondue-dialog-footer' }: DialogFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.footer}\n            data-dialog-footer-padding={padding}\n            data-show-border={showBorder}\n            data-dialog-layout-component\n        >\n            {children}\n        </div>\n    );\n};\nDialogFooter.displayName = 'Dialog.Footer';\n\nexport const DialogBody = (\n    { padding, children, 'data-test-id': dataTestId = 'fondue-dialog-body' }: DialogBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.body}\n            data-dialog-body-padding={padding}\n            data-dialog-layout-component\n        >\n            {children}\n        </div>\n    );\n};\nDialogBody.displayName = 'Dialog.Body';\n\nexport const DialogSideContent = (\n    { children, 'data-test-id': dataTestId = 'fondue-dialog-side-content' }: DialogSideContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.sideContent} data-dialog-layout-component>\n            {children}\n        </div>\n    );\n};\nDialogSideContent.displayName = 'Dialog.SideContent';\n\nexport const DialogClose = ({ children }: DialogCloseProps) => {\n    return <RadixDialog.Close asChild>{children}</RadixDialog.Close>;\n};\nDialogClose.displayName = 'Dialog.Close';\n\nexport const DialogTitle = ({ children, asChild }: DialogAnnouncementProps) => {\n    return <RadixDialog.Title asChild={asChild}>{children}</RadixDialog.Title>;\n};\nDialogTitle.displayName = 'Dialog.Title';\n\nexport const DialogDescription = ({ children, asChild }: DialogAnnouncementProps) => {\n    return <RadixDialog.Description asChild={asChild}>{children}</RadixDialog.Description>;\n};\nDialogDescription.displayName = 'Dialog.Description';\n\nexport const Dialog = {\n    Root: DialogRoot,\n    Title: DialogTitle,\n    Description: DialogDescription,\n    Close: DialogClose,\n    Trigger: forwardRef<HTMLButtonElement, DialogTriggerProps>(DialogTrigger),\n    Content: forwardRef<HTMLDivElement, DialogContentProps>(DialogContent),\n    Header: forwardRef<HTMLDivElement, DialogHeaderProps>(DialogHeader),\n    Footer: forwardRef<HTMLDivElement, DialogFooterProps>(DialogFooter),\n    Body: forwardRef<HTMLDivElement, DialogBodyProps>(DialogBody),\n    SideContent: forwardRef<HTMLDivElement, DialogSideContentProps>(DialogSideContent),\n};\n"],"names":["DialogContext","createContext","DialogRoot","children","props","RadixDialog","DialogTrigger","asChild","dataTestId","ref","jsx","addAutoFocusAttribute","DialogUnderlay","showUnderlay","isModal","useContext","styles","DialogContent","maxWidth","minWidth","minHeight","padding","verticalAlign","rounded","addShowFocusRing","DialogHeader","showBorder","showCloseButton","jsxs","IconCross","DialogFooter","DialogBody","DialogSideContent","DialogClose","DialogTitle","DialogDescription","Dialog","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components7.js","sources":["../src/components/Dialog/Dialog.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixDialog from '@radix-ui/react-dialog';\nimport { createContext, forwardRef, useContext, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/dialog.module.scss';\n\nexport type DialogRootProps = {\n    /**\n     * Disable interaction with the rest of the page\n     * @default false\n     */\n    modal?: boolean;\n    /**\n     * The controlled `open` state of the dialog\n     * @default false\n     */\n    open?: boolean;\n    /**\n     * Event handler called when the `open` state changes\n     */\n    onOpenChange?: (open: boolean) => void;\n    children?: ReactNode;\n};\n\nexport type DialogContentProps = {\n    /**\n     * Add rounded corners to the dialog\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * Define the padding of the dialog\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * The vertical alignment of the divider\n     * @default \"center\"\n     */\n    verticalAlign?: 'top' | 'center';\n\n    /**\n     * Define a maximum width for the dialog\n     * @default \"800px\"\n     */\n    maxWidth?: string;\n    /**\n     * Define a minimum width for the dialog\n     * @default \"400px\"\n     */\n    minWidth?: string;\n    /**\n     * Define a minimum height for the dialog\n     * @default \"200px\"\n     */\n    minHeight?: string;\n    /**\n     * Show a dark underlay behind the dialog\n     * @default false\n     */\n    showUnderlay?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogTriggerProps = {\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 type DialogHeaderProps = {\n    /**\n     * Define the padding for the dialog header\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Show a border at the bottom of the header\n     * @default true\n     */\n    showBorder?: boolean;\n    /**\n     * Show a close button in the header\n     * @default true\n     */\n    showCloseButton?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogFooterProps = {\n    /**\n     * Define the padding for the dialog footer\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Show a border at the top of the footer\n     * @default true\n     */\n    showBorder?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogBodyProps = {\n    /**\n     * Define the padding for the dialog body\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogSideContentProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogCloseProps = { children?: ReactNode };\n\nexport type DialogAnnouncementProps = { children?: ReactNode; asChild?: boolean };\n\ntype DialogContextType = {\n    isModal: boolean;\n};\n\nconst DialogContext = createContext<DialogContextType>({ isModal: false });\n\nexport const DialogRoot = ({ children, ...props }: DialogRootProps) => {\n    return (\n        <DialogContext.Provider value={{ isModal: props.modal ?? false }}>\n            <RadixDialog.Root {...props}>{children}</RadixDialog.Root>\n        </DialogContext.Provider>\n    );\n};\nDialogRoot.displayName = 'Dialog.Root';\n\nexport const DialogTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-dialog-trigger', ...props }: DialogTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDialog.Trigger\n            onMouseDown={addAutoFocusAttribute}\n            data-auto-focus-visible=\"true\"\n            data-auto-focus-trigger\n            data-test-id={dataTestId}\n            asChild={asChild}\n            ref={ref}\n            {...props}\n        >\n            {children}\n        </RadixDialog.Trigger>\n    );\n};\nDialogTrigger.displayName = 'Dialog.Trigger';\n\nconst DialogUnderlay = ({ children, showUnderlay }: { children: ReactNode; showUnderlay: boolean }) => {\n    const { isModal } = useContext(DialogContext);\n    if (isModal) {\n        return (\n            <RadixDialog.Overlay data-visible={showUnderlay} className={styles.underlay}>\n                {children}\n            </RadixDialog.Overlay>\n        );\n    }\n    return (\n        <div className={styles.underlay} data-visible={showUnderlay}>\n            {children}\n        </div>\n    );\n};\n\nexport const DialogContent = (\n    {\n        maxWidth = '800px',\n        minWidth = '400px',\n        minHeight = '200px',\n        padding = 'compact',\n        verticalAlign = 'center',\n        'data-test-id': dataTestId = 'fondue-dialog-content',\n        showUnderlay = false,\n        rounded = true,\n        children,\n        ...props\n    }: DialogContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const theme = useFondueTheme();\n    return (\n        <RadixDialog.Portal>\n            <ThemeProvider theme={theme}>\n                <DialogUnderlay showUnderlay={showUnderlay}>\n                    <RadixDialog.Content\n                        style={\n                            {\n                                '--dialog-max-width': maxWidth,\n                                '--dialog-min-width': minWidth,\n                                '--dialog-min-height': minHeight,\n                            } as CSSProperties\n                        }\n                        ref={ref}\n                        className={styles.content}\n                        onFocus={addShowFocusRing}\n                        data-dialog-padding={padding}\n                        data-dialog-rounded={rounded}\n                        data-test-id={dataTestId}\n                        data-dialog-vertical-align={verticalAlign}\n                        {...props}\n                    >\n                        {children}\n                    </RadixDialog.Content>\n                </DialogUnderlay>\n            </ThemeProvider>\n        </RadixDialog.Portal>\n    );\n};\nDialogContent.displayName = 'Dialog.Content';\n\nexport const DialogHeader = (\n    {\n        padding,\n        showBorder = true,\n        showCloseButton = true,\n        children,\n        'data-test-id': dataTestId = 'fondue-dialog-header',\n    }: DialogHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.header}\n            data-dialog-header-padding={padding}\n            data-show-border={showBorder}\n            data-dialog-layout-component\n        >\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixDialog.Close role=\"button\" data-test-id={`${dataTestId}-close`} className=\"tw-cursor-pointer\">\n                    <IconCross size={20} />\n                </RadixDialog.Close>\n            )}\n        </div>\n    );\n};\nDialogHeader.displayName = 'Dialog.Header';\n\nexport const DialogFooter = (\n    { padding, showBorder = true, children, 'data-test-id': dataTestId = 'fondue-dialog-footer' }: DialogFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.footer}\n            data-dialog-footer-padding={padding}\n            data-show-border={showBorder}\n            data-dialog-layout-component\n        >\n            {children}\n        </div>\n    );\n};\nDialogFooter.displayName = 'Dialog.Footer';\n\nexport const DialogBody = (\n    { padding, children, 'data-test-id': dataTestId = 'fondue-dialog-body' }: DialogBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.body}\n            data-dialog-body-padding={padding}\n            data-dialog-layout-component\n        >\n            {children}\n        </div>\n    );\n};\nDialogBody.displayName = 'Dialog.Body';\n\nexport const DialogSideContent = (\n    { children, 'data-test-id': dataTestId = 'fondue-dialog-side-content' }: DialogSideContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.sideContent} data-dialog-layout-component>\n            {children}\n        </div>\n    );\n};\nDialogSideContent.displayName = 'Dialog.SideContent';\n\nexport const DialogClose = ({ children }: DialogCloseProps) => {\n    return <RadixDialog.Close asChild>{children}</RadixDialog.Close>;\n};\nDialogClose.displayName = 'Dialog.Close';\n\nexport const DialogTitle = ({ children, asChild }: DialogAnnouncementProps) => {\n    return <RadixDialog.Title asChild={asChild}>{children}</RadixDialog.Title>;\n};\nDialogTitle.displayName = 'Dialog.Title';\n\nexport const DialogDescription = ({ children, asChild }: DialogAnnouncementProps) => {\n    return <RadixDialog.Description asChild={asChild}>{children}</RadixDialog.Description>;\n};\nDialogDescription.displayName = 'Dialog.Description';\n\nexport const Dialog = {\n    Root: DialogRoot,\n    Title: DialogTitle,\n    Description: DialogDescription,\n    Close: DialogClose,\n    Trigger: forwardRef<HTMLButtonElement, DialogTriggerProps>(DialogTrigger),\n    Content: forwardRef<HTMLDivElement, DialogContentProps>(DialogContent),\n    Header: forwardRef<HTMLDivElement, DialogHeaderProps>(DialogHeader),\n    Footer: forwardRef<HTMLDivElement, DialogFooterProps>(DialogFooter),\n    Body: forwardRef<HTMLDivElement, DialogBodyProps>(DialogBody),\n    SideContent: forwardRef<HTMLDivElement, DialogSideContentProps>(DialogSideContent),\n};\n"],"names":["DialogContext","createContext","DialogRoot","children","props","RadixDialog","DialogTrigger","asChild","dataTestId","ref","jsx","addAutoFocusAttribute","DialogUnderlay","showUnderlay","isModal","useContext","styles","DialogContent","maxWidth","minWidth","minHeight","padding","verticalAlign","rounded","theme","useFondueTheme","ThemeProvider","addShowFocusRing","DialogHeader","showBorder","showCloseButton","jsxs","IconCross","DialogFooter","DialogBody","DialogSideContent","DialogClose","DialogTitle","DialogDescription","Dialog","forwardRef"],"mappings":";;;;;;;AAqIA,MAAMA,IAAgBC,EAAiC,EAAE,SAAS,IAAO,GAE5DC,IAAa,CAAC,EAAE,UAAAC,GAAU,GAAGC,0BAEjCJ,EAAc,UAAd,EAAuB,OAAO,EAAE,SAASI,EAAM,SAAS,GAAM,GAC3D,4BAACC,EAAY,MAAZ,EAAkB,GAAGD,GAAQ,UAAAD,EAAS,CAAA,GAC3C;AAGRD,EAAW,cAAc;AAElB,MAAMI,IAAgB,CACzB,EAAE,SAAAC,IAAU,IAAM,UAAAJ,GAAU,gBAAgBK,IAAa,yBAAyB,GAAGJ,EAAM,GAC3FK,MAGI,gBAAAC;AAAA,EAACL,EAAY;AAAA,EAAZ;AAAA,IACG,aAAaM;AAAA,IACb,2BAAwB;AAAA,IACxB,2BAAuB;AAAA,IACvB,gBAAcH;AAAA,IACd,SAAAD;AAAA,IACA,KAAAE;AAAA,IACC,GAAGL;AAAA,IAEH,UAAAD;AAAA,EAAA;AACL;AAGRG,EAAc,cAAc;AAE5B,MAAMM,IAAiB,CAAC,EAAE,UAAAT,GAAU,cAAAU,QAAmE;AACnG,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAWf,CAAa;AAC5C,SAAIc,IAEI,gBAAAJ,EAACL,EAAY,SAAZ,EAAoB,gBAAcQ,GAAc,WAAWG,EAAO,UAC9D,UAAAb,GACL,sBAIH,OAAI,EAAA,WAAWa,EAAO,UAAU,gBAAcH,GAC1C,UAAAV,GACL;AAER,GAEac,IAAgB,CACzB;AAAA,EACI,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,SAAAC,IAAU;AAAA,EACV,eAAAC,IAAgB;AAAA,EAChB,gBAAgBd,IAAa;AAAA,EAC7B,cAAAK,IAAe;AAAA,EACf,SAAAU,IAAU;AAAA,EACV,UAAApB;AAAA,EACA,GAAGC;AACP,GACAK,MACC;AACD,QAAMe,IAAQC,EAAe;AAEzB,SAAA,gBAAAf,EAACL,EAAY,QAAZ,EACG,4BAACqB,GAAc,EAAA,OAAAF,GACX,UAAC,gBAAAd,EAAAE,GAAA,EAAe,cAAAC,GACZ,UAAA,gBAAAH;AAAA,IAACL,EAAY;AAAA,IAAZ;AAAA,MACG,OACI;AAAA,QACI,sBAAsBa;AAAA,QACtB,sBAAsBC;AAAA,QACtB,uBAAuBC;AAAA,MAC3B;AAAA,MAEJ,KAAAX;AAAA,MACA,WAAWO,EAAO;AAAA,MAClB,SAASW;AAAA,MACT,uBAAqBN;AAAA,MACrB,uBAAqBE;AAAA,MACrB,gBAAcf;AAAA,MACd,8BAA4Bc;AAAA,MAC3B,GAAGlB;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA,EAET,CAAA,EACJ,CAAA,GACJ;AAER;AACAc,EAAc,cAAc;AAErB,MAAMW,IAAe,CACxB;AAAA,EACI,SAAAP;AAAA,EACA,YAAAQ,IAAa;AAAA,EACb,iBAAAC,IAAkB;AAAA,EAClB,UAAA3B;AAAA,EACA,gBAAgBK,IAAa;AACjC,GACAC,MAGI,gBAAAsB;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAcvB;AAAA,IACd,KAAAC;AAAA,IACA,WAAWO,EAAO;AAAA,IAClB,8BAA4BK;AAAA,IAC5B,oBAAkBQ;AAAA,IAClB,gCAA4B;AAAA,IAE5B,UAAA;AAAA,MAAA,gBAAAnB,EAAC,SAAK,UAAAP,GAAS;AAAA,MACd2B,KACI,gBAAApB,EAAAL,EAAY,OAAZ,EAAkB,MAAK,UAAS,gBAAc,GAAGG,CAAU,UAAU,WAAU,qBAC5E,4BAACwB,GAAU,EAAA,MAAM,IAAI,EACzB,CAAA;AAAA,IAAA;AAAA,EAAA;AAER;AAGRJ,EAAa,cAAc;AAEd,MAAAK,IAAe,CACxB,EAAE,SAAAZ,GAAS,YAAAQ,IAAa,IAAM,UAAA1B,GAAU,gBAAgBK,IAAa,uBAAuB,GAC5FC,MAGI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAcF;AAAA,IACd,KAAAC;AAAA,IACA,WAAWO,EAAO;AAAA,IAClB,8BAA4BK;AAAA,IAC5B,oBAAkBQ;AAAA,IAClB,gCAA4B;AAAA,IAE3B,UAAA1B;AAAA,EAAA;AACL;AAGR8B,EAAa,cAAc;AAEd,MAAAC,IAAa,CACtB,EAAE,SAAAb,GAAS,UAAAlB,GAAU,gBAAgBK,IAAa,qBAAqB,GACvEC,MAGI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAcF;AAAA,IACd,KAAAC;AAAA,IACA,WAAWO,EAAO;AAAA,IAClB,4BAA0BK;AAAA,IAC1B,gCAA4B;AAAA,IAE3B,UAAAlB;AAAA,EAAA;AACL;AAGR+B,EAAW,cAAc;AAEZ,MAAAC,IAAoB,CAC7B,EAAE,UAAAhC,GAAU,gBAAgBK,IAAa,gCACzCC,MAGI,gBAAAC,EAAC,OAAI,EAAA,gBAAcF,GAAY,KAAAC,GAAU,WAAWO,EAAO,aAAa,gCAA4B,IAC/F,UAAAb,EACL,CAAA;AAGRgC,EAAkB,cAAc;AAEzB,MAAMC,IAAc,CAAC,EAAE,UAAAjC,0BAClBE,EAAY,OAAZ,EAAkB,SAAO,IAAE,UAAAF,GAAS;AAEhDiC,EAAY,cAAc;AAEnB,MAAMC,IAAc,CAAC,EAAE,UAAAlC,GAAU,SAAAI,QAC5B,gBAAAG,EAAAL,EAAY,OAAZ,EAAkB,SAAAE,GAAmB,UAAAJ,EAAS,CAAA;AAE1DkC,EAAY,cAAc;AAEnB,MAAMC,IAAoB,CAAC,EAAE,UAAAnC,GAAU,SAAAI,QAClC,gBAAAG,EAAAL,EAAY,aAAZ,EAAwB,SAAAE,GAAmB,UAAAJ,EAAS,CAAA;AAEhEmC,EAAkB,cAAc;AAEzB,MAAMC,IAAS;AAAA,EAClB,MAAMrC;AAAA,EACN,OAAOmC;AAAA,EACP,aAAaC;AAAA,EACb,OAAOF;AAAA,EACP,SAASI,EAAkDlC,CAAa;AAAA,EACxE,SAASkC,EAA+CvB,CAAa;AAAA,EACrE,QAAQuB,EAA8CZ,CAAY;AAAA,EAClE,QAAQY,EAA8CP,CAAY;AAAA,EAClE,MAAMO,EAA4CN,CAAU;AAAA,EAC5D,aAAaM,EAAmDL,CAAiB;AACrF;"}

package/dist/fondue-components70.js

@@ -0,0 +1,42 @@
+import { Children as a, isValidElement as u, cloneElement as f } from "react";
+import { ForwardedRefSelectItem as E } from "./fondue-components52.js";
+const g = ({
+  children: r,
+  value: o,
+  label: s
+}) => r && typeof r == "string" ? {
+  value: o || r,
+  label: s || r
+} : {
+  value: o || "",
+  label: s || o || ""
+}, w = (r, o) => u(r) && r.type === o, y = (r, o, s, p = 0) => {
+  const n = [];
+  let t = 0;
+  return a.forEach(r, (e) => {
+    if (w(e, E) && u(e))
+      g(e.props).label.toLowerCase().includes((s == null ? void 0 : s.toLowerCase()) || "") && (n.push(o(e, p + t)), t++);
+    else if (u(e) && (e != null && e.props.children)) {
+      const { parsedChildren: m, subElementCount: C } = y(
+        e.props.children,
+        o,
+        "",
+        p + t
+      );
+      e = f(e, {
+        children: m,
+        key: `group-${p + t}`
+      }), n.push(e), t += C;
+    } else
+      n.push(e);
+  }), {
+    parsedChildren: n,
+    subElementCount: t
+  };
+};
+export {
+  g as getSelectOptionValue,
+  w as isReactLeaf,
+  y as recursiveMap
+};
+//# sourceMappingURL=fondue-components70.js.map

package/dist/fondue-components70.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components70.js","sources":["../src/components/Select/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    Children,\n    cloneElement,\n    isValidElement,\n    type JSXElementConstructor,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\n\nimport { ForwardedRefSelectItem, type SelectItemProps } from './SelectItem';\n\n/**\n * Extracts and returns an object containing `value` and `label` from a given SelectItemProps object.\n * It prioritizes explicit `value` and `label` properties but will fall back to using `children` as the value or label if necessary.\n *\n * @param {SelectItemProps} props - The properties of a select item, which include potential children, value, and label.\n * @returns {{ value: string; label: string }} An object containing `value` and `label` as strings.\n *\n * @example\n * // Returns { value: 'option1', label: 'Option 1' }\n * getSelectOptionValue({ value: 'option1', label: 'Option 1' });\n *\n * @example\n * // Uses children as the value and label when they are not explicitly provided\n * // Returns { value: 'Default', label: 'Default' }\n * getSelectOptionValue({ children: 'Default' });\n */\nexport const getSelectOptionValue = ({\n    children,\n    value,\n    label,\n}: SelectItemProps): {\n    value: string;\n    label: string;\n} => {\n    if (children && typeof children === 'string') {\n        return {\n            value: value ? value : children,\n            label: label ? label : children,\n        };\n    }\n\n    return {\n        value: value || '',\n        label: label ? label : value || '',\n    };\n};\n/**\n * Determines if the child is a leaf node of React, meaning it has one final child of a native type;\n *\n * @param {ReactNode} child - The React child node to check.\n * @param {JSXElementConstructor<never>} Component - The React component constructor used for comparison.\n * @returns {boolean} Returns true if the `child` is a valid React element of the specified `Component` type.\n *\n * @example\n * // Assuming ForwardedRefSelectItem is a component that renders an <input> element\n * // Returns true\n * isReactLeaf(<ForwardedRefSelectItem />, ForwardedRefSelectItem);\n *\n * @example\n * // Returns false for non-matching types or non-leaf components\n * isReactLeaf(<div><ForwardedRefSelectItem /></div>, ForwardedRefSelectItem);\n */\nexport const isReactLeaf = (child: ReactNode, Component: JSXElementConstructor<never>): child is ReactElement =>\n    isValidElement(child) && child.type === Component;\n\n/**\n * Recursively maps through React children, applying a callback to each child that meets the specified conditions.\n * This function is useful for deeply nested structures where modifications or checks are needed at multiple levels.\n *\n * @param {ReactNode} children - The children to be recursively processed.\n * @param {function(ReactNode, number): ReactNode} callback - A function that is called for each child that meets the condition. It receives the child and its index, and returns a React node.\n * @param {string} [filterText=''] - Optional text used to filter children based on their properties.\n * @param {number} [nextIndex=0] - The starting index for numbering children, defaults to 0.\n * @returns {{ parsedChildren: ReactNode[], subElementCount: number }} An object containing the transformed children array and the count of all processed sub-elements.\n *\n * @example\n * // Example usage in a select component where only items containing a certain text are modified\n * recursiveMap(children, (child, index) => React.cloneElement(child, { extraProp: 'value' }), 'specific text');\n *\n * @example\n * // Nested structure transformation, adding class names based on index\n * recursiveMap(children, (child, index) => React.cloneElement(child, { className: `item-${index}` }));\n */\nexport const recursiveMap = (\n    children: ReactNode,\n    callback: (child: ReactNode, nextIndex: number) => ReactNode,\n    filterText?: string,\n    nextIndex: number = 0,\n): {\n    parsedChildren: ReactNode[];\n    subElementCount: number;\n} => {\n    const resultingChildren: ReactNode[] = [];\n    let itemCounter = 0;\n    Children.forEach(children, (child) => {\n        if (isReactLeaf(child, ForwardedRefSelectItem) && isValidElement<SelectItemProps>(child)) {\n            if (\n                getSelectOptionValue(child.props)\n                    .label.toLowerCase()\n                    .includes(filterText?.toLowerCase() || '')\n            ) {\n                resultingChildren.push(callback(child, nextIndex + itemCounter));\n                itemCounter++;\n            }\n        } else if (isValidElement<{ children: ReactNode }>(child) && child?.props.children) {\n            const { parsedChildren, subElementCount } = recursiveMap(\n                child.props.children,\n                callback,\n                '',\n                nextIndex + itemCounter,\n            );\n            child = cloneElement(child, {\n                children: parsedChildren,\n                key: `group-${nextIndex + itemCounter}`,\n            });\n            resultingChildren.push(child);\n            itemCounter += subElementCount;\n        } else {\n            resultingChildren.push(child);\n        }\n    });\n    return {\n        parsedChildren: resultingChildren,\n        subElementCount: itemCounter,\n    };\n};\n"],"names":["getSelectOptionValue","children","value","label","isReactLeaf","child","Component","isValidElement","recursiveMap","callback","filterText","nextIndex","resultingChildren","itemCounter","Children","ForwardedRefSelectItem","parsedChildren","subElementCount","cloneElement"],"mappings":";;AA6BO,MAAMA,IAAuB,CAAC;AAAA,EACjC,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AACJ,MAIQF,KAAY,OAAOA,KAAa,WACzB;AAAA,EACH,OAAOC,KAAgBD;AAAA,EACvB,OAAOE,KAAgBF;AAC3B,IAGG;AAAA,EACH,OAAOC,KAAS;AAAA,EAChB,OAAOC,KAAgBD,KAAS;AACpC,GAkBSE,IAAc,CAACC,GAAkBC,MAC1CC,EAAeF,CAAK,KAAKA,EAAM,SAASC,GAoB/BE,IAAe,CACxBP,GACAQ,GACAC,GACAC,IAAoB,MAInB;AACD,QAAMC,IAAiC,CAAC;AACxC,MAAIC,IAAc;AACT,SAAAC,EAAA,QAAQb,GAAU,CAACI,MAAU;AAClC,QAAID,EAAYC,GAAOU,CAAsB,KAAKR,EAAgCF,CAAK;AACnF,MACIL,EAAqBK,EAAM,KAAK,EAC3B,MAAM,cACN,UAASK,KAAA,gBAAAA,EAAY,kBAAiB,EAAE,MAE7CE,EAAkB,KAAKH,EAASJ,GAAOM,IAAYE,CAAW,CAAC,GAC/DA;AAAA,aAEGN,EAAwCF,CAAK,MAAKA,KAAA,QAAAA,EAAO,MAAM,WAAU;AAC1E,YAAA,EAAE,gBAAAW,GAAgB,iBAAAC,EAAA,IAAoBT;AAAA,QACxCH,EAAM,MAAM;AAAA,QACZI;AAAA,QACA;AAAA,QACAE,IAAYE;AAAA,MAChB;AACA,MAAAR,IAAQa,EAAab,GAAO;AAAA,QACxB,UAAUW;AAAA,QACV,KAAK,SAASL,IAAYE,CAAW;AAAA,MAAA,CACxC,GACDD,EAAkB,KAAKP,CAAK,GACbQ,KAAAI;AAAA,IAAA;AAEf,MAAAL,EAAkB,KAAKP,CAAK;AAAA,EAChC,CACH,GACM;AAAA,IACH,gBAAgBO;AAAA,IAChB,iBAAiBC;AAAA,EACrB;AACJ;"}

package/dist/fondue-components8.js

@@ -1,8 +1,8 @@
 import { jsx as d } from "react/jsx-runtime";
 import * as m from "@radix-ui/react-separator";
 import { forwardRef as s } from "react";
-import { cn as f } from "./fondue-components27.js";
-import { dividerStyles as p } from "./fondue-components39.js";
+import { cn as f } from "./fondue-components28.js";
+import { dividerStyles as p } from "./fondue-components40.js";
 const n = s(
   ({
     "data-test-id": r = "fondue-divider",

package/dist/fondue-components9.js

@@ -1,114 +1,119 @@
-import { jsx as e, jsxs as h } from "react/jsx-runtime";
+import { jsx as r, jsxs as y } from "react/jsx-runtime";
 import { IconCaretRight as F } from "@frontify/fondue-icons";
 import * as n from "@radix-ui/react-dropdown-menu";
 import { Slot as I } from "@radix-ui/react-slot";
-import { forwardRef as s } from "react";
-import { useProcessedChildren as w } from "./fondue-components40.js";
-import a from "./fondue-components41.js";
-const c = ({
+import { forwardRef as i } from "react";
+import { useFondueTheme as G, ThemeProvider as P } from "./fondue-components25.js";
+import { useProcessedChildren as c } from "./fondue-components41.js";
+import s from "./fondue-components42.js";
+const w = ({
   children: o,
   open: t,
-  onOpenChange: r,
-  "data-test-id": d = "fondue-dropdown"
-}) => /* @__PURE__ */ e(n.Root, { open: t, onOpenChange: r, "data-test-id": d, children: o });
-c.displayName = "Dropdown.Root";
-const m = ({
+  modal: e = !1,
+  onOpenChange: d,
+  "data-test-id": a = "fondue-dropdown"
+}) => /* @__PURE__ */ r(n.Root, { open: t, modal: e, onOpenChange: d, "data-test-id": a, children: o });
+w.displayName = "Dropdown.Root";
+const l = ({
   asChild: o = !0,
   children: t,
-  "data-test-id": r = "fondue-dropdown-trigger",
+  "data-test-id": e = "fondue-dropdown-trigger",
   ...d
-}, i) => /* @__PURE__ */ e(n.Trigger, { asChild: o, "data-test-id": r, ref: i, ...d, children: t });
-m.displayName = "Dropdown.Trigger";
-const l = ({
+}, a) => /* @__PURE__ */ r(n.Trigger, { asChild: o, "data-test-id": e, ref: a, ...d, children: t });
+l.displayName = "Dropdown.Trigger";
+const f = ({
   side: o = "bottom",
   align: t = "start",
-  children: r,
+  children: e,
   preventTriggerFocusOnClose: d,
-  "data-test-id": i = "fondue-dropdown-content"
-}, p) => /* @__PURE__ */ e(n.Portal, { children: /* @__PURE__ */ e(
-  n.Content,
-  {
-    align: t,
-    collisionPadding: 8,
-    sideOffset: 8,
-    side: o,
-    className: a.content,
-    "data-test-id": i,
-    ref: p,
-    onCloseAutoFocus: (u) => {
-      d && u.preventDefault();
-    },
-    children: r
-  }
-) });
-l.displayName = "Dropdown.Content";
-const g = ({ children: o, "data-test-id": t = "fondue-dropdown-group" }, r) => /* @__PURE__ */ e(n.Group, { className: a.group, "data-test-id": t, ref: r, children: o });
+  "data-test-id": a = "fondue-dropdown-content"
+}, p) => {
+  const u = G();
+  return /* @__PURE__ */ r(n.Portal, { children: /* @__PURE__ */ r(P, { theme: u, children: /* @__PURE__ */ r(
+    n.Content,
+    {
+      align: t,
+      collisionPadding: 8,
+      sideOffset: 8,
+      side: o,
+      className: s.content,
+      "data-test-id": a,
+      ref: p,
+      onCloseAutoFocus: (m) => {
+        d && m.preventDefault();
+      },
+      children: e
+    }
+  ) }) });
+};
+f.displayName = "Dropdown.Content";
+const g = ({ children: o, "data-test-id": t = "fondue-dropdown-group" }, e) => /* @__PURE__ */ r(n.Group, { className: s.group, "data-test-id": t, ref: e, children: o });
 g.displayName = "Dropdown.Group";
-const f = ({
+const D = ({
   children: o,
   "data-test-id": t = "fondue-dropdown-submenu"
-}) => /* @__PURE__ */ e(n.Sub, { "data-test-id": t, children: o });
-f.displayName = "Dropdown.SubMenu";
-const D = ({ children: o, "data-test-id": t = "fondue-dropdown-subtrigger" }, r) => {
-  const { content: d } = w(o);
-  return /* @__PURE__ */ h(n.SubTrigger, { className: a.subTrigger, "data-test-id": t, ref: r, children: [
+}) => /* @__PURE__ */ r(n.Sub, { "data-test-id": t, children: o });
+D.displayName = "Dropdown.SubMenu";
+const b = ({ children: o, "data-test-id": t = "fondue-dropdown-subtrigger" }, e) => {
+  const { content: d } = c(o);
+  return /* @__PURE__ */ y(n.SubTrigger, { className: s.subTrigger, "data-test-id": t, ref: e, children: [
     d,
-    /* @__PURE__ */ e(F, { className: a.subMenuIndicator, size: 16 })
+    /* @__PURE__ */ r(F, { className: s.subMenuIndicator, size: 16 })
   ] });
 };
-D.displayName = "Dropdown.SubTrigger";
-const b = ({ children: o, "data-test-id": t = "fondue-dropdown-subcontent" }, r) => /* @__PURE__ */ e(n.Portal, { children: /* @__PURE__ */ e(n.SubContent, { className: a.subContent, "data-test-id": t, ref: r, children: o }) });
-b.displayName = "Dropdown.SubContent";
-const S = ({
+b.displayName = "Dropdown.SubTrigger";
+const S = ({ children: o, "data-test-id": t = "fondue-dropdown-subcontent" }, e) => /* @__PURE__ */ r(n.Portal, { children: /* @__PURE__ */ r(n.SubContent, { className: s.subContent, "data-test-id": t, ref: e, children: o }) });
+S.displayName = "Dropdown.SubContent";
+const N = ({
   children: o,
   disabled: t,
-  textValue: r,
+  textValue: e,
   onSelect: d,
-  emphasis: i = "default",
+  emphasis: a = "default",
   "data-test-id": p = "fondue-dropdown-subtrigger",
   ...u
-}, C) => {
-  const { content: R, isLink: T } = w(o), y = T ? I : "div";
-  return /* @__PURE__ */ e(
+}, m) => {
+  const { content: R, isLink: h } = c(o), T = h ? I : "div";
+  return /* @__PURE__ */ r(
     n.Item,
     {
       onSelect: d,
-      className: a.item,
-      textValue: r,
+      className: s.item,
+      textValue: e,
       "data-test-id": p,
-      "data-emphasis": i,
-      ref: C,
+      "data-emphasis": a,
+      ref: m,
       disabled: t,
       asChild: !0,
       ...u,
-      children: /* @__PURE__ */ e(y, { children: R })
+      children: /* @__PURE__ */ r(T, { children: R })
     }
   );
 };
-S.displayName = "Dropdown.Item";
-const N = ({ children: o, name: t, "data-test-id": r = "fondue-dropdown-slot" }, d) => /* @__PURE__ */ e("div", { "data-name": t, className: a.slot, "data-test-id": r, ref: d, children: o });
-N.displayName = "Dropdown.Slot";
-const G = s(m), x = s(l), M = s(g), P = s(D), v = s(b), j = s(S), k = s(N), B = {
-  Root: c,
-  Trigger: G,
+N.displayName = "Dropdown.Item";
+const C = ({ children: o, name: t, "data-test-id": e = "fondue-dropdown-slot" }, d) => /* @__PURE__ */ r("div", { "data-name": t, className: s.slot, "data-test-id": e, ref: d, children: o });
+C.displayName = "Dropdown.Slot";
+const v = i(l), x = i(f), M = i(g), j = i(b), k = i(S), z = i(N), A = i(C), J = {
+  Root: w,
+  Trigger: v,
   Content: x,
   Group: M,
-  SubMenu: f,
-  SubTrigger: P,
-  SubContent: v,
-  Item: j,
-  Slot: k
+  SubMenu: D,
+  SubTrigger: j,
+  SubContent: k,
+  Item: z,
+  Slot: A
 };
 export {
-  B as Dropdown,
-  l as DropdownContent,
+  J as Dropdown,
+  f as DropdownContent,
   g as DropdownGroup,
-  S as DropdownItem,
-  c as DropdownRoot,
-  N as DropdownSlot,
-  b as DropdownSubContent,
-  f as DropdownSubMenu,
-  D as DropdownSubTrigger,
-  m as DropdownTrigger
+  N as DropdownItem,
+  w as DropdownRoot,
+  C as DropdownSlot,
+  S as DropdownSubContent,
+  D as DropdownSubMenu,
+  b as DropdownSubTrigger,
+  l as DropdownTrigger
 };
 //# sourceMappingURL=fondue-components9.js.map

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 { Slot } from '@radix-ui/react-slot';\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\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    /**\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        side = 'bottom',\n        align = 'start',\n        children,\n        preventTriggerFocusOnClose,\n        'data-test-id': dataTestId = 'fondue-dropdown-content',\n    }: DropdownContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\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-test-id={dataTestId}\n                ref={ref}\n                onCloseAutoFocus={(event) => {\n                    if (preventTriggerFocusOnClose) {\n                        event.preventDefault();\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    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const DropdownSubContent = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-subcontent' }: DropdownSubContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.Portal>\n            <RadixDropdown.SubContent className={styles.subContent} data-test-id={dataTestId} ref={ref}>\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","side","align","preventTriggerFocusOnClose","styles","event","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":"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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, type ForwardedRef, type ReactNode } from 'react';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport { useProcessedChildren } from './hooks/useProcessedChildren';\nimport styles from './styles/dropdown.module.scss';\n\nexport type DropdownRootProps = {\n    children?: ReactNode;\n    /**\n     * When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.\n     * @default false\n     */\n    modal?: boolean;\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    modal = false,\n    onOpenChange,\n    'data-test-id': dataTestId = 'fondue-dropdown',\n}: DropdownRootProps) => {\n    return (\n        <RadixDropdown.Root open={open} modal={modal} 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    /**\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        side = 'bottom',\n        align = 'start',\n        children,\n        preventTriggerFocusOnClose,\n        'data-test-id': dataTestId = 'fondue-dropdown-content',\n    }: DropdownContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const theme = useFondueTheme();\n    return (\n        <RadixDropdown.Portal>\n            <ThemeProvider theme={theme}>\n                <RadixDropdown.Content\n                    align={align}\n                    collisionPadding={8}\n                    sideOffset={8}\n                    side={side}\n                    className={styles.content}\n                    data-test-id={dataTestId}\n                    ref={ref}\n                    onCloseAutoFocus={(event) => {\n                        if (preventTriggerFocusOnClose) {\n                            event.preventDefault();\n                        }\n                    }}\n                >\n                    {children}\n                </RadixDropdown.Content>\n            </ThemeProvider>\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    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const DropdownSubContent = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-subcontent' }: DropdownSubContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.Portal>\n            <RadixDropdown.SubContent className={styles.subContent} data-test-id={dataTestId} ref={ref}>\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","modal","onOpenChange","dataTestId","jsx","RadixDropdown","DropdownTrigger","asChild","props","ref","DropdownContent","side","align","preventTriggerFocusOnClose","theme","useFondueTheme","ThemeProvider","styles","event","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":"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"}

package/dist/index.d.ts

@@ -1,6 +1,9 @@
 import { AriaAttributes } from 'react';
 import { ChangeEvent } from 'react';
+import { CommonAriaAttrs } from '../../utilities/types';
+import { Context } from 'react';
 import { CSSProperties } from 'react';
+import { default as default_2 } from '@frontify/fondue-tokens/theme-tokens';
 import { FocusEvent as FocusEvent_2 } from 'react';
 import { FormEvent } from 'react';
 import { ForwardedRef } from 'react';
@@ -21,6 +24,8 @@ declare type AtLeastOneAttr<T> = Partial<T> & {
     [K in keyof T]-?: Required<Pick<T, K>>;
 }[keyof T];
 
+declare type AvailableTheme = keyof typeof default_2;
+
 declare type BaseTableRowProps = {
     /**
      * Whether the row is in a selected state
@@ -248,11 +253,11 @@ declare type ComboboxProps = {
     /**
      * Callback function that is called when an item is selected.
      */
-    onSelect?: (selectedValue: string) => void;
+    onSelect?: (selectedValue: string | null) => void;
     /**
      * The active value in the combobox component. This is used to control the combobox externally.
      */
-    value?: string;
+    value?: string | null;
     /**
      * The default value of the combobox component. Used for uncontrolled usages.
      */
@@ -274,7 +279,11 @@ declare type ComboboxProps = {
      * The alignment of the menu.
      * @default "start"
      */
-    alignMenu?: 'start' | 'center' | 'end';
+    alignMenu?: 'start' | 'center' | 'end' /**
+    * Defines the preferred side of the select. It will not be respected if there are collisions with the viewport.
+    * @default "bottom"
+    */;
+    side?: 'left' | 'right' | 'bottom' | 'top';
     /**
      * The aria label of the combobox component.
      */
@@ -285,7 +294,7 @@ declare type ComboboxProps = {
     'data-test-id'?: string;
 };
 
-declare type CommonAriaAttrs = Pick<AriaAttributes, 'aria-describedby'> & AtLeastOneAriaLabelAttr;
+declare type CommonAriaAttrs_2 = Pick<AriaAttributes, 'aria-describedby'> & AtLeastOneAriaLabelAttr;
 
 declare type CommonAriaProps = {
     /**
@@ -504,7 +513,7 @@ declare type DividerStyle = 'noline' | 'dashed' | 'solid';
 
 export declare const Dropdown: {
     Root: {
-        ({ children, open, onOpenChange, "data-test-id": dataTestId, }: DropdownRootProps): JSX_2.Element;
+        ({ children, open, modal, onOpenChange, "data-test-id": dataTestId, }: DropdownRootProps): JSX_2.Element;
         displayName: string;
     };
     Trigger: ForwardRefExoticComponent<DropdownTriggerProps & RefAttributes<HTMLButtonElement>>;
@@ -568,6 +577,11 @@ declare type DropdownItemProps = {
 
 declare type DropdownRootProps = {
     children?: ReactNode;
+    /**
+     * When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.
+     * @default false
+     */
+    modal?: boolean;
     /**
      * Controls the open state of the dropdown.
      */
@@ -1124,11 +1138,11 @@ declare type SelectComponentProps = {
     /**
      * Callback function that is called when an item is selected.
      */
-    onSelect?: (selectedValue?: string) => void;
+    onSelect?: (selectedValue: string | null) => void;
     /**
      * The active value in the select component. This is used to control the select externally.
      */
-    value?: string;
+    value?: string | null;
     /**
      * The default value of the select component. Used for uncontrolled usages.
      */
@@ -1151,6 +1165,11 @@ declare type SelectComponentProps = {
      * @default "start"
      */
     alignMenu?: 'start' | 'center' | 'end';
+    /**
+     * Defines the preferred side of the select. It will not be respected if there are collisions with the viewport.
+     * @default "bottom"
+     */
+    side?: 'left' | 'right' | 'bottom' | 'top';
     /**
      * The aria label of the select component.
      */
@@ -1162,7 +1181,7 @@ declare type SelectComponentProps = {
 };
 
 declare const SelectInput: {
-    ({ children, onSelect, value, defaultValue, placeholder, status, disabled, alignMenu, "aria-label": ariaLabel, "data-test-id": dataTestId, }: SelectComponentProps, forwardedRef: ForwardedRef<HTMLDivElement>): JSX_2.Element;
+    ({ children, onSelect, value, defaultValue, placeholder, status, disabled, alignMenu, side, "aria-label": ariaLabel, "data-test-id": dataTestId, }: SelectComponentProps, forwardedRef: ForwardedRef<HTMLDivElement>): JSX_2.Element;
     displayName: string;
 };
 
@@ -1265,7 +1284,7 @@ declare type SliderProps = {
     onChange?: (value: number[]) => void;
     onCommit?: (value: number[]) => void;
     'data-test-id'?: string;
-} & CommonAriaAttrs;
+} & CommonAriaAttrs_2;
 
 declare type SortDirection = 'ascending' | 'descending' | undefined;
 
@@ -1317,7 +1336,7 @@ declare type SwitchProps = {
      */
     onFocus?: (event: FormEvent<HTMLButtonElement>) => void;
     'data-test-id'?: string;
-} & CommonAriaAttrs;
+} & CommonAriaAttrs_2;
 
 export declare const Table: {
     Root: ForwardRefExoticComponent<TableRootProps & RefAttributes<HTMLTableElement>>;
@@ -1407,7 +1426,7 @@ declare type TableRootProps = {
      */
     sticky?: 'head' | 'col' | 'both';
     children: ReactNode;
-} & CommonAriaAttrs;
+} & CommonAriaAttrs_2;
 
 declare type TableRowCellProps = {
     /**
@@ -1585,6 +1604,19 @@ declare type TextInputProps = {
     'aria-describedby'?: string;
 };
 
+export declare const ThemeContext: Context<"dark" | "light">;
+
+export declare const ThemeProvider: ({ children, theme }: ThemeProviderProps) => JSX_2.Element;
+
+declare type ThemeProviderProps = {
+    children: ReactNode;
+    /**
+     * The theme to apply
+     * @default "light"
+     * */
+    theme: AvailableTheme;
+};
+
 export declare const Tooltip: {
     Root: {
         ({ children, enterDelay, open, onOpenChange, ...props }: TooltipRootProps): JSX_2.Element;
@@ -1636,6 +1668,8 @@ declare type TooltipTriggerProps = {
     'data-test-id'?: string;
 };
 
+export declare const useFondueTheme: () => "dark" | "light";
+
 export { }