@frontify/fondue-components 5.1.1 → 5.1.2

package/dist/fondue-components11.js

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

package/dist/fondue-components11.js.map

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

package/dist/fondue-components23.js

@@ -1,25 +1,25 @@
 import { jsx as a, jsxs as g } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-tooltip";
-import { forwardRef as s } from "react";
+import { forwardRef as n } from "react";
 import { cn as T } from "./fondue-components26.js";
-import n from "./fondue-components60.js";
-const d = ({ children: t, enterDelay: r = 700, open: i, onOpenChange: e }) => /* @__PURE__ */ a(o.Provider, { children: /* @__PURE__ */ a(o.Root, { delayDuration: r, open: i, onOpenChange: e, children: t }) });
-d.displayName = "Tooltip.Root";
-const l = ({ asChild: t = !1, children: r, "data-test-id": i = "fondue-tooltip-trigger" }, e) => /* @__PURE__ */ a(o.Trigger, { "data-test-id": i, asChild: t, ref: e, children: r });
-l.displayName = "Tooltip.Trigger";
-const p = ({
+import d from "./fondue-components60.js";
+const l = ({ children: t, enterDelay: r = 700, open: i, onOpenChange: e, ...s }) => /* @__PURE__ */ a(o.Provider, { children: /* @__PURE__ */ a(o.Root, { delayDuration: r, open: i, onOpenChange: e, ...s, children: t }) });
+l.displayName = "Tooltip.Root";
+const p = ({ asChild: t = !1, children: r, "data-test-id": i = "fondue-tooltip-trigger" }, e) => /* @__PURE__ */ a(o.Trigger, { "data-test-id": i, asChild: t, ref: e, children: r });
+p.displayName = "Tooltip.Trigger";
+const m = ({
   children: t,
   className: r,
   maxWidth: i,
   "data-test-id": e = "fondue-tooltip-content",
-  padding: m = "spacious",
+  padding: s = "spacious",
   ...c
 }, f) => /* @__PURE__ */ a(o.Portal, { children: /* @__PURE__ */ g(
   o.Content,
   {
     "data-test-id": e,
-    "data-tooltip-spacing": m,
-    className: T(n.root, r),
+    "data-tooltip-spacing": s,
+    className: T(d.root, r),
     style: { maxWidth: i },
     collisionPadding: 16,
     sideOffset: 8,
@@ -27,20 +27,20 @@ const p = ({
     ...c,
     children: [
       t,
-      /* @__PURE__ */ a(o.Arrow, { "aria-hidden": "true", className: n.arrow })
+      /* @__PURE__ */ a(o.Arrow, { "aria-hidden": "true", className: d.arrow })
     ]
   }
 ) });
-p.displayName = "Tooltip.Content";
+m.displayName = "Tooltip.Content";
 const h = {
-  Root: d,
-  Trigger: s(l),
-  Content: s(p)
+  Root: l,
+  Trigger: n(p),
+  Content: n(m)
 };
 export {
   h as Tooltip,
-  p as TooltipContent,
-  d as TooltipRoot,
-  l as TooltipTrigger
+  m as TooltipContent,
+  l as TooltipRoot,
+  p as TooltipTrigger
 };
 //# sourceMappingURL=fondue-components23.js.map

package/dist/fondue-components23.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components23.js","sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { forwardRef, type ForwardedRef, type ReactElement, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport styles from './styles/tooltip.module.scss';\n\nexport type TooltipRootProps = {\n    /**\n     * Sets the open state of the tooltip.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the tooltip changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * The delay in milliseconds before the tooltip appears.\n     * @default 700\n     */\n    enterDelay?: number;\n    children: Array<ReactElement<TooltipTriggerProps | TooltipContentProps>>;\n};\n\nexport const TooltipRoot = ({ children, enterDelay = 700, open, onOpenChange }: TooltipRootProps) => {\n    return (\n        <RadixTooltip.Provider>\n            <RadixTooltip.Root delayDuration={enterDelay} open={open} onOpenChange={onOpenChange}>\n                {children}\n            </RadixTooltip.Root>\n        </RadixTooltip.Provider>\n    );\n};\nTooltipRoot.displayName = 'Tooltip.Root';\n\nexport type TooltipTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default false\n     */\n    asChild?: boolean;\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const TooltipTrigger = (\n    { asChild = false, children, 'data-test-id': dataTestId = 'fondue-tooltip-trigger' }: TooltipTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixTooltip.Trigger data-test-id={dataTestId} asChild={asChild} ref={ref}>\n            {children}\n        </RadixTooltip.Trigger>\n    );\n};\nTooltipTrigger.displayName = 'Tooltip.Trigger';\n\nexport type TooltipContentProps = {\n    /**\n     * @default \"spacious\"\n     */\n    padding?: 'spacious' | 'compact';\n    /**\n     * Defines the preferred side of the tooltip. It will not be respected if there are collisions with the viewport.\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    maxWidth?: string;\n    className?: string;\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const TooltipContent = (\n    {\n        children,\n        className,\n        maxWidth,\n        'data-test-id': dataTestId = 'fondue-tooltip-content',\n        padding = 'spacious',\n        ...props\n    }: TooltipContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixTooltip.Portal>\n            <RadixTooltip.Content\n                data-test-id={dataTestId}\n                data-tooltip-spacing={padding}\n                className={cn(styles.root, className)}\n                style={{ maxWidth }}\n                collisionPadding={16}\n                sideOffset={8}\n                ref={ref}\n                {...props}\n            >\n                {children}\n                <RadixTooltip.Arrow aria-hidden=\"true\" className={styles.arrow} />\n            </RadixTooltip.Content>\n        </RadixTooltip.Portal>\n    );\n};\nTooltipContent.displayName = 'Tooltip.Content';\n\nexport const Tooltip = {\n    Root: TooltipRoot,\n    Trigger: forwardRef<HTMLButtonElement, TooltipTriggerProps>(TooltipTrigger),\n    Content: forwardRef<HTMLDivElement, TooltipContentProps>(TooltipContent),\n};\n"],"names":["TooltipRoot","children","enterDelay","open","onOpenChange","jsx","RadixTooltip","TooltipTrigger","asChild","dataTestId","ref","TooltipContent","className","maxWidth","padding","props","jsxs","cn","styles","Tooltip","forwardRef"],"mappings":";;;;;AA0Ba,MAAAA,IAAc,CAAC,EAAE,UAAAC,GAAU,YAAAC,IAAa,KAAK,MAAAC,GAAM,cAAAC,QAEvD,gBAAAC,EAAAC,EAAa,UAAb,EACG,UAAC,gBAAAD,EAAAC,EAAa,MAAb,EAAkB,eAAeJ,GAAY,MAAAC,GAAY,cAAAC,GACrD,UAAAH,EACL,CAAA,GACJ;AAGRD,EAAY,cAAc;AAYb,MAAAO,IAAiB,CAC1B,EAAE,SAAAC,IAAU,IAAO,UAAAP,GAAU,gBAAgBQ,IAAa,yBAAyB,GACnFC,MAGI,gBAAAL,EAACC,EAAa,SAAb,EAAqB,gBAAcG,GAAY,SAAAD,GAAkB,KAAAE,GAC7D,UAAAT,GACL;AAGRM,EAAe,cAAc;AAiBtB,MAAMI,IAAiB,CAC1B;AAAA,EACI,UAAAV;AAAA,EACA,WAAAW;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBJ,IAAa;AAAA,EAC7B,SAAAK,IAAU;AAAA,EACV,GAAGC;AACP,GACAL,MAGI,gBAAAL,EAACC,EAAa,QAAb,EACG,UAAA,gBAAAU;AAAA,EAACV,EAAa;AAAA,EAAb;AAAA,IACG,gBAAcG;AAAA,IACd,wBAAsBK;AAAA,IACtB,WAAWG,EAAGC,EAAO,MAAMN,CAAS;AAAA,IACpC,OAAO,EAAE,UAAAC,EAAS;AAAA,IAClB,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ,KAAAH;AAAA,IACC,GAAGK;AAAA,IAEH,UAAA;AAAA,MAAAd;AAAA,MACD,gBAAAI,EAACC,EAAa,OAAb,EAAmB,eAAY,QAAO,WAAWY,EAAO,MAAO,CAAA;AAAA,IAAA;AAAA,EAAA;AAAA,GAExE;AAGRP,EAAe,cAAc;AAEtB,MAAMQ,IAAU;AAAA,EACnB,MAAMnB;AAAA,EACN,SAASoB,EAAmDb,CAAc;AAAA,EAC1E,SAASa,EAAgDT,CAAc;AAC3E;"}
+{"version":3,"file":"fondue-components23.js","sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { forwardRef, type ForwardedRef, type ReactElement, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport styles from './styles/tooltip.module.scss';\n\nexport type TooltipRootProps = {\n    /**\n     * Sets the open state of the tooltip.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the tooltip changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * The delay in milliseconds before the tooltip appears.\n     * @default 700\n     */\n    enterDelay?: number;\n    children: Array<ReactElement<TooltipTriggerProps | TooltipContentProps>>;\n};\n\nexport const TooltipRoot = ({ children, enterDelay = 700, open, onOpenChange, ...props }: TooltipRootProps) => {\n    return (\n        <RadixTooltip.Provider>\n            <RadixTooltip.Root delayDuration={enterDelay} open={open} onOpenChange={onOpenChange} {...props}>\n                {children}\n            </RadixTooltip.Root>\n        </RadixTooltip.Provider>\n    );\n};\nTooltipRoot.displayName = 'Tooltip.Root';\n\nexport type TooltipTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default false\n     */\n    asChild?: boolean;\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const TooltipTrigger = (\n    { asChild = false, children, 'data-test-id': dataTestId = 'fondue-tooltip-trigger' }: TooltipTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixTooltip.Trigger data-test-id={dataTestId} asChild={asChild} ref={ref}>\n            {children}\n        </RadixTooltip.Trigger>\n    );\n};\nTooltipTrigger.displayName = 'Tooltip.Trigger';\n\nexport type TooltipContentProps = {\n    /**\n     * @default \"spacious\"\n     */\n    padding?: 'spacious' | 'compact';\n    /**\n     * Defines the preferred side of the tooltip. It will not be respected if there are collisions with the viewport.\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    maxWidth?: string;\n    className?: string;\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const TooltipContent = (\n    {\n        children,\n        className,\n        maxWidth,\n        'data-test-id': dataTestId = 'fondue-tooltip-content',\n        padding = 'spacious',\n        ...props\n    }: TooltipContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixTooltip.Portal>\n            <RadixTooltip.Content\n                data-test-id={dataTestId}\n                data-tooltip-spacing={padding}\n                className={cn(styles.root, className)}\n                style={{ maxWidth }}\n                collisionPadding={16}\n                sideOffset={8}\n                ref={ref}\n                {...props}\n            >\n                {children}\n                <RadixTooltip.Arrow aria-hidden=\"true\" className={styles.arrow} />\n            </RadixTooltip.Content>\n        </RadixTooltip.Portal>\n    );\n};\nTooltipContent.displayName = 'Tooltip.Content';\n\nexport const Tooltip = {\n    Root: TooltipRoot,\n    Trigger: forwardRef<HTMLButtonElement, TooltipTriggerProps>(TooltipTrigger),\n    Content: forwardRef<HTMLDivElement, TooltipContentProps>(TooltipContent),\n};\n"],"names":["TooltipRoot","children","enterDelay","open","onOpenChange","props","jsx","RadixTooltip","TooltipTrigger","asChild","dataTestId","ref","TooltipContent","className","maxWidth","padding","jsxs","cn","styles","Tooltip","forwardRef"],"mappings":";;;;;AA0Ba,MAAAA,IAAc,CAAC,EAAE,UAAAC,GAAU,YAAAC,IAAa,KAAK,MAAAC,GAAM,cAAAC,GAAc,GAAGC,QAExE,gBAAAC,EAAAC,EAAa,UAAb,EACG,4BAACA,EAAa,MAAb,EAAkB,eAAeL,GAAY,MAAAC,GAAY,cAAAC,GAA6B,GAAGC,GACrF,UAAAJ,EACL,CAAA,GACJ;AAGRD,EAAY,cAAc;AAYb,MAAAQ,IAAiB,CAC1B,EAAE,SAAAC,IAAU,IAAO,UAAAR,GAAU,gBAAgBS,IAAa,yBAAyB,GACnFC,MAGI,gBAAAL,EAACC,EAAa,SAAb,EAAqB,gBAAcG,GAAY,SAAAD,GAAkB,KAAAE,GAC7D,UAAAV,GACL;AAGRO,EAAe,cAAc;AAiBtB,MAAMI,IAAiB,CAC1B;AAAA,EACI,UAAAX;AAAA,EACA,WAAAY;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBJ,IAAa;AAAA,EAC7B,SAAAK,IAAU;AAAA,EACV,GAAGV;AACP,GACAM,MAGI,gBAAAL,EAACC,EAAa,QAAb,EACG,UAAA,gBAAAS;AAAA,EAACT,EAAa;AAAA,EAAb;AAAA,IACG,gBAAcG;AAAA,IACd,wBAAsBK;AAAA,IACtB,WAAWE,EAAGC,EAAO,MAAML,CAAS;AAAA,IACpC,OAAO,EAAE,UAAAC,EAAS;AAAA,IAClB,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ,KAAAH;AAAA,IACC,GAAGN;AAAA,IAEH,UAAA;AAAA,MAAAJ;AAAA,MACD,gBAAAK,EAACC,EAAa,OAAb,EAAmB,eAAY,QAAO,WAAWW,EAAO,MAAO,CAAA;AAAA,IAAA;AAAA,EAAA;AAAA,GAExE;AAGRN,EAAe,cAAc;AAEtB,MAAMO,IAAU;AAAA,EACnB,MAAMnB;AAAA,EACN,SAASoB,EAAmDZ,CAAc;AAAA,EAC1E,SAASY,EAAgDR,CAAc;AAC3E;"}

package/dist/fondue-components32.js

@@ -1,31 +1,40 @@
-import { jsxs as d, jsx as a, Fragment as n } from "react/jsx-runtime";
-import { IconDroplet as p, IconTrashBin as f, IconCaretDown as I } from "@frontify/fondue-icons";
-import { forwardRef as N, useId as h } from "react";
-import i from "./fondue-components63.js";
+import { jsxs as i, jsx as a, Fragment as p } from "react/jsx-runtime";
+import { IconDroplet as h, IconTrashBin as N, IconCaretDown as f } from "@frontify/fondue-icons";
+import { forwardRef as I } from "react";
+import e from "./fondue-components62.js";
 import { colorToCss as b } from "./fondue-components35.js";
-const c = ({ id: t, currentColor: e, onClear: s, "data-test-id": r = "color-picker-input", ...l }, m) => {
-  const o = h();
-  return /* @__PURE__ */ d("div", { id: t, className: i.root, ...l, ref: m, "data-test-id": r, children: [
-    (e == null ? void 0 : e.red) !== void 0 ? /* @__PURE__ */ a(
+const o = ({
+  id: c,
+  currentColor: s,
+  isOpen: d,
+  onClear: t,
+  onClick: l,
+  "data-test-id": r = "color-picker-input",
+  ...n
+}, m) => /* @__PURE__ */ i("div", { id: c, className: e.root, ...n, ref: m, "data-test-id": r, children: [
+  /* @__PURE__ */ i("button", { className: e.button, onClick: l, "data-color-input-select": !0, children: [
+    (s == null ? void 0 : s.red) !== void 0 ? /* @__PURE__ */ a(
       "div",
       {
-        "aria-describedby": o,
-        className: i.colorIndicator,
-        style: { backgroundColor: b(e) }
+        "aria-hidden": !0,
+        className: e.colorIndicator,
+        style: { backgroundColor: b(s) }
       }
-    ) : /* @__PURE__ */ d(n, { children: [
-      /* @__PURE__ */ a(p, { size: 16 }),
+    ) : /* @__PURE__ */ i(p, { children: [
+      /* @__PURE__ */ a(h, { size: 16 }),
       /* @__PURE__ */ a("span", { children: "Select Color" })
     ] }),
-    /* @__PURE__ */ a("span", { id: o, className: i.colorName, children: e == null ? void 0 : e.name }),
-    s && /* @__PURE__ */ a("button", { type: "button", "aria-label": "Clear color", onClick: s, className: i.clear, children: /* @__PURE__ */ a(f, { size: 16 }) }),
-    /* @__PURE__ */ a("div", { children: /* @__PURE__ */ a(I, { size: 16, className: i.caret }) })
-  ] });
-};
-c.displayName = "ColorPicker.Input";
-const z = N(c);
+    /* @__PURE__ */ a("span", { className: e.colorName, children: s == null ? void 0 : s.name })
+  ] }),
+  /* @__PURE__ */ i("div", { className: e.actions, children: [
+    t && /* @__PURE__ */ a("button", { type: "button", "aria-label": "Clear color", onClick: t, className: e.clear, children: /* @__PURE__ */ a(N, { size: 16 }) }),
+    /* @__PURE__ */ a("div", { className: e.caret, "data-state": d ? "open" : "closed", children: /* @__PURE__ */ a(f, { size: 16, className: e.caret }) })
+  ] })
+] });
+o.displayName = "ColorPicker.Input";
+const x = I(o);
 export {
-  c as ColorPickerInput,
-  z as ForwardedRefColorPickerInput
+  o as ColorPickerInput,
+  x as ForwardedRefColorPickerInput
 };
 //# sourceMappingURL=fondue-components32.js.map

package/dist/fondue-components32.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components32.js","sources":["../src/components/ColorPicker/ColorPickerInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconDroplet, IconTrashBin } from '@frontify/fondue-icons';\nimport { type ForwardedRef, forwardRef, useId } from 'react';\n\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport styles from './styles/colorInput.module.scss';\nimport { type RgbaColor } from './types';\nimport { colorToCss } from './utils';\n\ntype ColorPickerInputProps = {\n    id?: string;\n    /**\n     * The active color in the color picker\n     */\n    currentColor?: RgbaColor;\n    /**\n     * The open state of the color picker used to dermine arrow state\n     */\n    isOpen?: boolean;\n    /**\n     * callback for clearing the color\n     */\n    onClear?: () => void;\n    /**\n     * The test id of the color picker input\n     */\n    'data-test-id'?: string;\n} & CommonAriaAttrs;\n\nexport const ColorPickerInput = (\n    { id, currentColor, onClear, 'data-test-id': dataTestId = 'color-picker-input', ...props }: ColorPickerInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const colorNameId = useId();\n\n    return (\n        <div id={id} className={styles.root} {...props} ref={forwardedRef} data-test-id={dataTestId}>\n            {currentColor?.red !== undefined ? (\n                <div\n                    aria-describedby={colorNameId}\n                    className={styles.colorIndicator}\n                    style={{ backgroundColor: colorToCss(currentColor) }}\n                />\n            ) : (\n                <>\n                    <IconDroplet size={16} />\n                    <span>Select Color</span>\n                </>\n            )}\n\n            <span id={colorNameId} className={styles.colorName}>\n                {currentColor?.name}\n            </span>\n            {onClear && (\n                <button type=\"button\" aria-label=\"Clear color\" onClick={onClear} className={styles.clear}>\n                    <IconTrashBin size={16} />\n                </button>\n            )}\n            <div>\n                <IconCaretDown size={16} className={styles.caret} />\n            </div>\n        </div>\n    );\n};\nColorPickerInput.displayName = 'ColorPicker.Input';\n\nexport const ForwardedRefColorPickerInput = forwardRef<HTMLDivElement, ColorPickerInputProps>(ColorPickerInput);\n"],"names":["ColorPickerInput","id","currentColor","onClear","dataTestId","props","forwardedRef","colorNameId","useId","jsxs","styles","jsx","colorToCss","Fragment","IconDroplet","IconTrashBin","IconCaretDown","ForwardedRefColorPickerInput","forwardRef"],"mappings":";;;;;AA+BO,MAAMA,IAAmB,CAC5B,EAAE,IAAAC,GAAI,cAAAC,GAAc,SAAAC,GAAS,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAM,GACzFC,MACC;AACD,QAAMC,IAAcC,EAAM;AAGtB,SAAA,gBAAAC,EAAC,OAAI,EAAA,IAAAR,GAAQ,WAAWS,EAAO,MAAO,GAAGL,GAAO,KAAKC,GAAc,gBAAcF,GAC5E,UAAA;AAAA,KAAAF,KAAA,gBAAAA,EAAc,SAAQ,SACnB,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,oBAAkBJ;AAAA,QAClB,WAAWG,EAAO;AAAA,QAClB,OAAO,EAAE,iBAAiBE,EAAWV,CAAY,EAAE;AAAA,MAAA;AAAA,IAAA,IAInD,gBAAAO,EAAAI,GAAA,EAAA,UAAA;AAAA,MAAC,gBAAAF,EAAAG,GAAA,EAAY,MAAM,GAAI,CAAA;AAAA,MACvB,gBAAAH,EAAC,UAAK,UAAY,eAAA,CAAA;AAAA,IAAA,GACtB;AAAA,IAGJ,gBAAAA,EAAC,UAAK,IAAIJ,GAAa,WAAWG,EAAO,WACpC,iCAAc,KACnB,CAAA;AAAA,IACCP,KACI,gBAAAQ,EAAA,UAAA,EAAO,MAAK,UAAS,cAAW,eAAc,SAASR,GAAS,WAAWO,EAAO,OAC/E,UAAA,gBAAAC,EAACI,GAAa,EAAA,MAAM,GAAI,CAAA,GAC5B;AAAA,IAEJ,gBAAAJ,EAAC,SACG,UAAC,gBAAAA,EAAAK,GAAA,EAAc,MAAM,IAAI,WAAWN,EAAO,MAAO,CAAA,EACtD,CAAA;AAAA,EAAA,GACJ;AAER;AACAV,EAAiB,cAAc;AAElB,MAAAiB,IAA+BC,EAAkDlB,CAAgB;"}
+{"version":3,"file":"fondue-components32.js","sources":["../src/components/ColorPicker/ColorPickerInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconDroplet, IconTrashBin } from '@frontify/fondue-icons';\nimport { type ForwardedRef, forwardRef } from 'react';\n\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport styles from './styles/colorInput.module.scss';\nimport { type RgbaColor } from './types';\nimport { colorToCss } from './utils';\n\ntype ColorPickerInputProps = {\n    id?: string;\n    /**\n     * The active color in the color picker\n     */\n    currentColor?: RgbaColor;\n    /**\n     * The open state of the color picker used to dermine arrow state\n     */\n    isOpen?: boolean;\n    /**\n     * callback for clearing the color\n     */\n    onClear?: () => void;\n    /**\n     * Event handler called when the color picker input is clicked\n     */\n    onClick?: () => void;\n    /**\n     * The test id of the color picker input\n     */\n    'data-test-id'?: string;\n} & CommonAriaAttrs;\n\nexport const ColorPickerInput = (\n    {\n        id,\n        currentColor,\n        isOpen,\n        onClear,\n        onClick,\n        'data-test-id': dataTestId = 'color-picker-input',\n        ...props\n    }: ColorPickerInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div id={id} className={styles.root} {...props} ref={forwardedRef} data-test-id={dataTestId}>\n            <button className={styles.button} onClick={onClick} data-color-input-select>\n                {currentColor?.red !== undefined ? (\n                    <div\n                        aria-hidden\n                        className={styles.colorIndicator}\n                        style={{ backgroundColor: colorToCss(currentColor) }}\n                    />\n                ) : (\n                    <>\n                        <IconDroplet size={16} />\n                        <span>Select Color</span>\n                    </>\n                )}\n\n                <span className={styles.colorName}>{currentColor?.name}</span>\n            </button>\n            <div className={styles.actions}>\n                {onClear && (\n                    <button type=\"button\" aria-label=\"Clear color\" onClick={onClear} className={styles.clear}>\n                        <IconTrashBin size={16} />\n                    </button>\n                )}\n                <div className={styles.caret} data-state={isOpen ? 'open' : 'closed'}>\n                    <IconCaretDown size={16} className={styles.caret} />\n                </div>\n            </div>\n        </div>\n    );\n};\nColorPickerInput.displayName = 'ColorPicker.Input';\n\nexport const ForwardedRefColorPickerInput = forwardRef<HTMLDivElement, ColorPickerInputProps>(ColorPickerInput);\n"],"names":["ColorPickerInput","id","currentColor","isOpen","onClear","onClick","dataTestId","props","forwardedRef","jsxs","styles","jsx","colorToCss","Fragment","IconDroplet","IconTrashBin","IconCaretDown","ForwardedRefColorPickerInput","forwardRef"],"mappings":";;;;;AAmCO,MAAMA,IAAmB,CAC5B;AAAA,EACI,IAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MAGI,gBAAAC,EAAC,OAAI,EAAA,IAAAR,GAAQ,WAAWS,EAAO,MAAO,GAAGH,GAAO,KAAKC,GAAc,gBAAcF,GAC7E,UAAA;AAAA,EAAA,gBAAAG,EAAC,YAAO,WAAWC,EAAO,QAAQ,SAAAL,GAAkB,2BAAuB,IACtE,UAAA;AAAA,KAAAH,KAAA,gBAAAA,EAAc,SAAQ,SACnB,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,eAAW;AAAA,QACX,WAAWD,EAAO;AAAA,QAClB,OAAO,EAAE,iBAAiBE,EAAWV,CAAY,EAAE;AAAA,MAAA;AAAA,IAAA,IAInD,gBAAAO,EAAAI,GAAA,EAAA,UAAA;AAAA,MAAC,gBAAAF,EAAAG,GAAA,EAAY,MAAM,GAAI,CAAA;AAAA,MACvB,gBAAAH,EAAC,UAAK,UAAY,eAAA,CAAA;AAAA,IAAA,GACtB;AAAA,sBAGH,QAAK,EAAA,WAAWD,EAAO,WAAY,iCAAc,KAAK,CAAA;AAAA,EAAA,GAC3D;AAAA,EACC,gBAAAD,EAAA,OAAA,EAAI,WAAWC,EAAO,SAClB,UAAA;AAAA,IAAAN,KACI,gBAAAO,EAAA,UAAA,EAAO,MAAK,UAAS,cAAW,eAAc,SAASP,GAAS,WAAWM,EAAO,OAC/E,UAAA,gBAAAC,EAACI,GAAa,EAAA,MAAM,GAAI,CAAA,GAC5B;AAAA,sBAEH,OAAI,EAAA,WAAWL,EAAO,OAAO,cAAYP,IAAS,SAAS,UACxD,UAAA,gBAAAQ,EAACK,KAAc,MAAM,IAAI,WAAWN,EAAO,OAAO,EACtD,CAAA;AAAA,EAAA,EACJ,CAAA;AAAA,GACJ;AAGRV,EAAiB,cAAc;AAElB,MAAAiB,IAA+BC,EAAkDlB,CAAgB;"}

package/dist/fondue-components51.js

@@ -4,7 +4,7 @@ import { Slot as P } from "@radix-ui/react-slot";
 import { useRef as S, isValidElement as C } from "react";
 import { usePreventDropdownOverflow as M } from "./fondue-components39.js";
 import n from "./fondue-components53.js";
-import { recursiveMap as N, getSelectOptionValue as V } from "./fondue-components62.js";
+import { recursiveMap as N, getSelectOptionValue as V } from "./fondue-components63.js";
 const x = ({
   highlightedIndex: p,
   getMenuProps: u,

package/dist/fondue-components54.js

@@ -3,7 +3,7 @@ import { IconCross as x } from "@frontify/fondue-icons";
 import { useState as B, useMemo as i, Children as f, isValidElement as a, cloneElement as E, useCallback as v } from "react";
 import { ForwardedRefSelectItem as F } from "./fondue-components50.js";
 import { ForwardedRefSelectSlot as c } from "./fondue-components52.js";
-import { getSelectOptionValue as I } from "./fondue-components62.js";
+import { getSelectOptionValue as I } from "./fondue-components63.js";
 const S = (r) => {
   const t = [];
   return f.forEach(r, (o) => {

package/dist/fondue-components62.js

@@ -1,42 +1,18 @@
-import { Children as a, isValidElement as u, cloneElement as f } from "react";
-import { ForwardedRefSelectItem as E } from "./fondue-components50.js";
-const g = ({
-  children: r,
-  value: o,
-  label: s
-}) => r && typeof r == "string" ? {
-  value: o || r,
-  label: s || r
-} : {
-  value: o || "",
-  label: s || o || ""
-}, w = (r, o) => u(r) && r.type === o, y = (r, o, s, p = 0) => {
-  const n = [];
-  let t = 0;
-  return a.forEach(r, (e) => {
-    if (w(e, E) && u(e))
-      g(e.props).label.toLowerCase().includes((s == null ? void 0 : s.toLowerCase()) || "") && (n.push(o(e, p + t)), t++);
-    else if (u(e) && (e != null && e.props.children)) {
-      const { parsedChildren: m, subElementCount: C } = y(
-        e.props.children,
-        o,
-        "",
-        p + t
-      );
-      e = f(e, {
-        children: m,
-        key: `group-${p + t}`
-      }), n.push(e), t += C;
-    } else
-      n.push(e);
-  }), {
-    parsedChildren: n,
-    subElementCount: t
-  };
+const o = "_root_8a8rm_5", t = "_button_8a8rm_56", c = "_colorIndicator_8a8rm_69", r = "_actions_8a8rm_75", a = "_clear_8a8rm_85", _ = "_caret_8a8rm_98", n = {
+  root: o,
+  button: t,
+  colorIndicator: c,
+  actions: r,
+  clear: a,
+  caret: _
 };
 export {
-  g as getSelectOptionValue,
-  w as isReactLeaf,
-  y as recursiveMap
+  r as actions,
+  t as button,
+  _ as caret,
+  a as clear,
+  c as colorIndicator,
+  n as default,
+  o as root
 };
 //# sourceMappingURL=fondue-components62.js.map

package/dist/fondue-components62.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components62.js","sources":["../src/components/Select/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    Children,\n    cloneElement,\n    isValidElement,\n    type JSXElementConstructor,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\n\nimport { ForwardedRefSelectItem, type SelectItemProps } from './SelectItem';\n\n/**\n * Extracts and returns an object containing `value` and `label` from a given SelectItemProps object.\n * It prioritizes explicit `value` and `label` properties but will fall back to using `children` as the value or label if necessary.\n *\n * @param {SelectItemProps} props - The properties of a select item, which include potential children, value, and label.\n * @returns {{ value: string; label: string }} An object containing `value` and `label` as strings.\n *\n * @example\n * // Returns { value: 'option1', label: 'Option 1' }\n * getSelectOptionValue({ value: 'option1', label: 'Option 1' });\n *\n * @example\n * // Uses children as the value and label when they are not explicitly provided\n * // Returns { value: 'Default', label: 'Default' }\n * getSelectOptionValue({ children: 'Default' });\n */\nexport const getSelectOptionValue = ({\n    children,\n    value,\n    label,\n}: SelectItemProps): {\n    value: string;\n    label: string;\n} => {\n    if (children && typeof children === 'string') {\n        return {\n            value: value ? value : children,\n            label: label ? label : children,\n        };\n    }\n\n    return {\n        value: value || '',\n        label: label ? label : value || '',\n    };\n};\n/**\n * Determines if the child is a leaf node of React, meaning it has one final child of a native type;\n *\n * @param {ReactNode} child - The React child node to check.\n * @param {JSXElementConstructor<never>} Component - The React component constructor used for comparison.\n * @returns {boolean} Returns true if the `child` is a valid React element of the specified `Component` type.\n *\n * @example\n * // Assuming ForwardedRefSelectItem is a component that renders an <input> element\n * // Returns true\n * isReactLeaf(<ForwardedRefSelectItem />, ForwardedRefSelectItem);\n *\n * @example\n * // Returns false for non-matching types or non-leaf components\n * isReactLeaf(<div><ForwardedRefSelectItem /></div>, ForwardedRefSelectItem);\n */\nexport const isReactLeaf = (child: ReactNode, Component: JSXElementConstructor<never>): child is ReactElement =>\n    isValidElement(child) && child.type === Component;\n\n/**\n * Recursively maps through React children, applying a callback to each child that meets the specified conditions.\n * This function is useful for deeply nested structures where modifications or checks are needed at multiple levels.\n *\n * @param {ReactNode} children - The children to be recursively processed.\n * @param {function(ReactNode, number): ReactNode} callback - A function that is called for each child that meets the condition. It receives the child and its index, and returns a React node.\n * @param {string} [filterText=''] - Optional text used to filter children based on their properties.\n * @param {number} [nextIndex=0] - The starting index for numbering children, defaults to 0.\n * @returns {{ parsedChildren: ReactNode[], subElementCount: number }} An object containing the transformed children array and the count of all processed sub-elements.\n *\n * @example\n * // Example usage in a select component where only items containing a certain text are modified\n * recursiveMap(children, (child, index) => React.cloneElement(child, { extraProp: 'value' }), 'specific text');\n *\n * @example\n * // Nested structure transformation, adding class names based on index\n * recursiveMap(children, (child, index) => React.cloneElement(child, { className: `item-${index}` }));\n */\nexport const recursiveMap = (\n    children: ReactNode,\n    callback: (child: ReactNode, nextIndex: number) => ReactNode,\n    filterText?: string,\n    nextIndex: number = 0,\n): {\n    parsedChildren: ReactNode[];\n    subElementCount: number;\n} => {\n    const resultingChildren: ReactNode[] = [];\n    let itemCounter = 0;\n    Children.forEach(children, (child) => {\n        if (isReactLeaf(child, ForwardedRefSelectItem) && isValidElement<SelectItemProps>(child)) {\n            if (\n                getSelectOptionValue(child.props)\n                    .label.toLowerCase()\n                    .includes(filterText?.toLowerCase() || '')\n            ) {\n                resultingChildren.push(callback(child, nextIndex + itemCounter));\n                itemCounter++;\n            }\n        } else if (isValidElement<{ children: ReactNode }>(child) && child?.props.children) {\n            const { parsedChildren, subElementCount } = recursiveMap(\n                child.props.children,\n                callback,\n                '',\n                nextIndex + itemCounter,\n            );\n            child = cloneElement(child, {\n                children: parsedChildren,\n                key: `group-${nextIndex + itemCounter}`,\n            });\n            resultingChildren.push(child);\n            itemCounter += subElementCount;\n        } else {\n            resultingChildren.push(child);\n        }\n    });\n    return {\n        parsedChildren: resultingChildren,\n        subElementCount: itemCounter,\n    };\n};\n"],"names":["getSelectOptionValue","children","value","label","isReactLeaf","child","Component","isValidElement","recursiveMap","callback","filterText","nextIndex","resultingChildren","itemCounter","Children","ForwardedRefSelectItem","parsedChildren","subElementCount","cloneElement"],"mappings":";;AA6BO,MAAMA,IAAuB,CAAC;AAAA,EACjC,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AACJ,MAIQF,KAAY,OAAOA,KAAa,WACzB;AAAA,EACH,OAAOC,KAAgBD;AAAA,EACvB,OAAOE,KAAgBF;AAC3B,IAGG;AAAA,EACH,OAAOC,KAAS;AAAA,EAChB,OAAOC,KAAgBD,KAAS;AACpC,GAkBSE,IAAc,CAACC,GAAkBC,MAC1CC,EAAeF,CAAK,KAAKA,EAAM,SAASC,GAoB/BE,IAAe,CACxBP,GACAQ,GACAC,GACAC,IAAoB,MAInB;AACD,QAAMC,IAAiC,CAAC;AACxC,MAAIC,IAAc;AACT,SAAAC,EAAA,QAAQb,GAAU,CAACI,MAAU;AAClC,QAAID,EAAYC,GAAOU,CAAsB,KAAKR,EAAgCF,CAAK;AACnF,MACIL,EAAqBK,EAAM,KAAK,EAC3B,MAAM,cACN,UAASK,KAAA,gBAAAA,EAAY,kBAAiB,EAAE,MAE7CE,EAAkB,KAAKH,EAASJ,GAAOM,IAAYE,CAAW,CAAC,GAC/DA;AAAA,aAEGN,EAAwCF,CAAK,MAAKA,KAAA,QAAAA,EAAO,MAAM,WAAU;AAC1E,YAAA,EAAE,gBAAAW,GAAgB,iBAAAC,EAAA,IAAoBT;AAAA,QACxCH,EAAM,MAAM;AAAA,QACZI;AAAA,QACA;AAAA,QACAE,IAAYE;AAAA,MAChB;AACA,MAAAR,IAAQa,EAAab,GAAO;AAAA,QACxB,UAAUW;AAAA,QACV,KAAK,SAASL,IAAYE,CAAW;AAAA,MAAA,CACxC,GACDD,EAAkB,KAAKP,CAAK,GACbQ,KAAAI;AAAA,IAAA;AAEf,MAAAL,EAAkB,KAAKP,CAAK;AAAA,EAChC,CACH,GACM;AAAA,IACH,gBAAgBO;AAAA,IAChB,iBAAiBC;AAAA,EACrB;AACJ;"}
+{"version":3,"file":"fondue-components62.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/fondue-components63.js

@@ -1,14 +1,42 @@
-const o = "_root_18q6l_5", c = "_colorName_18q6l_60", t = "_colorIndicator_18q6l_64", r = "_caret_18q6l_70", l = {
-  root: o,
-  colorName: c,
-  colorIndicator: t,
-  caret: r
+import { Children as a, isValidElement as u, cloneElement as f } from "react";
+import { ForwardedRefSelectItem as E } from "./fondue-components50.js";
+const g = ({
+  children: r,
+  value: o,
+  label: s
+}) => r && typeof r == "string" ? {
+  value: o || r,
+  label: s || r
+} : {
+  value: o || "",
+  label: s || o || ""
+}, w = (r, o) => u(r) && r.type === o, y = (r, o, s, p = 0) => {
+  const n = [];
+  let t = 0;
+  return a.forEach(r, (e) => {
+    if (w(e, E) && u(e))
+      g(e.props).label.toLowerCase().includes((s == null ? void 0 : s.toLowerCase()) || "") && (n.push(o(e, p + t)), t++);
+    else if (u(e) && (e != null && e.props.children)) {
+      const { parsedChildren: m, subElementCount: C } = y(
+        e.props.children,
+        o,
+        "",
+        p + t
+      );
+      e = f(e, {
+        children: m,
+        key: `group-${p + t}`
+      }), n.push(e), t += C;
+    } else
+      n.push(e);
+  }), {
+    parsedChildren: n,
+    subElementCount: t
+  };
 };
 export {
-  r as caret,
-  t as colorIndicator,
-  c as colorName,
-  l as default,
-  o as root
+  g as getSelectOptionValue,
+  w as isReactLeaf,
+  y as recursiveMap
 };
 //# sourceMappingURL=fondue-components63.js.map

package/dist/fondue-components63.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components63.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"fondue-components63.js","sources":["../src/components/Select/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    Children,\n    cloneElement,\n    isValidElement,\n    type JSXElementConstructor,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\n\nimport { ForwardedRefSelectItem, type SelectItemProps } from './SelectItem';\n\n/**\n * Extracts and returns an object containing `value` and `label` from a given SelectItemProps object.\n * It prioritizes explicit `value` and `label` properties but will fall back to using `children` as the value or label if necessary.\n *\n * @param {SelectItemProps} props - The properties of a select item, which include potential children, value, and label.\n * @returns {{ value: string; label: string }} An object containing `value` and `label` as strings.\n *\n * @example\n * // Returns { value: 'option1', label: 'Option 1' }\n * getSelectOptionValue({ value: 'option1', label: 'Option 1' });\n *\n * @example\n * // Uses children as the value and label when they are not explicitly provided\n * // Returns { value: 'Default', label: 'Default' }\n * getSelectOptionValue({ children: 'Default' });\n */\nexport const getSelectOptionValue = ({\n    children,\n    value,\n    label,\n}: SelectItemProps): {\n    value: string;\n    label: string;\n} => {\n    if (children && typeof children === 'string') {\n        return {\n            value: value ? value : children,\n            label: label ? label : children,\n        };\n    }\n\n    return {\n        value: value || '',\n        label: label ? label : value || '',\n    };\n};\n/**\n * Determines if the child is a leaf node of React, meaning it has one final child of a native type;\n *\n * @param {ReactNode} child - The React child node to check.\n * @param {JSXElementConstructor<never>} Component - The React component constructor used for comparison.\n * @returns {boolean} Returns true if the `child` is a valid React element of the specified `Component` type.\n *\n * @example\n * // Assuming ForwardedRefSelectItem is a component that renders an <input> element\n * // Returns true\n * isReactLeaf(<ForwardedRefSelectItem />, ForwardedRefSelectItem);\n *\n * @example\n * // Returns false for non-matching types or non-leaf components\n * isReactLeaf(<div><ForwardedRefSelectItem /></div>, ForwardedRefSelectItem);\n */\nexport const isReactLeaf = (child: ReactNode, Component: JSXElementConstructor<never>): child is ReactElement =>\n    isValidElement(child) && child.type === Component;\n\n/**\n * Recursively maps through React children, applying a callback to each child that meets the specified conditions.\n * This function is useful for deeply nested structures where modifications or checks are needed at multiple levels.\n *\n * @param {ReactNode} children - The children to be recursively processed.\n * @param {function(ReactNode, number): ReactNode} callback - A function that is called for each child that meets the condition. It receives the child and its index, and returns a React node.\n * @param {string} [filterText=''] - Optional text used to filter children based on their properties.\n * @param {number} [nextIndex=0] - The starting index for numbering children, defaults to 0.\n * @returns {{ parsedChildren: ReactNode[], subElementCount: number }} An object containing the transformed children array and the count of all processed sub-elements.\n *\n * @example\n * // Example usage in a select component where only items containing a certain text are modified\n * recursiveMap(children, (child, index) => React.cloneElement(child, { extraProp: 'value' }), 'specific text');\n *\n * @example\n * // Nested structure transformation, adding class names based on index\n * recursiveMap(children, (child, index) => React.cloneElement(child, { className: `item-${index}` }));\n */\nexport const recursiveMap = (\n    children: ReactNode,\n    callback: (child: ReactNode, nextIndex: number) => ReactNode,\n    filterText?: string,\n    nextIndex: number = 0,\n): {\n    parsedChildren: ReactNode[];\n    subElementCount: number;\n} => {\n    const resultingChildren: ReactNode[] = [];\n    let itemCounter = 0;\n    Children.forEach(children, (child) => {\n        if (isReactLeaf(child, ForwardedRefSelectItem) && isValidElement<SelectItemProps>(child)) {\n            if (\n                getSelectOptionValue(child.props)\n                    .label.toLowerCase()\n                    .includes(filterText?.toLowerCase() || '')\n            ) {\n                resultingChildren.push(callback(child, nextIndex + itemCounter));\n                itemCounter++;\n            }\n        } else if (isValidElement<{ children: ReactNode }>(child) && child?.props.children) {\n            const { parsedChildren, subElementCount } = recursiveMap(\n                child.props.children,\n                callback,\n                '',\n                nextIndex + itemCounter,\n            );\n            child = cloneElement(child, {\n                children: parsedChildren,\n                key: `group-${nextIndex + itemCounter}`,\n            });\n            resultingChildren.push(child);\n            itemCounter += subElementCount;\n        } else {\n            resultingChildren.push(child);\n        }\n    });\n    return {\n        parsedChildren: resultingChildren,\n        subElementCount: itemCounter,\n    };\n};\n"],"names":["getSelectOptionValue","children","value","label","isReactLeaf","child","Component","isValidElement","recursiveMap","callback","filterText","nextIndex","resultingChildren","itemCounter","Children","ForwardedRefSelectItem","parsedChildren","subElementCount","cloneElement"],"mappings":";;AA6BO,MAAMA,IAAuB,CAAC;AAAA,EACjC,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AACJ,MAIQF,KAAY,OAAOA,KAAa,WACzB;AAAA,EACH,OAAOC,KAAgBD;AAAA,EACvB,OAAOE,KAAgBF;AAC3B,IAGG;AAAA,EACH,OAAOC,KAAS;AAAA,EAChB,OAAOC,KAAgBD,KAAS;AACpC,GAkBSE,IAAc,CAACC,GAAkBC,MAC1CC,EAAeF,CAAK,KAAKA,EAAM,SAASC,GAoB/BE,IAAe,CACxBP,GACAQ,GACAC,GACAC,IAAoB,MAInB;AACD,QAAMC,IAAiC,CAAC;AACxC,MAAIC,IAAc;AACT,SAAAC,EAAA,QAAQb,GAAU,CAACI,MAAU;AAClC,QAAID,EAAYC,GAAOU,CAAsB,KAAKR,EAAgCF,CAAK;AACnF,MACIL,EAAqBK,EAAM,KAAK,EAC3B,MAAM,cACN,UAASK,KAAA,gBAAAA,EAAY,kBAAiB,EAAE,MAE7CE,EAAkB,KAAKH,EAASJ,GAAOM,IAAYE,CAAW,CAAC,GAC/DA;AAAA,aAEGN,EAAwCF,CAAK,MAAKA,KAAA,QAAAA,EAAO,MAAM,WAAU;AAC1E,YAAA,EAAE,gBAAAW,GAAgB,iBAAAC,EAAA,IAAoBT;AAAA,QACxCH,EAAM,MAAM;AAAA,QACZI;AAAA,QACA;AAAA,QACAE,IAAYE;AAAA,MAChB;AACA,MAAAR,IAAQa,EAAab,GAAO;AAAA,QACxB,UAAUW;AAAA,QACV,KAAK,SAASL,IAAYE,CAAW;AAAA,MAAA,CACxC,GACDD,EAAkB,KAAKP,CAAK,GACbQ,KAAAI;AAAA,IAAA;AAEf,MAAAL,EAAkB,KAAKP,CAAK;AAAA,EAChC,CACH,GACM;AAAA,IACH,gBAAgBO;AAAA,IAChB,iBAAiBC;AAAA,EACrB;AACJ;"}

package/dist/fondue-components7.js

@@ -6,7 +6,7 @@ import { addAutoFocusAttribute as B, addShowFocusRing as H } from "./fondue-comp
 import r from "./fondue-components37.js";
 const n = M({ isModal: !1 }), g = ({ children: t, ...o }) => /* @__PURE__ */ a(n.Provider, { value: { isModal: o.modal ?? !1 }, children: /* @__PURE__ */ a(i.Root, { ...o, children: t }) });
 g.displayName = "Dialog.Root";
-const c = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-dialog-trigger" }, d) => /* @__PURE__ */ a(
+const c = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-dialog-trigger", ...d }, s) => /* @__PURE__ */ a(
   i.Trigger,
   {
     onMouseDown: B,
@@ -14,7 +14,8 @@ const c = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-dialog-tr
     "data-auto-focus-trigger": !0,
     "data-test-id": e,
     asChild: t,
-    ref: d,
+    ref: s,
+    ...d,
     children: o
   }
 );

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 { createContext, forwardRef, useContext, 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 minimum 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 = {\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 type DialogHeaderProps = {\n    /**\n     * Show a border at the bottom of the header\n     * @default true\n     */\n    showBorder?: boolean;\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 = {\n    /**\n     * Show a border at the top of the footer\n     * @default true\n     */\n    showBorder?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\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\ntype DialogContextType = {\n    isModal: boolean;\n};\n\nconst DialogContext = createContext<DialogContextType>({ isModal: false });\n\nexport const DialogRoot = ({ children, ...props }: DialogRootProps) => {\n    return (\n        <DialogContext.Provider value={{ isModal: props.modal ?? false }}>\n            <RadixDialog.Root {...props}>{children}</RadixDialog.Root>\n        </DialogContext.Provider>\n    );\n};\nDialogRoot.displayName = 'Dialog.Root';\n\nexport const DialogTrigger = (\n    { asChild = true, 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={asChild}\n            ref={ref}\n        >\n            {children}\n        </RadixDialog.Trigger>\n    );\n};\nDialogTrigger.displayName = 'Dialog.Trigger';\n\nconst DialogUnderlay = ({ children, showUnderlay }: { children: ReactNode; showUnderlay: boolean }) => {\n    const { isModal } = useContext(DialogContext);\n    if (isModal) {\n        return (\n            <RadixDialog.Overlay data-visible={showUnderlay} className={styles.underlay}>\n                {children}\n            </RadixDialog.Overlay>\n        );\n    }\n    return (\n        <div className={styles.underlay} data-visible={showUnderlay}>\n            {children}\n        </div>\n    );\n};\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            <DialogUnderlay showUnderlay={showUnderlay}>\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            </DialogUnderlay>\n        </RadixDialog.Portal>\n    );\n};\nDialogContent.displayName = 'Dialog.Content';\n\nexport const DialogHeader = (\n    {\n        children,\n        showBorder = true,\n        showCloseButton = true,\n        'data-test-id': dataTestId = 'fondue-dialog-header',\n    }: DialogHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.header}\n            data-show-border={showBorder}\n            data-dialog-layout-component\n        >\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    { showBorder = true, children, 'data-test-id': dataTestId = 'fondue-dialog-footer' }: DialogFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.footer}\n            data-show-border={showBorder}\n            data-dialog-layout-component\n        >\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":["DialogContext","createContext","DialogRoot","children","props","RadixDialog","DialogTrigger","asChild","dataTestId","ref","jsx","addAutoFocusAttribute","DialogUnderlay","showUnderlay","isModal","useContext","styles","DialogContent","maxWidth","minWidth","minHeight","padding","verticalAlign","rounded","addShowFocusRing","DialogHeader","showBorder","showCloseButton","jsxs","IconCross","DialogFooter","DialogBody","DialogSideContent","DialogClose","DialogTitle","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 { createContext, forwardRef, useContext, 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 minimum 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 = {\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 type DialogHeaderProps = {\n    /**\n     * Show a border at the bottom of the header\n     * @default true\n     */\n    showBorder?: boolean;\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 = {\n    /**\n     * Show a border at the top of the footer\n     * @default true\n     */\n    showBorder?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\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\ntype DialogContextType = {\n    isModal: boolean;\n};\n\nconst DialogContext = createContext<DialogContextType>({ isModal: false });\n\nexport const DialogRoot = ({ children, ...props }: DialogRootProps) => {\n    return (\n        <DialogContext.Provider value={{ isModal: props.modal ?? false }}>\n            <RadixDialog.Root {...props}>{children}</RadixDialog.Root>\n        </DialogContext.Provider>\n    );\n};\nDialogRoot.displayName = 'Dialog.Root';\n\nexport const DialogTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-dialog-trigger', ...props }: 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={asChild}\n            ref={ref}\n            {...props}\n        >\n            {children}\n        </RadixDialog.Trigger>\n    );\n};\nDialogTrigger.displayName = 'Dialog.Trigger';\n\nconst DialogUnderlay = ({ children, showUnderlay }: { children: ReactNode; showUnderlay: boolean }) => {\n    const { isModal } = useContext(DialogContext);\n    if (isModal) {\n        return (\n            <RadixDialog.Overlay data-visible={showUnderlay} className={styles.underlay}>\n                {children}\n            </RadixDialog.Overlay>\n        );\n    }\n    return (\n        <div className={styles.underlay} data-visible={showUnderlay}>\n            {children}\n        </div>\n    );\n};\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            <DialogUnderlay showUnderlay={showUnderlay}>\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            </DialogUnderlay>\n        </RadixDialog.Portal>\n    );\n};\nDialogContent.displayName = 'Dialog.Content';\n\nexport const DialogHeader = (\n    {\n        children,\n        showBorder = true,\n        showCloseButton = true,\n        'data-test-id': dataTestId = 'fondue-dialog-header',\n    }: DialogHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.header}\n            data-show-border={showBorder}\n            data-dialog-layout-component\n        >\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    { showBorder = true, children, 'data-test-id': dataTestId = 'fondue-dialog-footer' }: DialogFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.footer}\n            data-show-border={showBorder}\n            data-dialog-layout-component\n        >\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":["DialogContext","createContext","DialogRoot","children","props","RadixDialog","DialogTrigger","asChild","dataTestId","ref","jsx","addAutoFocusAttribute","DialogUnderlay","showUnderlay","isModal","useContext","styles","DialogContent","maxWidth","minWidth","minHeight","padding","verticalAlign","rounded","addShowFocusRing","DialogHeader","showBorder","showCloseButton","jsxs","IconCross","DialogFooter","DialogBody","DialogSideContent","DialogClose","DialogTitle","DialogDescription","Dialog","forwardRef"],"mappings":"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"}