@frontify/fondue-components 27.0.1 → 28.0.0

package/dist/fondue-components16.js

@@ -1,46 +1,49 @@
-import { jsxs as c, jsx as l } from "react/jsx-runtime";
-import * as m from "@radix-ui/react-label";
-import { forwardRef as b, useRef as p, useLayoutEffect as x } from "react";
-import a from "./fondue-components61.js";
-const A = ({ className: s, "data-test-id": d = "fondue-label", children: r, variant: f = "default", ...i }, u) => {
-  const n = p(null);
-  return x(() => {
-    var o;
-    const e = (o = n.current) == null ? void 0 : o.querySelectorAll("button,input,a,[tabindex]");
-    if (e)
-      for (const t of e)
-        t.setAttribute("tabindex", "-1"), t.setAttribute("id", ""), t.setAttribute("data-test-id", "");
-  }, []), /* @__PURE__ */ c(
-    m.Root,
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import a from "./fondue-components64.js";
+const x = g(
+  ({
+    as: e = "span",
+    children: i,
+    className: r,
+    color: d = "default",
+    role: o,
+    size: l = "medium",
+    weight: t = "default",
+    "data-test-id": s = "fondue-heading",
+    "aria-describedby": p,
+    "aria-expanded": n,
+    "aria-haspopup": b,
+    "aria-hidden": m,
+    "aria-label": f,
+    "aria-labelledby": u,
+    ...h
+  }, y) => /* @__PURE__ */ c(
+    e,
     {
-      ref: u,
-      "data-required": i.required,
-      "data-variant": f,
-      className: [a.root, s].filter(Boolean).join(" "),
-      "data-test-id": d,
-      onClick: (e) => {
-        const o = e.target.getAttribute("for"), t = o ? document.getElementById(o) : null;
-        t && t.getAttribute("role") === "combobox" && (e.preventDefault(), e.stopPropagation(), t.click());
-      },
-      ...i,
-      children: [
-        /* @__PURE__ */ l(
-          "span",
-          {
-            className: [a.hiddenText, a.contentArea].filter(Boolean).join(" "),
-            "aria-hidden": "true",
-            ref: n,
-            children: r
-          }
-        ),
-        /* @__PURE__ */ l("span", { className: [a.visibleText, a.contentArea].filter(Boolean).join(" "), children: r })
-      ]
+      className: [
+        a.root,
+        a[`size-${l}`],
+        a[`weight-${t}`],
+        a[`color-${d}`],
+        r
+      ].filter(Boolean).join(" "),
+      role: o,
+      "aria-label": f,
+      "aria-hidden": m,
+      "aria-describedby": p,
+      "aria-labelledby": u,
+      "aria-expanded": n,
+      "aria-haspopup": b,
+      "data-test-id": s,
+      ref: y,
+      ...h,
+      children: i
     }
-  );
-}, g = b(A);
-g.displayName = "Label";
+  )
+);
+x.displayName = "Heading";
 export {
-  g as Label,
-  A as LabelComponent
+  x as Heading
 };
 //# sourceMappingURL=fondue-components16.js.map

package/dist/fondue-components16.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components16.js","sources":["../src/components/Label/Label.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as LabelPrimitive from '@radix-ui/react-label';\nimport { type ForwardedRef, forwardRef, type MouseEventHandler, type ReactNode, useRef, useLayoutEffect } from 'react';\n\nimport styles from './styles/label.module.scss';\n\ntype LabelVariant = 'default' | 'strong';\n\nexport type LabelProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * The id of the input element the label is associated with\n     */\n    htmlFor: string;\n    /**\n     * Add an asterisk to the label to indicate it is required\n     * @default false\n     */\n    required?: boolean;\n    /**\n     * The variant of the label\n     * @default \"default\"\n     */\n    variant?: LabelVariant;\n    className?: string;\n    onClick?: MouseEventHandler<HTMLLabelElement>;\n    'data-test-id'?: string;\n};\n\nexport const LabelComponent = (\n    { className, 'data-test-id': dataTestId = 'fondue-label', children, variant = 'default', ...props }: LabelProps,\n    ref: ForwardedRef<HTMLLabelElement>,\n) => {\n    const hiddenTextRef = useRef<HTMLSpanElement>(null);\n\n    useLayoutEffect(() => {\n        // prevent duplicated interactive elements within the hidden element\n        const interactiveElements = hiddenTextRef.current?.querySelectorAll('button,input,a,[tabindex]');\n        if (interactiveElements) {\n            for (const element of interactiveElements) {\n                element.setAttribute('tabindex', '-1');\n                element.setAttribute('id', '');\n                element.setAttribute('data-test-id', '');\n            }\n        }\n    }, []);\n\n    return (\n        <LabelPrimitive.Root\n            ref={ref}\n            data-required={props.required}\n            data-variant={variant}\n            className={[styles.root, className].filter(Boolean).join(' ')}\n            data-test-id={dataTestId}\n            onClick={(event) => {\n                // Add support of Select component, Radix only allows native `select`\n                // but we use `div[role=combobox]` because of downshift\n                // https://github.com/radix-ui/primitives/blob/6e75e117977c9e6ffa939e6951a707f16ba0f95e/packages/react/label/src/label.tsx#L22\n                const targetId = (event.target as HTMLElement).getAttribute('for');\n                const target = targetId ? document.getElementById(targetId) : null;\n\n                if (target && target.getAttribute('role') === 'combobox') {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    target.click();\n                }\n            }}\n            {...props}\n        >\n            {/* Hidden version with medium font weight to reserve space */}\n            <span\n                className={[styles.hiddenText, styles.contentArea].filter(Boolean).join(' ')}\n                aria-hidden=\"true\"\n                ref={hiddenTextRef}\n            >\n                {children}\n            </span>\n            {/* Visible version (inherits all styling from parent) */}\n            <span className={[styles.visibleText, styles.contentArea].filter(Boolean).join(' ')}>{children}</span>\n        </LabelPrimitive.Root>\n    );\n};\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(LabelComponent);\nLabel.displayName = 'Label';\n"],"names":["LabelComponent","className","dataTestId","children","variant","props","ref","hiddenTextRef","useRef","useLayoutEffect","interactiveElements","_a","element","jsxs","LabelPrimitive","styles","event","targetId","target","jsx","Label","forwardRef"],"mappings":";;;;AA+BO,MAAMA,IAAiB,CAC1B,EAAE,WAAAC,GAAW,gBAAgBC,IAAa,gBAAgB,UAAAC,GAAU,SAAAC,IAAU,WAAW,GAAGC,EAAA,GAC5FC,MACC;AACD,QAAMC,IAAgBC,EAAwB,IAAI;AAElD,SAAAC,EAAgB,MAAM;;AAElB,UAAMC,KAAsBC,IAAAJ,EAAc,YAAd,gBAAAI,EAAuB,iBAAiB;AACpE,QAAID;AACA,iBAAWE,KAAWF;AAClB,QAAAE,EAAQ,aAAa,YAAY,IAAI,GACrCA,EAAQ,aAAa,MAAM,EAAE,GAC7BA,EAAQ,aAAa,gBAAgB,EAAE;AAAA,EAGnD,GAAG,CAAA,CAAE,GAGD,gBAAAC;AAAA,IAACC,EAAe;AAAA,IAAf;AAAA,MACG,KAAAR;AAAA,MACA,iBAAeD,EAAM;AAAA,MACrB,gBAAcD;AAAA,MACd,WAAW,CAACW,EAAO,MAAMd,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAC5D,gBAAcC;AAAA,MACd,SAAS,CAACc,MAAU;AAIhB,cAAMC,IAAYD,EAAM,OAAuB,aAAa,KAAK,GAC3DE,IAASD,IAAW,SAAS,eAAeA,CAAQ,IAAI;AAE9D,QAAIC,KAAUA,EAAO,aAAa,MAAM,MAAM,eAC1CF,EAAM,eAAA,GACNA,EAAM,gBAAA,GACNE,EAAO,MAAA;AAAA,MAEf;AAAA,MACC,GAAGb;AAAA,MAGJ,UAAA;AAAA,QAAA,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAW,CAACJ,EAAO,YAAYA,EAAO,WAAW,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,YAC3E,eAAY;AAAA,YACZ,KAAKR;AAAA,YAEJ,UAAAJ;AAAA,UAAA;AAAA,QAAA;AAAA,QAGL,gBAAAgB,EAAC,QAAA,EAAK,WAAW,CAACJ,EAAO,aAAaA,EAAO,WAAW,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,UAAAZ,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG3G,GAEaiB,IAAQC,EAAyCrB,CAAc;AAC5EoB,EAAM,cAAc;"}
+{"version":3,"file":"fondue-components16.js","sources":["../src/components/Heading/Heading.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ElementType, type ForwardedRef, forwardRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\n\nimport styles from './styles/heading.module.scss';\n\ntype HeadingWeight = 'default' | 'strong';\ntype HeadingSize = 'medium' | 'large' | 'x-large' | 'xx-large';\ntype HeadingColor = 'default' | 'weak' | 'x-weak' | 'disabled' | 'negative' | 'positive' | 'warning' | 'interactive';\n\ntype TagType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'p';\n\nexport type HeadingProps<TTag extends TagType = 'span'> = CommonAriaProps & {\n    'data-test-id'?: string;\n    as?: TTag;\n    children?: ReactNode;\n    color?: HeadingColor;\n    size?: HeadingSize;\n    weight?: HeadingWeight;\n    className?: string;\n};\n\ntype HeadingElementType<TTag extends TagType> = TTag extends 'span'\n    ? HTMLSpanElement\n    : TTag extends 'p'\n      ? HTMLParagraphElement\n      : HTMLHeadingElement;\n\nexport const Heading = forwardRef(\n    (\n        {\n            as: Tag = 'span' as ElementType,\n            children,\n            className,\n            color = 'default',\n            role,\n            size = 'medium',\n            weight = 'default',\n            'data-test-id': dataTestId = 'fondue-heading',\n            'aria-describedby': ariaDescribedBy,\n            'aria-expanded': ariaExpanded,\n            'aria-haspopup': ariaHasPopup,\n            'aria-hidden': ariaHidden,\n            'aria-label': ariaLabel,\n            'aria-labelledby': ariaLabelledBy,\n            ...props\n        },\n        ref,\n    ) => {\n        return (\n            <Tag\n                className={[\n                    styles.root,\n                    styles[`size-${size}`],\n                    styles[`weight-${weight}`],\n                    styles[`color-${color}`],\n                    className,\n                ]\n                    .filter(Boolean)\n                    .join(' ')}\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                data-test-id={dataTestId}\n                ref={ref}\n                {...props}\n            >\n                {children}\n            </Tag>\n        );\n    },\n) as (<TTag extends TagType = 'span'>(\n    props: HeadingProps<TTag> & { ref?: ForwardedRef<HeadingElementType<TTag>> },\n) => JSX.Element) & { displayName: string };\n\nHeading.displayName = 'Heading';\n"],"names":["Heading","forwardRef","Tag","children","className","color","role","size","weight","dataTestId","ariaDescribedBy","ariaExpanded","ariaHasPopup","ariaHidden","ariaLabel","ariaLabelledBy","props","ref","jsx","styles"],"mappings":";;;AA8BO,MAAMA,IAAUC;AAAA,EACnB,CACI;AAAA,IACI,IAAIC,IAAM;AAAA,IACV,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,MAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,QAAAC,IAAS;AAAA,IACT,gBAAgBC,IAAa;AAAA,IAC7B,oBAAoBC;AAAA,IACpB,iBAAiBC;AAAA,IACjB,iBAAiBC;AAAA,IACjB,eAAeC;AAAA,IACf,cAAcC;AAAA,IACd,mBAAmBC;AAAA,IACnB,GAAGC;AAAA,EAAA,GAEPC,MAGI,gBAAAC;AAAA,IAAChB;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,QACPiB,EAAO;AAAA,QACPA,EAAO,QAAQZ,CAAI,EAAE;AAAA,QACrBY,EAAO,UAAUX,CAAM,EAAE;AAAA,QACzBW,EAAO,SAASd,CAAK,EAAE;AAAA,QACvBD;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACb,MAAAE;AAAA,MACA,cAAYQ;AAAA,MACZ,eAAaD;AAAA,MACb,oBAAkBH;AAAA,MAClB,mBAAiBK;AAAA,MACjB,iBAAeJ;AAAA,MACf,iBAAeC;AAAA,MACf,gBAAcH;AAAA,MACd,KAAAQ;AAAA,MACC,GAAGD;AAAA,MAEH,UAAAb;AAAA,IAAA;AAAA,EAAA;AAIjB;AAIAH,EAAQ,cAAc;"}

package/dist/fondue-components17.js

@@ -1,61 +1,46 @@
-import { jsx as C } from "react/jsx-runtime";
-import { forwardRef as j, useCallback as D } from "react";
-import { useFondueRouter as H } from "./fondue-components22.js";
-import o from "./fondue-components62.js";
-const L = j(
-  ({
-    id: n,
-    className: u,
-    children: c,
-    size: m = "medium",
-    weight: f = "regular",
-    truncate: p = !1,
-    wrap: d = "nowrap",
-    underline: $ = "auto",
-    color: k = "primary",
-    href: t,
-    onContainer: i,
-    onPress: e,
-    disabled: r = !1,
-    ...s
-  }, v) => {
-    const { navigate: l, useHref: w } = H(), g = w(t), x = D(
-      (a) => {
-        if (r) {
-          a.preventDefault();
-          return;
-        }
-        e == null || e(a), t && (a.preventDefault(), l(t));
+import { jsxs as c, jsx as l } from "react/jsx-runtime";
+import * as m from "@radix-ui/react-label";
+import { forwardRef as b, useRef as p, useLayoutEffect as x } from "react";
+import a from "./fondue-components65.js";
+const A = ({ className: s, "data-test-id": d = "fondue-label", children: r, variant: f = "default", ...i }, u) => {
+  const n = p(null);
+  return x(() => {
+    var o;
+    const e = (o = n.current) == null ? void 0 : o.querySelectorAll("button,input,a,[tabindex]");
+    if (e)
+      for (const t of e)
+        t.setAttribute("tabindex", "-1"), t.setAttribute("id", ""), t.setAttribute("data-test-id", "");
+  }, []), /* @__PURE__ */ c(
+    m.Root,
+    {
+      ref: u,
+      "data-required": i.required,
+      "data-variant": f,
+      className: [a.root, s].filter(Boolean).join(" "),
+      "data-test-id": d,
+      onClick: (e) => {
+        const o = e.target.getAttribute("for"), t = o ? document.getElementById(o) : null;
+        t && t.getAttribute("role") === "combobox" && (e.preventDefault(), e.stopPropagation(), t.click());
       },
-      [t, l, e, r]
-    ), y = r ? o.disabled : o[i ? `color-on-container-${i}` : `color-${k}`];
-    return /* @__PURE__ */ C(
-      "a",
-      {
-        id: n,
-        className: [
-          o.root,
-          o[`size-${m}`],
-          o[`weight-${f}`],
-          o[`wrap-${d}`],
-          o[`underline-${$}`],
-          p && o.truncate,
-          y,
-          u
-        ].filter(Boolean).join(" "),
-        ref: v,
-        href: r ? void 0 : g,
-        onClick: x,
-        "aria-disabled": r || void 0,
-        tabIndex: r ? -1 : void 0,
-        ...s,
-        children: c
-      }
-    );
-  }
-);
-L.displayName = "Link";
+      ...i,
+      children: [
+        /* @__PURE__ */ l(
+          "span",
+          {
+            className: [a.hiddenText, a.contentArea].filter(Boolean).join(" "),
+            "aria-hidden": "true",
+            ref: n,
+            children: r
+          }
+        ),
+        /* @__PURE__ */ l("span", { className: [a.visibleText, a.contentArea].filter(Boolean).join(" "), children: r })
+      ]
+    }
+  );
+}, g = b(A);
+g.displayName = "Label";
 export {
-  L as Link
+  g as Label,
+  A as LabelComponent
 };
 //# 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 { 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={[\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                    .filter(Boolean)\n                    .join(' ')}\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"],"mappings":";;;;AAoGO,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,WAAW;AAAA,UACPuB,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,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,QACb,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/Label/Label.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as LabelPrimitive from '@radix-ui/react-label';\nimport { type ForwardedRef, forwardRef, type MouseEventHandler, type ReactNode, useRef, useLayoutEffect } from 'react';\n\nimport styles from './styles/label.module.scss';\n\ntype LabelVariant = 'default' | 'strong';\n\nexport type LabelProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * The id of the input element the label is associated with\n     */\n    htmlFor: string;\n    /**\n     * Add an asterisk to the label to indicate it is required\n     * @default false\n     */\n    required?: boolean;\n    /**\n     * The variant of the label\n     * @default \"default\"\n     */\n    variant?: LabelVariant;\n    className?: string;\n    onClick?: MouseEventHandler<HTMLLabelElement>;\n    'data-test-id'?: string;\n};\n\nexport const LabelComponent = (\n    { className, 'data-test-id': dataTestId = 'fondue-label', children, variant = 'default', ...props }: LabelProps,\n    ref: ForwardedRef<HTMLLabelElement>,\n) => {\n    const hiddenTextRef = useRef<HTMLSpanElement>(null);\n\n    useLayoutEffect(() => {\n        // prevent duplicated interactive elements within the hidden element\n        const interactiveElements = hiddenTextRef.current?.querySelectorAll('button,input,a,[tabindex]');\n        if (interactiveElements) {\n            for (const element of interactiveElements) {\n                element.setAttribute('tabindex', '-1');\n                element.setAttribute('id', '');\n                element.setAttribute('data-test-id', '');\n            }\n        }\n    }, []);\n\n    return (\n        <LabelPrimitive.Root\n            ref={ref}\n            data-required={props.required}\n            data-variant={variant}\n            className={[styles.root, className].filter(Boolean).join(' ')}\n            data-test-id={dataTestId}\n            onClick={(event) => {\n                // Add support of Select component, Radix only allows native `select`\n                // but we use `div[role=combobox]` because of downshift\n                // https://github.com/radix-ui/primitives/blob/6e75e117977c9e6ffa939e6951a707f16ba0f95e/packages/react/label/src/label.tsx#L22\n                const targetId = (event.target as HTMLElement).getAttribute('for');\n                const target = targetId ? document.getElementById(targetId) : null;\n\n                if (target && target.getAttribute('role') === 'combobox') {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    target.click();\n                }\n            }}\n            {...props}\n        >\n            {/* Hidden version with medium font weight to reserve space */}\n            <span\n                className={[styles.hiddenText, styles.contentArea].filter(Boolean).join(' ')}\n                aria-hidden=\"true\"\n                ref={hiddenTextRef}\n            >\n                {children}\n            </span>\n            {/* Visible version (inherits all styling from parent) */}\n            <span className={[styles.visibleText, styles.contentArea].filter(Boolean).join(' ')}>{children}</span>\n        </LabelPrimitive.Root>\n    );\n};\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(LabelComponent);\nLabel.displayName = 'Label';\n"],"names":["LabelComponent","className","dataTestId","children","variant","props","ref","hiddenTextRef","useRef","useLayoutEffect","interactiveElements","_a","element","jsxs","LabelPrimitive","styles","event","targetId","target","jsx","Label","forwardRef"],"mappings":";;;;AA+BO,MAAMA,IAAiB,CAC1B,EAAE,WAAAC,GAAW,gBAAgBC,IAAa,gBAAgB,UAAAC,GAAU,SAAAC,IAAU,WAAW,GAAGC,EAAA,GAC5FC,MACC;AACD,QAAMC,IAAgBC,EAAwB,IAAI;AAElD,SAAAC,EAAgB,MAAM;;AAElB,UAAMC,KAAsBC,IAAAJ,EAAc,YAAd,gBAAAI,EAAuB,iBAAiB;AACpE,QAAID;AACA,iBAAWE,KAAWF;AAClB,QAAAE,EAAQ,aAAa,YAAY,IAAI,GACrCA,EAAQ,aAAa,MAAM,EAAE,GAC7BA,EAAQ,aAAa,gBAAgB,EAAE;AAAA,EAGnD,GAAG,CAAA,CAAE,GAGD,gBAAAC;AAAA,IAACC,EAAe;AAAA,IAAf;AAAA,MACG,KAAAR;AAAA,MACA,iBAAeD,EAAM;AAAA,MACrB,gBAAcD;AAAA,MACd,WAAW,CAACW,EAAO,MAAMd,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAC5D,gBAAcC;AAAA,MACd,SAAS,CAACc,MAAU;AAIhB,cAAMC,IAAYD,EAAM,OAAuB,aAAa,KAAK,GAC3DE,IAASD,IAAW,SAAS,eAAeA,CAAQ,IAAI;AAE9D,QAAIC,KAAUA,EAAO,aAAa,MAAM,MAAM,eAC1CF,EAAM,eAAA,GACNA,EAAM,gBAAA,GACNE,EAAO,MAAA;AAAA,MAEf;AAAA,MACC,GAAGb;AAAA,MAGJ,UAAA;AAAA,QAAA,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAW,CAACJ,EAAO,YAAYA,EAAO,WAAW,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,YAC3E,eAAY;AAAA,YACZ,KAAKR;AAAA,YAEJ,UAAAJ;AAAA,UAAA;AAAA,QAAA;AAAA,QAGL,gBAAAgB,EAAC,QAAA,EAAK,WAAW,CAACJ,EAAO,aAAaA,EAAO,WAAW,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,UAAAZ,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG3G,GAEaiB,IAAQC,EAAyCrB,CAAc;AAC5EoB,EAAM,cAAc;"}

package/dist/fondue-components18.js

@@ -1,47 +1,61 @@
-import { jsx as t } from "react/jsx-runtime";
-import * as o from "@radix-ui/react-progress";
-import { forwardRef as c } from "react";
-import d from "./fondue-components63.js";
-const g = c(
+import { jsx as C } from "react/jsx-runtime";
+import { forwardRef as j, useCallback as D } from "react";
+import { useFondueRouter as H } from "./fondue-components23.js";
+import o from "./fondue-components66.js";
+const L = j(
   ({
-    value: a,
-    max: r = 100,
-    rounded: e = !0,
-    variant: i = "default",
-    size: n = "medium",
-    "data-test-id": s = "fondue-loading-bar",
-    ...l
-  }, m) => /* @__PURE__ */ t(
-    o.Root,
-    {
-      ref: m,
-      "data-test-id": s,
-      className: d.container,
-      "data-rounded": e,
-      "data-size": n,
-      "data-variant": i,
-      "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__ */ t(
-        o.Indicator,
-        {
-          className: d.indicator,
-          "data-variant": i,
-          "data-indeterminate": a === null
+    id: n,
+    className: u,
+    children: c,
+    size: m = "medium",
+    weight: f = "regular",
+    truncate: p = !1,
+    wrap: d = "nowrap",
+    underline: $ = "auto",
+    color: k = "primary",
+    href: t,
+    onContainer: i,
+    onPress: e,
+    disabled: r = !1,
+    ...s
+  }, v) => {
+    const { navigate: l, useHref: w } = H(), g = w(t), x = D(
+      (a) => {
+        if (r) {
+          a.preventDefault();
+          return;
         }
-      )
-    }
-  )
+        e == null || e(a), t && (a.preventDefault(), l(t));
+      },
+      [t, l, e, r]
+    ), y = r ? o.disabled : o[i ? `color-on-container-${i}` : `color-${k}`];
+    return /* @__PURE__ */ C(
+      "a",
+      {
+        id: n,
+        className: [
+          o.root,
+          o[`size-${m}`],
+          o[`weight-${f}`],
+          o[`wrap-${d}`],
+          o[`underline-${$}`],
+          p && o.truncate,
+          y,
+          u
+        ].filter(Boolean).join(" "),
+        ref: v,
+        href: r ? void 0 : g,
+        onClick: x,
+        "aria-disabled": r || void 0,
+        tabIndex: r ? -1 : void 0,
+        ...s,
+        children: c
+      }
+    );
+  }
 );
-g.displayName = "LoadingBar";
+L.displayName = "Link";
 export {
-  g as LoadingBar
+  L as Link
 };
 //# 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 styles from './styles/loadingBar.module.scss';\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={styles.container}\n                data-rounded={rounded}\n                data-size={size}\n                data-variant={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={styles.indicator}\n                    data-variant={variant}\n                    data-indeterminate={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","styles"],"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,EAAO;AAAA,MAClB,gBAAcR;AAAA,MACd,aAAWE;AAAA,MACX,gBAAcD;AAAA,MACd,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,WAAWC,EAAO;AAAA,UAClB,gBAAcP;AAAA,UACd,sBAAoBH,MAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IAClC;AAAA,EAAA;AAIhB;AACAF,EAAW,cAAc;"}
+{"version":3,"file":"fondue-components18.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 { 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={[\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                    .filter(Boolean)\n                    .join(' ')}\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"],"mappings":";;;;AAoGO,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,WAAW;AAAA,UACPuB,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,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,QACb,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-components19.js

@@ -1,24 +1,47 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import d from "./fondue-components64.js";
-const s = i(
+import { jsx as t } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-progress";
+import { forwardRef as c } from "react";
+import d from "./fondue-components67.js";
+const g = c(
   ({
-    variant: t = "progress",
-    size: a = "medium",
-    "data-test-id": r = "fondue-loading-circle-content"
-  }, o) => /* @__PURE__ */ e(
-    "div",
+    value: a,
+    max: r = 100,
+    rounded: e = !0,
+    variant: i = "default",
+    size: n = "medium",
+    "data-test-id": s = "fondue-loading-bar",
+    ...l
+  }, m) => /* @__PURE__ */ t(
+    o.Root,
     {
-      ref: o,
-      "data-test-id": r,
-      "data-variant": t,
-      "data-size": a,
-      className: d.root
+      ref: m,
+      "data-test-id": s,
+      className: d.container,
+      "data-rounded": e,
+      "data-size": n,
+      "data-variant": i,
+      "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__ */ t(
+        o.Indicator,
+        {
+          className: d.indicator,
+          "data-variant": i,
+          "data-indeterminate": a === null
+        }
+      )
     }
   )
 );
-s.displayName = "LoadingCircle";
+g.displayName = "LoadingBar";
 export {
-  s as LoadingCircle
+  g as LoadingBar
 };
 //# 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/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 styles from './styles/loadingBar.module.scss';\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={styles.container}\n                data-rounded={rounded}\n                data-size={size}\n                data-variant={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={styles.indicator}\n                    data-variant={variant}\n                    data-indeterminate={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","styles"],"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,EAAO;AAAA,MAClB,gBAAcR;AAAA,MACd,aAAWE;AAAA,MACX,gBAAcD;AAAA,MACd,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,WAAWC,EAAO;AAAA,UAClB,gBAAcP;AAAA,UACd,sBAAoBH,MAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IAClC;AAAA,EAAA;AAIhB;AACAF,EAAW,cAAc;"}

package/dist/fondue-components20.js

@@ -1,50 +1,24 @@
-import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import { IconCross as f } from "@frontify/fondue-icons";
-import { useTranslation as N } from "./fondue-components39.js";
-import a from "./fondue-components65.js";
-const x = ({
-  "aria-label": o,
-  "data-test-id": r = "notice",
-  variant: n = "default",
-  emphasis: d = "default",
-  size: e = "medium",
-  icon: i,
-  action: s,
-  onDismiss: l,
-  className: c = "",
-  children: m
-}) => {
-  const { t: u } = N();
-  return /* @__PURE__ */ p(
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import d from "./fondue-components68.js";
+const s = i(
+  ({
+    variant: t = "progress",
+    size: a = "medium",
+    "data-test-id": r = "fondue-loading-circle-content"
+  }, o) => /* @__PURE__ */ e(
     "div",
     {
-      "data-component": "notice",
-      "data-variant": n,
-      "data-emphasis": d,
-      "data-size": e,
+      ref: o,
       "data-test-id": r,
-      className: [a.root, c].filter(Boolean).join(" "),
-      role: "status",
-      "aria-live": "polite",
-      children: [
-        i ? /* @__PURE__ */ t("div", { className: a.icon, children: i }) : null,
-        /* @__PURE__ */ t("div", { className: a.content, children: m }),
-        s ? /* @__PURE__ */ t("div", { className: a.action, children: s }) : null,
-        l ? /* @__PURE__ */ t(
-          "button",
-          {
-            type: "button",
-            "aria-label": o || u("Notice_dismiss"),
-            className: a.dismiss,
-            onClick: l,
-            children: /* @__PURE__ */ t(f, { size: e === "large" ? "20" : "16" })
-          }
-        ) : null
-      ]
+      "data-variant": t,
+      "data-size": a,
+      className: d.root
     }
-  );
-};
+  )
+);
+s.displayName = "LoadingCircle";
 export {
-  x as Notice
+  s as LoadingCircle
 };
 //# sourceMappingURL=fondue-components20.js.map

package/dist/fondue-components20.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components20.js","sources":["../src/components/Notice/Notice.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport { type MouseEvent, type ReactNode } from 'react';\n\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport styles from './styles/notice.module.scss';\n\ntype NoticeVariant = 'default' | 'highlight' | 'positive' | 'danger' | 'warning';\n\ntype NoticeEmphasis = 'default' | 'strong' | 'weak';\n\ntype NoticeSize = 'medium' | 'large';\n\nexport type NoticeProps = {\n    /**\n     * @default 'default'\n     */\n    variant?: NoticeVariant;\n    /**\n     * @default 'default'\n     */\n    emphasis?: NoticeEmphasis;\n    /**\n     * @default 'medium'\n     */\n    size?: NoticeSize;\n    /**\n     * Leading icon element\n     */\n    icon?: ReactNode;\n    /**\n     * Action element (typically a button)\n     */\n    action?: ReactNode;\n    /**\n     * Callback when the dismiss button is clicked\n     */\n    onDismiss?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Custom aria-label for the dismiss button\n     */\n    'aria-label'?: string;\n    /**\n     * Test ID for the component\n     */\n    'data-test-id'?: string;\n    /**\n     * Additional CSS class\n     */\n    className?: string;\n    /**\n     * Message content\n     */\n    children: ReactNode;\n};\n\nexport const Notice = ({\n    'aria-label': ariaLabel,\n    'data-test-id': dataTestId = 'notice',\n    variant = 'default',\n    emphasis = 'default',\n    size = 'medium',\n    icon,\n    action,\n    onDismiss,\n    className = '',\n    children,\n}: NoticeProps) => {\n    const { t } = useTranslation();\n\n    return (\n        <div\n            data-component=\"notice\"\n            data-variant={variant}\n            data-emphasis={emphasis}\n            data-size={size}\n            data-test-id={dataTestId}\n            className={[styles.root, className].filter(Boolean).join(' ')}\n            role=\"status\"\n            aria-live=\"polite\"\n        >\n            {icon ? <div className={styles.icon}>{icon}</div> : null}\n            <div className={styles.content}>{children}</div>\n            {action ? <div className={styles.action}>{action}</div> : null}\n            {onDismiss ? (\n                <button\n                    type=\"button\"\n                    aria-label={ariaLabel || t('Notice_dismiss')}\n                    className={styles.dismiss}\n                    onClick={onDismiss}\n                >\n                    <IconCross size={size === 'large' ? '20' : '16'} />\n                </button>\n            ) : null}\n        </div>\n    );\n};\n"],"names":["Notice","ariaLabel","dataTestId","variant","emphasis","size","icon","action","onDismiss","className","children","t","useTranslation","jsxs","styles","jsx","IconCross"],"mappings":";;;;AA0DO,MAAMA,IAAS,CAAC;AAAA,EACnB,cAAcC;AAAA,EACd,gBAAgBC,IAAa;AAAA,EAC7B,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AACJ,MAAmB;AACf,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA;AAEd,SACI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,kBAAe;AAAA,MACf,gBAAcV;AAAA,MACd,iBAAeC;AAAA,MACf,aAAWC;AAAA,MACX,gBAAcH;AAAA,MACd,WAAW,CAACY,EAAO,MAAML,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAC5D,MAAK;AAAA,MACL,aAAU;AAAA,MAET,UAAA;AAAA,QAAAH,sBAAQ,OAAA,EAAI,WAAWQ,EAAO,MAAO,aAAK,IAAS;AAAA,QACpD,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,SAAU,UAAAJ,GAAS;AAAA,QACzCH,IAAS,gBAAAQ,EAAC,OAAA,EAAI,WAAWD,EAAO,QAAS,aAAO,IAAS;AAAA,QACzDN,IACG,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,cAAYd,KAAaU,EAAE,gBAAgB;AAAA,YAC3C,WAAWG,EAAO;AAAA,YAClB,SAASN;AAAA,YAET,4BAACQ,GAAA,EAAU,MAAMX,MAAS,UAAU,OAAO,KAAA,CAAM;AAAA,UAAA;AAAA,QAAA,IAErD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhB;"}
+{"version":3,"file":"fondue-components20.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;"}