@altinn/altinn-components 0.52.7 → 0.53.1

package/dist/components/Modal/ModalFooter.js

@@ -1,10 +1,11 @@
 import { jsx as t } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
+import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { Flex as p } from "../Page/Flex.js";
-const d = ({ children: o, ...r }) => /* @__PURE__ */ t(p, { as: "footer", spacing: 2, padding: 4, ...r, children: o });
+const f = ({ children: o, ...r }) => /* @__PURE__ */ t(p, { as: "footer", spacing: 2, padding: 4, ...r, children: o });
 export {
-  d as ModalFooter
+  f as ModalFooter
 };

package/dist/components/Modal/ModalHeader.js

@@ -1,53 +1,43 @@
-import { jsx as r, jsxs as e } from "react/jsx-runtime";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { c as h } from "../../index-p1eeF8LQ.js";
 import "react";
-import { Heading as s } from "../Typography/Heading.js";
-import { IconButton as p } from "../Button/IconButton.js";
+import { Heading as m } from "../Typography/Heading.js";
+import { Button as f } from "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as o } from "../Page/Flex.js";
-import { Section as g } from "../Page/Section.js";
-import { ModalIcon as f } from "./ModalIcon.js";
-import { S as y } from "../../XMark-tKk6aExO.js";
-import '../../assets/ModalHeader.css';const u = "_header_7ty99_1", x = "_sticky_7ty99_6", m = {
-  header: u,
-  sticky: x
-}, A = ({
-  title: t,
-  description: i,
+import { Flex as t } from "../Page/Flex.js";
+import { ModalIcon as p } from "./ModalIcon.js";
+import { S as g } from "../../XMark-tKk6aExO.js";
+import '../../assets/ModalHeader.css';const y = "_header_nhvlf_1", u = "_sticky_nhvlf_11", c = {
+  header: y,
+  sticky: u
+}, H = ({
+  title: o,
+  description: e,
   icon: n,
-  onClose: c,
-  closeTitle: a,
-  children: d,
-  sticky: l = !0
-}) => /* @__PURE__ */ r(g, { as: "header", spacing: 2, padding: 4, className: h(m.header, l && m.sticky), children: /* @__PURE__ */ e(o, { direction: "row", justify: "between", align: "center", spacing: 8, children: [
-  d || /* @__PURE__ */ e(o, { direction: "row", align: "center", spacing: 3, children: [
-    n && /* @__PURE__ */ r(f, { icon: n }),
-    /* @__PURE__ */ e(o, { direction: "col", spacing: 0, children: [
-      t && /* @__PURE__ */ r(s, { as: "h2", size: i ? "md" : "lg", children: t }),
-      i && /* @__PURE__ */ r(s, { as: "h3", size: "xs", weight: "normal", children: i })
+  onClose: a,
+  closeTitle: s,
+  children: l,
+  sticky: d = !0
+}) => /* @__PURE__ */ r("header", { className: h(c.header, d && c.sticky), children: /* @__PURE__ */ i(t, { direction: "row", justify: "between", align: "center", spacing: 8, style: { flexGrow: 1 }, children: [
+  l || /* @__PURE__ */ i(t, { direction: "row", align: "center", spacing: 3, children: [
+    n && /* @__PURE__ */ r(p, { icon: n }),
+    /* @__PURE__ */ i(t, { direction: "col", spacing: 0, children: [
+      o && /* @__PURE__ */ r(m, { as: "h2", size: e ? "md" : "lg", children: o }),
+      e && /* @__PURE__ */ r(m, { as: "h3", size: "xs", weight: "normal", children: e })
     ] })
   ] }),
-  (c || a) && /* @__PURE__ */ r(
+  (a || s) && /* @__PURE__ */ r(
     "form",
     {
       method: "dialog",
       onSubmit: () => {
-        c?.();
+        a?.();
       },
-      children: /* @__PURE__ */ r(
-        p,
-        {
-          type: "submit",
-          icon: y,
-          variant: "outline",
-          iconAltText: a ?? "Close",
-          size: "sm"
-        }
-      )
+      children: /* @__PURE__ */ r(f, { type: "submit", variant: "outline", "aria-label": s ?? "Close", size: "sm", children: /* @__PURE__ */ r(g, { style: { fontSize: "1.5em" } }) })
     }
   )
 ] }) });
 export {
-  A as ModalHeader
+  H as ModalHeader
 };

package/dist/components/Modal/ModalIcon.js

@@ -1,9 +1,10 @@
 import { jsx as t } from "react/jsx-runtime";
-import { isValidElement as p } from "react";
+import { isValidElement as s } from "react";
 import "../../index-p1eeF8LQ.js";
 import { Icon as e, isIconProps as m } from "../Icon/Icon.js";
-import { isAvatarProps as n, Avatar as c } from "../Avatar/Avatar.js";
-import { isAvatarGroupProps as i, AvatarGroup as v } from "../Avatar/AvatarGroup.js";
+import { isAvatarProps as n, Avatar as i } from "../Avatar/Avatar.js";
+import { isAvatarGroupProps as c, AvatarGroup as v } from "../Avatar/AvatarGroup.js";
+import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { S as l } from "../../XMark-tKk6aExO.js";
@@ -14,9 +15,9 @@ import '../../assets/ListItemIcon.css';const f = "_wrapper_rcjve_1", _ = "_icon_
   avatarGroup: N
 };
 function d(a) {
-  return typeof a == "string" || typeof a == "number" || typeof a == "boolean" || a === null || p(a);
+  return typeof a == "string" || typeof a == "number" || typeof a == "boolean" || a === null || s(a);
 }
-const b = ({ loading: a, icon: r, theme: s }) => r ? a ? /* @__PURE__ */ t(e, { className: o.wrapper, svgElement: l, loading: !0 }) : /* @__PURE__ */ t("div", { className: o.wrapper, children: n(r) && /* @__PURE__ */ t(c, { ...r, className: o.avatar }) || i(r) && /* @__PURE__ */ t(v, { ...r, className: o.avatarGroup }) || m(r) && /* @__PURE__ */ t(e, { ...r, theme: r.theme || s, className: o.icon }) || d(r) && r || /* @__PURE__ */ t(e, { theme: s, svgElement: r, className: o.icon }) }) : null;
+const h = ({ loading: a, icon: r, theme: p }) => r ? a ? /* @__PURE__ */ t(e, { className: o.wrapper, svgElement: l, loading: !0 }) : /* @__PURE__ */ t("div", { className: o.wrapper, children: n(r) && /* @__PURE__ */ t(i, { ...r, className: o.avatar }) || c(r) && /* @__PURE__ */ t(v, { ...r, className: o.avatarGroup }) || m(r) && /* @__PURE__ */ t(e, { ...r, theme: r.theme || p, className: o.icon }) || d(r) && r || /* @__PURE__ */ t(e, { theme: p, svgElement: r, className: o.icon }) }) : null;
 export {
-  b as ModalIcon
+  h as ModalIcon
 };

package/dist/components/Notifications/NotificationItem.js

@@ -1,17 +1,18 @@
 import { jsx as o } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
+import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import { NotificationItemBase as r } from "./NotificationItemBase.js";
 import "../Snackbar/useSnackbar.js";
-const x = ({
+const I = ({
   loading: m,
   id: e = "notification",
   icon: t,
   title: i,
-  description: n,
-  ...p
-}) => m ? /* @__PURE__ */ o(r, { icon: t, title: i, loading: !0 }) : /* @__PURE__ */ o(r, { ...p, icon: t, title: i, description: n });
+  description: p,
+  ...n
+}) => m ? /* @__PURE__ */ o(r, { icon: t, title: i, loading: !0 }) : /* @__PURE__ */ o(r, { ...n, icon: t, title: i, description: p });
 export {
-  x as NotificationItem
+  I as NotificationItem
 };

package/dist/components/Notifications/NotificationItemBase.js

@@ -1,6 +1,7 @@
 import { jsx as o, jsxs as r } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
+import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import { getAriaLabelFromTitle as j } from "../Menu/MenuItemLabel.js";
 import { ListItemBase as B } from "../List/ListItemBase.js";
@@ -15,12 +16,12 @@ import '../../assets/NotificationItemBase.css';const C = "_item_w20tn_1", T = "_
   link: g,
   linkFocus: q,
   controls: D
-}, U = ({
+}, V = ({
   as: s,
   href: m,
   ref: n,
   disabled: a,
-  loading: e,
+  loading: i,
   onClick: c,
   onKeyPress: l,
   tabIndex: _,
@@ -29,7 +30,7 @@ import '../../assets/NotificationItemBase.css';const C = "_item_w20tn_1", T = "_
   icon: f,
   iconBadge: h,
   label: k,
-  title: i,
+  title: e,
   description: N,
   highlightWords: L,
   dismissable: b,
@@ -38,7 +39,7 @@ import '../../assets/NotificationItemBase.css';const C = "_item_w20tn_1", T = "_
   contextMenu: w,
   ...F
 }) => {
-  const x = F.ariaLabel || j(i);
+  const x = F.ariaLabel || j(e);
   return /* @__PURE__ */ o(B, { ref: n, className: t.item, color: d, variant: p, size: "md", children: /* @__PURE__ */ r("header", { className: t.header, children: [
     /* @__PURE__ */ o(A, { icon: f, badge: h }),
     /* @__PURE__ */ r(
@@ -49,8 +50,8 @@ import '../../assets/NotificationItemBase.css';const C = "_item_w20tn_1", T = "_
         onClick: c,
         onKeyPress: l,
         tabIndex: _,
-        loading: e,
-        disabled: a || e,
+        loading: i,
+        disabled: a || i,
         ariaLabel: x,
         className: t.link,
         children: [
@@ -58,10 +59,10 @@ import '../../assets/NotificationItemBase.css';const C = "_item_w20tn_1", T = "_
           /* @__PURE__ */ o(
             y,
             {
-              loading: e,
+              loading: i,
               highlightWords: L,
               className: t.label,
-              title: i,
+              title: e,
               description: N,
               children: k
             }
@@ -82,5 +83,5 @@ import '../../assets/NotificationItemBase.css';const C = "_item_w20tn_1", T = "_
   ] }) });
 };
 export {
-  U as NotificationItemBase
+  V as NotificationItemBase
 };

package/dist/components/Notifications/NotificationItemControls.js

@@ -1,33 +1,23 @@
-import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
-import { IconButton as p } from "../Button/IconButton.js";
-import { ContextMenu as f } from "../ContextMenu/ContextMenu.js";
+import { Button as l } from "../Button/Button.js";
+import { ContextMenu as p } from "../ContextMenu/ContextMenu.js";
 import "../RootProvider/RootProvider.js";
-import { ListItemControls as l } from "../List/ListItemControls.js";
+import { ListItemControls as a } from "../List/ListItemControls.js";
 import "../Snackbar/useSnackbar.js";
-import { S as c } from "../../XMark-tKk6aExO.js";
-const S = ({
-  className: r,
+import { S as f } from "../../XMark-tKk6aExO.js";
+const k = ({
+  className: t,
   loading: i,
   dismissable: m,
-  dismissLabel: n,
-  onDismiss: s,
-  contextMenu: o
-}) => i ? null : /* @__PURE__ */ e(l, { className: r, children: [
-  o && /* @__PURE__ */ t(f, { ...o }),
-  m && /* @__PURE__ */ t(
-    p,
-    {
-      rounded: !0,
-      variant: "text",
-      icon: c,
-      iconAltText: n || "Dismiss",
-      onClick: s,
-      size: "xs"
-    }
-  )
+  dismissLabel: s,
+  onDismiss: n,
+  contextMenu: r
+}) => i ? null : /* @__PURE__ */ e(a, { className: t, children: [
+  r && /* @__PURE__ */ o(p, { ...r }),
+  m && /* @__PURE__ */ o(l, { variant: "ghost", "aria-label": s || "Dismiss", onClick: n, size: "xs", children: /* @__PURE__ */ o(f, { style: { fontSize: "1.5em" } }) })
 ] });
 export {
-  S as NotificationItemControls
+  k as NotificationItemControls
 };

package/dist/components/Notifications/NotificationItemIcon.js

@@ -1,10 +1,11 @@
-import { jsx as r, jsxs as o, Fragment as n } from "react/jsx-runtime";
-import { isValidElement as p } from "react";
+import { jsx as r, jsxs as o, Fragment as p } from "react/jsx-runtime";
+import { isValidElement as n } from "react";
 import { Badge as i } from "../Badge/Badge.js";
 import { Icon as e, isIconProps as c } from "../Icon/Icon.js";
 import "../../index-p1eeF8LQ.js";
 import { isAvatarProps as l, Avatar as _ } from "../Avatar/Avatar.js";
 import { isAvatarGroupProps as f, AvatarGroup as v } from "../Avatar/AvatarGroup.js";
+import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { S as d } from "../../XMark-tKk6aExO.js";
@@ -16,18 +17,18 @@ import '../../assets/NotificationItemIcon.css';const u = "_icon_15rz1_1", g = "_
   badge: b
 };
 function z(t) {
-  return typeof t == "string" || typeof t == "number" || typeof t == "boolean" || t === null || p(t);
+  return typeof t == "string" || typeof t == "number" || typeof t == "boolean" || t === null || n(t);
 }
-const B = ({ loading: t, icon: a, badge: m }) => a ? t ? /* @__PURE__ */ r("div", { className: s.icon, children: /* @__PURE__ */ r(e, { svgElement: d, loading: !0 }) }) : /* @__PURE__ */ o("div", { className: s.icon, children: [
-  l(a) && /* @__PURE__ */ r(_, { ...a, className: s.avatar }) || f(a) && /* @__PURE__ */ r(v, { ...a, className: s.avatarGroup }) || c(a) && /* @__PURE__ */ o(n, { children: [
+const F = ({ loading: t, icon: a, badge: m }) => a ? t ? /* @__PURE__ */ r("div", { className: s.icon, children: /* @__PURE__ */ r(e, { svgElement: d, loading: !0 }) }) : /* @__PURE__ */ o("div", { className: s.icon, children: [
+  l(a) && /* @__PURE__ */ r(_, { ...a, className: s.avatar }) || f(a) && /* @__PURE__ */ r(v, { ...a, className: s.avatarGroup }) || c(a) && /* @__PURE__ */ o(p, { children: [
     /* @__PURE__ */ r("span", { className: s.shape }),
     /* @__PURE__ */ r(e, { ...a })
-  ] }) || z(a) && a || /* @__PURE__ */ o(n, { children: [
+  ] }) || z(a) && a || /* @__PURE__ */ o(p, { children: [
     /* @__PURE__ */ r("span", { className: s.shape }),
     /* @__PURE__ */ r(e, { svgElement: a })
   ] }),
   m && /* @__PURE__ */ r(i, { ...m, size: "xs", variant: "base", className: s.badge })
 ] }) : null;
 export {
-  B as NotificationItemIcon
+  F as NotificationItemIcon
 };

package/dist/components/Page/AccordionSection.js

@@ -2,14 +2,15 @@ import { jsx as r } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
 import { Typography as e } from "../Typography/Typography.js";
+import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { PageDetails as n } from "./PageDetails.js";
 import { Section as c } from "./Section.js";
-const g = ({ items: o }) => /* @__PURE__ */ r(c, { children: o?.map((t) => {
+const x = ({ items: o }) => /* @__PURE__ */ r(c, { children: o?.map((t) => {
   const { id: i, title: m, children: p } = t;
   return /* @__PURE__ */ r(n, { summary: m, children: /* @__PURE__ */ r(e, { children: p }) }, i);
 }) });
 export {
-  g as AccordionSection
+  x as AccordionSection
 };

package/dist/components/Page/Breadcrumbs.js

@@ -2,11 +2,12 @@
 import { jsx as i, jsxs as m } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import { Icon as f } from "../Icon/Icon.js";
-import s, { forwardRef as d } from "react";
+import s, { forwardRef as p } from "react";
+import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { BreadcrumbsLink as c } from "./BreadcrumbsLink.js";
-import { u as p } from "../../useId-BVFxCjkq.js";
+import { u as d } from "../../useId-BVFxCjkq.js";
 import '../../assets/Breadcrumbs.css';var u = function(e, n) {
   var r = {};
   for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && n.indexOf(t) < 0 && (r[t] = e[t]);
@@ -15,9 +16,9 @@ import '../../assets/Breadcrumbs.css';var u = function(e, n) {
       n.indexOf(t[l]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[l]) && (r[t[l]] = e[t[l]]);
   return r;
 };
-const h = d((e, n) => {
+const h = p((e, n) => {
   var { title: r, titleId: t } = e, l = u(e, ["title", "titleId"]);
-  let o = p();
+  let o = d();
   return o = r ? t || "title-" + o : void 0, s.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),
@@ -28,7 +29,7 @@ const h = d((e, n) => {
   list: _,
   item: b,
   icon: g
-}, k = ({ items: e = [] }) => /* @__PURE__ */ i("ul", { className: a.list, children: e.map((n, r) => {
+}, N = ({ items: e = [] }) => /* @__PURE__ */ i("ul", { className: a.list, children: e.map((n, r) => {
   const { label: t, ...l } = n;
   return e?.length > r + 1 ? /* @__PURE__ */ m("li", { className: a.item, children: [
     /* @__PURE__ */ i(c, { ...l, children: t }),
@@ -36,5 +37,5 @@ const h = d((e, n) => {
   ] }, r) : /* @__PURE__ */ i("li", { className: a.item, children: /* @__PURE__ */ i(c, { ...l, as: "span", children: t }) }, r);
 }) });
 export {
-  k as Breadcrumbs
+  N as Breadcrumbs
 };

package/dist/components/Page/ContactButtons.js

@@ -1,11 +1,16 @@
-import { jsx as m } from "react/jsx-runtime";
-import { createElement as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+import { createElement as p } from "react";
 import "../../index-p1eeF8LQ.js";
-import { Button as i } from "../Button/Button.js";
+import { Button as u } from "../Button/Button.js";
+import { ButtonIcon as c } from "../Button/ButtonIcon.js";
+import { ButtonLabel as a } from "../Button/ButtonLabel.js";
+import { ButtonGroup as l } from "../Button/ButtonGroup.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as n } from "./Flex.js";
-const x = ({ items: t }) => /* @__PURE__ */ m(n, { spacing: 2, children: t.map((r, o) => /* @__PURE__ */ e(i, { ...r, variant: "outline", key: o })) });
+const v = ({ items: o }) => /* @__PURE__ */ t(l, { children: o.map((r, n) => {
+  const { icon: m, label: i, ...e } = r;
+  return /* @__PURE__ */ p(u, { ...e, variant: "outline", key: n }, /* @__PURE__ */ t(c, { icon: m }), /* @__PURE__ */ t(a, { children: i }));
+}) });
 export {
-  x as ContactButtons
+  v as ContactButtons
 };

package/dist/components/Page/ContactSection.js

@@ -3,11 +3,12 @@ import "../../index-p1eeF8LQ.js";
 import "react";
 import { Typography as a } from "../Typography/Typography.js";
 import { Heading as s } from "../Typography/Heading.js";
+import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { Section as g } from "./Section.js";
 import { ContactButtons as h } from "./ContactButtons.js";
-const z = ({
+const B = ({
   variant: r = "inline",
   theme: t,
   color: p,
@@ -33,5 +34,5 @@ const z = ({
   }
 );
 export {
-  z as ContactSection
+  B as ContactSection
 };

package/dist/components/Page/PageMenu.js

@@ -1,14 +1,15 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
+import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
-import { MenuItem as r } from "../Menu/MenuItem.js";
+import { MenuItem as n } from "../Menu/MenuItem.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/PageMenu.css';const o = "_menu_13em0_1", l = "_list_13em0_6", a = "_item_13em0_29", t = {
+import '../../assets/PageMenu.css';const o = "_menu_13em0_1", l = "_list_13em0_6", a = "_item_13em0_29", e = {
   menu: o,
   list: l,
   item: a
-}, N = ({ theme: i, color: s, items: n = [] }) => /* @__PURE__ */ e("nav", { "data-theme": i, "data-color": s, className: t.menu, children: /* @__PURE__ */ e("ul", { className: t.list, children: n.map((m) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(r, { ...m, className: t.item }) }, m.id)) }) });
+}, f = ({ theme: i, color: r, items: s = [] }) => /* @__PURE__ */ t("nav", { "data-theme": i, "data-color": r, className: e.menu, children: /* @__PURE__ */ t("ul", { className: e.list, children: s.map((m) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(n, { ...m, className: e.item }) }, m.id)) }) });
 export {
-  N as PageMenu
+  f as PageMenu
 };

package/dist/components/Page/PageNav.js

@@ -1,7 +1,7 @@
 "use client";
-import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import { jsxs as s, jsx as i } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
-import a, { forwardRef as s } from "react";
+import a, { forwardRef as c } from "react";
 import { Button as f } from "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
@@ -16,7 +16,7 @@ import '../../assets/PageNav.css';var u = function(t, o) {
       o.indexOf(e[r]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[r]) && (l[e[r]] = t[e[r]]);
   return l;
 };
-const b = s((t, o) => {
+const b = c((t, o) => {
   var { title: l, titleId: e } = t, r = u(t, ["title", "titleId"]);
   let n = p();
   return n = l ? e || "title-" + n : void 0, a.createElement(
@@ -25,8 +25,8 @@ const b = s((t, o) => {
     l ? a.createElement("title", { id: n }, l) : null,
     a.createElement("path", { fill: "currentColor", d: "M8.97 6.97a.75.75 0 1 1 1.06 1.06l-3.22 3.22H19a.75.75 0 0 1 0 1.5H6.81l3.22 3.22a.75.75 0 1 1-1.06 1.06l-4.5-4.5a.75.75 0 0 1 0-1.06z" })
   );
-}), v = "_controls_9bu1z_7", w = {
-  controls: v
+}), g = "_controls_9bu1z_7", v = {
+  controls: g
 }, E = ({
   color: t,
   padding: o,
@@ -36,9 +36,12 @@ const b = s((t, o) => {
     label: "Back"
   },
   controls: r
-}) => /* @__PURE__ */ c(m, { as: "nav", direction: "row", align: "center", justify: "between", color: t, padding: o, children: [
-  l ? /* @__PURE__ */ i(d, { items: l }) : /* @__PURE__ */ i(f, { ...e, variant: "text", size: "sm", icon: b, children: e?.label || "Back" }),
-  r && /* @__PURE__ */ i("div", { className: w.controls, children: r })
+}) => /* @__PURE__ */ s(m, { as: "nav", direction: "row", align: "center", justify: "between", color: t, padding: o, children: [
+  l ? /* @__PURE__ */ i(d, { items: l }) : /* @__PURE__ */ s(f, { ...e, variant: "ghost", size: "sm", children: [
+    /* @__PURE__ */ i(b, {}),
+    /* @__PURE__ */ i("span", { children: e?.label || "Back" })
+  ] }),
+  r && /* @__PURE__ */ i("div", { className: v.controls, children: r })
 ] });
 export {
   E as PageNav

package/dist/components/Page/PageTabs.js

@@ -1,14 +1,15 @@
 import { jsx as t } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
+import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
-import { MenuItem as l } from "../Menu/MenuItem.js";
+import { MenuItem as p } from "../Menu/MenuItem.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as p } from "./Flex.js";
-import '../../assets/PageTabs.css';const c = "_list_gp6cp_1", n = "_item_gp6cp_21", e = {
+import { Flex as l } from "./Flex.js";
+import '../../assets/PageTabs.css';const c = "_list_gp6cp_1", n = "_item_gp6cp_21", m = {
   list: c,
   item: n
-}, x = ({ variant: m, color: r, items: s = [], padding: o = 0 }) => /* @__PURE__ */ t(p, { theme: m, color: r, padding: o, children: /* @__PURE__ */ t("ul", { className: e.list, children: s.map((i) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(l, { ...i, className: e.item }) }, i.id)) }) });
+}, N = ({ variant: r, color: e, items: o = [], padding: s = 0 }) => /* @__PURE__ */ t(l, { theme: r, color: e, padding: s, children: /* @__PURE__ */ t("ul", { className: m.list, children: o.map((i) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(p, { ...i, className: m.item }) }, i.id)) }) });
 export {
-  x as PageTabs
+  N as PageTabs
 };

package/dist/components/Page/Section.js

@@ -1,12 +1,32 @@
-import { jsx as r } from "react/jsx-runtime";
-import { c as m } from "../../index-p1eeF8LQ.js";
+import { jsx as m } from "react/jsx-runtime";
+import { c as n } from "../../index-p1eeF8LQ.js";
 import "react";
+import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as n } from "./Flex.js";
-import '../../assets/Section.css';const p = "_section_1w6kc_1", l = {
-  section: p
-}, k = ({ as: o = "section", direction: t = "col", variant: c, className: s, children: e, ...i }) => /* @__PURE__ */ r(n, { as: o, direction: t, theme: c, className: m(l.section, s), ...i, children: e });
+import { Flex as p } from "./Flex.js";
+import '../../assets/Section.css';const l = "_section_1w6kc_1", a = {
+  section: l
+}, w = ({
+  as: o = "section",
+  direction: t = "col",
+  align: i = "initial",
+  variant: c,
+  className: s,
+  children: e,
+  ...r
+}) => /* @__PURE__ */ m(
+  p,
+  {
+    as: o,
+    align: i,
+    direction: t,
+    theme: c,
+    className: n(a.section, s),
+    ...r,
+    children: e
+  }
+);
 export {
-  k as Section
+  w as Section
 };

package/dist/components/ResourceListItem/ResourceListItem.js

@@ -1,10 +1,11 @@
 import { jsx as p } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
+import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { ListItem as s } from "../List/ListItem.js";
-const g = ({
+const h = ({
   ownerName: t,
   resourceName: i,
   ownerLogoUrlAlt: r,
@@ -26,5 +27,5 @@ const g = ({
   }
 );
 export {
-  g as ResourceListItem
+  h as ResourceListItem
 };

package/dist/components/RootProvider/RootProvider.js

@@ -1,8 +1,9 @@
 "use client";
 import { jsx as l } from "react/jsx-runtime";
-import { createContext as C, useState as a, useContext as g } from "react";
-import { useEscapeKey as p } from "../../hooks/useEscapeKey.js";
+import { createContext as p, useState as a, useContext as C } from "react";
+import { useEscapeKey as g } from "../../hooks/useEscapeKey.js";
 import "../../index-p1eeF8LQ.js";
+import "../Button/Button.js";
 import { SnackbarProvider as x } from "../Snackbar/useSnackbar.js";
 const f = {
   currentId: "",
@@ -15,7 +16,7 @@ const f = {
     console.warn("setPreviousId called outside of RootProvider context");
   },
   languageCode: "nb"
-}, I = C(f), A = ({ children: n, initialValue: e, debug: s, languageCode: t }) => {
+}, I = p(f), E = ({ children: n, initialValue: e, debug: s, languageCode: t }) => {
   const [u, d] = a(e?.currentId || ""), [c, r] = a(e?.previousId || "");
   return /* @__PURE__ */ l(
     I.Provider,
@@ -31,8 +32,8 @@ const f = {
       children: /* @__PURE__ */ l(x, { children: n })
     }
   );
-}, E = () => {
-  const n = g(I);
+}, S = () => {
+  const n = C(I);
   if (!n)
     throw new Error("useRootContext must be used within a RootProvider.");
   const { currentId: e, setCurrentId: s, debug: t, setPreviousId: u, previousId: d, languageCode: c } = n, r = (o) => {
@@ -42,7 +43,7 @@ const f = {
   }, i = () => {
     t && console.debug("useRootContext: closeAll called"), r("");
   };
-  return p(i), {
+  return g(i), {
     currentId: e,
     previousId: d,
     toggleId: v,
@@ -54,6 +55,6 @@ const f = {
   };
 };
 export {
-  A as RootProvider,
-  E as useRootContext
+  E as RootProvider,
+  S as useRootContext
 };