@altinn/altinn-components 0.56.20 → 0.56.22

package/dist/components/GlobalMenu/index.js

@@ -1,8 +1,6 @@
 import { GlobalMenu as r } from "./GlobalMenu.js";
-import { GlobalMenuButton as l } from "./GlobalMenuButton.js";
-import { LocaleSwitcher as f } from "./LocaleSwitcher.js";
+import { LocaleSwitcher as t } from "./LocaleSwitcher.js";
 export {
   r as GlobalMenu,
-  l as GlobalMenuButton,
-  f as LocaleSwitcher
+  t as LocaleSwitcher
 };

package/dist/components/Layout/Layout.js

@@ -1,58 +1,58 @@
 "use client";
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
 import { LayoutBase as d } from "./LayoutBase.js";
-import { LayoutGrid as a } from "./LayoutGrid.js";
-import { LayoutBody as h } from "./LayoutBody.js";
-import { LayoutContent as s } from "./LayoutContent.js";
-import { LayoutSidebar as L } from "./LayoutSidebar.js";
+import { LayoutGrid as L } from "./LayoutGrid.js";
+import { LayoutBody as a } from "./LayoutBody.js";
+import { LayoutContent as h } from "./LayoutContent.js";
+import { LayoutSidebar as s } from "./LayoutSidebar.js";
 import { Breadcrumbs as x } from "../Breadcrumbs/Breadcrumbs.js";
 import "../../index-p1eeF8LQ.js";
 import { Footer as B } from "../Footer/Footer.js";
 import { GlobalHeader as j } from "../GlobalHeader/GlobalHeader.js";
 import "react";
 import "../Button/Button.js";
-import { M as k } from "../../SearchField-QTfebYdU.js";
-import { useRootContext as C } from "../RootProvider/RootProvider.js";
-import { Header as F } from "../Header/Header.js";
-import "../Snackbar/useSnackbar.js";
 import "react-dom";
-import { SkipLink as G } from "../SkipLink/SkipLink.js";
+import { useRootContext as k } from "../RootProvider/RootProvider.js";
+import { M as C } from "../../SearchField-QTfebYdU.js";
+import { Header as G } from "../Header/Header.js";
+import "../Snackbar/useSnackbar.js";
+import { SkipLink as H } from "../SkipLink/SkipLink.js";
 const Q = ({
-  color: p,
-  theme: l = "subtle",
-  header: i,
-  footer: e,
+  color: c,
+  theme: f = "subtle",
+  header: m,
+  footer: n,
   sidebar: o,
-  content: u = {},
-  children: f,
-  skipLink: n,
-  breadcrumbs: c,
+  content: l = {},
+  children: u,
+  skipLink: p,
+  breadcrumbs: e,
   useGlobalHeader: y = !1
 }) => {
-  const { currentId: r } = C();
-  return /* @__PURE__ */ m(d, { color: p, theme: r === "accountFullscreen" ? "default" : l, currentId: r, children: [
-    n && /* @__PURE__ */ t(G, { ...n }),
-    i && (y ? /* @__PURE__ */ t(j, { ...i }) : /* @__PURE__ */ t(F, { ...i })),
-    /* @__PURE__ */ m(a, { currentId: r, children: [
-      c && /* @__PURE__ */ t(x, { ...c }),
-      /* @__PURE__ */ m(h, { currentId: r, children: [
-        o && /* @__PURE__ */ m(
-          L,
+  const { currentId: i } = k();
+  return /* @__PURE__ */ t(d, { color: c, theme: f, currentId: i, children: [
+    p && /* @__PURE__ */ r(H, { ...p }),
+    m && (y ? /* @__PURE__ */ r(j, { ...m }) : /* @__PURE__ */ r(G, { ...m })),
+    /* @__PURE__ */ t(L, { currentId: i, children: [
+      e && /* @__PURE__ */ r(x, { ...e }),
+      /* @__PURE__ */ t(a, { currentId: i, children: [
+        o && /* @__PURE__ */ t(
+          s,
           {
             sticky: o?.sticky,
             hidden: o?.hidden,
             color: o?.color,
             footer: o?.footer,
             children: [
-              o?.menu && /* @__PURE__ */ t(k, { ...o?.menu }),
+              o?.menu && /* @__PURE__ */ r(C, { ...o?.menu }),
               o?.children
             ]
           }
         ),
-        /* @__PURE__ */ t(s, { color: u?.color, id: "main-content", children: f })
+        /* @__PURE__ */ r(h, { color: l?.color, id: "main-content", children: u })
       ] })
     ] }),
-    e && /* @__PURE__ */ t(B, { ...e })
+    n && /* @__PURE__ */ r(B, { ...n })
   ] });
 };
 export {

package/dist/components/Layout/LayoutGrid.js

@@ -1,7 +1,7 @@
 import { jsx as i } from "react/jsx-runtime";
-import '../../assets/LayoutGrid.css';const o = "_grid_6h47e_1", s = {
+import '../../assets/LayoutGrid.css';const o = "_grid_1869r_1", s = {
   grid: o
-}, c = ({ currentId: r, children: t, variant: a = "default", color: d }) => /* @__PURE__ */ i("div", { className: s.grid, "data-current-id": r, "data-variant": a, "data-color": d, children: t });
+}, e = ({ currentId: r, children: t, variant: a = "default", color: d }) => /* @__PURE__ */ i("div", { className: s.grid, "data-current-id": r, "data-variant": a, "data-color": d, children: t });
 export {
-  c as LayoutGrid
+  e as LayoutGrid
 };

package/dist/components/Modal/ModalBase.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as d } from "react/jsx-runtime";
+import { jsx as s } from "react/jsx-runtime";
 import { useRef as D, useEffect as m } from "react";
 import "../../index-p1eeF8LQ.js";
 import "../Button/Button.js";
@@ -7,69 +7,71 @@ import "react-dom";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { Section as S } from "../Page/Section.js";
-import '../../assets/ModalBase.css';const x = "_modal_4vfmr_1", C = "_content_4vfmr_35", f = {
-  modal: x,
-  content: C
-}, Y = ({
+import '../../assets/ModalBase.css';const C = "_modal_3d5cx_1", R = "_content_3d5cx_41", f = {
+  modal: C,
+  content: R
+}, z = ({
   open: r,
   onClose: o,
   closedBy: n = "any",
   children: u,
   backdropColor: p = "inherit",
-  size: v,
-  color: g,
-  padding: E = 0,
-  spacing: h = 0,
-  variant: y = "default"
+  size: g,
+  color: v,
+  padding: h = 0,
+  spacing: E = 0,
+  height: y = "auto",
+  variant: b = "default"
 }) => {
   const i = D(null);
   return m(() => {
-    const e = i.current, a = (t) => {
-      const { clientY: l, clientX: s, target: b } = t;
-      if (t instanceof KeyboardEvent && t.key === "Escape") {
+    const t = i.current, a = (e) => {
+      const { clientY: l, clientX: d, target: k } = e;
+      if (e instanceof KeyboardEvent && e.key === "Escape") {
         if (n === "none") {
-          t.preventDefault();
+          e.preventDefault();
           return;
         }
         o();
         return;
       }
-      if (!window.getSelection()?.toString() && e && b === e && n === "any") {
-        const { top: k, left: L, right: _, bottom: w } = e.getBoundingClientRect();
-        k <= l && l <= w && L <= s && s <= _ || e?.close();
+      if (!window.getSelection()?.toString() && t && k === t && n === "any") {
+        const { top: L, left: _, right: w, bottom: x } = t.getBoundingClientRect();
+        L <= l && l <= x && _ <= d && d <= w || t?.close();
       }
     }, c = () => {
-      const t = e?.querySelector("[autofocus]");
-      document.activeElement !== t && t?.focus();
+      const e = t?.querySelector("[autofocus]");
+      document.activeElement !== e && e?.focus();
     };
-    return e?.addEventListener("animationend", c), e?.addEventListener("click", a), e?.addEventListener("keydown", a), () => {
-      e?.removeEventListener("animationend", c), e?.removeEventListener("click", a), e?.removeEventListener("keydown", a);
+    return t?.addEventListener("animationend", c), t?.addEventListener("click", a), t?.addEventListener("keydown", a), () => {
+      t?.removeEventListener("animationend", c), t?.removeEventListener("click", a), t?.removeEventListener("keydown", a);
     };
   }, [n, o]), m(() => {
-    const e = i.current;
-    e && (r ? e.open || e.showModal() : e.open && e.close());
-  }, [r]), /* @__PURE__ */ d(
+    const t = i.current;
+    t && (r ? t.open || t.showModal() : t.open && t.close());
+  }, [r]), /* @__PURE__ */ s(
     "dialog",
     {
       ref: i,
       "aria-modal": "true",
       "aria-labelledby": "modal-title",
-      onCancel: (e) => {
-        e.preventDefault(), n === "any" && o();
+      onCancel: (t) => {
+        t.preventDefault(), n === "any" && o();
       },
       "data-backdrop-color": p,
       className: f.modal,
-      "data-variant": y,
+      "data-variant": b,
+      "data-height": y,
       onClose: n !== "none" ? o : void 0,
-      children: /* @__PURE__ */ d(
+      children: /* @__PURE__ */ s(
         S,
         {
           className: f.content,
           "aria-label": "modal content",
-          size: v,
-          color: g,
-          padding: E,
-          spacing: h,
+          size: g,
+          color: v,
+          padding: h,
+          spacing: E,
           children: u
         }
       )
@@ -77,5 +79,5 @@ import '../../assets/ModalBase.css';const x = "_modal_4vfmr_1", C = "_content_4v
   );
 };
 export {
-  Y as ModalBase
+  z as ModalBase
 };

package/dist/components/Modal/ModalFooter.js

@@ -1,12 +1,9 @@
-import { jsx as t } from "react/jsx-runtime";
-import "../../index-p1eeF8LQ.js";
-import "react";
-import "../Button/Button.js";
-import "react-dom";
-import "../RootProvider/RootProvider.js";
-import "../Snackbar/useSnackbar.js";
-import { Flex as p } from "../Page/Flex.js";
-const x = ({ children: o, ...r }) => /* @__PURE__ */ t(p, { as: "footer", spacing: 2, padding: 4, ...r, children: o });
+import { jsx as c } from "react/jsx-runtime";
+import { c as e } from "../../index-p1eeF8LQ.js";
+import '../../assets/ModalFooter.css';const f = "_footer_1rs1j_1", i = "_sticky_1rs1j_9", o = {
+  footer: f,
+  sticky: i
+}, m = ({ children: t, sticky: s = !1, ...r }) => /* @__PURE__ */ c("div", { className: e(o.footer, s && o.sticky), ...r, children: t });
 export {
-  x as ModalFooter
+  m as ModalFooter
 };

package/dist/components/Modal/index.js

@@ -1,12 +1,14 @@
 import { ModalBase as e } from "./ModalBase.js";
 import { ModalHeader as d } from "./ModalHeader.js";
-import { ModalIcon as l } from "./ModalIcon.js";
-import { ModalBody as p } from "./ModalBody.js";
-import { Modal as x } from "./Modal.js";
+import { ModalFooter as f } from "./ModalFooter.js";
+import { ModalIcon as m } from "./ModalIcon.js";
+import { ModalBody as x } from "./ModalBody.js";
+import { Modal as B } from "./Modal.js";
 export {
-  x as Modal,
+  B as Modal,
   e as ModalBase,
-  p as ModalBody,
+  x as ModalBody,
+  f as ModalFooter,
   d as ModalHeader,
-  l as ModalIcon
+  m as ModalIcon
 };

package/dist/components/Settings/SettingsItem.js

@@ -1,28 +1,28 @@
 import { jsx as e } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
-import { useState as s } from "react";
+import { useState as h } from "react";
 import "../Button/Button.js";
 import "react-dom";
 import "../RootProvider/RootProvider.js";
-import { Input as f } from "../Forms/Input.js";
+import { Input as v } from "../Forms/Input.js";
 import "../Snackbar/useSnackbar.js";
 import { SettingsItemBase as i } from "./SettingsItemBase.js";
-import { SettingsModal as v } from "./SettingsModal.js";
-const B = ({
-  loading: c,
-  variant: o = "default",
-  id: a = "settings",
-  name: m,
-  checked: u,
-  onChange: d,
-  modalProps: l,
-  children: h,
+import { SettingsModal as f } from "./SettingsModal.js";
+const j = ({
+  loading: r,
+  variant: c = "default",
+  id: u = "settings",
+  name: d,
+  checked: m,
+  onChange: s,
+  modalProps: n,
+  children: o,
   ...t
 }) => {
-  const [n, r] = s(!1);
-  if (c)
+  const [l, a] = h(!1);
+  if (r)
     return /* @__PURE__ */ e(i, { icon: t?.icon, title: t?.title, loading: !0 });
-  switch (o) {
+  switch (c) {
     case "link":
       return /* @__PURE__ */ e(
         i,
@@ -31,6 +31,7 @@ const B = ({
           title: {
             children: t?.title
           },
+          description: t?.description,
           value: void 0
         }
       );
@@ -40,22 +41,27 @@ const B = ({
         {
           ...t,
           title: {
-            id: a,
-            as: "label",
-            children: [t?.title, t?.value].join(": ")
+            size: "xs",
+            variant: "subtle",
+            weight: "normal",
+            children: t?.title
+          },
+          description: {
+            size: "sm",
+            variant: "default",
+            children: t?.description || t?.value
           },
-          value: void 0,
           interactive: !1,
           controls: /* @__PURE__ */ e(
-            f,
+            v,
             {
               type: "checkbox",
               role: "switch",
-              "aria-labelledby": a,
-              name: m,
+              "aria-labelledby": u,
+              name: d,
               value: t?.value,
-              checked: u,
-              onChange: d,
+              checked: m,
+              onChange: s,
               style: { marginRight: "0.5em" }
             }
           )
@@ -67,23 +73,29 @@ const B = ({
         {
           ...t,
           title: {
+            size: t?.value ? "xs" : "sm",
             variant: "subtle",
             weight: "normal",
             children: t?.title
           },
+          description: {
+            size: "sm",
+            variant: "default",
+            children: t?.description || t?.value
+          },
           as: "button",
           linkIcon: !0,
-          onClick: () => r(!0),
-          expanded: n,
-          children: n && /* @__PURE__ */ e(
-            v,
+          onClick: () => a(!0),
+          expanded: l,
+          children: l && /* @__PURE__ */ e(
+            f,
             {
-              ...l,
-              icon: l?.icon || t?.icon,
-              title: l?.title || t?.title,
-              open: n,
-              onClose: () => r(!1),
-              children: h
+              ...n,
+              icon: n?.icon || t?.icon,
+              title: n?.title || t?.title,
+              open: l,
+              onClose: () => a(!1),
+              children: o
             }
           )
         }
@@ -94,14 +106,20 @@ const B = ({
         {
           ...t,
           title: {
+            size: t?.value ? "xs" : "sm",
             variant: "subtle",
             weight: "normal",
             children: t?.title
+          },
+          description: {
+            size: "sm",
+            variant: "default",
+            children: t?.description || t?.value
           }
         }
       );
   }
 };
 export {
-  B as SettingsItem
+  j as SettingsItem
 };

package/dist/components/Settings/SettingsItemBase.js

@@ -1,17 +1,17 @@
-import { jsxs as d, jsx as a } from "react/jsx-runtime";
+import { jsxs as L, jsx as a } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
 import "../Button/Button.js";
 import "react-dom";
 import "../RootProvider/RootProvider.js";
-import { ListItemBase as f } from "../List/ListItemBase.js";
-import { ListItemHeader as I } from "../List/ListItemHeader.js";
-import { ListItemLabel as g } from "../List/ListItemLabel.js";
+import { ListItemBase as d } from "../List/ListItemBase.js";
+import { ListItemHeader as f } from "../List/ListItemHeader.js";
+import { ListItemLabel as I } from "../List/ListItemLabel.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/SettingsItemBase.css';const k = "_item_lk1g7_1", N = "_label_lk1g7_20", j = "_header_lk1g7_24", e = {
-  item: k,
-  label: N,
-  header: j
+import '../../assets/SettingsItemBase.css';const g = "_item_lk1g7_1", k = "_label_lk1g7_20", N = "_header_lk1g7_24", e = {
+  item: g,
+  label: k,
+  header: N
 }, A = ({
   ref: i,
   loading: t,
@@ -21,27 +21,26 @@ import '../../assets/SettingsItemBase.css';const k = "_item_lk1g7_1", N = "_labe
   icon: o,
   label: c,
   title: n,
-  value: _,
-  description: p,
-  children: b,
-  highlightWords: h,
+  value: j,
+  description: _,
+  children: p,
+  highlightWords: b,
   ...m
 }) => {
-  const L = m.ariaLabel;
-  return /* @__PURE__ */ d(f, { ref: i, className: e.item, color: s, size: l, expanded: r, children: [
-    /* @__PURE__ */ a(I, { ...m, loading: t, ariaLabel: L, className: e.header, icon: o, children: /* @__PURE__ */ a(
-      g,
+  const h = m.ariaLabel;
+  return /* @__PURE__ */ L(d, { ref: i, className: e.item, color: s, size: l, expanded: r, children: [
+    /* @__PURE__ */ a(f, { ...m, loading: t, ariaLabel: h, className: e.header, icon: o, children: /* @__PURE__ */ a(
+      I,
       {
         loading: t,
-        highlightWords: h,
+        highlightWords: b,
         className: e.label,
         title: n,
-        value: _,
-        description: p,
+        description: _,
         children: c
       }
     ) }),
-    r && b
+    r && p
   ] });
 };
 export {

package/dist/components/Settings/SettingsSection.js

@@ -1,21 +1,21 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as m } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
 import "../Button/Button.js";
 import "react-dom";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import { Section as m } from "../Page/Section.js";
-import '../../assets/SettingsSection.css';const n = "_section_kd6sc_1", p = {
-  section: n
-}, u = ({
+import { Section as n } from "../Page/Section.js";
+import '../../assets/SettingsSection.css';const c = "_section_13ero_1", p = {
+  section: c
+}, d = ({
   size: t = "sm",
   theme: o = "default",
-  shadow: s = "xs",
-  as: i,
+  shadow: i = "xs",
+  as: s,
   color: r,
-  children: c
-}) => /* @__PURE__ */ e(m, { as: i, size: t, color: r, theme: o, shadow: s, className: p.section, spacing: 2, children: c });
+  children: e
+}) => /* @__PURE__ */ m(n, { as: s, size: t, color: r, theme: o, shadow: i, className: p.section, spacing: 2, children: e });
 export {
-  u as SettingsSection
+  d as SettingsSection
 };