@altinn/altinn-components 0.13.4 → 0.14.0

package/dist/components/GlobalMenu/AccountMenu.js

@@ -1,15 +1,15 @@
 "use client";
-import { jsx as v } from "react/jsx-runtime";
-import { useState as y } from "react";
+import { jsx as y } from "react/jsx-runtime";
+import { useState as L } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import { Menu as L } from "../Menu/Menu.js";
-const M = (p) => `${p} hits`, j = ({
+import { Menu as M } from "../Menu/Menu.js";
+const h = (p) => `${p} hits`, j = ({
   accounts: p = [],
-  accountGroups: b = {},
+  accountGroups: C = {},
   accountSearch: s,
   onSelectAccount: d,
   currentAccount: m
@@ -22,7 +22,7 @@ const M = (p) => `${p} hits`, j = ({
     title: e.name,
     ...(e == null ? void 0 : e.accountNames) && {
       avatarGroup: {
-        items: e.accountNames.map((r) => ({ name: r, type: e.type }))
+        items: e.accountNames.map((l) => ({ name: l, type: e.type }))
       }
     },
     ...!(e != null && e.accountNames) && {
@@ -34,34 +34,26 @@ const M = (p) => `${p} hits`, j = ({
     badge: e.badge,
     alertBadge: e.alertBadge,
     onClick: () => d == null ? void 0 : d(e.id || e.name)
-  })), [i, t] = y(""), l = i ? g.filter((e) => {
-    var r;
-    return (r = e == null ? void 0 : e.title) == null ? void 0 : r.toLowerCase().includes(i.toLowerCase());
+  })), [i, t] = L(""), r = i ? g.filter((e) => {
+    var l;
+    return (l = e == null ? void 0 : e.title) == null ? void 0 : l.toLowerCase().includes(i.toLowerCase());
   }).map((e) => ({
     ...e,
     groupId: "search"
-  })) : g, C = i ? {
+  })) : g, I = i ? {
     search: {
-      title: ((f = s == null ? void 0 : s.getResultsLabel) == null ? void 0 : f.call(s, l.length)) ?? M(l.length)
+      title: ((f = s == null ? void 0 : s.getResultsLabel) == null ? void 0 : f.call(s, r.length)) ?? h(r.length)
     }
-  } : b, I = {
+  } : C, b = {
     name: "account-search",
     value: i,
     placeholder: (s == null ? void 0 : s.placeholder) ?? "Find account",
     onChange: (e) => t(e.target.value),
     onClear: () => t("")
-  }, h = [
-    ...l.length > 0 ? l : [{ id: "search", groupId: "search", hidden: !0 }]
+  }, v = [
+    ...r.length > 0 ? r : [{ id: "search", groupId: "search", hidden: !0 }]
   ];
-  return /* @__PURE__ */ v(
-    L,
-    {
-      theme: "global",
-      search: s && I,
-      groups: C,
-      items: h
-    }
-  );
+  return /* @__PURE__ */ y(M, { search: s && b, groups: I, items: v });
 };
 export {
   j as AccountMenu

package/dist/components/GlobalMenu/BackButton.js

@@ -6,7 +6,7 @@ import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { MenuItem as m } from "../Menu/MenuItem.js";
-const d = ({ label: o, onClick: t, as: r }) => /* @__PURE__ */ i(m, { size: "xs", id: "back", icon: "arrow-undo", title: o, onClick: t, as: r });
+const d = ({ label: t, onClick: r, as: o }) => /* @__PURE__ */ i(m, { size: "xs", id: "back", icon: "arrow-undo", theme: "transparent", title: t, onClick: r, as: o });
 export {
   d as BackButton
 };

package/dist/components/GlobalMenu/GlobalMenu.js

@@ -1,16 +1,16 @@
 "use client";
-import { jsxs as m, jsx as r, Fragment as T } from "react/jsx-runtime";
+import { jsxs as a, jsx as r, Fragment as v } from "react/jsx-runtime";
 import { useState as j, useMemo as A } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
 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 { AccountButton as I } from "./AccountButton.js";
+import { BackButton as L } from "./BackButton.js";
+import { LogoutButton as H } from "./LogoutButton.js";
 import "../Snackbar/useSnackbar.js";
-import { MenuListItem as a } from "../Menu/MenuBase.js";
+import { MenuListItem as n } from "../Menu/MenuBase.js";
 import { Menu as h } from "../Menu/Menu.js";
 import { GlobalMenuBase as l, GlobalMenuHeader as g, GlobalMenuFooter as W } from "./GlobalMenuBase.js";
 const U = ({
@@ -21,52 +21,52 @@ const U = ({
   groups: u,
   changeLabel: b = "Change",
   backLabel: B = "Back",
-  currentAccount: e,
+  currentAccount: i,
   onSelectAccount: o,
-  onClose: i,
+  onClose: e,
   logoutButton: s
 }) => {
-  const [x, G] = j(!1), n = () => {
+  const [x, G] = j(!1), m = () => {
     G((t) => !t);
-  }, v = (t) => {
-    n(), i == null || i(), o == null || o(t);
-  }, d = A(() => p.map((t) => ({
+  }, T = (t) => {
+    m(), e == null || e(), o == null || o(t);
+  }, f = A(() => p.map((t) => ({
     ...t,
     onClick: () => {
-      var f;
-      (f = t.onClick) == null || f.call(t), i == null || i();
+      var d;
+      (d = t.onClick) == null || d.call(t), e == null || e();
     }
-  })), [p, i]);
-  return x ? /* @__PURE__ */ m(l, { children: [
-    /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(H, { onClick: n, label: B }) }),
-    /* @__PURE__ */ r(a, { as: "div", role: "separator" }),
+  })), [p, e]);
+  return x ? /* @__PURE__ */ a(l, { children: [
+    /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(L, { onClick: m, label: B }) }),
+    /* @__PURE__ */ r(n, { as: "div", role: "separator" }),
     /* @__PURE__ */ r(
       F,
       {
-        currentAccount: e,
+        currentAccount: i,
         accounts: c,
         accountGroups: M,
         accountSearch: k,
-        onSelectAccount: v
+        onSelectAccount: T
       }
     )
-  ] }) : e ? /* @__PURE__ */ m(l, { children: [
+  ] }) : i ? /* @__PURE__ */ a(l, { children: [
     /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(
-      L,
+      I,
       {
-        account: e,
+        account: i,
         linkText: b,
         multipleAccounts: c.length > 1,
-        onClick: n
+        onClick: m
       }
     ) }),
-    /* @__PURE__ */ r(a, { as: "div", role: "separator" }),
-    /* @__PURE__ */ r(h, { groups: u, items: d }),
-    s && /* @__PURE__ */ m(T, { children: [
-      /* @__PURE__ */ r(a, { as: "div", role: "separator" }),
-      /* @__PURE__ */ r(W, { children: /* @__PURE__ */ r(I, { ...s }) })
+    /* @__PURE__ */ r(n, { as: "div", role: "separator" }),
+    /* @__PURE__ */ r(h, { groups: u, items: f, defaultItemTheme: "surface" }),
+    s && /* @__PURE__ */ a(v, { children: [
+      /* @__PURE__ */ r(n, { as: "div", role: "separator" }),
+      /* @__PURE__ */ r(W, { children: /* @__PURE__ */ r(H, { ...s }) })
     ] })
-  ] }) : /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(h, { groups: u, items: d }) });
+  ] }) : /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(h, { groups: u, items: f }) });
 };
 export {
   U as GlobalMenu

package/dist/components/GlobalMenu/GlobalMenuBase.js

@@ -1,12 +1,12 @@
 import { jsx as r } from "react/jsx-runtime";
-import '../../assets/GlobalMenuBase.css';const a = "_nav_ratd2_1", t = "_footer_ratd2_7", n = "_drawer_ratd2_15", s = "_dropdown_ratd2_21", e = {
+import '../../assets/GlobalMenuBase.css';const a = "_nav_1sg75_1", n = "_footer_1sg75_6", s = "_drawer_1sg75_14", t = "_dropdown_1sg75_20", e = {
   nav: a,
-  footer: t,
-  drawer: n,
-  dropdown: s
-}, l = ({ children: o }) => /* @__PURE__ */ r("nav", { className: e.nav, "data-theme": "global", children: o }), _ = ({ children: o }) => /* @__PURE__ */ r("header", { className: e.header, children: o }), c = ({ children: o }) => /* @__PURE__ */ r("footer", { className: e.footer, children: o });
+  footer: n,
+  drawer: s,
+  dropdown: t
+}, c = ({ children: o }) => /* @__PURE__ */ r("nav", { className: e.nav, "data-color": "neutral", children: o }), l = ({ children: o }) => /* @__PURE__ */ r("header", { className: e.header, children: o }), _ = ({ children: o }) => /* @__PURE__ */ r("footer", { className: e.footer, children: o });
 export {
-  l as GlobalMenuBase,
-  c as GlobalMenuFooter,
-  _ as GlobalMenuHeader
+  c as GlobalMenuBase,
+  _ as GlobalMenuFooter,
+  l as GlobalMenuHeader
 };

package/dist/components/GlobalMenu/LogoutButton.js

@@ -1,12 +1,16 @@
 import { jsx as t } from "react/jsx-runtime";
-import { ButtonBase as s } from "../Button/ButtonBase.js";
-import { ButtonLabel as r } from "../Button/ButtonLabel.js";
+import { ButtonBase as n } from "../Button/ButtonBase.js";
+import { ButtonLabel as s } from "../Button/ButtonLabel.js";
 import "../../index-L8X2o7IH.js";
+import "react";
+import "../Autocomplete/AutocompleteBase.js";
+import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
 import "../Icon/SvgIcon.js";
-import '../../assets/LogoutButton.css';const a = "_button_1260s_1", i = "_label_1260s_5", o = {
-  button: a,
-  label: i
-}, _ = ({ label: l = "Logout", children: e, onClick: n }) => /* @__PURE__ */ t(s, { className: o.button, variant: "outline", size: "lg", onClick: n, children: /* @__PURE__ */ t(r, { className: o.label, size: "lg", children: e || l }) });
+import '../../assets/LogoutButton.css';const i = "_button_1260s_1", m = "_label_1260s_5", o = {
+  button: i,
+  label: m
+}, L = ({ label: r = "Logout", children: l, onClick: e }) => /* @__PURE__ */ t(n, { className: o.button, variant: "outline", size: "lg", onClick: e, children: /* @__PURE__ */ t(s, { className: o.label, size: "lg", children: l || r }) });
 export {
-  _ as LogoutButton
+  L as LogoutButton
 };

package/dist/components/Header/Header.js

@@ -3,7 +3,6 @@ import { jsxs as m, jsx as e } from "react/jsx-runtime";
 import { DropdownBase as g } from "../Dropdown/DropdownBase.js";
 import "../../index-L8X2o7IH.js";
 import { DrawerBase as x } from "../Dropdown/DrawerBase.js";
-import "../Icon/SvgIcon.js";
 import "react";
 import "../Autocomplete/AutocompleteBase.js";
 import { useRootContext as C } from "../RootProvider/RootProvider.js";
@@ -11,14 +10,15 @@ import { GlobalMenu as p } from "../GlobalMenu/GlobalMenu.js";
 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 { Searchbar as v } 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
-}, O = ({ search: n, menu: r, currentAccount: a, logo: l = {}, badge: i }) => {
+import "../Icon/SvgIcon.js";
+import { HeaderMenu as y } from "./HeaderMenu.js";
+import { HeaderSearch as B } from "./HeaderSearch.js";
+import '../../assets/Header.css';const N = "_drawer_ft5v3_1", S = "_dropdown_ft5v3_5", n = {
+  drawer: N,
+  dropdown: S
+}, O = ({ search: s, menu: r, currentAccount: a, logo: l = {}, badge: i }) => {
   const { currentId: o, toggleId: d, openId: c, closeAll: t } = C(), h = () => {
     c("search");
   }, f = () => {
@@ -27,11 +27,13 @@ import '../../assets/Header.css';const v = "_drawer_ft5v3_1", y = "_dropdown_ft5
     d("menu");
   };
   return /* @__PURE__ */ m(H, { currentId: o, open: o === "search" || o === "menu", onClose: t, children: [
-    /* @__PURE__ */ e(_, { ...l, className: s.logo }),
-    /* @__PURE__ */ m(N, { className: s.menu, children: [
+    /* @__PURE__ */ e(_, { ...l, className: n.logo }),
+    /* @__PURE__ */ m(y, { className: n.menu, children: [
       /* @__PURE__ */ e(
         b,
         {
+          color: "company",
+          variant: "solid",
           badge: i,
           avatar: a && {
             type: a.type,
@@ -42,10 +44,10 @@ import '../../assets/Header.css';const v = "_drawer_ft5v3_1", y = "_dropdown_ft5
           label: r == null ? void 0 : r.menuLabel
         }
       ),
-      r && /* @__PURE__ */ e(g, { padding: !0, placement: "right", open: o === "menu", className: s.dropdown, children: /* @__PURE__ */ e(p, { ...r, currentAccount: a, onClose: t }) })
+      r && /* @__PURE__ */ e(g, { padding: !0, placement: "right", open: o === "menu", className: n.dropdown, children: /* @__PURE__ */ e(p, { ...r, currentAccount: a, onClose: t }) })
     ] }),
-    n && /* @__PURE__ */ e(S, { expanded: o === "search", children: /* @__PURE__ */ e(B, { ...n, expanded: o === "search", onClose: f, onFocus: h }) }),
-    r && /* @__PURE__ */ e(x, { open: o === "menu", className: s.drawer, children: /* @__PURE__ */ e(p, { ...r, currentAccount: a }) })
+    s && /* @__PURE__ */ e(B, { expanded: o === "search", children: /* @__PURE__ */ e(v, { ...s, expanded: o === "search", onClose: f, onFocus: h }) }),
+    r && /* @__PURE__ */ e(x, { open: o === "menu", className: n.drawer, children: /* @__PURE__ */ e(p, { ...r, currentAccount: a }) })
   ] });
 };
 export {

package/dist/components/Header/HeaderBase.js

@@ -1,4 +1,4 @@
-import { jsxs as s, jsx as d } from "react/jsx-runtime";
+import { jsxs as d, jsx as s } from "react/jsx-runtime";
 import { c as p } from "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "react";
@@ -9,10 +9,10 @@ import "../Snackbar/useSnackbar.js";
 import '../../assets/HeaderBase.css';const i = "_header_5ao8r_1", n = "_backdrop_5ao8r_11", r = {
   header: i,
   backdrop: n
-}, 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 }),
+}, j = ({ currentId: o, className: a, children: e, open: t, onClose: c }) => /* @__PURE__ */ d("header", { className: p(r.header, a), "data-color": "neutral", "data-current-id": o, children: [
+  t && /* @__PURE__ */ s(m, { className: r.backdrop, onClick: c }),
   e
 ] });
 export {
-  u as HeaderBase
+  j as HeaderBase
 };

package/dist/components/Header/HeaderButton.js

@@ -1,46 +1,48 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
 import { c as s } from "../../index-L8X2o7IH.js";
-import { Avatar as N } from "../Avatar/Avatar.js";
-import { AvatarGroup as f } from "../Avatar/AvatarGroup.js";
-import { Badge as a } from "../Badge/Badge.js";
+import { Avatar as b } from "../Avatar/Avatar.js";
+import { AvatarGroup as I } from "../Avatar/AvatarGroup.js";
+import { Badge as p } from "../Badge/Badge.js";
 import { ButtonBase as u } from "../Button/ButtonBase.js";
-import { Icon as p } from "../Icon/Icon.js";
+import { Icon as N } from "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
-import '../../assets/HeaderButton.css';const h = "_button_buvev_1", v = "_label_buvev_14", I = "_icon_buvev_20", g = "_avatarGroup_buvev_30", x = "_loginIcon_buvev_39", B = "_closeIcon_buvev_44", G = "_badge_buvev_48", n = {
-  button: h,
-  label: v,
-  icon: I,
-  avatarGroup: g,
-  loginIcon: x,
-  closeIcon: B,
-  badge: G
-}, w = ({
-  className: l,
-  as: t = "button",
-  avatar: c,
-  avatarGroup: _,
-  icon: b = "padlock-locked",
-  expanded: d,
-  label: m = "Menu",
-  badge: o,
-  ...i
-}) => d ? /* @__PURE__ */ r(u, { ...i, as: t, className: s(n.button, l), children: [
-  /* @__PURE__ */ e("span", { className: n.label, children: m }),
-  /* @__PURE__ */ e("span", { className: s(n.icon, n.closeIcon), children: /* @__PURE__ */ e(p, { name: "x-mark" }) }),
-  o && /* @__PURE__ */ e(a, { ...o, className: n.badge })
-] }) : _ ? /* @__PURE__ */ r(u, { ...i, as: t, className: s(n.button, l), children: [
-  /* @__PURE__ */ e("span", { className: n.label, children: m }),
-  /* @__PURE__ */ e(f, { ..._, size: "sm", className: n.avatarGroup }),
-  o && /* @__PURE__ */ e(a, { ...o, className: n.badge })
-] }) : c ? /* @__PURE__ */ r(u, { ...i, as: t, className: s(n.button, l), children: [
-  /* @__PURE__ */ e("span", { className: n.label, children: m }),
-  /* @__PURE__ */ e(N, { type: c == null ? void 0 : c.type, name: c == null ? void 0 : c.name, size: "lg" }),
-  o && /* @__PURE__ */ e(a, { ...o, className: n.badge })
-] }) : /* @__PURE__ */ r(u, { ...i, as: t, className: s(n.button, l), children: [
-  /* @__PURE__ */ e("span", { className: n.label, children: m }),
-  /* @__PURE__ */ e("span", { className: s(n.icon, n.loginIcon), children: /* @__PURE__ */ e(p, { name: b }) }),
-  o && /* @__PURE__ */ e(a, { ...o, className: n.badge })
+import '../../assets/HeaderButton.css';const g = "_button_ottvn_1", x = "_label_ottvn_12", B = "_icon_ottvn_18", G = "_avatarGroup_ottvn_28", k = "_loginIcon_ottvn_37", y = "_closeIcon_ottvn_42", j = "_badge_ottvn_46", n = {
+  button: g,
+  label: x,
+  icon: B,
+  avatarGroup: G,
+  loginIcon: k,
+  closeIcon: y,
+  badge: j
+}, E = ({
+  className: t,
+  as: l = "button",
+  color: m = "accent",
+  variant: i = "solid",
+  avatar: e,
+  avatarGroup: d,
+  icon: f = "padlock-locked",
+  expanded: h,
+  label: r = "Menu",
+  badge: c,
+  ..._
+}) => h ? /* @__PURE__ */ a(u, { ..._, as: l, variant: i, color: m, className: s(n.button, t), children: [
+  /* @__PURE__ */ o("span", { className: n.label, children: r }),
+  /* @__PURE__ */ o("span", { className: s(n.icon, n.closeIcon), children: /* @__PURE__ */ o(N, { name: "x-mark" }) }),
+  c && /* @__PURE__ */ o(p, { ...c, className: n.badge })
+] }) : d ? /* @__PURE__ */ a(u, { ..._, as: l, variant: i, color: m, className: s(n.button, t), children: [
+  /* @__PURE__ */ o("span", { className: n.label, children: r }),
+  /* @__PURE__ */ o(I, { ...d, size: "sm", className: n.avatarGroup }),
+  c && /* @__PURE__ */ o(p, { ...c, className: n.badge })
+] }) : e ? /* @__PURE__ */ a(u, { ..._, as: l, variant: i, color: m, className: s(n.button, t), children: [
+  /* @__PURE__ */ o("span", { className: n.label, children: r }),
+  /* @__PURE__ */ o(b, { type: e == null ? void 0 : e.type, name: e == null ? void 0 : e.name, size: "lg" }),
+  c && /* @__PURE__ */ o(p, { ...c, className: n.badge })
+] }) : /* @__PURE__ */ a(u, { ..._, as: l, variant: i, color: m, className: s(n.button, t), children: [
+  /* @__PURE__ */ o("span", { className: n.label, children: r }),
+  /* @__PURE__ */ o("span", { className: s(n.icon, n.loginIcon), children: /* @__PURE__ */ o(N, { name: f }) }),
+  c && /* @__PURE__ */ o(p, { ...c, className: n.badge })
 ] });
 export {
-  w as HeaderButton
+  E as HeaderButton
 };

package/dist/components/Header/HeaderLogo.js

@@ -1,17 +1,21 @@
-import { jsxs as n, jsx as s } from "react/jsx-runtime";
-import { c as e } from "../../index-L8X2o7IH.js";
-import { ButtonBase as c } from "../Button/ButtonBase.js";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { c as n } from "../../index-L8X2o7IH.js";
+import { ButtonBase as e } from "../Button/ButtonBase.js";
+import "react";
+import "../Autocomplete/AutocompleteBase.js";
+import "../RootProvider/RootProvider.js";
+import { DigdirLogomark as c } from "./DigdirLogomark.js";
+import "../Snackbar/useSnackbar.js";
 import "../Icon/SvgIcon.js";
-import { DigdirLogomark as i } from "./DigdirLogomark.js";
 import '../../assets/HeaderLogo.css';const a = "_logo_y48xn_1", x = "_symbol_y48xn_8", y = "_riksSymbol_y48xn_14", _ = "_text_y48xn_20", o = {
   logo: a,
   symbol: x,
   riksSymbol: y,
   text: _
-}, k = ({ className: t, as: m = "a", title: r = "Altinn", href: l = "/" }) => /* @__PURE__ */ n(c, { as: m, className: e(o.logo, t), href: l, children: [
-  /* @__PURE__ */ s(i, { className: o.symbol }),
-  /* @__PURE__ */ s("span", { className: o.text, children: r })
+}, j = ({ className: s, as: m = "a", title: r = "Altinn", href: l = "/" }) => /* @__PURE__ */ i(e, { as: m, className: n(o.logo, s), href: l, children: [
+  /* @__PURE__ */ t(c, { className: o.symbol }),
+  /* @__PURE__ */ t("span", { className: o.text, children: r })
 ] });
 export {
-  k as HeaderLogo
+  j as HeaderLogo
 };

package/dist/components/Icon/Icon.js

@@ -1,14 +1,18 @@
-import { jsx as i } from "react/jsx-runtime";
-import { c as r } from "../../index-L8X2o7IH.js";
-import { SvgIcon as f } from "./SvgIcon.js";
+import { jsx as o } from "react/jsx-runtime";
+import { c as s } from "../../index-L8X2o7IH.js";
+import { SvgIcon as d } from "./SvgIcon.js";
 import { iconsMap as m } from "./iconsMap.js";
-import '../../assets/Icon.css';const a = "_icon_1z0mb_1", p = {
-  icon: a
-}, v = ({ name: o, variant: e = "outline", className: n }) => {
-  var t, s;
-  const c = ((t = m[o]) == null ? void 0 : t[e]) ?? ((s = m[o]) == null ? void 0 : s.outline);
-  return c ? /* @__PURE__ */ i(f, { svgIconComponent: c, className: r([p.icon], n) }) : /* @__PURE__ */ i("span", { className: r([p.icon], n) });
+import "react";
+import "../Autocomplete/AutocompleteBase.js";
+import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
+import '../../assets/Icon.css';const u = "_icon_8905q_1", p = {
+  icon: u
+}, y = ({ name: t, size: a, color: e, theme: l, variant: f = "outline", className: n }) => {
+  var i, r;
+  const c = ((i = m[t]) == null ? void 0 : i[f]) ?? ((r = m[t]) == null ? void 0 : r.outline);
+  return c ? /* @__PURE__ */ o("span", { "data-size": a, "data-color": e, "data-theme": l, className: s([p.icon], n), children: /* @__PURE__ */ o(d, { svgIconComponent: c }) }) : /* @__PURE__ */ o("span", { className: s([p.icon], n) });
 };
 export {
-  v as Icon
+  y as Icon
 };

package/dist/components/Icon/ProgressIcon.js

@@ -1,6 +1,6 @@
 import { jsxs as o, jsx as t } from "react/jsx-runtime";
 import { c as p } from "../../index-L8X2o7IH.js";
-import '../../assets/ProgressIcon.css';const i = "_progress_1uknp_1", g = "_complete_1uknp_25", n = {
+import '../../assets/ProgressIcon.css';const i = "_progress_e618l_1", g = "_complete_e618l_25", l = {
   progress: i,
   complete: g
 }, C = ({ value: e = 0, total: s = 100, className: c }) => {
@@ -14,7 +14,7 @@ import '../../assets/ProgressIcon.css';const i = "_progress_1uknp_1", g = "_comp
         viewBox: "0 0 16 16",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        className: n.complete,
+        className: l.complete,
         children: [
           /* @__PURE__ */ o("title", { children: [
             "Progress ",
@@ -34,10 +34,10 @@ import '../../assets/ProgressIcon.css';const i = "_progress_1uknp_1", g = "_comp
         ]
       }
     );
-  const l = {
+  const n = {
     "--progress": `${r}%`
   };
-  return /* @__PURE__ */ t("div", { className: p(n.progress, c), style: l, "data-value": `${r}%` });
+  return /* @__PURE__ */ t("div", { className: p(l.progress, c), style: n, "data-value": `${r}%` });
 };
 export {
   C as ProgressIcon

package/dist/components/Layout/Layout.js

@@ -1,32 +1,40 @@
 "use client";
-import { jsxs as r, jsx as m } from "react/jsx-runtime";
-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";
-import { Footer as x } from "../Footer/Footer.js";
-import { Header as j } from "../Header/Header.js";
+import { jsxs as p, jsx as m } from "react/jsx-runtime";
+import { LayoutBase as y } from "./LayoutBase.js";
+import { LayoutBody as h } from "./LayoutBody.js";
+import { LayoutContent as L } from "./LayoutContent.js";
+import { LayoutSidebar as x } from "./LayoutSidebar.js";
+import { Footer as j } from "../Footer/Footer.js";
+import { Header as B } from "../Header/Header.js";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "react";
 import "../Autocomplete/AutocompleteBase.js";
-import { Menu as B } from "../Menu/Menu.js";
 import { useRootContext as C } from "../RootProvider/RootProvider.js";
+import { Menu as F } from "../Menu/Menu.js";
 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, ...i, children: [
-        n && /* @__PURE__ */ m(B, { ...n }),
+const G = ({
+  color: n = "neutral",
+  theme: c = "subtle",
+  header: u,
+  footer: r,
+  sidebar: o,
+  content: t = {},
+  children: f
+}) => {
+  const { currentId: l } = C();
+  return /* @__PURE__ */ p(y, { color: n, theme: c, currentId: l, children: [
+    u && /* @__PURE__ */ m(B, { ...u }),
+    /* @__PURE__ */ p(h, { currentId: l, children: [
+      o && /* @__PURE__ */ p(x, { hidden: o == null ? void 0 : o.hidden, color: o == null ? void 0 : o.color, ...o, children: [
+        (o == null ? void 0 : o.menu) && /* @__PURE__ */ m(F, { ...o == null ? void 0 : o.menu }),
         o == null ? void 0 : o.children
       ] }),
-      /* @__PURE__ */ m(c, { theme: t == null ? void 0 : t.theme, children: f })
+      /* @__PURE__ */ m(L, { color: t == null ? void 0 : t.color, children: f })
     ] }),
-    u && /* @__PURE__ */ m(x, { ...u })
+    r && /* @__PURE__ */ m(j, { ...r })
   ] });
 };
 export {
-  D as Layout
+  G 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_bdyfy_1", r = {
-  base: o
-}, 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 });
+import { jsx as o } from "react/jsx-runtime";
+import '../../assets/LayoutBase.css';const r = "_base_y26h6_1", c = {
+  base: r
+}, n = ({ currentId: a, color: s, theme: t, children: e }) => /* @__PURE__ */ o("div", { className: c.base, "data-color": s, "data-theme": t, "data-current-id": a, children: e });
 export {
-  d as LayoutBase
+  n as LayoutBase
 };

package/dist/components/Layout/LayoutContent.js

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

package/dist/components/Layout/LayoutSidebar.js

@@ -1,7 +1,7 @@
 import { jsx as r } from "react/jsx-runtime";
-import '../../assets/LayoutSidebar.css';const t = "_sidebar_zsh57_1", d = {
-  sidebar: t
-}, o = ({ theme: s, hidden: a = !1, children: e }) => /* @__PURE__ */ r("aside", { className: d.sidebar, "data-theme": s, "aria-hidden": a, children: e });
+import '../../assets/LayoutSidebar.css';const d = "_sidebar_zsh57_1", i = {
+  sidebar: d
+}, t = ({ color: s, hidden: a = !1, children: e }) => /* @__PURE__ */ r("aside", { className: i.sidebar, "data-color": s, "aria-hidden": a, children: e });
 export {
-  o as LayoutSidebar
+  t as LayoutSidebar
 };