@altinn/altinn-components 0.51.4 → 0.52.0

package/dist/assets/Avatar.css

@@ -1 +1 @@
-._avatar_1en7r_1{position:relative;overflow:hidden;box-sizing:border-box}._avatar_1en7r_1[data-shape=circle]{border-radius:50%}._avatar_1en7r_1[data-shape=square]{border-radius:5%}._avatar_1en7r_1{outline:1px solid #ffffff;box-sizing:border-box}._shape_1en7r_20{display:block;font-size:1em;width:1em;height:1em}._shape_1en7r_20[data-variant=outline]{border:1px solid}._label_1en7r_31{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center;overflow:hidden;font-size:.575em}._image_1en7r_41{display:block;width:100%;height:100%}._deletedIcon_1en7r_47{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}@supports (-webkit-hyphens: none){._avatar_1en7r_1[data-size=lg] ._label_1en7r_31{font-size:1.58rem}._avatar_1en7r_1[data-size=md] ._label_1en7r_31{font-size:1.15rem}._avatar_1en7r_1[data-size=sm] ._label_1en7r_31{font-size:.85rem}}
+._avatar_bmli3_1{position:relative;overflow:hidden;box-sizing:border-box}._avatar_bmli3_1[data-shape=circle]{border-radius:50%}._avatar_bmli3_1[data-shape=square]{border-radius:5%}._avatar_bmli3_1{outline:1px solid #ffffff;box-sizing:border-box}._shape_bmli3_20{display:block;font-size:1em;width:1em;height:1em}._shape_bmli3_20[data-variant=outline]{border:1px solid}._label_bmli3_31{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center;overflow:hidden;font-size:.575em}._icon_bmli3_41{width:100%;height:100%;display:flex;justify-content:center;align-items:center}._svg_bmli3_49{width:75%;height:75%}._image_bmli3_54{display:block;width:100%;height:100%}._deletedIcon_bmli3_60{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}@supports (-webkit-hyphens: none){._avatar_bmli3_1[data-size=lg] ._label_bmli3_31{font-size:1.58rem}._avatar_bmli3_1[data-size=md] ._label_bmli3_31{font-size:1.15rem}._avatar_bmli3_1[data-size=sm] ._label_bmli3_31{font-size:.85rem}}

package/dist/components/Avatar/Avatar.js

@@ -1,62 +1,86 @@
 "use client";
-import { jsx as a, jsxs as j } from "react/jsx-runtime";
-import { c as y } from "../../index-L8X2o7IH.js";
-import { useState as A } from "react";
-import { Skeleton as E } from "../Skeleton/Skeleton.js";
-import { fromStringToColor as q } from "./color.js";
-import '../../assets/Avatar.css';const z = "_avatar_1en7r_1", B = "_shape_1en7r_20", H = "_label_1en7r_31", L = "_image_1en7r_41", M = "_deletedIcon_1en7r_47", r = {
-  avatar: z,
-  shape: B,
-  label: H,
-  image: L,
-  deletedIcon: M
-}, J = (e) => typeof e == "object" && e !== null && "name" in e, K = ({
+import { jsx as n, jsxs as u } from "react/jsx-runtime";
+import { c as H } from "../../index-L8X2o7IH.js";
+import m, { forwardRef as N, useState as A } from "react";
+import { Skeleton as k } from "../Skeleton/Skeleton.js";
+import { fromStringToColor as M } from "./color.js";
+import { u as R } from "../../useId-BVFxCjkq.js";
+import '../../assets/Avatar.css';var z = function(e, o) {
+  var l = {};
+  for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && o.indexOf(t) < 0 && (l[t] = e[t]);
+  if (e != null && typeof Object.getOwnPropertySymbols == "function")
+    for (var a = 0, t = Object.getOwnPropertySymbols(e); a < t.length; a++)
+      o.indexOf(t[a]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[a]) && (l[t[a]] = e[t[a]]);
+  return l;
+};
+const q = N((e, o) => {
+  var { title: l, titleId: t } = e, a = z(e, ["title", "titleId"]);
+  let s = R();
+  return s = l ? t || "title-" + s : void 0, m.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": s }, a),
+    l ? m.createElement("title", { id: s }, l) : null,
+    m.createElement("path", { fill: "currentColor", d: "M8.22 13.72a.75.75 0 0 1 1.06 0l.029.025q.041.039.132.111c.122.097.308.23.548.364a4.14 4.14 0 0 0 2.011.53 4.14 4.14 0 0 0 2.01-.53 4 4 0 0 0 .681-.475l.028-.025.057-.052a.751.751 0 0 1 1.056 1.056l-.052.056-.01.011-.018.017-.059.054a5.647 5.647 0 0 1-.954.668c-.642.357-1.58.72-2.739.72a5.64 5.64 0 0 1-2.74-.72 5.7 5.7 0 0 1-.748-.496 4 4 0 0 1-.205-.172q-.037-.032-.059-.054l-.018-.017-.01-.01a.75.75 0 0 1 0-1.061M9.5 9a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3M14.5 9a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3" }),
+    m.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M12 .5a1.5 1.5 0 0 1 .75 2.798V5h5.5a.75.75 0 0 1 .75.75v3.5h2.24a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-.75.75H19v3.5a.75.75 0 0 1-.75.75H5.75a.75.75 0 0 1-.75-.75v-3.5H2.75A.75.75 0 0 1 2 14v-4a.75.75 0 0 1 .75-.75H5v-3.5A.75.75 0 0 1 5.75 5h5.5V3.298A1.498 1.498 0 0 1 12 .5m-5.5 17h11v-11h-11zm-3-4.25H5v-2.5H3.5zm15.5 0h1.49v-2.5H19z", clipRule: "evenodd" })
+  );
+}), P = "_avatar_bmli3_1", V = "_shape_bmli3_20", B = "_label_bmli3_31", L = "_icon_bmli3_41", T = "_svg_bmli3_49", D = "_image_bmli3_54", F = "_deletedIcon_bmli3_60", r = {
+  avatar: P,
+  shape: V,
+  label: B,
+  icon: L,
+  svg: T,
+  image: D,
+  deletedIcon: F
+}, X = (e) => typeof e == "object" && e !== null && "name" in e, Y = ({
   type: e = "person",
-  isParent: n,
-  isDeleted: m = !1,
-  size: h,
-  name: l = "Avatar",
-  shape: u,
-  color: g,
-  variant: _,
-  imageUrl: t,
-  imageUrlAlt: f,
-  customLabel: v,
-  loading: c,
-  className: b,
-  colorKey: C,
-  style: i = {}
+  isParent: o,
+  isDeleted: l = !1,
+  size: t,
+  name: a = "Avatar",
+  shape: s,
+  color: b,
+  variant: g,
+  imageUrl: d,
+  imageUrlAlt: _,
+  customLabel: w,
+  loading: p,
+  className: y,
+  colorKey: I,
+  style: f = {}
 }) => {
-  const [I, w] = A(!1), x = u || e === "person" ? "circle" : "square", N = g || e === "person" ? "light" : "dark";
-  let o = _;
-  e === "company" && typeof n == "boolean" && (o = n ? "solid" : "outline");
-  const { backgroundColor: p, foregroundColor: d } = q(C ?? l, N), k = (l[0] ?? "").toUpperCase(), s = t && !I, S = !c && !s ? {
-    ...i,
-    backgroundColor: o === "outline" ? d : p,
-    color: o === "outline" ? p : d
-  } : i;
-  return /* @__PURE__ */ a(
+  const [x, O] = A(!1), C = s || e === "person" ? "circle" : "square", S = b || e === "person" ? "light" : "dark";
+  let i = g;
+  e === "company" && typeof o == "boolean" && (i = o ? "solid" : "outline");
+  const { backgroundColor: v, foregroundColor: h } = M(I ?? a, S), j = (a[0] ?? "").toUpperCase(), c = d && !x, E = !p && !c ? {
+    ...f,
+    backgroundColor: i === "outline" ? h : v,
+    color: i === "outline" ? v : h
+  } : f;
+  return /* @__PURE__ */ n(
     "div",
     {
-      className: y(r.avatar, b),
-      style: S,
-      "data-shape": x,
-      "data-size": h,
+      className: H(r.avatar, y),
+      style: E,
+      "data-shape": C,
+      "data-size": t,
       "aria-hidden": !0,
-      children: /* @__PURE__ */ j(E, { loading: c, className: r.shape, variant: "circle", children: [
-        /* @__PURE__ */ a("div", { className: r.shape, "data-variant": o, children: s && /* @__PURE__ */ a(
-          "img",
-          {
-            src: t,
-            className: r.image,
-            alt: f || t,
-            onError: () => {
-              w(!0);
+      children: /* @__PURE__ */ u(k, { loading: p, className: r.shape, variant: "circle", children: [
+        /* @__PURE__ */ u("div", { className: r.shape, "data-variant": i, children: [
+          e !== "system" && c && /* @__PURE__ */ n(
+            "img",
+            {
+              src: d,
+              className: r.image,
+              alt: _ || d,
+              onError: () => {
+                O(!0);
+              }
             }
-          }
-        ) }),
-        !s && /* @__PURE__ */ a("span", { className: r.label, children: v || k }),
-        m && /* @__PURE__ */ a(
+          ),
+          e === "system" && !c && /* @__PURE__ */ n("span", { className: r.icon, children: /* @__PURE__ */ n(q, { className: r.svg }) })
+        ] }),
+        !c && e !== "system" && /* @__PURE__ */ n("span", { className: r.label, children: w || j }),
+        l && /* @__PURE__ */ n(
           "svg",
           {
             "aria-hidden": "true",
@@ -66,7 +90,7 @@ import '../../assets/Avatar.css';const z = "_avatar_1en7r_1", B = "_shape_1en7r_
             viewBox: "0 0 24 24",
             fill: "none",
             xmlns: "http://www.w3.org/2000/svg",
-            children: /* @__PURE__ */ a("path", { d: "M0 24L24 -1.20156e-06", stroke: "currentColor" })
+            children: /* @__PURE__ */ n("path", { d: "M0 24L24 -1.20156e-06", stroke: "currentColor" })
           }
         )
       ] })
@@ -74,6 +98,6 @@ import '../../assets/Avatar.css';const z = "_avatar_1en7r_1", B = "_shape_1en7r_
   );
 };
 export {
-  K as Avatar,
-  J as isAvatarProps
+  Y as Avatar,
+  X as isAvatarProps
 };

package/dist/components/Dialog/DialogLayout.js

@@ -1,28 +1,28 @@
 import { jsxs as i, jsx as o } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
-import { ContextMenu as a } from "../ContextMenu/ContextMenu.js";
+import { ContextMenu as p } from "../ContextMenu/ContextMenu.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import { PageBase as p } from "../Page/PageBase.js";
-import { PageNav as l } from "../Page/PageNav.js";
-import { PageMenu as d } from "../Page/PageMenu.js";
+import { PageBase as l } from "../Page/PageBase.js";
+import { PageNav as d } from "../Page/PageNav.js";
+import { PageMenu as c } from "../Page/PageMenu.js";
 import { Section as m } from "../Page/Section.js";
-const v = ({ backButton: e, contextMenu: t, pageMenu: r, children: s }) => /* @__PURE__ */ i(p, { theme: "subtle", spacing: 0, bleed: !0, children: [
+const w = ({ backButton: e, contextMenu: t, pageMenu: r, children: s, color: a }) => /* @__PURE__ */ i(l, { theme: "subtle", spacing: 0, color: a, bleed: !0, children: [
   /* @__PURE__ */ i(m, { theme: "default", shadow: "xs", children: [
     /* @__PURE__ */ o(
-      l,
+      d,
       {
         color: "neutral",
         padding: 2,
         backButton: e,
-        controls: t && /* @__PURE__ */ o(a, { ...t })
+        controls: t && /* @__PURE__ */ o(p, { ...t })
       }
     ),
     /* @__PURE__ */ o(m, { as: "article", padding: "page", spacing: 6, children: s })
   ] }),
-  /* @__PURE__ */ o(d, { items: r == null ? void 0 : r.items })
+  /* @__PURE__ */ o(c, { items: r == null ? void 0 : r.items })
 ] });
 export {
-  v as DialogLayout
+  w as DialogLayout
 };

package/dist/components/Dialog/DialogListItem.js

@@ -2,12 +2,12 @@ import { jsx as a, jsxs as c } from "react/jsx-runtime";
 import { Badge as K } from "../Badge/Badge.js";
 import "../../index-L8X2o7IH.js";
 import "react";
-import { Heading as j } from "../Typography/Heading.js";
+import { Heading as u } from "../Typography/Heading.js";
 import "../RootProvider/RootProvider.js";
 import { DialogMetadata as O } from "./DialogMetadata.js";
 import { DialogByline as P } from "./DialogByline.js";
 import { MetaItem as Q } from "../Metadata/MetaItem.js";
-import { ListItem as u } from "../List/ListItem.js";
+import { ListItem as b } from "../List/ListItem.js";
 import "../Snackbar/useSnackbar.js";
 import '../../assets/DialogListItem.css';const S = "_border_jg0tu_1", T = "_title_jg0tu_27", U = "_controls_jg0tu_58", X = "_header_jg0tu_65", Y = "_summary_jg0tu_82", Z = "_footer_jg0tu_96", $ = "_seenBy_jg0tu_101", z = "_heading_jg0tu_108", t = {
   border: S,
@@ -19,16 +19,16 @@ import '../../assets/DialogListItem.css';const S = "_border_jg0tu_1", T = "_titl
   seenBy: $,
   heading: z
 }, _a = ({
-  size: e = "xl",
+  size: r = "xl",
   state: W = "normal",
-  loading: r,
+  loading: e,
   controls: x,
   select: aa,
   selected: o,
   status: s,
-  extendedStatusLabel: N,
+  extendedStatusLabel: g,
   sender: l,
-  recipient: b,
+  recipient: N,
   recipientLabel: v = "to",
   grouped: y = !1,
   updatedAt: B,
@@ -49,63 +49,65 @@ import '../../assets/DialogListItem.css';const S = "_border_jg0tu_1", T = "_titl
   receivedCount: C,
   attachmentsCount: E,
   attachmentsLabel: F,
-  title: n,
+  title: m,
   description: G,
-  summary: m,
-  highlightWords: i,
+  summary: i,
+  highlightWords: n,
   variant: J = "default",
   id: h,
   ...f
 }) => {
-  const g = o ? "tinted" : J;
-  return e === "xs" || e === "sm" ? /* @__PURE__ */ a(
-    u,
+  const j = o ? "tinted" : J;
+  return r === "xs" || r === "sm" ? /* @__PURE__ */ a(
+    b,
     {
       ...f,
       id: h,
-      size: e,
+      size: r,
       selected: o,
-      variant: g,
-      ariaLabel: n,
+      variant: j,
+      ariaLabel: m,
+      disabled: e,
       icon: l,
-      title: n,
-      description: m || G,
-      highlightWords: i
+      title: m,
+      description: i || G,
+      highlightWords: n
     }
   ) : /* @__PURE__ */ a(
-    u,
+    b,
     {
       ...f,
       id: h,
-      size: e,
+      size: r,
       selected: o,
-      variant: g,
+      variant: j,
       controls: /* @__PURE__ */ a("div", { className: t.controls, children: x }),
-      title: n,
+      title: m,
+      disabled: e,
       label: /* @__PURE__ */ c(
         "div",
         {
           className: t.border,
           "data-selected": o,
           "data-status": s == null ? void 0 : s.value,
-          "data-size": e,
+          "data-size": r,
           "data-unread": _,
           "data-archived": D,
           "data-trashed": M,
-          "data-loading": r,
+          "data-loading": e,
           children: [
-            /* @__PURE__ */ c("header", { className: t.header, "data-size": e, children: [
+            /* @__PURE__ */ c("header", { className: t.header, "data-size": r, children: [
               /* @__PURE__ */ c("span", { className: t.heading, children: [
                 /* @__PURE__ */ a(
-                  j,
+                  u,
                   {
                     as: "h2",
-                    highlightWords: i,
+                    highlightWords: n,
                     weight: _ ? "bold" : "normal",
-                    loading: r,
+                    loading: e,
                     maxRows: 2,
                     className: t.title,
-                    children: n
+                    children: m
                   }
                 ),
                 d && /* @__PURE__ */ a(K, { variant: "tinted", size: "xs", ...d })
@@ -114,23 +116,23 @@ import '../../assets/DialogListItem.css';const S = "_border_jg0tu_1", T = "_titl
                 P,
                 {
                   size: "xs",
-                  loading: r,
+                  loading: e,
                   sender: l,
-                  recipient: b,
+                  recipient: N,
                   recipientLabel: v,
                   grouped: y
                 }
               ),
-              m && /* @__PURE__ */ a(
-                j,
+              i && /* @__PURE__ */ a(
+                u,
                 {
                   as: "h3",
-                  highlightWords: i,
+                  highlightWords: n,
                   weight: "normal",
                   className: t.summary,
-                  loading: r,
+                  loading: e,
                   maxRows: 2,
-                  children: m
+                  children: i
                 }
               )
             ] }),
@@ -138,9 +140,9 @@ import '../../assets/DialogListItem.css';const S = "_border_jg0tu_1", T = "_titl
               O,
               {
                 className: t.footer,
-                loading: r,
+                loading: e,
                 status: s,
-                extendedStatusLabel: N,
+                extendedStatusLabel: g,
                 draftsLabel: q,
                 sentCount: A,
                 receivedCount: C,

package/dist/components/Modal/ModalHeader.js

@@ -1,41 +1,50 @@
 import { jsx as r, jsxs as e } from "react/jsx-runtime";
 import { c as p } from "../../index-L8X2o7IH.js";
 import "react";
-import { Heading as s } from "../Typography/Heading.js";
-import { IconButton as h } from "../Button/IconButton.js";
+import { Heading as m } from "../Typography/Heading.js";
+import { IconButton as l } from "../Button/IconButton.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { Flex as o } from "../Page/Flex.js";
-import { Section as f } from "../Page/Section.js";
-import { ModalIcon as g } from "./ModalIcon.js";
+import { Section as g } from "../Page/Section.js";
+import { ModalIcon as f } from "./ModalIcon.js";
 import { S as y } from "../../XMark-tKk6aExO.js";
-import '../../assets/ModalHeader.css';const x = "_header_7ty99_1", k = "_sticky_7ty99_6", a = {
-  header: x,
-  sticky: k
+import '../../assets/ModalHeader.css';const u = "_header_7ty99_1", x = "_sticky_7ty99_6", s = {
+  header: u,
+  sticky: x
 }, A = ({
-  title: t,
-  description: i,
-  icon: n,
-  onClose: c,
-  closeTitle: m,
+  title: c,
+  description: t,
+  icon: a,
+  onClose: i,
+  closeTitle: n,
   children: d,
-  sticky: l = !0
-}) => /* @__PURE__ */ r(f, { as: "header", spacing: 2, padding: 4, className: p(a.header, l && a.sticky), children: /* @__PURE__ */ e(o, { direction: "row", justify: "between", align: "center", spacing: 8, children: [
+  sticky: h = !0
+}) => /* @__PURE__ */ r(g, { as: "header", spacing: 2, padding: 4, className: p(s.header, h && s.sticky), children: /* @__PURE__ */ e(o, { direction: "row", justify: "between", align: "center", spacing: 8, children: [
   d || /* @__PURE__ */ e(o, { direction: "row", align: "center", spacing: 3, children: [
-    n && /* @__PURE__ */ r(g, { icon: n }),
+    a && /* @__PURE__ */ r(f, { icon: a }),
     /* @__PURE__ */ e(o, { direction: "col", spacing: 0, children: [
-      t && /* @__PURE__ */ r(s, { as: "h2", size: i ? "md" : "lg", children: t }),
-      i && /* @__PURE__ */ r(s, { as: "h3", size: "xs", weight: "normal", children: i })
+      c && /* @__PURE__ */ r(m, { as: "h2", size: t ? "md" : "lg", children: c }),
+      t && /* @__PURE__ */ r(m, { as: "h3", size: "xs", weight: "normal", children: t })
     ] })
   ] }),
-  typeof c == "function" && /* @__PURE__ */ r(
-    h,
+  (i || n) && /* @__PURE__ */ r(
+    "form",
     {
-      icon: y,
-      variant: "outline",
-      onClick: c,
-      iconAltText: m ?? "Close",
-      size: "sm"
+      method: "dialog",
+      onSubmit: () => {
+        i == null || i();
+      },
+      children: /* @__PURE__ */ r(
+        l,
+        {
+          type: "submit",
+          icon: y,
+          variant: "outline",
+          iconAltText: n ?? "Close",
+          size: "sm"
+        }
+      )
     }
   )
 ] }) });

package/dist/components/Page/Breadcrumbs.js

@@ -22,7 +22,7 @@ const h = d((e, n) => {
     "svg",
     Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: n, "aria-labelledby": i }, l),
     r ? c.createElement("title", { id: i }, r) : null,
-    c.createElement("path", { fill: "currentColor", d: "M14.087 6.873a.75.75 0 0 1 .943.097l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H5a.75.75 0 0 1-.75-.74V12a.75.75 0 0 1 .75-.75h12.19l-3.22-3.22a.75.75 0 0 1 .117-1.157" })
+    c.createElement("path", { fill: "currentColor", d: "M14.088 6.873a.75.75 0 0 1 .942.097l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H5a.75.75 0 0 1-.75-.74V12a.75.75 0 0 1 .75-.75h12.19l-3.22-3.22a.75.75 0 0 1 .118-1.157" })
   );
 }), _ = "_list_tknjf_1", b = "_item_tknjf_12", g = "_icon_tknjf_18", a = {
   list: _,

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

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactElement } from 'react';
-export type AvatarType = 'company' | 'person' | 'custom';
+export type AvatarType = 'company' | 'person' | 'system' | 'custom';
 export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type AvatarShape = 'square' | 'circle';
 export type AvatarColor = 'dark' | 'light';

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

@@ -44,5 +44,6 @@ export declare const Logo: Story;
 export declare const Loading: Story;
 export declare const Sizes: ({ type, name, imageUrl }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
 export declare const People: () => import("react/jsx-runtime").JSX.Element;
+export declare const SystemUsers: () => import("react/jsx-runtime").JSX.Element;
 export declare const Companies: () => import("react/jsx-runtime").JSX.Element;
 export declare const Logos: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Button/IconButton.d.ts

@@ -13,5 +13,6 @@ export interface IconButtonProps {
     onClick?: MouseEventHandler;
     dataTestId?: string;
     onBlurCapture?: React.FocusEventHandler<HTMLButtonElement>;
+    type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
 }
 export declare const IconButton: ({ variant, rounded, size, icon, iconSize, iconAltText, color, className, selected, onClick, dataTestId, onBlurCapture, }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Dialog/DialogLayout.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { BackButtonProps, ContextMenuProps, PageMenuProps } from '..';
+import { BackButtonProps, Color, ContextMenuProps, PageMenuProps } from '..';
 export interface DialogLayoutProps {
     /** Back button */
     backButton?: BackButtonProps;
@@ -9,8 +9,10 @@ export interface DialogLayoutProps {
     pageMenu?: PageMenuProps;
     /** Children */
     children?: ReactNode;
+    /** Color for override **/
+    color?: Color | undefined;
 }
 /**
  * Dialog layout with navigation,
  */
-export declare const DialogLayout: ({ backButton, contextMenu, pageMenu, children }: DialogLayoutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogLayout: ({ backButton, contextMenu, pageMenu, children, color }: DialogLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Dialog/DialogLayout.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ backButton, contextMenu, pageMenu, children }: import('./DialogLayout').DialogLayoutProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ backButton, contextMenu, pageMenu, children, color }: import('./DialogLayout').DialogLayoutProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
 };

package/dist/types/lib/components/Dialog/DialogList.stories.d.ts

@@ -18,3 +18,4 @@ export declare const SearchResults: Story;
 export declare const SingleGroup: Story;
 export declare const Ungrouped: Story;
 export declare const WithExtendedStatus: Story;
+export declare const Loading: Story;

package/dist/types/lib/components/Modal/ModalHeader.d.ts

@@ -5,6 +5,7 @@ export interface ModalHeaderProps {
     description?: string;
     icon?: ModalIconProps['icon'];
     closeTitle?: string;
+    /** Optional: still useful for side effects; dialog close itself is handled by form submit */
     onClose?: () => void;
     children?: ReactNode;
     sticky?: boolean;

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

@@ -1,6 +1,6 @@
 declare const meta: {
     title: string;
-    component: ({ backButton, contextMenu, pageMenu, children }: import('../../components').DialogLayoutProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ backButton, contextMenu, pageMenu, children, color }: import('../../components').DialogLayoutProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {
@@ -8,6 +8,7 @@ declare const meta: {
         contextMenu?: import('../../components').ContextMenuProps;
         pageMenu?: import('../../components').PageMenuProps;
         children?: React.ReactNode;
+        color?: import('../../types').Color | undefined;
     };
 };
 export default meta;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.51.4",
+  "version": "0.52.0",
   "main": "dist/index.js",
   "files": [
     "dist/",
@@ -23,7 +23,7 @@
     "@digdir/designsystemet-css": "^1.0.6",
     "@digdir/designsystemet-react": "^1.0.6",
     "@digdir/designsystemet-theme": "^1.0.6",
-    "@navikt/aksel-icons": "^7.30.1",
+    "@navikt/aksel-icons": "^7.37.0",
     "@tanstack/react-virtual": "^3.13.9",
     "classnames": "^2.5.1",
     "react": "^19.1.0",