@sonarsource/echoes-react - npm Package Compare versions

Comparing version 0.1.3 to 0.2.0

dist/common/helpers/styles.d.ts

@@ -1,2 +0,2 @@
-export declare const screenReaderOnly: import("@emotion/react").SerializedStyles;
+export declare const screenReaderOnly: import('@emotion/react').SerializedStyles;
 //# sourceMappingURL=styles.d.ts.map

dist/components/index.d.ts

 export * from './checkbox';
+export * from './icons';
 export * from './links';
@@ -3,0 +4,0 @@ export * from './radio-button-group';

dist/components/links/Link.d.ts

 /// <reference types="react" />
-export declare const Link: import("@emotion/styled").StyledComponent<Readonly<import("./LinkBase").LinkProps> & import("react").RefAttributes<HTMLAnchorElement> & {
+export declare const Link: import('@emotion/styled').StyledComponent<Readonly<import("./LinkBase").LinkProps> & import("react").RefAttributes<HTMLAnchorElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 //# sourceMappingURL=Link.d.ts.map

dist/components/links/LinkBase.d.ts

@@ -1,3 +0,4 @@
-import React, { HTMLAttributeAnchorTarget } from 'react';
 import { LinkProps as RouterLinkProps } from 'react-router-dom';
+import { default as React, HTMLAttributeAnchorTarget } from 'react';
+
 type RouterLinkPropsRequired = 'download' | 'reloadDocument' | 'state' | 'style' | 'title' | 'to';
@@ -4,0 +5,0 @@ export declare enum LinkHighlight {

dist/components/links/LinkBaseStyled.d.ts

 /// <reference types="react" />
-export declare const LinkBaseStyled: import("@emotion/styled").StyledComponent<Readonly<import("./LinkBase").LinkProps> & import("react").RefAttributes<HTMLAnchorElement> & {
+export declare const LinkBaseStyled: import('@emotion/styled').StyledComponent<Readonly<import("./LinkBase").LinkProps> & import("react").RefAttributes<HTMLAnchorElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 //# sourceMappingURL=LinkBaseStyled.d.ts.map

dist/components/links/LinkStandalone.d.ts

@@ -1,7 +0,7 @@
-/// <reference types="react" />
 import { LinkProps } from '.';
+
 interface Props extends LinkProps {
     iconLeft?: React.ReactNode;
 }
-export declare const LinkStandalone: import("@emotion/styled").StyledComponent<Readonly<Props> & {
+export declare const LinkStandalone: import('@emotion/styled').StyledComponent<Readonly<Props> & {
     theme?: import("@emotion/react").Theme | undefined;
@@ -8,0 +8,0 @@ }, {}, {}>;

dist/components/radio-button-group/RadioButtonGroup.d.ts

 import { ReactNode } from 'react';
+
 export interface RadiobuttonGroupBaseProps {
@@ -3,0 +4,0 @@ onChange?: (value: string) => void;

dist/components/spinner/Spinner.d.ts

 import { ReactNode } from 'react';
+
 interface Props {
@@ -3,0 +4,0 @@ ariaLabel?: string;

dist/index.d.ts

@@ -0,1 +1,2 @@
+
 export * from './components';
@@ -2,0 +3,0 @@ export * from './utils';

dist/index.js

 /**
  * Echoes React
- * Version: 0.1.3
- * Generated: 2024-03-20
+ * Version: 0.2.0
+ * Generated: 2024-04-09
  * Copyright (C) 2023-2024 SonarSource SA
@@ -24,14 +24,14 @@ * mailto:info AT sonarsource DOT com
 import "./style.css";
-import { jsxs as E, Fragment as ie, jsx as v } from "@emotion/react/jsx-runtime";
+import { jsxs as E, Fragment as de, jsx as a } from "@emotion/react/jsx-runtime";
 import $ from "@emotion/styled";
-import * as se from "react";
-import C, { useCallback as T, createContext as Q, useMemo as j, createElement as m, useContext as de, useRef as R, useEffect as P, useState as z, useLayoutEffect as Te, Children as U, cloneElement as te, useReducer as Le, forwardRef as A, isValidElement as W, Fragment as Me } from "react";
-import { flushSync as Oe } from "react-dom";
-import { css as F, keyframes as Fe } from "@emotion/react";
-import { FormattedMessage as De, useIntl as ze } from "react-intl";
-import { Link as Ge } from "react-router-dom";
-function y() {
-  return y = Object.assign ? Object.assign.bind() : function(e) {
-    for (var t = 1; t < arguments.length; t++) {
-      var o = arguments[t];
+import * as le from "react";
+import _, { useCallback as T, createContext as Q, useMemo as W, createElement as g, useContext as ue, useRef as w, useEffect as F, useState as G, useLayoutEffect as Me, Children as U, cloneElement as oe, useReducer as Oe, forwardRef as A, isValidElement as V, Fragment as De } from "react";
+import { flushSync as Ge } from "react-dom";
+import { css as O, keyframes as ze } from "@emotion/react";
+import { FormattedMessage as Be, useIntl as Ue } from "react-intl";
+import { Link as We } from "react-router-dom";
+function C() {
+  return C = Object.assign ? Object.assign.bind() : function(e) {
+    for (var n = 1; n < arguments.length; n++) {
+      var o = arguments[n];
       for (var r in o)
@@ -41,59 +41,59 @@ Object.prototype.hasOwnProperty.call(o, r) && (e[r] = o[r]);
     return e;
-  }, y.apply(this, arguments);
+  }, C.apply(this, arguments);
 }
-function Be(e, t) {
-  typeof e == "function" ? e(t) : e != null && (e.current = t);
+function qe(e, n) {
+  typeof e == "function" ? e(n) : e != null && (e.current = n);
 }
-function le(...e) {
-  return (t) => e.forEach(
-    (o) => Be(o, t)
+function fe(...e) {
+  return (n) => e.forEach(
+    (o) => qe(o, n)
   );
 }
-function G(...e) {
-  return T(le(...e), e);
+function z(...e) {
+  return T(fe(...e), e);
 }
-function q(e, t = []) {
+function q(e, n = []) {
   let o = [];
-  function r(n, c) {
-    const i = /* @__PURE__ */ Q(c), s = o.length;
+  function r(t, i) {
+    const s = /* @__PURE__ */ Q(i), l = o.length;
     o = [
       ...o,
-      c
+      i
     ];
-    function d(l) {
-      const { scope: h, children: f, ...u } = l, b = (h == null ? void 0 : h[e][s]) || i, g = j(
-        () => u,
-        Object.values(u)
+    function d(u) {
+      const { scope: v, children: h, ...p } = u, m = (v == null ? void 0 : v[e][l]) || s, x = W(
+        () => p,
+        Object.values(p)
       );
-      return /* @__PURE__ */ m(b.Provider, {
-        value: g
-      }, f);
+      return /* @__PURE__ */ g(m.Provider, {
+        value: x
+      }, h);
     }
-    function p(l, h) {
-      const f = (h == null ? void 0 : h[e][s]) || i, u = de(f);
-      if (u)
-        return u;
-      if (c !== void 0)
-        return c;
-      throw new Error(`\`${l}\` must be used within \`${n}\``);
+    function b(u, v) {
+      const h = (v == null ? void 0 : v[e][l]) || s, p = ue(h);
+      if (p)
+        return p;
+      if (i !== void 0)
+        return i;
+      throw new Error(`\`${u}\` must be used within \`${t}\``);
     }
-    return d.displayName = n + "Provider", [
+    return d.displayName = t + "Provider", [
       d,
-      p
+      b
     ];
   }
-  const a = () => {
-    const n = o.map((c) => /* @__PURE__ */ Q(c));
-    return function(i) {
-      const s = (i == null ? void 0 : i[e]) || n;
-      return j(
+  const c = () => {
+    const t = o.map((i) => /* @__PURE__ */ Q(i));
+    return function(s) {
+      const l = (s == null ? void 0 : s[e]) || t;
+      return W(
         () => ({
           [`__scope${e}`]: {
-            ...i,
-            [e]: s
+            ...s,
+            [e]: l
           }
         }),
         [
-          i,
-          s
+          s,
+          l
         ]
@@ -103,32 +103,32 @@ );
   };
-  return a.scopeName = e, [
+  return c.scopeName = e, [
     r,
-    Ue(a, ...t)
+    je(c, ...n)
   ];
 }
-function Ue(...e) {
-  const t = e[0];
+function je(...e) {
+  const n = e[0];
   if (e.length === 1)
-    return t;
+    return n;
   const o = () => {
     const r = e.map(
-      (a) => ({
-        useScope: a(),
-        scopeName: a.scopeName
+      (c) => ({
+        useScope: c(),
+        scopeName: c.scopeName
       })
     );
-    return function(n) {
-      const c = r.reduce((i, { useScope: s, scopeName: d }) => {
-        const l = s(n)[`__scope${d}`];
+    return function(t) {
+      const i = r.reduce((s, { useScope: l, scopeName: d }) => {
+        const u = l(t)[`__scope${d}`];
         return {
-          ...i,
-          ...l
+          ...s,
+          ...u
         };
       }, {});
-      return j(
+      return W(
         () => ({
-          [`__scope${t.scopeName}`]: c
+          [`__scope${n.scopeName}`]: i
         }),
         [
-          c
+          i
         ]
@@ -138,18 +138,18 @@ );
   };
-  return o.scopeName = t.scopeName, o;
+  return o.scopeName = n.scopeName, o;
 }
-function _(e, t, { checkForDefaultPrevented: o = !0 } = {}) {
-  return function(a) {
-    if (e == null || e(a), o === !1 || !a.defaultPrevented)
-      return t == null ? void 0 : t(a);
+function N(e, n, { checkForDefaultPrevented: o = !0 } = {}) {
+  return function(c) {
+    if (e == null || e(c), o === !1 || !c.defaultPrevented)
+      return n == null ? void 0 : n(c);
   };
 }
-function re(e) {
-  const t = R(e);
-  return P(() => {
-    t.current = e;
-  }), j(
+function ne(e) {
+  const n = w(e);
+  return F(() => {
+    n.current = e;
+  }), W(
     () => (...o) => {
       var r;
-      return (r = t.current) === null || r === void 0 ? void 0 : r.call(t, ...o);
+      return (r = n.current) === null || r === void 0 ? void 0 : r.call(n, ...o);
     },
@@ -159,48 +159,48 @@ []
 }
-function ne({ prop: e, defaultProp: t, onChange: o = () => {
+function re({ prop: e, defaultProp: n, onChange: o = () => {
 } }) {
-  const [r, a] = je({
-    defaultProp: t,
+  const [r, c] = Ve({
+    defaultProp: n,
     onChange: o
-  }), n = e !== void 0, c = n ? e : r, i = re(o), s = T((d) => {
-    if (n) {
-      const l = typeof d == "function" ? d(e) : d;
-      l !== e && i(l);
+  }), t = e !== void 0, i = t ? e : r, s = ne(o), l = T((d) => {
+    if (t) {
+      const u = typeof d == "function" ? d(e) : d;
+      u !== e && s(u);
     } else
-      a(d);
+      c(d);
   }, [
-    n,
+    t,
     e,
-    a,
-    i
+    c,
+    s
   ]);
   return [
-    c,
-    s
+    i,
+    l
   ];
 }
-function je({ defaultProp: e, onChange: t }) {
-  const o = z(e), [r] = o, a = R(r), n = re(t);
-  return P(() => {
-    a.current !== r && (n(r), a.current = r);
+function Ve({ defaultProp: e, onChange: n }) {
+  const o = G(e), [r] = o, c = w(r), t = ne(n);
+  return F(() => {
+    c.current !== r && (t(r), c.current = r);
   }, [
     r,
-    a,
-    n
+    c,
+    t
   ]), o;
 }
-function ue(e) {
-  const t = R({
+function pe(e) {
+  const n = w({
     value: e,
     previous: e
   });
-  return j(() => (t.current.value !== e && (t.current.previous = t.current.value, t.current.value = e), t.current.previous), [
+  return W(() => (n.current.value !== e && (n.current.previous = n.current.value, n.current.value = e), n.current.previous), [
     e
   ]);
 }
-const H = globalThis != null && globalThis.document ? Te : () => {
+const K = globalThis != null && globalThis.document ? Me : () => {
 };
-function fe(e) {
-  const [t, o] = z(void 0);
-  return H(() => {
+function he(e) {
+  const [n, o] = G(void 0);
+  return K(() => {
     if (e) {
@@ -211,15 +211,15 @@ o({
       });
-      const r = new ResizeObserver((a) => {
-        if (!Array.isArray(a) || !a.length)
+      const r = new ResizeObserver((c) => {
+        if (!Array.isArray(c) || !c.length)
           return;
-        const n = a[0];
-        let c, i;
-        if ("borderBoxSize" in n) {
-          const s = n.borderBoxSize, d = Array.isArray(s) ? s[0] : s;
-          c = d.inlineSize, i = d.blockSize;
+        const t = c[0];
+        let i, s;
+        if ("borderBoxSize" in t) {
+          const l = t.borderBoxSize, d = Array.isArray(l) ? l[0] : l;
+          i = d.inlineSize, s = d.blockSize;
         } else
-          c = e.offsetWidth, i = e.offsetHeight;
+          i = e.offsetWidth, s = e.offsetHeight;
         o({
-          width: c,
-          height: i
+          width: i,
+          height: s
         });
@@ -234,21 +234,21 @@ });
     e
-  ]), t;
+  ]), n;
 }
-function qe(e, t) {
-  return Le((o, r) => {
-    const a = t[o][r];
-    return a ?? o;
+function Ke(e, n) {
+  return Oe((o, r) => {
+    const c = n[o][r];
+    return c ?? o;
   }, e);
 }
-const ae = (e) => {
-  const { present: t, children: o } = e, r = Ve(t), a = typeof o == "function" ? o({
+const te = (e) => {
+  const { present: n, children: o } = e, r = He(n), c = typeof o == "function" ? o({
     present: r.isPresent
-  }) : U.only(o), n = G(r.ref, a.ref);
-  return typeof o == "function" || r.isPresent ? /* @__PURE__ */ te(a, {
-    ref: n
+  }) : U.only(o), t = z(r.ref, c.ref);
+  return typeof o == "function" || r.isPresent ? /* @__PURE__ */ oe(c, {
+    ref: t
   }) : null;
 };
-ae.displayName = "Presence";
-function Ve(e) {
-  const [t, o] = z(), r = R({}), a = R(e), n = R("none"), c = e ? "mounted" : "unmounted", [i, s] = qe(c, {
+te.displayName = "Presence";
+function He(e) {
+  const [n, o] = G(), r = w({}), c = w(e), t = w("none"), i = e ? "mounted" : "unmounted", [s, l] = Ke(i, {
     mounted: {
@@ -266,34 +266,34 @@ UNMOUNT: "unmounted",
   });
-  return P(() => {
-    const d = K(r.current);
-    n.current = i === "mounted" ? d : "none";
+  return F(() => {
+    const d = j(r.current);
+    t.current = s === "mounted" ? d : "none";
   }, [
-    i
-  ]), H(() => {
-    const d = r.current, p = a.current;
-    if (p !== e) {
-      const h = n.current, f = K(d);
-      e ? s("MOUNT") : f === "none" || (d == null ? void 0 : d.display) === "none" ? s("UNMOUNT") : s(p && h !== f ? "ANIMATION_OUT" : "UNMOUNT"), a.current = e;
+    s
+  ]), K(() => {
+    const d = r.current, b = c.current;
+    if (b !== e) {
+      const v = t.current, h = j(d);
+      e ? l("MOUNT") : h === "none" || (d == null ? void 0 : d.display) === "none" ? l("UNMOUNT") : l(b && v !== h ? "ANIMATION_OUT" : "UNMOUNT"), c.current = e;
     }
   }, [
     e,
-    s
-  ]), H(() => {
-    if (t) {
-      const d = (l) => {
-        const f = K(r.current).includes(l.animationName);
-        l.target === t && f && Oe(
-          () => s("ANIMATION_END")
+    l
+  ]), K(() => {
+    if (n) {
+      const d = (u) => {
+        const h = j(r.current).includes(u.animationName);
+        u.target === n && h && Ge(
+          () => l("ANIMATION_END")
         );
-      }, p = (l) => {
-        l.target === t && (n.current = K(r.current));
+      }, b = (u) => {
+        u.target === n && (t.current = j(r.current));
       };
-      return t.addEventListener("animationstart", p), t.addEventListener("animationcancel", d), t.addEventListener("animationend", d), () => {
-        t.removeEventListener("animationstart", p), t.removeEventListener("animationcancel", d), t.removeEventListener("animationend", d);
+      return n.addEventListener("animationstart", b), n.addEventListener("animationcancel", d), n.addEventListener("animationend", d), () => {
+        n.removeEventListener("animationstart", b), n.removeEventListener("animationcancel", d), n.removeEventListener("animationend", d);
       };
     } else
-      s("ANIMATION_END");
+      l("ANIMATION_END");
   }, [
-    t,
-    s
+    n,
+    l
   ]), {
@@ -303,3 +303,3 @@ isPresent: [
       "unmountSuspended"
-    ].includes(i),
+    ].includes(s),
     ref: T((d) => {
@@ -310,44 +310,44 @@ d && (r.current = getComputedStyle(d)), o(d);
 }
-function K(e) {
+function j(e) {
   return (e == null ? void 0 : e.animationName) || "none";
 }
-const Z = /* @__PURE__ */ A((e, t) => {
-  const { children: o, ...r } = e, a = U.toArray(o), n = a.find(We);
-  if (n) {
-    const c = n.props.children, i = a.map((s) => s === n ? U.count(c) > 1 ? U.only(null) : /* @__PURE__ */ W(c) ? c.props.children : null : s);
-    return /* @__PURE__ */ m(ee, y({}, r, {
-      ref: t
-    }), /* @__PURE__ */ W(c) ? /* @__PURE__ */ te(c, void 0, i) : null);
+const H = /* @__PURE__ */ A((e, n) => {
+  const { children: o, ...r } = e, c = U.toArray(o), t = c.find(Xe);
+  if (t) {
+    const i = t.props.children, s = c.map((l) => l === t ? U.count(i) > 1 ? U.only(null) : /* @__PURE__ */ V(i) ? i.props.children : null : l);
+    return /* @__PURE__ */ g(J, C({}, r, {
+      ref: n
+    }), /* @__PURE__ */ V(i) ? /* @__PURE__ */ oe(i, void 0, s) : null);
   }
-  return /* @__PURE__ */ m(ee, y({}, r, {
-    ref: t
+  return /* @__PURE__ */ g(J, C({}, r, {
+    ref: n
   }), o);
 });
-Z.displayName = "Slot";
-const ee = /* @__PURE__ */ A((e, t) => {
+H.displayName = "Slot";
+const J = /* @__PURE__ */ A((e, n) => {
   const { children: o, ...r } = e;
-  return /* @__PURE__ */ W(o) ? /* @__PURE__ */ te(o, {
-    ...He(r, o.props),
-    ref: t ? le(t, o.ref) : o.ref
+  return /* @__PURE__ */ V(o) ? /* @__PURE__ */ oe(o, {
+    ...Ze(r, o.props),
+    ref: n ? fe(n, o.ref) : o.ref
   }) : U.count(o) > 1 ? U.only(null) : null;
 });
-ee.displayName = "SlotClone";
-const Ke = ({ children: e }) => /* @__PURE__ */ m(Me, null, e);
-function We(e) {
-  return /* @__PURE__ */ W(e) && e.type === Ke;
+J.displayName = "SlotClone";
+const Ye = ({ children: e }) => /* @__PURE__ */ g(De, null, e);
+function Xe(e) {
+  return /* @__PURE__ */ V(e) && e.type === Ye;
 }
-function He(e, t) {
+function Ze(e, n) {
   const o = {
-    ...t
+    ...n
   };
-  for (const r in t) {
-    const a = e[r], n = t[r];
-    /^on[A-Z]/.test(r) ? a && n ? o[r] = (...i) => {
-      n(...i), a(...i);
-    } : a && (o[r] = a) : r === "style" ? o[r] = {
-      ...a,
-      ...n
+  for (const r in n) {
+    const c = e[r], t = n[r];
+    /^on[A-Z]/.test(r) ? c && t ? o[r] = (...s) => {
+      t(...s), c(...s);
+    } : c && (o[r] = c) : r === "style" ? o[r] = {
+      ...c,
+      ...t
     } : r === "className" && (o[r] = [
-      a,
-      n
+      c,
+      t
     ].filter(Boolean).join(" "));
@@ -360,3 +360,3 @@ }
 }
-const Ze = [
+const Qe = [
   "a",
@@ -378,64 +378,64 @@ "button",
   "ul"
-], B = Ze.reduce((e, t) => {
-  const o = /* @__PURE__ */ A((r, a) => {
-    const { asChild: n, ...c } = r, i = n ? Z : t;
-    return P(() => {
+], B = Qe.reduce((e, n) => {
+  const o = /* @__PURE__ */ A((r, c) => {
+    const { asChild: t, ...i } = r, s = t ? H : n;
+    return F(() => {
       window[Symbol.for("radix-ui")] = !0;
-    }, []), /* @__PURE__ */ m(i, y({}, c, {
-      ref: a
+    }, []), /* @__PURE__ */ g(s, C({}, i, {
+      ref: c
     }));
   });
-  return o.displayName = `Primitive.${t}`, {
+  return o.displayName = `Primitive.${n}`, {
     ...e,
-    [t]: o
+    [n]: o
   };
-}, {}), pe = "Checkbox", [Xe, Ht] = q(pe), [Ye, Je] = Xe(pe), Qe = /* @__PURE__ */ A((e, t) => {
-  const { __scopeCheckbox: o, name: r, checked: a, defaultChecked: n, required: c, disabled: i, value: s = "on", onCheckedChange: d, ...p } = e, [l, h] = z(null), f = G(
-    t,
-    (w) => h(w)
-  ), u = R(!1), b = l ? !!l.closest("form") : !0, [g = !1, x] = ne({
-    prop: a,
-    defaultProp: n,
+}, {}), be = "Checkbox", [Je, Hn] = q(be), [eo, oo] = Je(be), no = /* @__PURE__ */ A((e, n) => {
+  const { __scopeCheckbox: o, name: r, checked: c, defaultChecked: t, required: i, disabled: s, value: l = "on", onCheckedChange: d, ...b } = e, [u, v] = G(null), h = z(
+    n,
+    (y) => v(y)
+  ), p = w(!1), m = u ? !!u.closest("form") : !0, [x = !1, I] = re({
+    prop: c,
+    defaultProp: t,
     onChange: d
-  }), k = R(g);
-  return P(() => {
-    const w = l == null ? void 0 : l.form;
-    if (w) {
-      const S = () => x(k.current);
-      return w.addEventListener("reset", S), () => w.removeEventListener("reset", S);
+  }), k = w(x);
+  return F(() => {
+    const y = u == null ? void 0 : u.form;
+    if (y) {
+      const S = () => I(k.current);
+      return y.addEventListener("reset", S), () => y.removeEventListener("reset", S);
     }
   }, [
-    l,
-    x
-  ]), /* @__PURE__ */ m(Ye, {
+    u,
+    I
+  ]), /* @__PURE__ */ g(eo, {
     scope: o,
-    state: g,
-    disabled: i
-  }, /* @__PURE__ */ m(B.button, y({
+    state: x,
+    disabled: s
+  }, /* @__PURE__ */ g(B.button, C({
     type: "button",
     role: "checkbox",
-    "aria-checked": D(g) ? "mixed" : g,
-    "aria-required": c,
-    "data-state": be(g),
-    "data-disabled": i ? "" : void 0,
-    disabled: i,
-    value: s
-  }, p, {
-    ref: f,
-    onKeyDown: _(e.onKeyDown, (w) => {
-      w.key === "Enter" && w.preventDefault();
+    "aria-checked": D(x) ? "mixed" : x,
+    "aria-required": i,
+    "data-state": ve(x),
+    "data-disabled": s ? "" : void 0,
+    disabled: s,
+    value: l
+  }, b, {
+    ref: h,
+    onKeyDown: N(e.onKeyDown, (y) => {
+      y.key === "Enter" && y.preventDefault();
     }),
-    onClick: _(e.onClick, (w) => {
-      x(
+    onClick: N(e.onClick, (y) => {
+      I(
         (S) => D(S) ? !0 : !S
-      ), b && (u.current = w.isPropagationStopped(), u.current || w.stopPropagation());
+      ), m && (p.current = y.isPropagationStopped(), p.current || y.stopPropagation());
     })
-  })), b && /* @__PURE__ */ m(to, {
-    control: l,
-    bubbles: !u.current,
+  })), m && /* @__PURE__ */ g(co, {
+    control: u,
+    bubbles: !p.current,
     name: r,
-    value: s,
-    checked: g,
-    required: c,
-    disabled: i,
+    value: l,
+    checked: x,
+    required: i,
+    disabled: s,
     style: {
@@ -445,11 +445,11 @@ transform: "translateX(-100%)"
   }));
-}), eo = "CheckboxIndicator", oo = /* @__PURE__ */ A((e, t) => {
-  const { __scopeCheckbox: o, forceMount: r, ...a } = e, n = Je(eo, o);
-  return /* @__PURE__ */ m(ae, {
-    present: r || D(n.state) || n.state === !0
-  }, /* @__PURE__ */ m(B.span, y({
-    "data-state": be(n.state),
-    "data-disabled": n.disabled ? "" : void 0
-  }, a, {
-    ref: t,
+}), ro = "CheckboxIndicator", to = /* @__PURE__ */ A((e, n) => {
+  const { __scopeCheckbox: o, forceMount: r, ...c } = e, t = oo(ro, o);
+  return /* @__PURE__ */ g(te, {
+    present: r || D(t.state) || t.state === !0
+  }, /* @__PURE__ */ g(B.span, C({
+    "data-state": ve(t.state),
+    "data-disabled": t.disabled ? "" : void 0
+  }, c, {
+    ref: n,
     style: {
@@ -460,26 +460,26 @@ pointerEvents: "none",
   })));
-}), to = (e) => {
-  const { control: t, checked: o, bubbles: r = !0, ...a } = e, n = R(null), c = ue(o), i = fe(t);
-  return P(() => {
-    const s = n.current, d = window.HTMLInputElement.prototype, l = Object.getOwnPropertyDescriptor(d, "checked").set;
-    if (c !== o && l) {
-      const h = new Event("click", {
+}), co = (e) => {
+  const { control: n, checked: o, bubbles: r = !0, ...c } = e, t = w(null), i = pe(o), s = he(n);
+  return F(() => {
+    const l = t.current, d = window.HTMLInputElement.prototype, u = Object.getOwnPropertyDescriptor(d, "checked").set;
+    if (i !== o && u) {
+      const v = new Event("click", {
         bubbles: r
       });
-      s.indeterminate = D(o), l.call(s, D(o) ? !1 : o), s.dispatchEvent(h);
+      l.indeterminate = D(o), u.call(l, D(o) ? !1 : o), l.dispatchEvent(v);
     }
   }, [
-    c,
+    i,
     o,
     r
-  ]), /* @__PURE__ */ m("input", y({
+  ]), /* @__PURE__ */ g("input", C({
     type: "checkbox",
     "aria-hidden": !0,
     defaultChecked: D(o) ? !1 : o
-  }, a, {
+  }, c, {
     tabIndex: -1,
-    ref: n,
+    ref: t,
     style: {
       ...e.style,
-      ...i,
+      ...s,
       position: "absolute",
@@ -495,10 +495,10 @@ pointerEvents: "none",
 }
-function be(e) {
+function ve(e) {
   return D(e) ? "indeterminate" : e ? "checked" : "unchecked";
 }
-const ro = Qe, no = oo;
-function ao(e) {
+const ao = no, io = to;
+function so(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var he = { exports: {} };
+var me = { exports: {} };
 /*!
@@ -511,32 +511,32 @@ Copyright (c) 2018 Jed Watson.
   (function() {
-    var t = {}.hasOwnProperty;
+    var n = {}.hasOwnProperty;
     function o() {
-      for (var n = "", c = 0; c < arguments.length; c++) {
-        var i = arguments[c];
-        i && (n = a(n, r(i)));
+      for (var t = "", i = 0; i < arguments.length; i++) {
+        var s = arguments[i];
+        s && (t = c(t, r(s)));
       }
-      return n;
+      return t;
     }
-    function r(n) {
-      if (typeof n == "string" || typeof n == "number")
-        return n;
-      if (typeof n != "object")
+    function r(t) {
+      if (typeof t == "string" || typeof t == "number")
+        return t;
+      if (typeof t != "object")
         return "";
-      if (Array.isArray(n))
-        return o.apply(null, n);
-      if (n.toString !== Object.prototype.toString && !n.toString.toString().includes("[native code]"))
-        return n.toString();
-      var c = "";
-      for (var i in n)
-        t.call(n, i) && n[i] && (c = a(c, i));
-      return c;
+      if (Array.isArray(t))
+        return o.apply(null, t);
+      if (t.toString !== Object.prototype.toString && !t.toString.toString().includes("[native code]"))
+        return t.toString();
+      var i = "";
+      for (var s in t)
+        n.call(t, s) && t[s] && (i = c(i, s));
+      return i;
     }
-    function a(n, c) {
-      return c ? n ? n + " " + c : n + c : n;
+    function c(t, i) {
+      return i ? t ? t + " " + i : t + i : t;
     }
     e.exports ? (o.default = o, e.exports = o) : window.classNames = o;
   })();
-})(he);
-var co = he.exports;
-const io = /* @__PURE__ */ ao(co), ve = F`
+})(me);
+var lo = me.exports;
+const uo = /* @__PURE__ */ so(lo), $e = O`
   position: absolute;
@@ -552,26 +552,26 @@ width: 1px;
 `;
-function so(e) {
+function fo(e) {
   const {
-    ariaLabel: t,
+    ariaLabel: n,
     className: o,
     children: r,
-    hasPlaceholder: a,
-    isLoading: n = !0,
-    label: c,
-    wrapperClassName: i
+    hasPlaceholder: c,
+    isLoading: t = !0,
+    label: i,
+    wrapperClassName: s
   } = e;
-  return /* @__PURE__ */ E(ie, { children: [
-    /* @__PURE__ */ v(lo, { className: i, inline: r === void 0, children: /* @__PURE__ */ E(
-      uo,
+  return /* @__PURE__ */ E(de, { children: [
+    /* @__PURE__ */ a(po, { className: s, inline: r === void 0, children: /* @__PURE__ */ E(
+      ho,
       {
         "aria-live": "polite",
-        className: io({
-          it__loading: n
+        className: uo({
+          it__loading: t
         }),
-        isLoading: n,
+        isLoading: t,
         role: "status",
         children: [
-          /* @__PURE__ */ v(ho, { className: o }),
-          n && (c ? /* @__PURE__ */ v(po, { children: c }) : /* @__PURE__ */ v(fo, { children: t ?? /* @__PURE__ */ v(
-            De,
+          /* @__PURE__ */ a($o, { className: o }),
+          t && (i ? /* @__PURE__ */ a(vo, { children: i }) : /* @__PURE__ */ a(bo, { children: n ?? /* @__PURE__ */ a(
+            Be,
             {
@@ -586,19 +586,19 @@ defaultMessage: "Loading...",
     ) }),
-    !n && (r ?? (a && /* @__PURE__ */ v(vo, { className: o })) ?? null)
+    !t && (r ?? (c && /* @__PURE__ */ a(go, { className: o })) ?? null)
   ] });
 }
-const lo = $.span`
+const po = $.span`
   display: ${(e) => e.inline ? "inline-block" : "block"};
   position: relative;
   ${(e) => e.inline ? "margin: 0 var(--echoes-dimension-space-50);" : ""}
-`, uo = $.span`
+`, ho = $.span`
   position: relative;
   display: inline-block;
   height: var(--echoes-dimension-size-200);
-  ${({ isLoading: e }) => e ? "" : ve}
-`, fo = $.span`
-  ${ve};
-`, po = $.span`
+  ${({ isLoading: e }) => e ? "" : $e}
+`, bo = $.span`
+  ${$e};
+`, vo = $.span`
   margin-left: var(--echoes-dimension-space-50);
-`, bo = Fe`
+`, mo = ze`
   from {
@@ -611,3 +611,3 @@ transform: rotate(0deg);
   }
-`, ho = $.span`
+`, $o = $.span`
   border: 2px solid transparent;
@@ -624,3 +624,3 @@ background:
   mask-composite: exclude;
-  animation: ${bo} 1s infinite linear;
+  animation: ${mo} 1s infinite linear;
 
@@ -633,3 +633,3 @@ display: inline-block;
   vertical-align: text-bottom;
-`, vo = $.div`
+`, go = $.div`
   display: inline-block;
@@ -641,20 +641,9 @@ vertical-align: text-bottom;
 `;
-function me(e) {
-  const {
-    "aria-label": t,
-    "aria-hidden": o,
-    children: r,
-    className: a,
-    description: n,
-    ...c
-  } = e;
-  return /* @__PURE__ */ E(
+function xo({ checked: e }) {
+  return e ? /* @__PURE__ */ E(
     "svg",
     {
-      "aria-hidden": o ?? (t ? "false" : "true"),
-      "aria-label": t,
-      className: a,
+      "aria-hidden": "true",
       fill: "none",
       height: "1rem",
-      role: "img",
       style: {
@@ -674,62 +663,48 @@ clipRule: "evenodd",
       xmlnsXlink: "http://www.w3.org/1999/xlink",
-      ...c,
       children: [
-        n && /* @__PURE__ */ v("desc", { children: n }),
-        r
+        e === "indeterminate" && /* @__PURE__ */ a("rect", { fill: "currentColor", height: "2", rx: "1", width: "50%", x: "4", y: "7" }),
+        e === !0 && /* @__PURE__ */ a(
+          "path",
+          {
+            clipRule: "evenodd",
+            d: "M11.6634 5.47789c.2884.29737.2811.77218-.0163 1.06054L7.52211 10.5384c-.29414.2852-.76273.2816-1.05244-.0081l-2-1.99997c-.29289-.29289-.29289-.76777 0-1.06066s.76777-.29289 1.06066 0L7.0081 8.94744l3.5948-3.48586c.2974-.28836.7722-.28105 1.0605.01631Z",
+            fill: "currentColor",
+            fillRule: "evenodd"
+          }
+        )
       ]
     }
-  );
+  ) : null;
 }
-function mo(e, t) {
-  function o({ ...r }) {
-    const a = r.width ?? r.height ?? "small";
-    return /* @__PURE__ */ v(e, { fill: "currentColor", size: a, verticalAlign: "middle", ...r });
-  }
-  return o.displayName = t ?? e.displayName ?? e.name, o;
-}
-function $o(e) {
-  return /* @__PURE__ */ v(me, { ...e, children: /* @__PURE__ */ v(
-    "path",
-    {
-      clipRule: "evenodd",
-      d: "M11.6634 5.47789c.2884.29737.2811.77218-.0163 1.06054L7.52211 10.5384c-.29414.2852-.76273.2816-1.05244-.0081l-2-1.99997c-.29289-.29289-.29289-.76777 0-1.06066s.76777-.29289 1.06066 0L7.0081 8.94744l3.5948-3.48586c.2974-.28836.7722-.28105 1.0605.01631Z",
-      fill: "currentColor",
-      fillRule: "evenodd"
-    }
-  ) });
-}
-function go({ checked: e }) {
-  return e === "indeterminate" ? /* @__PURE__ */ v(me, { children: /* @__PURE__ */ v("rect", { fill: "currentColor", height: "2", rx: "1", width: "50%", x: "4", y: "7" }) }) : e ? /* @__PURE__ */ v($o, {}) : null;
-}
-function Zt(e) {
-  const { ariaLabel: t, className: o, helpText: r, id: a, innerClassName: n, label: c, title: i } = e, { checked: s, hasError: d = !1, isDisabled: p, isLoading: l = !1 } = e, { onCheck: h, onFocus: f } = e, u = T(
-    (b) => {
-      !p && !l && h(b, a);
+function Yn(e) {
+  const { ariaLabel: n, className: o, helpText: r, id: c, innerClassName: t, label: i, title: s } = e, { checked: l, hasError: d = !1, isDisabled: b, isLoading: u = !1 } = e, { onCheck: v, onFocus: h } = e, p = T(
+    (m) => {
+      !b && !u && v(m, c);
     },
-    [p, l, h, a]
+    [b, u, v, c]
   );
-  return /* @__PURE__ */ v(
-    xo,
+  return /* @__PURE__ */ a(
+    Io,
     {
-      "aria-disabled": p,
-      as: c ? "label" : "span",
+      "aria-disabled": b,
+      as: i ? "label" : "span",
       className: o,
-      children: /* @__PURE__ */ E(ko, { className: n, children: [
-        /* @__PURE__ */ v(so, { isLoading: l, children: /* @__PURE__ */ v(
+      children: /* @__PURE__ */ E(ko, { className: t, children: [
+        /* @__PURE__ */ a(fo, { isLoading: u, children: /* @__PURE__ */ a(
           Co,
           {
-            "aria-disabled": p,
-            "aria-label": t ?? i,
-            checked: s,
-            id: a,
-            onCheckedChange: u,
-            onFocus: f,
-            title: i,
-            ...d && s === !1 ? { "data-error": !0 } : {},
-            children: /* @__PURE__ */ v(yo, { children: /* @__PURE__ */ v(go, { checked: s }) })
+            "aria-disabled": b,
+            "aria-label": n ?? s,
+            checked: l,
+            id: c,
+            onCheckedChange: p,
+            onFocus: h,
+            title: s,
+            ...d && l === !1 ? { "data-error": !0 } : {},
+            children: /* @__PURE__ */ a(yo, { children: /* @__PURE__ */ a(xo, { checked: l }) })
           }
         ) }),
-        (c || r) && /* @__PURE__ */ E(wo, { "aria-disabled": p, children: [
-          c && /* @__PURE__ */ v(So, { children: c }),
-          r && /* @__PURE__ */ v(Io, { children: r })
+        (i || r) && /* @__PURE__ */ E(wo, { "aria-disabled": b, children: [
+          i && /* @__PURE__ */ a(So, { children: i }),
+          r && /* @__PURE__ */ a(Ro, { children: r })
         ] })
@@ -740,3 +715,3 @@ ] })
 }
-const xo = $.span`
+const Io = $.span`
   display: inline-flex;
@@ -752,3 +727,3 @@ vertical-align: top;
   font-size: 0.833rem;
-`, Co = $(ro)`
+`, Co = $(ao)`
   color: var(--echoes-color-text-on-color);
@@ -768,2 +743,3 @@ background-color: var(--echoes-color-background-default);
 
+  &:focus,
   &:focus-visible {
@@ -806,3 +782,3 @@ outline: var(--echoes-color-focus-default) solid var(--echoes-focus-border-width-default);
   }
-`, yo = $(no)`
+`, yo = $(io)`
   height: var(--echoes-dimension-size-200);
@@ -822,3 +798,3 @@ width: var(--echoes-dimension-size-200);
   }
-`, Io = $.span`
+`, Ro = $.span`
   font: var(--echoes-typography-paragraph-small-regular);
@@ -831,3 +807,221 @@ color: var(--echoes-color-text-subdued);
 `;
-function Ro(e) {
+function ge(e) {
+  return e != null;
+}
+function Eo(e) {
+  return ge(e) && e !== "";
+}
+function Ao(e) {
+  const { ariaLabel: n, className: o, children: r } = e;
+  return /* @__PURE__ */ a(
+    "span",
+    {
+      "aria-hidden": Eo(n) ? "false" : "true",
+      "aria-label": n,
+      className: o,
+      role: "img",
+      children: r
+    }
+  );
+}
+const ce = $(Ao)`
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  display: inline-block;
+  font-size: calc(1em + 4px);
+  font-style: normal;
+  font-weight: normal;
+  height: calc(2em - 16px);
+  line-height: calc(2em - 16px);
+  text-align: center;
+  vertical-align: bottom;
+  width: calc(2em - 16px);
+
+  ${({ color: e }) => ge(e) && `color: var(--${e});`}
+  ${({ isFilled: e = !1 }) => e ? "font-variation-settings: 'FILL' 1;" : ""}
+`;
+ce.displayName = "IconWrapper";
+const f = $(ce)`
+  font-family: 'Material Symbols Rounded';
+`;
+f.displayName = "IconMaterialWrapper";
+const L = $(ce)`
+  font-family: 'Echoes';
+`;
+f.displayName = "IconCustomWrapper";
+function Xn(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function Zn(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function Qn(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function Jn(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function er(e) {
+  return /* @__PURE__ */ a(f, { isFilled: !0, ...e, children: "" });
+}
+function or(e) {
+  return /* @__PURE__ */ a(L, { ...e, children: "!" });
+}
+function nr(e) {
+  return /* @__PURE__ */ a(L, { ...e, children: '"' });
+}
+function rr(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function tr(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function cr(e) {
+  return /* @__PURE__ */ a(f, { isFilled: !0, ...e, children: "" });
+}
+function ar(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function ir(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function sr(e) {
+  return /* @__PURE__ */ a(L, { ...e, children: "$" });
+}
+function dr(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function lr(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function ur(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function fr(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function pr(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function hr(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function br(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function vr(e) {
+  return /* @__PURE__ */ a(f, { isFilled: !0, ...e, children: "" });
+}
+function mr(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function $r(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function gr(e) {
+  return /* @__PURE__ */ a(L, { ...e, children: "#" });
+}
+function xr(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function Ir(e) {
+  return /* @__PURE__ */ a(L, { ...e, children: "%" });
+}
+function kr(e) {
+  return /* @__PURE__ */ a(L, { ...e, children: "'" });
+}
+function Cr(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function yr(e) {
+  return /* @__PURE__ */ a(L, { ...e, children: "&" });
+}
+function wr(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function Sr(e) {
+  return /* @__PURE__ */ a(f, { isFilled: !0, ...e, children: "" });
+}
+function Rr(e) {
+  return /* @__PURE__ */ a(L, { ...e, children: "(" });
+}
+function Er(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function _o(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function Ar(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function _r(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function Pr(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function Nr(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function Fr(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function Lr(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function Tr(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function Mr(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function Or(e) {
+  return /* @__PURE__ */ a(L, { ...e, children: ")" });
+}
+function Dr(e) {
+  return /* @__PURE__ */ a(f, { isFilled: !0, ...e, children: "" });
+}
+function Gr(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function zr(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function Br(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function Ur(e) {
+  return /* @__PURE__ */ a(f, { isFilled: !0, ...e, children: "" });
+}
+function Wr(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function qr(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function jr(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function Vr(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function Kr(e) {
+  return /* @__PURE__ */ a(f, { isFilled: !0, ...e, children: "" });
+}
+function Hr(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function Yr(e) {
+  return /* @__PURE__ */ a(L, { ...e, children: "*" });
+}
+function Xr(e) {
+  return /* @__PURE__ */ a(f, { isFilled: !0, ...e, children: "" });
+}
+function Zr(e) {
+  return /* @__PURE__ */ a(f, { isFilled: !0, ...e, children: "" });
+}
+function Qr(e) {
+  return /* @__PURE__ */ a(f, { ...e, children: "" });
+}
+function Po(e) {
   return [
@@ -839,81 +1033,23 @@ "https://docs.sonarsource.com",
     "https://blog.sonarsource.com"
-  ].some((t) => e.startsWith(t));
+  ].some((n) => e.startsWith(n));
 }
-var Eo = {
-  small: 16,
-  medium: 32,
-  large: 64
-};
-function Ao(e, t, o) {
-  var r = o(), a = Object.keys(r), n = /* @__PURE__ */ C.forwardRef(function(c, i) {
-    var s = c["aria-label"], d = c["aria-labelledby"], p = c.tabIndex, l = c.className, h = l === void 0 ? t : l, f = c.fill, u = f === void 0 ? "currentColor" : f, b = c.size, g = b === void 0 ? 16 : b, x = c.verticalAlign, k = x === void 0 ? "text-bottom" : x, w = c.id, S = c.title, L = Eo[g] || g, M = No(a, L), I = r[M].width, X = L * (I / M), V = r[M].path;
-    return /* @__PURE__ */ C.createElement("svg", {
-      ref: i,
-      "aria-hidden": s ? "false" : "true",
-      tabIndex: p,
-      focusable: p >= 0 ? "true" : "false",
-      "aria-label": s,
-      "aria-labelledby": d,
-      role: "img",
-      className: h,
-      viewBox: "0 0 ".concat(I, " ").concat(M),
-      width: X,
-      height: L,
-      fill: u,
-      id: w,
-      style: {
-        display: "inline-block",
-        userSelect: "none",
-        verticalAlign: k,
-        overflow: "visible"
-      }
-    }, S ? /* @__PURE__ */ C.createElement("title", null, S) : null, V);
-  });
-  return n.displayName = e, n;
-}
-function No(e, t) {
-  return e.map(function(o) {
-    return parseInt(o, 10);
-  }).reduce(function(o, r) {
-    return r <= t ? r : o;
-  }, e[0]);
-}
-var _o = /* @__PURE__ */ Ao("LinkExternalIcon", "octicon octicon-link-external", function() {
-  return {
-    16: {
-      width: 16,
-      path: /* @__PURE__ */ C.createElement("path", {
-        d: "M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"
-      })
-    },
-    24: {
-      width: 24,
-      path: /* @__PURE__ */ C.createElement(C.Fragment, null, /* @__PURE__ */ C.createElement("path", {
-        d: "M15.5 2.25a.75.75 0 0 1 .75-.75h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V4.06l-6.22 6.22a.75.75 0 1 1-1.06-1.06L19.94 3h-3.69a.75.75 0 0 1-.75-.75Z"
-      }), /* @__PURE__ */ C.createElement("path", {
-        d: "M2.5 4.25c0-.966.784-1.75 1.75-1.75h8.5a.75.75 0 0 1 0 1.5h-8.5a.25.25 0 0 0-.25.25v15.5c0 .138.112.25.25.25h15.5a.25.25 0 0 0 .25-.25v-8.5a.75.75 0 0 1 1.5 0v8.5a1.75 1.75 0 0 1-1.75 1.75H4.25a1.75 1.75 0 0 1-1.75-1.75V4.25Z"
-      }))
-    }
-  };
-});
-const Po = mo(_o, "OpenNewTabIcon");
-var N = /* @__PURE__ */ ((e) => (e.Accent = "accent", e.CurrentColor = "current-color", e.Default = "default", e.Subdued = "subdued", e))(N || {});
-function To(e, t) {
+var P = /* @__PURE__ */ ((e) => (e.Accent = "accent", e.CurrentColor = "current-color", e.Default = "default", e.Subdued = "subdued", e))(P || {});
+function No(e, n) {
   const {
     children: o,
     shouldBlurAfterClick: r = !1,
-    isExternal: a = !1,
-    onClick: n,
-    shouldPreventDefault: c = !1,
-    hasExternalIcon: i = !0,
-    shouldStopPropagation: s = !1,
+    isExternal: c = !1,
+    onClick: t,
+    shouldPreventDefault: i = !1,
+    hasExternalIcon: s = !0,
+    shouldStopPropagation: l = !1,
     to: d,
-    ...p
-  } = e, l = typeof d == "string" ? d : `${d.pathname ?? ""}${d.search ?? ""}${d.hash ?? ""}`, h = a || l.startsWith("http"), f = ze(), u = C.useCallback(
-    (b) => {
-      r && b.currentTarget.blur(), c && b.preventDefault(), s && b.stopPropagation(), n && n(b);
+    ...b
+  } = e, u = typeof d == "string" ? d : `${d.pathname ?? ""}${d.search ?? ""}${d.hash ?? ""}`, v = c || u.startsWith("http"), h = Ue(), p = _.useCallback(
+    (m) => {
+      r && m.currentTarget.blur(), i && m.preventDefault(), l && m.stopPropagation(), t && t(m);
     },
-    [n, r, c, s]
+    [t, r, i, l]
   );
-  return h ? (
+  return v ? (
     // eslint-disable-next-line react/jsx-no-target-blank --  we only allow noopener noreferrer for known external links
@@ -923,14 +1059,14 @@ /* @__PURE__ */ E(
       {
-        rel: `noopener${Ro(l) ? "" : " noreferrer nofollow"}`,
+        rel: `noopener${Po(u) ? "" : " noreferrer nofollow"}`,
         target: "_blank",
-        ...p,
-        href: l,
-        onClick: u,
-        ref: t,
+        ...b,
+        href: u,
+        onClick: p,
+        ref: n,
         children: [
           o,
-          i && /* @__PURE__ */ v(
-            Lo,
+          s && /* @__PURE__ */ a(
+            Fo,
             {
-              "aria-label": f.formatMessage({
+              ariaLabel: h.formatMessage({
                 id: "open_in_new_window",
@@ -945,25 +1081,25 @@ defaultMessage: "Open in new window",
     )
-  ) : /* @__PURE__ */ v(Ge, { ref: t, ...p, onClick: u, to: d, children: o });
+  ) : /* @__PURE__ */ a(We, { ref: n, ...b, onClick: p, to: d, children: o });
 }
-const Lo = $(Po)`
+const Fo = $(_o)`
   margin-left: var(--echoes-dimension-space-50);
-`, Mo = C.forwardRef(To), Oo = {
-  [N.Accent]: F`
+`, Lo = _.forwardRef(No), To = {
+  [P.Accent]: O`
     --color: var(--echoes-color-text-accent);
     --hover: var(--echoes-color-text-accent-hover);
   `,
-  [N.Default]: F`
+  [P.Default]: O`
     --color: var(--echoes-color-text-default);
     --hover: var(--echoes-color-text-accent-hover);
   `,
-  [N.Subdued]: F`
+  [P.Subdued]: O`
     --color: var(--echoes-color-text-subdued);
     --hover: var(--echoes-color-text-accent-hover);
   `,
-  [N.CurrentColor]: F`
+  [P.CurrentColor]: O`
     --color: 'currentColor';
     --hover: var(--echoes-color-text-accent-hover);
   `
-}, $e = $(Mo)`
-  ${({ highlight: e = N.Accent }) => Oo[e]};
+}, xe = $(Lo)`
+  ${({ highlight: e = P.Accent }) => To[e]};
 
@@ -1009,20 +1145,20 @@ color: var(--color);
   }
-`, Fo = $e;
-Fo.displayName = "Link";
-function Do(e) {
-  const { children: t, iconLeft: o, ...r } = e;
-  return /* @__PURE__ */ E($e, { hasExternalIcon: !o, ...r, children: [
+`, Mo = xe;
+Mo.displayName = "Link";
+function Oo(e) {
+  const { children: n, iconLeft: o, ...r } = e;
+  return /* @__PURE__ */ E(xe, { hasExternalIcon: !o, ...r, children: [
     o,
-    t
+    n
   ] });
 }
-const zo = {
-  [N.Accent]: F`
+const Do = {
+  [P.Accent]: O`
     font-weight: var(--echoes-font-weight-semi-bold);
   `,
-  [N.Default]: void 0,
-  [N.Subdued]: void 0,
-  [N.CurrentColor]: void 0
-}, Go = $(Do)`
-  ${({ highlight: e = N.Accent }) => zo[e]}
+  [P.Default]: void 0,
+  [P.Subdued]: void 0,
+  [P.CurrentColor]: void 0
+}, Go = $(Oo)`
+  ${({ highlight: e = P.Accent }) => Do[e]}
 
@@ -1042,3 +1178,3 @@ text-decoration-line: var(--echoes-text-decoration-none);
 
-  ${({ iconLeft: e }) => e && F`
+  ${({ iconLeft: e }) => e && O`
       & > svg,
@@ -1051,4 +1187,4 @@ & > img {
 Go.displayName = "LinkStandalone";
-function Bo(e) {
-  const t = e + "CollectionProvider", [o, r] = q(t), [a, n] = o(t, {
+function zo(e) {
+  const n = e + "CollectionProvider", [o, r] = q(n), [c, t] = o(n, {
     collectionRef: {
@@ -1058,37 +1194,37 @@ current: null
     itemMap: /* @__PURE__ */ new Map()
-  }), c = (f) => {
-    const { scope: u, children: b } = f, g = C.useRef(null), x = C.useRef(/* @__PURE__ */ new Map()).current;
-    return /* @__PURE__ */ C.createElement(a, {
-      scope: u,
-      itemMap: x,
-      collectionRef: g
-    }, b);
-  }, i = e + "CollectionSlot", s = /* @__PURE__ */ C.forwardRef((f, u) => {
-    const { scope: b, children: g } = f, x = n(i, b), k = G(u, x.collectionRef);
-    return /* @__PURE__ */ C.createElement(Z, {
+  }), i = (h) => {
+    const { scope: p, children: m } = h, x = _.useRef(null), I = _.useRef(/* @__PURE__ */ new Map()).current;
+    return /* @__PURE__ */ _.createElement(c, {
+      scope: p,
+      itemMap: I,
+      collectionRef: x
+    }, m);
+  }, s = e + "CollectionSlot", l = /* @__PURE__ */ _.forwardRef((h, p) => {
+    const { scope: m, children: x } = h, I = t(s, m), k = z(p, I.collectionRef);
+    return /* @__PURE__ */ _.createElement(H, {
       ref: k
-    }, g);
-  }), d = e + "CollectionItemSlot", p = "data-radix-collection-item", l = /* @__PURE__ */ C.forwardRef((f, u) => {
-    const { scope: b, children: g, ...x } = f, k = C.useRef(null), w = G(u, k), S = n(d, b);
-    return C.useEffect(() => (S.itemMap.set(k, {
+    }, x);
+  }), d = e + "CollectionItemSlot", b = "data-radix-collection-item", u = /* @__PURE__ */ _.forwardRef((h, p) => {
+    const { scope: m, children: x, ...I } = h, k = _.useRef(null), y = z(p, k), S = t(d, m);
+    return _.useEffect(() => (S.itemMap.set(k, {
       ref: k,
-      ...x
-    }), () => void S.itemMap.delete(k))), /* @__PURE__ */ C.createElement(Z, {
-      [p]: "",
-      ref: w
-    }, g);
+      ...I
+    }), () => void S.itemMap.delete(k))), /* @__PURE__ */ _.createElement(H, {
+      [b]: "",
+      ref: y
+    }, x);
   });
-  function h(f) {
-    const u = n(e + "CollectionConsumer", f);
-    return C.useCallback(() => {
-      const g = u.collectionRef.current;
-      if (!g)
+  function v(h) {
+    const p = t(e + "CollectionConsumer", h);
+    return _.useCallback(() => {
+      const x = p.collectionRef.current;
+      if (!x)
         return [];
-      const x = Array.from(g.querySelectorAll(`[${p}]`));
-      return Array.from(u.itemMap.values()).sort(
-        (S, L) => x.indexOf(S.ref.current) - x.indexOf(L.ref.current)
+      const I = Array.from(x.querySelectorAll(`[${b}]`));
+      return Array.from(p.itemMap.values()).sort(
+        (S, Y) => I.indexOf(S.ref.current) - I.indexOf(Y.ref.current)
       );
     }, [
-      u.collectionRef,
-      u.itemMap
+      p.collectionRef,
+      p.itemMap
     ]);
@@ -1098,70 +1234,70 @@ }
     {
-      Provider: c,
-      Slot: s,
-      ItemSlot: l
+      Provider: i,
+      Slot: l,
+      ItemSlot: u
     },
-    h,
+    v,
     r
   ];
 }
-const Uo = se["useId".toString()] || (() => {
+const Bo = le.useId || (() => {
 });
-let jo = 0;
-function qo(e) {
-  const [t, o] = se.useState(Uo());
-  return H(() => {
+let Uo = 0;
+function Wo(e) {
+  const [n, o] = le.useState(Bo());
+  return K(() => {
     e || o(
-      (r) => r ?? String(jo++)
+      (r) => r ?? String(Uo++)
     );
   }, [
     e
-  ]), e || (t ? `radix-${t}` : "");
+  ]), e || (n ? `radix-${n}` : "");
 }
-const Vo = /* @__PURE__ */ Q(void 0);
-function ge(e) {
-  const t = de(Vo);
-  return e || t || "ltr";
+const qo = /* @__PURE__ */ Q(void 0);
+function Ie(e) {
+  const n = ue(qo);
+  return e || n || "ltr";
 }
-const J = "rovingFocusGroup.onEntryFocus", Ko = {
+const Z = "rovingFocusGroup.onEntryFocus", jo = {
   bubbles: !1,
   cancelable: !0
-}, ce = "RovingFocusGroup", [oe, xe, Wo] = Bo(ce), [Ho, ke] = q(ce, [
-  Wo
-]), [Zo, Xo] = Ho(ce), Yo = /* @__PURE__ */ A((e, t) => /* @__PURE__ */ m(oe.Provider, {
+}, ae = "RovingFocusGroup", [ee, ke, Vo] = zo(ae), [Ko, Ce] = q(ae, [
+  Vo
+]), [Ho, Yo] = Ko(ae), Xo = /* @__PURE__ */ A((e, n) => /* @__PURE__ */ g(ee.Provider, {
   scope: e.__scopeRovingFocusGroup
-}, /* @__PURE__ */ m(oe.Slot, {
+}, /* @__PURE__ */ g(ee.Slot, {
   scope: e.__scopeRovingFocusGroup
-}, /* @__PURE__ */ m(Jo, y({}, e, {
-  ref: t
-}))))), Jo = /* @__PURE__ */ A((e, t) => {
-  const { __scopeRovingFocusGroup: o, orientation: r, loop: a = !1, dir: n, currentTabStopId: c, defaultCurrentTabStopId: i, onCurrentTabStopIdChange: s, onEntryFocus: d, ...p } = e, l = R(null), h = G(t, l), f = ge(n), [u = null, b] = ne({
-    prop: c,
-    defaultProp: i,
-    onChange: s
-  }), [g, x] = z(!1), k = re(d), w = xe(o), S = R(!1), [L, M] = z(0);
-  return P(() => {
-    const I = l.current;
-    if (I)
-      return I.addEventListener(J, k), () => I.removeEventListener(J, k);
+}, /* @__PURE__ */ g(Zo, C({}, e, {
+  ref: n
+}))))), Zo = /* @__PURE__ */ A((e, n) => {
+  const { __scopeRovingFocusGroup: o, orientation: r, loop: c = !1, dir: t, currentTabStopId: i, defaultCurrentTabStopId: s, onCurrentTabStopIdChange: l, onEntryFocus: d, ...b } = e, u = w(null), v = z(n, u), h = Ie(t), [p = null, m] = re({
+    prop: i,
+    defaultProp: s,
+    onChange: l
+  }), [x, I] = G(!1), k = ne(d), y = ke(o), S = w(!1), [Y, ie] = G(0);
+  return F(() => {
+    const R = u.current;
+    if (R)
+      return R.addEventListener(Z, k), () => R.removeEventListener(Z, k);
   }, [
     k
-  ]), /* @__PURE__ */ m(Zo, {
+  ]), /* @__PURE__ */ g(Ho, {
     scope: o,
     orientation: r,
-    dir: f,
-    loop: a,
-    currentTabStopId: u,
+    dir: h,
+    loop: c,
+    currentTabStopId: p,
     onItemFocus: T(
-      (I) => b(I),
+      (R) => m(R),
       [
-        b
+        m
       ]
     ),
     onItemShiftTab: T(
-      () => x(!0),
+      () => I(!0),
       []
     ),
     onFocusableItemAdd: T(
-      () => M(
-        (I) => I + 1
+      () => ie(
+        (R) => R + 1
       ),
@@ -1171,12 +1307,12 @@ []
     onFocusableItemRemove: T(
-      () => M(
-        (I) => I - 1
+      () => ie(
+        (R) => R - 1
       ),
       []
     )
-  }, /* @__PURE__ */ m(B.div, y({
-    tabIndex: g || L === 0 ? -1 : 0,
+  }, /* @__PURE__ */ g(B.div, C({
+    tabIndex: x || Y === 0 ? -1 : 0,
     "data-orientation": r
-  }, p, {
-    ref: h,
+  }, b, {
+    ref: v,
     style: {
@@ -1186,24 +1322,24 @@ outline: "none",
     },
-    onMouseDown: _(e.onMouseDown, () => {
+    onMouseDown: N(e.onMouseDown, () => {
       S.current = !0;
     }),
-    onFocus: _(e.onFocus, (I) => {
-      const X = !S.current;
-      if (I.target === I.currentTarget && X && !g) {
-        const V = new CustomEvent(J, Ko);
-        if (I.currentTarget.dispatchEvent(V), !V.defaultPrevented) {
-          const Y = w().filter(
-            (O) => O.focusable
-          ), Ne = Y.find(
-            (O) => O.active
-          ), _e = Y.find(
-            (O) => O.id === u
-          ), Pe = [
-            Ne,
-            _e,
-            ...Y
+    onFocus: N(e.onFocus, (R) => {
+      const Ne = !S.current;
+      if (R.target === R.currentTarget && Ne && !x) {
+        const se = new CustomEvent(Z, jo);
+        if (R.currentTarget.dispatchEvent(se), !se.defaultPrevented) {
+          const X = y().filter(
+            (M) => M.focusable
+          ), Fe = X.find(
+            (M) => M.active
+          ), Le = X.find(
+            (M) => M.id === p
+          ), Te = [
+            Fe,
+            Le,
+            ...X
           ].filter(Boolean).map(
-            (O) => O.ref.current
+            (M) => M.ref.current
           );
-          Ce(Pe);
+          ye(Te);
         }
@@ -1213,44 +1349,44 @@ }
     }),
-    onBlur: _(
+    onBlur: N(
       e.onBlur,
-      () => x(!1)
+      () => I(!1)
     )
   })));
-}), Qo = "RovingFocusGroupItem", et = /* @__PURE__ */ A((e, t) => {
-  const { __scopeRovingFocusGroup: o, focusable: r = !0, active: a = !1, tabStopId: n, ...c } = e, i = qo(), s = n || i, d = Xo(Qo, o), p = d.currentTabStopId === s, l = xe(o), { onFocusableItemAdd: h, onFocusableItemRemove: f } = d;
-  return P(() => {
+}), Qo = "RovingFocusGroupItem", Jo = /* @__PURE__ */ A((e, n) => {
+  const { __scopeRovingFocusGroup: o, focusable: r = !0, active: c = !1, tabStopId: t, ...i } = e, s = Wo(), l = t || s, d = Yo(Qo, o), b = d.currentTabStopId === l, u = ke(o), { onFocusableItemAdd: v, onFocusableItemRemove: h } = d;
+  return F(() => {
     if (r)
-      return h(), () => f();
+      return v(), () => h();
   }, [
     r,
-    h,
-    f
-  ]), /* @__PURE__ */ m(oe.ItemSlot, {
+    v,
+    h
+  ]), /* @__PURE__ */ g(ee.ItemSlot, {
     scope: o,
-    id: s,
+    id: l,
     focusable: r,
-    active: a
-  }, /* @__PURE__ */ m(B.span, y({
-    tabIndex: p ? 0 : -1,
+    active: c
+  }, /* @__PURE__ */ g(B.span, C({
+    tabIndex: b ? 0 : -1,
     "data-orientation": d.orientation
-  }, c, {
-    ref: t,
-    onMouseDown: _(e.onMouseDown, (u) => {
-      r ? d.onItemFocus(s) : u.preventDefault();
+  }, i, {
+    ref: n,
+    onMouseDown: N(e.onMouseDown, (p) => {
+      r ? d.onItemFocus(l) : p.preventDefault();
     }),
-    onFocus: _(
+    onFocus: N(
       e.onFocus,
-      () => d.onItemFocus(s)
+      () => d.onItemFocus(l)
     ),
-    onKeyDown: _(e.onKeyDown, (u) => {
-      if (u.key === "Tab" && u.shiftKey) {
+    onKeyDown: N(e.onKeyDown, (p) => {
+      if (p.key === "Tab" && p.shiftKey) {
         d.onItemShiftTab();
         return;
       }
-      if (u.target !== u.currentTarget)
+      if (p.target !== p.currentTarget)
         return;
-      const b = rt(u, d.orientation, d.dir);
-      if (b !== void 0) {
-        u.preventDefault();
-        let x = l().filter(
+      const m = nn(p, d.orientation, d.dir);
+      if (m !== void 0) {
+        p.preventDefault();
+        let I = u().filter(
           (k) => k.focusable
@@ -1260,11 +1396,11 @@ ).map(
         );
-        if (b === "last")
-          x.reverse();
-        else if (b === "prev" || b === "next") {
-          b === "prev" && x.reverse();
-          const k = x.indexOf(u.currentTarget);
-          x = d.loop ? nt(x, k + 1) : x.slice(k + 1);
+        if (m === "last")
+          I.reverse();
+        else if (m === "prev" || m === "next") {
+          m === "prev" && I.reverse();
+          const k = I.indexOf(p.currentTarget);
+          I = d.loop ? rn(I, k + 1) : I.slice(k + 1);
         }
         setTimeout(
-          () => Ce(x)
+          () => ye(I)
         );
@@ -1274,3 +1410,3 @@ }
   })));
-}), ot = {
+}), en = {
   ArrowLeft: "prev",
@@ -1285,57 +1421,57 @@ ArrowUp: "prev",
 };
-function tt(e, t) {
-  return t !== "rtl" ? e : e === "ArrowLeft" ? "ArrowRight" : e === "ArrowRight" ? "ArrowLeft" : e;
+function on(e, n) {
+  return n !== "rtl" ? e : e === "ArrowLeft" ? "ArrowRight" : e === "ArrowRight" ? "ArrowLeft" : e;
 }
-function rt(e, t, o) {
-  const r = tt(e.key, o);
-  if (!(t === "vertical" && [
+function nn(e, n, o) {
+  const r = on(e.key, o);
+  if (!(n === "vertical" && [
     "ArrowLeft",
     "ArrowRight"
-  ].includes(r)) && !(t === "horizontal" && [
+  ].includes(r)) && !(n === "horizontal" && [
     "ArrowUp",
     "ArrowDown"
   ].includes(r)))
-    return ot[r];
+    return en[r];
 }
-function Ce(e) {
-  const t = document.activeElement;
+function ye(e) {
+  const n = document.activeElement;
   for (const o of e)
-    if (o === t || (o.focus(), document.activeElement !== t))
+    if (o === n || (o.focus(), document.activeElement !== n))
       return;
 }
-function nt(e, t) {
+function rn(e, n) {
   return e.map(
-    (o, r) => e[(t + r) % e.length]
+    (o, r) => e[(n + r) % e.length]
   );
 }
-const at = Yo, ct = et, ye = "Radio", [it, we] = q(ye), [st, dt] = it(ye), lt = /* @__PURE__ */ A((e, t) => {
-  const { __scopeRadio: o, name: r, checked: a = !1, required: n, disabled: c, value: i = "on", onCheck: s, ...d } = e, [p, l] = z(null), h = G(
-    t,
-    (b) => l(b)
-  ), f = R(!1), u = p ? !!p.closest("form") : !0;
-  return /* @__PURE__ */ m(st, {
+const tn = Xo, cn = Jo, we = "Radio", [an, Se] = q(we), [sn, dn] = an(we), ln = /* @__PURE__ */ A((e, n) => {
+  const { __scopeRadio: o, name: r, checked: c = !1, required: t, disabled: i, value: s = "on", onCheck: l, ...d } = e, [b, u] = G(null), v = z(
+    n,
+    (m) => u(m)
+  ), h = w(!1), p = b ? !!b.closest("form") : !0;
+  return /* @__PURE__ */ g(sn, {
     scope: o,
-    checked: a,
-    disabled: c
-  }, /* @__PURE__ */ m(B.button, y({
+    checked: c,
+    disabled: i
+  }, /* @__PURE__ */ g(B.button, C({
     type: "button",
     role: "radio",
-    "aria-checked": a,
-    "data-state": Se(a),
-    "data-disabled": c ? "" : void 0,
-    disabled: c,
-    value: i
+    "aria-checked": c,
+    "data-state": Re(c),
+    "data-disabled": i ? "" : void 0,
+    disabled: i,
+    value: s
   }, d, {
-    ref: h,
-    onClick: _(e.onClick, (b) => {
-      a || s == null || s(), u && (f.current = b.isPropagationStopped(), f.current || b.stopPropagation());
+    ref: v,
+    onClick: N(e.onClick, (m) => {
+      c || l == null || l(), p && (h.current = m.isPropagationStopped(), h.current || m.stopPropagation());
     })
-  })), u && /* @__PURE__ */ m(pt, {
-    control: p,
-    bubbles: !f.current,
+  })), p && /* @__PURE__ */ g(pn, {
+    control: b,
+    bubbles: !h.current,
     name: r,
-    value: i,
-    checked: a,
-    required: n,
-    disabled: c,
+    value: s,
+    checked: c,
+    required: t,
+    disabled: i,
     style: {
@@ -1345,36 +1481,36 @@ transform: "translateX(-100%)"
   }));
-}), ut = "RadioIndicator", ft = /* @__PURE__ */ A((e, t) => {
-  const { __scopeRadio: o, forceMount: r, ...a } = e, n = dt(ut, o);
-  return /* @__PURE__ */ m(ae, {
-    present: r || n.checked
-  }, /* @__PURE__ */ m(B.span, y({
-    "data-state": Se(n.checked),
-    "data-disabled": n.disabled ? "" : void 0
-  }, a, {
-    ref: t
+}), un = "RadioIndicator", fn = /* @__PURE__ */ A((e, n) => {
+  const { __scopeRadio: o, forceMount: r, ...c } = e, t = dn(un, o);
+  return /* @__PURE__ */ g(te, {
+    present: r || t.checked
+  }, /* @__PURE__ */ g(B.span, C({
+    "data-state": Re(t.checked),
+    "data-disabled": t.disabled ? "" : void 0
+  }, c, {
+    ref: n
   })));
-}), pt = (e) => {
-  const { control: t, checked: o, bubbles: r = !0, ...a } = e, n = R(null), c = ue(o), i = fe(t);
-  return P(() => {
-    const s = n.current, d = window.HTMLInputElement.prototype, l = Object.getOwnPropertyDescriptor(d, "checked").set;
-    if (c !== o && l) {
-      const h = new Event("click", {
+}), pn = (e) => {
+  const { control: n, checked: o, bubbles: r = !0, ...c } = e, t = w(null), i = pe(o), s = he(n);
+  return F(() => {
+    const l = t.current, d = window.HTMLInputElement.prototype, u = Object.getOwnPropertyDescriptor(d, "checked").set;
+    if (i !== o && u) {
+      const v = new Event("click", {
         bubbles: r
       });
-      l.call(s, o), s.dispatchEvent(h);
+      u.call(l, o), l.dispatchEvent(v);
     }
   }, [
-    c,
+    i,
     o,
     r
-  ]), /* @__PURE__ */ m("input", y({
+  ]), /* @__PURE__ */ g("input", C({
     type: "radio",
     "aria-hidden": !0,
     defaultChecked: o
-  }, a, {
+  }, c, {
     tabIndex: -1,
-    ref: n,
+    ref: t,
     style: {
       ...e.style,
-      ...i,
+      ...s,
       position: "absolute",
@@ -1387,6 +1523,6 @@ pointerEvents: "none",
 };
-function Se(e) {
+function Re(e) {
   return e ? "checked" : "unchecked";
 }
-const bt = [
+const hn = [
   "ArrowUp",
@@ -1396,107 +1532,107 @@ "ArrowDown",
   "ArrowRight"
-], Ie = "RadioGroup", [ht, Xt] = q(Ie, [
-  ke,
-  we
-]), Re = ke(), Ee = we(), [vt, mt] = ht(Ie), $t = /* @__PURE__ */ A((e, t) => {
-  const { __scopeRadioGroup: o, name: r, defaultValue: a, value: n, required: c = !1, disabled: i = !1, orientation: s, dir: d, loop: p = !0, onValueChange: l, ...h } = e, f = Re(o), u = ge(d), [b, g] = ne({
-    prop: n,
-    defaultProp: a,
-    onChange: l
+], Ee = "RadioGroup", [bn, Jr] = q(Ee, [
+  Ce,
+  Se
+]), Ae = Ce(), _e = Se(), [vn, mn] = bn(Ee), $n = /* @__PURE__ */ A((e, n) => {
+  const { __scopeRadioGroup: o, name: r, defaultValue: c, value: t, required: i = !1, disabled: s = !1, orientation: l, dir: d, loop: b = !0, onValueChange: u, ...v } = e, h = Ae(o), p = Ie(d), [m, x] = re({
+    prop: t,
+    defaultProp: c,
+    onChange: u
   });
-  return /* @__PURE__ */ m(vt, {
+  return /* @__PURE__ */ g(vn, {
     scope: o,
     name: r,
-    required: c,
-    disabled: i,
-    value: b,
-    onValueChange: g
-  }, /* @__PURE__ */ m(at, y({
+    required: i,
+    disabled: s,
+    value: m,
+    onValueChange: x
+  }, /* @__PURE__ */ g(tn, C({
     asChild: !0
-  }, f, {
-    orientation: s,
-    dir: u,
-    loop: p
-  }), /* @__PURE__ */ m(B.div, y({
+  }, h, {
+    orientation: l,
+    dir: p,
+    loop: b
+  }), /* @__PURE__ */ g(B.div, C({
     role: "radiogroup",
-    "aria-required": c,
-    "aria-orientation": s,
-    "data-disabled": i ? "" : void 0,
-    dir: u
-  }, h, {
-    ref: t
+    "aria-required": i,
+    "aria-orientation": l,
+    "data-disabled": s ? "" : void 0,
+    dir: p
+  }, v, {
+    ref: n
   }))));
-}), gt = "RadioGroupItem", xt = /* @__PURE__ */ A((e, t) => {
-  const { __scopeRadioGroup: o, disabled: r, ...a } = e, n = mt(gt, o), c = n.disabled || r, i = Re(o), s = Ee(o), d = R(null), p = G(t, d), l = n.value === a.value, h = R(!1);
-  return P(() => {
-    const f = (b) => {
-      bt.includes(b.key) && (h.current = !0);
-    }, u = () => h.current = !1;
-    return document.addEventListener("keydown", f), document.addEventListener("keyup", u), () => {
-      document.removeEventListener("keydown", f), document.removeEventListener("keyup", u);
+}), gn = "RadioGroupItem", xn = /* @__PURE__ */ A((e, n) => {
+  const { __scopeRadioGroup: o, disabled: r, ...c } = e, t = mn(gn, o), i = t.disabled || r, s = Ae(o), l = _e(o), d = w(null), b = z(n, d), u = t.value === c.value, v = w(!1);
+  return F(() => {
+    const h = (m) => {
+      hn.includes(m.key) && (v.current = !0);
+    }, p = () => v.current = !1;
+    return document.addEventListener("keydown", h), document.addEventListener("keyup", p), () => {
+      document.removeEventListener("keydown", h), document.removeEventListener("keyup", p);
     };
-  }, []), /* @__PURE__ */ m(ct, y({
+  }, []), /* @__PURE__ */ g(cn, C({
     asChild: !0
-  }, i, {
-    focusable: !c,
-    active: l
-  }), /* @__PURE__ */ m(lt, y({
-    disabled: c,
-    required: n.required,
-    checked: l
-  }, s, a, {
-    name: n.name,
-    ref: p,
-    onCheck: () => n.onValueChange(a.value),
-    onKeyDown: _((f) => {
-      f.key === "Enter" && f.preventDefault();
+  }, s, {
+    focusable: !i,
+    active: u
+  }), /* @__PURE__ */ g(ln, C({
+    disabled: i,
+    required: t.required,
+    checked: u
+  }, l, c, {
+    name: t.name,
+    ref: b,
+    onCheck: () => t.onValueChange(c.value),
+    onKeyDown: N((h) => {
+      h.key === "Enter" && h.preventDefault();
     }),
-    onFocus: _(a.onFocus, () => {
-      var f;
-      h.current && ((f = d.current) === null || f === void 0 || f.click());
+    onFocus: N(c.onFocus, () => {
+      var h;
+      v.current && ((h = d.current) === null || h === void 0 || h.click());
     })
   })));
-}), kt = /* @__PURE__ */ A((e, t) => {
-  const { __scopeRadioGroup: o, ...r } = e, a = Ee(o);
-  return /* @__PURE__ */ m(ft, y({}, a, r, {
-    ref: t
+}), In = /* @__PURE__ */ A((e, n) => {
+  const { __scopeRadioGroup: o, ...r } = e, c = _e(o);
+  return /* @__PURE__ */ g(fn, C({}, c, r, {
+    ref: n
   }));
-}), Ct = $t, yt = xt, wt = kt;
-function Yt(e) {
+}), kn = $n, Cn = xn, yn = In;
+function et(e) {
   const {
-    labelRadioGroupError: t,
+    labelRadioGroupError: n,
     helpText: o,
     isDisabled: r,
-    isRequired: a,
-    label: n,
-    onChange: c,
-    options: i,
-    ...s
+    isRequired: c,
+    label: t,
+    onChange: i,
+    options: s,
+    ...l
   } = e;
   return /* @__PURE__ */ E(
-    It,
+    Sn,
     {
       disabled: r,
-      onValueChange: c,
-      required: a,
-      ...s,
+      onValueChange: i,
+      required: c,
+      ...l,
       children: [
-        n && /* @__PURE__ */ E(Rt, { "data-testid": "radio-group-label-wrapper", children: [
-          /* @__PURE__ */ E(Et, { children: [
-            n,
-            a && /* @__PURE__ */ v(At, { children: "*" })
+        t && /* @__PURE__ */ E(Rn, { "data-testid": "radio-group-label-wrapper", children: [
+          /* @__PURE__ */ E(En, { children: [
+            t,
+            c && /* @__PURE__ */ a(An, { children: "*" })
           ] }),
-          o && /* @__PURE__ */ v(Ae, { children: o })
+          o && /* @__PURE__ */ a(Pe, { children: o })
         ] }),
-        /* @__PURE__ */ E(Nt, { children: [
-          i.map(({ isDisabled: d, ...p }) => /* @__PURE__ */ v(
-            St,
+        /* @__PURE__ */ E(_n, { children: [
+          s.map(({ isDisabled: d, ...b }) => /* @__PURE__ */ a(
+            wn,
             {
-              groupId: s.id,
-              hasError: !!t,
+              groupId: l.id,
+              hasError: !!n,
               isDisabled: r ? !0 : d,
-              ...p
+              ...b
             },
-            p.value
+            b.value
           )),
-          /* @__PURE__ */ v(Ft, { children: t ?? /* @__PURE__ */ v(ie, { children: " " }) })
+          /* @__PURE__ */ a(On, { children: n ?? /* @__PURE__ */ a(de, { children: " " }) })
         ] })
@@ -1507,45 +1643,45 @@ ]
 }
-function St(e) {
-  const { ariaLabel: t, hasError: o, isDisabled: r, groupId: a, helpText: n, label: c, value: i } = e, s = `${a}-${i}`;
-  return /* @__PURE__ */ E(_t, { children: [
-    /* @__PURE__ */ E(Lt, { ...r ? { "data-disabled": !0 } : {}, children: [
-      /* @__PURE__ */ v(
-        Pt,
+function wn(e) {
+  const { ariaLabel: n, hasError: o, isDisabled: r, groupId: c, helpText: t, label: i, value: s } = e, l = `${c}-${s}`;
+  return /* @__PURE__ */ E(Pn, { children: [
+    /* @__PURE__ */ E(Ln, { ...r ? { "data-disabled": !0 } : {}, children: [
+      /* @__PURE__ */ a(
+        Nn,
         {
-          "aria-label": t ?? (typeof c == "string" ? c : void 0),
+          "aria-label": n ?? (typeof i == "string" ? i : void 0),
           ...o ? { "data-error": !0 } : {},
           disabled: r,
-          id: s,
-          value: i,
-          children: /* @__PURE__ */ v(Tt, {})
+          id: l,
+          value: s,
+          children: /* @__PURE__ */ a(Fn, {})
         }
       ),
-      /* @__PURE__ */ v(Mt, { htmlFor: s, children: c })
+      /* @__PURE__ */ a(Tn, { htmlFor: l, children: i })
     ] }),
-    n && /* @__PURE__ */ v(Ot, { ...r ? { "data-disabled": !0 } : {}, children: n })
+    t && /* @__PURE__ */ a(Mn, { ...r ? { "data-disabled": !0 } : {}, children: t })
   ] });
 }
-const It = $(Ct)`
+const Sn = $(kn)`
   display: flex;
   flex-direction: column;
   gap: var(--echoes-dimension-space-150);
-`, Rt = $.div`
+`, Rn = $.div`
   display: flex;
   flex-direction: column;
   gap: var(--echoes-dimension-space-50);
-`, Et = $.div`
+`, En = $.div`
   color: var(--echoes-color-text-bold);
   font: var(--echoes-typography-paragraph-default-semi-bold);
-`, At = $.span`
+`, An = $.span`
   color: var(--echoes-color-text-danger);
   font: var(--echoes-typography-paragraph-default-medium);
   margin-left: var(--echoes-dimension-space-25);
-`, Nt = $.div`
+`, _n = $.div`
   display: flex;
   flex-direction: column;
   gap: var(--echoes-dimension-space-100);
-`, _t = $.div`
+`, Pn = $.div`
   display: flex;
   flex-direction: column;
-`, Pt = $(yt)`
+`, Nn = $(Cn)`
   appearance: none;
@@ -1582,2 +1718,3 @@ cursor: pointer;
 
+  &:focus,
   &:focus-visible {
@@ -1593,3 +1730,3 @@ outline: var(--echoes-color-focus-default) solid var(--echoes-focus-border-width-default);
   }
-`, Tt = $(wt)`
+`, Fn = $(yn)`
   display: flex;
@@ -1617,7 +1754,7 @@ align-items: center;
   }
-`, Lt = $.span`
+`, Ln = $.span`
   display: inline-flex;
   gap: var(--echoes-dimension-space-100);
   align-items: center;
-`, Mt = $.label`
+`, Tn = $.label`
   display: block;
@@ -1632,6 +1769,6 @@ font: var(--echoes-typography-paragraph-default-medium);
   }
-`, Ae = $.span`
+`, Pe = $.span`
   font: var(--echoes-typography-paragraph-small-regular);
   color: var(--echoes-color-text-subdued);
-`, Ot = $(Ae)`
+`, Mn = $(Pe)`
   margin-left: calc(var(--echoes-dimension-space-200) + var(--echoes-dimension-space-100));
@@ -1642,19 +1779,77 @@
   }
-`, Ft = $.span`
+`, On = $.span`
   font: var(--echoes-typography-paragraph-default-regular);
   color: var(--echoes-color-text-danger);
 `;
-function Jt(e) {
+function ot(e) {
   document.documentElement.setAttribute("data-echoes-theme", e);
 }
-var Dt = /* @__PURE__ */ ((e) => (e.light = "light", e.dark = "dark", e))(Dt || {});
+var Dn = /* @__PURE__ */ ((e) => (e.light = "light", e.dark = "dark", e))(Dn || {});
 export {
-  Zt as Checkbox,
-  Fo as Link,
-  N as LinkHighlight,
+  Yn as Checkbox,
+  Xn as IconArrowDownRight,
+  Zn as IconArrowLeft,
+  Qn as IconArrowRight,
+  Jn as IconArrowUpRight,
+  er as IconBell,
+  or as IconBranch,
+  nr as IconBug,
+  rr as IconCalendar,
+  tr as IconCheck,
+  cr as IconCheckCircle,
+  ar as IconChevronDown,
+  ir as IconClock,
+  sr as IconCodeSmell,
+  dr as IconCollapse,
+  lr as IconComment,
+  ur as IconCopy,
+  fr as IconDash,
+  pr as IconDirectory,
+  hr as IconDot,
+  br as IconEqual,
+  vr as IconError,
+  mr as IconExpand,
+  $r as IconFile,
+  gr as IconFileCode,
+  xr as IconFilter,
+  Ir as IconFoldDown,
+  kr as IconFoldUp,
+  Cr as IconGear,
+  yr as IconGitBranch,
+  wr as IconHome,
+  Sr as IconInfo,
+  Rr as IconInheritance,
+  Er as IconLink,
+  _o as IconLinkExternal,
+  Ar as IconLock,
+  _r as IconMegaphone,
+  Pr as IconMoreVertical,
+  Nr as IconOverview,
+  Fr as IconPeople,
+  Lr as IconPin,
+  Tr as IconPlus,
+  Mr as IconProject,
+  Or as IconPullrequest,
+  Dr as IconQuestionMark,
+  Gr as IconRecommended,
+  zr as IconRocket,
+  Br as IconSearch,
+  Ur as IconSecurityFinding,
+  Wr as IconStar,
+  qr as IconStatusConfirmed,
+  jr as IconStatusOpen,
+  Vr as IconStatusReopened,
+  Kr as IconStatusResolved,
+  Hr as IconTarget,
+  Yr as IconUnfold,
+  Xr as IconVulnerability,
+  Zr as IconWarning,
+  Qr as IconX,
+  Mo as Link,
+  P as LinkHighlight,
   Go as LinkStandalone,
-  Yt as RadioButtonGroup,
-  so as Spinner,
-  Dt as Theme,
-  Jt as setTheme
+  et as RadioButtonGroup,
+  fo as Spinner,
+  Dn as Theme,
+  ot as setTheme
 };

dist/utils/theme.d.ts

 import { Theme } from '../generated/themes';
+
 export declare function setTheme(theme: Theme): void;
 //# sourceMappingURL=theme.d.ts.map

package.json

 {
   "name": "@sonarsource/echoes-react",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "type": "module",
@@ -16,3 +16,3 @@ "exports": "./dist/index.js",
   "engines": {
-    "node": ">=18.17.0"
+    "node": ">=20.11"
   },
@@ -25,13 +25,16 @@ "packageManager": "yarn@4.0.2",
     "build": "vite build",
+    "build-intl-keys": "formatjs extract src/components/**/*.ts* --out-file i18n/keys.json",
     "build-tokens": "node design-tokens/build.js",
     "build-storybook": "vite build & storybook build",
-    "intl": "formatjs extract src/components/**/*.ts*",
+    "dep-check": "node --no-warnings ./config/scripts/validate-package-json.js",
     "format": "prettier --write --list-different .",
     "format-check": "prettier --check .",
+    "intl-keys-check": "./config/scripts/validate-intl-keys.sh",
     "lint": "eslint --ext js,ts,tsx,snap --quiet .",
     "lint-report": "eslint --ext js,ts,tsx,snap -f json -o build-reports/eslint-report/eslint-report.json .",
     "storybook": "storybook dev -p 6006",
+    "tokens-check": "./config/scripts/validate-tokens.sh",
     "ts-check": "tsc --noEmit",
     "validate": "yarn lint && yarn ts-check && yarn format-check",
-    "validate-ci": "yarn lint-report && yarn ts-check && yarn format-check"
+    "validate-ci": "yarn dep-check && yarn intl-keys-check && yarn tokens-check && yarn lint-report && yarn ts-check && yarn format-check"
   },
@@ -48,42 +51,42 @@ "peerDependencies": {
     "@emotion/jest": "11.11.0",
-    "@emotion/react": "11.11.1",
+    "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.0",
-    "@formatjs/cli": "6.2.4",
-    "@storybook/addon-a11y": "7.5.3",
-    "@storybook/addon-essentials": "7.5.3",
-    "@storybook/addon-interactions": "7.5.3",
-    "@storybook/addon-links": "7.5.3",
-    "@storybook/addon-themes": "7.5.3",
-    "@storybook/blocks": "7.5.3",
-    "@storybook/manager-api": "7.5.3",
-    "@storybook/react": "7.5.3",
-    "@storybook/react-vite": "7.5.3",
-    "@storybook/testing-library": "0.2.2",
-    "@storybook/theming": "7.5.3",
-    "@swc/core": "1.3.99",
-    "@swc/jest": "0.2.29",
-    "@testing-library/dom": "9.3.3",
+    "@formatjs/cli": "6.2.7",
+    "@storybook/addon-a11y": "8.0.5",
+    "@storybook/addon-essentials": "8.0.5",
+    "@storybook/addon-interactions": "8.0.5",
+    "@storybook/addon-links": "8.0.5",
+    "@storybook/addon-themes": "8.0.5",
+    "@storybook/blocks": "8.0.5",
+    "@storybook/manager-api": "8.0.5",
+    "@storybook/react": "8.0.5",
+    "@storybook/react-vite": "8.0.5",
+    "@storybook/test": "8.0.5",
+    "@storybook/theming": "8.0.5",
+    "@swc/core": "1.4.8",
+    "@swc/jest": "0.2.36",
+    "@testing-library/dom": "9.3.4",
     "@testing-library/jest-dom": "6.1.4",
     "@testing-library/react": "12.1.5",
-    "@testing-library/user-event": "14.5.1",
-    "@tokens-studio/sd-transforms": "0.11.10",
-    "@types/eslint": "8.44.7",
-    "@types/jest": "29.5.10",
-    "@types/jest-axe": "3.5.8",
-    "@types/node": "18.17.0",
-    "@types/react": "17.0.70",
-    "@types/react-dom": "17.0.23",
-    "@typescript-eslint/eslint-plugin": "6.12.0",
-    "@typescript-eslint/parser": "6.12.0",
-    "@vitejs/plugin-react": "4.2.0",
+    "@testing-library/user-event": "14.5.2",
+    "@tokens-studio/sd-transforms": "0.14.4",
+    "@types/eslint": "8.56.6",
+    "@types/jest": "29.5.12",
+    "@types/jest-axe": "3.5.9",
+    "@types/node": "20.11.30",
+    "@types/react": "17.0.79",
+    "@types/react-dom": "17.0.25",
+    "@typescript-eslint/eslint-plugin": "7.3.1",
+    "@typescript-eslint/parser": "7.3.1",
+    "@vitejs/plugin-react": "4.2.1",
     "classnames": "2.5.1",
-    "eslint": "8.54.0",
+    "eslint": "8.57.0",
     "eslint-config-sonarqube": "2.1.3",
     "eslint-plugin-header": "3.1.1",
-    "eslint-plugin-import": "2.29.0",
-    "eslint-plugin-jest": "27.6.0",
-    "eslint-plugin-jest-dom": "5.1.0",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-jest": "27.9.0",
+    "eslint-plugin-jest-dom": "5.2.0",
     "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-promise": "6.1.1",
-    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-react": "7.34.1",
     "eslint-plugin-react-hooks": "4.6.0",
@@ -94,19 +97,20 @@ "eslint-plugin-testing-library": "5.11.1",
     "jest-environment-jsdom": "29.7.0",
-    "prettier": "3.1.0",
+    "prettier": "3.2.5",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-intl": "6.5.5",
-    "react-router-dom": "6.11.2",
-    "rollup-plugin-license": "3.2.0",
-    "storybook": "7.5.3",
-    "style-dictionary": "3.9.0",
-    "typescript": "5.2.2",
-    "vite": "5.0.0",
-    "vite-plugin-dts": "3.6.3"
+    "react-intl": "6.6.2",
+    "react-router-dom": "6.22.3",
+    "rollup": "4.13.2",
+    "rollup-plugin-license": "3.3.1",
+    "storybook": "8.0.5",
+    "style-dictionary": "3.9.2",
+    "typescript": "5.3.3",
+    "vite": "5.2.7",
+    "vite-plugin-dts": "3.8.1"
   },
   "dependencies": {
-    "@primer/octicons-react": "19.8.0",
     "@radix-ui/react-checkbox": "1.0.4",
-    "@radix-ui/react-radio-group": "1.1.3"
+    "@radix-ui/react-radio-group": "1.1.3",
+    "material-symbols": "0.17.0"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5698295

increased by5929.75%

Number of package files

172

increased by224.53%

Lines of code

3258

increased by76.3%

Worsened metrics

Dev dependency count

58

increased by1.75%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedmaterial-symbols@0.17.0

• + Addedmaterial-symbols@0.17.0(transitive)

• - Removed@primer/octicons-react@19.8.0

• - Removed@primer/octicons-react@19.8.0(transitive)