@altinn/altinn-components 0.56.8 → 0.56.10

package/dist/components/GlobalMenu_old/GlobalMenuButton.js

@@ -6,6 +6,7 @@ import "react";
 import { Button as u } from "../Button/Button.js";
 import { ButtonIcon as I } from "../Button/ButtonIcon.js";
 import { ButtonLabel as h } from "../Button/ButtonLabel.js";
+import "react-dom";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { S as N } from "../../XMark-tKk6aExO.js";
@@ -18,31 +19,31 @@ import '../../assets/GlobalMenuButton.css';const v = "_button_1uh95_1", b = "_av
   avatar: S,
   icon: k,
   badge: L
-}, F = ({
+}, H = ({
   className: c,
   as: t = "button",
-  color: s = "company",
-  variant: r = "solid",
-  currentAccount: d,
-  expanded: p,
+  color: r = "company",
+  variant: s = "solid",
+  currentAccount: p,
+  expanded: d,
   label: i = "Menu",
   badge: a,
   ...m
-}) => p ? /* @__PURE__ */ e(u, { ...m, as: t, variant: r, color: s, className: l(n.button, c), children: [
+}) => d ? /* @__PURE__ */ e(u, { ...m, as: t, variant: s, color: r, className: l(n.button, c), children: [
   /* @__PURE__ */ o(h, { children: i }),
   /* @__PURE__ */ o(I, { className: n.closeIcon, icon: /* @__PURE__ */ o(N, { className: n.icon, "aria-label": "Close Icon" }) }),
   a && /* @__PURE__ */ o(_, { ...a, className: n.badge })
-] }) : d ? /* @__PURE__ */ e(u, { ...m, as: t, variant: r, color: s, className: l(n.button, c), children: [
+] }) : p ? /* @__PURE__ */ e(u, { ...m, as: t, variant: s, color: r, className: l(n.button, c), children: [
   /* @__PURE__ */ o(h, { children: i }),
   /* @__PURE__ */ o(
     I,
     {
       className: n.avatarIcon,
-      icon: /* @__PURE__ */ o(f, { ...d?.icon, className: n.avatar })
+      icon: /* @__PURE__ */ o(f, { ...p?.icon, className: n.avatar })
     }
   ),
   a && /* @__PURE__ */ o(_, { ...a, className: n.badge })
-] }) : /* @__PURE__ */ e(u, { ...m, as: t, variant: r, color: s, className: l(n.button, c), children: [
+] }) : /* @__PURE__ */ e(u, { ...m, as: t, variant: s, color: r, className: l(n.button, c), children: [
   /* @__PURE__ */ o(h, { children: i }),
   /* @__PURE__ */ o(
     I,
@@ -54,5 +55,5 @@ import '../../assets/GlobalMenuButton.css';const v = "_button_1uh95_1", b = "_av
   a && /* @__PURE__ */ o(_, { ...a, className: n.badge })
 ] });
 export {
-  F as GlobalMenuButton_old
+  H as GlobalMenuButton_old
 };

package/dist/components/GlobalMenu_old/LogoutButton.js

@@ -1,12 +1,13 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as n } from "react/jsx-runtime";
 import { Button as i } from "../Button/Button.js";
 import "../../index-p1eeF8LQ.js";
 import "react";
+import "react-dom";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/LogoutButton.css';const s = "_button_1260s_1", u = {
-  button: s
-}, b = ({ label: t = "Logout", children: o, onClick: n }) => /* @__PURE__ */ r(i, { className: u.button, variant: "outline", size: "lg", onClick: n, children: o || t });
+import '../../assets/LogoutButton.css';const m = "_button_1260s_1", s = {
+  button: m
+}, g = ({ label: t = "Logout", children: o, onClick: r }) => /* @__PURE__ */ n(i, { className: s.button, variant: "outline", size: "lg", onClick: r, children: o || t });
 export {
-  b as LogoutButton
+  g as LogoutButton
 };

package/dist/components/Header/Header.js

@@ -1,10 +1,11 @@
 "use client";
-import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
 import { useIsDesktop as H } from "../../hooks/useIsDesktop.js";
 import "../Button/Button.js";
 import { DropdownBase as S } from "../Dropdown/DropdownBase.js";
+import "react-dom";
 import { DrawerBase as k } from "../Dropdown/DrawerBase.js";
 import { useRootContext as B } from "../RootProvider/RootProvider.js";
 import { GlobalMenu_old as u } from "../GlobalMenu_old/GlobalMenu.js";
@@ -16,11 +17,11 @@ import { HeaderSearch as h } from "./HeaderSearch.js";
 import { LocaleSwitcher as L } from "./LocaleSwitcher.js";
 import { Searchbar as f } from "../Searchbar/Searchbar.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/Header.css';const N = "_drawer_afyu3_1", g = "_dropdown_afyu3_6", j = "_relative_afyu3_19", m = {
+import '../../assets/Header.css';const N = "_drawer_afyu3_1", g = "_dropdown_afyu3_6", j = "_relative_afyu3_19", d = {
   drawer: N,
   dropdown: g,
   relative: j
-}, b = ({
+}, A = ({
   globalMenu: r,
   desktopMenu: w,
   mobileMenu: _,
@@ -37,7 +38,7 @@ import '../../assets/Header.css';const N = "_drawer_afyu3_1", g = "_dropdown_afy
   }, y = () => {
     p("menu");
   }, l = H();
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ m(
     I,
     {
       currentId: e,
@@ -46,9 +47,9 @@ import '../../assets/Header.css';const N = "_drawer_afyu3_1", g = "_dropdown_afy
       children: [
         /* @__PURE__ */ o(F, { ...x, badge: C }),
         n && l && /* @__PURE__ */ o(h, { expanded: e === "search", children: /* @__PURE__ */ o(f, { ...n, expanded: e === "search", onClose: c, onFocus: i }) }),
-        /* @__PURE__ */ d(G, { children: [
+        /* @__PURE__ */ m(G, { children: [
           a && /* @__PURE__ */ o(L, { ...a }),
-          /* @__PURE__ */ d("div", { className: m.relative, children: [
+          /* @__PURE__ */ m("div", { className: d.relative, children: [
             /* @__PURE__ */ o(
               D,
               {
@@ -66,7 +67,7 @@ import '../../assets/Header.css';const N = "_drawer_afyu3_1", g = "_dropdown_afy
                 size: "lg",
                 placement: "right",
                 open: e === "menu",
-                className: m.dropdown,
+                className: d.dropdown,
                 children: /* @__PURE__ */ o(
                   u,
                   {
@@ -81,7 +82,7 @@ import '../../assets/Header.css';const N = "_drawer_afyu3_1", g = "_dropdown_afy
           ] })
         ] }),
         n && !l && /* @__PURE__ */ o(h, { expanded: e === "search", children: /* @__PURE__ */ o(f, { ...n, expanded: e === "search", onClose: c, onFocus: i }) }),
-        r && /* @__PURE__ */ o(k, { open: e === "menu", className: m.drawer, children: /* @__PURE__ */ o(
+        r && /* @__PURE__ */ o(k, { open: e === "menu", className: d.drawer, children: /* @__PURE__ */ o(
           u,
           {
             ...r,
@@ -95,5 +96,5 @@ import '../../assets/Header.css';const N = "_drawer_afyu3_1", g = "_dropdown_afy
   );
 };
 export {
-  b as Header
+  A as Header
 };

package/dist/components/Header/HeaderBase.js

@@ -1,17 +1,18 @@
-import { jsxs as t, jsx as s } from "react/jsx-runtime";
+import { jsxs as d, jsx as s } from "react/jsx-runtime";
 import { c as p } from "../../index-p1eeF8LQ.js";
 import "react";
 import "../Button/Button.js";
+import "react-dom";
 import { Backdrop as m } from "../Dropdown/Backdrop.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import '../../assets/HeaderBase.css';const i = "_header_dg4o1_1", n = "_backdrop_dg4o1_17", r = {
   header: i,
   backdrop: n
-}, g = ({ currentId: o, className: e, children: a, open: c, onClose: d }) => /* @__PURE__ */ t("header", { className: p(r.header, e), "data-current-id": o, children: [
-  c && /* @__PURE__ */ s(m, { className: r.backdrop, onClick: d }),
+}, j = ({ currentId: o, className: e, children: a, open: t, onClose: c }) => /* @__PURE__ */ d("header", { className: p(r.header, e), "data-current-id": o, children: [
+  t && /* @__PURE__ */ s(m, { className: r.backdrop, onClick: c }),
   a
 ] });
 export {
-  g as HeaderBase
+  j as HeaderBase
 };

package/dist/components/Header/HeaderButton.js

@@ -6,6 +6,7 @@ import { Badge as p } from "../Badge/Badge.js";
 import { Button as _ } from "../Button/Button.js";
 import "react";
 import { Icon as f } from "../Icon/Icon.js";
+import "react-dom";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { S as I } from "../../XMark-tKk6aExO.js";
@@ -18,35 +19,35 @@ import '../../assets/HeaderButton.css';const y = "_button_1p2eq_1", S = "_label_
   loginIcon: G,
   closeIcon: k,
   badge: B
-}, J = ({
+}, K = ({
   className: s,
   as: t = "button",
   color: a = "company",
-  variant: l = "solid",
+  variant: r = "solid",
   avatar: u,
   avatarGroup: d,
   icon: N = q,
   expanded: h,
-  label: r = "Menu",
+  label: l = "Menu",
   badge: n,
   ...m
-}) => h ? /* @__PURE__ */ i(_, { ...m, as: t, variant: l, color: a, className: c(o.button, s), children: [
-  /* @__PURE__ */ e("span", { className: o.label, children: r }),
+}) => h ? /* @__PURE__ */ i(_, { ...m, as: t, variant: r, color: a, className: c(o.button, s), children: [
+  /* @__PURE__ */ e("span", { className: o.label, children: l }),
   /* @__PURE__ */ e("span", { className: c(o.icon, o.closeIcon), children: /* @__PURE__ */ e(f, { svgElement: I }) }),
   n && /* @__PURE__ */ e(p, { ...n, className: o.badge })
-] }) : d ? /* @__PURE__ */ i(_, { ...m, as: t, variant: l, color: a, className: c(o.button, s), children: [
-  /* @__PURE__ */ e("span", { className: o.label, children: r }),
+] }) : d ? /* @__PURE__ */ i(_, { ...m, as: t, variant: r, color: a, className: c(o.button, s), children: [
+  /* @__PURE__ */ e("span", { className: o.label, children: l }),
   /* @__PURE__ */ e(g, { ...d, className: o.avatarGroup }),
   n && /* @__PURE__ */ e(p, { ...n, className: o.badge })
-] }) : u ? /* @__PURE__ */ i(_, { ...m, as: t, variant: l, color: a, className: c(o.button, s), children: [
-  /* @__PURE__ */ e("span", { className: o.label, children: r }),
+] }) : u ? /* @__PURE__ */ i(_, { ...m, as: t, variant: r, color: a, className: c(o.button, s), children: [
+  /* @__PURE__ */ e("span", { className: o.label, children: l }),
   /* @__PURE__ */ e(b, { type: u?.type, name: u?.name, style: { fontSize: "2.25rem" } }),
   n && /* @__PURE__ */ e(p, { ...n, className: o.badge })
-] }) : /* @__PURE__ */ i(_, { ...m, as: t, variant: l, color: a, className: c(o.button, s), children: [
-  /* @__PURE__ */ e("span", { className: o.label, children: r }),
+] }) : /* @__PURE__ */ i(_, { ...m, as: t, variant: r, color: a, className: c(o.button, s), children: [
+  /* @__PURE__ */ e("span", { className: o.label, children: l }),
   /* @__PURE__ */ e("span", { className: c(o.icon, o.loginIcon), children: /* @__PURE__ */ e(f, { svgElement: N }) }),
   n && /* @__PURE__ */ e(p, { ...n, className: o.badge })
 ] });
 export {
-  J as HeaderButton
+  K as HeaderButton
 };

package/dist/components/Header/LocaleButton.js

@@ -1,18 +1,19 @@
 "use client";
 import { jsx as t } from "react/jsx-runtime";
-import { c as s } from "../../index-p1eeF8LQ.js";
+import { c as m } from "../../index-p1eeF8LQ.js";
 import "react";
-import { Button as m } from "../Button/Button.js";
+import { Button as s } from "../Button/Button.js";
+import "react-dom";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { S as i } from "../../Globe-BcPkcH4E.js";
 import '../../assets/LocaleButton.css';const p = "_button_mvy87_1", c = "_expanded_mvy87_13", o = {
   button: p,
   expanded: c
-}, f = ({ id: e = "language-switcher", expanded: n, onClick: r, onBlurCapture: a }) => /* @__PURE__ */ t(
-  m,
+}, v = ({ id: e = "language-switcher", expanded: n, onClick: r, onBlurCapture: a }) => /* @__PURE__ */ t(
+  s,
   {
-    className: s(o.button, n && o.expanded),
+    className: m(o.button, n && o.expanded),
     rounded: !0,
     size: "lg",
     variant: "ghost",
@@ -23,5 +24,5 @@ import '../../assets/LocaleButton.css';const p = "_button_mvy87_1", c = "_expand
   }
 );
 export {
-  f as LocaleButton
+  v as LocaleButton
 };

package/dist/components/Header/LocaleSwitcher.js

@@ -5,14 +5,15 @@ import { useEnterKey as v } from "../../hooks/useEnterKey.js";
 import { useIsDesktop as b } from "../../hooks/useIsDesktop.js";
 import { DropdownBase as x } from "../Dropdown/DropdownBase.js";
 import "../../index-p1eeF8LQ.js";
+import "react-dom";
 import "../Button/Button.js";
-import { a as p } from "../../SearchField-xsZAikgq.js";
+import { a as p } from "../../SearchField-CYYz0JvC.js";
 import { useRootContext as I } from "../RootProvider/RootProvider.js";
 import { LocaleButton as S } from "./LocaleButton.js";
 import "../Snackbar/useSnackbar.js";
 import { DrawerBase as w } from "../Dropdown/DrawerBase.js";
 import { S as C } from "../../Checkmark-Byz_C9x4.js";
-const z = ({ title: m = "Select language", options: s, onSelect: a }) => {
+const F = ({ title: m = "Select language", options: s, onSelect: a }) => {
   const i = k(null), c = b(), { currentId: d, toggleId: f, closeAll: n } = I(), o = d === "locale", l = h(() => s.map((e) => ({
     ...e,
     id: String(e.value),
@@ -40,5 +41,5 @@ const z = ({ title: m = "Select language", options: s, onSelect: a }) => {
   ] });
 };
 export {
-  z as LocaleSwitcher
+  F as LocaleSwitcher
 };

package/dist/components/Icon/Icon.js

@@ -1,8 +1,9 @@
-import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
 import { c as _ } from "../../index-p1eeF8LQ.js";
 import "react";
 import { Skeleton as d } from "../Skeleton/Skeleton.js";
 import "../Button/Button.js";
+import "react-dom";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import '../../assets/Icon.css';const g = "_icon_1y3dz_1", h = "_shape_1y3dz_9", v = "_svg_1y3dz_14", y = "_image_1y3dz_15", a = {
@@ -10,23 +11,23 @@ import '../../assets/Icon.css';const g = "_icon_1y3dz_1", h = "_shape_1y3dz_9",
   shape: h,
   svg: v,
   image: y
-}, I = (s) => typeof s == "object" && s !== null && ("svgElement" in s || "iconUrl" in s), k = ({
+}, k = (s) => typeof s == "object" && s !== null && ("svgElement" in s || "iconUrl" in s), E = ({
   loading: s,
   altText: o,
   svgElement: t,
-  size: i,
-  color: n,
-  iconUrl: c,
-  className: r,
+  size: c,
+  color: r,
+  iconUrl: i,
+  className: n,
   style: m,
-  children: l
-}) => /* @__PURE__ */ e("span", { "data-ui": "icon", "data-size": i, "data-color": n, className: _(a.icon, r), style: m, children: /* @__PURE__ */ p(d, { loading: s, variant: "circle", className: a.shape, children: [
+  children: p
+}) => /* @__PURE__ */ e("span", { "data-ui": "icon", "data-size": c, "data-color": r, className: _(a.icon, n), style: m, children: /* @__PURE__ */ l(d, { loading: s, variant: "circle", className: a.shape, children: [
   /* @__PURE__ */ e("span", { className: a.shape }),
   t && /* @__PURE__ */ e(t, { "aria-hidden": "true", "alt-label": o, className: a.svg }),
-  c && /* @__PURE__ */ e("img", { src: c, alt: o, className: a.image }),
-  l
+  i && /* @__PURE__ */ e("img", { src: i, alt: o, className: a.image }),
+  p
 ] }) });
 export {
-  k as Icon,
-  I as isIconProps
+  E as Icon,
+  k as isIconProps
 };

package/dist/components/InboxSearch/InboxSearch.js

@@ -1,31 +1,32 @@
-import { jsxs as i, Fragment as m, jsx as e } from "react/jsx-runtime";
+import { jsxs as a, Fragment as m, jsx as e } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
 import "../Button/Button.js";
-import { useRootContext as s } from "../RootProvider/RootProvider.js";
-import { Searchbar as p } from "../Searchbar/Searchbar.js";
+import { useRootContext as p } from "../RootProvider/RootProvider.js";
+import { Searchbar as s } from "../Searchbar/Searchbar.js";
 import "../Snackbar/useSnackbar.js";
+import "react-dom";
 import { Backdrop as x } from "../Dropdown/Backdrop.js";
-const C = ({ search: n }) => {
-  const { currentId: o, toggleId: t, openId: c } = s(), a = () => {
+const g = ({ search: n }) => {
+  const { currentId: o, toggleId: t, openId: c } = p(), i = () => {
     c("inboxSearch");
   }, r = () => {
     t("inboxSearch");
   };
-  return /* @__PURE__ */ i(m, { children: [
+  return /* @__PURE__ */ a(m, { children: [
     o === "inboxSearch" && /* @__PURE__ */ e(x, { onClick: r }),
     /* @__PURE__ */ e(
-      p,
+      s,
       {
         ...n,
         expanded: o === "inboxSearch",
         onClose: r,
-        onFocus: a,
+        onFocus: i,
         useGlobalHeader: !0
       }
     )
   ] });
 };
 export {
-  C as InboxSearch
+  g as InboxSearch
 };

package/dist/components/Item/ItemMedia.js

@@ -5,6 +5,7 @@ import { Icon as s, isIconProps as e } from "../Icon/Icon.js";
 import { isAvatarProps as i, Avatar as f } from "../Avatar/Avatar.js";
 import { isAvatarGroupProps as n, AvatarGroup as u } from "../Avatar/AvatarGroup.js";
 import "../Button/Button.js";
+import "react-dom";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { S as _ } from "../../XMark-tKk6aExO.js";
@@ -17,7 +18,7 @@ import '../../assets/ItemMedia.css';const G = "_media_1089b_3", N = "_icon_1089b
 function x(r) {
   return typeof r == "string" || typeof r == "number" || typeof r == "boolean" || r === null || d(r);
 }
-const R = ({ className: r, loading: p, icon: a, children: c }) => {
+const V = ({ className: r, loading: p, icon: a, children: c }) => {
   if (!a)
     return null;
   if (p)
@@ -29,5 +30,5 @@ const R = ({ className: r, loading: p, icon: a, children: c }) => {
   ] });
 };
 export {
-  R as ItemMedia
+  V as ItemMedia
 };

package/dist/components/Layout/Layout.js

@@ -1,48 +1,60 @@
 "use client";
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import { LayoutBase as h } from "./LayoutBase.js";
-import { LayoutBody as a } from "./LayoutBody.js";
-import { LayoutContent as y } from "./LayoutContent.js";
-import { LayoutSidebar as d } from "./LayoutSidebar.js";
-import { Footer as x } from "../Footer/Footer.js";
-import { GlobalHeader as L } from "../GlobalHeader/GlobalHeader.js";
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { LayoutBase as d } from "./LayoutBase.js";
+import { LayoutGrid as a } from "./LayoutGrid.js";
+import { LayoutBody as s } from "./LayoutBody.js";
+import { LayoutContent as h } from "./LayoutContent.js";
+import { LayoutSidebar as L } 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 S } from "../../SearchField-xsZAikgq.js";
-import { useRootContext as j } from "../RootProvider/RootProvider.js";
-import { Header as B } from "../Header/Header.js";
+import { M as k } from "../../SearchField-CYYz0JvC.js";
+import { useRootContext as C } from "../RootProvider/RootProvider.js";
+import { Header as F } from "../Header/Header.js";
 import "../Snackbar/useSnackbar.js";
-import { InboxSearch as C } from "../InboxSearch/InboxSearch.js";
-import { SkipLink as F } from "../SkipLink/SkipLink.js";
-const N = ({
-  color: f,
+import "react-dom";
+import { SkipLink as G } from "../SkipLink/SkipLink.js";
+const Q = ({
+  color: p,
   theme: l = "subtle",
-  header: t,
-  footer: i,
+  header: i,
+  footer: e,
   sidebar: o,
   content: u = {},
-  children: s,
-  skipLink: c,
-  useGlobalHeader: e = !1
+  children: f,
+  skipLink: n,
+  breadcrumbs: c,
+  useGlobalHeader: y = !1
 }) => {
-  const { currentId: n } = j(), p = t && "search" in t ? t.search : void 0;
-  return /* @__PURE__ */ m(h, { color: f, theme: n === "accountFullscreen" ? "default" : l, currentId: n, children: [
-    c && /* @__PURE__ */ r(F, { ...c }),
-    t && (e ? /* @__PURE__ */ r(L, { ...t }) : /* @__PURE__ */ r(B, { ...t })),
-    /* @__PURE__ */ m(a, { currentId: n, children: [
-      o && /* @__PURE__ */ m(d, { hidden: o?.hidden, color: o?.color, footer: o?.footer, children: [
-        o?.menu && /* @__PURE__ */ r(S, { ...o?.menu }),
-        o?.children
-      ] }),
-      /* @__PURE__ */ m(y, { color: u?.color, id: "main-content", children: [
-        e && p && /* @__PURE__ */ r(C, { search: p }),
-        s
+  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, { items: c }),
+      /* @__PURE__ */ m(s, { currentId: r, children: [
+        o && /* @__PURE__ */ m(
+          L,
+          {
+            sticky: o?.sticky,
+            hidden: o?.hidden,
+            color: o?.color,
+            footer: o?.footer,
+            children: [
+              o?.menu && /* @__PURE__ */ t(k, { ...o?.menu }),
+              o?.children
+            ]
+          }
+        ),
+        /* @__PURE__ */ t(h, { color: u?.color, id: "main-content", children: f })
       ] })
     ] }),
-    i && /* @__PURE__ */ r(x, { ...i })
+    e && /* @__PURE__ */ t(B, { ...e })
   ] });
 };
 export {
-  N as Layout
+  Q as Layout
 };

package/dist/components/Layout/LayoutBody.js

@@ -1,7 +1,7 @@
-import { jsx as d } from "react/jsx-runtime";
-import '../../assets/LayoutBody.css';const s = "_body_1voih_1", r = {
-  body: s
-}, a = ({ currentId: o, children: t }) => /* @__PURE__ */ d("div", { className: r.body, "data-current-id": o, children: t });
+import { jsx as s } from "react/jsx-runtime";
+import '../../assets/LayoutBody.css';const d = "_body_1s4on_1", r = {
+  body: d
+}, n = ({ currentId: o, children: t }) => /* @__PURE__ */ s("div", { className: r.body, "data-current-id": o, children: t });
 export {
-  a as LayoutBody
+  n as LayoutBody
 };

package/dist/components/Layout/LayoutContent.js

@@ -1,5 +1,5 @@
 import { jsx as c } from "react/jsx-runtime";
-import '../../assets/LayoutContent.css';const e = "_content_1xz06_1", s = {
+import '../../assets/LayoutContent.css';const e = "_content_1508z_1", s = {
   content: e
 }, r = ({ color: t, children: n, id: o = "main-content" }) => /* @__PURE__ */ c("main", { className: s.content, "data-color": t, id: o, children: n });
 export {

package/dist/components/Layout/LayoutGrid.js

@@ -0,0 +1,7 @@
+import { jsx as i } from "react/jsx-runtime";
+import '../../assets/LayoutGrid.css';const o = "_grid_6h47e_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 });
+export {
+  c as LayoutGrid
+};

package/dist/components/Layout/LayoutSidebar.js

@@ -1,11 +1,11 @@
 import { jsxs as d, jsx as i } from "react/jsx-runtime";
-import '../../assets/LayoutSidebar.css';const c = "_sidebar_1yk7j_1", n = "_footer_1yk7j_9", a = {
+import '../../assets/LayoutSidebar.css';const c = "_sidebar_1b5b3_1", b = "_footer_1b5b3_10", a = {
   sidebar: c,
-  footer: n
-}, _ = ({ color: e, hidden: r = !1, sticky: o, children: t, footer: s }) => /* @__PURE__ */ d("aside", { className: a.sidebar, "data-color": e, "data-sticky": o, "aria-hidden": r, children: [
+  footer: b
+}, l = ({ color: e, hidden: r = !1, sticky: o, children: t, footer: s }) => /* @__PURE__ */ d("aside", { className: a.sidebar, "data-color": e, "data-sticky": o, "aria-hidden": r, children: [
   t,
   s && /* @__PURE__ */ i("div", { className: a.footer, children: s })
 ] });
 export {
-  _ as LayoutSidebar
+  l as LayoutSidebar
 };

package/dist/components/Layout/index.js

@@ -1,12 +1,14 @@
-import { LayoutBase as r } from "./LayoutBase.js";
-import { LayoutBody as a } from "./LayoutBody.js";
-import { LayoutContent as f } from "./LayoutContent.js";
-import { LayoutSidebar as p } from "./LayoutSidebar.js";
-import { Layout as x } from "./Layout.js";
+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 { Layout as d } from "./Layout.js";
 export {
-  x as Layout,
-  r as LayoutBase,
-  a as LayoutBody,
-  f as LayoutContent,
-  p as LayoutSidebar
+  d as Layout,
+  t as LayoutBase,
+  f as LayoutBody,
+  p as LayoutContent,
+  a as LayoutGrid,
+  x as LayoutSidebar
 };

package/dist/components/LayoutAction/ActionHeader.js

@@ -3,27 +3,28 @@ import "../../index-p1eeF8LQ.js";
 import "react";
 import { Heading as n } from "../Typography/Heading.js";
 import { Button as c } from "../Button/Button.js";
+import "react-dom";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { S as h } from "../../XMark-tKk6aExO.js";
-import '../../assets/ActionHeader.css';const f = "_header_f05a9_1", p = "_title_f05a9_38", _ = "_dismiss_f05a9_44", t = {
-  header: f,
-  title: p,
+import '../../assets/ActionHeader.css';const p = "_header_f05a9_1", f = "_title_f05a9_38", _ = "_dismiss_f05a9_44", t = {
+  header: p,
+  title: f,
   dismiss: _
-}, y = ({
-  color: s,
-  theme: i,
+}, z = ({
+  color: i,
+  theme: s,
   hidden: a = !1,
   title: r,
   dismissable: o = !0,
   dismissIconAltText: m = "Close",
   onDismiss: d
-}) => /* @__PURE__ */ l("header", { className: t.header, "aria-hidden": a, "data-color": s, "data-theme": i, children: [
+}) => /* @__PURE__ */ l("header", { className: t.header, "aria-hidden": a, "data-color": i, "data-theme": s, children: [
   /* @__PURE__ */ e(n, { size: "sm", className: t.title, children: r }),
   o && /* @__PURE__ */ e(
     c,
     {
-      color: s,
+      color: i,
       variant: "outline",
       onClick: d,
       className: t.dismiss,
@@ -33,5 +34,5 @@ import '../../assets/ActionHeader.css';const f = "_header_f05a9_1", p = "_title_
   )
 ] });
 export {
-  y as ActionHeader
+  z as ActionHeader
 };

package/dist/components/LayoutAction/LayoutAction.js

@@ -2,13 +2,14 @@ import { jsxs as c, jsx as o } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
 import "../Button/Button.js";
+import "react-dom";
 import "../RootProvider/RootProvider.js";
 import { LayoutBase as s } from "../Layout/LayoutBase.js";
 import { ActionHeader as f } from "./ActionHeader.js";
 import { ActionFooter as u } from "./ActionFooter.js";
 import "../Snackbar/useSnackbar.js";
 import { PageMenu as x } from "../Page/PageMenu.js";
-const H = ({
+const M = ({
   color: r = "company",
   theme: t = "base",
   hidden: i,
@@ -33,5 +34,5 @@ const H = ({
   /* @__PURE__ */ o(u, { hidden: i, children: m && /* @__PURE__ */ o(x, { ...m, theme: t, color: r }) })
 ] });
 export {
-  H as LayoutAction
+  M as LayoutAction
 };