@frontify/fondue-components 7.0.0 → 7.0.1

package/dist/fondue-components10.js

@@ -1,36 +1,40 @@
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
 import { propsToCssVariables as y } from "./fondue-components25.js";
-import m from "./fondue-components42.js";
-const f = ({
-  as: a = "div",
-  "data-test-id": e = "fondue-flex",
-  children: i,
-  role: r,
-  "aria-label": d,
-  "aria-hidden": s,
-  "aria-describedby": t,
-  "aria-labelledby": l,
-  "aria-expanded": o,
-  "aria-haspopup": p,
-  ...b
-}) => /* @__PURE__ */ n(
-  a,
-  {
-    className: m.root,
-    "data-test-id": e,
-    style: y(b, { justify: "justify-content" }),
-    role: r,
+import x from "./fondue-components43.js";
+const u = n(
+  ({
+    as: a = "div",
+    "data-test-id": e = "fondue-flex",
+    children: r,
+    role: i,
     "aria-label": d,
     "aria-hidden": s,
     "aria-describedby": t,
-    "aria-labelledby": l,
-    "aria-expanded": o,
+    "aria-labelledby": o,
+    "aria-expanded": l,
     "aria-haspopup": p,
-    children: i
-  }
+    ...b
+  }, f) => /* @__PURE__ */ m(
+    a,
+    {
+      className: x.root,
+      "data-test-id": e,
+      style: y(b, { justify: "justify-content" }),
+      role: i,
+      "aria-label": d,
+      "aria-hidden": s,
+      "aria-describedby": t,
+      "aria-labelledby": o,
+      "aria-expanded": l,
+      "aria-haspopup": p,
+      ref: f,
+      children: r
+    }
+  )
 );
-f.displayName = "Flex";
+u.displayName = "Flex";
 export {
-  f as Flex
+  u as Flex
 };
 //# sourceMappingURL=fondue-components10.js.map

package/dist/fondue-components10.js.map

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

package/dist/fondue-components11.js

@@ -1,91 +1,94 @@
-import { jsx as a, jsxs as x } from "react/jsx-runtime";
-import { IconCross as C } from "@frontify/fondue-icons";
-import * as r from "@radix-ui/react-popover";
-import { forwardRef as s, useRef as b } from "react";
-import { usePreventDropdownOverflow as A } from "./fondue-components40.js";
-import { addAutoFocusAttribute as H, syncRefs as c, addShowFocusRing as P } from "./fondue-components37.js";
-import u from "./fondue-components43.js";
-const y = ({ children: t, ...o }) => /* @__PURE__ */ a(r.Root, { ...o, children: t });
-y.displayName = "Flyout.Root";
-const f = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-trigger", ...d }, n) => /* @__PURE__ */ a(
-  r.Trigger,
+import { jsx as a, jsxs as y, Fragment as C } from "react/jsx-runtime";
+import { IconCross as b } from "@frontify/fondue-icons";
+import * as i from "@radix-ui/react-popover";
+import { forwardRef as r, useRef as A } from "react";
+import { usePreventDropdownOverflow as H } from "./fondue-components40.js";
+import { addAutoFocusAttribute as P, syncRefs as c, addShowFocusRing as B } from "./fondue-components37.js";
+import d from "./fondue-components44.js";
+const f = ({ children: t, ...o }) => /* @__PURE__ */ a(i.Root, { ...o, children: t });
+f.displayName = "Flyout.Root";
+const m = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-trigger", ...s }, l) => /* @__PURE__ */ a(
+  i.Trigger,
   {
-    onMouseDown: H,
+    onMouseDown: P,
     "data-auto-focus-visible": "true",
     "data-auto-focus-trigger": !0,
     "data-test-id": e,
     asChild: t,
-    ref: n,
-    ...d,
+    ref: l,
+    ...s,
     children: o
   }
 );
-f.displayName = "Flyout.Trigger";
-const m = ({
+m.displayName = "Flyout.Trigger";
+const p = ({
   align: t = "start",
   maxWidth: o = "360px",
   padding: e = "compact",
-  rounded: d = "medium",
-  width: n = "fit-content",
-  shadow: N = "medium",
-  "data-test-id": h = "fondue-flyout-content",
+  rounded: s = "medium",
+  width: l = "fit-content",
+  shadow: h = "medium",
+  "data-test-id": v = "fondue-flyout-content",
   children: R,
-  ...v
-}, l) => {
-  const i = b(null), { setMaxHeight: w } = A(i);
-  return /* @__PURE__ */ a(r.Portal, { children: /* @__PURE__ */ a(
-    r.Content,
-    {
-      style: {
-        "--flyout-max-width": o,
-        "--flyout-width": n
-      },
-      ref: i,
-      align: t,
-      collisionPadding: 8,
-      sideOffset: 8,
-      onOpenAutoFocus: () => {
-        w(), c(i, l);
-      },
-      onCloseAutoFocus: () => {
-        c(i, l);
-      },
-      className: u.root,
-      "data-flyout-spacing": e,
-      "data-rounded": d,
-      "data-shadow": N,
-      "data-test-id": h,
-      onFocus: P,
-      ...v,
-      children: R
-    }
-  ) });
+  ...w
+}, n) => {
+  const u = A(null), { setMaxHeight: x } = H(u);
+  return /* @__PURE__ */ a(i.Portal, { children: /* @__PURE__ */ y(C, { children: [
+    /* @__PURE__ */ a("div", { className: d.overlay }),
+    /* @__PURE__ */ a(
+      i.Content,
+      {
+        style: {
+          "--flyout-max-width": o,
+          "--flyout-width": l
+        },
+        ref: u,
+        align: t,
+        collisionPadding: 8,
+        sideOffset: 8,
+        onOpenAutoFocus: () => {
+          x(), c(u, n);
+        },
+        onCloseAutoFocus: () => {
+          c(u, n);
+        },
+        className: d.root,
+        "data-flyout-spacing": e,
+        "data-rounded": s,
+        "data-shadow": h,
+        "data-test-id": v,
+        onFocus: B,
+        ...w,
+        children: R
+      }
+    )
+  ] }) });
 };
-m.displayName = "Flyout.Content";
-const p = ({ showCloseButton: t, children: o, "data-test-id": e = "fondue-flyout-header" }, d) => /* @__PURE__ */ x("div", { "data-test-id": e, ref: d, className: u.header, children: [
+p.displayName = "Flyout.Content";
+const F = ({ showCloseButton: t, children: o, "data-test-id": e = "fondue-flyout-header" }, s) => /* @__PURE__ */ y("div", { "data-test-id": e, ref: s, className: d.header, children: [
   /* @__PURE__ */ a("div", { children: o }),
-  t && /* @__PURE__ */ a(r.Close, { role: "button", "data-test-id": `${e}-close`, className: u.close, children: /* @__PURE__ */ a(C, { size: 20 }) })
+  t && /* @__PURE__ */ a(i.Close, { role: "button", "data-test-id": `${e}-close`, className: d.close, children: /* @__PURE__ */ a(b, { size: 20 }) })
 ] });
-p.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: u.footer, children: t });
-F.displayName = "Flyout.Footer";
-const g = ({ children: t, "data-test-id": o = "fondue-flyout-body" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, "data-flyout-spacing": "compact", className: u.body, children: t });
-g.displayName = "Flyout.Body";
-const z = {
-  Root: y,
-  Trigger: s(f),
-  Content: s(m),
-  Header: s(p),
-  Footer: s(F),
-  Body: s(g)
+F.displayName = "Flyout.Header";
+const g = ({ children: t, "data-test-id": o = "fondue-flyout-footer" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: d.footer, children: t });
+g.displayName = "Flyout.Footer";
+const N = ({ children: t, "data-test-id": o = "fondue-flyout-body" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, "data-flyout-spacing": "compact", className: d.body, children: t });
+N.displayName = "Flyout.Body";
+const S = {
+  Root: f,
+  Trigger: r(m),
+  Content: r(p),
+  Header: r(F),
+  Footer: r(g),
+  Body: r(N)
 };
 export {
-  z as Flyout,
-  g as FlyoutBody,
-  m as FlyoutContent,
-  F as FlyoutFooter,
-  p as FlyoutHeader,
-  y as FlyoutRoot,
-  f as FlyoutTrigger
+  S as Flyout,
+  N as FlyoutBody,
+  p as FlyoutContent,
+  g as FlyoutFooter,
+  F as FlyoutHeader,
+  f as FlyoutRoot,
+  m as FlyoutTrigger
 };
 //# sourceMappingURL=fondue-components11.js.map

package/dist/fondue-components11.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components11.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, useRef, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { usePreventDropdownOverflow } from '#/hooks/usePreventDropdownOverflow';\nimport { addAutoFocusAttribute, addShowFocusRing, syncRefs } from '#/utilities/domUtilities';\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\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     * Define the maximum width of the flyout\n     * @default \"360px\"\n     */\n    maxWidth?: string;\n    children?: ReactNode;\n    'data-test-id'?: string;\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        'data-test-id': dataTestId = 'fondue-flyout-content',\n        children,\n        ...props\n    }: FlyoutContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const localRef = useRef(null);\n\n    const { setMaxHeight } = usePreventDropdownOverflow(localRef);\n\n    return (\n        <RadixPopover.Portal>\n            <RadixPopover.Content\n                style={\n                    {\n                        '--flyout-max-width': maxWidth,\n                        '--flyout-width': width,\n                    } as CSSProperties\n                }\n                ref={localRef}\n                align={align}\n                collisionPadding={8}\n                sideOffset={8}\n                onOpenAutoFocus={() => {\n                    setMaxHeight();\n                    syncRefs(localRef, ref);\n                }}\n                onCloseAutoFocus={() => {\n                    syncRefs(localRef, ref);\n                }}\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        </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 = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutBody = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-body' }: FlyoutBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} data-flyout-spacing=\"compact\" className={styles.body}>\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","FlyoutContent","align","maxWidth","padding","rounded","width","shadow","localRef","useRef","setMaxHeight","usePreventDropdownOverflow","syncRefs","styles","addShowFocusRing","FlyoutHeader","showCloseButton","IconCross","FlyoutFooter","FlyoutBody","Flyout","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components11.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, useRef, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { usePreventDropdownOverflow } from '#/hooks/usePreventDropdownOverflow';\nimport { addAutoFocusAttribute, addShowFocusRing, syncRefs } from '#/utilities/domUtilities';\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\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     * Define the maximum width of the flyout\n     * @default \"360px\"\n     */\n    maxWidth?: string;\n    children?: ReactNode;\n    'data-test-id'?: string;\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        'data-test-id': dataTestId = 'fondue-flyout-content',\n        children,\n        ...props\n    }: FlyoutContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const localRef = useRef<HTMLDivElement>(null);\n\n    const { setMaxHeight } = usePreventDropdownOverflow(localRef);\n\n    return (\n        <RadixPopover.Portal>\n            <>\n                <div className={styles.overlay} />\n                <RadixPopover.Content\n                    style={\n                        {\n                            '--flyout-max-width': maxWidth,\n                            '--flyout-width': width,\n                        } as CSSProperties\n                    }\n                    ref={localRef}\n                    align={align}\n                    collisionPadding={8}\n                    sideOffset={8}\n                    onOpenAutoFocus={() => {\n                        setMaxHeight();\n                        syncRefs(localRef, ref);\n                    }}\n                    onCloseAutoFocus={() => {\n                        syncRefs(localRef, ref);\n                    }}\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            </>\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 = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutBody = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-body' }: FlyoutBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} data-flyout-spacing=\"compact\" className={styles.body}>\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","FlyoutContent","align","maxWidth","padding","rounded","width","shadow","localRef","useRef","setMaxHeight","usePreventDropdownOverflow","jsxs","Fragment","styles","syncRefs","addShowFocusRing","FlyoutHeader","showCloseButton","IconCross","FlyoutFooter","FlyoutBody","Flyout","forwardRef"],"mappings":"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"}

package/dist/fondue-components12.js

@@ -1,36 +1,39 @@
 import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
 import { propsToCssVariables as y } from "./fondue-components25.js";
-import n from "./fondue-components44.js";
-const f = ({
-  as: a = "div",
-  "data-test-id": i = "fondue-grid",
-  children: r,
-  role: e,
-  "aria-label": d,
-  "aria-hidden": s,
-  "aria-describedby": t,
-  "aria-labelledby": l,
-  "aria-expanded": o,
-  "aria-haspopup": p,
-  ...b
-}) => /* @__PURE__ */ m(
-  a,
-  {
-    className: n.root,
-    "data-test-id": i,
-    style: y(b, { justify: "justify-items" }),
+import n from "./fondue-components45.js";
+const u = f(
+  ({
+    as: a = "div",
+    "data-test-id": r = "fondue-grid",
+    children: i,
     role: e,
     "aria-label": d,
     "aria-hidden": s,
     "aria-describedby": t,
-    "aria-labelledby": l,
-    "aria-expanded": o,
-    "aria-haspopup": p,
-    children: r
-  }
+    "aria-labelledby": o,
+    "aria-expanded": p,
+    "aria-haspopup": l,
+    ...b
+  }) => /* @__PURE__ */ m(
+    a,
+    {
+      className: n.root,
+      "data-test-id": r,
+      style: y(b, { justify: "justify-items" }),
+      role: e,
+      "aria-label": d,
+      "aria-hidden": s,
+      "aria-describedby": t,
+      "aria-labelledby": o,
+      "aria-expanded": p,
+      "aria-haspopup": l,
+      children: i
+    }
+  )
 );
-f.displayName = "Grid";
+u.displayName = "Grid";
 export {
-  f as Grid
+  u as Grid
 };
 //# sourceMappingURL=fondue-components12.js.map

package/dist/fondue-components12.js.map

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

package/dist/fondue-components14.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-components45.js";
+import { loadingBarContainerStyles as g, loadingBarStyles as f } from "./fondue-components46.js";
 const p = m(
   ({
     value: a,

package/dist/fondue-components15.js

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

package/dist/fondue-components16.js

@@ -1,35 +1,38 @@
 import { jsx as b } from "react/jsx-runtime";
-import { propsToCssVariables as n } from "./fondue-components25.js";
-import c from "./fondue-components47.js";
-const m = ({
-  "data-test-id": a = "fondue-section",
-  children: e,
-  role: i,
-  "aria-label": r,
-  "aria-hidden": d,
-  "aria-describedby": s,
-  "aria-labelledby": o,
-  "aria-expanded": t,
-  "aria-haspopup": l,
-  ...p
-}) => /* @__PURE__ */ b(
-  "section",
-  {
-    className: c.root,
-    "data-test-id": a,
-    style: n(p),
-    role: i,
-    "aria-label": r,
-    "aria-hidden": d,
-    "aria-describedby": s,
-    "aria-labelledby": o,
+import { forwardRef as n } from "react";
+import { propsToCssVariables as m } from "./fondue-components25.js";
+import c from "./fondue-components48.js";
+const f = n(
+  ({
+    "data-test-id": a = "fondue-section",
+    children: e,
+    role: r,
+    "aria-label": i,
+    "aria-hidden": o,
+    "aria-describedby": d,
+    "aria-labelledby": s,
     "aria-expanded": t,
-    "aria-haspopup": l,
-    children: e
-  }
+    "aria-haspopup": p,
+    ...l
+  }) => /* @__PURE__ */ b(
+    "section",
+    {
+      className: c.root,
+      "data-test-id": a,
+      style: m(l),
+      role: r,
+      "aria-label": i,
+      "aria-hidden": o,
+      "aria-describedby": d,
+      "aria-labelledby": s,
+      "aria-expanded": t,
+      "aria-haspopup": p,
+      children: e
+    }
+  )
 );
-m.displayName = "Section";
+f.displayName = "Section";
 export {
-  m as Section
+  f as Section
 };
 //# sourceMappingURL=fondue-components16.js.map

package/dist/fondue-components16.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components16.js","sources":["../src/components/Section/Section.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { type Responsive, type LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/section.module.scss';\n\nexport type SectionProps = LayoutComponentProps & {\n    /**\n     * The display property.\n     * @default 'block'\n     */\n    display?: Responsive<'none' | 'block' | 'inline-block' | 'inline'>;\n\n    children?: ReactNode;\n    'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Section = ({\n    'data-test-id': dataTestId = 'fondue-section',\n    children,\n    role,\n    'aria-label': ariaLabel,\n    'aria-hidden': ariaHidden,\n    'aria-describedby': ariaDescribedBy,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-expanded': ariaExpanded,\n    'aria-haspopup': ariaHasPopup,\n    ...props\n}: SectionProps) => {\n    return (\n        <section\n            className={styles.root}\n            data-test-id={dataTestId}\n            style={propsToCssVariables(props)}\n            role={role}\n            aria-label={ariaLabel}\n            aria-hidden={ariaHidden}\n            aria-describedby={ariaDescribedBy}\n            aria-labelledby={ariaLabelledBy}\n            aria-expanded={ariaExpanded}\n            aria-haspopup={ariaHasPopup}\n        >\n            {children}\n        </section>\n    );\n};\nSection.displayName = 'Section';\n"],"names":["Section","dataTestId","children","role","ariaLabel","ariaHidden","ariaDescribedBy","ariaLabelledBy","ariaExpanded","ariaHasPopup","props","jsx","styles","propsToCssVariables"],"mappings":";;;AAqBO,MAAMA,IAAU,CAAC;AAAA,EACpB,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAcC;AAAA,EACd,eAAeC;AAAA,EACf,oBAAoBC;AAAA,EACpB,mBAAmBC;AAAA,EACnB,iBAAiBC;AAAA,EACjB,iBAAiBC;AAAA,EACjB,GAAGC;AACP,MAEQ,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAWC,EAAO;AAAA,IAClB,gBAAcX;AAAA,IACd,OAAOY,EAAoBH,CAAK;AAAA,IAChC,MAAAP;AAAA,IACA,cAAYC;AAAA,IACZ,eAAaC;AAAA,IACb,oBAAkBC;AAAA,IAClB,mBAAiBC;AAAA,IACjB,iBAAeC;AAAA,IACf,iBAAeC;AAAA,IAEd,UAAAP;AAAA,EAAA;AACL;AAGRF,EAAQ,cAAc;"}
+{"version":3,"file":"fondue-components16.js","sources":["../src/components/Section/Section.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { type Responsive, type LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/section.module.scss';\n\nexport type SectionProps = LayoutComponentProps & {\n    /**\n     * The display property.\n     * @default 'block'\n     */\n    display?: Responsive<'none' | 'block' | 'inline-block' | 'inline'>;\n\n    children?: ReactNode;\n    'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Section = forwardRef<HTMLDivElement, SectionProps>(\n    ({\n        'data-test-id': dataTestId = 'fondue-section',\n        children,\n        role,\n        'aria-label': ariaLabel,\n        'aria-hidden': ariaHidden,\n        'aria-describedby': ariaDescribedBy,\n        'aria-labelledby': ariaLabelledBy,\n        'aria-expanded': ariaExpanded,\n        'aria-haspopup': ariaHasPopup,\n        ...props\n    }: SectionProps) => {\n        return (\n            <section\n                className={styles.root}\n                data-test-id={dataTestId}\n                style={propsToCssVariables(props)}\n                role={role}\n                aria-label={ariaLabel}\n                aria-hidden={ariaHidden}\n                aria-describedby={ariaDescribedBy}\n                aria-labelledby={ariaLabelledBy}\n                aria-expanded={ariaExpanded}\n                aria-haspopup={ariaHasPopup}\n            >\n                {children}\n            </section>\n        );\n    },\n);\nSection.displayName = 'Section';\n"],"names":["Section","forwardRef","dataTestId","children","role","ariaLabel","ariaHidden","ariaDescribedBy","ariaLabelledBy","ariaExpanded","ariaHasPopup","props","jsx","styles","propsToCssVariables"],"mappings":";;;;AAqBO,MAAMA,IAAUC;AAAA,EACnB,CAAC;AAAA,IACG,gBAAgBC,IAAa;AAAA,IAC7B,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAcC;AAAA,IACd,eAAeC;AAAA,IACf,oBAAoBC;AAAA,IACpB,mBAAmBC;AAAA,IACnB,iBAAiBC;AAAA,IACjB,iBAAiBC;AAAA,IACjB,GAAGC;AAAA,EAAA,MAGC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAO;AAAA,MAClB,gBAAcX;AAAA,MACd,OAAOY,EAAoBH,CAAK;AAAA,MAChC,MAAAP;AAAA,MACA,cAAYC;AAAA,MACZ,eAAaC;AAAA,MACb,oBAAkBC;AAAA,MAClB,mBAAiBC;AAAA,MACjB,iBAAeC;AAAA,MACf,iBAAeC;AAAA,MAEd,UAAAP;AAAA,IAAA;AAAA,EACL;AAGZ;AACAH,EAAQ,cAAc;"}

package/dist/fondue-components17.js

@@ -1,8 +1,8 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
 import * as i from "@radix-ui/react-toggle-group";
 import { forwardRef as n } from "react";
-import { useControllableState as N } from "./fondue-components48.js";
-import e from "./fondue-components49.js";
+import { useControllableState as N } from "./fondue-components49.js";
+import e from "./fondue-components50.js";
 const d = ({ children: a, value: o, defaultValue: s, onValueChange: p, ...m }, f) => {
   const [g, C] = N({
     prop: o,

package/dist/fondue-components18.js

@@ -4,12 +4,12 @@ import * as S from "@radix-ui/react-popover";
 import { Slot as H } from "@radix-ui/react-slot";
 import { useSelect as T } from "downshift";
 import { forwardRef as V, useRef as $, useState as A } from "react";
-import { ForwardedRefCombobox as q } from "./fondue-components50.js";
-import { ForwardedRefSelectItem as J, ForwardedRefSelectItemGroup as K } from "./fondue-components51.js";
-import { SelectMenu as L } from "./fondue-components52.js";
-import { ForwardedRefSelectSlot as Q } from "./fondue-components53.js";
-import a from "./fondue-components54.js";
-import { useSelectData as U } from "./fondue-components55.js";
+import { ForwardedRefCombobox as q } from "./fondue-components51.js";
+import { ForwardedRefSelectItem as J, ForwardedRefSelectItemGroup as K } from "./fondue-components52.js";
+import { SelectMenu as L } from "./fondue-components53.js";
+import { ForwardedRefSelectSlot as Q } from "./fondue-components54.js";
+import a from "./fondue-components55.js";
+import { useSelectData as U } from "./fondue-components56.js";
 const g = ({
   children: h,
   onSelect: i,

package/dist/fondue-components19.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-components56.js";
+import r from "./fondue-components57.js";
 const g = ({
   value: a,
   defaultValue: n = [0],

package/dist/fondue-components20.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-components27.js";
-import t from "./fondue-components57.js";
+import t from "./fondue-components58.js";
 const n = ({
   value: a,
   defaultValue: i,

package/dist/fondue-components21.js

@@ -1,10 +1,10 @@
 import { jsx as n, jsxs as k } from "react/jsx-runtime";
 import { IconArrowUp as B, IconArrowDown as h, IconArrowBidirectional as A } from "@frontify/fondue-icons";
 import { forwardRef as u, useRef as y, useMemo as K } from "react";
-import { useSyncRefs as p } from "./fondue-components58.js";
-import { useTextTruncation as w } from "./fondue-components59.js";
-import o from "./fondue-components60.js";
-import { handleKeyDown as z } from "./fondue-components61.js";
+import { useSyncRefs as p } from "./fondue-components59.js";
+import { useTextTruncation as w } from "./fondue-components60.js";
+import o from "./fondue-components61.js";
+import { handleKeyDown as z } from "./fondue-components62.js";
 const N = u(
   ({ layout: e = "auto", sticky: a, children: l, ...r }, t) => /* @__PURE__ */ n("div", { onKeyDown: z, role: "grid", tabIndex: -1, children: /* @__PURE__ */ n("table", { ref: t, className: o.table, "data-layout": e, "data-sticky": a, ...r, children: l }) })
 );

package/dist/fondue-components22.js

@@ -2,11 +2,11 @@ import { jsx as a, jsxs as p } from "react/jsx-runtime";
 import { createContext as x, forwardRef as i, useCallback as j, createElement as N, useContext as T, useRef as A, useEffect as D } from "react";
 import { IconDotsHorizontal as E } from "@frontify/fondue-icons";
 import * as d from "@radix-ui/react-tabs";
-import { useControllableState as O } from "./fondue-components48.js";
+import { useControllableState as O } from "./fondue-components49.js";
 import { Button as V } from "./fondue-components4.js";
 import { Dropdown as l } from "./fondue-components9.js";
-import { useTabTriggers as q } from "./fondue-components62.js";
-import r from "./fondue-components63.js";
+import { useTabTriggers as q } from "./fondue-components63.js";
+import r from "./fondue-components64.js";
 const b = x({
   value: "",
   disabled: !1

package/dist/fondue-components23.js

@@ -2,7 +2,7 @@ import { jsxs as g, jsx as s } from "react/jsx-runtime";
 import { IconCheckMark as w, IconExclamationMarkTriangle as N } from "@frontify/fondue-icons";
 import { forwardRef as n, useRef as S } from "react";
 import { cn as m } from "./fondue-components27.js";
-import r from "./fondue-components64.js";
+import r from "./fondue-components65.js";
 const f = ({
   children: c,
   className: d,

package/dist/fondue-components24.js

@@ -2,7 +2,7 @@ import { jsx as a, jsxs as g } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-tooltip";
 import { forwardRef as n } from "react";
 import { cn as T } from "./fondue-components27.js";
-import d from "./fondue-components65.js";
+import d from "./fondue-components66.js";
 const l = ({ children: t, enterDelay: r = 700, open: i, onOpenChange: e, ...s }) => /* @__PURE__ */ a(o.Provider, { children: /* @__PURE__ */ a(o.Root, { delayDuration: r, open: i, onOpenChange: e, ...s, children: t }) });
 l.displayName = "Tooltip.Root";
 const p = ({ asChild: t = !1, children: r, "data-test-id": i = "fondue-tooltip-trigger" }, e) => /* @__PURE__ */ a(o.Trigger, { "data-test-id": i, asChild: t, ref: e, children: r });