@altinn/altinn-components 0.41.0 → 0.41.2

package/dist/assets/ButtonIcon.css

@@ -1 +1 @@
-._wrapper_1tenp_1{display:flex;align-items:center;justify-content:center;font-size:1em}._icon_1tenp_8[data-size=xs]{font-size:.875rem}._icon_1tenp_8[data-size=sm]{font-size:1rem}._icon_1tenp_8[data-size=md]{font-size:1.125rem}._icon_1tenp_8[data-size=lg]{font-size:1.5rem}._icon_1tenp_8 svg,._icon_1tenp_8 img{display:block;width:1em;height:1em;font-size:1.5em}._avatar_1tenp_32{font-size:1.5em}._avatarGroup_1tenp_36{font-size:1.125em}
+._wrapper_1y1r9_1{display:flex;align-items:center;justify-content:center;font-size:1em}._icon_1y1r9_8[data-size=xs]{font-size:.875rem}._icon_1y1r9_8[data-size=sm]{font-size:1rem}._icon_1y1r9_8[data-size=md]{font-size:1.125rem}._icon_1y1r9_8[data-size=lg]{font-size:1.5rem}._icon_1y1r9_8 svg,._icon_1y1r9_8 img{display:block;width:1.5em;height:1.5em}._avatar_1y1r9_31{font-size:1.5em}._avatarGroup_1y1r9_35{font-size:1.125em}

package/dist/assets/GlobalMenuButton.css

@@ -1 +1 @@
-._button_af7mx_1{flex-shrink:0;position:relative;z-index:2;display:inline-flex;align-items:center;column-gap:.625rem;padding:.625rem;border:none;border-radius:4px}._label_af7mx_13{font-size:1.125rem;font-weight:500;padding:.25rem}._loginIcon_af7mx_19,._closeIcon_af7mx_20,._avatar_af7mx_21{font-size:1.5rem;width:2.25rem;height:2.25rem;border-radius:2px}._loginIcon_af7mx_19{background-color:#fff;color:#000}._closeIcon_af7mx_20{outline:1px solid white}._badge_af7mx_37{position:absolute;top:0;right:0;margin-top:-.75rem;margin-right:-.75rem}
+._button_234vz_1{flex-shrink:0;position:relative;z-index:2;display:inline-flex;align-items:center;column-gap:.625rem;padding:.625rem;border:none;border-radius:4px}._label_234vz_13{font-size:1.125rem;font-weight:500;padding:.25rem}._loginIcon_234vz_19,._closeIcon_234vz_20,._avatar_234vz_21{font-size:1.5rem;width:2.25rem;height:2.25rem;border-radius:2px}._loginIcon_234vz_19{background-color:#fff;color:#000}._closeIcon_234vz_20{outline:1px solid white}._badge_234vz_37{position:absolute;top:0;right:0;margin-top:-.75rem;margin-right:-.75rem}@supports (-webkit-hyphens: none){._loginIcon_234vz_19,._closeIcon_234vz_20,._avatar_234vz_21{font-size:unset}._loginIcon_234vz_19 svg,._loginIcon_234vz_19 img,._closeIcon_234vz_20 svg,._closeIcon_234vz_20 img{width:1.5rem;height:1.5rem}}

package/dist/assets/Icon.css

@@ -1 +1 @@
-._icon_2h14f_1{position:relative;display:flex;justify-content:center;align-items:center;border-radius:5%}._shape_2h14f_9{font-size:1em;width:1em;height:1em}._svg_2h14f_15,._image_2h14f_16{position:absolute;display:block;font-size:1em;margin:auto}
+._icon_1y3dz_1{position:relative;display:flex;justify-content:center;align-items:center;border-radius:5%}._shape_1y3dz_9{width:1em;height:1em}._svg_1y3dz_14,._image_1y3dz_15{position:absolute;display:block;width:1em;height:1em;margin:auto}

package/dist/assets/MenuOption.css

@@ -1 +1 @@
-._label_zw85f_1{flex-grow:1;display:flex;flex-direction:row;align-items:center;justify-content:center;padding:0 .125rem;font-size:1rem;column-gap:.5em;pointer-events:none}._title_zw85f_13{display:inline-flex;align-items:center;column-gap:.5em}._radio_zw85f_19,._checkbox_zw85f_20{flex-shrink:0;flex-grow:0;position:relative;width:1.25em;height:1.25em;display:flex;align-items:center;justify-content:center;color:transparent}._radio_zw85f_19{border:1px solid;border-color:var(--ds-color-border-subtle);outline:var(--ds-color-border-subtle) solid 1px;border-radius:50%}._checkbox_zw85f_20{border:2px solid;border-color:var(--ds-color-border-subtle);border-radius:2px}._radio_zw85f_19[data-checked=true],._checkbox_zw85f_20[data-checked=true]{background-color:var(--ds-color-base-default);border:none;outline-color:var(--ds-color-base-default);color:var(--ds-color-base-contrast-default)}._icon_zw85f_53{font-size:1.25em}
+._label_16xuy_1{flex-grow:1;display:flex;flex-direction:row;align-items:center;justify-content:center;padding:0 .125rem;font-size:1rem;column-gap:.5em;pointer-events:none}._title_16xuy_13{display:inline-flex;align-items:center;column-gap:.5em}._radio_16xuy_19,._checkbox_16xuy_20{flex-shrink:0;flex-grow:0;position:relative;width:1.25em;height:1.25em;display:flex;align-items:center;justify-content:center;color:transparent}._radio_16xuy_19{border:1px solid;border-color:var(--ds-color-border-subtle);outline:var(--ds-color-border-subtle) solid 1px;border-radius:50%}._checkbox_16xuy_20{border:2px solid;border-color:var(--ds-color-border-subtle);border-radius:2px}._radio_16xuy_19[data-checked=true],._checkbox_16xuy_20[data-checked=true]{background-color:var(--ds-color-base-default);border:none;outline-color:var(--ds-color-base-default);color:var(--ds-color-base-contrast-default)}._icon_16xuy_53{font-size:1.25em}@supports (-webkit-hyphens: none){._icon_16xuy_53{font-size:unset;width:1.25em;height:1.25em}._icon_16xuy_53 svg,._icon_16xuy_53 img{width:100%;height:100%}}

package/dist/components/Account/AccountList.js

@@ -1,28 +1,44 @@
-import { jsxs as l, jsx as n } from "react/jsx-runtime";
-import { Fragment as u, createElement as p } from "react";
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { Fragment as y, createElement as k } from "react";
 import "../../index-L8X2o7IH.js";
-import { AccountListItem as f } from "./AccountListItem.js";
-import { Typography as y } from "../Typography/Typography.js";
-import { Heading as d } from "../Typography/Heading.js";
+import { AccountListItem as u } from "./AccountListItem.js";
+import { Typography as x } from "../Typography/Typography.js";
+import { Heading as m } from "../Typography/Heading.js";
+import { useMenu as I } from "../../hooks/useMenu.js";
 import "../RootProvider/RootProvider.js";
-import { List as m } from "../List/List.js";
+import { List as L } from "../List/List.js";
 import "../Snackbar/useSnackbar.js";
-import { Section as h } from "../Page/Section.js";
-const F = ({
-  items: t,
-  groups: i,
-  emptyTitle: g = "Ingen treff",
-  emptyDescription: s = "Søket ga ingen treff"
-}) => !t || t.length === 0 ? /* @__PURE__ */ l(h, { children: [
-  /* @__PURE__ */ n(d, { size: "lg", children: g }),
-  /* @__PURE__ */ n(y, { children: s })
-] }) : i ? /* @__PURE__ */ n(h, { spacing: 6, children: Object.entries(i).map(([r, a]) => {
-  const { title: o } = a, c = t.filter((e) => e.groupId === r && !e.hidden);
-  return c.length === 0 ? null : /* @__PURE__ */ l(u, { children: [
-    o && /* @__PURE__ */ n(d, { size: "lg", children: o }),
-    /* @__PURE__ */ n(m, { children: c.map((e) => /* @__PURE__ */ p(f, { ...e, key: e.id })) })
-  ] }, r);
-}) }) : /* @__PURE__ */ n(m, { children: t.filter((r) => !(r != null && r.hidden)).map((r) => /* @__PURE__ */ p(f, { ...r, key: r.id })) });
+import { Section as c } from "../Page/Section.js";
+const M = ({
+  items: i,
+  groups: p = {},
+  sortGroupBy: s,
+  emptyTitle: f = "Ingen treff",
+  emptyDescription: l = "Søket ga ingen treff"
+}) => {
+  if (!i || i.length === 0)
+    return /* @__PURE__ */ o(c, { children: [
+      /* @__PURE__ */ r(m, { size: "lg", children: f }),
+      /* @__PURE__ */ r(x, { children: l })
+    ] });
+  const { menu: n } = I({
+    items: i,
+    groups: p,
+    groupByKey: "groupId",
+    keyboardEvents: !1,
+    sortGroupBy: s
+  });
+  return /* @__PURE__ */ r(c, { spacing: 6, children: n == null ? void 0 : n.map((t, a) => {
+    const e = t.props || {};
+    return /* @__PURE__ */ o(y, { children: [
+      (e == null ? void 0 : e.title) && /* @__PURE__ */ r(m, { size: "lg", children: e.title }),
+      /* @__PURE__ */ r(L, { children: t == null ? void 0 : t.items.map((d, h) => {
+        const g = d.props || {};
+        return /* @__PURE__ */ k(u, { ...g, key: h });
+      }) })
+    ] }, a);
+  }) });
+};
 export {
-  F as AccountList
+  M as AccountList
 };

package/dist/components/Account/AccountListItem.js

@@ -1,57 +1,59 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import { ListItem as k } from "../List/ListItem.js";
+import { ListItem as C } from "../List/ListItem.js";
 import "../Snackbar/useSnackbar.js";
-import { AccountListItemControls as C } from "./AccountListItemControls.js";
-const y = ({
-  id: r,
-  type: i,
-  size: m,
+import { AccountListItemControls as M } from "./AccountListItemControls.js";
+const B = ({
+  id: i,
+  type: m,
+  size: c,
   expanded: t,
-  icon: c,
-  title: s,
+  icon: s,
+  title: e,
   description: n,
-  isCurrentEndUser: e,
-  isDeleted: p,
-  badge: l,
-  favourite: u = !1,
-  favouriteLabel: f,
-  onToggleFavourite: I,
-  contextMenu: L,
-  children: v,
-  interactive: A,
-  ...j
-}) => /* @__PURE__ */ o(
-  k,
+  isCurrentEndUser: p,
+  isDeleted: u,
+  badge: f,
+  favourite: I = !1,
+  favouriteLabel: l,
+  onToggleFavourite: L,
+  contextMenu: v,
+  children: A,
+  interactive: j,
+  loading: o,
+  ...k
+}) => /* @__PURE__ */ r(
+  C,
   {
-    ...j,
-    size: m,
-    icon: c,
-    title: s,
+    ...k,
+    loading: o,
+    size: c,
+    icon: s,
+    title: e,
     description: t ? void 0 : n,
     expanded: t,
     selected: t,
-    controls: /* @__PURE__ */ o(
-      C,
+    controls: !o && /* @__PURE__ */ r(
+      M,
       {
-        id: r,
-        type: i,
-        favourite: u,
-        favouriteLabel: f,
-        badge: l,
-        isCurrentEndUser: e,
-        isDeleted: p,
-        onToggleFavourite: I,
-        contextMenu: t ? void 0 : L
+        id: i,
+        type: m,
+        favourite: I,
+        favouriteLabel: l,
+        badge: f,
+        isCurrentEndUser: p,
+        isDeleted: u,
+        onToggleFavourite: L,
+        contextMenu: t ? void 0 : v
       }
     ),
-    linkIcon: !0,
-    interactive: A,
-    children: v
+    linkIcon: !o && !0,
+    interactive: j,
+    children: A
   }
 );
 export {
-  y as AccountListItem
+  B as AccountListItem
 };

package/dist/components/Button/ButtonIcon.js

@@ -1,21 +1,21 @@
-import { jsx as r } from "react/jsx-runtime";
-import { c as n } from "../../index-L8X2o7IH.js";
-import { isValidElement as m } from "react";
+import { jsx as a } from "react/jsx-runtime";
+import { c as m } from "../../index-L8X2o7IH.js";
+import { isValidElement as n } from "react";
 import { isIconProps as c, Icon as o } from "../Icon/Icon.js";
 import { isAvatarProps as i, Avatar as _ } from "../Avatar/Avatar.js";
 import { isAvatarGroupProps as l, AvatarGroup as f } from "../Avatar/AvatarGroup.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/ButtonIcon.css';const v = "_wrapper_1tenp_1", u = "_icon_1tenp_8", G = "_avatar_1tenp_32", N = "_avatarGroup_1tenp_36", t = {
+import '../../assets/ButtonIcon.css';const v = "_wrapper_1y1r9_1", u = "_icon_1y1r9_8", y = "_avatar_1y1r9_31", G = "_avatarGroup_1y1r9_35", t = {
   wrapper: v,
   icon: u,
-  avatar: G,
-  avatarGroup: N
+  avatar: y,
+  avatarGroup: G
 };
-function d(a) {
-  return typeof a == "string" || typeof a == "number" || typeof a == "boolean" || a === null || m(a);
+function N(r) {
+  return typeof r == "string" || typeof r == "number" || typeof r == "boolean" || r === null || n(r);
 }
-const E = ({ icon: a, size: p, iconAltText: s, className: e }) => /* @__PURE__ */ r("span", { className: n(t.wrapper, e), "data-size": p, "aria-label": s, children: i(a) && /* @__PURE__ */ r(_, { ...a, className: t.avatar }) || l(a) && /* @__PURE__ */ r(f, { ...a, className: t.avatarGroup }) || c(a) && /* @__PURE__ */ r(o, { ...a, className: t.icon }) || d(a) && a || /* @__PURE__ */ r(o, { svgElement: a, className: t.icon }) });
+const E = ({ icon: r, size: s, iconAltText: p, className: e }) => /* @__PURE__ */ a("span", { className: m(t.wrapper, e), "data-size": s, "aria-label": p, children: i(r) && /* @__PURE__ */ a(_, { ...r, className: t.avatar }) || l(r) && /* @__PURE__ */ a(f, { ...r, className: t.avatarGroup }) || c(r) && /* @__PURE__ */ a(o, { ...r, className: t.icon }) || N(r) && r || /* @__PURE__ */ a(o, { svgElement: r, className: t.icon }) });
 export {
   E as ButtonIcon
 };

package/dist/components/ContextMenu/ContextMenu.js

@@ -2,9 +2,9 @@
 import { jsxs as y, jsx as f } from "react/jsx-runtime";
 import { c as I } from "../../index-L8X2o7IH.js";
 import m, { forwardRef as w, useRef as O, useMemo as k } from "react";
-import { IconButton as E } from "../Button/IconButton.js";
-import { useClickOutside as _ } from "../../hooks/useClickOutside.js";
-import { useEnterKey as C } from "../../hooks/useEnterKey.js";
+import { useClickOutside as E } from "../../hooks/useClickOutside.js";
+import { useEnterKey as _ } from "../../hooks/useEnterKey.js";
+import { IconButton as C } from "../Button/IconButton.js";
 import { DropdownBase as M } from "../Dropdown/DropdownBase.js";
 import { MenuItems as j } from "../Menu/MenuItems.js";
 import { useRootContext as R } from "../RootProvider/RootProvider.js";
@@ -38,7 +38,7 @@ const A = w((e, s) => {
   items: i
 }) => {
   const { currentId: v, toggleId: p, closeAll: a } = R(), d = O(null), g = "context-menu-" + e, x = () => p(e), u = v === e;
-  _(d, () => {
+  E(d, () => {
     u && p(e);
   });
   const b = k(() => i.map((n) => ({
@@ -49,7 +49,7 @@ const A = w((e, s) => {
       (c = n.onClick) == null || c.call(n), a();
     }
   })), [i, a]);
-  C((n) => {
+  _((n) => {
     var c;
     if (u) {
       n.preventDefault();
@@ -63,7 +63,7 @@ const A = w((e, s) => {
   };
   return /* @__PURE__ */ y("div", { className: I(S.toggle, o), ref: d, "data-testid": g, children: [
     /* @__PURE__ */ f(
-      E,
+      C,
       {
         size: "xs",
         rounded: !0,

package/dist/components/GlobalMenu/BackButton.js

@@ -6,24 +6,24 @@ import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { MenuItem as m } from "../Menu/MenuItem.js";
 import { u as c } from "../../useId-BVFxCjkq.js";
-var d = function(t, o) {
+var d = function(t, l) {
   var r = {};
-  for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && o.indexOf(e) < 0 && (r[e] = t[e]);
+  for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && l.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++)
-      o.indexOf(e[l]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[l]) && (r[e[l]] = t[e[l]]);
+    for (var o = 0, e = Object.getOwnPropertySymbols(t); o < e.length; o++)
+      l.indexOf(e[o]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[o]) && (r[e[o]] = t[e[o]]);
   return r;
 };
-const p = f((t, o) => {
-  var { title: r, titleId: e } = t, l = d(t, ["title", "titleId"]);
+const p = f((t, l) => {
+  var { title: r, titleId: e } = t, o = d(t, ["title", "titleId"]);
   let n = c();
   return n = r ? e || "title-" + n : 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: o, "aria-labelledby": n }, l),
+    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": n }, o),
     r ? i.createElement("title", { id: n }, r) : null,
-    i.createElement("path", { fill: "currentColor", d: "M14.97 3.97a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 1 1-1.06-1.06l3.22-3.22H8a4.25 4.25 0 0 0 0 8.5h1.5a.75.75 0 0 1 0 1.5H8a5.75 5.75 0 0 1 0-11.5h10.19l-3.22-3.22a.75.75 0 0 1 0-1.06" })
+    i.createElement("path", { fill: "currentColor", d: "M9.03 5.03a.75.75 0 1 0-1.06-1.06l-4.5 4.5a.75.75 0 0 0 0 1.06l4.5 4.5a.75.75 0 1 0 1.06-1.06L5.81 9.75H16a4.25 4.25 0 0 1 0 8.5h-1.5a.75.75 0 0 0 0 1.5H16a5.75 5.75 0 0 0 0-11.5H5.81z" })
   );
-}), h = ({ label: t, onClick: o, as: r }) => /* @__PURE__ */ a(m, { size: "sm", id: "back", icon: p, title: t, onClick: o, as: r });
+}), v = ({ label: t, onClick: l, as: r }) => /* @__PURE__ */ a(m, { size: "sm", id: "back", icon: p, title: t, onClick: l, as: r });
 export {
-  h as BackButton
+  v as BackButton
 };

package/dist/components/GlobalMenu/GlobalMenuButton.js

@@ -1,40 +1,40 @@
 import { jsxs as r, jsx as o } from "react/jsx-runtime";
-import { c as f } from "../../index-L8X2o7IH.js";
+import { c as _ } from "../../index-L8X2o7IH.js";
 import "react";
-import { Badge as _ } from "../Badge/Badge.js";
-import { ButtonBase as d } from "../Button/ButtonBase.js";
-import { ButtonLabel as I } from "../Button/ButtonLabel.js";
+import { Badge as d } from "../Badge/Badge.js";
+import { ButtonBase as I } from "../Button/ButtonBase.js";
+import { ButtonLabel as f } from "../Button/ButtonLabel.js";
 import { ButtonIcon as p } from "../Button/ButtonIcon.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import { S as x } from "../../XMark-tKk6aExO.js";
+import { S as v } from "../../XMark-tKk6aExO.js";
 import { S as N } from "../../PadlockLocked-XL1IB5Ae.js";
-import '../../assets/GlobalMenuButton.css';const b = "_button_af7mx_1", h = "_loginIcon_af7mx_19", B = "_closeIcon_af7mx_20", u = "_avatar_af7mx_21", v = "_badge_af7mx_37", a = {
+import '../../assets/GlobalMenuButton.css';const b = "_button_234vz_1", h = "_loginIcon_234vz_19", B = "_closeIcon_234vz_20", z = "_avatar_234vz_21", u = "_badge_234vz_37", a = {
   button: b,
   loginIcon: h,
   closeIcon: B,
-  avatar: u,
-  badge: v
-}, z = ({
+  avatar: z,
+  badge: u
+}, w = ({
   className: t,
-  as: m = "button",
-  color: c = "accent",
-  variant: i = "solid",
+  as: c = "button",
+  color: i = "accent",
+  variant: e = "solid",
   currentAccount: s,
   expanded: g,
-  label: e = "Menu",
+  label: l = "Menu",
   badge: n,
-  ...l
-}) => g ? /* @__PURE__ */ r(d, { ...l, as: m, variant: i, color: c, className: f(a.button, t), children: [
-  /* @__PURE__ */ o(I, { children: e }),
-  /* @__PURE__ */ o(p, { className: a.closeIcon, icon: /* @__PURE__ */ o(x, { className: a.icon, "aria-label": "Close Icon" }) }),
-  n && /* @__PURE__ */ o(_, { ...n, className: a.badge })
-] }) : s ? /* @__PURE__ */ r(d, { ...l, as: m, variant: i, color: c, className: f(a.button, t), children: [
-  /* @__PURE__ */ o(I, { children: e }),
+  ...m
+}) => g ? /* @__PURE__ */ r(I, { ...m, as: c, variant: e, color: i, className: _(a.button, t), children: [
+  /* @__PURE__ */ o(f, { children: l }),
+  /* @__PURE__ */ o(p, { className: a.closeIcon, icon: /* @__PURE__ */ o(v, { className: a.icon, "aria-label": "Close Icon" }) }),
+  n && /* @__PURE__ */ o(d, { ...n, className: a.badge })
+] }) : s ? /* @__PURE__ */ r(I, { ...m, as: c, variant: e, color: i, className: _(a.button, t), children: [
+  /* @__PURE__ */ o(f, { children: l }),
   /* @__PURE__ */ o(p, { className: a.avatar, icon: s == null ? void 0 : s.icon }),
-  n && /* @__PURE__ */ o(_, { ...n, className: a.badge })
-] }) : /* @__PURE__ */ r(d, { ...l, as: m, variant: i, color: c, className: f(a.button, t), children: [
-  /* @__PURE__ */ o(I, { children: e }),
+  n && /* @__PURE__ */ o(d, { ...n, className: a.badge })
+] }) : /* @__PURE__ */ r(I, { ...m, as: c, variant: e, color: i, className: _(a.button, t), children: [
+  /* @__PURE__ */ o(f, { children: l }),
   /* @__PURE__ */ o(
     p,
     {
@@ -42,8 +42,8 @@ import '../../assets/GlobalMenuButton.css';const b = "_button_af7mx_1", h = "_lo
       icon: /* @__PURE__ */ o(N, { className: a.icon, "aria-label": "Login Icon" })
     }
   ),
-  n && /* @__PURE__ */ o(_, { ...n, className: a.badge })
+  n && /* @__PURE__ */ o(d, { ...n, className: a.badge })
 ] });
 export {
-  z as GlobalMenuButton
+  w as GlobalMenuButton
 };

package/dist/components/Icon/Icon.js

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

package/dist/components/Menu/MenuOption.js

@@ -3,49 +3,49 @@ import "../../index-L8X2o7IH.js";
 import "react";
 import { Badge as p } from "../Badge/Badge.js";
 import "../RootProvider/RootProvider.js";
-import { MenuItem as _ } from "./MenuItem.js";
+import { MenuItem as u } from "./MenuItem.js";
 import "../Snackbar/useSnackbar.js";
-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,
+import { S as x } from "../../Checkmark-Byz_C9x4.js";
+import '../../assets/MenuOption.css';const y = "_label_16xuy_1", k = "_title_16xuy_13", v = "_radio_16xuy_19", I = "_checkbox_16xuy_20", M = "_icon_16xuy_53", a = {
+  label: y,
   title: k,
-  radio: z,
-  checkbox: v,
-  icon: I
-}, D = ({
+  radio: v,
+  checkbox: I,
+  icon: M
+}, F = ({
   size: o = "md",
-  type: f,
-  name: M,
+  type: _,
+  name: j,
   active: n,
-  value: j,
+  value: S,
   label: c,
-  title: u,
-  description: x,
-  icon: b,
+  title: h,
+  description: b,
+  icon: N,
   badge: s,
   checked: t = !1,
   disabled: r,
-  onMouseEnter: S,
+  onMouseEnter: w,
   onClick: i,
   role: l,
   ...m
 }) => {
-  const N = () => {
-    switch (f) {
+  const f = () => {
+    switch (_) {
       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.checkbox, "data-checked": t, children: /* @__PURE__ */ e(x, { 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.radio, "data-checked": t, children: /* @__PURE__ */ e(x, { className: a.icon, "aria-hidden": !0 }) }),
           /* @__PURE__ */ e("span", { className: a.title, children: c })
         ] });
     }
   };
   return c ? /* @__PURE__ */ e(
-    _,
+    u,
     {
       disabled: r,
       selected: t,
@@ -55,12 +55,12 @@ import '../../assets/MenuOption.css';const w = "_label_zw85f_1", k = "_title_zw8
       tabIndex: -1,
       onClick: i,
       role: l,
-      label: /* @__PURE__ */ e(N, {}),
+      label: /* @__PURE__ */ e(f, {}),
       controls: s && /* @__PURE__ */ e(p, { ...s }),
       ...m
     }
   ) : /* @__PURE__ */ e(
-    _,
+    u,
     {
       disabled: r,
       selected: t,
@@ -70,14 +70,14 @@ import '../../assets/MenuOption.css';const w = "_label_zw85f_1", k = "_title_zw8
       tabIndex: -1,
       onClick: i,
       role: l,
-      icon: b,
-      title: u,
-      description: x,
+      icon: N,
+      title: h,
+      description: b,
       controls: s && /* @__PURE__ */ e(p, { ...s }),
       ...m
     }
   );
 };
 export {
-  D as MenuOption
+  F as MenuOption
 };

package/dist/components/Settings/SettingsList.js

@@ -1,38 +1,37 @@
-import { jsx as t, jsxs as m } from "react/jsx-runtime";
-import { Fragment as s } from "react";
+import { jsx as t, jsxs as o } from "react/jsx-runtime";
+import { Fragment as s, createElement as f } from "react";
 import "../../index-L8X2o7IH.js";
-import { Heading as x } from "../Typography/Heading.js";
+import { useMenu as h } from "../../hooks/useMenu.js";
+import { Heading as g } from "../Typography/Heading.js";
 import "../RootProvider/RootProvider.js";
-import { Divider as f } from "../Divider/Divider.js";
-import { List as h } from "../List/List.js";
+import { Divider as y } from "../Divider/Divider.js";
+import { List as S } from "../List/List.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as I } from "../Page/Flex.js";
-import { SettingsSection as a } from "./SettingsSection.js";
-import { SettingsItem as p } from "./SettingsItem.js";
-const O = ({ items: r, groups: d }) => {
-  var c;
-  if (d) {
-    const e = (c = Object.keys(d).map((i) => {
-      const n = r == null ? void 0 : r.filter((o) => o.groupId === i && !o.hidden), { title: l } = d[i] || {};
-      return {
-        groupId: i,
-        title: l,
-        items: n
-      };
-    })) == null ? void 0 : c.filter((i) => i.items.length > 0);
-    return /* @__PURE__ */ t(I, { as: "div", spacing: "page", direction: "col", children: e.map((i) => /* @__PURE__ */ m(s, { children: [
-      (i == null ? void 0 : i.title) && /* @__PURE__ */ t(x, { size: "lg", children: i == null ? void 0 : i.title }),
-      /* @__PURE__ */ t(a, { children: /* @__PURE__ */ t(h, { size: "sm", children: i.items.map((n, l) => /* @__PURE__ */ m(s, { children: [
-        l > 0 && /* @__PURE__ */ t(f, {}),
-        /* @__PURE__ */ t(p, { ...n })
-      ] }, n.id)) }) })
-    ] }, i.groupId)) });
-  }
-  return /* @__PURE__ */ t(a, { children: /* @__PURE__ */ t(h, { size: "sm", children: r.filter((e) => !(e != null && e.hidden)).map((e, i) => /* @__PURE__ */ m(s, { children: [
-    i > 0 && /* @__PURE__ */ t(f, {}),
-    /* @__PURE__ */ t(p, { ...e })
-  ] }, e.id)) }) });
+import { Flex as v } from "../Page/Flex.js";
+import { SettingsSection as j } from "./SettingsSection.js";
+import { SettingsItem as k } from "./SettingsItem.js";
+const q = ({ items: n, groups: p = {}, sortGroupBy: c }) => {
+  const { menu: r } = h({
+    items: n,
+    groups: p,
+    groupByKey: "groupId",
+    keyboardEvents: !1,
+    sortGroupBy: c
+  });
+  return /* @__PURE__ */ t(v, { as: "div", spacing: "page", direction: "col", children: r == null ? void 0 : r.map((i, l) => {
+    const e = i.props || {};
+    return /* @__PURE__ */ o(s, { children: [
+      (e == null ? void 0 : e.title) && /* @__PURE__ */ t(g, { size: "lg", children: e.title }),
+      /* @__PURE__ */ t(j, { children: /* @__PURE__ */ t(S, { size: "sm", children: i == null ? void 0 : i.items.map((a, m) => {
+        const d = a.props || {};
+        return /* @__PURE__ */ o(s, { children: [
+          m > 0 && /* @__PURE__ */ t(y, {}),
+          /* @__PURE__ */ f(k, { ...d, key: "settings-list-item" + m })
+        ] }, m);
+      }) }) })
+    ] }, l);
+  }) });
 };
 export {
-  O as SettingsList
+  q as SettingsList
 };

package/dist/types/lib/components/Account/AccountList.d.ts

@@ -6,7 +6,8 @@ export interface AccountListGroupProps {
 export interface AccountListProps {
     items: AccountListItemProps[];
     groups?: Record<string, AccountListGroupProps>;
+    sortGroupBy?: (a: [string, AccountListItemProps[]], b: [string, AccountListItemProps[]]) => number;
     emptyTitle?: string;
     emptyDescription?: string;
 }
-export declare const AccountList: ({ items, groups, emptyTitle, emptyDescription, }: AccountListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccountList: ({ items, groups, sortGroupBy, emptyTitle, emptyDescription, }: AccountListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Account/AccountList.stories.d.ts

@@ -3,13 +3,14 @@ import { AccountListItemProps, AccountListProps } from '..';
 import { UseAccountsProps } from '../../../examples';
 declare const meta: {
     title: string;
-    component: ({ items, groups, emptyTitle, emptyDescription, }: AccountListProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ items, groups, sortGroupBy, emptyTitle, emptyDescription, }: AccountListProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: AccountListProps;
 };
 export default meta;
 export declare const Default: ({ includeGroups }: UseAccountsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Loading: () => import("react/jsx-runtime").JSX.Element;
 interface ControlledProps {
     includeGroups?: boolean;
     contextMenu?: boolean;

package/dist/types/lib/components/Account/AccountListItem.d.ts

@@ -16,4 +16,4 @@ export interface AccountListItemProps extends ListItemProps, AccountListItemCont
     contextMenu?: ContextMenuProps;
     label?: string;
 }
-export declare const AccountListItem: ({ id, type, size, expanded, icon, title, description, isCurrentEndUser, isDeleted, badge, favourite, favouriteLabel, onToggleFavourite, contextMenu, children, interactive, ...item }: AccountListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccountListItem: ({ id, type, size, expanded, icon, title, description, isCurrentEndUser, isDeleted, badge, favourite, favouriteLabel, onToggleFavourite, contextMenu, children, interactive, loading, ...item }: AccountListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Account/AccountListItem.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react-vite';
 import { AccountListItemProps } from '..';
 declare const meta: {
     title: string;
-    component: ({ id, type, size, expanded, icon, title, description, isCurrentEndUser, isDeleted, badge, favourite, favouriteLabel, onToggleFavourite, contextMenu, children, interactive, ...item }: AccountListItemProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ id, type, size, expanded, icon, title, description, isCurrentEndUser, isDeleted, badge, favourite, favouriteLabel, onToggleFavourite, contextMenu, children, interactive, loading, ...item }: AccountListItemProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {

package/dist/types/lib/components/Settings/SettingsList.d.ts

@@ -5,5 +5,6 @@ export interface SettingsGroupProps {
 export interface SettingsListProps {
     items: SettingsItemProps[];
     groups?: Record<string, SettingsGroupProps>;
+    sortGroupBy?: (a: [string, SettingsItemProps[]], b: [string, SettingsItemProps[]]) => number;
 }
-export declare const SettingsList: ({ items, groups }: SettingsListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SettingsList: ({ items, groups, sortGroupBy }: SettingsListProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -30,7 +30,7 @@ interface LocaleSettingsModal extends SettingsModalProps {
     value?: string;
 }
 export declare const LocaleSettingsModal: ({ open, onClose, value, onChange, }: LocaleSettingsModal) => import("react/jsx-runtime").JSX.Element;
-export declare const SearchSettings: ({ query, groups }: UseSettingsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AllSettings: ({ query, groups, includeGroups, excludeGroups, }: UseSettingsProps) => import("react/jsx-runtime").JSX.Element;
 export declare const AlertSettings: () => 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.41.0",
+  "version": "0.41.2",
   "main": "dist/index.js",
   "files": [
     "dist/",