@altinn/altinn-components 0.38.12 → 0.38.14

package/dist/assets/LayoutContent.css

@@ -1 +1 @@
-._content_1wkbr_1{flex-grow:1;display:flex;flex-direction:column;width:100%;margin:0 auto}@media (min-width: 1024px){[aria-hidden=true]+._content_1wkbr_1{padding:0 112px}}
+._content_1xz06_1{overflow-wrap:anywhere;flex-grow:1;display:flex;flex-direction:column;width:100%;margin:0 auto}@media (min-width: 1024px){[aria-hidden=true]+._content_1xz06_1{padding:0 112px}}

package/dist/components/Button/ButtonBase.js

@@ -1,39 +1,41 @@
-import { jsx as i } from "react/jsx-runtime";
-import { c as f } from "../../index-L8X2o7IH.js";
-import '../../assets/ButtonBase.css';const p = "_button_1q3ym_1", x = {
-  button: p
-}, B = ({
+import { jsx as f } from "react/jsx-runtime";
+import { c as p } from "../../index-L8X2o7IH.js";
+import '../../assets/ButtonBase.css';const x = "_button_1q3ym_1", _ = {
+  button: x
+}, C = ({
   as: a,
   color: o,
   className: e,
-  children: n,
+  children: s,
   disabled: t = !1,
-  ariaLabel: s,
+  ariaLabel: n,
   size: r,
-  selected: c,
-  variant: d,
+  selected: d,
+  variant: c,
   reverse: l = !1,
   rounded: m = !1,
   tabIndex: u = 0,
+  dataTestId: i,
   ...b
-}) => /* @__PURE__ */ i(
+}) => /* @__PURE__ */ f(
   a || "button",
   {
     tabIndex: u,
     "data-size": r,
     "data-color": o,
-    "data-variant": d,
+    "data-variant": c,
     "data-reverse": l,
     "data-rounded": m,
-    "data-selected": c,
+    "data-selected": d,
     "aria-disabled": t,
     disabled: t,
-    className: f(x.button, e),
-    "aria-label": s,
+    className: p(_.button, e),
+    "aria-label": n,
+    "data-testid": i,
     ...b,
-    children: n
+    children: s
   }
 );
 export {
-  B as ButtonBase
+  C as ButtonBase
 };

package/dist/components/Button/ComboButton.js

@@ -1,17 +1,17 @@
-import { jsxs as f, jsx as o } from "react/jsx-runtime";
-import { c as k } from "../../index-L8X2o7IH.js";
+import { jsxs as k, jsx as o } from "react/jsx-runtime";
+import { c as v } from "../../index-L8X2o7IH.js";
 import "react";
 import { ButtonBase as s } from "./ButtonBase.js";
-import { ButtonLabel as v } from "./ButtonLabel.js";
-import { ButtonIcon as x } from "./ButtonIcon.js";
+import { ButtonLabel as x } from "./ButtonLabel.js";
+import { ButtonIcon as B } from "./ButtonIcon.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/ComboButton.css';const B = "_button_kd2d3_1", h = "_divider_kd2d3_7", N = "_primary_kd2d3_14", C = "_secondary_kd2d3_15", r = {
-  button: B,
-  divider: h,
-  primary: N,
-  secondary: C
-}, D = ({
+import '../../assets/ComboButton.css';const h = "_button_kd2d3_1", N = "_divider_kd2d3_7", C = "_primary_kd2d3_14", j = "_secondary_kd2d3_15", r = {
+  button: h,
+  divider: N,
+  primary: C,
+  secondary: j
+}, E = ({
   variant: a = "solid",
   color: n,
   size: t,
@@ -25,8 +25,9 @@ import '../../assets/ComboButton.css';const B = "_button_kd2d3_1", h = "_divider
   className: _,
   ariaLabel: u,
   onLabelClick: y,
-  onIconClick: b
-}) => /* @__PURE__ */ f(
+  onIconClick: b,
+  dataTestId: f
+}) => /* @__PURE__ */ k(
   s,
   {
     as: "div",
@@ -34,10 +35,20 @@ import '../../assets/ComboButton.css';const B = "_button_kd2d3_1", h = "_divider
     variant: a,
     color: n,
     selected: e,
-    className: k(r.button, _),
+    className: v(r.button, _),
     tabIndex: -1,
     children: [
-      /* @__PURE__ */ o(s, { ariaLabel: u, size: t, onClick: y, className: r.primary, children: /* @__PURE__ */ o(v, { size: i, children: l || p }) }),
+      /* @__PURE__ */ o(
+        s,
+        {
+          ariaLabel: u,
+          size: t,
+          onClick: y,
+          className: r.primary,
+          dataTestId: f,
+          children: /* @__PURE__ */ o(x, { size: i, children: l || p })
+        }
+      ),
       /* @__PURE__ */ o("span", { "data-size": t, className: r.divider }),
       /* @__PURE__ */ o(
         s,
@@ -46,12 +57,12 @@ import '../../assets/ComboButton.css';const B = "_button_kd2d3_1", h = "_divider
           className: r.secondary,
           ariaLabel: m,
           size: c || i,
-          children: d && /* @__PURE__ */ o(x, { icon: d })
+          children: d && /* @__PURE__ */ o(B, { icon: d })
         }
       )
     ]
   }
 );
 export {
-  D as ComboButton
+  E as ComboButton
 };

package/dist/components/Dialog/DialogActions.js

@@ -13,9 +13,9 @@ import '../../assets/DialogActions.css';const k = "_action_m3crc_1", I = "_combo
   action: k,
   comboButton: I
 }, T = ({ items: c, maxItems: s = 2, id: l = "dialog-actions", expandAltLabel: a }) => {
-  const { currentId: d, closeAll: p, toggleId: u } = v(), e = d === l, r = g(() => (c || []).filter((n) => !n.hidden).sort((n, o) => {
-    const i = ["primary", "secondary", "tertiary"];
-    return i.indexOf(n == null ? void 0 : n.priority) - i.indexOf(o == null ? void 0 : o.priority);
+  const { currentId: d, closeAll: p, toggleId: u } = v(), i = d === l, r = g(() => (c || []).filter((n) => !n.hidden).sort((n, o) => {
+    const e = ["primary", "secondary", "tertiary"];
+    return e.indexOf(n == null ? void 0 : n.priority) - e.indexOf(o == null ? void 0 : o.priority);
   }), [c]);
   if (!r.length || s <= 0)
     return null;
@@ -32,21 +32,21 @@ import '../../assets/DialogActions.css';const k = "_action_m3crc_1", I = "_combo
         C,
         {
           variant: "solid",
-          icon: e ? B : _,
+          icon: i ? B : _,
           size: "md",
           onIconClick: () => u(l),
           onLabelClick: r[0].onClick,
-          ariaLabel: e ? "chevron up icon" : "chevron down icon",
+          ariaLabel: i ? "chevron up icon" : "chevron down icon",
           iconAltText: a,
           children: r[0].label
         }
       ),
-      /* @__PURE__ */ t(b, { open: e, onClose: p, children: /* @__PURE__ */ t(x, { items: n }) })
+      i && /* @__PURE__ */ t(b, { open: i, onClose: p, children: /* @__PURE__ */ t(x, { items: n }) })
     ] });
   }
   return /* @__PURE__ */ t("section", { className: m.action, children: r.map((n, o) => {
-    const { priority: i, id: w, ...h } = n;
-    return /* @__PURE__ */ t(y, { variant: i === "primary" ? "solid" : "outline", size: "md", ...h, children: n.label }, "button-" + o);
+    const { priority: e, id: w, ...h } = n;
+    return /* @__PURE__ */ t(y, { variant: e === "primary" ? "solid" : "outline", size: "md", ...h, children: n.label }, "button-" + o);
   }) });
 };
 export {

package/dist/components/Layout/LayoutContent.js

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

package/dist/components/List/ListItemLabel.js

@@ -4,8 +4,8 @@ import { isValidElement as N } from "react";
 import "../RootProvider/RootProvider.js";
 import { Heading as o } from "../Typography/Heading.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/ListItemLabel.css';const d = "_label_1cju7_1", j = {
-  label: d
+import '../../assets/ListItemLabel.css';const w = "_label_1cju7_1", j = {
+  label: w
 }, H = (r) => typeof r == "object" && r !== null && "children" in r;
 function L(r) {
   return typeof r == "string" || typeof r == "number" || typeof r == "boolean" || r === null || N(r);
@@ -30,7 +30,7 @@ const z = (r) => {
     ...s,
     children: r
   } : null;
-}, T = ({
+}, V = ({
   loading: r = !1,
   highlightWords: s,
   size: p,
@@ -38,23 +38,23 @@ const z = (r) => {
   value: c,
   description: a,
   children: e,
-  id: f,
-  className: l
+  id: l,
+  className: f
 }) => {
   if (t && c) {
-    const i = t && z(t), b = c && _(c);
-    return /* @__PURE__ */ n("span", { className: y(j.label, l), id: f, "data-size": p, children: e || /* @__PURE__ */ P(x, { children: [
-      i && /* @__PURE__ */ n(o, { ...i, loading: r, highlightWords: s }),
-      b && /* @__PURE__ */ n(o, { ...b, loading: r, highlightWords: s })
+    const b = t && _(t), i = c && z(c);
+    return /* @__PURE__ */ n("span", { className: y(j.label, f), id: l, "data-size": p, children: e || /* @__PURE__ */ P(x, { children: [
+      b && /* @__PURE__ */ n(o, { ...b, loading: r, highlightWords: s }),
+      i && /* @__PURE__ */ n(o, { ...i, loading: r, highlightWords: s })
     ] }) });
   }
   const m = t && z(t), u = a && _(a);
-  return /* @__PURE__ */ n("span", { className: y(j.label, l), id: f, "data-size": p, children: e || /* @__PURE__ */ P(x, { children: [
+  return /* @__PURE__ */ n("span", { className: y(j.label, f), id: l, "data-size": p, children: e || /* @__PURE__ */ P(x, { children: [
     m && /* @__PURE__ */ n(o, { ...m, loading: r, highlightWords: s }),
     u && /* @__PURE__ */ n(o, { ...u, loading: r, highlightWords: s })
   ] }) });
 };
 export {
-  T as ListItemLabel,
+  V as ListItemLabel,
   H as isHeadingProps
 };

package/dist/components/Menu/MenuItemBase.js

@@ -1,14 +1,14 @@
 import { jsx as c } from "react/jsx-runtime";
-import { c as N } from "../../index-L8X2o7IH.js";
-import '../../assets/MenuItemBase.css';const j = "_item_1pvle_1", z = "_content_1pvle_45", m = {
-  item: j,
-  content: z
-}, g = ({
-  interactive: r = !0,
-  ariaLabel: o,
+import { c as j } from "../../index-L8X2o7IH.js";
+import '../../assets/MenuItemBase.css';const z = "_item_1pvle_1", B = "_content_1pvle_45", d = {
+  item: z,
+  content: B
+}, q = ({
+  interactive: m = !0,
+  ariaLabel: r,
   role: s,
-  as: d,
-  color: i,
+  as: i,
+  color: o,
   variant: p,
   size: l,
   className: _,
@@ -21,18 +21,19 @@ import '../../assets/MenuItemBase.css';const j = "_item_1pvle_1", z = "_content_
   disabled: e = !1,
   children: b,
   active: h,
-  onMouseEnter: I
+  onMouseEnter: I,
+  dataTestId: N
 }) => /* @__PURE__ */ c(
-  d || "a",
+  i || "a",
   {
     tabIndex: e ? "-1" : x ?? 0,
-    className: N(m.item, _),
+    className: j(d.item, _),
     role: s,
-    "aria-label": o,
-    "data-interactive": r,
+    "aria-label": r,
+    "data-interactive": m,
     "data-active": h,
     "data-size": l,
-    "data-color": i,
+    "data-color": o,
     "data-variant": p,
     "aria-hidden": f,
     "aria-disabled": e,
@@ -43,9 +44,10 @@ import '../../assets/MenuItemBase.css';const j = "_item_1pvle_1", z = "_content_
     },
     onClick: t,
     onMouseEnter: I,
-    children: /* @__PURE__ */ c("span", { className: m.content, children: b })
+    "data-testid": N,
+    children: /* @__PURE__ */ c("span", { className: d.content, children: b })
   }
 );
 export {
-  g as MenuItemBase
+  q as MenuItemBase
 };

package/dist/components/Modal/ModalHeader.js

@@ -1,29 +1,44 @@
-import { jsx as r, jsxs as c } from "react/jsx-runtime";
-import { c as a } from "../../index-L8X2o7IH.js";
+import { jsx as r, jsxs as e } from "react/jsx-runtime";
+import { c as p } from "../../index-L8X2o7IH.js";
 import "react";
-import { IconButton as m } from "../Button/IconButton.js";
+import { IconButton as h } from "../Button/IconButton.js";
 import "../RootProvider/RootProvider.js";
-import { Heading as p } from "../Typography/Heading.js";
+import { Heading as s } from "../Typography/Heading.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as d } from "../Page/Flex.js";
-import { Section as l } from "../Page/Section.js";
-import { S as f } from "../../XMark-DIqxCTTQ.js";
-import '../../assets/ModalHeader.css';const h = "_header_7ty99_1", y = "_sticky_7ty99_6", i = {
-  header: h,
-  sticky: y
-}, H = ({ title: t, onClose: e, closeTitle: o, children: n, sticky: s = !0 }) => /* @__PURE__ */ r(l, { as: "header", spacing: 2, padding: 4, className: a(i.header, s && i.sticky), children: /* @__PURE__ */ c(d, { direction: "row", justify: "between", align: "center", spacing: 8, children: [
-  n || t && /* @__PURE__ */ r(p, { as: "h2", size: "lg", children: t }),
-  typeof e == "function" && /* @__PURE__ */ r(
-    m,
+import { Flex as o } from "../Page/Flex.js";
+import { Section as f } from "../Page/Section.js";
+import { ModalIcon as g } from "./ModalIcon.js";
+import { S as y } from "../../XMark-DIqxCTTQ.js";
+import '../../assets/ModalHeader.css';const x = "_header_7ty99_1", k = "_sticky_7ty99_6", a = {
+  header: x,
+  sticky: k
+}, A = ({
+  title: t,
+  description: i,
+  icon: n,
+  onClose: c,
+  closeTitle: m,
+  children: d,
+  sticky: l = !0
+}) => /* @__PURE__ */ r(f, { as: "header", spacing: 2, padding: 4, className: p(a.header, l && a.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(g, { 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 })
+    ] })
+  ] }),
+  typeof c == "function" && /* @__PURE__ */ r(
+    h,
     {
-      icon: f,
+      icon: y,
       variant: "outline",
-      onClick: e,
-      iconAltText: o ?? "Close",
+      onClick: c,
+      iconAltText: m ?? "Close",
       size: "sm"
     }
   )
 ] }) });
 export {
-  H as ModalHeader
+  A as ModalHeader
 };

package/dist/components/Modal/ModalIcon.js

@@ -0,0 +1,22 @@
+import { jsx as t } from "react/jsx-runtime";
+import { isValidElement as p } from "react";
+import { Icon as e, isIconProps as m } from "../Icon/Icon.js";
+import "../../index-L8X2o7IH.js";
+import { isAvatarProps as n, Avatar as c } from "../Avatar/Avatar.js";
+import { isAvatarGroupProps as i, AvatarGroup as v } from "../Avatar/AvatarGroup.js";
+import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
+import { S as l } from "../../XMark-DIqxCTTQ.js";
+import '../../assets/ListItemIcon.css';const f = "_wrapper_rcjve_1", _ = "_icon_rcjve_11", u = "_avatar_rcjve_19", N = "_avatarGroup_rcjve_23", o = {
+  wrapper: f,
+  icon: _,
+  avatar: u,
+  avatarGroup: N
+};
+function d(a) {
+  return typeof a == "string" || typeof a == "number" || typeof a == "boolean" || a === null || p(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;
+export {
+  b as ModalIcon
+};

package/dist/components/Modal/index.js

@@ -1,10 +1,12 @@
 import { ModalBase as e } from "./ModalBase.js";
 import { ModalHeader as d } from "./ModalHeader.js";
-import { ModalBody as l } from "./ModalBody.js";
-import { Modal as p } from "./Modal.js";
+import { ModalIcon as l } from "./ModalIcon.js";
+import { ModalBody as p } from "./ModalBody.js";
+import { Modal as x } from "./Modal.js";
 export {
-  p as Modal,
+  x as Modal,
   e as ModalBase,
-  l as ModalBody,
-  d as ModalHeader
+  p as ModalBody,
+  d as ModalHeader,
+  l as ModalIcon
 };

package/dist/components/Settings/SettingsModal.js

@@ -0,0 +1,15 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import "../../index-L8X2o7IH.js";
+import "react";
+import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
+import { ModalBase as s } from "../Modal/ModalBase.js";
+import { ModalHeader as f } from "../Modal/ModalHeader.js";
+import { ModalBody as l } from "../Modal/ModalBody.js";
+const u = ({ icon: t, title: m, description: i, open: p, onClose: o, children: d, ...a }) => /* @__PURE__ */ e(s, { ...a, open: p, onClose: o, children: [
+  /* @__PURE__ */ r(f, { icon: t, title: m, description: i, onClose: o }),
+  /* @__PURE__ */ r(l, { children: d })
+] });
+export {
+  u as SettingsModal
+};

package/dist/components/Settings/index.js

@@ -1,8 +1,10 @@
 import { SettingsSection as o } from "./SettingsSection.js";
 import { SettingsItem as i } from "./SettingsItem.js";
 import { SettingsList as n } from "./SettingsList.js";
+import { SettingsModal as S } from "./SettingsModal.js";
 export {
   i as SettingsItem,
   n as SettingsList,
+  S as SettingsModal,
   o as SettingsSection
 };

package/dist/components/Snackbar/SnackbarBase.js

@@ -1,7 +1,7 @@
 import { jsx as t } from "react/jsx-runtime";
-import '../../assets/SnackbarBase.css';const a = "_stack_ilsfl_1", c = {
-  stack: a
-}, o = ({ children: s }) => /* @__PURE__ */ t("section", { role: "alert", className: c.stack, children: s });
+import '../../assets/SnackbarBase.css';const c = "_stack_ilsfl_1", a = {
+  stack: c
+}, e = ({ children: s }) => /* @__PURE__ */ t("section", { className: a.stack, children: s });
 export {
-  o as SnackbarBase
+  e as SnackbarBase
 };

package/dist/components/Snackbar/SnackbarItem.js

@@ -19,14 +19,14 @@ import '../../assets/SnackbarItem.css';var w = function(e, i) {
 };
 const y = u((e, i) => {
   var { title: o, titleId: t } = e, n = w(e, ["title", "titleId"]);
-  let c = _();
-  return c = o ? t || "title-" + c : void 0, a.createElement(
+  let r = _();
+  return r = o ? t || "title-" + r : void 0, a.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: i, "aria-labelledby": c }, n),
-    o ? a.createElement("title", { id: c }, o) : null,
+    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: i, "aria-labelledby": r }, n),
+    o ? a.createElement("title", { id: r }, o) : null,
     a.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M12.75 2.5a.75.75 0 0 0-1.5 0v1.273c-2.222.14-3.655.92-4.499 2.186-.887 1.33-1.001 3.04-1.001 4.541v3c0 .809-.424 1.92-.92 2.915a18 18 0 0 1-.936 1.641l-.014.022-.004.006A.75.75 0 0 0 4.5 19.25h4.338a3.25 3.25 0 0 0 6.324 0H19.5a.75.75 0 0 0 .624-1.166l-.004-.006-.014-.022-.06-.091c-.05-.081-.125-.2-.215-.35-.18-.301-.42-.722-.66-1.2-.497-.994-.921-2.106-.921-2.915v-3c0-1.501-.114-3.21-1.001-4.541-.844-1.266-2.277-2.046-4.499-2.186zm-1.987 17.237a1.8 1.8 0 0 1-.344-.487h3.162a1.75 1.75 0 0 1-1.581 1 1.75 1.75 0 0 1-1.237-.513", clipRule: "evenodd" })
   );
-}), x = "_item_1a13i_1", O = "_icon_1a13i_23", I = "_content_1a13i_33", b = "_action_1a13i_41", r = {
+}), x = "_item_1a13i_1", O = "_icon_1a13i_23", I = "_content_1a13i_33", b = "_action_1a13i_41", c = {
   item: x,
   icon: O,
   content: I,
@@ -39,20 +39,20 @@ const F = ({
   className: o,
   color: t,
   icon: n = y,
-  iconAltText: c = "Bell icon",
+  iconAltText: r = "Bell icon",
   dismissable: s = !0,
   onDismiss: m,
   ...d
-}) => /* @__PURE__ */ f(e || "div", { className: p(r.item, o), "data-color": t, ...d, children: [
-  /* @__PURE__ */ l(v, { svgElement: n, className: r.icon }),
-  /* @__PURE__ */ l("div", { className: r.content, children: i }),
-  s && /* @__PURE__ */ l("div", { className: r.action, children: /* @__PURE__ */ l(
+}) => /* @__PURE__ */ f(e || "div", { className: p(c.item, o), "data-color": t, role: "alert", ...d, children: [
+  /* @__PURE__ */ l(v, { svgElement: n, className: c.icon, "aria-hidden": "true" }),
+  /* @__PURE__ */ l("div", { className: c.content, children: i }),
+  s && /* @__PURE__ */ l("div", { className: c.action, children: /* @__PURE__ */ l(
     g,
     {
       icon: h,
       variant: "solid",
       onClick: m,
-      className: r.dismiss,
+      className: c.dismiss,
       iconAltText: "close"
     }
   ) })

package/dist/components/Toolbar/Toolbar.js

@@ -1,17 +1,17 @@
 "use client";
 import { jsxs as G, jsx as c } from "react/jsx-runtime";
-import { useState as V, useMemo as g, useEffect as k } from "react";
+import { useState as V, useMemo as T, useEffect as k } from "react";
 import { useRootContext as w } from "../RootProvider/RootProvider.js";
 import { ToolbarAccountMenu as B } from "./ToolbarAccountMenu.js";
 import { ToolbarAdd as E } from "./ToolbarAdd.js";
 import { ToolbarBase as L } from "./ToolbarBase.js";
 import { ToolbarFilter as M } from "./ToolbarFilter.js";
 import { ToolbarSearch as $ } from "./ToolbarSearch.js";
-const T = (n, m) => m || `toolbar-filter-${n}`, Q = ({
+const g = (n, m) => m || `toolbar-filter-${n}`, Q = ({
   filters: n = [],
   filterState: m,
-  onFilterStateChange: b,
-  search: u,
+  onFilterStateChange: u,
+  search: b,
   accountMenu: v,
   getFilterLabel: y,
   children: F,
@@ -19,13 +19,13 @@ const T = (n, m) => m || `toolbar-filter-${n}`, Q = ({
   removeButtonAltText: x,
   addFilterButtonLabel: A
 }) => {
-  const { openId: h, closeAll: C } = w(), t = m || {}, i = typeof b == "function" ? b : () => {
+  const { openId: h, closeAll: I } = w(), t = m || {}, i = typeof u == "function" ? u : () => {
   }, [r, p] = V(
     () => n.filter((e) => !e.removable || typeof t[e.name] < "u").map((e) => e.name)
-  ), I = g(
+  ), C = T(
     () => r.map((e) => n.find((o) => o.name === e)).filter((e) => typeof e < "u"),
     [n, r]
-  ), s = g(
+  ), s = T(
     () => n.filter((e) => !r.includes(e.name)),
     [n, r]
   );
@@ -38,7 +38,7 @@ const T = (n, m) => m || `toolbar-filter-${n}`, Q = ({
   }, [n, t]);
   const N = (e) => {
     const { name: o, value: l, type: d } = e.target, a = [l];
-    d === "radio" ? (C(), i({
+    d === "radio" ? (I(), i({
       ...t,
       [o]: a
     })) : i({
@@ -57,12 +57,12 @@ const T = (n, m) => m || `toolbar-filter-${n}`, Q = ({
     });
   };
   return /* @__PURE__ */ G(L, { children: [
-    v && /* @__PURE__ */ c(B, { ...v }),
-    u && /* @__PURE__ */ c($, { ...u }),
-    I.map((e) => /* @__PURE__ */ c(
+    v && /* @__PURE__ */ c(B, { buttonTestId: "account-menu-button", ...v }),
+    b && /* @__PURE__ */ c($, { ...b }),
+    C.map((e) => /* @__PURE__ */ c(
       M,
       {
-        id: T(e.name, e.id),
+        id: g(e.name, e.id),
         showResultsLabel: S,
         onRemove: () => R(e.name),
         onChange: N,
@@ -84,7 +84,7 @@ const T = (n, m) => m || `toolbar-filter-${n}`, Q = ({
         id: "toolbar-filter-add",
         label: A,
         items: s.map((e) => {
-          const o = T(e.name, e.id);
+          const o = g(e.name, e.id);
           return {
             id: o,
             title: e.label,

package/dist/components/Toolbar/ToolbarAccountMenu.js

@@ -1,28 +1,29 @@
-import { jsxs as f, jsx as p } from "react/jsx-runtime";
-import { createElement as n } from "react";
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import { createElement as T } from "react";
 import "../../index-L8X2o7IH.js";
 import { AccountMenu as x } from "../Account/AccountMenu.js";
-import { useRootContext as T } from "../RootProvider/RootProvider.js";
-import { DrawerOrDropdown as b } from "../Dropdown/DrawerOrDropdown.js";
+import { useRootContext as b } from "../RootProvider/RootProvider.js";
+import { DrawerOrDropdown as g } from "../Dropdown/DrawerOrDropdown.js";
 import "../Snackbar/useSnackbar.js";
-import { ToolbarButton as g } from "./ToolbarButton.js";
-import { ToolbarFilterBase as h } from "./ToolbarFilterBase.js";
-const M = ({
+import { ToolbarButton as h } from "./ToolbarButton.js";
+import { ToolbarFilterBase as w } from "./ToolbarFilterBase.js";
+const v = ({
   currentAccount: o,
   id: e = "toolbar-accounts",
   onSelectAccount: r,
-  ...l
+  buttonTestId: p,
+  ...s
 }) => {
-  const { currentId: m, toggleId: s, closeAll: t } = T(), a = () => s(e), i = m === e;
-  return /* @__PURE__ */ f(h, { expanded: i, children: [
-    /* @__PURE__ */ p(g, { type: "switch", onToggle: a, active: !!o, children: o == null ? void 0 : o.name }),
-    /* @__PURE__ */ p(b, { open: i, drawerTitle: "Endre konto", onClose: t, children: /* @__PURE__ */ n(
+  const { currentId: m, toggleId: l, closeAll: t } = b(), d = () => l(e), i = m === e;
+  return /* @__PURE__ */ n(w, { expanded: i, children: [
+    /* @__PURE__ */ a(h, { type: "switch", onToggle: d, active: !!o, dataTestId: p, children: o == null ? void 0 : o.name }),
+    /* @__PURE__ */ a(g, { open: i, drawerTitle: "Endre konto", onClose: t, children: /* @__PURE__ */ T(
       x,
       {
-        ...l,
+        ...s,
         key: m,
-        onSelectAccount: (d) => {
-          r == null || r(d), t();
+        onSelectAccount: (f) => {
+          r == null || r(f), t();
         },
         currentAccount: o
       }
@@ -30,5 +31,5 @@ const M = ({
   ] });
 };
 export {
-  M as ToolbarAccountMenu
+  v as ToolbarAccountMenu
 };