@frontify/fondue-components 13.0.2 → 14.0.0

package/dist/fondue-components70.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components70.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"fondue-components70.js","sources":["../src/components/Tabs/hooks/useTabTriggers.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type RefObject, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { type TabTrigger } from '../types';\n\nconst getOverflowingTriggers = (triggers: TabTrigger[], triggerListElement: HTMLDivElement) => {\n    return triggers.filter((trigger) => {\n        const triggerElement = trigger.ref?.current;\n        if (!triggerElement) {\n            return false;\n        }\n        return (\n            triggerElement.offsetLeft + triggerElement.offsetWidth >\n                triggerListElement?.scrollLeft + triggerListElement.offsetWidth ||\n            triggerElement.offsetLeft - triggerListElement.scrollLeft < 0\n        );\n    });\n};\n\nconst moveActiveIndicator = (triggerListElement: HTMLDivElement, activeIndicatorRef: RefObject<HTMLSpanElement>) => {\n    const activeIndicatorElement = activeIndicatorRef.current;\n    const activeTriggerElement = triggerListElement?.querySelector('[data-state=\"active\"]');\n\n    if (\n        !triggerListElement ||\n        !(activeTriggerElement instanceof HTMLButtonElement) ||\n        !(activeIndicatorElement instanceof HTMLSpanElement)\n    ) {\n        return;\n    }\n\n    const isOverflowingLeft = triggerListElement?.scrollLeft > activeTriggerElement?.offsetLeft;\n    const isOverflowingRight =\n        activeTriggerElement?.offsetLeft + activeTriggerElement?.offsetWidth > triggerListElement?.offsetWidth;\n\n    if (isOverflowingLeft) {\n        const willFitAllItemsToTheLeft =\n            triggerListElement.offsetWidth > activeTriggerElement.offsetWidth + activeTriggerElement.offsetLeft;\n        if (willFitAllItemsToTheLeft) {\n            activeIndicatorElement.style.left = `${activeTriggerElement.offsetLeft}px`;\n        } else {\n            activeIndicatorElement.style.left = `${triggerListElement.offsetWidth - activeTriggerElement.offsetWidth}px`;\n        }\n        activeIndicatorElement.style.width = `${activeTriggerElement?.offsetWidth}px`;\n    } else if (isOverflowingRight) {\n        activeIndicatorElement.style.left = `${triggerListElement.clientWidth - activeTriggerElement.offsetWidth}px`;\n        activeIndicatorElement.style.width = `${activeTriggerElement.offsetWidth}px`;\n    } else {\n        activeIndicatorElement.style.left = `${activeTriggerElement.offsetLeft}px`;\n        activeIndicatorElement.style.width = `${activeTriggerElement.offsetWidth}px`;\n    }\n};\n\nexport const useTabTriggers = ({\n    activeTab,\n}: {\n    activeTab?: string;\n}): {\n    triggerListRef: RefObject<HTMLDivElement>;\n    activeIndicatorRef: RefObject<HTMLSpanElement>;\n    triggers: TabTrigger[];\n    triggersOutOfView: TabTrigger[];\n    addTrigger: (trigger: TabTrigger) => void;\n} => {\n    const triggerListRef = useRef<HTMLDivElement | null>(null);\n    const activeIndicatorRef = useRef<HTMLSpanElement | null>(null);\n    const [triggers, setTriggers] = useState<TabTrigger[]>([]);\n    const [triggersOutOfView, setTriggersOutOfView] = useState<TabTrigger[]>([]);\n\n    // move the active indicator and scroll to the correct position when the tab changes\n    useEffect(() => {\n        const triggerListElement = triggerListRef.current;\n        const activeTriggerElement = triggerListElement?.querySelector('[data-state=\"active\"]');\n\n        if (activeTriggerElement instanceof HTMLButtonElement && triggerListElement instanceof HTMLDivElement) {\n            moveActiveIndicator(triggerListElement, activeIndicatorRef);\n            activeTriggerElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'end' });\n        }\n    }, [activeTab, activeIndicatorRef]);\n\n    useLayoutEffect(() => {\n        const triggerListElement = triggerListRef.current;\n        const activeTriggerElement = triggerListElement?.querySelector('[data-state=\"active\"]');\n\n        if (triggerListElement instanceof HTMLDivElement && activeTriggerElement instanceof HTMLButtonElement) {\n            // move the active indicator to the initial active tab\n            moveActiveIndicator(triggerListElement, activeIndicatorRef);\n\n            // observe addition of the dropdown trigger which reduces the available width\n            const mutationObserver = new MutationObserver(() => {\n                activeTriggerElement.scrollIntoView({ behavior: 'instant', block: 'nearest', inline: 'end' });\n                moveActiveIndicator(triggerListElement, activeIndicatorRef);\n            });\n            if (triggerListElement.parentNode) {\n                mutationObserver.observe(triggerListElement.parentNode, { childList: true });\n            }\n\n            // calculate the overflowing elements when item starts overflowing the parent\n            const intersectionObserver = new IntersectionObserver(\n                () => {\n                    setTriggersOutOfView(getOverflowingTriggers(triggers, triggerListElement));\n                    moveActiveIndicator(triggerListElement, activeIndicatorRef);\n                },\n                {\n                    root: triggerListElement,\n                    threshold: 1,\n                },\n            );\n            for (const trigger of triggers) {\n                if (trigger.ref?.current) {\n                    intersectionObserver.observe(trigger.ref.current);\n                }\n            }\n\n            return () => {\n                intersectionObserver.disconnect();\n                mutationObserver.disconnect();\n            };\n        }\n    }, [triggers, triggerListRef, activeIndicatorRef]);\n\n    return {\n        triggerListRef,\n        activeIndicatorRef,\n        triggersOutOfView,\n        triggers,\n        addTrigger: (trigger) => {\n            setTriggers((prev) => [...prev, trigger]);\n        },\n    };\n};\n"],"names":["getOverflowingTriggers","triggers","triggerListElement","trigger","triggerElement","_a","moveActiveIndicator","activeIndicatorRef","activeIndicatorElement","activeTriggerElement","isOverflowingLeft","isOverflowingRight","useTabTriggers","activeTab","triggerListRef","useRef","setTriggers","useState","triggersOutOfView","setTriggersOutOfView","useEffect","useLayoutEffect","mutationObserver","intersectionObserver","prev"],"mappings":"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"}

package/dist/fondue-components71.js

@@ -1,21 +1,18 @@
-const o = "_root_kjbh5_5", t = "_input_kjbh5_59", s = "_slot_kjbh5_82", _ = "_iconSuccess_kjbh5_132", n = "_iconError_kjbh5_141", c = "_loadingStatus_kjbh5_155", i = "_spin_kjbh5_1", r = {
-  root: o,
-  input: t,
-  slot: s,
-  iconSuccess: _,
-  iconError: n,
-  loadingStatus: c,
-  spin: i,
-  "tw-dark": "_tw-dark_kjbh5_187"
+const t = "_root_13jbx_5", r = "_triggerList_13jbx_14", e = "_triggerListWrapper_13jbx_28", i = "_trigger_13jbx_14", o = "_content_13jbx_78", g = "_activeIndicator_13jbx_94", _ = {
+  root: t,
+  triggerList: r,
+  triggerListWrapper: e,
+  trigger: i,
+  content: o,
+  activeIndicator: g
 };
 export {
-  r as default,
-  n as iconError,
-  _ as iconSuccess,
-  t as input,
-  c as loadingStatus,
-  o as root,
-  s as slot,
-  i as spin
+  g as activeIndicator,
+  o as content,
+  _ as default,
+  t as root,
+  i as trigger,
+  r as triggerList,
+  e as triggerListWrapper
 };
 //# sourceMappingURL=fondue-components71.js.map

package/dist/fondue-components71.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components71.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"fondue-components71.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/fondue-components72.js

@@ -1,10 +1,29 @@
-const t = "_dark_ikqby_1", s = "_light_ikqby_250", _ = {
-  dark: t,
-  light: s
+const o = "_root_1cjgh_2", _ = {
+  root: o,
+  "weight-default": "_weight-default_1cjgh_7",
+  "weight-strong": "_weight-strong_1cjgh_11",
+  "weight-x-strong": "_weight-x-strong_1cjgh_15",
+  "size-x-small": "_size-x-small_1cjgh_19",
+  "size-small": "_size-small_1cjgh_24",
+  "size-medium": "_size-medium_1cjgh_29",
+  "size-large": "_size-large_1cjgh_34",
+  "color-default": "_color-default_1cjgh_39",
+  "color-weak": "_color-weak_1cjgh_43",
+  "color-x-weak": "_color-x-weak_1cjgh_47",
+  "color-disabled": "_color-disabled_1cjgh_51",
+  "color-negative": "_color-negative_1cjgh_55",
+  "color-positive": "_color-positive_1cjgh_59",
+  "color-warning": "_color-warning_1cjgh_63",
+  "color-interactive": "_color-interactive_1cjgh_67",
+  "color-box-neutral": "_color-box-neutral_1cjgh_71",
+  "color-box-selected": "_color-box-selected_1cjgh_75",
+  "color-box-disabled": "_color-box-disabled_1cjgh_79",
+  "color-box-positive": "_color-box-positive_1cjgh_83",
+  "color-box-negative": "_color-box-negative_1cjgh_87",
+  "color-box-warning": "_color-box-warning_1cjgh_91"
 };
 export {
-  t as dark,
   _ as default,
-  s as light
+  o as root
 };
 //# sourceMappingURL=fondue-components72.js.map

package/dist/fondue-components72.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components72.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"fondue-components72.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/fondue-components73.js

@@ -1,10 +1,21 @@
-const o = "_root_13m98_4", r = "_arrow_13m98_25", t = {
+const o = "_root_kjbh5_5", t = "_input_kjbh5_59", s = "_slot_kjbh5_82", _ = "_iconSuccess_kjbh5_132", n = "_iconError_kjbh5_141", c = "_loadingStatus_kjbh5_155", i = "_spin_kjbh5_1", r = {
   root: o,
-  arrow: r
+  input: t,
+  slot: s,
+  iconSuccess: _,
+  iconError: n,
+  loadingStatus: c,
+  spin: i,
+  "tw-dark": "_tw-dark_kjbh5_187"
 };
 export {
-  r as arrow,
-  t as default,
-  o as root
+  r as default,
+  n as iconError,
+  _ as iconSuccess,
+  t as input,
+  c as loadingStatus,
+  o as root,
+  s as slot,
+  i as spin
 };
 //# sourceMappingURL=fondue-components73.js.map

package/dist/fondue-components73.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components73.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"fondue-components73.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/fondue-components74.js

@@ -1,5 +1,10 @@
-const t = "focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue";
+const t = "_dark_tb6t5_1", s = "_light_tb6t5_250", _ = {
+  dark: t,
+  light: s
+};
 export {
-  t as FOCUS_OUTLINE
+  t as dark,
+  _ as default,
+  s as light
 };
 //# sourceMappingURL=fondue-components74.js.map

package/dist/fondue-components74.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components74.js","sources":["../src/utilities/focusStyle.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nexport const FOCUS_OUTLINE =\n    'focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue'; // second declaration of tw-outline-blue is to assure that in firefox the outline isn't overriden by a global definition of :-moz-focusring which is coming from tailwinds normalization styling\n"],"names":["FOCUS_OUTLINE"],"mappings":"AAEO,MAAMA,IACT;"}
+{"version":3,"file":"fondue-components74.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/fondue-components75.js

@@ -1,18 +1,10 @@
-const o = "_root_1nv86_5", t = "_button_1nv86_56", c = "_colorIndicator_1nv86_69", n = "_actions_1nv86_75", _ = "_clear_1nv86_85", r = "_caret_1nv86_98", a = {
+const o = "_root_13m98_4", r = "_arrow_13m98_25", t = {
   root: o,
-  button: t,
-  colorIndicator: c,
-  actions: n,
-  clear: _,
-  caret: r
+  arrow: r
 };
 export {
-  n as actions,
-  t as button,
-  r as caret,
-  _ as clear,
-  c as colorIndicator,
-  a as default,
+  r as arrow,
+  t as default,
   o as root
 };
 //# sourceMappingURL=fondue-components75.js.map

package/dist/fondue-components75.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components75.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"fondue-components75.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/fondue-components76.js

@@ -1,42 +1,5 @@
-import { Children as a, isValidElement as u, cloneElement as f } from "react";
-import { ForwardedRefSelectItem as E } from "./fondue-components58.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 t = "focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue";
 export {
-  g as getSelectOptionValue,
-  w as isReactLeaf,
-  y as recursiveMap
+  t as FOCUS_OUTLINE
 };
 //# sourceMappingURL=fondue-components76.js.map

package/dist/fondue-components76.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components76.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-components76.js","sources":["../src/utilities/focusStyle.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nexport const FOCUS_OUTLINE =\n    'focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue'; // second declaration of tw-outline-blue is to assure that in firefox the outline isn't overriden by a global definition of :-moz-focusring which is coming from tailwinds normalization styling\n"],"names":["FOCUS_OUTLINE"],"mappings":"AAEO,MAAMA,IACT;"}

package/dist/fondue-components77.js

@@ -0,0 +1,18 @@
+const o = "_root_1a6zb_5", t = "_button_1a6zb_56", c = "_colorIndicator_1a6zb_69", a = "_actions_1a6zb_76", _ = "_clear_1a6zb_86", n = "_caret_1a6zb_99", r = {
+  root: o,
+  button: t,
+  colorIndicator: c,
+  actions: a,
+  clear: _,
+  caret: n
+};
+export {
+  a as actions,
+  t as button,
+  n as caret,
+  _ as clear,
+  c as colorIndicator,
+  r as default,
+  o as root
+};
+//# sourceMappingURL=fondue-components77.js.map

package/dist/fondue-components77.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components77.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/fondue-components78.js

@@ -0,0 +1,42 @@
+import { Children as a, isValidElement as u, cloneElement as f } from "react";
+import { ForwardedRefSelectItem as E } from "./fondue-components60.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 {
+  g as getSelectOptionValue,
+  w as isReactLeaf,
+  y as recursiveMap
+};
+//# sourceMappingURL=fondue-components78.js.map

package/dist/fondue-components78.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components78.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-components8.js

@@ -1,33 +1,152 @@
-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-components44.js";
-const n = s(
-  ({
-    "data-test-id": r = "fondue-divider",
-    direction: o = "horizontal",
-    className: t,
-    variant: i,
-    ...e
-  }, a) => /* @__PURE__ */ d(
-    m.Root,
+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 q, forwardRef as l, useRef as B, useContext as z } from "react";
+import { useSyncRefs as E } from "./fondue-components43.js";
+import { addAutoFocusAttribute as L, addShowFocusRing as $ } from "./fondue-components44.js";
+import { useFondueTheme as k, ThemeProvider as G } from "./fondue-components28.js";
+import n from "./fondue-components45.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: L,
+    "data-auto-focus-visible": "true",
+    "data-auto-focus-trigger": !0,
+    "data-test-id": a,
+    asChild: t,
+    ref: r,
+    ...i,
+    children: o
+  }
+);
+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: o = "400px",
+  minHeight: a = "200px",
+  padding: i = "compact",
+  verticalAlign: r = "center",
+  "data-test-id": s = "fondue-dialog-content",
+  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,
     {
-      ref: a,
-      className: f(
-        p({
-          direction: o,
-          variant: i,
-          ...e
-        }),
-        t
-      ),
-      "data-test-id": r
+      style: {
+        "--dialog-max-width": t,
+        "--dialog-min-width": o,
+        "--dialog-min-height": a
+      },
+      ref: c,
+      className: n.content,
+      onFocus: $,
+      onOpenAutoFocus: H,
+      "data-dialog-padding": i,
+      "data-dialog-rounded": T,
+      "data-test-id": s,
+      "data-dialog-vertical-align": r,
+      ...S,
+      children: w
     }
-  )
+  ) }) }) });
+};
+D.displayName = "Dialog.Content";
+const h = ({
+  padding: t,
+  showBorder: o = !0,
+  showCloseButton: a = !0,
+  children: i,
+  "data-test-id": r = "fondue-dialog-header"
+}, s) => /* @__PURE__ */ P(
+  "div",
+  {
+    "data-test-id": r,
+    ref: s,
+    className: n.header,
+    "data-dialog-header-padding": t,
+    "data-show-border": o,
+    "data-dialog-layout-component": "header",
+    children: [
+      /* @__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 }) })
+    ]
+  }
+);
+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: n.footer,
+    "data-dialog-footer-padding": t,
+    "data-show-border": o,
+    "data-dialog-layout-component": "footer",
+    children: a
+  }
 );
-n.displayName = "Divider";
+C.displayName = "Dialog.Footer";
+const N = ({ padding: t, children: o, "data-test-id": a = "fondue-dialog-body" }, i) => /* @__PURE__ */ e(
+  "div",
+  {
+    "data-test-id": a,
+    ref: i,
+    className: n.body,
+    "data-dialog-body-padding": t,
+    "data-dialog-layout-component": "body",
+    children: o
+  }
+);
+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 {
-  n as Divider
+  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-components8.js.map

package/dist/fondue-components8.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components8.js","sources":["../src/components/Divider/Divider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as Separator from '@radix-ui/react-separator';\nimport { forwardRef, type ForwardedRef, type ReactElement } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { dividerStyles } from './styles/dividerStyles';\n\ntype DividerStyle = 'noline' | 'dashed' | 'solid';\ntype DividerPadding = 'none' | 'small' | 'medium' | 'large';\ntype DividerDirection = 'horizontal' | 'vertical';\ntype DividerColor = 'weak' | 'default' | 'strong' | 'x-strong';\n\nexport type DividerProps = {\n    /**\n     * The style of the divider\n     * @default \"solid\"\n     */\n    variant?: DividerStyle;\n    /**\n     * The padding of the divider\n     * @default \"medium\"\n     */\n    padding?: DividerPadding;\n    /**\n     * The color of the divider\n     * @default \"default\"\n     */\n    color?: DividerColor;\n    /**\n     * The direction of the divider\n     * @default \"horizontal\"\n     */\n    direction?: DividerDirection;\n    'data-test-id'?: string;\n    className?: string;\n};\n\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(\n    (\n        {\n            'data-test-id': dataTestId = 'fondue-divider',\n            direction = 'horizontal',\n            className,\n            variant,\n            ...props\n        }: DividerProps,\n        ref: ForwardedRef<HTMLDivElement | null>,\n    ): ReactElement => {\n        return (\n            <Separator.Root\n                ref={ref}\n                className={cn(\n                    dividerStyles({\n                        direction,\n                        variant,\n                        ...props,\n                    }),\n                    className,\n                )}\n                data-test-id={dataTestId}\n            />\n        );\n    },\n);\n\nDivider.displayName = 'Divider';\n"],"names":["Divider","forwardRef","dataTestId","direction","className","variant","props","ref","jsx","Separator","cn","dividerStyles"],"mappings":";;;;;AAuCO,MAAMA,IAAUC;AAAA,EACnB,CACI;AAAA,IACI,gBAAgBC,IAAa;AAAA,IAC7B,WAAAC,IAAY;AAAA,IACZ,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,KAEPC,MAGI,gBAAAC;AAAA,IAACC,EAAU;AAAA,IAAV;AAAA,MACG,KAAAF;AAAA,MACA,WAAWG;AAAA,QACPC,EAAc;AAAA,UACV,WAAAR;AAAA,UACA,SAAAE;AAAA,UACA,GAAGC;AAAA,QAAA,CACN;AAAA,QACDF;AAAA,MACJ;AAAA,MACA,gBAAcF;AAAA,IAAA;AAAA,EAClB;AAGZ;AAEAF,EAAQ,cAAc;"}
+{"version":3,"file":"fondue-components8.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":"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"}