@altinn/altinn-components 0.24.4 → 0.24.6

package/README.md

@@ -9,8 +9,22 @@ Today these teams are [Team Arbeidsflate](https://github.com/digdir/dialogporten
 Note that this package is specifically designed to meet the unique needs of the aforementioned teams and is not intended to serve as a general-purpose library.
 We already have the amazing [Norwegian public sector's Design System](https://designsystemet.no/), and we aim to incorporate its elements wherever it makes sense, ensuring alignment and leveraging its strengths while adapting to the specific requirements of Altinn.
 
-Currently, we do not use components from the design system _directly_ but rely on its token structure and continue to explore opportunities for deeper integration.
-This approach helps us align with brand guidelines and the broader vision of a unified Altinn product.
+
+## Strategy for Adopting Designsystemet
+
+As of April 10th, 2024, we’ve decided to start importing components from the [Norwegian public sector’s Design System](https://designsystemet.no/) as needed. These components will be exported from our own library using the `DS<Component>` prefix.
+Consumers of `altinn-components` will be able to use these components directly, without needing `@digdir/designsystemet` as a dependency.
+
+This approach allows us to:
+
+- Avoid conflicts with existing components during the transition phase.
+- Experiment with and adapt the appearance and behavior to fit the Altinn brand.
+- Gradually replace legacy components: once a `DS<Component>` has been sufficiently customized and tested, we will remove the `DS` prefix and promote it to a first-class component.
+- Leverage the strengths of the Design System while maintaining full control over the visual consistency of our solutions.
+- Maintain a curated and well-integrated selection of components from the `@digdir/designsystemet` with the look and feel of Altinn.
+
+This strategy is a natural progression from our previous approach, where we did not use components from `@digdir/designsystemet` directly but relied on its token structure and explored opportunities for deeper integration.
+That approach helped us move faster and build understanding — and now we're ready to take the next step.
 
 ## Feedback and questions
 

package/dist/PersonCircle-DMwECpgW.js

@@ -0,0 +1,25 @@
+"use client";
+import * as i from "react";
+import { forwardRef as a } from "react";
+import { u as f } from "./useId-CsCRkvK3.js";
+var d = function(t, n) {
+  var l = {};
+  for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && n.indexOf(e) < 0 && (l[e] = t[e]);
+  if (t != null && typeof Object.getOwnPropertySymbols == "function")
+    for (var r = 0, e = Object.getOwnPropertySymbols(t); r < e.length; r++)
+      n.indexOf(e[r]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[r]) && (l[e[r]] = t[e[r]]);
+  return l;
+};
+const p = a((t, n) => {
+  var { title: l, titleId: e } = t, r = d(t, ["title", "titleId"]);
+  let o = f();
+  return o = l ? e || "title-" + o : void 0, i.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 }, r),
+    l ? i.createElement("title", { id: o }, l) : null,
+    i.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" })
+  );
+});
+export {
+  p as S
+};

package/dist/assets/AccountButton.css

@@ -0,0 +1 @@
+._label_1dcj3_1{display:flex;flex-direction:column;padding:0 .25rem}._title_1dcj3_7[data-size=lg]{font-size:1rem;line-height:1.25;font-weight:500}._description_1dcj3_13{font-size:.875rem;color:var(--ds-color-text-subtle)}

package/dist/assets/EndUserLabel.css

@@ -0,0 +1 @@
+._text_1tx3s_1{-webkit-user-select:none;user-select:none;display:flex;align-items:center;column-gap:.5rem;line-height:1.25rem;color:var(--ds-color-neutral-text-subtle);margin:0}._icon_1tx3s_11{font-size:1.25rem}._label_1tx3s_15{font-size:.875rem}

package/dist/assets/GlobalMenuBase.css

@@ -1 +1 @@
-._nav_1hlpr_1{display:flex;flex-direction:column}._footer_1hlpr_6{padding:1rem .5rem;display:flex;width:100%;flex-direction:column;align-items:stretch}._drawer_1hlpr_14[data-expanded=true]{display:block;padding:.5rem;z-index:2}._dropdown_1hlpr_20[data-expanded=true]{display:none}@media (min-width: 1024px){._drawer_1hlpr_14[data-expanded=true]{display:none}._dropdown_1hlpr_20[data-expanded=true]{display:block;z-index:2}}
+._nav_b7k4e_1{display:flex;flex-direction:column}._footer_b7k4e_6{padding:1rem .5rem;display:flex;row-gap:1rem;width:100%;flex-direction:column;align-items:stretch}._drawer_b7k4e_16[data-expanded=true]{display:block;padding:.5rem;z-index:2}._dropdown_b7k4e_22[data-expanded=true]{display:none}@media (min-width: 1024px){._drawer_b7k4e_16[data-expanded=true]{display:none}._dropdown_b7k4e_22[data-expanded=true]{display:block;z-index:2}}

package/dist/assets/MenuItemBase.css

@@ -1 +1 @@
-._item_go19k_1{font:inherit;color:inherit;border:0;text-align:inherit;text-decoration:none;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;cursor:pointer;position:relative;width:100%;display:flex;align-items:center;column-gap:.25rem;margin:.5rem 0;border-radius:2px}._item_go19k_1[aria-disabled=true]{opacity:.5;pointer-events:none}._item_go19k_1[data-size=md]{min-height:56px}._item_go19k_1[data-size=md]{min-height:44px}._item_go19k_1[data-size=sm]{min-height:40px}._content_go19k_44{display:flex;width:100%;align-items:center;column-gap:6px;padding:6px}._action_go19k_52{display:flex;justify-content:center;align-items:center;padding:10px}._linkText_go19k_59{font-size:.875rem;white-space:nowrap}._linkIcon_go19k_64{font-size:1.5rem}._item_go19k_1,._item_go19k_1[data-theme]{background-color:transparent}[data-theme=subtle] ._item_go19k_1:hover{background-color:var(--ds-color-surface-hover)}[data-theme=subtle] ._item_go19k_1:active{background-color:var(--ds-color-surface-active)}[data-theme=subtle] ._item_go19k_1[data-selected=true]{background-color:var(--ds-color-background-default)}[data-theme=default] ._item_go19k_1:hover{background-color:var(--ds-color-surface-hover)}[data-theme=default] ._item_go19k_1:active{background-color:var(--ds-color-surface-active)}[data-theme=default] ._item_go19k_1[data-selected=true]{background-color:var(--ds-color-background-subtle)}
+._item_1gk35_1{font:inherit;color:inherit;padding:0;border:0;text-align:inherit;text-decoration:none;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;cursor:pointer;position:relative;width:100%;display:flex;align-items:center;column-gap:.25rem;margin:.5rem 0;border-radius:2px}._item_1gk35_1[aria-disabled=true]{opacity:.5;pointer-events:none}._item_1gk35_1[data-size=md]{min-height:56px}._item_1gk35_1[data-size=md]{min-height:44px}._item_1gk35_1[data-size=sm]{min-height:40px}._content_1gk35_45{display:flex;width:100%;align-items:center;column-gap:6px;padding:6px}._action_1gk35_53{display:flex;justify-content:center;align-items:center;padding:10px}._linkText_1gk35_60{font-size:.875rem;white-space:nowrap}._linkIcon_1gk35_65{font-size:1.5rem}._item_1gk35_1,._item_1gk35_1[data-theme]{background-color:transparent}[data-theme=subtle] ._item_1gk35_1:hover{background-color:var(--ds-color-surface-hover)}[data-theme=subtle] ._item_1gk35_1:active{background-color:var(--ds-color-surface-active)}[data-theme=subtle] ._item_1gk35_1[data-selected=true]{background-color:var(--ds-color-background-default)}[data-theme=default] ._item_1gk35_1:hover{background-color:var(--ds-color-surface-hover)}[data-theme=default] ._item_1gk35_1:active{background-color:var(--ds-color-surface-active)}[data-theme=default] ._item_1gk35_1[data-selected=true]{background-color:var(--ds-color-background-subtle)}

package/dist/assets/MenuItemLabel.css

@@ -1 +1 @@
-._label_1ejxp_1{display:flex;flex-direction:column;padding:0 .25rem}._title_1ejxp_7[data-size=lg]{font-size:1.125rem;line-height:1.25;font-weight:500}._title_1ejxp_7[data-size=md],._title_1ejxp_7[data-size=sm]{font-size:1rem;line-height:1.25;font-weight:400}._description_1ejxp_25{font-size:.875rem;color:var(--ds-color-text-subtle)}
+._label_1ehsf_1{display:flex;flex-direction:column;padding:0 .25rem}._title_1ehsf_7{font-weight:400}._title_1ehsf_7[data-weight=medium]{font-weight:500}._title_1ehsf_7[data-size=lg]{font-size:1.125rem;line-height:1.25}._title_1ehsf_7[data-size=md],._title_1ehsf_7[data-size=sm]{font-size:1rem;line-height:1.25}._description_1ehsf_30{font-size:.875rem;color:var(--ds-color-text-subtle)}

package/dist/components/Dropdown/DrawerBase.js

@@ -1,19 +1,26 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as d } from "react/jsx-runtime";
 import { c as s } from "../../index-L8X2o7IH.js";
-import '../../assets/DrawerBase.css';const c = "_drawer_18fhf_1", n = {
+import '../../assets/DrawerBase.css';const c = "_drawer_18fhf_1", m = {
   drawer: c
-}, f = ({ layout: a, placement: e = "inline", open: r = !1, className: t, children: d }) => /* @__PURE__ */ o(
-  "div",
+}, i = ({
+  layout: a,
+  placement: e = "inline",
+  open: t = !1,
+  className: r,
+  children: o,
+  as: n = "div"
+}) => /* @__PURE__ */ d(
+  n,
   {
-    className: s(n.drawer, t),
+    className: s(m.drawer, r),
     "data-placement": e,
     "data-layout": a,
     "data-theme": "default",
     "data-color": "company",
-    "data-expanded": r,
-    children: d
+    "data-expanded": t,
+    children: o
   }
 );
 export {
-  f as DrawerBase
+  i as DrawerBase
 };

package/dist/components/Dropdown/DropdownBase.js

@@ -1,36 +1,36 @@
-import { jsx as m } from "react/jsx-runtime";
-import { c as p } from "../../index-L8X2o7IH.js";
+import { jsx as p } from "react/jsx-runtime";
+import { c } from "../../index-L8X2o7IH.js";
 import { useRef as l } from "react";
-import { useClickOutside as c } from "../../hooks/useClickOutside.js";
-import '../../assets/DropdownBase.css';const f = "_dropdown_139me_1", u = {
-  dropdown: f
-}, _ = ({
-  layout: a,
-  placement: d = "left",
-  padding: t = !0,
+import { useClickOutside as f } from "../../hooks/useClickOutside.js";
+import '../../assets/DropdownBase.css';const i = "_dropdown_139me_1", u = {
+  dropdown: i
+}, h = ({
+  layout: t,
+  placement: a = "left",
+  padding: d = !0,
   open: e = !1,
-  className: r,
-  children: n,
-  onClose: s
+  className: n,
+  children: r,
+  onClose: s,
+  as: m = "div"
 }) => {
   const o = l(null);
-  return c(o, s), /* @__PURE__ */ m(
-    "div",
+  return f(o, s), /* @__PURE__ */ p(
+    m,
     {
       ref: o,
-      className: p(u.dropdown, r),
-      "data-layout": a,
+      className: c(u.dropdown, n),
+      "data-layout": t,
       "data-theme": "default",
       "data-color": "company",
       "data-shadow": "md",
-      "data-placement": d,
-      "data-padding": t,
-      role: "menu",
+      "data-placement": a,
+      "data-padding": d,
       "data-expanded": e,
-      children: n
+      children: r
     }
   );
 };
 export {
-  _ as DropdownBase
+  h as DropdownBase
 };

package/dist/components/GlobalMenu/AccountButton.js

@@ -1,16 +1,20 @@
-import { jsxs as r, jsx as i } from "react/jsx-runtime";
-import { MenuItemBase as m } from "../Menu/MenuItemBase.js";
-import { MenuItemLabel as p } from "../Menu/MenuItemLabel.js";
-import { MenuItemIcon as s } from "../Menu/MenuItemIcon.js";
+import { jsxs as m, jsx as i } from "react/jsx-runtime";
+import { MenuItemBase as r } from "../Menu/MenuItemBase.js";
+import { MenuItemLabel as s } from "../Menu/MenuItemLabel.js";
+import { MenuItemIcon as t } from "../Menu/MenuItemIcon.js";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { S as g } from "../../ChevronRight-DUaHaWi-.js";
-const j = ({ account: e, linkText: t, onClick: l, multipleAccounts: d }) => d ? /* @__PURE__ */ r(m, { size: "lg", onClick: l, linkText: t, linkIcon: g, as: "button", children: [
+import { S as n } from "../../ChevronRight-DUaHaWi-.js";
+import '../../assets/AccountButton.css';const _ = "_label_1dcj3_1", b = "_title_1dcj3_7", f = "_description_1dcj3_13", l = {
+  label: _,
+  title: b,
+  description: f
+}, w = ({ account: e, linkText: p, onClick: d, multipleAccounts: o }) => o ? /* @__PURE__ */ m(r, { size: "lg", onClick: d, linkText: p, linkIcon: n, as: "button", children: [
   /* @__PURE__ */ i(
-    s,
+    t,
     {
       size: "xl",
       avatar: {
@@ -19,20 +23,38 @@ const j = ({ account: e, linkText: t, onClick: l, multipleAccounts: d }) => d ?
       }
     }
   ),
-  /* @__PURE__ */ i(p, { size: "lg", title: e == null ? void 0 : e.name, description: e == null ? void 0 : e.description })
-] }) : /* @__PURE__ */ r(m, { size: "lg", as: "div", children: [
   /* @__PURE__ */ i(
     s,
     {
-      size: "lg",
+      className: l.label,
+      size: "md",
+      title: e == null ? void 0 : e.name,
+      weight: "medium",
+      description: e == null ? void 0 : e.description
+    }
+  )
+] }) : /* @__PURE__ */ m(r, { size: "lg", as: "div", children: [
+  /* @__PURE__ */ i(
+    t,
+    {
+      size: "xl",
       avatar: {
         name: e.name,
         type: e.type
       }
     }
   ),
-  /* @__PURE__ */ i(p, { size: "lg", title: e == null ? void 0 : e.name, description: e == null ? void 0 : e.description })
+  /* @__PURE__ */ i(
+    s,
+    {
+      className: l.label,
+      size: "md",
+      title: e == null ? void 0 : e.name,
+      weight: "medium",
+      description: e == null ? void 0 : e.description
+    }
+  )
 ] });
 export {
-  j as AccountButton
+  w as AccountButton
 };

package/dist/components/GlobalMenu/EndUserLabel.js

@@ -0,0 +1,13 @@
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { S as l } from "../../PersonCircle-DMwECpgW.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 })
+] });
+export {
+  x as EndUserLabel
+};

package/dist/components/GlobalMenu/GlobalMenu.js

@@ -1,80 +1,88 @@
 "use client";
-import { jsxs as i, jsx as r, Fragment as f } from "react/jsx-runtime";
-import { useState as L, useMemo as H } from "react";
+import { jsxs as m, jsx as i, Fragment as g } from "react/jsx-runtime";
+import { useState as I, useMemo as S } from "react";
 import "../../index-L8X2o7IH.js";
 import "../RootProvider/RootProvider.js";
-import { AccountMenu as I } from "./AccountMenu.js";
-import { AccountButton as W } from "./AccountButton.js";
-import { BackButton as q } from "./BackButton.js";
-import { LogoutButton as M } from "./LogoutButton.js";
+import { AccountMenu as W } from "./AccountMenu.js";
+import { AccountButton as q } from "./AccountButton.js";
+import { BackButton as w } from "./BackButton.js";
+import { LogoutButton as k } from "./LogoutButton.js";
+import { EndUserLabel as v } from "./EndUserLabel.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { MenuListItem as n } from "../Menu/MenuBase.js";
-import { Menu as k } from "../Menu/Menu.js";
-import { GlobalMenuBase as c, GlobalMenuHeader as g, GlobalMenuFooter as b } from "./GlobalMenuBase.js";
-const U = ({
-  accounts: p = [],
-  accountGroups: v = {},
-  accountSearch: x,
-  items: d = [],
+import { MenuListItem as o } from "../Menu/MenuBase.js";
+import { Menu as x } from "../Menu/Menu.js";
+import { GlobalMenuBase as h, GlobalMenuHeader as z, GlobalMenuFooter as G } from "./GlobalMenuBase.js";
+const $ = ({
+  accounts: f = [],
+  accountGroups: b = {},
+  accountSearch: B,
+  items: n = [],
   groups: s,
-  changeLabel: G = "Change",
-  backLabel: B = "Back",
-  currentAccount: m,
-  onSelectAccount: l,
-  onClose: t,
-  logoutButton: a,
-  isVirtualized: T
+  changeLabel: T = "Change",
+  backLabel: j = "Back",
+  currentAccount: a,
+  currentEndUserLabel: t = "Signed in",
+  onSelectAccount: p,
+  onClose: e,
+  logoutButton: l,
+  isVirtualized: F
 }) => {
-  const [j, A] = L(!1), o = () => {
-    A((e) => !e);
-  }, F = (e) => {
-    o(), t == null || t(), l == null || l(e);
-  }, h = H(() => d.map((e) => ({
-    ...e,
+  const [u, y] = I(!1), d = () => {
+    y((r) => !r);
+  }, H = (r) => {
+    d(), e == null || e(), p == null || p(r);
+  }, M = S(() => n.map((r) => ({
+    ...r,
     onClick: () => {
-      var u;
-      (u = e.onClick) == null || u.call(e), t == null || t();
+      var c;
+      (c = r.onClick) == null || c.call(r), e == null || e();
     }
-  })), [d, t]);
-  return j ? /* @__PURE__ */ i(c, { children: [
-    /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(q, { onClick: o, label: B }) }),
-    /* @__PURE__ */ r(n, { as: "div", role: "separator" }),
-    /* @__PURE__ */ r(
-      I,
+  })), [n, e]);
+  return u ? /* @__PURE__ */ m(h, { children: [
+    /* @__PURE__ */ i(z, { children: /* @__PURE__ */ i(w, { onClick: d, label: j }) }),
+    /* @__PURE__ */ i(o, { as: "div", role: "separator" }),
+    /* @__PURE__ */ i(
+      W,
       {
-        currentAccount: m,
-        accounts: p,
-        accountGroups: v,
-        accountSearch: x,
-        onSelectAccount: F,
-        isVirtualized: T
+        currentAccount: a,
+        accounts: f,
+        accountGroups: b,
+        accountSearch: B,
+        onSelectAccount: H,
+        isVirtualized: F
       }
     )
-  ] }) : m ? /* @__PURE__ */ i(c, { children: [
-    /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(
-      W,
+  ] }) : a ? /* @__PURE__ */ m(h, { color: a == null ? void 0 : a.type, children: [
+    /* @__PURE__ */ i(
+      q,
       {
-        account: m,
-        linkText: G,
-        multipleAccounts: p.length > 1,
-        onClick: o
+        account: a,
+        linkText: T,
+        multipleAccounts: f.length > 1,
+        onClick: d
       }
-    ) }),
-    /* @__PURE__ */ r(n, { as: "div", role: "separator" }),
-    /* @__PURE__ */ r(k, { groups: s, items: h, theme: "default" }),
-    a && /* @__PURE__ */ i(f, { children: [
-      /* @__PURE__ */ r(n, { as: "div", role: "separator" }),
-      /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(M, { ...a }) })
+    ),
+    /* @__PURE__ */ i(o, { as: "div", role: "separator" }),
+    /* @__PURE__ */ i(x, { groups: s, items: M, theme: "default" }),
+    l && /* @__PURE__ */ m(g, { children: [
+      /* @__PURE__ */ i(o, { as: "div", role: "separator" }),
+      /* @__PURE__ */ m(G, { children: [
+        t && /* @__PURE__ */ i(v, { children: t }),
+        /* @__PURE__ */ i(k, { ...l })
+      ] })
     ] })
-  ] }) : /* @__PURE__ */ i(c, { children: [
-    /* @__PURE__ */ r(k, { groups: s, items: h }),
-    a && /* @__PURE__ */ i(f, { children: [
-      /* @__PURE__ */ r(n, { as: "div", role: "separator" }),
-      /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(M, { ...a }) })
+  ] }) : /* @__PURE__ */ m(h, { children: [
+    /* @__PURE__ */ i(x, { groups: s, items: M }),
+    l && /* @__PURE__ */ m(g, { children: [
+      /* @__PURE__ */ i(o, { as: "div", role: "separator" }),
+      /* @__PURE__ */ m(G, { children: [
+        t && /* @__PURE__ */ i(v, { children: t }),
+        /* @__PURE__ */ i(k, { ...l })
+      ] })
     ] })
   ] });
 };
 export {
-  U as GlobalMenu
+  $ as GlobalMenu
 };

package/dist/components/GlobalMenu/GlobalMenuBase.js

@@ -1,12 +1,12 @@
-import { jsx as r } from "react/jsx-runtime";
-import '../../assets/GlobalMenuBase.css';const a = "_nav_1hlpr_1", t = "_footer_1hlpr_6", n = "_drawer_1hlpr_14", s = "_dropdown_1hlpr_20", e = {
-  nav: a,
-  footer: t,
-  drawer: n,
-  dropdown: s
-}, d = ({ children: o }) => /* @__PURE__ */ r("nav", { className: e.nav, "data-theme": "default", children: o }), _ = ({ children: o }) => /* @__PURE__ */ r("header", { className: e.header, children: o }), c = ({ children: o }) => /* @__PURE__ */ r("footer", { className: e.footer, children: o });
+import { jsx as e } from "react/jsx-runtime";
+import '../../assets/GlobalMenuBase.css';const t = "_nav_b7k4e_1", n = "_footer_b7k4e_6", s = "_drawer_b7k4e_16", d = "_dropdown_b7k4e_22", r = {
+  nav: t,
+  footer: n,
+  drawer: s,
+  dropdown: d
+}, l = ({ color: o = "company", children: a }) => /* @__PURE__ */ e("nav", { className: r.nav, "data-theme": "default", "data-color": o, children: a }), _ = ({ children: o }) => /* @__PURE__ */ e("header", { className: r.header, children: o }), b = ({ children: o }) => /* @__PURE__ */ e("footer", { className: r.footer, children: o });
 export {
-  d as GlobalMenuBase,
-  c as GlobalMenuFooter,
+  l as GlobalMenuBase,
+  b as GlobalMenuFooter,
   _ as GlobalMenuHeader
 };

package/dist/components/GlobalMenu/index.js

@@ -1,12 +1,14 @@
 import { AccountMenu as r } from "./AccountMenu.js";
-import { GlobalMenu as e } from "./GlobalMenu.js";
-import { AccountButton as c } from "./AccountButton.js";
-import { BackButton as m } from "./BackButton.js";
-import { LogoutButton as x } from "./LogoutButton.js";
+import { GlobalMenu as n } from "./GlobalMenu.js";
+import { AccountButton as f } from "./AccountButton.js";
+import { BackButton as p } from "./BackButton.js";
+import { LogoutButton as c } from "./LogoutButton.js";
+import { EndUserLabel as a } from "./EndUserLabel.js";
 export {
-  c as AccountButton,
+  f as AccountButton,
   r as AccountMenu,
-  m as BackButton,
-  e as GlobalMenu,
-  x as LogoutButton
+  p as BackButton,
+  a as EndUserLabel,
+  n as GlobalMenu,
+  c as LogoutButton
 };

package/dist/components/Header/LocaleSwitcher.js

@@ -1,17 +1,31 @@
 "use client";
-import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
-import "../RootProvider/RootProvider.js";
+import { useRootContext as n } from "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { MenuOption as a } from "../Menu/MenuOption.js";
-import { MenuHeader as c } from "../Menu/MenuHeader.js";
-import { MenuBase as m, MenuList as p, MenuListItem as t } from "../Menu/MenuBase.js";
-const b = ({ title: o = "Select language", options: i, onChange: l }) => /* @__PURE__ */ e(m, { theme: "default", children: /* @__PURE__ */ n(p, { children: [
-  /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(c, { title: o }) }),
-  i.map((r) => /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(a, { onChange: l, label: r.label, type: "radio", value: r.value, checked: r.checked }) }, r.value))
-] }) });
+import { MenuOption as p } from "../Menu/MenuOption.js";
+import { MenuHeader as u } from "../Menu/MenuHeader.js";
+import { MenuBase as d, MenuList as s, MenuListItem as o } from "../Menu/MenuBase.js";
+const k = ({ title: l = "Select language", options: c, onChange: r }) => {
+  const { toggleId: i } = n(), m = (e) => {
+    i("locale"), r == null || r(e);
+  };
+  return /* @__PURE__ */ t(d, { theme: "default", children: /* @__PURE__ */ a(s, { children: [
+    /* @__PURE__ */ t(o, { children: /* @__PURE__ */ t(u, { title: l }) }),
+    c.map((e) => /* @__PURE__ */ t(o, { children: /* @__PURE__ */ t(
+      p,
+      {
+        onChange: m,
+        label: e.label,
+        type: "radio",
+        value: e.value,
+        checked: e.checked
+      }
+    ) }, e.value))
+  ] }) });
+};
 export {
-  b as LocaleSwitcher
+  k as LocaleSwitcher
 };

package/dist/components/Menu/MenuItemBase.js

@@ -6,7 +6,7 @@ import { Badge as T } from "../Badge/Badge.js";
 import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/MenuItemBase.css';const j = "_item_go19k_1", B = "_content_go19k_44", E = "_action_go19k_52", g = "_linkText_go19k_59", z = "_linkIcon_go19k_64", n = {
+import '../../assets/MenuItemBase.css';const j = "_item_1gk35_1", B = "_content_1gk35_45", E = "_action_1gk35_53", g = "_linkText_1gk35_60", z = "_linkIcon_1gk35_65", n = {
   item: j,
   content: B,
   action: E,
@@ -19,8 +19,8 @@ import '../../assets/MenuItemBase.css';const j = "_item_go19k_1", B = "_content_
   size: d,
   className: h,
   href: x,
-  onClick: o,
-  onKeyPress: e,
+  onClick: e,
+  onKeyPress: o,
   tabIndex: f = 0,
   hidden: k,
   selected: I,
@@ -42,9 +42,9 @@ import '../../assets/MenuItemBase.css';const j = "_item_go19k_1", B = "_content_
     "data-selected": I,
     href: x,
     onKeyPress: (r) => {
-      r.key === "Enter" && (o == null || o()), e == null || e(r);
+      r.key === "Enter" && (e == null || e()), o == null || o(r);
     },
-    onClick: o,
+    onClick: e,
     children: [
       /* @__PURE__ */ c("div", { className: n.content, children: [
         N,

package/dist/components/Menu/MenuItemLabel.js

@@ -1,13 +1,24 @@
-import { jsx as t, jsxs as r, Fragment as o } from "react/jsx-runtime";
+import { jsx as t, jsxs as m, Fragment as d } from "react/jsx-runtime";
 import { c as p } from "../../index-L8X2o7IH.js";
-import '../../assets/MenuItemLabel.css';const d = "_label_1ejxp_1", m = "_title_1ejxp_7", _ = "_description_1ejxp_25", s = {
-  label: d,
-  title: m,
-  description: _
-}, j = ({ className: l, size: e = "sm", label: i, title: n, description: c, children: a }) => /* @__PURE__ */ t("span", { className: p(s.label, l), "data-size": e, children: a || /* @__PURE__ */ r(o, { children: [
-  /* @__PURE__ */ t("strong", { className: s.title, "data-size": e, children: n || i }),
-  /* @__PURE__ */ t("span", { className: s.description, "data-size": e, children: c })
-] }) });
+import '../../assets/MenuItemLabel.css';const _ = "_label_1ehsf_1", h = "_title_1ehsf_7", b = "_description_1ehsf_30", s = {
+  label: _,
+  title: h,
+  description: b
+}, x = ({
+  className: l,
+  size: e = "sm",
+  label: i,
+  title: n,
+  weight: c,
+  description: o,
+  children: a
+}) => {
+  const r = c || e === "lg" ? "medium" : "normal";
+  return /* @__PURE__ */ t("span", { className: p(s.label, l), "data-size": e, children: a || /* @__PURE__ */ m(d, { children: [
+    /* @__PURE__ */ t("strong", { className: s.title, "data-size": e, "data-weight": r, children: n || i }),
+    /* @__PURE__ */ t("span", { className: s.description, "data-size": e, children: o })
+  ] }) });
+};
 export {
-  j as MenuItemLabel
+  x as MenuItemLabel
 };