@frontify/fondue-components 25.0.0-rc.2 → 25.0.0-rc.3

package/dist/fondue-components.js

@@ -2,71 +2,75 @@
 import { Accordion as t } from "./fondue-components3.js";
 import { Badge as m } from "./fondue-components4.js";
 import { Box as f } from "./fondue-components5.js";
-import { Button as l } from "./fondue-components6.js";
-import { Checkbox as a } from "./fondue-components7.js";
-import { ColorPicker as T } from "./fondue-components8.js";
+import { Button as a } from "./fondue-components6.js";
+import { Checkbox as l } from "./fondue-components7.js";
+import { ColorPicker as c } from "./fondue-components8.js";
 import { Dialog as g } from "./fondue-components9.js";
 import { Divider as S } from "./fondue-components10.js";
 import { Dropdown as B } from "./fondue-components11.js";
-import { Flex as b } from "./fondue-components12.js";
+import { Flex as L } from "./fondue-components12.js";
 import { Flyout as k } from "./fondue-components13.js";
-import { Grid as D } from "./fondue-components14.js";
-import { Heading as P } from "./fondue-components15.js";
+import { Grid as v } from "./fondue-components14.js";
+import { Heading as F } from "./fondue-components15.js";
 import { Label as w } from "./fondue-components16.js";
-import { Link as y } from "./fondue-components17.js";
-import { LoadingBar as H } from "./fondue-components18.js";
-import { LoadingCircle as R } from "./fondue-components19.js";
-import { RouterProvider as q } from "./fondue-components20.js";
-import { ScrollArea as E } from "./fondue-components21.js";
-import { Section as K } from "./fondue-components22.js";
-import { SegmentedControl as N } from "./fondue-components23.js";
-import { Select as Q } from "./fondue-components24.js";
-import { Slider as V } from "./fondue-components25.js";
-import { SplitButton as X } from "./fondue-components26.js";
-import { Switch as Z } from "./fondue-components27.js";
-import { Table as $ } from "./fondue-components28.js";
-import { Tag as ro } from "./fondue-components29.js";
-import { Tabs as to } from "./fondue-components30.js";
-import { Text as mo } from "./fondue-components31.js";
-import { TextInput as fo } from "./fondue-components32.js";
-import { Textarea as lo } from "./fondue-components33.js";
-import { ThemeContext as ao, ThemeProvider as To, useFondueTheme as co } from "./fondue-components34.js";
-import { Tooltip as uo } from "./fondue-components35.js";
+import { Link as R } from "./fondue-components17.js";
+import { LoadingBar as G } from "./fondue-components18.js";
+import { LoadingCircle as I } from "./fondue-components19.js";
+import { Notice as j } from "./fondue-components20.js";
+import { RadioList as z } from "./fondue-components21.js";
+import { RouterProvider as J } from "./fondue-components22.js";
+import { ScrollArea as M } from "./fondue-components23.js";
+import { Section as Q } from "./fondue-components24.js";
+import { SegmentedControl as V } from "./fondue-components25.js";
+import { Select as X } from "./fondue-components26.js";
+import { Slider as Z } from "./fondue-components27.js";
+import { SplitButton as $ } from "./fondue-components28.js";
+import { Switch as ro } from "./fondue-components29.js";
+import { Table as to } from "./fondue-components30.js";
+import { Tag as mo } from "./fondue-components31.js";
+import { Tabs as fo } from "./fondue-components32.js";
+import { Text as ao } from "./fondue-components33.js";
+import { TextInput as no } from "./fondue-components34.js";
+import { Textarea as To } from "./fondue-components35.js";
+import { ThemeContext as uo, ThemeProvider as So, useFondueTheme as ho } from "./fondue-components36.js";
+import { Tooltip as Co } from "./fondue-components37.js";
 export {
   t as Accordion,
   m as Badge,
   f as Box,
-  l as Button,
-  a as Checkbox,
-  T as ColorPicker,
+  a as Button,
+  l as Checkbox,
+  c as ColorPicker,
   g as Dialog,
   S as Divider,
   B as Dropdown,
-  b as Flex,
+  L as Flex,
   k as Flyout,
-  D as Grid,
-  P as Heading,
+  v as Grid,
+  F as Heading,
   w as Label,
-  y as Link,
-  H as LoadingBar,
-  R as LoadingCircle,
-  q as RouterProvider,
-  E as ScrollArea,
-  K as Section,
-  N as SegmentedControl,
-  Q as Select,
-  V as Slider,
-  X as SplitButton,
-  Z as Switch,
-  $ as Table,
-  to as Tabs,
-  ro as Tag,
-  mo as Text,
-  fo as TextInput,
-  lo as Textarea,
-  ao as ThemeContext,
-  To as ThemeProvider,
-  uo as Tooltip,
-  co as useFondueTheme
+  R as Link,
+  G as LoadingBar,
+  I as LoadingCircle,
+  j as Notice,
+  z as RadioList,
+  J as RouterProvider,
+  M as ScrollArea,
+  Q as Section,
+  V as SegmentedControl,
+  X as Select,
+  Z as Slider,
+  $ as SplitButton,
+  ro as Switch,
+  to as Table,
+  fo as Tabs,
+  mo as Tag,
+  ao as Text,
+  no as TextInput,
+  To as Textarea,
+  uo as ThemeContext,
+  So as ThemeProvider,
+  Co as Tooltip,
+  ho 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,42 +1,32 @@
-import { jsx as a } from "react/jsx-runtime";
-import * as f from "@radix-ui/react-separator";
-import { forwardRef as l } from "react";
-import { cn as v } from "./fondue-components42.js";
-import c from "./fondue-components55.js";
-import { dividerStyles as h } from "./fondue-components56.js";
-const u = l(
+import { jsx as t } from "react/jsx-runtime";
+import * as p from "@radix-ui/react-separator";
+import { forwardRef as f } from "react";
+import c from "./fondue-components54.js";
+const u = f(
   ({
-    "data-test-id": i = "fondue-divider",
-    direction: r = "horizontal",
-    className: d,
-    variant: o,
-    color: t,
-    as: e = "div",
-    decorative: m,
-    ...s
+    "data-test-id": a = "fondue-divider",
+    direction: o = "horizontal",
+    padding: r = "medium",
+    className: d = "",
+    variant: i = "solid",
+    color: e = "default",
+    as: m = "div",
+    decorative: s
   }, n) => {
-    const p = e;
-    return /* @__PURE__ */ a(
-      f.Root,
+    const l = m;
+    return /* @__PURE__ */ t(
+      p.Root,
       {
         ref: n,
-        className: v(
-          h({
-            direction: r,
-            variant: o,
-            color: t,
-            ...s
-          }),
-          c.root,
-          d
-        ),
-        "data-variant": o,
-        "data-color": t,
-        "data-test-id": i,
-        decorative: m,
-        "data-orientation": r,
+        className: `${c.root} ${d}`,
+        "data-variant": i,
+        "data-color": e,
+        "data-padding": r,
+        "data-test-id": a,
+        decorative: s,
+        "data-orientation": o,
         asChild: !0,
-        children: /* @__PURE__ */ a(p, {})
+        children: /* @__PURE__ */ t(l, {})
       }
     );
   }

package/dist/fondue-components10.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components10.js","sources":["../src/components/Divider/Divider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as Separator from '@radix-ui/react-separator';\nimport { forwardRef, type ForwardedRef, type ReactElement } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport borderStyles from './styles/borderStyles.module.scss';\nimport { dividerStyles } from './styles/dividerStyles';\n\ntype DividerStyle = 'noline' | 'dashed' | 'solid';\ntype DividerPadding = 'none' | 'small' | 'medium' | 'large';\ntype DividerDirection = 'horizontal' | 'vertical';\ntype DividerColor = 'weak' | 'default' | 'strong';\n\nexport type DividerProps = {\n    /**\n     * The style of the divider\n     * @default \"solid\"\n     */\n    variant?: DividerStyle;\n    /**\n     * The padding of the divider\n     * @default \"medium\"\n     */\n    padding?: DividerPadding;\n    /**\n     * The color of the divider\n     * @default \"default\"\n     */\n    color?: DividerColor;\n    /**\n     * The direction of the divider\n     * @default \"horizontal\"\n     */\n    direction?: DividerDirection;\n    /**\n     * The html element to be used\n     * @default \"div\"\n     */\n    as?: 'div' | 'li';\n    /**\n     * When `true`, signifies that it is purely visual, carries no semantic\n     * meaning, and ensures it is not present in the accessibility tree.\n     * @default false\n     */\n    decorative?: boolean;\n    'data-test-id'?: string;\n    className?: string;\n};\n\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(\n    (\n        {\n            'data-test-id': dataTestId = 'fondue-divider',\n            direction = 'horizontal',\n            className,\n            variant,\n            color,\n            as = 'div',\n            decorative,\n            ...props\n        }: DividerProps,\n        ref: ForwardedRef<HTMLDivElement | null>,\n    ): ReactElement => {\n        const Component = as;\n\n        return (\n            <Separator.Root\n                ref={ref}\n                className={cn(\n                    dividerStyles({\n                        direction,\n                        variant,\n                        color,\n                        ...props,\n                    }),\n                    borderStyles.root,\n                    className,\n                )}\n                data-variant={variant}\n                data-color={color}\n                data-test-id={dataTestId}\n                decorative={decorative}\n                data-orientation={direction}\n                asChild\n            >\n                <Component />\n            </Separator.Root>\n        );\n    },\n);\n\nDivider.displayName = 'Divider';\n"],"names":["Divider","forwardRef","dataTestId","direction","className","variant","color","as","decorative","props","ref","Component","jsx","Separator","cn","dividerStyles","borderStyles"],"mappings":";;;;;;AAmDO,MAAMA,IAAUC;AAAA,EACnB,CACI;AAAA,IACI,gBAAgBC,IAAa;AAAA,IAC7B,WAAAC,IAAY;AAAA,IACZ,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,IAAAC,IAAK;AAAA,IACL,YAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEPC,MACe;AACf,UAAMC,IAAYJ;AAElB,WACI,gBAAAK;AAAA,MAACC,EAAU;AAAA,MAAV;AAAA,QACG,KAAAH;AAAA,QACA,WAAWI;AAAA,UACPC,EAAc;AAAA,YACV,WAAAZ;AAAA,YACA,SAAAE;AAAA,YACA,OAAAC;AAAA,YACA,GAAGG;AAAA,UAAA,CACN;AAAA,UACDO,EAAa;AAAA,UACbZ;AAAA,QAAA;AAAA,QAEJ,gBAAcC;AAAA,QACd,cAAYC;AAAA,QACZ,gBAAcJ;AAAA,QACd,YAAAM;AAAA,QACA,oBAAkBL;AAAA,QAClB,SAAO;AAAA,QAEP,4BAACQ,GAAA,CAAA,CAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAGvB;AACJ;AAEAX,EAAQ,cAAc;"}
+{"version":3,"file":"fondue-components10.js","sources":["../src/components/Divider/Divider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as Separator from '@radix-ui/react-separator';\nimport { forwardRef, type ForwardedRef, type ReactElement } from 'react';\n\nimport styles from './styles/divider.module.scss';\n\ntype DividerStyle = 'noline' | 'dashed' | 'solid';\ntype DividerPadding = 'none' | 'small' | 'medium' | 'large';\ntype DividerDirection = 'horizontal' | 'vertical';\ntype DividerColor = 'weak' | 'default' | 'strong';\n\nexport type DividerProps = {\n    /**\n     * The style of the divider\n     * @default \"solid\"\n     */\n    variant?: DividerStyle;\n    /**\n     * The padding of the divider\n     * @default \"medium\"\n     */\n    padding?: DividerPadding;\n    /**\n     * The color of the divider\n     * @default \"default\"\n     */\n    color?: DividerColor;\n    /**\n     * The direction of the divider\n     * @default \"horizontal\"\n     */\n    direction?: DividerDirection;\n    /**\n     * The html element to be used\n     * @default \"div\"\n     */\n    as?: 'div' | 'li';\n    /**\n     * When `true`, signifies that it is purely visual, carries no semantic\n     * meaning, and ensures it is not present in the accessibility tree.\n     * @default false\n     */\n    decorative?: boolean;\n    'data-test-id'?: string;\n    className?: string;\n};\n\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(\n    (\n        {\n            'data-test-id': dataTestId = 'fondue-divider',\n            direction = 'horizontal',\n            padding = 'medium',\n            className = '',\n            variant = 'solid',\n            color = 'default',\n            as = 'div',\n            decorative,\n        }: DividerProps,\n        ref: ForwardedRef<HTMLDivElement | null>,\n    ): ReactElement => {\n        const Component = as;\n\n        return (\n            <Separator.Root\n                ref={ref}\n                className={`${styles.root} ${className}`}\n                data-variant={variant}\n                data-color={color}\n                data-padding={padding}\n                data-test-id={dataTestId}\n                decorative={decorative}\n                data-orientation={direction}\n                asChild\n            >\n                <Component />\n            </Separator.Root>\n        );\n    },\n);\n\nDivider.displayName = 'Divider';\n"],"names":["Divider","forwardRef","dataTestId","direction","padding","className","variant","color","as","decorative","ref","Component","jsx","Separator","styles"],"mappings":";;;;AAgDO,MAAMA,IAAUC;AAAA,EACnB,CACI;AAAA,IACI,gBAAgBC,IAAa;AAAA,IAC7B,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU;AAAA,IACV,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU;AAAA,IACV,OAAAC,IAAQ;AAAA,IACR,IAAAC,IAAK;AAAA,IACL,YAAAC;AAAA,EAAA,GAEJC,MACe;AACf,UAAMC,IAAYH;AAElB,WACI,gBAAAI;AAAA,MAACC,EAAU;AAAA,MAAV;AAAA,QACG,KAAAH;AAAA,QACA,WAAW,GAAGI,EAAO,IAAI,IAAIT,CAAS;AAAA,QACtC,gBAAcC;AAAA,QACd,cAAYC;AAAA,QACZ,gBAAcH;AAAA,QACd,gBAAcF;AAAA,QACd,YAAAO;AAAA,QACA,oBAAkBN;AAAA,QAClB,SAAO;AAAA,QAEP,4BAACQ,GAAA,CAAA,CAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAGvB;AACJ;AAEAX,EAAQ,cAAc;"}

package/dist/fondue-components11.js

@@ -2,9 +2,9 @@ import { jsx as d, jsxs as S } from "react/jsx-runtime";
 import { IconCaretRight as x } from "@frontify/fondue-icons";
 import * as a from "@radix-ui/react-dropdown-menu";
 import { forwardRef as i, useRef as R, useMemo as _, Children as j } from "react";
-import { useFondueTheme as C, ThemeProvider as F } from "./fondue-components34.js";
-import { useProcessedChildren as I } from "./fondue-components57.js";
-import u from "./fondue-components58.js";
+import { useFondueTheme as C, ThemeProvider as F } from "./fondue-components36.js";
+import { useProcessedChildren as I } from "./fondue-components55.js";
+import u from "./fondue-components56.js";
 const T = ({
   children: t,
   open: o,

package/dist/fondue-components12.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-components40.js";
-import x from "./fondue-components59.js";
+import { propsToCssVariables as y } from "./fondue-components42.js";
+import x from "./fondue-components57.js";
 const u = n(
   ({
     as: a = "div",

package/dist/fondue-components13.js

@@ -2,11 +2,11 @@ import { jsx as e, jsxs as m } from "react/jsx-runtime";
 import { IconCross as x } from "@frontify/fondue-icons";
 import * as l from "@radix-ui/react-popover";
 import { forwardRef as i } from "react";
-import { useTranslation as I } from "./fondue-components37.js";
-import { addAutoFocusAttribute as _, addShowFocusRing as B } from "./fondue-components53.js";
+import { useTranslation as I } from "./fondue-components39.js";
+import { addAutoFocusAttribute as _, addShowFocusRing as B } from "./fondue-components52.js";
 import { Button as O } from "./fondue-components6.js";
-import { useFondueTheme as S, ThemeProvider as j } from "./fondue-components34.js";
-import u from "./fondue-components60.js";
+import { useFondueTheme as S, ThemeProvider as j } from "./fondue-components36.js";
+import u from "./fondue-components58.js";
 const f = ({ children: t, ...o }) => /* @__PURE__ */ e(l.Root, { ...o, children: t });
 f.displayName = "Flyout.Root";
 const y = ({ asChild: t = !0, children: o, "data-test-id": a = "fondue-flyout-trigger", ...r }, d) => /* @__PURE__ */ e(

package/dist/fondue-components14.js

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

package/dist/fondue-components15.js

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

package/dist/fondue-components16.js

@@ -1,39 +1,38 @@
-import { jsxs as m, jsx as s } from "react/jsx-runtime";
-import * as f from "@radix-ui/react-label";
+import { jsxs as f, jsx as d } 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 { cn as A } from "./fondue-components42.js";
-import r from "./fondue-components63.js";
-const g = ({ className: l, "data-test-id": d = "fondue-label", children: o, variant: c = "default", ...i }, u) => {
-  const n = p(null);
+import a from "./fondue-components62.js";
+const A = ({ className: o, "data-test-id": l = "fondue-label", children: i, variant: u = "default", ...n }, c) => {
+  const s = p(null);
   return x(() => {
-    var a;
-    const e = (a = n.current) == null ? void 0 : a.querySelectorAll("button,input,a,[tabindex]");
+    var r;
+    const e = (r = s.current) == null ? void 0 : r.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__ */ m(
-    f.Root,
+  }, []), /* @__PURE__ */ f(
+    m.Root,
     {
-      ref: u,
-      "data-required": i.required,
-      "data-variant": c,
-      className: A(r.root, l),
-      "data-test-id": d,
+      ref: c,
+      "data-required": n.required,
+      "data-variant": u,
+      className: o ? `${a.root} ${o}` : a.root,
+      "data-test-id": l,
       onClick: (e) => {
-        const a = e.target.getAttribute("for"), t = a ? document.getElementById(a) : null;
+        const r = e.target.getAttribute("for"), t = r ? document.getElementById(r) : null;
         t && t.getAttribute("role") === "combobox" && (e.preventDefault(), e.stopPropagation(), t.click());
       },
-      ...i,
+      ...n,
       children: [
-        /* @__PURE__ */ s("span", { className: `${r.hiddenText} ${r.contentArea}`, "aria-hidden": "true", ref: n, children: o }),
-        /* @__PURE__ */ s("span", { className: `${r.visibleText} ${r.contentArea}`, children: o })
+        /* @__PURE__ */ d("span", { className: `${a.hiddenText} ${a.contentArea}`, "aria-hidden": "true", ref: s, children: i }),
+        /* @__PURE__ */ d("span", { className: `${a.visibleText} ${a.contentArea}`, children: i })
       ]
     }
   );
-}, y = b(g);
-y.displayName = "Label";
+}, g = b(A);
+g.displayName = "Label";
 export {
-  y as Label,
-  g as LabelComponent
+  g as Label,
+  A as LabelComponent
 };
 //# sourceMappingURL=fondue-components16.js.map

package/dist/fondue-components16.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components16.js","sources":["../src/components/Label/Label.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as LabelPrimitive from '@radix-ui/react-label';\nimport { type ForwardedRef, forwardRef, type MouseEventHandler, type ReactNode, useRef, useLayoutEffect } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\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={cn(styles.root, className)}\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 className={`${styles.hiddenText} ${styles.contentArea}`} aria-hidden=\"true\" ref={hiddenTextRef}>\n                {children}\n            </span>\n            {/* Visible version (inherits all styling from parent) */}\n            <span className={`${styles.visibleText} ${styles.contentArea}`}>{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","cn","styles","event","targetId","target","jsx","Label","forwardRef"],"mappings":";;;;;AAiCO,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,WAAWW,EAAGC,EAAO,MAAMf,CAAS;AAAA,MACpC,gBAAcC;AAAA,MACd,SAAS,CAACe,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,GAAGd;AAAA,MAGJ,UAAA;AAAA,QAAA,gBAAAe,EAAC,QAAA,EAAK,WAAW,GAAGJ,EAAO,UAAU,IAAIA,EAAO,WAAW,IAAI,eAAY,QAAO,KAAKT,GAClF,UAAAJ,GACL;AAAA,QAEA,gBAAAiB,EAAC,QAAA,EAAK,WAAW,GAAGJ,EAAO,WAAW,IAAIA,EAAO,WAAW,IAAK,UAAAb,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGtF,GAEakB,IAAQC,EAAyCtB,CAAc;AAC5EqB,EAAM,cAAc;"}
+{"version":3,"file":"fondue-components16.js","sources":["../src/components/Label/Label.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as LabelPrimitive from '@radix-ui/react-label';\nimport { type ForwardedRef, forwardRef, type MouseEventHandler, type ReactNode, useRef, useLayoutEffect } from 'react';\n\nimport styles from './styles/label.module.scss';\n\ntype LabelVariant = 'default' | 'strong';\n\nexport type LabelProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * The id of the input element the label is associated with\n     */\n    htmlFor: string;\n    /**\n     * Add an asterisk to the label to indicate it is required\n     * @default false\n     */\n    required?: boolean;\n    /**\n     * The variant of the label\n     * @default \"default\"\n     */\n    variant?: LabelVariant;\n    className?: string;\n    onClick?: MouseEventHandler<HTMLLabelElement>;\n    'data-test-id'?: string;\n};\n\nexport const LabelComponent = (\n    { className, 'data-test-id': dataTestId = 'fondue-label', children, variant = 'default', ...props }: LabelProps,\n    ref: ForwardedRef<HTMLLabelElement>,\n) => {\n    const hiddenTextRef = useRef<HTMLSpanElement>(null);\n\n    useLayoutEffect(() => {\n        // prevent duplicated interactive elements within the hidden element\n        const interactiveElements = hiddenTextRef.current?.querySelectorAll('button,input,a,[tabindex]');\n        if (interactiveElements) {\n            for (const element of interactiveElements) {\n                element.setAttribute('tabindex', '-1');\n                element.setAttribute('id', '');\n                element.setAttribute('data-test-id', '');\n            }\n        }\n    }, []);\n\n    return (\n        <LabelPrimitive.Root\n            ref={ref}\n            data-required={props.required}\n            data-variant={variant}\n            className={className ? `${styles.root} ${className}` : styles.root}\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 className={`${styles.hiddenText} ${styles.contentArea}`} aria-hidden=\"true\" ref={hiddenTextRef}>\n                {children}\n            </span>\n            {/* Visible version (inherits all styling from parent) */}\n            <span className={`${styles.visibleText} ${styles.contentArea}`}>{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,WAAWH,IAAY,GAAGc,EAAO,IAAI,IAAId,CAAS,KAAKc,EAAO;AAAA,MAC9D,gBAAcb;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,EAAC,QAAA,EAAK,WAAW,GAAGJ,EAAO,UAAU,IAAIA,EAAO,WAAW,IAAI,eAAY,QAAO,KAAKR,GAClF,UAAAJ,GACL;AAAA,QAEA,gBAAAgB,EAAC,QAAA,EAAK,WAAW,GAAGJ,EAAO,WAAW,IAAIA,EAAO,WAAW,IAAK,UAAAZ,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGtF,GAEaiB,IAAQC,EAAyCrB,CAAc;AAC5EoB,EAAM,cAAc;"}

package/dist/fondue-components17.js

@@ -1,8 +1,8 @@
 import { jsx as C } from "react/jsx-runtime";
 import { forwardRef as D, useCallback as H } from "react";
-import { cn as L } from "./fondue-components42.js";
-import { useFondueRouter as N } from "./fondue-components20.js";
-import o from "./fondue-components64.js";
+import { cn as L } from "./fondue-components60.js";
+import { useFondueRouter as N } from "./fondue-components22.js";
+import o from "./fondue-components63.js";
 const R = D(
   ({
     id: c,

package/dist/fondue-components18.js

@@ -1,22 +1,25 @@
-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-components65.js";
-const p = m(
+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-components64.js";
+const g = c(
   ({
     value: a,
     max: r = 100,
-    rounded: d = !0,
-    variant: o = "default",
-    size: e = "medium",
-    "data-test-id": n = "fondue-loading-bar",
+    rounded: e = !0,
+    variant: i = "default",
+    size: n = "medium",
+    "data-test-id": s = "fondue-loading-bar",
     ...l
-  }, s) => /* @__PURE__ */ i(
-    t.Root,
+  }, m) => /* @__PURE__ */ t(
+    o.Root,
     {
-      ref: s,
-      "data-test-id": n,
-      className: g({ rounded: d, size: e, variant: o }),
+      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,
@@ -26,17 +29,19 @@ const p = m(
         "--loading-bar-proportion": "calc(var(--loading-bar-value) / var(--loading-bar-max))"
       },
       ...l,
-      children: /* @__PURE__ */ i(
-        t.Indicator,
+      children: /* @__PURE__ */ t(
+        o.Indicator,
         {
-          className: f({ variant: o, indeterminateState: a === null })
+          className: d.indicator,
+          "data-variant": i,
+          "data-indeterminate": a === null
         }
       )
     }
   )
 );
-p.displayName = "LoadingBar";
+g.displayName = "LoadingBar";
 export {
-  p as LoadingBar
+  g as LoadingBar
 };
 //# sourceMappingURL=fondue-components18.js.map

package/dist/fondue-components18.js.map

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

package/dist/fondue-components19.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as i } from "react";
-import d from "./fondue-components66.js";
+import d from "./fondue-components65.js";
 const s = i(
   ({
     variant: t = "progress",

package/dist/fondue-components20.js

@@ -1,21 +1,50 @@
-import { jsx as u } from "react/jsx-runtime";
-import { createContext as i, useContext as s, useMemo as m } from "react";
-const e = i({
-  navigate: () => {
-    throw new Error("RouterProvider: `navigate` function is not implemented");
-  },
-  // eslint-disable-next-line @eslint-react/no-unnecessary-use-prefix
-  useHref: () => {
-    throw new Error("RouterProvider: `useHref` function is not implemented");
-  }
-});
-e.displayName = "RouterContext";
-const a = () => s(e), x = ({ children: r, navigate: t, useHref: o }) => {
-  const n = m(() => ({ navigate: t, useHref: o }), [t, o]);
-  return /* @__PURE__ */ u(e.Provider, { value: n, children: r });
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { IconCross as N } from "@frontify/fondue-icons";
+import { useTranslation as f } from "./fondue-components39.js";
+import a from "./fondue-components66.js";
+const j = ({
+  "aria-label": o,
+  "data-test-id": r = "notice",
+  variant: n = "default",
+  emphasis: d = "default",
+  size: e = "medium",
+  icon: i,
+  action: s,
+  onDismiss: l,
+  className: c = "",
+  children: m
+}) => {
+  const { t: u } = f();
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      "data-component": "notice",
+      "data-variant": n,
+      "data-emphasis": d,
+      "data-size": e,
+      "data-test-id": r,
+      className: `${a.root} ${c}`.trim(),
+      role: "status",
+      "aria-live": "polite",
+      children: [
+        i ? /* @__PURE__ */ t("div", { className: a.icon, children: i }) : null,
+        /* @__PURE__ */ t("div", { className: a.content, children: m }),
+        s ? /* @__PURE__ */ t("div", { className: a.action, children: s }) : null,
+        l ? /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            "aria-label": o || u("Notice_dismiss"),
+            className: a.dismiss,
+            onClick: l,
+            children: /* @__PURE__ */ t(N, { size: e === "large" ? "20" : "16" })
+          }
+        ) : null
+      ]
+    }
+  );
 };
 export {
-  x as RouterProvider,
-  a as useFondueRouter
+  j as Notice
 };
 //# sourceMappingURL=fondue-components20.js.map

package/dist/fondue-components20.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components20.js","sources":["../src/components/RouterProvider/RouterProvider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { createContext, useContext, useMemo, type ReactNode } from 'react';\n\nexport type RouterProviderProps = {\n    children: ReactNode;\n    /**\n     * Function to navigate to a specific path\n     */\n    navigate: (path: string) => void;\n    /**\n     * Function to resolves a URL against the current location.\n     */\n    useHref: (path: string) => string;\n};\n\nconst RouterContext = createContext<{\n    navigate: (path: string) => void;\n    useHref: (path: string) => string;\n}>({\n    navigate: () => {\n        throw new Error('RouterProvider: `navigate` function is not implemented');\n    },\n    // eslint-disable-next-line @eslint-react/no-unnecessary-use-prefix\n    useHref: () => {\n        throw new Error('RouterProvider: `useHref` function is not implemented');\n    },\n});\nRouterContext.displayName = 'RouterContext';\n\nexport const useFondueRouter = () => {\n    return useContext(RouterContext);\n};\n\nexport const RouterProvider = ({ children, navigate, useHref }: RouterProviderProps) => {\n    const contextValue = useMemo(() => ({ navigate, useHref }), [navigate, useHref]);\n\n    return <RouterContext.Provider value={contextValue}>{children}</RouterContext.Provider>;\n};\n"],"names":["RouterContext","createContext","useFondueRouter","useContext","RouterProvider","children","navigate","useHref","contextValue","useMemo"],"mappings":";;AAgBA,MAAMA,IAAgBC,EAGnB;AAAA,EACC,UAAU,MAAM;AACZ,UAAM,IAAI,MAAM,wDAAwD;AAAA,EAC5E;AAAA;AAAA,EAEA,SAAS,MAAM;AACX,UAAM,IAAI,MAAM,uDAAuD;AAAA,EAC3E;AACJ,CAAC;AACDD,EAAc,cAAc;AAErB,MAAME,IAAkB,MACpBC,EAAWH,CAAa,GAGtBI,IAAiB,CAAC,EAAE,UAAAC,GAAU,UAAAC,GAAU,SAAAC,QAAmC;AACpF,QAAMC,IAAeC,EAAQ,OAAO,EAAE,UAAAH,GAAU,SAAAC,MAAY,CAACD,GAAUC,CAAO,CAAC;AAE/E,2BAAQP,EAAc,UAAd,EAAuB,OAAOQ,GAAe,UAAAH,GAAS;AAClE;"}
+{"version":3,"file":"fondue-components20.js","sources":["../src/components/Notice/Notice.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport { type MouseEvent, type ReactNode } from 'react';\n\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport styles from './styles/notice.module.scss';\n\ntype NoticeVariant = 'default' | 'highlight' | 'positive' | 'danger' | 'warning';\n\ntype NoticeEmphasis = 'default' | 'strong' | 'weak';\n\ntype NoticeSize = 'medium' | 'large';\n\nexport type NoticeProps = {\n    /**\n     * @default 'default'\n     */\n    variant?: NoticeVariant;\n    /**\n     * @default 'default'\n     */\n    emphasis?: NoticeEmphasis;\n    /**\n     * @default 'medium'\n     */\n    size?: NoticeSize;\n    /**\n     * Leading icon element\n     */\n    icon?: ReactNode;\n    /**\n     * Action element (typically a button)\n     */\n    action?: ReactNode;\n    /**\n     * Callback when the dismiss button is clicked\n     */\n    onDismiss?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Custom aria-label for the dismiss button\n     */\n    'aria-label'?: string;\n    /**\n     * Test ID for the component\n     */\n    'data-test-id'?: string;\n    /**\n     * Additional CSS class\n     */\n    className?: string;\n    /**\n     * Message content\n     */\n    children: ReactNode;\n};\n\nexport const Notice = ({\n    'aria-label': ariaLabel,\n    'data-test-id': dataTestId = 'notice',\n    variant = 'default',\n    emphasis = 'default',\n    size = 'medium',\n    icon,\n    action,\n    onDismiss,\n    className = '',\n    children,\n}: NoticeProps) => {\n    const { t } = useTranslation();\n\n    return (\n        <div\n            data-component=\"notice\"\n            data-variant={variant}\n            data-emphasis={emphasis}\n            data-size={size}\n            data-test-id={dataTestId}\n            className={`${styles.root} ${className}`.trim()}\n            role=\"status\"\n            aria-live=\"polite\"\n        >\n            {icon ? <div className={styles.icon}>{icon}</div> : null}\n            <div className={styles.content}>{children}</div>\n            {action ? <div className={styles.action}>{action}</div> : null}\n            {onDismiss ? (\n                <button\n                    type=\"button\"\n                    aria-label={ariaLabel || t('Notice_dismiss')}\n                    className={styles.dismiss}\n                    onClick={onDismiss}\n                >\n                    <IconCross size={size === 'large' ? '20' : '16'} />\n                </button>\n            ) : null}\n        </div>\n    );\n};\n"],"names":["Notice","ariaLabel","dataTestId","variant","emphasis","size","icon","action","onDismiss","className","children","t","useTranslation","jsxs","styles","jsx","IconCross"],"mappings":";;;;AA0DO,MAAMA,IAAS,CAAC;AAAA,EACnB,cAAcC;AAAA,EACd,gBAAgBC,IAAa;AAAA,EAC7B,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AACJ,MAAmB;AACf,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA;AAEd,SACI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,kBAAe;AAAA,MACf,gBAAcV;AAAA,MACd,iBAAeC;AAAA,MACf,aAAWC;AAAA,MACX,gBAAcH;AAAA,MACd,WAAW,GAAGY,EAAO,IAAI,IAAIL,CAAS,GAAG,KAAA;AAAA,MACzC,MAAK;AAAA,MACL,aAAU;AAAA,MAET,UAAA;AAAA,QAAAH,sBAAQ,OAAA,EAAI,WAAWQ,EAAO,MAAO,aAAK,IAAS;AAAA,QACpD,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,SAAU,UAAAJ,GAAS;AAAA,QACzCH,IAAS,gBAAAQ,EAAC,OAAA,EAAI,WAAWD,EAAO,QAAS,aAAO,IAAS;AAAA,QACzDN,IACG,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,cAAYd,KAAaU,EAAE,gBAAgB;AAAA,YAC3C,WAAWG,EAAO;AAAA,YAClB,SAASN;AAAA,YAET,4BAACQ,GAAA,EAAU,MAAMX,MAAS,UAAU,OAAO,KAAA,CAAM;AAAA,UAAA;AAAA,QAAA,IAErD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhB;"}