@altinn/altinn-components 0.38.20 → 0.39.0

package/dist/assets/Avatar.css

@@ -1 +1 @@
-._avatar_13ch2_1{position:relative;overflow:hidden;box-sizing:border-box}._avatar_13ch2_1[data-shape=circle]{border-radius:50%}._avatar_13ch2_1[data-shape=square]{border-radius:5%}._avatar_13ch2_1[data-variant=outline]{border:1px solid}._avatar_13ch2_1[data-outline=true]{outline:1px solid #ffffff;box-sizing:border-box}._shape_13ch2_25{display:block;font-size:1em;width:1em;height:1em}._label_13ch2_32{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center;overflow:hidden;font-size:.575em}._image_13ch2_42{display:block;width:100%;height:100%}
+._avatar_1j6yz_1{position:relative;overflow:hidden;box-sizing:border-box}._avatar_1j6yz_1[data-shape=circle]{border-radius:50%}._avatar_1j6yz_1[data-shape=square]{border-radius:5%}._avatar_1j6yz_1[data-outline=true]{outline:1px solid #ffffff;box-sizing:border-box}._shape_1j6yz_21{display:block;font-size:1em;width:1em;height:1em}._shape_1j6yz_21[data-variant=outline]{border:1px solid}._label_1j6yz_32{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center;overflow:hidden;font-size:.575em}._image_1j6yz_42{display:block;width:100%;height:100%}

package/dist/components/Avatar/Avatar.js

@@ -1,30 +1,30 @@
 "use client";
-import { jsx as e, jsxs as x } from "react/jsx-runtime";
-import { c as j } from "../../index-L8X2o7IH.js";
-import { useState as A } from "react";
-import { Skeleton as E } from "../Skeleton/Skeleton.js";
-import { fromStringToColor as I } from "./color.js";
-import '../../assets/Avatar.css';const y = "_avatar_13ch2_1", q = "_shape_13ch2_25", z = "_label_13ch2_32", H = "_image_13ch2_42", r = {
-  avatar: y,
-  shape: q,
-  label: z,
+import { jsx as e, jsxs as N } from "react/jsx-runtime";
+import { c as S } from "../../index-L8X2o7IH.js";
+import { useState as k } from "react";
+import { Skeleton as x } from "../Skeleton/Skeleton.js";
+import { fromStringToColor as A } from "./color.js";
+import '../../assets/Avatar.css';const E = "_avatar_1j6yz_1", I = "_shape_1j6yz_21", q = "_label_1j6yz_32", H = "_image_1j6yz_42", r = {
+  avatar: E,
+  shape: I,
+  label: q,
   image: H
 }, F = (a) => typeof a == "object" && a !== null && "name" in a, G = ({
   type: a = "person",
-  size: h,
+  size: d,
   name: l = "Avatar",
-  shape: d,
-  color: u,
+  shape: u,
+  color: h,
   variant: o = "solid",
-  outline: c = !0,
+  outline: n = !0,
   imageUrl: s,
   imageUrlAlt: _,
   customLabel: g,
-  loading: n,
+  loading: c,
   className: b,
   style: i = {}
 }) => {
-  const [f, v] = A(!1), C = d || a === "person" ? "circle" : "square", N = u || a === "person" ? "light" : "dark", { backgroundColor: p, foregroundColor: m } = I(l, N), S = (l[0] ?? "").toUpperCase(), t = s && !f, k = !n && !t ? {
+  const [f, v] = k(!1), j = u || a === "person" ? "circle" : "square", y = h || a === "person" ? "light" : "dark", { backgroundColor: p, foregroundColor: m } = A(l, y), C = (l[0] ?? "").toUpperCase(), t = s && !f, z = !c && !t ? {
     ...i,
     backgroundColor: o === "outline" ? m : p,
     color: o === "outline" ? p : m
@@ -32,15 +32,14 @@ import '../../assets/Avatar.css';const y = "_avatar_13ch2_1", q = "_shape_13ch2_
   return /* @__PURE__ */ e(
     "div",
     {
-      className: j(r.avatar, { [r.outline]: c }, b),
-      style: k,
-      "data-variant": o,
-      "data-shape": C,
-      "data-size": h,
-      "data-outline": c,
+      className: S(r.avatar, { [r.outline]: n }, b),
+      style: z,
+      "data-shape": j,
+      "data-size": d,
+      "data-outline": n,
       "aria-hidden": !0,
-      children: /* @__PURE__ */ x(E, { loading: n, className: r.shape, variant: "circle", children: [
-        /* @__PURE__ */ e("div", { className: r.shape, children: t && /* @__PURE__ */ e(
+      children: /* @__PURE__ */ N(x, { loading: c, className: r.shape, variant: "circle", children: [
+        /* @__PURE__ */ e("div", { className: r.shape, "data-variant": o, children: t && /* @__PURE__ */ e(
           "img",
           {
             src: s,
@@ -51,7 +50,7 @@ import '../../assets/Avatar.css';const y = "_avatar_13ch2_1", q = "_shape_13ch2_
             }
           }
         ) }),
-        !t && /* @__PURE__ */ e("span", { className: r.label, children: g || S })
+        !t && /* @__PURE__ */ e("span", { className: r.label, children: g || C })
       ] })
     }
   );

package/dist/components/Avatar/AvatarGroup.js

@@ -1,36 +1,37 @@
 "use client";
-import { jsx as r } from "react/jsx-runtime";
-import { c } from "../../index-L8X2o7IH.js";
+import { jsx as l } from "react/jsx-runtime";
+import { c as s } from "../../index-L8X2o7IH.js";
 import { useMemo as f } from "react";
 import { Avatar as h } from "./Avatar.js";
-import '../../assets/AvatarGroup.css';const A = "_group_1ts6c_1", _ = "_item_1ts6c_10", s = {
+import '../../assets/AvatarGroup.css';const A = "_group_1ts6c_1", _ = "_item_1ts6c_10", n = {
   group: A,
   item: _
-}, G = (e) => typeof e == "object" && e !== null && "items" in e, L = ({
-  items: e = [],
-  maxItemsCount: l = 4,
-  defaultType: n,
-  size: i,
+}, L = (o) => typeof o == "object" && o !== null && "items" in o, N = ({
+  items: o = [],
+  maxItemsCount: r = 4,
+  defaultType: i,
+  size: c,
   className: m,
   style: u
 }) => {
-  const o = f(() => e.slice(0, l), [e, l]);
-  return e.length === 0 ? /* @__PURE__ */ r("div", { className: s.avatarGroup }) : /* @__PURE__ */ r("ul", { className: c(s.group, m), "data-size": i, "data-count": o == null ? void 0 : o.length, style: u, children: o.map((t, p) => {
-    const g = p === l - 1, d = t.customLabel || g ? e.length.toString() : void 0;
-    return /* @__PURE__ */ r("li", { className: c(s.item), children: /* @__PURE__ */ r(
+  const t = f(() => o.slice(0, r), [o, r]);
+  return o.length === 0 ? /* @__PURE__ */ l("div", { className: n.avatarGroup }) : /* @__PURE__ */ l("ul", { className: s(n.group, m), "data-size": c, "data-count": t == null ? void 0 : t.length, style: u, children: t.map((e, p) => {
+    const g = p === r - 1, d = e.customLabel || g ? o.length.toString() : void 0;
+    return /* @__PURE__ */ l("li", { className: s(n.item), children: /* @__PURE__ */ l(
       h,
       {
-        name: t.name,
+        name: e.name,
         customLabel: d,
-        imageUrl: t.imageUrl,
-        imageUrlAlt: t.imageUrlAlt,
-        type: (t == null ? void 0 : t.type) || n,
+        imageUrl: e.imageUrl,
+        imageUrlAlt: e.imageUrlAlt,
+        type: (e == null ? void 0 : e.type) || i,
+        variant: e == null ? void 0 : e.variant,
         outline: !0
       }
-    ) }, t.name);
+    ) }, e.name);
   }) });
 };
 export {
-  L as AvatarGroup,
-  G as isAvatarGroupProps
+  N as AvatarGroup,
+  L as isAvatarGroupProps
 };

package/dist/components/Menu/MenuOption.js

@@ -1,60 +1,83 @@
-import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
-import { Badge as _ } from "../Badge/Badge.js";
+import { Badge as p } from "../Badge/Badge.js";
 import "../RootProvider/RootProvider.js";
-import { MenuItem as b } from "./MenuItem.js";
+import { MenuItem as _ } from "./MenuItem.js";
 import "../Snackbar/useSnackbar.js";
-import { S as n } from "../../Checkmark-Byz_C9x4.js";
-import '../../assets/MenuOption.css';const f = "_label_zw85f_1", u = "_title_zw85f_13", x = "_radio_zw85f_19", N = "_checkbox_zw85f_20", k = "_icon_zw85f_53", a = {
-  label: f,
-  title: u,
-  radio: x,
-  checkbox: N,
-  icon: k
-}, E = ({
-  size: r = "md",
-  type: i,
-  name: w,
-  active: l,
-  value: z,
+import { S as h } from "../../Checkmark-Byz_C9x4.js";
+import '../../assets/MenuOption.css';const w = "_label_zw85f_1", k = "_title_zw85f_13", z = "_radio_zw85f_19", v = "_checkbox_zw85f_20", I = "_icon_zw85f_53", a = {
+  label: w,
+  title: k,
+  radio: z,
+  checkbox: v,
+  icon: I
+}, D = ({
+  size: o = "md",
+  type: f,
+  name: M,
+  active: n,
+  value: j,
   label: c,
-  badge: t,
-  checked: s = !1,
-  disabled: m,
-  onMouseEnter: v,
-  onClick: d,
-  role: p,
-  ...h
-}) => /* @__PURE__ */ e(
-  b,
-  {
-    disabled: m,
-    selected: s,
-    size: r,
-    as: "div",
-    active: l,
-    tabIndex: -1,
-    onClick: d,
-    role: p,
-    label: /* @__PURE__ */ e(() => {
-      switch (i) {
-        case "checkbox":
-          return /* @__PURE__ */ o("span", { className: a.label, children: [
-            /* @__PURE__ */ e("span", { className: a.checkbox, "data-checked": s, children: /* @__PURE__ */ e(n, { className: a.icon, "aria-hidden": !0 }) }),
-            /* @__PURE__ */ e("span", { className: a.title, children: c })
-          ] });
-        case "radio":
-          return /* @__PURE__ */ o("span", { className: a.label, children: [
-            /* @__PURE__ */ e("span", { className: a.radio, "data-checked": s, children: /* @__PURE__ */ e(n, { className: a.icon, "aria-hidden": !0 }) }),
-            /* @__PURE__ */ e("span", { className: a.title, children: c })
-          ] });
-      }
-    }, {}),
-    controls: t && /* @__PURE__ */ e(_, { ...t }),
-    ...h
-  }
-);
+  title: u,
+  description: x,
+  icon: b,
+  badge: s,
+  checked: t = !1,
+  disabled: r,
+  onMouseEnter: S,
+  onClick: i,
+  role: l,
+  ...m
+}) => {
+  const N = () => {
+    switch (f) {
+      case "checkbox":
+        return /* @__PURE__ */ d("span", { className: a.label, children: [
+          /* @__PURE__ */ e("span", { className: a.checkbox, "data-checked": t, children: /* @__PURE__ */ e(h, { className: a.icon, "aria-hidden": !0 }) }),
+          /* @__PURE__ */ e("span", { className: a.title, children: c })
+        ] });
+      case "radio":
+        return /* @__PURE__ */ d("span", { className: a.label, children: [
+          /* @__PURE__ */ e("span", { className: a.radio, "data-checked": t, children: /* @__PURE__ */ e(h, { className: a.icon, "aria-hidden": !0 }) }),
+          /* @__PURE__ */ e("span", { className: a.title, children: c })
+        ] });
+    }
+  };
+  return c ? /* @__PURE__ */ e(
+    _,
+    {
+      disabled: r,
+      selected: t,
+      size: o,
+      as: "div",
+      active: n,
+      tabIndex: -1,
+      onClick: i,
+      role: l,
+      label: /* @__PURE__ */ e(N, {}),
+      controls: s && /* @__PURE__ */ e(p, { ...s }),
+      ...m
+    }
+  ) : /* @__PURE__ */ e(
+    _,
+    {
+      disabled: r,
+      selected: t,
+      size: o,
+      as: "div",
+      active: n,
+      tabIndex: -1,
+      onClick: i,
+      role: l,
+      icon: b,
+      title: u,
+      description: x,
+      controls: s && /* @__PURE__ */ e(p, { ...s }),
+      ...m
+    }
+  );
+};
 export {
-  E as MenuOption
+  D as MenuOption
 };

package/dist/components/Toolbar/ToolbarOptions.js

@@ -32,12 +32,12 @@ const G = ({
       return /* @__PURE__ */ v(N, { children: [
         l && P ? /* @__PURE__ */ e(m, { role: "separator" }) : "",
         d && /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(w, { title: d }) }),
-        t == null ? void 0 : t.items.filter((r) => {
-          var o;
-          return !((o = r.props) != null && o.hidden);
-        }).map((r, o) => {
+        t == null ? void 0 : t.items.filter((o) => {
+          var i;
+          return !((i = o.props) != null && i.hidden);
+        }).map((o, i) => {
           var h;
-          const { active: A, onMouseEnter: F } = r, { groupId: u, onClick: E, value: f, checked: M, type: b, ...i } = r.props || {}, { expanded: H } = i, x = i.name || k, y = b || u && ((h = a[u]) == null ? void 0 : h.optionType) || L;
+          const { active: A, onMouseEnter: F } = o, { groupId: u, onClick: E, value: f, checked: M, type: b, ...r } = o.props || {}, { expanded: H } = r, x = r.name || k, y = b || u && ((h = a[u]) == null ? void 0 : h.optionType) || L;
           return /* @__PURE__ */ e(
             m,
             {
@@ -49,10 +49,11 @@ const G = ({
               children: /* @__PURE__ */ e(
                 S,
                 {
+                  ...r,
                   active: A,
                   tabIndex: p ? -1 : 0,
-                  label: i.label,
-                  badge: i.badge,
+                  label: r.label,
+                  badge: r.badge,
                   name: x,
                   type: y,
                   value: f,
@@ -67,7 +68,7 @@ const G = ({
                 }
               )
             },
-            o
+            i
           );
         })
       ] }, l);

package/dist/functions/index.js

@@ -0,0 +1,4 @@
+import { formatDisplayName as o } from "./name/name.js";
+export {
+  o as formatDisplayName
+};

package/dist/functions/name/index.js

@@ -0,0 +1,4 @@
+import { formatDisplayName as o } from "./name.js";
+export {
+  o as formatDisplayName
+};

package/dist/functions/name/name.js

@@ -0,0 +1,16 @@
+const l = ({ fullName: n, type: a, reverseNameOrder: i }) => {
+  if (!n) return "";
+  const p = ["enk", "as", "da", "sa", "asa", "ba", "ans", "sti", "nuf"], r = n.toLowerCase().split(" ");
+  let t = r.map((s, e) => {
+    const c = e === r.length - 1;
+    return a === "company" && c && p.includes(s) ? s.toUpperCase() : s.split("-").map((o) => o.charAt(0).toUpperCase() + o.slice(1)).join("-");
+  });
+  if (a === "person" && i && t.length > 1) {
+    const [s, ...e] = t;
+    t = [...e, s];
+  }
+  return t.join(" ");
+};
+export {
+  l as formatDisplayName
+};

package/dist/functions/name/name.spec.js

@@ -0,0 +1,21 @@
+import { describe as s, it as e, expect as t } from "vitest";
+import { formatDisplayName as a } from "./name.js";
+s("formatDisplayName", () => {
+  e("formats a simple person name", () => {
+    t(a({ fullName: "TEST TESTESEN", type: "person" })).toBe("Test Testesen");
+  }), e("formats a person name with reordering (surname first)", () => {
+    t(a({ fullName: "TESTESEN TEST", type: "person", reverseNameOrder: !0 })).toBe(
+      "Test Testesen"
+    );
+  }), e("formats a person name with hyphenated last name", () => {
+    t(a({ fullName: "TEST TESTY-TEST", type: "person" })).toBe("Test Testy-Test");
+  }), e("formats a company name and uppercases legal entity suffix", () => {
+    t(a({ fullName: "test as", type: "company" })).toBe("Test AS");
+  }), e("formats a company name and uppercases legal entity suffix", () => {
+    t(a({ fullName: "WORK AS FRIENDS AS", type: "company" })).toBe("Work As Friends AS");
+  }), e("handles company names with hyphenation and suffix", () => {
+    t(a({ fullName: "test testy-test da", type: "company" })).toBe("Test Testy-Test DA");
+  }), e("returns empty string for empty input", () => {
+    t(a({ fullName: "", type: "person" })).toBe("");
+  });
+});

package/dist/index.js

@@ -9,13 +9,13 @@ import { AccountList as B } from "./components/Account/AccountList.js";
 import { AccountNotificationSettings as S } from "./components/Account/AccountNotificationSettings.js";
 import { Badge as b } from "./components/Badge/Badge.js";
 import { Banner as M, BannerColorEnum as k } from "./components/Banner/Banner.js";
-import { BookmarksListItem as y } from "./components/Bookmarks/BookmarksListItem.js";
+import { BookmarksListItem as T } from "./components/Bookmarks/BookmarksListItem.js";
 import { EditableBookmark as H } from "./components/Bookmarks/EditableBookmark.js";
 import { BookmarksSection as P } from "./components/Bookmarks/BookmarksSection.js";
 import { BookmarksSettingsItem as v } from "./components/Bookmarks/BookmarksSettingsItem.js";
 import { BookmarksSettingsSection as G } from "./components/Bookmarks/BookmarksSettingsSection.js";
 import { BookmarksSettingsModal as O } from "./components/Bookmarks/BookmarksSettingsModal.js";
-import { ButtonBase as U } from "./components/Button/ButtonBase.js";
+import { ButtonBase as N } from "./components/Button/ButtonBase.js";
 import { ButtonLabel as Q } from "./components/Button/ButtonLabel.js";
 import { ButtonIcon as j } from "./components/Button/ButtonIcon.js";
 import { Button as K } from "./components/Button/Button.js";
@@ -35,14 +35,14 @@ import { DialogContact as Bo } from "./components/Dialog/DialogContact.js";
 import { DialogHistory as So } from "./components/Dialog/DialogHistory.js";
 import { DialogHistorySegment as bo } from "./components/Dialog/DialogHistorySegment.js";
 import { DialogHistoryItem as Mo } from "./components/Dialog/DialogHistoryItem.js";
-import { DialogList as To } from "./components/Dialog/DialogList.js";
+import { DialogList as yo } from "./components/Dialog/DialogList.js";
 import { DialogListGroup as ho } from "./components/Dialog/DialogListGroup.js";
 import { DialogListItem as Co } from "./components/Dialog/DialogListItem.js";
 import { DialogMetadata as Fo } from "./components/Dialog/DialogMetadata.js";
 import { DialogByline as wo } from "./components/Dialog/DialogByline.js";
 import { DialogActions as Eo } from "./components/Dialog/DialogActions.js";
 import { DialogActivityLog as Ro } from "./components/Dialog/DialogActivityLog.js";
-import { DialogSeenBy as No } from "./components/Dialog/DialogSeenBy.js";
+import { DialogSeenBy as Uo } from "./components/Dialog/DialogSeenBy.js";
 import { DialogSelect as Vo } from "./components/Dialog/DialogSelect.js";
 import { DialogStatus as zo, DialogStatusEnum as Ko } from "./components/Dialog/DialogStatus.js";
 import { DialogAttachments as Jo } from "./components/Dialog/DialogAttachments.js";
@@ -62,13 +62,13 @@ import { Footer as Lr } from "./components/Footer/Footer.js";
 import { CurrentAccount as Ir } from "./components/GlobalMenu/CurrentAccount.js";
 import { BackButton as Ar } from "./components/GlobalMenu/BackButton.js";
 import { LogoutButton as kr } from "./components/GlobalMenu/LogoutButton.js";
-import { EndUserLabel as yr } from "./components/GlobalMenu/EndUserLabel.js";
+import { EndUserLabel as Tr } from "./components/GlobalMenu/EndUserLabel.js";
 import { GlobalMenu as Hr } from "./components/GlobalMenu/GlobalMenu.js";
 import { GlobalMenuButton as Pr } from "./components/GlobalMenu/GlobalMenuButton.js";
 import { Header as vr } from "./components/Header/Header.js";
 import { HeaderBase as Gr } from "./components/Header/HeaderBase.js";
 import { HeaderLogo as Or } from "./components/Header/HeaderLogo.js";
-import { HeaderButton as Ur } from "./components/Header/HeaderButton.js";
+import { HeaderButton as Nr } from "./components/Header/HeaderButton.js";
 import { HeaderGroup as Qr } from "./components/Header/HeaderGroup.js";
 import { HeaderSearch as jr } from "./components/Header/HeaderSearch.js";
 import { LocaleButton as Kr } from "./components/Header/LocaleButton.js";
@@ -88,13 +88,13 @@ import { ActionFooter as Be } from "./components/LayoutAction/ActionFooter.js";
 import { LayoutAction as Se } from "./components/LayoutAction/LayoutAction.js";
 import { ListItemBase as be } from "./components/List/ListItemBase.js";
 import { ListItemLink as Me } from "./components/List/ListItemLink.js";
-import { ListItemHeader as Te } from "./components/List/ListItemHeader.js";
+import { ListItemHeader as ye } from "./components/List/ListItemHeader.js";
 import { ListItemLabel as he, isHeadingProps as He } from "./components/List/ListItemLabel.js";
 import { ListItemIcon as Pe } from "./components/List/ListItemIcon.js";
 import { ListItemControls as ve } from "./components/List/ListItemControls.js";
 import { ListItemSelect as Ge } from "./components/List/ListItemSelect.js";
 import { ListItem as Oe } from "./components/List/ListItem.js";
-import { List as Ue } from "./components/List/List.js";
+import { List as Ne } from "./components/List/List.js";
 import { MenuItemBase as Qe } from "./components/Menu/MenuItemBase.js";
 import { MenuItemLabel as je, getAriaLabelFromTitle as ze } from "./components/Menu/MenuItemLabel.js";
 import { MenuItemIcon as qe } from "./components/Menu/MenuItemIcon.js";
@@ -113,13 +113,13 @@ import { MetaItemLabel as Bt } from "./components/Metadata/MetaItemLabel.js";
 import { MetaItem as St } from "./components/Metadata/MetaItem.js";
 import { MetaProgress as bt } from "./components/Metadata/MetaProgress.js";
 import { MetaTimestamp as Mt } from "./components/Metadata/MetaTimestamp.js";
-import { MetaListItem as Tt, Metadata as yt } from "./components/Metadata/Metadata.js";
+import { MetaListItem as yt, Metadata as Tt } from "./components/Metadata/Metadata.js";
 import { RootProvider as Ht, useRootContext as Ct } from "./components/RootProvider/RootProvider.js";
 import { SearchItem as Ft } from "./components/Search/SearchItem.js";
 import { Searchbar as wt } from "./components/Searchbar/Searchbar.js";
 import { SearchbarBase as Et } from "./components/Searchbar/SearchbarBase.js";
 import { SearchbarField as Rt } from "./components/Searchbar/SearchbarField.js";
-import { AutocompleteBase as Nt } from "./components/Searchbar/AutocompleteBase.js";
+import { AutocompleteBase as Ut } from "./components/Searchbar/AutocompleteBase.js";
 import { AutocompleteGroup as Vt } from "./components/Searchbar/AutocompleteGroup.js";
 import { Autocomplete as zt } from "./components/Searchbar/Autocomplete.js";
 import { AutocompleteItem as qt } from "./components/Searchbar/AutocompleteItem.js";
@@ -137,14 +137,14 @@ import { TimelineHeader as Bm } from "./components/Timeline/TimelineHeader.js";
 import { TimelineFooter as Sm } from "./components/Timeline/TimelineFooter.js";
 import { TimelineIcon as bm } from "./components/Timeline/TimelineIcon.js";
 import { TimelineLink as Mm } from "./components/Timeline/TimelineLink.js";
-import { ToolbarBase as Tm } from "./components/Toolbar/ToolbarBase.js";
+import { ToolbarBase as ym } from "./components/Toolbar/ToolbarBase.js";
 import { ToolbarButton as hm } from "./components/Toolbar/ToolbarButton.js";
 import { Toolbar as Cm } from "./components/Toolbar/Toolbar.js";
 import { ToolbarSearch as Fm } from "./components/Toolbar/ToolbarSearch.js";
 import { ToolbarFilterBase as wm } from "./components/Toolbar/ToolbarFilterBase.js";
 import { ToolbarFilter as Em } from "./components/Toolbar/ToolbarFilter.js";
 import { ToolbarDaterange as Rm } from "./components/Toolbar/ToolbarDaterange.js";
-import { PageBase as Nm } from "./components/Page/PageBase.js";
+import { PageBase as Um } from "./components/Page/PageBase.js";
 import { PageNav as Vm } from "./components/Page/PageNav.js";
 import { PageMenu as zm } from "./components/Page/PageMenu.js";
 import { PageTabs as qm } from "./components/Page/PageTabs.js";
@@ -164,13 +164,13 @@ import { Typography as La } from "./components/Typography/Typography.js";
 import { Heading as Ia } from "./components/Typography/Heading.js";
 import { ResourceListItem as Aa } from "./components/ResourceListItem/ResourceListItem.js";
 import { AccessAreaListItem as ka } from "./components/AccessAreaListItem/AccessAreaListItem.js";
-import { AccessPackageListItem as ya } from "./components/AccessPackageListItem/AccessPackageListItem.js";
+import { AccessPackageListItem as Ta } from "./components/AccessPackageListItem/AccessPackageListItem.js";
 import { UserListItem as Ha } from "./components/UserListItem/UserListItem.js";
 import { Field as Pa } from "./components/Forms/Field.js";
 import { Fieldset as va } from "./components/Forms/Fieldset.js";
 import { Legend as Ga } from "./components/Forms/Legend.js";
 import { Label as Oa } from "./components/Forms/Label.js";
-import { Input as Ua } from "./components/Forms/Input.js";
+import { Input as Na } from "./components/Forms/Input.js";
 import { Textarea as Qa } from "./components/Forms/Textarea.js";
 import { Select as ja } from "./components/Forms/Select.js";
 import { Radio as Ka } from "./components/Forms/Radio.js";
@@ -191,13 +191,13 @@ import { SettingsItem as Lp } from "./components/Settings/SettingsItem.js";
 import { SettingsList as Ip } from "./components/Settings/SettingsList.js";
 import { SettingsModal as Ap } from "./components/Settings/SettingsModal.js";
 import { DashboardHeader as kp } from "./components/Dashboard/DashboardHeader.js";
-import { DashboardCard as yp } from "./components/Dashboard/DashboardCard.js";
+import { DashboardCard as Tp } from "./components/Dashboard/DashboardCard.js";
 import { DashboardIcon as Hp } from "./components/Dashboard/DashboardIcon.js";
 import { ActivityLog as Pp } from "./components/ActivityLog/ActivityLog.js";
 import { ActivityLogSegment as vp } from "./components/ActivityLog/ActivityLogSegment.js";
 import { ActivityLogItem as Gp } from "./components/ActivityLog/ActivityLogItem.js";
 import { ArticleHeader as Op } from "./components/Article/ArticleHeader.js";
-import { ArticleContact as Up } from "./components/Article/ArticleContact.js";
+import { ArticleContact as Np } from "./components/Article/ArticleContact.js";
 import { Article as Qp } from "./components/Article/Article.js";
 import { ModalBase as jp } from "./components/Modal/ModalBase.js";
 import { ModalHeader as Kp } from "./components/Modal/ModalHeader.js";
@@ -207,13 +207,14 @@ import { Modal as Zp } from "./components/Modal/Modal.js";
 import { useClickOutside as $p } from "./hooks/useClickOutside.js";
 import { useEscapeKey as rx } from "./hooks/useEscapeKey.js";
 import { useMenu as tx } from "./hooks/useMenu.js";
-import { A as ax, B as px, a as xx, C as fx, b as ix, c as sx, D as nx, H as cx, L as lx, d as ux, e as dx, P as gx, f as Dx, g as Bx, h as Lx, i as Sx, S as Ix, j as bx, T as Ax, u as Mx } from "./usePagination-Bdiq8ITD.js";
-import { D as Tx } from "./index-D3Rt9ate.js";
-import { P as hx } from "./Paragraph-Bm-eoPYv.js";
-import { V as Cx } from "./index-CnWc2FNH.js";
+import { formatDisplayName as ax } from "./functions/name/name.js";
+import { A as xx, B as fx, a as ix, C as sx, b as nx, c as cx, D as lx, H as ux, L as dx, d as gx, e as Dx, P as Bx, f as Lx, g as Sx, h as Ix, i as bx, S as Ax, j as Mx, T as kx, u as yx } from "./usePagination-Bdiq8ITD.js";
+import { D as hx } from "./index-D3Rt9ate.js";
+import { P as Cx } from "./Paragraph-Bm-eoPYv.js";
+import { V as Fx } from "./index-CnWc2FNH.js";
 export {
   ka as AccessAreaListItem,
-  ya as AccessPackageListItem,
+  Ta as AccessPackageListItem,
   sa as AccordionSection,
   B as AccountList,
   g as AccountListItem,
@@ -225,12 +226,12 @@ export {
   Gp as ActivityLogItem,
   vp as ActivityLogSegment,
   Qp as Article,
-  Up as ArticleContact,
+  Np as ArticleContact,
   Op as ArticleHeader,
   m as AttachmentLink,
   p as AttachmentList,
   zt as Autocomplete,
-  Nt as AutocompleteBase,
+  Ut as AutocompleteBase,
   Vt as AutocompleteGroup,
   qt as AutocompleteItem,
   f as Avatar,
@@ -240,7 +241,7 @@ export {
   b as Badge,
   M as Banner,
   k as BannerColorEnum,
-  y as BookmarksListItem,
+  T as BookmarksListItem,
   P as BookmarksSection,
   v as BookmarksSettingsItem,
   O as BookmarksSettingsModal,
@@ -248,7 +249,7 @@ export {
   oa as Breadcrumbs,
   ea as BreadcrumbsLink,
   K as Button,
-  U as ButtonBase,
+  N as ButtonBase,
   $ as ButtonGroup,
   j as ButtonIcon,
   Q as ButtonLabel,
@@ -261,7 +262,7 @@ export {
   pa as ContactSection,
   to as ContextMenu,
   Ir as CurrentAccount,
-  yp as DashboardCard,
+  Tp as DashboardCard,
   kp as DashboardHeader,
   Hp as DashboardIcon,
   ao as Dialog,
@@ -276,12 +277,12 @@ export {
   Mo as DialogHistoryItem,
   bo as DialogHistorySegment,
   xo as DialogLayout,
-  To as DialogList,
+  yo as DialogList,
   ho as DialogListGroup,
   Co as DialogListItem,
   Fo as DialogMetadata,
   go as DialogSection,
-  No as DialogSeenBy,
+  Uo as DialogSeenBy,
   Vo as DialogSelect,
   zo as DialogStatus,
   Ko as DialogStatusEnum,
@@ -294,30 +295,30 @@ export {
   ir as DrawerHeader,
   Dr as DrawerOrDropdown,
   tr as DropdownBase,
-  ax as DsAlert,
-  px as DsBadge,
-  xx as DsButton,
-  fx as DsCheckbox,
-  ix as DsChip,
-  sx as DsCombobox,
-  Tx as DsDetails,
-  nx as DsDialog,
-  cx as DsHeading,
-  lx as DsLink,
-  ux as DsListItem,
-  dx as DsListUnordered,
-  gx as DsPagination,
-  hx as DsParagraph,
-  Dx as DsPopover,
-  Bx as DsSearch,
-  Lx as DsSkeleton,
-  Sx as DsSpinner,
-  Ix as DsSwitch,
-  bx as DsTabs,
-  Ax as DsTextfield,
-  Cx as DsValidationMessage,
+  xx as DsAlert,
+  fx as DsBadge,
+  ix as DsButton,
+  sx as DsCheckbox,
+  nx as DsChip,
+  cx as DsCombobox,
+  hx as DsDetails,
+  lx as DsDialog,
+  ux as DsHeading,
+  dx as DsLink,
+  gx as DsListItem,
+  Dx as DsListUnordered,
+  Bx as DsPagination,
+  Cx as DsParagraph,
+  Lx as DsPopover,
+  Sx as DsSearch,
+  Ix as DsSkeleton,
+  bx as DsSpinner,
+  Ax as DsSwitch,
+  Mx as DsTabs,
+  kx as DsTextfield,
+  Fx as DsValidationMessage,
   H as EditableBookmark,
-  yr as EndUserLabel,
+  Tr as EndUserLabel,
   Pa as Field,
   Za as FieldBase,
   va as Fieldset,
@@ -330,7 +331,7 @@ export {
   _m as Grid,
   vr as Header,
   Gr as HeaderBase,
-  Ur as HeaderButton,
+  Nr as HeaderButton,
   Qr as HeaderGroup,
   Or as HeaderLogo,
   jr as HeaderSearch,
@@ -338,7 +339,7 @@ export {
   Xr as Icon,
   X as IconButton,
   me as IconOrAvatar,
-  Ua as Input,
+  Na as Input,
   Oa as Label,
   ue as Layout,
   Se as LayoutAction,
@@ -347,11 +348,11 @@ export {
   se as LayoutContent,
   ce as LayoutSidebar,
   Ga as Legend,
-  Ue as List,
+  Ne as List,
   Oe as ListItem,
   be as ListItemBase,
   ve as ListItemControls,
-  Te as ListItemHeader,
+  ye as ListItemHeader,
   Pe as ListItemIcon,
   he as ListItemLabel,
   Me as ListItemLink,
@@ -377,17 +378,17 @@ export {
   ut as MetaItemBase,
   gt as MetaItemIcon,
   Bt as MetaItemLabel,
-  Tt as MetaListItem,
+  yt as MetaListItem,
   bt as MetaProgress,
   Mt as MetaTimestamp,
-  yt as Metadata,
+  Tt as Metadata,
   Zp as Modal,
   jp as ModalBase,
   Xp as ModalBody,
   Kp as ModalHeader,
   Jp as ModalIcon,
   ip as OptionsBase,
-  Nm as PageBase,
+  Um as PageBase,
   Wm as PageDetails,
   zm as PageMenu,
   Vm as PageNav,
@@ -437,7 +438,7 @@ export {
   gm as TimelineSection,
   sm as TimelineSegment,
   Cm as Toolbar,
-  Tm as ToolbarBase,
+  ym as ToolbarBase,
   hm as ToolbarButton,
   Rm as ToolbarDaterange,
   Em as ToolbarFilter,
@@ -449,13 +450,14 @@ export {
   da as TransmissionTypeEnum,
   La as Typography,
   Ha as UserListItem,
+  ax as formatDisplayName,
   ze as getAriaLabelFromTitle,
   c as isAvatarGroupProps,
   i as isAvatarProps,
   He as isHeadingProps,
   Yr as isIconProps,
   $p as useClickOutside,
-  Mx as useDsPagination,
+  yx as useDsPagination,
   rx as useEscapeKey,
   tx as useMenu,
   Ct as useRootContext,

package/dist/types/lib/components/Avatar/Avatar.d.ts

@@ -8,6 +8,8 @@ export type AvatarVariant = 'solid' | 'outline';
  * Props for the Avatar component.
  */
 export interface AvatarProps {
+    /** Optional Id */
+    id?: string;
     /** The name to display in the avatar. */
     name: string;
     /** The type of avatar. */

package/dist/types/lib/components/Menu/MenuOption.d.ts

@@ -1,9 +1,12 @@
-import { BadgeProps } from '..';
+import { BadgeProps, MenuItemProps } from '..';
 import { MenuItemBaseProps, MenuItemSize } from './MenuItemBase';
 export type MenuOptionType = 'checkbox' | 'radio';
 export interface MenuOptionProps extends MenuItemBaseProps {
     value: string | number;
     label: string;
+    icon?: MenuItemProps['icon'];
+    title?: MenuItemProps['title'];
+    description?: MenuItemProps['description'];
     groupId?: string;
     size?: MenuItemSize;
     name?: string;
@@ -14,4 +17,4 @@ export interface MenuOptionProps extends MenuItemBaseProps {
     hidden?: boolean;
     role?: string;
 }
-export declare const MenuOption: ({ size, type, name, active, value, label, badge, checked, disabled, onMouseEnter, onClick, role, ...rest }: MenuOptionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuOption: ({ size, type, name, active, value, label, title, description, icon, badge, checked, disabled, onMouseEnter, onClick, role, ...rest }: MenuOptionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/functions/index.d.ts

@@ -0,0 +1 @@
+export * from './name';

package/dist/types/lib/functions/name/index.d.ts

@@ -0,0 +1 @@
+export * from './name.ts';

package/dist/types/lib/functions/name/name.d.ts

@@ -0,0 +1,22 @@
+interface FormatDisplayNameInput {
+    /** Full name of person or company */
+    fullName: string;
+    /** Entity type: Whether this is a person or a company */
+    type: 'person' | 'company';
+    /** For persons: switch order of first/last name */
+    reverseNameOrder?: boolean;
+}
+/**
+ * Formats a display name for a person or company by applying title casing,
+ * normalizing hyphenated words, and (for companies) uppercasing known legal
+ * entity suffixes.
+ *
+ * For persons, you can optionally reorder the name by moving the first word
+ * (often a surname) to the end.
+ *
+ * @param {FormatDisplayNameInput} input - The input object with full name, entity type, and options.
+ * @returns {string} The formatted display name.
+ *
+ */
+export declare const formatDisplayName: ({ fullName, type, reverseNameOrder }: FormatDisplayNameInput) => string;
+export {};

package/dist/types/lib/functions/name/name.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/lib/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components';
 export * from './hooks';
+export * from './functions';

package/dist/types/lib/stories/Dashboard/Dashboard.stories.d.ts

@@ -0,0 +1,10 @@
+declare const meta: {
+    title: string;
+    tags: string[];
+    parameters: {};
+    args: {};
+};
+export default meta;
+export declare const CompanyDashboard: () => import("react/jsx-runtime").JSX.Element;
+export declare const PersonDashboard: () => import("react/jsx-runtime").JSX.Element;
+export declare const UserDashboard: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/stories/{Profile → Settings}/Settings.stories.d.ts

@@ -1,5 +1,6 @@
 import { ChangeEvent } from 'react';
-import { SettingsListProps, SettingsModalProps, AccountListItemProps } from '../../components';
+import { UseSettingsProps } from '../../../examples';
+import { SettingsModalProps, AccountListItemProps } from '../../components';
 declare const meta: {
     title: string;
     tags: string[];
@@ -13,6 +14,12 @@ interface ContactProfileModalProps extends SettingsModalProps {
     readOnly?: boolean;
     items?: AccountListItemProps[];
 }
+interface SettingsValueModalProps extends SettingsModalProps {
+    value?: string;
+}
+export declare const CompanyInfoModal: ({ open, onClose, }: SettingsModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CompanyEmailSettingsModal: ({ title, icon, value, open, onClose, }: SettingsValueModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CompanyPhoneSettingsModal: ({ title, icon, value, open, onClose, }: SettingsValueModalProps) => import("react/jsx-runtime").JSX.Element;
 export declare const ContactProfileModal: ({ title, icon, type, value, readOnly, items, open, onClose, }: ContactProfileModalProps) => import("react/jsx-runtime").JSX.Element;
 export declare const PhoneSettingsModal: ({ open, onClose, }: SettingsModalProps) => import("react/jsx-runtime").JSX.Element;
 export declare const EmailSettingsModal: ({ open, onClose, }: SettingsModalProps) => import("react/jsx-runtime").JSX.Element;
@@ -23,11 +30,10 @@ interface LocaleSettingsModal extends SettingsModalProps {
     value?: string;
 }
 export declare const LocaleSettingsModal: ({ open, onClose, value, onChange, }: LocaleSettingsModal) => import("react/jsx-runtime").JSX.Element;
-interface SearchSettingsProps {
-    title?: string;
-    groups?: SettingsListProps["groups"];
-}
-export declare const SearchSettings: ({ title, groups }: SearchSettingsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SearchSettings: ({ query, groups }: UseSettingsProps) => import("react/jsx-runtime").JSX.Element;
 export declare const AlertSettings: () => import("react/jsx-runtime").JSX.Element;
-export declare const AllSettings: () => import("react/jsx-runtime").JSX.Element;
+export declare const AccountSettings: () => import("react/jsx-runtime").JSX.Element;
+export declare const PersonSettings: () => import("react/jsx-runtime").JSX.Element;
+export declare const CompanySettings: () => import("react/jsx-runtime").JSX.Element;
+export declare const AdminSettings: () => import("react/jsx-runtime").JSX.Element;
 export declare const DashboardSettings: () => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.38.20",
+  "version": "0.39.0",
   "main": "dist/index.js",
   "files": [
     "dist/",
@@ -39,6 +39,7 @@
     "@storybook/addon-themes": "^9.0.4",
     "@storybook/react-vite": "^9.0.4",
     "@storybook/test-runner": "^0.22.0",
+    "@testing-library/react": "^16.3.0",
     "@types/react": "^19.1.5",
     "@types/react-dom": "^18.3.7",
     "@vitejs/plugin-react-swc": "^3.9.0",
@@ -55,7 +56,8 @@
     "vite": "^5.4.19",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "vite-plugin-static-copy": "^2.3.1"
+    "vite-plugin-static-copy": "^2.3.1",
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "react": ">=18.3.1 || ^19.0.0",
@@ -65,7 +67,7 @@
     "**/*.*": "biome check --staged --no-errors-on-unmatched --write"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "vitest run",
     "storybook": "storybook dev -p 6006",
     "typecheck": "tsc --noEmit",
     "build": "tsc && vite build",

package/dist/types/lib/stories/Admin/Settings.stories.d.ts

@@ -1,17 +0,0 @@
-import { SettingsModalProps } from '../../components';
-declare const meta: {
-    title: string;
-    tags: string[];
-    parameters: {};
-    args: {};
-};
-export default meta;
-export declare const CompanyEmailSettingsModal: ({ open, onClose, }: SettingsModalProps) => import("react/jsx-runtime").JSX.Element;
-export declare const CompanyPhoneSettingsModal: ({ open, onClose, }: SettingsModalProps) => import("react/jsx-runtime").JSX.Element;
-export declare const DashboardSettings: () => import("react/jsx-runtime").JSX.Element;
-export declare const AlertSettings: () => import("react/jsx-runtime").JSX.Element;
-export declare const CompanySettingsX: () => import("react/jsx-runtime").JSX.Element;
-export declare const AccountantSettings: () => import("react/jsx-runtime").JSX.Element;
-export declare const RoleSettings: () => import("react/jsx-runtime").JSX.Element;
-export declare const SearchSettings: () => import("react/jsx-runtime").JSX.Element;
-export declare const AdminSettings: () => import("react/jsx-runtime").JSX.Element;