@frontify/fondue-components 19.0.0 → 19.2.0

package/dist/fondue-components10.js

@@ -1,39 +1,45 @@
-import { jsx as r } from "react/jsx-runtime";
-import * as n from "@radix-ui/react-separator";
-import { forwardRef as p } from "react";
-import { cn as f } from "./fondue-components36.js";
-import { dividerStyles as l } from "./fondue-components49.js";
-const c = p(
+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 v from "./fondue-components49.js";
+import { dividerStyles as c } from "./fondue-components50.js";
+const h = f(
   ({
-    "data-test-id": o = "fondue-divider",
-    direction: t = "horizontal",
-    className: i,
-    variant: e,
-    as: d = "div",
-    ...a
-  }, m) => {
-    const s = d;
-    return /* @__PURE__ */ r(
-      n.Root,
+    "data-test-id": i = "fondue-divider",
+    direction: r = "horizontal",
+    className: a,
+    variant: o,
+    as: e = "div",
+    decorative: d,
+    ...m
+  }, s) => {
+    const n = e;
+    return /* @__PURE__ */ t(
+      p.Root,
       {
-        ref: m,
-        className: f(
-          l({
-            direction: t,
-            variant: e,
-            ...a
+        ref: s,
+        className: l(
+          c({
+            direction: r,
+            variant: o,
+            ...m
           }),
-          i
+          v.root,
+          a
         ),
-        "data-test-id": o,
+        "data-variant": o,
+        "data-test-id": i,
+        decorative: d,
+        "data-orientation": r,
         asChild: !0,
-        children: /* @__PURE__ */ r(s, {})
+        children: /* @__PURE__ */ t(n, {})
       }
     );
   }
 );
-c.displayName = "Divider";
+h.displayName = "Divider";
 export {
-  c 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    '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            ...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                asChild\n            >\n                <Component />\n            </Separator.Root>\n        );\n    },\n);\n\nDivider.displayName = 'Divider';\n"],"names":["Divider","forwardRef","dataTestId","direction","className","variant","as","props","ref","Component","jsx","Separator","cn","dividerStyles"],"mappings":";;;;;AA4CO,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,GAAGC;AAAA,KAEPC,MACe;AACf,UAAMC,IAAYH;AAGd,WAAA,gBAAAI;AAAA,MAACC,EAAU;AAAA,MAAV;AAAA,QACG,KAAAH;AAAA,QACA,WAAWI;AAAA,UACPC,EAAc;AAAA,YACV,WAAAV;AAAA,YACA,SAAAE;AAAA,YACA,GAAGE;AAAA,UAAA,CACN;AAAA,UACDH;AAAA,QACJ;AAAA,QACA,gBAAcF;AAAA,QACd,SAAO;AAAA,QAEP,4BAACO,GAAU,CAAA,CAAA;AAAA,MAAA;AAAA,IACf;AAAA,EAAA;AAGZ;AAEAT,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,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,UACDO,EAAa;AAAA,UACbX;AAAA,QACJ;AAAA,QACA,gBAAcC;AAAA,QACd,gBAAcH;AAAA,QACd,YAAAK;AAAA,QACA,oBAAkBJ;AAAA,QAClB,SAAO;AAAA,QAEP,4BAACO,GAAU,CAAA,CAAA;AAAA,MAAA;AAAA,IACf;AAAA,EAAA;AAGZ;AAEAV,EAAQ,cAAc;"}

package/dist/fondue-components11.js

@@ -3,8 +3,8 @@ 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 { useProcessedChildren as h } from "./fondue-components51.js";
+import s from "./fondue-components52.js";
 const N = ({
   children: o,
   open: t,

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 x from "./fondue-components53.js";
 const u = n(
   ({
     as: a = "div",

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 { 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-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 s from "./fondue-components54.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":"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"}

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 u from "./fondue-components55.js";
 const c = y(
   ({
     as: a = "div",

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 a from "./fondue-components56.js";
 const $ = g(
   ({
     as: e = "span",

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-components57.js";
 const p = m(
   ({
     value: a,

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-components58.js";
 const s = i(
   ({
     variant: t = "progress",

package/dist/fondue-components19.js

@@ -1,7 +1,7 @@
 import { jsxs as b, jsx as l } from "react/jsx-runtime";
 import * as a from "@radix-ui/react-scroll-area";
 import { forwardRef as h } from "react";
-import o from "./fondue-components58.js";
+import o from "./fondue-components59.js";
 const p = ({
   type: t = "hover",
   maxHeight: e = "100%",

package/dist/fondue-components20.js

@@ -1,7 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
 import { forwardRef as m } from "react";
 import { propsToCssVariables as c } from "./fondue-components34.js";
-import f from "./fondue-components59.js";
+import f from "./fondue-components60.js";
 const y = m(
   ({
     "data-test-id": a = "fondue-section",

package/dist/fondue-components21.js

@@ -1,8 +1,8 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
 import * as n from "@radix-ui/react-toggle-group";
 import { forwardRef as i } from "react";
-import { useControllableState as N } from "./fondue-components60.js";
-import e from "./fondue-components61.js";
+import { useControllableState as N } from "./fondue-components61.js";
+import e from "./fondue-components62.js";
 const d = ({
   children: a,
   value: o,

package/dist/fondue-components22.js

@@ -4,12 +4,12 @@ import * as g from "@radix-ui/react-popover";
 import { Slot as q } from "@radix-ui/react-slot";
 import { useSelect as J } from "downshift";
 import { forwardRef as K, useRef as L, useState as Q } from "react";
-import { ForwardedRefCombobox as U } from "./fondue-components62.js";
-import { ForwardedRefSelectItem as W, ForwardedRefSelectItemGroup as X } from "./fondue-components63.js";
-import { SelectMenu as Y } from "./fondue-components64.js";
-import { ForwardedRefSelectSlot as Z } from "./fondue-components65.js";
-import o from "./fondue-components66.js";
-import { useSelectData as _ } from "./fondue-components67.js";
+import { ForwardedRefCombobox as U } from "./fondue-components63.js";
+import { ForwardedRefSelectItem as W, ForwardedRefSelectItemGroup as X } from "./fondue-components64.js";
+import { SelectMenu as Y } from "./fondue-components65.js";
+import { ForwardedRefSelectSlot as Z } from "./fondue-components66.js";
+import o from "./fondue-components67.js";
+import { useSelectData as _ } from "./fondue-components68.js";
 const S = ({
   children: h,
   onSelect: s,

package/dist/fondue-components23.js

@@ -1,7 +1,7 @@
 import { jsxs as f, jsx as s } from "react/jsx-runtime";
 import * as e from "@radix-ui/react-slider";
 import { forwardRef as h, useRef as R } from "react";
-import r from "./fondue-components68.js";
+import r from "./fondue-components69.js";
 const g = ({
   value: a,
   defaultValue: n = [0],

package/dist/fondue-components24.js

@@ -2,7 +2,7 @@ import { jsx as e } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-switch";
 import { forwardRef as l } from "react";
 import { cn as f } from "./fondue-components36.js";
-import t from "./fondue-components69.js";
+import t from "./fondue-components70.js";
 const n = ({
   value: a,
   defaultValue: i,

package/dist/fondue-components25.js

@@ -1,155 +1,155 @@
 import { jsx as t, jsxs as p } from "react/jsx-runtime";
-import { IconArrowUp as A, IconArrowDown as K, IconArrowBidirectional as h } from "@frontify/fondue-icons";
-import { forwardRef as b, useRef as w, useMemo as j } from "react";
+import { IconArrowUp as A, IconArrowDown as K, IconArrowBidirectional as E } from "@frontify/fondue-icons";
+import { forwardRef as b, useRef as w, useMemo as h } from "react";
 import { useSyncRefs as g } from "./fondue-components46.js";
-import { useTextTruncation as N } from "./fondue-components70.js";
-import { Box as L } from "./fondue-components5.js";
-import { LoadingCircle as S } from "./fondue-components18.js";
-import i from "./fondue-components71.js";
-import { handleKeyDown as $ } from "./fondue-components72.js";
+import { useTextTruncation as N } from "./fondue-components71.js";
+import { Box as j } from "./fondue-components5.js";
+import { LoadingCircle as L } from "./fondue-components18.js";
+import o from "./fondue-components72.js";
+import { handleKeyDown as S, isEventFromInteractiveElement as $ } from "./fondue-components73.js";
 const R = b(
-  ({ layout: a = "auto", fontSize: e = "medium", sticky: d, children: r, ...o }, l) => /* @__PURE__ */ t("div", { onKeyDown: $, role: "grid", tabIndex: -1, children: /* @__PURE__ */ t(
+  ({ layout: a = "auto", fontSize: e = "medium", sticky: d, children: s, ...n }, l) => /* @__PURE__ */ t("div", { onKeyDown: S, role: "grid", tabIndex: -1, children: /* @__PURE__ */ t(
     "table",
     {
       ref: l,
-      className: i.table,
+      className: o.table,
       "data-layout": a,
       "data-font-size": e,
       "data-sticky": d,
-      ...o,
-      children: r
+      ...n,
+      children: s
     }
   ) })
 );
 R.displayName = "Table.Root";
-const C = b(({ children: a }, e) => /* @__PURE__ */ t("caption", { ref: e, className: i.caption, children: a }));
-C.displayName = "Table.Caption";
-const x = b(
-  ({ children: a, "aria-label": e, "aria-busy": d }, r) => /* @__PURE__ */ t("thead", { ref: r, className: i.header, "aria-label": e, "aria-busy": d, children: a })
+const v = b(({ children: a }, e) => /* @__PURE__ */ t("caption", { ref: e, className: o.caption, children: a }));
+v.displayName = "Table.Caption";
+const C = b(
+  ({ children: a, "aria-label": e, "aria-busy": d }, s) => /* @__PURE__ */ t("thead", { ref: s, className: o.header, "aria-label": e, "aria-busy": d, children: a })
 );
-x.displayName = "Table.Header";
-const v = b(
+C.displayName = "Table.Header";
+const x = b(
   ({
     noShrink: a = !1,
     truncate: e = !1,
     align: d = "left",
-    scope: r = "col",
-    sortTranslations: o,
+    scope: s = "col",
+    sortTranslations: n,
     sortDirection: l,
     colSpan: c,
     width: m,
     state: f = "idle",
     loadingStateAriaLabel: u,
-    onSortChange: s,
-    children: n
+    onSortChange: i,
+    children: r
   }, k) => {
     const y = w(null);
     g(y, k), N(y);
-    const z = j(() => typeof n == "string" ? l === "ascending" ? (o == null ? void 0 : o.sortDescending) ?? `Sort by ${n} descending` : (o == null ? void 0 : o.sortAscending) ?? `Sort by ${n} ascending` : l === "ascending" ? "Sort descending" : "Sort ascending", [n, l, o]), B = () => {
-      if (!s)
+    const z = h(() => typeof r == "string" ? l === "ascending" ? (n == null ? void 0 : n.sortDescending) ?? `Sort by ${r} descending` : (n == null ? void 0 : n.sortAscending) ?? `Sort by ${r} ascending` : l === "ascending" ? "Sort descending" : "Sort ascending", [r, l, n]), B = () => {
+      if (!i)
         return;
-      s(l === void 0 || l === "descending" ? "ascending" : "descending");
+      i(l === void 0 || l === "descending" ? "ascending" : "descending");
     };
     return /* @__PURE__ */ t(
       "th",
       {
         ref: y,
         style: { width: m },
-        className: i.headerCell,
-        scope: r,
+        className: o.headerCell,
+        scope: s,
         colSpan: c,
         "data-align": d,
         "data-truncate": e,
         "data-no-shrink": a,
-        "data-sortable": !!s,
-        "aria-sort": s ? l || "none" : void 0,
-        children: f === "loading" ? /* @__PURE__ */ p("div", { className: i.cellContent, "aria-live": "polite", "aria-label": u, children: [
-          typeof n == "string" && e ? /* @__PURE__ */ t("span", { className: i.buttonText, children: n }) : n,
-          /* @__PURE__ */ t(S, { "data-test-id": "fondue-loading-circle", size: "xx-small" })
-        ] }) : s ? /* @__PURE__ */ p(
+        "data-sortable": !!i,
+        "aria-sort": i ? l || "none" : void 0,
+        children: f === "loading" ? /* @__PURE__ */ p("div", { className: o.cellContent, "aria-live": "polite", "aria-label": u, children: [
+          typeof r == "string" && e ? /* @__PURE__ */ t("span", { className: o.buttonText, children: r }) : r,
+          /* @__PURE__ */ t(L, { "data-test-id": "fondue-loading-circle", size: "xx-small" })
+        ] }) : i ? /* @__PURE__ */ p(
           "button",
           {
-            className: i.cellContent,
+            className: o.cellContent,
             "aria-label": z,
             "data-active": !!l,
             onClick: B,
             children: [
-              typeof n == "string" && e ? /* @__PURE__ */ t("span", { className: i.buttonText, children: n }) : n,
-              /* @__PURE__ */ t(L, { width: 3, children: l === "ascending" ? /* @__PURE__ */ t(A, { size: "12" }) : l === "descending" ? /* @__PURE__ */ t(K, { size: "12" }) : /* @__PURE__ */ t(h, { className: i.sortIndicator, size: "12" }) })
+              typeof r == "string" && e ? /* @__PURE__ */ t("span", { className: o.buttonText, children: r }) : r,
+              /* @__PURE__ */ t(j, { width: 3, children: l === "ascending" ? /* @__PURE__ */ t(A, { size: "12" }) : l === "descending" ? /* @__PURE__ */ t(K, { size: "12" }) : /* @__PURE__ */ t(E, { className: o.sortIndicator, size: "12" }) })
             ]
           }
-        ) : n
+        ) : r
       }
     );
   }
 );
-v.displayName = "Table.HeaderCell";
+x.displayName = "Table.HeaderCell";
 const T = b(
-  ({ children: a, "aria-busy": e }, d) => /* @__PURE__ */ t("tbody", { ref: d, className: i.body, "aria-busy": e, children: a })
+  ({ children: a, "aria-busy": e }, d) => /* @__PURE__ */ t("tbody", { ref: d, className: o.body, "aria-busy": e, children: a })
 );
 T.displayName = "Table.Body";
 const I = b(
-  ({ disabled: a = !1, selected: e = !1, onClick: d, children: r, "aria-label": o, "data-test-id": l }, c) => {
-    const m = d !== void 0 && !a, f = () => {
-      a || d && d(e);
-    }, u = (s) => {
-      m && (s.key === "Enter" || s.key === " ") && (s.preventDefault(), f());
+  ({ disabled: a = !1, selected: e = !1, onClick: d, children: s, "aria-label": n, "data-test-id": l }, c) => {
+    const m = d !== void 0 && !a, f = (i) => {
+      a || d && !$(i) && d(e);
+    }, u = (i) => {
+      m && (i.key === "Enter" || i.key === " ") && (i.preventDefault(), f());
     };
     return /* @__PURE__ */ t(
       "tr",
       {
         ref: c,
-        className: i.row,
+        className: o.row,
         tabIndex: 0,
         role: m ? "button" : "row",
         "data-disabled": a,
         "data-interactive": m,
         "data-selected": e,
         "aria-disabled": a,
-        "aria-label": o,
+        "aria-label": n,
         "aria-selected": e,
         onClick: m ? f : void 0,
         onKeyDown: m ? u : void 0,
         "data-test-id": l,
-        children: r
+        children: s
       }
     );
   }
 );
 I.displayName = "Table.Row";
 const H = b(
-  ({ colSpan: a, truncate: e, align: d = "left", children: r, "aria-label": o }, l) => {
+  ({ colSpan: a, truncate: e, align: d = "left", children: s, "aria-label": n }, l) => {
     const c = w(null);
     return g(c, l), N(c), /* @__PURE__ */ t(
       "td",
       {
         ref: c,
-        className: i.rowCell,
+        className: o.rowCell,
         colSpan: a,
         "data-align": d,
         "data-truncate": e,
-        "aria-label": o,
-        children: r
+        "aria-label": n,
+        children: s
       }
     );
   }
 );
 H.displayName = "Table.RowCell";
-const Q = {
+const V = {
   Root: R,
-  Caption: C,
-  Header: x,
-  HeaderCell: v,
+  Caption: v,
+  Header: C,
+  HeaderCell: x,
   Body: T,
   Row: I,
   RowCell: H
 };
 export {
-  Q as Table,
+  V as Table,
   T as TableBody,
-  C as TableCaption,
-  x as TableHeader,
-  v as TableHeaderCell,
+  v as TableCaption,
+  C as TableHeader,
+  x as TableHeaderCell,
   R as TableRoot,
   I as TableRow,
   H as TableRowCell