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

package/dist/fondue-components51.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components51.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":"AAkEO,SAASA,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;AAC9F,EAAAA,EAAW,cAAc,QAAQ,mBAAmB;AACxD;AAWO,SAASC,EAAiBC,GAAgD;AAC7E,QAAMC,IAAiBD,EAAM;AAE7B,EAAKC,KAAA,QAAAA,EAAgB,QAAQ,qBAIzBA,EAAe,QAAQ,qBAAqB,SAC5CD,EAAM,OAAO,QAAQ,gBAAgB,SAErCA,EAAM,OAAO,QAAQ,gBAAgB,SAGzCC,EAAe,QAAQ,mBAAmB;AAC9C;"}
+{"version":3,"file":"fondue-components51.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/fondue-components52.js

@@ -1,18 +1,63 @@
-const t = "_content_fuxmc_6", e = "_header_fuxmc_50", o = "_footer_fuxmc_51", n = "_body_fuxmc_52", _ = "_underlay_fuxmc_176", c = "_sideContent_fuxmc_189", d = {
-  content: t,
-  header: e,
-  footer: o,
-  body: n,
-  underlay: _,
-  sideContent: c
-};
+import { sv as t } from "./fondue-components38.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"
+  }
+});
 export {
-  n as body,
-  t as content,
-  d as default,
-  o as footer,
-  e as header,
-  c as sideContent,
-  _ as underlay
+  i as dividerStyles
 };
 //# sourceMappingURL=fondue-components52.js.map

package/dist/fondue-components52.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components52.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"fondue-components52.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,IAAA;AAAA,IAEd,OAAO;AAAA,MACH,MAAM;AAAA,MACN,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,YAAY;AAAA,IAAA;AAAA,IAEhB,SAAS;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,IAAA;AAAA,EACZ;AAAA,EAEJ,kBAAkB;AAAA,IACd;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,EACX;AAAA,EAEJ,iBAAiB;AAAA,IACb,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAEjB,CAAC;"}

package/dist/fondue-components53.js

@@ -1,8 +1,21 @@
-const o = "_root_vneif_2", t = {
-  root: o
-};
+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 default,
-  o as root
+  u as useProcessedChildren
 };
 //# sourceMappingURL=fondue-components53.js.map

package/dist/fondue-components53.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components53.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"fondue-components53.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,CAAA;AAChB,aAAWC,KAASC,EAAS,QAAQH,CAAQ;AACzC,IAAII,EAAeF,CAAK,IACpBD,EAAQ,KAAKC,CAAK,IAElBD,EAAQ,KAAK,gBAAAI,EAAC,QAAA,EAAM,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;AACR,UAAMC,IAAUC,EAAaV,GAAU;AAAA,MACnC,UAAUD,EAAiBC,EAAS,MAAM,QAAQ;AAAA,IAAA,CACrD;AACD,WAAO,EAAE,QAAAQ,GAAQ,SAASC,EAAA;AAAA,EAC9B;AAEA,SAAO,EAAE,QAAAD,GAAQ,SAAST,EAAiBC,CAAQ,EAAA;AACvD,GAAG,CAACA,CAAQ,CAAC;"}

package/dist/fondue-components54.js

@@ -1,62 +1,22 @@
-import { sv as t } from "./fondue-components40.js";
-const r = 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-subtle",
-      default: "tw-border-line-mid",
-      strong: "tw-border-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_1ysry_7", s = "_subContent_1ysry_8", n = "_item_1ysry_21", o = "_subTrigger_1ysry_22", r = "_subMenuIndicator_1ysry_115", _ = "_group_1ysry_121", e = "_groupHeading_1ysry_128", u = "_slot_1ysry_139", y = {
+  content: t,
+  subContent: s,
+  item: n,
+  subTrigger: o,
+  subMenuIndicator: r,
+  group: _,
+  groupHeading: e,
+  slot: u
+};
 export {
-  r as dividerStyles
+  t as content,
+  y as default,
+  _ as group,
+  e as groupHeading,
+  n as item,
+  u as slot,
+  s as subContent,
+  r as subMenuIndicator,
+  o as subTrigger
 };
 //# sourceMappingURL=fondue-components54.js.map

package/dist/fondue-components54.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components54.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-subtle',\n            default: 'tw-border-line-mid',\n            strong: 'tw-border-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,IAAA;AAAA,IAEd,OAAO;AAAA,MACH,MAAM;AAAA,MACN,SAAS;AAAA,MACT,QAAQ;AAAA,IAAA;AAAA,IAEZ,SAAS;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,IAAA;AAAA,EACZ;AAAA,EAEJ,kBAAkB;AAAA,IACd;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,EACX;AAAA,EAEJ,iBAAiB;AAAA,IACb,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAEjB,CAAC;"}
+{"version":3,"file":"fondue-components54.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/fondue-components55.js

@@ -1,21 +1,8 @@
-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 o = "_root_1sw7a_6", t = {
+  root: o
+};
 export {
-  u as useProcessedChildren
+  t as default,
+  o as root
 };
 //# sourceMappingURL=fondue-components55.js.map

package/dist/fondue-components55.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components55.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,CAAA;AAChB,aAAWC,KAASC,EAAS,QAAQH,CAAQ;AACzC,IAAII,EAAeF,CAAK,IACpBD,EAAQ,KAAKC,CAAK,IAElBD,EAAQ,KAAK,gBAAAI,EAAC,QAAA,EAAM,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;AACR,UAAMC,IAAUC,EAAaV,GAAU;AAAA,MACnC,UAAUD,EAAiBC,EAAS,MAAM,QAAQ;AAAA,IAAA,CACrD;AACD,WAAO,EAAE,QAAAQ,GAAQ,SAASC,EAAA;AAAA,EAC9B;AAEA,SAAO,EAAE,QAAAD,GAAQ,SAAST,EAAiBC,CAAQ,EAAA;AACvD,GAAG,CAACA,CAAQ,CAAC;"}
+{"version":3,"file":"fondue-components55.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/fondue-components56.js

@@ -1,22 +1,18 @@
-const n = "_content_6n90a_7", t = "_subContent_6n90a_8", o = "_item_6n90a_21", s = "_subTrigger_6n90a_22", _ = "_subMenuIndicator_6n90a_113", e = "_group_6n90a_119", u = "_groupHeading_6n90a_126", a = "_slot_6n90a_137", r = {
-  content: n,
-  subContent: t,
-  item: o,
-  subTrigger: s,
-  subMenuIndicator: _,
-  group: e,
-  groupHeading: u,
-  slot: a
+const o = "_root_hstbt_6", t = "_overlay_hstbt_51", s = "_header_hstbt_68", e = "_body_hstbt_89", _ = "_footer_hstbt_114", r = "_close_hstbt_135", c = {
+  root: o,
+  overlay: t,
+  header: s,
+  body: e,
+  footer: _,
+  close: r
 };
 export {
-  n as content,
-  r as default,
-  e as group,
-  u as groupHeading,
-  o as item,
-  a as slot,
-  t as subContent,
-  _ as subMenuIndicator,
-  s as subTrigger
+  e as body,
+  r as close,
+  c as default,
+  _ as footer,
+  s as header,
+  t as overlay,
+  o as root
 };
 //# sourceMappingURL=fondue-components56.js.map

package/dist/fondue-components56.js.map

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

package/dist/fondue-components57.js

@@ -1,4 +1,4 @@
-const o = "_root_1sw7a_6", t = {
+const o = "_root_1edjk_6", t = {
   root: o
 };
 export {

package/dist/fondue-components58.js

@@ -1,16 +1,22 @@
-const o = "_root_c9wi5_6", e = "_overlay_c9wi5_51", t = "_header_c9wi5_68", _ = "_body_c9wi5_89", r = "_footer_c9wi5_114", c = {
+const o = "_root_1brlo_2", r = {
   root: o,
-  overlay: e,
-  header: t,
-  body: _,
-  footer: r
+  "size-medium": "_size-medium_1brlo_6",
+  "size-large": "_size-large_1brlo_11",
+  "size-x-large": "_size-x-large_1brlo_16",
+  "size-xx-large": "_size-xx-large_1brlo_21",
+  "weight-default": "_weight-default_1brlo_26",
+  "weight-strong": "_weight-strong_1brlo_30",
+  "color-default": "_color-default_1brlo_34",
+  "color-weak": "_color-weak_1brlo_38",
+  "color-x-weak": "_color-x-weak_1brlo_42",
+  "color-disabled": "_color-disabled_1brlo_46",
+  "color-negative": "_color-negative_1brlo_50",
+  "color-positive": "_color-positive_1brlo_54",
+  "color-warning": "_color-warning_1brlo_58",
+  "color-interactive": "_color-interactive_1brlo_62"
 };
 export {
-  _ as body,
-  c as default,
-  r as footer,
-  t as header,
-  e as overlay,
+  r as default,
   o as root
 };
 //# sourceMappingURL=fondue-components58.js.map

package/dist/fondue-components58.js.map

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

package/dist/fondue-components59.js

@@ -1,8 +1,14 @@
-const o = "_root_1edjk_6", t = {
-  root: o
+const t = "_root_1n5v6_3", e = "_contentArea_1n5v6_66", n = "_hiddenText_1n5v6_71", o = "_visibleText_1n5v6_77", _ = {
+  root: t,
+  contentArea: e,
+  hiddenText: n,
+  visibleText: o
 };
 export {
-  t as default,
-  o as root
+  e as contentArea,
+  _ as default,
+  n as hiddenText,
+  t as root,
+  o as visibleText
 };
 //# sourceMappingURL=fondue-components59.js.map

package/dist/fondue-components59.js.map

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

package/dist/fondue-components6.js

@@ -1,9 +1,9 @@
 import { jsx as r } from "react/jsx-runtime";
 import { forwardRef as y } from "react";
-import { cn as x } from "./fondue-components40.js";
-import { buttonStyles as S } from "./fondue-components41.js";
-import { iconStyles as k } from "./fondue-components42.js";
-import { textStyles as B } from "./fondue-components43.js";
+import { cn as x } from "./fondue-components38.js";
+import { buttonStyles as S } from "./fondue-components39.js";
+import { iconStyles as k } from "./fondue-components40.js";
+import { textStyles as B } from "./fondue-components41.js";
 const C = y(
   ({
     children: f,

package/dist/fondue-components60.js

@@ -1,21 +1,38 @@
-const r = "_root_1ri4z_2", i = {
-  root: r,
-  "size-medium": "_size-medium_1ri4z_6",
-  "size-large": "_size-large_1ri4z_11",
-  "size-x-large": "_size-x-large_1ri4z_16",
-  "size-xx-large": "_size-xx-large_1ri4z_21",
-  "weight-default": "_weight-default_1ri4z_26",
-  "weight-strong": "_weight-strong_1ri4z_30",
-  "color-default": "_color-default_1ri4z_34",
-  "color-weak": "_color-weak_1ri4z_38",
-  "color-disabled": "_color-disabled_1ri4z_42",
-  "color-negative": "_color-negative_1ri4z_46",
-  "color-positive": "_color-positive_1ri4z_50",
-  "color-warning": "_color-warning_1ri4z_54",
-  "color-interactive": "_color-interactive_1ri4z_58"
-};
+import { sv as t } from "./fondue-components38.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 {
-  i as default,
-  r as root
+  i as loadingBarContainerStyles,
+  a as loadingBarStyles
 };
 //# sourceMappingURL=fondue-components60.js.map

package/dist/fondue-components60.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components60.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"fondue-components60.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,IAAA;AAAA,IAEV,MAAM;AAAA,MACF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,IAAA;AAAA,IAEf,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,IAAA;AAAA,IAEd,oBAAoB;AAAA,MAChB,MAAM;AAAA,MACN,OAAO;AAAA,IAAA;AAAA,EACX;AAER,CAAC;"}

package/dist/fondue-components61.js

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

package/dist/fondue-components61.js.map

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

package/dist/fondue-components62.js

@@ -1,40 +1,16 @@
-const o = "_root_18l9z_2", l = "_truncate_18l9z_138", r = "_disabled_18l9z_144", _ = {
+const o = "_root_hkznm_4", r = "_viewport_hkznm_12", t = "_scrollbar_hkznm_43", _ = "_thumb_hkznm_75", n = "_corner_hkznm_93", c = {
   root: o,
-  "size-xx-small": "_size-xx-small_18l9z_8",
-  "size-x-small": "_size-x-small_18l9z_14",
-  "size-small": "_size-small_18l9z_20",
-  "size-medium": "_size-medium_18l9z_26",
-  "size-large": "_size-large_18l9z_32",
-  "size-x-large": "_size-x-large_18l9z_38",
-  "size-xx-large": "_size-xx-large_18l9z_44",
-  "weight-regular": "_weight-regular_18l9z_50",
-  "weight-medium": "_weight-medium_18l9z_54",
-  "weight-bold": "_weight-bold_18l9z_58",
-  "wrap-wrap": "_wrap-wrap_18l9z_62",
-  "wrap-nowrap": "_wrap-nowrap_18l9z_66",
-  "underline-auto": "_underline-auto_18l9z_70",
-  "underline-always": "_underline-always_18l9z_74",
-  "underline-hover": "_underline-hover_18l9z_78",
-  "underline-none": "_underline-none_18l9z_86",
-  "color-primary": "_color-primary_18l9z_90",
-  "color-secondary": "_color-secondary_18l9z_94",
-  "color-error": "_color-error_18l9z_98",
-  "color-success": "_color-success_18l9z_102",
-  "color-warning": "_color-warning_18l9z_106",
-  "color-highlight": "_color-highlight_18l9z_110",
-  "color-on-container-secondary": "_color-on-container-secondary_18l9z_114",
-  "color-on-container-disabled": "_color-on-container-disabled_18l9z_118",
-  "color-on-container-error": "_color-on-container-error_18l9z_122",
-  "color-on-container-success": "_color-on-container-success_18l9z_126",
-  "color-on-container-warning": "_color-on-container-warning_18l9z_130",
-  "color-on-container-highlight": "_color-on-container-highlight_18l9z_134",
-  truncate: l,
-  disabled: r
+  viewport: r,
+  scrollbar: t,
+  thumb: _,
+  corner: n
 };
 export {
-  _ as default,
-  r as disabled,
+  n as corner,
+  c as default,
   o as root,
-  l as truncate
+  t as scrollbar,
+  _ as thumb,
+  r as viewport
 };
 //# sourceMappingURL=fondue-components62.js.map

package/dist/fondue-components62.js.map

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

package/dist/fondue-components63.js

@@ -1,38 +1,8 @@
-import { sv as t } from "./fondue-components40.js";
-const i = t({
-  base: "tw-relative tw-w-full tw-overflow-hidden",
-  variants: {
-    rounded: {
-      true: "tw-rounded-medium"
-    },
-    size: {
-      small: "tw-h-1",
-      medium: "tw-h-2",
-      large: "tw-h-3",
-      "x-large": "tw-h-4"
-    },
-    variant: {
-      default: "tw-bg-container-highlight",
-      positive: "tw-bg-container-success",
-      negative: "tw-bg-container-error"
-    }
-  }
-}), a = t({
-  base: "tw-h-full tw-w-full",
-  variants: {
-    variant: {
-      default: "tw-bg-highlight",
-      positive: "tw-bg-success",
-      negative: "tw-bg-error"
-    },
-    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_howjn_6", t = {
+  root: o
+};
 export {
-  i as loadingBarContainerStyles,
-  a as loadingBarStyles
+  t as default,
+  o as root
 };
 //# sourceMappingURL=fondue-components63.js.map

package/dist/fondue-components63.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components63.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-medium',\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-container-highlight',\n            positive: 'tw-bg-container-success',\n            negative: 'tw-bg-container-error',\n        },\n    },\n});\n\nexport const loadingBarStyles = sv({\n    base: 'tw-h-full tw-w-full',\n    variants: {\n        variant: {\n            default: 'tw-bg-highlight',\n            positive: 'tw-bg-success',\n            negative: 'tw-bg-error',\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,IAAA;AAAA,IAEV,MAAM;AAAA,MACF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,IAAA;AAAA,IAEf,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,IAAA;AAAA,IAEd,oBAAoB;AAAA,MAChB,MAAM;AAAA,MACN,OAAO;AAAA,IAAA;AAAA,EACX;AAER,CAAC;"}
+{"version":3,"file":"fondue-components63.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/fondue-components64.js

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