@altinn/altinn-components 0.54.2 → 0.55.0

package/dist/components/GlobalMenu/GlobalMenuButton.js

@@ -12,20 +12,20 @@ import "../Snackbar/useSnackbar.js";
 import { S as y } from "../../XMark-tKk6aExO.js";
 import { u as I } from "../../useId-BVFxCjkq.js";
 import '../../assets/GlobalMenuButton2.css';var j = function(t, l) {
-  var o = {};
-  for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && l.indexOf(e) < 0 && (o[e] = t[e]);
+  var n = {};
+  for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && l.indexOf(e) < 0 && (n[e] = t[e]);
   if (t != null && typeof Object.getOwnPropertySymbols == "function")
-    for (var n = 0, e = Object.getOwnPropertySymbols(t); n < e.length; n++)
-      l.indexOf(e[n]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[n]) && (o[e[n]] = t[e[n]]);
-  return o;
+    for (var o = 0, e = Object.getOwnPropertySymbols(t); o < e.length; o++)
+      l.indexOf(e[o]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[o]) && (n[e[o]] = t[e[o]]);
+  return n;
 };
 const k = x((t, l) => {
-  var { title: o, titleId: e } = t, n = j(t, ["title", "titleId"]);
+  var { title: n, titleId: e } = t, o = j(t, ["title", "titleId"]);
   let i = I();
-  return i = o ? e || "title-" + i : void 0, u.createElement(
+  return i = n ? e || "title-" + i : void 0, u.createElement(
     "svg",
-    Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: l, "aria-labelledby": i }, n),
-    o ? u.createElement("title", { id: i }, o) : null,
+    Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: l, "aria-labelledby": i }, o),
+    n ? u.createElement("title", { id: i }, n) : null,
     u.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M2.75 6a.75.75 0 0 1 .75-.75h17a.75.75 0 0 1 0 1.5h-17A.75.75 0 0 1 2.75 6m0 6a.75.75 0 0 1 .75-.75h17a.75.75 0 0 1 0 1.5h-17a.75.75 0 0 1-.75-.75m.75 5.25a.75.75 0 0 0 0 1.5h17a.75.75 0 0 0 0-1.5z", clipRule: "evenodd" })
   );
 }), B = "_button_rhdbs_1", N = "_icon_rhdbs_25", R = "_iconMobile_rhdbs_31", S = "_badge_rhdbs_37", a = {
@@ -51,23 +51,24 @@ const k = x((t, l) => {
 }, J = ({
   className: t,
   as: l = "button",
-  color: o = "company",
+  color: n = "company",
   variant: e = "solid",
-  expanded: n,
+  expanded: o,
   label: i = "Menu",
   badge: c,
   ...f
 }) => {
   const s = M(), { languageCode: v } = O(), { close: b } = C(v);
-  return n ? /* @__PURE__ */ m(
+  return o ? /* @__PURE__ */ m(
     g,
     {
       ...f,
       as: l,
       type: "button",
       variant: e,
-      color: o,
+      color: n,
       className: p(a.button, t),
+      "aria-expanded": o,
       children: [
         s && /* @__PURE__ */ m(w, { children: [
           /* @__PURE__ */ r(d, { icon: /* @__PURE__ */ r(y, { className: a.icon, "aria-label": b }) }),
@@ -84,7 +85,7 @@ const k = x((t, l) => {
       as: l,
       type: "button",
       variant: e,
-      color: o,
+      color: n,
       className: p(a.button, t),
       children: [
         s && /* @__PURE__ */ r(d, { icon: /* @__PURE__ */ r(k, { className: a.icon, "aria-hidden": !0 }) }),

package/dist/components/GlobalMenu/LocaleSwitcher.js

@@ -1,34 +1,40 @@
 "use client";
-import { jsx as r } from "react/jsx-runtime";
-import { useRef as p, useMemo as d } from "react";
-import { useEnterKey as f } from "../../hooks/useEnterKey.js";
+import { jsx as o } from "react/jsx-runtime";
+import { useRef as f, useMemo as i } from "react";
+import { useEnterKey as g } from "../../hooks/useEnterKey.js";
+import { MenuItems as h } from "../Menu/MenuItems.js";
 import "../../index-p1eeF8LQ.js";
 import "../Button/Button.js";
-import { useRootContext as g } from "../RootProvider/RootProvider.js";
+import { useRootContext as k } from "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import { MenuItems as h } from "../Menu/MenuItems.js";
-import { S as k } from "../../Checkmark-Byz_C9x4.js";
-const L = ({ title: s = "Select language", options: o, onSelect: i }) => {
-  const n = p(null), { currentId: a, closeAll: c } = g(), l = a === "locale", u = d(() => o.map((e) => ({
-    ...e,
-    id: String(e.value),
-    tabIndex: -1,
-    groupId: "locales",
-    icon: e.checked ? k : /* @__PURE__ */ r("span", { "aria-hidden": "true" }),
-    onClick: () => {
-      i?.(String(e.value)), c();
-    }
-  })), [o, i]), m = {
+import { S as v } from "../../Checkmark-Byz_C9x4.js";
+const M = ({ title: s = "Select language", options: r, onSelect: a }) => {
+  const l = f(null), { currentId: u, closeAll: c } = k(), d = u === "locale", n = i(() => r.find((e) => e.checked)?.value ?? r[0]?.value, [r]), m = i(() => r.map((t) => {
+    const e = t.value === n;
+    return {
+      ...t,
+      id: String(t.value),
+      tabIndex: 0,
+      groupId: "locales",
+      role: "radio",
+      name: "locale",
+      checked: e,
+      icon: e ? v : /* @__PURE__ */ o("span", { "aria-hidden": "true" }),
+      onClick: () => {
+        a?.(String(t.value)), c();
+      }
+    };
+  }), [r, a, c, n]), p = {
     locales: { title: s || "Språk/language" }
   };
-  return f((e) => {
-    if (l) {
-      e.preventDefault();
-      const t = n.current?.querySelector('[data-active="true"]');
-      t && (t.tagName === "A" && t.hasAttribute("href") ? t.click() : t.dispatchEvent(new MouseEvent("click", { bubbles: !0 }))), c();
+  return g((t) => {
+    if (d) {
+      t.preventDefault();
+      const e = l.current?.querySelector('[data-active="true"]');
+      e && (e.tagName === "A" && e.hasAttribute("href") ? e.click() : e.dispatchEvent(new MouseEvent("click", { bubbles: !0 }))), c();
     }
-  }), /* @__PURE__ */ r("div", { ref: n, "data-testid": "locale-switcher", children: /* @__PURE__ */ r(h, { groups: m, items: u, keyboardEvents: !0 }) });
+  }), /* @__PURE__ */ o("div", { ref: l, "data-testid": "locale-switcher", role: "radiogroup", children: /* @__PURE__ */ o(h, { groups: p, items: m, keyboardEvents: !1 }) });
 };
 export {
-  L as LocaleSwitcher
+  M as LocaleSwitcher
 };

package/dist/components/GlobalMenu_old/BackButton.js

@@ -1,6 +1,6 @@
 import { jsx as m } from "react/jsx-runtime";
-import "../../index-p1eeF8LQ.js";
 import "react";
+import "../../index-p1eeF8LQ.js";
 import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";

package/dist/components/GlobalMenu_old/CurrentAccount.js

@@ -1,24 +1,23 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as m } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
 import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
-import { MenuItem as m } from "../Menu/MenuItem.js";
+import { MenuItem as n } from "../Menu/MenuItem.js";
 import "../Snackbar/useSnackbar.js";
-const g = ({ account: i, multipleAccounts: r, as: t, onClick: e }) => /* @__PURE__ */ o(
-  m,
+const I = ({ account: i, multipleAccounts: r, as: o, onClick: t }) => /* @__PURE__ */ m(
+  n,
   {
     id: "account",
     size: "lg",
-    interactive: !!r,
-    as: r ? t : "div",
-    onClick: e,
+    as: r ? o : "div",
+    onClick: t,
     linkIcon: r,
     icon: i?.icon,
-    title: { children: i?.name, size: "sm", weight: "medium" },
+    title: i?.name,
     description: i?.description
   }
 );
 export {
-  g as CurrentAccount
+  I as CurrentAccount
 };

package/dist/components/GlobalMenu_old/EndUserLabel.js

@@ -1,13 +1,32 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { S as l } from "../../PersonCircle-DlX_3kRO.js";
-import '../../assets/EndUserLabel.css';const n = "_text_1tx3s_1", o = "_icon_1tx3s_11", c = "_label_1tx3s_15", s = {
-  text: n,
-  icon: o,
-  label: c
-}, x = ({ children: e }) => /* @__PURE__ */ a("p", { className: s.text, children: [
-  /* @__PURE__ */ t(l, { className: s.icon, "aria-hidden": !0 }),
-  /* @__PURE__ */ t("span", { className: s.label, children: e })
+"use client";
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import a, { forwardRef as d } from "react";
+import { u as f } from "../../useId-BVFxCjkq.js";
+import '../../assets/EndUserLabel.css';var m = function(t, n) {
+  var r = {};
+  for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && n.indexOf(e) < 0 && (r[e] = t[e]);
+  if (t != null && typeof Object.getOwnPropertySymbols == "function")
+    for (var l = 0, e = Object.getOwnPropertySymbols(t); l < e.length; l++)
+      n.indexOf(e[l]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[l]) && (r[e[l]] = t[e[l]]);
+  return r;
+};
+const u = d((t, n) => {
+  var { title: r, titleId: e } = t, l = m(t, ["title", "titleId"]);
+  let o = f();
+  return o = r ? e || "title-" + o : void 0, a.createElement(
+    "svg",
+    Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: n, "aria-labelledby": o }, l),
+    r ? a.createElement("title", { id: o }, r) : null,
+    a.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M12 3.75a8.25 8.25 0 0 0-5.144 14.7 5.25 5.25 0 0 1 10.288 0A8.25 8.25 0 0 0 12 3.75m3.747 15.602a3.75 3.75 0 0 0-7.494 0A8.2 8.2 0 0 0 12 20.25c1.35 0 2.623-.324 3.747-.898M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12M12 7.25a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5M8.25 9.5a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0", clipRule: "evenodd" })
+  );
+}), p = "_text_1tx3s_1", b = "_icon_1tx3s_11", _ = "_label_1tx3s_15", i = {
+  text: p,
+  icon: b,
+  label: _
+}, g = ({ children: t }) => /* @__PURE__ */ c("p", { className: i.text, children: [
+  /* @__PURE__ */ s(u, { className: i.icon, "aria-hidden": !0 }),
+  /* @__PURE__ */ s("span", { className: i.label, children: t })
 ] });
 export {
-  x as EndUserLabel
+  g as EndUserLabel
 };

package/dist/components/GlobalMenu_old/GlobalMenu.js

@@ -5,11 +5,11 @@ import "../../index-p1eeF8LQ.js";
 import { AccountMenu as x } from "../Account/AccountMenu.js";
 import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
+import { Menu as f } from "../Menu/Menu.js";
+import { MenuListItem as h } from "../Menu/MenuListItem.js";
 import { CurrentAccount as y } from "./CurrentAccount.js";
 import { BackButton as j } from "./BackButton.js";
-import { LogoutButton as f } from "./LogoutButton.js";
-import { MenuListItem as h } from "../Menu/MenuBase.js";
-import { Menu as k } from "../Menu/Menu.js";
+import { LogoutButton as k } from "./LogoutButton.js";
 import "../Snackbar/useSnackbar.js";
 import { GlobalMenuBase as a, GlobalMenuHeader as B, GlobalMenuFooter as b } from "./GlobalMenuBase.js";
 const L = ({
@@ -42,7 +42,14 @@ const L = ({
     return /* @__PURE__ */ c(a, { "aria-label": m, children: [
       /* @__PURE__ */ r(B, { children: /* @__PURE__ */ r(j, { onClick: n, label: g }) }),
       /* @__PURE__ */ r(h, { as: "div", role: "separator" }),
-      t && /* @__PURE__ */ r(x, { ...t, currentAccount: e, onSelectAccount: u })
+      t && /* @__PURE__ */ r(
+        x,
+        {
+          ...t,
+          currentAccount: e,
+          onSelectAccount: u
+        }
+      )
     ] });
   if (e) {
     const o = t && t?.items?.length > 1;
@@ -59,13 +66,13 @@ const L = ({
         ),
         /* @__PURE__ */ r(h, { as: "div", role: "separator" })
       ] }),
-      i && /* @__PURE__ */ r(k, { ...i, items: p }),
-      s && /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(f, { ...s }) })
+      i && /* @__PURE__ */ r(f, { ...i, items: p }),
+      s && /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(k, { ...s }) })
     ] });
   }
   return /* @__PURE__ */ c(a, { "aria-label": m, children: [
-    i && /* @__PURE__ */ r(k, { ...i, items: p }),
-    s && /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(f, { ...s }) })
+    i && /* @__PURE__ */ r(f, { ...i, items: p }),
+    s && /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(k, { ...s }) })
   ] });
 };
 export {

package/dist/components/GlobalMenu_old/GlobalMenuButton.js

@@ -1,8 +1,8 @@
 import { jsxs as e, jsx as o } from "react/jsx-runtime";
 import { c as l } from "../../index-p1eeF8LQ.js";
 import { Badge as _ } from "../Badge/Badge.js";
-import "react";
 import { Avatar as f } from "../Avatar/Avatar.js";
+import "react";
 import { Button as u } from "../Button/Button.js";
 import { ButtonIcon as I } from "../Button/ButtonIcon.js";
 import { ButtonLabel as h } from "../Button/ButtonLabel.js";

package/dist/components/Header/Header.js

@@ -4,9 +4,9 @@ import "../../index-p1eeF8LQ.js";
 import "react";
 import { useIsDesktop as H } from "../../hooks/useIsDesktop.js";
 import "../Button/Button.js";
-import { useRootContext as S } from "../RootProvider/RootProvider.js";
-import { DropdownBase as k } from "../Dropdown/DropdownBase.js";
-import { DrawerBase as B } from "../Dropdown/DrawerBase.js";
+import { DropdownBase as S } from "../Dropdown/DropdownBase.js";
+import { DrawerBase as k } from "../Dropdown/DrawerBase.js";
+import { useRootContext as B } from "../RootProvider/RootProvider.js";
 import { GlobalMenu_old as u } from "../GlobalMenu_old/GlobalMenu.js";
 import { GlobalMenuButton_old as D } from "../GlobalMenu_old/GlobalMenuButton.js";
 import { HeaderBase as I } from "./HeaderBase.js";
@@ -30,7 +30,7 @@ import '../../assets/Header.css';const N = "_drawer_afyu3_1", g = "_dropdown_afy
   logo: x = {},
   badge: C
 }) => {
-  const { currentId: e, toggleId: p, openId: v, closeAll: t } = S(), i = () => {
+  const { currentId: e, toggleId: p, openId: v, closeAll: t } = B(), i = () => {
     v("search");
   }, c = () => {
     p("search");
@@ -59,7 +59,7 @@ import '../../assets/Header.css';const N = "_drawer_afyu3_1", g = "_dropdown_afy
               }
             ),
             r && /* @__PURE__ */ o(
-              k,
+              S,
               {
                 layout: "desktop",
                 padding: !0,
@@ -81,7 +81,7 @@ import '../../assets/Header.css';const N = "_drawer_afyu3_1", g = "_dropdown_afy
           ] })
         ] }),
         n && !l && /* @__PURE__ */ o(h, { expanded: e === "search", children: /* @__PURE__ */ o(f, { ...n, expanded: e === "search", onClose: c, onFocus: i }) }),
-        r && /* @__PURE__ */ o(B, { open: e === "menu", className: m.drawer, children: /* @__PURE__ */ o(
+        r && /* @__PURE__ */ o(k, { open: e === "menu", className: m.drawer, children: /* @__PURE__ */ o(
           u,
           {
             ...r,

package/dist/components/Header/HeaderBase.js

@@ -2,8 +2,8 @@ import { jsxs as t, jsx as s } from "react/jsx-runtime";
 import { c as p } from "../../index-p1eeF8LQ.js";
 import "react";
 import "../Button/Button.js";
-import "../RootProvider/RootProvider.js";
 import { Backdrop as m } from "../Dropdown/Backdrop.js";
+import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import '../../assets/HeaderBase.css';const i = "_header_dg4o1_1", n = "_backdrop_dg4o1_17", r = {
   header: i,

package/dist/components/Header/LocaleSwitcher.js

@@ -1,22 +1,22 @@
 "use client";
-import { jsx as r, jsxs as f } from "react/jsx-runtime";
+import { jsx as r, jsxs as g } from "react/jsx-runtime";
 import { useRef as k, useMemo as h } from "react";
 import { useEnterKey as v } from "../../hooks/useEnterKey.js";
 import { useIsDesktop as b } from "../../hooks/useIsDesktop.js";
 import { DropdownBase as x } from "../Dropdown/DropdownBase.js";
 import "../../index-p1eeF8LQ.js";
-import { DrawerBase as I } from "../Dropdown/DrawerBase.js";
 import "../Button/Button.js";
-import { useRootContext as S } from "../RootProvider/RootProvider.js";
 import { MenuItems as p } from "../Menu/MenuItems.js";
-import { LocaleButton as w } from "./LocaleButton.js";
+import { useRootContext as I } from "../RootProvider/RootProvider.js";
+import { LocaleButton as S } from "./LocaleButton.js";
 import "../Snackbar/useSnackbar.js";
+import { DrawerBase as w } from "../Dropdown/DrawerBase.js";
 import { S as C } from "../../Checkmark-Byz_C9x4.js";
 const z = ({ title: m = "Select language", options: s, onSelect: a }) => {
-  const i = k(null), c = b(), { currentId: d, toggleId: g, closeAll: n } = S(), o = d === "locale", l = h(() => s.map((e) => ({
+  const i = k(null), c = b(), { currentId: d, toggleId: f, closeAll: n } = I(), o = d === "locale", l = h(() => s.map((e) => ({
     ...e,
     id: String(e.value),
-    tabIndex: -1,
+    tabIndex: 0,
     groupId: "locales",
     icon: e.checked ? C : /* @__PURE__ */ r("span", { "aria-hidden": "true" }),
     onClick: () => {
@@ -31,12 +31,12 @@ const z = ({ title: m = "Select language", options: s, onSelect: a }) => {
       const t = i.current?.querySelector('[data-active="true"]');
       t && (t.tagName === "A" && t.hasAttribute("href") ? t.click() : t.dispatchEvent(new MouseEvent("click", { bubbles: !0 }))), n();
     }
-  }), /* @__PURE__ */ f("div", { ref: i, "data-testid": "locale-switcher", children: [
-    /* @__PURE__ */ r(w, { onClick: () => g("locale"), expanded: o, onBlurCapture: (e) => {
+  }), /* @__PURE__ */ g("div", { ref: i, "data-testid": "locale-switcher", children: [
+    /* @__PURE__ */ r(S, { onClick: () => f("locale"), expanded: o, onBlurCapture: (e) => {
       e?.relatedTarget?.closest('[data-testid="locale-switcher"]') || n();
     } }),
-    o && c && /* @__PURE__ */ r(x, { layout: "desktop", padding: !0, placement: "right", open: !0, children: /* @__PURE__ */ r(p, { groups: u, items: l, keyboardEvents: !0 }) }),
-    o && !c && /* @__PURE__ */ r(I, { open: !0, placement: "bottom", children: /* @__PURE__ */ r(p, { groups: u, items: l, keyboardEvents: !0 }) })
+    o && c && /* @__PURE__ */ r(x, { layout: "desktop", padding: !0, placement: "right", open: !0, children: /* @__PURE__ */ r(p, { groups: u, items: l, keyboardEvents: !1 }) }),
+    o && !c && /* @__PURE__ */ r(w, { open: !0, placement: "bottom", children: /* @__PURE__ */ r(p, { groups: u, items: l, keyboardEvents: !1 }) })
   ] });
 };
 export {

package/dist/components/Icon/Icon.js

@@ -1,32 +1,31 @@
-import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import { c } from "../../index-p1eeF8LQ.js";
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import { c as _ } from "../../index-p1eeF8LQ.js";
 import "react";
-import { Skeleton as h } from "../Skeleton/Skeleton.js";
+import { Skeleton as d } from "../Skeleton/Skeleton.js";
 import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/Icon.css';const _ = "_icon_1y3dz_1", g = "_shape_1y3dz_9", v = "_svg_1y3dz_14", N = "_image_1y3dz_15", a = {
-  icon: _,
-  shape: g,
+import '../../assets/Icon.css';const g = "_icon_1y3dz_1", h = "_shape_1y3dz_9", v = "_svg_1y3dz_14", y = "_image_1y3dz_15", a = {
+  icon: g,
+  shape: h,
   svg: v,
-  image: N
+  image: y
 }, I = (s) => typeof s == "object" && s !== null && ("svgElement" in s || "iconUrl" in s), k = ({
   loading: s,
-  altText: n,
-  svgElement: r,
+  altText: o,
+  svgElement: t,
   size: i,
-  color: o,
-  theme: m,
-  iconUrl: p,
-  className: t,
-  style: l
-}) => r ? /* @__PURE__ */ e("span", { "data-size": i, "data-color": o, "data-theme": m, className: c(a.icon, t), style: l, children: /* @__PURE__ */ d(h, { loading: s, variant: "circle", className: a.shape, children: [
+  color: n,
+  iconUrl: c,
+  className: r,
+  style: m,
+  children: l
+}) => /* @__PURE__ */ e("span", { "data-ui": "icon", "data-size": i, "data-color": n, className: _(a.icon, r), style: m, children: /* @__PURE__ */ p(d, { loading: s, variant: "circle", className: a.shape, children: [
   /* @__PURE__ */ e("span", { className: a.shape }),
-  /* @__PURE__ */ e(r, { "aria-hidden": "true", "alt-label": n, className: a.svg })
-] }) }) : p ? /* @__PURE__ */ e("span", { "data-size": i, "data-color": o, "data-theme": m, className: c(a.icon, t), style: l, children: /* @__PURE__ */ d(h, { loading: s, variant: "circle", className: a.shape, children: [
-  /* @__PURE__ */ e("span", { className: a.shape }),
-  /* @__PURE__ */ e("img", { src: p, alt: n, className: a.image })
-] }) }) : /* @__PURE__ */ e("span", { className: c(a.icon, t) });
+  t && /* @__PURE__ */ e(t, { "aria-hidden": "true", "alt-label": o, className: a.svg }),
+  c && /* @__PURE__ */ e("img", { src: c, alt: o, className: a.image }),
+  l
+] }) });
 export {
   k as Icon,
   I as isIconProps

package/dist/components/Icon/ProgressIcon.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as r, jsx as t } from "react/jsx-runtime";
 import { c as p } from "../../index-p1eeF8LQ.js";
 import '../../assets/ProgressIcon.css';const i = "_progress_wvt7o_1", g = "_complete_wvt7o_25", c = {

package/dist/components/Icon/index.js

@@ -1,13 +1,11 @@
 import { Icon as c, isIconProps as e } from "./Icon.js";
 import { CheckboxIcon as p } from "./CheckboxIcon.js";
-import { RadioIcon as x } from "./RadioIcon.js";
-import { ProgressIcon as f } from "./ProgressIcon.js";
-import { IconOrAvatar as s } from "./IconOrAvatar.js";
+import { RadioIcon as I } from "./RadioIcon.js";
+import { ProgressIcon as m } from "./ProgressIcon.js";
 export {
   p as CheckboxIcon,
   c as Icon,
-  s as IconOrAvatar,
-  f as ProgressIcon,
-  x as RadioIcon,
+  m as ProgressIcon,
+  I as RadioIcon,
   e as isIconProps
 };

package/dist/components/Item/ItemControls.js

@@ -0,0 +1,8 @@
+import { jsx as t } from "react/jsx-runtime";
+import { c as r } from "../../index-p1eeF8LQ.js";
+import '../../assets/ItemControls.css';const c = "_controls_58885_1", n = {
+  controls: c
+}, e = ({ className: o, children: s }) => /* @__PURE__ */ t("span", { className: r(n.controls, o), children: s });
+export {
+  e as ItemControls
+};

package/dist/components/Item/ItemLabel.js

@@ -0,0 +1,34 @@
+import { jsx as a, jsxs as p, Fragment as i } from "react/jsx-runtime";
+import { c as x } from "../../index-p1eeF8LQ.js";
+import "react";
+import { Heading as n } from "../Typography/Heading.js";
+import '../../assets/ItemLabel.css';const b = "_label_e5q28_3", f = {
+  label: b
+}, j = ({
+  className: o,
+  title: e,
+  titleProps: t = {},
+  description: s,
+  descriptionProps: c = {},
+  highlightWords: r,
+  loading: l,
+  children: m
+}) => /* @__PURE__ */ a("span", { className: x(f.label, o), children: m || /* @__PURE__ */ p(i, { children: [
+  e && /* @__PURE__ */ a(n, { ...t, as: "span", loading: l, highlightWords: r, maxRows: 2, children: e }),
+  s && /* @__PURE__ */ a(
+    n,
+    {
+      ...c,
+      as: "span",
+      weight: "normal",
+      leading: "inherit",
+      loading: l,
+      highlightWords: r,
+      maxRows: 2,
+      children: s
+    }
+  )
+] }) });
+export {
+  j as ItemLabel
+};

package/dist/components/Item/ItemMedia.js

@@ -0,0 +1,33 @@
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { isValidElement as d } from "react";
+import { c as m } from "../../index-p1eeF8LQ.js";
+import { Icon as s, isIconProps as e } from "../Icon/Icon.js";
+import { isAvatarProps as i, Avatar as f } from "../Avatar/Avatar.js";
+import { isAvatarGroupProps as n, AvatarGroup as u } from "../Avatar/AvatarGroup.js";
+import "../Button/Button.js";
+import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
+import { S as _ } from "../../XMark-tKk6aExO.js";
+import '../../assets/ItemMedia.css';const G = "_media_1089b_3", N = "_icon_1089b_10", b = "_avatar_1089b_14", g = "_avatarGroup_1089b_18", o = {
+  media: G,
+  icon: N,
+  avatar: b,
+  avatarGroup: g
+};
+function x(r) {
+  return typeof r == "string" || typeof r == "number" || typeof r == "boolean" || r === null || d(r);
+}
+const R = ({ className: r, loading: p, icon: a, children: c }) => {
+  if (!a)
+    return null;
+  if (p)
+    return /* @__PURE__ */ t("div", { className: m(o.icon, r), children: /* @__PURE__ */ t(s, { svgElement: _, loading: !0 }) });
+  const v = i(a) ? "avatar" : n(a) ? "avatarGroup" : (e(a), "icon");
+  return /* @__PURE__ */ l("div", { className: m(o.media, r), "data-variant": v, children: [
+    i(a) && /* @__PURE__ */ t(f, { ...a, className: o.avatar }) || n(a) && /* @__PURE__ */ t(u, { ...a, className: o.avatarGroup }) || e(a) && /* @__PURE__ */ t(s, { ...a, className: o.icon }) || x(a) && /* @__PURE__ */ t(s, { className: o.icon, children: a }) || /* @__PURE__ */ t(s, { className: o.icon, svgElement: a }),
+    c
+  ] });
+};
+export {
+  R as ItemMedia
+};

package/dist/components/Item/index.js

@@ -0,0 +1,8 @@
+import { ItemMedia as r } from "./ItemMedia.js";
+import { ItemLabel as m } from "./ItemLabel.js";
+import { ItemControls as p } from "./ItemControls.js";
+export {
+  p as ItemControls,
+  m as ItemLabel,
+  r as ItemMedia
+};

package/dist/components/Layout/Layout.js

@@ -9,8 +9,8 @@ import { GlobalHeader as a } from "../GlobalHeader/GlobalHeader.js";
 import "../../index-p1eeF8LQ.js";
 import "react";
 import "../Button/Button.js";
-import { useRootContext as S } from "../RootProvider/RootProvider.js";
-import { Menu as j } from "../Menu/Menu.js";
+import { Menu as S } from "../Menu/Menu.js";
+import { useRootContext as j } from "../RootProvider/RootProvider.js";
 import { Header as B } from "../Header/Header.js";
 import "../Snackbar/useSnackbar.js";
 import { InboxSearch as C } from "../InboxSearch/InboxSearch.js";
@@ -26,7 +26,7 @@ const O = ({
   skipLink: p,
   useGlobalHeader: n = !1
 }) => {
-  const { currentId: i } = S(), e = t && "search" in t ? t.search : void 0;
+  const { currentId: i } = j(), e = t && "search" in t ? t.search : void 0;
   return /* @__PURE__ */ m(s, { color: f, theme: i === "accountFullscreen" ? "default" : u, currentId: i, children: [
     p && /* @__PURE__ */ r(F, { ...p }),
     t && (n ? /* @__PURE__ */ r(a, { ...t }) : /* @__PURE__ */ r(B, { ...t })),
@@ -39,7 +39,7 @@ const O = ({
           footer: o?.footer,
           useGlobalHeader: n,
           children: [
-            o?.menu && /* @__PURE__ */ r(j, { ...o?.menu }),
+            o?.menu && /* @__PURE__ */ r(S, { ...o?.menu }),
             o?.children
           ]
         }