@altinn/altinn-components 0.14.3 → 0.15.0

package/dist/components/Menu/MenuBase.js

@@ -1,18 +1,18 @@
 import { jsx as m } from "react/jsx-runtime";
 import { c as a } from "../../index-L8X2o7IH.js";
-import '../../assets/MenuBase.css';const c = "_menu_njba2_1", p = "_list_njba2_13", u = "_item_njba2_19", i = {
-  menu: c,
+import '../../assets/MenuBase.css';const i = "_menu_njba2_1", p = "_list_njba2_13", u = "_item_njba2_19", r = {
+  menu: i,
   list: p,
   item: u
-}, C = ({ as: n = "nav", theme: t, className: e, children: o }) => /* @__PURE__ */ m(n, { className: a(i.menu, e), "data-theme": t, role: "menu", children: o }), d = ({ as: n = "ul", role: t = "group", expanded: e, className: o, children: s }) => /* @__PURE__ */ m(n, { className: a(i.list, o), role: t, "aria-expanded": e, children: s }), x = ({
+}, d = ({ as: n = "nav", color: t, theme: e, className: o, children: s }) => /* @__PURE__ */ m(n, { className: a(r.menu, o), "data-color": t, "data-theme": e, role: "menu", children: s }), C = ({ as: n = "ul", role: t = "group", expanded: e, className: o, children: s }) => /* @__PURE__ */ m(n, { className: a(r.list, o), role: t, "aria-expanded": e, children: s }), x = ({
   as: n = "li",
   role: t = "presentation",
   expanded: e,
   className: o,
   children: s
-}) => /* @__PURE__ */ m(n, { className: a(i.item, o), role: t, "aria-expanded": e, children: s });
+}) => /* @__PURE__ */ m(n, { className: a(r.item, o), role: t, "aria-expanded": e, children: s });
 export {
-  C as MenuBase,
-  d as MenuList,
+  d as MenuBase,
+  C as MenuList,
   x as MenuListItem
 };

package/dist/components/Menu/MenuItem.js

@@ -1,55 +1,68 @@
-import { jsxs as k, jsx as m } from "react/jsx-runtime";
-import { MenuItemBase as L } from "./MenuItemBase.js";
-import { MenuItemLabel as j } from "./MenuItemLabel.js";
-import { MenuItemMedia as v } from "./MenuItemMedia.js";
-const y = ({
+import { jsxs as k, jsx as n } from "react/jsx-runtime";
+import { MenuItemBase as v } from "./MenuItemBase.js";
+import { MenuItemLabel as L } from "./MenuItemLabel.js";
+import { MenuItemIcon as S } from "./MenuItemIcon.js";
+import "../../index-L8X2o7IH.js";
+import "react";
+import "../Autocomplete/AutocompleteBase.js";
+import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
+import "../Icon/SvgIcon.js";
+const g = {
+  xs: "sm",
+  sm: "sm",
+  md: "md",
+  lg: "xl"
+}, G = ({
   as: t = "a",
-  size: n = "sm",
-  color: c,
-  theme: o,
-  collapsible: r,
-  expanded: e,
-  icon: i,
-  iconVariant: p,
-  avatar: a,
-  avatarGroup: I,
-  title: u,
-  description: l,
+  size: o = "md",
+  color: i,
+  theme: e,
+  collapsible: m,
+  expanded: r,
+  icon: p,
+  iconTheme: c,
+  iconBadge: s,
+  avatar: I,
+  avatarGroup: l,
+  title: a,
+  description: u,
   badge: M,
-  alertBadge: f,
-  linkText: s,
-  linkIcon: b,
-  label: d,
-  ...h
-}) => /* @__PURE__ */ k(
-  L,
-  {
-    as: t,
-    size: n,
-    theme: o,
-    badge: M,
-    linkText: s,
-    linkIcon: r && e ? "chevron-up" : r ? "chevron-down" : b,
-    color: c,
-    expanded: e,
-    ...h,
-    children: [
-      /* @__PURE__ */ m(
-        v,
-        {
-          theme: o,
-          badge: f,
-          size: n,
-          icon: i,
-          iconVariant: p,
-          avatar: a,
-          avatarGroup: I
-        }
-      ),
-      /* @__PURE__ */ m(j, { title: u, description: l, size: n, children: d })
-    ]
-  }
-);
+  linkText: d,
+  linkIcon: f,
+  label: h,
+  ...x
+}) => {
+  const b = m && r ? "chevron-up" : m ? "chevron-down" : f, j = g[o];
+  return /* @__PURE__ */ k(
+    v,
+    {
+      as: t,
+      size: o,
+      theme: e,
+      badge: M,
+      linkText: d,
+      linkIcon: b,
+      color: i,
+      expanded: r,
+      ...x,
+      children: [
+        /* @__PURE__ */ n(
+          S,
+          {
+            size: j,
+            icon: p,
+            iconTheme: c,
+            iconBadge: s,
+            avatar: I,
+            avatarGroup: l
+          }
+        ),
+        /* @__PURE__ */ n(L, { title: a, description: u, size: o, children: h })
+      ]
+    }
+  );
+};
 export {
-  y as MenuItem
+  G as MenuItem
 };

package/dist/components/Menu/MenuItemBase.js

@@ -1,4 +1,4 @@
-import { jsxs as o, jsx as i } from "react/jsx-runtime";
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
 import { c as j } from "../../index-L8X2o7IH.js";
 import { Icon as B } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
@@ -7,62 +7,62 @@ import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
 import { Badge as k } from "../Badge/Badge.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/MenuItemBase.css';const z = "_item_1imot_1", E = "_content_1imot_41", M = "_action_1imot_49", b = "_linkText_1imot_56", g = "_linkIcon_1imot_61", t = {
+import '../../assets/MenuItemBase.css';const z = "_item_18cbi_1", E = "_content_18cbi_45", M = "_action_18cbi_53", b = "_linkText_18cbi_60", q = "_linkIcon_18cbi_65", e = {
   item: z,
   content: E,
   action: M,
   linkText: b,
-  linkIcon: g
-}, Q = ({
+  linkIcon: q
+}, R = ({
   as: l,
-  color: d,
-  theme: _,
-  size: p,
-  className: x,
-  href: f,
+  color: _,
+  theme: p,
+  size: d,
+  className: f,
+  href: x,
   onClick: a,
-  onKeyPress: e,
+  onKeyPress: n,
   tabIndex: h = 0,
   hidden: I,
   disabled: m = !1,
   active: N = !1,
   selected: u = !1,
   expanded: v = !1,
-  linkIcon: n,
-  linkText: c,
-  badge: s,
+  linkIcon: i,
+  linkText: s,
+  badge: t,
   children: T
-}) => /* @__PURE__ */ o(
+}) => /* @__PURE__ */ c(
   l || "a",
   {
     role: "menuitem",
     tabIndex: m ? "-1" : h ?? 0,
-    className: j(t.item, x),
-    "data-size": p,
-    "data-color": d,
-    "data-theme": _,
+    className: j(e.item, f),
+    "data-size": d,
+    "data-color": _,
+    "data-theme": p,
     "data-active": N,
     "aria-hidden": I,
     "aria-expanded": v,
     "aria-disabled": m,
     "aria-selected": u,
-    href: f,
+    href: x,
     onKeyPress: (r) => {
-      r.key === "Enter" && (a == null || a()), e == null || e(r);
+      r.key === "Enter" && (a == null || a()), n == null || n(r);
     },
     onClick: a,
     children: [
-      /* @__PURE__ */ o("div", { className: t.content, children: [
+      /* @__PURE__ */ c("div", { className: e.content, children: [
         T,
-        s && /* @__PURE__ */ i(k, { ...s })
+        t && /* @__PURE__ */ o(k, { ...t, theme: (t == null ? void 0 : t.theme) || "surface" })
       ] }),
-      n && /* @__PURE__ */ o("div", { className: t.action, children: [
-        c && /* @__PURE__ */ i("span", { className: t.linkText, children: c }),
-        n && /* @__PURE__ */ i(B, { name: n, className: t.linkIcon })
+      i && /* @__PURE__ */ c("div", { className: e.action, children: [
+        s && /* @__PURE__ */ o("span", { className: e.linkText, children: s }),
+        i && /* @__PURE__ */ o(B, { name: i, className: e.linkIcon })
       ] })
     ]
   }
 );
 export {
-  Q as MenuItemBase
+  R as MenuItemBase
 };

package/dist/components/Menu/MenuItemIcon.js

@@ -0,0 +1,27 @@
+import { jsxs as p, jsx as n } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import { IconOrAvatar as f } from "../Icon/IconOrAvatar.js";
+import "react";
+import "../Autocomplete/AutocompleteBase.js";
+import "../RootProvider/RootProvider.js";
+import { Badge as _ } from "../Badge/Badge.js";
+import "../Snackbar/useSnackbar.js";
+import '../../assets/MenuItemIcon.css';const a = "_icon_14zf3_1", l = "_badge_14zf3_8", e = {
+  icon: a,
+  badge: l
+}, y = ({
+  size: i,
+  icon: o,
+  iconTheme: c,
+  iconBadge: t,
+  avatar: r,
+  avatarGroup: m,
+  children: s
+}) => !o && !r && !m && !s ? null : /* @__PURE__ */ p("span", { className: e.icon, children: [
+  s || /* @__PURE__ */ n(f, { size: i, icon: o, iconTheme: c, avatar: r, avatarGroup: m }),
+  t && /* @__PURE__ */ n(_, { ...t, className: e.badge })
+] });
+export {
+  y as MenuItemIcon
+};

package/dist/components/Menu/MenuItemLabel.js

@@ -1,12 +1,12 @@
-import { jsx as e, jsxs as c, Fragment as r } from "react/jsx-runtime";
-import '../../assets/MenuItemLabel.css';const o = "_label_iwl5m_1", m = "_title_iwl5m_7", d = "_description_iwl5m_31", s = {
+import { jsx as t, jsxs as c, Fragment as r } from "react/jsx-runtime";
+import '../../assets/MenuItemLabel.css';const o = "_label_1ejxp_1", p = "_title_1ejxp_7", d = "_description_1ejxp_25", s = {
   label: o,
-  title: m,
+  title: p,
   description: d
-}, p = ({ size: t = "sm", label: a, title: i, description: n, children: l }) => /* @__PURE__ */ e("span", { className: s.label, "data-size": t, children: l || /* @__PURE__ */ c(r, { children: [
-  /* @__PURE__ */ e("strong", { className: s.title, "data-size": t, children: i || a }),
-  /* @__PURE__ */ e("span", { className: s.description, "data-size": t, children: n })
+}, m = ({ size: e = "sm", label: l, title: n, description: i, children: a }) => /* @__PURE__ */ t("span", { className: s.label, "data-size": e, children: a || /* @__PURE__ */ c(r, { children: [
+  /* @__PURE__ */ t("strong", { className: s.title, "data-size": e, children: n || l }),
+  /* @__PURE__ */ t("span", { className: s.description, "data-size": e, children: i })
 ] }) });
 export {
-  p as MenuItemLabel
+  m as MenuItemLabel
 };

package/dist/components/Menu/MenuItems.js

@@ -12,42 +12,44 @@ import { MenuHeader as K } from "./MenuHeader.js";
 import { MenuList as S, MenuListItem as c } from "./MenuBase.js";
 import "../Snackbar/useSnackbar.js";
 const _ = ({
-  level: l = 0,
-  expanded: b,
-  search: f,
-  items: y,
-  groups: o = {},
-  defaultItemColor: h,
-  defaultItemTheme: x,
-  defaultItemSize: M
+  level: r = 0,
+  expanded: y,
+  search: h,
+  items: F,
+  groups: f = {},
+  defaultItemSize: x,
+  defaultItemColor: M,
+  defaultItemTheme: o,
+  defaultIconTheme: I
 }) => {
-  const { menu: I } = E({
-    items: y,
-    groups: o,
+  const { menu: v } = E({
+    items: F,
+    groups: f,
     groupByKey: "groupId",
     keyboardEvents: !1
   });
-  return /* @__PURE__ */ d(S, { expanded: b, children: [
-    f && /* @__PURE__ */ m(H, { ...f }),
-    I.map((n, r) => {
-      const t = (n == null ? void 0 : n.props) || {}, { title: v, divider: F = !0 } = t, j = I[r + 1];
+  return /* @__PURE__ */ d(S, { expanded: y, children: [
+    h && /* @__PURE__ */ m(H, { ...h }),
+    v.map((n, l) => {
+      const t = (n == null ? void 0 : n.props) || {}, { title: b, divider: j = !0 } = t, z = v[l + 1];
       return /* @__PURE__ */ d(B, { children: [
-        (l > 0 || r) && F ? /* @__PURE__ */ m(c, { role: "separator" }) : "",
-        v && /* @__PURE__ */ m(c, { children: /* @__PURE__ */ m(K, { title: v }) }),
+        (r > 0 || l) && j ? /* @__PURE__ */ m(c, { role: "separator" }) : "",
+        b && /* @__PURE__ */ m(c, { children: /* @__PURE__ */ m(K, { title: b }) }),
         n == null ? void 0 : n.items.filter((a) => {
           var i;
           return !((i = a.props) != null && i.hidden);
         }).map((a, i) => {
-          const { active: z } = a, { groupId: $, ...e } = a.props || {}, { expanded: s } = e, L = n == null ? void 0 : n.items[i + 1];
+          const { active: L } = a, { groupId: $, ...e } = a.props || {}, { expanded: s } = e, T = n == null ? void 0 : n.items[i + 1];
           return /* @__PURE__ */ d(c, { role: "presentation", expanded: s, children: [
             /* @__PURE__ */ m(
               G,
               {
                 ...e,
-                color: (e == null ? void 0 : e.color) || (t == null ? void 0 : t.defaultItemColor) || h,
-                theme: (e == null ? void 0 : e.theme) || (t == null ? void 0 : t.defaultItemTheme) || x,
-                size: (e == null ? void 0 : e.size) || (t == null ? void 0 : t.defaultItemSize) || M,
-                active: z,
+                size: (e == null ? void 0 : e.size) || (t == null ? void 0 : t.defaultItemSize) || x,
+                color: (e == null ? void 0 : e.color) || (t == null ? void 0 : t.defaultItemColor) || M,
+                theme: (e == null ? void 0 : e.theme) || (t == null ? void 0 : t.defaultItemTheme) || o,
+                iconTheme: (e == null ? void 0 : e.iconTheme) || (t == null ? void 0 : t.defaultIconTheme) || I,
+                active: L,
                 tabIndex: e != null && e.disabled ? -1 : 0
               }
             ),
@@ -56,19 +58,20 @@ const _ = ({
                 _,
                 {
                   expanded: s,
-                  level: l + 1,
+                  level: r + 1,
                   items: e == null ? void 0 : e.items,
-                  groups: o,
-                  defaultItemColor: h,
-                  defaultItemTheme: x,
-                  defaultItemSize: M
+                  groups: f,
+                  defaultItemSize: x,
+                  defaultItemColor: M,
+                  defaultItemTheme: o,
+                  defaultIconTheme: I
                 }
               ),
-              (j || L) && /* @__PURE__ */ m(c, { role: "separator", as: "div" })
+              (z || T) && /* @__PURE__ */ m(c, { role: "separator", as: "div" })
             ] })
           ] }, i);
         })
-      ] }, r);
+      ] }, l);
     })
   ] });
 };

package/dist/components/Menu/MenuOption.js

@@ -9,12 +9,12 @@ import "../Snackbar/useSnackbar.js";
 import "../Icon/SvgIcon.js";
 import { CheckboxIcon as v } from "../Icon/CheckboxIcon.js";
 import { RadioIcon as x } from "../Icon/RadioIcon.js";
-import '../../assets/MenuOption.css';const I = "_label_cv7w3_1", N = "_input_cv7w3_5", h = "_icon_cv7w3_10", r = {
+import '../../assets/MenuOption.css';const I = "_label_cv7w3_1", N = "_input_cv7w3_5", d = "_icon_cv7w3_10", r = {
   label: I,
   input: N,
-  icon: h
+  icon: d
 }, A = ({
-  size: n = "sm",
+  size: n = "md",
   type: i,
   name: m,
   value: e,

package/dist/components/Menu/index.js

@@ -1,26 +1,26 @@
-import { MenuItemBase as o } from "./MenuItemBase.js";
+import { MenuItemBase as r } from "./MenuItemBase.js";
 import { MenuItemLabel as m } from "./MenuItemLabel.js";
-import { MenuItemMedia as u } from "./MenuItemMedia.js";
-import { MenuItem as p } from "./MenuItem.js";
+import { MenuItemIcon as u } from "./MenuItemIcon.js";
+import { MenuItem as M } from "./MenuItem.js";
 import { MenuInputField as x } from "./MenuInputField.js";
 import { MenuOption as a } from "./MenuOption.js";
-import { MenuSearch as s } from "./MenuSearch.js";
-import { MenuHeader as L } from "./MenuHeader.js";
-import { MenuItems as B } from "./MenuItems.js";
-import { MenuBase as c, MenuList as h, MenuListItem as F } from "./MenuBase.js";
+import { MenuSearch as i } from "./MenuSearch.js";
+import { MenuHeader as c } from "./MenuHeader.js";
+import { MenuItems as l } from "./MenuItems.js";
+import { MenuBase as b, MenuList as h, MenuListItem as F } from "./MenuBase.js";
 import { Menu as O } from "./Menu.js";
 export {
   O as Menu,
-  c as MenuBase,
-  L as MenuHeader,
+  b as MenuBase,
+  c as MenuHeader,
   x as MenuInputField,
-  p as MenuItem,
-  o as MenuItemBase,
+  M as MenuItem,
+  r as MenuItemBase,
+  u as MenuItemIcon,
   m as MenuItemLabel,
-  u as MenuItemMedia,
-  B as MenuItems,
+  l as MenuItems,
   h as MenuList,
   F as MenuListItem,
   a as MenuOption,
-  s as MenuSearch
+  i as MenuSearch
 };

package/dist/components/Meta/MetaItemMedia.js

@@ -1,13 +1,18 @@
-import { jsxs as o, jsx as s } from "react/jsx-runtime";
-import { Icon as i } from "../Icon/Icon.js";
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import { Icon as r } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
-import { ProgressIcon as r } from "../Icon/ProgressIcon.js";
-import '../../assets/MetaItemMedia.css';const n = "_media_m8ywm_1", a = {
+import { ProgressIcon as s } from "../Icon/ProgressIcon.js";
+import "react";
+import "../../index-L8X2o7IH.js";
+import "../Autocomplete/AutocompleteBase.js";
+import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
+import '../../assets/MetaItemMedia.css';const n = "_media_m8ywm_1", t = {
   media: n
-}, p = ({ size: t = "xs", icon: e, progress: m }) => !e && typeof m != "number" ? !1 : /* @__PURE__ */ o("span", { className: a.media, "data-size": t, children: [
-  e && /* @__PURE__ */ s(i, { name: e, className: a.icon }),
-  m && /* @__PURE__ */ s(r, { value: m, className: a.icon })
+}, N = ({ size: o = "xs", icon: m, progress: e }) => !m && typeof e != "number" ? !1 : /* @__PURE__ */ i("span", { className: t.media, "data-size": o, children: [
+  m && /* @__PURE__ */ a(r, { name: m, className: t.icon }),
+  e && /* @__PURE__ */ a(s, { value: e, className: t.icon })
 ] });
 export {
-  p as MetaItemMedia
+  N as MetaItemMedia
 };

package/dist/components/Page/PageHeader.js

@@ -1,21 +1,42 @@
-import { jsxs as r, jsx as i } from "react/jsx-runtime";
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
-import { Heading as s } from "../Typography/Heading.js";
 import "react";
+import { Typography as u } from "../Typography/Typography.js";
+import { Heading as j } from "../Typography/Heading.js";
 import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
-import { ListItemMedia as a } from "../List/ListItemMedia.js";
+import { ListItemIcon as y } from "../List/ListItemIcon.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as c } from "./Flex.js";
-import { Section as d } from "./Section.js";
-const I = ({ title: o, icon: e, avatar: t, avatarGroup: m, children: p, ...n }) => /* @__PURE__ */ r(d, { as: "header", spacing: 3, ...n, children: [
-  /* @__PURE__ */ r(c, { direction: "row", align: "center", spacing: 3, children: [
-    /* @__PURE__ */ i(a, { avatar: t, avatarGroup: m, icon: e, size: "xl" }),
-    /* @__PURE__ */ i(s, { size: "xl", children: o })
+import { Flex as n } from "./Flex.js";
+import { PageTabs as z } from "./PageTabs.js";
+import { Section as H } from "./Section.js";
+const D = ({
+  variant: a,
+  size: l = "xl",
+  title: s,
+  description: o,
+  icon: f,
+  avatar: x,
+  avatarGroup: d,
+  tabs: e,
+  theme: t,
+  padding: m,
+  shadow: p,
+  bleed: c,
+  children: g,
+  ...h
+}) => (a === "card" && (t = "default", m = "page", p = "xs", c = !0), /* @__PURE__ */ i(H, { as: "header", theme: t, padding: m, shadow: p, bleed: c, spacing: 4, ...h, children: [
+  /* @__PURE__ */ i(n, { direction: "row", align: "center", spacing: 3, children: [
+    /* @__PURE__ */ r(y, { avatar: x, avatarGroup: d, icon: f, size: "xl" }),
+    /* @__PURE__ */ i(n, { direction: "col", children: [
+      /* @__PURE__ */ r(j, { size: l, children: s }),
+      o && /* @__PURE__ */ r(u, { size: "xs", children: o })
+    ] })
   ] }),
-  p
-] });
+  g,
+  e && /* @__PURE__ */ r(z, { ...e })
+] }));
 export {
-  I as PageHeader
+  D as PageHeader
 };

package/dist/components/Page/PageMenu.js

@@ -4,13 +4,13 @@ import "../Icon/SvgIcon.js";
 import "react";
 import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
-import { MenuItem as n } from "../Menu/MenuItem.js";
+import { MenuItem as o } from "../Menu/MenuItem.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/PageMenu.css';const o = "_menu_1wsjl_1", l = "_list_1wsjl_6", a = "_item_1wsjl_29", e = {
-  menu: o,
-  list: l,
+import '../../assets/PageMenu.css';const l = "_menu_1wsjl_1", n = "_list_1wsjl_6", a = "_item_1wsjl_29", e = {
+  menu: l,
+  list: n,
   item: a
-}, N = ({ theme: m = "transparent", color: r, items: i = [] }) => /* @__PURE__ */ t("nav", { "data-theme": m, "data-color": r, className: e.menu, children: /* @__PURE__ */ t("ul", { className: e.list, children: i.map((s) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(n, { ...s, theme: m, className: e.item }) }, s.id)) }) });
+}, N = ({ theme: s, color: i, items: r = [] }) => /* @__PURE__ */ t("nav", { "data-theme": s, "data-color": i, className: e.menu, children: /* @__PURE__ */ t("ul", { className: e.list, children: r.map((m) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(o, { ...m, className: e.item }) }, m.id)) }) });
 export {
   N as PageMenu
 };

package/dist/components/Page/PageTabs.js

@@ -0,0 +1,16 @@
+import { jsx as t } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "../Icon/SvgIcon.js";
+import "react";
+import "../Autocomplete/AutocompleteBase.js";
+import "../RootProvider/RootProvider.js";
+import { MenuItem as o } from "../Menu/MenuItem.js";
+import "../Snackbar/useSnackbar.js";
+import '../../assets/PageTabs.css';const a = "_menu_vbqbk_1", n = "_list_vbqbk_6", l = "_item_vbqbk_25", m = {
+  menu: a,
+  list: n,
+  item: l
+}, k = ({ theme: i, color: s, items: r = [] }) => /* @__PURE__ */ t("nav", { "data-theme": i, "data-color": s, className: m.tabs, children: /* @__PURE__ */ t("ul", { className: m.list, children: r.map((e) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(o, { ...e, className: m.item }) }, e.id)) }) });
+export {
+  k as PageTabs
+};

package/dist/components/Page/index.js

@@ -1,22 +1,24 @@
 import { PageBase as o } from "./PageBase.js";
 import { PageNav as t } from "./PageNav.js";
-import { PageMenu as f } from "./PageMenu.js";
-import { PageHeader as a } from "./PageHeader.js";
+import { PageMenu as a } from "./PageMenu.js";
+import { PageTabs as p } from "./PageTabs.js";
+import { PageHeader as P } from "./PageHeader.js";
 import { Article as d } from "./Article.js";
-import { Section as i } from "./Section.js";
+import { Section as s } from "./Section.js";
 import { Flex as n } from "./Flex.js";
-import { Grid as u } from "./Grid.js";
-import { Breadcrumbs as b } from "./Breadcrumbs.js";
-import { BreadcrumbsLink as k } from "./BreadcrumbsLink.js";
+import { Grid as B } from "./Grid.js";
+import { Breadcrumbs as k } from "./Breadcrumbs.js";
+import { BreadcrumbsLink as A } from "./BreadcrumbsLink.js";
 export {
   d as Article,
-  b as Breadcrumbs,
-  k as BreadcrumbsLink,
+  k as Breadcrumbs,
+  A as BreadcrumbsLink,
   n as Flex,
-  u as Grid,
+  B as Grid,
   o as PageBase,
-  a as PageHeader,
-  f as PageMenu,
+  P as PageHeader,
+  a as PageMenu,
   t as PageNav,
-  i as Section
+  p as PageTabs,
+  s as Section
 };

package/dist/components/RootProvider/RootProvider.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as c } from "react/jsx-runtime";
-import { createContext as d, useContext as u, useState as p } from "react";
+import { createContext as d, useState as u, useContext as p } from "react";
 import { useEscapeKey as I } from "../../hooks/useEscapeKey.js";
 import { SnackbarProvider as m } from "../Snackbar/useSnackbar.js";
 const x = {
   currentId: ""
 }, s = d(x), R = ({ children: o, initialValue: t }) => {
-  const [n, r] = p((t == null ? void 0 : t.currentId) || "");
+  const [n, r] = u((t == null ? void 0 : t.currentId) || "");
   return /* @__PURE__ */ c(
     s.Provider,
     {
@@ -18,7 +18,7 @@ const x = {
     }
   );
 }, a = () => {
-  const { currentId: o, setCurrentId: t } = u(s), n = (e) => t(o === e ? "" : e), r = () => {
+  const { currentId: o, setCurrentId: t } = p(s), n = (e) => t(o === e ? "" : e), r = () => {
     t("");
   };
   return I(r), {