@frontify/fondue-components 19.6.1 → 19.7.0

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 { 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":"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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    /**\n     * Event handler called when auto-focusing on open\n     */\n    onOpenAutoFocus?: (event: Event) => void;\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":"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"}

package/dist/fondue-components16.js

@@ -1,29 +1,39 @@
-import { jsxs as n, jsx as s } from "react/jsx-runtime";
-import * as c from "@radix-ui/react-label";
-import { forwardRef as f } from "react";
-import { cn as p } from "./fondue-components38.js";
-import o from "./fondue-components59.js";
-const b = ({ className: l, "data-test-id": m = "fondue-label", children: a, ...r }, d) => /* @__PURE__ */ n(
-  c.Root,
-  {
-    ref: d,
-    "data-required": r.required,
-    className: p(o.root, l),
-    "data-test-id": m,
-    onClick: (t) => {
-      const i = t.target.getAttribute("for"), e = i ? document.getElementById(i) : null;
-      e && e.getAttribute("role") === "combobox" && (t.preventDefault(), t.stopPropagation(), e.click());
-    },
-    ...r,
-    children: [
-      /* @__PURE__ */ s("span", { className: o.hiddenText, "aria-hidden": "true", children: a }),
-      /* @__PURE__ */ s("span", { className: o.visibleText, children: a })
-    ]
-  }
-), u = f(b);
-u.displayName = "Label";
+import { jsxs as m, jsx as s } from "react/jsx-runtime";
+import * as f from "@radix-ui/react-label";
+import { forwardRef as b, useRef as p, useLayoutEffect as x } from "react";
+import { cn as A } from "./fondue-components38.js";
+import r from "./fondue-components59.js";
+const g = ({ className: l, "data-test-id": d = "fondue-label", children: o, variant: c = "default", ...i }, u) => {
+  const n = p(null);
+  return x(() => {
+    var a;
+    const e = (a = n.current) == null ? void 0 : a.querySelectorAll("button,input,a,[tabindex]");
+    if (e)
+      for (const t of e)
+        t.setAttribute("tabindex", "-1"), t.setAttribute("id", ""), t.setAttribute("data-test-id", "");
+  }, []), /* @__PURE__ */ m(
+    f.Root,
+    {
+      ref: u,
+      "data-required": i.required,
+      "data-variant": c,
+      className: A(r.root, l),
+      "data-test-id": d,
+      onClick: (e) => {
+        const a = e.target.getAttribute("for"), t = a ? document.getElementById(a) : null;
+        t && t.getAttribute("role") === "combobox" && (e.preventDefault(), e.stopPropagation(), t.click());
+      },
+      ...i,
+      children: [
+        /* @__PURE__ */ s("span", { className: `${r.hiddenText} ${r.contentArea}`, "aria-hidden": "true", ref: n, children: o }),
+        /* @__PURE__ */ s("span", { className: `${r.visibleText} ${r.contentArea}`, children: o })
+      ]
+    }
+  );
+}, y = b(g);
+y.displayName = "Label";
 export {
-  u as Label,
-  b as LabelComponent
+  y as Label,
+  g as LabelComponent
 };
 //# sourceMappingURL=fondue-components16.js.map

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\nimport styles from './styles/label.module.scss';\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', children, ...props }: LabelProps,\n    ref: ForwardedRef<HTMLLabelElement>,\n) => {\n    return (\n        <LabelPrimitive.Root\n            ref={ref}\n            data-required={props.required}\n            className={cn(styles.root, className)}\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            {/* Hidden version with medium font weight to reserve space */}\n            <span className={styles.hiddenText} aria-hidden=\"true\">\n                {children}\n            </span>\n            {/* Visible version (inherits all styling from parent) */}\n            <span className={styles.visibleText}>{children}</span>\n        </LabelPrimitive.Root>\n    );\n};\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(LabelComponent);\nLabel.displayName = 'Label';\n"],"names":["LabelComponent","className","dataTestId","children","props","ref","jsxs","LabelPrimitive","cn","styles","event","targetId","target","jsx","Label","forwardRef"],"mappings":";;;;;AA0BO,MAAMA,IAAiB,CAC1B,EAAE,WAAAC,GAAW,gBAAgBC,IAAa,gBAAgB,UAAAC,GAAU,GAAGC,EAAA,GACvEC,MAGI,gBAAAC;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,KAAAF;AAAA,IACA,iBAAeD,EAAM;AAAA,IACrB,WAAWI,EAAGC,EAAO,MAAMR,CAAS;AAAA,IACpC,gBAAcC;AAAA,IACd,SAAS,CAACQ,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,GAAGR;AAAA,IAGJ,UAAA;AAAA,MAAA,gBAAAS,EAAC,UAAK,WAAWJ,EAAO,YAAY,eAAY,QAC3C,UAAAN,GACL;AAAA,MAEA,gBAAAU,EAAC,QAAA,EAAK,WAAWJ,EAAO,aAAc,UAAAN,EAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAAA,GAK9CW,IAAQC,EAAyCf,CAAc;AAC5Ec,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, useRef, useLayoutEffect } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport styles from './styles/label.module.scss';\n\ntype LabelVariant = 'default' | 'strong';\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    /**\n     * The variant of the label\n     * @default \"default\"\n     */\n    variant?: LabelVariant;\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', children, variant = 'default', ...props }: LabelProps,\n    ref: ForwardedRef<HTMLLabelElement>,\n) => {\n    const hiddenTextRef = useRef<HTMLSpanElement>(null);\n\n    useLayoutEffect(() => {\n        // prevent duplicated interactive elements within the hidden element\n        const interactiveElements = hiddenTextRef.current?.querySelectorAll('button,input,a,[tabindex]');\n        if (interactiveElements) {\n            for (const element of interactiveElements) {\n                element.setAttribute('tabindex', '-1');\n                element.setAttribute('id', '');\n                element.setAttribute('data-test-id', '');\n            }\n        }\n    }, []);\n\n    return (\n        <LabelPrimitive.Root\n            ref={ref}\n            data-required={props.required}\n            data-variant={variant}\n            className={cn(styles.root, className)}\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            {/* Hidden version with medium font weight to reserve space */}\n            <span className={`${styles.hiddenText} ${styles.contentArea}`} aria-hidden=\"true\" ref={hiddenTextRef}>\n                {children}\n            </span>\n            {/* Visible version (inherits all styling from parent) */}\n            <span className={`${styles.visibleText} ${styles.contentArea}`}>{children}</span>\n        </LabelPrimitive.Root>\n    );\n};\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(LabelComponent);\nLabel.displayName = 'Label';\n"],"names":["LabelComponent","className","dataTestId","children","variant","props","ref","hiddenTextRef","useRef","useLayoutEffect","interactiveElements","_a","element","jsxs","LabelPrimitive","cn","styles","event","targetId","target","jsx","Label","forwardRef"],"mappings":";;;;;AAiCO,MAAMA,IAAiB,CAC1B,EAAE,WAAAC,GAAW,gBAAgBC,IAAa,gBAAgB,UAAAC,GAAU,SAAAC,IAAU,WAAW,GAAGC,EAAA,GAC5FC,MACC;AACD,QAAMC,IAAgBC,EAAwB,IAAI;AAElD,SAAAC,EAAgB,MAAM;;AAElB,UAAMC,KAAsBC,IAAAJ,EAAc,YAAd,gBAAAI,EAAuB,iBAAiB;AACpE,QAAID;AACA,iBAAWE,KAAWF;AAClB,QAAAE,EAAQ,aAAa,YAAY,IAAI,GACrCA,EAAQ,aAAa,MAAM,EAAE,GAC7BA,EAAQ,aAAa,gBAAgB,EAAE;AAAA,EAGnD,GAAG,CAAA,CAAE,GAGD,gBAAAC;AAAA,IAACC,EAAe;AAAA,IAAf;AAAA,MACG,KAAAR;AAAA,MACA,iBAAeD,EAAM;AAAA,MACrB,gBAAcD;AAAA,MACd,WAAWW,EAAGC,EAAO,MAAMf,CAAS;AAAA,MACpC,gBAAcC;AAAA,MACd,SAAS,CAACe,MAAU;AAIhB,cAAMC,IAAYD,EAAM,OAAuB,aAAa,KAAK,GAC3DE,IAASD,IAAW,SAAS,eAAeA,CAAQ,IAAI;AAE9D,QAAIC,KAAUA,EAAO,aAAa,MAAM,MAAM,eAC1CF,EAAM,eAAA,GACNA,EAAM,gBAAA,GACNE,EAAO,MAAA;AAAA,MAEf;AAAA,MACC,GAAGd;AAAA,MAGJ,UAAA;AAAA,QAAA,gBAAAe,EAAC,QAAA,EAAK,WAAW,GAAGJ,EAAO,UAAU,IAAIA,EAAO,WAAW,IAAI,eAAY,QAAO,KAAKT,GAClF,UAAAJ,GACL;AAAA,QAEA,gBAAAiB,EAAC,QAAA,EAAK,WAAW,GAAGJ,EAAO,WAAW,IAAIA,EAAO,WAAW,IAAK,UAAAb,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGtF,GAEakB,IAAQC,EAAyCtB,CAAc;AAC5EqB,EAAM,cAAc;"}

package/dist/fondue-components26.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components26.js","sources":["../src/components/Tag/Tag.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross, IconPlus } from '@frontify/fondue-icons';\nimport { Children, isValidElement, useState, type MouseEvent, type ReactNode } from 'react';\n\nimport styles from './styles/tag.module.scss';\n\ntype TagStyle = 'default' | 'positive' | 'highlight' | 'warning' | 'negative';\n\ntype TagEmphasis = 'strong' | 'weak';\n\ntype TagSize = 'default' | 'small';\n\ntype TagProps = {\n    /**\n     * @default 'strong'\n     */\n    emphasis?: TagEmphasis;\n    /**\n     * @default 'default'\n     */\n    variant?: TagStyle;\n    /**\n     * @default 'default'\n     */\n    size?: TagSize;\n    /**\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Click handler\n     */\n    onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Click handler on dismiss - providing this will show the dismiss button\n     */\n    onDismiss?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Click handler on add click - providing this will show the add button\n     */\n    onAddClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    title?: string;\n    'aria-label'?: string;\n    'data-test-id'?: string;\n    children: ReactNode;\n};\n\nexport type TagHoverContentProps = {\n    children: ReactNode;\n};\n\nexport type TagSecondaryContentProps = {\n    children: ReactNode;\n};\n\nconst TagRoot = ({\n    'aria-label': ariaLabel,\n    'data-test-id': dataTestId = 'tag',\n    children,\n    disabled = false,\n    emphasis = 'strong',\n    onAddClick,\n    onClick,\n    onDismiss,\n    size = 'default',\n    title,\n    variant,\n}: TagProps) => {\n    const [isHover, setIsHover] = useState(false);\n\n    // Extract hover content from slots\n    let extractedHoverContent: ReactNode = null;\n    const processedChildren = Children.map(children, (child) => {\n        if (isValidElement(child) && child.type === TagHoverContent) {\n            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access\n            extractedHoverContent = child.props.children;\n            return null;\n        }\n        return child;\n    });\n\n    const commonProps = {\n        'data-addable': !!onAddClick,\n        'data-component': 'tag',\n        'data-disabled': disabled,\n        'data-dismissable': !!onDismiss,\n        'data-emphasis': emphasis,\n        'data-size': size,\n        'data-variant': variant,\n        className: styles.root,\n    };\n\n    return (\n        <div {...commonProps}>\n            <TagMainContent\n                aria-label={ariaLabel || title}\n                disabled={disabled}\n                hoverContent={extractedHoverContent}\n                isHover={isHover}\n                onClick={onClick}\n                onMouseEnter={() => setIsHover(true)}\n                onMouseLeave={() => setIsHover(false)}\n                title={title}\n                data-test-id={dataTestId}\n            >\n                {processedChildren}\n            </TagMainContent>\n            <TagActionButtons\n                aria-label={ariaLabel || title}\n                disabled={disabled}\n                onAddClick={onAddClick}\n                onDismiss={onDismiss}\n            />\n        </div>\n    );\n};\nTagRoot.displayName = 'Tag';\n\nconst TagMainContent = ({\n    'aria-label': ariaLabel,\n    'data-test-id': dataTestId,\n    children,\n    disabled = false,\n    hoverContent,\n    isHover = false,\n    onClick,\n    onMouseEnter,\n    onMouseLeave,\n    title,\n}: {\n    'aria-label'?: string;\n    'data-test-id'?: string;\n    children: ReactNode;\n    disabled?: boolean;\n    hoverContent?: ReactNode;\n    isHover?: boolean;\n    onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    onMouseEnter?: () => void;\n    onMouseLeave?: () => void;\n    title?: string;\n}) => {\n    // Process children to handle secondary content slots in their natural position\n    let secondaryIndex = 0;\n    const processedChildren = Children.map(children, (child) => {\n        if (isValidElement(child) && child.type === TagSecondaryContent) {\n            const currentIndex = secondaryIndex++;\n            return (\n                <div className={styles.secondaryContent} key={`secondary-${currentIndex}`}>\n                    {/* eslint-disable-next-line @typescript-eslint/no-unsafe-member-access */}\n                    {child.props.children}\n                </div>\n            );\n        }\n        return child;\n    });\n\n    const content = hoverContent ? (\n        <div data-hover={isHover}>\n            <div>{hoverContent}</div>\n            <div>{processedChildren}</div>\n        </div>\n    ) : (\n        processedChildren\n    );\n\n    if (onClick) {\n        return (\n            <button\n                type=\"button\"\n                aria-label={ariaLabel}\n                title={title}\n                className={styles.mainContent}\n                onClick={disabled ? undefined : onClick}\n                onMouseEnter={onMouseEnter}\n                onMouseLeave={onMouseLeave}\n                disabled={disabled}\n                data-test-id={dataTestId}\n            >\n                {content}\n            </button>\n        );\n    }\n\n    return (\n        <div\n            className={styles.mainContent}\n            onMouseEnter={onMouseEnter}\n            onMouseLeave={onMouseLeave}\n            data-test-id={dataTestId}\n        >\n            {content}\n        </div>\n    );\n};\n\ntype TagActionButtonsProps = {\n    /**\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Click handler on dismiss\n     */\n    onDismiss?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Click handler on add click\n     */\n    onAddClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    'aria-label'?: string;\n};\n\nconst TagActionButtons = ({ 'aria-label': ariaLabel, disabled, onAddClick, onDismiss }: TagActionButtonsProps) => {\n    return (\n        <>\n            {onAddClick && (\n                <button\n                    type=\"button\"\n                    aria-label={`Add ${ariaLabel || ''}`}\n                    className={styles.actionButton}\n                    disabled={disabled}\n                    onClick={onAddClick}\n                >\n                    <IconPlus size=\"16\" />\n                </button>\n            )}\n            {onDismiss && (\n                <button\n                    type=\"button\"\n                    aria-label={`Dismiss ${ariaLabel || ''}`}\n                    className={styles.actionButton}\n                    disabled={disabled}\n                    onClick={onDismiss}\n                >\n                    <IconCross size=\"16\" />\n                </button>\n            )}\n        </>\n    );\n};\n\nexport const TagHoverContent = ({ children }: TagHoverContentProps) => {\n    return <>{children}</>;\n};\nTagHoverContent.displayName = 'Tag.HoverContent';\n\nexport const TagSecondaryContent = ({ children }: TagSecondaryContentProps) => {\n    return <>{children}</>;\n};\nTagSecondaryContent.displayName = 'Tag.SecondaryContent';\n\nexport const Tag = TagRoot as typeof TagRoot & {\n    HoverContent: typeof TagHoverContent;\n    SecondaryContent: typeof TagSecondaryContent;\n    displayName?: string;\n};\nTag.HoverContent = TagHoverContent;\nTag.SecondaryContent = TagSecondaryContent;\n"],"names":["TagRoot","ariaLabel","dataTestId","children","disabled","emphasis","onAddClick","onClick","onDismiss","size","title","variant","isHover","setIsHover","useState","extractedHoverContent","processedChildren","Children","child","isValidElement","TagHoverContent","commonProps","styles","jsxs","jsx","TagMainContent","TagActionButtons","hoverContent","onMouseEnter","onMouseLeave","secondaryIndex","TagSecondaryContent","currentIndex","content","Fragment","IconPlus","IconCross","Tag"],"mappings":"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"}
+{"version":3,"file":"fondue-components26.js","sources":["../src/components/Tag/Tag.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross, IconPlus } from '@frontify/fondue-icons';\nimport { Children, isValidElement, useState, type MouseEvent, type ReactNode } from 'react';\n\nimport styles from './styles/tag.module.scss';\n\ntype TagStyle = 'default' | 'highlight';\n\ntype TagEmphasis = 'strong' | 'weak';\n\ntype TagSize = 'default' | 'small';\n\ntype TagProps = {\n    /**\n     * @default 'strong'\n     */\n    emphasis?: TagEmphasis;\n    /**\n     * @default 'default'\n     */\n    variant?: TagStyle;\n    /**\n     * @default 'default'\n     */\n    size?: TagSize;\n    /**\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Click handler\n     */\n    onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Click handler on dismiss - providing this will show the dismiss button\n     */\n    onDismiss?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Click handler on add click - providing this will show the add button\n     */\n    onAddClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    title?: string;\n    'aria-label'?: string;\n    'data-test-id'?: string;\n    children: ReactNode;\n};\n\nexport type TagHoverContentProps = {\n    children: ReactNode;\n};\n\nexport type TagSecondaryContentProps = {\n    children: ReactNode;\n};\n\nconst TagRoot = ({\n    'aria-label': ariaLabel,\n    'data-test-id': dataTestId = 'tag',\n    children,\n    disabled = false,\n    emphasis = 'strong',\n    onAddClick,\n    onClick,\n    onDismiss,\n    size = 'default',\n    title,\n    variant,\n}: TagProps) => {\n    const [isHover, setIsHover] = useState(false);\n\n    // Extract hover content from slots\n    let extractedHoverContent: ReactNode = null;\n    const processedChildren = Children.map(children, (child) => {\n        if (isValidElement(child) && child.type === TagHoverContent) {\n            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access\n            extractedHoverContent = child.props.children;\n            return null;\n        }\n        return child;\n    });\n\n    const commonProps = {\n        'data-addable': !!onAddClick,\n        'data-component': 'tag',\n        'data-disabled': disabled,\n        'data-dismissable': !!onDismiss,\n        'data-emphasis': emphasis,\n        'data-size': size,\n        'data-variant': variant,\n        className: styles.root,\n    };\n\n    return (\n        <div {...commonProps}>\n            <TagMainContent\n                aria-label={ariaLabel || title}\n                disabled={disabled}\n                hoverContent={extractedHoverContent}\n                isHover={isHover}\n                onClick={onClick}\n                onMouseEnter={() => setIsHover(true)}\n                onMouseLeave={() => setIsHover(false)}\n                title={title}\n                data-test-id={dataTestId}\n            >\n                {processedChildren}\n            </TagMainContent>\n            <TagActionButtons\n                aria-label={ariaLabel || title}\n                disabled={disabled}\n                onAddClick={onAddClick}\n                onDismiss={onDismiss}\n            />\n        </div>\n    );\n};\nTagRoot.displayName = 'Tag';\n\nconst TagMainContent = ({\n    'aria-label': ariaLabel,\n    'data-test-id': dataTestId,\n    children,\n    disabled = false,\n    hoverContent,\n    isHover = false,\n    onClick,\n    onMouseEnter,\n    onMouseLeave,\n    title,\n}: {\n    'aria-label'?: string;\n    'data-test-id'?: string;\n    children: ReactNode;\n    disabled?: boolean;\n    hoverContent?: ReactNode;\n    isHover?: boolean;\n    onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    onMouseEnter?: () => void;\n    onMouseLeave?: () => void;\n    title?: string;\n}) => {\n    // Process children to handle secondary content slots in their natural position\n    let secondaryIndex = 0;\n    const processedChildren = Children.map(children, (child) => {\n        if (isValidElement(child) && child.type === TagSecondaryContent) {\n            const currentIndex = secondaryIndex++;\n            return (\n                <div className={styles.secondaryContent} key={`secondary-${currentIndex}`}>\n                    {/* eslint-disable-next-line @typescript-eslint/no-unsafe-member-access */}\n                    {child.props.children}\n                </div>\n            );\n        }\n        return child;\n    });\n\n    const content = hoverContent ? (\n        <div data-hover={isHover}>\n            <div>{hoverContent}</div>\n            <div>{processedChildren}</div>\n        </div>\n    ) : (\n        processedChildren\n    );\n\n    if (onClick) {\n        return (\n            <button\n                type=\"button\"\n                aria-label={ariaLabel}\n                title={title}\n                className={styles.mainContent}\n                onClick={disabled ? undefined : onClick}\n                onMouseEnter={onMouseEnter}\n                onMouseLeave={onMouseLeave}\n                disabled={disabled}\n                data-test-id={dataTestId}\n            >\n                {content}\n            </button>\n        );\n    }\n\n    return (\n        <div\n            className={styles.mainContent}\n            onMouseEnter={onMouseEnter}\n            onMouseLeave={onMouseLeave}\n            data-test-id={dataTestId}\n        >\n            {content}\n        </div>\n    );\n};\n\ntype TagActionButtonsProps = {\n    /**\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Click handler on dismiss\n     */\n    onDismiss?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Click handler on add click\n     */\n    onAddClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    'aria-label'?: string;\n};\n\nconst TagActionButtons = ({ 'aria-label': ariaLabel, disabled, onAddClick, onDismiss }: TagActionButtonsProps) => {\n    return (\n        <>\n            {onAddClick && (\n                <button\n                    type=\"button\"\n                    aria-label={`Add ${ariaLabel || ''}`}\n                    className={styles.actionButton}\n                    disabled={disabled}\n                    onClick={onAddClick}\n                >\n                    <IconPlus size=\"16\" />\n                </button>\n            )}\n            {onDismiss && (\n                <button\n                    type=\"button\"\n                    aria-label={`Dismiss ${ariaLabel || ''}`}\n                    className={styles.actionButton}\n                    disabled={disabled}\n                    onClick={onDismiss}\n                >\n                    <IconCross size=\"16\" />\n                </button>\n            )}\n        </>\n    );\n};\n\nexport const TagHoverContent = ({ children }: TagHoverContentProps) => {\n    return <>{children}</>;\n};\nTagHoverContent.displayName = 'Tag.HoverContent';\n\nexport const TagSecondaryContent = ({ children }: TagSecondaryContentProps) => {\n    return <>{children}</>;\n};\nTagSecondaryContent.displayName = 'Tag.SecondaryContent';\n\nexport const Tag = TagRoot as typeof TagRoot & {\n    HoverContent: typeof TagHoverContent;\n    SecondaryContent: typeof TagSecondaryContent;\n    displayName?: string;\n};\nTag.HoverContent = TagHoverContent;\nTag.SecondaryContent = TagSecondaryContent;\n"],"names":["TagRoot","ariaLabel","dataTestId","children","disabled","emphasis","onAddClick","onClick","onDismiss","size","title","variant","isHover","setIsHover","useState","extractedHoverContent","processedChildren","Children","child","isValidElement","TagHoverContent","commonProps","styles","jsxs","jsx","TagMainContent","TagActionButtons","hoverContent","onMouseEnter","onMouseLeave","secondaryIndex","TagSecondaryContent","currentIndex","content","Fragment","IconPlus","IconCross","Tag"],"mappings":"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"}

package/dist/fondue-components3.js

@@ -1,6 +1,6 @@
 import { jsx as n, jsxs as m } from "react/jsx-runtime";
 import { IconCaretDown as C } from "@frontify/fondue-icons";
-import * as c from "@radix-ui/react-accordion";
+import * as s from "@radix-ui/react-accordion";
 import { forwardRef as y, useMemo as R, Children as w, isValidElement as T } from "react";
 import d from "./fondue-components33.js";
 const g = ({
@@ -10,9 +10,10 @@ const g = ({
   defaultValue: t,
   disabled: a,
   value: l,
-  padding: i = "large"
+  padding: c = "large",
+  onValueChange: i
 }) => /* @__PURE__ */ n(
-  c.Root,
+  s.Root,
   {
     className: d.root,
     "data-test-id": o,
@@ -21,7 +22,8 @@ const g = ({
     type: "multiple",
     value: l,
     "data-border": e,
-    "data-accordion-padding": i,
+    "data-accordion-padding": c,
+    onValueChange: i,
     children: r
   }
 );
@@ -32,7 +34,7 @@ const u = ({
   disabled: r,
   value: t
 }) => /* @__PURE__ */ n(
-  c.Item,
+  s.Item,
   {
     className: d.accordionItem,
     value: t,
@@ -56,13 +58,13 @@ const p = ({
 }) => {
   const { slots: a, triggerContent: l } = R(
     () => w.toArray(t).reduce(
-      (i, s) => (T(s) && s.type === N ? i.slots.push(s) : i.triggerContent.push(s), i),
+      (c, i) => (T(i) && i.type === N ? c.slots.push(i) : c.triggerContent.push(i), c),
       { slots: [], triggerContent: [] }
     ),
     [t]
   );
-  return /* @__PURE__ */ m(c.Header, { asChild: e, className: d.accordionHeader, onClick: r, children: [
-    /* @__PURE__ */ m(c.Trigger, { className: d.accordionTrigger, "data-test-id": o, children: [
+  return /* @__PURE__ */ m(s.Header, { asChild: e, className: d.accordionHeader, onClick: r, children: [
+    /* @__PURE__ */ m(s.Trigger, { className: d.accordionTrigger, "data-test-id": o, children: [
       /* @__PURE__ */ n("div", { className: d.accordionTriggerContent, children: l }),
       /* @__PURE__ */ n(C, { className: d.accordionCaret, size: "16" })
     ] }),
@@ -75,9 +77,9 @@ const f = ({
   children: e,
   divider: r = !1,
   onClick: t,
-  padding: a = "large"
+  padding: a
 }) => /* @__PURE__ */ n(
-  c.Content,
+  s.Content,
   {
     className: d.accordionContent,
     onClick: t,

package/dist/fondue-components3.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components3.js","sources":["../src/components/Accordion/Accordion.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown } from '@frontify/fondue-icons';\nimport * as RadixAccordion from '@radix-ui/react-accordion';\nimport {\n    Children,\n    forwardRef,\n    isValidElement,\n    useMemo,\n    type ForwardedRef,\n    type MouseEventHandler,\n    type ReactNode,\n} from 'react';\n\nimport styles from './styles/accordion.module.scss';\n\ntype AccordionPadding = 'none' | 'small' | 'medium' | 'large';\n\nexport type AccordionRootProps = {\n    'data-test-id'?: string;\n    /**\n     * Show or hide the top and bottom border\n     * @default true\n     */\n    border?: boolean;\n    /**\n     * Children of the Accordion component. This should contain the `Accordion.Item` components\n     */\n    children?: ReactNode;\n    /**\n     * The value of the items whose contents are expanded when the accordion is initially rendered.\n     * Use `defaultValue` if you do not need to control the state of an accordion.\n     */\n    defaultValue?: string[];\n    /**\n     * Whether or not an accordion is disabled from user interaction.\n     */\n    disabled?: boolean;\n    /**\n     * The controlled stateful value of the accordion items whose contents are expanded.\n     */\n    value?: string[];\n    /**\n     * Controls if we show paddings around the header.\n     * @default 'large'\n     */\n    padding?: AccordionPadding;\n};\n\nexport const AccordionRoot = ({\n    'data-test-id': dataTestId = 'fondue-accordion',\n    border = true,\n    children,\n    defaultValue,\n    disabled,\n    value,\n    padding = 'large',\n}: AccordionRootProps) => {\n    return (\n        <RadixAccordion.Root\n            className={styles.root}\n            data-test-id={dataTestId}\n            defaultValue={defaultValue}\n            disabled={disabled}\n            type=\"multiple\"\n            value={value}\n            data-border={border}\n            data-accordion-padding={padding}\n        >\n            {children}\n        </RadixAccordion.Root>\n    );\n};\nAccordionRoot.displayName = 'Accordion.Root';\n\nexport type AccordionItemProps = {\n    'data-test-id'?: string;\n    /**\n     * Children of the Accordion item. This should contain the `Accordion.Header` and `Accordion.Content` components\n     */\n    children?: ReactNode;\n    /**\n     * Whether or not an accordion item is disabled from user interaction.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * A string value for the accordion item. All items within an accordion should use a unique value.\n     */\n    value: string;\n};\n\nexport const AccordionItem = ({\n    'data-test-id': dataTestId = 'fondue-accordion-item',\n    children,\n    disabled,\n    value,\n}: AccordionItemProps) => {\n    return (\n        <RadixAccordion.Item\n            className={styles.accordionItem}\n            value={value}\n            onPointerDown={(event) => {\n                event.currentTarget.dataset.showFocusRing = 'false';\n            }}\n            onBlur={(event) => {\n                event.currentTarget.dataset.showFocusRing = 'true';\n            }}\n            disabled={disabled}\n            data-test-id={dataTestId}\n        >\n            {children}\n        </RadixAccordion.Item>\n    );\n};\nAccordionItem.displayName = 'Accordion.Item';\n\nexport type AccordionHeaderProps = {\n    'data-test-id'?: string;\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default false\n     */\n    asChild?: boolean;\n    /**\n     * Click callback for this item.\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Children of the Accordion header.\n     */\n    children?: ReactNode;\n};\n\nexport const AccordionHeader = ({\n    'data-test-id': dataTestId = 'fondue-accordion-header',\n    asChild,\n    onClick,\n    children,\n}: AccordionHeaderProps) => {\n    const { slots, triggerContent } = useMemo(\n        () =>\n            Children.toArray(children).reduce<{ slots: ReactNode[]; triggerContent: ReactNode[] }>(\n                (acc, child) => {\n                    if (isValidElement<AccordionSlotProps>(child) && child.type === ForwardedRefAccordionSlot) {\n                        acc.slots.push(child);\n                    } else {\n                        acc.triggerContent.push(child);\n                    }\n                    return acc;\n                },\n                { slots: [], triggerContent: [] },\n            ),\n        [children],\n    );\n\n    return (\n        <RadixAccordion.Header asChild={asChild} className={styles.accordionHeader} onClick={onClick}>\n            <RadixAccordion.Trigger className={styles.accordionTrigger} data-test-id={dataTestId}>\n                <div className={styles.accordionTriggerContent}>{triggerContent}</div>\n                <IconCaretDown className={styles.accordionCaret} size=\"16\" />\n            </RadixAccordion.Trigger>\n            {slots}\n        </RadixAccordion.Header>\n    );\n};\nAccordionHeader.displayName = 'Accordion.Header';\n\ntype AccordionContentProps = {\n    'data-test-id'?: string;\n    /**\n     * Children of the Accordion content. This contains the main content.\n     */\n    children?: ReactNode;\n    /**\n     * Adds a divider line between the header and the content.\n     */\n    divider?: boolean;\n    /**\n     * Click callback for the content.\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Controls if we show paddings around the content.\n     * @default 'large'\n     */\n    padding?: AccordionPadding;\n};\n\nexport const AccordionContent = ({\n    'data-test-id': dataTestId = 'collapsible-wrap',\n    children,\n    divider = false,\n    onClick,\n    padding = 'large',\n}: AccordionContentProps) => {\n    return (\n        <RadixAccordion.Content\n            className={styles.accordionContent}\n            onClick={onClick}\n            data-test-id={dataTestId}\n            data-item-padding={padding}\n            data-item-divider={divider}\n        >\n            <div className={styles.accordionContentText} data-test-id={`inner-${dataTestId}`}>\n                {children}\n            </div>\n        </RadixAccordion.Content>\n    );\n};\nAccordionContent.displayName = 'Accordion.Content';\n\nexport type AccordionSlotProps = {\n    children: ReactNode;\n    name?: 'action';\n    'data-test-id'?: string;\n};\n\nexport const AccordionSlot = (\n    { children, name, 'data-test-id': dataTestId = 'fondue-accordion-slot' }: AccordionSlotProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-name={name} className={styles.accordionSlot} data-test-id={dataTestId} ref={ref}>\n            {children}\n        </div>\n    );\n};\nAccordionSlot.displayName = 'Accordion.Slot';\n\nconst ForwardedRefAccordionSlot = forwardRef<HTMLDivElement, AccordionSlotProps>(AccordionSlot);\n\n/**\n * @deprecated Use `Accordion.Header` instead.\n */\nconst DeprecatedAccordionTrigger = ({ children }: { children: ReactNode }) => children;\n\nexport const Accordion = {\n    Root: AccordionRoot,\n    Item: AccordionItem,\n    Header: AccordionHeader,\n    /**\n     * @deprecated Use `Accordion.Header` instead.\n     */\n    Trigger: DeprecatedAccordionTrigger,\n    Content: AccordionContent,\n    Slot: ForwardedRefAccordionSlot,\n};\n"],"names":["AccordionRoot","dataTestId","border","children","defaultValue","disabled","value","padding","jsx","RadixAccordion","styles","AccordionItem","event","AccordionHeader","asChild","onClick","slots","triggerContent","useMemo","Children","acc","child","isValidElement","ForwardedRefAccordionSlot","jsxs","IconCaretDown","AccordionContent","divider","AccordionSlot","name","ref","forwardRef","DeprecatedAccordionTrigger","Accordion"],"mappings":"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"}
+{"version":3,"file":"fondue-components3.js","sources":["../src/components/Accordion/Accordion.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown } from '@frontify/fondue-icons';\nimport * as RadixAccordion from '@radix-ui/react-accordion';\nimport {\n    Children,\n    forwardRef,\n    isValidElement,\n    useMemo,\n    type ForwardedRef,\n    type MouseEventHandler,\n    type ReactNode,\n} from 'react';\n\nimport styles from './styles/accordion.module.scss';\n\ntype AccordionPadding = 'none' | 'small' | 'medium' | 'large';\n\nexport type AccordionRootProps = {\n    'data-test-id'?: string;\n    /**\n     * Show or hide the top and bottom border\n     * @default true\n     */\n    border?: boolean;\n    /**\n     * Children of the Accordion component. This should contain the `Accordion.Item` components\n     */\n    children?: ReactNode;\n    /**\n     * The value of the items whose contents are expanded when the accordion is initially rendered.\n     * Use `defaultValue` if you do not need to control the state of an accordion.\n     */\n    defaultValue?: string[];\n    /**\n     * Whether or not an accordion is disabled from user interaction.\n     */\n    disabled?: boolean;\n    /**\n     * The controlled stateful value of the accordion items whose contents are expanded.\n     */\n    value?: string[];\n    /**\n     * Controls if we show paddings around the header.\n     * @default 'large'\n     */\n    padding?: AccordionPadding;\n    /**\n     * Callback function that is called when the value of the accordion changes.\n     */\n    onValueChange?: (value: string[]) => void;\n};\n\nexport const AccordionRoot = ({\n    'data-test-id': dataTestId = 'fondue-accordion',\n    border = true,\n    children,\n    defaultValue,\n    disabled,\n    value,\n    padding = 'large',\n    onValueChange,\n}: AccordionRootProps) => {\n    return (\n        <RadixAccordion.Root\n            className={styles.root}\n            data-test-id={dataTestId}\n            defaultValue={defaultValue}\n            disabled={disabled}\n            type=\"multiple\"\n            value={value}\n            data-border={border}\n            data-accordion-padding={padding}\n            onValueChange={onValueChange}\n        >\n            {children}\n        </RadixAccordion.Root>\n    );\n};\nAccordionRoot.displayName = 'Accordion.Root';\n\nexport type AccordionItemProps = {\n    'data-test-id'?: string;\n    /**\n     * Children of the Accordion item. This should contain the `Accordion.Header` and `Accordion.Content` components\n     */\n    children?: ReactNode;\n    /**\n     * Whether or not an accordion item is disabled from user interaction.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * A string value for the accordion item. All items within an accordion should use a unique value.\n     */\n    value: string;\n};\n\nexport const AccordionItem = ({\n    'data-test-id': dataTestId = 'fondue-accordion-item',\n    children,\n    disabled,\n    value,\n}: AccordionItemProps) => {\n    return (\n        <RadixAccordion.Item\n            className={styles.accordionItem}\n            value={value}\n            onPointerDown={(event) => {\n                event.currentTarget.dataset.showFocusRing = 'false';\n            }}\n            onBlur={(event) => {\n                event.currentTarget.dataset.showFocusRing = 'true';\n            }}\n            disabled={disabled}\n            data-test-id={dataTestId}\n        >\n            {children}\n        </RadixAccordion.Item>\n    );\n};\nAccordionItem.displayName = 'Accordion.Item';\n\nexport type AccordionHeaderProps = {\n    'data-test-id'?: string;\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default false\n     */\n    asChild?: boolean;\n    /**\n     * Click callback for this item.\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Children of the Accordion header.\n     */\n    children?: ReactNode;\n};\n\nexport const AccordionHeader = ({\n    'data-test-id': dataTestId = 'fondue-accordion-header',\n    asChild,\n    onClick,\n    children,\n}: AccordionHeaderProps) => {\n    const { slots, triggerContent } = useMemo(\n        () =>\n            Children.toArray(children).reduce<{ slots: ReactNode[]; triggerContent: ReactNode[] }>(\n                (acc, child) => {\n                    if (isValidElement<AccordionSlotProps>(child) && child.type === ForwardedRefAccordionSlot) {\n                        acc.slots.push(child);\n                    } else {\n                        acc.triggerContent.push(child);\n                    }\n                    return acc;\n                },\n                { slots: [], triggerContent: [] },\n            ),\n        [children],\n    );\n\n    return (\n        <RadixAccordion.Header asChild={asChild} className={styles.accordionHeader} onClick={onClick}>\n            <RadixAccordion.Trigger className={styles.accordionTrigger} data-test-id={dataTestId}>\n                <div className={styles.accordionTriggerContent}>{triggerContent}</div>\n                <IconCaretDown className={styles.accordionCaret} size=\"16\" />\n            </RadixAccordion.Trigger>\n            {slots}\n        </RadixAccordion.Header>\n    );\n};\nAccordionHeader.displayName = 'Accordion.Header';\n\ntype AccordionContentProps = {\n    'data-test-id'?: string;\n    /**\n     * Children of the Accordion content. This contains the main content.\n     */\n    children?: ReactNode;\n    /**\n     * Adds a divider line between the header and the content.\n     */\n    divider?: boolean;\n    /**\n     * Click callback for the content.\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Controls if we show paddings around the content.\n     * @default 'large'\n     */\n    padding?: AccordionPadding;\n};\n\nexport const AccordionContent = ({\n    'data-test-id': dataTestId = 'collapsible-wrap',\n    children,\n    divider = false,\n    onClick,\n    padding,\n}: AccordionContentProps) => {\n    return (\n        <RadixAccordion.Content\n            className={styles.accordionContent}\n            onClick={onClick}\n            data-test-id={dataTestId}\n            data-item-padding={padding}\n            data-item-divider={divider}\n        >\n            <div className={styles.accordionContentText} data-test-id={`inner-${dataTestId}`}>\n                {children}\n            </div>\n        </RadixAccordion.Content>\n    );\n};\nAccordionContent.displayName = 'Accordion.Content';\n\nexport type AccordionSlotProps = {\n    children: ReactNode;\n    name?: 'action';\n    'data-test-id'?: string;\n};\n\nexport const AccordionSlot = (\n    { children, name, 'data-test-id': dataTestId = 'fondue-accordion-slot' }: AccordionSlotProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-name={name} className={styles.accordionSlot} data-test-id={dataTestId} ref={ref}>\n            {children}\n        </div>\n    );\n};\nAccordionSlot.displayName = 'Accordion.Slot';\n\nconst ForwardedRefAccordionSlot = forwardRef<HTMLDivElement, AccordionSlotProps>(AccordionSlot);\n\n/**\n * @deprecated Use `Accordion.Header` instead.\n */\nconst DeprecatedAccordionTrigger = ({ children }: { children: ReactNode }) => children;\n\nexport const Accordion = {\n    Root: AccordionRoot,\n    Item: AccordionItem,\n    Header: AccordionHeader,\n    /**\n     * @deprecated Use `Accordion.Header` instead.\n     */\n    Trigger: DeprecatedAccordionTrigger,\n    Content: AccordionContent,\n    Slot: ForwardedRefAccordionSlot,\n};\n"],"names":["AccordionRoot","dataTestId","border","children","defaultValue","disabled","value","padding","onValueChange","jsx","RadixAccordion","styles","AccordionItem","event","AccordionHeader","asChild","onClick","slots","triggerContent","useMemo","Children","acc","child","isValidElement","ForwardedRefAccordionSlot","jsxs","IconCaretDown","AccordionContent","divider","AccordionSlot","name","ref","forwardRef","DeprecatedAccordionTrigger","Accordion"],"mappings":"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"}

package/dist/fondue-components34.js

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
-import s from "./fondue-components86.js";
-import { colorToCss as e } from "./fondue-components87.js";
+import s from "./fondue-components85.js";
+import { colorToCss as e } from "./fondue-components86.js";
 const a = ["default", "positive", "highlight", "warning", "negative"], i = (t) => typeof t == "string" && a.includes(t), p = ({ status: t }) => {
   const o = i(t) ? { "data-status": t } : { style: { backgroundColor: typeof t == "string" ? t : e(t) || "transparent" } };
   return /* @__PURE__ */ r("div", { "data-test-id": "badge-status", className: s.root, ...o });

package/dist/fondue-components35.js

@@ -1,4 +1,4 @@
-const s = "_root_qxbmr_3", o = "_dismiss_qxbmr_161", t = {
+const s = "_root_frcwu_3", o = "_dismiss_frcwu_154", t = {
   root: s,
   dismiss: o
 };

package/dist/fondue-components37.js

@@ -1,4 +1,4 @@
-const o = "_root_5sic9_5", t = {
+const o = "_root_howjn_6", t = {
   root: o
 };
 export {

package/dist/fondue-components39.js

@@ -1,4 +1,4 @@
-import { FOCUS_OUTLINE as t } from "./fondue-components85.js";
+import { FOCUS_OUTLINE as t } from "./fondue-components87.js";
 import { sv as e } from "./fondue-components38.js";
 const o = e({
   base: `tw-group tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-body tw-font-medium tw-box-border tw-whitespace-nowrap tw-transition-colors ${t}`,

package/dist/fondue-components42.js

@@ -1,4 +1,4 @@
-import { FOCUS_OUTLINE as t } from "./fondue-components85.js";
+import { FOCUS_OUTLINE as t } from "./fondue-components87.js";
 import { sv as e } from "./fondue-components38.js";
 const s = e({
   base: `tw-peer tw-relative tw-inline-flex tw-bg-base tw-text-white tw-shrink-0 tw-rounded tw-border tw-border-line-x-strong group-hover:tw-border-line-xx-strong hover:tw-border-line-xx-strong tw-transition-colors data-[state="checked"]:tw-border-transparent data-[state="indeterminate"]:tw-border-transparent disabled:tw-border-line-strong disabled:tw-bg-base disabled:tw-cursor-not-allowed data-[state="checked"]:disabled:tw-bg-box-disabled-strong data-[readonly="true"]:tw-pointer-events-none ${t}`,

package/dist/fondue-components44.js

@@ -1,7 +1,7 @@
 import { jsxs as s, jsx as e, Fragment as f } from "react/jsx-runtime";
 import { IconDroplet as h, IconCross as I, IconCaretDown as v } from "@frontify/fondue-icons";
 import { forwardRef as b } from "react";
-import t from "./fondue-components88.js";
+import t from "./fondue-components89.js";
 import { getColorWithName as k, colorToCss as y } from "./fondue-components47.js";
 const c = ({
   id: l,

package/dist/fondue-components55.js

@@ -1,4 +1,4 @@
-const o = "_root_1l1i0_5", t = {
+const o = "_root_1sw7a_6", t = {
   root: o
 };
 export {

package/dist/fondue-components57.js

@@ -1,4 +1,4 @@
-const o = "_root_1hsz1_5", t = {
+const o = "_root_1edjk_6", t = {
   root: o
 };
 export {

package/dist/fondue-components59.js

@@ -1,11 +1,13 @@
-const t = "_root_n7u25_3", e = "_hiddenText_n7u25_58", o = "_visibleText_n7u25_64", n = {
+const t = "_root_1n5v6_3", e = "_contentArea_1n5v6_66", n = "_hiddenText_1n5v6_71", o = "_visibleText_1n5v6_77", _ = {
   root: t,
-  hiddenText: e,
+  contentArea: e,
+  hiddenText: n,
   visibleText: o
 };
 export {
-  n as default,
-  e as hiddenText,
+  e as contentArea,
+  _ as default,
+  n as hiddenText,
   t as root,
   o as visibleText
 };

package/dist/fondue-components59.js.map

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

package/dist/fondue-components63.js

@@ -1,4 +1,4 @@
-const o = "_root_5sic9_5", t = {
+const o = "_root_howjn_6", t = {
   root: o
 };
 export {

package/dist/fondue-components68.js

@@ -4,7 +4,7 @@ import { Slot as V } from "@radix-ui/react-slot";
 import { isValidElement as g } from "react";
 import { useFondueTheme as A, ThemeProvider as D } from "./fondue-components31.js";
 import s from "./fondue-components70.js";
-import { recursiveMap as M, getSelectOptionValue as T } from "./fondue-components89.js";
+import { recursiveMap as M, getSelectOptionValue as T } from "./fondue-components88.js";
 const E = ({
   highlightedIndex: p,
   getMenuProps: c,

package/dist/fondue-components71.js

@@ -3,7 +3,7 @@ import { IconCross as w } from "@frontify/fondue-icons";
 import { useState as S, useMemo as b, Children as v, isValidElement as C, cloneElement as B, useCallback as I, useEffect as x } from "react";
 import { ForwardedRefSelectItem as L } from "./fondue-components67.js";
 import { ForwardedRefSelectSlot as y } from "./fondue-components69.js";
-import { getSelectOptionValue as F } from "./fondue-components89.js";
+import { getSelectOptionValue as F } from "./fondue-components88.js";
 const O = (n, s) => {
   const [e, r] = S(!1), [m, i] = S(null), [l, f] = S({
     menuComponents: [],

package/dist/fondue-components77.js

@@ -1,4 +1,4 @@
-const t = "_root_15gz7_3", n = "_mainContent_15gz7_16", o = "_actionButton_15gz7_29", e = "_secondaryContent_15gz7_116", _ = {
+const t = "_root_trvxx_3", n = "_mainContent_trvxx_16", o = "_actionButton_trvxx_29", e = "_secondaryContent_trvxx_115", _ = {
   root: t,
   mainContent: n,
   actionButton: o,

package/dist/fondue-components79.js

@@ -1,18 +1,18 @@
-const t = "_triggerListWrapper_chl5v_5", r = "_trigger_chl5v_5", c = "_activeIndicator_chl5v_53", e = "_triggerList_chl5v_5", i = "_root_chl5v_143", o = "_content_chl5v_166", g = {
-  triggerListWrapper: t,
-  trigger: r,
-  activeIndicator: c,
-  triggerList: e,
-  root: i,
-  content: o
+const t = "_root_pmkrp_5", r = "_triggerListWrapper_pmkrp_13", e = "_trigger_pmkrp_13", i = "_activeIndicator_pmkrp_61", o = "_triggerList_pmkrp_13", p = "_content_pmkrp_149", g = {
+  root: t,
+  triggerListWrapper: r,
+  trigger: e,
+  activeIndicator: i,
+  triggerList: o,
+  content: p
 };
 export {
-  c as activeIndicator,
-  o as content,
+  i as activeIndicator,
+  p as content,
   g as default,
-  i as root,
-  r as trigger,
-  e as triggerList,
-  t as triggerListWrapper
+  t as root,
+  e as trigger,
+  o as triggerList,
+  r as triggerListWrapper
 };
 //# sourceMappingURL=fondue-components79.js.map

package/dist/fondue-components85.js

@@ -1,5 +1,8 @@
-const t = "focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue";
+const o = "_root_e5fqt_2", t = {
+  root: o
+};
 export {
-  t as FOCUS_OUTLINE
+  t as default,
+  o as root
 };
 //# sourceMappingURL=fondue-components85.js.map

package/dist/fondue-components85.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components85.js","sources":["../src/utilities/focusStyle.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nexport const FOCUS_OUTLINE =\n    'focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue'; // second declaration of tw-outline-blue is to assure that in firefox the outline isn't overriden by a global definition of :-moz-focusring which is coming from tailwinds normalization styling\n"],"names":["FOCUS_OUTLINE"],"mappings":"AAEO,MAAMA,IACT;"}
+{"version":3,"file":"fondue-components85.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/fondue-components86.js

@@ -1,8 +1,8 @@
-const o = "_root_lwb4s_1", t = {
-  root: o
+const r = (e) => {
+  if (e)
+    return `rgba(${e.red}, ${e.green}, ${e.blue}, ${e.alpha ?? 1})`;
 };
 export {
-  t as default,
-  o as root
+  r as colorToCss
 };
 //# sourceMappingURL=fondue-components86.js.map

package/dist/fondue-components86.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components86.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"fondue-components86.js","sources":["../src/components/Badge/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type RgbaColor } from './types';\n\nexport const DEFAULT_COLOR = { red: 255, green: 255, blue: 255, alpha: 1, name: '' };\n\n/**\n * Converts a color object to a CSS color string.\n * @param {RgbaColor} color - The color object to be converted.\n * @returns {string}\n * @example\n * colorToCss({ red: 255, green: 255, blue: 255, alpha: 1 }); // 'rgba(255, 255, 255, 1)'\n * @example\n * colorToCss({ red: 255, green: 87, blue: 51, alpha: 1 }); // 'rgba(255, 87, 51, 1)'\n * @example\n * colorToCss({ red: 0, green: 0, blue: 0, alpha: 0 }); // 'rgba(0, 0, 0, 0)'\n */\nexport const colorToCss = (color?: RgbaColor) => {\n    if (!color) {\n        return undefined;\n    }\n    return `rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha ?? 1})`;\n};\n"],"names":["colorToCss","color"],"mappings":"AAiBO,MAAMA,IAAa,CAACC,MAAsB;AAC7C,MAAKA;AAGL,WAAO,QAAQA,EAAM,GAAG,KAAKA,EAAM,KAAK,KAAKA,EAAM,IAAI,KAAKA,EAAM,SAAS,CAAC;AAChF;"}

package/dist/fondue-components87.js

@@ -1,8 +1,5 @@
-const r = (e) => {
-  if (e)
-    return `rgba(${e.red}, ${e.green}, ${e.blue}, ${e.alpha ?? 1})`;
-};
+const t = "focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue";
 export {
-  r as colorToCss
+  t as FOCUS_OUTLINE
 };
 //# sourceMappingURL=fondue-components87.js.map

package/dist/fondue-components87.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components87.js","sources":["../src/components/Badge/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type RgbaColor } from './types';\n\nexport const DEFAULT_COLOR = { red: 255, green: 255, blue: 255, alpha: 1, name: '' };\n\n/**\n * Converts a color object to a CSS color string.\n * @param {RgbaColor} color - The color object to be converted.\n * @returns {string}\n * @example\n * colorToCss({ red: 255, green: 255, blue: 255, alpha: 1 }); // 'rgba(255, 255, 255, 1)'\n * @example\n * colorToCss({ red: 255, green: 87, blue: 51, alpha: 1 }); // 'rgba(255, 87, 51, 1)'\n * @example\n * colorToCss({ red: 0, green: 0, blue: 0, alpha: 0 }); // 'rgba(0, 0, 0, 0)'\n */\nexport const colorToCss = (color?: RgbaColor) => {\n    if (!color) {\n        return undefined;\n    }\n    return `rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha ?? 1})`;\n};\n"],"names":["colorToCss","color"],"mappings":"AAiBO,MAAMA,IAAa,CAACC,MAAsB;AAC7C,MAAKA;AAGL,WAAO,QAAQA,EAAM,GAAG,KAAKA,EAAM,KAAK,KAAKA,EAAM,IAAI,KAAKA,EAAM,SAAS,CAAC;AAChF;"}
+{"version":3,"file":"fondue-components87.js","sources":["../src/utilities/focusStyle.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nexport const FOCUS_OUTLINE =\n    'focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue'; // second declaration of tw-outline-blue is to assure that in firefox the outline isn't overriden by a global definition of :-moz-focusring which is coming from tailwinds normalization styling\n"],"names":["FOCUS_OUTLINE"],"mappings":"AAEO,MAAMA,IACT;"}