@frontify/fondue-components 13.0.0 → 13.0.2

package/dist/fondue-components62.js

@@ -1,14 +1,52 @@
-const t = "_root_fs3zj_5", o = "_thumb_fs3zj_17", s = "_track_fs3zj_21", _ = "_range_fs3zj_28", r = {
-  root: t,
-  thumb: o,
-  track: s,
-  range: _
+import { jsx as w } from "react/jsx-runtime";
+import { IconCross as x } from "@frontify/fondue-icons";
+import { useState as B, useMemo as i, Children as f, isValidElement as u, cloneElement as E, useCallback as F } from "react";
+import { ForwardedRefSelectItem as I } from "./fondue-components58.js";
+import { ForwardedRefSelectSlot as c } from "./fondue-components60.js";
+import { getSelectOptionValue as R } from "./fondue-components76.js";
+const S = (r) => {
+  const t = [];
+  return f.forEach(r, (o) => {
+    if (u(o) && o.type === I)
+      t.push(R(o.props));
+    else if (u(o) && o.props.children) {
+      const a = S(o.props.children);
+      for (const l of a)
+        t.push(l);
+    }
+  }), t;
+}, z = (r) => {
+  const [t, o] = B(""), { inputSlots: a, menuSlots: l, itemValues: p, clearButton: V } = i(() => {
+    const s = [], n = [];
+    let m;
+    f.toArray(r).some(
+      (e) => u(e) && e.type === c
+    ) ? f.forEach(r, (e) => {
+      u(e) && e.type === c && (e.props.name === "menu" ? n.push(e.props.children) : e.props.name === "left" || e.props.name === "right" ? s.push(e) : e.props.name === "clear" && (e.props.children ? m = e : m = E(e, { children: /* @__PURE__ */ w(x, { size: 16 }) })));
+    }) : n.push(r);
+    const g = S(n);
+    return { inputSlots: s, menuSlots: n, itemValues: g, clearButton: m };
+  }, [r]), y = i(
+    () => p.filter(
+      (s) => t === "" || s.label.toLowerCase().includes(t.toLowerCase())
+    ),
+    [p, t]
+  ), C = F(
+    (s) => s ? p.find((n) => n.value === s) : void 0,
+    [p]
+  );
+  return {
+    items: y,
+    menuSlots: l,
+    filterText: t,
+    inputSlots: a,
+    clearButton: V,
+    setFilterText: o,
+    getItemByValue: C
+  };
 };
 export {
-  r as default,
-  _ as range,
-  t as root,
-  o as thumb,
-  s as track
+  S as getRecursiveOptionValues,
+  z as useSelectData
 };
 //# sourceMappingURL=fondue-components62.js.map

package/dist/fondue-components62.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components62.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"fondue-components62.js","sources":["../src/components/Select/useSelectData.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport { Children, cloneElement, isValidElement, useCallback, useMemo, useState, type ReactNode } from 'react';\n\nimport { ForwardedRefSelectItem, type SelectItemProps } from './SelectItem';\nimport { ForwardedRefSelectSlot, type SelectSlotProps } from './SelectSlot';\nimport { getSelectOptionValue } from './utils';\n\nexport type SelectItemType = {\n    value: string;\n    label: string;\n};\n\n/**\n * Recursively extracts option values from children.\n * This function traverses through the React component tree and collects all SelectItem values.\n *\n * @param {ReactNode} children - The React children to extract values from.\n * @returns {SelectItemType[]} An array of SelectItemType objects.\n *\n * @example\n * const options = (\n *   <SelectItem value=\"1\">Option 1</SelectItem>\n *   <SelectItem value=\"2\">Option 2</SelectItem>\n * );\n * const values = getRecursiveOptionValues(options);\n * // Returns: [{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }]\n */\nexport const getRecursiveOptionValues = (children: ReactNode): { value: string; label: string }[] => {\n    const values: { value: string; label: string }[] = [];\n    Children.forEach(children, (child) => {\n        if (isValidElement<SelectItemProps>(child) && child.type === ForwardedRefSelectItem) {\n            values.push(getSelectOptionValue(child.props));\n        } else if (isValidElement<{ children: ReactNode }>(child) && child.props.children) {\n            const optionValues = getRecursiveOptionValues(child.props.children);\n            for (const optionValue of optionValues) {\n                values.push(optionValue);\n            }\n        }\n    });\n    return values;\n};\n\n/**\n * Custom hook for managing select data and filtering.\n *\n * @param {ReactNode} children - The React children to process, typically SelectItem components.\n * @returns {Object} An object containing the processed data.\n */\nexport const useSelectData = (children: ReactNode) => {\n    const [filterText, setFilterText] = useState('');\n    const { inputSlots, menuSlots, itemValues, clearButton } = useMemo(() => {\n        const inputSlots: ReactNode[] = [];\n        const menuSlots: ReactNode[] = [];\n        let clearButton: ReactNode;\n\n        const hasSlots = Children.toArray(children).some(\n            (child) => isValidElement<SelectSlotProps>(child) && child.type === ForwardedRefSelectSlot,\n        );\n\n        if (hasSlots) {\n            Children.forEach(children, (child) => {\n                if (isValidElement<SelectSlotProps>(child) && child.type === ForwardedRefSelectSlot) {\n                    if (child.props.name === 'menu') {\n                        menuSlots.push(child.props.children);\n                    } else if (child.props.name === 'left' || child.props.name === 'right') {\n                        inputSlots.push(child);\n                    } else if (child.props.name === 'clear') {\n                        if (child.props.children) {\n                            clearButton = child;\n                        } else {\n                            clearButton = cloneElement(child, { children: <IconCross size={16} /> });\n                        }\n                    }\n                }\n            });\n        } else {\n            menuSlots.push(children);\n        }\n\n        const itemValues = getRecursiveOptionValues(menuSlots);\n\n        return { inputSlots, menuSlots, itemValues, clearButton };\n    }, [children]);\n\n    const items = useMemo(\n        () =>\n            itemValues.filter(\n                (item) => filterText === '' || item.label.toLowerCase().includes(filterText.toLowerCase()),\n            ),\n        [itemValues, filterText],\n    );\n\n    const getItemByValue = useCallback(\n        (value?: string | null) => (value ? itemValues.find((item) => item.value === value) : undefined),\n        [itemValues],\n    );\n\n    return {\n        items,\n        menuSlots,\n        filterText,\n        inputSlots,\n        clearButton,\n        setFilterText,\n        getItemByValue,\n    };\n};\n"],"names":["getRecursiveOptionValues","children","values","Children","child","isValidElement","ForwardedRefSelectItem","getSelectOptionValue","optionValues","optionValue","useSelectData","filterText","setFilterText","useState","inputSlots","menuSlots","itemValues","clearButton","useMemo","ForwardedRefSelectSlot","cloneElement","IconCross","items","item","getItemByValue","useCallback","value"],"mappings":";;;;;;AA6Ba,MAAAA,IAA2B,CAACC,MAA4D;AACjG,QAAMC,IAA6C,CAAC;AAC3C,SAAAC,EAAA,QAAQF,GAAU,CAACG,MAAU;AAClC,QAAIC,EAAgCD,CAAK,KAAKA,EAAM,SAASE;AACzD,MAAAJ,EAAO,KAAKK,EAAqBH,EAAM,KAAK,CAAC;AAAA,aACtCC,EAAwCD,CAAK,KAAKA,EAAM,MAAM,UAAU;AAC/E,YAAMI,IAAeR,EAAyBI,EAAM,MAAM,QAAQ;AAClE,iBAAWK,KAAeD;AACtB,QAAAN,EAAO,KAAKO,CAAW;AAAA,IAC3B;AAAA,EACJ,CACH,GACMP;AACX,GAQaQ,IAAgB,CAACT,MAAwB;AAClD,QAAM,CAACU,GAAYC,CAAa,IAAIC,EAAS,EAAE,GACzC,EAAE,YAAAC,GAAY,WAAAC,GAAW,YAAAC,GAAY,aAAAC,EAAY,IAAIC,EAAQ,MAAM;AACrE,UAAMJ,IAA0B,CAAC,GAC3BC,IAAyB,CAAC;AAC5BE,QAAAA;AAMJ,IAJiBd,EAAS,QAAQF,CAAQ,EAAE;AAAA,MACxC,CAACG,MAAUC,EAAgCD,CAAK,KAAKA,EAAM,SAASe;AAAA,IACxE,IAGahB,EAAA,QAAQF,GAAU,CAACG,MAAU;AAClC,MAAIC,EAAgCD,CAAK,KAAKA,EAAM,SAASe,MACrDf,EAAM,MAAM,SAAS,SACrBW,EAAU,KAAKX,EAAM,MAAM,QAAQ,IAC5BA,EAAM,MAAM,SAAS,UAAUA,EAAM,MAAM,SAAS,UAC3DU,EAAW,KAAKV,CAAK,IACdA,EAAM,MAAM,SAAS,YACxBA,EAAM,MAAM,WACZa,IAAcb,IAEda,IAAcG,EAAahB,GAAO,EAAE,4BAAWiB,GAAU,EAAA,MAAM,GAAI,CAAA,GAAI;AAAA,IAGnF,CACH,IAEDN,EAAU,KAAKd,CAAQ;AAGrBe,UAAAA,IAAahB,EAAyBe,CAAS;AAE9C,WAAA,EAAE,YAAAD,GAAY,WAAAC,GAAW,YAAAC,GAAY,aAAAC,EAAY;AAAA,EAAA,GACzD,CAAChB,CAAQ,CAAC,GAEPqB,IAAQJ;AAAA,IACV,MACIF,EAAW;AAAA,MACP,CAACO,MAASZ,MAAe,MAAMY,EAAK,MAAM,cAAc,SAASZ,EAAW,YAAa,CAAA;AAAA,IAC7F;AAAA,IACJ,CAACK,GAAYL,CAAU;AAAA,EAC3B,GAEMa,IAAiBC;AAAA,IACnB,CAACC,MAA2BA,IAAQV,EAAW,KAAK,CAACO,MAASA,EAAK,UAAUG,CAAK,IAAI;AAAA,IACtF,CAACV,CAAU;AAAA,EACf;AAEO,SAAA;AAAA,IACH,OAAAM;AAAA,IACA,WAAAP;AAAA,IACA,YAAAJ;AAAA,IACA,YAAAG;AAAA,IACA,aAAAG;AAAA,IACA,eAAAL;AAAA,IACA,gBAAAY;AAAA,EACJ;AACJ;"}

package/dist/fondue-components63.js

@@ -1,16 +1,14 @@
-const m = "_root_hrjmg_5", t = "_small_hrjmg_33", _ = "_medium_hrjmg_37", o = "_large_hrjmg_41", r = "_thumb_hrjmg_55", s = {
-  root: m,
-  small: t,
-  medium: _,
-  large: o,
-  thumb: r
+const t = "_root_fs3zj_5", o = "_thumb_fs3zj_17", s = "_track_fs3zj_21", _ = "_range_fs3zj_28", r = {
+  root: t,
+  thumb: o,
+  track: s,
+  range: _
 };
 export {
-  s as default,
-  o as large,
-  _ as medium,
-  m as root,
-  t as small,
-  r as thumb
+  r as default,
+  _ as range,
+  t as root,
+  o as thumb,
+  s as track
 };
 //# 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":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/fondue-components64.js

@@ -1,11 +1,16 @@
-import { useEffect as f } from "react";
-import { syncRefs as o } from "./fondue-components41.js";
-const m = (s, e) => {
-  f(() => {
-    o(s, e);
-  }, [s]);
+const m = "_root_hrjmg_5", t = "_small_hrjmg_33", _ = "_medium_hrjmg_37", o = "_large_hrjmg_41", r = "_thumb_hrjmg_55", s = {
+  root: m,
+  small: t,
+  medium: _,
+  large: o,
+  thumb: r
 };
 export {
-  m as useSyncRefs
+  s as default,
+  o as large,
+  _ as medium,
+  m as root,
+  t as small,
+  r as thumb
 };
 //# sourceMappingURL=fondue-components64.js.map

package/dist/fondue-components64.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components64.js","sources":["../src/hooks/useSyncRefs.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ForwardedRef, useEffect, type RefObject } from 'react';\n\nimport { syncRefs } from '#/utilities/domUtilities';\n\n/**\n * A custom React hook that synchronizes a local ref with a forwarded ref.\n * This is useful when you need to maintain both an internal reference to a DOM element\n * and allow external access through a forwarded ref.\n *\n * @template TElement - The type of the DOM element being referenced. Defaults to HTMLElement.\n * @param {RefObject<TElement>} localRef - The local ref object used internally by the component.\n * @param {ForwardedRef<TElement>} forwardedRef - The ref forwarded from a parent component.\n *\n * @example\n * ```tsx\n * const MyComponent = forwardRef<HTMLDivElement>((props, ref) => {\n *   const localRef = useRef<HTMLDivElement>(null);\n *   useSyncRefs(localRef, ref);\n *\n *   return <div ref={localRef}>Content</div>;\n * });\n * ```\n */\nexport const useSyncRefs = <TElement = HTMLElement>(\n    localRef: RefObject<TElement>,\n    forwardedRef: ForwardedRef<TElement>,\n) => {\n    useEffect(() => {\n        syncRefs<TElement>(localRef, forwardedRef);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [localRef]);\n};\n"],"names":["useSyncRefs","localRef","forwardedRef","useEffect","syncRefs"],"mappings":";;AAyBa,MAAAA,IAAc,CACvBC,GACAC,MACC;AACD,EAAAC,EAAU,MAAM;AACZ,IAAAC,EAAmBH,GAAUC,CAAY;AAAA,EAAA,GAE1C,CAACD,CAAQ,CAAC;AACjB;"}
+{"version":3,"file":"fondue-components64.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/fondue-components66.js

@@ -1,24 +1,24 @@
-const t = "_table_1nbhe_4", e = "_headerCell_1nbhe_18", o = "_rowCell_1nbhe_19", n = "_caption_1nbhe_46", _ = "_cellContent_1nbhe_71", l = "_buttonText_1nbhe_90", c = "_sortIndicator_1nbhe_99", b = "_body_1nbhe_103", r = "_row_1nbhe_19", s = {
+const t = "_table_lj8j6_4", o = "_headerCell_lj8j6_18", l = "_rowCell_lj8j6_19", e = "_caption_lj8j6_46", _ = "_cellContent_lj8j6_71", n = "_sortIndicator_lj8j6_96", c = "_body_lj8j6_100", j = "_row_lj8j6_19", r = "_buttonText_lj8j6_164", s = {
   table: t,
-  headerCell: e,
-  rowCell: o,
-  caption: n,
+  headerCell: o,
+  rowCell: l,
+  caption: e,
   cellContent: _,
-  buttonText: l,
-  sortIndicator: c,
-  body: b,
-  row: r
+  sortIndicator: n,
+  body: c,
+  row: j,
+  buttonText: r
 };
 export {
-  b as body,
-  l as buttonText,
-  n as caption,
+  c as body,
+  r as buttonText,
+  e as caption,
   _ as cellContent,
   s as default,
-  e as headerCell,
-  r as row,
-  o as rowCell,
-  c as sortIndicator,
+  o as headerCell,
+  j as row,
+  l as rowCell,
+  n as sortIndicator,
   t as table
 };
 //# sourceMappingURL=fondue-components66.js.map

package/dist/fondue-components7.js

@@ -1,141 +1,152 @@
-import { jsx as o, jsxs as R } from "react/jsx-runtime";
-import { IconCross as M } from "@frontify/fondue-icons";
+import { jsx as e, jsxs as P } from "react/jsx-runtime";
+import { IconCross as j } from "@frontify/fondue-icons";
 import * as d from "@radix-ui/react-dialog";
-import { createContext as S, forwardRef as n, useContext as B } from "react";
-import { addAutoFocusAttribute as H, addShowFocusRing as P } from "./fondue-components41.js";
-import { useFondueTheme as j, ThemeProvider as A } from "./fondue-components27.js";
-import l from "./fondue-components42.js";
-const g = S({ isModal: !1 }), u = ({ children: t, ...a }) => /* @__PURE__ */ o(g.Provider, { value: { isModal: a.modal ?? !1 }, children: /* @__PURE__ */ o(d.Root, { ...a, children: t }) });
-u.displayName = "Dialog.Root";
-const c = ({ asChild: t = !0, children: a, "data-test-id": e = "fondue-dialog-trigger", ...i }, r) => /* @__PURE__ */ o(
+import { createContext as q, forwardRef as l, useRef as B, useContext as z } from "react";
+import { useSyncRefs as E } from "./fondue-components41.js";
+import { addAutoFocusAttribute as L, addShowFocusRing as $ } from "./fondue-components42.js";
+import { useFondueTheme as k, ThemeProvider as G } from "./fondue-components27.js";
+import n from "./fondue-components43.js";
+const p = q({ isModal: !1 }), f = ({ children: t, ...o }) => /* @__PURE__ */ e(p.Provider, { value: { isModal: o.modal ?? !1 }, children: /* @__PURE__ */ e(d.Root, { ...o, children: t }) });
+f.displayName = "Dialog.Root";
+const y = ({ asChild: t = !0, children: o, "data-test-id": a = "fondue-dialog-trigger", ...i }, r) => /* @__PURE__ */ e(
   d.Trigger,
   {
-    onMouseDown: H,
+    onMouseDown: L,
     "data-auto-focus-visible": "true",
     "data-auto-focus-trigger": !0,
-    "data-test-id": e,
+    "data-test-id": a,
     asChild: t,
     ref: r,
     ...i,
-    children: a
+    children: o
   }
 );
-c.displayName = "Dialog.Trigger";
-const z = ({ children: t, showUnderlay: a }) => {
-  const { isModal: e } = B(g);
-  return e ? /* @__PURE__ */ o(d.Overlay, { "data-visible": a, className: l.underlay, children: t }) : /* @__PURE__ */ o("div", { className: l.underlay, "data-visible": a, children: t });
-}, m = ({
+y.displayName = "Dialog.Trigger";
+const I = ({ children: t, showUnderlay: o }) => {
+  const { isModal: a } = z(p);
+  return a ? /* @__PURE__ */ e(d.Overlay, { "data-visible": o, className: n.underlay, children: t }) : /* @__PURE__ */ e("div", { className: n.underlay, "data-visible": o, children: t });
+}, D = ({
   maxWidth: t = "800px",
-  minWidth: a = "400px",
-  minHeight: e = "200px",
+  minWidth: o = "400px",
+  minHeight: a = "200px",
   padding: i = "compact",
   verticalAlign: r = "center",
   "data-test-id": s = "fondue-dialog-content",
-  showUnderlay: v = !1,
-  rounded: x = !0,
-  children: b,
-  ...T
-}, w) => {
-  const F = j();
-  return /* @__PURE__ */ o(d.Portal, { children: /* @__PURE__ */ o(A, { theme: F, children: /* @__PURE__ */ o(z, { showUnderlay: v, children: /* @__PURE__ */ o(
+  showUnderlay: R = !1,
+  rounded: T = !0,
+  children: w,
+  ...S
+}, M) => {
+  const A = k(), c = B(null);
+  E(c, M);
+  const H = (O) => {
+    var m;
+    O.preventDefault();
+    const u = (m = c.current) == null ? void 0 : m.querySelector('[data-dialog-layout-component="body"]'), g = u == null ? void 0 : u.querySelector(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+    g instanceof HTMLElement && g.focus();
+  };
+  return /* @__PURE__ */ e(d.Portal, { children: /* @__PURE__ */ e(G, { theme: A, children: /* @__PURE__ */ e(I, { showUnderlay: R, children: /* @__PURE__ */ e(
     d.Content,
     {
       style: {
         "--dialog-max-width": t,
-        "--dialog-min-width": a,
-        "--dialog-min-height": e
+        "--dialog-min-width": o,
+        "--dialog-min-height": a
       },
-      ref: w,
-      className: l.content,
-      onFocus: P,
+      ref: c,
+      className: n.content,
+      onFocus: $,
+      onOpenAutoFocus: H,
       "data-dialog-padding": i,
-      "data-dialog-rounded": x,
+      "data-dialog-rounded": T,
       "data-test-id": s,
       "data-dialog-vertical-align": r,
-      ...T,
-      children: b
+      ...S,
+      children: w
     }
   ) }) }) });
 };
-m.displayName = "Dialog.Content";
-const p = ({
+D.displayName = "Dialog.Content";
+const h = ({
   padding: t,
-  showBorder: a = !0,
-  showCloseButton: e = !0,
+  showBorder: o = !0,
+  showCloseButton: a = !0,
   children: i,
   "data-test-id": r = "fondue-dialog-header"
-}, s) => /* @__PURE__ */ R(
+}, s) => /* @__PURE__ */ P(
   "div",
   {
     "data-test-id": r,
     ref: s,
-    className: l.header,
+    className: n.header,
     "data-dialog-header-padding": t,
-    "data-show-border": a,
-    "data-dialog-layout-component": !0,
+    "data-show-border": o,
+    "data-dialog-layout-component": "header",
     children: [
-      /* @__PURE__ */ o("div", { children: i }),
-      e && /* @__PURE__ */ o(d.Close, { role: "button", "data-test-id": `${r}-close`, className: "tw-cursor-pointer", children: /* @__PURE__ */ o(M, { size: 20 }) })
+      /* @__PURE__ */ e("div", { children: i }),
+      a && /* @__PURE__ */ e(d.Close, { role: "button", "data-test-id": `${r}-close`, className: "tw-cursor-pointer", children: /* @__PURE__ */ e(j, { size: 20 }) })
     ]
   }
 );
-p.displayName = "Dialog.Header";
-const D = ({ padding: t, showBorder: a = !0, children: e, "data-test-id": i = "fondue-dialog-footer" }, r) => /* @__PURE__ */ o(
+h.displayName = "Dialog.Header";
+const C = ({ padding: t, showBorder: o = !0, children: a, "data-test-id": i = "fondue-dialog-footer" }, r) => /* @__PURE__ */ e(
   "div",
   {
     "data-test-id": i,
     ref: r,
-    className: l.footer,
+    className: n.footer,
     "data-dialog-footer-padding": t,
-    "data-show-border": a,
-    "data-dialog-layout-component": !0,
-    children: e
+    "data-show-border": o,
+    "data-dialog-layout-component": "footer",
+    children: a
   }
 );
-D.displayName = "Dialog.Footer";
-const y = ({ padding: t, children: a, "data-test-id": e = "fondue-dialog-body" }, i) => /* @__PURE__ */ o(
+C.displayName = "Dialog.Footer";
+const N = ({ padding: t, children: o, "data-test-id": a = "fondue-dialog-body" }, i) => /* @__PURE__ */ e(
   "div",
   {
-    "data-test-id": e,
+    "data-test-id": a,
     ref: i,
-    className: l.body,
+    className: n.body,
     "data-dialog-body-padding": t,
-    "data-dialog-layout-component": !0,
-    children: a
+    "data-dialog-layout-component": "body",
+    children: o
   }
 );
-y.displayName = "Dialog.Body";
-const f = ({ 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 });
-f.displayName = "Dialog.SideContent";
-const h = ({ children: t }) => /* @__PURE__ */ o(d.Close, { asChild: !0, children: t });
-h.displayName = "Dialog.Close";
-const C = ({ children: t, asChild: a }) => /* @__PURE__ */ o(d.Title, { asChild: a, children: t });
-C.displayName = "Dialog.Title";
-const N = ({ children: t, asChild: a }) => /* @__PURE__ */ o(d.Description, { asChild: a, children: t });
-N.displayName = "Dialog.Description";
-const I = {
-  Root: u,
-  Title: C,
-  Description: N,
-  Close: h,
-  Trigger: n(c),
-  Content: n(m),
-  Header: n(p),
-  Footer: n(D),
-  Body: n(y),
-  SideContent: n(f)
+N.displayName = "Dialog.Body";
+const b = ({ children: t, "data-test-id": o = "fondue-dialog-side-content" }, a) => /* @__PURE__ */ e("div", { "data-test-id": o, ref: a, className: n.sideContent, "data-dialog-layout-component": !0, children: t });
+b.displayName = "Dialog.SideContent";
+const v = ({ children: t }) => /* @__PURE__ */ e(d.Close, { asChild: !0, children: t });
+v.displayName = "Dialog.Close";
+const x = ({ children: t, asChild: o }) => /* @__PURE__ */ e(d.Title, { asChild: o, children: t });
+x.displayName = "Dialog.Title";
+const F = ({ children: t, asChild: o }) => /* @__PURE__ */ e(d.Description, { asChild: o, children: t });
+F.displayName = "Dialog.Description";
+const Y = {
+  Root: f,
+  Title: x,
+  Description: F,
+  Close: v,
+  Trigger: l(y),
+  Content: l(D),
+  Header: l(h),
+  Footer: l(C),
+  Body: l(N),
+  SideContent: l(b)
 };
 export {
-  I as Dialog,
-  y as DialogBody,
-  h as DialogClose,
-  m as DialogContent,
-  N as DialogDescription,
-  D as DialogFooter,
-  p as DialogHeader,
-  u as DialogRoot,
-  f as DialogSideContent,
-  C as DialogTitle,
-  c as DialogTrigger
+  Y as Dialog,
+  N as DialogBody,
+  v as DialogClose,
+  D as DialogContent,
+  F as DialogDescription,
+  C as DialogFooter,
+  h as DialogHeader,
+  f as DialogRoot,
+  b as DialogSideContent,
+  x as DialogTitle,
+  y 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 { createContext, forwardRef, useContext, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/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     * Define the padding for the dialog header\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\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     * Define the padding for the dialog footer\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\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 = {\n    /**\n     * Define the padding for the dialog body\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\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        rounded = true,\n        children,\n        ...props\n    }: DialogContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const theme = useFondueTheme();\n    return (\n        <RadixDialog.Portal>\n            <ThemeProvider theme={theme}>\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-padding={padding}\n                        data-dialog-rounded={rounded}\n                        data-test-id={dataTestId}\n                        data-dialog-vertical-align={verticalAlign}\n                        {...props}\n                    >\n                        {children}\n                    </RadixDialog.Content>\n                </DialogUnderlay>\n            </ThemeProvider>\n        </RadixDialog.Portal>\n    );\n};\nDialogContent.displayName = 'Dialog.Content';\n\nexport const DialogHeader = (\n    {\n        padding,\n        showBorder = true,\n        showCloseButton = true,\n        children,\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-dialog-header-padding={padding}\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    { padding, 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-dialog-footer-padding={padding}\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    { padding, children, 'data-test-id': dataTestId = 'fondue-dialog-body' }: DialogBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.body}\n            data-dialog-body-padding={padding}\n            data-dialog-layout-component\n        >\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","theme","useFondueTheme","ThemeProvider","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 {\n    createContext,\n    forwardRef,\n    useContext,\n    useRef,\n    type CSSProperties,\n    type ForwardedRef,\n    type ReactNode,\n} from 'react';\n\nimport { useSyncRefs } from '#/hooks/useSyncRefs';\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\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     * Define the padding for the dialog header\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\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     * Define the padding for the dialog footer\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\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 = {\n    /**\n     * Define the padding for the dialog body\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\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        rounded = true,\n        children,\n        ...props\n    }: DialogContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const theme = useFondueTheme();\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    useSyncRefs<HTMLDivElement>(contentRef, ref);\n\n    const handleOpenAutoFocus = (event: Event) => {\n        event.preventDefault();\n\n        const dialogBody = contentRef.current?.querySelector('[data-dialog-layout-component=\"body\"]');\n\n        const firstFocusable = dialogBody?.querySelector(\n            'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n        );\n\n        if (firstFocusable instanceof HTMLElement) {\n            firstFocusable.focus();\n        }\n    };\n\n    return (\n        <RadixDialog.Portal>\n            <ThemeProvider theme={theme}>\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={contentRef}\n                        className={styles.content}\n                        onFocus={addShowFocusRing}\n                        onOpenAutoFocus={handleOpenAutoFocus}\n                        data-dialog-padding={padding}\n                        data-dialog-rounded={rounded}\n                        data-test-id={dataTestId}\n                        data-dialog-vertical-align={verticalAlign}\n                        {...props}\n                    >\n                        {children}\n                    </RadixDialog.Content>\n                </DialogUnderlay>\n            </ThemeProvider>\n        </RadixDialog.Portal>\n    );\n};\nDialogContent.displayName = 'Dialog.Content';\n\nexport const DialogHeader = (\n    {\n        padding,\n        showBorder = true,\n        showCloseButton = true,\n        children,\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-dialog-header-padding={padding}\n            data-show-border={showBorder}\n            data-dialog-layout-component=\"header\"\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    { padding, 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-dialog-footer-padding={padding}\n            data-show-border={showBorder}\n            data-dialog-layout-component=\"footer\"\n        >\n            {children}\n        </div>\n    );\n};\nDialogFooter.displayName = 'Dialog.Footer';\n\nexport const DialogBody = (\n    { padding, children, 'data-test-id': dataTestId = 'fondue-dialog-body' }: DialogBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.body}\n            data-dialog-body-padding={padding}\n            data-dialog-layout-component=\"body\"\n        >\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","theme","useFondueTheme","contentRef","useRef","useSyncRefs","handleOpenAutoFocus","event","dialogBody","_a","firstFocusable","ThemeProvider","addShowFocusRing","DialogHeader","showBorder","showCloseButton","jsxs","IconCross","DialogFooter","DialogBody","DialogSideContent","DialogClose","DialogTitle","DialogDescription","Dialog","forwardRef"],"mappings":";;;;;;;;AA8IA,MAAMA,IAAgBC,EAAiC,EAAE,SAAS,IAAO,GAE5DC,IAAa,CAAC,EAAE,UAAAC,GAAU,GAAGC,0BAEjCJ,EAAc,UAAd,EAAuB,OAAO,EAAE,SAASI,EAAM,SAAS,GAAM,GAC3D,4BAACC,EAAY,MAAZ,EAAkB,GAAGD,GAAQ,UAAAD,EAAS,CAAA,GAC3C;AAGRD,EAAW,cAAc;AAElB,MAAMI,IAAgB,CACzB,EAAE,SAAAC,IAAU,IAAM,UAAAJ,GAAU,gBAAgBK,IAAa,yBAAyB,GAAGJ,EAAM,GAC3FK,MAGI,gBAAAC;AAAA,EAACL,EAAY;AAAA,EAAZ;AAAA,IACG,aAAaM;AAAA,IACb,2BAAwB;AAAA,IACxB,2BAAuB;AAAA,IACvB,gBAAcH;AAAA,IACd,SAAAD;AAAA,IACA,KAAAE;AAAA,IACC,GAAGL;AAAA,IAEH,UAAAD;AAAA,EAAA;AACL;AAGRG,EAAc,cAAc;AAE5B,MAAMM,IAAiB,CAAC,EAAE,UAAAT,GAAU,cAAAU,QAAmE;AACnG,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAWf,CAAa;AAC5C,SAAIc,IAEI,gBAAAJ,EAACL,EAAY,SAAZ,EAAoB,gBAAcQ,GAAc,WAAWG,EAAO,UAC9D,UAAAb,GACL,sBAIH,OAAI,EAAA,WAAWa,EAAO,UAAU,gBAAcH,GAC1C,UAAAV,GACL;AAER,GAEac,IAAgB,CACzB;AAAA,EACI,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,SAAAC,IAAU;AAAA,EACV,eAAAC,IAAgB;AAAA,EAChB,gBAAgBd,IAAa;AAAA,EAC7B,cAAAK,IAAe;AAAA,EACf,SAAAU,IAAU;AAAA,EACV,UAAApB;AAAA,EACA,GAAGC;AACP,GACAK,MACC;AACD,QAAMe,IAAQC,EAAe,GACvBC,IAAaC,EAAuB,IAAI;AAE9C,EAAAC,EAA4BF,GAAYjB,CAAG;AAErC,QAAAoB,IAAsB,CAACC,MAAiB;;AAC1C,IAAAA,EAAM,eAAe;AAErB,UAAMC,KAAaC,IAAAN,EAAW,YAAX,gBAAAM,EAAoB,cAAc,0CAE/CC,IAAiBF,KAAA,gBAAAA,EAAY;AAAA,MAC/B;AAAA;AAGJ,IAAIE,aAA0B,eAC1BA,EAAe,MAAM;AAAA,EAE7B;AAGI,SAAA,gBAAAvB,EAACL,EAAY,QAAZ,EACG,4BAAC6B,GAAc,EAAA,OAAAV,GACX,UAAC,gBAAAd,EAAAE,GAAA,EAAe,cAAAC,GACZ,UAAA,gBAAAH;AAAA,IAACL,EAAY;AAAA,IAAZ;AAAA,MACG,OACI;AAAA,QACI,sBAAsBa;AAAA,QACtB,sBAAsBC;AAAA,QACtB,uBAAuBC;AAAA,MAC3B;AAAA,MAEJ,KAAKM;AAAA,MACL,WAAWV,EAAO;AAAA,MAClB,SAASmB;AAAA,MACT,iBAAiBN;AAAA,MACjB,uBAAqBR;AAAA,MACrB,uBAAqBE;AAAA,MACrB,gBAAcf;AAAA,MACd,8BAA4Bc;AAAA,MAC3B,GAAGlB;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA,EAET,CAAA,EACJ,CAAA,GACJ;AAER;AACAc,EAAc,cAAc;AAErB,MAAMmB,IAAe,CACxB;AAAA,EACI,SAAAf;AAAA,EACA,YAAAgB,IAAa;AAAA,EACb,iBAAAC,IAAkB;AAAA,EAClB,UAAAnC;AAAA,EACA,gBAAgBK,IAAa;AACjC,GACAC,MAGI,gBAAA8B;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAc/B;AAAA,IACd,KAAAC;AAAA,IACA,WAAWO,EAAO;AAAA,IAClB,8BAA4BK;AAAA,IAC5B,oBAAkBgB;AAAA,IAClB,gCAA6B;AAAA,IAE7B,UAAA;AAAA,MAAA,gBAAA3B,EAAC,SAAK,UAAAP,GAAS;AAAA,MACdmC,KACI,gBAAA5B,EAAAL,EAAY,OAAZ,EAAkB,MAAK,UAAS,gBAAc,GAAGG,CAAU,UAAU,WAAU,qBAC5E,4BAACgC,GAAU,EAAA,MAAM,IAAI,EACzB,CAAA;AAAA,IAAA;AAAA,EAAA;AAER;AAGRJ,EAAa,cAAc;AAEd,MAAAK,IAAe,CACxB,EAAE,SAAApB,GAAS,YAAAgB,IAAa,IAAM,UAAAlC,GAAU,gBAAgBK,IAAa,uBAAuB,GAC5FC,MAGI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAcF;AAAA,IACd,KAAAC;AAAA,IACA,WAAWO,EAAO;AAAA,IAClB,8BAA4BK;AAAA,IAC5B,oBAAkBgB;AAAA,IAClB,gCAA6B;AAAA,IAE5B,UAAAlC;AAAA,EAAA;AACL;AAGRsC,EAAa,cAAc;AAEd,MAAAC,IAAa,CACtB,EAAE,SAAArB,GAAS,UAAAlB,GAAU,gBAAgBK,IAAa,qBAAqB,GACvEC,MAGI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAcF;AAAA,IACd,KAAAC;AAAA,IACA,WAAWO,EAAO;AAAA,IAClB,4BAA0BK;AAAA,IAC1B,gCAA6B;AAAA,IAE5B,UAAAlB;AAAA,EAAA;AACL;AAGRuC,EAAW,cAAc;AAEZ,MAAAC,IAAoB,CAC7B,EAAE,UAAAxC,GAAU,gBAAgBK,IAAa,gCACzCC,MAGI,gBAAAC,EAAC,OAAI,EAAA,gBAAcF,GAAY,KAAAC,GAAU,WAAWO,EAAO,aAAa,gCAA4B,IAC/F,UAAAb,EACL,CAAA;AAGRwC,EAAkB,cAAc;AAEzB,MAAMC,IAAc,CAAC,EAAE,UAAAzC,0BAClBE,EAAY,OAAZ,EAAkB,SAAO,IAAE,UAAAF,GAAS;AAEhDyC,EAAY,cAAc;AAEnB,MAAMC,IAAc,CAAC,EAAE,UAAA1C,GAAU,SAAAI,QAC5B,gBAAAG,EAAAL,EAAY,OAAZ,EAAkB,SAAAE,GAAmB,UAAAJ,EAAS,CAAA;AAE1D0C,EAAY,cAAc;AAEnB,MAAMC,IAAoB,CAAC,EAAE,UAAA3C,GAAU,SAAAI,QAClC,gBAAAG,EAAAL,EAAY,aAAZ,EAAwB,SAAAE,GAAmB,UAAAJ,EAAS,CAAA;AAEhE2C,EAAkB,cAAc;AAEzB,MAAMC,IAAS;AAAA,EAClB,MAAM7C;AAAA,EACN,OAAO2C;AAAA,EACP,aAAaC;AAAA,EACb,OAAOF;AAAA,EACP,SAASI,EAAkD1C,CAAa;AAAA,EACxE,SAAS0C,EAA+C/B,CAAa;AAAA,EACrE,QAAQ+B,EAA8CZ,CAAY;AAAA,EAClE,QAAQY,EAA8CP,CAAY;AAAA,EAClE,MAAMO,EAA4CN,CAAU;AAAA,EAC5D,aAAaM,EAAmDL,CAAiB;AACrF;"}

package/dist/fondue-components76.js

@@ -1,5 +1,5 @@
 import { Children as a, isValidElement as u, cloneElement as f } from "react";
-import { ForwardedRefSelectItem as E } from "./fondue-components57.js";
+import { ForwardedRefSelectItem as E } from "./fondue-components58.js";
 const g = ({
   children: r,
   value: o,

package/dist/fondue-components8.js

@@ -2,7 +2,7 @@ import { jsx as d } from "react/jsx-runtime";
 import * as m from "@radix-ui/react-separator";
 import { forwardRef as s } from "react";
 import { cn as f } from "./fondue-components31.js";
-import { dividerStyles as p } from "./fondue-components43.js";
+import { dividerStyles as p } from "./fondue-components44.js";
 const n = s(
   ({
     "data-test-id": r = "fondue-divider",