@frontify/fondue-components 23.0.0 → 24.0.0-rc.0

package/dist/fondue-components13.js

@@ -1,115 +1,116 @@
-import { jsx as a, jsxs as m } from "react/jsx-runtime";
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
 import { IconCross as x } from "@frontify/fondue-icons";
-import * as u from "@radix-ui/react-popover";
-import { forwardRef as l } from "react";
-import { useTranslation as I } from "./fondue-components34.js";
-import { addAutoFocusAttribute as _, addShowFocusRing as O } from "./fondue-components50.js";
-import { useFondueTheme as S, ThemeProvider as j } from "./fondue-components31.js";
-import d from "./fondue-components57.js";
-const f = ({ children: t, ...o }) => /* @__PURE__ */ a(u.Root, { ...o, children: t });
+import * as l from "@radix-ui/react-popover";
+import { forwardRef as i } from "react";
+import { useTranslation as I } from "./fondue-components36.js";
+import { addAutoFocusAttribute as _, addShowFocusRing as B } from "./fondue-components52.js";
+import { Button as O } from "./fondue-components6.js";
+import { useFondueTheme as S, ThemeProvider as j } from "./fondue-components33.js";
+import u from "./fondue-components59.js";
+const f = ({ children: t, ...o }) => /* @__PURE__ */ e(l.Root, { ...o, children: t });
 f.displayName = "Flyout.Root";
-const y = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-trigger", ...r }, s) => /* @__PURE__ */ a(
-  u.Trigger,
+const y = ({ asChild: t = !0, children: o, "data-test-id": a = "fondue-flyout-trigger", ...r }, d) => /* @__PURE__ */ e(
+  l.Trigger,
   {
     onMouseDown: _,
     "data-auto-focus-visible": "true",
     "data-auto-focus-trigger": !0,
-    "data-test-id": e,
+    "data-test-id": a,
     asChild: t,
-    ref: s,
+    ref: d,
     ...r,
     children: o
   }
 );
 y.displayName = "Flyout.Trigger";
-const B = {
+const D = {
   compact: 8,
   comfortable: 12,
   spacious: 16
-}, D = {
+}, H = {
   compact: 8,
   spacious: 24
 }, p = ({
   align: t = "start",
   maxWidth: o = "360px",
-  padding: e = "compact",
+  padding: a = "compact",
   rounded: r = "medium",
-  width: s = "fit-content",
+  width: d = "fit-content",
   shadow: n = "medium",
   side: N,
   triggerOffset: v = "compact",
-  viewportCollisionPadding: P = "compact",
-  "data-test-id": b = "fondue-flyout-content",
-  children: C,
-  ...R
-}, A) => {
-  const { theme: T, dir: c } = S(), w = (i) => !i || c === "ltr" ? i : i === "left" ? "right" : i === "right" ? "left" : i;
-  return /* @__PURE__ */ a(u.Portal, { children: /* @__PURE__ */ m(j, { theme: T, dir: c, children: [
-    /* @__PURE__ */ a("div", { "data-test-id": "fondue-flyout-overlay", className: d.overlay }),
-    /* @__PURE__ */ a(
-      u.Content,
+  viewportCollisionPadding: C = "compact",
+  "data-test-id": P = "fondue-flyout-content",
+  children: R,
+  ...b
+}, w) => {
+  const { theme: A, dir: c } = S(), T = (s) => !s || c === "ltr" ? s : s === "left" ? "right" : s === "right" ? "left" : s;
+  return /* @__PURE__ */ e(l.Portal, { children: /* @__PURE__ */ m(j, { theme: A, dir: c, children: [
+    /* @__PURE__ */ e("div", { "data-test-id": "fondue-flyout-overlay", className: u.overlay }),
+    /* @__PURE__ */ e(
+      l.Content,
       {
         style: {
           "--flyout-max-width": o,
-          "--flyout-width": s
+          "--flyout-width": d
         },
-        ref: A,
+        ref: w,
         align: t,
-        collisionPadding: D[P],
-        sideOffset: B[v],
-        side: w(N),
-        className: d.root,
-        "data-flyout-spacing": e,
+        collisionPadding: H[C],
+        sideOffset: D[v],
+        side: T(N),
+        className: u.root,
+        "data-flyout-spacing": a,
         "data-rounded": r,
         "data-shadow": n,
-        "data-test-id": b,
-        onFocus: O,
-        ...R,
-        children: C
+        "data-test-id": P,
+        onFocus: B,
+        ...b,
+        children: R
       }
     )
   ] }) });
 };
 p.displayName = "Flyout.Content";
-const F = ({ showCloseButton: t, children: o, "data-test-id": e = "fondue-flyout-header", closeProps: r }, s) => {
+const F = ({ showCloseButton: t, children: o, "data-test-id": a = "fondue-flyout-header", closeProps: r }, d) => {
   const { t: n } = I();
-  return /* @__PURE__ */ m("div", { "data-test-id": e, ref: s, className: d.header, children: [
-    /* @__PURE__ */ a("div", { children: o }),
-    t && /* @__PURE__ */ a(
-      u.Close,
+  return /* @__PURE__ */ m("div", { "data-test-id": a, ref: d, className: u.header, children: [
+    /* @__PURE__ */ e("div", { children: o }),
+    t && /* @__PURE__ */ e(l.Close, { asChild: !0, ...r, children: /* @__PURE__ */ e(
+      O,
       {
-        role: "button",
-        "data-test-id": `${e}-close`,
-        className: d.close,
+        size: "small",
+        aspect: "square",
+        emphasis: "weak",
         "aria-label": n("Flyout_close"),
-        ...r,
-        children: /* @__PURE__ */ a(x, { size: 20 })
+        "data-test-id": `${a}-close`,
+        children: /* @__PURE__ */ e(x, { size: 20 })
       }
-    )
+    ) })
   ] });
 };
 F.displayName = "Flyout.Header";
-const g = ({ children: t, "data-test-id": o = "fondue-flyout-footer" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: d.footer, children: t });
+const g = ({ children: t, "data-test-id": o = "fondue-flyout-footer" }, a) => /* @__PURE__ */ e("div", { "data-test-id": o, ref: a, className: u.footer, children: t });
 g.displayName = "Flyout.Footer";
-const h = ({ children: t, "data-test-id": o = "fondue-flyout-body", scrollable: e = !1 }, r) => /* @__PURE__ */ a(
+const h = ({ children: t, "data-test-id": o = "fondue-flyout-body", scrollable: a = !1 }, r) => /* @__PURE__ */ e(
   "div",
   {
     "data-test-id": o,
     ref: r,
     "data-flyout-spacing": "compact",
-    "data-scrollable": e,
-    className: d.body,
+    "data-scrollable": a,
+    className: u.body,
     children: t
   }
 );
 h.displayName = "Flyout.Body";
 const W = {
   Root: f,
-  Trigger: l(y),
-  Content: l(p),
-  Header: l(F),
-  Footer: l(g),
-  Body: l(h)
+  Trigger: i(y),
+  Content: i(p),
+  Header: i(F),
+  Footer: i(g),
+  Body: i(h)
 };
 export {
   W as Flyout,

package/dist/fondue-components13.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components13.js","sources":["../src/components/Flyout/Flyout.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { forwardRef, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { useTranslation } from '#/hooks/useTranslation';\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/flyout.module.scss';\n\nexport type FlyoutRootProps = {\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 flyout\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 const FlyoutRoot = ({ children, ...props }: FlyoutRootProps) => {\n    return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\nFlyoutRoot.displayName = 'Flyout.Root';\n\nexport type FlyoutTriggerProps = {\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 const FlyoutTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-flyout-trigger', ...props }: FlyoutTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixPopover.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        </RadixPopover.Trigger>\n    );\n};\nFlyoutTrigger.displayName = 'Flyout.Trigger';\n\ntype FlyoutSpacing = 'compact' | 'comfortable' | 'spacious';\ntype FlyoutViewportCollisionPadding = 'compact' | 'spacious';\nexport type FlyoutContentProps = {\n    /**\n     * Add a shadow to the flyout\n     * @default \"medium\"\n     */\n    shadow?: 'none' | 'medium' | 'large';\n    /**\n     * Add rounded corners to the flyout\n     * @default \"medium\"\n     */\n    rounded?: 'none' | 'medium' | 'large';\n    /**\n     * Define the prefered side of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    /**\n     * Define the prefered alignment of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Define the padding of the flyout\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Define the fixed width of the flyout\n     * @default \"fit-content\"\n     */\n    width?: string;\n    /**\n     * Defines the spacing between the dropdown and its trigger.\n     * @default 'compact'\n     */\n    triggerOffset?: FlyoutSpacing;\n    /**\n     * Define the maximum width of the flyout\n     * @default \"360px\"\n     */\n    maxWidth?: string;\n    /**\n     * Define the minimum distance between the flyout and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: FlyoutViewportCollisionPadding;\n    /**\n     * Event handler called when auto-focusing on open\n     */\n    onOpenAutoFocus?: (event: Event) => void;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nconst SPACING_MAP: Record<FlyoutSpacing, number> = {\n    compact: 8,\n    comfortable: 12,\n    spacious: 16,\n};\n\nconst VIEWPORT_COLLISION_PADDING_MAP: Record<FlyoutViewportCollisionPadding, number> = {\n    compact: 8,\n    spacious: 24,\n};\n\nexport const FlyoutContent = (\n    {\n        align = 'start',\n        maxWidth = '360px',\n        padding = 'compact',\n        rounded = 'medium',\n        width = 'fit-content',\n        shadow = 'medium',\n        side,\n        triggerOffset = 'compact',\n        viewportCollisionPadding = 'compact',\n        'data-test-id': dataTestId = 'fondue-flyout-content',\n        children,\n        ...props\n    }: FlyoutContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { theme, dir } = useFondueTheme();\n\n    const getAdjustedSide = (side?: 'top' | 'right' | 'bottom' | 'left') => {\n        if (!side || dir === 'ltr') {\n            return side;\n        }\n\n        if (side === 'left') {\n            return 'right';\n        }\n        if (side === 'right') {\n            return 'left';\n        }\n\n        return side;\n    };\n\n    return (\n        <RadixPopover.Portal>\n            <ThemeProvider theme={theme} dir={dir}>\n                <div data-test-id=\"fondue-flyout-overlay\" className={styles.overlay} />\n                <RadixPopover.Content\n                    style={\n                        {\n                            '--flyout-max-width': maxWidth,\n                            '--flyout-width': width,\n                        } as CSSProperties\n                    }\n                    ref={ref}\n                    align={align}\n                    collisionPadding={VIEWPORT_COLLISION_PADDING_MAP[viewportCollisionPadding]}\n                    sideOffset={SPACING_MAP[triggerOffset]}\n                    side={getAdjustedSide(side)}\n                    className={styles.root}\n                    data-flyout-spacing={padding}\n                    data-rounded={rounded}\n                    data-shadow={shadow}\n                    data-test-id={dataTestId}\n                    onFocus={addShowFocusRing}\n                    {...props}\n                >\n                    {children}\n                </RadixPopover.Content>\n            </ThemeProvider>\n        </RadixPopover.Portal>\n    );\n};\nFlyoutContent.displayName = 'Flyout.Content';\n\nexport type FlyoutHeaderProps = {\n    /**\n     * Show a close button in the header\n     * @default false\n     */\n    showCloseButton?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n    closeProps?: CommonAriaProps;\n};\n\nexport const FlyoutHeader = (\n    { showCloseButton, children, 'data-test-id': dataTestId = 'fondue-flyout-header', closeProps }: FlyoutHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { t } = useTranslation();\n\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.header}>\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixPopover.Close\n                    role=\"button\"\n                    data-test-id={`${dataTestId}-close`}\n                    className={styles.close}\n                    aria-label={t('Flyout_close')}\n                    {...closeProps}\n                >\n                    <IconCross size={20} />\n                </RadixPopover.Close>\n            )}\n        </div>\n    );\n};\nFlyoutHeader.displayName = 'Flyout.Header';\n\nexport type FlyoutFooterProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutFooter = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-footer' }: FlyoutFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.footer}>\n            {children}\n        </div>\n    );\n};\nFlyoutFooter.displayName = 'Flyout.Footer';\n\nexport type FlyoutBodyProps = {\n    children?: ReactNode;\n    'data-test-id'?: string;\n    /**\n     * Allow the body to scroll if the max height of the flyout is reached\n     * @default false\n     */\n    scrollable?: boolean;\n};\n\nexport const FlyoutBody = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-body', scrollable = false }: FlyoutBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            data-flyout-spacing=\"compact\"\n            data-scrollable={scrollable}\n            className={styles.body}\n        >\n            {children}\n        </div>\n    );\n};\nFlyoutBody.displayName = 'Flyout.Body';\n\nexport const Flyout = {\n    Root: FlyoutRoot,\n    Trigger: forwardRef<HTMLButtonElement, FlyoutTriggerProps>(FlyoutTrigger),\n    Content: forwardRef<HTMLDivElement, FlyoutContentProps>(FlyoutContent),\n    Header: forwardRef<HTMLDivElement, FlyoutHeaderProps>(FlyoutHeader),\n    Footer: forwardRef<HTMLDivElement, FlyoutFooterProps>(FlyoutFooter),\n    Body: forwardRef<HTMLDivElement, FlyoutBodyProps>(FlyoutBody),\n};\n"],"names":["FlyoutRoot","children","props","RadixPopover","FlyoutTrigger","asChild","dataTestId","ref","jsx","addAutoFocusAttribute","SPACING_MAP","VIEWPORT_COLLISION_PADDING_MAP","FlyoutContent","align","maxWidth","padding","rounded","width","shadow","side","triggerOffset","viewportCollisionPadding","theme","dir","useFondueTheme","getAdjustedSide","jsxs","ThemeProvider","styles","addShowFocusRing","FlyoutHeader","showCloseButton","closeProps","t","useTranslation","IconCross","FlyoutFooter","FlyoutBody","scrollable","Flyout","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components13.js","sources":["../src/components/Flyout/Flyout.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { forwardRef, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { useTranslation } from '#/hooks/useTranslation';\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\n\nimport { Button } from '../Button/Button';\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/flyout.module.scss';\n\nexport type FlyoutRootProps = {\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 flyout\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 const FlyoutRoot = ({ children, ...props }: FlyoutRootProps) => {\n    return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\nFlyoutRoot.displayName = 'Flyout.Root';\n\nexport type FlyoutTriggerProps = {\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 const FlyoutTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-flyout-trigger', ...props }: FlyoutTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixPopover.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        </RadixPopover.Trigger>\n    );\n};\nFlyoutTrigger.displayName = 'Flyout.Trigger';\n\ntype FlyoutSpacing = 'compact' | 'comfortable' | 'spacious';\ntype FlyoutViewportCollisionPadding = 'compact' | 'spacious';\nexport type FlyoutContentProps = {\n    /**\n     * Add a shadow to the flyout\n     * @default \"medium\"\n     */\n    shadow?: 'none' | 'medium' | 'large';\n    /**\n     * Add rounded corners to the flyout\n     * @default \"medium\"\n     */\n    rounded?: 'none' | 'medium' | 'large';\n    /**\n     * Define the prefered side of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    /**\n     * Define the prefered alignment of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Define the padding of the flyout\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Define the fixed width of the flyout\n     * @default \"fit-content\"\n     */\n    width?: string;\n    /**\n     * Defines the spacing between the dropdown and its trigger.\n     * @default 'compact'\n     */\n    triggerOffset?: FlyoutSpacing;\n    /**\n     * Define the maximum width of the flyout\n     * @default \"360px\"\n     */\n    maxWidth?: string;\n    /**\n     * Define the minimum distance between the flyout and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: FlyoutViewportCollisionPadding;\n    /**\n     * Event handler called when auto-focusing on open\n     */\n    onOpenAutoFocus?: (event: Event) => void;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nconst SPACING_MAP: Record<FlyoutSpacing, number> = {\n    compact: 8,\n    comfortable: 12,\n    spacious: 16,\n};\n\nconst VIEWPORT_COLLISION_PADDING_MAP: Record<FlyoutViewportCollisionPadding, number> = {\n    compact: 8,\n    spacious: 24,\n};\n\nexport const FlyoutContent = (\n    {\n        align = 'start',\n        maxWidth = '360px',\n        padding = 'compact',\n        rounded = 'medium',\n        width = 'fit-content',\n        shadow = 'medium',\n        side,\n        triggerOffset = 'compact',\n        viewportCollisionPadding = 'compact',\n        'data-test-id': dataTestId = 'fondue-flyout-content',\n        children,\n        ...props\n    }: FlyoutContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { theme, dir } = useFondueTheme();\n\n    const getAdjustedSide = (side?: 'top' | 'right' | 'bottom' | 'left') => {\n        if (!side || dir === 'ltr') {\n            return side;\n        }\n\n        if (side === 'left') {\n            return 'right';\n        }\n        if (side === 'right') {\n            return 'left';\n        }\n\n        return side;\n    };\n\n    return (\n        <RadixPopover.Portal>\n            <ThemeProvider theme={theme} dir={dir}>\n                <div data-test-id=\"fondue-flyout-overlay\" className={styles.overlay} />\n                <RadixPopover.Content\n                    style={\n                        {\n                            '--flyout-max-width': maxWidth,\n                            '--flyout-width': width,\n                        } as CSSProperties\n                    }\n                    ref={ref}\n                    align={align}\n                    collisionPadding={VIEWPORT_COLLISION_PADDING_MAP[viewportCollisionPadding]}\n                    sideOffset={SPACING_MAP[triggerOffset]}\n                    side={getAdjustedSide(side)}\n                    className={styles.root}\n                    data-flyout-spacing={padding}\n                    data-rounded={rounded}\n                    data-shadow={shadow}\n                    data-test-id={dataTestId}\n                    onFocus={addShowFocusRing}\n                    {...props}\n                >\n                    {children}\n                </RadixPopover.Content>\n            </ThemeProvider>\n        </RadixPopover.Portal>\n    );\n};\nFlyoutContent.displayName = 'Flyout.Content';\n\nexport type FlyoutHeaderProps = {\n    /**\n     * Show a close button in the header\n     * @default false\n     */\n    showCloseButton?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n    closeProps?: CommonAriaProps;\n};\n\nexport const FlyoutHeader = (\n    { showCloseButton, children, 'data-test-id': dataTestId = 'fondue-flyout-header', closeProps }: FlyoutHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { t } = useTranslation();\n\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.header}>\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixPopover.Close asChild {...closeProps}>\n                    <Button\n                        size=\"small\"\n                        aspect=\"square\"\n                        emphasis=\"weak\"\n                        aria-label={t('Flyout_close')}\n                        data-test-id={`${dataTestId}-close`}\n                    >\n                        <IconCross size={20} />\n                    </Button>\n                </RadixPopover.Close>\n            )}\n        </div>\n    );\n};\nFlyoutHeader.displayName = 'Flyout.Header';\n\nexport type FlyoutFooterProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutFooter = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-footer' }: FlyoutFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.footer}>\n            {children}\n        </div>\n    );\n};\nFlyoutFooter.displayName = 'Flyout.Footer';\n\nexport type FlyoutBodyProps = {\n    children?: ReactNode;\n    'data-test-id'?: string;\n    /**\n     * Allow the body to scroll if the max height of the flyout is reached\n     * @default false\n     */\n    scrollable?: boolean;\n};\n\nexport const FlyoutBody = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-body', scrollable = false }: FlyoutBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            data-flyout-spacing=\"compact\"\n            data-scrollable={scrollable}\n            className={styles.body}\n        >\n            {children}\n        </div>\n    );\n};\nFlyoutBody.displayName = 'Flyout.Body';\n\nexport const Flyout = {\n    Root: FlyoutRoot,\n    Trigger: forwardRef<HTMLButtonElement, FlyoutTriggerProps>(FlyoutTrigger),\n    Content: forwardRef<HTMLDivElement, FlyoutContentProps>(FlyoutContent),\n    Header: forwardRef<HTMLDivElement, FlyoutHeaderProps>(FlyoutHeader),\n    Footer: forwardRef<HTMLDivElement, FlyoutFooterProps>(FlyoutFooter),\n    Body: forwardRef<HTMLDivElement, FlyoutBodyProps>(FlyoutBody),\n};\n"],"names":["FlyoutRoot","children","props","RadixPopover","FlyoutTrigger","asChild","dataTestId","ref","jsx","addAutoFocusAttribute","SPACING_MAP","VIEWPORT_COLLISION_PADDING_MAP","FlyoutContent","align","maxWidth","padding","rounded","width","shadow","side","triggerOffset","viewportCollisionPadding","theme","dir","useFondueTheme","getAdjustedSide","jsxs","ThemeProvider","styles","addShowFocusRing","FlyoutHeader","showCloseButton","closeProps","t","useTranslation","Button","IconCross","FlyoutFooter","FlyoutBody","scrollable","Flyout","forwardRef"],"mappings":"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"}

package/dist/fondue-components14.js

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

package/dist/fondue-components15.js

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

package/dist/fondue-components16.js

@@ -1,8 +1,8 @@
 import { jsxs as m, jsx as s } from "react/jsx-runtime";
 import * as f from "@radix-ui/react-label";
 import { forwardRef as b, useRef as p, useLayoutEffect as x } from "react";
-import { cn as A } from "./fondue-components39.js";
-import r from "./fondue-components60.js";
+import { cn as A } from "./fondue-components41.js";
+import r from "./fondue-components62.js";
 const g = ({ className: l, "data-test-id": d = "fondue-label", children: o, variant: c = "default", ...i }, u) => {
   const n = p(null);
   return x(() => {

package/dist/fondue-components17.js

@@ -1,42 +1,62 @@
-import { jsx as i } from "react/jsx-runtime";
-import * as t from "@radix-ui/react-progress";
-import { forwardRef as m } from "react";
-import { loadingBarContainerStyles as g, loadingBarStyles as f } from "./fondue-components61.js";
-const p = m(
+import { jsx as C } from "react/jsx-runtime";
+import { forwardRef as D, useCallback as H } from "react";
+import { cn as L } from "./fondue-components41.js";
+import { useFondueRouter as N } from "./fondue-components20.js";
+import o from "./fondue-components63.js";
+const R = D(
   ({
-    value: a,
-    max: r = 100,
-    rounded: d = !0,
-    variant: o = "default",
-    size: e = "medium",
-    "data-test-id": n = "fondue-loading-bar",
-    ...l
-  }, s) => /* @__PURE__ */ i(
-    t.Root,
-    {
-      ref: s,
-      "data-test-id": n,
-      className: g({ rounded: d, size: e, variant: o }),
-      "aria-busy": a !== r,
-      value: a,
-      max: r,
-      style: {
-        "--loading-bar-value": a,
-        "--loading-bar-max": r,
-        "--loading-bar-proportion": "calc(var(--loading-bar-value) / var(--loading-bar-max))"
-      },
-      ...l,
-      children: /* @__PURE__ */ i(
-        t.Indicator,
-        {
-          className: f({ variant: o, indeterminateState: a === null })
+    id: c,
+    className: l,
+    children: u,
+    size: n = "medium",
+    weight: f = "regular",
+    truncate: p = !1,
+    wrap: d = "nowrap",
+    underline: $ = "auto",
+    color: k = "primary",
+    href: t,
+    onContainer: i,
+    onPress: a,
+    disabled: r = !1,
+    ...s
+  }, v) => {
+    const { navigate: m, useHref: w } = N(), g = w(t), x = H(
+      (e) => {
+        if (r) {
+          e.preventDefault();
+          return;
         }
-      )
-    }
-  )
+        a == null || a(e), t && (e.preventDefault(), m(t));
+      },
+      [t, m, a, r]
+    ), y = r ? o.disabled : o[i ? `color-on-container-${i}` : `color-${k}`];
+    return /* @__PURE__ */ C(
+      "a",
+      {
+        id: c,
+        className: L([
+          o.root,
+          o[`size-${n}`],
+          o[`weight-${f}`],
+          o[`wrap-${d}`],
+          o[`underline-${$}`],
+          p && o.truncate,
+          y,
+          l
+        ]),
+        ref: v,
+        href: r ? void 0 : g,
+        onClick: x,
+        "aria-disabled": r || void 0,
+        tabIndex: r ? -1 : void 0,
+        ...s,
+        children: u
+      }
+    );
+  }
 );
-p.displayName = "LoadingBar";
+R.displayName = "Link";
 export {
-  p as LoadingBar
+  R as Link
 };
 //# sourceMappingURL=fondue-components17.js.map

package/dist/fondue-components17.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components17.js","sources":["../src/components/LoadingBar/LoadingBar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as ProgressRadixPrimitive from '@radix-ui/react-progress';\nimport { forwardRef, type CSSProperties, type ElementRef, type ForwardedRef } from 'react';\n\nimport { loadingBarContainerStyles, loadingBarStyles } from './styles/loadingBarStyles';\n\nexport type LoadingBarProps = {\n    /**\n     * The current value of the loading bar. If `null`, the loading bar will be in an indeterminate state.\n     * @default null\n     */\n    value: number | null;\n    /**\n     * The maximum value of the loading bar\n     * @default 100\n     */\n    max?: number;\n    /**\n     * @default 'fondue-loading-bar'\n     */\n    'data-test-id'?: string;\n    /**\n     * Add rounded corners to the loading bar\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * The style of the loading bar\n     * @default \"default\"\n     */\n    variant?: 'default' | 'positive' | 'negative';\n    /**\n     * The size of the loading bar\n     * @default \"medium\"\n     */\n    size?: 'small' | 'medium' | 'large' | 'x-large';\n    /**\n     * The label of the loading bar for accessibility purposes\n     */\n    getValueLabel?: (value: number, max: number) => string;\n} & ({ 'aria-label': string } | { 'aria-labelledby': string });\n\nexport const LoadingBar = forwardRef<ElementRef<typeof ProgressRadixPrimitive.Root>, LoadingBarProps>(\n    (\n        {\n            value,\n            max = 100,\n            rounded = true,\n            variant = 'default',\n            size = 'medium',\n            'data-test-id': dataTestId = 'fondue-loading-bar',\n            ...props\n        }: LoadingBarProps,\n        ref: ForwardedRef<ElementRef<typeof ProgressRadixPrimitive.Root>>,\n    ) => {\n        return (\n            <ProgressRadixPrimitive.Root\n                ref={ref}\n                data-test-id={dataTestId}\n                className={loadingBarContainerStyles({ rounded, size, variant })}\n                aria-busy={value !== max}\n                value={value}\n                max={max}\n                style={\n                    {\n                        '--loading-bar-value': value,\n                        '--loading-bar-max': max,\n                        '--loading-bar-proportion': 'calc(var(--loading-bar-value) / var(--loading-bar-max))',\n                    } as CSSProperties\n                }\n                {...props}\n            >\n                <ProgressRadixPrimitive.Indicator\n                    className={loadingBarStyles({ variant, indeterminateState: value === null })}\n                />\n            </ProgressRadixPrimitive.Root>\n        );\n    },\n);\nLoadingBar.displayName = 'LoadingBar';\n"],"names":["LoadingBar","forwardRef","value","max","rounded","variant","size","dataTestId","props","ref","jsx","ProgressRadixPrimitive","loadingBarContainerStyles","loadingBarStyles"],"mappings":";;;;AA2CO,MAAMA,IAAaC;AAAA,EACtB,CACI;AAAA,IACI,OAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,IAC7B,GAAGC;AAAA,EAAA,GAEPC,MAGI,gBAAAC;AAAA,IAACC,EAAuB;AAAA,IAAvB;AAAA,MACG,KAAAF;AAAA,MACA,gBAAcF;AAAA,MACd,WAAWK,EAA0B,EAAE,SAAAR,GAAS,MAAAE,GAAM,SAAAD,GAAS;AAAA,MAC/D,aAAWH,MAAUC;AAAA,MACrB,OAAAD;AAAA,MACA,KAAAC;AAAA,MACA,OACI;AAAA,QACI,uBAAuBD;AAAA,QACvB,qBAAqBC;AAAA,QACrB,4BAA4B;AAAA,MAAA;AAAA,MAGnC,GAAGK;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACC,EAAuB;AAAA,QAAvB;AAAA,UACG,WAAWE,EAAiB,EAAE,SAAAR,GAAS,oBAAoBH,MAAU,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAC/E;AAAA,EAAA;AAIhB;AACAF,EAAW,cAAc;"}
+{"version":3,"file":"fondue-components17.js","sources":["../src/components/Link/Link.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ReactNode, type MouseEvent, useCallback } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { useFondueRouter } from '../RouterProvider/RouterProvider';\n\nimport styles from './styles/link.module.scss';\n\ntype LinkSize = 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';\ntype LinkWeight = 'regular' | 'medium' | 'bold';\ntype LinkColor = 'primary' | 'secondary' | 'error' | 'success' | 'warning' | 'highlight';\ntype LinkOnContainerColor = 'secondary' | 'disabled' | 'error' | 'success' | 'warning' | 'highlight';\ntype LinkWrap = 'wrap' | 'nowrap';\ntype LinkUnderline = 'auto' | 'always' | 'hover' | 'none';\n\nexport type LinkProps = {\n    children?: ReactNode;\n    /**\n     * The link to navigate to when clicked\n     */\n    href: string;\n    /**\n     * Id of the element\n     */\n    id?: string;\n    /**\n     * Size of the text\n     *\n     * @default 'medium'\n     */\n    size?: LinkSize;\n    /**\n     * Weight of the font\n     *\n     * @default 'regular'\n     */\n    weight?: LinkWeight;\n    /**\n     * Color of the text\n     *\n     * @default 'primary'\n     */\n    color?: LinkColor;\n    /**\n     * The texts color when used within a container\n     *\n     * @description optional color prop that uses the inverse container color when accessibility contrast is needed\n     **/\n    onContainer?: LinkOnContainerColor;\n    /**\n     * Truncate the text if it overflows\n     */\n    truncate?: boolean;\n    /**\n     * Wrap the text if it overflows\n     * @default 'nowrap'\n     */\n    wrap?: LinkWrap;\n    /**\n     * Underline behavior of the link\n     * @default 'auto'\n     */\n    underline?: LinkUnderline;\n    /**\n     * The target attribute for the link\n     * @default '_self'\n     */\n    target?: string;\n    /**\n     * The rel attribute for the link\n     * @default 'noopener noreferrer'\n     */\n    rel?: string;\n    className?: string;\n    onPress?: (event: MouseEvent<HTMLAnchorElement>) => void;\n    'data-test-id'?: string;\n    /**\n     * Aria label for the component.\n     */\n    'aria-label'?: string;\n    /**\n     * Aria labelled by for the component.\n     */\n    'aria-labelledby'?: string;\n    /**\n     * Aria described by for the component.\n     */\n    'aria-describedby'?: string;\n    /**\n     * Aria details for extend description of the component.\n     */\n    'aria-details'?: string;\n    /**\n     * Disable the link\n     *\n     * @default false\n     */\n    disabled?: boolean;\n};\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n    (\n        {\n            id,\n            className,\n            children,\n            size = 'medium',\n            weight = 'regular',\n            truncate = false,\n            wrap = 'nowrap',\n            underline = 'auto',\n            color = 'primary',\n            href,\n            onContainer,\n            onPress,\n            disabled = false,\n            ...props\n        },\n        ref,\n    ) => {\n        const { navigate, useHref } = useFondueRouter();\n        const resolvedHref = useHref(href);\n\n        const handleClick = useCallback(\n            (event: MouseEvent<HTMLAnchorElement>) => {\n                if (disabled) {\n                    event.preventDefault();\n                    return;\n                }\n                onPress?.(event);\n\n                if (href) {\n                    event.preventDefault();\n                    navigate(href);\n                }\n            },\n            [href, navigate, onPress, disabled],\n        );\n\n        const computedColor = disabled\n            ? styles.disabled\n            : styles[onContainer ? `color-on-container-${onContainer}` : `color-${color}`];\n\n        return (\n            <a\n                id={id}\n                className={cn([\n                    styles.root,\n                    styles[`size-${size}`],\n                    styles[`weight-${weight}`],\n                    styles[`wrap-${wrap}`],\n                    styles[`underline-${underline}`],\n                    truncate && styles.truncate,\n                    computedColor,\n                    className,\n                ])}\n                ref={ref}\n                href={disabled ? undefined : resolvedHref}\n                onClick={handleClick}\n                aria-disabled={disabled || undefined}\n                tabIndex={disabled ? -1 : undefined}\n                {...props}\n            >\n                {children}\n            </a>\n        );\n    },\n);\nLink.displayName = 'Link';\n"],"names":["Link","forwardRef","id","className","children","size","weight","truncate","wrap","underline","color","href","onContainer","onPress","disabled","props","ref","navigate","useHref","useFondueRouter","resolvedHref","handleClick","useCallback","event","computedColor","styles","jsx","cn"],"mappings":";;;;;AAsGO,MAAMA,IAAOC;AAAA,EAChB,CACI;AAAA,IACI,IAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,QAAAC,IAAS;AAAA,IACT,UAAAC,IAAW;AAAA,IACX,MAAAC,IAAO;AAAA,IACP,WAAAC,IAAY;AAAA,IACZ,OAAAC,IAAQ;AAAA,IACR,MAAAC;AAAA,IACA,aAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,GAAGC;AAAA,EAAA,GAEPC,MACC;AACD,UAAM,EAAE,UAAAC,GAAU,SAAAC,EAAA,IAAYC,EAAA,GACxBC,IAAeF,EAAQP,CAAI,GAE3BU,IAAcC;AAAA,MAChB,CAACC,MAAyC;AACtC,YAAIT,GAAU;AACV,UAAAS,EAAM,eAAA;AACN;AAAA,QACJ;AACA,QAAAV,KAAA,QAAAA,EAAUU,IAENZ,MACAY,EAAM,eAAA,GACNN,EAASN,CAAI;AAAA,MAErB;AAAA,MACA,CAACA,GAAMM,GAAUJ,GAASC,CAAQ;AAAA,IAAA,GAGhCU,IAAgBV,IAChBW,EAAO,WACPA,EAAOb,IAAc,sBAAsBA,CAAW,KAAK,SAASF,CAAK,EAAE;AAEjF,WACI,gBAAAgB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,IAAAxB;AAAA,QACA,WAAWyB,EAAG;AAAA,UACVF,EAAO;AAAA,UACPA,EAAO,QAAQpB,CAAI,EAAE;AAAA,UACrBoB,EAAO,UAAUnB,CAAM,EAAE;AAAA,UACzBmB,EAAO,QAAQjB,CAAI,EAAE;AAAA,UACrBiB,EAAO,aAAahB,CAAS,EAAE;AAAA,UAC/BF,KAAYkB,EAAO;AAAA,UACnBD;AAAA,UACArB;AAAA,QAAA,CACH;AAAA,QACD,KAAAa;AAAA,QACA,MAAMF,IAAW,SAAYM;AAAA,QAC7B,SAASC;AAAA,QACT,iBAAeP,KAAY;AAAA,QAC3B,UAAUA,IAAW,KAAK;AAAA,QACzB,GAAGC;AAAA,QAEH,UAAAX;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb;AACJ;AACAJ,EAAK,cAAc;"}

package/dist/fondue-components18.js

@@ -1,24 +1,42 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import d from "./fondue-components62.js";
-const s = i(
+import { jsx as i } from "react/jsx-runtime";
+import * as t from "@radix-ui/react-progress";
+import { forwardRef as m } from "react";
+import { loadingBarContainerStyles as g, loadingBarStyles as f } from "./fondue-components64.js";
+const p = m(
   ({
-    variant: t = "progress",
-    size: a = "medium",
-    "data-test-id": r = "fondue-loading-circle-content"
-  }, o) => /* @__PURE__ */ e(
-    "div",
+    value: a,
+    max: r = 100,
+    rounded: d = !0,
+    variant: o = "default",
+    size: e = "medium",
+    "data-test-id": n = "fondue-loading-bar",
+    ...l
+  }, s) => /* @__PURE__ */ i(
+    t.Root,
     {
-      ref: o,
-      "data-test-id": r,
-      "data-variant": t,
-      "data-size": a,
-      className: d.root
+      ref: s,
+      "data-test-id": n,
+      className: g({ rounded: d, size: e, variant: o }),
+      "aria-busy": a !== r,
+      value: a,
+      max: r,
+      style: {
+        "--loading-bar-value": a,
+        "--loading-bar-max": r,
+        "--loading-bar-proportion": "calc(var(--loading-bar-value) / var(--loading-bar-max))"
+      },
+      ...l,
+      children: /* @__PURE__ */ i(
+        t.Indicator,
+        {
+          className: f({ variant: o, indeterminateState: a === null })
+        }
+      )
     }
   )
 );
-s.displayName = "LoadingCircle";
+p.displayName = "LoadingBar";
 export {
-  s as LoadingCircle
+  p as LoadingBar
 };
 //# sourceMappingURL=fondue-components18.js.map

package/dist/fondue-components18.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components18.js","sources":["../src/components/LoadingCircle/LoadingCircle.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef } from 'react';\n\nimport styles from './styles/loadingCircleStyles.module.scss';\n\nexport type LoadingCircleProps = {\n    /**\n     * The  variant of the loading circle.\n     * @default 'progress'\n     */\n    variant?: 'progress' | 'success' | 'danger';\n    /**\n     * The size of the loading circle\n     * @default \"medium\"\n     */\n    size?: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large';\n    'data-test-id'?: string;\n};\n\nexport const LoadingCircle = forwardRef<HTMLDivElement, LoadingCircleProps>(\n    (\n        {\n            variant = 'progress',\n            size = 'medium',\n            'data-test-id': dataTestId = 'fondue-loading-circle-content',\n        }: LoadingCircleProps,\n        ref: ForwardedRef<HTMLDivElement>,\n    ) => {\n        return (\n            <div\n                ref={ref}\n                data-test-id={dataTestId}\n                data-variant={variant}\n                data-size={size}\n                className={styles.root}\n            ></div>\n        );\n    },\n);\nLoadingCircle.displayName = 'LoadingCircle';\n"],"names":["LoadingCircle","forwardRef","variant","size","dataTestId","ref","jsx","styles"],"mappings":";;;AAoBO,MAAMA,IAAgBC;AAAA,EACzB,CACI;AAAA,IACI,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,EAAA,GAEjCC,MAGI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAD;AAAA,MACA,gBAAcD;AAAA,MACd,gBAAcF;AAAA,MACd,aAAWC;AAAA,MACX,WAAWI,EAAO;AAAA,IAAA;AAAA,EAAA;AAIlC;AACAP,EAAc,cAAc;"}
+{"version":3,"file":"fondue-components18.js","sources":["../src/components/LoadingBar/LoadingBar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as ProgressRadixPrimitive from '@radix-ui/react-progress';\nimport { forwardRef, type CSSProperties, type ElementRef, type ForwardedRef } from 'react';\n\nimport { loadingBarContainerStyles, loadingBarStyles } from './styles/loadingBarStyles';\n\nexport type LoadingBarProps = {\n    /**\n     * The current value of the loading bar. If `null`, the loading bar will be in an indeterminate state.\n     * @default null\n     */\n    value: number | null;\n    /**\n     * The maximum value of the loading bar\n     * @default 100\n     */\n    max?: number;\n    /**\n     * @default 'fondue-loading-bar'\n     */\n    'data-test-id'?: string;\n    /**\n     * Add rounded corners to the loading bar\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * The style of the loading bar\n     * @default \"default\"\n     */\n    variant?: 'default' | 'positive' | 'negative';\n    /**\n     * The size of the loading bar\n     * @default \"medium\"\n     */\n    size?: 'small' | 'medium' | 'large' | 'x-large';\n    /**\n     * The label of the loading bar for accessibility purposes\n     */\n    getValueLabel?: (value: number, max: number) => string;\n} & ({ 'aria-label': string } | { 'aria-labelledby': string });\n\nexport const LoadingBar = forwardRef<ElementRef<typeof ProgressRadixPrimitive.Root>, LoadingBarProps>(\n    (\n        {\n            value,\n            max = 100,\n            rounded = true,\n            variant = 'default',\n            size = 'medium',\n            'data-test-id': dataTestId = 'fondue-loading-bar',\n            ...props\n        }: LoadingBarProps,\n        ref: ForwardedRef<ElementRef<typeof ProgressRadixPrimitive.Root>>,\n    ) => {\n        return (\n            <ProgressRadixPrimitive.Root\n                ref={ref}\n                data-test-id={dataTestId}\n                className={loadingBarContainerStyles({ rounded, size, variant })}\n                aria-busy={value !== max}\n                value={value}\n                max={max}\n                style={\n                    {\n                        '--loading-bar-value': value,\n                        '--loading-bar-max': max,\n                        '--loading-bar-proportion': 'calc(var(--loading-bar-value) / var(--loading-bar-max))',\n                    } as CSSProperties\n                }\n                {...props}\n            >\n                <ProgressRadixPrimitive.Indicator\n                    className={loadingBarStyles({ variant, indeterminateState: value === null })}\n                />\n            </ProgressRadixPrimitive.Root>\n        );\n    },\n);\nLoadingBar.displayName = 'LoadingBar';\n"],"names":["LoadingBar","forwardRef","value","max","rounded","variant","size","dataTestId","props","ref","jsx","ProgressRadixPrimitive","loadingBarContainerStyles","loadingBarStyles"],"mappings":";;;;AA2CO,MAAMA,IAAaC;AAAA,EACtB,CACI;AAAA,IACI,OAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,IAC7B,GAAGC;AAAA,EAAA,GAEPC,MAGI,gBAAAC;AAAA,IAACC,EAAuB;AAAA,IAAvB;AAAA,MACG,KAAAF;AAAA,MACA,gBAAcF;AAAA,MACd,WAAWK,EAA0B,EAAE,SAAAR,GAAS,MAAAE,GAAM,SAAAD,GAAS;AAAA,MAC/D,aAAWH,MAAUC;AAAA,MACrB,OAAAD;AAAA,MACA,KAAAC;AAAA,MACA,OACI;AAAA,QACI,uBAAuBD;AAAA,QACvB,qBAAqBC;AAAA,QACrB,4BAA4B;AAAA,MAAA;AAAA,MAGnC,GAAGK;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACC,EAAuB;AAAA,QAAvB;AAAA,UACG,WAAWE,EAAiB,EAAE,SAAAR,GAAS,oBAAoBH,MAAU,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAC/E;AAAA,EAAA;AAIhB;AACAF,EAAW,cAAc;"}

package/dist/fondue-components19.js

@@ -1,79 +1,24 @@
-import { jsxs as h, jsx as l } from "react/jsx-runtime";
-import * as a from "@radix-ui/react-scroll-area";
-import { forwardRef as p } from "react";
-import { useFondueTheme as u } from "./fondue-components31.js";
-import o from "./fondue-components63.js";
-const f = ({
-  type: t = "hover",
-  maxHeight: e = "100%",
-  maxWidth: s = "100%",
-  showShadow: c = !1,
-  scrollbarGutter: i = "auto",
-  padding: m,
-  children: n,
-  "data-test-id": r = "fondue-scroll-area"
-}, d) => {
-  const { dir: b } = u();
-  return /* @__PURE__ */ h(
-    a.Root,
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import d from "./fondue-components65.js";
+const s = i(
+  ({
+    variant: t = "progress",
+    size: a = "medium",
+    "data-test-id": r = "fondue-loading-circle-content"
+  }, o) => /* @__PURE__ */ e(
+    "div",
     {
-      type: t,
-      dir: b,
-      className: o.root,
-      style: { maxWidth: s },
+      ref: o,
       "data-test-id": r,
-      ref: d,
-      children: [
-        /* @__PURE__ */ l(
-          a.Viewport,
-          {
-            className: o.viewport,
-            style: { maxHeight: e },
-            "data-scroll-padding": m,
-            "data-show-shadow": c,
-            "data-scrollbar-type": t,
-            "data-scrollbar-gutter": i,
-            "data-test-id": `${r}-viewport`,
-            children: n
-          }
-        ),
-        /* @__PURE__ */ l(
-          a.Scrollbar,
-          {
-            className: o.scrollbar,
-            orientation: "vertical",
-            "data-test-id": `${r}-vertical-scrollbar`,
-            children: /* @__PURE__ */ l(
-              a.Thumb,
-              {
-                className: o.thumb,
-                "data-test-id": `${r}-vertical-scrollbar-thumb`
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ l(
-          a.Scrollbar,
-          {
-            className: o.scrollbar,
-            orientation: "horizontal",
-            "data-test-id": `${r}-horizontal-scrollbar`,
-            children: /* @__PURE__ */ l(
-              a.Thumb,
-              {
-                className: o.thumb,
-                "data-test-id": `${r}-horizontal-scrollbar-thumb`
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ l(a.Corner, { className: o.corner, "data-test-id": `${r}-corner` })
-      ]
+      "data-variant": t,
+      "data-size": a,
+      className: d.root
     }
-  );
-}, N = p(f);
-N.displayName = "ScrollArea";
+  )
+);
+s.displayName = "LoadingCircle";
 export {
-  N as ScrollArea
+  s as LoadingCircle
 };
 //# sourceMappingURL=fondue-components19.js.map

package/dist/fondue-components19.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components19.js","sources":["../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixScrollArea from '@radix-ui/react-scroll-area';\nimport { type ForwardedRef, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport { useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/scrollArea.module.scss';\n\nexport type ScrollAreaProps = {\n    /**\n     * \"auto\" visible when content is overflowing on the corresponding orientation.\n     * \"always\" always visible regardless of whether the content is overflowing. Sets the scrollbar gutter to stable.\n     * \"scroll\" visible when the user is scrolling along its corresponding orientation.\n     * \"hover\" when the user is hovering over the scroll area.\n     * @default 'hover'\n     */\n    type?: 'auto' | 'always' | 'scroll' | 'hover';\n    /**\n     * Determines if the scrollbar should take up space in the content area\n     * @default 'auto'\n     */\n    scrollbarGutter?: 'auto' | 'stable' | 'stable-horizontal' | 'stable-vertical';\n    /**\n     * Maximum height of the scroll area\n     * @default '100%'\n     */\n    maxHeight?: string | number;\n    /**\n     * Minimum width of the scroll area\n     * @default '100%'\n     */\n    maxWidth?: string | number;\n    /**\n     * Define the padding of the scroll area\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Determines if a inset shadow should be shown the edge of the component\n     */\n    showShadow?: boolean;\n    'data-test-id'?: string;\n    children: ReactNode;\n};\n\nconst ScrollAreaComponent = (\n    {\n        type = 'hover',\n        maxHeight = '100%',\n        maxWidth = '100%',\n        showShadow = false,\n        scrollbarGutter = 'auto',\n        padding,\n        children,\n        'data-test-id': dataTestId = 'fondue-scroll-area',\n    }: ScrollAreaProps,\n    ref: ForwardedRef<HTMLDivElement>,\n): ReactElement => {\n    const { dir } = useFondueTheme();\n\n    return (\n        <RadixScrollArea.Root\n            type={type}\n            dir={dir}\n            className={styles.root}\n            style={{ maxWidth }}\n            data-test-id={dataTestId}\n            ref={ref}\n        >\n            <RadixScrollArea.Viewport\n                className={styles.viewport}\n                style={{ maxHeight }}\n                data-scroll-padding={padding}\n                data-show-shadow={showShadow}\n                data-scrollbar-type={type}\n                data-scrollbar-gutter={scrollbarGutter}\n                data-test-id={`${dataTestId}-viewport`}\n            >\n                {children}\n            </RadixScrollArea.Viewport>\n            <RadixScrollArea.Scrollbar\n                className={styles.scrollbar}\n                orientation=\"vertical\"\n                data-test-id={`${dataTestId}-vertical-scrollbar`}\n            >\n                <RadixScrollArea.Thumb\n                    className={styles.thumb}\n                    data-test-id={`${dataTestId}-vertical-scrollbar-thumb`}\n                />\n            </RadixScrollArea.Scrollbar>\n            <RadixScrollArea.Scrollbar\n                className={styles.scrollbar}\n                orientation=\"horizontal\"\n                data-test-id={`${dataTestId}-horizontal-scrollbar`}\n            >\n                <RadixScrollArea.Thumb\n                    className={styles.thumb}\n                    data-test-id={`${dataTestId}-horizontal-scrollbar-thumb`}\n                />\n            </RadixScrollArea.Scrollbar>\n            <RadixScrollArea.Corner className={styles.corner} data-test-id={`${dataTestId}-corner`} />\n        </RadixScrollArea.Root>\n    );\n};\n\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(ScrollAreaComponent);\nScrollArea.displayName = 'ScrollArea';\n"],"names":["ScrollAreaComponent","type","maxHeight","maxWidth","showShadow","scrollbarGutter","padding","children","dataTestId","ref","dir","useFondueTheme","jsxs","RadixScrollArea","styles","jsx","ScrollArea","forwardRef"],"mappings":";;;;;AA8CA,MAAMA,IAAsB,CACxB;AAAA,EACI,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,iBAAAC,IAAkB;AAAA,EAClB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,GACAC,MACe;AACf,QAAM,EAAE,KAAAC,EAAA,IAAQC,EAAA;AAEhB,SACI,gBAAAC;AAAA,IAACC,EAAgB;AAAA,IAAhB;AAAA,MACG,MAAAZ;AAAA,MACA,KAAAS;AAAA,MACA,WAAWI,EAAO;AAAA,MAClB,OAAO,EAAE,UAAAX,EAAA;AAAA,MACT,gBAAcK;AAAA,MACd,KAAAC;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAM;AAAA,UAACF,EAAgB;AAAA,UAAhB;AAAA,YACG,WAAWC,EAAO;AAAA,YAClB,OAAO,EAAE,WAAAZ,EAAA;AAAA,YACT,uBAAqBI;AAAA,YACrB,oBAAkBF;AAAA,YAClB,uBAAqBH;AAAA,YACrB,yBAAuBI;AAAA,YACvB,gBAAc,GAAGG,CAAU;AAAA,YAE1B,UAAAD;AAAA,UAAA;AAAA,QAAA;AAAA,QAEL,gBAAAQ;AAAA,UAACF,EAAgB;AAAA,UAAhB;AAAA,YACG,WAAWC,EAAO;AAAA,YAClB,aAAY;AAAA,YACZ,gBAAc,GAAGN,CAAU;AAAA,YAE3B,UAAA,gBAAAO;AAAA,cAACF,EAAgB;AAAA,cAAhB;AAAA,gBACG,WAAWC,EAAO;AAAA,gBAClB,gBAAc,GAAGN,CAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UAC/B;AAAA,QAAA;AAAA,QAEJ,gBAAAO;AAAA,UAACF,EAAgB;AAAA,UAAhB;AAAA,YACG,WAAWC,EAAO;AAAA,YAClB,aAAY;AAAA,YACZ,gBAAc,GAAGN,CAAU;AAAA,YAE3B,UAAA,gBAAAO;AAAA,cAACF,EAAgB;AAAA,cAAhB;AAAA,gBACG,WAAWC,EAAO;AAAA,gBAClB,gBAAc,GAAGN,CAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UAC/B;AAAA,QAAA;AAAA,QAEJ,gBAAAO,EAACF,EAAgB,QAAhB,EAAuB,WAAWC,EAAO,QAAQ,gBAAc,GAAGN,CAAU,UAAA,CAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpG,GAEaQ,IAAaC,EAA4CjB,CAAmB;AACzFgB,EAAW,cAAc;"}
+{"version":3,"file":"fondue-components19.js","sources":["../src/components/LoadingCircle/LoadingCircle.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef } from 'react';\n\nimport styles from './styles/loadingCircleStyles.module.scss';\n\nexport type LoadingCircleProps = {\n    /**\n     * The  variant of the loading circle.\n     * @default 'progress'\n     */\n    variant?: 'progress' | 'success' | 'danger';\n    /**\n     * The size of the loading circle\n     * @default \"medium\"\n     */\n    size?: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large';\n    'data-test-id'?: string;\n};\n\nexport const LoadingCircle = forwardRef<HTMLDivElement, LoadingCircleProps>(\n    (\n        {\n            variant = 'progress',\n            size = 'medium',\n            'data-test-id': dataTestId = 'fondue-loading-circle-content',\n        }: LoadingCircleProps,\n        ref: ForwardedRef<HTMLDivElement>,\n    ) => {\n        return (\n            <div\n                ref={ref}\n                data-test-id={dataTestId}\n                data-variant={variant}\n                data-size={size}\n                className={styles.root}\n            ></div>\n        );\n    },\n);\nLoadingCircle.displayName = 'LoadingCircle';\n"],"names":["LoadingCircle","forwardRef","variant","size","dataTestId","ref","jsx","styles"],"mappings":";;;AAoBO,MAAMA,IAAgBC;AAAA,EACzB,CACI;AAAA,IACI,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,EAAA,GAEjCC,MAGI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAD;AAAA,MACA,gBAAcD;AAAA,MACd,gBAAcF;AAAA,MACd,aAAWC;AAAA,MACX,WAAWI,EAAO;AAAA,IAAA;AAAA,EAAA;AAIlC;AACAP,EAAc,cAAc;"}