@frontify/fondue-components 10.0.1 → 11.0.0

package/dist/fondue-components10.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-components25.js";
-import x from "./fondue-components42.js";
+import x from "./fondue-components43.js";
 const u = n(
   ({
     as: a = "div",

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

package/dist/fondue-components11.js

@@ -1,15 +1,16 @@
-import { jsx as a, jsxs as l, Fragment as R } from "react/jsx-runtime";
-import { IconCross as w } from "@frontify/fondue-icons";
+import { jsx as a, jsxs as l } from "react/jsx-runtime";
+import { IconCross as b } from "@frontify/fondue-icons";
+import { useFondueTheme as w, ThemeProvider as x } from "./fondue-components37.js";
 import * as i from "@radix-ui/react-popover";
 import { forwardRef as s } from "react";
-import { addAutoFocusAttribute as x, addShowFocusRing as C } from "./fondue-components37.js";
-import d from "./fondue-components43.js";
+import { addAutoFocusAttribute as C, addShowFocusRing as T } from "./fondue-components38.js";
+import d from "./fondue-components44.js";
 const n = ({ children: t, ...o }) => /* @__PURE__ */ a(i.Root, { ...o, children: t });
 n.displayName = "Flyout.Root";
-const y = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-trigger", ...r }, u) => /* @__PURE__ */ a(
+const m = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-trigger", ...r }, u) => /* @__PURE__ */ a(
   i.Trigger,
   {
-    onMouseDown: x,
+    onMouseDown: C,
     "data-auto-focus-visible": "true",
     "data-auto-focus-trigger": !0,
     "data-test-id": e,
@@ -19,66 +20,69 @@ const y = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-tr
     children: o
   }
 );
-y.displayName = "Flyout.Trigger";
-const c = ({
+m.displayName = "Flyout.Trigger";
+const y = ({
   align: t = "start",
   maxWidth: o = "360px",
   padding: e = "compact",
   rounded: r = "medium",
   width: u = "fit-content",
-  shadow: p = "medium",
+  shadow: F = "medium",
   "data-test-id": g = "fondue-flyout-content",
-  children: N,
-  ...h
-}, v) => /* @__PURE__ */ a(i.Portal, { children: /* @__PURE__ */ l(R, { children: [
-  /* @__PURE__ */ a("div", { className: d.overlay }),
-  /* @__PURE__ */ a(
-    i.Content,
-    {
-      style: {
-        "--flyout-max-width": o,
-        "--flyout-width": u
-      },
-      ref: v,
-      align: t,
-      collisionPadding: 8,
-      sideOffset: 8,
-      className: d.root,
-      "data-flyout-spacing": e,
-      "data-rounded": r,
-      "data-shadow": p,
-      "data-test-id": g,
-      onFocus: C,
-      ...h,
-      children: N
-    }
-  )
-] }) });
-c.displayName = "Flyout.Content";
-const m = ({ showCloseButton: t, children: o, "data-test-id": e = "fondue-flyout-header" }, r) => /* @__PURE__ */ l("div", { "data-test-id": e, ref: r, className: d.header, children: [
+  children: h,
+  ...N
+}, v) => {
+  const R = w();
+  return /* @__PURE__ */ a(i.Portal, { children: /* @__PURE__ */ l(x, { theme: R, children: [
+    /* @__PURE__ */ a("div", { className: d.overlay }),
+    /* @__PURE__ */ a(
+      i.Content,
+      {
+        style: {
+          "--flyout-max-width": o,
+          "--flyout-width": u
+        },
+        ref: v,
+        align: t,
+        collisionPadding: 8,
+        sideOffset: 8,
+        className: d.root,
+        "data-flyout-spacing": e,
+        "data-rounded": r,
+        "data-shadow": F,
+        "data-test-id": g,
+        onFocus: T,
+        ...N,
+        children: h
+      }
+    )
+  ] }) });
+};
+y.displayName = "Flyout.Content";
+const c = ({ showCloseButton: t, children: o, "data-test-id": e = "fondue-flyout-header" }, r) => /* @__PURE__ */ l("div", { "data-test-id": e, ref: r, className: d.header, children: [
   /* @__PURE__ */ a("div", { children: o }),
-  t && /* @__PURE__ */ a(i.Close, { role: "button", "data-test-id": `${e}-close`, className: d.close, children: /* @__PURE__ */ a(w, { size: 20 }) })
+  t && /* @__PURE__ */ a(i.Close, { role: "button", "data-test-id": `${e}-close`, className: d.close, children: /* @__PURE__ */ a(b, { size: 20 }) })
 ] });
-m.displayName = "Flyout.Header";
+c.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: d.footer, children: t });
 f.displayName = "Flyout.Footer";
-const F = ({ 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 });
-F.displayName = "Flyout.Body";
-const j = {
+const p = ({ 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 });
+p.displayName = "Flyout.Body";
+const D = {
   Root: n,
-  Trigger: s(y),
-  Content: s(c),
-  Header: s(m),
+  Trigger: s(m),
+  Content: s(y),
+  Header: s(c),
   Footer: s(f),
-  Body: s(F)
+  Body: s(p)
 };
 export {
-  j as Flyout,
-  F as FlyoutBody,
-  c as FlyoutContent,
+  D as Flyout,
+  p as FlyoutBody,
+  y as FlyoutContent,
   f as FlyoutFooter,
-  m as FlyoutHeader,
+  c as FlyoutHeader,
   n as FlyoutRoot,
-  y as FlyoutTrigger
+  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, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { addAutoFocusAttribute, addShowFocusRing } 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    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={ref}\n                    align={align}\n                    collisionPadding={8}\n                    sideOffset={8}\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","jsxs","Fragment","styles","addShowFocusRing","FlyoutHeader","showCloseButton","IconCross","FlyoutFooter","FlyoutBody","Flyout","forwardRef"],"mappings":";;;;;;AA4BO,MAAMA,IAAa,CAAC,EAAE,UAAAC,GAAU,GAAGC,0BAC9BC,EAAa,MAAb,EAAmB,GAAGD,GAAQ,UAAAD,GAAS;AAEnDD,EAAW,cAAc;AAYlB,MAAMI,IAAgB,CACzB,EAAE,SAAAC,IAAU,IAAM,UAAAJ,GAAU,gBAAgBK,IAAa,yBAAyB,GAAGJ,EAAM,GAC3FK,MAGI,gBAAAC;AAAA,EAACL,EAAa;AAAA,EAAb;AAAA,IACG,aAAaM;AAAA,IACb,2BAAwB;AAAA,IACxB,2BAAuB;AAAA,IACvB,gBAAcH;AAAA,IACd,SAAAD;AAAA,IACA,KAAAE;AAAA,IACC,GAAGL;AAAA,IAEH,UAAAD;AAAA,EAAA;AACL;AAGRG,EAAc,cAAc;AA0CrB,MAAMM,IAAgB,CACzB;AAAA,EACI,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,SAAAC,IAAU;AAAA,EACV,SAAAC,IAAU;AAAA,EACV,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,gBAAgBV,IAAa;AAAA,EAC7B,UAAAL;AAAA,EACA,GAAGC;AACP,GACAK,MAGK,gBAAAC,EAAAL,EAAa,QAAb,EACG,UACI,gBAAAc,EAAAC,GAAA,EAAA,UAAA;AAAA,EAAC,gBAAAV,EAAA,OAAA,EAAI,WAAWW,EAAO,QAAS,CAAA;AAAA,EAChC,gBAAAX;AAAA,IAACL,EAAa;AAAA,IAAb;AAAA,MACG,OACI;AAAA,QACI,sBAAsBS;AAAA,QACtB,kBAAkBG;AAAA,MACtB;AAAA,MAEJ,KAAAR;AAAA,MACA,OAAAI;AAAA,MACA,kBAAkB;AAAA,MAClB,YAAY;AAAA,MACZ,WAAWQ,EAAO;AAAA,MAClB,uBAAqBN;AAAA,MACrB,gBAAcC;AAAA,MACd,eAAaE;AAAA,MACb,gBAAcV;AAAA,MACd,SAASc;AAAA,MACR,GAAGlB;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AACL,EAAA,CACJ,EACJ,CAAA;AAGRS,EAAc,cAAc;AAYf,MAAAW,IAAe,CACxB,EAAE,iBAAAC,GAAiB,UAAArB,GAAU,gBAAgBK,IAAa,uBAAuB,GACjFC,wBAGK,OAAI,EAAA,gBAAcD,GAAY,KAAAC,GAAU,WAAWY,EAAO,QACvD,UAAA;AAAA,EAAA,gBAAAX,EAAC,SAAK,UAAAP,GAAS;AAAA,EACdqB,KACI,gBAAAd,EAAAL,EAAa,OAAb,EAAmB,MAAK,UAAS,gBAAc,GAAGG,CAAU,UAAU,WAAWa,EAAO,OACrF,4BAACI,GAAU,EAAA,MAAM,IAAI,EACzB,CAAA;AAAA,GAER;AAGRF,EAAa,cAAc;AAId,MAAAG,IAAe,CACxB,EAAE,UAAAvB,GAAU,gBAAgBK,IAAa,0BACzCC,MAGI,gBAAAC,EAAC,SAAI,gBAAcF,GAAY,KAAAC,GAAU,WAAWY,EAAO,QACtD,UAAAlB,GACL;AAGRuB,EAAa,cAAc;AAId,MAAAC,IAAa,CACtB,EAAE,UAAAxB,GAAU,gBAAgBK,IAAa,wBACzCC,MAGI,gBAAAC,EAAC,OAAI,EAAA,gBAAcF,GAAY,KAAAC,GAAU,uBAAoB,WAAU,WAAWY,EAAO,MACpF,UAAAlB,EACL,CAAA;AAGRwB,EAAW,cAAc;AAElB,MAAMC,IAAS;AAAA,EAClB,MAAM1B;AAAA,EACN,SAAS2B,EAAkDvB,CAAa;AAAA,EACxE,SAASuB,EAA+CjB,CAAa;AAAA,EACrE,QAAQiB,EAA8CN,CAAY;AAAA,EAClE,QAAQM,EAA8CH,CAAY;AAAA,EAClE,MAAMG,EAA4CF,CAAU;AAChE;"}
+{"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 { ThemeProvider, useFondueTheme } from '@frontify/fondue-tokens/theme-provider';\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 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 theme = useFondueTheme();\n    return (\n        <RadixPopover.Portal>\n            <ThemeProvider theme={theme}>\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={ref}\n                    align={align}\n                    collisionPadding={8}\n                    sideOffset={8}\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 = { 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","theme","useFondueTheme","jsxs","ThemeProvider","styles","addShowFocusRing","FlyoutHeader","showCloseButton","IconCross","FlyoutFooter","FlyoutBody","Flyout","forwardRef"],"mappings":";;;;;;;AA6BO,MAAMA,IAAa,CAAC,EAAE,UAAAC,GAAU,GAAGC,0BAC9BC,EAAa,MAAb,EAAmB,GAAGD,GAAQ,UAAAD,GAAS;AAEnDD,EAAW,cAAc;AAYlB,MAAMI,IAAgB,CACzB,EAAE,SAAAC,IAAU,IAAM,UAAAJ,GAAU,gBAAgBK,IAAa,yBAAyB,GAAGJ,EAAM,GAC3FK,MAGI,gBAAAC;AAAA,EAACL,EAAa;AAAA,EAAb;AAAA,IACG,aAAaM;AAAA,IACb,2BAAwB;AAAA,IACxB,2BAAuB;AAAA,IACvB,gBAAcH;AAAA,IACd,SAAAD;AAAA,IACA,KAAAE;AAAA,IACC,GAAGL;AAAA,IAEH,UAAAD;AAAA,EAAA;AACL;AAGRG,EAAc,cAAc;AA0CrB,MAAMM,IAAgB,CACzB;AAAA,EACI,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,SAAAC,IAAU;AAAA,EACV,SAAAC,IAAU;AAAA,EACV,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,gBAAgBV,IAAa;AAAA,EAC7B,UAAAL;AAAA,EACA,GAAGC;AACP,GACAK,MACC;AACD,QAAMU,IAAQC,EAAe;AAC7B,2BACKf,EAAa,QAAb,EACG,UAAA,gBAAAgB,EAACC,KAAc,OAAAH,GACX,UAAA;AAAA,IAAC,gBAAAT,EAAA,OAAA,EAAI,WAAWa,EAAO,QAAS,CAAA;AAAA,IAChC,gBAAAb;AAAA,MAACL,EAAa;AAAA,MAAb;AAAA,QACG,OACI;AAAA,UACI,sBAAsBS;AAAA,UACtB,kBAAkBG;AAAA,QACtB;AAAA,QAEJ,KAAAR;AAAA,QACA,OAAAI;AAAA,QACA,kBAAkB;AAAA,QAClB,YAAY;AAAA,QACZ,WAAWU,EAAO;AAAA,QAClB,uBAAqBR;AAAA,QACrB,gBAAcC;AAAA,QACd,eAAaE;AAAA,QACb,gBAAcV;AAAA,QACd,SAASgB;AAAA,QACR,GAAGpB;AAAA,QAEH,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,EAAA,CACJ,EACJ,CAAA;AAER;AACAS,EAAc,cAAc;AAYf,MAAAa,IAAe,CACxB,EAAE,iBAAAC,GAAiB,UAAAvB,GAAU,gBAAgBK,IAAa,uBAAuB,GACjFC,wBAGK,OAAI,EAAA,gBAAcD,GAAY,KAAAC,GAAU,WAAWc,EAAO,QACvD,UAAA;AAAA,EAAA,gBAAAb,EAAC,SAAK,UAAAP,GAAS;AAAA,EACduB,KACI,gBAAAhB,EAAAL,EAAa,OAAb,EAAmB,MAAK,UAAS,gBAAc,GAAGG,CAAU,UAAU,WAAWe,EAAO,OACrF,4BAACI,GAAU,EAAA,MAAM,IAAI,EACzB,CAAA;AAAA,GAER;AAGRF,EAAa,cAAc;AAId,MAAAG,IAAe,CACxB,EAAE,UAAAzB,GAAU,gBAAgBK,IAAa,0BACzCC,MAGI,gBAAAC,EAAC,SAAI,gBAAcF,GAAY,KAAAC,GAAU,WAAWc,EAAO,QACtD,UAAApB,GACL;AAGRyB,EAAa,cAAc;AAId,MAAAC,IAAa,CACtB,EAAE,UAAA1B,GAAU,gBAAgBK,IAAa,wBACzCC,MAGI,gBAAAC,EAAC,OAAI,EAAA,gBAAcF,GAAY,KAAAC,GAAU,uBAAoB,WAAU,WAAWc,EAAO,MACpF,UAAApB,EACL,CAAA;AAGR0B,EAAW,cAAc;AAElB,MAAMC,IAAS;AAAA,EAClB,MAAM5B;AAAA,EACN,SAAS6B,EAAkDzB,CAAa;AAAA,EACxE,SAASyB,EAA+CnB,CAAa;AAAA,EACrE,QAAQmB,EAA8CN,CAAY;AAAA,EAClE,QAAQM,EAA8CH,CAAY;AAAA,EAClE,MAAMG,EAA4CF,CAAU;AAChE;"}

package/dist/fondue-components12.js

@@ -1,8 +1,8 @@
-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 u = f(
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { propsToCssVariables as n } from "./fondue-components25.js";
+import u from "./fondue-components45.js";
+const c = y(
   ({
     as: a = "div",
     "data-test-id": r = "fondue-grid",
@@ -15,12 +15,12 @@ const u = f(
     "aria-expanded": p,
     "aria-haspopup": l,
     ...b
-  }) => /* @__PURE__ */ m(
+  }, m) => /* @__PURE__ */ f(
     a,
     {
-      className: n.root,
+      className: u.root,
       "data-test-id": r,
-      style: y(b, { justify: "justify-items" }),
+      style: n(b, { justify: "justify-items" }),
       role: e,
       "aria-label": d,
       "aria-hidden": s,
@@ -28,12 +28,13 @@ const u = f(
       "aria-labelledby": o,
       "aria-expanded": p,
       "aria-haspopup": l,
+      ref: m,
       children: i
     }
   )
 );
-u.displayName = "Grid";
+c.displayName = "Grid";
 export {
-  u as Grid
+  c 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 { 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;"}
+{"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        {\n            as: Component = 'div',\n            'data-test-id': dataTestId = 'fondue-grid',\n            children,\n            role,\n            'aria-label': ariaLabel,\n            'aria-hidden': ariaHidden,\n            'aria-describedby': ariaDescribedBy,\n            'aria-labelledby': ariaLabelledBy,\n            'aria-expanded': ariaExpanded,\n            'aria-haspopup': ariaHasPopup,\n            ...props\n        },\n        ref,\n    ) => {\n        return (\n            <Component\n                className={styles.root}\n                data-test-id={dataTestId}\n                style={propsToCssVariables(props, { justify: 'justify-items' })}\n                role={role}\n                aria-label={ariaLabel}\n                aria-hidden={ariaHidden}\n                aria-describedby={ariaDescribedBy}\n                aria-labelledby={ariaLabelledBy}\n                aria-expanded={ariaExpanded}\n                aria-haspopup={ariaHasPopup}\n                ref={ref}\n            >\n                {children}\n            </Component>\n        );\n    },\n);\nGrid.displayName = 'Grid';\n"],"names":["Grid","forwardRef","Component","dataTestId","children","role","ariaLabel","ariaHidden","ariaDescribedBy","ariaLabelledBy","ariaExpanded","ariaHasPopup","props","ref","jsx","styles","propsToCssVariables"],"mappings":";;;;AA2DO,MAAMA,IAAOC;AAAA,EAChB,CACI;AAAA,IACI,IAAIC,IAAY;AAAA,IAChB,gBAAgBC,IAAa;AAAA,IAC7B,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAcC;AAAA,IACd,eAAeC;AAAA,IACf,oBAAoBC;AAAA,IACpB,mBAAmBC;AAAA,IACnB,iBAAiBC;AAAA,IACjB,iBAAiBC;AAAA,IACjB,GAAGC;AAAA,KAEPC,MAGI,gBAAAC;AAAA,IAACZ;AAAA,IAAA;AAAA,MACG,WAAWa,EAAO;AAAA,MAClB,gBAAcZ;AAAA,MACd,OAAOa,EAAoBJ,GAAO,EAAE,SAAS,iBAAiB;AAAA,MAC9D,MAAAP;AAAA,MACA,cAAYC;AAAA,MACZ,eAAaC;AAAA,MACb,oBAAkBC;AAAA,MAClB,mBAAiBC;AAAA,MACjB,iBAAeC;AAAA,MACf,iBAAeC;AAAA,MACf,KAAAE;AAAA,MAEC,UAAAT;AAAA,IAAA;AAAA,EACL;AAGZ;AACAJ,EAAK,cAAc;"}

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,8 +1,8 @@
-import { jsx as b } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-import { propsToCssVariables as m } from "./fondue-components25.js";
-import c from "./fondue-components47.js";
-const f = n(
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { propsToCssVariables as c } from "./fondue-components25.js";
+import f from "./fondue-components48.js";
+const y = m(
   ({
     "data-test-id": a = "fondue-section",
     children: e,
@@ -14,12 +14,12 @@ const f = n(
     "aria-expanded": t,
     "aria-haspopup": p,
     ...l
-  }) => /* @__PURE__ */ b(
+  }, b) => /* @__PURE__ */ n(
     "section",
     {
-      className: c.root,
+      className: f.root,
       "data-test-id": a,
-      style: m(l),
+      style: c(l),
       role: r,
       "aria-label": i,
       "aria-hidden": o,
@@ -27,12 +27,13 @@ const f = n(
       "aria-labelledby": s,
       "aria-expanded": t,
       "aria-haspopup": p,
+      ref: b,
       children: e
     }
   )
 );
-f.displayName = "Section";
+y.displayName = "Section";
 export {
-  f as Section
+  y 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 { 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;"}
+{"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        {\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        },\n        ref,\n    ) => {\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                ref={ref}\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","ref","jsx","styles","propsToCssVariables"],"mappings":";;;;AAqBO,MAAMA,IAAUC;AAAA,EACnB,CACI;AAAA,IACI,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,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAO;AAAA,MAClB,gBAAcZ;AAAA,MACd,OAAOa,EAAoBJ,CAAK;AAAA,MAChC,MAAAP;AAAA,MACA,cAAYC;AAAA,MACZ,eAAaC;AAAA,MACb,oBAAkBC;AAAA,MAClB,mBAAiBC;AAAA,MACjB,iBAAeC;AAAA,MACf,iBAAeC;AAAA,MACf,KAAAE;AAAA,MAEC,UAAAT;AAAA,IAAA;AAAA,EACL;AAGZ;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

@@ -1,31 +1,32 @@
-import { jsxs as n, jsx as o } from "react/jsx-runtime";
-import { IconCaretDown as D, IconCheckMark as j, IconExclamationMarkTriangle as E } from "@frontify/fondue-icons";
-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";
-const g = ({
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { IconCaretDown as j, IconCheckMark as E, IconExclamationMarkTriangle as H } from "@frontify/fondue-icons";
+import * as g from "@radix-ui/react-popover";
+import { Slot as T } from "@radix-ui/react-slot";
+import { useSelect as V } from "downshift";
+import { forwardRef as $, useRef as A, useState as q } from "react";
+import { ForwardedRefCombobox as J } from "./fondue-components51.js";
+import { ForwardedRefSelectItem as K, ForwardedRefSelectItemGroup as L } from "./fondue-components52.js";
+import { SelectMenu as Q } from "./fondue-components53.js";
+import { ForwardedRefSelectSlot as U } from "./fondue-components54.js";
+import a from "./fondue-components55.js";
+import { useSelectData as W } from "./fondue-components56.js";
+const S = ({
   children: h,
-  onSelect: i,
+  onSelect: s,
   value: I,
-  defaultValue: N,
-  placeholder: b = "",
-  status: s = "neutral",
+  defaultValue: b,
+  placeholder: N = "",
+  status: l = "neutral",
   disabled: m,
   alignMenu: C = "start",
-  "aria-label": w,
-  "data-test-id": l = "fondue-select"
+  side: w = "bottom",
+  "aria-label": x,
+  "data-test-id": c = "fondue-select"
 }, d) => {
-  const { inputSlots: x, menuSlots: R, items: y, clearButton: u, getItemByValue: p } = U(h), F = p(N), k = p(I), c = $(!1), [v, f] = A(!1), { getToggleButtonProps: M, getMenuProps: P, getItemProps: B, reset: G, selectedItem: r, isOpen: O, highlightedIndex: z } = T({
-    items: y,
-    defaultSelectedItem: F,
-    selectedItem: k,
+  const { inputSlots: R, menuSlots: y, items: F, clearButton: u, getItemByValue: p } = W(h), k = p(b), v = p(I), n = A(!1), [M, f] = q(!1), { getToggleButtonProps: P, getMenuProps: B, getItemProps: G, reset: O, selectedItem: r, isOpen: z, highlightedIndex: D } = V({
+    items: F,
+    defaultSelectedItem: k,
+    selectedItem: v,
     onIsOpenChange: () => {
       f(!1);
     },
@@ -33,65 +34,65 @@ const g = ({
       f(!0);
     },
     onSelectedItemChange: ({ selectedItem: e }) => {
-      i && i(e == null ? void 0 : e.value);
+      s == null || s((e == null ? void 0 : e.value) ?? null);
     },
     itemToString: (e) => e ? e.label : ""
   });
-  return /* @__PURE__ */ n(S.Root, { open: O, children: [
+  return /* @__PURE__ */ i(g.Root, { open: z, children: [
     /* @__PURE__ */ o(
-      S.Anchor,
+      g.Anchor,
       {
         asChild: !0,
         onMouseDown: (e) => {
-          c.current = !0, e.currentTarget.dataset.showFocusRing = "false";
+          n.current = !0, e.currentTarget.dataset.showFocusRing = "false";
         },
         onFocus: (e) => {
-          c.current || (e.target.dataset.showFocusRing = "true");
+          n.current || (e.target.dataset.showFocusRing = "true");
         },
         onBlur: (e) => {
-          e.target.dataset.showFocusRing = "false", c.current = !1;
+          e.target.dataset.showFocusRing = "false", n.current = !1;
         },
-        children: /* @__PURE__ */ n(
+        children: /* @__PURE__ */ i(
           "div",
           {
             className: a.root,
-            "data-status": s,
+            "data-status": l,
             "data-disabled": m,
             "data-empty": !r,
-            "data-test-id": l,
-            ...m ? {} : M({
-              "aria-label": w,
+            "data-test-id": c,
+            ...m ? {} : P({
+              "aria-label": x,
               ...d ? { ref: d } : {}
             }),
             children: [
-              /* @__PURE__ */ o("span", { className: a.selectedValue, children: r ? r.label : b }),
-              x,
+              /* @__PURE__ */ o("span", { className: a.selectedValue, children: r ? r.label : N }),
+              R,
               u && /* @__PURE__ */ o(
-                H,
+                T,
                 {
                   onClick: (e) => {
-                    e.stopPropagation(), G();
+                    e.stopPropagation(), O();
                   },
                   className: a.clear,
                   children: u
                 }
               ),
-              /* @__PURE__ */ n("div", { className: a.icons, children: [
-                /* @__PURE__ */ o(D, { size: 16, className: a.caret }),
-                s === "success" ? /* @__PURE__ */ o(
-                  j,
+              /* @__PURE__ */ i("div", { className: a.icons, children: [
+                /* @__PURE__ */ o(j, { size: 16, className: a.caret }),
+                l === "success" ? /* @__PURE__ */ o(
+                  E,
                   {
                     size: 16,
                     className: a.iconSuccess,
-                    "data-test-id": `${l}-success-icon`
+                    "data-test-id": `${c}-success-icon`
                   }
                 ) : null,
-                s === "error" ? /* @__PURE__ */ o(
-                  E,
+                l === "error" ? /* @__PURE__ */ o(
+                  H,
                   {
                     size: 16,
                     className: a.iconError,
-                    "data-test-id": `${l}-error-icon`
+                    "data-test-id": `${c}-error-icon`
                   }
                 ) : null
               ] })
@@ -101,33 +102,34 @@ const g = ({
       }
     ),
     /* @__PURE__ */ o(
-      L,
+      Q,
       {
         align: C,
-        highlightedIndex: z,
-        getMenuProps: P,
-        getItemProps: B,
+        side: w,
+        highlightedIndex: D,
+        getMenuProps: B,
+        getItemProps: G,
         selectedItem: r,
-        hasInteractedSinceOpening: v,
-        children: R
+        hasInteractedSinceOpening: M,
+        children: y
       }
     )
   ] });
 };
-g.displayName = "Select";
-const W = V(g), t = W;
+S.displayName = "Select";
+const X = $(S), t = X;
 t.displayName = "Select";
-t.Combobox = q;
+t.Combobox = J;
 t.Combobox.displayName = "Select.Combobox";
-t.Item = J;
+t.Item = K;
 t.Item.displayName = "Select.Item";
-t.Group = K;
+t.Group = L;
 t.Group.displayName = "Select.Group";
-t.Slot = Q;
+t.Slot = U;
 t.Slot.displayName = "Select.Slot";
 export {
-  W as ForwardedRefSelect,
+  X as ForwardedRefSelect,
   t as Select,
-  g as SelectInput
+  S as SelectInput
 };
 //# sourceMappingURL=fondue-components18.js.map