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

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 { 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        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 = useFondueTheme();\n    return (\n        <RadixPopover.Portal>\n            <ThemeProvider theme={theme}>\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                    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    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=\"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","triggerOffset","viewportCollisionPadding","theme","useFondueTheme","jsxs","ThemeProvider","styles","addShowFocusRing","FlyoutHeader","showCloseButton","closeProps","Button","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 { 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        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 = useFondueTheme();\n    return (\n        <RadixPopover.Portal>\n            <ThemeProvider theme={theme}>\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                    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    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=\"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","triggerOffset","viewportCollisionPadding","theme","useFondueTheme","jsxs","ThemeProvider","styles","addShowFocusRing","FlyoutHeader","showCloseButton","closeProps","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-components38.js";
-import u from "./fondue-components59.js";
+import { propsToCssVariables as n } from "./fondue-components36.js";
+import u from "./fondue-components57.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-components40.js";
-import a from "./fondue-components60.js";
+import { cn as x } from "./fondue-components38.js";
+import a from "./fondue-components58.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-components40.js";
-import r from "./fondue-components61.js";
+import { cn as A } from "./fondue-components38.js";
+import r from "./fondue-components59.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,62 +1,42 @@
-import { jsx as C } from "react/jsx-runtime";
-import { forwardRef as D, useCallback as H } from "react";
-import { cn as L } from "./fondue-components40.js";
-import { useFondueRouter as N } from "./fondue-components20.js";
-import o from "./fondue-components62.js";
-const R = D(
+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-components60.js";
+const p = m(
   ({
-    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));
+    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))"
       },
-      [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
-      }
-    );
-  }
+      ...l,
+      children: /* @__PURE__ */ i(
+        t.Indicator,
+        {
+          className: f({ variant: o, indeterminateState: a === null })
+        }
+      )
+    }
+  )
 );
-R.displayName = "Link";
+p.displayName = "LoadingBar";
 export {
-  R as Link
+  p as LoadingBar
 };
 //# sourceMappingURL=fondue-components17.js.map

package/dist/fondue-components17.js.map

@@ -1 +1 @@
-{"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;"}
+{"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;"}

package/dist/fondue-components18.js

@@ -1,42 +1,24 @@
-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-components63.js";
-const p = m(
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import d from "./fondue-components61.js";
+const s = i(
   ({
-    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,
+    variant: t = "progress",
+    size: a = "medium",
+    "data-test-id": r = "fondue-loading-circle-content"
+  }, o) => /* @__PURE__ */ e(
+    "div",
     {
-      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 })
-        }
-      )
+      ref: o,
+      "data-test-id": r,
+      "data-variant": t,
+      "data-size": a,
+      className: d.root
     }
   )
 );
-p.displayName = "LoadingBar";
+s.displayName = "LoadingCircle";
 export {
-  p as LoadingBar
+  s as LoadingCircle
 };
 //# sourceMappingURL=fondue-components18.js.map

package/dist/fondue-components18.js.map

@@ -1 +1 @@
-{"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;"}
+{"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;"}

package/dist/fondue-components19.js

@@ -1,24 +1,74 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import d from "./fondue-components64.js";
-const s = i(
-  ({
-    variant: t = "progress",
-    size: a = "medium",
-    "data-test-id": r = "fondue-loading-circle-content"
-  }, o) => /* @__PURE__ */ e(
-    "div",
-    {
-      ref: o,
-      "data-test-id": r,
-      "data-variant": t,
-      "data-size": a,
-      className: d.root
-    }
-  )
-);
-s.displayName = "LoadingCircle";
+import { jsxs as b, jsx as l } from "react/jsx-runtime";
+import * as a from "@radix-ui/react-scroll-area";
+import { forwardRef as h } from "react";
+import o from "./fondue-components62.js";
+const p = ({
+  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) => /* @__PURE__ */ b(
+  a.Root,
+  {
+    type: t,
+    className: o.root,
+    style: { maxWidth: s },
+    "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` })
+    ]
+  }
+), u = h(p);
+u.displayName = "ScrollArea";
 export {
-  s as LoadingCircle
+  u as ScrollArea
 };
 //# sourceMappingURL=fondue-components19.js.map

package/dist/fondue-components19.js.map

@@ -1 +1 @@
-{"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;"}
+{"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 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    return (\n        <RadixScrollArea.Root\n            type={type}\n            className={styles.root}\n            style={{ maxWidth }}\n            data-test-id={dataTestId}\n            ref={ref}\n        >\n            <RadixScrollArea.Viewport\n                className={styles.viewport}\n                style={{ maxHeight }}\n                data-scroll-padding={padding}\n                data-show-shadow={showShadow}\n                data-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","jsxs","RadixScrollArea","styles","jsx","ScrollArea","forwardRef"],"mappings":";;;;AA4CA,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,MAGI,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACG,MAAAV;AAAA,IACA,WAAWW,EAAO;AAAA,IAClB,OAAO,EAAE,UAAAT,EAAA;AAAA,IACT,gBAAcK;AAAA,IACd,KAAAC;AAAA,IAEA,UAAA;AAAA,MAAA,gBAAAI;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,OAAO,EAAE,WAAAV,EAAA;AAAA,UACT,uBAAqBI;AAAA,UACrB,oBAAkBF;AAAA,UAClB,uBAAqBH;AAAA,UACrB,yBAAuBI;AAAA,UACvB,gBAAc,GAAGG,CAAU;AAAA,UAE1B,UAAAD;AAAA,QAAA;AAAA,MAAA;AAAA,MAEL,gBAAAM;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,aAAY;AAAA,UACZ,gBAAc,GAAGJ,CAAU;AAAA,UAE3B,UAAA,gBAAAK;AAAA,YAACF,EAAgB;AAAA,YAAhB;AAAA,cACG,WAAWC,EAAO;AAAA,cAClB,gBAAc,GAAGJ,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAC/B;AAAA,MAAA;AAAA,MAEJ,gBAAAK;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,aAAY;AAAA,UACZ,gBAAc,GAAGJ,CAAU;AAAA,UAE3B,UAAA,gBAAAK;AAAA,YAACF,EAAgB;AAAA,YAAhB;AAAA,cACG,WAAWC,EAAO;AAAA,cAClB,gBAAc,GAAGJ,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAC/B;AAAA,MAAA;AAAA,MAEJ,gBAAAK,EAACF,EAAgB,QAAhB,EAAuB,WAAWC,EAAO,QAAQ,gBAAc,GAAGJ,CAAU,UAAA,CAAW;AAAA,IAAA;AAAA,EAAA;AAAA,GAKvFM,IAAaC,EAA4Cf,CAAmB;AACzFc,EAAW,cAAc;"}

package/dist/fondue-components20.js

@@ -1,21 +1,39 @@
-import { jsx as u } from "react/jsx-runtime";
-import { createContext as i, useContext as s, useMemo as m } from "react";
-const e = i({
-  navigate: () => {
-    throw new Error("RouterProvider: `navigate` function is not implemented");
-  },
-  // eslint-disable-next-line @eslint-react/no-unnecessary-use-prefix
-  useHref: () => {
-    throw new Error("RouterProvider: `useHref` function is not implemented");
-  }
-});
-e.displayName = "RouterContext";
-const a = () => s(e), x = ({ children: r, navigate: t, useHref: o }) => {
-  const n = m(() => ({ navigate: t, useHref: o }), [t, o]);
-  return /* @__PURE__ */ u(e.Provider, { value: n, children: r });
-};
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { propsToCssVariables as c } from "./fondue-components36.js";
+import f from "./fondue-components63.js";
+const y = m(
+  ({
+    "data-test-id": a = "fondue-section",
+    children: e,
+    role: r,
+    "aria-label": i,
+    "aria-hidden": o,
+    "aria-describedby": d,
+    "aria-labelledby": s,
+    "aria-expanded": t,
+    "aria-haspopup": p,
+    ...l
+  }, b) => /* @__PURE__ */ n(
+    "section",
+    {
+      className: f.root,
+      "data-test-id": a,
+      style: c(l),
+      role: r,
+      "aria-label": i,
+      "aria-hidden": o,
+      "aria-describedby": d,
+      "aria-labelledby": s,
+      "aria-expanded": t,
+      "aria-haspopup": p,
+      ref: b,
+      children: e
+    }
+  )
+);
+y.displayName = "Section";
 export {
-  x as RouterProvider,
-  a as useFondueRouter
+  y as Section
 };
 //# sourceMappingURL=fondue-components20.js.map

package/dist/fondue-components20.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components20.js","sources":["../src/components/RouterProvider/RouterProvider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { createContext, useContext, useMemo, type ReactNode } from 'react';\n\nexport type RouterProviderProps = {\n    children: ReactNode;\n    /**\n     * Function to navigate to a specific path\n     */\n    navigate: (path: string) => void;\n    /**\n     * Function to resolves a URL against the current location.\n     */\n    useHref: (path: string) => string;\n};\n\nconst RouterContext = createContext<{\n    navigate: (path: string) => void;\n    useHref: (path: string) => string;\n}>({\n    navigate: () => {\n        throw new Error('RouterProvider: `navigate` function is not implemented');\n    },\n    // eslint-disable-next-line @eslint-react/no-unnecessary-use-prefix\n    useHref: () => {\n        throw new Error('RouterProvider: `useHref` function is not implemented');\n    },\n});\nRouterContext.displayName = 'RouterContext';\n\nexport const useFondueRouter = () => {\n    return useContext(RouterContext);\n};\n\nexport const RouterProvider = ({ children, navigate, useHref }: RouterProviderProps) => {\n    const contextValue = useMemo(() => ({ navigate, useHref }), [navigate, useHref]);\n\n    return <RouterContext.Provider value={contextValue}>{children}</RouterContext.Provider>;\n};\n"],"names":["RouterContext","createContext","useFondueRouter","useContext","RouterProvider","children","navigate","useHref","contextValue","useMemo"],"mappings":";;AAgBA,MAAMA,IAAgBC,EAGnB;AAAA,EACC,UAAU,MAAM;AACZ,UAAM,IAAI,MAAM,wDAAwD;AAAA,EAC5E;AAAA;AAAA,EAEA,SAAS,MAAM;AACX,UAAM,IAAI,MAAM,uDAAuD;AAAA,EAC3E;AACJ,CAAC;AACDD,EAAc,cAAc;AAErB,MAAME,IAAkB,MACpBC,EAAWH,CAAa,GAGtBI,IAAiB,CAAC,EAAE,UAAAC,GAAU,UAAAC,GAAU,SAAAC,QAAmC;AACpF,QAAMC,IAAeC,EAAQ,OAAO,EAAE,UAAAH,GAAU,SAAAC,MAAY,CAACD,GAAUC,CAAO,CAAC;AAE/E,2BAAQP,EAAc,UAAd,EAAuB,OAAOQ,GAAe,UAAAH,GAAS;AAClE;"}
+{"version":3,"file":"fondue-components20.js","sources":["../src/components/Section/Section.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { type Responsive, type LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/section.module.scss';\n\nexport type SectionProps = LayoutComponentProps & {\n    /**\n     * The display property.\n     * @default 'block'\n     */\n    display?: Responsive<'none' | 'block' | 'inline-block' | 'inline'>;\n\n    children?: ReactNode;\n    'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Section = forwardRef<HTMLDivElement, SectionProps>(\n    (\n        {\n            'data-test-id': dataTestId = 'fondue-section',\n            children,\n            role,\n            'aria-label': ariaLabel,\n            'aria-hidden': ariaHidden,\n            'aria-describedby': ariaDescribedBy,\n            'aria-labelledby': ariaLabelledBy,\n            'aria-expanded': ariaExpanded,\n            'aria-haspopup': ariaHasPopup,\n            ...props\n        },\n        ref,\n    ) => {\n        return (\n            <section\n                className={styles.root}\n                data-test-id={dataTestId}\n                style={propsToCssVariables(props)}\n                role={role}\n                aria-label={ariaLabel}\n                aria-hidden={ariaHidden}\n                aria-describedby={ariaDescribedBy}\n                aria-labelledby={ariaLabelledBy}\n                aria-expanded={ariaExpanded}\n                aria-haspopup={ariaHasPopup}\n                ref={ref}\n            >\n                {children}\n            </section>\n        );\n    },\n);\nSection.displayName = 'Section';\n"],"names":["Section","forwardRef","dataTestId","children","role","ariaLabel","ariaHidden","ariaDescribedBy","ariaLabelledBy","ariaExpanded","ariaHasPopup","props","ref","jsx","styles","propsToCssVariables"],"mappings":";;;;AAqBO,MAAMA,IAAUC;AAAA,EACnB,CACI;AAAA,IACI,gBAAgBC,IAAa;AAAA,IAC7B,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAcC;AAAA,IACd,eAAeC;AAAA,IACf,oBAAoBC;AAAA,IACpB,mBAAmBC;AAAA,IACnB,iBAAiBC;AAAA,IACjB,iBAAiBC;AAAA,IACjB,GAAGC;AAAA,EAAA,GAEPC,MAGI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAO;AAAA,MAClB,gBAAcZ;AAAA,MACd,OAAOa,EAAoBJ,CAAK;AAAA,MAChC,MAAAP;AAAA,MACA,cAAYC;AAAA,MACZ,eAAaC;AAAA,MACb,oBAAkBC;AAAA,MAClB,mBAAiBC;AAAA,MACjB,iBAAeC;AAAA,MACf,iBAAeC;AAAA,MACf,KAAAE;AAAA,MAEC,UAAAT;AAAA,IAAA;AAAA,EAAA;AAIjB;AACAH,EAAQ,cAAc;"}