@frontify/fondue-components 25.0.0-rc.3 → 25.0.0-rc.5

package/dist/fondue-components10.js

@@ -1,32 +1,32 @@
-import { jsx as t } from "react/jsx-runtime";
-import * as p from "@radix-ui/react-separator";
-import { forwardRef as f } from "react";
+import { jsx as o } from "react/jsx-runtime";
+import * as f from "@radix-ui/react-separator";
+import { forwardRef as p } from "react";
 import c from "./fondue-components54.js";
-const u = f(
+const u = p(
   ({
-    "data-test-id": a = "fondue-divider",
-    direction: o = "horizontal",
+    "data-test-id": t = "fondue-divider",
+    direction: a = "horizontal",
     padding: r = "medium",
-    className: d = "",
-    variant: i = "solid",
+    className: i = "",
+    variant: d = "solid",
     color: e = "default",
-    as: m = "div",
-    decorative: s
-  }, n) => {
-    const l = m;
-    return /* @__PURE__ */ t(
-      p.Root,
+    as: n = "div",
+    decorative: m
+  }, s) => {
+    const l = n;
+    return /* @__PURE__ */ o(
+      f.Root,
       {
-        ref: n,
-        className: `${c.root} ${d}`,
-        "data-variant": i,
+        ref: s,
+        className: [c.root, i].filter(Boolean).join(" "),
+        "data-variant": d,
         "data-color": e,
         "data-padding": r,
-        "data-test-id": a,
-        decorative: s,
-        "data-orientation": o,
+        "data-test-id": t,
+        decorative: m,
+        "data-orientation": a,
         asChild: !0,
-        children: /* @__PURE__ */ t(l, {})
+        children: /* @__PURE__ */ o(l, {})
       }
     );
   }

package/dist/fondue-components10.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components10.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 styles from './styles/divider.module.scss';\n\ntype DividerStyle = 'noline' | 'dashed' | 'solid';\ntype DividerPadding = 'none' | 'small' | 'medium' | 'large';\ntype DividerDirection = 'horizontal' | 'vertical';\ntype DividerColor = 'weak' | 'default' | '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    /**\n     * The html element to be used\n     * @default \"div\"\n     */\n    as?: 'div' | 'li';\n    /**\n     * When `true`, signifies that it is purely visual, carries no semantic\n     * meaning, and ensures it is not present in the accessibility tree.\n     * @default false\n     */\n    decorative?: boolean;\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            padding = 'medium',\n            className = '',\n            variant = 'solid',\n            color = 'default',\n            as = 'div',\n            decorative,\n        }: DividerProps,\n        ref: ForwardedRef<HTMLDivElement | null>,\n    ): ReactElement => {\n        const Component = as;\n\n        return (\n            <Separator.Root\n                ref={ref}\n                className={`${styles.root} ${className}`}\n                data-variant={variant}\n                data-color={color}\n                data-padding={padding}\n                data-test-id={dataTestId}\n                decorative={decorative}\n                data-orientation={direction}\n                asChild\n            >\n                <Component />\n            </Separator.Root>\n        );\n    },\n);\n\nDivider.displayName = 'Divider';\n"],"names":["Divider","forwardRef","dataTestId","direction","padding","className","variant","color","as","decorative","ref","Component","jsx","Separator","styles"],"mappings":";;;;AAgDO,MAAMA,IAAUC;AAAA,EACnB,CACI;AAAA,IACI,gBAAgBC,IAAa;AAAA,IAC7B,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU;AAAA,IACV,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU;AAAA,IACV,OAAAC,IAAQ;AAAA,IACR,IAAAC,IAAK;AAAA,IACL,YAAAC;AAAA,EAAA,GAEJC,MACe;AACf,UAAMC,IAAYH;AAElB,WACI,gBAAAI;AAAA,MAACC,EAAU;AAAA,MAAV;AAAA,QACG,KAAAH;AAAA,QACA,WAAW,GAAGI,EAAO,IAAI,IAAIT,CAAS;AAAA,QACtC,gBAAcC;AAAA,QACd,cAAYC;AAAA,QACZ,gBAAcH;AAAA,QACd,gBAAcF;AAAA,QACd,YAAAO;AAAA,QACA,oBAAkBN;AAAA,QAClB,SAAO;AAAA,QAEP,4BAACQ,GAAA,CAAA,CAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAGvB;AACJ;AAEAX,EAAQ,cAAc;"}
+{"version":3,"file":"fondue-components10.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 styles from './styles/divider.module.scss';\n\ntype DividerStyle = 'noline' | 'dashed' | 'solid';\ntype DividerPadding = 'none' | 'small' | 'medium' | 'large';\ntype DividerDirection = 'horizontal' | 'vertical';\ntype DividerColor = 'weak' | 'default' | '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    /**\n     * The html element to be used\n     * @default \"div\"\n     */\n    as?: 'div' | 'li';\n    /**\n     * When `true`, signifies that it is purely visual, carries no semantic\n     * meaning, and ensures it is not present in the accessibility tree.\n     * @default false\n     */\n    decorative?: boolean;\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            padding = 'medium',\n            className = '',\n            variant = 'solid',\n            color = 'default',\n            as = 'div',\n            decorative,\n        }: DividerProps,\n        ref: ForwardedRef<HTMLDivElement | null>,\n    ): ReactElement => {\n        const Component = as;\n\n        return (\n            <Separator.Root\n                ref={ref}\n                className={[styles.root, className].filter(Boolean).join(' ')}\n                data-variant={variant}\n                data-color={color}\n                data-padding={padding}\n                data-test-id={dataTestId}\n                decorative={decorative}\n                data-orientation={direction}\n                asChild\n            >\n                <Component />\n            </Separator.Root>\n        );\n    },\n);\n\nDivider.displayName = 'Divider';\n"],"names":["Divider","forwardRef","dataTestId","direction","padding","className","variant","color","as","decorative","ref","Component","jsx","Separator","styles"],"mappings":";;;;AAgDO,MAAMA,IAAUC;AAAA,EACnB,CACI;AAAA,IACI,gBAAgBC,IAAa;AAAA,IAC7B,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU;AAAA,IACV,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU;AAAA,IACV,OAAAC,IAAQ;AAAA,IACR,IAAAC,IAAK;AAAA,IACL,YAAAC;AAAA,EAAA,GAEJC,MACe;AACf,UAAMC,IAAYH;AAElB,WACI,gBAAAI;AAAA,MAACC,EAAU;AAAA,MAAV;AAAA,QACG,KAAAH;AAAA,QACA,WAAW,CAACI,EAAO,MAAMT,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,QAC5D,gBAAcC;AAAA,QACd,cAAYC;AAAA,QACZ,gBAAcH;AAAA,QACd,gBAAcF;AAAA,QACd,YAAAO;AAAA,QACA,oBAAkBN;AAAA,QAClB,SAAO;AAAA,QAEP,4BAACQ,GAAA,CAAA,CAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAGvB;AACJ;AAEAX,EAAQ,cAAc;"}

package/dist/fondue-components11.js

@@ -1,88 +1,90 @@
-import { jsx as d, jsxs as S } from "react/jsx-runtime";
-import { IconCaretRight as x } from "@frontify/fondue-icons";
+import { jsx as d, jsxs as C } from "react/jsx-runtime";
+import { IconCaretRight as _ } from "@frontify/fondue-icons";
 import * as a from "@radix-ui/react-dropdown-menu";
-import { forwardRef as i, useRef as R, useMemo as _, Children as j } from "react";
-import { useFondueTheme as C, ThemeProvider as F } from "./fondue-components36.js";
-import { useProcessedChildren as I } from "./fondue-components55.js";
+import { forwardRef as i, useRef as R, useMemo as j, Children as B } from "react";
+import { useFondueTheme as F, ThemeProvider as I } from "./fondue-components36.js";
+import { useProcessedChildren as T } from "./fondue-components55.js";
 import u from "./fondue-components56.js";
-const T = ({
+const y = ({
   children: t,
   open: o,
   modal: r = !1,
   onOpenChange: n,
   "data-test-id": e = "fondue-dropdown"
 }) => /* @__PURE__ */ d(a.Root, { open: o, modal: r, onOpenChange: n, "data-test-id": e, children: t });
-T.displayName = "Dropdown.Root";
-const y = ({
+y.displayName = "Dropdown.Root";
+const M = ({
   asChild: t = !0,
   children: o,
   "data-test-id": r = "fondue-dropdown-trigger",
   ...n
 }, e) => /* @__PURE__ */ d(a.Trigger, { asChild: t, "data-test-id": r, ref: e, ...n, children: o });
-y.displayName = "Dropdown.Trigger";
-const B = {
+M.displayName = "Dropdown.Trigger";
+const L = {
   compact: 8,
   comfortable: 12,
   spacious: 16
-}, L = {
+}, k = {
   compact: 8,
   spacious: 24
-}, M = ({
+}, P = ({
   side: t = "bottom",
   align: o = "start",
   triggerOffset: r = "compact",
   children: n,
   preventTriggerFocusOnClose: e,
   viewportCollisionPadding: s = "compact",
-  forceMount: p = !1,
-  "data-test-id": g = "fondue-dropdown-content"
-}, D) => {
-  const b = R(null), { theme: c, dir: l } = C(), w = D || b;
-  return /* @__PURE__ */ d(a.Portal, { forceMount: p || void 0, children: /* @__PURE__ */ d(F, { theme: c, dir: l, children: /* @__PURE__ */ d(
+  forceMount: l = !1,
+  onEscapeKeyDown: g,
+  "data-test-id": D = "fondue-dropdown-content"
+}, b) => {
+  const c = R(null), { theme: p, dir: N } = F(), w = b || c;
+  return /* @__PURE__ */ d(a.Portal, { forceMount: l || void 0, children: /* @__PURE__ */ d(I, { theme: p, dir: N, children: /* @__PURE__ */ d(
     a.Content,
     {
-      dir: l,
+      dir: N,
       align: o,
-      collisionPadding: L[s],
-      sideOffset: B[r],
+      collisionPadding: k[s],
+      sideOffset: L[r],
       side: t,
       className: u.content,
-      "data-test-id": g,
+      "data-test-id": D,
       ref: w,
+      onEscapeKeyDown: g,
       onPointerDownOutside: (f) => {
-        var N;
-        if (!p || !(f.target instanceof Element) || !(w instanceof Object) || !("current" in w))
+        var S;
+        if (!l || !(f.target instanceof Element) || !(w instanceof Object) || !("current" in w))
           return;
         let m = f.target, h = null;
         for (; m && m !== document.body && (h = m.getAttribute("aria-controls"), !h); )
           m = m.parentElement;
-        h === ((N = w.current) == null ? void 0 : N.id) && f.preventDefault();
+        h === ((S = w.current) == null ? void 0 : S.id) && f.preventDefault();
       },
       onCloseAutoFocus: (f) => {
         e && f.preventDefault();
       },
-      forceMount: p || void 0,
+      forceMount: l || void 0,
       children: n
     }
   ) }) });
 };
-M.displayName = "Dropdown.Content";
-const P = ({ children: t, heading: o, "data-test-id": r = "fondue-dropdown-group" }, n) => _(
-  () => j.toArray(t).filter((s) => s !== null).length > 0,
+P.displayName = "Dropdown.Content";
+const A = ({ children: t, heading: o, "data-test-id": r = "fondue-dropdown-group" }, n) => j(
+  () => B.toArray(t).filter((s) => s !== null).length > 0,
   [t]
-) ? /* @__PURE__ */ S(a.Group, { className: u.group, "data-test-id": r, ref: n, children: [
+) ? /* @__PURE__ */ C(a.Group, { className: u.group, "data-test-id": r, ref: n, children: [
   o ? /* @__PURE__ */ d("div", { className: u.groupHeading, children: /* @__PURE__ */ d("span", { "aria-label": o, children: o }) }) : null,
   t
 ] }) : null;
-P.displayName = "Dropdown.Group";
-const A = ({
+A.displayName = "Dropdown.Group";
+const G = ({
   children: t,
   "data-test-id": o = "fondue-dropdown-submenu"
 }) => /* @__PURE__ */ d(a.Sub, { "data-test-id": o, children: t });
-A.displayName = "Dropdown.SubMenu";
-const G = ({ children: t, "data-test-id": o = "fondue-dropdown-subtrigger" }, r) => {
-  const { content: n } = I(t), e = R(!1);
-  return /* @__PURE__ */ S(
+G.displayName = "Dropdown.SubMenu";
+const O = ({ children: t, "data-test-id": o = "fondue-dropdown-subtrigger" }, r) => {
+  const { content: n } = T(t), e = R(!1);
+  return /* @__PURE__ */ C(
     a.SubTrigger,
     {
       className: u.subTrigger,
@@ -100,15 +102,15 @@ const G = ({ children: t, "data-test-id": o = "fondue-dropdown-subtrigger" }, r)
       },
       children: [
         n,
-        /* @__PURE__ */ d(x, { className: u.subMenuIndicator, size: 16 })
+        /* @__PURE__ */ d(_, { className: u.subMenuIndicator, size: 16 })
       ]
     }
   );
 };
-G.displayName = "Dropdown.SubTrigger";
-const O = ({ children: t, "data-test-id": o = "fondue-dropdown-subcontent" }, r) => {
-  const { theme: n, dir: e } = C();
-  return /* @__PURE__ */ d(a.Portal, { children: /* @__PURE__ */ d(F, { theme: n, dir: e, children: /* @__PURE__ */ d(
+O.displayName = "Dropdown.SubTrigger";
+const v = ({ children: t, "data-test-id": o = "fondue-dropdown-subcontent" }, r) => {
+  const { theme: n, dir: e } = F();
+  return /* @__PURE__ */ d(a.Portal, { children: /* @__PURE__ */ d(I, { theme: n, dir: e, children: /* @__PURE__ */ d(
     a.SubContent,
     {
       dir: e,
@@ -119,25 +121,25 @@ const O = ({ children: t, "data-test-id": o = "fondue-dropdown-subcontent" }, r)
     }
   ) }) });
 };
-O.displayName = "Dropdown.SubContent";
-const v = ({
+v.displayName = "Dropdown.SubContent";
+const E = ({
   children: t,
   disabled: o,
   textValue: r,
   onSelect: n,
   emphasis: e = "default",
   asChild: s = !1,
-  "data-test-id": p = "fondue-dropdown-subtrigger",
+  "data-test-id": l = "fondue-dropdown-subtrigger",
   ...g
 }, D) => {
-  const { content: b } = I(t), c = R(!1);
+  const { content: b } = T(t), c = R(!1);
   return /* @__PURE__ */ d(
     a.Item,
     {
       onSelect: n,
       className: u.item,
       textValue: r,
-      "data-test-id": p,
+      "data-test-id": l,
       "data-emphasis": e,
       ref: D,
       disabled: o,
@@ -146,41 +148,41 @@ const v = ({
       onMouseEnter: () => {
         c.current = !0;
       },
-      onFocus: (l) => {
-        c.current || (l.target.dataset.showFocusRing = "true");
+      onFocus: (p) => {
+        c.current || (p.target.dataset.showFocusRing = "true");
       },
-      onBlur: (l) => {
-        l.target.dataset.showFocusRing = "false", c.current = !1;
+      onBlur: (p) => {
+        p.target.dataset.showFocusRing = "false", c.current = !1;
       },
       ...g,
       children: b
     }
   );
 };
-v.displayName = "Dropdown.Item";
-const E = ({ children: t, name: o, "data-test-id": r = "fondue-dropdown-slot" }, n) => /* @__PURE__ */ d("div", { "data-name": o, className: u.slot, "data-test-id": r, ref: n, children: t });
-E.displayName = "Dropdown.Slot";
-const k = i(y), z = i(M), H = i(P), V = i(G), W = i(O), q = i(v), J = i(E), $ = {
-  Root: T,
-  Trigger: k,
-  Content: z,
-  Group: H,
-  SubMenu: A,
-  SubTrigger: V,
-  SubContent: W,
-  Item: q,
-  Slot: J
+E.displayName = "Dropdown.Item";
+const x = ({ children: t, name: o, "data-test-id": r = "fondue-dropdown-slot" }, n) => /* @__PURE__ */ d("div", { "data-name": o, className: u.slot, "data-test-id": r, ref: n, children: t });
+x.displayName = "Dropdown.Slot";
+const z = i(M), H = i(P), V = i(A), W = i(O), q = i(v), J = i(E), K = i(x), tt = {
+  Root: y,
+  Trigger: z,
+  Content: H,
+  Group: V,
+  SubMenu: G,
+  SubTrigger: W,
+  SubContent: q,
+  Item: J,
+  Slot: K
 };
 export {
-  $ as Dropdown,
-  M as DropdownContent,
-  P as DropdownGroup,
-  v as DropdownItem,
-  T as DropdownRoot,
-  E as DropdownSlot,
-  O as DropdownSubContent,
-  A as DropdownSubMenu,
-  G as DropdownSubTrigger,
-  y as DropdownTrigger
+  tt as Dropdown,
+  P as DropdownContent,
+  A as DropdownGroup,
+  E as DropdownItem,
+  y as DropdownRoot,
+  x as DropdownSlot,
+  v as DropdownSubContent,
+  G as DropdownSubMenu,
+  O as DropdownSubTrigger,
+  M as DropdownTrigger
 };
 //# sourceMappingURL=fondue-components11.js.map

package/dist/fondue-components11.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components11.js","sources":["../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretRight } from '@frontify/fondue-icons';\nimport * as RadixDropdown from '@radix-ui/react-dropdown-menu';\nimport { Children, forwardRef, useMemo, useRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport { useProcessedChildren } from './hooks/useProcessedChildren';\nimport styles from './styles/dropdown.module.scss';\n\nexport type DropdownRootProps = {\n    children?: ReactNode;\n    /**\n     * When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.\n     * @default false\n     */\n    modal?: boolean;\n    /**\n     * Controls the open state of the dropdown.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the dropdown changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n\n    'data-test-id'?: string;\n};\n\nexport const DropdownRoot = ({\n    children,\n    open,\n    modal = false,\n    onOpenChange,\n    'data-test-id': dataTestId = 'fondue-dropdown',\n}: DropdownRootProps) => {\n    return (\n        <RadixDropdown.Root open={open} modal={modal} onOpenChange={onOpenChange} data-test-id={dataTestId}>\n            {children}\n        </RadixDropdown.Root>\n    );\n};\nDropdownRoot.displayName = 'Dropdown.Root';\n\nexport type DropdownTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default true\n     */\n    asChild?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const DropdownTrigger = (\n    {\n        asChild = true,\n        children,\n        'data-test-id': dataTestId = 'fondue-dropdown-trigger',\n        ...props\n    }: DropdownTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDropdown.Trigger asChild={asChild} data-test-id={dataTestId} ref={ref} {...props}>\n            {children}\n        </RadixDropdown.Trigger>\n    );\n};\nDropdownTrigger.displayName = 'Dropdown.Trigger';\n\ntype DropdownSpacing = 'compact' | 'comfortable' | 'spacious';\ntype DropdownViewportCollisionPadding = 'compact' | 'spacious';\nexport type DropdownContentProps = {\n    children?: ReactNode;\n    'data-test-id'?: string;\n    /**\n     * Defines the alignment of the dropdown.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Defines the preferred side of the dropdown. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    /**\n     * Defines the spacing between the dropdown and its trigger.\n     * @default 'compact'\n     */\n    triggerOffset?: DropdownSpacing;\n    /**\n     * Prevents the focus from being set on the trigger when the dropdown is closed.\n     */\n    preventTriggerFocusOnClose?: boolean;\n    /**\n     * Define the minimum distance between the dropdown and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: DropdownViewportCollisionPadding;\n    /**\n     * When true, the content will always be mounted in the DOM. Before enabling, make sure you really need it.\n     * @default false\n     */\n    forceMount?: boolean;\n};\n\nconst SPACING_MAP: Record<DropdownSpacing, number> = {\n    compact: 8,\n    comfortable: 12,\n    spacious: 16,\n};\n\nconst VIEWPORT_COLLISION_PADDING_MAP: Record<DropdownViewportCollisionPadding, number> = {\n    compact: 8,\n    spacious: 24,\n};\n\nexport const DropdownContent = (\n    {\n        side = 'bottom',\n        align = 'start',\n        triggerOffset = 'compact',\n        children,\n        preventTriggerFocusOnClose,\n        viewportCollisionPadding = 'compact',\n        forceMount = false,\n        'data-test-id': dataTestId = 'fondue-dropdown-content',\n    }: DropdownContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const localRef = useRef<HTMLDivElement>(null);\n    const { theme, dir } = useFondueTheme();\n    const actualRef = ref || localRef;\n    return (\n        <RadixDropdown.Portal forceMount={forceMount || undefined}>\n            <ThemeProvider theme={theme} dir={dir}>\n                <RadixDropdown.Content\n                    // @ts-expect-error - dir prop works at runtime but is not in the Radix UI type definition\n                    dir={dir}\n                    align={align}\n                    collisionPadding={VIEWPORT_COLLISION_PADDING_MAP[viewportCollisionPadding]}\n                    sideOffset={SPACING_MAP[triggerOffset]}\n                    side={side}\n                    className={styles.content}\n                    data-test-id={dataTestId}\n                    ref={actualRef}\n                    onPointerDownOutside={(event) => {\n                        if (!forceMount) {\n                            return;\n                        }\n\n                        if (!(event.target instanceof Element)) {\n                            return;\n                        }\n\n                        if (!(actualRef instanceof Object) || !('current' in actualRef)) {\n                            return;\n                        }\n\n                        let element: Element | null = event.target;\n                        let controlsId: string | null = null;\n\n                        while (element && element !== document.body) {\n                            controlsId = element.getAttribute('aria-controls');\n\n                            if (controlsId) {\n                                break;\n                            }\n\n                            element = element.parentElement;\n                        }\n\n                        if (controlsId === actualRef.current?.id) {\n                            event.preventDefault();\n                        }\n                    }}\n                    onCloseAutoFocus={(event) => {\n                        if (preventTriggerFocusOnClose) {\n                            event.preventDefault();\n                        }\n                    }}\n                    forceMount={forceMount || undefined}\n                >\n                    {children}\n                </RadixDropdown.Content>\n            </ThemeProvider>\n        </RadixDropdown.Portal>\n    );\n};\nDropdownContent.displayName = 'Dropdown.Content';\n\nexport type DropdownGroupProps = { children: ReactNode; heading?: string; 'data-test-id'?: string };\n\nexport const DropdownGroup = (\n    { children, heading, 'data-test-id': dataTestId = 'fondue-dropdown-group' }: DropdownGroupProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const hasChildren = useMemo(\n        () => Children.toArray(children).filter((child) => child !== null).length > 0,\n        [children],\n    );\n\n    if (!hasChildren) {\n        return null;\n    }\n\n    return (\n        <RadixDropdown.Group className={styles.group} data-test-id={dataTestId} ref={ref}>\n            {heading ? (\n                <div className={styles.groupHeading}>\n                    <span aria-label={heading}>{heading}</span>\n                </div>\n            ) : null}\n            {children}\n        </RadixDropdown.Group>\n    );\n};\nDropdownGroup.displayName = 'Dropdown.Group';\n\nexport type DropdownSubMenuProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownSubMenu = ({\n    children,\n    'data-test-id': dataTestId = 'fondue-dropdown-submenu',\n}: DropdownSubMenuProps) => {\n    return <RadixDropdown.Sub data-test-id={dataTestId}>{children}</RadixDropdown.Sub>;\n};\nDropdownSubMenu.displayName = 'Dropdown.SubMenu';\n\nexport type DropdownSubTriggerProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownSubTrigger = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-subtrigger' }: DropdownSubTriggerProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { content } = useProcessedChildren(children);\n    const wasMouseInteracted = useRef(false);\n    return (\n        <RadixDropdown.SubTrigger\n            className={styles.subTrigger}\n            data-show-focus-ring={wasMouseInteracted.current}\n            data-test-id={dataTestId}\n            ref={ref}\n            onMouseEnter={() => {\n                wasMouseInteracted.current = true;\n            }}\n            onFocus={(focusEvent) => {\n                if (!wasMouseInteracted.current) {\n                    focusEvent.target.dataset.showFocusRing = 'true';\n                }\n            }}\n            onBlur={(blurEvent) => {\n                blurEvent.target.dataset.showFocusRing = 'false';\n                wasMouseInteracted.current = false;\n            }}\n        >\n            {content}\n            <IconCaretRight className={styles.subMenuIndicator} size={16} />\n        </RadixDropdown.SubTrigger>\n    );\n};\nDropdownSubTrigger.displayName = 'Dropdown.SubTrigger';\n\nexport type DropdownSubContentProps = {\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const DropdownSubContent = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-subcontent' }: DropdownSubContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { theme, dir } = useFondueTheme();\n\n    return (\n        <RadixDropdown.Portal>\n            <ThemeProvider theme={theme} dir={dir}>\n                <RadixDropdown.SubContent\n                    // @ts-expect-error - dir prop works at runtime but is not in the Radix UI type definition\n                    dir={dir}\n                    className={styles.subContent}\n                    data-test-id={dataTestId}\n                    ref={ref}\n                >\n                    {children}\n                </RadixDropdown.SubContent>\n            </ThemeProvider>\n        </RadixDropdown.Portal>\n    );\n};\nDropdownSubContent.displayName = 'Dropdown.SubContent';\n\nexport type DropdownItemProps = {\n    children: ReactNode;\n    /**\n     * Disables the item.\n     */\n    disabled?: boolean;\n    /**\n     * The text value of the item that is passed to the onSelect callback.\n     */\n    textValue?: string;\n    /**\n     * The style of the item.\n     * @default \"default\"\n     */\n    emphasis?: 'default' | 'danger';\n    /**\n     * Callback that is called when the item is selected.\n     */\n    onSelect?: (event: Event) => void;\n    /**\n     * If true, the item props will be passed to the child element.\n     * @default false\n     */\n    asChild?: boolean;\n    'data-test-id'?: string;\n};\n\nexport const DropdownItem = (\n    {\n        children,\n        disabled,\n        textValue,\n        onSelect,\n        emphasis = 'default',\n        asChild = false,\n        'data-test-id': dataTestId = 'fondue-dropdown-subtrigger',\n        ...props\n    }: DropdownItemProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { content } = useProcessedChildren(children);\n    const wasMouseInteracted = useRef(false);\n\n    return (\n        <RadixDropdown.Item\n            onSelect={onSelect}\n            className={styles.item}\n            textValue={textValue}\n            data-test-id={dataTestId}\n            data-emphasis={emphasis}\n            ref={ref}\n            disabled={disabled}\n            asChild={asChild}\n            data-show-focus-ring={wasMouseInteracted.current}\n            onMouseEnter={() => {\n                wasMouseInteracted.current = true;\n            }}\n            onFocus={(focusEvent) => {\n                if (!wasMouseInteracted.current) {\n                    focusEvent.target.dataset.showFocusRing = 'true';\n                }\n            }}\n            onBlur={(blurEvent) => {\n                blurEvent.target.dataset.showFocusRing = 'false';\n                wasMouseInteracted.current = false;\n            }}\n            {...props}\n        >\n            {content}\n        </RadixDropdown.Item>\n    );\n};\nDropdownItem.displayName = 'Dropdown.Item';\n\nexport type DropdownSlotProps = { children: ReactNode; name?: 'left' | 'right'; 'data-test-id'?: string };\n\nexport const DropdownSlot = (\n    { children, name, 'data-test-id': dataTestId = 'fondue-dropdown-slot' }: DropdownSlotProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-name={name} className={styles.slot} data-test-id={dataTestId} ref={ref}>\n            {children}\n        </div>\n    );\n};\nDropdownSlot.displayName = 'Dropdown.Slot';\n\nconst ForwardedRefDropdownTrigger = forwardRef<HTMLButtonElement, DropdownTriggerProps>(DropdownTrigger);\nconst ForwardedRefDropdownContent = forwardRef<HTMLDivElement, DropdownContentProps>(DropdownContent);\nconst ForwardedRefDropdownGroup = forwardRef<HTMLDivElement, DropdownGroupProps>(DropdownGroup);\nconst ForwardedRefDropdownSubTrigger = forwardRef<HTMLDivElement, DropdownSubTriggerProps>(DropdownSubTrigger);\nconst ForwardedRefDropdownSubContent = forwardRef<HTMLDivElement, DropdownSubContentProps>(DropdownSubContent);\nconst ForwardedRefDropdownItem = forwardRef<HTMLDivElement, DropdownItemProps>(DropdownItem);\nconst ForwardedRefDropdownSlot = forwardRef<HTMLDivElement, DropdownSlotProps>(DropdownSlot);\n\nexport const Dropdown = {\n    Root: DropdownRoot,\n    Trigger: ForwardedRefDropdownTrigger,\n    Content: ForwardedRefDropdownContent,\n    Group: ForwardedRefDropdownGroup,\n    SubMenu: DropdownSubMenu,\n    SubTrigger: ForwardedRefDropdownSubTrigger,\n    SubContent: ForwardedRefDropdownSubContent,\n    Item: ForwardedRefDropdownItem,\n    Slot: ForwardedRefDropdownSlot,\n};\n"],"names":["DropdownRoot","children","open","modal","onOpenChange","dataTestId","jsx","RadixDropdown","DropdownTrigger","asChild","props","ref","SPACING_MAP","VIEWPORT_COLLISION_PADDING_MAP","DropdownContent","side","align","triggerOffset","preventTriggerFocusOnClose","viewportCollisionPadding","forceMount","localRef","useRef","theme","dir","useFondueTheme","actualRef","ThemeProvider","styles","event","element","controlsId","_a","DropdownGroup","heading","useMemo","Children","child","jsxs","DropdownSubMenu","DropdownSubTrigger","content","useProcessedChildren","wasMouseInteracted","focusEvent","blurEvent","IconCaretRight","DropdownSubContent","DropdownItem","disabled","textValue","onSelect","emphasis","DropdownSlot","name","ForwardedRefDropdownTrigger","forwardRef","ForwardedRefDropdownContent","ForwardedRefDropdownGroup","ForwardedRefDropdownSubTrigger","ForwardedRefDropdownSubContent","ForwardedRefDropdownItem","ForwardedRefDropdownSlot","Dropdown"],"mappings":"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"}
+{"version":3,"file":"fondue-components11.js","sources":["../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretRight } from '@frontify/fondue-icons';\nimport * as RadixDropdown from '@radix-ui/react-dropdown-menu';\nimport { Children, forwardRef, useMemo, useRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport { useProcessedChildren } from './hooks/useProcessedChildren';\nimport styles from './styles/dropdown.module.scss';\n\nexport type DropdownRootProps = {\n    children?: ReactNode;\n    /**\n     * When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.\n     * @default false\n     */\n    modal?: boolean;\n    /**\n     * Controls the open state of the dropdown.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the dropdown changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n\n    'data-test-id'?: string;\n};\n\nexport const DropdownRoot = ({\n    children,\n    open,\n    modal = false,\n    onOpenChange,\n    'data-test-id': dataTestId = 'fondue-dropdown',\n}: DropdownRootProps) => {\n    return (\n        <RadixDropdown.Root open={open} modal={modal} onOpenChange={onOpenChange} data-test-id={dataTestId}>\n            {children}\n        </RadixDropdown.Root>\n    );\n};\nDropdownRoot.displayName = 'Dropdown.Root';\n\nexport type DropdownTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default true\n     */\n    asChild?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const DropdownTrigger = (\n    {\n        asChild = true,\n        children,\n        'data-test-id': dataTestId = 'fondue-dropdown-trigger',\n        ...props\n    }: DropdownTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDropdown.Trigger asChild={asChild} data-test-id={dataTestId} ref={ref} {...props}>\n            {children}\n        </RadixDropdown.Trigger>\n    );\n};\nDropdownTrigger.displayName = 'Dropdown.Trigger';\n\ntype DropdownSpacing = 'compact' | 'comfortable' | 'spacious';\ntype DropdownViewportCollisionPadding = 'compact' | 'spacious';\nexport type DropdownContentProps = {\n    children?: ReactNode;\n    'data-test-id'?: string;\n    /**\n     * Defines the alignment of the dropdown.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Defines the preferred side of the dropdown. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    /**\n     * Defines the spacing between the dropdown and its trigger.\n     * @default 'compact'\n     */\n    triggerOffset?: DropdownSpacing;\n    /**\n     * Prevents the focus from being set on the trigger when the dropdown is closed.\n     */\n    preventTriggerFocusOnClose?: boolean;\n    /**\n     * Define the minimum distance between the dropdown and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: DropdownViewportCollisionPadding;\n    /**\n     * When true, the content will always be mounted in the DOM. Before enabling, make sure you really need it.\n     * @default false\n     */\n    forceMount?: boolean;\n    /**\n     * Event handler called when the escape key is pressed.\n     */\n    onEscapeKeyDown?: (event: KeyboardEvent) => void;\n};\n\nconst SPACING_MAP: Record<DropdownSpacing, number> = {\n    compact: 8,\n    comfortable: 12,\n    spacious: 16,\n};\n\nconst VIEWPORT_COLLISION_PADDING_MAP: Record<DropdownViewportCollisionPadding, number> = {\n    compact: 8,\n    spacious: 24,\n};\n\nexport const DropdownContent = (\n    {\n        side = 'bottom',\n        align = 'start',\n        triggerOffset = 'compact',\n        children,\n        preventTriggerFocusOnClose,\n        viewportCollisionPadding = 'compact',\n        forceMount = false,\n        onEscapeKeyDown,\n        'data-test-id': dataTestId = 'fondue-dropdown-content',\n    }: DropdownContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const localRef = useRef<HTMLDivElement>(null);\n    const { theme, dir } = useFondueTheme();\n    const actualRef = ref || localRef;\n    return (\n        <RadixDropdown.Portal forceMount={forceMount || undefined}>\n            <ThemeProvider theme={theme} dir={dir}>\n                <RadixDropdown.Content\n                    // @ts-expect-error - dir prop works at runtime but is not in the Radix UI type definition\n                    dir={dir}\n                    align={align}\n                    collisionPadding={VIEWPORT_COLLISION_PADDING_MAP[viewportCollisionPadding]}\n                    sideOffset={SPACING_MAP[triggerOffset]}\n                    side={side}\n                    className={styles.content}\n                    data-test-id={dataTestId}\n                    ref={actualRef}\n                    onEscapeKeyDown={onEscapeKeyDown}\n                    onPointerDownOutside={(event) => {\n                        if (!forceMount) {\n                            return;\n                        }\n\n                        if (!(event.target instanceof Element)) {\n                            return;\n                        }\n\n                        if (!(actualRef instanceof Object) || !('current' in actualRef)) {\n                            return;\n                        }\n\n                        let element: Element | null = event.target;\n                        let controlsId: string | null = null;\n\n                        while (element && element !== document.body) {\n                            controlsId = element.getAttribute('aria-controls');\n\n                            if (controlsId) {\n                                break;\n                            }\n\n                            element = element.parentElement;\n                        }\n\n                        if (controlsId === actualRef.current?.id) {\n                            event.preventDefault();\n                        }\n                    }}\n                    onCloseAutoFocus={(event) => {\n                        if (preventTriggerFocusOnClose) {\n                            event.preventDefault();\n                        }\n                    }}\n                    forceMount={forceMount || undefined}\n                >\n                    {children}\n                </RadixDropdown.Content>\n            </ThemeProvider>\n        </RadixDropdown.Portal>\n    );\n};\nDropdownContent.displayName = 'Dropdown.Content';\n\nexport type DropdownGroupProps = { children: ReactNode; heading?: string; 'data-test-id'?: string };\n\nexport const DropdownGroup = (\n    { children, heading, 'data-test-id': dataTestId = 'fondue-dropdown-group' }: DropdownGroupProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const hasChildren = useMemo(\n        () => Children.toArray(children).filter((child) => child !== null).length > 0,\n        [children],\n    );\n\n    if (!hasChildren) {\n        return null;\n    }\n\n    return (\n        <RadixDropdown.Group className={styles.group} data-test-id={dataTestId} ref={ref}>\n            {heading ? (\n                <div className={styles.groupHeading}>\n                    <span aria-label={heading}>{heading}</span>\n                </div>\n            ) : null}\n            {children}\n        </RadixDropdown.Group>\n    );\n};\nDropdownGroup.displayName = 'Dropdown.Group';\n\nexport type DropdownSubMenuProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownSubMenu = ({\n    children,\n    'data-test-id': dataTestId = 'fondue-dropdown-submenu',\n}: DropdownSubMenuProps) => {\n    return <RadixDropdown.Sub data-test-id={dataTestId}>{children}</RadixDropdown.Sub>;\n};\nDropdownSubMenu.displayName = 'Dropdown.SubMenu';\n\nexport type DropdownSubTriggerProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownSubTrigger = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-subtrigger' }: DropdownSubTriggerProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { content } = useProcessedChildren(children);\n    const wasMouseInteracted = useRef(false);\n    return (\n        <RadixDropdown.SubTrigger\n            className={styles.subTrigger}\n            // eslint-disable-next-line react-hooks/refs\n            data-show-focus-ring={wasMouseInteracted.current}\n            data-test-id={dataTestId}\n            ref={ref}\n            onMouseEnter={() => {\n                wasMouseInteracted.current = true;\n            }}\n            onFocus={(focusEvent) => {\n                if (!wasMouseInteracted.current) {\n                    focusEvent.target.dataset.showFocusRing = 'true';\n                }\n            }}\n            onBlur={(blurEvent) => {\n                blurEvent.target.dataset.showFocusRing = 'false';\n                wasMouseInteracted.current = false;\n            }}\n        >\n            {content}\n            <IconCaretRight className={styles.subMenuIndicator} size={16} />\n        </RadixDropdown.SubTrigger>\n    );\n};\nDropdownSubTrigger.displayName = 'Dropdown.SubTrigger';\n\nexport type DropdownSubContentProps = {\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const DropdownSubContent = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-subcontent' }: DropdownSubContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { theme, dir } = useFondueTheme();\n\n    return (\n        <RadixDropdown.Portal>\n            <ThemeProvider theme={theme} dir={dir}>\n                <RadixDropdown.SubContent\n                    // @ts-expect-error - dir prop works at runtime but is not in the Radix UI type definition\n                    dir={dir}\n                    className={styles.subContent}\n                    data-test-id={dataTestId}\n                    ref={ref}\n                >\n                    {children}\n                </RadixDropdown.SubContent>\n            </ThemeProvider>\n        </RadixDropdown.Portal>\n    );\n};\nDropdownSubContent.displayName = 'Dropdown.SubContent';\n\nexport type DropdownItemProps = {\n    children: ReactNode;\n    /**\n     * Disables the item.\n     */\n    disabled?: boolean;\n    /**\n     * The text value of the item that is passed to the onSelect callback.\n     */\n    textValue?: string;\n    /**\n     * The style of the item.\n     * @default \"default\"\n     */\n    emphasis?: 'default' | 'danger';\n    /**\n     * Callback that is called when the item is selected.\n     */\n    onSelect?: (event: Event) => void;\n    /**\n     * If true, the item props will be passed to the child element.\n     * @default false\n     */\n    asChild?: boolean;\n    'data-test-id'?: string;\n};\n\nexport const DropdownItem = (\n    {\n        children,\n        disabled,\n        textValue,\n        onSelect,\n        emphasis = 'default',\n        asChild = false,\n        'data-test-id': dataTestId = 'fondue-dropdown-subtrigger',\n        ...props\n    }: DropdownItemProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { content } = useProcessedChildren(children);\n    const wasMouseInteracted = useRef(false);\n\n    return (\n        <RadixDropdown.Item\n            onSelect={onSelect}\n            className={styles.item}\n            textValue={textValue}\n            data-test-id={dataTestId}\n            data-emphasis={emphasis}\n            ref={ref}\n            disabled={disabled}\n            asChild={asChild}\n            // eslint-disable-next-line react-hooks/refs\n            data-show-focus-ring={wasMouseInteracted.current}\n            onMouseEnter={() => {\n                wasMouseInteracted.current = true;\n            }}\n            onFocus={(focusEvent) => {\n                if (!wasMouseInteracted.current) {\n                    focusEvent.target.dataset.showFocusRing = 'true';\n                }\n            }}\n            onBlur={(blurEvent) => {\n                blurEvent.target.dataset.showFocusRing = 'false';\n                wasMouseInteracted.current = false;\n            }}\n            {...props}\n        >\n            {content}\n        </RadixDropdown.Item>\n    );\n};\nDropdownItem.displayName = 'Dropdown.Item';\n\nexport type DropdownSlotProps = { children: ReactNode; name?: 'left' | 'right'; 'data-test-id'?: string };\n\nexport const DropdownSlot = (\n    { children, name, 'data-test-id': dataTestId = 'fondue-dropdown-slot' }: DropdownSlotProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-name={name} className={styles.slot} data-test-id={dataTestId} ref={ref}>\n            {children}\n        </div>\n    );\n};\nDropdownSlot.displayName = 'Dropdown.Slot';\n\nconst ForwardedRefDropdownTrigger = forwardRef<HTMLButtonElement, DropdownTriggerProps>(DropdownTrigger);\nconst ForwardedRefDropdownContent = forwardRef<HTMLDivElement, DropdownContentProps>(DropdownContent);\nconst ForwardedRefDropdownGroup = forwardRef<HTMLDivElement, DropdownGroupProps>(DropdownGroup);\nconst ForwardedRefDropdownSubTrigger = forwardRef<HTMLDivElement, DropdownSubTriggerProps>(DropdownSubTrigger);\nconst ForwardedRefDropdownSubContent = forwardRef<HTMLDivElement, DropdownSubContentProps>(DropdownSubContent);\nconst ForwardedRefDropdownItem = forwardRef<HTMLDivElement, DropdownItemProps>(DropdownItem);\nconst ForwardedRefDropdownSlot = forwardRef<HTMLDivElement, DropdownSlotProps>(DropdownSlot);\n\nexport const Dropdown = {\n    Root: DropdownRoot,\n    Trigger: ForwardedRefDropdownTrigger,\n    Content: ForwardedRefDropdownContent,\n    Group: ForwardedRefDropdownGroup,\n    SubMenu: DropdownSubMenu,\n    SubTrigger: ForwardedRefDropdownSubTrigger,\n    SubContent: ForwardedRefDropdownSubContent,\n    Item: ForwardedRefDropdownItem,\n    Slot: ForwardedRefDropdownSlot,\n};\n"],"names":["DropdownRoot","children","open","modal","onOpenChange","dataTestId","jsx","RadixDropdown","DropdownTrigger","asChild","props","ref","SPACING_MAP","VIEWPORT_COLLISION_PADDING_MAP","DropdownContent","side","align","triggerOffset","preventTriggerFocusOnClose","viewportCollisionPadding","forceMount","onEscapeKeyDown","localRef","useRef","theme","dir","useFondueTheme","actualRef","ThemeProvider","styles","event","element","controlsId","_a","DropdownGroup","heading","useMemo","Children","child","jsxs","DropdownSubMenu","DropdownSubTrigger","content","useProcessedChildren","wasMouseInteracted","focusEvent","blurEvent","IconCaretRight","DropdownSubContent","DropdownItem","disabled","textValue","onSelect","emphasis","DropdownSlot","name","ForwardedRefDropdownTrigger","forwardRef","ForwardedRefDropdownContent","ForwardedRefDropdownGroup","ForwardedRefDropdownSubTrigger","ForwardedRefDropdownSubContent","ForwardedRefDropdownItem","ForwardedRefDropdownSlot","Dropdown"],"mappings":"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"}

package/dist/fondue-components13.js.map

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

package/dist/fondue-components15.js

@@ -1,50 +1,49 @@
-import { jsx as y } from "react/jsx-runtime";
+import { jsx as c } from "react/jsx-runtime";
 import { forwardRef as g } from "react";
-import { cn as x } from "./fondue-components60.js";
-import a from "./fondue-components61.js";
-const $ = g(
+import a from "./fondue-components60.js";
+const x = g(
   ({
     as: e = "span",
     children: i,
     className: r,
     color: d = "default",
     role: o,
-    size: t = "medium",
-    weight: l = "default",
+    size: l = "medium",
+    weight: t = "default",
     "data-test-id": s = "fondue-heading",
     "aria-describedby": p,
-    "aria-expanded": m,
-    "aria-haspopup": n,
-    "aria-hidden": b,
+    "aria-expanded": n,
+    "aria-haspopup": b,
+    "aria-hidden": m,
     "aria-label": f,
     "aria-labelledby": u,
-    ...c
-  }, h) => /* @__PURE__ */ y(
+    ...h
+  }, y) => /* @__PURE__ */ c(
     e,
     {
-      className: x([
+      className: [
         a.root,
-        a[`size-${t}`],
-        a[`weight-${l}`],
+        a[`size-${l}`],
+        a[`weight-${t}`],
         a[`color-${d}`],
         r
-      ]),
+      ].filter(Boolean).join(" "),
       role: o,
       "aria-label": f,
-      "aria-hidden": b,
+      "aria-hidden": m,
       "aria-describedby": p,
       "aria-labelledby": u,
-      "aria-expanded": m,
-      "aria-haspopup": n,
+      "aria-expanded": n,
+      "aria-haspopup": b,
       "data-test-id": s,
-      ref: h,
-      ...c,
+      ref: y,
+      ...h,
       children: i
     }
   )
 );
-$.displayName = "Heading";
+x.displayName = "Heading";
 export {
-  $ as Heading
+  x as Heading
 };
 //# sourceMappingURL=fondue-components15.js.map

package/dist/fondue-components15.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components15.js","sources":["../src/components/Heading/Heading.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ElementType, type ForwardedRef, forwardRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { cn } from '#/utilities/styleUtilities';\n\nimport styles from './styles/heading.module.scss';\n\ntype HeadingWeight = 'default' | 'strong';\ntype HeadingSize = 'medium' | 'large' | 'x-large' | 'xx-large';\ntype HeadingColor = 'default' | 'weak' | 'x-weak' | 'disabled' | 'negative' | 'positive' | 'warning' | 'interactive';\n\ntype TagType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'p';\n\nexport type HeadingProps<TTag extends TagType = 'span'> = CommonAriaProps & {\n    'data-test-id'?: string;\n    as?: TTag;\n    children?: ReactNode;\n    color?: HeadingColor;\n    size?: HeadingSize;\n    weight?: HeadingWeight;\n    className?: string;\n};\n\ntype HeadingElementType<TTag extends TagType> = TTag extends 'span'\n    ? HTMLSpanElement\n    : TTag extends 'p'\n      ? HTMLParagraphElement\n      : HTMLHeadingElement;\n\nexport const Heading = forwardRef(\n    (\n        {\n            as: Tag = 'span' as ElementType,\n            children,\n            className,\n            color = 'default',\n            role,\n            size = 'medium',\n            weight = 'default',\n            'data-test-id': dataTestId = 'fondue-heading',\n            'aria-describedby': ariaDescribedBy,\n            'aria-expanded': ariaExpanded,\n            'aria-haspopup': ariaHasPopup,\n            'aria-hidden': ariaHidden,\n            'aria-label': ariaLabel,\n            'aria-labelledby': ariaLabelledBy,\n            ...props\n        },\n        ref,\n    ) => {\n        return (\n            <Tag\n                className={cn([\n                    styles.root,\n                    styles[`size-${size}`],\n                    styles[`weight-${weight}`],\n                    styles[`color-${color}`],\n                    className,\n                ])}\n                role={role}\n                aria-label={ariaLabel}\n                aria-hidden={ariaHidden}\n                aria-describedby={ariaDescribedBy}\n                aria-labelledby={ariaLabelledBy}\n                aria-expanded={ariaExpanded}\n                aria-haspopup={ariaHasPopup}\n                data-test-id={dataTestId}\n                ref={ref}\n                {...props}\n            >\n                {children}\n            </Tag>\n        );\n    },\n) as (<TTag extends TagType = 'span'>(\n    props: HeadingProps<TTag> & { ref?: ForwardedRef<HeadingElementType<TTag>> },\n) => JSX.Element) & { displayName: string };\n\nHeading.displayName = 'Heading';\n"],"names":["Heading","forwardRef","Tag","children","className","color","role","size","weight","dataTestId","ariaDescribedBy","ariaExpanded","ariaHasPopup","ariaHidden","ariaLabel","ariaLabelledBy","props","ref","jsx","cn","styles"],"mappings":";;;;AA+BO,MAAMA,IAAUC;AAAA,EACnB,CACI;AAAA,IACI,IAAIC,IAAM;AAAA,IACV,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,MAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,QAAAC,IAAS;AAAA,IACT,gBAAgBC,IAAa;AAAA,IAC7B,oBAAoBC;AAAA,IACpB,iBAAiBC;AAAA,IACjB,iBAAiBC;AAAA,IACjB,eAAeC;AAAA,IACf,cAAcC;AAAA,IACd,mBAAmBC;AAAA,IACnB,GAAGC;AAAA,EAAA,GAEPC,MAGI,gBAAAC;AAAA,IAAChB;AAAA,IAAA;AAAA,MACG,WAAWiB,EAAG;AAAA,QACVC,EAAO;AAAA,QACPA,EAAO,QAAQb,CAAI,EAAE;AAAA,QACrBa,EAAO,UAAUZ,CAAM,EAAE;AAAA,QACzBY,EAAO,SAASf,CAAK,EAAE;AAAA,QACvBD;AAAA,MAAA,CACH;AAAA,MACD,MAAAE;AAAA,MACA,cAAYQ;AAAA,MACZ,eAAaD;AAAA,MACb,oBAAkBH;AAAA,MAClB,mBAAiBK;AAAA,MACjB,iBAAeJ;AAAA,MACf,iBAAeC;AAAA,MACf,gBAAcH;AAAA,MACd,KAAAQ;AAAA,MACC,GAAGD;AAAA,MAEH,UAAAb;AAAA,IAAA;AAAA,EAAA;AAIjB;AAIAH,EAAQ,cAAc;"}
+{"version":3,"file":"fondue-components15.js","sources":["../src/components/Heading/Heading.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ElementType, type ForwardedRef, forwardRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\n\nimport styles from './styles/heading.module.scss';\n\ntype HeadingWeight = 'default' | 'strong';\ntype HeadingSize = 'medium' | 'large' | 'x-large' | 'xx-large';\ntype HeadingColor = 'default' | 'weak' | 'x-weak' | 'disabled' | 'negative' | 'positive' | 'warning' | 'interactive';\n\ntype TagType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'p';\n\nexport type HeadingProps<TTag extends TagType = 'span'> = CommonAriaProps & {\n    'data-test-id'?: string;\n    as?: TTag;\n    children?: ReactNode;\n    color?: HeadingColor;\n    size?: HeadingSize;\n    weight?: HeadingWeight;\n    className?: string;\n};\n\ntype HeadingElementType<TTag extends TagType> = TTag extends 'span'\n    ? HTMLSpanElement\n    : TTag extends 'p'\n      ? HTMLParagraphElement\n      : HTMLHeadingElement;\n\nexport const Heading = forwardRef(\n    (\n        {\n            as: Tag = 'span' as ElementType,\n            children,\n            className,\n            color = 'default',\n            role,\n            size = 'medium',\n            weight = 'default',\n            'data-test-id': dataTestId = 'fondue-heading',\n            'aria-describedby': ariaDescribedBy,\n            'aria-expanded': ariaExpanded,\n            'aria-haspopup': ariaHasPopup,\n            'aria-hidden': ariaHidden,\n            'aria-label': ariaLabel,\n            'aria-labelledby': ariaLabelledBy,\n            ...props\n        },\n        ref,\n    ) => {\n        return (\n            <Tag\n                className={[\n                    styles.root,\n                    styles[`size-${size}`],\n                    styles[`weight-${weight}`],\n                    styles[`color-${color}`],\n                    className,\n                ]\n                    .filter(Boolean)\n                    .join(' ')}\n                role={role}\n                aria-label={ariaLabel}\n                aria-hidden={ariaHidden}\n                aria-describedby={ariaDescribedBy}\n                aria-labelledby={ariaLabelledBy}\n                aria-expanded={ariaExpanded}\n                aria-haspopup={ariaHasPopup}\n                data-test-id={dataTestId}\n                ref={ref}\n                {...props}\n            >\n                {children}\n            </Tag>\n        );\n    },\n) as (<TTag extends TagType = 'span'>(\n    props: HeadingProps<TTag> & { ref?: ForwardedRef<HeadingElementType<TTag>> },\n) => JSX.Element) & { displayName: string };\n\nHeading.displayName = 'Heading';\n"],"names":["Heading","forwardRef","Tag","children","className","color","role","size","weight","dataTestId","ariaDescribedBy","ariaExpanded","ariaHasPopup","ariaHidden","ariaLabel","ariaLabelledBy","props","ref","jsx","styles"],"mappings":";;;AA8BO,MAAMA,IAAUC;AAAA,EACnB,CACI;AAAA,IACI,IAAIC,IAAM;AAAA,IACV,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,MAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,QAAAC,IAAS;AAAA,IACT,gBAAgBC,IAAa;AAAA,IAC7B,oBAAoBC;AAAA,IACpB,iBAAiBC;AAAA,IACjB,iBAAiBC;AAAA,IACjB,eAAeC;AAAA,IACf,cAAcC;AAAA,IACd,mBAAmBC;AAAA,IACnB,GAAGC;AAAA,EAAA,GAEPC,MAGI,gBAAAC;AAAA,IAAChB;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,QACPiB,EAAO;AAAA,QACPA,EAAO,QAAQZ,CAAI,EAAE;AAAA,QACrBY,EAAO,UAAUX,CAAM,EAAE;AAAA,QACzBW,EAAO,SAASd,CAAK,EAAE;AAAA,QACvBD;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACb,MAAAE;AAAA,MACA,cAAYQ;AAAA,MACZ,eAAaD;AAAA,MACb,oBAAkBH;AAAA,MAClB,mBAAiBK;AAAA,MACjB,iBAAeJ;AAAA,MACf,iBAAeC;AAAA,MACf,gBAAcH;AAAA,MACd,KAAAQ;AAAA,MACC,GAAGD;AAAA,MAEH,UAAAb;AAAA,IAAA;AAAA,EAAA;AAIjB;AAIAH,EAAQ,cAAc;"}