@altinn/altinn-components 0.61.3 → 0.62.0

package/dist/LayoutBase-CAdjuw9Q.js

@@ -0,0 +1,18 @@
+import { jsx as r } from "react/jsx-runtime";
+import './assets/LayoutBase.css';const n = "_base_1hj0u_1", c = {
+  base: n
+}, i = ({ currentId: s, color: t, theme: e, bannerHeight: a, children: o }) => /* @__PURE__ */ r(
+  "div",
+  {
+    className: c.base,
+    "data-color": t,
+    "data-theme": e,
+    "data-current-id": s,
+    style: a ? { "--altinn-banner-height": `${a}px` } : void 0,
+    children: o
+  }
+);
+export {
+  i as L,
+  c as s
+};

package/dist/assets/Banner.css

@@ -1 +1 @@
-._banner_3u9bd_1{background-color:var(--ds-color-surface-tinted);color:var(--ds-color-text-default);margin-top:0;display:flex;justify-content:space-between;align-items:start;padding:.5rem;column-gap:.5rem}._banner_3u9bd_1[data-variant=strong]{background-color:var(--ds-color-base-default);color:var(--ds-color-base-contrast-default)}._sticky_3u9bd_18{position:sticky;top:0;z-index:1000}._content_3u9bd_24{padding:.5rem}._title_3u9bd_28{margin:0;font-size:1rem;font-weight:500;line-height:1.5rem}._icon_3u9bd_35{display:inline-block;width:1.5rem;height:1.5rem;margin-right:.5rem;vertical-align:bottom}._icon_3u9bd_35 svg{width:100%;height:100%}._closeIcon_3u9bd_48{min-height:1.5rem;max-height:1.5rem;min-width:1.5rem;max-width:1.5rem;color:var(--ds-color-warning-text-default);font-size:1.5rem}
+._banner_1oge9_1{background-color:var(--ds-color-surface-tinted);color:var(--ds-color-text-default);margin-top:0;display:flex;justify-content:space-between;align-items:start;padding:.5rem;column-gap:.5rem}._banner_1oge9_1[data-variant=strong]{background-color:var(--ds-color-base-default);color:var(--ds-color-base-contrast-default)}._sticky_1oge9_18{position:sticky;top:0;z-index:1000}._content_1oge9_24{padding:.5rem}._title_1oge9_28{margin:0;font-size:1rem;font-weight:500;line-height:1.5rem}._title_1oge9_28 a{color:inherit;text-decoration:underline}._icon_1oge9_40{display:inline-block;width:1.5rem;height:1.5rem;margin-right:.5rem;vertical-align:bottom}._icon_1oge9_40 svg{width:100%;height:100%}._closeIcon_1oge9_53{min-height:1.5rem;max-height:1.5rem;min-width:1.5rem;max-width:1.5rem;color:var(--ds-color-warning-text-default);font-size:1.5rem}

package/dist/assets/HeaderDrawer.css

@@ -1 +1 @@
-html:has(dialog[open]){overflow:hidden;scrollbar-gutter:stable}._backdrop_1f6gf_11{display:block;z-index:1;background-color:#111d4640;position:fixed;top:4.5rem;right:0;bottom:0;left:0;width:100%;height:100%}._backdrop_1f6gf_11[aria-hidden=true]{display:none}._drawer_1f6gf_28{position:fixed;z-index:2;background-color:#fff;width:100%;max-width:100vw;height:auto;max-height:auto;box-sizing:border-box;padding:0;margin:0;border:0;top:4.5rem;bottom:0;display:flex;flex-direction:column;overflow-y:scroll}._drawer_1f6gf_28::backdrop{background-color:transparent}._drawer_1f6gf_28:not([data-open=true]){display:none}._footer_1f6gf_60{display:none}._body_1f6gf_64{padding:0 .5rem}@media(min-width:1024px){._body_1f6gf_64{padding:0 1rem}._drawer_1f6gf_28{top:4.5rem;bottom:4.5rem}._drawer_1f6gf_28[data-expanded=true]{bottom:0}._footer_1f6gf_60{position:sticky;z-index:2000;display:flex;bottom:0;left:0;right:0;justify-content:center;align-items:center;background-color:#fff}._toggleButton_1f6gf_94{margin:1rem 0}}
+html:has(dialog[open]){overflow:hidden;scrollbar-gutter:stable}._backdrop_1fmb0_11{display:block;z-index:1;background-color:#111d4640;position:fixed;top:calc(4.5rem + var(--altinn-banner-height, 0px));right:0;bottom:0;left:0;width:100%;height:100%}._backdrop_1fmb0_11[aria-hidden=true]{display:none}._drawer_1fmb0_28{position:fixed;z-index:2;background-color:#fff;width:100%;max-width:100vw;height:auto;max-height:auto;box-sizing:border-box;padding:0;margin:0;border:0;top:calc(4.5rem + var(--altinn-banner-height, 0px));bottom:0;display:flex;flex-direction:column;overflow-y:scroll}._drawer_1fmb0_28::backdrop{background-color:transparent}._drawer_1fmb0_28:not([data-open=true]){display:none}._footer_1fmb0_60{display:none}._body_1fmb0_64{padding:0 .5rem}@media(min-width:1024px){._body_1fmb0_64{padding:0 1rem}._drawer_1fmb0_28{top:calc(4.5rem + var(--altinn-banner-height, 0px));bottom:4.5rem}._drawer_1fmb0_28[data-expanded=true]{bottom:0}._footer_1fmb0_60{position:sticky;z-index:2000;display:flex;bottom:0;left:0;right:0;justify-content:center;align-items:center;background-color:#fff}._toggleButton_1fmb0_94{margin:1rem 0}}

package/dist/assets/HeaderDropdown.css

@@ -1 +1 @@
-._dropdown_cdjbb_3[data-variant=drawer-dropdown] header{display:none}@media(max-width:1023px){._dropdown_cdjbb_3[data-variant=drawer-dropdown]{margin-top:4.5rem;box-shadow:none}}
+._dropdown_18s8n_3[data-variant=drawer-dropdown] header{display:none}@media(max-width:1023px){._dropdown_18s8n_3[data-variant=drawer-dropdown]{margin-top:calc(4.5rem + var(--altinn-banner-height, 0px));box-shadow:none}}

package/dist/assets/LayoutBase.css

@@ -1 +1 @@
-._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)}
+._base_1hj0u_1{position:relative;display:flex;flex-direction:column;min-height:100vh;background-color:var(--altinn-layout-background);--altinn-banner-height: 0px}._base_1hj0u_1[data-theme=default]{--altinn-layout-background: var(--ds-color-background-default)}._base_1hj0u_1[data-theme=subtle]{--altinn-layout-background: var(--ds-color-background-tinted)}._base_1hj0u_1[data-theme=neutral]{--altinn-layout-background: var(--ds-color-neutral-background-tinted)}._base_1hj0u_1[data-theme=inbox]{--altinn-layout-background: var(--ds-color-background-tinted)}._base_1hj0u_1[data-theme=inbox][data-color=person],._base_1hj0u_1[data-theme=settings]{--altinn-layout-background: var(--ds-color-neutral-background-tinted)}

package/dist/components/Banner/Banner.js

@@ -10,60 +10,60 @@ import "react-dom";
 import "../Snackbar/useSnackbar.js";
 import { u as m } from "../../useId-BVFxCjkq.js";
 import { S as w } from "../../Paperclip-DjN7qVfQ.js";
-import '../../assets/Banner.css';var _ = function(e, n) {
+import '../../assets/Banner.css';var _ = function(e, o) {
   var r = {};
-  for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && n.indexOf(t) < 0 && (r[t] = e[t]);
+  for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && o.indexOf(t) < 0 && (r[t] = e[t]);
   if (e != null && typeof Object.getOwnPropertySymbols == "function")
     for (var l = 0, t = Object.getOwnPropertySymbols(e); l < t.length; l++)
-      n.indexOf(t[l]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[l]) && (r[t[l]] = e[t[l]]);
+      o.indexOf(t[l]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[l]) && (r[t[l]] = e[t[l]]);
   return r;
 };
-const I = f((e, n) => {
+const I = f((e, o) => {
   var { title: r, titleId: t } = e, l = _(e, ["title", "titleId"]);
-  let o = m();
-  return o = r ? t || "title-" + o : void 0, i.createElement(
+  let n = m();
+  return n = r ? t || "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: n, "aria-labelledby": o }, l),
-    r ? i.createElement("title", { id: o }, r) : null,
+    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),
+    r ? i.createElement("title", { id: n }, r) : null,
     i.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M12 2.25a.75.75 0 0 1 .656.387l9.527 17.25A.75.75 0 0 1 21.526 21H2.474a.75.75 0 0 1-.657-1.113l9.526-17.25A.75.75 0 0 1 12 2.25M12 8.75a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-1.5 0v-4a.75.75 0 0 1 .75-.75m-1 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0", clipRule: "evenodd" })
   );
 });
-var j = function(e, n) {
+var j = function(e, o) {
   var r = {};
-  for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && n.indexOf(t) < 0 && (r[t] = e[t]);
+  for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && o.indexOf(t) < 0 && (r[t] = e[t]);
   if (e != null && typeof Object.getOwnPropertySymbols == "function")
     for (var l = 0, t = Object.getOwnPropertySymbols(e); l < t.length; l++)
-      n.indexOf(t[l]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[l]) && (r[t[l]] = e[t[l]]);
+      o.indexOf(t[l]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[l]) && (r[t[l]] = e[t[l]]);
   return r;
 };
-const x = f((e, n) => {
+const x = f((e, o) => {
   var { title: r, titleId: t } = e, l = j(e, ["title", "titleId"]);
-  let o = m();
-  return o = r ? t || "title-" + o : void 0, i.createElement(
+  let n = m();
+  return n = r ? t || "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: n, "aria-labelledby": o }, l),
-    r ? i.createElement("title", { id: o }, r) : null,
+    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),
+    r ? i.createElement("title", { id: n }, r) : null,
     i.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M3.25 4A.75.75 0 0 1 4 3.25h16a.75.75 0 0 1 .75.75v16a.75.75 0 0 1-.75.75H4a.75.75 0 0 1-.75-.75zM11 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0m-1.25 3a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 .75.75v4.75h.75a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h.75v-4h-.75a.75.75 0 0 1-.75-.75", clipRule: "evenodd" })
   );
 });
-var S = function(e, n) {
+var S = function(e, o) {
   var r = {};
-  for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && n.indexOf(t) < 0 && (r[t] = e[t]);
+  for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && o.indexOf(t) < 0 && (r[t] = e[t]);
   if (e != null && typeof Object.getOwnPropertySymbols == "function")
     for (var l = 0, t = Object.getOwnPropertySymbols(e); l < t.length; l++)
-      n.indexOf(t[l]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[l]) && (r[t[l]] = e[t[l]]);
+      o.indexOf(t[l]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[l]) && (r[t[l]] = e[t[l]]);
   return r;
 };
-const P = f((e, n) => {
+const P = f((e, o) => {
   var { title: r, titleId: t } = e, l = S(e, ["title", "titleId"]);
-  let o = m();
-  return o = r ? t || "title-" + o : void 0, i.createElement(
+  let n = m();
+  return n = r ? t || "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: n, "aria-labelledby": o }, l),
-    r ? i.createElement("title", { id: o }, r) : null,
+    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),
+    r ? i.createElement("title", { id: n }, r) : null,
     i.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M7.742 2.47a.75.75 0 0 1 .53-.22h7.456a.75.75 0 0 1 .53.22l5.272 5.272c.141.14.22.331.22.53v7.456a.75.75 0 0 1-.22.53l-5.272 5.272a.75.75 0 0 1-.53.22H8.272a.75.75 0 0 1-.53-.22L2.47 16.258a.75.75 0 0 1-.22-.53V8.272a.75.75 0 0 1 .22-.53zm1.288 5.5a.75.75 0 0 0-1.06 1.06L10.94 12l-2.97 2.97a.75.75 0 1 0 1.06 1.06L12 13.06l2.97 2.97a.75.75 0 1 0 1.06-1.06L13.06 12l2.97-2.97a.75.75 0 0 0-1.06-1.06L12 10.94z", clipRule: "evenodd" })
   );
-}), k = "_banner_3u9bd_1", R = "_sticky_3u9bd_18", E = "_content_3u9bd_24", M = "_title_3u9bd_28", z = "_icon_3u9bd_35", a = {
+}), k = "_banner_1oge9_1", R = "_sticky_1oge9_18", E = "_content_1oge9_24", M = "_title_1oge9_28", z = "_icon_1oge9_40", a = {
   banner: k,
   sticky: R,
   content: E,
@@ -73,37 +73,37 @@ const P = f((e, n) => {
 var H = /* @__PURE__ */ ((e) => (e.info = "info", e.success = "success", e.warning = "warning", e.danger = "danger", e))(H || {}), N = /* @__PURE__ */ ((e) => (e.default = "default", e.alert = "alert", e.error = "error", e.info = "info", e.strong = "strong", e))(N || {});
 const Q = ({
   closeTitle: e = "close",
-  onClose: n,
+  onClose: o,
   icon: r,
   title: t,
   body: l,
-  color: o,
+  color: n,
   variant: c,
-  sticky: u = !0
+  sticky: p = !0
 }) => {
-  const p = r || (c === "info" && x || c === "alert" && I || c === "error" && P || w);
+  const u = r || (c === "info" && x || c === "alert" && I || c === "error" && P || w);
   return /* @__PURE__ */ d(
     "section",
     {
-      className: g(a.banner, { [a.sticky]: u }),
+      className: g(a.banner, { [a.sticky]: p }),
       role: "status",
       "aria-live": "polite",
       "data-variant": c,
-      "data-color": o,
+      "data-color": n,
       children: [
         /* @__PURE__ */ d("div", { className: a.content, children: [
           /* @__PURE__ */ d(b, { size: "sm", leading: "normal", className: a.title, children: [
-            /* @__PURE__ */ s(y, { svgElement: p, className: a.icon }),
+            /* @__PURE__ */ s(y, { svgElement: u, className: a.icon }),
             t
           ] }),
           l && /* @__PURE__ */ s(O, { size: "sm", className: a.body, children: l })
         ] }),
-        !!n && /* @__PURE__ */ s(
+        !!o && /* @__PURE__ */ s(
           v,
           {
             size: "sm",
             variant: c === "strong" ? "solid" : "ghost",
-            onClick: n,
+            onClick: o,
             className: a.dismiss,
             "aria-label": e,
             icon: !0,

package/dist/components/GlobalHeader/HeaderDrawer.js

@@ -1,5 +1,5 @@
-import { jsxs as c, Fragment as f, jsx as r } from "react/jsx-runtime";
-import { useRef as N, useEffect as v } from "react";
+import { jsxs as c, Fragment as m, jsx as r } from "react/jsx-runtime";
+import { useRef as N, useEffect as h } from "react";
 import { Button as D } from "../Button/Button.js";
 import "../../index-p1eeF8LQ.js";
 import { u as L } from "../../ToolbarSearch-56Sm2j7P.js";
@@ -8,7 +8,7 @@ import "react-dom";
 import "../Snackbar/useSnackbar.js";
 import { S as z } from "../../ChevronUp-hn05LboH.js";
 import { S as j } from "../../ChevronDown-D_a7nb-G.js";
-import '../../assets/HeaderDrawer.css';const I = "_backdrop_1f6gf_11", M = "_drawer_1f6gf_28", R = "_footer_1f6gf_60", F = "_body_1f6gf_64", V = "_toggleButton_1f6gf_94", n = {
+import '../../assets/HeaderDrawer.css';const I = "_backdrop_1fmb0_11", M = "_drawer_1fmb0_28", R = "_footer_1fmb0_60", F = "_body_1fmb0_64", V = "_toggleButton_1fmb0_94", n = {
   backdrop: I,
   drawer: M,
   footer: R,
@@ -19,14 +19,14 @@ import '../../assets/HeaderDrawer.css';const I = "_backdrop_1f6gf_11", M = "_dra
   open: i,
   onClose: a,
   closedBy: o = "any",
-  expanded: m,
-  onToggle: b,
+  expanded: f,
+  onToggle: v,
   children: _
 }) => {
   const { languageCode: w } = L(), u = q(w), d = N(null);
-  v(() => {
+  h(() => {
     const e = d.current, s = (t) => {
-      const { clientY: p, clientX: h, target: y } = t;
+      const { clientY: b, clientX: p, target: y } = t;
       if (t instanceof KeyboardEvent && t.key === "Escape") {
         if (o === "none") {
           t.preventDefault();
@@ -37,7 +37,7 @@ import '../../assets/HeaderDrawer.css';const I = "_backdrop_1f6gf_11", M = "_dra
       }
       if (!window.getSelection()?.toString() && e && y === e && o === "any") {
         const { top: E, left: S, right: x, bottom: C } = e.getBoundingClientRect();
-        E <= p && p <= C && S <= h && h <= x || e?.close();
+        E <= b && b <= C && S <= p && p <= x || e?.close();
       }
     }, g = () => {
       const t = e?.querySelector("[autofocus]");
@@ -46,14 +46,14 @@ import '../../assets/HeaderDrawer.css';const I = "_backdrop_1f6gf_11", M = "_dra
     return e?.addEventListener("animationend", g), e?.addEventListener("click", s), e?.addEventListener("keydown", s), () => {
       e?.removeEventListener("animationend", g), e?.removeEventListener("click", s), e?.removeEventListener("keydown", s);
     };
-  }, [o, a]), v(() => {
+  }, [o, a]), h(() => {
     const e = d.current;
     e && (i ? e.open || e.showModal() : e.open && e.close());
   }, [i]);
   const k = (e) => {
     e.preventDefault(), o === "any" && a();
   };
-  return /* @__PURE__ */ c(f, { children: [
+  return /* @__PURE__ */ c(m, { children: [
     /* @__PURE__ */ r("div", { className: n.backdrop, "aria-hidden": !i }),
     /* @__PURE__ */ c(
       "dialog",
@@ -63,16 +63,16 @@ import '../../assets/HeaderDrawer.css';const I = "_backdrop_1f6gf_11", M = "_dra
         "aria-modal": "true",
         "aria-labelledby": "modal-title",
         "data-open": i,
-        "data-expanded": m,
+        "data-expanded": f,
         onCancel: k,
         className: n.drawer,
         onClose: o !== "none" ? a : void 0,
         children: [
           /* @__PURE__ */ r("div", { className: n.body, children: _ }),
-          o !== "none" && /* @__PURE__ */ r("footer", { className: n.footer, children: /* @__PURE__ */ r(D, { className: n.toggleButton, variant: "outline", onClick: b, children: m ? /* @__PURE__ */ c(f, { children: [
+          o !== "none" && /* @__PURE__ */ r("footer", { className: n.footer, children: /* @__PURE__ */ r(D, { className: n.toggleButton, variant: "outline", onClick: v, children: f ? /* @__PURE__ */ c(m, { children: [
             /* @__PURE__ */ r(z, { className: n.btnIcon, "aria-hidden": "true" }),
             u.minimize
-          ] }) : /* @__PURE__ */ c(f, { children: [
+          ] }) : /* @__PURE__ */ c(m, { children: [
             /* @__PURE__ */ r(j, { className: n.btnIcon, "aria-hidden": "true" }),
             u.fullscreen
           ] }) }) })

package/dist/components/GlobalHeader/HeaderDropdown.js

@@ -5,22 +5,22 @@ import { g as m } from "../../ToolbarSearch-56Sm2j7P.js";
 import "../Typography/Link.js";
 import "../Button/Button.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/HeaderDropdown.css';const e = "_dropdown_cdjbb_3", i = {
-  dropdown: e
-}, f = ({ id: o, open: r, onClose: d, trigger: p, children: t }) => /* @__PURE__ */ n(
+import '../../assets/HeaderDropdown.css';const s = "_dropdown_18s8n_3", e = {
+  dropdown: s
+}, g = ({ id: o, open: r, onClose: p, trigger: t, children: d }) => /* @__PURE__ */ n(
   m,
   {
-    className: i.dropdown,
+    className: e.dropdown,
     id: o,
     open: r,
-    trigger: p,
-    onClose: d,
+    trigger: t,
+    onClose: p,
     variant: "drawer-dropdown",
     placement: "right",
     size: "md",
-    children: t
+    children: d
   }
 );
 export {
-  f as HeaderDropdown
+  g as HeaderDropdown
 };

package/dist/components/Layout/Layout.js

@@ -1,58 +1,81 @@
 "use client";
-import { jsxs as r, jsx as t } from "react/jsx-runtime";
-import { LayoutBase as y } from "./LayoutBase.js";
-import { LayoutGrid as d } from "./LayoutGrid.js";
-import { LayoutBody as h } from "./LayoutBody.js";
-import { LayoutContent as L } from "./LayoutContent.js";
-import { LayoutSidebar as a } from "./LayoutSidebar.js";
-import { Breadcrumbs as s } from "../Breadcrumbs/Breadcrumbs.js";
+import { jsxs as e, jsx as t, Fragment as L } from "react/jsx-runtime";
+import { useRef as v, useState as B, useEffect as x } from "react";
+import { L as R, s as S } from "../../LayoutBase-CAdjuw9Q.js";
+import { LayoutGrid as H } from "./LayoutGrid.js";
+import { LayoutBody as z } from "./LayoutBody.js";
+import { LayoutContent as j } from "./LayoutContent.js";
+import { LayoutSidebar as C } from "./LayoutSidebar.js";
+import { Banner as F } from "../Banner/Banner.js";
+import { Breadcrumbs as G } from "../Breadcrumbs/Breadcrumbs.js";
 import "../../index-p1eeF8LQ.js";
-import { Footer as x } from "../Footer/Footer.js";
-import { GlobalHeader as B } from "../GlobalHeader/GlobalHeader.js";
-import "react";
-import { u as j, M as k } from "../../ToolbarSearch-56Sm2j7P.js";
+import { Footer as M } from "../Footer/Footer.js";
+import { GlobalHeader as w } from "../GlobalHeader/GlobalHeader.js";
+import { u as E, M as I } from "../../ToolbarSearch-56Sm2j7P.js";
 import "../Typography/Link.js";
 import "../Button/Button.js";
 import "react-dom";
 import "../Snackbar/useSnackbar.js";
-import { SkipLink as C } from "../SkipLink/SkipLink.js";
-const N = ({
-  color: c,
-  theme: u = "subtle",
-  header: i,
-  footer: n,
-  sidebar: o,
-  content: l = {},
-  children: f,
-  skipLink: p,
-  breadcrumbs: e
+import { SkipLink as N } from "../SkipLink/SkipLink.js";
+const oo = ({
+  banner: o,
+  color: a,
+  theme: h = "subtle",
+  header: n,
+  footer: c,
+  sidebar: r,
+  content: d = {},
+  children: y,
+  skipLink: m,
+  breadcrumbs: l
 }) => {
-  const { currentId: m } = j();
-  return /* @__PURE__ */ r(y, { color: c, theme: u, currentId: m, children: [
-    p && /* @__PURE__ */ t(C, { ...p }),
-    i && /* @__PURE__ */ t(B, { ...i }),
-    /* @__PURE__ */ r(d, { currentId: m, children: [
-      e && /* @__PURE__ */ t(s, { ...e }),
-      /* @__PURE__ */ r(h, { currentId: m, children: [
-        o && /* @__PURE__ */ r(
-          a,
+  const { currentId: i } = E(), s = v(null), [k, g] = B(0);
+  return x(() => {
+    const f = s.current;
+    if (!f) return;
+    const p = new ResizeObserver(([u]) => {
+      g(u.borderBoxSize[0]?.blockSize ?? u.contentRect.height);
+    });
+    return p.observe(f), () => p.disconnect();
+  }, []), /* @__PURE__ */ e(R, { color: a, theme: h, currentId: i, bannerHeight: o ? k : 0, children: [
+    m && /* @__PURE__ */ t(N, { ...m }),
+    o && /* @__PURE__ */ t("div", { ref: s, className: S.bannerWrapper, "data-color": "company", children: /* @__PURE__ */ t(
+      F,
+      {
+        title: o.link ? /* @__PURE__ */ e(L, { children: [
+          o.title,
+          " ",
+          /* @__PURE__ */ t("a", { href: o.link.href, target: "_blank", rel: "noreferrer", children: o.link.label })
+        ] }) : o.title,
+        color: o.color,
+        variant: o.variant || "strong",
+        icon: o.icon,
+        sticky: !1
+      }
+    ) }),
+    n && /* @__PURE__ */ t(w, { ...n }),
+    /* @__PURE__ */ e(H, { currentId: i, children: [
+      l && /* @__PURE__ */ t(G, { ...l }),
+      /* @__PURE__ */ e(z, { currentId: i, children: [
+        r && /* @__PURE__ */ e(
+          C,
           {
-            sticky: o?.sticky,
-            hidden: o?.hidden,
-            color: o?.color,
-            footer: o?.footer,
+            sticky: r?.sticky,
+            hidden: r?.hidden,
+            color: r?.color,
+            footer: r?.footer,
             children: [
-              o?.menu && /* @__PURE__ */ t(k, { ...o?.menu }),
-              o?.children
+              r?.menu && /* @__PURE__ */ t(I, { ...r?.menu }),
+              r?.children
             ]
           }
         ),
-        /* @__PURE__ */ t(L, { color: l?.color, id: "main-content", children: f })
+        /* @__PURE__ */ t(j, { color: d?.color, id: "main-content", children: y })
       ] })
     ] }),
-    n && /* @__PURE__ */ t(x, { ...n })
+    c && /* @__PURE__ */ t(M, { ...c })
   ] });
 };
 export {
-  N as Layout
+  oo as Layout
 };

package/dist/components/Layout/LayoutBase.js

@@ -1,7 +1,5 @@
-import { jsx as o } from "react/jsx-runtime";
-import '../../assets/LayoutBase.css';const r = "_base_k5ay7_1", c = {
-  base: r
-}, 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 });
+import "react/jsx-runtime";
+import { L as t } from "../../LayoutBase-CAdjuw9Q.js";
 export {
-  n as LayoutBase
+  t as LayoutBase
 };

package/dist/components/Layout/index.js

@@ -1,14 +1,14 @@
-import { LayoutBase as t } from "./LayoutBase.js";
-import { LayoutGrid as a } from "./LayoutGrid.js";
-import { LayoutBody as f } from "./LayoutBody.js";
-import { LayoutContent as p } from "./LayoutContent.js";
-import { LayoutSidebar as x } from "./LayoutSidebar.js";
+import { L as t } from "../../LayoutBase-CAdjuw9Q.js";
+import { LayoutGrid as e } from "./LayoutGrid.js";
+import { LayoutBody as L } from "./LayoutBody.js";
+import { LayoutContent as m } from "./LayoutContent.js";
+import { LayoutSidebar as u } from "./LayoutSidebar.js";
 import { Layout as d } from "./Layout.js";
 export {
   d as Layout,
   t as LayoutBase,
-  f as LayoutBody,
-  p as LayoutContent,
-  a as LayoutGrid,
-  x as LayoutSidebar
+  L as LayoutBody,
+  m as LayoutContent,
+  e as LayoutGrid,
+  u as LayoutSidebar
 };

package/dist/components/index.js

@@ -69,7 +69,7 @@ import { ItemControls as ae } from "./Item/ItemControls.js";
 import { ItemSelect as xe } from "./Item/ItemSelect.js";
 import { ItemBase as ie } from "./Item/ItemBase.js";
 import { ItemLink as ne } from "./Item/ItemLink.js";
-import { LayoutBase as ce } from "./Layout/LayoutBase.js";
+import { L as ce } from "../LayoutBase-CAdjuw9Q.js";
 import { LayoutGrid as de } from "./Layout/LayoutGrid.js";
 import { LayoutBody as De } from "./Layout/LayoutBody.js";
 import { LayoutContent as Be } from "./Layout/LayoutContent.js";

package/dist/index.js

@@ -69,7 +69,7 @@ import { ItemControls as ae } from "./components/Item/ItemControls.js";
 import { ItemSelect as xe } from "./components/Item/ItemSelect.js";
 import { ItemBase as ie } from "./components/Item/ItemBase.js";
 import { ItemLink as ne } from "./components/Item/ItemLink.js";
-import { LayoutBase as ce } from "./components/Layout/LayoutBase.js";
+import { L as ce } from "./LayoutBase-CAdjuw9Q.js";
 import { LayoutGrid as de } from "./components/Layout/LayoutGrid.js";
 import { LayoutBody as De } from "./components/Layout/LayoutBody.js";
 import { LayoutContent as Be } from "./components/Layout/LayoutContent.js";

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

@@ -22,3 +22,4 @@ export declare const InfoExpanded: Story;
 export declare const ErrorBanner: Story;
 export declare const ErrorExpanded: Story;
 export declare const Colors: (args: BannerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StrongCompany: (args: BannerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,10 @@
 import { ReactNode } from 'react';
 import { LayoutColor, LayoutSidebarProps, LayoutTheme } from '.';
+import { BannerColor, BannerVariant } from '../Banner';
 import { BreadcrumbsProps } from '../Breadcrumbs';
 import { FooterProps } from '../Footer';
 import { GlobalHeaderProps } from '../GlobalHeader';
+import { SvgElement } from '../Icon';
 import { MenuProps } from '../Menu';
 import { SkipLinkProps } from '../SkipLink';
 interface SidebarProps extends LayoutSidebarProps {
@@ -12,7 +14,18 @@ interface SidebarProps extends LayoutSidebarProps {
 interface ContentProps {
     color?: LayoutColor;
 }
+export interface LayoutBannerProps {
+    title: string;
+    link?: {
+        label: string;
+        href: string;
+    };
+    color?: BannerColor;
+    variant?: BannerVariant;
+    icon?: SvgElement;
+}
 export interface LayoutProps {
+    banner?: LayoutBannerProps;
     color?: LayoutColor;
     theme?: LayoutTheme;
     header?: GlobalHeaderProps;
@@ -23,5 +36,5 @@ export interface LayoutProps {
     skipLink?: SkipLinkProps;
     breadcrumbs?: BreadcrumbsProps;
 }
-export declare const Layout: ({ color, theme, header, footer, sidebar, content, children, skipLink, breadcrumbs, }: LayoutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Layout: ({ banner, color, theme, header, footer, sidebar, content, children, skipLink, breadcrumbs, }: LayoutProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -4,7 +4,7 @@ interface LayoutStoryArgs extends LayoutProps {
 }
 declare const meta: {
     title: string;
-    component: ({ color, theme, header, footer, sidebar, content, children, skipLink, breadcrumbs, }: LayoutProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ banner, color, theme, header, footer, sidebar, content, children, skipLink, breadcrumbs, }: LayoutProps) => import("react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;
     };
@@ -46,4 +46,6 @@ export declare const HiddenSidebar: (args: LayoutStoryArgs) => import("react/jsx
 export declare const Fullscreen: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;
 export declare const Profile: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;
 export declare const SidebarReference: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;
+export declare const WithBanner: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;
+export declare const WithCustomBanner: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;
 export declare const InboxLayout: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;

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

@@ -5,6 +5,7 @@ export interface LayoutBaseProps {
     color?: LayoutColor;
     theme?: LayoutTheme /** TODO: Should be renamed to variant */;
     currentId?: string;
+    bannerHeight?: number;
     children?: ReactNode;
 }
 /**
@@ -20,4 +21,4 @@ export interface LayoutBaseProps {
  *  - Footer
  *
  */
-export declare const LayoutBase: ({ currentId, color, theme, children }: LayoutBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LayoutBase: ({ currentId, color, theme, bannerHeight, children }: LayoutBaseProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

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