@frontify/fondue-components 7.0.1 → 8.0.1

package/dist/fondue-components25.js

@@ -1,4 +1,4 @@
-const g = (t) => t.startsWith("aria-") || t === "role", s = {
+const g = (n) => n.startsWith("aria-") || n === "role", s = {
   m: "margin",
   mx: "margin-x",
   my: "margin-y",
@@ -18,18 +18,18 @@ const g = (t) => t.startsWith("aria-") || t === "role", s = {
   wrap: "flex-wrap",
   columns: "grid-template-columns",
   rows: "grid-template-rows"
-}, m = (t, n) => (t === "columns" || t === "rows") && typeof n == "number" ? `repeat(${n}, 1fr)` : n, l = (t, n = {}) => Object.entries(t).reduce((i, [r, o]) => {
-  if (g(r))
+}, m = (n, r) => n === "columns" || n === "rows" ? typeof r == "number" ? `repeat(${r}, 1fr)` : r : typeof r == "number" ? `${r * 0.25}rem` : r, f = (n, r = {}) => Object.entries(n).reduce((i, [t, o]) => {
+  if (g(t))
     return i;
-  const e = r in n ? n[r] : r in s ? s[r] : r, a = e == null ? void 0 : e.replaceAll(/([\da-z]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+  const e = t in r ? r[t] : t in s ? s[t] : t, p = e == null ? void 0 : e.replaceAll(/([\da-z]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
   if (typeof o == "object")
-    for (const [d, p] of Object.entries(o))
-      p !== void 0 && (i[`--${d}-${a}`] = m(r, p));
+    for (const [d, a] of Object.entries(o))
+      a !== void 0 && (i[`--${d}-${p}`] = m(t, a));
   else
-    i[`--${a}`] = m(r, o);
+    i[`--${p}`] = m(t, o);
   return i;
 }, {});
 export {
-  l as propsToCssVariables
+  f as propsToCssVariables
 };
 //# sourceMappingURL=fondue-components25.js.map

package/dist/fondue-components25.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components25.js","sources":["../src/helpers/propsToCssVariables.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type CSSProperties } from 'react';\n\nimport { type Breakpoint } from './layout';\n\nconst isAriaProp = (key: string): boolean => {\n    return key.startsWith('aria-') || key === 'role';\n};\n\nconst abbreviationToCssProperty: Record<string, string> = {\n    m: 'margin',\n    mx: 'margin-x',\n    my: 'margin-y',\n    mt: 'margin-top',\n    mr: 'margin-right',\n    mb: 'margin-bottom',\n    ml: 'margin-left',\n    p: 'padding',\n    px: 'padding-x',\n    py: 'padding-y',\n    pt: 'padding-top',\n    pr: 'padding-right',\n    pb: 'padding-bottom',\n    pl: 'padding-left',\n    direction: 'flex-direction',\n    align: 'align-items',\n    wrap: 'flex-wrap',\n    columns: 'grid-template-columns',\n    rows: 'grid-template-rows',\n};\n\nconst transformValueBasedOnKey = (key: string, value: string | number): string | number => {\n    if (key === 'columns' || key === 'rows') {\n        if (typeof value === 'number') {\n            return `repeat(${value}, 1fr)`;\n        }\n        return value;\n    }\n    return value;\n};\n\nexport const propsToCssVariables = (\n    props: Record<string, string | number | boolean | { [key in Breakpoint]?: string | number | boolean }>,\n    extraAbbreviationToCssProperty: Record<string, string> = {},\n): CSSProperties => {\n    return Object.entries(props).reduce((acc, [key, value]) => {\n        if (isAriaProp(key)) {\n            return acc;\n        }\n\n        const cssProperty =\n            key in extraAbbreviationToCssProperty\n                ? extraAbbreviationToCssProperty[key]\n                : key in abbreviationToCssProperty\n                  ? abbreviationToCssProperty[key]\n                  : key;\n        const cssPropertyKebabCase = cssProperty?.replaceAll(/([\\da-z]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();\n\n        if (typeof value === 'object') {\n            for (const [breakpoint, breakpointValue] of Object.entries(value)) {\n                if (breakpointValue !== undefined) {\n                    // @ts-expect-error CSS variables are not typed into `CSSProperties`\n                    acc[`--${breakpoint}-${cssPropertyKebabCase}`] = transformValueBasedOnKey(key, breakpointValue);\n                }\n            }\n        } else {\n            // @ts-expect-error CSS variables are not typed into `CSSProperties`\n            acc[`--${cssPropertyKebabCase}`] = transformValueBasedOnKey(key, value);\n        }\n\n        return acc;\n    }, {} as CSSProperties);\n};\n"],"names":["isAriaProp","key","abbreviationToCssProperty","transformValueBasedOnKey","value","propsToCssVariables","props","extraAbbreviationToCssProperty","acc","cssProperty","cssPropertyKebabCase","breakpoint","breakpointValue"],"mappings":"AAMA,MAAMA,IAAa,CAACC,MACTA,EAAI,WAAW,OAAO,KAAKA,MAAQ,QAGxCC,IAAoD;AAAA,EACtD,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AAAA,EACT,MAAM;AACV,GAEMC,IAA2B,CAACF,GAAaG,OACvCH,MAAQ,aAAaA,MAAQ,WACzB,OAAOG,KAAU,WACV,UAAUA,CAAK,WAIvBA,GAGEC,IAAsB,CAC/BC,GACAC,IAAyD,OAElD,OAAO,QAAQD,CAAK,EAAE,OAAO,CAACE,GAAK,CAACP,GAAKG,CAAK,MAAM;AACnD,MAAAJ,EAAWC,CAAG;AACP,WAAAO;AAGL,QAAAC,IACFR,KAAOM,IACDA,EAA+BN,CAAG,IAClCA,KAAOC,IACLA,EAA0BD,CAAG,IAC7BA,GACNS,IAAuBD,KAAA,gBAAAA,EAAa,WAAW,+BAA+B,SAAS;AAEzF,MAAA,OAAOL,KAAU;AACjB,eAAW,CAACO,GAAYC,CAAe,KAAK,OAAO,QAAQR,CAAK;AAC5D,MAAIQ,MAAoB,WAEhBJ,EAAA,KAAKG,CAAU,IAAID,CAAoB,EAAE,IAAIP,EAAyBF,GAAKW,CAAe;AAAA;AAKtG,IAAAJ,EAAI,KAAKE,CAAoB,EAAE,IAAIP,EAAyBF,GAAKG,CAAK;AAGnE,SAAAI;AACX,GAAG,EAAmB;"}
+{"version":3,"file":"fondue-components25.js","sources":["../src/helpers/propsToCssVariables.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type CSSProperties } from 'react';\n\nimport { type Breakpoint } from './layout';\n\nconst isAriaProp = (key: string): boolean => {\n    return key.startsWith('aria-') || key === 'role';\n};\n\nconst abbreviationToCssProperty: Record<string, string> = {\n    m: 'margin',\n    mx: 'margin-x',\n    my: 'margin-y',\n    mt: 'margin-top',\n    mr: 'margin-right',\n    mb: 'margin-bottom',\n    ml: 'margin-left',\n    p: 'padding',\n    px: 'padding-x',\n    py: 'padding-y',\n    pt: 'padding-top',\n    pr: 'padding-right',\n    pb: 'padding-bottom',\n    pl: 'padding-left',\n    direction: 'flex-direction',\n    align: 'align-items',\n    wrap: 'flex-wrap',\n    columns: 'grid-template-columns',\n    rows: 'grid-template-rows',\n};\n\nconst transformValueBasedOnKey = (key: string, value: string | number): string | number => {\n    if (key === 'columns' || key === 'rows') {\n        if (typeof value === 'number') {\n            return `repeat(${value}, 1fr)`;\n        }\n        return value;\n    }\n\n    // Spacing tokens\n    if (typeof value === 'number') {\n        return `${value * 0.25}rem`;\n    }\n\n    return value;\n};\n\nexport const propsToCssVariables = (\n    props: Record<string, string | number | boolean | { [key in Breakpoint]?: string | number | boolean }>,\n    extraAbbreviationToCssProperty: Record<string, string> = {},\n): CSSProperties => {\n    return Object.entries(props).reduce((acc, [key, value]) => {\n        if (isAriaProp(key)) {\n            return acc;\n        }\n\n        const cssProperty =\n            key in extraAbbreviationToCssProperty\n                ? extraAbbreviationToCssProperty[key]\n                : key in abbreviationToCssProperty\n                  ? abbreviationToCssProperty[key]\n                  : key;\n        const cssPropertyKebabCase = cssProperty?.replaceAll(/([\\da-z]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();\n\n        if (typeof value === 'object') {\n            for (const [breakpoint, breakpointValue] of Object.entries(value)) {\n                if (breakpointValue !== undefined) {\n                    // @ts-expect-error CSS variables are not typed into `CSSProperties`\n                    acc[`--${breakpoint}-${cssPropertyKebabCase}`] = transformValueBasedOnKey(key, breakpointValue);\n                }\n            }\n        } else {\n            // @ts-expect-error CSS variables are not typed into `CSSProperties`\n            acc[`--${cssPropertyKebabCase}`] = transformValueBasedOnKey(key, value);\n        }\n\n        return acc;\n    }, {} as CSSProperties);\n};\n"],"names":["isAriaProp","key","abbreviationToCssProperty","transformValueBasedOnKey","value","propsToCssVariables","props","extraAbbreviationToCssProperty","acc","cssProperty","cssPropertyKebabCase","breakpoint","breakpointValue"],"mappings":"AAMA,MAAMA,IAAa,CAACC,MACTA,EAAI,WAAW,OAAO,KAAKA,MAAQ,QAGxCC,IAAoD;AAAA,EACtD,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AAAA,EACT,MAAM;AACV,GAEMC,IAA2B,CAACF,GAAaG,MACvCH,MAAQ,aAAaA,MAAQ,SACzB,OAAOG,KAAU,WACV,UAAUA,CAAK,WAEnBA,IAIP,OAAOA,KAAU,WACV,GAAGA,IAAQ,IAAI,QAGnBA,GAGEC,IAAsB,CAC/BC,GACAC,IAAyD,OAElD,OAAO,QAAQD,CAAK,EAAE,OAAO,CAACE,GAAK,CAACP,GAAKG,CAAK,MAAM;AACnD,MAAAJ,EAAWC,CAAG;AACP,WAAAO;AAGL,QAAAC,IACFR,KAAOM,IACDA,EAA+BN,CAAG,IAClCA,KAAOC,IACLA,EAA0BD,CAAG,IAC7BA,GACNS,IAAuBD,KAAA,gBAAAA,EAAa,WAAW,+BAA+B,SAAS;AAEzF,MAAA,OAAOL,KAAU;AACjB,eAAW,CAACO,GAAYC,CAAe,KAAK,OAAO,QAAQR,CAAK;AAC5D,MAAIQ,MAAoB,WAEhBJ,EAAA,KAAKG,CAAU,IAAID,CAAoB,EAAE,IAAIP,EAAyBF,GAAKW,CAAe;AAAA;AAKtG,IAAAJ,EAAI,KAAKE,CAAoB,EAAE,IAAIP,EAAyBF,GAAKG,CAAK;AAGnE,SAAAI;AACX,GAAG,EAAmB;"}

package/dist/fondue-components28.js

@@ -1,4 +1,4 @@
-import { FOCUS_OUTLINE as t } from "./fondue-components67.js";
+import { FOCUS_OUTLINE as t } from "./fondue-components66.js";
 import { sv as e } from "./fondue-components27.js";
 const o = e({
   base: `tw-group tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-body tw-font-medium ${t}`,

package/dist/fondue-components31.js

@@ -1,4 +1,4 @@
-import { FOCUS_OUTLINE as t } from "./fondue-components67.js";
+import { FOCUS_OUTLINE as t } from "./fondue-components66.js";
 import { sv as e } from "./fondue-components27.js";
 const s = e({
   base: `tw-peer tw-relative tw-inline-flex tw-bg-base tw-text-white tw-shrink-0 tw-rounded tw-border tw-border-line-x-strong group-hover:tw-border-line-xx-strong hover:tw-border-line-xx-strong tw-transition-colors data-[state="checked"]:tw-border-transparent data-[state="indeterminate"]:tw-border-transparent disabled:tw-border-line-strong disabled:tw-bg-base disabled:tw-cursor-not-allowed data-[state="checked"]:disabled:tw-bg-box-disabled-strong ${t}`,

package/dist/fondue-components33.js

@@ -1,7 +1,7 @@
 import { jsxs as i, jsx as a, Fragment as p } from "react/jsx-runtime";
 import { IconDroplet as h, IconTrashBin as N, IconCaretDown as f } from "@frontify/fondue-icons";
 import { forwardRef as I } from "react";
-import e from "./fondue-components69.js";
+import e from "./fondue-components67.js";
 import { colorToCss as b } from "./fondue-components36.js";
 const o = ({
   id: c,

package/dist/fondue-components37.js

@@ -1,31 +1,16 @@
-const u = 8;
-function c(i) {
-  if (!window)
-    throw new Error("Window object not found, this method should be used in a browser environment");
-  i.style.maxHeight = "";
-  const { top: t, bottom: e } = i.getBoundingClientRect();
-  t - 8 < 0 ? i.style.maxHeight = `${e - 8}px` : e + 8 > window.innerHeight && (i.style.maxHeight = `${window.innerHeight - t - 8}px`);
+function s(u, t) {
+  t && (typeof t == "function" ? t(u.current) : t && "current" in t && (t.current = u.current));
 }
-function r(i) {
-  const t = i.getBoundingClientRect(), e = t.width > 0 && t.height > 0, n = window.getComputedStyle(i), o = n.display !== "none" && n.visibility !== "hidden" && parseFloat(n.opacity) !== 0, s = t.top < window.innerHeight && t.left < window.innerWidth && t.bottom > 0 && t.right > 0;
-  return e && o && s;
+function i(u) {
+  u.currentTarget.dataset.autoFocusVisible = "false";
 }
-function a(i, t) {
-  t && (typeof t == "function" ? t(i.current) : t && "current" in t && (t.current = i.current));
-}
-function h(i) {
-  i.currentTarget.dataset.autoFocusVisible = "false";
-}
-function l(i) {
-  const t = i.relatedTarget;
-  t != null && t.dataset.autoFocusTrigger && (t.dataset.autoFocusVisible === "true" ? i.target.dataset.showFocusRing = "true" : i.target.dataset.showFocusRing = "false", t.dataset.autoFocusVisible = "true");
+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 {
-  u as MAX_HEIGHT_MARGIN,
-  h as addAutoFocusAttribute,
-  l as addShowFocusRing,
-  r as isElementVisible,
-  c as setMaxHeightToAvailableSpace,
-  a as syncRefs
+  i as addAutoFocusAttribute,
+  a as addShowFocusRing,
+  s as syncRefs
 };
 //# sourceMappingURL=fondue-components37.js.map

package/dist/fondue-components37.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components37.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":["MAX_HEIGHT_MARGIN","setMaxHeightToAvailableSpace","dialog","top","bottom","isElementVisible","element","rect","hasSize","style","isVisibleStyle","isInViewport","syncRefs","localRef","forwardedRef","addAutoFocusAttribute","mouseEvent","addShowFocusRing","event","triggerElement"],"mappings":"AAIO,MAAMA,IAAoB;AAe1B,SAASC,EAA6BC,GAAqB;AAC9D,MAAI,CAAC;AACK,UAAA,IAAI,MAAM,8EAA8E;AAGlG,EAAAA,EAAO,MAAM,YAAY;AAEzB,QAAM,EAAE,KAAAC,GAAK,QAAAC,MAAWF,EAAO,sBAAsB;AACjD,EAAAC,IAAM,IAAoB,IAE1BD,EAAO,MAAM,YAAY,GAAGE,IAAS,CAAiB,OAC/CA,IAAS,IAAoB,OAAO,gBAE3CF,EAAO,MAAM,YAAY,GAAG,OAAO,cAAcC,IAAM,CAAiB;AAEhF;AAYO,SAASE,EAAiBC,GAAsB;AAC7C,QAAAC,IAAOD,EAAQ,sBAAsB,GACrCE,IAAUD,EAAK,QAAQ,KAAKA,EAAK,SAAS,GAE1CE,IAAQ,OAAO,iBAAiBH,CAAO,GACvCI,IAAiBD,EAAM,YAAY,UAAUA,EAAM,eAAe,YAAY,WAAWA,EAAM,OAAO,MAAM,GAG5GE,IACFJ,EAAK,MAAM,OAAO,eAAeA,EAAK,OAAO,OAAO,cAAcA,EAAK,SAAS,KAAKA,EAAK,QAAQ;AAEtG,SAAOC,KAAWE,KAAkBC;AACxC;AAQgB,SAAAC,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-components37.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-components40.js

@@ -1,18 +1,21 @@
-import { useCallback as r, useLayoutEffect as n } from "react";
-import { isElementVisible as i, setMaxHeightToAvailableSpace as o } from "./fondue-components37.js";
-function u(t) {
-  const e = r(() => {
-    requestAnimationFrame(() => {
-      t.current && i(t.current) && o(t.current);
+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)
     });
-  }, [t]);
-  return n(() => (e(), window.addEventListener("resize", e), () => {
-    window.removeEventListener("resize", e);
-  }), [e]), {
-    setMaxHeight: e
-  };
-}
+    return { isLink: t, content: n };
+  }
+  return { isLink: t, content: o(e) };
+}, [e]);
 export {
-  u as usePreventDropdownOverflow
+  u as useProcessedChildren
 };
 //# sourceMappingURL=fondue-components40.js.map

package/dist/fondue-components40.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components40.js","sources":["../src/hooks/usePreventDropdownOverflow.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type RefObject, useCallback, useLayoutEffect } from 'react';\n\nimport { isElementVisible, setMaxHeightToAvailableSpace } from '#/utilities/domUtilities';\n\n/**\n * Custom hook to dynamically adjust the maximum height of an HTMLElement\n * based on the window's resize events. This function provides an object\n * containing the `setMaxHeight` method to manually trigger\n * the maximum height adjustment if needed.\n *\n * ! Note: Components utilizing this hook should have tests in place to verify\n * ! that in each scenario, the height is correctly adjusted accodrding to the\n * ! requirements of the component and the viewport.\n *\n * @param {RefObject<HTMLElement | null>} ref - A reference to the HTMLElement.\n * @returns {Object} An object containing `setMaxHeight` method.\n */\nexport function usePreventDropdownOverflow(ref: RefObject<HTMLElement | null>) {\n    const setMaxHeight = useCallback(() => {\n        requestAnimationFrame(() => {\n            if (ref.current && isElementVisible(ref.current)) {\n                setMaxHeightToAvailableSpace(ref.current);\n            }\n        });\n    }, [ref]);\n\n    useLayoutEffect(() => {\n        setMaxHeight();\n        window.addEventListener('resize', setMaxHeight);\n        return () => {\n            window.removeEventListener('resize', setMaxHeight);\n        };\n    }, [setMaxHeight]);\n\n    return {\n        setMaxHeight,\n    };\n}\n"],"names":["usePreventDropdownOverflow","ref","setMaxHeight","useCallback","isElementVisible","setMaxHeightToAvailableSpace","useLayoutEffect"],"mappings":";;AAmBO,SAASA,EAA2BC,GAAoC;AACrE,QAAAC,IAAeC,EAAY,MAAM;AACnC,0BAAsB,MAAM;AACxB,MAAIF,EAAI,WAAWG,EAAiBH,EAAI,OAAO,KAC3CI,EAA6BJ,EAAI,OAAO;AAAA,IAC5C,CACH;AAAA,EAAA,GACF,CAACA,CAAG,CAAC;AAER,SAAAK,EAAgB,OACCJ,EAAA,GACN,OAAA,iBAAiB,UAAUA,CAAY,GACvC,MAAM;AACF,WAAA,oBAAoB,UAAUA,CAAY;AAAA,EACrD,IACD,CAACA,CAAY,CAAC,GAEV;AAAA,IACH,cAAAA;AAAA,EACJ;AACJ;"}
+{"version":3,"file":"fondue-components40.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;"}

package/dist/fondue-components41.js

@@ -1,21 +1,20 @@
-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]);
+const t = "_content_cv72f_5", n = "_subContent_cv72f_6", o = "_item_cv72f_20", s = "_subTrigger_cv72f_20", c = "_subMenuIndicator_cv72f_102", _ = "_group_cv72f_108", e = "_slot_cv72f_115", u = {
+  content: t,
+  subContent: n,
+  item: o,
+  subTrigger: s,
+  subMenuIndicator: c,
+  group: _,
+  slot: e
+};
 export {
-  u as useProcessedChildren
+  t as content,
+  u as default,
+  _ as group,
+  o as item,
+  e as slot,
+  n as subContent,
+  c as subMenuIndicator,
+  s as subTrigger
 };
 //# sourceMappingURL=fondue-components41.js.map

package/dist/fondue-components41.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components41.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-components41.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/fondue-components42.js

@@ -1,20 +1,8 @@
-const t = "_content_bam12_5", n = "_subContent_bam12_6", o = "_item_bam12_19", s = "_subTrigger_bam12_19", _ = "_subMenuIndicator_bam12_101", e = "_group_bam12_107", b = "_slot_bam12_114", u = {
-  content: t,
-  subContent: n,
-  item: o,
-  subTrigger: s,
-  subMenuIndicator: _,
-  group: e,
-  slot: b
+const o = "_root_gh190_5", t = {
+  root: o
 };
 export {
-  t as content,
-  u as default,
-  e as group,
-  o as item,
-  b as slot,
-  n as subContent,
-  _ as subMenuIndicator,
-  s as subTrigger
+  t as default,
+  o as root
 };
 //# 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":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/fondue-components43.js

@@ -1,8 +1,18 @@
-const o = "_root_gh190_5", t = {
-  root: o
+const o = "_root_15cpq_5", e = "_overlay_15cpq_42", _ = "_header_15cpq_59", c = "_body_15cpq_79", t = "_footer_15cpq_97", r = "_close_15cpq_117", s = {
+  root: o,
+  overlay: e,
+  header: _,
+  body: c,
+  footer: t,
+  close: r
 };
 export {
-  t as default,
+  c as body,
+  r as close,
+  s as default,
+  t as footer,
+  _ as header,
+  e as overlay,
   o as root
 };
 //# sourceMappingURL=fondue-components43.js.map

package/dist/fondue-components43.js.map

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

package/dist/fondue-components44.js

@@ -1,18 +1,8 @@
-const o = "_root_10vmk_5", e = "_overlay_10vmk_41", _ = "_header_10vmk_59", t = "_body_10vmk_79", r = "_footer_10vmk_97", s = "_close_10vmk_117", c = {
-  root: o,
-  overlay: e,
-  header: _,
-  body: t,
-  footer: r,
-  close: s
+const o = "_root_umks5_5", t = {
+  root: o
 };
 export {
-  t as body,
-  s as close,
-  c as default,
-  r as footer,
-  _ as header,
-  e as overlay,
+  t as default,
   o as root
 };
 //# sourceMappingURL=fondue-components44.js.map

package/dist/fondue-components44.js.map

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

package/dist/fondue-components45.js

@@ -1,8 +1,38 @@
-const o = "_root_umks5_5", t = {
-  root: o
-};
+import { sv as t } from "./fondue-components27.js";
+const i = t({
+  base: "tw-relative tw-w-full tw-overflow-hidden",
+  variants: {
+    rounded: {
+      true: "tw-rounded"
+    },
+    size: {
+      small: "tw-h-1",
+      medium: "tw-h-2",
+      large: "tw-h-3",
+      "x-large": "tw-h-4"
+    },
+    variant: {
+      default: "tw-bg-box-selected",
+      positive: "tw-bg-box-positive",
+      negative: "tw-bg-box-negative"
+    }
+  }
+}), a = t({
+  base: "tw-h-full tw-w-full",
+  variants: {
+    variant: {
+      default: "tw-bg-text-interactive",
+      positive: "tw-bg-text-positive",
+      negative: "tw-bg-text-negative"
+    },
+    indeterminateState: {
+      true: "tw-animate-loading-bar-infinite tw-origin-left-right",
+      false: "tw-transition-all tw-origin-left tw-scale-x-[--loading-bar-proportion]"
+    }
+  }
+});
 export {
-  t as default,
-  o as root
+  i as loadingBarContainerStyles,
+  a as loadingBarStyles
 };
 //# 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/LoadingBar/styles/loadingBarStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const loadingBarContainerStyles = sv({\n    base: 'tw-relative tw-w-full tw-overflow-hidden',\n    variants: {\n        rounded: {\n            true: 'tw-rounded',\n        },\n        size: {\n            small: 'tw-h-1',\n            medium: 'tw-h-2',\n            large: 'tw-h-3',\n            'x-large': 'tw-h-4',\n        },\n        variant: {\n            default: 'tw-bg-box-selected',\n            positive: 'tw-bg-box-positive',\n            negative: 'tw-bg-box-negative',\n        },\n    },\n});\n\nexport const loadingBarStyles = sv({\n    base: 'tw-h-full tw-w-full',\n    variants: {\n        variant: {\n            default: 'tw-bg-text-interactive',\n            positive: 'tw-bg-text-positive',\n            negative: 'tw-bg-text-negative',\n        },\n        indeterminateState: {\n            true: 'tw-animate-loading-bar-infinite tw-origin-left-right',\n            false: 'tw-transition-all tw-origin-left tw-scale-x-[--loading-bar-proportion]',\n        },\n    },\n});\n"],"names":["loadingBarContainerStyles","sv","loadingBarStyles"],"mappings":";AAIO,MAAMA,IAA4BC,EAAG;AAAA,EACxC,MAAM;AAAA,EACN,UAAU;AAAA,IACN,SAAS;AAAA,MACL,MAAM;AAAA,IACV;AAAA,IACA,MAAM;AAAA,MACF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,IACf;AAAA,IACA,SAAS;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,IAAA;AAAA,EACd;AAER,CAAC,GAEYC,IAAmBD,EAAG;AAAA,EAC/B,MAAM;AAAA,EACN,UAAU;AAAA,IACN,SAAS;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,IACd;AAAA,IACA,oBAAoB;AAAA,MAChB,MAAM;AAAA,MACN,OAAO;AAAA,IAAA;AAAA,EACX;AAER,CAAC;"}

package/dist/fondue-components46.js

@@ -1,38 +1,16 @@
-import { sv as t } from "./fondue-components27.js";
-const i = t({
-  base: "tw-relative tw-w-full tw-overflow-hidden",
-  variants: {
-    rounded: {
-      true: "tw-rounded"
-    },
-    size: {
-      small: "tw-h-1",
-      medium: "tw-h-2",
-      large: "tw-h-3",
-      "x-large": "tw-h-4"
-    },
-    variant: {
-      default: "tw-bg-box-selected",
-      positive: "tw-bg-box-positive",
-      negative: "tw-bg-box-negative"
-    }
-  }
-}), a = t({
-  base: "tw-h-full tw-w-full",
-  variants: {
-    variant: {
-      default: "tw-bg-text-interactive",
-      positive: "tw-bg-text-positive",
-      negative: "tw-bg-text-negative"
-    },
-    indeterminateState: {
-      true: "tw-animate-loading-bar-infinite tw-origin-left-right",
-      false: "tw-transition-all tw-origin-left tw-scale-x-[--loading-bar-proportion]"
-    }
-  }
-});
+const o = "_root_uxsne_3", r = "_viewport_uxsne_10", t = "_scrollbar_uxsne_19", s = "_thumb_uxsne_51", _ = "_corner_uxsne_69", e = {
+  root: o,
+  viewport: r,
+  scrollbar: t,
+  thumb: s,
+  corner: _
+};
 export {
-  i as loadingBarContainerStyles,
-  a as loadingBarStyles
+  _ as corner,
+  e as default,
+  o as root,
+  t as scrollbar,
+  s as thumb,
+  r as viewport
 };
 //# sourceMappingURL=fondue-components46.js.map

package/dist/fondue-components46.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components46.js","sources":["../src/components/LoadingBar/styles/loadingBarStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const loadingBarContainerStyles = sv({\n    base: 'tw-relative tw-w-full tw-overflow-hidden',\n    variants: {\n        rounded: {\n            true: 'tw-rounded',\n        },\n        size: {\n            small: 'tw-h-1',\n            medium: 'tw-h-2',\n            large: 'tw-h-3',\n            'x-large': 'tw-h-4',\n        },\n        variant: {\n            default: 'tw-bg-box-selected',\n            positive: 'tw-bg-box-positive',\n            negative: 'tw-bg-box-negative',\n        },\n    },\n});\n\nexport const loadingBarStyles = sv({\n    base: 'tw-h-full tw-w-full',\n    variants: {\n        variant: {\n            default: 'tw-bg-text-interactive',\n            positive: 'tw-bg-text-positive',\n            negative: 'tw-bg-text-negative',\n        },\n        indeterminateState: {\n            true: 'tw-animate-loading-bar-infinite tw-origin-left-right',\n            false: 'tw-transition-all tw-origin-left tw-scale-x-[--loading-bar-proportion]',\n        },\n    },\n});\n"],"names":["loadingBarContainerStyles","sv","loadingBarStyles"],"mappings":";AAIO,MAAMA,IAA4BC,EAAG;AAAA,EACxC,MAAM;AAAA,EACN,UAAU;AAAA,IACN,SAAS;AAAA,MACL,MAAM;AAAA,IACV;AAAA,IACA,MAAM;AAAA,MACF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,IACf;AAAA,IACA,SAAS;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,IAAA;AAAA,EACd;AAER,CAAC,GAEYC,IAAmBD,EAAG;AAAA,EAC/B,MAAM;AAAA,EACN,UAAU;AAAA,IACN,SAAS;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,IACd;AAAA,IACA,oBAAoB;AAAA,MAChB,MAAM;AAAA,MACN,OAAO;AAAA,IAAA;AAAA,EACX;AAER,CAAC;"}
+{"version":3,"file":"fondue-components46.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/fondue-components47.js

@@ -1,16 +1,8 @@
-const o = "_root_uxsne_3", r = "_viewport_uxsne_10", t = "_scrollbar_uxsne_19", s = "_thumb_uxsne_51", _ = "_corner_uxsne_69", e = {
-  root: o,
-  viewport: r,
-  scrollbar: t,
-  thumb: s,
-  corner: _
+const o = "_root_yrjuz_5", t = {
+  root: o
 };
 export {
-  _ as corner,
-  e as default,
-  o as root,
-  t as scrollbar,
-  s as thumb,
-  r as viewport
+  t as default,
+  o as root
 };
 //# sourceMappingURL=fondue-components47.js.map

package/dist/fondue-components47.js.map

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

package/dist/fondue-components48.js

@@ -1,8 +1,28 @@
-const o = "_root_yrjuz_5", t = {
-  root: o
+import { useMemo as f, useCallback as d, useState as v, useRef as S, useEffect as m } from "react";
+const U = ({
+  prop: e,
+  defaultProp: n,
+  onChange: s = () => {
+  }
+}) => {
+  const [o, c] = b({ defaultProp: n, onChange: s }), t = e !== void 0, i = t ? e : o, r = f(() => s, [s]), a = d(
+    (l) => {
+      if (t) {
+        const u = typeof l == "function" ? l(e) : l;
+        u !== e && r(u);
+      } else
+        c(l);
+    },
+    [t, e, c, r]
+  );
+  return [i, a];
+}, b = ({ defaultProp: e, onChange: n }) => {
+  const s = v(e), [o] = s, c = S(o), t = f(() => n, [n]);
+  return m(() => {
+    c.current !== o && (t == null || t(o), c.current = o);
+  }, [o, c, t]), s;
 };
 export {
-  t as default,
-  o as root
+  U as useControllableState
 };
 //# sourceMappingURL=fondue-components48.js.map

package/dist/fondue-components48.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components48.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"fondue-components48.js","sources":["../src/hooks/useControllableState.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type Dispatch, type SetStateAction, useCallback, useMemo, useState, useRef, useEffect } from 'react';\n\n// Radix UI handy hook for handling controlled and uncontrolled state\n// Source: https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/useControllableState.tsx\n\ntype UseControllableStateParams<TValue> = {\n    prop?: TValue;\n    defaultProp?: TValue;\n    onChange?: (state: TValue) => void;\n};\n\ntype SetStateFn<T> = (prevState?: T) => T;\n\nexport const useControllableState = <TValue>({\n    prop,\n    defaultProp,\n    onChange = () => {},\n}: UseControllableStateParams<TValue>) => {\n    const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange });\n    const isControlled = prop !== undefined;\n    const value = isControlled ? prop : uncontrolledProp;\n    const handleChange = useMemo(() => onChange, [onChange]);\n\n    const setValue: Dispatch<SetStateAction<TValue | undefined>> = useCallback(\n        (nextValue) => {\n            if (isControlled) {\n                const setter = nextValue as SetStateFn<TValue>;\n                const value = typeof nextValue === 'function' ? setter(prop) : nextValue;\n                if (value !== prop) {\n                    handleChange(value as TValue);\n                }\n            } else {\n                setUncontrolledProp(nextValue);\n            }\n        },\n        [isControlled, prop, setUncontrolledProp, handleChange],\n    );\n\n    return [value, setValue] as const;\n};\n\nconst useUncontrolledState = <TValue>({ defaultProp, onChange }: Omit<UseControllableStateParams<TValue>, 'prop'>) => {\n    const uncontrolledState = useState<TValue | undefined>(defaultProp);\n    const [value] = uncontrolledState;\n    const prevValueRef = useRef(value);\n    const handleChange = useMemo(() => onChange, [onChange]);\n\n    useEffect(() => {\n        if (prevValueRef.current !== value) {\n            handleChange?.(value as TValue);\n            prevValueRef.current = value;\n        }\n    }, [value, prevValueRef, handleChange]);\n\n    return uncontrolledState;\n};\n"],"names":["useControllableState","prop","defaultProp","onChange","uncontrolledProp","setUncontrolledProp","useUncontrolledState","isControlled","value","handleChange","useMemo","setValue","useCallback","nextValue","uncontrolledState","useState","prevValueRef","useRef","useEffect"],"mappings":";AAeO,MAAMA,IAAuB,CAAS;AAAA,EACzC,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW,MAAM;AAAA,EAAA;AACrB,MAA0C;AAChC,QAAA,CAACC,GAAkBC,CAAmB,IAAIC,EAAqB,EAAE,aAAAJ,GAAa,UAAAC,GAAU,GACxFI,IAAeN,MAAS,QACxBO,IAAQD,IAAeN,IAAOG,GAC9BK,IAAeC,EAAQ,MAAMP,GAAU,CAACA,CAAQ,CAAC,GAEjDQ,IAAyDC;AAAA,IAC3D,CAACC,MAAc;AACX,UAAIN,GAAc;AAEd,cAAMC,IAAQ,OAAOK,KAAc,aADpBA,EACwCZ,CAAI,IAAIY;AAC/D,QAAIL,MAAUP,KACVQ,EAAaD,CAAe;AAAA,MAChC;AAEA,QAAAH,EAAoBQ,CAAS;AAAA,IAErC;AAAA,IACA,CAACN,GAAcN,GAAMI,GAAqBI,CAAY;AAAA,EAC1D;AAEO,SAAA,CAACD,GAAOG,CAAQ;AAC3B,GAEML,IAAuB,CAAS,EAAE,aAAAJ,GAAa,UAAAC,QAAiE;AAC5G,QAAAW,IAAoBC,EAA6Bb,CAAW,GAC5D,CAACM,CAAK,IAAIM,GACVE,IAAeC,EAAOT,CAAK,GAC3BC,IAAeC,EAAQ,MAAMP,GAAU,CAACA,CAAQ,CAAC;AAEvD,SAAAe,EAAU,MAAM;AACR,IAAAF,EAAa,YAAYR,MACzBC,KAAA,QAAAA,EAAeD,IACfQ,EAAa,UAAUR;AAAA,EAE5B,GAAA,CAACA,GAAOQ,GAAcP,CAAY,CAAC,GAE/BK;AACX;"}

package/dist/fondue-components49.js

@@ -1,28 +1,20 @@
-import { useMemo as f, useCallback as d, useState as v, useRef as S, useEffect as m } from "react";
-const U = ({
-  prop: e,
-  defaultProp: n,
-  onChange: s = () => {
-  }
-}) => {
-  const [o, c] = b({ defaultProp: n, onChange: s }), t = e !== void 0, i = t ? e : o, r = f(() => s, [s]), a = d(
-    (l) => {
-      if (t) {
-        const u = typeof l == "function" ? l(e) : l;
-        u !== e && r(u);
-      } else
-        c(l);
-    },
-    [t, e, c, r]
-  );
-  return [i, a];
-}, b = ({ defaultProp: e, onChange: n }) => {
-  const s = v(e), [o] = s, c = S(o), t = f(() => n, [n]);
-  return m(() => {
-    c.current !== o && (t == null || t(o), c.current = o);
-  }, [o, c, t]), s;
+const t = "_root_2wdi8_5", e = "_item_2wdi8_26", i = "_itemLabel_2wdi8_46", a = "_itemLabelActive_2wdi8_65", o = "_itemLabelInactive_2wdi8_94", _ = "_activeIndicator_2wdi8_124", c = "_separator_2wdi8_221", n = {
+  root: t,
+  item: e,
+  itemLabel: i,
+  itemLabelActive: a,
+  itemLabelInactive: o,
+  activeIndicator: _,
+  separator: c
 };
 export {
-  U as useControllableState
+  _ as activeIndicator,
+  n as default,
+  e as item,
+  i as itemLabel,
+  a as itemLabelActive,
+  o as itemLabelInactive,
+  t as root,
+  c as separator
 };
 //# sourceMappingURL=fondue-components49.js.map

package/dist/fondue-components49.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components49.js","sources":["../src/hooks/useControllableState.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type Dispatch, type SetStateAction, useCallback, useMemo, useState, useRef, useEffect } from 'react';\n\n// Radix UI handy hook for handling controlled and uncontrolled state\n// Source: https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/useControllableState.tsx\n\ntype UseControllableStateParams<TValue> = {\n    prop?: TValue;\n    defaultProp?: TValue;\n    onChange?: (state: TValue) => void;\n};\n\ntype SetStateFn<T> = (prevState?: T) => T;\n\nexport const useControllableState = <TValue>({\n    prop,\n    defaultProp,\n    onChange = () => {},\n}: UseControllableStateParams<TValue>) => {\n    const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({ defaultProp, onChange });\n    const isControlled = prop !== undefined;\n    const value = isControlled ? prop : uncontrolledProp;\n    const handleChange = useMemo(() => onChange, [onChange]);\n\n    const setValue: Dispatch<SetStateAction<TValue | undefined>> = useCallback(\n        (nextValue) => {\n            if (isControlled) {\n                const setter = nextValue as SetStateFn<TValue>;\n                const value = typeof nextValue === 'function' ? setter(prop) : nextValue;\n                if (value !== prop) {\n                    handleChange(value as TValue);\n                }\n            } else {\n                setUncontrolledProp(nextValue);\n            }\n        },\n        [isControlled, prop, setUncontrolledProp, handleChange],\n    );\n\n    return [value, setValue] as const;\n};\n\nconst useUncontrolledState = <TValue>({ defaultProp, onChange }: Omit<UseControllableStateParams<TValue>, 'prop'>) => {\n    const uncontrolledState = useState<TValue | undefined>(defaultProp);\n    const [value] = uncontrolledState;\n    const prevValueRef = useRef(value);\n    const handleChange = useMemo(() => onChange, [onChange]);\n\n    useEffect(() => {\n        if (prevValueRef.current !== value) {\n            handleChange?.(value as TValue);\n            prevValueRef.current = value;\n        }\n    }, [value, prevValueRef, handleChange]);\n\n    return uncontrolledState;\n};\n"],"names":["useControllableState","prop","defaultProp","onChange","uncontrolledProp","setUncontrolledProp","useUncontrolledState","isControlled","value","handleChange","useMemo","setValue","useCallback","nextValue","uncontrolledState","useState","prevValueRef","useRef","useEffect"],"mappings":";AAeO,MAAMA,IAAuB,CAAS;AAAA,EACzC,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW,MAAM;AAAA,EAAA;AACrB,MAA0C;AAChC,QAAA,CAACC,GAAkBC,CAAmB,IAAIC,EAAqB,EAAE,aAAAJ,GAAa,UAAAC,GAAU,GACxFI,IAAeN,MAAS,QACxBO,IAAQD,IAAeN,IAAOG,GAC9BK,IAAeC,EAAQ,MAAMP,GAAU,CAACA,CAAQ,CAAC,GAEjDQ,IAAyDC;AAAA,IAC3D,CAACC,MAAc;AACX,UAAIN,GAAc;AAEd,cAAMC,IAAQ,OAAOK,KAAc,aADpBA,EACwCZ,CAAI,IAAIY;AAC/D,QAAIL,MAAUP,KACVQ,EAAaD,CAAe;AAAA,MAChC;AAEA,QAAAH,EAAoBQ,CAAS;AAAA,IAErC;AAAA,IACA,CAACN,GAAcN,GAAMI,GAAqBI,CAAY;AAAA,EAC1D;AAEO,SAAA,CAACD,GAAOG,CAAQ;AAC3B,GAEML,IAAuB,CAAS,EAAE,aAAAJ,GAAa,UAAAC,QAAiE;AAC5G,QAAAW,IAAoBC,EAA6Bb,CAAW,GAC5D,CAACM,CAAK,IAAIM,GACVE,IAAeC,EAAOT,CAAK,GAC3BC,IAAeC,EAAQ,MAAMP,GAAU,CAACA,CAAQ,CAAC;AAEvD,SAAAe,EAAU,MAAM;AACR,IAAAF,EAAa,YAAYR,MACzBC,KAAA,QAAAA,EAAeD,IACfQ,EAAa,UAAUR;AAAA,EAE5B,GAAA,CAACA,GAAOQ,GAAcP,CAAY,CAAC,GAE/BK;AACX;"}
+{"version":3,"file":"fondue-components49.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}