@frontify/fondue-components 20.0.0-beta.8 → 20.0.0-rc.0

package/dist/fondue-components34.js

@@ -1,59 +1,60 @@
-import { jsx as t, jsxs as g } from "react/jsx-runtime";
+import { jsx as o, jsxs as f } from "react/jsx-runtime";
 import * as e from "@radix-ui/react-tooltip";
-import { forwardRef as s } from "react";
+import { forwardRef as n } from "react";
 import { cn as u } from "./fondue-components40.js";
 import { useFondueTheme as h, ThemeProvider as y } from "./fondue-components33.js";
 import d from "./fondue-components87.js";
-const l = ({ children: o, enterDelay: r = 700, open: i, onOpenChange: a, ...n }) => /* @__PURE__ */ t(e.Provider, { children: /* @__PURE__ */ t(e.Root, { delayDuration: r, open: i, onOpenChange: a, ...n, children: o }) });
-l.displayName = "Tooltip.Root";
-const p = ({ asChild: o = !1, children: r, "data-test-id": i = "fondue-tooltip-trigger" }, a) => /* @__PURE__ */ t(
+const s = ({ children: t, enterDelay: r = 700, open: i, onOpenChange: a }) => /* @__PURE__ */ o(e.Provider, { children: /* @__PURE__ */ o(e.Root, { delayDuration: r, open: i, onOpenChange: a, children: t }) });
+s.displayName = "Tooltip.Root";
+const l = ({ asChild: t = !1, children: r, "data-test-id": i = "fondue-tooltip-trigger" }, a) => /* @__PURE__ */ o(
   e.Trigger,
   {
+    "data-tooltip-trigger": !0,
     "data-test-id": i,
-    type: o ? void 0 : "button",
-    asChild: o,
+    type: t ? void 0 : "button",
+    asChild: t,
     ref: a,
     children: r
   }
 );
-p.displayName = "Tooltip.Trigger";
-const m = ({
-  children: o,
+l.displayName = "Tooltip.Trigger";
+const p = ({
+  children: t,
   className: r,
   maxWidth: i,
   "data-test-id": a = "fondue-tooltip-content",
-  padding: n = "spacious",
-  ...c
-}, T) => {
-  const f = h();
-  return /* @__PURE__ */ t(e.Portal, { children: /* @__PURE__ */ t(y, { theme: f, children: /* @__PURE__ */ g(
+  padding: m = "spacious",
+  side: c
+}, g) => {
+  const T = h();
+  return /* @__PURE__ */ o(e.Portal, { children: /* @__PURE__ */ o(y, { theme: T, children: /* @__PURE__ */ f(
     e.Content,
     {
       "data-test-id": a,
-      "data-tooltip-spacing": n,
+      "data-tooltip-spacing": m,
       className: u(d.root, r),
       style: { maxWidth: i },
       collisionPadding: 16,
       sideOffset: 8,
-      ref: T,
-      ...c,
+      ref: g,
+      side: c,
       children: [
-        o,
-        /* @__PURE__ */ t(e.Arrow, { "aria-hidden": "true", className: d.arrow })
+        t,
+        /* @__PURE__ */ o(e.Arrow, { "aria-hidden": "true", className: d.arrow })
       ]
     }
   ) }) });
 };
-m.displayName = "Tooltip.Content";
+p.displayName = "Tooltip.Content";
 const w = {
-  Root: l,
-  Trigger: s(p),
-  Content: s(m)
+  Root: s,
+  Trigger: n(l),
+  Content: n(p)
 };
 export {
   w as Tooltip,
-  m as TooltipContent,
-  l as TooltipRoot,
-  p as TooltipTrigger
+  p as TooltipContent,
+  s as TooltipRoot,
+  l as TooltipTrigger
 };
 //# sourceMappingURL=fondue-components34.js.map

package/dist/fondue-components34.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components34.js","sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { forwardRef, type ForwardedRef, type ReactElement, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/tooltip.module.scss';\n\nexport type TooltipRootProps = {\n    /**\n     * Sets the open state of the tooltip.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the tooltip changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * The delay in milliseconds before the tooltip appears.\n     * @default 700\n     */\n    enterDelay?: number;\n    children: Array<ReactElement<TooltipTriggerProps | TooltipContentProps>>;\n};\n\nexport const TooltipRoot = ({ children, enterDelay = 700, open, onOpenChange, ...props }: TooltipRootProps) => {\n    return (\n        <RadixTooltip.Provider>\n            <RadixTooltip.Root delayDuration={enterDelay} open={open} onOpenChange={onOpenChange} {...props}>\n                {children}\n            </RadixTooltip.Root>\n        </RadixTooltip.Provider>\n    );\n};\nTooltipRoot.displayName = 'Tooltip.Root';\n\nexport type TooltipTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default false\n     */\n    asChild?: boolean;\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const TooltipTrigger = (\n    { asChild = false, children, 'data-test-id': dataTestId = 'fondue-tooltip-trigger' }: TooltipTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixTooltip.Trigger\n            data-test-id={dataTestId}\n            type={!asChild ? 'button' : undefined}\n            asChild={asChild}\n            ref={ref}\n        >\n            {children}\n        </RadixTooltip.Trigger>\n    );\n};\nTooltipTrigger.displayName = 'Tooltip.Trigger';\n\nexport type TooltipContentProps = {\n    /**\n     * @default \"spacious\"\n     */\n    padding?: 'spacious' | 'compact';\n    /**\n     * Defines the preferred side of the tooltip. It will not be respected if there are collisions with the viewport.\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    maxWidth?: string;\n    className?: string;\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const TooltipContent = (\n    {\n        children,\n        className,\n        maxWidth,\n        'data-test-id': dataTestId = 'fondue-tooltip-content',\n        padding = 'spacious',\n        ...props\n    }: TooltipContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const theme = useFondueTheme();\n    return (\n        <RadixTooltip.Portal>\n            <ThemeProvider theme={theme}>\n                <RadixTooltip.Content\n                    data-test-id={dataTestId}\n                    data-tooltip-spacing={padding}\n                    className={cn(styles.root, className)}\n                    style={{ maxWidth }}\n                    collisionPadding={16}\n                    sideOffset={8}\n                    ref={ref}\n                    {...props}\n                >\n                    {children}\n                    <RadixTooltip.Arrow aria-hidden=\"true\" className={styles.arrow} />\n                </RadixTooltip.Content>\n            </ThemeProvider>\n        </RadixTooltip.Portal>\n    );\n};\nTooltipContent.displayName = 'Tooltip.Content';\n\nexport const Tooltip = {\n    Root: TooltipRoot,\n    Trigger: forwardRef<HTMLButtonElement, TooltipTriggerProps>(TooltipTrigger),\n    Content: forwardRef<HTMLDivElement, TooltipContentProps>(TooltipContent),\n};\n"],"names":["TooltipRoot","children","enterDelay","open","onOpenChange","props","jsx","RadixTooltip","TooltipTrigger","asChild","dataTestId","ref","TooltipContent","className","maxWidth","padding","theme","useFondueTheme","ThemeProvider","jsxs","cn","styles","Tooltip","forwardRef"],"mappings":";;;;;;AA4BO,MAAMA,IAAc,CAAC,EAAE,UAAAC,GAAU,YAAAC,IAAa,KAAK,MAAAC,GAAM,cAAAC,GAAc,GAAGC,QAEzE,gBAAAC,EAACC,EAAa,UAAb,EACG,4BAACA,EAAa,MAAb,EAAkB,eAAeL,GAAY,MAAAC,GAAY,cAAAC,GAA6B,GAAGC,GACrF,UAAAJ,GACL,GACJ;AAGRD,EAAY,cAAc;AAYnB,MAAMQ,IAAiB,CAC1B,EAAE,SAAAC,IAAU,IAAO,UAAAR,GAAU,gBAAgBS,IAAa,yBAAA,GAC1DC,MAGI,gBAAAL;AAAA,EAACC,EAAa;AAAA,EAAb;AAAA,IACG,gBAAcG;AAAA,IACd,MAAOD,IAAqB,SAAX;AAAA,IACjB,SAAAA;AAAA,IACA,KAAAE;AAAA,IAEC,UAAAV;AAAA,EAAA;AAAA;AAIbO,EAAe,cAAc;AAiBtB,MAAMI,IAAiB,CAC1B;AAAA,EACI,UAAAX;AAAA,EACA,WAAAY;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBJ,IAAa;AAAA,EAC7B,SAAAK,IAAU;AAAA,EACV,GAAGV;AACP,GACAM,MACC;AACD,QAAMK,IAAQC,EAAA;AACd,2BACKV,EAAa,QAAb,EACG,UAAA,gBAAAD,EAACY,KAAc,OAAAF,GACX,UAAA,gBAAAG;AAAA,IAACZ,EAAa;AAAA,IAAb;AAAA,MACG,gBAAcG;AAAA,MACd,wBAAsBK;AAAA,MACtB,WAAWK,EAAGC,EAAO,MAAMR,CAAS;AAAA,MACpC,OAAO,EAAE,UAAAC,EAAA;AAAA,MACT,kBAAkB;AAAA,MAClB,YAAY;AAAA,MACZ,KAAAH;AAAA,MACC,GAAGN;AAAA,MAEH,UAAA;AAAA,QAAAJ;AAAA,QACD,gBAAAK,EAACC,EAAa,OAAb,EAAmB,eAAY,QAAO,WAAWc,EAAO,MAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAExE,EAAA,CACJ;AAER;AACAT,EAAe,cAAc;AAEtB,MAAMU,IAAU;AAAA,EACnB,MAAMtB;AAAA,EACN,SAASuB,EAAmDf,CAAc;AAAA,EAC1E,SAASe,EAAgDX,CAAc;AAC3E;"}
+{"version":3,"file":"fondue-components34.js","sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { forwardRef, type ForwardedRef, type ReactElement, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/tooltip.module.scss';\n\nexport type TooltipRootProps = {\n    /**\n     * Sets the open state of the tooltip.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the tooltip changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * The delay in milliseconds before the tooltip appears.\n     * @default 700\n     */\n    enterDelay?: number;\n    children: Array<ReactElement<TooltipTriggerProps | TooltipContentProps>>;\n};\n\nexport const TooltipRoot = ({ children, enterDelay = 700, open, onOpenChange }: TooltipRootProps) => {\n    return (\n        <RadixTooltip.Provider>\n            <RadixTooltip.Root delayDuration={enterDelay} open={open} onOpenChange={onOpenChange}>\n                {children}\n            </RadixTooltip.Root>\n        </RadixTooltip.Provider>\n    );\n};\nTooltipRoot.displayName = 'Tooltip.Root';\n\nexport type TooltipTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default false\n     */\n    asChild?: boolean;\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const TooltipTrigger = (\n    { asChild = false, children, 'data-test-id': dataTestId = 'fondue-tooltip-trigger' }: TooltipTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixTooltip.Trigger\n            data-tooltip-trigger\n            data-test-id={dataTestId}\n            type={!asChild ? 'button' : undefined}\n            asChild={asChild}\n            ref={ref}\n        >\n            {children}\n        </RadixTooltip.Trigger>\n    );\n};\nTooltipTrigger.displayName = 'Tooltip.Trigger';\n\nexport type TooltipContentProps = {\n    /**\n     * @default \"spacious\"\n     */\n    padding?: 'spacious' | 'compact';\n    /**\n     * Defines the preferred side of the tooltip. It will not be respected if there are collisions with the viewport.\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    maxWidth?: string;\n    className?: string;\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const TooltipContent = (\n    {\n        children,\n        className,\n        maxWidth,\n        'data-test-id': dataTestId = 'fondue-tooltip-content',\n        padding = 'spacious',\n        side,\n    }: TooltipContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const theme = useFondueTheme();\n    return (\n        <RadixTooltip.Portal>\n            <ThemeProvider theme={theme}>\n                <RadixTooltip.Content\n                    data-test-id={dataTestId}\n                    data-tooltip-spacing={padding}\n                    className={cn(styles.root, className)}\n                    style={{ maxWidth }}\n                    collisionPadding={16}\n                    sideOffset={8}\n                    ref={ref}\n                    side={side}\n                >\n                    {children}\n                    <RadixTooltip.Arrow aria-hidden=\"true\" className={styles.arrow} />\n                </RadixTooltip.Content>\n            </ThemeProvider>\n        </RadixTooltip.Portal>\n    );\n};\nTooltipContent.displayName = 'Tooltip.Content';\n\nexport const Tooltip = {\n    Root: TooltipRoot,\n    Trigger: forwardRef<HTMLButtonElement, TooltipTriggerProps>(TooltipTrigger),\n    Content: forwardRef<HTMLDivElement, TooltipContentProps>(TooltipContent),\n};\n"],"names":["TooltipRoot","children","enterDelay","open","onOpenChange","jsx","RadixTooltip","TooltipTrigger","asChild","dataTestId","ref","TooltipContent","className","maxWidth","padding","side","theme","useFondueTheme","ThemeProvider","jsxs","cn","styles","Tooltip","forwardRef"],"mappings":";;;;;;AA4BO,MAAMA,IAAc,CAAC,EAAE,UAAAC,GAAU,YAAAC,IAAa,KAAK,MAAAC,GAAM,cAAAC,QAExD,gBAAAC,EAACC,EAAa,UAAb,EACG,UAAA,gBAAAD,EAACC,EAAa,MAAb,EAAkB,eAAeJ,GAAY,MAAAC,GAAY,cAAAC,GACrD,UAAAH,GACL,GACJ;AAGRD,EAAY,cAAc;AAYnB,MAAMO,IAAiB,CAC1B,EAAE,SAAAC,IAAU,IAAO,UAAAP,GAAU,gBAAgBQ,IAAa,yBAAA,GAC1DC,MAGI,gBAAAL;AAAA,EAACC,EAAa;AAAA,EAAb;AAAA,IACG,wBAAoB;AAAA,IACpB,gBAAcG;AAAA,IACd,MAAOD,IAAqB,SAAX;AAAA,IACjB,SAAAA;AAAA,IACA,KAAAE;AAAA,IAEC,UAAAT;AAAA,EAAA;AAAA;AAIbM,EAAe,cAAc;AAiBtB,MAAMI,IAAiB,CAC1B;AAAA,EACI,UAAAV;AAAA,EACA,WAAAW;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBJ,IAAa;AAAA,EAC7B,SAAAK,IAAU;AAAA,EACV,MAAAC;AACJ,GACAL,MACC;AACD,QAAMM,IAAQC,EAAA;AACd,2BACKX,EAAa,QAAb,EACG,UAAA,gBAAAD,EAACa,KAAc,OAAAF,GACX,UAAA,gBAAAG;AAAA,IAACb,EAAa;AAAA,IAAb;AAAA,MACG,gBAAcG;AAAA,MACd,wBAAsBK;AAAA,MACtB,WAAWM,EAAGC,EAAO,MAAMT,CAAS;AAAA,MACpC,OAAO,EAAE,UAAAC,EAAA;AAAA,MACT,kBAAkB;AAAA,MAClB,YAAY;AAAA,MACZ,KAAAH;AAAA,MACA,MAAAK;AAAA,MAEC,UAAA;AAAA,QAAAd;AAAA,QACD,gBAAAI,EAACC,EAAa,OAAb,EAAmB,eAAY,QAAO,WAAWe,EAAO,MAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAExE,EAAA,CACJ;AAER;AACAV,EAAe,cAAc;AAEtB,MAAMW,IAAU;AAAA,EACnB,MAAMtB;AAAA,EACN,SAASuB,EAAmDhB,CAAc;AAAA,EAC1E,SAASgB,EAAgDZ,CAAc;AAC3E;"}

package/dist/fondue-components41.js

@@ -1,4 +1,4 @@
-import { FOCUS_OUTLINE as e } from "./fondue-components91.js";
+import { FOCUS_OUTLINE as e } from "./fondue-components93.js";
 import { sv as a } from "./fondue-components40.js";
 const s = a({
   base: `tw-group tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-primary tw-font-medium tw-box-border tw-whitespace-nowrap tw-transition-colors ${e}`,

package/dist/fondue-components44.js

@@ -1,4 +1,4 @@
-import { FOCUS_OUTLINE as t } from "./fondue-components91.js";
+import { FOCUS_OUTLINE as t } from "./fondue-components93.js";
 import { sv as e } from "./fondue-components40.js";
 const r = e({
   base: `tw-peer tw-relative tw-inline-flex tw-bg-surface tw-text-white tw-shrink-0 tw-rounded-medium tw-border tw-border-line-strong group-hover:tw-border-line-strong hover:tw-border-line-strong tw-transition-colors data-[state="checked"]:tw-border-transparent data-[state="indeterminate"]:tw-border-transparent disabled:tw-border-line-strong disabled:tw-bg-surface disabled:tw-cursor-not-allowed data-[state="checked"]:disabled:tw-bg-disabled data-[readonly="true"]:tw-pointer-events-none ${t}`,

package/dist/fondue-components61.js

@@ -1,14 +1,14 @@
-const t = "_root_11usl_3", e = "_contentArea_11usl_71", o = "_hiddenText_11usl_76", s = "_visibleText_11usl_82", n = {
+const t = "_root_12b82_3", e = "_contentArea_12b82_71", o = "_hiddenText_12b82_76", n = "_visibleText_12b82_82", _ = {
   root: t,
   contentArea: e,
   hiddenText: o,
-  visibleText: s
+  visibleText: n
 };
 export {
   e as contentArea,
-  n as default,
+  _ as default,
   o as hiddenText,
   t as root,
-  s as visibleText
+  n as visibleText
 };
 //# sourceMappingURL=fondue-components61.js.map

package/dist/fondue-components71.js

@@ -4,7 +4,7 @@ import { Slot as V } from "@radix-ui/react-slot";
 import { isValidElement as g } from "react";
 import { useFondueTheme as A, ThemeProvider as D } from "./fondue-components33.js";
 import s from "./fondue-components73.js";
-import { recursiveMap as M, getSelectOptionValue as T } from "./fondue-components92.js";
+import { recursiveMap as M, getSelectOptionValue as T } from "./fondue-components91.js";
 const E = ({
   highlightedIndex: p,
   getMenuProps: c,

package/dist/fondue-components73.js

@@ -1,40 +1,40 @@
-const e = "_root_s0awe_7", c = "_selectedValue_s0awe_57", o = "_input_s0awe_75", s = "_slot_s0awe_101", _ = "_clear_s0awe_153", t = "_clearIcon_s0awe_160", a = "_icons_s0awe_164", n = "_caret_s0awe_170", r = "_iconSuccess_s0awe_198", l = "_iconError_s0awe_204", u = "_menu_s0awe_210", i = "_portal_s0awe_233", w = "_item_s0awe_249", p = "_checkmarkIcon_s0awe_277", m = "_itemValue_s0awe_283", g = "_group_s0awe_297", d = "_groupHeading_s0awe_308", k = {
-  root: e,
-  selectedValue: c,
-  input: o,
-  slot: s,
-  clear: _,
-  clearIcon: t,
-  icons: a,
-  caret: n,
-  iconSuccess: r,
-  iconError: l,
-  menu: u,
-  portal: i,
-  item: w,
-  checkmarkIcon: p,
-  itemValue: m,
-  group: g,
-  groupHeading: d
+const c = "_root_1m7fk_7", o = "_selectedValue_1m7fk_57", _ = "_input_1m7fk_75", e = "_slot_1m7fk_101", t = "_clear_1m7fk_153", n = "_clearIcon_1m7fk_160", s = "_icons_1m7fk_164", r = "_caret_1m7fk_170", m = "_iconSuccess_1m7fk_198", a = "_iconError_1m7fk_204", k = "_menu_1m7fk_210", l = "_portal_1m7fk_233", u = "_item_1m7fk_249", i = "_checkmarkIcon_1m7fk_277", f = "_itemValue_1m7fk_283", p = "_group_1m7fk_297", g = "_groupHeading_1m7fk_308", d = {
+  root: c,
+  selectedValue: o,
+  input: _,
+  slot: e,
+  clear: t,
+  clearIcon: n,
+  icons: s,
+  caret: r,
+  iconSuccess: m,
+  iconError: a,
+  menu: k,
+  portal: l,
+  item: u,
+  checkmarkIcon: i,
+  itemValue: f,
+  group: p,
+  groupHeading: g
 };
 export {
-  n as caret,
-  p as checkmarkIcon,
-  _ as clear,
-  t as clearIcon,
-  k as default,
-  g as group,
-  d as groupHeading,
-  l as iconError,
-  r as iconSuccess,
-  a as icons,
-  o as input,
-  w as item,
-  m as itemValue,
-  u as menu,
-  i as portal,
-  e as root,
-  c as selectedValue,
-  s as slot
+  r as caret,
+  i as checkmarkIcon,
+  t as clear,
+  n as clearIcon,
+  d as default,
+  p as group,
+  g as groupHeading,
+  a as iconError,
+  m as iconSuccess,
+  s as icons,
+  _ as input,
+  u as item,
+  f as itemValue,
+  k as menu,
+  l as portal,
+  c as root,
+  o as selectedValue,
+  e as slot
 };
 //# sourceMappingURL=fondue-components73.js.map

package/dist/fondue-components74.js

@@ -1,9 +1,9 @@
 import { jsx as E } from "react/jsx-runtime";
 import { useState as S, useMemo as b, Children as v, isValidElement as C, cloneElement as w, useCallback as B, useEffect as x } from "react";
-import { SelectClear as F } from "./fondue-components93.js";
+import { SelectClear as F } from "./fondue-components92.js";
 import { ForwardedRefSelectItem as L } from "./fondue-components70.js";
 import { ForwardedRefSelectSlot as y } from "./fondue-components72.js";
-import { getSelectOptionValue as I } from "./fondue-components92.js";
+import { getSelectOptionValue as I } from "./fondue-components91.js";
 const O = (n, s) => {
   const [e, r] = S(!1), [m, i] = S(null), [l, f] = S({
     menuComponents: [],

package/dist/fondue-components82.js

@@ -1,18 +1,18 @@
-const t = "_root_eq7n5_5", r = "_triggerListWrapper_eq7n5_13", e = "_trigger_eq7n5_13", n = "_activeIndicator_eq7n5_61", i = "_triggerList_eq7n5_13", o = "_content_eq7n5_149", g = {
+const t = "_root_1ra7u_5", r = "_triggerListWrapper_1ra7u_13", e = "_trigger_1ra7u_13", i = "_activeIndicator_1ra7u_61", o = "_triggerList_1ra7u_13", g = "_content_1ra7u_149", _ = {
   root: t,
   triggerListWrapper: r,
   trigger: e,
-  activeIndicator: n,
-  triggerList: i,
-  content: o
+  activeIndicator: i,
+  triggerList: o,
+  content: g
 };
 export {
-  n as activeIndicator,
-  o as content,
-  g as default,
+  i as activeIndicator,
+  g as content,
+  _ as default,
   t as root,
   e as trigger,
-  i as triggerList,
+  o as triggerList,
   r as triggerListWrapper
 };
 //# sourceMappingURL=fondue-components82.js.map

package/dist/fondue-components9.js

@@ -1,58 +1,56 @@
-import { jsx as o, jsxs as P } from "react/jsx-runtime";
-import { IconCross as j } from "@frontify/fondue-icons";
+import { jsx as o, jsxs as O } from "react/jsx-runtime";
+import { IconCross as P } 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, useMemo as E } from "react";
-import { useSyncRefs as L } from "./fondue-components50.js";
-import { addShowFocusRing as $, addAutoFocusAttribute as k } from "./fondue-components51.js";
-import { useFondueTheme as G, ThemeProvider as I } from "./fondue-components33.js";
-import r from "./fondue-components52.js";
-const m = q({ isModal: !1 });
+import { createContext as j, forwardRef as l, useRef as q, useContext as B, useMemo as z } from "react";
+import { useSyncRefs as E } from "./fondue-components50.js";
+import { addShowFocusRing as L, addAutoFocusAttribute as $ } from "./fondue-components51.js";
+import { useFondueTheme as k, ThemeProvider as G } from "./fondue-components33.js";
+import n from "./fondue-components52.js";
+const m = j({ isModal: !1 });
 m.displayName = "DialogContext";
-const y = ({ children: t, ...e }) => {
-  const a = E(() => ({ isModal: e.modal ?? !1 }), [e.modal]);
-  return /* @__PURE__ */ o(m.Provider, { value: a, children: /* @__PURE__ */ o(d.Root, { ...e, children: t }) });
+const y = ({ children: t, modal: e, onOpenChange: a, open: i }) => {
+  const r = z(() => ({ isModal: e ?? !1 }), [e]);
+  return /* @__PURE__ */ o(m.Provider, { value: r, children: /* @__PURE__ */ o(d.Root, { open: i, onOpenChange: a, modal: e, children: t }) });
 };
 y.displayName = "Dialog.Root";
-const D = ({ asChild: t = !0, children: e, "data-test-id": a = "fondue-dialog-trigger", ...i }, n) => /* @__PURE__ */ o(
+const D = ({ asChild: t = !0, children: e, "data-test-id": a = "fondue-dialog-trigger" }, i) => /* @__PURE__ */ o(
   d.Trigger,
   {
-    onMouseDown: k,
+    onMouseDown: $,
     "data-auto-focus-visible": "true",
     "data-auto-focus-trigger": !0,
     "data-test-id": a,
     asChild: t,
-    ref: n,
-    ...i,
+    ref: i,
     children: e
   }
 );
 D.displayName = "Dialog.Trigger";
-const J = ({ children: t, showUnderlay: e }) => {
-  const { isModal: a } = z(m);
-  return a ? /* @__PURE__ */ o(d.Overlay, { "data-visible": e, className: r.underlay, children: t }) : /* @__PURE__ */ o("div", { className: r.underlay, "data-visible": e, children: t });
+const I = ({ children: t, showUnderlay: e }) => {
+  const { isModal: a } = B(m);
+  return a ? /* @__PURE__ */ o(d.Overlay, { "data-visible": e, className: n.underlay, children: t }) : /* @__PURE__ */ o("div", { className: n.underlay, "data-visible": e, children: t });
 }, h = ({
   maxWidth: t = "800px",
   minWidth: e = "400px",
   minHeight: a = "200px",
   padding: i = "compact",
-  verticalAlign: n = "center",
+  verticalAlign: r = "center",
   "data-test-id": s = "fondue-dialog-content",
   showUnderlay: c = !1,
   rounded: T = !0,
-  children: w,
-  ...S
-}, M) => {
-  const A = G(), u = B(null);
-  L(u, M);
-  const H = (O) => {
+  children: w
+}, S) => {
+  const M = k(), u = q(null);
+  E(u, S);
+  const A = (H) => {
     var f;
-    O.preventDefault();
+    H.preventDefault();
     const g = (f = u.current) == null ? void 0 : f.querySelector('[data-dialog-layout-component="body"]'), p = g == null ? void 0 : g.querySelector(
-      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      'button:not([data-tooltip-trigger="true"]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
     );
     p instanceof HTMLElement && p.focus();
   };
-  return /* @__PURE__ */ o(d.Portal, { children: /* @__PURE__ */ o(I, { theme: A, children: /* @__PURE__ */ o(J, { showUnderlay: c, children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ o(d.Portal, { children: /* @__PURE__ */ o(G, { theme: M, children: /* @__PURE__ */ o(I, { showUnderlay: c, children: /* @__PURE__ */ o(
     d.Content,
     {
       style: {
@@ -61,14 +59,13 @@ const J = ({ children: t, showUnderlay: e }) => {
         "--dialog-min-height": a
       },
       ref: u,
-      className: r.content,
-      onFocus: $,
-      onOpenAutoFocus: H,
+      className: n.content,
+      onFocus: L,
+      onOpenAutoFocus: A,
       "data-dialog-padding": i,
       "data-dialog-rounded": T,
       "data-test-id": s,
-      "data-dialog-vertical-align": n,
-      ...S,
+      "data-dialog-vertical-align": r,
       children: w
     }
   ) }) }) });
@@ -79,19 +76,19 @@ const C = ({
   showBorder: e = !0,
   showCloseButton: a = !0,
   closeProps: i,
-  children: n,
+  children: r,
   "data-test-id": s = "fondue-dialog-header"
-}, c) => /* @__PURE__ */ P(
+}, c) => /* @__PURE__ */ O(
   "div",
   {
     "data-test-id": s,
     ref: c,
-    className: r.header,
+    className: n.header,
     "data-dialog-header-padding": t,
     "data-show-border": e,
     "data-dialog-layout-component": "header",
     children: [
-      /* @__PURE__ */ o("div", { children: n }),
+      /* @__PURE__ */ o("div", { children: r }),
       a && /* @__PURE__ */ o(
         d.Close,
         {
@@ -100,19 +97,19 @@ const C = ({
           className: "tw-cursor-pointer",
           "aria-label": "Close",
           ...i,
-          children: /* @__PURE__ */ o(j, { size: 20 })
+          children: /* @__PURE__ */ o(P, { size: 20 })
         }
       )
     ]
   }
 );
 C.displayName = "Dialog.Header";
-const N = ({ padding: t, showBorder: e = !0, children: a, "data-test-id": i = "fondue-dialog-footer" }, n) => /* @__PURE__ */ o(
+const N = ({ padding: t, showBorder: e = !0, children: a, "data-test-id": i = "fondue-dialog-footer" }, r) => /* @__PURE__ */ o(
   "div",
   {
     "data-test-id": i,
-    ref: n,
-    className: r.footer,
+    ref: r,
+    className: n.footer,
     "data-dialog-footer-padding": t,
     "data-show-border": e,
     "data-dialog-layout-component": "footer",
@@ -125,14 +122,14 @@ const b = ({ padding: t, children: e, "data-test-id": a = "fondue-dialog-body" }
   {
     "data-test-id": a,
     ref: i,
-    className: r.body,
+    className: n.body,
     "data-dialog-body-padding": t,
     "data-dialog-layout-component": "body",
     children: e
   }
 );
 b.displayName = "Dialog.Body";
-const v = ({ children: t, "data-test-id": e = "fondue-dialog-side-content" }, a) => /* @__PURE__ */ o("div", { "data-test-id": e, ref: a, className: r.sideContent, "data-dialog-layout-component": !0, children: t });
+const v = ({ children: t, "data-test-id": e = "fondue-dialog-side-content" }, a) => /* @__PURE__ */ o("div", { "data-test-id": e, ref: a, className: n.sideContent, "data-dialog-layout-component": !0, children: t });
 v.displayName = "Dialog.SideContent";
 const x = ({ children: t }) => /* @__PURE__ */ o(d.Close, { asChild: !0, children: t });
 x.displayName = "Dialog.Close";
@@ -140,7 +137,7 @@ const F = ({ children: t, asChild: e }) => /* @__PURE__ */ o(d.Title, { asChild:
 F.displayName = "Dialog.Title";
 const R = ({ children: t, asChild: e }) => /* @__PURE__ */ o(d.Description, { asChild: e, children: t });
 R.displayName = "Dialog.Description";
-const Z = {
+const Y = {
   Root: y,
   Title: F,
   Description: R,
@@ -153,7 +150,7 @@ const Z = {
   SideContent: l(v)
 };
 export {
-  Z as Dialog,
+  Y as Dialog,
   b as DialogBody,
   x as DialogClose,
   h as DialogContent,

package/dist/fondue-components9.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components9.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    useMemo,\n    useRef,\n    type CSSProperties,\n    type ForwardedRef,\n    type ReactNode,\n} from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\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    closeProps?: CommonAriaProps;\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 });\nDialogContext.displayName = 'DialogContext';\n\nexport const DialogRoot = ({ children, ...props }: DialogRootProps) => {\n    const value = useMemo(() => ({ isModal: props.modal ?? false }), [props.modal]);\n    return (\n        <DialogContext.Provider value={value}>\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        closeProps,\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\n                    role=\"button\"\n                    data-test-id={`${dataTestId}-close`}\n                    className=\"tw-cursor-pointer\"\n                    aria-label=\"Close\"\n                    {...closeProps}\n                >\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","value","useMemo","jsx","RadixDialog","DialogTrigger","asChild","dataTestId","ref","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","closeProps","jsxs","IconCross","DialogFooter","DialogBody","DialogSideContent","DialogClose","DialogTitle","DialogDescription","Dialog","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components9.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    useMemo,\n    useRef,\n    type CSSProperties,\n    type ForwardedRef,\n    type ReactNode,\n} from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\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    closeProps?: CommonAriaProps;\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 });\nDialogContext.displayName = 'DialogContext';\n\nexport const DialogRoot = ({ children, modal, onOpenChange, open }: DialogRootProps) => {\n    const value = useMemo(() => ({ isModal: modal ?? false }), [modal]);\n\n    return (\n        <DialogContext.Provider value={value}>\n            <RadixDialog.Root open={open} onOpenChange={onOpenChange} modal={modal}>\n                {children}\n            </RadixDialog.Root>\n        </DialogContext.Provider>\n    );\n};\nDialogRoot.displayName = 'Dialog.Root';\n\nexport const DialogTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-dialog-trigger' }: DialogTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDialog.Trigger\n            onMouseDown={addAutoFocusAttribute}\n            data-auto-focus-visible=\"true\"\n            data-auto-focus-trigger\n            data-test-id={dataTestId}\n            asChild={asChild}\n            ref={ref}\n        >\n            {children}\n        </RadixDialog.Trigger>\n    );\n};\nDialogTrigger.displayName = 'Dialog.Trigger';\n\nconst DialogUnderlay = ({ children, showUnderlay }: { children: ReactNode; showUnderlay: boolean }) => {\n    const { isModal } = useContext(DialogContext);\n    if (isModal) {\n        return (\n            <RadixDialog.Overlay data-visible={showUnderlay} className={styles.underlay}>\n                {children}\n            </RadixDialog.Overlay>\n        );\n    }\n    return (\n        <div className={styles.underlay} data-visible={showUnderlay}>\n            {children}\n        </div>\n    );\n};\n\nexport const DialogContent = (\n    {\n        maxWidth = '800px',\n        minWidth = '400px',\n        minHeight = '200px',\n        padding = 'compact',\n        verticalAlign = 'center',\n        'data-test-id': dataTestId = 'fondue-dialog-content',\n        showUnderlay = false,\n        rounded = true,\n        children,\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:not([data-tooltip-trigger=\"true\"]), [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                    >\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        closeProps,\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\n                    role=\"button\"\n                    data-test-id={`${dataTestId}-close`}\n                    className=\"tw-cursor-pointer\"\n                    aria-label=\"Close\"\n                    {...closeProps}\n                >\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","modal","onOpenChange","open","value","useMemo","jsx","RadixDialog","DialogTrigger","asChild","dataTestId","ref","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","closeProps","jsxs","IconCross","DialogFooter","DialogBody","DialogSideContent","DialogClose","DialogTitle","DialogDescription","Dialog","forwardRef"],"mappings":"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"}

package/dist/fondue-components90.js

@@ -1,19 +1,19 @@
-const o = "_root_1t0zi_5", t = "_clearIcon_1t0zi_35", c = "_caret_1t0zi_52", _ = "_colorName_1t0zi_70", n = "_colorIndicator_1t0zi_73", r = "_button_1t0zi_94", a = "_actions_1t0zi_126", s = {
+const o = "_root_1xnv8_5", c = "_clearIcon_1xnv8_35", t = "_caret_1xnv8_52", n = "_colorName_1xnv8_70", _ = "_colorIndicator_1xnv8_73", r = "_button_1xnv8_94", a = "_actions_1xnv8_126", s = {
   root: o,
-  clearIcon: t,
-  caret: c,
-  colorName: _,
-  colorIndicator: n,
+  clearIcon: c,
+  caret: t,
+  colorName: n,
+  colorIndicator: _,
   button: r,
   actions: a
 };
 export {
   a as actions,
   r as button,
-  c as caret,
-  t as clearIcon,
-  n as colorIndicator,
-  _ as colorName,
+  t as caret,
+  c as clearIcon,
+  _ as colorIndicator,
+  n as colorName,
   s as default,
   o as root
 };

package/dist/fondue-components91.js

@@ -1,5 +1,43 @@
-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";
+import { Children as a, isValidElement as u, cloneElement as f } from "react";
+import { ForwardedRefSelectItem as E } from "./fondue-components70.js";
+const g = ({
+  children: o,
+  value: r,
+  label: s
+}) => o && typeof o == "string" ? {
+  value: r || o,
+  label: s || o
+} : {
+  value: r || "",
+  label: s || r || "",
+  ...o ? { children: o } : null
+}, w = (o, r) => u(o) && o.type === r, y = (o, r, s, p = 0) => {
+  const n = [];
+  let t = 0;
+  return a.forEach(o, (e) => {
+    if (w(e, E) && u(e))
+      g(e.props).label.toLowerCase().includes((s == null ? void 0 : s.toLowerCase()) || "") && (n.push(r(e, p + t)), t++);
+    else if (u(e) && (e != null && e.props.children)) {
+      const { parsedChildren: m, subElementCount: C } = y(
+        e.props.children,
+        r,
+        "",
+        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 {
-  t as FOCUS_OUTLINE
+  g as getSelectOptionValue,
+  w as isReactLeaf,
+  y as recursiveMap
 };
 //# sourceMappingURL=fondue-components91.js.map