@frontify/fondue-components 3.2.0 → 3.3.0

package/dist/fondue-components7.js

@@ -1,85 +1,95 @@
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { jsx as a, jsxs as b } from "react/jsx-runtime";
 import { IconCross as w } from "@frontify/fondue-icons";
 import * as i from "@radix-ui/react-dialog";
 import { forwardRef as d } from "react";
-import l from "./fondue-components34.js";
-const n = ({ children: t, ...a }) => /* @__PURE__ */ o(i.Root, { ...a, children: t });
-n.displayName = "Dialog.Root";
-const g = ({ children: t, "data-test-id": a = "fondue-dialog-trigger" }, e) => /* @__PURE__ */ o(i.Trigger, { "data-test-id": a, asChild: !0, ref: e, children: t });
-g.displayName = "Dialog.Trigger";
-const c = ({
+import { addAutoFocusAttribute as F, addShowFocusRing as S } from "./fondue-components35.js";
+import r from "./fondue-components36.js";
+const s = ({ children: t, ...o }) => /* @__PURE__ */ a(i.Root, { ...o, children: t });
+s.displayName = "Dialog.Root";
+const n = ({ children: t, "data-test-id": o = "fondue-dialog-trigger" }, e) => /* @__PURE__ */ a(
+  i.Trigger,
+  {
+    onMouseDown: F,
+    "data-auto-focus-visible": "true",
+    "data-auto-focus-trigger": !0,
+    "data-test-id": o,
+    asChild: !0,
+    ref: e,
+    children: t
+  }
+);
+n.displayName = "Dialog.Trigger";
+const g = ({
   maxWidth: t = "800px",
-  minWidth: a = "400px",
+  minWidth: o = "400px",
   minHeight: e = "200px",
-  padding: r = "compact",
-  verticalAlign: C = "center",
-  "data-test-id": h = "fondue-dialog-content",
-  showUnderlay: v = !1,
-  children: x,
-  rounded: T = !0,
+  padding: l = "compact",
+  verticalAlign: N = "center",
+  "data-test-id": C = "fondue-dialog-content",
+  showUnderlay: h = !1,
+  children: v,
+  rounded: x = !0,
   ...R
-}, b) => /* @__PURE__ */ s(i.Portal, { children: [
-  /* @__PURE__ */ o(i.Overlay, { "data-visible": v, className: l.underlay }),
-  /* @__PURE__ */ o(
-    i.Content,
-    {
-      style: {
-        "--dialog-max-width": t,
-        "--dialog-min-width": a,
-        "--dialog-min-height": e
-      },
-      ref: b,
-      className: l.content,
-      "data-dialog-rounded": T,
-      "data-dialog-spacing": r,
-      "data-test-id": h,
-      "data-dialog-vertical-align": C,
-      ...R,
-      children: x
-    }
-  )
+}, T) => /* @__PURE__ */ a(i.Portal, { children: /* @__PURE__ */ a(i.Overlay, { "data-visible": h, className: r.underlay, children: /* @__PURE__ */ a(
+  i.Content,
+  {
+    style: {
+      "--dialog-max-width": t,
+      "--dialog-min-width": o,
+      "--dialog-min-height": e
+    },
+    ref: T,
+    className: r.content,
+    onFocus: S,
+    "data-dialog-rounded": x,
+    "data-dialog-spacing": l,
+    "data-test-id": C,
+    "data-dialog-vertical-align": N,
+    ...R,
+    children: v
+  }
+) }) });
+g.displayName = "Dialog.Content";
+const c = ({ children: t, showCloseButton: o = !0, "data-test-id": e = "fondue-dialog-header" }, l) => /* @__PURE__ */ b("div", { "data-test-id": e, ref: l, className: r.header, "data-dialog-layout-component": !0, children: [
+  /* @__PURE__ */ a("div", { children: t }),
+  o && /* @__PURE__ */ a(i.Close, { role: "button", "data-test-id": `${e}-close`, className: "tw-cursor-pointer", children: /* @__PURE__ */ a(w, { size: 20 }) })
 ] });
-c.displayName = "Dialog.Content";
-const m = ({ children: t, showCloseButton: a = !0, "data-test-id": e = "fondue-dialog-header" }, r) => /* @__PURE__ */ s("div", { "data-test-id": e, ref: r, className: l.header, "data-dialog-layout-component": !0, children: [
-  /* @__PURE__ */ o("div", { children: t }),
-  a && /* @__PURE__ */ o(i.Close, { role: "button", "data-test-id": `${e}-close`, className: "tw-cursor-pointer", children: /* @__PURE__ */ o(w, { size: 20 }) })
-] });
-m.displayName = "Dialog.Header";
-const u = ({ children: t, "data-test-id": a = "fondue-dialog-footer" }, e) => /* @__PURE__ */ o("div", { "data-test-id": a, ref: e, className: l.footer, "data-dialog-layout-component": !0, children: t });
+c.displayName = "Dialog.Header";
+const u = ({ children: t, "data-test-id": o = "fondue-dialog-footer" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: r.footer, "data-dialog-layout-component": !0, children: t });
 u.displayName = "Dialog.Footer";
-const p = ({ children: t, "data-test-id": a = "fondue-dialog-body" }, e) => /* @__PURE__ */ o("div", { "data-test-id": a, ref: e, className: l.body, "data-dialog-layout-component": !0, children: t });
-p.displayName = "Dialog.Body";
-const D = ({ children: t, "data-test-id": a = "fondue-dialog-side-content" }, e) => /* @__PURE__ */ o("div", { "data-test-id": a, ref: e, className: l.sideContent, "data-dialog-layout-component": !0, children: t });
-D.displayName = "Dialog.SideContent";
-const y = ({ children: t }) => /* @__PURE__ */ o(i.Close, { asChild: !0, children: t });
-y.displayName = "Dialog.Close";
-const N = ({ children: t, asChild: a }) => /* @__PURE__ */ o(i.Title, { asChild: a, children: t });
-N.displayName = "Dialog.Title";
-const f = ({ children: t, asChild: a }) => /* @__PURE__ */ o(i.Description, { asChild: a, children: t });
+const m = ({ children: t, "data-test-id": o = "fondue-dialog-body" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: r.body, "data-dialog-layout-component": !0, children: t });
+m.displayName = "Dialog.Body";
+const p = ({ children: t, "data-test-id": o = "fondue-dialog-side-content" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: r.sideContent, "data-dialog-layout-component": !0, children: t });
+p.displayName = "Dialog.SideContent";
+const D = ({ children: t }) => /* @__PURE__ */ a(i.Close, { asChild: !0, children: t });
+D.displayName = "Dialog.Close";
+const y = ({ children: t, asChild: o }) => /* @__PURE__ */ a(i.Title, { asChild: o, children: t });
+y.displayName = "Dialog.Title";
+const f = ({ children: t, asChild: o }) => /* @__PURE__ */ a(i.Description, { asChild: o, children: t });
 f.displayName = "Dialog.Description";
-const j = {
-  Root: n,
-  Title: N,
+const M = {
+  Root: s,
+  Title: y,
   Description: f,
-  Close: y,
-  Trigger: d(g),
-  Content: d(c),
-  Header: d(m),
+  Close: D,
+  Trigger: d(n),
+  Content: d(g),
+  Header: d(c),
   Footer: d(u),
-  Body: d(p),
-  SideContent: d(D)
+  Body: d(m),
+  SideContent: d(p)
 };
 export {
-  j as Dialog,
-  p as DialogBody,
-  y as DialogClose,
-  c as DialogContent,
+  M as Dialog,
+  m as DialogBody,
+  D as DialogClose,
+  g as DialogContent,
   f as DialogDescription,
   u as DialogFooter,
-  m as DialogHeader,
-  n as DialogRoot,
-  D as DialogSideContent,
-  N as DialogTitle,
-  g as DialogTrigger
+  c as DialogHeader,
+  s as DialogRoot,
+  p as DialogSideContent,
+  y as DialogTitle,
+  n as DialogTrigger
 };
 //# sourceMappingURL=fondue-components7.js.map

package/dist/fondue-components7.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components7.js","sources":["../src/components/Dialog/Dialog.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixDialog from '@radix-ui/react-dialog';\nimport { forwardRef, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport styles from './styles/dialog.module.scss';\n\nexport type DialogRootProps = {\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 dialog\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 type DialogContentProps = {\n    /**\n     * Add rounded corners to the dialog\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * Define the padding of the dialog\n     * @default \"compact\"\n     */\n    padding?: 'compact' | 'comfortable' | 'spacious';\n    /**\n     * The vertical alignment of the divider\n     * @default \"center\"\n     */\n    verticalAlign?: 'top' | 'center';\n\n    /**\n     * Define a maximum width for the dialog\n     * @default \"800px\"\n     */\n    maxWidth?: string;\n    /**\n     * Define a minimum width for the dialog\n     * @default \"400px\"\n     */\n    minWidth?: string;\n    /**\n     * Define a maximum height for the dialog\n     * @default \"200px\"\n     */\n    minHeight?: string;\n    /**\n     * Show a dark underlay behind the dialog\n     * @default false\n     */\n    showUnderlay?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogTriggerProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogHeaderProps = {\n    /**\n     * Show a close button in the header\n     * @default true\n     */\n    showCloseButton?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogFooterProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogBodyProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogSideContentProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogCloseProps = { children?: ReactNode };\n\nexport type DialogAnnouncementProps = { children?: ReactNode; asChild?: boolean };\n\nexport const DialogRoot = ({ children, ...props }: DialogRootProps) => {\n    return <RadixDialog.Root {...props}>{children}</RadixDialog.Root>;\n};\nDialogRoot.displayName = 'Dialog.Root';\n\nexport const DialogTrigger = (\n    { children, 'data-test-id': dataTestId = 'fondue-dialog-trigger' }: DialogTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDialog.Trigger data-test-id={dataTestId} asChild ref={ref}>\n            {children}\n        </RadixDialog.Trigger>\n    );\n};\nDialogTrigger.displayName = 'Dialog.Trigger';\n\nexport const DialogContent = (\n    {\n        maxWidth = '800px',\n        minWidth = '400px',\n        minHeight = '200px',\n        padding = 'compact',\n        verticalAlign = 'center',\n        'data-test-id': dataTestId = 'fondue-dialog-content',\n        showUnderlay = false,\n        children,\n        rounded = true,\n        ...props\n    }: DialogContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDialog.Portal>\n            <RadixDialog.Overlay data-visible={showUnderlay} className={styles.underlay} />\n            <RadixDialog.Content\n                style={\n                    {\n                        '--dialog-max-width': maxWidth,\n                        '--dialog-min-width': minWidth,\n                        '--dialog-min-height': minHeight,\n                    } as CSSProperties\n                }\n                ref={ref}\n                className={styles.content}\n                data-dialog-rounded={rounded}\n                data-dialog-spacing={padding}\n                data-test-id={dataTestId}\n                data-dialog-vertical-align={verticalAlign}\n                {...props}\n            >\n                {children}\n            </RadixDialog.Content>\n        </RadixDialog.Portal>\n    );\n};\nDialogContent.displayName = 'Dialog.Content';\n\nexport const DialogHeader = (\n    { children, showCloseButton = true, 'data-test-id': dataTestId = 'fondue-dialog-header' }: DialogHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.header} data-dialog-layout-component>\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixDialog.Close role=\"button\" data-test-id={`${dataTestId}-close`} className=\"tw-cursor-pointer\">\n                    <IconCross size={20} />\n                </RadixDialog.Close>\n            )}\n        </div>\n    );\n};\nDialogHeader.displayName = 'Dialog.Header';\n\nexport const DialogFooter = (\n    { children, 'data-test-id': dataTestId = 'fondue-dialog-footer' }: DialogFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.footer} data-dialog-layout-component>\n            {children}\n        </div>\n    );\n};\nDialogFooter.displayName = 'Dialog.Footer';\n\nexport const DialogBody = (\n    { children, 'data-test-id': dataTestId = 'fondue-dialog-body' }: DialogBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.body} data-dialog-layout-component>\n            {children}\n        </div>\n    );\n};\nDialogBody.displayName = 'Dialog.Body';\n\nexport const DialogSideContent = (\n    { children, 'data-test-id': dataTestId = 'fondue-dialog-side-content' }: DialogSideContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.sideContent} data-dialog-layout-component>\n            {children}\n        </div>\n    );\n};\nDialogSideContent.displayName = 'Dialog.SideContent';\n\nexport const DialogClose = ({ children }: DialogCloseProps) => {\n    return <RadixDialog.Close asChild>{children}</RadixDialog.Close>;\n};\nDialogClose.displayName = 'Dialog.Close';\n\nexport const DialogTitle = ({ children, asChild }: DialogAnnouncementProps) => {\n    return <RadixDialog.Title asChild={asChild}>{children}</RadixDialog.Title>;\n};\nDialogTitle.displayName = 'Dialog.Title';\n\nexport const DialogDescription = ({ children, asChild }: DialogAnnouncementProps) => {\n    return <RadixDialog.Description asChild={asChild}>{children}</RadixDialog.Description>;\n};\nDialogDescription.displayName = 'Dialog.Description';\n\nexport const Dialog = {\n    Root: DialogRoot,\n    Title: DialogTitle,\n    Description: DialogDescription,\n    Close: DialogClose,\n    Trigger: forwardRef<HTMLButtonElement, DialogTriggerProps>(DialogTrigger),\n    Content: forwardRef<HTMLDivElement, DialogContentProps>(DialogContent),\n    Header: forwardRef<HTMLDivElement, DialogHeaderProps>(DialogHeader),\n    Footer: forwardRef<HTMLDivElement, DialogFooterProps>(DialogFooter),\n    Body: forwardRef<HTMLDivElement, DialogBodyProps>(DialogBody),\n    SideContent: forwardRef<HTMLDivElement, DialogSideContentProps>(DialogSideContent),\n};\n"],"names":["DialogRoot","children","props","RadixDialog","DialogTrigger","dataTestId","ref","jsx","DialogContent","maxWidth","minWidth","minHeight","padding","verticalAlign","showUnderlay","rounded","jsxs","styles","DialogHeader","showCloseButton","IconCross","DialogFooter","DialogBody","DialogSideContent","DialogClose","DialogTitle","asChild","DialogDescription","Dialog","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components7.js","sources":["../src/components/Dialog/Dialog.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixDialog from '@radix-ui/react-dialog';\nimport { forwardRef, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\n\nimport styles from './styles/dialog.module.scss';\n\nexport type DialogRootProps = {\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 dialog\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 type DialogContentProps = {\n    /**\n     * Add rounded corners to the dialog\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * Define the padding of the dialog\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * The vertical alignment of the divider\n     * @default \"center\"\n     */\n    verticalAlign?: 'top' | 'center';\n\n    /**\n     * Define a maximum width for the dialog\n     * @default \"800px\"\n     */\n    maxWidth?: string;\n    /**\n     * Define a minimum width for the dialog\n     * @default \"400px\"\n     */\n    minWidth?: string;\n    /**\n     * Define a maximum height for the dialog\n     * @default \"200px\"\n     */\n    minHeight?: string;\n    /**\n     * Show a dark underlay behind the dialog\n     * @default false\n     */\n    showUnderlay?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogTriggerProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogHeaderProps = {\n    /**\n     * Show a close button in the header\n     * @default true\n     */\n    showCloseButton?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogFooterProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogBodyProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogSideContentProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogCloseProps = { children?: ReactNode };\n\nexport type DialogAnnouncementProps = { children?: ReactNode; asChild?: boolean };\n\nexport const DialogRoot = ({ children, ...props }: DialogRootProps) => {\n    return <RadixDialog.Root {...props}>{children}</RadixDialog.Root>;\n};\nDialogRoot.displayName = 'Dialog.Root';\n\nexport const DialogTrigger = (\n    { children, 'data-test-id': dataTestId = 'fondue-dialog-trigger' }: DialogTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDialog.Trigger\n            onMouseDown={addAutoFocusAttribute}\n            data-auto-focus-visible=\"true\"\n            data-auto-focus-trigger\n            data-test-id={dataTestId}\n            asChild\n            ref={ref}\n        >\n            {children}\n        </RadixDialog.Trigger>\n    );\n};\nDialogTrigger.displayName = 'Dialog.Trigger';\n\nexport const DialogContent = (\n    {\n        maxWidth = '800px',\n        minWidth = '400px',\n        minHeight = '200px',\n        padding = 'compact',\n        verticalAlign = 'center',\n        'data-test-id': dataTestId = 'fondue-dialog-content',\n        showUnderlay = false,\n        children,\n        rounded = true,\n        ...props\n    }: DialogContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDialog.Portal>\n            <RadixDialog.Overlay data-visible={showUnderlay} className={styles.underlay}>\n                <RadixDialog.Content\n                    style={\n                        {\n                            '--dialog-max-width': maxWidth,\n                            '--dialog-min-width': minWidth,\n                            '--dialog-min-height': minHeight,\n                        } as CSSProperties\n                    }\n                    ref={ref}\n                    className={styles.content}\n                    onFocus={addShowFocusRing}\n                    data-dialog-rounded={rounded}\n                    data-dialog-spacing={padding}\n                    data-test-id={dataTestId}\n                    data-dialog-vertical-align={verticalAlign}\n                    {...props}\n                >\n                    {children}\n                </RadixDialog.Content>\n            </RadixDialog.Overlay>\n        </RadixDialog.Portal>\n    );\n};\nDialogContent.displayName = 'Dialog.Content';\n\nexport const DialogHeader = (\n    { children, showCloseButton = true, 'data-test-id': dataTestId = 'fondue-dialog-header' }: DialogHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.header} data-dialog-layout-component>\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixDialog.Close role=\"button\" data-test-id={`${dataTestId}-close`} className=\"tw-cursor-pointer\">\n                    <IconCross size={20} />\n                </RadixDialog.Close>\n            )}\n        </div>\n    );\n};\nDialogHeader.displayName = 'Dialog.Header';\n\nexport const DialogFooter = (\n    { children, 'data-test-id': dataTestId = 'fondue-dialog-footer' }: DialogFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.footer} data-dialog-layout-component>\n            {children}\n        </div>\n    );\n};\nDialogFooter.displayName = 'Dialog.Footer';\n\nexport const DialogBody = (\n    { children, 'data-test-id': dataTestId = 'fondue-dialog-body' }: DialogBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.body} data-dialog-layout-component>\n            {children}\n        </div>\n    );\n};\nDialogBody.displayName = 'Dialog.Body';\n\nexport const DialogSideContent = (\n    { children, 'data-test-id': dataTestId = 'fondue-dialog-side-content' }: DialogSideContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.sideContent} data-dialog-layout-component>\n            {children}\n        </div>\n    );\n};\nDialogSideContent.displayName = 'Dialog.SideContent';\n\nexport const DialogClose = ({ children }: DialogCloseProps) => {\n    return <RadixDialog.Close asChild>{children}</RadixDialog.Close>;\n};\nDialogClose.displayName = 'Dialog.Close';\n\nexport const DialogTitle = ({ children, asChild }: DialogAnnouncementProps) => {\n    return <RadixDialog.Title asChild={asChild}>{children}</RadixDialog.Title>;\n};\nDialogTitle.displayName = 'Dialog.Title';\n\nexport const DialogDescription = ({ children, asChild }: DialogAnnouncementProps) => {\n    return <RadixDialog.Description asChild={asChild}>{children}</RadixDialog.Description>;\n};\nDialogDescription.displayName = 'Dialog.Description';\n\nexport const Dialog = {\n    Root: DialogRoot,\n    Title: DialogTitle,\n    Description: DialogDescription,\n    Close: DialogClose,\n    Trigger: forwardRef<HTMLButtonElement, DialogTriggerProps>(DialogTrigger),\n    Content: forwardRef<HTMLDivElement, DialogContentProps>(DialogContent),\n    Header: forwardRef<HTMLDivElement, DialogHeaderProps>(DialogHeader),\n    Footer: forwardRef<HTMLDivElement, DialogFooterProps>(DialogFooter),\n    Body: forwardRef<HTMLDivElement, DialogBodyProps>(DialogBody),\n    SideContent: forwardRef<HTMLDivElement, DialogSideContentProps>(DialogSideContent),\n};\n"],"names":["DialogRoot","children","props","RadixDialog","DialogTrigger","dataTestId","ref","jsx","addAutoFocusAttribute","DialogContent","maxWidth","minWidth","minHeight","padding","verticalAlign","showUnderlay","rounded","styles","addShowFocusRing","DialogHeader","showCloseButton","jsxs","IconCross","DialogFooter","DialogBody","DialogSideContent","DialogClose","DialogTitle","asChild","DialogDescription","Dialog","forwardRef"],"mappings":";;;;;;AA2FO,MAAMA,IAAa,CAAC,EAAE,UAAAC,GAAU,GAAGC,0BAC9BC,EAAY,MAAZ,EAAkB,GAAGD,GAAQ,UAAAD,EAAS,CAAA;AAElDD,EAAW,cAAc;AAEZ,MAAAI,IAAgB,CACzB,EAAE,UAAAH,GAAU,gBAAgBI,IAAa,2BACzCC,MAGI,gBAAAC;AAAA,EAACJ,EAAY;AAAA,EAAZ;AAAA,IACG,aAAaK;AAAA,IACb,2BAAwB;AAAA,IACxB,2BAAuB;AAAA,IACvB,gBAAcH;AAAA,IACd,SAAO;AAAA,IACP,KAAAC;AAAA,IAEC,UAAAL;AAAA,EAAA;AAAA;AAIbG,EAAc,cAAc;AAErB,MAAMK,IAAgB,CACzB;AAAA,EACI,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,SAAAC,IAAU;AAAA,EACV,eAAAC,IAAgB;AAAA,EAChB,gBAAgBT,IAAa;AAAA,EAC7B,cAAAU,IAAe;AAAA,EACf,UAAAd;AAAA,EACA,SAAAe,IAAU;AAAA,EACV,GAAGd;AACP,GACAI,MAGK,gBAAAC,EAAAJ,EAAY,QAAZ,EACG,UAAC,gBAAAI,EAAAJ,EAAY,SAAZ,EAAoB,gBAAcY,GAAc,WAAWE,EAAO,UAC/D,UAAA,gBAAAV;AAAA,EAACJ,EAAY;AAAA,EAAZ;AAAA,IACG,OACI;AAAA,MACI,sBAAsBO;AAAA,MACtB,sBAAsBC;AAAA,MACtB,uBAAuBC;AAAA,IAC3B;AAAA,IAEJ,KAAAN;AAAA,IACA,WAAWW,EAAO;AAAA,IAClB,SAASC;AAAA,IACT,uBAAqBF;AAAA,IACrB,uBAAqBH;AAAA,IACrB,gBAAcR;AAAA,IACd,8BAA4BS;AAAA,IAC3B,GAAGZ;AAAA,IAEH,UAAAD;AAAA,EAAA;AAAA,EAET,CAAA,EACJ,CAAA;AAGRQ,EAAc,cAAc;AAEf,MAAAU,IAAe,CACxB,EAAE,UAAAlB,GAAU,iBAAAmB,IAAkB,IAAM,gBAAgBf,IAAa,uBAAuB,GACxFC,MAGI,gBAAAe,EAAC,SAAI,gBAAchB,GAAY,KAAAC,GAAU,WAAWW,EAAO,QAAQ,gCAA4B,IAC3F,UAAA;AAAA,EAAA,gBAAAV,EAAC,SAAK,UAAAN,GAAS;AAAA,EACdmB,KACI,gBAAAb,EAAAJ,EAAY,OAAZ,EAAkB,MAAK,UAAS,gBAAc,GAAGE,CAAU,UAAU,WAAU,qBAC5E,4BAACiB,GAAU,EAAA,MAAM,GAAI,CAAA,GACzB;AAER,EAAA,CAAA;AAGRH,EAAa,cAAc;AAEd,MAAAI,IAAe,CACxB,EAAE,UAAAtB,GAAU,gBAAgBI,IAAa,0BACzCC,MAGI,gBAAAC,EAAC,OAAI,EAAA,gBAAcF,GAAY,KAAAC,GAAU,WAAWW,EAAO,QAAQ,gCAA4B,IAC1F,UAAAhB,EACL,CAAA;AAGRsB,EAAa,cAAc;AAEd,MAAAC,IAAa,CACtB,EAAE,UAAAvB,GAAU,gBAAgBI,IAAa,wBACzCC,MAGI,gBAAAC,EAAC,OAAI,EAAA,gBAAcF,GAAY,KAAAC,GAAU,WAAWW,EAAO,MAAM,gCAA4B,IACxF,UAAAhB,EACL,CAAA;AAGRuB,EAAW,cAAc;AAEZ,MAAAC,IAAoB,CAC7B,EAAE,UAAAxB,GAAU,gBAAgBI,IAAa,gCACzCC,MAGI,gBAAAC,EAAC,OAAI,EAAA,gBAAcF,GAAY,KAAAC,GAAU,WAAWW,EAAO,aAAa,gCAA4B,IAC/F,UAAAhB,EACL,CAAA;AAGRwB,EAAkB,cAAc;AAEzB,MAAMC,IAAc,CAAC,EAAE,UAAAzB,0BAClBE,EAAY,OAAZ,EAAkB,SAAO,IAAE,UAAAF,EAAS,CAAA;AAEhDyB,EAAY,cAAc;AAEnB,MAAMC,IAAc,CAAC,EAAE,UAAA1B,GAAU,SAAA2B,QAC5B,gBAAArB,EAAAJ,EAAY,OAAZ,EAAkB,SAAAyB,GAAmB,UAAA3B,EAAS,CAAA;AAE1D0B,EAAY,cAAc;AAEnB,MAAME,IAAoB,CAAC,EAAE,UAAA5B,GAAU,SAAA2B,QAClC,gBAAArB,EAAAJ,EAAY,aAAZ,EAAwB,SAAAyB,GAAmB,UAAA3B,EAAS,CAAA;AAEhE4B,EAAkB,cAAc;AAEzB,MAAMC,IAAS;AAAA,EAClB,MAAM9B;AAAA,EACN,OAAO2B;AAAA,EACP,aAAaE;AAAA,EACb,OAAOH;AAAA,EACP,SAASK,EAAkD3B,CAAa;AAAA,EACxE,SAAS2B,EAA+CtB,CAAa;AAAA,EACrE,QAAQsB,EAA8CZ,CAAY;AAAA,EAClE,QAAQY,EAA8CR,CAAY;AAAA,EAClE,MAAMQ,EAA4CP,CAAU;AAAA,EAC5D,aAAaO,EAAmDN,CAAiB;AACrF;"}

package/dist/fondue-components8.js

@@ -1,8 +1,8 @@
 import { jsx as m } from "react/jsx-runtime";
 import * as s from "@radix-ui/react-separator";
 import { forwardRef as p } from "react";
-import { cn as f } from "./fondue-components24.js";
-import { dividerStyles as n } from "./fondue-components35.js";
+import { cn as f } from "./fondue-components25.js";
+import { dividerStyles as n } from "./fondue-components37.js";
 const r = ({
   "data-test-id": o = "fondue-divider",
   direction: t = "horizontal",

package/dist/fondue-components9.js

@@ -2,9 +2,9 @@ import { jsx as e, jsxs as T } from "react/jsx-runtime";
 import { IconCaretRight as F } from "@frontify/fondue-icons";
 import * as d from "@radix-ui/react-dropdown-menu";
 import { forwardRef as s, useRef as c } from "react";
-import { usePreventDropdownOverflow as I } from "./fondue-components36.js";
-import { syncRefs as l } from "./fondue-components37.js";
-import a from "./fondue-components38.js";
+import { usePreventDropdownOverflow as I } from "./fondue-components38.js";
+import { syncRefs as l } from "./fondue-components35.js";
+import a from "./fondue-components39.js";
 const m = ({
   children: o,
   open: t,

package/dist/index.d.ts

@@ -330,7 +330,7 @@ declare type DialogContentProps = {
      * Define the padding of the dialog
      * @default "compact"
      */
-    padding?: 'compact' | 'comfortable' | 'spacious';
+    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';
     /**
      * The vertical alignment of the divider
      * @default "center"
@@ -615,7 +615,7 @@ declare type FlyoutContentProps = {
      * Define the padding of the flyout
      * @default "compact"
      */
-    padding?: 'tight' | 'compact' | 'comfortable' | 'spacious';
+    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';
     /**
      * Define the maximum width of the flyout
      * @default "360px"
@@ -929,6 +929,31 @@ declare const screens: {
     '2xl': string;
 };
 
+export declare const ScrollArea: ForwardRefExoticComponent<ScrollAreaProps & RefAttributes<HTMLDivElement>>;
+
+declare type ScrollAreaProps = {
+    /**
+     * "auto" visible when content is overflowing on the corresponding orientation.
+     * "always" always visible regardless of whether the content is overflowing.
+     * "scroll" visible when the user is scrolling along its corresponding orientation.
+     * "hover" when the user is hovering over the scroll area.
+     * @default 'hover'
+     */
+    type?: 'auto' | 'always' | 'scroll' | 'hover';
+    /**
+     * Maximum height of the scroll area
+     * @default '100%'
+     */
+    maxHeight?: string | number;
+    /**
+     * Minimum width of the scroll area
+     * @default '100%'
+     */
+    maxWidth?: string | number;
+    'data-test-id'?: string;
+    children: ReactNode;
+};
+
 export declare const Section: {
     ({ "data-test-id": dataTestId, children, ...props }: SectionProps): JSX_2.Element;
     displayName: string;
@@ -1339,4 +1364,3 @@ declare module 'vitest' {
     interface Assertion<T = any> extends jest.Matchers<void, T>, TestingLibraryMatchers<T, void> {
     }
 }
-