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

package/dist/fondue-components88.js

@@ -1,8 +1,43 @@
-const o = "_root_e5fqt_2", t = {
-  root: o
+import { Children as a, isValidElement as u, cloneElement as f } from "react";
+import { ForwardedRefSelectItem as E } from "./fondue-components67.js";
+const g = ({
+  children: o,
+  value: r,
+  label: s
+}) => o && typeof o == "string" ? {
+  value: r || o,
+  label: s || o
+} : {
+  value: r || "",
+  label: s || r || "",
+  ...o ? { children: o } : null
+}, w = (o, r) => u(o) && o.type === r, y = (o, r, s, p = 0) => {
+  const n = [];
+  let t = 0;
+  return a.forEach(o, (e) => {
+    if (w(e, E) && u(e))
+      g(e.props).label.toLowerCase().includes((s == null ? void 0 : s.toLowerCase()) || "") && (n.push(r(e, p + t)), t++);
+    else if (u(e) && (e != null && e.props.children)) {
+      const { parsedChildren: m, subElementCount: C } = y(
+        e.props.children,
+        r,
+        "",
+        p + t
+      );
+      e = f(e, {
+        children: m,
+        key: `group-${p + t}`
+      }), n.push(e), t += C;
+    } else
+      n.push(e);
+  }), {
+    parsedChildren: n,
+    subElementCount: t
+  };
 };
 export {
-  t as default,
-  o as root
+  g as getSelectOptionValue,
+  w as isReactLeaf,
+  y as recursiveMap
 };
 //# sourceMappingURL=fondue-components88.js.map

package/dist/fondue-components88.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components88.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"fondue-components88.js","sources":["../src/components/Select/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    Children,\n    cloneElement,\n    isValidElement,\n    type JSXElementConstructor,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\n\nimport { ForwardedRefSelectItem, type SelectItemProps } from './SelectItem';\n\n/**\n * Extracts and returns an object containing `value` and `label` from a given SelectItemProps object.\n * It prioritizes explicit `value` and `label` properties but will fall back to using `children` as the value or label if necessary.\n *\n * @param {SelectItemProps} props - The properties of a select item, which include potential children, value, and label.\n * @returns {{ value: string; label: string, children?: ReactNode }} An object containing `value` and `label` as strings.\n *\n * @example\n * // Returns { value: 'option1', label: 'Option 1' }\n * getSelectOptionValue({ value: 'option1', label: 'Option 1' });\n *\n * @example\n * // Uses children as the value and label when they are not explicitly provided\n * // Returns { value: 'Default', label: 'Default' }\n * getSelectOptionValue({ children: 'Default' });\n */\nexport const getSelectOptionValue = ({\n    children,\n    value,\n    label,\n}: SelectItemProps): {\n    value: string;\n    label: string;\n    children?: ReactNode;\n} => {\n    if (children && typeof children === 'string') {\n        return {\n            value: value ? value : children,\n            label: label ? label : children,\n        };\n    }\n\n    return {\n        value: value || '',\n        label: label ? label : value || '',\n        ...(children ? { children } : null),\n    };\n};\n/**\n * Determines if the child is a leaf node of React, meaning it has one final child of a native type;\n *\n * @param {ReactNode} child - The React child node to check.\n * @param {JSXElementConstructor<never>} Component - The React component constructor used for comparison.\n * @returns {boolean} Returns true if the `child` is a valid React element of the specified `Component` type.\n *\n * @example\n * // Assuming ForwardedRefSelectItem is a component that renders an <input> element\n * // Returns true\n * isReactLeaf(<ForwardedRefSelectItem />, ForwardedRefSelectItem);\n *\n * @example\n * // Returns false for non-matching types or non-leaf components\n * isReactLeaf(<div><ForwardedRefSelectItem /></div>, ForwardedRefSelectItem);\n */\nexport const isReactLeaf = (child: ReactNode, Component: JSXElementConstructor<never>): child is ReactElement =>\n    isValidElement(child) && child.type === Component;\n\n/**\n * Recursively maps through React children, applying a callback to each child that meets the specified conditions.\n * This function is useful for deeply nested structures where modifications or checks are needed at multiple levels.\n *\n * @param {ReactNode} children - The children to be recursively processed.\n * @param {function(ReactNode, number): ReactNode} callback - A function that is called for each child that meets the condition. It receives the child and its index, and returns a React node.\n * @param {string} [filterText=''] - Optional text used to filter children based on their properties.\n * @param {number} [nextIndex=0] - The starting index for numbering children, defaults to 0.\n * @returns {{ parsedChildren: ReactNode[], subElementCount: number }} An object containing the transformed children array and the count of all processed sub-elements.\n *\n * @example\n * // Example usage in a select component where only items containing a certain text are modified\n * recursiveMap(children, (child, index) => React.cloneElement(child, { extraProp: 'value' }), 'specific text');\n *\n * @example\n * // Nested structure transformation, adding class names based on index\n * recursiveMap(children, (child, index) => React.cloneElement(child, { className: `item-${index}` }));\n */\nexport const recursiveMap = (\n    children: ReactNode,\n    callback: (child: ReactNode, nextIndex: number) => ReactNode,\n    filterText?: string,\n    nextIndex: number = 0,\n): {\n    parsedChildren: ReactNode[];\n    subElementCount: number;\n} => {\n    const resultingChildren: ReactNode[] = [];\n    let itemCounter = 0;\n    Children.forEach(children, (child) => {\n        if (isReactLeaf(child, ForwardedRefSelectItem) && isValidElement<SelectItemProps>(child)) {\n            if (\n                getSelectOptionValue(child.props)\n                    .label.toLowerCase()\n                    .includes(filterText?.toLowerCase() || '')\n            ) {\n                resultingChildren.push(callback(child, nextIndex + itemCounter));\n                itemCounter++;\n            }\n        } else if (isValidElement<{ children: ReactNode }>(child) && child?.props.children) {\n            const { parsedChildren, subElementCount } = recursiveMap(\n                child.props.children,\n                callback,\n                '',\n                nextIndex + itemCounter,\n            );\n            child = cloneElement(child, {\n                children: parsedChildren,\n                key: `group-${nextIndex + itemCounter}`,\n            });\n            resultingChildren.push(child);\n            itemCounter += subElementCount;\n        } else {\n            resultingChildren.push(child);\n        }\n    });\n    return {\n        parsedChildren: resultingChildren,\n        subElementCount: itemCounter,\n    };\n};\n"],"names":["getSelectOptionValue","children","value","label","isReactLeaf","child","Component","isValidElement","recursiveMap","callback","filterText","nextIndex","resultingChildren","itemCounter","Children","ForwardedRefSelectItem","parsedChildren","subElementCount","cloneElement"],"mappings":";;AA6BO,MAAMA,IAAuB,CAAC;AAAA,EACjC,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AACJ,MAKQF,KAAY,OAAOA,KAAa,WACzB;AAAA,EACH,OAAOC,KAAgBD;AAAA,EACvB,OAAOE,KAAgBF;AAAA,IAIxB;AAAA,EACH,OAAOC,KAAS;AAAA,EAChB,OAAOC,KAAgBD,KAAS;AAAA,EAChC,GAAID,IAAW,EAAE,UAAAA,MAAa;AAAA,GAmBzBG,IAAc,CAACC,GAAkBC,MAC1CC,EAAeF,CAAK,KAAKA,EAAM,SAASC,GAoB/BE,IAAe,CACxBP,GACAQ,GACAC,GACAC,IAAoB,MAInB;AACD,QAAMC,IAAiC,CAAA;AACvC,MAAIC,IAAc;AAClB,SAAAC,EAAS,QAAQb,GAAU,CAACI,MAAU;AAClC,QAAID,EAAYC,GAAOU,CAAsB,KAAKR,EAAgCF,CAAK;AACnF,MACIL,EAAqBK,EAAM,KAAK,EAC3B,MAAM,cACN,UAASK,KAAA,gBAAAA,EAAY,kBAAiB,EAAE,MAE7CE,EAAkB,KAAKH,EAASJ,GAAOM,IAAYE,CAAW,CAAC,GAC/DA;AAAA,aAEGN,EAAwCF,CAAK,MAAKA,KAAA,QAAAA,EAAO,MAAM,WAAU;AAChF,YAAM,EAAE,gBAAAW,GAAgB,iBAAAC,EAAA,IAAoBT;AAAA,QACxCH,EAAM,MAAM;AAAA,QACZI;AAAA,QACA;AAAA,QACAE,IAAYE;AAAA,MAAA;AAEhB,MAAAR,IAAQa,EAAab,GAAO;AAAA,QACxB,UAAUW;AAAA,QACV,KAAK,SAASL,IAAYE,CAAW;AAAA,MAAA,CACxC,GACDD,EAAkB,KAAKP,CAAK,GAC5BQ,KAAeI;AAAA,IACnB;AACI,MAAAL,EAAkB,KAAKP,CAAK;AAAA,EAEpC,CAAC,GACM;AAAA,IACH,gBAAgBO;AAAA,IAChB,iBAAiBC;AAAA,EAAA;AAEzB;"}

package/dist/fondue-components89.js

@@ -1,8 +1,9 @@
-const r = (e) => {
-  if (e)
-    return `rgba(${e.red}, ${e.green}, ${e.blue}, ${e.alpha ?? 1})`;
-};
+import { jsx as e } from "react/jsx-runtime";
+import { IconCross as s } from "@frontify/fondue-icons";
+import { Button as o } from "./fondue-components6.js";
+import t from "./fondue-components70.js";
+const c = ({ onClear: r }) => /* @__PURE__ */ e(o, { "aria-label": "clear input", type: "button", size: "small", emphasis: "weak", aspect: "square", onPress: r, children: /* @__PURE__ */ e(s, { className: t.clearIcon, size: 16 }) });
 export {
-  r as colorToCss
+  c as SelectClear
 };
 //# sourceMappingURL=fondue-components89.js.map

package/dist/fondue-components89.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components89.js","sources":["../src/components/Badge/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type RgbaColor } from './types';\n\nexport const DEFAULT_COLOR = { red: 255, green: 255, blue: 255, alpha: 1, name: '' };\n\n/**\n * Converts a color object to a CSS color string.\n * @param {RgbaColor} color - The color object to be converted.\n * @returns {string}\n * @example\n * colorToCss({ red: 255, green: 255, blue: 255, alpha: 1 }); // 'rgba(255, 255, 255, 1)'\n * @example\n * colorToCss({ red: 255, green: 87, blue: 51, alpha: 1 }); // 'rgba(255, 87, 51, 1)'\n * @example\n * colorToCss({ red: 0, green: 0, blue: 0, alpha: 0 }); // 'rgba(0, 0, 0, 0)'\n */\nexport const colorToCss = (color?: RgbaColor) => {\n    if (!color) {\n        return undefined;\n    }\n    return `rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha ?? 1})`;\n};\n"],"names":["colorToCss","color"],"mappings":"AAiBO,MAAMA,IAAa,CAACC,MAAsB;AAC7C,MAAKA;AAGL,WAAO,QAAQA,EAAM,GAAG,KAAKA,EAAM,KAAK,KAAKA,EAAM,IAAI,KAAKA,EAAM,SAAS,CAAC;AAChF;"}
+{"version":3,"file":"fondue-components89.js","sources":["../src/components/Select/SelectClear.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\n\nimport { Button } from '../Button/Button';\n\nimport styles from './styles/select.module.scss';\n\nexport const SelectClear = ({ onClear }: { onClear?: () => void }) => {\n    return (\n        <Button aria-label=\"clear input\" type=\"button\" size=\"small\" emphasis=\"weak\" aspect=\"square\" onPress={onClear}>\n            <IconCross className={styles.clearIcon} size={16} />\n        </Button>\n    );\n};\n"],"names":["SelectClear","onClear","jsx","Button","IconCross","styles"],"mappings":";;;;AAQO,MAAMA,IAAc,CAAC,EAAE,SAAAC,QAEtB,gBAAAC,EAACC,KAAO,cAAW,eAAc,MAAK,UAAS,MAAK,SAAQ,UAAS,QAAO,QAAO,UAAS,SAASF,GACjG,UAAA,gBAAAC,EAACE,GAAA,EAAU,WAAWC,EAAO,WAAW,MAAM,GAAA,CAAI,EAAA,CACtD;"}

package/dist/fondue-components9.js

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

package/dist/fondue-components9.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components9.js","sources":["../src/components/Dialog/Dialog.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixDialog from '@radix-ui/react-dialog';\nimport {\n    createContext,\n    forwardRef,\n    useContext,\n    useMemo,\n    useRef,\n    type CSSProperties,\n    type ForwardedRef,\n    type ReactNode,\n} from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { useSyncRefs } from '#/hooks/useSyncRefs';\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/dialog.module.scss';\n\nexport type DialogRootProps = {\n    /**\n     * Disable interaction with the rest of the page\n     * @default false\n     */\n    modal?: boolean;\n    /**\n     * The controlled `open` state of the dialog\n     * @default false\n     */\n    open?: boolean;\n    /**\n     * Event handler called when the `open` state changes\n     */\n    onOpenChange?: (open: boolean) => void;\n    children?: ReactNode;\n};\n\nexport type DialogContentProps = {\n    /**\n     * Add rounded corners to the dialog\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * Define the padding of the dialog\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * The vertical alignment of the divider\n     * @default \"center\"\n     */\n    verticalAlign?: 'top' | 'center';\n\n    /**\n     * Define a maximum width for the dialog\n     * @default \"800px\"\n     */\n    maxWidth?: string;\n    /**\n     * Define a minimum width for the dialog\n     * @default \"400px\"\n     */\n    minWidth?: string;\n    /**\n     * Define a minimum height for the dialog\n     * @default \"200px\"\n     */\n    minHeight?: string;\n    /**\n     * Show a dark underlay behind the dialog\n     * @default false\n     */\n    showUnderlay?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default true\n     */\n    asChild?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogHeaderProps = {\n    /**\n     * Define the padding for the dialog header\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Show a border at the bottom of the header\n     * @default true\n     */\n    showBorder?: boolean;\n    /**\n     * Show a close button in the header\n     * @default true\n     */\n    showCloseButton?: boolean;\n    closeProps?: CommonAriaProps;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogFooterProps = {\n    /**\n     * Define the padding for the dialog footer\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Show a border at the top of the footer\n     * @default true\n     */\n    showBorder?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogBodyProps = {\n    /**\n     * Define the padding for the dialog body\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogSideContentProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogCloseProps = { children?: ReactNode };\n\nexport type DialogAnnouncementProps = { children?: ReactNode; asChild?: boolean };\n\ntype DialogContextType = {\n    isModal: boolean;\n};\n\nconst DialogContext = createContext<DialogContextType>({ isModal: false });\nDialogContext.displayName = 'DialogContext';\n\nexport const DialogRoot = ({ children, ...props }: DialogRootProps) => {\n    const value = useMemo(() => ({ isModal: props.modal ?? false }), [props.modal]);\n    return (\n        <DialogContext.Provider value={value}>\n            <RadixDialog.Root {...props}>{children}</RadixDialog.Root>\n        </DialogContext.Provider>\n    );\n};\nDialogRoot.displayName = 'Dialog.Root';\n\nexport const DialogTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-dialog-trigger', ...props }: DialogTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDialog.Trigger\n            onMouseDown={addAutoFocusAttribute}\n            data-auto-focus-visible=\"true\"\n            data-auto-focus-trigger\n            data-test-id={dataTestId}\n            asChild={asChild}\n            ref={ref}\n            {...props}\n        >\n            {children}\n        </RadixDialog.Trigger>\n    );\n};\nDialogTrigger.displayName = 'Dialog.Trigger';\n\nconst DialogUnderlay = ({ children, showUnderlay }: { children: ReactNode; showUnderlay: boolean }) => {\n    const { isModal } = useContext(DialogContext);\n    if (isModal) {\n        return (\n            <RadixDialog.Overlay data-visible={showUnderlay} className={styles.underlay}>\n                {children}\n            </RadixDialog.Overlay>\n        );\n    }\n    return (\n        <div className={styles.underlay} data-visible={showUnderlay}>\n            {children}\n        </div>\n    );\n};\n\nexport const DialogContent = (\n    {\n        maxWidth = '800px',\n        minWidth = '400px',\n        minHeight = '200px',\n        padding = 'compact',\n        verticalAlign = 'center',\n        'data-test-id': dataTestId = 'fondue-dialog-content',\n        showUnderlay = false,\n        rounded = true,\n        children,\n        ...props\n    }: DialogContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const theme = useFondueTheme();\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    useSyncRefs<HTMLDivElement>(contentRef, ref);\n\n    const handleOpenAutoFocus = (event: Event) => {\n        event.preventDefault();\n\n        const dialogBody = contentRef.current?.querySelector('[data-dialog-layout-component=\"body\"]');\n\n        const firstFocusable = dialogBody?.querySelector(\n            'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n        );\n\n        if (firstFocusable instanceof HTMLElement) {\n            firstFocusable.focus();\n        }\n    };\n\n    return (\n        <RadixDialog.Portal>\n            <ThemeProvider theme={theme}>\n                <DialogUnderlay showUnderlay={showUnderlay}>\n                    <RadixDialog.Content\n                        style={\n                            {\n                                '--dialog-max-width': maxWidth,\n                                '--dialog-min-width': minWidth,\n                                '--dialog-min-height': minHeight,\n                            } as CSSProperties\n                        }\n                        ref={contentRef}\n                        className={styles.content}\n                        onFocus={addShowFocusRing}\n                        onOpenAutoFocus={handleOpenAutoFocus}\n                        data-dialog-padding={padding}\n                        data-dialog-rounded={rounded}\n                        data-test-id={dataTestId}\n                        data-dialog-vertical-align={verticalAlign}\n                        {...props}\n                    >\n                        {children}\n                    </RadixDialog.Content>\n                </DialogUnderlay>\n            </ThemeProvider>\n        </RadixDialog.Portal>\n    );\n};\nDialogContent.displayName = 'Dialog.Content';\n\nexport const DialogHeader = (\n    {\n        padding,\n        showBorder = true,\n        showCloseButton = true,\n        closeProps,\n        children,\n        'data-test-id': dataTestId = 'fondue-dialog-header',\n    }: DialogHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.header}\n            data-dialog-header-padding={padding}\n            data-show-border={showBorder}\n            data-dialog-layout-component=\"header\"\n        >\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixDialog.Close\n                    role=\"button\"\n                    data-test-id={`${dataTestId}-close`}\n                    className=\"tw-cursor-pointer\"\n                    aria-label=\"Close\"\n                    {...closeProps}\n                >\n                    <IconCross size={20} />\n                </RadixDialog.Close>\n            )}\n        </div>\n    );\n};\nDialogHeader.displayName = 'Dialog.Header';\n\nexport const DialogFooter = (\n    { padding, showBorder = true, children, 'data-test-id': dataTestId = 'fondue-dialog-footer' }: DialogFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.footer}\n            data-dialog-footer-padding={padding}\n            data-show-border={showBorder}\n            data-dialog-layout-component=\"footer\"\n        >\n            {children}\n        </div>\n    );\n};\nDialogFooter.displayName = 'Dialog.Footer';\n\nexport const DialogBody = (\n    { padding, children, 'data-test-id': dataTestId = 'fondue-dialog-body' }: DialogBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.body}\n            data-dialog-body-padding={padding}\n            data-dialog-layout-component=\"body\"\n        >\n            {children}\n        </div>\n    );\n};\nDialogBody.displayName = 'Dialog.Body';\n\nexport const DialogSideContent = (\n    { children, 'data-test-id': dataTestId = 'fondue-dialog-side-content' }: DialogSideContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.sideContent} data-dialog-layout-component>\n            {children}\n        </div>\n    );\n};\nDialogSideContent.displayName = 'Dialog.SideContent';\n\nexport const DialogClose = ({ children }: DialogCloseProps) => {\n    return <RadixDialog.Close asChild>{children}</RadixDialog.Close>;\n};\nDialogClose.displayName = 'Dialog.Close';\n\nexport const DialogTitle = ({ children, asChild }: DialogAnnouncementProps) => {\n    return <RadixDialog.Title asChild={asChild}>{children}</RadixDialog.Title>;\n};\nDialogTitle.displayName = 'Dialog.Title';\n\nexport const DialogDescription = ({ children, asChild }: DialogAnnouncementProps) => {\n    return <RadixDialog.Description asChild={asChild}>{children}</RadixDialog.Description>;\n};\nDialogDescription.displayName = 'Dialog.Description';\n\nexport const Dialog = {\n    Root: DialogRoot,\n    Title: DialogTitle,\n    Description: DialogDescription,\n    Close: DialogClose,\n    Trigger: forwardRef<HTMLButtonElement, DialogTriggerProps>(DialogTrigger),\n    Content: forwardRef<HTMLDivElement, DialogContentProps>(DialogContent),\n    Header: forwardRef<HTMLDivElement, DialogHeaderProps>(DialogHeader),\n    Footer: forwardRef<HTMLDivElement, DialogFooterProps>(DialogFooter),\n    Body: forwardRef<HTMLDivElement, DialogBodyProps>(DialogBody),\n    SideContent: forwardRef<HTMLDivElement, DialogSideContentProps>(DialogSideContent),\n};\n"],"names":["DialogContext","createContext","DialogRoot","children","props","value","useMemo","jsx","RadixDialog","DialogTrigger","asChild","dataTestId","ref","addAutoFocusAttribute","DialogUnderlay","showUnderlay","isModal","useContext","styles","DialogContent","maxWidth","minWidth","minHeight","padding","verticalAlign","rounded","theme","useFondueTheme","contentRef","useRef","useSyncRefs","handleOpenAutoFocus","event","dialogBody","_a","firstFocusable","ThemeProvider","addShowFocusRing","DialogHeader","showBorder","showCloseButton","closeProps","jsxs","IconCross","DialogFooter","DialogBody","DialogSideContent","DialogClose","DialogTitle","DialogDescription","Dialog","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components9.js","sources":["../src/components/Dialog/Dialog.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixDialog from '@radix-ui/react-dialog';\nimport {\n    createContext,\n    forwardRef,\n    useContext,\n    useMemo,\n    useRef,\n    type CSSProperties,\n    type ForwardedRef,\n    type ReactNode,\n} from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { useSyncRefs } from '#/hooks/useSyncRefs';\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/dialog.module.scss';\n\nexport type DialogRootProps = {\n    /**\n     * Disable interaction with the rest of the page\n     * @default false\n     */\n    modal?: boolean;\n    /**\n     * The controlled `open` state of the dialog\n     * @default false\n     */\n    open?: boolean;\n    /**\n     * Event handler called when the `open` state changes\n     */\n    onOpenChange?: (open: boolean) => void;\n    children?: ReactNode;\n};\n\nexport type DialogContentProps = {\n    /**\n     * Add rounded corners to the dialog\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * Define the padding of the dialog\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * The vertical alignment of the divider\n     * @default \"center\"\n     */\n    verticalAlign?: 'top' | 'center';\n\n    /**\n     * Define a maximum width for the dialog\n     * @default \"800px\"\n     */\n    maxWidth?: string;\n    /**\n     * Define a minimum width for the dialog\n     * @default \"400px\"\n     */\n    minWidth?: string;\n    /**\n     * Define a minimum height for the dialog\n     * @default \"200px\"\n     */\n    minHeight?: string;\n    /**\n     * Show a dark underlay behind the dialog\n     * @default false\n     */\n    showUnderlay?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default true\n     */\n    asChild?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogHeaderProps = {\n    /**\n     * Define the padding for the dialog header\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Show a border at the bottom of the header\n     * @default true\n     */\n    showBorder?: boolean;\n    /**\n     * Show a close button in the header\n     * @default true\n     */\n    showCloseButton?: boolean;\n    closeProps?: CommonAriaProps;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogFooterProps = {\n    /**\n     * Define the padding for the dialog footer\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Show a border at the top of the footer\n     * @default true\n     */\n    showBorder?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogBodyProps = {\n    /**\n     * Define the padding for the dialog body\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogSideContentProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogCloseProps = { children?: ReactNode };\n\nexport type DialogAnnouncementProps = { children?: ReactNode; asChild?: boolean };\n\ntype DialogContextType = {\n    isModal: boolean;\n};\n\nconst DialogContext = createContext<DialogContextType>({ isModal: false });\nDialogContext.displayName = 'DialogContext';\n\nexport const DialogRoot = ({ children, modal, onOpenChange, open }: DialogRootProps) => {\n    const value = useMemo(() => ({ isModal: modal ?? false }), [modal]);\n\n    return (\n        <DialogContext.Provider value={value}>\n            <RadixDialog.Root open={open} onOpenChange={onOpenChange} modal={modal}>\n                {children}\n            </RadixDialog.Root>\n        </DialogContext.Provider>\n    );\n};\nDialogRoot.displayName = 'Dialog.Root';\n\nexport const DialogTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-dialog-trigger' }: DialogTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDialog.Trigger\n            onMouseDown={addAutoFocusAttribute}\n            data-auto-focus-visible=\"true\"\n            data-auto-focus-trigger\n            data-test-id={dataTestId}\n            asChild={asChild}\n            ref={ref}\n        >\n            {children}\n        </RadixDialog.Trigger>\n    );\n};\nDialogTrigger.displayName = 'Dialog.Trigger';\n\nconst DialogUnderlay = ({ children, showUnderlay }: { children: ReactNode; showUnderlay: boolean }) => {\n    const { isModal } = useContext(DialogContext);\n    if (isModal) {\n        return (\n            <RadixDialog.Overlay data-visible={showUnderlay} className={styles.underlay}>\n                {children}\n            </RadixDialog.Overlay>\n        );\n    }\n    return (\n        <div className={styles.underlay} data-visible={showUnderlay}>\n            {children}\n        </div>\n    );\n};\n\nexport const DialogContent = (\n    {\n        maxWidth = '800px',\n        minWidth = '400px',\n        minHeight = '200px',\n        padding = 'compact',\n        verticalAlign = 'center',\n        'data-test-id': dataTestId = 'fondue-dialog-content',\n        showUnderlay = false,\n        rounded = true,\n        children,\n    }: DialogContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const theme = useFondueTheme();\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    useSyncRefs<HTMLDivElement>(contentRef, ref);\n\n    const handleOpenAutoFocus = (event: Event) => {\n        event.preventDefault();\n\n        const dialogBody = contentRef.current?.querySelector('[data-dialog-layout-component=\"body\"]');\n\n        const firstFocusable = dialogBody?.querySelector(\n            'button:not([data-tooltip-trigger=\"true\"]), [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n        );\n\n        if (firstFocusable instanceof HTMLElement) {\n            firstFocusable.focus();\n        }\n    };\n\n    return (\n        <RadixDialog.Portal>\n            <ThemeProvider theme={theme}>\n                <DialogUnderlay showUnderlay={showUnderlay}>\n                    <RadixDialog.Content\n                        style={\n                            {\n                                '--dialog-max-width': maxWidth,\n                                '--dialog-min-width': minWidth,\n                                '--dialog-min-height': minHeight,\n                            } as CSSProperties\n                        }\n                        ref={contentRef}\n                        className={styles.content}\n                        onFocus={addShowFocusRing}\n                        onOpenAutoFocus={handleOpenAutoFocus}\n                        data-dialog-padding={padding}\n                        data-dialog-rounded={rounded}\n                        data-test-id={dataTestId}\n                        data-dialog-vertical-align={verticalAlign}\n                    >\n                        {children}\n                    </RadixDialog.Content>\n                </DialogUnderlay>\n            </ThemeProvider>\n        </RadixDialog.Portal>\n    );\n};\nDialogContent.displayName = 'Dialog.Content';\n\nexport const DialogHeader = (\n    {\n        padding,\n        showBorder = true,\n        showCloseButton = true,\n        closeProps,\n        children,\n        'data-test-id': dataTestId = 'fondue-dialog-header',\n    }: DialogHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.header}\n            data-dialog-header-padding={padding}\n            data-show-border={showBorder}\n            data-dialog-layout-component=\"header\"\n        >\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixDialog.Close\n                    role=\"button\"\n                    data-test-id={`${dataTestId}-close`}\n                    className=\"tw-cursor-pointer\"\n                    aria-label=\"Close\"\n                    {...closeProps}\n                >\n                    <IconCross size={20} />\n                </RadixDialog.Close>\n            )}\n        </div>\n    );\n};\nDialogHeader.displayName = 'Dialog.Header';\n\nexport const DialogFooter = (\n    { padding, showBorder = true, children, 'data-test-id': dataTestId = 'fondue-dialog-footer' }: DialogFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.footer}\n            data-dialog-footer-padding={padding}\n            data-show-border={showBorder}\n            data-dialog-layout-component=\"footer\"\n        >\n            {children}\n        </div>\n    );\n};\nDialogFooter.displayName = 'Dialog.Footer';\n\nexport const DialogBody = (\n    { padding, children, 'data-test-id': dataTestId = 'fondue-dialog-body' }: DialogBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.body}\n            data-dialog-body-padding={padding}\n            data-dialog-layout-component=\"body\"\n        >\n            {children}\n        </div>\n    );\n};\nDialogBody.displayName = 'Dialog.Body';\n\nexport const DialogSideContent = (\n    { children, 'data-test-id': dataTestId = 'fondue-dialog-side-content' }: DialogSideContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.sideContent} data-dialog-layout-component>\n            {children}\n        </div>\n    );\n};\nDialogSideContent.displayName = 'Dialog.SideContent';\n\nexport const DialogClose = ({ children }: DialogCloseProps) => {\n    return <RadixDialog.Close asChild>{children}</RadixDialog.Close>;\n};\nDialogClose.displayName = 'Dialog.Close';\n\nexport const DialogTitle = ({ children, asChild }: DialogAnnouncementProps) => {\n    return <RadixDialog.Title asChild={asChild}>{children}</RadixDialog.Title>;\n};\nDialogTitle.displayName = 'Dialog.Title';\n\nexport const DialogDescription = ({ children, asChild }: DialogAnnouncementProps) => {\n    return <RadixDialog.Description asChild={asChild}>{children}</RadixDialog.Description>;\n};\nDialogDescription.displayName = 'Dialog.Description';\n\nexport const Dialog = {\n    Root: DialogRoot,\n    Title: DialogTitle,\n    Description: DialogDescription,\n    Close: DialogClose,\n    Trigger: forwardRef<HTMLButtonElement, DialogTriggerProps>(DialogTrigger),\n    Content: forwardRef<HTMLDivElement, DialogContentProps>(DialogContent),\n    Header: forwardRef<HTMLDivElement, DialogHeaderProps>(DialogHeader),\n    Footer: forwardRef<HTMLDivElement, DialogFooterProps>(DialogFooter),\n    Body: forwardRef<HTMLDivElement, DialogBodyProps>(DialogBody),\n    SideContent: forwardRef<HTMLDivElement, DialogSideContentProps>(DialogSideContent),\n};\n"],"names":["DialogContext","createContext","DialogRoot","children","modal","onOpenChange","open","value","useMemo","jsx","RadixDialog","DialogTrigger","asChild","dataTestId","ref","addAutoFocusAttribute","DialogUnderlay","showUnderlay","isModal","useContext","styles","DialogContent","maxWidth","minWidth","minHeight","padding","verticalAlign","rounded","theme","useFondueTheme","contentRef","useRef","useSyncRefs","handleOpenAutoFocus","event","dialogBody","_a","firstFocusable","ThemeProvider","addShowFocusRing","DialogHeader","showBorder","showCloseButton","closeProps","jsxs","IconCross","DialogFooter","DialogBody","DialogSideContent","DialogClose","DialogTitle","DialogDescription","Dialog","forwardRef"],"mappings":"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"}

package/dist/fondue-components90.js

@@ -1,20 +1,20 @@
-const o = "_root_1t0zi_5", t = "_clearIcon_1t0zi_35", c = "_caret_1t0zi_52", _ = "_colorName_1t0zi_70", n = "_colorIndicator_1t0zi_73", r = "_button_1t0zi_94", a = "_actions_1t0zi_126", s = {
+const o = "_root_x0mxj_5", c = "_clearIcon_x0mxj_35", t = "_caret_x0mxj_52", _ = "_colorName_x0mxj_70", n = "_button_x0mxj_91", r = "_colorIndicator_x0mxj_104", a = "_actions_x0mxj_123", x = {
   root: o,
-  clearIcon: t,
-  caret: c,
+  clearIcon: c,
+  caret: t,
   colorName: _,
-  colorIndicator: n,
-  button: r,
+  button: n,
+  colorIndicator: r,
   actions: a
 };
 export {
   a as actions,
-  r as button,
-  c as caret,
-  t as clearIcon,
-  n as colorIndicator,
+  n as button,
+  t as caret,
+  c as clearIcon,
+  r as colorIndicator,
   _ as colorName,
-  s as default,
+  x as default,
   o as root
 };
 //# sourceMappingURL=fondue-components90.js.map

package/dist/index.d.ts

@@ -4,7 +4,7 @@ import { ChangeEventHandler } from 'react';
 import { CommonAriaAttrs } from '../../utilities/types';
 import { Context } from 'react';
 import { CSSProperties } from 'react';
-import { default as default_2 } from '@frontify/fondue-tokens/themes';
+import { default as default_2 } from '@frontify/fondue-tokens/theme-tokens';
 import { FocusEvent as FocusEvent_2 } from 'react';
 import { FocusEventHandler } from 'react';
 import { FormEvent } from 'react';
@@ -448,7 +448,7 @@ declare type CommonAriaProps = {
 
 export declare const Dialog: {
     Root: {
-        ({ children, ...props }: DialogRootProps): JSX_2.Element;
+        ({ children, modal, onOpenChange, open }: DialogRootProps): JSX_2.Element;
         displayName: string;
     };
     Title: {
@@ -598,7 +598,7 @@ declare type DialogTriggerProps = {
 
 export declare const Divider: ForwardRefExoticComponent<DividerProps & RefAttributes<HTMLDivElement>>;
 
-declare type DividerColor = 'weak' | 'default' | 'strong';
+declare type DividerColor = 'weak' | 'default' | 'strong' | 'x-strong';
 
 declare type DividerDirection = 'horizontal' | 'vertical';
 
@@ -1231,105 +1231,6 @@ declare type LayoutComponentProps = {
     left?: Responsive<SpacingValue>;
 };
 
-export declare const Link: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>;
-
-declare type LinkColor = 'primary' | 'secondary' | 'error' | 'success' | 'warning' | 'highlight';
-
-declare type LinkOnContainerColor = 'secondary' | 'disabled' | 'error' | 'success' | 'warning' | 'highlight';
-
-declare type LinkProps = {
-    children?: ReactNode;
-    /**
-     * The link to navigate to when clicked
-     */
-    href: string;
-    /**
-     * Id of the element
-     */
-    id?: string;
-    /**
-     * Size of the text
-     *
-     * @default 'medium'
-     */
-    size?: LinkSize;
-    /**
-     * Weight of the font
-     *
-     * @default 'regular'
-     */
-    weight?: LinkWeight;
-    /**
-     * Color of the text
-     *
-     * @default 'primary'
-     */
-    color?: LinkColor;
-    /**
-     * The texts color when used within a container
-     *
-     * @description optional color prop that uses the inverse container color when accessibility contrast is needed
-     **/
-    onContainer?: LinkOnContainerColor;
-    /**
-     * Truncate the text if it overflows
-     */
-    truncate?: boolean;
-    /**
-     * Wrap the text if it overflows
-     * @default 'nowrap'
-     */
-    wrap?: LinkWrap;
-    /**
-     * Underline behavior of the link
-     * @default 'auto'
-     */
-    underline?: LinkUnderline;
-    /**
-     * The target attribute for the link
-     * @default '_self'
-     */
-    target?: string;
-    /**
-     * The rel attribute for the link
-     * @default 'noopener noreferrer'
-     */
-    rel?: string;
-    className?: string;
-    onPress?: (event: MouseEvent_2<HTMLAnchorElement>) => void;
-    'data-test-id'?: string;
-    /**
-     * Aria label for the component.
-     */
-    'aria-label'?: string;
-    /**
-     * Aria labelled by for the component.
-     */
-    'aria-labelledby'?: string;
-    /**
-     * Aria described by for the component.
-     */
-    'aria-describedby'?: string;
-    /**
-     * Aria details for extend description of the component.
-     */
-    'aria-details'?: string;
-    /**
-     * Disable the link
-     *
-     * @default false
-     */
-    disabled?: boolean;
-};
-
-declare type LinkSize = 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
-
-declare type LinkUnderline = 'auto' | 'always' | 'hover' | 'none';
-
-declare type LinkWeight = 'regular' | 'medium' | 'bold';
-
-declare type LinkWrap = 'wrap' | 'nowrap';
-
 export declare const LoadingBar: ForwardRefExoticComponent<LoadingBarProps & RefAttributes<HTMLDivElement>>;
 
 declare type LoadingBarProps = {
@@ -1414,20 +1315,6 @@ declare type RgbaColor_2 = {
     name?: string;
 };
 
-export declare const RouterProvider: ({ children, navigate, useHref }: RouterProviderProps) => JSX_2.Element;
-
-export declare type RouterProviderProps = {
-    children: ReactNode;
-    /**
-     * Function to navigate to a specific path
-     */
-    navigate: (path: string) => void;
-    /**
-     * Function to resolves a URL against the current location.
-     */
-    useHref: (path: string) => string;
-};
-
 declare const screens: {
     xs: string;
     sm: string;
@@ -2328,7 +2215,7 @@ declare type TextSize = 'x-small' | 'small' | 'medium' | 'large';
 
 declare type TextWeight = 'default' | 'strong' | 'x-strong';
 
-export declare const ThemeContext: Context<"base" | "dark" | "light">;
+export declare const ThemeContext: Context<"dark" | "light">;
 
 export declare const ThemeProvider: ({ children, theme, asChild }: ThemeProviderProps) => JSX_2.Element;
 
@@ -2348,7 +2235,7 @@ declare type ThemeProviderProps = {
 
 export declare const Tooltip: {
     Root: {
-        ({ children, enterDelay, open, onOpenChange, ...props }: TooltipRootProps): JSX_2.Element;
+        ({ children, enterDelay, open, onOpenChange }: TooltipRootProps): JSX_2.Element;
         displayName: string;
     };
     Trigger: ForwardRefExoticComponent<TooltipTriggerProps & RefAttributes<HTMLButtonElement>>;
@@ -2397,7 +2284,7 @@ declare type TooltipTriggerProps = {
     'data-test-id'?: string;
 };
 
-export declare const useFondueTheme: () => "base" | "dark" | "light";
+export declare const useFondueTheme: () => "dark" | "light";
 
 export { }