@frontify/fondue-components 12.0.0 → 13.0.0

package/dist/fondue-components.js

@@ -1,52 +1,58 @@
 /* empty css                   */
 import { Box as t } from "./fondue-components3.js";
-import { Button as x } from "./fondue-components4.js";
+import { Button as m } from "./fondue-components4.js";
 import { Checkbox as f } from "./fondue-components5.js";
 import { ColorPicker as l } from "./fondue-components6.js";
 import { Dialog as d } from "./fondue-components7.js";
 import { Divider as T } from "./fondue-components8.js";
 import { Dropdown as S } from "./fondue-components9.js";
-import { Flex as u } from "./fondue-components10.js";
+import { Flex as h } from "./fondue-components10.js";
 import { Flyout as C } from "./fondue-components11.js";
 import { Grid as B } from "./fondue-components12.js";
-import { Label as F } from "./fondue-components13.js";
-import { LoadingBar as s } from "./fondue-components14.js";
-import { ScrollArea as w } from "./fondue-components15.js";
-import { Section as P } from "./fondue-components16.js";
-import { SegmentedControl as A } from "./fondue-components17.js";
-import { Select as I } from "./fondue-components18.js";
-import { Slider as q } from "./fondue-components19.js";
-import { Switch as E } from "./fondue-components20.js";
-import { Table as J } from "./fondue-components21.js";
-import { Tabs as M } from "./fondue-components22.js";
-import { TextInput as O } from "./fondue-components23.js";
-import { Tooltip as R } from "./fondue-components24.js";
-import { ThemeContext as V, ThemeProvider as W, useFondueTheme as X } from "./fondue-components25.js";
+import { Heading as F } from "./fondue-components13.js";
+import { Label as k } from "./fondue-components14.js";
+import { LoadingBar as v } from "./fondue-components15.js";
+import { LoadingCircle as P } from "./fondue-components16.js";
+import { ScrollArea as A } from "./fondue-components17.js";
+import { Section as H } from "./fondue-components18.js";
+import { SegmentedControl as j } from "./fondue-components19.js";
+import { Select as z } from "./fondue-components20.js";
+import { Slider as J } from "./fondue-components21.js";
+import { Switch as M } from "./fondue-components22.js";
+import { Table as O } from "./fondue-components23.js";
+import { Tabs as R } from "./fondue-components24.js";
+import { Text as V } from "./fondue-components25.js";
+import { TextInput as X } from "./fondue-components26.js";
+import { ThemeContext as Z, ThemeProvider as _, useFondueTheme as $ } from "./fondue-components27.js";
+import { Tooltip as ro } from "./fondue-components28.js";
 export {
   t as Box,
-  x as Button,
+  m as Button,
   f as Checkbox,
   l as ColorPicker,
   d as Dialog,
   T as Divider,
   S as Dropdown,
-  u as Flex,
+  h as Flex,
   C as Flyout,
   B as Grid,
-  F as Label,
-  s as LoadingBar,
-  w as ScrollArea,
-  P as Section,
-  A as SegmentedControl,
-  I as Select,
-  q as Slider,
-  E as Switch,
-  J as Table,
-  M as Tabs,
-  O as TextInput,
-  V as ThemeContext,
-  W as ThemeProvider,
-  R as Tooltip,
-  X as useFondueTheme
+  F as Heading,
+  k as Label,
+  v as LoadingBar,
+  P as LoadingCircle,
+  A as ScrollArea,
+  H as Section,
+  j as SegmentedControl,
+  z as Select,
+  J as Slider,
+  M as Switch,
+  O as Table,
+  R as Tabs,
+  V as Text,
+  X as TextInput,
+  Z as ThemeContext,
+  _ as ThemeProvider,
+  ro as Tooltip,
+  $ as useFondueTheme
 };
 //# sourceMappingURL=fondue-components.js.map

package/dist/fondue-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"fondue-components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/fondue-components10.js

@@ -1,7 +1,7 @@
 import { jsx as m } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
-import { propsToCssVariables as y } from "./fondue-components26.js";
-import x from "./fondue-components43.js";
+import { propsToCssVariables as y } from "./fondue-components29.js";
+import x from "./fondue-components46.js";
 const u = n(
   ({
     as: a = "div",

package/dist/fondue-components11.js

@@ -2,9 +2,9 @@ import { jsx as a, jsxs as l } from "react/jsx-runtime";
 import { IconCross as w } from "@frontify/fondue-icons";
 import * as i from "@radix-ui/react-popover";
 import { forwardRef as s } from "react";
-import { addAutoFocusAttribute as x, addShowFocusRing as C } from "./fondue-components38.js";
-import { useFondueTheme as b, ThemeProvider as T } from "./fondue-components25.js";
-import d from "./fondue-components44.js";
+import { addAutoFocusAttribute as x, addShowFocusRing as C } from "./fondue-components41.js";
+import { useFondueTheme as b, ThemeProvider as T } from "./fondue-components27.js";
+import d from "./fondue-components47.js";
 const n = ({ children: t, ...o }) => /* @__PURE__ */ a(i.Root, { ...o, children: t });
 n.displayName = "Flyout.Root";
 const m = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-trigger", ...r }, u) => /* @__PURE__ */ a(

package/dist/fondue-components12.js

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

package/dist/fondue-components13.js

@@ -1,27 +1,50 @@
-import { jsx as o } from "react/jsx-runtime";
-import * as d from "@radix-ui/react-label";
-import { forwardRef as i } from "react";
-import { cn as n } from "./fondue-components28.js";
-const s = ({ className: e, "data-test-id": a = "fondue-label", ...t }, r) => /* @__PURE__ */ o(
-  d.Root,
-  {
-    ref: r,
-    "data-required": t.required,
-    className: n(
-      'tw-group tw-flex tw-gap-1 tw-font-sans tw-font-normal peer-data-[state="checked"]:tw-font-medium peer-data-[state="indeterminate"]:tw-font-medium tw-text-body-medium tw-text-text-weak peer-hover:tw-text-text has-[+_*_input:hover:not(:disabled)]:tw-text-text tw-transition-colors',
-      // Disabled state if siblings has disabled state
-      "has-[+_*_:disabled]:tw-text-text-disabled has-[~_:disabled]:tw-cursor-not-allowed peer-disabled:tw-text-text-disabled peer-disabled:tw-cursor-not-allowed",
-      // Required asterisk
-      'after:tw-hidden data-[required="true"]:after:tw-flex after:tw-content-["*"] after:-tw-ml-1 after:tw-font-sans after:tw-text-body-small after:tw-font-medium after:tw-text-text-negative group-hover:tw-text-text-negative-hover',
-      e
-    ),
-    "data-test-id": a,
-    ...t
-  }
-), w = i(s);
-w.displayName = "Label";
+import { jsx as y } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import { cn as x } from "./fondue-components31.js";
+import a from "./fondue-components49.js";
+const $ = g(
+  ({
+    as: e = "span",
+    children: i,
+    className: r,
+    color: d = "default",
+    role: o,
+    size: t = "medium",
+    weight: l = "default",
+    "data-test-id": s = "fondue-heading",
+    "aria-describedby": p,
+    "aria-expanded": m,
+    "aria-haspopup": n,
+    "aria-hidden": b,
+    "aria-label": f,
+    "aria-labelledby": u,
+    ...c
+  }, h) => /* @__PURE__ */ y(
+    e,
+    {
+      className: x([
+        a.root,
+        a[`size-${t}`],
+        a[`weight-${l}`],
+        a[`color-${d}`],
+        r
+      ]),
+      role: o,
+      "aria-label": f,
+      "aria-hidden": b,
+      "aria-describedby": p,
+      "aria-labelledby": u,
+      "aria-expanded": m,
+      "aria-haspopup": n,
+      "data-test-id": s,
+      ref: h,
+      ...c,
+      children: i
+    }
+  )
+);
+$.displayName = "Heading";
 export {
-  w as Label,
-  s as LabelComponent
+  $ as Heading
 };
 //# sourceMappingURL=fondue-components13.js.map

package/dist/fondue-components13.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components13.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 ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\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    className?: string;\n    'data-test-id'?: string;\n};\n\nexport const LabelComponent = (\n    { className, 'data-test-id': dataTestId = 'fondue-label', ...props }: LabelProps,\n    ref: ForwardedRef<HTMLLabelElement>,\n) => {\n    return (\n        <LabelPrimitive.Root\n            ref={ref}\n            data-required={props.required}\n            className={cn(\n                'tw-group tw-flex tw-gap-1 tw-font-sans tw-font-normal peer-data-[state=\"checked\"]:tw-font-medium peer-data-[state=\"indeterminate\"]:tw-font-medium tw-text-body-medium tw-text-text-weak peer-hover:tw-text-text has-[+_*_input:hover:not(:disabled)]:tw-text-text tw-transition-colors',\n                // Disabled state if siblings has disabled state\n                'has-[+_*_:disabled]:tw-text-text-disabled has-[~_:disabled]:tw-cursor-not-allowed peer-disabled:tw-text-text-disabled peer-disabled:tw-cursor-not-allowed',\n                // Required asterisk\n                'after:tw-hidden data-[required=\"true\"]:after:tw-flex after:tw-content-[\"*\"] after:-tw-ml-1 after:tw-font-sans after:tw-text-body-small after:tw-font-medium after:tw-text-text-negative group-hover:tw-text-text-negative-hover',\n                className,\n            )}\n            data-test-id={dataTestId}\n            {...props}\n        />\n    );\n};\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(LabelComponent);\nLabel.displayName = 'Label';\n"],"names":["LabelComponent","className","dataTestId","props","ref","jsx","LabelPrimitive","cn","Label","forwardRef"],"mappings":";;;;AAuBa,MAAAA,IAAiB,CAC1B,EAAE,WAAAC,GAAW,gBAAgBC,IAAa,gBAAgB,GAAGC,EAAM,GACnEC,MAGI,gBAAAC;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,KAAAF;AAAA,IACA,iBAAeD,EAAM;AAAA,IACrB,WAAWI;AAAA,MACP;AAAA;AAAA,MAEA;AAAA;AAAA,MAEA;AAAA,MACAN;AAAA,IACJ;AAAA,IACA,gBAAcC;AAAA,IACb,GAAGC;AAAA,EAAA;AACR,GAIKK,IAAQC,EAAyCT,CAAc;AAC5EQ,EAAM,cAAc;"}
+{"version":3,"file":"fondue-components13.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';\nimport { cn } from '#/utilities/styleUtilities';\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={cn([\n                    styles.root,\n                    styles[`size-${size}`],\n                    styles[`weight-${weight}`],\n                    styles[`color-${color}`],\n                    className,\n                ])}\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","cn","styles"],"mappings":";;;;AA+BO,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,KAEPC,MAGI,gBAAAC;AAAA,IAAChB;AAAA,IAAA;AAAA,MACG,WAAWiB,EAAG;AAAA,QACVC,EAAO;AAAA,QACPA,EAAO,QAAQb,CAAI,EAAE;AAAA,QACrBa,EAAO,UAAUZ,CAAM,EAAE;AAAA,QACzBY,EAAO,SAASf,CAAK,EAAE;AAAA,QACvBD;AAAA,MAAA,CACH;AAAA,MACD,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,EACL;AAGZ;AAIAH,EAAQ,cAAc;"}

package/dist/fondue-components14.js

@@ -1,42 +1,27 @@
-import { jsx as i } from "react/jsx-runtime";
-import * as t from "@radix-ui/react-progress";
-import { forwardRef as m } from "react";
-import { loadingBarContainerStyles as g, loadingBarStyles as f } from "./fondue-components46.js";
-const p = m(
-  ({
-    value: a,
-    max: r = 100,
-    rounded: d = !0,
-    variant: o = "default",
-    size: e = "medium",
-    "data-test-id": n = "fondue-loading-bar",
-    ...l
-  }, s) => /* @__PURE__ */ i(
-    t.Root,
-    {
-      ref: s,
-      "data-test-id": n,
-      className: g({ rounded: d, size: e, variant: o }),
-      "aria-busy": a !== r,
-      value: a,
-      max: r,
-      style: {
-        "--loading-bar-value": a,
-        "--loading-bar-max": r,
-        "--loading-bar-proportion": "calc(var(--loading-bar-value) / var(--loading-bar-max))"
-      },
-      ...l,
-      children: /* @__PURE__ */ i(
-        t.Indicator,
-        {
-          className: f({ variant: o, indeterminateState: a === null })
-        }
-      )
-    }
-  )
-);
-p.displayName = "LoadingBar";
+import { jsx as o } from "react/jsx-runtime";
+import * as d from "@radix-ui/react-label";
+import { forwardRef as i } from "react";
+import { cn as n } from "./fondue-components31.js";
+const s = ({ className: e, "data-test-id": a = "fondue-label", ...t }, r) => /* @__PURE__ */ o(
+  d.Root,
+  {
+    ref: r,
+    "data-required": t.required,
+    className: n(
+      'tw-group tw-flex tw-gap-1 tw-font-sans tw-font-normal peer-data-[state="checked"]:tw-font-medium peer-data-[state="indeterminate"]:tw-font-medium tw-text-body-medium tw-text-text-weak peer-hover:tw-text-text has-[+_*_input:hover:not(:disabled)]:tw-text-text tw-transition-colors',
+      // Disabled state if siblings has disabled state
+      "has-[+_*_:disabled]:tw-text-text-disabled has-[~_:disabled]:tw-cursor-not-allowed peer-disabled:tw-text-text-disabled peer-disabled:tw-cursor-not-allowed",
+      // Required asterisk
+      'after:tw-hidden data-[required="true"]:after:tw-flex after:tw-content-["*"] after:-tw-ml-1 after:tw-font-sans after:tw-text-body-small after:tw-font-medium after:tw-text-text-negative group-hover:tw-text-text-negative-hover',
+      e
+    ),
+    "data-test-id": a,
+    ...t
+  }
+), w = i(s);
+w.displayName = "Label";
 export {
-  p as LoadingBar
+  w as Label,
+  s as LabelComponent
 };
 //# sourceMappingURL=fondue-components14.js.map

package/dist/fondue-components14.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components14.js","sources":["../src/components/LoadingBar/LoadingBar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as ProgressRadixPrimitive from '@radix-ui/react-progress';\nimport { forwardRef, type CSSProperties, type ElementRef, type ForwardedRef } from 'react';\n\nimport { loadingBarContainerStyles, loadingBarStyles } from './styles/loadingBarStyles';\n\nexport type LoadingBarProps = {\n    /**\n     * The current value of the loading bar. If `null`, the loading bar will be in an indeterminate state.\n     * @default null\n     */\n    value: number | null;\n    /**\n     * The maximum value of the loading bar\n     * @default 100\n     */\n    max?: number;\n    /**\n     * @default 'fondue-loading-bar'\n     */\n    'data-test-id'?: string;\n    /**\n     * Add rounded corners to the loading bar\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * The style of the loading bar\n     * @default \"default\"\n     */\n    variant?: 'default' | 'positive' | 'negative';\n    /**\n     * The size of the loading bar\n     * @default \"medium\"\n     */\n    size?: 'small' | 'medium' | 'large' | 'x-large';\n    /**\n     * The label of the loading bar for accessibility purposes\n     */\n    getValueLabel?: (value: number, max: number) => string;\n} & ({ 'aria-label': string } | { 'aria-labelledby': string });\n\nexport const LoadingBar = forwardRef<ElementRef<typeof ProgressRadixPrimitive.Root>, LoadingBarProps>(\n    (\n        {\n            value,\n            max = 100,\n            rounded = true,\n            variant = 'default',\n            size = 'medium',\n            'data-test-id': dataTestId = 'fondue-loading-bar',\n            ...props\n        }: LoadingBarProps,\n        ref: ForwardedRef<ElementRef<typeof ProgressRadixPrimitive.Root>>,\n    ) => {\n        return (\n            <ProgressRadixPrimitive.Root\n                ref={ref}\n                data-test-id={dataTestId}\n                className={loadingBarContainerStyles({ rounded, size, variant })}\n                aria-busy={value !== max}\n                value={value}\n                max={max}\n                style={\n                    {\n                        '--loading-bar-value': value,\n                        '--loading-bar-max': max,\n                        '--loading-bar-proportion': 'calc(var(--loading-bar-value) / var(--loading-bar-max))',\n                    } as CSSProperties\n                }\n                {...props}\n            >\n                <ProgressRadixPrimitive.Indicator\n                    className={loadingBarStyles({ variant, indeterminateState: value === null })}\n                />\n            </ProgressRadixPrimitive.Root>\n        );\n    },\n);\nLoadingBar.displayName = 'LoadingBar';\n"],"names":["LoadingBar","forwardRef","value","max","rounded","variant","size","dataTestId","props","ref","jsx","ProgressRadixPrimitive","loadingBarContainerStyles","loadingBarStyles"],"mappings":";;;;AA2CO,MAAMA,IAAaC;AAAA,EACtB,CACI;AAAA,IACI,OAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,IAC7B,GAAGC;AAAA,KAEPC,MAGI,gBAAAC;AAAA,IAACC,EAAuB;AAAA,IAAvB;AAAA,MACG,KAAAF;AAAA,MACA,gBAAcF;AAAA,MACd,WAAWK,EAA0B,EAAE,SAAAR,GAAS,MAAAE,GAAM,SAAAD,GAAS;AAAA,MAC/D,aAAWH,MAAUC;AAAA,MACrB,OAAAD;AAAA,MACA,KAAAC;AAAA,MACA,OACI;AAAA,QACI,uBAAuBD;AAAA,QACvB,qBAAqBC;AAAA,QACrB,4BAA4B;AAAA,MAChC;AAAA,MAEH,GAAGK;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACC,EAAuB;AAAA,QAAvB;AAAA,UACG,WAAWE,EAAiB,EAAE,SAAAR,GAAS,oBAAoBH,MAAU,KAAM,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC/E;AAAA,EACJ;AAGZ;AACAF,EAAW,cAAc;"}
+{"version":3,"file":"fondue-components14.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 ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\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    className?: string;\n    'data-test-id'?: string;\n};\n\nexport const LabelComponent = (\n    { className, 'data-test-id': dataTestId = 'fondue-label', ...props }: LabelProps,\n    ref: ForwardedRef<HTMLLabelElement>,\n) => {\n    return (\n        <LabelPrimitive.Root\n            ref={ref}\n            data-required={props.required}\n            className={cn(\n                'tw-group tw-flex tw-gap-1 tw-font-sans tw-font-normal peer-data-[state=\"checked\"]:tw-font-medium peer-data-[state=\"indeterminate\"]:tw-font-medium tw-text-body-medium tw-text-text-weak peer-hover:tw-text-text has-[+_*_input:hover:not(:disabled)]:tw-text-text tw-transition-colors',\n                // Disabled state if siblings has disabled state\n                'has-[+_*_:disabled]:tw-text-text-disabled has-[~_:disabled]:tw-cursor-not-allowed peer-disabled:tw-text-text-disabled peer-disabled:tw-cursor-not-allowed',\n                // Required asterisk\n                'after:tw-hidden data-[required=\"true\"]:after:tw-flex after:tw-content-[\"*\"] after:-tw-ml-1 after:tw-font-sans after:tw-text-body-small after:tw-font-medium after:tw-text-text-negative group-hover:tw-text-text-negative-hover',\n                className,\n            )}\n            data-test-id={dataTestId}\n            {...props}\n        />\n    );\n};\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(LabelComponent);\nLabel.displayName = 'Label';\n"],"names":["LabelComponent","className","dataTestId","props","ref","jsx","LabelPrimitive","cn","Label","forwardRef"],"mappings":";;;;AAuBa,MAAAA,IAAiB,CAC1B,EAAE,WAAAC,GAAW,gBAAgBC,IAAa,gBAAgB,GAAGC,EAAM,GACnEC,MAGI,gBAAAC;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,KAAAF;AAAA,IACA,iBAAeD,EAAM;AAAA,IACrB,WAAWI;AAAA,MACP;AAAA;AAAA,MAEA;AAAA;AAAA,MAEA;AAAA,MACAN;AAAA,IACJ;AAAA,IACA,gBAAcC;AAAA,IACb,GAAGC;AAAA,EAAA;AACR,GAIKK,IAAQC,EAAyCT,CAAc;AAC5EQ,EAAM,cAAc;"}

package/dist/fondue-components15.js

@@ -1,69 +1,42 @@
-import { jsxs as n, jsx as l } from "react/jsx-runtime";
-import * as o from "@radix-ui/react-scroll-area";
-import { forwardRef as b } from "react";
-import a from "./fondue-components47.js";
-const h = ({
-  type: t,
-  maxHeight: e = "100%",
-  maxWidth: s = "100%",
-  showShadow: c = !1,
-  children: i,
-  "data-test-id": r = "fondue-scroll-area"
-}, m) => /* @__PURE__ */ n(
-  o.Root,
-  {
-    type: t,
-    className: a.root,
-    style: { maxWidth: s },
-    "data-test-id": r,
-    ref: m,
-    children: [
-      /* @__PURE__ */ l(
-        o.Viewport,
+import { jsx as i } from "react/jsx-runtime";
+import * as t from "@radix-ui/react-progress";
+import { forwardRef as m } from "react";
+import { loadingBarContainerStyles as g, loadingBarStyles as f } from "./fondue-components50.js";
+const p = m(
+  ({
+    value: a,
+    max: r = 100,
+    rounded: d = !0,
+    variant: o = "default",
+    size: e = "medium",
+    "data-test-id": n = "fondue-loading-bar",
+    ...l
+  }, s) => /* @__PURE__ */ i(
+    t.Root,
+    {
+      ref: s,
+      "data-test-id": n,
+      className: g({ rounded: d, size: e, variant: o }),
+      "aria-busy": a !== r,
+      value: a,
+      max: r,
+      style: {
+        "--loading-bar-value": a,
+        "--loading-bar-max": r,
+        "--loading-bar-proportion": "calc(var(--loading-bar-value) / var(--loading-bar-max))"
+      },
+      ...l,
+      children: /* @__PURE__ */ i(
+        t.Indicator,
         {
-          className: a.viewport,
-          style: { maxHeight: e },
-          "data-test-id": `${r}-viewport`,
-          "data-show-shadow": c,
-          children: i
+          className: f({ variant: o, indeterminateState: a === null })
         }
-      ),
-      /* @__PURE__ */ l(
-        o.Scrollbar,
-        {
-          className: a.scrollbar,
-          orientation: "vertical",
-          "data-test-id": `${r}-vertical-scrollbar`,
-          children: /* @__PURE__ */ l(
-            o.Thumb,
-            {
-              className: a.thumb,
-              "data-test-id": `${r}-vertical-scrollbar-thumb`
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ l(
-        o.Scrollbar,
-        {
-          className: a.scrollbar,
-          orientation: "horizontal",
-          "data-test-id": `${r}-horizontal-scrollbar`,
-          children: /* @__PURE__ */ l(
-            o.Thumb,
-            {
-              className: a.thumb,
-              "data-test-id": `${r}-horizontal-scrollbar-thumb`
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ l(o.Corner, { className: a.corner, "data-test-id": `${r}-corner` })
-    ]
-  }
-), d = b(h);
-d.displayName = "ScrollArea";
+      )
+    }
+  )
+);
+p.displayName = "LoadingBar";
 export {
-  d as ScrollArea
+  p as LoadingBar
 };
 //# sourceMappingURL=fondue-components15.js.map

package/dist/fondue-components15.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components15.js","sources":["../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixScrollArea from '@radix-ui/react-scroll-area';\nimport { type ForwardedRef, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport styles from './styles/scrollArea.module.scss';\n\nexport type ScrollAreaProps = {\n    /**\n     * \"auto\" visible when content is overflowing on the corresponding orientation.\n     * \"always\" always visible regardless of whether the content is overflowing.\n     * \"scroll\" visible when the user is scrolling along its corresponding orientation.\n     * \"hover\" when the user is hovering over the scroll area.\n     * @default 'hover'\n     */\n    type?: 'auto' | 'always' | 'scroll' | 'hover';\n    /**\n     * Maximum height of the scroll area\n     * @default '100%'\n     */\n    maxHeight?: string | number;\n    /**\n     * Minimum width of the scroll area\n     * @default '100%'\n     */\n    maxWidth?: string | number;\n    /**\n     * Determines if a inset shadow should be shown the edge of the component\n     */\n    showShadow?: boolean;\n    'data-test-id'?: string;\n    children: ReactNode;\n};\n\nconst ScrollAreaComponent = (\n    {\n        type,\n        maxHeight = '100%',\n        maxWidth = '100%',\n        showShadow = false,\n        children,\n        'data-test-id': dataTestId = 'fondue-scroll-area',\n    }: ScrollAreaProps,\n    ref: ForwardedRef<HTMLDivElement>,\n): ReactElement => {\n    return (\n        <RadixScrollArea.Root\n            type={type}\n            className={styles.root}\n            style={{ maxWidth }}\n            data-test-id={dataTestId}\n            ref={ref}\n        >\n            <RadixScrollArea.Viewport\n                className={styles.viewport}\n                style={{ maxHeight }}\n                data-test-id={`${dataTestId}-viewport`}\n                data-show-shadow={showShadow}\n            >\n                {children}\n            </RadixScrollArea.Viewport>\n            <RadixScrollArea.Scrollbar\n                className={styles.scrollbar}\n                orientation=\"vertical\"\n                data-test-id={`${dataTestId}-vertical-scrollbar`}\n            >\n                <RadixScrollArea.Thumb\n                    className={styles.thumb}\n                    data-test-id={`${dataTestId}-vertical-scrollbar-thumb`}\n                />\n            </RadixScrollArea.Scrollbar>\n            <RadixScrollArea.Scrollbar\n                className={styles.scrollbar}\n                orientation=\"horizontal\"\n                data-test-id={`${dataTestId}-horizontal-scrollbar`}\n            >\n                <RadixScrollArea.Thumb\n                    className={styles.thumb}\n                    data-test-id={`${dataTestId}-horizontal-scrollbar-thumb`}\n                />\n            </RadixScrollArea.Scrollbar>\n            <RadixScrollArea.Corner className={styles.corner} data-test-id={`${dataTestId}-corner`} />\n        </RadixScrollArea.Root>\n    );\n};\n\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(ScrollAreaComponent);\nScrollArea.displayName = 'ScrollArea';\n"],"names":["ScrollAreaComponent","type","maxHeight","maxWidth","showShadow","children","dataTestId","ref","jsxs","RadixScrollArea","styles","jsx","ScrollArea","forwardRef"],"mappings":";;;;AAkCA,MAAMA,IAAsB,CACxB;AAAA,EACI,MAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,GACAC,MAGI,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACG,MAAAR;AAAA,IACA,WAAWS,EAAO;AAAA,IAClB,OAAO,EAAE,UAAAP,EAAS;AAAA,IAClB,gBAAcG;AAAA,IACd,KAAAC;AAAA,IAEA,UAAA;AAAA,MAAA,gBAAAI;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,OAAO,EAAE,WAAAR,EAAU;AAAA,UACnB,gBAAc,GAAGI,CAAU;AAAA,UAC3B,oBAAkBF;AAAA,UAEjB,UAAAC;AAAA,QAAA;AAAA,MACL;AAAA,MACA,gBAAAM;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,aAAY;AAAA,UACZ,gBAAc,GAAGJ,CAAU;AAAA,UAE3B,UAAA,gBAAAK;AAAA,YAACF,EAAgB;AAAA,YAAhB;AAAA,cACG,WAAWC,EAAO;AAAA,cAClB,gBAAc,GAAGJ,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAC/B;AAAA,MACJ;AAAA,MACA,gBAAAK;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,aAAY;AAAA,UACZ,gBAAc,GAAGJ,CAAU;AAAA,UAE3B,UAAA,gBAAAK;AAAA,YAACF,EAAgB;AAAA,YAAhB;AAAA,cACG,WAAWC,EAAO;AAAA,cAClB,gBAAc,GAAGJ,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAC/B;AAAA,MACJ;AAAA,MACA,gBAAAK,EAACF,EAAgB,QAAhB,EAAuB,WAAWC,EAAO,QAAQ,gBAAc,GAAGJ,CAAU,UAAW,CAAA;AAAA,IAAA;AAAA,EAAA;AAC5F,GAIKM,IAAaC,EAA4Cb,CAAmB;AACzFY,EAAW,cAAc;"}
+{"version":3,"file":"fondue-components15.js","sources":["../src/components/LoadingBar/LoadingBar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as ProgressRadixPrimitive from '@radix-ui/react-progress';\nimport { forwardRef, type CSSProperties, type ElementRef, type ForwardedRef } from 'react';\n\nimport { loadingBarContainerStyles, loadingBarStyles } from './styles/loadingBarStyles';\n\nexport type LoadingBarProps = {\n    /**\n     * The current value of the loading bar. If `null`, the loading bar will be in an indeterminate state.\n     * @default null\n     */\n    value: number | null;\n    /**\n     * The maximum value of the loading bar\n     * @default 100\n     */\n    max?: number;\n    /**\n     * @default 'fondue-loading-bar'\n     */\n    'data-test-id'?: string;\n    /**\n     * Add rounded corners to the loading bar\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * The style of the loading bar\n     * @default \"default\"\n     */\n    variant?: 'default' | 'positive' | 'negative';\n    /**\n     * The size of the loading bar\n     * @default \"medium\"\n     */\n    size?: 'small' | 'medium' | 'large' | 'x-large';\n    /**\n     * The label of the loading bar for accessibility purposes\n     */\n    getValueLabel?: (value: number, max: number) => string;\n} & ({ 'aria-label': string } | { 'aria-labelledby': string });\n\nexport const LoadingBar = forwardRef<ElementRef<typeof ProgressRadixPrimitive.Root>, LoadingBarProps>(\n    (\n        {\n            value,\n            max = 100,\n            rounded = true,\n            variant = 'default',\n            size = 'medium',\n            'data-test-id': dataTestId = 'fondue-loading-bar',\n            ...props\n        }: LoadingBarProps,\n        ref: ForwardedRef<ElementRef<typeof ProgressRadixPrimitive.Root>>,\n    ) => {\n        return (\n            <ProgressRadixPrimitive.Root\n                ref={ref}\n                data-test-id={dataTestId}\n                className={loadingBarContainerStyles({ rounded, size, variant })}\n                aria-busy={value !== max}\n                value={value}\n                max={max}\n                style={\n                    {\n                        '--loading-bar-value': value,\n                        '--loading-bar-max': max,\n                        '--loading-bar-proportion': 'calc(var(--loading-bar-value) / var(--loading-bar-max))',\n                    } as CSSProperties\n                }\n                {...props}\n            >\n                <ProgressRadixPrimitive.Indicator\n                    className={loadingBarStyles({ variant, indeterminateState: value === null })}\n                />\n            </ProgressRadixPrimitive.Root>\n        );\n    },\n);\nLoadingBar.displayName = 'LoadingBar';\n"],"names":["LoadingBar","forwardRef","value","max","rounded","variant","size","dataTestId","props","ref","jsx","ProgressRadixPrimitive","loadingBarContainerStyles","loadingBarStyles"],"mappings":";;;;AA2CO,MAAMA,IAAaC;AAAA,EACtB,CACI;AAAA,IACI,OAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,IAC7B,GAAGC;AAAA,KAEPC,MAGI,gBAAAC;AAAA,IAACC,EAAuB;AAAA,IAAvB;AAAA,MACG,KAAAF;AAAA,MACA,gBAAcF;AAAA,MACd,WAAWK,EAA0B,EAAE,SAAAR,GAAS,MAAAE,GAAM,SAAAD,GAAS;AAAA,MAC/D,aAAWH,MAAUC;AAAA,MACrB,OAAAD;AAAA,MACA,KAAAC;AAAA,MACA,OACI;AAAA,QACI,uBAAuBD;AAAA,QACvB,qBAAqBC;AAAA,QACrB,4BAA4B;AAAA,MAChC;AAAA,MAEH,GAAGK;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACC,EAAuB;AAAA,QAAvB;AAAA,UACG,WAAWE,EAAiB,EAAE,SAAAR,GAAS,oBAAoBH,MAAU,KAAM,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC/E;AAAA,EACJ;AAGZ;AACAF,EAAW,cAAc;"}

package/dist/fondue-components16.js

@@ -1,39 +1,24 @@
-import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import { propsToCssVariables as c } from "./fondue-components26.js";
-import f from "./fondue-components48.js";
-const y = m(
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import d from "./fondue-components51.js";
+const s = i(
   ({
-    "data-test-id": a = "fondue-section",
-    children: e,
-    role: r,
-    "aria-label": i,
-    "aria-hidden": o,
-    "aria-describedby": d,
-    "aria-labelledby": s,
-    "aria-expanded": t,
-    "aria-haspopup": p,
-    ...l
-  }, b) => /* @__PURE__ */ n(
-    "section",
+    variant: t = "progress",
+    size: a = "medium",
+    "data-test-id": r = "fondue-loading-circle-content"
+  }, o) => /* @__PURE__ */ e(
+    "div",
     {
-      className: f.root,
-      "data-test-id": a,
-      style: c(l),
-      role: r,
-      "aria-label": i,
-      "aria-hidden": o,
-      "aria-describedby": d,
-      "aria-labelledby": s,
-      "aria-expanded": t,
-      "aria-haspopup": p,
-      ref: b,
-      children: e
+      ref: o,
+      "data-test-id": r,
+      "data-variant": t,
+      "data-size": a,
+      className: d.root
     }
   )
 );
-y.displayName = "Section";
+s.displayName = "LoadingCircle";
 export {
-  y as Section
+  s as LoadingCircle
 };
 //# sourceMappingURL=fondue-components16.js.map

package/dist/fondue-components16.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components16.js","sources":["../src/components/Section/Section.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { type Responsive, type LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/section.module.scss';\n\nexport type SectionProps = LayoutComponentProps & {\n    /**\n     * The display property.\n     * @default 'block'\n     */\n    display?: Responsive<'none' | 'block' | 'inline-block' | 'inline'>;\n\n    children?: ReactNode;\n    'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Section = forwardRef<HTMLDivElement, SectionProps>(\n    (\n        {\n            'data-test-id': dataTestId = 'fondue-section',\n            children,\n            role,\n            'aria-label': ariaLabel,\n            'aria-hidden': ariaHidden,\n            'aria-describedby': ariaDescribedBy,\n            'aria-labelledby': ariaLabelledBy,\n            'aria-expanded': ariaExpanded,\n            'aria-haspopup': ariaHasPopup,\n            ...props\n        },\n        ref,\n    ) => {\n        return (\n            <section\n                className={styles.root}\n                data-test-id={dataTestId}\n                style={propsToCssVariables(props)}\n                role={role}\n                aria-label={ariaLabel}\n                aria-hidden={ariaHidden}\n                aria-describedby={ariaDescribedBy}\n                aria-labelledby={ariaLabelledBy}\n                aria-expanded={ariaExpanded}\n                aria-haspopup={ariaHasPopup}\n                ref={ref}\n            >\n                {children}\n            </section>\n        );\n    },\n);\nSection.displayName = 'Section';\n"],"names":["Section","forwardRef","dataTestId","children","role","ariaLabel","ariaHidden","ariaDescribedBy","ariaLabelledBy","ariaExpanded","ariaHasPopup","props","ref","jsx","styles","propsToCssVariables"],"mappings":";;;;AAqBO,MAAMA,IAAUC;AAAA,EACnB,CACI;AAAA,IACI,gBAAgBC,IAAa;AAAA,IAC7B,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAcC;AAAA,IACd,eAAeC;AAAA,IACf,oBAAoBC;AAAA,IACpB,mBAAmBC;AAAA,IACnB,iBAAiBC;AAAA,IACjB,iBAAiBC;AAAA,IACjB,GAAGC;AAAA,KAEPC,MAGI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAO;AAAA,MAClB,gBAAcZ;AAAA,MACd,OAAOa,EAAoBJ,CAAK;AAAA,MAChC,MAAAP;AAAA,MACA,cAAYC;AAAA,MACZ,eAAaC;AAAA,MACb,oBAAkBC;AAAA,MAClB,mBAAiBC;AAAA,MACjB,iBAAeC;AAAA,MACf,iBAAeC;AAAA,MACf,KAAAE;AAAA,MAEC,UAAAT;AAAA,IAAA;AAAA,EACL;AAGZ;AACAH,EAAQ,cAAc;"}
+{"version":3,"file":"fondue-components16.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,KAEjCC,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,EACrB;AAGb;AACAP,EAAc,cAAc;"}