@altinn/altinn-components 0.11.0 → 0.13.0

package/dist/components/GlobalMenu/GlobalMenu.js

@@ -9,64 +9,65 @@ import { AccountMenu as F } from "./AccountMenu.js";
 import { AccountButton as L } from "./AccountButton.js";
 import { BackButton as H } from "./BackButton.js";
 import { LogoutButton as I } from "./LogoutButton.js";
-import { MenuListItem as a } from "../Menu/MenuBase.js";
+import "../Snackbar/useSnackbar.js";
+import { MenuListItem as m } from "../Menu/MenuBase.js";
 import { Menu as h } from "../Menu/Menu.js";
-import { GlobalMenuBase as m, GlobalMenuHeader as g, GlobalMenuFooter as W } from "./GlobalMenuBase.js";
-const R = ({
+import { GlobalMenuBase as a, GlobalMenuHeader as g, GlobalMenuFooter as W } from "./GlobalMenuBase.js";
+const S = ({
   accounts: c = [],
   accountGroups: M = {},
   accountSearch: k,
-  items: s = [],
-  groups: p,
+  items: p = [],
+  groups: s,
   changeLabel: b = "Change",
   backLabel: B = "Back",
-  currentAccount: o,
+  currentAccount: e,
   onSelectAccount: i,
-  onClose: e,
+  onClose: o,
   logoutButton: u
 }) => {
   const [x, G] = j(!1), n = () => {
     G((t) => !t);
   }, v = (t) => {
     n(), i == null || i(t);
-  }, d = A(() => s.map((t) => ({
+  }, d = A(() => p.map((t) => ({
     ...t,
     onClick: () => {
       var f;
-      (f = t.onClick) == null || f.call(t), e == null || e();
+      (f = t.onClick) == null || f.call(t), o == null || o();
     }
-  })), [s, e]);
-  return x ? /* @__PURE__ */ l(m, { children: [
+  })), [p, o]);
+  return x ? /* @__PURE__ */ l(a, { children: [
     /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(H, { onClick: n, label: B }) }),
-    /* @__PURE__ */ r(a, { as: "div", role: "separator" }),
+    /* @__PURE__ */ r(m, { as: "div", role: "separator" }),
     /* @__PURE__ */ r(
       F,
       {
-        currentAccount: o,
+        currentAccount: e,
         accounts: c,
         accountGroups: M,
         accountSearch: k,
         onSelectAccount: v
       }
     )
-  ] }) : o ? /* @__PURE__ */ l(m, { children: [
+  ] }) : e ? /* @__PURE__ */ l(a, { children: [
     /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(
       L,
       {
-        account: o,
+        account: e,
         linkText: b,
         multipleAccounts: c.length > 1,
         onClick: n
       }
     ) }),
-    /* @__PURE__ */ r(a, { as: "div", role: "separator" }),
-    /* @__PURE__ */ r(h, { groups: p, items: d }),
+    /* @__PURE__ */ r(m, { as: "div", role: "separator" }),
+    /* @__PURE__ */ r(h, { groups: s, items: d }),
     u && /* @__PURE__ */ l(T, { children: [
-      /* @__PURE__ */ r(a, { as: "div", role: "separator" }),
+      /* @__PURE__ */ r(m, { as: "div", role: "separator" }),
       /* @__PURE__ */ r(W, { children: /* @__PURE__ */ r(I, { ...u }) })
     ] })
-  ] }) : /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(h, { groups: p, items: d }) });
+  ] }) : /* @__PURE__ */ r(a, { children: /* @__PURE__ */ r(h, { groups: s, items: d }) });
 };
 export {
-  R as GlobalMenu
+  S as GlobalMenu
 };

package/dist/components/Header/Header.js

@@ -12,12 +12,13 @@ import { HeaderBase as H } from "./HeaderBase.js";
 import { HeaderLogo as _ } from "./HeaderLogo.js";
 import { HeaderButton as b } from "./HeaderButton.js";
 import { Searchbar as B } from "../Searchbar/Searchbar.js";
+import "../Snackbar/useSnackbar.js";
 import { HeaderMenu as N } from "./HeaderMenu.js";
 import { HeaderSearch as S } from "./HeaderSearch.js";
 import '../../assets/Header.css';const v = "_drawer_ft5v3_1", y = "_dropdown_ft5v3_5", s = {
   drawer: v,
   dropdown: y
-}, K = ({ search: n, menu: r, currentAccount: a, logo: l = {}, badge: i }) => {
+}, O = ({ search: n, menu: r, currentAccount: a, logo: l = {}, badge: i }) => {
   const { currentId: o, toggleId: d, openId: c, closeAll: t } = C(), h = () => {
     c("search");
   }, f = () => {
@@ -48,5 +49,5 @@ import '../../assets/Header.css';const v = "_drawer_ft5v3_1", y = "_dropdown_ft5
   ] });
 };
 export {
-  K as Header
+  O as Header
 };

package/dist/components/Header/HeaderBase.js

@@ -5,13 +5,14 @@ import "react";
 import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
 import { Backdrop as m } from "../Dropdown/Backdrop.js";
+import "../Snackbar/useSnackbar.js";
 import '../../assets/HeaderBase.css';const i = "_header_5ao8r_1", n = "_backdrop_5ao8r_11", r = {
   header: i,
   backdrop: n
-}, j = ({ currentId: o, className: a, children: e, open: c, onClose: t }) => /* @__PURE__ */ s("header", { className: p(r.header, a), "data-current-id": o, children: [
-  c && /* @__PURE__ */ d(m, { className: r.backdrop, onClick: t }),
+}, u = ({ currentId: o, className: a, children: e, open: t, onClose: c }) => /* @__PURE__ */ s("header", { className: p(r.header, a), "data-current-id": o, children: [
+  t && /* @__PURE__ */ d(m, { className: r.backdrop, onClick: c }),
   e
 ] });
 export {
-  j as HeaderBase
+  u as HeaderBase
 };

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/Layout/LayoutBase.js

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

package/dist/components/LayoutAction/ActionMenu.js

@@ -2,14 +2,15 @@ import { jsx as t } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "react";
-import { MenuItem as o } from "../Menu/MenuItem.js";
 import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
+import { MenuItem as o } from "../Menu/MenuItem.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/Menu/MenuItem.js

@@ -1,7 +1,7 @@
-import { jsxs as s, jsx as m } from "react/jsx-runtime";
-import { MenuItemBase as k } from "./MenuItemBase.js";
-import { MenuItemLabel as L } from "./MenuItemLabel.js";
-import { MenuItemMedia as b } from "./MenuItemMedia.js";
+import { jsxs as b, jsx as m } from "react/jsx-runtime";
+import { MenuItemBase as d } from "./MenuItemBase.js";
+import { MenuItemLabel as k } from "./MenuItemLabel.js";
+import { MenuItemMedia as L } from "./MenuItemMedia.js";
 const B = ({
   as: t = "a",
   color: e = "neutral",
@@ -10,28 +10,39 @@ const B = ({
   expanded: o,
   icon: c,
   avatar: i,
-  avatarGroup: p,
-  title: a,
+  avatarGroup: a,
+  title: p,
   description: u,
   badge: I,
-  linkText: l,
-  linkIcon: M,
-  label: f,
-  ...h
-}) => /* @__PURE__ */ s(
-  k,
+  alertBadge: l,
+  linkText: M,
+  linkIcon: f,
+  label: h,
+  ...s
+}) => /* @__PURE__ */ b(
+  d,
   {
     as: t,
     size: n,
     badge: I,
-    linkText: l,
-    linkIcon: r && o ? "chevron-up" : r ? "chevron-down" : M,
+    linkText: M,
+    linkIcon: r && o ? "chevron-up" : r ? "chevron-down" : f,
     color: e,
     expanded: o,
-    ...h,
+    ...s,
     children: [
-      /* @__PURE__ */ m(b, { color: e, size: n, icon: c, avatar: i, avatarGroup: p }),
-      /* @__PURE__ */ m(L, { title: a, description: u, size: n, children: f })
+      /* @__PURE__ */ m(
+        L,
+        {
+          badge: l,
+          color: e,
+          size: n,
+          icon: c,
+          avatar: i,
+          avatarGroup: a
+        }
+      ),
+      /* @__PURE__ */ m(k, { title: p, description: u, size: n, children: h })
     ]
   }
 );

package/dist/components/Menu/MenuItemMedia.js

@@ -1,18 +1,24 @@
-import { jsxs as d, jsx as a } from "react/jsx-runtime";
-import { Avatar as l } from "../Avatar/Avatar.js";
-import { AvatarGroup as c } from "../Avatar/AvatarGroup.js";
-import { Icon as x } from "../Icon/Icon.js";
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { Icon as c } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
 import "../../index-L8X2o7IH.js";
-import '../../assets/MenuItemMedia.css';const f = "_media_1kkjg_1", g = "_icon_1kkjg_21", e = {
-  media: f,
-  icon: g
+import "react";
+import "../Autocomplete/AutocompleteBase.js";
+import { Badge as p } from "../Badge/Badge.js";
+import { Avatar as x } from "../Avatar/Avatar.js";
+import { AvatarGroup as _ } from "../Avatar/AvatarGroup.js";
+import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
+import '../../assets/MenuItemMedia.css';const g = "_media_rtso6_1", u = "_icon_rtso6_22", f = "_badge_rtso6_55", i = {
+  media: g,
+  icon: u,
+  badge: f
 }, m = {
   avatar: {
     xs: "xs",
     sm: "sm",
     md: "md",
-    lg: "lg"
+    lg: "xl"
   },
   avatarGroup: {
     xs: "xs",
@@ -20,10 +26,19 @@ import '../../assets/MenuItemMedia.css';const f = "_media_1kkjg_1", g = "_icon_1
     md: "sm",
     lg: "md"
   }
-}, 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
+}, q = ({
+  size: s = "sm",
+  color: e,
+  icon: o,
+  avatar: r,
+  avatarGroup: a,
+  badge: d,
+  children: n
+}) => !o && !r && !a && !n ? null : /* @__PURE__ */ l("div", { className: i.media, "data-size": s, "data-color": o ? e : null, children: [
+  o && /* @__PURE__ */ t(c, { name: o, variant: e === "strong" ? "solid" : "outline", className: i.icon }) || r && /* @__PURE__ */ t(x, { ...r, size: m == null ? void 0 : m.avatar[s] }) || a && /* @__PURE__ */ t(_, { ...a, size: m == null ? void 0 : m.avatarGroup[s] }),
+  n,
+  d && /* @__PURE__ */ t(p, { className: i.badge, color: "alert", size: "xs", ...d })
 ] });
 export {
-  A as MenuItemMedia
+  q 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/Breadcrumbs.js

@@ -1,22 +1,23 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
+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 { BreadcrumbsLink as n } from "./BreadcrumbsLink.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: _
-}, g = ({ items: t = [] }) => /* @__PURE__ */ r("ul", { className: i.list, children: t.map((l, o) => {
-  const { label: s, ...c } = l;
-  return (t == null ? void 0 : t.length) > o + 1 ? /* @__PURE__ */ m("li", { className: i.item, children: [
-    /* @__PURE__ */ r(n, { ...c, children: s }),
+}, 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(n, { ...c, as: "span", children: s }) }, o);
+  ] }, o) : /* @__PURE__ */ r("li", { className: i.item, children: /* @__PURE__ */ r(m, { ...c, as: "span", children: s }) }, o);
 }) });
 export {
-  g as Breadcrumbs
+  j as Breadcrumbs
 };

package/dist/components/Page/Flex.js

@@ -1,42 +1,38 @@
-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 = ({
+import { jsx as x } from "react/jsx-runtime";
+import { c as p } from "../../index-L8X2o7IH.js";
+import '../../assets/Flex.css';const g = "_flex_h50e9_1", _ = {
+  flex: g
+}, y = ({
   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",
+  direction: t = "col",
+  reverse: n = !1,
+  align: e = "initial",
+  justify: o = "initial",
+  spacing: i = "none",
+  padding: s = "none",
   margin: l = "none",
-  inset: c = !1,
-  className: f,
-  style: m,
-  children: p,
-  ...x
-}) => /* @__PURE__ */ g(
+  inset: d = !1,
+  className: r,
+  style: c,
+  children: f,
+  ...m
+}) => /* @__PURE__ */ x(
   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,
+    className: p(_.flex, r),
+    style: c,
+    "data-direction": t,
+    "data-reverse": n,
+    "data-align": e,
+    "data-justify": o,
+    "data-spacing": i,
+    "data-padding": s,
     "data-margin": l,
-    "data-inset": c,
-    ...x,
-    children: p
+    "data-inset": d,
+    ...m,
+    children: f
   }
 );
 export {
-  C as Flex
+  y as Flex
 };

package/dist/components/Page/PageHeader.js

@@ -6,15 +6,16 @@ import "react";
 import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
 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 F = ({ title: e, icon: o, avatar: m, avatarGroup: t, children: p, ...n }) => /* @__PURE__ */ r(a, { as: "header", spacing: "md", ...n, children: [
+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: o, size: "lg" }),
-    /* @__PURE__ */ i(d, { size: "xl", children: e })
+    /* @__PURE__ */ i(s, { avatar: m, avatarGroup: t, icon: e, size: "lg" }),
+    /* @__PURE__ */ i(d, { size: "xl", children: o })
   ] }),
   p
 ] });
 export {
-  F as PageHeader
+  I as PageHeader
 };

package/dist/components/Page/PageNav.js

@@ -1,4 +1,4 @@
-import { jsxs as t, jsx as r } 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";
@@ -6,28 +6,29 @@ import "../Autocomplete/AutocompleteBase.js";
 import { Button as m } from "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 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
-}, F = ({
+}, M = ({
   padding: i = "none",
   margin: s = "none",
-  breadcrumbs: e,
+  breadcrumbs: t,
   backButton: o = {
     as: "a",
     label: "Back"
   },
-  menu: n,
+  menu: e,
   children: l
-}) => /* @__PURE__ */ t(c, { as: "nav", direction: "row", align: "center", justify: "between", padding: i, margin: s, children: [
-  e ? /* @__PURE__ */ r(p, { items: e }) : /* @__PURE__ */ r(m, { ...o, variant: "text", color: "secondary", icon: "arrow-left", children: (o == null ? void 0 : o.label) || "Back" }),
-  /* @__PURE__ */ t("div", { className: d.controls, children: [
+}) => /* @__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,
-    n && /* @__PURE__ */ r(a, { ...n })
+    e && /* @__PURE__ */ r(a, { ...e })
   ] })
 ] });
 export {
-  F as PageNav
+  M as PageNav
 };

package/dist/components/Page/Section.js

@@ -1,13 +1,25 @@
 import { jsx as e } from "react/jsx-runtime";
-import { c as m } from "../../index-L8X2o7IH.js";
+import { c as a } from "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "react";
 import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
 import { Flex as n } from "./Flex.js";
-import '../../assets/Section.css';const a = "_section_167jj_1", p = {
-  section: a
-}, g = ({ as: o = "section", className: t, bg: s, shadow: i, children: r, ...c }) => /* @__PURE__ */ e(n, { as: o, "data-bg": s, "data-shadow": i, className: m(p.section, t), ...c, children: r });
+import '../../assets/Section.css';const p = "_section_1u2zl_1", l = {
+  section: p
+}, j = ({ as: o = "section", className: t, bg: r, color: s, shadow: i, children: c, ...m }) => /* @__PURE__ */ e(
+  n,
+  {
+    as: o,
+    "data-bg": r,
+    "data-color": s,
+    "data-shadow": i,
+    className: a(l.section, t),
+    ...m,
+    children: c
+  }
+);
 export {
-  g as Section
+  j as Section
 };

package/dist/components/ResourceList/ResourceList.js

@@ -4,9 +4,10 @@ import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
 import { ResourceListItem as p } from "./ResourceListItem.js";
 import { ListBase as s } from "../List/ListBase.js";
-const x = ({ items: o, defaultItemSize: t = "md", ...m }) => /* @__PURE__ */ e(s, { ...m, children: o.map((r) => /* @__PURE__ */ i(p, { ...r, key: r.id, size: t })) });
+const R = ({ items: o, defaultItemSize: t = "md", ...m }) => /* @__PURE__ */ e(s, { ...m, children: o.map((r) => /* @__PURE__ */ i(p, { ...r, key: r.id, size: t })) });
 export {
-  x as ResourceList
+  R as ResourceList
 };

package/dist/components/ResourceList/ResourceListItem.js

@@ -4,8 +4,9 @@ import "react";
 import "../Icon/SvgIcon.js";
 import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
 import { ListItem as e } from "../List/ListItem.js";
-const u = ({
+const x = ({
   ownerName: t,
   resourceName: r,
   ownerLogoUrlAlt: i,
@@ -26,5 +27,5 @@ const u = ({
   }
 );
 export {
-  u as ResourceListItem
+  x as ResourceListItem
 };