@altinn/altinn-components 0.61.2 → 0.61.3

package/dist/assets/ItemLink.css

@@ -1 +1 @@
-._link_eet0n_1{position:static;padding:0;border:0;margin:0;background-color:transparent;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;text-align:left;appearance:none;-webkit-user-select:none;user-select:none}._link_eet0n_1[aria-disabled=true]{pointer-events:none}._link_eet0n_1[data-interactive=true]{cursor:pointer}._link_eet0n_1:focus-visible{outline:none}._linkFocus_eet0n_26{position:absolute;inset:0}._link_eet0n_1:focus-visible ._linkFocus_eet0n_26{box-shadow:var(--_ds--focus, var(--dsc-focus-boxShadow));outline:var(--_ds--focus, var(--dsc-focus-outline));outline-offset:var(--_ds--focus, var(--ds-border-width-focus))}._link_eet0n_1:focus-visible ._linkFocus_eet0n_26 *{--_ds--focus: }
+._link_1pvv7_1{position:static;padding:0;border:0;margin:0;background-color:transparent;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;text-align:left;appearance:none;-webkit-user-select:none;user-select:none}._link_1pvv7_1[aria-disabled=true]{pointer-events:none}._link_1pvv7_1[data-interactive=true]{cursor:pointer}._link_1pvv7_1[data-disabled=true]{opacity:.5}._link_1pvv7_1:focus-visible{outline:none}._linkFocus_1pvv7_30{position:absolute;inset:0}._link_1pvv7_1:focus-visible ._linkFocus_1pvv7_30{box-shadow:var(--_ds--focus, var(--dsc-focus-boxShadow));outline:var(--_ds--focus, var(--dsc-focus-outline));outline-offset:var(--_ds--focus, var(--ds-border-width-focus))}._link_1pvv7_1:focus-visible ._linkFocus_1pvv7_30 *{--_ds--focus: }

package/dist/assets/LayoutBase.css

@@ -1 +1 @@
-._base_1m3p1_1{position:relative;display:flex;flex-direction:column;min-height:100vh;background-color:var(--altinn-layout-background)}._base_1m3p1_1[data-theme=default]{--altinn-layout-background: var(--ds-color-background-default)}._base_1m3p1_1[data-theme=subtle]{--altinn-layout-background: var(--ds-color-background-tinted)}._base_1m3p1_1[data-theme=neutral]{--altinn-layout-background: var(--ds-color-neutral-background-tinted)}._base_1m3p1_1[data-theme=inbox]{--altinn-layout-background: var(--ds-color-background-tinted)}._base_1m3p1_1[data-theme=inbox][data-color=person]{--altinn-layout-background: var(--ds-color-neutral-background-tinted)}
+._base_k5ay7_1{position:relative;display:flex;flex-direction:column;min-height:100vh;background-color:var(--altinn-layout-background)}._base_k5ay7_1[data-theme=default]{--altinn-layout-background: var(--ds-color-background-default)}._base_k5ay7_1[data-theme=subtle]{--altinn-layout-background: var(--ds-color-background-tinted)}._base_k5ay7_1[data-theme=neutral]{--altinn-layout-background: var(--ds-color-neutral-background-tinted)}._base_k5ay7_1[data-theme=inbox]{--altinn-layout-background: var(--ds-color-background-tinted)}._base_k5ay7_1[data-theme=inbox][data-color=person],._base_k5ay7_1[data-theme=settings]{--altinn-layout-background: var(--ds-color-neutral-background-tinted)}

package/dist/assets/SettingsItemBase.css

@@ -1 +1 @@
-._item_1xpqe_1{position:relative;display:flex;align-items:center;gap:.5rem;padding:.25rem .5rem;margin:0 -.5rem;--dsc-item-background--hover: var(--ds-color-surface-tinted)}._item_1xpqe_1:has(a):hover,._item_1xpqe_1:has(button):hover{background-color:var(--dsc-item-background--hover)}._item_1xpqe_1+[aria-hidden]{margin-block:0}._item_1xpqe_1+._item_1xpqe_1{margin-top:.5em}._media_1xpqe_24{pointer-events:none;position:relative;flex-shrink:0;font-size:2em;display:flex;align-items:center;justify-content:center}._media_1xpqe_24 svg{font-size:1.5rem}._link_1xpqe_38{font-size:1rem;flex-grow:1;display:flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit}._linkIcon_1xpqe_48{font-size:1.5rem;width:1em;height:1em}._label_1xpqe_54{flex-grow:1;min-height:2.5rem;display:flex;flex-direction:column;justify-content:center}._label_1xpqe_54 mark{background-color:transparent;text-decoration:underline}._controls_1xpqe_67{flex-grow:0}
+._listItem_1p24v_1{padding-top:.375rem;padding-bottom:.375rem}._listItem_1p24v_1+._listItem_1p24v_1{border-top:1px solid var(--ds-color-border-subtle)}._listItem_1p24v_1[data-collapsible=true][data-expanded=true]{margin:0 -1em;padding:1em;background-color:var(--ds-color-background-default);border-radius:1rem;border:1px solid var(--ds-color-border-default);box-shadow:var(--ds-shadow-sm);display:flex;flex-direction:column;gap:1rem}._summary_1p24v_23{padding:.5rem}._item_1p24v_27{position:relative;display:flex;align-items:center;gap:.5rem;padding:.25rem .5rem;--dsc-item-background--hover: var(--ds-color-surface-tinted)}._item_1p24v_27:has(>a):hover,._item_1p24v_27:has(>button):not(disabled):hover{background-color:var(--dsc-item-background--hover)}._item_1p24v_27+[aria-hidden]{margin-block:0}._media_1p24v_45{pointer-events:none;position:relative;flex-shrink:0;font-size:2em;display:flex;align-items:center;justify-content:center}._media_1p24v_45 svg{font-size:1.5rem}._link_1p24v_59{font-size:1rem;flex-grow:1;display:flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit}._linkIcon_1p24v_69{font-size:1.5rem;width:1em;height:1em}._label_1p24v_75{flex-grow:1;min-height:2.5rem;display:flex;flex-direction:column;justify-content:center}._label_1p24v_75 mark{background-color:transparent;text-decoration:underline}._controls_1p24v_88{position:relative;flex-grow:0}._linkIcon_1p24v_69{margin-right:.25rem}

package/dist/assets/SettingsSection.css

@@ -1 +1 @@
-._section_13ero_1{padding:.5rem 1rem;border-radius:.5rem}
+._section_1ccux_1{padding:1rem .5rem;border-radius:1rem}

package/dist/assets/settlingsList.css

@@ -0,0 +1 @@
+._section_ncfus_1{display:flex;flex-direction:column}._section_ncfus_1[data-variant=default]{row-gap:1.5rem}._section_ncfus_1[data-variant=menu]{row-gap:.5rem}._group_ncfus_14{background-color:var(--ds-color-surface-default);border-radius:1rem;padding:.375rem .5rem;box-shadow:var(--ds-shadow-xs)}._list_ncfus_21{display:flex;flex-direction:column;list-style:none;padding:0;margin:0}

package/dist/components/Bookmarks/BookmarkSettingsList.js

@@ -1,55 +1,49 @@
-import { jsx as r, jsxs as s } from "react/jsx-runtime";
-import { Fragment as n, createElement as f } from "react";
+import { jsx as t, jsxs as u } from "react/jsx-runtime";
+import { Fragment as h, createElement as f } from "react";
 import "../../index-p1eeF8LQ.js";
-import { useMenu as u } from "../../hooks/useMenu.js";
-import { H as k } from "../../ToolbarSearch-56Sm2j7P.js";
+import { useMenu as k } from "../../hooks/useMenu.js";
+import { H as y } from "../../ToolbarSearch-56Sm2j7P.js";
 import "../Typography/Link.js";
 import "../Button/Button.js";
-import { BookmarkSettingsItem as y } from "./BookmarkSettingsItem.js";
+import { BookmarkSettingsItem as v } from "./BookmarkSettingsItem.js";
 import "react-dom";
-import { Divider as S } from "../Divider/Divider.js";
-import { List as v } from "../List/List.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as B } from "../Page/Flex.js";
-import { SettingsSection as j } from "../Settings/SettingsSection.js";
-const w = ({
-  loading: p,
-  highlightWords: l,
-  items: t,
-  groups: g = {},
+import { s as o } from "../../settlingsList.module-So3_AYgj.js";
+const z = ({
+  loading: m,
+  highlightWords: n,
+  items: r,
+  groups: l = {},
   sortGroupBy: a
 }) => {
-  if (!t || t.length < 1)
+  if (!r || r.length < 1)
     return null;
-  const { menu: c } = u({
-    items: t,
-    groups: g,
+  const { menu: p } = k({
+    items: r,
+    groups: l,
     groupByKey: "groupId",
     keyboardEvents: !1,
     sortGroupBy: a
   });
-  return /* @__PURE__ */ r(B, { as: "div", spacing: "page", direction: "col", children: c?.map((e, d) => {
-    const m = e.props || {};
-    return /* @__PURE__ */ s(n, { children: [
-      m?.title && /* @__PURE__ */ r(k, { size: "lg", children: m.title }),
-      /* @__PURE__ */ r(j, { children: /* @__PURE__ */ r(v, { size: "sm", children: e?.items.map((h, i) => {
-        const o = h.props || {};
-        return /* @__PURE__ */ s(n, { children: [
-          i > 0 && /* @__PURE__ */ r(S, { as: "li" }),
-          /* @__PURE__ */ f(
-            y,
-            {
-              ...o,
-              key: "settings-list-item" + i,
-              highlightWords: l || o?.highlightWords,
-              loading: p || o?.loading
-            }
-          )
-        ] }, i);
+  return /* @__PURE__ */ t("div", { className: o.section, "data-variant": "default", children: p?.map((i, g) => {
+    const s = i.props || {};
+    return /* @__PURE__ */ u(h, { children: [
+      s?.title && /* @__PURE__ */ t(y, { size: "lg", children: s.title }),
+      /* @__PURE__ */ t("section", { className: o.group, children: /* @__PURE__ */ t("ul", { className: o.list, children: i?.items.map((c, d) => {
+        const e = c.props || {};
+        return /* @__PURE__ */ f(
+          v,
+          {
+            ...e,
+            key: "settings-list-item" + d,
+            highlightWords: n || e?.highlightWords,
+            loading: m || e?.loading
+          }
+        );
       }) }) })
-    ] }, d);
+    ] }, g);
   }) });
 };
 export {
-  w as BookmarkSettingsList
+  z as BookmarkSettingsList
 };

package/dist/components/Item/ItemLink.js

@@ -1,49 +1,49 @@
-import { jsx as k, jsxs as f } from "react/jsx-runtime";
+import { jsx as k, jsxs as j } from "react/jsx-runtime";
 import { c as u } from "../../index-p1eeF8LQ.js";
-import '../../assets/ItemLink.css';const j = "_link_eet0n_1", A = "_linkFocus_eet0n_26", e = {
-  link: j,
-  linkFocus: A
+import '../../assets/ItemLink.css';const A = "_link_1pvv7_1", I = "_linkFocus_1pvv7_30", a = {
+  link: A,
+  linkFocus: I
 }, h = ({
-  as: m,
+  as: d,
   loading: t,
-  disabled: n,
-  selected: v,
-  href: s,
-  onClick: a,
+  disabled: s,
+  selected: m,
+  href: n,
+  onClick: e,
   onKeyPress: p,
-  className: o,
+  className: r,
   active: _,
-  ariaLabel: r,
+  ariaLabel: o,
   children: c,
   tabIndex: x = 0,
   expanded: l,
   collapsible: y,
   ariaControlsId: F
 }) => {
-  const i = m || "div";
-  if (i === "div")
-    return /* @__PURE__ */ k("div", { className: u(e.link, o), children: c });
-  const b = !t && s || i !== "a" && r;
-  return /* @__PURE__ */ f(
+  const i = d || "div";
+  if (i === "div" || s || t)
+    return /* @__PURE__ */ k("div", { className: u(a.link, r), "data-disabled": s || t, children: c });
+  const f = !t && n || i !== "a" && o;
+  return /* @__PURE__ */ j(
     i,
     {
-      className: u(e.link, o),
-      href: s,
-      onKeyPress: (d) => {
-        d.key === "Enter" && a?.(), p?.(d);
+      className: u(a.link, r),
+      href: n,
+      onKeyPress: (v) => {
+        v.key === "Enter" && e?.(), p?.(v);
       },
-      onClick: a,
+      onClick: e,
       "data-interactive": "true",
-      "aria-disabled": t || n,
-      "aria-selected": v,
+      "aria-disabled": t || s,
+      "aria-selected": m,
       "aria-expanded": y ? l : void 0,
       "aria-controls": l ? F : void 0,
-      ...b && { "aria-label": r },
+      ...f && { "aria-label": o },
       "data-active": _,
-      tabIndex: t || n ? -1 : x,
+      tabIndex: t || s ? -1 : x,
       children: [
         c,
-        /* @__PURE__ */ k("div", { className: e.linkFocus, "aria-hidden": "true" })
+        /* @__PURE__ */ k("div", { className: a.linkFocus, "aria-hidden": "true" })
       ]
     }
   );

package/dist/components/Layout/LayoutBase.js

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
-import '../../assets/LayoutBase.css';const r = "_base_1m3p1_1", c = {
+import '../../assets/LayoutBase.css';const r = "_base_k5ay7_1", c = {
   base: r
-}, m = ({ currentId: a, color: s, theme: t, children: e }) => /* @__PURE__ */ o("div", { className: c.base, "data-color": s, "data-theme": t, "data-current-id": a, children: e });
+}, n = ({ currentId: a, color: s, theme: t, children: e }) => /* @__PURE__ */ o("div", { className: c.base, "data-color": s, "data-theme": t, "data-current-id": a, children: e });
 export {
-  m as LayoutBase
+  n as LayoutBase
 };

package/dist/components/Settings/SettingsItem.js

@@ -1,38 +1,40 @@
 import { jsx as t } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
-import { useState as g } from "react";
-import { Input as b } from "../Forms/Input.js";
+import { useState as b } from "react";
+import { Input as P } from "../Forms/Input.js";
 import "../../ToolbarSearch-56Sm2j7P.js";
 import "../Typography/Link.js";
 import "../Button/Button.js";
 import "react-dom";
 import "../Snackbar/useSnackbar.js";
-import { SettingsItemBase as n } from "./SettingsItemBase.js";
-import { SettingsModal as x } from "./SettingsModal.js";
-const M = ({
-  loading: c,
-  variant: m = "default",
-  id: d = "settings",
-  name: h,
+import { SettingsItemBase as r } from "./SettingsItemBase.js";
+import { SettingsModal as w } from "./SettingsModal.js";
+const O = ({
+  loading: d,
+  variant: h = "default",
+  id: u = "settings",
+  name: p,
   title: e,
-  value: r,
+  value: n,
   description: s,
-  checked: p,
-  onChange: u,
+  checked: f,
+  onChange: g,
   modalProps: o,
-  children: f,
+  expanded: a,
+  children: c,
   ...i
 }) => {
-  const [l, a] = g(!1);
-  if (c)
-    return /* @__PURE__ */ t(n, { icon: i?.icon, titleProps: { children: e }, loading: !0 });
-  switch (m) {
+  const [l, m] = b(!1);
+  if (d)
+    return /* @__PURE__ */ t(r, { icon: i?.icon, titleProps: { children: e }, loading: !0 });
+  switch (h) {
     case "link":
       return /* @__PURE__ */ t(
-        n,
+        r,
         {
           ...i,
           titleProps: {
+            size: "md",
             children: e
           },
           descriptionProps: {
@@ -45,7 +47,7 @@ const M = ({
       );
     case "switch":
       return /* @__PURE__ */ t(
-        n,
+        r,
         {
           ...i,
           as: "div",
@@ -59,27 +61,48 @@ const M = ({
             children: s
           },
           controls: /* @__PURE__ */ t(
-            b,
+            P,
             {
               type: "checkbox",
               role: "switch",
-              "aria-labelledby": d,
-              name: h,
-              value: r,
-              checked: p,
-              onChange: u,
+              "aria-labelledby": u,
+              name: p,
+              value: n,
+              checked: f,
+              onChange: g,
               style: { marginRight: "0.5em" }
             }
           )
         }
       );
+    case "accordion":
+      return /* @__PURE__ */ t(
+        r,
+        {
+          ...i,
+          as: "button",
+          linkIcon: !0,
+          collapsible: !0,
+          expanded: a,
+          titleProps: {
+            children: e
+          },
+          descriptionProps: {
+            size: "xs",
+            weight: "normal",
+            variant: "subtle",
+            children: s
+          },
+          children: a && /* @__PURE__ */ t("div", { children: c })
+        }
+      );
     case "modal":
       return /* @__PURE__ */ t(
-        n,
+        r,
         {
           ...i,
           titleProps: {
-            size: r ? "xs" : "sm",
+            size: n ? "xs" : "sm",
             variant: "subtle",
             weight: "normal",
             children: e
@@ -87,32 +110,32 @@ const M = ({
           descriptionProps: {
             size: "sm",
             variant: "default",
-            children: s || r
+            children: s || n
           },
           as: "button",
           linkIcon: !0,
-          onClick: () => a(!0),
+          onClick: () => m(!0),
           expanded: l,
           children: l && /* @__PURE__ */ t(
-            x,
+            w,
             {
               ...o,
               icon: o?.icon || i?.icon,
               title: o?.title || e,
               open: l,
-              onClose: () => a(!1),
-              children: f
+              onClose: () => m(!1),
+              children: c
             }
           )
         }
       );
     default:
       return /* @__PURE__ */ t(
-        n,
+        r,
         {
           ...i,
           titleProps: {
-            size: r ? "xs" : "sm",
+            size: n ? "xs" : "sm",
             variant: "subtle",
             weight: "normal",
             children: e
@@ -120,12 +143,12 @@ const M = ({
           descriptionProps: {
             size: "sm",
             variant: "default",
-            children: s || r
+            children: s || n
           }
         }
       );
   }
 };
 export {
-  M as SettingsItem
+  O as SettingsItem
 };

package/dist/components/Settings/SettingsItemBase.js

@@ -1,73 +1,84 @@
-import { jsxs as a, jsx as s } from "react/jsx-runtime";
-import { h as f, H as m, B as h, v as B } from "../../ToolbarSearch-56Sm2j7P.js";
+import { jsxs as m, jsx as a, Fragment as g } from "react/jsx-runtime";
+import { h as u, H as c, B, v as C } from "../../ToolbarSearch-56Sm2j7P.js";
 import "../../index-p1eeF8LQ.js";
 import "react";
+import { Typography as b } from "../Typography/Typography.js";
 import "../Typography/Link.js";
-import { ItemControls as b } from "../Item/ItemControls.js";
-import { ItemBase as v } from "../Item/ItemBase.js";
-import { ItemLink as R } from "../Item/ItemLink.js";
+import { ItemControls as w } from "../Item/ItemControls.js";
+import { ItemBase as R } from "../Item/ItemBase.js";
+import { ItemLink as j } from "../Item/ItemLink.js";
 import "../Button/Button.js";
 import "react-dom";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/SettingsItemBase.css';const j = "_item_1xpqe_1", w = "_media_1xpqe_24", C = "_link_1xpqe_38", H = "_linkIcon_1xpqe_48", S = "_label_1xpqe_54", g = "_controls_1xpqe_67", e = {
-  item: j,
-  media: w,
-  link: C,
-  linkIcon: H,
-  label: S,
-  controls: g
-}, O = ({
-  as: n,
-  ref: l,
-  hidden: r,
+import { S as H } from "../../ChevronUp-hn05LboH.js";
+import { S as z } from "../../ChevronDown-D_a7nb-G.js";
+import '../../assets/SettingsItemBase.css';const D = "_listItem_1p24v_1", F = "_summary_1p24v_23", L = "_item_1p24v_27", M = "_media_1p24v_45", T = "_link_1p24v_59", U = "_linkIcon_1p24v_69", q = "_label_1p24v_75", A = "_controls_1p24v_88", s = {
+  listItem: D,
+  summary: F,
+  item: L,
+  media: M,
+  link: T,
+  linkIcon: U,
+  label: q,
+  controls: A
+}, as = ({
+  as: p,
+  ref: _,
+  hidden: v,
+  disabled: e,
   loading: t,
-  color: c,
-  expanded: u,
-  icon: p,
-  label: _,
-  titleProps: d = {},
-  descriptionProps: x = {},
-  children: k,
-  highlightWords: o,
-  badge: i,
-  linkIcon: I,
-  controls: N,
-  ...q
-}) => /* @__PURE__ */ a(v, { as: "li", ref: l, className: e.item, color: c, "aria-hidden": r, "data-loading": t, children: [
-  /* @__PURE__ */ a(R, { ...q, className: e.link, as: n, children: [
-    /* @__PURE__ */ s(f, { icon: p, className: e.media }),
-    _ || /* @__PURE__ */ a("span", { className: e.label, children: [
-      /* @__PURE__ */ s(
-        m,
-        {
-          ...d,
-          as: "span",
-          highlightWords: o,
-          loading: t,
-          maxRows: 2,
-          className: e.title
-        }
-      ),
-      /* @__PURE__ */ s(
-        m,
-        {
-          ...x,
-          as: "span",
-          highlightWords: o,
-          loading: t,
-          maxRows: 2,
-          className: e.description
-        }
-      )
+  color: d,
+  collapsible: o,
+  expanded: i,
+  icon: I,
+  label: N,
+  titleProps: h = {},
+  descriptionProps: k = {},
+  summary: n,
+  children: f,
+  highlightWords: l,
+  badge: r,
+  linkIcon: x,
+  controls: y,
+  ...S
+}) => /* @__PURE__ */ m("li", { className: s.listItem, "data-collapsible": o, "data-expanded": i, children: [
+  /* @__PURE__ */ m(R, { ref: _, as: "div", className: s.item, color: d, "aria-hidden": v, "data-loading": t, children: [
+    /* @__PURE__ */ m(j, { ...S, className: s.link, disabled: e, as: p, children: [
+      /* @__PURE__ */ a(u, { icon: I, className: s.media }),
+      N || /* @__PURE__ */ m("span", { className: s.label, children: [
+        /* @__PURE__ */ a(
+          c,
+          {
+            ...h,
+            as: "span",
+            highlightWords: l,
+            loading: t,
+            maxRows: 2,
+            className: s.title
+          }
+        ),
+        /* @__PURE__ */ a(
+          c,
+          {
+            ...k,
+            as: "span",
+            highlightWords: l,
+            loading: t,
+            maxRows: 2,
+            className: s.description
+          }
+        )
+      ] })
+    ] }),
+    !e && /* @__PURE__ */ m(g, { children: [
+      /* @__PURE__ */ a(w, { className: s.controls, children: y }),
+      r && /* @__PURE__ */ a(B, { ...r }),
+      o && (i ? /* @__PURE__ */ a(H, { className: s.linkIcon }) : /* @__PURE__ */ a(z, { className: s.linkIcon })) || x && /* @__PURE__ */ a(C, { className: s.linkIcon })
     ] })
   ] }),
-  /* @__PURE__ */ a(b, { className: e.controls, children: [
-    N,
-    i && /* @__PURE__ */ s(h, { ...i }),
-    I && /* @__PURE__ */ s(B, { className: e.linkIcon })
-  ] }),
-  k
+  n && /* @__PURE__ */ a(b, { className: s.summary, size: "xs", variant: "subtle", children: n }),
+  f
 ] });
 export {
-  O as SettingsItemBase
+  as as SettingsItemBase
 };

package/dist/components/Settings/SettingsList.js

@@ -1,39 +1,42 @@
-import { jsx as r, jsxs as o } from "react/jsx-runtime";
-import { Fragment as m, createElement as d } from "react";
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import { Fragment as c, createElement as d } from "react";
 import "../../index-p1eeF8LQ.js";
-import { useMenu as f } from "../../hooks/useMenu.js";
+import { useMenu as N } from "../../hooks/useMenu.js";
 import { H as u } from "../../ToolbarSearch-56Sm2j7P.js";
 import "../Typography/Link.js";
 import "../Button/Button.js";
+import { s } from "../../settlingsList.module-So3_AYgj.js";
 import "react-dom";
-import { Divider as h } from "../Divider/Divider.js";
-import { List as y } from "../List/List.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as S } from "../Page/Flex.js";
-import { SettingsItem as v } from "./SettingsItem.js";
-import { SettingsSection as j } from "./SettingsSection.js";
-const q = ({ items: s, groups: p = {}, sortGroupBy: n }) => {
-  const { menu: c } = f({
-    items: s,
-    groups: p,
+import { SettingsItem as g } from "./SettingsItem.js";
+const w = ({ items: h, variant: i = "default", groups: f = {}, sortGroupBy: y }) => {
+  const { menu: p } = N({
+    items: h,
+    groups: f,
     groupByKey: "groupId",
     keyboardEvents: !1,
-    sortGroupBy: n
+    sortGroupBy: y
   });
-  return /* @__PURE__ */ r(S, { as: "div", spacing: "page", direction: "col", children: c?.map((i, l) => {
-    const e = i.props || {};
-    return /* @__PURE__ */ o(m, { children: [
-      e?.title && /* @__PURE__ */ r(u, { size: "lg", children: e.title }),
-      /* @__PURE__ */ r(j, { children: /* @__PURE__ */ r(y, { size: "sm", children: i?.items.map((a, t) => {
-        const g = a.props || {};
-        return /* @__PURE__ */ o(m, { children: [
-          t > 0 && /* @__PURE__ */ r(h, { as: "li" }),
-          /* @__PURE__ */ d(v, { ...g, key: "settings-list-item" + t })
-        ] }, t);
+  return i === "menu" ? /* @__PURE__ */ t("div", { className: s.section, "data-variant": i, children: p?.map((e, o) => {
+    const r = e.props || {};
+    return /* @__PURE__ */ a(c, { children: [
+      r?.title && /* @__PURE__ */ t(u, { size: "xs", weight: "normal", variant: "subtle", children: r.title }),
+      /* @__PURE__ */ t("ul", { className: s.list, children: e?.items.map((m, n) => {
+        const l = m.props || {};
+        return /* @__PURE__ */ d(g, { ...l, key: "settings-list-item" + n });
+      }) })
+    ] }, o);
+  }) }) : /* @__PURE__ */ t("div", { className: s.section, "data-variant": i, children: p?.map((e, o) => {
+    const r = e.props || {};
+    return /* @__PURE__ */ a(c, { children: [
+      r?.title && /* @__PURE__ */ t(u, { size: "lg", children: r.title }),
+      /* @__PURE__ */ t("section", { className: s.group, children: /* @__PURE__ */ t("ul", { className: s.list, children: e?.items.map((m, n) => {
+        const l = m.props || {};
+        return /* @__PURE__ */ d(g, { ...l, key: "settings-list-item" + n });
       }) }) })
-    ] }, l);
+    ] }, o);
   }) });
 };
 export {
-  q as SettingsList
+  w as SettingsList
 };

package/dist/components/Settings/SettingsSection.js

@@ -6,17 +6,17 @@ import "../Typography/Link.js";
 import "../Button/Button.js";
 import "react-dom";
 import "../Snackbar/useSnackbar.js";
-import { Section as n } from "../Page/Section.js";
-import '../../assets/SettingsSection.css';const c = "_section_13ero_1", p = {
-  section: c
+import { Section as e } from "../Page/Section.js";
+import '../../assets/SettingsSection.css';const n = "_section_1ccux_1", p = {
+  section: n
 }, j = ({
   size: t = "sm",
   theme: o = "default",
   shadow: i = "xs",
   as: s,
   color: r,
-  children: e
-}) => /* @__PURE__ */ m(n, { as: s, size: t, color: r, theme: o, shadow: i, className: p.section, spacing: 2, children: e });
+  children: c
+}) => /* @__PURE__ */ m(e, { as: s, size: t, color: r, theme: o, shadow: i, className: p.section, spacing: 2, children: c });
 export {
   j as SettingsSection
 };

package/dist/settlingsList.module-So3_AYgj.js

@@ -0,0 +1,8 @@
+import './assets/settlingsList.css';const s = "_section_ncfus_1", t = "_group_ncfus_14", o = "_list_ncfus_21", c = {
+  section: s,
+  group: t,
+  list: o
+};
+export {
+  c as s
+};

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

@@ -1,5 +1,5 @@
 import { ChangeEvent } from 'react';
-import { AccountListItemProps, AccountListProps } from '..';
+import { AccountListItemProps, AccountListProps, LayoutProps } from '..';
 import { UseAccountsProps } from '../../../examples';
 declare const meta: {
     title: string;
@@ -13,18 +13,26 @@ declare const meta: {
 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 {
+interface ControlledPageQuery {
+    q?: string;
+}
+interface ControlledPageProps {
+    layout?: LayoutProps;
+    title?: string;
     includeGroups?: boolean;
     contextMenu?: boolean;
     collapsible?: boolean;
     color?: 'neutral';
     variant?: 'subtle' | 'tinted' | 'default';
     virtualized?: boolean;
+    query?: ControlledPageQuery;
 }
-export declare const Controlled: ({ includeGroups, collapsible, contextMenu, variant, color, virtualized, }: ControlledProps) => import("react/jsx-runtime").JSX.Element;
-export declare const ControlledTinted: () => import("react/jsx-runtime").JSX.Element;
-export declare const Collapsible: () => import("react/jsx-runtime").JSX.Element;
-export declare const CollapsibleWithGroups: () => import("react/jsx-runtime").JSX.Element;
+export declare const ControlledPage: ({ layout, title, includeGroups, collapsible, contextMenu, variant, virtualized, query, }: ControlledPageProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CollapsiblePage: () => import("react/jsx-runtime").JSX.Element;
+export declare const AccountSelector: () => import("react/jsx-runtime").JSX.Element;
+export declare const AccountSettings: () => import("react/jsx-runtime").JSX.Element;
+export declare const AccountUserSettings: () => import("react/jsx-runtime").JSX.Element;
+export declare const AccountCompanySettings: () => import("react/jsx-runtime").JSX.Element;
 interface AccountDetailsProps extends AccountListItemProps {
     smsAlerts?: boolean;
     emailAlerts?: boolean;

package/dist/types/lib/components/ActivityLog/ActivityLog.stories.d.ts

@@ -1,11 +1,14 @@
 declare const meta: {
     title: string;
     tags: string[];
-    parameters: {};
+    parameters: {
+        layout: string;
+    };
     args: {};
 };
 export default meta;
 export declare const Default: () => import("react/jsx-runtime").JSX.Element;
 export declare const Controlled: () => import("react/jsx-runtime").JSX.Element;
+export declare const ProfileActivityLog: () => import("react/jsx-runtime").JSX.Element;
 export declare const ActivityLogModal: () => import("react/jsx-runtime").JSX.Element;
 export declare const ActivityLogModalAdvanced: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Item/ItemBase.d.ts

@@ -2,11 +2,11 @@ import { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
 import { Color } from '..';
 export type ItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type ItemColor = Color;
-export type ItemBaseProps<T extends ElementType = 'li'> = {
+export type ItemBaseProps = {
     /** The element type to render as. */
-    as?: T;
+    as?: ElementType;
     /** Optional ref */
-    ref?: React.Ref<T>;
+    ref?: React.Ref<ElementType>;
     /** The tab index of the list item. */
     tabIndex?: number;
     /** The size of item. */
@@ -25,5 +25,5 @@ export type ItemBaseProps<T extends ElementType = 'li'> = {
     children?: ReactNode;
     /** Id of list item. */
     id?: string;
-} & Omit<ComponentPropsWithRef<T>, 'color' | 'size'>;
+} & Omit<ComponentPropsWithRef<ElementType>, 'color' | 'size'>;
 export declare const ItemBase: ({ id, ref, as, size, color, variant, hidden, disabled, className, children, ...rest }: ItemBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Layout/LayoutBase.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 export type LayoutColor = 'neutral' | 'company' | 'person';
-export type LayoutTheme = 'default' | 'subtle' | 'neutral' | 'inbox';
+export type LayoutTheme = 'default' | 'subtle' | 'neutral' | 'inbox' | 'settings';
 export interface LayoutBaseProps {
     color?: LayoutColor;
     theme?: LayoutTheme /** TODO: Should be renamed to variant */;

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

@@ -1,6 +1,6 @@
 import { InputProps, SettingsItemBaseProps, SettingsModalProps } from '..';
 import { ReactNode } from 'react';
-export type SettingsItemVariant = 'default' | 'link' | 'modal' | 'switch';
+export type SettingsItemVariant = 'default' | 'link' | 'modal' | 'accordion' | 'switch';
 export interface SettingsItemModalProps {
     icon?: SettingsModalProps['icon'];
     title?: SettingsModalProps['title'];
@@ -19,4 +19,4 @@ export interface SettingsItemProps extends SettingsItemBaseProps {
     modalProps?: SettingsItemModalProps;
     children?: ReactNode;
 }
-export declare const SettingsItem: ({ loading, variant, id, name, title, value, description, checked, onChange, modalProps, children, ...props }: SettingsItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SettingsItem: ({ loading, variant, id, name, title, value, description, checked, onChange, modalProps, expanded, children, ...props }: SettingsItemProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,65 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ loading, variant, id, name, title, value, description, checked, onChange, modalProps, expanded, children, ...props }: import('./SettingsItem').SettingsItemProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {
+        id: string;
+        variant: "default";
+        ariaLabel: string;
+        title: string;
+    };
+    decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react-vite').ReactRenderer, {
+        variant?: import('./SettingsItem').SettingsItemVariant | undefined;
+        id: string;
+        title?: string | undefined;
+        value?: string | undefined;
+        description?: string | undefined;
+        name?: string | undefined;
+        checked?: boolean | undefined;
+        onChange?: import('react').ChangeEventHandler<HTMLInputElement> | undefined;
+        modalProps?: import('./SettingsItem').SettingsItemModalProps | undefined;
+        children?: import('react').ReactNode;
+        groupId?: string | undefined;
+        hidden?: boolean | undefined;
+        disabled?: boolean | undefined;
+        ref?: import('react').Ref<import('react').ElementType> | undefined;
+        color?: import('..').Color | undefined;
+        icon?: import('react').ReactNode | import('..').SvgElement | import('..').AvatarProps | import('..').AvatarGroupProps;
+        label?: import('react').ReactNode;
+        titleProps?: import('..').HeadingProps | undefined;
+        descriptionProps?: import('..').HeadingProps | undefined;
+        highlightWords?: string[] | undefined;
+        badge?: import('..').BadgeProps | undefined;
+        colllapsible?: boolean | undefined;
+        expanded?: boolean | undefined;
+        linkIcon?: boolean | undefined;
+        controls?: import('react').ReactNode;
+        summary?: import('react').ReactNode;
+        as?: import('react').ElementType | undefined;
+        href?: string | undefined;
+        onClick?: (() => void) | undefined;
+        onKeyPress?: import('react').KeyboardEventHandler | undefined;
+        ariaLabel?: string | undefined;
+        tabIndex?: number | undefined;
+        loading?: boolean | undefined;
+        selected?: boolean | undefined;
+        className?: string | undefined;
+        active?: boolean | undefined;
+        collapsible?: boolean | undefined;
+        ariaControlsId?: string | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Value: Story;
+export declare const Loading: Story;
+export declare const Switch: Story;
+export declare const Modal: Story;
+export declare const ModalProps: Story;
+export declare const Company: Story;
+export declare const Person: Story;
+export declare const Bookmark: () => import("react/jsx-runtime").JSX.Element;
+export declare const BookmarkContextMenu: () => import("react/jsx-runtime").JSX.Element;

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

@@ -4,6 +4,7 @@ export interface SettingsItemBaseProps extends ItemLinkProps {
     id?: string;
     groupId?: string;
     hidden?: boolean;
+    disabled?: boolean;
     ref?: ItemBaseProps['ref'];
     color?: ItemBaseProps['color'];
     icon?: ItemMediaProps['icon'];
@@ -12,8 +13,11 @@ export interface SettingsItemBaseProps extends ItemLinkProps {
     descriptionProps?: HeadingProps;
     highlightWords?: string[];
     badge?: BadgeProps;
+    colllapsible?: boolean;
+    expanded?: boolean;
     linkIcon?: boolean;
     controls?: ReactNode;
     children?: ReactNode;
+    summary?: ReactNode;
 }
-export declare const SettingsItemBase: ({ as, ref, hidden, loading, color, expanded, icon, label, titleProps, descriptionProps, children, highlightWords, badge, linkIcon, controls, ...rest }: SettingsItemBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SettingsItemBase: ({ as, ref, hidden, disabled, loading, color, collapsible, expanded, icon, label, titleProps, descriptionProps, summary, children, highlightWords, badge, linkIcon, controls, ...rest }: SettingsItemBaseProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -4,8 +4,9 @@ export interface SettingsGroupProps {
     title?: string | ReactNode;
 }
 export interface SettingsListProps {
+    variant?: 'default' | 'menu';
     items: SettingsItemProps[];
     groups?: Record<string, SettingsGroupProps>;
     sortGroupBy?: (a: [string, SettingsItemProps[]], b: [string, SettingsItemProps[]]) => number;
 }
-export declare const SettingsList: ({ items, groups, sortGroupBy }: SettingsListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SettingsList: ({ items, variant, groups, sortGroupBy }: SettingsListProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -11,6 +11,8 @@ export default meta;
 export declare const ProfileReadOnly: () => import("react/jsx-runtime").JSX.Element;
 export declare const ProfileInput: () => import("react/jsx-runtime").JSX.Element;
 export declare const ProfileSelect: () => import("react/jsx-runtime").JSX.Element;
+export declare const AccountSingleInput: () => import("react/jsx-runtime").JSX.Element;
+export declare const AccountSingleSelect: () => import("react/jsx-runtime").JSX.Element;
 export declare const AccountVerified: () => import("react/jsx-runtime").JSX.Element;
 export declare const AccountNewEmail: () => import("react/jsx-runtime").JSX.Element;
 export declare const AccountNewEmailAndSms: () => import("react/jsx-runtime").JSX.Element;

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

@@ -7,12 +7,12 @@ declare const meta: {
     args: {};
 };
 export default meta;
+export declare const ProfilePage: () => import("react/jsx-runtime").JSX.Element;
 export declare const DashboardPage: () => import("react/jsx-runtime").JSX.Element;
 export declare const AccountsPage: () => import("react/jsx-runtime").JSX.Element;
 export declare const AccountsPageVirtualized: () => import("react/jsx-runtime").JSX.Element;
 export declare const AlertsPage: () => import("react/jsx-runtime").JSX.Element;
 export declare const BookmarksPage: () => import("react/jsx-runtime").JSX.Element;
-export declare const SettingsPage: () => import("react/jsx-runtime").JSX.Element;
 export declare const ActivityLogPage: () => import("react/jsx-runtime").JSX.Element;
 export declare const UsersPage: () => import("react/jsx-runtime").JSX.Element;
 export declare const AccessPage: () => import("react/jsx-runtime").JSX.Element;

package/package.json

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