@frontify/fondue-components 29.0.1 → 29.2.0

package/dist/fondue-components166.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fondue-components166.js","sources":["../../../node_modules/.pnpm/date-fns@3.6.0/node_modules/date-fns/locale/de/_lib/localize.mjs"],"sourcesContent":["import { buildLocalizeFn } from \"../../_lib/buildLocalizeFn.mjs\";\n\nconst eraValues = {\n  narrow: [\"v.Chr.\", \"n.Chr.\"],\n  abbreviated: [\"v.Chr.\", \"n.Chr.\"],\n  wide: [\"vor Christus\", \"nach Christus\"],\n};\n\nconst quarterValues = {\n  narrow: [\"1\", \"2\", \"3\", \"4\"],\n  abbreviated: [\"Q1\", \"Q2\", \"Q3\", \"Q4\"],\n  wide: [\"1. Quartal\", \"2. Quartal\", \"3. Quartal\", \"4. Quartal\"],\n};\n\n// Note: in German, the names of days of the week and months are capitalized.\n// If you are making a new locale based on this one, check if the same is true for the language you're working on.\n// Generally, formatted dates should look like they are in the middle of a sentence,\n// e.g. in Spanish language the weekdays and months should be in the lowercase.\nconst monthValues = {\n  narrow: [\"J\", \"F\", \"M\", \"A\", \"M\", \"J\", \"J\", \"A\", \"S\", \"O\", \"N\", \"D\"],\n  abbreviated: [\n    \"Jan\",\n    \"Feb\",\n    \"Mär\",\n    \"Apr\",\n    \"Mai\",\n    \"Jun\",\n    \"Jul\",\n    \"Aug\",\n    \"Sep\",\n    \"Okt\",\n    \"Nov\",\n    \"Dez\",\n  ],\n\n  wide: [\n    \"Januar\",\n    \"Februar\",\n    \"März\",\n    \"April\",\n    \"Mai\",\n    \"Juni\",\n    \"Juli\",\n    \"August\",\n    \"September\",\n    \"Oktober\",\n    \"November\",\n    \"Dezember\",\n  ],\n};\n\n// https://st.unicode.org/cldr-apps/v#/de/Gregorian/\nconst formattingMonthValues = {\n  narrow: monthValues.narrow,\n  abbreviated: [\n    \"Jan.\",\n    \"Feb.\",\n    \"März\",\n    \"Apr.\",\n    \"Mai\",\n    \"Juni\",\n    \"Juli\",\n    \"Aug.\",\n    \"Sep.\",\n    \"Okt.\",\n    \"Nov.\",\n    \"Dez.\",\n  ],\n\n  wide: monthValues.wide,\n};\n\nconst dayValues = {\n  narrow: [\"S\", \"M\", \"D\", \"M\", \"D\", \"F\", \"S\"],\n  short: [\"So\", \"Mo\", \"Di\", \"Mi\", \"Do\", \"Fr\", \"Sa\"],\n  abbreviated: [\"So.\", \"Mo.\", \"Di.\", \"Mi.\", \"Do.\", \"Fr.\", \"Sa.\"],\n  wide: [\n    \"Sonntag\",\n    \"Montag\",\n    \"Dienstag\",\n    \"Mittwoch\",\n    \"Donnerstag\",\n    \"Freitag\",\n    \"Samstag\",\n  ],\n};\n\n// https://www.unicode.org/cldr/charts/32/summary/de.html#1881\nconst dayPeriodValues = {\n  narrow: {\n    am: \"vm.\",\n    pm: \"nm.\",\n    midnight: \"Mitternacht\",\n    noon: \"Mittag\",\n    morning: \"Morgen\",\n    afternoon: \"Nachm.\",\n    evening: \"Abend\",\n    night: \"Nacht\",\n  },\n  abbreviated: {\n    am: \"vorm.\",\n    pm: \"nachm.\",\n    midnight: \"Mitternacht\",\n    noon: \"Mittag\",\n    morning: \"Morgen\",\n    afternoon: \"Nachmittag\",\n    evening: \"Abend\",\n    night: \"Nacht\",\n  },\n  wide: {\n    am: \"vormittags\",\n    pm: \"nachmittags\",\n    midnight: \"Mitternacht\",\n    noon: \"Mittag\",\n    morning: \"Morgen\",\n    afternoon: \"Nachmittag\",\n    evening: \"Abend\",\n    night: \"Nacht\",\n  },\n};\nconst formattingDayPeriodValues = {\n  narrow: {\n    am: \"vm.\",\n    pm: \"nm.\",\n    midnight: \"Mitternacht\",\n    noon: \"Mittag\",\n    morning: \"morgens\",\n    afternoon: \"nachm.\",\n    evening: \"abends\",\n    night: \"nachts\",\n  },\n  abbreviated: {\n    am: \"vorm.\",\n    pm: \"nachm.\",\n    midnight: \"Mitternacht\",\n    noon: \"Mittag\",\n    morning: \"morgens\",\n    afternoon: \"nachmittags\",\n    evening: \"abends\",\n    night: \"nachts\",\n  },\n  wide: {\n    am: \"vormittags\",\n    pm: \"nachmittags\",\n    midnight: \"Mitternacht\",\n    noon: \"Mittag\",\n    morning: \"morgens\",\n    afternoon: \"nachmittags\",\n    evening: \"abends\",\n    night: \"nachts\",\n  },\n};\n\nconst ordinalNumber = (dirtyNumber) => {\n  const number = Number(dirtyNumber);\n\n  return number + \".\";\n};\n\nexport const localize = {\n  ordinalNumber,\n\n  era: buildLocalizeFn({\n    values: eraValues,\n    defaultWidth: \"wide\",\n  }),\n\n  quarter: buildLocalizeFn({\n    values: quarterValues,\n    defaultWidth: \"wide\",\n    argumentCallback: (quarter) => quarter - 1,\n  }),\n\n  month: buildLocalizeFn({\n    values: monthValues,\n    formattingValues: formattingMonthValues,\n    defaultWidth: \"wide\",\n  }),\n\n  day: buildLocalizeFn({\n    values: dayValues,\n    defaultWidth: \"wide\",\n  }),\n\n  dayPeriod: buildLocalizeFn({\n    values: dayPeriodValues,\n    defaultWidth: \"wide\",\n    formattingValues: formattingDayPeriodValues,\n    defaultFormattingWidth: \"wide\",\n  }),\n};\n"],"names":["monthValues"],"mappings":"AAkBA,MAAMA,IAAc;AAAA,EAClB,QAAQ,CAAC,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,GAAG;AAAA,EAgBnE,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AACA;AAIUA,EAAY,QAgBdA,EAAY;","x_google_ignoreList":[0]}

package/dist/fondue-components17.js

@@ -1,49 +1,40 @@
-import { jsx as c } from "react/jsx-runtime";
-import { forwardRef as g } from "react";
-import a from "./fondue-components67.js";
-const x = g(
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { propsToCssVariables as n } from "./fondue-components46.js";
+import u from "./fondue-components71.js";
+const c = y(
   ({
-    as: e = "span",
+    as: a = "div",
+    "data-test-id": r = "fondue-grid",
     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,
+    role: e,
+    "aria-label": d,
+    "aria-hidden": s,
+    "aria-describedby": t,
+    "aria-labelledby": o,
+    "aria-expanded": p,
+    "aria-haspopup": l,
+    ...b
+  }, m) => /* @__PURE__ */ f(
+    a,
     {
-      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,
+      className: u.root,
+      "data-test-id": r,
+      style: n(b, { justify: "justify-items" }),
+      role: e,
+      "aria-label": d,
+      "aria-hidden": s,
+      "aria-describedby": t,
+      "aria-labelledby": o,
+      "aria-expanded": p,
+      "aria-haspopup": l,
+      ref: m,
       children: i
     }
   )
 );
-x.displayName = "Heading";
+c.displayName = "Grid";
 export {
-  x as Heading
+  c as Grid
 };
 //# sourceMappingURL=fondue-components17.js.map

package/dist/fondue-components17.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components17.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;"}
+{"version":3,"file":"fondue-components17.js","sources":["../src/components/Grid/Grid.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 SizeValue, type LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/grid.module.scss';\n\nexport type GridProps = LayoutComponentProps & {\n    /**\n     * The element to render the Grid component as.\n     * @default 'div'\n     */\n    as?: 'div' | 'span';\n\n    /**\n     * The display property.\n     * @default 'grid'\n     */\n    display?: 'none' | 'grid' | 'inline-grid';\n    /**\n     * The columns property.\n     */\n    columns?: Responsive<string | number>;\n    /**\n     * The rows property.\n     */\n    rows?: Responsive<string | number>;\n    /**\n     * The flow property.\n     */\n    flow?: Responsive<'row' | 'column' | 'dense' | 'row-dense' | 'column-dense'>;\n    /**\n     * The alignment of the children.\n     */\n    align?: Responsive<'start' | 'center' | 'end' | 'baseline' | 'stretch'>;\n    /**\n     * The justification of the children.\n     */\n    justify?: Responsive<'start' | 'center' | 'end' | 'between'>;\n    /**\n     * The gap between the children.\n     */\n    gap?: Responsive<SizeValue>;\n    /**\n     * The horizontal gap between the children.\n     */\n    gapX?: Responsive<SizeValue>;\n    /**\n     * The vertical gap between the children.\n     */\n    gapY?: Responsive<SizeValue>;\n\n    children?: ReactNode;\n    'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Grid = forwardRef<HTMLDivElement, GridProps>(\n    (\n        {\n            as: Component = 'div',\n            'data-test-id': dataTestId = 'fondue-grid',\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            <Component\n                className={styles.root}\n                data-test-id={dataTestId}\n                style={propsToCssVariables(props, { justify: 'justify-items' })}\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            </Component>\n        );\n    },\n);\nGrid.displayName = 'Grid';\n"],"names":["Grid","forwardRef","Component","dataTestId","children","role","ariaLabel","ariaHidden","ariaDescribedBy","ariaLabelledBy","ariaExpanded","ariaHasPopup","props","ref","jsx","styles","propsToCssVariables"],"mappings":";;;;AA2DO,MAAMA,IAAOC;AAAA,EAChB,CACI;AAAA,IACI,IAAIC,IAAY;AAAA,IAChB,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,IAACZ;AAAA,IAAA;AAAA,MACG,WAAWa,EAAO;AAAA,MAClB,gBAAcZ;AAAA,MACd,OAAOa,EAAoBJ,GAAO,EAAE,SAAS,iBAAiB;AAAA,MAC9D,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;AACAJ,EAAK,cAAc;"}

package/dist/fondue-components18.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-components68.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-components72.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-components18.js.map

package/dist/fondue-components18.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components18.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-components18.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-components19.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-components25.js";
-import o from "./fondue-components69.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-components73.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-components19.js.map

package/dist/fondue-components19.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components19.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-components19.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-components20.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-components70.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-components26.js";
+import o from "./fondue-components74.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-components20.js.map

package/dist/fondue-components20.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components20.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-components20.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-components21.js

@@ -1,24 +1,47 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import d from "./fondue-components71.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-components75.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-components21.js.map