@frontify/fondue-components 14.2.0 → 14.3.0

package/dist/fondue-components12.js

@@ -1,13 +1,13 @@
-import { jsx as a, jsxs as l } from "react/jsx-runtime";
-import { IconCross as b } from "@frontify/fondue-icons";
+import { jsx as a, jsxs as u } from "react/jsx-runtime";
+import { IconCross as R } from "@frontify/fondue-icons";
 import * as i from "@radix-ui/react-popover";
 import { forwardRef as s } from "react";
 import { addAutoFocusAttribute as w, addShowFocusRing as x } from "./fondue-components44.js";
 import { useFondueTheme as P, ThemeProvider as T } from "./fondue-components28.js";
-import d from "./fondue-components50.js";
+import r from "./fondue-components50.js";
 const n = ({ children: t, ...o }) => /* @__PURE__ */ a(i.Root, { ...o, children: t });
 n.displayName = "Flyout.Root";
-const c = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-trigger", ...r }, u) => /* @__PURE__ */ a(
+const c = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-trigger", ...d }, l) => /* @__PURE__ */ a(
   i.Trigger,
   {
     onMouseDown: w,
@@ -15,8 +15,8 @@ const c = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-tr
     "data-auto-focus-trigger": !0,
     "data-test-id": e,
     asChild: t,
-    ref: u,
-    ...r,
+    ref: l,
+    ...d,
     children: o
   }
 );
@@ -29,31 +29,31 @@ const A = {
   align: t = "start",
   maxWidth: o = "360px",
   padding: e = "compact",
-  rounded: r = "medium",
-  width: u = "fit-content",
+  rounded: d = "medium",
+  width: l = "fit-content",
   shadow: F = "medium",
   triggerOffset: g = "compact",
   "data-test-id": h = "fondue-flyout-content",
   children: N,
   ...v
-}, C) => {
-  const R = P();
-  return /* @__PURE__ */ a(i.Portal, { children: /* @__PURE__ */ l(T, { theme: R, children: [
-    /* @__PURE__ */ a("div", { className: d.overlay }),
+}, b) => {
+  const C = P();
+  return /* @__PURE__ */ a(i.Portal, { children: /* @__PURE__ */ u(T, { theme: C, children: [
+    /* @__PURE__ */ a("div", { className: r.overlay }),
     /* @__PURE__ */ a(
       i.Content,
       {
         style: {
           "--flyout-max-width": o,
-          "--flyout-width": u
+          "--flyout-width": l
         },
-        ref: C,
+        ref: b,
         align: t,
         collisionPadding: 8,
         sideOffset: A[g],
-        className: d.root,
+        className: r.root,
         "data-flyout-spacing": e,
-        "data-rounded": r,
+        "data-rounded": d,
         "data-shadow": F,
         "data-test-id": h,
         onFocus: x,
@@ -64,14 +64,24 @@ const A = {
   ] }) });
 };
 m.displayName = "Flyout.Content";
-const y = ({ 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: [
+const y = ({ showCloseButton: t, children: o, "data-test-id": e = "fondue-flyout-header" }, d) => /* @__PURE__ */ u("div", { "data-test-id": e, ref: d, className: r.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(b, { size: 20 }) })
+  t && /* @__PURE__ */ a(i.Close, { role: "button", "data-test-id": `${e}-close`, className: r.close, children: /* @__PURE__ */ a(R, { size: 20 }) })
 ] });
 y.displayName = "Flyout.Header";
-const f = ({ children: t, "data-test-id": o = "fondue-flyout-footer" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: d.footer, children: t });
+const f = ({ children: t, "data-test-id": o = "fondue-flyout-footer" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: r.footer, children: t });
 f.displayName = "Flyout.Footer";
-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 });
+const p = ({ children: t, "data-test-id": o = "fondue-flyout-body", scrollable: e = !1 }, d) => /* @__PURE__ */ a(
+  "div",
+  {
+    "data-test-id": o,
+    ref: d,
+    "data-flyout-spacing": "compact",
+    "data-scrollable": e,
+    className: r.body,
+    children: t
+  }
+);
 p.displayName = "Flyout.Body";
 const D = {
   Root: n,

package/dist/fondue-components12.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components12.js","sources":["../src/components/Flyout/Flyout.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { forwardRef, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/flyout.module.scss';\n\nexport type FlyoutRootProps = {\n    /**\n     * Disable interaction with the rest of the page\n     * @default false\n     */\n    modal?: boolean;\n    /**\n     * The controlled `open` state of the flyout\n     * @default false\n     */\n    open?: boolean;\n    /**\n     * Event handler called when the `open` state changes\n     */\n    onOpenChange?: (open: boolean) => void;\n    children?: ReactNode;\n};\n\nexport const FlyoutRoot = ({ children, ...props }: FlyoutRootProps) => {\n    return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\nFlyoutRoot.displayName = 'Flyout.Root';\n\nexport type FlyoutTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default true\n     */\n    asChild?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-flyout-trigger', ...props }: FlyoutTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixPopover.Trigger\n            onMouseDown={addAutoFocusAttribute}\n            data-auto-focus-visible=\"true\"\n            data-auto-focus-trigger\n            data-test-id={dataTestId}\n            asChild={asChild}\n            ref={ref}\n            {...props}\n        >\n            {children}\n        </RadixPopover.Trigger>\n    );\n};\nFlyoutTrigger.displayName = 'Flyout.Trigger';\n\ntype FlyoutSpacing = 'compact' | 'comfortable' | 'spacious';\nexport type FlyoutContentProps = {\n    /**\n     * Add a shadow to the flyout\n     * @default \"medium\"\n     */\n    shadow?: 'none' | 'medium' | 'large';\n    /**\n     * Add rounded corners to the flyout\n     * @default \"medium\"\n     */\n    rounded?: 'none' | 'medium' | 'large';\n    /**\n     * Define the prefered side of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    /**\n     * Define the prefered alignment of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Define the padding of the flyout\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Define the fixed width of the flyout\n     * @default \"fit-content\"\n     */\n    width?: string;\n    /**\n     * Defines the spacing between the dropdown and its trigger.\n     * @default 'compact'\n     */\n    triggerOffset?: FlyoutSpacing;\n    /**\n     * Define the maximum width of the flyout\n     * @default \"360px\"\n     */\n    maxWidth?: string;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nconst SPACING_MAP: Record<FlyoutSpacing, number> = {\n    compact: 8,\n    comfortable: 12,\n    spacious: 16,\n};\n\nexport const FlyoutContent = (\n    {\n        align = 'start',\n        maxWidth = '360px',\n        padding = 'compact',\n        rounded = 'medium',\n        width = 'fit-content',\n        shadow = 'medium',\n        triggerOffset = 'compact',\n        '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={SPACING_MAP[triggerOffset]}\n                    className={styles.root}\n                    data-flyout-spacing={padding}\n                    data-rounded={rounded}\n                    data-shadow={shadow}\n                    data-test-id={dataTestId}\n                    onFocus={addShowFocusRing}\n                    {...props}\n                >\n                    {children}\n                </RadixPopover.Content>\n            </ThemeProvider>\n        </RadixPopover.Portal>\n    );\n};\nFlyoutContent.displayName = 'Flyout.Content';\n\nexport type FlyoutHeaderProps = {\n    /**\n     * Show a close button in the header\n     * @default false\n     */\n    showCloseButton?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutHeader = (\n    { showCloseButton, children, 'data-test-id': dataTestId = 'fondue-flyout-header' }: FlyoutHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.header}>\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixPopover.Close role=\"button\" data-test-id={`${dataTestId}-close`} className={styles.close}>\n                    <IconCross size={20} />\n                </RadixPopover.Close>\n            )}\n        </div>\n    );\n};\nFlyoutHeader.displayName = 'Flyout.Header';\n\nexport type FlyoutFooterProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutFooter = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-footer' }: FlyoutFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.footer}>\n            {children}\n        </div>\n    );\n};\nFlyoutFooter.displayName = 'Flyout.Footer';\n\nexport type FlyoutBodyProps = { 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","SPACING_MAP","FlyoutContent","align","maxWidth","padding","rounded","width","shadow","triggerOffset","theme","useFondueTheme","jsxs","ThemeProvider","styles","addShowFocusRing","FlyoutHeader","showCloseButton","IconCross","FlyoutFooter","FlyoutBody","Flyout","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components12.js","sources":["../src/components/Flyout/Flyout.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { forwardRef, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/flyout.module.scss';\n\nexport type FlyoutRootProps = {\n    /**\n     * Disable interaction with the rest of the page\n     * @default false\n     */\n    modal?: boolean;\n    /**\n     * The controlled `open` state of the flyout\n     * @default false\n     */\n    open?: boolean;\n    /**\n     * Event handler called when the `open` state changes\n     */\n    onOpenChange?: (open: boolean) => void;\n    children?: ReactNode;\n};\n\nexport const FlyoutRoot = ({ children, ...props }: FlyoutRootProps) => {\n    return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\nFlyoutRoot.displayName = 'Flyout.Root';\n\nexport type FlyoutTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default true\n     */\n    asChild?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-flyout-trigger', ...props }: FlyoutTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixPopover.Trigger\n            onMouseDown={addAutoFocusAttribute}\n            data-auto-focus-visible=\"true\"\n            data-auto-focus-trigger\n            data-test-id={dataTestId}\n            asChild={asChild}\n            ref={ref}\n            {...props}\n        >\n            {children}\n        </RadixPopover.Trigger>\n    );\n};\nFlyoutTrigger.displayName = 'Flyout.Trigger';\n\ntype FlyoutSpacing = 'compact' | 'comfortable' | 'spacious';\nexport type FlyoutContentProps = {\n    /**\n     * Add a shadow to the flyout\n     * @default \"medium\"\n     */\n    shadow?: 'none' | 'medium' | 'large';\n    /**\n     * Add rounded corners to the flyout\n     * @default \"medium\"\n     */\n    rounded?: 'none' | 'medium' | 'large';\n    /**\n     * Define the prefered side of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    /**\n     * Define the prefered alignment of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Define the padding of the flyout\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Define the fixed width of the flyout\n     * @default \"fit-content\"\n     */\n    width?: string;\n    /**\n     * Defines the spacing between the dropdown and its trigger.\n     * @default 'compact'\n     */\n    triggerOffset?: FlyoutSpacing;\n    /**\n     * Define the maximum width of the flyout\n     * @default \"360px\"\n     */\n    maxWidth?: string;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nconst SPACING_MAP: Record<FlyoutSpacing, number> = {\n    compact: 8,\n    comfortable: 12,\n    spacious: 16,\n};\n\nexport const FlyoutContent = (\n    {\n        align = 'start',\n        maxWidth = '360px',\n        padding = 'compact',\n        rounded = 'medium',\n        width = 'fit-content',\n        shadow = 'medium',\n        triggerOffset = 'compact',\n        '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={SPACING_MAP[triggerOffset]}\n                    className={styles.root}\n                    data-flyout-spacing={padding}\n                    data-rounded={rounded}\n                    data-shadow={shadow}\n                    data-test-id={dataTestId}\n                    onFocus={addShowFocusRing}\n                    {...props}\n                >\n                    {children}\n                </RadixPopover.Content>\n            </ThemeProvider>\n        </RadixPopover.Portal>\n    );\n};\nFlyoutContent.displayName = 'Flyout.Content';\n\nexport type FlyoutHeaderProps = {\n    /**\n     * Show a close button in the header\n     * @default false\n     */\n    showCloseButton?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutHeader = (\n    { showCloseButton, children, 'data-test-id': dataTestId = 'fondue-flyout-header' }: FlyoutHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.header}>\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixPopover.Close role=\"button\" data-test-id={`${dataTestId}-close`} className={styles.close}>\n                    <IconCross size={20} />\n                </RadixPopover.Close>\n            )}\n        </div>\n    );\n};\nFlyoutHeader.displayName = 'Flyout.Header';\n\nexport type FlyoutFooterProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutFooter = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-footer' }: FlyoutFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.footer}>\n            {children}\n        </div>\n    );\n};\nFlyoutFooter.displayName = 'Flyout.Footer';\n\nexport type FlyoutBodyProps = {\n    children?: ReactNode;\n    'data-test-id'?: string;\n    /**\n     * Allow the body to scroll if the max height of the flyout is reached\n     * @default false\n     */\n    scrollable?: boolean;\n};\n\nexport const FlyoutBody = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-body', scrollable = false }: FlyoutBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            data-flyout-spacing=\"compact\"\n            data-scrollable={scrollable}\n            className={styles.body}\n        >\n            {children}\n        </div>\n    );\n};\nFlyoutBody.displayName = 'Flyout.Body';\n\nexport const Flyout = {\n    Root: FlyoutRoot,\n    Trigger: forwardRef<HTMLButtonElement, FlyoutTriggerProps>(FlyoutTrigger),\n    Content: forwardRef<HTMLDivElement, FlyoutContentProps>(FlyoutContent),\n    Header: forwardRef<HTMLDivElement, FlyoutHeaderProps>(FlyoutHeader),\n    Footer: forwardRef<HTMLDivElement, FlyoutFooterProps>(FlyoutFooter),\n    Body: forwardRef<HTMLDivElement, FlyoutBodyProps>(FlyoutBody),\n};\n"],"names":["FlyoutRoot","children","props","RadixPopover","FlyoutTrigger","asChild","dataTestId","ref","jsx","addAutoFocusAttribute","SPACING_MAP","FlyoutContent","align","maxWidth","padding","rounded","width","shadow","triggerOffset","theme","useFondueTheme","jsxs","ThemeProvider","styles","addShowFocusRing","FlyoutHeader","showCloseButton","IconCross","FlyoutFooter","FlyoutBody","scrollable","Flyout","forwardRef"],"mappings":"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"}

package/dist/fondue-components50.js

@@ -1,18 +1,18 @@
-const o = "_root_xbnxk_6", e = "_overlay_xbnxk_50", _ = "_header_xbnxk_67", t = "_body_xbnxk_87", n = "_footer_xbnxk_105", r = "_close_xbnxk_125", s = {
+const o = "_root_hstbt_6", t = "_overlay_hstbt_51", s = "_header_hstbt_68", e = "_body_hstbt_89", _ = "_footer_hstbt_114", r = "_close_hstbt_135", c = {
   root: o,
-  overlay: e,
-  header: _,
-  body: t,
-  footer: n,
+  overlay: t,
+  header: s,
+  body: e,
+  footer: _,
   close: r
 };
 export {
-  t as body,
+  e as body,
   r as close,
-  s as default,
-  n as footer,
-  _ as header,
-  e as overlay,
+  c as default,
+  _ as footer,
+  s as header,
+  t as overlay,
   o as root
 };
 //# sourceMappingURL=fondue-components50.js.map

package/dist/fondue-components58.js

@@ -1,9 +1,9 @@
-const t = "_root_o1xgk_5", e = "_item_o1xgk_30", o = "_itemLabel_o1xgk_50", a = "_itemLabelActive_o1xgk_70", i = "_itemLabelInactive_o1xgk_100", _ = "_activeIndicator_o1xgk_130", c = "_separator_o1xgk_227", n = {
+const t = "_root_1yzu4_5", e = "_item_1yzu4_30", a = "_itemLabel_1yzu4_50", i = "_itemLabelActive_1yzu4_70", o = "_itemLabelInactive_1yzu4_100", _ = "_activeIndicator_1yzu4_130", c = "_separator_1yzu4_227", n = {
   root: t,
   item: e,
-  itemLabel: o,
-  itemLabelActive: a,
-  itemLabelInactive: i,
+  itemLabel: a,
+  itemLabelActive: i,
+  itemLabelInactive: o,
   activeIndicator: _,
   separator: c
 };
@@ -11,9 +11,9 @@ export {
   _ as activeIndicator,
   n as default,
   e as item,
-  o as itemLabel,
-  a as itemLabelActive,
-  i as itemLabelInactive,
+  a as itemLabel,
+  i as itemLabelActive,
+  o as itemLabelInactive,
   t as root,
   c as separator
 };

package/dist/fondue-components63.js

@@ -1,36 +1,36 @@
-const o = "_root_o7dw5_7", c = "_selectedValue_o7dw5_69", _ = "_input_o7dw5_87", t = "_slot_o7dw5_113", e = "_clear_o7dw5_165", n = "_icons_o7dw5_178", s = "_caret_o7dw5_184", r = "_iconSuccess_o7dw5_212", a = "_iconError_o7dw5_218", l = "_menu_o7dw5_224", d = "_portal_o7dw5_247", u = "_item_o7dw5_263", i = "_checkmarkIcon_o7dw5_304", w = "_itemValue_o7dw5_311", m = "_group_o7dw5_325", p = {
-  root: o,
-  selectedValue: c,
-  input: _,
-  slot: t,
-  clear: e,
-  icons: n,
+const c = "_root_9n1pi_7", n = "_selectedValue_9n1pi_69", o = "_input_9n1pi_87", _ = "_slot_9n1pi_113", t = "_clear_9n1pi_165", e = "_icons_9n1pi_178", s = "_caret_9n1pi_184", i = "_iconSuccess_9n1pi_212", r = "_iconError_9n1pi_218", p = "_menu_9n1pi_224", a = "_portal_9n1pi_247", l = "_item_9n1pi_263", u = "_checkmarkIcon_9n1pi_304", m = "_itemValue_9n1pi_311", k = "_group_9n1pi_325", V = {
+  root: c,
+  selectedValue: n,
+  input: o,
+  slot: _,
+  clear: t,
+  icons: e,
   caret: s,
-  iconSuccess: r,
-  iconError: a,
-  menu: l,
-  portal: d,
-  item: u,
-  checkmarkIcon: i,
-  itemValue: w,
-  group: m
+  iconSuccess: i,
+  iconError: r,
+  menu: p,
+  portal: a,
+  item: l,
+  checkmarkIcon: u,
+  itemValue: m,
+  group: k
 };
 export {
   s as caret,
-  i as checkmarkIcon,
-  e as clear,
-  p as default,
-  m as group,
-  a as iconError,
-  r as iconSuccess,
-  n as icons,
-  _ as input,
-  u as item,
-  w as itemValue,
-  l as menu,
-  d as portal,
-  o as root,
-  c as selectedValue,
-  t as slot
+  u as checkmarkIcon,
+  t as clear,
+  V as default,
+  k as group,
+  r as iconError,
+  i as iconSuccess,
+  e as icons,
+  o as input,
+  l as item,
+  m as itemValue,
+  p as menu,
+  a as portal,
+  c as root,
+  n as selectedValue,
+  _ as slot
 };
 //# sourceMappingURL=fondue-components63.js.map

package/dist/index.d.ts

@@ -765,6 +765,11 @@ export declare const Flyout: {
 declare type FlyoutBodyProps = {
     children?: ReactNode;
     'data-test-id'?: string;
+    /**
+     * Allow the body to scroll if the max height of the flyout is reached
+     * @default false
+     */
+    scrollable?: boolean;
 };
 
 declare type FlyoutContentProps = {