@frontify/fondue-components 13.0.0 → 13.0.1

package/dist/fondue-components10.js

@@ -1,7 +1,7 @@
 import { jsx as m } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
 import { propsToCssVariables as y } from "./fondue-components29.js";
-import x from "./fondue-components46.js";
+import x from "./fondue-components47.js";
 const u = n(
   ({
     as: a = "div",

package/dist/fondue-components11.js

@@ -2,9 +2,9 @@ import { jsx as a, jsxs as l } from "react/jsx-runtime";
 import { IconCross as w } from "@frontify/fondue-icons";
 import * as i from "@radix-ui/react-popover";
 import { forwardRef as s } from "react";
-import { addAutoFocusAttribute as x, addShowFocusRing as C } from "./fondue-components41.js";
+import { addAutoFocusAttribute as x, addShowFocusRing as C } from "./fondue-components42.js";
 import { useFondueTheme as b, ThemeProvider as T } from "./fondue-components27.js";
-import d from "./fondue-components47.js";
+import d from "./fondue-components48.js";
 const n = ({ children: t, ...o }) => /* @__PURE__ */ a(i.Root, { ...o, children: t });
 n.displayName = "Flyout.Root";
 const m = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-trigger", ...r }, u) => /* @__PURE__ */ a(

package/dist/fondue-components12.js

@@ -1,7 +1,7 @@
 import { jsx as f } from "react/jsx-runtime";
 import { forwardRef as y } from "react";
 import { propsToCssVariables as n } from "./fondue-components29.js";
-import u from "./fondue-components48.js";
+import u from "./fondue-components49.js";
 const c = y(
   ({
     as: a = "div",

package/dist/fondue-components13.js

@@ -1,7 +1,7 @@
 import { jsx as y } from "react/jsx-runtime";
 import { forwardRef as g } from "react";
 import { cn as x } from "./fondue-components31.js";
-import a from "./fondue-components49.js";
+import a from "./fondue-components50.js";
 const $ = g(
   ({
     as: e = "span",

package/dist/fondue-components15.js

@@ -1,7 +1,7 @@
 import { jsx as i } from "react/jsx-runtime";
 import * as t from "@radix-ui/react-progress";
 import { forwardRef as m } from "react";
-import { loadingBarContainerStyles as g, loadingBarStyles as f } from "./fondue-components50.js";
+import { loadingBarContainerStyles as g, loadingBarStyles as f } from "./fondue-components51.js";
 const p = m(
   ({
     value: a,

package/dist/fondue-components16.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as i } from "react";
-import d from "./fondue-components51.js";
+import d from "./fondue-components52.js";
 const s = i(
   ({
     variant: t = "progress",

package/dist/fondue-components17.js

@@ -1,69 +1,71 @@
-import { jsxs as n, jsx as l } from "react/jsx-runtime";
-import * as o from "@radix-ui/react-scroll-area";
+import { jsxs as d, jsx as l } from "react/jsx-runtime";
+import * as a from "@radix-ui/react-scroll-area";
 import { forwardRef as b } from "react";
-import a from "./fondue-components52.js";
+import o from "./fondue-components53.js";
 const h = ({
   type: t,
   maxHeight: e = "100%",
   maxWidth: s = "100%",
   showShadow: c = !1,
-  children: i,
+  padding: i,
+  children: m,
   "data-test-id": r = "fondue-scroll-area"
-}, m) => /* @__PURE__ */ n(
-  o.Root,
+}, n) => /* @__PURE__ */ d(
+  a.Root,
   {
     type: t,
-    className: a.root,
+    className: o.root,
     style: { maxWidth: s },
     "data-test-id": r,
-    ref: m,
+    ref: n,
     children: [
       /* @__PURE__ */ l(
-        o.Viewport,
+        a.Viewport,
         {
-          className: a.viewport,
+          className: o.viewport,
           style: { maxHeight: e },
-          "data-test-id": `${r}-viewport`,
+          "data-scroll-padding": i,
           "data-show-shadow": c,
-          children: i
+          "data-test-id": `${r}-viewport`,
+          children: m
         }
       ),
       /* @__PURE__ */ l(
-        o.Scrollbar,
+        a.Scrollbar,
         {
-          className: a.scrollbar,
+          className: o.scrollbar,
           orientation: "vertical",
           "data-test-id": `${r}-vertical-scrollbar`,
           children: /* @__PURE__ */ l(
-            o.Thumb,
+            a.Thumb,
             {
-              className: a.thumb,
+              className: o.thumb,
               "data-test-id": `${r}-vertical-scrollbar-thumb`
             }
           )
         }
       ),
       /* @__PURE__ */ l(
-        o.Scrollbar,
+        a.Scrollbar,
         {
-          className: a.scrollbar,
+          className: o.scrollbar,
           orientation: "horizontal",
           "data-test-id": `${r}-horizontal-scrollbar`,
           children: /* @__PURE__ */ l(
-            o.Thumb,
+            a.Thumb,
             {
-              className: a.thumb,
+              className: o.thumb,
               "data-test-id": `${r}-horizontal-scrollbar-thumb`
             }
           )
         }
       ),
-      /* @__PURE__ */ l(o.Corner, { className: a.corner, "data-test-id": `${r}-corner` })
+      /* @__PURE__ */ l(a.Corner, { className: o.corner, "data-test-id": `${r}-corner` })
     ]
   }
-), d = b(h);
-d.displayName = "ScrollArea";
+), p = b(h);
+p.displayName = "ScrollArea";
 export {
-  d as ScrollArea
+  p as ScrollArea
 };
 //# sourceMappingURL=fondue-components17.js.map

package/dist/fondue-components17.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components17.js","sources":["../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixScrollArea from '@radix-ui/react-scroll-area';\nimport { type ForwardedRef, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport styles from './styles/scrollArea.module.scss';\n\nexport type ScrollAreaProps = {\n    /**\n     * \"auto\" visible when content is overflowing on the corresponding orientation.\n     * \"always\" always visible regardless of whether the content is overflowing.\n     * \"scroll\" visible when the user is scrolling along its corresponding orientation.\n     * \"hover\" when the user is hovering over the scroll area.\n     * @default 'hover'\n     */\n    type?: 'auto' | 'always' | 'scroll' | 'hover';\n    /**\n     * Maximum height of the scroll area\n     * @default '100%'\n     */\n    maxHeight?: string | number;\n    /**\n     * Minimum width of the scroll area\n     * @default '100%'\n     */\n    maxWidth?: string | number;\n    /**\n     * Determines if a inset shadow should be shown the edge of the component\n     */\n    showShadow?: boolean;\n    'data-test-id'?: string;\n    children: ReactNode;\n};\n\nconst ScrollAreaComponent = (\n    {\n        type,\n        maxHeight = '100%',\n        maxWidth = '100%',\n        showShadow = false,\n        children,\n        'data-test-id': dataTestId = 'fondue-scroll-area',\n    }: ScrollAreaProps,\n    ref: ForwardedRef<HTMLDivElement>,\n): ReactElement => {\n    return (\n        <RadixScrollArea.Root\n            type={type}\n            className={styles.root}\n            style={{ maxWidth }}\n            data-test-id={dataTestId}\n            ref={ref}\n        >\n            <RadixScrollArea.Viewport\n                className={styles.viewport}\n                style={{ maxHeight }}\n                data-test-id={`${dataTestId}-viewport`}\n                data-show-shadow={showShadow}\n            >\n                {children}\n            </RadixScrollArea.Viewport>\n            <RadixScrollArea.Scrollbar\n                className={styles.scrollbar}\n                orientation=\"vertical\"\n                data-test-id={`${dataTestId}-vertical-scrollbar`}\n            >\n                <RadixScrollArea.Thumb\n                    className={styles.thumb}\n                    data-test-id={`${dataTestId}-vertical-scrollbar-thumb`}\n                />\n            </RadixScrollArea.Scrollbar>\n            <RadixScrollArea.Scrollbar\n                className={styles.scrollbar}\n                orientation=\"horizontal\"\n                data-test-id={`${dataTestId}-horizontal-scrollbar`}\n            >\n                <RadixScrollArea.Thumb\n                    className={styles.thumb}\n                    data-test-id={`${dataTestId}-horizontal-scrollbar-thumb`}\n                />\n            </RadixScrollArea.Scrollbar>\n            <RadixScrollArea.Corner className={styles.corner} data-test-id={`${dataTestId}-corner`} />\n        </RadixScrollArea.Root>\n    );\n};\n\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(ScrollAreaComponent);\nScrollArea.displayName = 'ScrollArea';\n"],"names":["ScrollAreaComponent","type","maxHeight","maxWidth","showShadow","children","dataTestId","ref","jsxs","RadixScrollArea","styles","jsx","ScrollArea","forwardRef"],"mappings":";;;;AAkCA,MAAMA,IAAsB,CACxB;AAAA,EACI,MAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,GACAC,MAGI,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACG,MAAAR;AAAA,IACA,WAAWS,EAAO;AAAA,IAClB,OAAO,EAAE,UAAAP,EAAS;AAAA,IAClB,gBAAcG;AAAA,IACd,KAAAC;AAAA,IAEA,UAAA;AAAA,MAAA,gBAAAI;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,OAAO,EAAE,WAAAR,EAAU;AAAA,UACnB,gBAAc,GAAGI,CAAU;AAAA,UAC3B,oBAAkBF;AAAA,UAEjB,UAAAC;AAAA,QAAA;AAAA,MACL;AAAA,MACA,gBAAAM;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,aAAY;AAAA,UACZ,gBAAc,GAAGJ,CAAU;AAAA,UAE3B,UAAA,gBAAAK;AAAA,YAACF,EAAgB;AAAA,YAAhB;AAAA,cACG,WAAWC,EAAO;AAAA,cAClB,gBAAc,GAAGJ,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAC/B;AAAA,MACJ;AAAA,MACA,gBAAAK;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,aAAY;AAAA,UACZ,gBAAc,GAAGJ,CAAU;AAAA,UAE3B,UAAA,gBAAAK;AAAA,YAACF,EAAgB;AAAA,YAAhB;AAAA,cACG,WAAWC,EAAO;AAAA,cAClB,gBAAc,GAAGJ,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAC/B;AAAA,MACJ;AAAA,MACA,gBAAAK,EAACF,EAAgB,QAAhB,EAAuB,WAAWC,EAAO,QAAQ,gBAAc,GAAGJ,CAAU,UAAW,CAAA;AAAA,IAAA;AAAA,EAAA;AAC5F,GAIKM,IAAaC,EAA4Cb,CAAmB;AACzFY,EAAW,cAAc;"}
+{"version":3,"file":"fondue-components17.js","sources":["../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixScrollArea from '@radix-ui/react-scroll-area';\nimport { type ForwardedRef, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport styles from './styles/scrollArea.module.scss';\n\nexport type ScrollAreaProps = {\n    /**\n     * \"auto\" visible when content is overflowing on the corresponding orientation.\n     * \"always\" always visible regardless of whether the content is overflowing.\n     * \"scroll\" visible when the user is scrolling along its corresponding orientation.\n     * \"hover\" when the user is hovering over the scroll area.\n     * @default 'hover'\n     */\n    type?: 'auto' | 'always' | 'scroll' | 'hover';\n    /**\n     * Maximum height of the scroll area\n     * @default '100%'\n     */\n    maxHeight?: string | number;\n    /**\n     * Minimum width of the scroll area\n     * @default '100%'\n     */\n    maxWidth?: string | number;\n    /**\n     * Define the padding of the scroll area\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Determines if a inset shadow should be shown the edge of the component\n     */\n    showShadow?: boolean;\n    'data-test-id'?: string;\n    children: ReactNode;\n};\n\nconst ScrollAreaComponent = (\n    {\n        type,\n        maxHeight = '100%',\n        maxWidth = '100%',\n        showShadow = false,\n        padding,\n        children,\n        'data-test-id': dataTestId = 'fondue-scroll-area',\n    }: ScrollAreaProps,\n    ref: ForwardedRef<HTMLDivElement>,\n): ReactElement => {\n    return (\n        <RadixScrollArea.Root\n            type={type}\n            className={styles.root}\n            style={{ maxWidth }}\n            data-test-id={dataTestId}\n            ref={ref}\n        >\n            <RadixScrollArea.Viewport\n                className={styles.viewport}\n                style={{ maxHeight }}\n                data-scroll-padding={padding}\n                data-show-shadow={showShadow}\n                data-test-id={`${dataTestId}-viewport`}\n            >\n                {children}\n            </RadixScrollArea.Viewport>\n            <RadixScrollArea.Scrollbar\n                className={styles.scrollbar}\n                orientation=\"vertical\"\n                data-test-id={`${dataTestId}-vertical-scrollbar`}\n            >\n                <RadixScrollArea.Thumb\n                    className={styles.thumb}\n                    data-test-id={`${dataTestId}-vertical-scrollbar-thumb`}\n                />\n            </RadixScrollArea.Scrollbar>\n            <RadixScrollArea.Scrollbar\n                className={styles.scrollbar}\n                orientation=\"horizontal\"\n                data-test-id={`${dataTestId}-horizontal-scrollbar`}\n            >\n                <RadixScrollArea.Thumb\n                    className={styles.thumb}\n                    data-test-id={`${dataTestId}-horizontal-scrollbar-thumb`}\n                />\n            </RadixScrollArea.Scrollbar>\n            <RadixScrollArea.Corner className={styles.corner} data-test-id={`${dataTestId}-corner`} />\n        </RadixScrollArea.Root>\n    );\n};\n\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(ScrollAreaComponent);\nScrollArea.displayName = 'ScrollArea';\n"],"names":["ScrollAreaComponent","type","maxHeight","maxWidth","showShadow","padding","children","dataTestId","ref","jsxs","RadixScrollArea","styles","jsx","ScrollArea","forwardRef"],"mappings":";;;;AAuCA,MAAMA,IAAsB,CACxB;AAAA,EACI,MAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,GACAC,MAGI,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACG,MAAAT;AAAA,IACA,WAAWU,EAAO;AAAA,IAClB,OAAO,EAAE,UAAAR,EAAS;AAAA,IAClB,gBAAcI;AAAA,IACd,KAAAC;AAAA,IAEA,UAAA;AAAA,MAAA,gBAAAI;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,OAAO,EAAE,WAAAT,EAAU;AAAA,UACnB,uBAAqBG;AAAA,UACrB,oBAAkBD;AAAA,UAClB,gBAAc,GAAGG,CAAU;AAAA,UAE1B,UAAAD;AAAA,QAAA;AAAA,MACL;AAAA,MACA,gBAAAM;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,aAAY;AAAA,UACZ,gBAAc,GAAGJ,CAAU;AAAA,UAE3B,UAAA,gBAAAK;AAAA,YAACF,EAAgB;AAAA,YAAhB;AAAA,cACG,WAAWC,EAAO;AAAA,cAClB,gBAAc,GAAGJ,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAC/B;AAAA,MACJ;AAAA,MACA,gBAAAK;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,aAAY;AAAA,UACZ,gBAAc,GAAGJ,CAAU;AAAA,UAE3B,UAAA,gBAAAK;AAAA,YAACF,EAAgB;AAAA,YAAhB;AAAA,cACG,WAAWC,EAAO;AAAA,cAClB,gBAAc,GAAGJ,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAC/B;AAAA,MACJ;AAAA,MACA,gBAAAK,EAACF,EAAgB,QAAhB,EAAuB,WAAWC,EAAO,QAAQ,gBAAc,GAAGJ,CAAU,UAAW,CAAA;AAAA,IAAA;AAAA,EAAA;AAC5F,GAIKM,IAAaC,EAA4Cd,CAAmB;AACzFa,EAAW,cAAc;"}

package/dist/fondue-components18.js

@@ -1,7 +1,7 @@
 import { jsx as n } from "react/jsx-runtime";
 import { forwardRef as m } from "react";
 import { propsToCssVariables as c } from "./fondue-components29.js";
-import f from "./fondue-components53.js";
+import f from "./fondue-components54.js";
 const y = m(
   ({
     "data-test-id": a = "fondue-section",

package/dist/fondue-components19.js

@@ -1,8 +1,8 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
 import * as i from "@radix-ui/react-toggle-group";
 import { forwardRef as n } from "react";
-import { useControllableState as N } from "./fondue-components54.js";
-import e from "./fondue-components55.js";
+import { useControllableState as N } from "./fondue-components55.js";
+import e from "./fondue-components56.js";
 const d = ({ children: a, value: o, defaultValue: s, onValueChange: p, ...m }, f) => {
   const [g, C] = N({
     prop: o,

package/dist/fondue-components20.js

@@ -4,12 +4,12 @@ import * as g from "@radix-ui/react-popover";
 import { Slot as T } from "@radix-ui/react-slot";
 import { useSelect as V } from "downshift";
 import { forwardRef as $, useRef as A, useState as q } from "react";
-import { ForwardedRefCombobox as J } from "./fondue-components56.js";
-import { ForwardedRefSelectItem as K, ForwardedRefSelectItemGroup as L } from "./fondue-components57.js";
-import { SelectMenu as Q } from "./fondue-components58.js";
-import { ForwardedRefSelectSlot as U } from "./fondue-components59.js";
-import a from "./fondue-components60.js";
-import { useSelectData as W } from "./fondue-components61.js";
+import { ForwardedRefCombobox as J } from "./fondue-components57.js";
+import { ForwardedRefSelectItem as K, ForwardedRefSelectItemGroup as L } from "./fondue-components58.js";
+import { SelectMenu as Q } from "./fondue-components59.js";
+import { ForwardedRefSelectSlot as U } from "./fondue-components60.js";
+import a from "./fondue-components61.js";
+import { useSelectData as W } from "./fondue-components62.js";
 const S = ({
   children: h,
   onSelect: s,

package/dist/fondue-components21.js

@@ -1,7 +1,7 @@
 import { jsxs as f, jsx as s } from "react/jsx-runtime";
 import * as e from "@radix-ui/react-slider";
 import { forwardRef as h, useRef as R } from "react";
-import r from "./fondue-components62.js";
+import r from "./fondue-components63.js";
 const g = ({
   value: a,
   defaultValue: n = [0],

package/dist/fondue-components22.js

@@ -2,7 +2,7 @@ import { jsx as e } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-switch";
 import { forwardRef as l } from "react";
 import { cn as f } from "./fondue-components31.js";
-import t from "./fondue-components63.js";
+import t from "./fondue-components64.js";
 const n = ({
   value: a,
   defaultValue: i,

package/dist/fondue-components23.js

@@ -1,7 +1,7 @@
 import { jsx as t, jsxs as p } from "react/jsx-runtime";
 import { IconArrowUp as A, IconArrowDown as K, IconArrowBidirectional as h } from "@frontify/fondue-icons";
 import { forwardRef as m, useRef as w, useMemo as j } from "react";
-import { useSyncRefs as g } from "./fondue-components64.js";
+import { useSyncRefs as g } from "./fondue-components41.js";
 import { useTextTruncation as N } from "./fondue-components65.js";
 import { Box as L } from "./fondue-components3.js";
 import { LoadingCircle as S } from "./fondue-components16.js";

package/dist/fondue-components24.js

@@ -2,7 +2,7 @@ import { jsx as a, jsxs as u } from "react/jsx-runtime";
 import { createContext as x, forwardRef as i, useCallback as A, createElement as N, useContext as b, useRef as D, useEffect as E } from "react";
 import { IconDotsHorizontal as O } from "@frontify/fondue-icons";
 import * as d from "@radix-ui/react-tabs";
-import { useControllableState as V } from "./fondue-components54.js";
+import { useControllableState as V } from "./fondue-components55.js";
 import { Button as q } from "./fondue-components4.js";
 import { Dropdown as l } from "./fondue-components9.js";
 import { useTabTriggers as B } from "./fondue-components68.js";

package/dist/fondue-components41.js

@@ -1,16 +1,11 @@
-function s(u, t) {
-  t && (typeof t == "function" ? t(u.current) : t && "current" in t && (t.current = u.current));
-}
-function i(u) {
-  u.currentTarget.dataset.autoFocusVisible = "false";
-}
-function a(u) {
-  const t = u.relatedTarget;
-  t != null && t.dataset.autoFocusTrigger && (t.dataset.autoFocusVisible === "true" ? u.target.dataset.showFocusRing = "true" : u.target.dataset.showFocusRing = "false", t.dataset.autoFocusVisible = "true");
-}
+import { useEffect as f } from "react";
+import { syncRefs as o } from "./fondue-components42.js";
+const m = (s, e) => {
+  f(() => {
+    o(s, e);
+  }, [s]);
+};
 export {
-  i as addAutoFocusAttribute,
-  a as addShowFocusRing,
-  s as syncRefs
+  m as useSyncRefs
 };
 //# sourceMappingURL=fondue-components41.js.map

package/dist/fondue-components41.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components41.js","sources":["../src/utilities/domUtilities.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type FocusEvent, type MouseEvent as ReactMouseEvent, type ForwardedRef, type RefObject } from 'react';\n\nexport const MAX_HEIGHT_MARGIN = 8;\n\n/**\n * Sets the maximum height for a dialog element based on its position on the viewport.\n * The function calculates the space below the dialog up to the bottom of the viewport window,\n * subtracting a default margin, and sets this value as the max-height style of the dialog.\n *\n * @param {HTMLElement} dialog - The dialog element whose maximum height is to be set.\n *\n * @example\n * // Suppose you have a dialog element with id 'my-dialog'.\n * const dialogElement = myDialogRef.current || document.getElementById('my-dialog');\n * // Setting its max height relative to its current position and the viewport's dimensions.\n * setMaxHeightToAvailableSpace(dialogElement);\n */\nexport function setMaxHeightToAvailableSpace(dialog: HTMLElement) {\n    if (!window) {\n        throw new Error('Window object not found, this method should be used in a browser environment');\n    }\n\n    dialog.style.maxHeight = '';\n\n    const { top, bottom } = dialog.getBoundingClientRect();\n    if (top - MAX_HEIGHT_MARGIN < 0) {\n        // if the dialog is overflowing to the top\n        dialog.style.maxHeight = `${bottom - MAX_HEIGHT_MARGIN}px`;\n    } else if (bottom + MAX_HEIGHT_MARGIN > window.innerHeight) {\n        // if the dialog is overflowing to the bottom\n        dialog.style.maxHeight = `${window.innerHeight - top - MAX_HEIGHT_MARGIN}px`;\n    }\n}\n\n/**\n * Checks if a specified HTML element is visible within the viewport.\n * Visibility is determined by several factors:\n * - The element must have non-zero dimensions.\n * - The element's computed style must not be `display: none`, `visibility: hidden`, or `opacity: 0`.\n * - The element must be within the bounds of the current viewport.\n *\n * @param {HTMLElement} element - The HTML element to check for visibility.\n * @returns {boolean} Returns true if the element is visible according to the criteria specified, otherwise returns false.\n */\nexport function isElementVisible(element: HTMLElement) {\n    const rect = element.getBoundingClientRect();\n    const hasSize = rect.width > 0 && rect.height > 0;\n\n    const style = window.getComputedStyle(element);\n    const isVisibleStyle = style.display !== 'none' && style.visibility !== 'hidden' && parseFloat(style.opacity) !== 0;\n\n    // Check if the element is within the viewport\n    const isInViewport =\n        rect.top < window.innerHeight && rect.left < window.innerWidth && rect.bottom > 0 && rect.right > 0;\n\n    return hasSize && isVisibleStyle && isInViewport;\n}\n\n/**\n * Assigns a local DOM ref to a forwarded ref.\n *\n * @param {RefObject<HTMLDivElement>} localRef - The local React reference to an HTMLDivElement.\n * @param {ForwardedRef<HTMLDivElement>} forwardedRef - The ref forwarded from a parent component.\n */\nexport function syncRefs<TElement = HTMLElement>(localRef: RefObject<TElement>, forwardedRef: ForwardedRef<TElement>) {\n    if (!forwardedRef) {\n        return;\n    }\n\n    if (typeof forwardedRef === 'function') {\n        forwardedRef(localRef.current);\n    } else if (forwardedRef && 'current' in forwardedRef) {\n        forwardedRef.current = localRef.current;\n    }\n}\n\n/**\n * Sets the 'autoFocusVisible' data attribute to 'false' on the current target of a mouse event.\n * This function is typically used to indicate that an element has been interacted with via mouse,\n * which should prevent the focus ring from being displayed when the element receives focus.\n *\n * @param mouseEvent - The mouse event object.\n */\nexport function addAutoFocusAttribute(mouseEvent: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {\n    mouseEvent.currentTarget.dataset.autoFocusVisible = 'false';\n}\n\n/**\n * Manages the focus ring visibility based on the previous focus state and the current focus event.\n * This function sets the 'showFocusRing' data attribute on the target element and updates the\n * 'autoFocusVisible' data attribute on the previously focused element.\n *\n * ! This function should be used in conjunction with the 'addAutoFocusAttribute' function and the autoFocusVisible data autoFocusTrigger.\n *\n * @param event - The focus event object.\n */\nexport function addShowFocusRing(event: FocusEvent<HTMLDivElement, HTMLElement>) {\n    const triggerElement = event.relatedTarget;\n\n    if (!triggerElement?.dataset.autoFocusTrigger) {\n        return;\n    }\n\n    if (triggerElement.dataset.autoFocusVisible === 'true') {\n        event.target.dataset.showFocusRing = 'true';\n    } else {\n        event.target.dataset.showFocusRing = 'false';\n    }\n\n    triggerElement.dataset.autoFocusVisible = 'true';\n}\n"],"names":["syncRefs","localRef","forwardedRef","addAutoFocusAttribute","mouseEvent","addShowFocusRing","event","triggerElement"],"mappings":"AAkEgB,SAAAA,EAAiCC,GAA+BC,GAAsC;AAClH,EAAKA,MAID,OAAOA,KAAiB,aACxBA,EAAaD,EAAS,OAAO,IACtBC,KAAgB,aAAaA,MACpCA,EAAa,UAAUD,EAAS;AAExC;AASO,SAASE,EAAsBC,GAA4D;AACnF,EAAAA,EAAA,cAAc,QAAQ,mBAAmB;AACxD;AAWO,SAASC,EAAiBC,GAAgD;AAC7E,QAAMC,IAAiBD,EAAM;AAEzB,EAACC,KAAA,QAAAA,EAAgB,QAAQ,qBAIzBA,EAAe,QAAQ,qBAAqB,SACtCD,EAAA,OAAO,QAAQ,gBAAgB,SAE/BA,EAAA,OAAO,QAAQ,gBAAgB,SAGzCC,EAAe,QAAQ,mBAAmB;AAC9C;"}
+{"version":3,"file":"fondue-components41.js","sources":["../src/hooks/useSyncRefs.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ForwardedRef, useEffect, type RefObject } from 'react';\n\nimport { syncRefs } from '#/utilities/domUtilities';\n\n/**\n * A custom React hook that synchronizes a local ref with a forwarded ref.\n * This is useful when you need to maintain both an internal reference to a DOM element\n * and allow external access through a forwarded ref.\n *\n * @template TElement - The type of the DOM element being referenced. Defaults to HTMLElement.\n * @param {RefObject<TElement>} localRef - The local ref object used internally by the component.\n * @param {ForwardedRef<TElement>} forwardedRef - The ref forwarded from a parent component.\n *\n * @example\n * ```tsx\n * const MyComponent = forwardRef<HTMLDivElement>((props, ref) => {\n *   const localRef = useRef<HTMLDivElement>(null);\n *   useSyncRefs(localRef, ref);\n *\n *   return <div ref={localRef}>Content</div>;\n * });\n * ```\n */\nexport const useSyncRefs = <TElement = HTMLElement>(\n    localRef: RefObject<TElement>,\n    forwardedRef: ForwardedRef<TElement>,\n) => {\n    useEffect(() => {\n        syncRefs<TElement>(localRef, forwardedRef);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [localRef]);\n};\n"],"names":["useSyncRefs","localRef","forwardedRef","useEffect","syncRefs"],"mappings":";;AAyBa,MAAAA,IAAc,CACvBC,GACAC,MACC;AACD,EAAAC,EAAU,MAAM;AACZ,IAAAC,EAAmBH,GAAUC,CAAY;AAAA,EAAA,GAE1C,CAACD,CAAQ,CAAC;AACjB;"}

package/dist/fondue-components42.js

@@ -1,18 +1,16 @@
-const t = "_content_2dhca_6", e = "_header_2dhca_51", o = "_footer_2dhca_52", n = "_body_2dhca_53", d = "_underlay_2dhca_177", _ = "_sideContent_2dhca_190", c = {
-  content: t,
-  header: e,
-  footer: o,
-  body: n,
-  underlay: d,
-  sideContent: _
-};
+function s(u, t) {
+  t && (typeof t == "function" ? t(u.current) : t && "current" in t && (t.current = u.current));
+}
+function i(u) {
+  u.currentTarget.dataset.autoFocusVisible = "false";
+}
+function a(u) {
+  const t = u.relatedTarget;
+  t != null && t.dataset.autoFocusTrigger && (t.dataset.autoFocusVisible === "true" ? u.target.dataset.showFocusRing = "true" : u.target.dataset.showFocusRing = "false", t.dataset.autoFocusVisible = "true");
+}
 export {
-  n as body,
-  t as content,
-  c as default,
-  o as footer,
-  e as header,
-  _ as sideContent,
-  d as underlay
+  i as addAutoFocusAttribute,
+  a as addShowFocusRing,
+  s as syncRefs
 };
 //# sourceMappingURL=fondue-components42.js.map

package/dist/fondue-components42.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components42.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"fondue-components42.js","sources":["../src/utilities/domUtilities.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type FocusEvent, type MouseEvent as ReactMouseEvent, type ForwardedRef, type RefObject } from 'react';\n\nexport const MAX_HEIGHT_MARGIN = 8;\n\n/**\n * Sets the maximum height for a dialog element based on its position on the viewport.\n * The function calculates the space below the dialog up to the bottom of the viewport window,\n * subtracting a default margin, and sets this value as the max-height style of the dialog.\n *\n * @param {HTMLElement} dialog - The dialog element whose maximum height is to be set.\n *\n * @example\n * // Suppose you have a dialog element with id 'my-dialog'.\n * const dialogElement = myDialogRef.current || document.getElementById('my-dialog');\n * // Setting its max height relative to its current position and the viewport's dimensions.\n * setMaxHeightToAvailableSpace(dialogElement);\n */\nexport function setMaxHeightToAvailableSpace(dialog: HTMLElement) {\n    if (!window) {\n        throw new Error('Window object not found, this method should be used in a browser environment');\n    }\n\n    dialog.style.maxHeight = '';\n\n    const { top, bottom } = dialog.getBoundingClientRect();\n    if (top - MAX_HEIGHT_MARGIN < 0) {\n        // if the dialog is overflowing to the top\n        dialog.style.maxHeight = `${bottom - MAX_HEIGHT_MARGIN}px`;\n    } else if (bottom + MAX_HEIGHT_MARGIN > window.innerHeight) {\n        // if the dialog is overflowing to the bottom\n        dialog.style.maxHeight = `${window.innerHeight - top - MAX_HEIGHT_MARGIN}px`;\n    }\n}\n\n/**\n * Checks if a specified HTML element is visible within the viewport.\n * Visibility is determined by several factors:\n * - The element must have non-zero dimensions.\n * - The element's computed style must not be `display: none`, `visibility: hidden`, or `opacity: 0`.\n * - The element must be within the bounds of the current viewport.\n *\n * @param {HTMLElement} element - The HTML element to check for visibility.\n * @returns {boolean} Returns true if the element is visible according to the criteria specified, otherwise returns false.\n */\nexport function isElementVisible(element: HTMLElement) {\n    const rect = element.getBoundingClientRect();\n    const hasSize = rect.width > 0 && rect.height > 0;\n\n    const style = window.getComputedStyle(element);\n    const isVisibleStyle = style.display !== 'none' && style.visibility !== 'hidden' && parseFloat(style.opacity) !== 0;\n\n    // Check if the element is within the viewport\n    const isInViewport =\n        rect.top < window.innerHeight && rect.left < window.innerWidth && rect.bottom > 0 && rect.right > 0;\n\n    return hasSize && isVisibleStyle && isInViewport;\n}\n\n/**\n * Assigns a local DOM ref to a forwarded ref.\n *\n * @param {RefObject<HTMLDivElement>} localRef - The local React reference to an HTMLDivElement.\n * @param {ForwardedRef<HTMLDivElement>} forwardedRef - The ref forwarded from a parent component.\n */\nexport function syncRefs<TElement = HTMLElement>(localRef: RefObject<TElement>, forwardedRef: ForwardedRef<TElement>) {\n    if (!forwardedRef) {\n        return;\n    }\n\n    if (typeof forwardedRef === 'function') {\n        forwardedRef(localRef.current);\n    } else if (forwardedRef && 'current' in forwardedRef) {\n        forwardedRef.current = localRef.current;\n    }\n}\n\n/**\n * Sets the 'autoFocusVisible' data attribute to 'false' on the current target of a mouse event.\n * This function is typically used to indicate that an element has been interacted with via mouse,\n * which should prevent the focus ring from being displayed when the element receives focus.\n *\n * @param mouseEvent - The mouse event object.\n */\nexport function addAutoFocusAttribute(mouseEvent: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {\n    mouseEvent.currentTarget.dataset.autoFocusVisible = 'false';\n}\n\n/**\n * Manages the focus ring visibility based on the previous focus state and the current focus event.\n * This function sets the 'showFocusRing' data attribute on the target element and updates the\n * 'autoFocusVisible' data attribute on the previously focused element.\n *\n * ! This function should be used in conjunction with the 'addAutoFocusAttribute' function and the autoFocusVisible data autoFocusTrigger.\n *\n * @param event - The focus event object.\n */\nexport function addShowFocusRing(event: FocusEvent<HTMLDivElement, HTMLElement>) {\n    const triggerElement = event.relatedTarget;\n\n    if (!triggerElement?.dataset.autoFocusTrigger) {\n        return;\n    }\n\n    if (triggerElement.dataset.autoFocusVisible === 'true') {\n        event.target.dataset.showFocusRing = 'true';\n    } else {\n        event.target.dataset.showFocusRing = 'false';\n    }\n\n    triggerElement.dataset.autoFocusVisible = 'true';\n}\n"],"names":["syncRefs","localRef","forwardedRef","addAutoFocusAttribute","mouseEvent","addShowFocusRing","event","triggerElement"],"mappings":"AAkEgB,SAAAA,EAAiCC,GAA+BC,GAAsC;AAClH,EAAKA,MAID,OAAOA,KAAiB,aACxBA,EAAaD,EAAS,OAAO,IACtBC,KAAgB,aAAaA,MACpCA,EAAa,UAAUD,EAAS;AAExC;AASO,SAASE,EAAsBC,GAA4D;AACnF,EAAAA,EAAA,cAAc,QAAQ,mBAAmB;AACxD;AAWO,SAASC,EAAiBC,GAAgD;AAC7E,QAAMC,IAAiBD,EAAM;AAEzB,EAACC,KAAA,QAAAA,EAAgB,QAAQ,qBAIzBA,EAAe,QAAQ,qBAAqB,SACtCD,EAAA,OAAO,QAAQ,gBAAgB,SAE/BA,EAAA,OAAO,QAAQ,gBAAgB,SAGzCC,EAAe,QAAQ,mBAAmB;AAC9C;"}

package/dist/fondue-components43.js

@@ -1,63 +1,18 @@
-import { sv as t } from "./fondue-components31.js";
-const i = t({
-  base: "tw-flex tw-self-stretch tw-justify-center ",
-  variants: {
-    direction: {
-      horizontal: "tw-flex-col tw-h-0 tw-border-t tw-w-full",
-      vertical: "tw-flex-row tw-w-0 tw-border-r tw-h-full "
-    },
-    color: {
-      weak: "tw-border-line-weak",
-      default: "tw-border-line",
-      strong: "tw-border-line-strong",
-      "x-strong": "tw-border-x-line-strong"
-    },
-    variant: {
-      solid: "tw-border-solid",
-      dashed: "tw-border-dashed",
-      noline: "tw-border-none"
-    }
-  },
-  compoundVariants: [
-    {
-      direction: "horizontal",
-      padding: "small",
-      class: "tw-my-4"
-    },
-    {
-      direction: "horizontal",
-      padding: "medium",
-      class: "tw-my-7"
-    },
-    {
-      direction: "horizontal",
-      padding: "large",
-      class: "tw-my-12"
-    },
-    {
-      direction: "vertical",
-      padding: "small",
-      class: "tw-mx-4"
-    },
-    {
-      direction: "vertical",
-      padding: "medium",
-      class: "tw-mx-7"
-    },
-    {
-      direction: "vertical",
-      padding: "large",
-      class: "tw-mx-12"
-    }
-  ],
-  defaultVariants: {
-    padding: "medium",
-    direction: "horizontal",
-    color: "default",
-    variant: "solid"
-  }
-});
+const t = "_content_2dhca_6", e = "_header_2dhca_51", o = "_footer_2dhca_52", n = "_body_2dhca_53", d = "_underlay_2dhca_177", _ = "_sideContent_2dhca_190", c = {
+  content: t,
+  header: e,
+  footer: o,
+  body: n,
+  underlay: d,
+  sideContent: _
+};
 export {
-  i as dividerStyles
+  n as body,
+  t as content,
+  c as default,
+  o as footer,
+  e as header,
+  _ as sideContent,
+  d as underlay
 };
 //# sourceMappingURL=fondue-components43.js.map

package/dist/fondue-components43.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components43.js","sources":["../src/components/Divider/styles/dividerStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const dividerStyles = sv({\n    base: 'tw-flex tw-self-stretch tw-justify-center ',\n    variants: {\n        direction: {\n            horizontal: 'tw-flex-col tw-h-0 tw-border-t tw-w-full',\n            vertical: 'tw-flex-row tw-w-0 tw-border-r tw-h-full ',\n        },\n        color: {\n            weak: 'tw-border-line-weak',\n            default: 'tw-border-line',\n            strong: 'tw-border-line-strong',\n            'x-strong': 'tw-border-x-line-strong',\n        },\n        variant: {\n            solid: 'tw-border-solid',\n            dashed: 'tw-border-dashed',\n            noline: 'tw-border-none',\n        },\n    },\n    compoundVariants: [\n        {\n            direction: 'horizontal',\n            padding: 'small',\n            class: 'tw-my-4',\n        },\n        {\n            direction: 'horizontal',\n            padding: 'medium',\n            class: 'tw-my-7',\n        },\n        {\n            direction: 'horizontal',\n            padding: 'large',\n            class: 'tw-my-12',\n        },\n        {\n            direction: 'vertical',\n            padding: 'small',\n            class: 'tw-mx-4',\n        },\n        {\n            direction: 'vertical',\n            padding: 'medium',\n            class: 'tw-mx-7',\n        },\n        {\n            direction: 'vertical',\n            padding: 'large',\n            class: 'tw-mx-12',\n        },\n    ],\n    defaultVariants: {\n        padding: 'medium',\n        direction: 'horizontal',\n        color: 'default',\n        variant: 'solid',\n    },\n});\n"],"names":["dividerStyles","sv"],"mappings":";AAIO,MAAMA,IAAgBC,EAAG;AAAA,EAC5B,MAAM;AAAA,EACN,UAAU;AAAA,IACN,WAAW;AAAA,MACP,YAAY;AAAA,MACZ,UAAU;AAAA,IACd;AAAA,IACA,OAAO;AAAA,MACH,MAAM;AAAA,MACN,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,YAAY;AAAA,IAChB;AAAA,IACA,SAAS;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,IAAA;AAAA,EAEhB;AAAA,EACA,kBAAkB;AAAA,IACd;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,iBAAiB;AAAA,IACb,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAEjB,CAAC;"}
+{"version":3,"file":"fondue-components43.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/fondue-components44.js

@@ -1,21 +1,63 @@
-import { jsx as s } from "react/jsx-runtime";
-import { useMemo as c, isValidElement as r, cloneElement as i, Children as p } from "react";
-const o = (e) => {
-  const t = [];
-  for (const n of p.toArray(e))
-    r(n) ? t.push(n) : t.push(/* @__PURE__ */ s("span", { children: n }));
-  return t.length === 1 ? t[0] : t;
-}, u = (e) => c(() => {
-  const t = r(e) && e.type === "a";
-  if (t) {
-    const n = i(e, {
-      children: o(e.props.children)
-    });
-    return { isLink: t, content: n };
+import { sv as t } from "./fondue-components31.js";
+const i = t({
+  base: "tw-flex tw-self-stretch tw-justify-center ",
+  variants: {
+    direction: {
+      horizontal: "tw-flex-col tw-h-0 tw-border-t tw-w-full",
+      vertical: "tw-flex-row tw-w-0 tw-border-r tw-h-full "
+    },
+    color: {
+      weak: "tw-border-line-weak",
+      default: "tw-border-line",
+      strong: "tw-border-line-strong",
+      "x-strong": "tw-border-x-line-strong"
+    },
+    variant: {
+      solid: "tw-border-solid",
+      dashed: "tw-border-dashed",
+      noline: "tw-border-none"
+    }
+  },
+  compoundVariants: [
+    {
+      direction: "horizontal",
+      padding: "small",
+      class: "tw-my-4"
+    },
+    {
+      direction: "horizontal",
+      padding: "medium",
+      class: "tw-my-7"
+    },
+    {
+      direction: "horizontal",
+      padding: "large",
+      class: "tw-my-12"
+    },
+    {
+      direction: "vertical",
+      padding: "small",
+      class: "tw-mx-4"
+    },
+    {
+      direction: "vertical",
+      padding: "medium",
+      class: "tw-mx-7"
+    },
+    {
+      direction: "vertical",
+      padding: "large",
+      class: "tw-mx-12"
+    }
+  ],
+  defaultVariants: {
+    padding: "medium",
+    direction: "horizontal",
+    color: "default",
+    variant: "solid"
   }
-  return { isLink: t, content: o(e) };
-}, [e]);
+});
 export {
-  u as useProcessedChildren
+  i as dividerStyles
 };
 //# sourceMappingURL=fondue-components44.js.map

package/dist/fondue-components44.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components44.js","sources":["../src/components/Dropdown/hooks/useProcessedChildren.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Children, cloneElement, isValidElement, type ReactNode, useMemo } from 'react';\n\nconst wrapFloatingText = (children: ReactNode) => {\n    const content = [];\n    for (const child of Children.toArray(children)) {\n        if (isValidElement(child)) {\n            content.push(child);\n        } else {\n            content.push(<span>{child}</span>);\n        }\n    }\n    return content.length === 1 ? content[0] : content;\n};\n\nexport const useProcessedChildren = (children: ReactNode) => {\n    return useMemo(() => {\n        const isLink =\n            isValidElement<{\n                children: ReactNode;\n            }>(children) && children.type === 'a';\n\n        if (isLink) {\n            const element = cloneElement(children, {\n                children: wrapFloatingText(children.props.children),\n            });\n            return { isLink, content: element };\n        }\n\n        return { isLink, content: wrapFloatingText(children) };\n    }, [children]);\n};\n"],"names":["wrapFloatingText","children","content","child","Children","isValidElement","jsx","useProcessedChildren","useMemo","isLink","element","cloneElement"],"mappings":";;AAIA,MAAMA,IAAmB,CAACC,MAAwB;AAC9C,QAAMC,IAAU,CAAC;AACjB,aAAWC,KAASC,EAAS,QAAQH,CAAQ;AACrC,IAAAI,EAAeF,CAAK,IACpBD,EAAQ,KAAKC,CAAK,IAElBD,EAAQ,KAAK,gBAAAI,EAAC,QAAM,EAAA,UAAAH,EAAA,CAAM,CAAO;AAGzC,SAAOD,EAAQ,WAAW,IAAIA,EAAQ,CAAC,IAAIA;AAC/C,GAEaK,IAAuB,CAACN,MAC1BO,EAAQ,MAAM;AACjB,QAAMC,IACFJ,EAEGJ,CAAQ,KAAKA,EAAS,SAAS;AAEtC,MAAIQ,GAAQ;AACF,UAAAC,IAAUC,EAAaV,GAAU;AAAA,MACnC,UAAUD,EAAiBC,EAAS,MAAM,QAAQ;AAAA,IAAA,CACrD;AACM,WAAA,EAAE,QAAAQ,GAAQ,SAASC,EAAQ;AAAA,EAAA;AAGtC,SAAO,EAAE,QAAAD,GAAQ,SAAST,EAAiBC,CAAQ,EAAE;AAAA,GACtD,CAACA,CAAQ,CAAC;"}
+{"version":3,"file":"fondue-components44.js","sources":["../src/components/Divider/styles/dividerStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const dividerStyles = sv({\n    base: 'tw-flex tw-self-stretch tw-justify-center ',\n    variants: {\n        direction: {\n            horizontal: 'tw-flex-col tw-h-0 tw-border-t tw-w-full',\n            vertical: 'tw-flex-row tw-w-0 tw-border-r tw-h-full ',\n        },\n        color: {\n            weak: 'tw-border-line-weak',\n            default: 'tw-border-line',\n            strong: 'tw-border-line-strong',\n            'x-strong': 'tw-border-x-line-strong',\n        },\n        variant: {\n            solid: 'tw-border-solid',\n            dashed: 'tw-border-dashed',\n            noline: 'tw-border-none',\n        },\n    },\n    compoundVariants: [\n        {\n            direction: 'horizontal',\n            padding: 'small',\n            class: 'tw-my-4',\n        },\n        {\n            direction: 'horizontal',\n            padding: 'medium',\n            class: 'tw-my-7',\n        },\n        {\n            direction: 'horizontal',\n            padding: 'large',\n            class: 'tw-my-12',\n        },\n        {\n            direction: 'vertical',\n            padding: 'small',\n            class: 'tw-mx-4',\n        },\n        {\n            direction: 'vertical',\n            padding: 'medium',\n            class: 'tw-mx-7',\n        },\n        {\n            direction: 'vertical',\n            padding: 'large',\n            class: 'tw-mx-12',\n        },\n    ],\n    defaultVariants: {\n        padding: 'medium',\n        direction: 'horizontal',\n        color: 'default',\n        variant: 'solid',\n    },\n});\n"],"names":["dividerStyles","sv"],"mappings":";AAIO,MAAMA,IAAgBC,EAAG;AAAA,EAC5B,MAAM;AAAA,EACN,UAAU;AAAA,IACN,WAAW;AAAA,MACP,YAAY;AAAA,MACZ,UAAU;AAAA,IACd;AAAA,IACA,OAAO;AAAA,MACH,MAAM;AAAA,MACN,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,YAAY;AAAA,IAChB;AAAA,IACA,SAAS;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,IAAA;AAAA,EAEhB;AAAA,EACA,kBAAkB;AAAA,IACd;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,iBAAiB;AAAA,IACb,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAEjB,CAAC;"}

package/dist/fondue-components45.js

@@ -1,22 +1,21 @@
-const t = "_content_bx8nt_6", n = "_subContent_bx8nt_7", o = "_item_bx8nt_24", s = "_subTrigger_bx8nt_25", _ = "_subMenuIndicator_bx8nt_110", e = "_group_bx8nt_116", u = "_groupHeading_bx8nt_123", b = "_slot_bx8nt_133", r = {
-  content: t,
-  subContent: n,
-  item: o,
-  subTrigger: s,
-  subMenuIndicator: _,
-  group: e,
-  groupHeading: u,
-  slot: b
-};
+import { jsx as s } from "react/jsx-runtime";
+import { useMemo as c, isValidElement as r, cloneElement as i, Children as p } from "react";
+const o = (e) => {
+  const t = [];
+  for (const n of p.toArray(e))
+    r(n) ? t.push(n) : t.push(/* @__PURE__ */ s("span", { children: n }));
+  return t.length === 1 ? t[0] : t;
+}, u = (e) => c(() => {
+  const t = r(e) && e.type === "a";
+  if (t) {
+    const n = i(e, {
+      children: o(e.props.children)
+    });
+    return { isLink: t, content: n };
+  }
+  return { isLink: t, content: o(e) };
+}, [e]);
 export {
-  t as content,
-  r as default,
-  e as group,
-  u as groupHeading,
-  o as item,
-  b as slot,
-  n as subContent,
-  _ as subMenuIndicator,
-  s as subTrigger
+  u as useProcessedChildren
 };
 //# sourceMappingURL=fondue-components45.js.map

package/dist/fondue-components45.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components45.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"fondue-components45.js","sources":["../src/components/Dropdown/hooks/useProcessedChildren.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Children, cloneElement, isValidElement, type ReactNode, useMemo } from 'react';\n\nconst wrapFloatingText = (children: ReactNode) => {\n    const content = [];\n    for (const child of Children.toArray(children)) {\n        if (isValidElement(child)) {\n            content.push(child);\n        } else {\n            content.push(<span>{child}</span>);\n        }\n    }\n    return content.length === 1 ? content[0] : content;\n};\n\nexport const useProcessedChildren = (children: ReactNode) => {\n    return useMemo(() => {\n        const isLink =\n            isValidElement<{\n                children: ReactNode;\n            }>(children) && children.type === 'a';\n\n        if (isLink) {\n            const element = cloneElement(children, {\n                children: wrapFloatingText(children.props.children),\n            });\n            return { isLink, content: element };\n        }\n\n        return { isLink, content: wrapFloatingText(children) };\n    }, [children]);\n};\n"],"names":["wrapFloatingText","children","content","child","Children","isValidElement","jsx","useProcessedChildren","useMemo","isLink","element","cloneElement"],"mappings":";;AAIA,MAAMA,IAAmB,CAACC,MAAwB;AAC9C,QAAMC,IAAU,CAAC;AACjB,aAAWC,KAASC,EAAS,QAAQH,CAAQ;AACrC,IAAAI,EAAeF,CAAK,IACpBD,EAAQ,KAAKC,CAAK,IAElBD,EAAQ,KAAK,gBAAAI,EAAC,QAAM,EAAA,UAAAH,EAAA,CAAM,CAAO;AAGzC,SAAOD,EAAQ,WAAW,IAAIA,EAAQ,CAAC,IAAIA;AAC/C,GAEaK,IAAuB,CAACN,MAC1BO,EAAQ,MAAM;AACjB,QAAMC,IACFJ,EAEGJ,CAAQ,KAAKA,EAAS,SAAS;AAEtC,MAAIQ,GAAQ;AACF,UAAAC,IAAUC,EAAaV,GAAU;AAAA,MACnC,UAAUD,EAAiBC,EAAS,MAAM,QAAQ;AAAA,IAAA,CACrD;AACM,WAAA,EAAE,QAAAQ,GAAQ,SAASC,EAAQ;AAAA,EAAA;AAGtC,SAAO,EAAE,QAAAD,GAAQ,SAAST,EAAiBC,CAAQ,EAAE;AAAA,GACtD,CAACA,CAAQ,CAAC;"}