@frontify/fondue-components 19.1.0 → 19.3.0

package/dist/fondue-components.js

@@ -3,7 +3,7 @@ import { Accordion as t } from "./fondue-components3.js";
 import { Badge as m } from "./fondue-components4.js";
 import { Box as f } from "./fondue-components5.js";
 import { Button as l } from "./fondue-components6.js";
-import { Checkbox as n } from "./fondue-components7.js";
+import { Checkbox as d } from "./fondue-components7.js";
 import { ColorPicker as c } from "./fondue-components8.js";
 import { Dialog as g } from "./fondue-components9.js";
 import { Divider as h } from "./fondue-components10.js";
@@ -25,14 +25,15 @@ import { Table as V } from "./fondue-components25.js";
 import { Tabs as X } from "./fondue-components26.js";
 import { Text as Z } from "./fondue-components27.js";
 import { TextInput as $ } from "./fondue-components28.js";
-import { ThemeContext as ro, ThemeProvider as eo, useFondueTheme as to } from "./fondue-components29.js";
-import { Tooltip as mo } from "./fondue-components30.js";
+import { Textarea as ro } from "./fondue-components29.js";
+import { ThemeContext as to, ThemeProvider as xo, useFondueTheme as mo } from "./fondue-components30.js";
+import { Tooltip as fo } from "./fondue-components31.js";
 export {
   t as Accordion,
   m as Badge,
   f as Box,
   l as Button,
-  n as Checkbox,
+  d as Checkbox,
   c as ColorPicker,
   g as Dialog,
   h as Divider,
@@ -54,9 +55,10 @@ export {
   X as Tabs,
   Z as Text,
   $ as TextInput,
-  ro as ThemeContext,
-  eo as ThemeProvider,
-  mo as Tooltip,
-  to as useFondueTheme
+  ro as Textarea,
+  to as ThemeContext,
+  xo as ThemeProvider,
+  fo as Tooltip,
+  mo as useFondueTheme
 };
 //# sourceMappingURL=fondue-components.js.map

package/dist/fondue-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"fondue-components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/fondue-components10.js

@@ -1,41 +1,45 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import * as p from "@radix-ui/react-separator";
 import { forwardRef as f } from "react";
-import { cn as l } from "./fondue-components36.js";
-import { dividerStyles as c } from "./fondue-components49.js";
-const v = f(
+import { cn as l } from "./fondue-components37.js";
+import v from "./fondue-components50.js";
+import { dividerStyles as c } from "./fondue-components51.js";
+const h = f(
   ({
-    "data-test-id": o = "fondue-divider",
-    direction: t = "horizontal",
-    className: i,
-    variant: e,
-    as: d = "div",
-    decorative: a,
+    "data-test-id": i = "fondue-divider",
+    direction: r = "horizontal",
+    className: a,
+    variant: o,
+    as: e = "div",
+    decorative: d,
     ...m
   }, s) => {
-    const n = d;
-    return /* @__PURE__ */ r(
+    const n = e;
+    return /* @__PURE__ */ t(
       p.Root,
       {
         ref: s,
         className: l(
           c({
-            direction: t,
-            variant: e,
+            direction: r,
+            variant: o,
             ...m
           }),
-          i
+          v.root,
+          a
         ),
-        "data-test-id": o,
-        decorative: a,
+        "data-variant": o,
+        "data-test-id": i,
+        decorative: d,
+        "data-orientation": r,
         asChild: !0,
-        children: /* @__PURE__ */ r(n, {})
+        children: /* @__PURE__ */ t(n, {})
       }
     );
   }
 );
-v.displayName = "Divider";
+h.displayName = "Divider";
 export {
-  v as Divider
+  h as Divider
 };
 //# sourceMappingURL=fondue-components10.js.map

package/dist/fondue-components10.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components10.js","sources":["../src/components/Divider/Divider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as Separator from '@radix-ui/react-separator';\nimport { forwardRef, type ForwardedRef, type ReactElement } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { dividerStyles } from './styles/dividerStyles';\n\ntype DividerStyle = 'noline' | 'dashed' | 'solid';\ntype DividerPadding = 'none' | 'small' | 'medium' | 'large';\ntype DividerDirection = 'horizontal' | 'vertical';\ntype DividerColor = 'weak' | 'default' | 'strong' | 'x-strong';\n\nexport type DividerProps = {\n    /**\n     * The style of the divider\n     * @default \"solid\"\n     */\n    variant?: DividerStyle;\n    /**\n     * The padding of the divider\n     * @default \"medium\"\n     */\n    padding?: DividerPadding;\n    /**\n     * The color of the divider\n     * @default \"default\"\n     */\n    color?: DividerColor;\n    /**\n     * The direction of the divider\n     * @default \"horizontal\"\n     */\n    direction?: DividerDirection;\n    /**\n     * The html element to be used\n     * @default \"div\"\n     */\n    as?: 'div' | 'li';\n    /**\n     * When `true`, signifies that it is purely visual, carries no semantic\n     * meaning, and ensures it is not present in the accessibility tree.\n     * @default false\n     */\n    decorative?: boolean;\n    'data-test-id'?: string;\n    className?: string;\n};\n\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(\n    (\n        {\n            'data-test-id': dataTestId = 'fondue-divider',\n            direction = 'horizontal',\n            className,\n            variant,\n            as = 'div',\n            decorative,\n            ...props\n        }: DividerProps,\n        ref: ForwardedRef<HTMLDivElement | null>,\n    ): ReactElement => {\n        const Component = as;\n\n        return (\n            <Separator.Root\n                ref={ref}\n                className={cn(\n                    dividerStyles({\n                        direction,\n                        variant,\n                        ...props,\n                    }),\n                    className,\n                )}\n                data-test-id={dataTestId}\n                decorative={decorative}\n                asChild\n            >\n                <Component />\n            </Separator.Root>\n        );\n    },\n);\n\nDivider.displayName = 'Divider';\n"],"names":["Divider","forwardRef","dataTestId","direction","className","variant","as","decorative","props","ref","Component","jsx","Separator","cn","dividerStyles"],"mappings":";;;;;AAkDO,MAAMA,IAAUC;AAAA,EACnB,CACI;AAAA,IACI,gBAAgBC,IAAa;AAAA,IAC7B,WAAAC,IAAY;AAAA,IACZ,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,IAAAC,IAAK;AAAA,IACL,YAAAC;AAAA,IACA,GAAGC;AAAA,KAEPC,MACe;AACf,UAAMC,IAAYJ;AAGd,WAAA,gBAAAK;AAAA,MAACC,EAAU;AAAA,MAAV;AAAA,QACG,KAAAH;AAAA,QACA,WAAWI;AAAA,UACPC,EAAc;AAAA,YACV,WAAAX;AAAA,YACA,SAAAE;AAAA,YACA,GAAGG;AAAA,UAAA,CACN;AAAA,UACDJ;AAAA,QACJ;AAAA,QACA,gBAAcF;AAAA,QACd,YAAAK;AAAA,QACA,SAAO;AAAA,QAEP,4BAACG,GAAU,CAAA,CAAA;AAAA,MAAA;AAAA,IACf;AAAA,EAAA;AAGZ;AAEAV,EAAQ,cAAc;"}
+{"version":3,"file":"fondue-components10.js","sources":["../src/components/Divider/Divider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as Separator from '@radix-ui/react-separator';\nimport { forwardRef, type ForwardedRef, type ReactElement } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport borderStyles from './styles/borderStyles.module.scss';\nimport { dividerStyles } from './styles/dividerStyles';\n\ntype DividerStyle = 'noline' | 'dashed' | 'solid';\ntype DividerPadding = 'none' | 'small' | 'medium' | 'large';\ntype DividerDirection = 'horizontal' | 'vertical';\ntype DividerColor = 'weak' | 'default' | 'strong' | 'x-strong';\n\nexport type DividerProps = {\n    /**\n     * The style of the divider\n     * @default \"solid\"\n     */\n    variant?: DividerStyle;\n    /**\n     * The padding of the divider\n     * @default \"medium\"\n     */\n    padding?: DividerPadding;\n    /**\n     * The color of the divider\n     * @default \"default\"\n     */\n    color?: DividerColor;\n    /**\n     * The direction of the divider\n     * @default \"horizontal\"\n     */\n    direction?: DividerDirection;\n    /**\n     * The html element to be used\n     * @default \"div\"\n     */\n    as?: 'div' | 'li';\n    /**\n     * When `true`, signifies that it is purely visual, carries no semantic\n     * meaning, and ensures it is not present in the accessibility tree.\n     * @default false\n     */\n    decorative?: boolean;\n    'data-test-id'?: string;\n    className?: string;\n};\n\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(\n    (\n        {\n            'data-test-id': dataTestId = 'fondue-divider',\n            direction = 'horizontal',\n            className,\n            variant,\n            as = 'div',\n            decorative,\n            ...props\n        }: DividerProps,\n        ref: ForwardedRef<HTMLDivElement | null>,\n    ): ReactElement => {\n        const Component = as;\n\n        return (\n            <Separator.Root\n                ref={ref}\n                className={cn(\n                    dividerStyles({\n                        direction,\n                        variant,\n                        ...props,\n                    }),\n                    borderStyles.root,\n                    className,\n                )}\n                data-variant={variant}\n                data-test-id={dataTestId}\n                decorative={decorative}\n                data-orientation={direction}\n                asChild\n            >\n                <Component />\n            </Separator.Root>\n        );\n    },\n);\n\nDivider.displayName = 'Divider';\n"],"names":["Divider","forwardRef","dataTestId","direction","className","variant","as","decorative","props","ref","Component","jsx","Separator","cn","dividerStyles","borderStyles"],"mappings":";;;;;;AAmDO,MAAMA,IAAUC;AAAA,EACnB,CACI;AAAA,IACI,gBAAgBC,IAAa;AAAA,IAC7B,WAAAC,IAAY;AAAA,IACZ,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,IAAAC,IAAK;AAAA,IACL,YAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEPC,MACe;AACf,UAAMC,IAAYJ;AAElB,WACI,gBAAAK;AAAA,MAACC,EAAU;AAAA,MAAV;AAAA,QACG,KAAAH;AAAA,QACA,WAAWI;AAAA,UACPC,EAAc;AAAA,YACV,WAAAX;AAAA,YACA,SAAAE;AAAA,YACA,GAAGG;AAAA,UAAA,CACN;AAAA,UACDO,EAAa;AAAA,UACbX;AAAA,QAAA;AAAA,QAEJ,gBAAcC;AAAA,QACd,gBAAcH;AAAA,QACd,YAAAK;AAAA,QACA,oBAAkBJ;AAAA,QAClB,SAAO;AAAA,QAEP,4BAACO,GAAA,CAAA,CAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAGvB;AACJ;AAEAV,EAAQ,cAAc;"}

package/dist/fondue-components11.js

@@ -2,9 +2,9 @@ import { jsx as n, jsxs as g } from "react/jsx-runtime";
 import { IconCaretRight as M } from "@frontify/fondue-icons";
 import * as d from "@radix-ui/react-dropdown-menu";
 import { forwardRef as i, useMemo as G, Children as A, useRef as v } from "react";
-import { useFondueTheme as D, ThemeProvider as b } from "./fondue-components29.js";
-import { useProcessedChildren as h } from "./fondue-components50.js";
-import s from "./fondue-components51.js";
+import { useFondueTheme as D, ThemeProvider as b } from "./fondue-components30.js";
+import { useProcessedChildren as h } from "./fondue-components52.js";
+import s from "./fondue-components53.js";
 const N = ({
   children: o,
   open: t,

package/dist/fondue-components11.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components11.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 { Children, forwardRef, useMemo, useRef, 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\ntype DropdownSpacing = 'compact' | 'comfortable' | 'spacious';\ntype DropdownViewportCollisionPadding = 'compact' | 'spacious';\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     * Defines the spacing between the dropdown and its trigger.\n     * @default 'compact'\n     */\n    triggerOffset?: DropdownSpacing;\n    /**\n     * Prevents the focus from being set on the trigger when the dropdown is closed.\n     */\n    preventTriggerFocusOnClose?: boolean;\n    /**\n     * Define the minimum distance between the dropdown and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: DropdownViewportCollisionPadding;\n};\n\nconst SPACING_MAP: Record<DropdownSpacing, number> = {\n    compact: 8,\n    comfortable: 12,\n    spacious: 16,\n};\n\nconst VIEWPORT_COLLISION_PADDING_MAP: Record<DropdownViewportCollisionPadding, number> = {\n    compact: 8,\n    spacious: 24,\n};\n\nexport const DropdownContent = (\n    {\n        side = 'bottom',\n        align = 'start',\n        triggerOffset = 'compact',\n        children,\n        preventTriggerFocusOnClose,\n        viewportCollisionPadding = 'compact',\n        'data-test-id': dataTestId = 'fondue-dropdown-content',\n    }: DropdownContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const theme = useFondueTheme();\n\n    return (\n        <RadixDropdown.Portal>\n            <ThemeProvider theme={theme}>\n                <RadixDropdown.Content\n                    align={align}\n                    collisionPadding={VIEWPORT_COLLISION_PADDING_MAP[viewportCollisionPadding]}\n                    sideOffset={SPACING_MAP[triggerOffset]}\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; heading?: string; 'data-test-id'?: string };\n\nexport const DropdownGroup = (\n    { children, heading, 'data-test-id': dataTestId = 'fondue-dropdown-group' }: DropdownGroupProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const hasChildren = useMemo(\n        () => Children.toArray(children).filter((child) => child !== null).length > 0,\n        [children],\n    );\n\n    if (!hasChildren) {\n        return null;\n    }\n\n    return (\n        <RadixDropdown.Group className={styles.group} data-test-id={dataTestId} ref={ref}>\n            {heading ? (\n                <div className={styles.groupHeading}>\n                    <span aria-label={heading}>{heading}</span>\n                </div>\n            ) : null}\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    const theme = useFondueTheme();\n    return (\n        <RadixDropdown.Portal>\n            <ThemeProvider theme={theme}>\n                <RadixDropdown.SubContent className={styles.subContent} data-test-id={dataTestId} ref={ref}>\n                    {children}\n                </RadixDropdown.SubContent>\n            </ThemeProvider>\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    /**\n     * If true, the item props will be passed to the child element.\n     * @default false\n     */\n    asChild?: boolean;\n    'data-test-id'?: string;\n};\n\nexport const DropdownItem = (\n    {\n        children,\n        disabled,\n        textValue,\n        onSelect,\n        emphasis = 'default',\n        asChild = false,\n        'data-test-id': dataTestId = 'fondue-dropdown-subtrigger',\n        ...props\n    }: DropdownItemProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { content } = useProcessedChildren(children);\n    const wasMouseInteracted = useRef(false);\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={asChild}\n            data-show-focus-ring={wasMouseInteracted.current}\n            onMouseEnter={() => {\n                wasMouseInteracted.current = true;\n            }}\n            onFocus={(focusEvent) => {\n                if (!wasMouseInteracted.current) {\n                    focusEvent.target.dataset.showFocusRing = 'true';\n                }\n            }}\n            onBlur={(blurEvent) => {\n                blurEvent.target.dataset.showFocusRing = 'false';\n                wasMouseInteracted.current = false;\n            }}\n            {...props}\n        >\n            {content}\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","SPACING_MAP","VIEWPORT_COLLISION_PADDING_MAP","DropdownContent","side","align","triggerOffset","preventTriggerFocusOnClose","viewportCollisionPadding","theme","useFondueTheme","ThemeProvider","styles","event","DropdownGroup","heading","useMemo","Children","child","jsxs","DropdownSubMenu","DropdownSubTrigger","content","useProcessedChildren","IconCaretRight","DropdownSubContent","DropdownItem","disabled","textValue","onSelect","emphasis","wasMouseInteracted","useRef","focusEvent","blurEvent","DropdownSlot","name","ForwardedRefDropdownTrigger","forwardRef","ForwardedRefDropdownContent","ForwardedRefDropdownGroup","ForwardedRefDropdownSubTrigger","ForwardedRefDropdownSubContent","ForwardedRefDropdownItem","ForwardedRefDropdownSlot","Dropdown"],"mappings":"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"}
+{"version":3,"file":"fondue-components11.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 { Children, forwardRef, useMemo, useRef, 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\ntype DropdownSpacing = 'compact' | 'comfortable' | 'spacious';\ntype DropdownViewportCollisionPadding = 'compact' | 'spacious';\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     * Defines the spacing between the dropdown and its trigger.\n     * @default 'compact'\n     */\n    triggerOffset?: DropdownSpacing;\n    /**\n     * Prevents the focus from being set on the trigger when the dropdown is closed.\n     */\n    preventTriggerFocusOnClose?: boolean;\n    /**\n     * Define the minimum distance between the dropdown and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: DropdownViewportCollisionPadding;\n};\n\nconst SPACING_MAP: Record<DropdownSpacing, number> = {\n    compact: 8,\n    comfortable: 12,\n    spacious: 16,\n};\n\nconst VIEWPORT_COLLISION_PADDING_MAP: Record<DropdownViewportCollisionPadding, number> = {\n    compact: 8,\n    spacious: 24,\n};\n\nexport const DropdownContent = (\n    {\n        side = 'bottom',\n        align = 'start',\n        triggerOffset = 'compact',\n        children,\n        preventTriggerFocusOnClose,\n        viewportCollisionPadding = 'compact',\n        'data-test-id': dataTestId = 'fondue-dropdown-content',\n    }: DropdownContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const theme = useFondueTheme();\n\n    return (\n        <RadixDropdown.Portal>\n            <ThemeProvider theme={theme}>\n                <RadixDropdown.Content\n                    align={align}\n                    collisionPadding={VIEWPORT_COLLISION_PADDING_MAP[viewportCollisionPadding]}\n                    sideOffset={SPACING_MAP[triggerOffset]}\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; heading?: string; 'data-test-id'?: string };\n\nexport const DropdownGroup = (\n    { children, heading, 'data-test-id': dataTestId = 'fondue-dropdown-group' }: DropdownGroupProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const hasChildren = useMemo(\n        () => Children.toArray(children).filter((child) => child !== null).length > 0,\n        [children],\n    );\n\n    if (!hasChildren) {\n        return null;\n    }\n\n    return (\n        <RadixDropdown.Group className={styles.group} data-test-id={dataTestId} ref={ref}>\n            {heading ? (\n                <div className={styles.groupHeading}>\n                    <span aria-label={heading}>{heading}</span>\n                </div>\n            ) : null}\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    const theme = useFondueTheme();\n    return (\n        <RadixDropdown.Portal>\n            <ThemeProvider theme={theme}>\n                <RadixDropdown.SubContent className={styles.subContent} data-test-id={dataTestId} ref={ref}>\n                    {children}\n                </RadixDropdown.SubContent>\n            </ThemeProvider>\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    /**\n     * If true, the item props will be passed to the child element.\n     * @default false\n     */\n    asChild?: boolean;\n    'data-test-id'?: string;\n};\n\nexport const DropdownItem = (\n    {\n        children,\n        disabled,\n        textValue,\n        onSelect,\n        emphasis = 'default',\n        asChild = false,\n        'data-test-id': dataTestId = 'fondue-dropdown-subtrigger',\n        ...props\n    }: DropdownItemProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { content } = useProcessedChildren(children);\n    const wasMouseInteracted = useRef(false);\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={asChild}\n            data-show-focus-ring={wasMouseInteracted.current}\n            onMouseEnter={() => {\n                wasMouseInteracted.current = true;\n            }}\n            onFocus={(focusEvent) => {\n                if (!wasMouseInteracted.current) {\n                    focusEvent.target.dataset.showFocusRing = 'true';\n                }\n            }}\n            onBlur={(blurEvent) => {\n                blurEvent.target.dataset.showFocusRing = 'false';\n                wasMouseInteracted.current = false;\n            }}\n            {...props}\n        >\n            {content}\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","SPACING_MAP","VIEWPORT_COLLISION_PADDING_MAP","DropdownContent","side","align","triggerOffset","preventTriggerFocusOnClose","viewportCollisionPadding","theme","useFondueTheme","ThemeProvider","styles","event","DropdownGroup","heading","useMemo","Children","child","jsxs","DropdownSubMenu","DropdownSubTrigger","content","useProcessedChildren","IconCaretRight","DropdownSubContent","DropdownItem","disabled","textValue","onSelect","emphasis","wasMouseInteracted","useRef","focusEvent","blurEvent","DropdownSlot","name","ForwardedRefDropdownTrigger","forwardRef","ForwardedRefDropdownContent","ForwardedRefDropdownGroup","ForwardedRefDropdownSubTrigger","ForwardedRefDropdownSubContent","ForwardedRefDropdownItem","ForwardedRefDropdownSlot","Dropdown"],"mappings":"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"}

package/dist/fondue-components12.js

@@ -1,7 +1,7 @@
 import { jsx as m } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
-import { propsToCssVariables as y } from "./fondue-components34.js";
-import x from "./fondue-components52.js";
+import { propsToCssVariables as y } from "./fondue-components35.js";
+import x from "./fondue-components54.js";
 const u = n(
   ({
     as: a = "div",

package/dist/fondue-components12.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components12.js","sources":["../src/components/Flex/Flex.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { type Responsive, type SizeValue, type LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/flex.module.scss';\n\nexport type FlexProps = LayoutComponentProps & {\n    /**\n     * The element to render the Flex component as.\n     * @default 'div'\n     */\n    as?: 'div' | 'span';\n    /**\n     * The display property.\n     * @default 'flex'\n     */\n    display?: Responsive<'none' | 'flex' | 'inline-flex'>;\n    /**\n     * The direction of the children.\n     * @default 'row'\n     */\n    direction?: Responsive<'row' | 'row-reverse' | 'column' | 'column-reverse'>;\n    /**\n     * The alignment of the children.\n     */\n    align?: Responsive<'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'>;\n    /**\n     * The justification of the children.\n     */\n    justify?: Responsive<'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'>;\n    /**\n     * The wrap property.\n     */\n    wrap?: Responsive<'nowrap' | 'wrap' | 'wrap-reverse'>;\n    /**\n     * The gap between the children.\n     */\n    gap?: Responsive<SizeValue>;\n    /**\n     * The horizontal gap between the children.\n     */\n    gapX?: Responsive<SizeValue>;\n    /**\n     * The vertical gap between the children.\n     */\n    gapY?: Responsive<SizeValue>;\n\n    children?: ReactNode;\n    'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Flex = forwardRef<HTMLDivElement, FlexProps>(\n    (\n        {\n            as: Component = 'div',\n            'data-test-id': dataTestId = 'fondue-flex',\n            children,\n            role,\n            'aria-label': ariaLabel,\n            'aria-hidden': ariaHidden,\n            'aria-describedby': ariaDescribedBy,\n            'aria-labelledby': ariaLabelledBy,\n            'aria-expanded': ariaExpanded,\n            'aria-haspopup': ariaHasPopup,\n            ...props\n        },\n        ref,\n    ) => {\n        return (\n            <Component\n                className={styles.root}\n                data-test-id={dataTestId}\n                style={propsToCssVariables(props, { justify: 'justify-content' })}\n                role={role}\n                aria-label={ariaLabel}\n                aria-hidden={ariaHidden}\n                aria-describedby={ariaDescribedBy}\n                aria-labelledby={ariaLabelledBy}\n                aria-expanded={ariaExpanded}\n                aria-haspopup={ariaHasPopup}\n                ref={ref}\n            >\n                {children}\n            </Component>\n        );\n    },\n);\nFlex.displayName = 'Flex';\n"],"names":["Flex","forwardRef","Component","dataTestId","children","role","ariaLabel","ariaHidden","ariaDescribedBy","ariaLabelledBy","ariaExpanded","ariaHasPopup","props","ref","jsx","styles","propsToCssVariables"],"mappings":";;;;AAuDO,MAAMA,IAAOC;AAAA,EAChB,CACI;AAAA,IACI,IAAIC,IAAY;AAAA,IAChB,gBAAgBC,IAAa;AAAA,IAC7B,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAcC;AAAA,IACd,eAAeC;AAAA,IACf,oBAAoBC;AAAA,IACpB,mBAAmBC;AAAA,IACnB,iBAAiBC;AAAA,IACjB,iBAAiBC;AAAA,IACjB,GAAGC;AAAA,KAEPC,MAGI,gBAAAC;AAAA,IAACZ;AAAA,IAAA;AAAA,MACG,WAAWa,EAAO;AAAA,MAClB,gBAAcZ;AAAA,MACd,OAAOa,EAAoBJ,GAAO,EAAE,SAAS,mBAAmB;AAAA,MAChE,MAAAP;AAAA,MACA,cAAYC;AAAA,MACZ,eAAaC;AAAA,MACb,oBAAkBC;AAAA,MAClB,mBAAiBC;AAAA,MACjB,iBAAeC;AAAA,MACf,iBAAeC;AAAA,MACf,KAAAE;AAAA,MAEC,UAAAT;AAAA,IAAA;AAAA,EACL;AAGZ;AACAJ,EAAK,cAAc;"}
+{"version":3,"file":"fondue-components12.js","sources":["../src/components/Flex/Flex.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { type Responsive, type SizeValue, type LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/flex.module.scss';\n\nexport type FlexProps = LayoutComponentProps & {\n    /**\n     * The element to render the Flex component as.\n     * @default 'div'\n     */\n    as?: 'div' | 'span';\n    /**\n     * The display property.\n     * @default 'flex'\n     */\n    display?: Responsive<'none' | 'flex' | 'inline-flex'>;\n    /**\n     * The direction of the children.\n     * @default 'row'\n     */\n    direction?: Responsive<'row' | 'row-reverse' | 'column' | 'column-reverse'>;\n    /**\n     * The alignment of the children.\n     */\n    align?: Responsive<'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'>;\n    /**\n     * The justification of the children.\n     */\n    justify?: Responsive<'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'>;\n    /**\n     * The wrap property.\n     */\n    wrap?: Responsive<'nowrap' | 'wrap' | 'wrap-reverse'>;\n    /**\n     * The gap between the children.\n     */\n    gap?: Responsive<SizeValue>;\n    /**\n     * The horizontal gap between the children.\n     */\n    gapX?: Responsive<SizeValue>;\n    /**\n     * The vertical gap between the children.\n     */\n    gapY?: Responsive<SizeValue>;\n\n    children?: ReactNode;\n    'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Flex = forwardRef<HTMLDivElement, FlexProps>(\n    (\n        {\n            as: Component = 'div',\n            'data-test-id': dataTestId = 'fondue-flex',\n            children,\n            role,\n            'aria-label': ariaLabel,\n            'aria-hidden': ariaHidden,\n            'aria-describedby': ariaDescribedBy,\n            'aria-labelledby': ariaLabelledBy,\n            'aria-expanded': ariaExpanded,\n            'aria-haspopup': ariaHasPopup,\n            ...props\n        },\n        ref,\n    ) => {\n        return (\n            <Component\n                className={styles.root}\n                data-test-id={dataTestId}\n                style={propsToCssVariables(props, { justify: 'justify-content' })}\n                role={role}\n                aria-label={ariaLabel}\n                aria-hidden={ariaHidden}\n                aria-describedby={ariaDescribedBy}\n                aria-labelledby={ariaLabelledBy}\n                aria-expanded={ariaExpanded}\n                aria-haspopup={ariaHasPopup}\n                ref={ref}\n            >\n                {children}\n            </Component>\n        );\n    },\n);\nFlex.displayName = 'Flex';\n"],"names":["Flex","forwardRef","Component","dataTestId","children","role","ariaLabel","ariaHidden","ariaDescribedBy","ariaLabelledBy","ariaExpanded","ariaHasPopup","props","ref","jsx","styles","propsToCssVariables"],"mappings":";;;;AAuDO,MAAMA,IAAOC;AAAA,EAChB,CACI;AAAA,IACI,IAAIC,IAAY;AAAA,IAChB,gBAAgBC,IAAa;AAAA,IAC7B,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAcC;AAAA,IACd,eAAeC;AAAA,IACf,oBAAoBC;AAAA,IACpB,mBAAmBC;AAAA,IACnB,iBAAiBC;AAAA,IACjB,iBAAiBC;AAAA,IACjB,GAAGC;AAAA,EAAA,GAEPC,MAGI,gBAAAC;AAAA,IAACZ;AAAA,IAAA;AAAA,MACG,WAAWa,EAAO;AAAA,MAClB,gBAAcZ;AAAA,MACd,OAAOa,EAAoBJ,GAAO,EAAE,SAAS,mBAAmB;AAAA,MAChE,MAAAP;AAAA,MACA,cAAYC;AAAA,MACZ,eAAaC;AAAA,MACb,oBAAkBC;AAAA,MAClB,mBAAiBC;AAAA,MACjB,iBAAeC;AAAA,MACf,iBAAeC;AAAA,MACf,KAAAE;AAAA,MAEC,UAAAT;AAAA,IAAA;AAAA,EAAA;AAIjB;AACAJ,EAAK,cAAc;"}

package/dist/fondue-components13.js

@@ -1,21 +1,21 @@
 import { jsx as a, jsxs as u } from "react/jsx-runtime";
-import { IconCross as b } from "@frontify/fondue-icons";
-import * as i from "@radix-ui/react-popover";
-import { forwardRef as r } from "react";
-import { addAutoFocusAttribute as w, addShowFocusRing as x } from "./fondue-components47.js";
-import { useFondueTheme as A, ThemeProvider as T } from "./fondue-components29.js";
-import s from "./fondue-components53.js";
-const n = ({ children: t, ...o }) => /* @__PURE__ */ a(i.Root, { ...o, children: t });
+import { IconCross as R } from "@frontify/fondue-icons";
+import * as l from "@radix-ui/react-popover";
+import { forwardRef as i } from "react";
+import { addAutoFocusAttribute as w, addShowFocusRing as x } from "./fondue-components48.js";
+import { useFondueTheme as A, ThemeProvider as T } from "./fondue-components30.js";
+import s from "./fondue-components55.js";
+const n = ({ children: t, ...o }) => /* @__PURE__ */ a(l.Root, { ...o, children: t });
 n.displayName = "Flyout.Root";
-const c = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-trigger", ...d }, l) => /* @__PURE__ */ a(
-  i.Trigger,
+const c = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-trigger", ...d }, r) => /* @__PURE__ */ a(
+  l.Trigger,
   {
     onMouseDown: w,
     "data-auto-focus-visible": "true",
     "data-auto-focus-trigger": !0,
     "data-test-id": e,
     asChild: t,
-    ref: l,
+    ref: r,
     ...d,
     children: o
   }
@@ -33,25 +33,25 @@ const I = {
   maxWidth: o = "360px",
   padding: e = "compact",
   rounded: d = "medium",
-  width: l = "fit-content",
+  width: r = "fit-content",
   shadow: F = "medium",
   triggerOffset: g = "compact",
   viewportCollisionPadding: N = "compact",
   "data-test-id": h = "fondue-flyout-content",
   children: v,
-  ...P
-}, C) => {
-  const R = A();
-  return /* @__PURE__ */ a(i.Portal, { children: /* @__PURE__ */ u(T, { theme: R, children: [
+  ...C
+}, P) => {
+  const b = A();
+  return /* @__PURE__ */ a(l.Portal, { children: /* @__PURE__ */ u(T, { theme: b, children: [
     /* @__PURE__ */ a("div", { "data-test-id": "fondue-flyout-overlay", className: s.overlay }),
     /* @__PURE__ */ a(
-      i.Content,
+      l.Content,
       {
         style: {
           "--flyout-max-width": o,
-          "--flyout-width": l
+          "--flyout-width": r
         },
-        ref: C,
+        ref: P,
         align: t,
         collisionPadding: O[N],
         sideOffset: I[g],
@@ -61,16 +61,26 @@ const I = {
         "data-shadow": F,
         "data-test-id": h,
         onFocus: x,
-        ...P,
+        ...C,
         children: v
       }
     )
   ] }) });
 };
 m.displayName = "Flyout.Content";
-const y = ({ showCloseButton: t, children: o, "data-test-id": e = "fondue-flyout-header" }, d) => /* @__PURE__ */ u("div", { "data-test-id": e, ref: d, className: s.header, children: [
+const y = ({ showCloseButton: t, children: o, "data-test-id": e = "fondue-flyout-header", closeProps: d }, r) => /* @__PURE__ */ u("div", { "data-test-id": e, ref: r, className: s.header, children: [
   /* @__PURE__ */ a("div", { children: o }),
-  t && /* @__PURE__ */ a(i.Close, { role: "button", "data-test-id": `${e}-close`, className: s.close, children: /* @__PURE__ */ a(b, { size: 20 }) })
+  t && /* @__PURE__ */ a(
+    l.Close,
+    {
+      role: "button",
+      "data-test-id": `${e}-close`,
+      className: s.close,
+      "aria-label": "Close",
+      ...d,
+      children: /* @__PURE__ */ a(R, { size: 20 })
+    }
+  )
 ] });
 y.displayName = "Flyout.Header";
 const f = ({ children: t, "data-test-id": o = "fondue-flyout-footer" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: s.footer, children: t });
@@ -89,11 +99,11 @@ const p = ({ children: t, "data-test-id": o = "fondue-flyout-body", scrollable:
 p.displayName = "Flyout.Body";
 const j = {
   Root: n,
-  Trigger: r(c),
-  Content: r(m),
-  Header: r(y),
-  Footer: r(f),
-  Body: r(p)
+  Trigger: i(c),
+  Content: i(m),
+  Header: i(y),
+  Footer: i(f),
+  Body: i(p)
 };
 export {
   j as Flyout,

package/dist/fondue-components13.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components13.js","sources":["../src/components/Flyout/Flyout.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { forwardRef, 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/flyout.module.scss';\n\nexport type FlyoutRootProps = {\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 flyout\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 const FlyoutRoot = ({ children, ...props }: FlyoutRootProps) => {\n    return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\nFlyoutRoot.displayName = 'Flyout.Root';\n\nexport type FlyoutTriggerProps = {\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 FlyoutTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-flyout-trigger', ...props }: FlyoutTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixPopover.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        </RadixPopover.Trigger>\n    );\n};\nFlyoutTrigger.displayName = 'Flyout.Trigger';\n\ntype FlyoutSpacing = 'compact' | 'comfortable' | 'spacious';\ntype FlyoutViewportCollisionPadding = 'compact' | 'spacious';\nexport type FlyoutContentProps = {\n    /**\n     * Add a shadow to the flyout\n     * @default \"medium\"\n     */\n    shadow?: 'none' | 'medium' | 'large';\n    /**\n     * Add rounded corners to the flyout\n     * @default \"medium\"\n     */\n    rounded?: 'none' | 'medium' | 'large';\n    /**\n     * Define the prefered side of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    /**\n     * Define the prefered alignment of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Define the padding of the flyout\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Define the fixed width of the flyout\n     * @default \"fit-content\"\n     */\n    width?: string;\n    /**\n     * Defines the spacing between the dropdown and its trigger.\n     * @default 'compact'\n     */\n    triggerOffset?: FlyoutSpacing;\n    /**\n     * Define the maximum width of the flyout\n     * @default \"360px\"\n     */\n    maxWidth?: string;\n    /**\n     * Define the minimum distance between the flyout and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: FlyoutViewportCollisionPadding;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nconst SPACING_MAP: Record<FlyoutSpacing, number> = {\n    compact: 8,\n    comfortable: 12,\n    spacious: 16,\n};\n\nconst VIEWPORT_COLLISION_PADDING_MAP: Record<FlyoutViewportCollisionPadding, number> = {\n    compact: 8,\n    spacious: 24,\n};\n\nexport const FlyoutContent = (\n    {\n        align = 'start',\n        maxWidth = '360px',\n        padding = 'compact',\n        rounded = 'medium',\n        width = 'fit-content',\n        shadow = 'medium',\n        triggerOffset = 'compact',\n        viewportCollisionPadding = 'compact',\n        'data-test-id': dataTestId = 'fondue-flyout-content',\n        children,\n        ...props\n    }: FlyoutContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const theme = useFondueTheme();\n    return (\n        <RadixPopover.Portal>\n            <ThemeProvider theme={theme}>\n                <div data-test-id=\"fondue-flyout-overlay\" className={styles.overlay} />\n                <RadixPopover.Content\n                    style={\n                        {\n                            '--flyout-max-width': maxWidth,\n                            '--flyout-width': width,\n                        } as CSSProperties\n                    }\n                    ref={ref}\n                    align={align}\n                    collisionPadding={VIEWPORT_COLLISION_PADDING_MAP[viewportCollisionPadding]}\n                    sideOffset={SPACING_MAP[triggerOffset]}\n                    className={styles.root}\n                    data-flyout-spacing={padding}\n                    data-rounded={rounded}\n                    data-shadow={shadow}\n                    data-test-id={dataTestId}\n                    onFocus={addShowFocusRing}\n                    {...props}\n                >\n                    {children}\n                </RadixPopover.Content>\n            </ThemeProvider>\n        </RadixPopover.Portal>\n    );\n};\nFlyoutContent.displayName = 'Flyout.Content';\n\nexport type FlyoutHeaderProps = {\n    /**\n     * Show a close button in the header\n     * @default false\n     */\n    showCloseButton?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutHeader = (\n    { showCloseButton, children, 'data-test-id': dataTestId = 'fondue-flyout-header' }: FlyoutHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.header}>\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixPopover.Close role=\"button\" data-test-id={`${dataTestId}-close`} className={styles.close}>\n                    <IconCross size={20} />\n                </RadixPopover.Close>\n            )}\n        </div>\n    );\n};\nFlyoutHeader.displayName = 'Flyout.Header';\n\nexport type FlyoutFooterProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutFooter = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-footer' }: FlyoutFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.footer}>\n            {children}\n        </div>\n    );\n};\nFlyoutFooter.displayName = 'Flyout.Footer';\n\nexport type FlyoutBodyProps = {\n    children?: ReactNode;\n    'data-test-id'?: string;\n    /**\n     * Allow the body to scroll if the max height of the flyout is reached\n     * @default false\n     */\n    scrollable?: boolean;\n};\n\nexport const FlyoutBody = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-body', scrollable = false }: FlyoutBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            data-flyout-spacing=\"compact\"\n            data-scrollable={scrollable}\n            className={styles.body}\n        >\n            {children}\n        </div>\n    );\n};\nFlyoutBody.displayName = 'Flyout.Body';\n\nexport const Flyout = {\n    Root: FlyoutRoot,\n    Trigger: forwardRef<HTMLButtonElement, FlyoutTriggerProps>(FlyoutTrigger),\n    Content: forwardRef<HTMLDivElement, FlyoutContentProps>(FlyoutContent),\n    Header: forwardRef<HTMLDivElement, FlyoutHeaderProps>(FlyoutHeader),\n    Footer: forwardRef<HTMLDivElement, FlyoutFooterProps>(FlyoutFooter),\n    Body: forwardRef<HTMLDivElement, FlyoutBodyProps>(FlyoutBody),\n};\n"],"names":["FlyoutRoot","children","props","RadixPopover","FlyoutTrigger","asChild","dataTestId","ref","jsx","addAutoFocusAttribute","SPACING_MAP","VIEWPORT_COLLISION_PADDING_MAP","FlyoutContent","align","maxWidth","padding","rounded","width","shadow","triggerOffset","viewportCollisionPadding","theme","useFondueTheme","jsxs","ThemeProvider","styles","addShowFocusRing","FlyoutHeader","showCloseButton","IconCross","FlyoutFooter","FlyoutBody","scrollable","Flyout","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components13.js","sources":["../src/components/Flyout/Flyout.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { forwardRef, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/flyout.module.scss';\n\nexport type FlyoutRootProps = {\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 flyout\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 const FlyoutRoot = ({ children, ...props }: FlyoutRootProps) => {\n    return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\nFlyoutRoot.displayName = 'Flyout.Root';\n\nexport type FlyoutTriggerProps = {\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 FlyoutTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-flyout-trigger', ...props }: FlyoutTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixPopover.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        </RadixPopover.Trigger>\n    );\n};\nFlyoutTrigger.displayName = 'Flyout.Trigger';\n\ntype FlyoutSpacing = 'compact' | 'comfortable' | 'spacious';\ntype FlyoutViewportCollisionPadding = 'compact' | 'spacious';\nexport type FlyoutContentProps = {\n    /**\n     * Add a shadow to the flyout\n     * @default \"medium\"\n     */\n    shadow?: 'none' | 'medium' | 'large';\n    /**\n     * Add rounded corners to the flyout\n     * @default \"medium\"\n     */\n    rounded?: 'none' | 'medium' | 'large';\n    /**\n     * Define the prefered side of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    /**\n     * Define the prefered alignment of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Define the padding of the flyout\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Define the fixed width of the flyout\n     * @default \"fit-content\"\n     */\n    width?: string;\n    /**\n     * Defines the spacing between the dropdown and its trigger.\n     * @default 'compact'\n     */\n    triggerOffset?: FlyoutSpacing;\n    /**\n     * Define the maximum width of the flyout\n     * @default \"360px\"\n     */\n    maxWidth?: string;\n    /**\n     * Define the minimum distance between the flyout and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: FlyoutViewportCollisionPadding;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nconst SPACING_MAP: Record<FlyoutSpacing, number> = {\n    compact: 8,\n    comfortable: 12,\n    spacious: 16,\n};\n\nconst VIEWPORT_COLLISION_PADDING_MAP: Record<FlyoutViewportCollisionPadding, number> = {\n    compact: 8,\n    spacious: 24,\n};\n\nexport const FlyoutContent = (\n    {\n        align = 'start',\n        maxWidth = '360px',\n        padding = 'compact',\n        rounded = 'medium',\n        width = 'fit-content',\n        shadow = 'medium',\n        triggerOffset = 'compact',\n        viewportCollisionPadding = 'compact',\n        'data-test-id': dataTestId = 'fondue-flyout-content',\n        children,\n        ...props\n    }: FlyoutContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const theme = useFondueTheme();\n    return (\n        <RadixPopover.Portal>\n            <ThemeProvider theme={theme}>\n                <div data-test-id=\"fondue-flyout-overlay\" className={styles.overlay} />\n                <RadixPopover.Content\n                    style={\n                        {\n                            '--flyout-max-width': maxWidth,\n                            '--flyout-width': width,\n                        } as CSSProperties\n                    }\n                    ref={ref}\n                    align={align}\n                    collisionPadding={VIEWPORT_COLLISION_PADDING_MAP[viewportCollisionPadding]}\n                    sideOffset={SPACING_MAP[triggerOffset]}\n                    className={styles.root}\n                    data-flyout-spacing={padding}\n                    data-rounded={rounded}\n                    data-shadow={shadow}\n                    data-test-id={dataTestId}\n                    onFocus={addShowFocusRing}\n                    {...props}\n                >\n                    {children}\n                </RadixPopover.Content>\n            </ThemeProvider>\n        </RadixPopover.Portal>\n    );\n};\nFlyoutContent.displayName = 'Flyout.Content';\n\nexport type FlyoutHeaderProps = {\n    /**\n     * Show a close button in the header\n     * @default false\n     */\n    showCloseButton?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n    closeProps?: CommonAriaProps;\n};\n\nexport const FlyoutHeader = (\n    { showCloseButton, children, 'data-test-id': dataTestId = 'fondue-flyout-header', closeProps }: FlyoutHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.header}>\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixPopover.Close\n                    role=\"button\"\n                    data-test-id={`${dataTestId}-close`}\n                    className={styles.close}\n                    aria-label=\"Close\"\n                    {...closeProps}\n                >\n                    <IconCross size={20} />\n                </RadixPopover.Close>\n            )}\n        </div>\n    );\n};\nFlyoutHeader.displayName = 'Flyout.Header';\n\nexport type FlyoutFooterProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutFooter = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-footer' }: FlyoutFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.footer}>\n            {children}\n        </div>\n    );\n};\nFlyoutFooter.displayName = 'Flyout.Footer';\n\nexport type FlyoutBodyProps = {\n    children?: ReactNode;\n    'data-test-id'?: string;\n    /**\n     * Allow the body to scroll if the max height of the flyout is reached\n     * @default false\n     */\n    scrollable?: boolean;\n};\n\nexport const FlyoutBody = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-body', scrollable = false }: FlyoutBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            data-flyout-spacing=\"compact\"\n            data-scrollable={scrollable}\n            className={styles.body}\n        >\n            {children}\n        </div>\n    );\n};\nFlyoutBody.displayName = 'Flyout.Body';\n\nexport const Flyout = {\n    Root: FlyoutRoot,\n    Trigger: forwardRef<HTMLButtonElement, FlyoutTriggerProps>(FlyoutTrigger),\n    Content: forwardRef<HTMLDivElement, FlyoutContentProps>(FlyoutContent),\n    Header: forwardRef<HTMLDivElement, FlyoutHeaderProps>(FlyoutHeader),\n    Footer: forwardRef<HTMLDivElement, FlyoutFooterProps>(FlyoutFooter),\n    Body: forwardRef<HTMLDivElement, FlyoutBodyProps>(FlyoutBody),\n};\n"],"names":["FlyoutRoot","children","props","RadixPopover","FlyoutTrigger","asChild","dataTestId","ref","jsx","addAutoFocusAttribute","SPACING_MAP","VIEWPORT_COLLISION_PADDING_MAP","FlyoutContent","align","maxWidth","padding","rounded","width","shadow","triggerOffset","viewportCollisionPadding","theme","useFondueTheme","jsxs","ThemeProvider","styles","addShowFocusRing","FlyoutHeader","showCloseButton","closeProps","IconCross","FlyoutFooter","FlyoutBody","scrollable","Flyout","forwardRef"],"mappings":";;;;;;;AA+BO,MAAMA,IAAa,CAAC,EAAE,UAAAC,GAAU,GAAGC,0BAC9BC,EAAa,MAAb,EAAmB,GAAGD,GAAQ,UAAAD,GAAS;AAEnDD,EAAW,cAAc;AAYlB,MAAMI,IAAgB,CACzB,EAAE,SAAAC,IAAU,IAAM,UAAAJ,GAAU,gBAAgBK,IAAa,yBAAyB,GAAGJ,EAAA,GACrFK,MAGI,gBAAAC;AAAA,EAACL,EAAa;AAAA,EAAb;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;AAAA;AAIbG,EAAc,cAAc;AAsD5B,MAAMM,IAA6C;AAAA,EAC/C,SAAS;AAAA,EACT,aAAa;AAAA,EACb,UAAU;AACd,GAEMC,IAAiF;AAAA,EACnF,SAAS;AAAA,EACT,UAAU;AACd,GAEaC,IAAgB,CACzB;AAAA,EACI,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,SAAAC,IAAU;AAAA,EACV,SAAAC,IAAU;AAAA,EACV,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,eAAAC,IAAgB;AAAA,EAChB,0BAAAC,IAA2B;AAAA,EAC3B,gBAAgBd,IAAa;AAAA,EAC7B,UAAAL;AAAA,EACA,GAAGC;AACP,GACAK,MACC;AACD,QAAMc,IAAQC,EAAA;AACd,2BACKnB,EAAa,QAAb,EACG,UAAA,gBAAAoB,EAACC,KAAc,OAAAH,GACX,UAAA;AAAA,IAAA,gBAAAb,EAAC,OAAA,EAAI,gBAAa,yBAAwB,WAAWiB,EAAO,SAAS;AAAA,IACrE,gBAAAjB;AAAA,MAACL,EAAa;AAAA,MAAb;AAAA,QACG,OACI;AAAA,UACI,sBAAsBW;AAAA,UACtB,kBAAkBG;AAAA,QAAA;AAAA,QAG1B,KAAAV;AAAA,QACA,OAAAM;AAAA,QACA,kBAAkBF,EAA+BS,CAAwB;AAAA,QACzE,YAAYV,EAAYS,CAAa;AAAA,QACrC,WAAWM,EAAO;AAAA,QAClB,uBAAqBV;AAAA,QACrB,gBAAcC;AAAA,QACd,eAAaE;AAAA,QACb,gBAAcZ;AAAA,QACd,SAASoB;AAAA,QACR,GAAGxB;AAAA,QAEH,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,EAAA,CACJ,EAAA,CACJ;AAER;AACAW,EAAc,cAAc;AAarB,MAAMe,IAAe,CACxB,EAAE,iBAAAC,GAAiB,UAAA3B,GAAU,gBAAgBK,IAAa,wBAAwB,YAAAuB,EAAA,GAClFtB,wBAGK,OAAA,EAAI,gBAAcD,GAAY,KAAAC,GAAU,WAAWkB,EAAO,QACvD,UAAA;AAAA,EAAA,gBAAAjB,EAAC,SAAK,UAAAP,GAAS;AAAA,EACd2B,KACG,gBAAApB;AAAA,IAACL,EAAa;AAAA,IAAb;AAAA,MACG,MAAK;AAAA,MACL,gBAAc,GAAGG,CAAU;AAAA,MAC3B,WAAWmB,EAAO;AAAA,MAClB,cAAW;AAAA,MACV,GAAGI;AAAA,MAEJ,UAAA,gBAAArB,EAACsB,GAAA,EAAU,MAAM,GAAA,CAAI;AAAA,IAAA;AAAA,EAAA;AACzB,GAER;AAGRH,EAAa,cAAc;AAIpB,MAAMI,IAAe,CACxB,EAAE,UAAA9B,GAAU,gBAAgBK,IAAa,uBAAA,GACzCC,MAGI,gBAAAC,EAAC,SAAI,gBAAcF,GAAY,KAAAC,GAAU,WAAWkB,EAAO,QACtD,UAAAxB,GACL;AAGR8B,EAAa,cAAc;AAYpB,MAAMC,IAAa,CACtB,EAAE,UAAA/B,GAAU,gBAAgBK,IAAa,sBAAsB,YAAA2B,IAAa,GAAA,GAC5E1B,MAGI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAcF;AAAA,IACd,KAAAC;AAAA,IACA,uBAAoB;AAAA,IACpB,mBAAiB0B;AAAA,IACjB,WAAWR,EAAO;AAAA,IAEjB,UAAAxB;AAAA,EAAA;AAAA;AAIb+B,EAAW,cAAc;AAElB,MAAME,IAAS;AAAA,EAClB,MAAMlC;AAAA,EACN,SAASmC,EAAkD/B,CAAa;AAAA,EACxE,SAAS+B,EAA+CvB,CAAa;AAAA,EACrE,QAAQuB,EAA8CR,CAAY;AAAA,EAClE,QAAQQ,EAA8CJ,CAAY;AAAA,EAClE,MAAMI,EAA4CH,CAAU;AAChE;"}

package/dist/fondue-components14.js

@@ -1,7 +1,7 @@
 import { jsx as f } from "react/jsx-runtime";
 import { forwardRef as y } from "react";
-import { propsToCssVariables as n } from "./fondue-components34.js";
-import u from "./fondue-components54.js";
+import { propsToCssVariables as n } from "./fondue-components35.js";
+import u from "./fondue-components56.js";
 const c = y(
   ({
     as: a = "div",

package/dist/fondue-components14.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components14.js","sources":["../src/components/Grid/Grid.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { type Responsive, type SizeValue, type LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/grid.module.scss';\n\nexport type GridProps = LayoutComponentProps & {\n    /**\n     * The element to render the Grid component as.\n     * @default 'div'\n     */\n    as?: 'div' | 'span';\n\n    /**\n     * The display property.\n     * @default 'grid'\n     */\n    display?: 'none' | 'grid' | 'inline-grid';\n    /**\n     * The columns property.\n     */\n    columns?: Responsive<string | number>;\n    /**\n     * The rows property.\n     */\n    rows?: Responsive<string | number>;\n    /**\n     * The flow property.\n     */\n    flow?: Responsive<'row' | 'column' | 'dense' | 'row-dense' | 'column-dense'>;\n    /**\n     * The alignment of the children.\n     */\n    align?: Responsive<'start' | 'center' | 'end' | 'baseline' | 'stretch'>;\n    /**\n     * The justification of the children.\n     */\n    justify?: Responsive<'start' | 'center' | 'end' | 'between'>;\n    /**\n     * The gap between the children.\n     */\n    gap?: Responsive<SizeValue>;\n    /**\n     * The horizontal gap between the children.\n     */\n    gapX?: Responsive<SizeValue>;\n    /**\n     * The vertical gap between the children.\n     */\n    gapY?: Responsive<SizeValue>;\n\n    children?: ReactNode;\n    'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Grid = forwardRef<HTMLDivElement, GridProps>(\n    (\n        {\n            as: Component = 'div',\n            'data-test-id': dataTestId = 'fondue-grid',\n            children,\n            role,\n            'aria-label': ariaLabel,\n            'aria-hidden': ariaHidden,\n            'aria-describedby': ariaDescribedBy,\n            'aria-labelledby': ariaLabelledBy,\n            'aria-expanded': ariaExpanded,\n            'aria-haspopup': ariaHasPopup,\n            ...props\n        },\n        ref,\n    ) => {\n        return (\n            <Component\n                className={styles.root}\n                data-test-id={dataTestId}\n                style={propsToCssVariables(props, { justify: 'justify-items' })}\n                role={role}\n                aria-label={ariaLabel}\n                aria-hidden={ariaHidden}\n                aria-describedby={ariaDescribedBy}\n                aria-labelledby={ariaLabelledBy}\n                aria-expanded={ariaExpanded}\n                aria-haspopup={ariaHasPopup}\n                ref={ref}\n            >\n                {children}\n            </Component>\n        );\n    },\n);\nGrid.displayName = 'Grid';\n"],"names":["Grid","forwardRef","Component","dataTestId","children","role","ariaLabel","ariaHidden","ariaDescribedBy","ariaLabelledBy","ariaExpanded","ariaHasPopup","props","ref","jsx","styles","propsToCssVariables"],"mappings":";;;;AA2DO,MAAMA,IAAOC;AAAA,EAChB,CACI;AAAA,IACI,IAAIC,IAAY;AAAA,IAChB,gBAAgBC,IAAa;AAAA,IAC7B,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAcC;AAAA,IACd,eAAeC;AAAA,IACf,oBAAoBC;AAAA,IACpB,mBAAmBC;AAAA,IACnB,iBAAiBC;AAAA,IACjB,iBAAiBC;AAAA,IACjB,GAAGC;AAAA,KAEPC,MAGI,gBAAAC;AAAA,IAACZ;AAAA,IAAA;AAAA,MACG,WAAWa,EAAO;AAAA,MAClB,gBAAcZ;AAAA,MACd,OAAOa,EAAoBJ,GAAO,EAAE,SAAS,iBAAiB;AAAA,MAC9D,MAAAP;AAAA,MACA,cAAYC;AAAA,MACZ,eAAaC;AAAA,MACb,oBAAkBC;AAAA,MAClB,mBAAiBC;AAAA,MACjB,iBAAeC;AAAA,MACf,iBAAeC;AAAA,MACf,KAAAE;AAAA,MAEC,UAAAT;AAAA,IAAA;AAAA,EACL;AAGZ;AACAJ,EAAK,cAAc;"}
+{"version":3,"file":"fondue-components14.js","sources":["../src/components/Grid/Grid.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { type Responsive, type SizeValue, type LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/grid.module.scss';\n\nexport type GridProps = LayoutComponentProps & {\n    /**\n     * The element to render the Grid component as.\n     * @default 'div'\n     */\n    as?: 'div' | 'span';\n\n    /**\n     * The display property.\n     * @default 'grid'\n     */\n    display?: 'none' | 'grid' | 'inline-grid';\n    /**\n     * The columns property.\n     */\n    columns?: Responsive<string | number>;\n    /**\n     * The rows property.\n     */\n    rows?: Responsive<string | number>;\n    /**\n     * The flow property.\n     */\n    flow?: Responsive<'row' | 'column' | 'dense' | 'row-dense' | 'column-dense'>;\n    /**\n     * The alignment of the children.\n     */\n    align?: Responsive<'start' | 'center' | 'end' | 'baseline' | 'stretch'>;\n    /**\n     * The justification of the children.\n     */\n    justify?: Responsive<'start' | 'center' | 'end' | 'between'>;\n    /**\n     * The gap between the children.\n     */\n    gap?: Responsive<SizeValue>;\n    /**\n     * The horizontal gap between the children.\n     */\n    gapX?: Responsive<SizeValue>;\n    /**\n     * The vertical gap between the children.\n     */\n    gapY?: Responsive<SizeValue>;\n\n    children?: ReactNode;\n    'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Grid = forwardRef<HTMLDivElement, GridProps>(\n    (\n        {\n            as: Component = 'div',\n            'data-test-id': dataTestId = 'fondue-grid',\n            children,\n            role,\n            'aria-label': ariaLabel,\n            'aria-hidden': ariaHidden,\n            'aria-describedby': ariaDescribedBy,\n            'aria-labelledby': ariaLabelledBy,\n            'aria-expanded': ariaExpanded,\n            'aria-haspopup': ariaHasPopup,\n            ...props\n        },\n        ref,\n    ) => {\n        return (\n            <Component\n                className={styles.root}\n                data-test-id={dataTestId}\n                style={propsToCssVariables(props, { justify: 'justify-items' })}\n                role={role}\n                aria-label={ariaLabel}\n                aria-hidden={ariaHidden}\n                aria-describedby={ariaDescribedBy}\n                aria-labelledby={ariaLabelledBy}\n                aria-expanded={ariaExpanded}\n                aria-haspopup={ariaHasPopup}\n                ref={ref}\n            >\n                {children}\n            </Component>\n        );\n    },\n);\nGrid.displayName = 'Grid';\n"],"names":["Grid","forwardRef","Component","dataTestId","children","role","ariaLabel","ariaHidden","ariaDescribedBy","ariaLabelledBy","ariaExpanded","ariaHasPopup","props","ref","jsx","styles","propsToCssVariables"],"mappings":";;;;AA2DO,MAAMA,IAAOC;AAAA,EAChB,CACI;AAAA,IACI,IAAIC,IAAY;AAAA,IAChB,gBAAgBC,IAAa;AAAA,IAC7B,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAcC;AAAA,IACd,eAAeC;AAAA,IACf,oBAAoBC;AAAA,IACpB,mBAAmBC;AAAA,IACnB,iBAAiBC;AAAA,IACjB,iBAAiBC;AAAA,IACjB,GAAGC;AAAA,EAAA,GAEPC,MAGI,gBAAAC;AAAA,IAACZ;AAAA,IAAA;AAAA,MACG,WAAWa,EAAO;AAAA,MAClB,gBAAcZ;AAAA,MACd,OAAOa,EAAoBJ,GAAO,EAAE,SAAS,iBAAiB;AAAA,MAC9D,MAAAP;AAAA,MACA,cAAYC;AAAA,MACZ,eAAaC;AAAA,MACb,oBAAkBC;AAAA,MAClB,mBAAiBC;AAAA,MACjB,iBAAeC;AAAA,MACf,iBAAeC;AAAA,MACf,KAAAE;AAAA,MAEC,UAAAT;AAAA,IAAA;AAAA,EAAA;AAIjB;AACAJ,EAAK,cAAc;"}

package/dist/fondue-components15.js

@@ -1,7 +1,7 @@
 import { jsx as y } from "react/jsx-runtime";
 import { forwardRef as g } from "react";
-import { cn as x } from "./fondue-components36.js";
-import a from "./fondue-components55.js";
+import { cn as x } from "./fondue-components37.js";
+import a from "./fondue-components57.js";
 const $ = g(
   ({
     as: e = "span",

package/dist/fondue-components15.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components15.js","sources":["../src/components/Heading/Heading.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ElementType, type ForwardedRef, forwardRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { cn } from '#/utilities/styleUtilities';\n\nimport styles from './styles/heading.module.scss';\n\ntype HeadingWeight = 'default' | 'strong';\ntype HeadingSize = 'medium' | 'large' | 'x-large' | 'xx-large';\ntype HeadingColor = 'default' | 'weak' | 'x-weak' | 'disabled' | 'negative' | 'positive' | 'warning' | 'interactive';\n\ntype TagType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'p';\n\nexport type HeadingProps<TTag extends TagType = 'span'> = CommonAriaProps & {\n    'data-test-id'?: string;\n    as?: TTag;\n    children?: ReactNode;\n    color?: HeadingColor;\n    size?: HeadingSize;\n    weight?: HeadingWeight;\n    className?: string;\n};\n\ntype HeadingElementType<TTag extends TagType> = TTag extends 'span'\n    ? HTMLSpanElement\n    : TTag extends 'p'\n      ? HTMLParagraphElement\n      : HTMLHeadingElement;\n\nexport const Heading = forwardRef(\n    (\n        {\n            as: Tag = 'span' as ElementType,\n            children,\n            className,\n            color = 'default',\n            role,\n            size = 'medium',\n            weight = 'default',\n            'data-test-id': dataTestId = 'fondue-heading',\n            'aria-describedby': ariaDescribedBy,\n            'aria-expanded': ariaExpanded,\n            'aria-haspopup': ariaHasPopup,\n            'aria-hidden': ariaHidden,\n            'aria-label': ariaLabel,\n            'aria-labelledby': ariaLabelledBy,\n            ...props\n        },\n        ref,\n    ) => {\n        return (\n            <Tag\n                className={cn([\n                    styles.root,\n                    styles[`size-${size}`],\n                    styles[`weight-${weight}`],\n                    styles[`color-${color}`],\n                    className,\n                ])}\n                role={role}\n                aria-label={ariaLabel}\n                aria-hidden={ariaHidden}\n                aria-describedby={ariaDescribedBy}\n                aria-labelledby={ariaLabelledBy}\n                aria-expanded={ariaExpanded}\n                aria-haspopup={ariaHasPopup}\n                data-test-id={dataTestId}\n                ref={ref}\n                {...props}\n            >\n                {children}\n            </Tag>\n        );\n    },\n) as (<TTag extends TagType = 'span'>(\n    props: HeadingProps<TTag> & { ref?: ForwardedRef<HeadingElementType<TTag>> },\n) => JSX.Element) & { displayName: string };\n\nHeading.displayName = 'Heading';\n"],"names":["Heading","forwardRef","Tag","children","className","color","role","size","weight","dataTestId","ariaDescribedBy","ariaExpanded","ariaHasPopup","ariaHidden","ariaLabel","ariaLabelledBy","props","ref","jsx","cn","styles"],"mappings":";;;;AA+BO,MAAMA,IAAUC;AAAA,EACnB,CACI;AAAA,IACI,IAAIC,IAAM;AAAA,IACV,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,MAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,QAAAC,IAAS;AAAA,IACT,gBAAgBC,IAAa;AAAA,IAC7B,oBAAoBC;AAAA,IACpB,iBAAiBC;AAAA,IACjB,iBAAiBC;AAAA,IACjB,eAAeC;AAAA,IACf,cAAcC;AAAA,IACd,mBAAmBC;AAAA,IACnB,GAAGC;AAAA,KAEPC,MAGI,gBAAAC;AAAA,IAAChB;AAAA,IAAA;AAAA,MACG,WAAWiB,EAAG;AAAA,QACVC,EAAO;AAAA,QACPA,EAAO,QAAQb,CAAI,EAAE;AAAA,QACrBa,EAAO,UAAUZ,CAAM,EAAE;AAAA,QACzBY,EAAO,SAASf,CAAK,EAAE;AAAA,QACvBD;AAAA,MAAA,CACH;AAAA,MACD,MAAAE;AAAA,MACA,cAAYQ;AAAA,MACZ,eAAaD;AAAA,MACb,oBAAkBH;AAAA,MAClB,mBAAiBK;AAAA,MACjB,iBAAeJ;AAAA,MACf,iBAAeC;AAAA,MACf,gBAAcH;AAAA,MACd,KAAAQ;AAAA,MACC,GAAGD;AAAA,MAEH,UAAAb;AAAA,IAAA;AAAA,EACL;AAGZ;AAIAH,EAAQ,cAAc;"}
+{"version":3,"file":"fondue-components15.js","sources":["../src/components/Heading/Heading.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ElementType, type ForwardedRef, forwardRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { cn } from '#/utilities/styleUtilities';\n\nimport styles from './styles/heading.module.scss';\n\ntype HeadingWeight = 'default' | 'strong';\ntype HeadingSize = 'medium' | 'large' | 'x-large' | 'xx-large';\ntype HeadingColor = 'default' | 'weak' | 'x-weak' | 'disabled' | 'negative' | 'positive' | 'warning' | 'interactive';\n\ntype TagType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'p';\n\nexport type HeadingProps<TTag extends TagType = 'span'> = CommonAriaProps & {\n    'data-test-id'?: string;\n    as?: TTag;\n    children?: ReactNode;\n    color?: HeadingColor;\n    size?: HeadingSize;\n    weight?: HeadingWeight;\n    className?: string;\n};\n\ntype HeadingElementType<TTag extends TagType> = TTag extends 'span'\n    ? HTMLSpanElement\n    : TTag extends 'p'\n      ? HTMLParagraphElement\n      : HTMLHeadingElement;\n\nexport const Heading = forwardRef(\n    (\n        {\n            as: Tag = 'span' as ElementType,\n            children,\n            className,\n            color = 'default',\n            role,\n            size = 'medium',\n            weight = 'default',\n            'data-test-id': dataTestId = 'fondue-heading',\n            'aria-describedby': ariaDescribedBy,\n            'aria-expanded': ariaExpanded,\n            'aria-haspopup': ariaHasPopup,\n            'aria-hidden': ariaHidden,\n            'aria-label': ariaLabel,\n            'aria-labelledby': ariaLabelledBy,\n            ...props\n        },\n        ref,\n    ) => {\n        return (\n            <Tag\n                className={cn([\n                    styles.root,\n                    styles[`size-${size}`],\n                    styles[`weight-${weight}`],\n                    styles[`color-${color}`],\n                    className,\n                ])}\n                role={role}\n                aria-label={ariaLabel}\n                aria-hidden={ariaHidden}\n                aria-describedby={ariaDescribedBy}\n                aria-labelledby={ariaLabelledBy}\n                aria-expanded={ariaExpanded}\n                aria-haspopup={ariaHasPopup}\n                data-test-id={dataTestId}\n                ref={ref}\n                {...props}\n            >\n                {children}\n            </Tag>\n        );\n    },\n) as (<TTag extends TagType = 'span'>(\n    props: HeadingProps<TTag> & { ref?: ForwardedRef<HeadingElementType<TTag>> },\n) => JSX.Element) & { displayName: string };\n\nHeading.displayName = 'Heading';\n"],"names":["Heading","forwardRef","Tag","children","className","color","role","size","weight","dataTestId","ariaDescribedBy","ariaExpanded","ariaHasPopup","ariaHidden","ariaLabel","ariaLabelledBy","props","ref","jsx","cn","styles"],"mappings":";;;;AA+BO,MAAMA,IAAUC;AAAA,EACnB,CACI;AAAA,IACI,IAAIC,IAAM;AAAA,IACV,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,MAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,QAAAC,IAAS;AAAA,IACT,gBAAgBC,IAAa;AAAA,IAC7B,oBAAoBC;AAAA,IACpB,iBAAiBC;AAAA,IACjB,iBAAiBC;AAAA,IACjB,eAAeC;AAAA,IACf,cAAcC;AAAA,IACd,mBAAmBC;AAAA,IACnB,GAAGC;AAAA,EAAA,GAEPC,MAGI,gBAAAC;AAAA,IAAChB;AAAA,IAAA;AAAA,MACG,WAAWiB,EAAG;AAAA,QACVC,EAAO;AAAA,QACPA,EAAO,QAAQb,CAAI,EAAE;AAAA,QACrBa,EAAO,UAAUZ,CAAM,EAAE;AAAA,QACzBY,EAAO,SAASf,CAAK,EAAE;AAAA,QACvBD;AAAA,MAAA,CACH;AAAA,MACD,MAAAE;AAAA,MACA,cAAYQ;AAAA,MACZ,eAAaD;AAAA,MACb,oBAAkBH;AAAA,MAClB,mBAAiBK;AAAA,MACjB,iBAAeJ;AAAA,MACf,iBAAeC;AAAA,MACf,gBAAcH;AAAA,MACd,KAAAQ;AAAA,MACC,GAAGD;AAAA,MAEH,UAAAb;AAAA,IAAA;AAAA,EAAA;AAIjB;AAIAH,EAAQ,cAAc;"}

package/dist/fondue-components16.js

@@ -1,7 +1,7 @@
 import { jsx as l } from "react/jsx-runtime";
 import * as n from "@radix-ui/react-label";
 import { forwardRef as s } from "react";
-import { cn as w } from "./fondue-components36.js";
+import { cn as w } from "./fondue-components37.js";
 const m = ({ className: r, "data-test-id": d = "fondue-label", ...a }, i) => /* @__PURE__ */ l(
   n.Root,
   {

package/dist/fondue-components16.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components16.js","sources":["../src/components/Label/Label.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as LabelPrimitive from '@radix-ui/react-label';\nimport { type ForwardedRef, forwardRef, type MouseEventHandler, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nexport type LabelProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * The id of the input element the label is associated with\n     */\n    htmlFor: string;\n    /**\n     * Add an asterisk to the label to indicate it is required\n     * @default false\n     */\n    required?: boolean;\n    className?: string;\n    onClick?: MouseEventHandler<HTMLLabelElement>;\n    'data-test-id'?: string;\n};\n\nexport const LabelComponent = (\n    { className, 'data-test-id': dataTestId = 'fondue-label', ...props }: LabelProps,\n    ref: ForwardedRef<HTMLLabelElement>,\n) => {\n    return (\n        <LabelPrimitive.Root\n            ref={ref}\n            data-required={props.required}\n            className={cn(\n                'tw-group tw-flex tw-gap-1 tw-font-body--stack tw-font-normal peer-data-[state=\"checked\"]:tw-font-medium peer-data-[state=\"indeterminate\"]:tw-font-medium tw-text-body-medium tw-text-text-weak peer-hover:tw-text-text has-[+_*_input:hover:not(:disabled)]:tw-text-text tw-transition-colors',\n                // Disabled state if siblings has disabled state\n                'has-[+_*_:disabled]:tw-text-text-disabled has-[~_:disabled]:tw-cursor-not-allowed peer-disabled:tw-text-text-disabled peer-disabled:tw-cursor-not-allowed',\n                // Required asterisk\n                'after:tw-hidden data-[required=\"true\"]:after:tw-flex after:tw-content-[\"*\"] after:-tw-ml-1 after:tw-font-body--stack after:tw-text-body-small after:tw-font-medium after:tw-text-text-negative group-hover:tw-text-text-negative-hover',\n                className,\n            )}\n            data-test-id={dataTestId}\n            onClick={(event) => {\n                // Add support of Select component, Radix only allows native `select`\n                // but we use `div[role=combobox]` because of downshift\n                // https://github.com/radix-ui/primitives/blob/6e75e117977c9e6ffa939e6951a707f16ba0f95e/packages/react/label/src/label.tsx#L22\n                const targetId = (event.target as HTMLElement).getAttribute('for');\n                const target = targetId ? document.getElementById(targetId) : null;\n\n                if (target && target.getAttribute('role') === 'combobox') {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    target.click();\n                }\n            }}\n            {...props}\n        />\n    );\n};\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(LabelComponent);\nLabel.displayName = 'Label';\n"],"names":["LabelComponent","className","dataTestId","props","ref","jsx","LabelPrimitive","cn","event","targetId","target","Label","forwardRef"],"mappings":";;;;AAwBa,MAAAA,IAAiB,CAC1B,EAAE,WAAAC,GAAW,gBAAgBC,IAAa,gBAAgB,GAAGC,EAAM,GACnEC,MAGI,gBAAAC;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,KAAAF;AAAA,IACA,iBAAeD,EAAM;AAAA,IACrB,WAAWI;AAAA,MACP;AAAA;AAAA,MAEA;AAAA;AAAA,MAEA;AAAA,MACAN;AAAA,IACJ;AAAA,IACA,gBAAcC;AAAA,IACd,SAAS,CAACM,MAAU;AAIhB,YAAMC,IAAYD,EAAM,OAAuB,aAAa,KAAK,GAC3DE,IAASD,IAAW,SAAS,eAAeA,CAAQ,IAAI;AAE9D,MAAIC,KAAUA,EAAO,aAAa,MAAM,MAAM,eAC1CF,EAAM,eAAe,GACrBA,EAAM,gBAAgB,GACtBE,EAAO,MAAM;AAAA,IAErB;AAAA,IACC,GAAGP;AAAA,EAAA;AACR,GAIKQ,IAAQC,EAAyCZ,CAAc;AAC5EW,EAAM,cAAc;"}
+{"version":3,"file":"fondue-components16.js","sources":["../src/components/Label/Label.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as LabelPrimitive from '@radix-ui/react-label';\nimport { type ForwardedRef, forwardRef, type MouseEventHandler, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nexport type LabelProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * The id of the input element the label is associated with\n     */\n    htmlFor: string;\n    /**\n     * Add an asterisk to the label to indicate it is required\n     * @default false\n     */\n    required?: boolean;\n    className?: string;\n    onClick?: MouseEventHandler<HTMLLabelElement>;\n    'data-test-id'?: string;\n};\n\nexport const LabelComponent = (\n    { className, 'data-test-id': dataTestId = 'fondue-label', ...props }: LabelProps,\n    ref: ForwardedRef<HTMLLabelElement>,\n) => {\n    return (\n        <LabelPrimitive.Root\n            ref={ref}\n            data-required={props.required}\n            className={cn(\n                'tw-group tw-flex tw-gap-1 tw-font-body--stack tw-font-normal peer-data-[state=\"checked\"]:tw-font-medium peer-data-[state=\"indeterminate\"]:tw-font-medium tw-text-body-medium tw-text-text-weak peer-hover:tw-text-text has-[+_*_input:hover:not(:disabled)]:tw-text-text tw-transition-colors',\n                // Disabled state if siblings has disabled state\n                'has-[+_*_:disabled]:tw-text-text-disabled has-[~_:disabled]:tw-cursor-not-allowed peer-disabled:tw-text-text-disabled peer-disabled:tw-cursor-not-allowed',\n                // Required asterisk\n                'after:tw-hidden data-[required=\"true\"]:after:tw-flex after:tw-content-[\"*\"] after:-tw-ml-1 after:tw-font-body--stack after:tw-text-body-small after:tw-font-medium after:tw-text-text-negative group-hover:tw-text-text-negative-hover',\n                className,\n            )}\n            data-test-id={dataTestId}\n            onClick={(event) => {\n                // Add support of Select component, Radix only allows native `select`\n                // but we use `div[role=combobox]` because of downshift\n                // https://github.com/radix-ui/primitives/blob/6e75e117977c9e6ffa939e6951a707f16ba0f95e/packages/react/label/src/label.tsx#L22\n                const targetId = (event.target as HTMLElement).getAttribute('for');\n                const target = targetId ? document.getElementById(targetId) : null;\n\n                if (target && target.getAttribute('role') === 'combobox') {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    target.click();\n                }\n            }}\n            {...props}\n        />\n    );\n};\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(LabelComponent);\nLabel.displayName = 'Label';\n"],"names":["LabelComponent","className","dataTestId","props","ref","jsx","LabelPrimitive","cn","event","targetId","target","Label","forwardRef"],"mappings":";;;;AAwBO,MAAMA,IAAiB,CAC1B,EAAE,WAAAC,GAAW,gBAAgBC,IAAa,gBAAgB,GAAGC,EAAA,GAC7DC,MAGI,gBAAAC;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,KAAAF;AAAA,IACA,iBAAeD,EAAM;AAAA,IACrB,WAAWI;AAAA,MACP;AAAA;AAAA,MAEA;AAAA;AAAA,MAEA;AAAA,MACAN;AAAA,IAAA;AAAA,IAEJ,gBAAcC;AAAA,IACd,SAAS,CAACM,MAAU;AAIhB,YAAMC,IAAYD,EAAM,OAAuB,aAAa,KAAK,GAC3DE,IAASD,IAAW,SAAS,eAAeA,CAAQ,IAAI;AAE9D,MAAIC,KAAUA,EAAO,aAAa,MAAM,MAAM,eAC1CF,EAAM,eAAA,GACNA,EAAM,gBAAA,GACNE,EAAO,MAAA;AAAA,IAEf;AAAA,IACC,GAAGP;AAAA,EAAA;AAAA,GAKHQ,IAAQC,EAAyCZ,CAAc;AAC5EW,EAAM,cAAc;"}

package/dist/fondue-components17.js

@@ -1,7 +1,7 @@
 import { jsx as i } from "react/jsx-runtime";
 import * as t from "@radix-ui/react-progress";
 import { forwardRef as m } from "react";
-import { loadingBarContainerStyles as g, loadingBarStyles as f } from "./fondue-components56.js";
+import { loadingBarContainerStyles as g, loadingBarStyles as f } from "./fondue-components58.js";
 const p = m(
   ({
     value: a,

package/dist/fondue-components17.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components17.js","sources":["../src/components/LoadingBar/LoadingBar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as ProgressRadixPrimitive from '@radix-ui/react-progress';\nimport { forwardRef, type CSSProperties, type ElementRef, type ForwardedRef } from 'react';\n\nimport { loadingBarContainerStyles, loadingBarStyles } from './styles/loadingBarStyles';\n\nexport type LoadingBarProps = {\n    /**\n     * The current value of the loading bar. If `null`, the loading bar will be in an indeterminate state.\n     * @default null\n     */\n    value: number | null;\n    /**\n     * The maximum value of the loading bar\n     * @default 100\n     */\n    max?: number;\n    /**\n     * @default 'fondue-loading-bar'\n     */\n    'data-test-id'?: string;\n    /**\n     * Add rounded corners to the loading bar\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * The style of the loading bar\n     * @default \"default\"\n     */\n    variant?: 'default' | 'positive' | 'negative';\n    /**\n     * The size of the loading bar\n     * @default \"medium\"\n     */\n    size?: 'small' | 'medium' | 'large' | 'x-large';\n    /**\n     * The label of the loading bar for accessibility purposes\n     */\n    getValueLabel?: (value: number, max: number) => string;\n} & ({ 'aria-label': string } | { 'aria-labelledby': string });\n\nexport const LoadingBar = forwardRef<ElementRef<typeof ProgressRadixPrimitive.Root>, LoadingBarProps>(\n    (\n        {\n            value,\n            max = 100,\n            rounded = true,\n            variant = 'default',\n            size = 'medium',\n            'data-test-id': dataTestId = 'fondue-loading-bar',\n            ...props\n        }: LoadingBarProps,\n        ref: ForwardedRef<ElementRef<typeof ProgressRadixPrimitive.Root>>,\n    ) => {\n        return (\n            <ProgressRadixPrimitive.Root\n                ref={ref}\n                data-test-id={dataTestId}\n                className={loadingBarContainerStyles({ rounded, size, variant })}\n                aria-busy={value !== max}\n                value={value}\n                max={max}\n                style={\n                    {\n                        '--loading-bar-value': value,\n                        '--loading-bar-max': max,\n                        '--loading-bar-proportion': 'calc(var(--loading-bar-value) / var(--loading-bar-max))',\n                    } as CSSProperties\n                }\n                {...props}\n            >\n                <ProgressRadixPrimitive.Indicator\n                    className={loadingBarStyles({ variant, indeterminateState: value === null })}\n                />\n            </ProgressRadixPrimitive.Root>\n        );\n    },\n);\nLoadingBar.displayName = 'LoadingBar';\n"],"names":["LoadingBar","forwardRef","value","max","rounded","variant","size","dataTestId","props","ref","jsx","ProgressRadixPrimitive","loadingBarContainerStyles","loadingBarStyles"],"mappings":";;;;AA2CO,MAAMA,IAAaC;AAAA,EACtB,CACI;AAAA,IACI,OAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,IAC7B,GAAGC;AAAA,KAEPC,MAGI,gBAAAC;AAAA,IAACC,EAAuB;AAAA,IAAvB;AAAA,MACG,KAAAF;AAAA,MACA,gBAAcF;AAAA,MACd,WAAWK,EAA0B,EAAE,SAAAR,GAAS,MAAAE,GAAM,SAAAD,GAAS;AAAA,MAC/D,aAAWH,MAAUC;AAAA,MACrB,OAAAD;AAAA,MACA,KAAAC;AAAA,MACA,OACI;AAAA,QACI,uBAAuBD;AAAA,QACvB,qBAAqBC;AAAA,QACrB,4BAA4B;AAAA,MAChC;AAAA,MAEH,GAAGK;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACC,EAAuB;AAAA,QAAvB;AAAA,UACG,WAAWE,EAAiB,EAAE,SAAAR,GAAS,oBAAoBH,MAAU,KAAM,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC/E;AAAA,EACJ;AAGZ;AACAF,EAAW,cAAc;"}
+{"version":3,"file":"fondue-components17.js","sources":["../src/components/LoadingBar/LoadingBar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as ProgressRadixPrimitive from '@radix-ui/react-progress';\nimport { forwardRef, type CSSProperties, type ElementRef, type ForwardedRef } from 'react';\n\nimport { loadingBarContainerStyles, loadingBarStyles } from './styles/loadingBarStyles';\n\nexport type LoadingBarProps = {\n    /**\n     * The current value of the loading bar. If `null`, the loading bar will be in an indeterminate state.\n     * @default null\n     */\n    value: number | null;\n    /**\n     * The maximum value of the loading bar\n     * @default 100\n     */\n    max?: number;\n    /**\n     * @default 'fondue-loading-bar'\n     */\n    'data-test-id'?: string;\n    /**\n     * Add rounded corners to the loading bar\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * The style of the loading bar\n     * @default \"default\"\n     */\n    variant?: 'default' | 'positive' | 'negative';\n    /**\n     * The size of the loading bar\n     * @default \"medium\"\n     */\n    size?: 'small' | 'medium' | 'large' | 'x-large';\n    /**\n     * The label of the loading bar for accessibility purposes\n     */\n    getValueLabel?: (value: number, max: number) => string;\n} & ({ 'aria-label': string } | { 'aria-labelledby': string });\n\nexport const LoadingBar = forwardRef<ElementRef<typeof ProgressRadixPrimitive.Root>, LoadingBarProps>(\n    (\n        {\n            value,\n            max = 100,\n            rounded = true,\n            variant = 'default',\n            size = 'medium',\n            'data-test-id': dataTestId = 'fondue-loading-bar',\n            ...props\n        }: LoadingBarProps,\n        ref: ForwardedRef<ElementRef<typeof ProgressRadixPrimitive.Root>>,\n    ) => {\n        return (\n            <ProgressRadixPrimitive.Root\n                ref={ref}\n                data-test-id={dataTestId}\n                className={loadingBarContainerStyles({ rounded, size, variant })}\n                aria-busy={value !== max}\n                value={value}\n                max={max}\n                style={\n                    {\n                        '--loading-bar-value': value,\n                        '--loading-bar-max': max,\n                        '--loading-bar-proportion': 'calc(var(--loading-bar-value) / var(--loading-bar-max))',\n                    } as CSSProperties\n                }\n                {...props}\n            >\n                <ProgressRadixPrimitive.Indicator\n                    className={loadingBarStyles({ variant, indeterminateState: value === null })}\n                />\n            </ProgressRadixPrimitive.Root>\n        );\n    },\n);\nLoadingBar.displayName = 'LoadingBar';\n"],"names":["LoadingBar","forwardRef","value","max","rounded","variant","size","dataTestId","props","ref","jsx","ProgressRadixPrimitive","loadingBarContainerStyles","loadingBarStyles"],"mappings":";;;;AA2CO,MAAMA,IAAaC;AAAA,EACtB,CACI;AAAA,IACI,OAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,IAC7B,GAAGC;AAAA,EAAA,GAEPC,MAGI,gBAAAC;AAAA,IAACC,EAAuB;AAAA,IAAvB;AAAA,MACG,KAAAF;AAAA,MACA,gBAAcF;AAAA,MACd,WAAWK,EAA0B,EAAE,SAAAR,GAAS,MAAAE,GAAM,SAAAD,GAAS;AAAA,MAC/D,aAAWH,MAAUC;AAAA,MACrB,OAAAD;AAAA,MACA,KAAAC;AAAA,MACA,OACI;AAAA,QACI,uBAAuBD;AAAA,QACvB,qBAAqBC;AAAA,QACrB,4BAA4B;AAAA,MAAA;AAAA,MAGnC,GAAGK;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACC,EAAuB;AAAA,QAAvB;AAAA,UACG,WAAWE,EAAiB,EAAE,SAAAR,GAAS,oBAAoBH,MAAU,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAC/E;AAAA,EAAA;AAIhB;AACAF,EAAW,cAAc;"}

package/dist/fondue-components18.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as i } from "react";
-import d from "./fondue-components57.js";
+import d from "./fondue-components59.js";
 const s = i(
   ({
     variant: t = "progress",

package/dist/fondue-components18.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components18.js","sources":["../src/components/LoadingCircle/LoadingCircle.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef } from 'react';\n\nimport styles from './styles/loadingCircleStyles.module.scss';\n\nexport type LoadingCircleProps = {\n    /**\n     * The  variant of the loading circle.\n     * @default 'progress'\n     */\n    variant?: 'progress' | 'success' | 'danger';\n    /**\n     * The size of the loading circle\n     * @default \"medium\"\n     */\n    size?: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large';\n    'data-test-id'?: string;\n};\n\nexport const LoadingCircle = forwardRef<HTMLDivElement, LoadingCircleProps>(\n    (\n        {\n            variant = 'progress',\n            size = 'medium',\n            'data-test-id': dataTestId = 'fondue-loading-circle-content',\n        }: LoadingCircleProps,\n        ref: ForwardedRef<HTMLDivElement>,\n    ) => {\n        return (\n            <div\n                ref={ref}\n                data-test-id={dataTestId}\n                data-variant={variant}\n                data-size={size}\n                className={styles.root}\n            ></div>\n        );\n    },\n);\nLoadingCircle.displayName = 'LoadingCircle';\n"],"names":["LoadingCircle","forwardRef","variant","size","dataTestId","ref","jsx","styles"],"mappings":";;;AAoBO,MAAMA,IAAgBC;AAAA,EACzB,CACI;AAAA,IACI,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,KAEjCC,MAGI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAD;AAAA,MACA,gBAAcD;AAAA,MACd,gBAAcF;AAAA,MACd,aAAWC;AAAA,MACX,WAAWI,EAAO;AAAA,IAAA;AAAA,EACrB;AAGb;AACAP,EAAc,cAAc;"}
+{"version":3,"file":"fondue-components18.js","sources":["../src/components/LoadingCircle/LoadingCircle.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef } from 'react';\n\nimport styles from './styles/loadingCircleStyles.module.scss';\n\nexport type LoadingCircleProps = {\n    /**\n     * The  variant of the loading circle.\n     * @default 'progress'\n     */\n    variant?: 'progress' | 'success' | 'danger';\n    /**\n     * The size of the loading circle\n     * @default \"medium\"\n     */\n    size?: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large';\n    'data-test-id'?: string;\n};\n\nexport const LoadingCircle = forwardRef<HTMLDivElement, LoadingCircleProps>(\n    (\n        {\n            variant = 'progress',\n            size = 'medium',\n            'data-test-id': dataTestId = 'fondue-loading-circle-content',\n        }: LoadingCircleProps,\n        ref: ForwardedRef<HTMLDivElement>,\n    ) => {\n        return (\n            <div\n                ref={ref}\n                data-test-id={dataTestId}\n                data-variant={variant}\n                data-size={size}\n                className={styles.root}\n            ></div>\n        );\n    },\n);\nLoadingCircle.displayName = 'LoadingCircle';\n"],"names":["LoadingCircle","forwardRef","variant","size","dataTestId","ref","jsx","styles"],"mappings":";;;AAoBO,MAAMA,IAAgBC;AAAA,EACzB,CACI;AAAA,IACI,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,EAAA,GAEjCC,MAGI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAD;AAAA,MACA,gBAAcD;AAAA,MACd,gBAAcF;AAAA,MACd,aAAWC;AAAA,MACX,WAAWI,EAAO;AAAA,IAAA;AAAA,EAAA;AAIlC;AACAP,EAAc,cAAc;"}