@altinn/altinn-components 0.61.2 → 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/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_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/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/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/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/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/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/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_1m3p1_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 });
+import "react/jsx-runtime";
+import { L as t } from "../../LayoutBase-CAdjuw9Q.js";
 export {
-  m as LayoutBase
+  t as LayoutBase
 };