@altinn/altinn-components 0.10.4 → 0.12.0

package/dist/components/Layout/Layout.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs as r, jsx as m } from "react/jsx-runtime";
-import { LayoutBase as i } from "./LayoutBase.js";
+import { LayoutBase as l } from "./LayoutBase.js";
 import { LayoutBody as y } from "./LayoutBody.js";
 import { LayoutContent as c } from "./LayoutContent.js";
 import { LayoutSidebar as L } from "./LayoutSidebar.js";
@@ -12,12 +12,13 @@ import "react";
 import "../Autocomplete/AutocompleteBase.js";
 import { Menu as B } from "../Menu/Menu.js";
 import { useRootContext as C } from "../RootProvider/RootProvider.js";
-const A = ({ theme: e = "global", header: p, footer: u, sidebar: o = {}, content: t = {}, children: f }) => {
-  const { currentId: h } = C(), { menu: n, ...l } = o;
-  return /* @__PURE__ */ r(i, { theme: e, currentId: h, children: [
+import "../Snackbar/useSnackbar.js";
+const D = ({ theme: e = "global", header: p, footer: u, sidebar: o = {}, content: t = {}, children: f }) => {
+  const { currentId: h } = C(), { menu: n, ...i } = o;
+  return /* @__PURE__ */ r(l, { theme: e, currentId: h, children: [
     p && /* @__PURE__ */ m(j, { ...p }),
     /* @__PURE__ */ r(y, { currentId: h, children: [
-      o && /* @__PURE__ */ r(L, { hidden: o == null ? void 0 : o.hidden, theme: o == null ? void 0 : o.theme, ...l, children: [
+      o && /* @__PURE__ */ r(L, { hidden: o == null ? void 0 : o.hidden, theme: o == null ? void 0 : o.theme, ...i, children: [
         n && /* @__PURE__ */ m(B, { ...n }),
         o == null ? void 0 : o.children
       ] }),
@@ -27,5 +28,5 @@ const A = ({ theme: e = "global", header: p, footer: u, sidebar: o = {}, content
   ] });
 };
 export {
-  A as Layout
+  D as Layout
 };

package/dist/components/LayoutAction/ActionMenu.js

@@ -5,11 +5,12 @@ import "react";
 import { MenuItem as o } from "../Menu/MenuItem.js";
 import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
 import { MenuBase as n } from "../Menu/MenuBase.js";
-import '../../assets/ActionMenu.css';const s = "_menu_12gbo_1", l = "_list_12gbo_14", e = {
+import '../../assets/ActionMenu.css';const s = "_menu_12gbo_1", l = "_list_12gbo_14", i = {
   menu: s,
   list: l
-}, M = ({ theme: m = "inherit", items: r = [] }) => /* @__PURE__ */ t(n, { theme: m, className: e.menu, children: /* @__PURE__ */ t("ul", { className: e.list, children: r.map((i) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(o, { ...i, className: e.item }) }, i.id)) }) });
+}, N = ({ theme: r = "inherit", items: e = [] }) => /* @__PURE__ */ t(n, { theme: r, className: i.menu, children: /* @__PURE__ */ t("ul", { className: i.list, children: e.map((m) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(o, { ...m, className: i.item }) }, m.id)) }) });
 export {
-  M as ActionMenu
+  N as ActionMenu
 };

package/dist/components/List/List.js

@@ -1,20 +1,21 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as c } from "react/jsx-runtime";
 import { createElement as n } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
 import { ListItem as e } from "./ListItem.js";
 import { ListBase as f } from "./ListBase.js";
-const j = ({ theme: o, defaultItemSize: p, defaultItemColor: t, spacing: s = "md", items: m = [] }) => /* @__PURE__ */ i(f, { theme: o, spacing: s, children: m.map((r, c) => /* @__PURE__ */ n(
+const k = ({ theme: o, defaultItemSize: p, defaultItemColor: t, spacing: m = "md", items: s = [] }) => /* @__PURE__ */ c(f, { theme: o, spacing: m, children: s.map((r, i) => /* @__PURE__ */ n(
   e,
   {
     ...r,
     size: (r == null ? void 0 : r.size) || p,
     color: (r == null ? void 0 : r.color) || t,
-    key: "item" + c
+    key: "item" + i
   }
 )) });
 export {
-  j as List
+  k as List
 };

package/dist/components/List/ListItemBase.js

@@ -1,18 +1,18 @@
 import { jsx as c } from "react/jsx-runtime";
-import '../../assets/ListItemBase.css';const p = "_item_1grve_1", x = {
+import '../../assets/ListItemBase.css';const p = "_item_7qmbp_1", x = {
   item: p
-}, v = ({
+}, _ = ({
   size: e,
   variant: t = "solid",
   color: a = "neutral",
   shadow: s = "xs",
   loading: i,
-  disabled: r,
-  hidden: d = !1,
+  disabled: d,
+  hidden: r = !1,
   active: n = !1,
   selected: l,
-  expanded: o,
-  children: m
+  expanded: m,
+  children: o
 }) => /* @__PURE__ */ c(
   "article",
   {
@@ -22,13 +22,13 @@ import '../../assets/ListItemBase.css';const p = "_item_1grve_1", x = {
     "data-size": e,
     "data-shadow": a === "transparent" ? "none" : s,
     "data-active": n,
-    "aria-hidden": d,
-    "aria-disabled": r || i,
+    "aria-hidden": r,
+    "aria-disabled": d || i,
     "aria-selected": l,
-    "aria-expanded": o,
-    children: m
+    "aria-expanded": m,
+    children: o
   }
 );
 export {
-  v as ListItemBase
+  _ as ListItemBase
 };

package/dist/components/List/ListItemControls.js

@@ -1,19 +1,19 @@
-import { jsx as n, jsxs as e, Fragment as m } from "react/jsx-runtime";
-import { Badge as i } from "../Badge/Badge.js";
-import { ContextMenu as a } from "../ContextMenu/ContextMenu.js";
-import { Icon as _ } from "../Icon/Icon.js";
+import { jsx as o, jsxs as e, Fragment as i } from "react/jsx-runtime";
+import { c as a } from "../../index-L8X2o7IH.js";
+import { Badge as _ } from "../Badge/Badge.js";
+import { ContextMenu as p } from "../ContextMenu/ContextMenu.js";
+import { Icon as x } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
-import "../../index-L8X2o7IH.js";
-import '../../assets/ListItemControls.css';const p = "_controls_n31lc_1", x = "_linkText_n31lc_11", k = "_linkIcon_n31lc_16", o = {
-  controls: p,
-  linkText: x,
-  linkIcon: k
-}, h = ({ badge: s, linkText: c, linkIcon: r, menu: t, children: l }) => /* @__PURE__ */ n("div", { className: o.controls, "data-menu": t && !0, children: l || /* @__PURE__ */ e(m, { children: [
-  s && /* @__PURE__ */ n(i, { ...s }),
-  c && /* @__PURE__ */ n("span", { className: o.linkText, children: c }),
-  r && /* @__PURE__ */ n(_, { name: r, className: o.linkIcon }),
-  t && /* @__PURE__ */ n(a, { ...t, className: o.menu })
+import '../../assets/ListItemControls.css';const k = "_controls_n31lc_1", f = "_linkText_n31lc_11", I = "_linkIcon_n31lc_16", n = {
+  controls: k,
+  linkText: f,
+  linkIcon: I
+}, C = ({ className: m, badge: s, linkText: t, linkIcon: c, menu: r, children: l }) => /* @__PURE__ */ o("div", { className: a(n.controls, m), children: l || /* @__PURE__ */ e(i, { children: [
+  s && /* @__PURE__ */ o(_, { ...s }),
+  t && /* @__PURE__ */ o("span", { className: n.linkText, children: t }),
+  c && /* @__PURE__ */ o(x, { name: c, className: n.linkIcon }),
+  r && /* @__PURE__ */ o(p, { ...r, size: "sm", className: n.menu })
 ] }) });
 export {
-  h as ListItemControls
+  C as ListItemControls
 };

package/dist/components/List/ListItemHeader.js

@@ -1,64 +1,64 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { c as y } from "../../index-L8X2o7IH.js";
-import { ListItemControls as C } from "./ListItemControls.js";
-import { ListItemLabel as H } from "./ListItemLabel.js";
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { c as H } from "../../index-L8X2o7IH.js";
+import { ListItemControls as i } from "./ListItemControls.js";
+import { ListItemLabel as M } from "./ListItemLabel.js";
 import { ListItemLink as S } from "./ListItemLink.js";
 import { ListItemMedia as q } from "./ListItemMedia.js";
-import { ListItemMenu as A } from "./ListItemMenu.js";
-import { ListItemSelect as B } from "./ListItemSelect.js";
-import '../../assets/ListItemHeader.css';const D = "_header_16s1f_1", E = "_link_16s1f_8", a = {
-  header: D,
-  link: E
-}, T = ({
-  as: c,
-  loading: e,
-  disabled: p,
-  select: o,
-  href: f,
-  onClick: L,
-  onKeyPress: d,
-  tabIndex: h,
+import { ListItemSelect as A } from "./ListItemSelect.js";
+import '../../assets/ListItemHeader.css';const B = "_header_10vuh_1", D = "_link_10vuh_8", E = "_controls_10vuh_42", e = {
+  header: B,
+  link: D,
+  controls: E
+}, R = ({
+  as: a,
+  loading: o,
+  disabled: l,
+  select: s,
+  href: h,
+  onClick: d,
+  onKeyPress: p,
+  tabIndex: L,
   collapsible: m,
-  expanded: i,
-  size: t = "sm",
-  title: l,
+  expanded: n,
+  size: r = "sm",
+  title: _,
   description: I,
-  icon: k,
-  avatar: _,
-  avatarGroup: x,
-  linkIcon: j,
-  linkText: u,
-  badge: v,
-  menu: s,
-  controls: M,
-  className: N,
-  children: b
+  icon: f,
+  avatar: k,
+  avatarGroup: u,
+  linkIcon: v,
+  linkText: x,
+  badge: N,
+  menu: b,
+  controls: j,
+  className: w,
+  children: y
 }) => {
-  const w = m && i ? "chevron-up" : m ? "chevron-down" : j;
-  return /* @__PURE__ */ n("header", { className: a.header, "data-size": t, "aria-expanded": i, children: [
-    o && /* @__PURE__ */ r(B, { ...o, size: t }),
-    /* @__PURE__ */ n(
+  const C = m && n ? "chevron-up" : m ? "chevron-down" : v;
+  return /* @__PURE__ */ c("header", { className: e.header, "data-size": r, "aria-expanded": n, children: [
+    s && /* @__PURE__ */ t(A, { ...s, size: r }),
+    /* @__PURE__ */ c(
       S,
       {
-        className: y(a.link, N),
-        as: c,
-        href: f,
-        onClick: L,
-        onKeyPress: d,
-        tabIndex: h,
-        loading: e,
-        disabled: p,
-        size: t,
+        className: H(e.link, w),
+        as: a,
+        href: h,
+        onClick: d,
+        onKeyPress: p,
+        tabIndex: L,
+        loading: o,
+        disabled: l || o,
+        size: r,
         children: [
-          /* @__PURE__ */ r(q, { loading: e, size: t, icon: k, avatar: _, avatarGroup: x }),
-          /* @__PURE__ */ r(H, { loading: e, size: t, title: l, description: I, children: b }),
-          /* @__PURE__ */ r(C, { linkIcon: w, linkText: u, badge: v })
+          /* @__PURE__ */ t(q, { loading: o, size: r, icon: f, avatar: k, avatarGroup: u }),
+          /* @__PURE__ */ t(M, { loading: o, size: r, title: _, description: I, children: y }),
+          /* @__PURE__ */ t(i, { linkIcon: C, linkText: x, badge: N })
         ]
       }
     ),
-    s && /* @__PURE__ */ r(A, { ...s }) || M
+    /* @__PURE__ */ t(i, { className: e.controls, menu: b, children: j })
   ] });
 };
 export {
-  T as ListItemHeader
+  R as ListItemHeader
 };

package/dist/components/List/ListItemLabel.js

@@ -1,13 +1,13 @@
-import { jsx as e, jsxs as r, Fragment as o } from "react/jsx-runtime";
-import { Skeleton as a } from "../Skeleton/Skeleton.js";
-import '../../assets/ListItemLabel.css';const d = "_label_5sijq_3", m = "_title_5sijq_27", p = "_description_5sijq_34", s = {
-  label: d,
-  title: m,
+import { jsx as e, jsxs as n, Fragment as o } from "react/jsx-runtime";
+import { Skeleton as r } from "../Skeleton/Skeleton.js";
+import '../../assets/ListItemLabel.css';const m = "_label_eum9r_3", d = "_title_eum9r_41", p = "_description_eum9r_49", s = {
+  label: m,
+  title: d,
   description: p
-}, b = ({ loading: i = !1, size: t = "sm", title: c, description: n, children: l }) => /* @__PURE__ */ e("span", { className: s.label, "data-size": t, children: l || /* @__PURE__ */ r(o, { children: [
-  /* @__PURE__ */ e("h2", { className: s.title, "data-size": t, children: /* @__PURE__ */ e(a, { loading: i, children: c }) }),
+}, b = ({ loading: l = !1, size: t = "sm", title: a, description: c, children: i }) => /* @__PURE__ */ e("span", { className: s.label, "data-size": t, children: i || /* @__PURE__ */ n(o, { children: [
+  /* @__PURE__ */ e("h2", { className: s.title, "data-size": t, children: /* @__PURE__ */ e(r, { loading: l, children: a }) }),
   " ",
-  /* @__PURE__ */ e("p", { className: s.description, "data-size": t, children: /* @__PURE__ */ e(a, { loading: i, children: n }) })
+  /* @__PURE__ */ e("p", { className: s.description, "data-size": t, children: /* @__PURE__ */ e(r, { loading: l, children: c }) })
 ] }) });
 export {
   b as ListItemLabel

package/dist/components/Menu/MenuItemMedia.js

@@ -4,9 +4,9 @@ import { AvatarGroup as c } from "../Avatar/AvatarGroup.js";
 import { Icon as x } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
 import "../../index-L8X2o7IH.js";
-import '../../assets/MenuItemMedia.css';const f = "_media_1n26h_1", u = "_icon_1n26h_21", e = {
+import '../../assets/MenuItemMedia.css';const f = "_media_1kkjg_1", g = "_icon_1kkjg_21", e = {
   media: f,
-  icon: u
+  icon: g
 }, m = {
   avatar: {
     xs: "xs",
@@ -20,9 +20,9 @@ import '../../assets/MenuItemMedia.css';const f = "_media_1n26h_1", u = "_icon_1
     md: "sm",
     lg: "md"
   }
-}, A = ({ size: t = "sm", color: n, icon: s, avatar: o, avatarGroup: r, children: i }) => !s && !o && !r && !i ? !1 : /* @__PURE__ */ d("div", { className: e.media, "data-size": t, "data-color": s ? n : null, children: [
-  s && /* @__PURE__ */ a(x, { name: s, variant: n === "strong" ? "solid" : "outline", className: e.icon }) || o && /* @__PURE__ */ a(l, { ...o, size: m == null ? void 0 : m.avatar[t] }) || r && /* @__PURE__ */ a(c, { ...r, size: m == null ? void 0 : m.avatarGroup[t] }),
-  i
+}, A = ({ size: t = "sm", color: i, icon: s, avatar: o, avatarGroup: r, children: n }) => !s && !o && !r && !n ? !1 : /* @__PURE__ */ d("div", { className: e.media, "data-size": t, "data-color": s ? i : null, children: [
+  s && /* @__PURE__ */ a(x, { name: s, variant: i === "strong" ? "solid" : "outline", className: e.icon }) || o && /* @__PURE__ */ a(l, { ...o, size: m == null ? void 0 : m.avatar[t] }) || r && /* @__PURE__ */ a(c, { ...r, size: m == null ? void 0 : m.avatarGroup[t] }),
+  n
 ] });
 export {
   A as MenuItemMedia

package/dist/components/Menu/MenuItems.js

@@ -10,6 +10,7 @@ import { MenuSearch as G } from "./MenuSearch.js";
 import { MenuHeader as H } from "./MenuHeader.js";
 import { MenuList as K, MenuListItem as d } from "./MenuBase.js";
 import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
 const S = ({
   level: l = 0,
   expanded: v,

package/dist/components/Menu/MenuSearch.js

@@ -1,4 +1,4 @@
-import { jsxs as r, jsx as i } from "react/jsx-runtime";
+import { jsxs as e, jsx as i } from "react/jsx-runtime";
 import { Icon as a } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
 import "../../index-L8X2o7IH.js";
@@ -6,12 +6,13 @@ import "react";
 import "../Autocomplete/AutocompleteBase.js";
 import { IconButton as m } from "../Button/IconButton.js";
 import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
 import '../../assets/MenuSearch.css';const p = "_field_10py0_2", l = "_icon_10py0_7", _ = "_input_10py0_16", f = "_clear_10py0_33", o = {
   field: p,
   icon: l,
   input: _,
   clear: f
-}, j = ({ value: c, name: n, placeholder: s = "Søk", onChange: e, onClear: t }) => /* @__PURE__ */ r("div", { className: o.field, children: [
+}, v = ({ value: c, name: n, placeholder: s = "Søk", onChange: r, onClear: t }) => /* @__PURE__ */ e("div", { className: o.field, children: [
   /* @__PURE__ */ i(
     "input",
     {
@@ -20,7 +21,7 @@ import '../../assets/MenuSearch.css';const p = "_field_10py0_2", l = "_icon_10py
       name: n,
       placeholder: s,
       className: o.input,
-      onChange: e,
+      onChange: r,
       autoComplete: "off"
     }
   ),
@@ -38,5 +39,5 @@ import '../../assets/MenuSearch.css';const p = "_field_10py0_2", l = "_icon_10py
   )
 ] });
 export {
-  j as MenuSearch
+  v as MenuSearch
 };

package/dist/components/Page/Article.js

@@ -1,6 +1,6 @@
-import { jsx as e } from "react/jsx-runtime";
-import { Section as i } from "./Section.js";
-const a = ({ theme: r = "article", children: t, ...o }) => /* @__PURE__ */ e(i, { as: "article", theme: r, ...o, children: t });
+import { jsx as o } from "react/jsx-runtime";
+import { Section as e } from "./Section.js";
+const m = ({ children: r, ...t }) => /* @__PURE__ */ o(e, { as: "article", ...t, children: r });
 export {
-  a as Article
+  m as Article
 };

package/dist/components/Page/Breadcrumbs.js

@@ -0,0 +1,23 @@
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import { Icon as e } from "../Icon/Icon.js";
+import "../Icon/SvgIcon.js";
+import "../../index-L8X2o7IH.js";
+import "react";
+import "../Autocomplete/AutocompleteBase.js";
+import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
+import { BreadcrumbsLink as m } from "./BreadcrumbsLink.js";
+import '../../assets/Breadcrumbs.css';const a = "_list_8q7kr_1", p = "_item_8q7kr_12", _ = "_icon_8q7kr_18", i = {
+  list: a,
+  item: p,
+  icon: _
+}, j = ({ items: t = [] }) => /* @__PURE__ */ r("ul", { className: i.list, children: t.map((n, o) => {
+  const { label: s, ...c } = n;
+  return (t == null ? void 0 : t.length) > o + 1 ? /* @__PURE__ */ l("li", { className: i.item, children: [
+    /* @__PURE__ */ r(m, { ...c, children: s }),
+    /* @__PURE__ */ r(e, { name: "arrow-right", className: i.icon })
+  ] }, o) : /* @__PURE__ */ r("li", { className: i.item, children: /* @__PURE__ */ r(m, { ...c, as: "span", children: s }) }, o);
+}) });
+export {
+  j as Breadcrumbs
+};

package/dist/components/Page/BreadcrumbsLink.js

@@ -0,0 +1,28 @@
+import { jsx as i } from "react/jsx-runtime";
+import { c as l } from "../../index-L8X2o7IH.js";
+import '../../assets/BreadcrumbsLink.css';const m = "_link_znbj7_1", k = {
+  link: m
+}, x = ({
+  as: o,
+  className: s,
+  disabled: n = !1,
+  selected: e,
+  tabIndex: r = 0,
+  label: t,
+  children: a,
+  ...c
+}) => /* @__PURE__ */ i(
+  o || "a",
+  {
+    tabIndex: r,
+    "aria-selected": e,
+    "aria-disabled": n,
+    disabled: n,
+    className: l(k.link, s),
+    ...c,
+    children: a || t
+  }
+);
+export {
+  x as BreadcrumbsLink
+};

package/dist/components/Page/Flex.js

@@ -0,0 +1,42 @@
+import { jsx as g } from "react/jsx-runtime";
+import { c as _ } from "../../index-L8X2o7IH.js";
+import '../../assets/Flex.css';const h = "_flex_18d8p_1", j = {
+  flex: h
+}, C = ({
+  as: a = "div",
+  theme: t = "inherit",
+  color: n = "transparent",
+  direction: e = "col",
+  reverse: o = !1,
+  align: i = "initial",
+  justify: s = "initial",
+  spacing: d = "none",
+  padding: r = "none",
+  margin: l = "none",
+  inset: c = !1,
+  className: f,
+  style: m,
+  children: p,
+  ...x
+}) => /* @__PURE__ */ g(
+  a,
+  {
+    className: _(j.flex, f),
+    style: m,
+    "data-theme": t,
+    "data-color": n,
+    "data-direction": e,
+    "data-reverse": o,
+    "data-align": i,
+    "data-justify": s,
+    "data-spacing": d,
+    "data-padding": r,
+    "data-margin": l,
+    "data-inset": c,
+    ...x,
+    children: p
+  }
+);
+export {
+  C as Flex
+};

package/dist/components/Page/Grid.js

@@ -0,0 +1,34 @@
+import { jsx as p } from "react/jsx-runtime";
+import { c as g } from "../../index-L8X2o7IH.js";
+import '../../assets/Grid.css';const l = "_grid_o95ym_1", f = {
+  grid: l
+}, v = ({
+  as: a = "div",
+  theme: t = "inherit",
+  color: n = "transparent",
+  cols: o = "1-2-3",
+  reverse: r = !1,
+  spacing: e = "none",
+  padding: d = "none",
+  margin: s = "none",
+  className: i,
+  style: c,
+  children: m
+}) => /* @__PURE__ */ p(
+  a,
+  {
+    className: g(f.grid, i),
+    style: c,
+    "data-theme": t,
+    "data-color": n,
+    "data-cols": o,
+    "data-reverse": r,
+    "data-spacing": e,
+    "data-padding": d,
+    "data-margin": s,
+    children: m
+  }
+);
+export {
+  v as Grid
+};

package/dist/components/Page/PageHeader.js

@@ -1,19 +1,21 @@
 import { jsxs as r, jsx as i } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
-import { Heading as a } from "../Typography/Heading.js";
+import { Heading as d } from "../Typography/Heading.js";
 import "react";
 import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
-import { ListItemMedia as d } from "../List/ListItemMedia.js";
-import { Section as e } from "./Section.js";
-const u = ({ title: o, icon: m, avatar: t, avatarGroup: p, children: n, ...s }) => /* @__PURE__ */ r(e, { as: "header", spacing: "md", ...s, children: [
-  /* @__PURE__ */ r(e, { flex: "row", align: "center", spacing: "md", children: [
-    /* @__PURE__ */ i(d, { avatar: t, avatarGroup: p, icon: m, size: "lg" }),
-    /* @__PURE__ */ i(a, { size: "lg", children: o })
+import { ListItemMedia as s } from "../List/ListItemMedia.js";
+import "../Snackbar/useSnackbar.js";
+import { Section as a } from "./Section.js";
+import { Flex as c } from "./Flex.js";
+const I = ({ title: o, icon: e, avatar: m, avatarGroup: t, children: p, ...n }) => /* @__PURE__ */ r(a, { as: "header", spacing: "md", ...n, children: [
+  /* @__PURE__ */ r(c, { direction: "row", align: "center", spacing: "md", children: [
+    /* @__PURE__ */ i(s, { avatar: m, avatarGroup: t, icon: e, size: "lg" }),
+    /* @__PURE__ */ i(d, { size: "xl", children: o })
   ] }),
-  n
+  p
 ] });
 export {
-  u as PageHeader
+  I as PageHeader
 };

package/dist/components/Page/PageNav.js

@@ -1,30 +1,34 @@
-import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "react";
 import "../Autocomplete/AutocompleteBase.js";
-import { Button as s } from "../Button/Button.js";
+import { Button as m } from "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
-import { ContextMenu as l } from "../ContextMenu/ContextMenu.js";
-import { Section as c } from "./Section.js";
-import '../../assets/PageNav.css';const a = "_nav_9bu1z_1", m = "_controls_9bu1z_7", p = {
-  nav: a,
-  controls: m
-}, g = ({
-  padding: n = "none",
+import { ContextMenu as a } from "../ContextMenu/ContextMenu.js";
+import "../Snackbar/useSnackbar.js";
+import { Flex as c } from "./Flex.js";
+import { Breadcrumbs as p } from "./Breadcrumbs.js";
+import '../../assets/PageNav.css';const f = "_nav_9bu1z_1", v = "_controls_9bu1z_7", d = {
+  nav: f,
+  controls: v
+}, M = ({
+  padding: i = "none",
+  margin: s = "none",
+  breadcrumbs: t,
   backButton: o = {
     as: "a",
     label: "Back"
   },
-  menu: r,
-  children: i
-}) => /* @__PURE__ */ e(c, { flex: "row", align: "center", justify: "between", padding: n, children: [
-  /* @__PURE__ */ t(s, { ...o, variant: "text", color: "secondary", icon: "arrow-left", children: (o == null ? void 0 : o.label) || "Back" }),
-  /* @__PURE__ */ e("div", { className: p.controls, children: [
-    i,
-    r && /* @__PURE__ */ t(l, { ...r })
+  menu: e,
+  children: l
+}) => /* @__PURE__ */ n(c, { as: "nav", direction: "row", align: "center", justify: "between", padding: i, margin: s, children: [
+  t ? /* @__PURE__ */ r(p, { items: t }) : /* @__PURE__ */ r(m, { ...o, variant: "text", color: "secondary", icon: "arrow-left", children: (o == null ? void 0 : o.label) || "Back" }),
+  /* @__PURE__ */ n("div", { className: d.controls, children: [
+    l,
+    e && /* @__PURE__ */ r(a, { ...e })
   ] })
 ] });
 export {
-  g as PageNav
+  M as PageNav
 };