@altinn/altinn-components 0.15.4 → 0.16.0

package/dist/components/Timeline/TimelineSection.js

@@ -1,6 +1,5 @@
 import { jsxs as d, jsx as r } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
-import "../Icon/SvgIcon.js";
 import "react";
 import { Avatar as _ } from "../Avatar/Avatar.js";
 import { Byline as p } from "../Byline/Byline.js";
@@ -14,22 +13,22 @@ import '../../assets/TimelineSection.css';const l = "_section_1rt4t_1", h = "_si
   dot: v,
   content: x,
   border: b
-}, q = ({
-  loading: i,
-  color: a,
+}, k = ({
+  loading: a,
+  color: i,
   size: t = "xs",
   datetime: n,
   dateline: c,
   byline: o,
   avatar: e,
   children: m
-}) => /* @__PURE__ */ d("section", { className: s.section, "data-color": a, "data-size": t, children: [
+}) => /* @__PURE__ */ d("section", { className: s.section, "data-color": i, "data-size": t, children: [
   /* @__PURE__ */ d("aside", { className: s.sidebar, "data-size": t, children: [
     (o || c) && /* @__PURE__ */ r("div", { className: s.media, "data-size": t, children: e && /* @__PURE__ */ r(_, { ...e, size: t }) || /* @__PURE__ */ r("div", { className: s.dot }) }),
     /* @__PURE__ */ r("div", { className: s.border })
   ] }),
   /* @__PURE__ */ d("div", { className: s.content, "data-size": t, children: [
-    (o || c) && /* @__PURE__ */ d(p, { loading: i, datetime: n, size: t, children: [
+    (o || c) && /* @__PURE__ */ d(p, { loading: a, datetime: n, size: t, children: [
       o && /* @__PURE__ */ r("strong", { children: o && c ? o + ", " : o }),
       c && /* @__PURE__ */ r("span", { children: c })
     ] }),
@@ -37,5 +36,5 @@ import '../../assets/TimelineSection.css';const l = "_section_1rt4t_1", h = "_si
   ] })
 ] });
 export {
-  q as TimelineSection
+  k as TimelineSection
 };

package/dist/components/Toolbar/Toolbar.js

@@ -1,61 +1,62 @@
 "use client";
-import { jsxs as k, jsx as i } from "react/jsx-runtime";
-import { useState as u, useMemo as T } from "react";
-import { useRootContext as v } from "../RootProvider/RootProvider.js";
-import { ToolbarAccountMenu as B } from "./ToolbarAccountMenu.js";
-import { ToolbarAdd as M } from "./ToolbarAdd.js";
-import { ToolbarBase as V } from "./ToolbarBase.js";
-import { ToolbarFilter as $ } from "./ToolbarFilter.js";
-import { ToolbarSearch as q } from "./ToolbarSearch.js";
-const g = (n, l) => l || `toolbar-filter-${n}`, O = ({
+import { jsxs as v, jsx as i } from "react/jsx-runtime";
+import { useState as F, useMemo as T } from "react";
+import { useRootContext as B } from "../RootProvider/RootProvider.js";
+import { ToolbarAccountMenu as M } from "./ToolbarAccountMenu.js";
+import { ToolbarAdd as V } from "./ToolbarAdd.js";
+import { ToolbarBase as $ } from "./ToolbarBase.js";
+import { ToolbarFilter as q } from "./ToolbarFilter.js";
+import { ToolbarSearch as w } from "./ToolbarSearch.js";
+const g = (n, l) => l || `toolbar-filter-${n}`, P = ({
   filters: n = [],
   filterState: l,
   onFilterStateChange: s,
   search: m,
   accountMenu: b,
   getFilterLabel: y,
-  children: S,
-  showResultsLabel: h
+  children: x,
+  showResultsLabel: A,
+  removeButtonAltText: S
 }) => {
-  const { openId: x, closeAll: A } = v(), [C, I] = u(
+  const { openId: h, closeAll: C } = B(), [I, N] = F(
     l ?? {}
-  ), c = typeof s == "function" ? s : I, t = l || C, [d, f] = u(
+  ), c = typeof s == "function" ? s : N, t = l || I, [d, f] = F(
     (n == null ? void 0 : n.filter((o) => !(o.removable && typeof t[o.name] > "u")).map((o) => o.name)) ?? []
-  ), F = n == null ? void 0 : n.filter((o) => !d.includes(o.name)), N = T(
+  ), u = n == null ? void 0 : n.filter((o) => !d.includes(o.name)), R = T(
     () => d.map((o) => n.find((e) => e.name === o)).filter((o) => typeof o < "u"),
     [n, d]
   ), a = T(
-    () => n.filter((o) => F.includes(o)),
-    [n, F]
-  ), R = (o, e, r) => {
-    r === "radio" ? (A(), c({
+    () => n.filter((o) => u.includes(o)),
+    [n, u]
+  ), j = (o, e, r) => {
+    r === "radio" ? (C(), c({
       ...t,
       [o]: e
     })) : c({
       ...t,
       [o]: t[o] ? t[o].some((p) => e == null ? void 0 : e.includes(p)) ? t[o].filter((p) => !e.includes(p)) : [...t[o], ...e] : e
     });
-  }, j = (o) => {
+  }, L = (o) => {
     f((e) => e.filter((r) => r !== o)), c({
       ...t,
       [o]: void 0
     });
-  }, L = (o, e) => {
-    f((r) => [...r, o]), x(e);
+  }, k = (o, e) => {
+    f((r) => [...r, o]), h(e);
   };
-  return /* @__PURE__ */ k(V, { children: [
-    b && /* @__PURE__ */ i(B, { ...b }),
-    m && /* @__PURE__ */ i(q, { ...m }),
-    N.map((o) => /* @__PURE__ */ i(
-      $,
+  return /* @__PURE__ */ v($, { children: [
+    b && /* @__PURE__ */ i(M, { ...b }),
+    m && /* @__PURE__ */ i(w, { ...m }),
+    R.map((o) => /* @__PURE__ */ i(
+      q,
       {
         id: g(o.name, o.id),
-        showResultsLabel: h,
+        showResultsLabel: A,
         onRemove: () => {
-          j(o.name);
+          L(o.name);
         },
         onChange: (e) => {
-          R(o.name, [e.target.value], o.optionType);
+          j(o.name, [e.target.value], o.optionType);
         },
         name: o.name,
         options: o.options,
@@ -63,12 +64,13 @@ const g = (n, l) => l || `toolbar-filter-${n}`, O = ({
         value: t[o.name],
         optionType: o.optionType,
         removable: o.removable,
-        getSelectedLabel: y
+        getSelectedLabel: y,
+        buttonAltText: S
       },
       o.name
     )),
     (a == null ? void 0 : a.length) > 0 && /* @__PURE__ */ i(
-      M,
+      V,
       {
         id: "toolbar-filter-add",
         items: a.map((o) => {
@@ -78,15 +80,15 @@ const g = (n, l) => l || `toolbar-filter-${n}`, O = ({
             title: o.label,
             name: o.name,
             onClick: () => {
-              L(o.name, e);
+              k(o.name, e);
             }
           };
         })
       }
     ),
-    S
+    x
   ] });
 };
 export {
-  O as Toolbar
+  P as Toolbar
 };

package/dist/components/Toolbar/ToolbarAccountMenu.js

@@ -1,6 +1,5 @@
 import { jsxs as n, jsx as r } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
-import "../Icon/SvgIcon.js";
 import "react";
 import { useRootContext as a } from "../RootProvider/RootProvider.js";
 import { ToolbarButton as d } from "./ToolbarButton.js";
@@ -9,13 +8,13 @@ import { DrawerOrDropdown as x } from "../Dropdown/DrawerOrDropdown.js";
 import { AccountMenu as T } from "../GlobalMenu/AccountMenu.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-const v = ({ currentAccount: o, id: t = "toolbar-accounts", ...m }) => {
-  const { currentId: i, toggleId: p, closeAll: l } = a(), s = () => p(t), e = i === t;
+const k = ({ currentAccount: o, id: t = "toolbar-accounts", ...m }) => {
+  const { currentId: i, toggleId: l, closeAll: p } = a(), s = () => l(t), e = i === t;
   return /* @__PURE__ */ n(f, { expanded: e, children: [
     /* @__PURE__ */ r(d, { type: "switch", onToggle: s, active: !!o, children: o == null ? void 0 : o.name }),
-    /* @__PURE__ */ r(x, { open: e, drawerTitle: "Endre konto", onClose: l, children: /* @__PURE__ */ r(T, { ...m, currentAccount: o }) })
+    /* @__PURE__ */ r(x, { open: e, drawerTitle: "Endre konto", onClose: p, children: /* @__PURE__ */ r(T, { ...m, currentAccount: o }) })
   ] });
 };
 export {
-  v as ToolbarAccountMenu
+  k as ToolbarAccountMenu
 };

package/dist/components/Toolbar/ToolbarAdd.js

@@ -1,6 +1,5 @@
 import { jsxs as p, jsx as o } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
-import "../Icon/SvgIcon.js";
 import "react";
 import { useRootContext as d } from "../RootProvider/RootProvider.js";
 import { ToolbarButton as s } from "./ToolbarButton.js";
@@ -9,13 +8,13 @@ import { Menu as a } from "../Menu/Menu.js";
 import { DrawerOrDropdown as g } from "../Dropdown/DrawerOrDropdown.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-const I = ({ label: r = "Legg til", items: n, id: t }) => {
-  const { closeAll: m, currentId: i, toggleId: l } = d(), e = i === t;
+const D = ({ label: r = "Legg til", items: n, id: t }) => {
+  const { closeAll: l, currentId: m, toggleId: i } = d(), e = m === t;
   return /* @__PURE__ */ p(c, { expanded: e, children: [
-    /* @__PURE__ */ o(s, { type: "add", onToggle: () => l(t), children: r }),
-    /* @__PURE__ */ o(g, { drawerTitle: r, onClose: m, open: e, children: /* @__PURE__ */ o(a, { color: "neutral", items: n }) })
+    /* @__PURE__ */ o(s, { type: "add", onToggle: () => i(t), children: r }),
+    /* @__PURE__ */ o(g, { drawerTitle: r, onClose: l, open: e, children: /* @__PURE__ */ o(a, { color: "neutral", items: n }) })
   ] });
 };
 export {
-  I as ToolbarAdd
+  D as ToolbarAdd
 };

package/dist/components/Toolbar/ToolbarButton.js

@@ -1,46 +1,81 @@
-import { jsx as i } from "react/jsx-runtime";
+"use client";
+import { jsx as a } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
-import "react";
+import * as m from "react";
+import { forwardRef as u } from "react";
 import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import "../Icon/SvgIcon.js";
-import { Button as m } from "../Button/Button.js";
-import { ComboButton as a } from "../Button/ComboButton.js";
-import '../../assets/ToolbarButton.css';const p = "_removeButton_fxc8_1", c = {
-  removeButton: p
-}, z = ({
+import { Button as f } from "../Button/Button.js";
+import { ComboButton as c } from "../Button/ComboButton.js";
+import { S as p } from "../../XMark-Bv1I87Ev.js";
+import { S as d } from "../../Plus-B6MBOAcH.js";
+import { u as v } from "../../useId-CsCRkvK3.js";
+import '../../assets/ToolbarButton.css';var b = function(e, n) {
+  var r = {};
+  for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && n.indexOf(t) < 0 && (r[t] = e[t]);
+  if (e != null && typeof Object.getOwnPropertySymbols == "function")
+    for (var o = 0, t = Object.getOwnPropertySymbols(e); o < t.length; o++)
+      n.indexOf(t[o]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[o]) && (r[t[o]] = e[t[o]]);
+  return r;
+};
+const w = u((e, n) => {
+  var { title: r, titleId: t } = e, o = b(e, ["title", "titleId"]);
+  let l = v();
+  return l = r ? t || "title-" + l : void 0, m.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": l }, o),
+    r ? m.createElement("title", { id: l }, r) : null,
+    m.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M12.53 4.47a.75.75 0 0 0-1.06 0l-3.5 3.5a.75.75 0 0 0 1.06 1.06L12 6.06l2.97 2.97a.75.75 0 1 0 1.06-1.06zm-3.5 10.5a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 1 0-1.06-1.06L12 17.94z", clipRule: "evenodd" })
+  );
+}), y = "_removeButton_fxc8_1", O = {
+  removeButton: y
+}, E = ({
   type: e = "select",
-  selected: o = !1,
-  removable: s = !1,
-  active: n,
-  children: t,
-  onToggle: r,
-  onRemove: u
-}) => s ? /* @__PURE__ */ i(
-  a,
+  selected: n = !1,
+  removable: r = !1,
+  ariaLabel: t,
+  active: o,
+  children: l,
+  onToggle: i,
+  onRemove: s
+}) => r ? /* @__PURE__ */ a(
+  c,
+  {
+    className: O.removeButton,
+    variant: o ? "solid" : "outline",
+    size: "sm",
+    icon: p,
+    selected: n,
+    onLabelClick: i,
+    onIconClick: s,
+    ariaLabel: t || "remove",
+    children: l
+  }
+) : e === "add" ? /* @__PURE__ */ a(
+  f,
   {
-    className: c.removeButton,
-    variant: n ? "solid" : "outline",
+    variant: "dotted",
     size: "sm",
-    icon: "x-mark",
-    selected: o,
-    onLabelClick: r,
-    onIconClick: u,
-    children: t
+    icon: d,
+    selected: n,
+    onClick: i,
+    ariaLabel: t || "add",
+    children: l
   }
-) : e === "add" ? /* @__PURE__ */ i(m, { variant: "dotted", size: "sm", icon: "plus", selected: o, onClick: r, children: t }) : /* @__PURE__ */ i(
-  m,
+) : /* @__PURE__ */ a(
+  f,
   {
-    variant: n ? "solid" : "outline",
+    variant: o ? "solid" : "outline",
     size: "sm",
-    icon: "chevron-up-down",
-    selected: o,
-    onClick: r,
+    icon: w,
+    ariaLabel: t,
+    selected: n,
+    onClick: i,
     reverse: !0,
-    children: t
+    children: l
   }
 );
 export {
-  z as ToolbarButton
+  E as ToolbarButton
 };

package/dist/components/Toolbar/ToolbarDaterange.js

@@ -1,7 +1,6 @@
 import { jsxs as n, jsx as o } from "react/jsx-runtime";
 import { useState as m } from "react";
 import "../../index-L8X2o7IH.js";
-import "../Icon/SvgIcon.js";
 import { useRootContext as F } from "../RootProvider/RootProvider.js";
 import { ToolbarButton as x } from "./ToolbarButton.js";
 import { ToolbarFilterBase as S } from "./ToolbarFilterBase.js";
@@ -11,12 +10,12 @@ import { DrawerOrDropdown as y } from "../Dropdown/DrawerOrDropdown.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { Datepicker as B } from "../Datepicker/Datepicker.js";
-import '../../assets/ToolbarDaterange.css';const I = "_datepicker_ud6cb_1", N = "_fields_ud6cb_6", j = "_description_ud6cb_10", s = {
+import '../../assets/ToolbarDaterange.css';const I = "_datepicker_ud6cb_1", N = "_fields_ud6cb_6", j = "_description_ud6cb_10", c = {
   datepicker: I,
   fields: N,
   description: j
-}, Q = ({
-  id: c = "toolbar-filter-datetange",
+}, P = ({
+  id: i = "toolbar-filter-datetange",
   title: f = "Select daterange",
   description: g = "Choose dates or click to set daterange.",
   fromLabel: u = "From date",
@@ -24,17 +23,17 @@ import '../../assets/ToolbarDaterange.css';const I = "_datepicker_ud6cb_1", N =
   label: D = "Select daterange",
   value: b
 }) => {
-  const { currentId: T, toggleId: _ } = F(), l = () => _(c), d = T === c, [t, r] = m(""), [i, a] = m(""), k = (e) => {
+  const { currentId: T, toggleId: _ } = F(), l = () => _(i), d = T === i, [t, r] = m(""), [s, a] = m(""), k = (e) => {
     r(e.target.value);
   }, C = (e) => {
     a(e.target.value);
   }, v = (e) => {
-    i ? (r(e), a("")) : t && e < t ? (a(t), r(e)) : t ? a(e) : r(e);
+    s ? (r(e), a("")) : t && e < t ? (a(t), r(e)) : t ? a(e) : r(e);
   };
   return /* @__PURE__ */ n(S, { expanded: d, children: [
     /* @__PURE__ */ o(x, { type: "switch", onToggle: l, active: !!b, children: D }),
     /* @__PURE__ */ o(y, { open: d, drawerTitle: f, onClose: l, children: /* @__PURE__ */ n(w, { children: [
-      /* @__PURE__ */ n("div", { className: s.fields, children: [
+      /* @__PURE__ */ n("div", { className: c.fields, children: [
         /* @__PURE__ */ o(
           p,
           {
@@ -45,15 +44,15 @@ import '../../assets/ToolbarDaterange.css';const I = "_datepicker_ud6cb_1", N =
             onChange: k
           }
         ),
-        /* @__PURE__ */ o(p, { name: "toDate", value: i, type: "date", label: h, onChange: C })
+        /* @__PURE__ */ o(p, { name: "toDate", value: s, type: "date", label: h, onChange: C })
       ] }),
-      /* @__PURE__ */ n("section", { className: s.datepicker, children: [
-        /* @__PURE__ */ o(B, { onSelect: v, selectFrom: t, selectTo: i }),
-        /* @__PURE__ */ o("p", { className: s.description, children: g })
+      /* @__PURE__ */ n("section", { className: c.datepicker, children: [
+        /* @__PURE__ */ o(B, { onSelect: v, selectFrom: t, selectTo: s }),
+        /* @__PURE__ */ o("p", { className: c.description, children: g })
       ] })
     ] }) })
   ] });
 };
 export {
-  Q as ToolbarDaterange
+  P as ToolbarDaterange
 };

package/dist/components/Toolbar/ToolbarFilter.js

@@ -1,61 +1,62 @@
-import { jsxs as b, jsx as s } from "react/jsx-runtime";
+import { jsxs as j, jsx as s } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
-import "../Icon/SvgIcon.js";
 import "react";
-import { useRootContext as j } from "../RootProvider/RootProvider.js";
-import { ToolbarButton as B } from "./ToolbarButton.js";
-import { ToolbarFilterBase as C } from "./ToolbarFilterBase.js";
-import { DrawerOrDropdown as O } from "../Dropdown/DrawerOrDropdown.js";
+import { useRootContext as B } from "../RootProvider/RootProvider.js";
+import { ToolbarButton as C } from "./ToolbarButton.js";
+import { ToolbarFilterBase as O } from "./ToolbarFilterBase.js";
+import { DrawerOrDropdown as k } from "../Dropdown/DrawerOrDropdown.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { ToolbarOptions as k } from "./ToolbarOptions.js";
-const D = (p, o) => Array.isArray(o) ? o.join(", ") : o, J = ({
+import { ToolbarOptions as D } from "./ToolbarOptions.js";
+const F = (p, o) => Array.isArray(o) ? o.join(", ") : o, J = ({
   removable: p,
   label: o,
   name: t,
   value: r,
   options: m,
   optionGroups: f,
-  onChange: d,
-  onRemove: a,
-  getSelectedLabel: i,
-  showResultsLabel: y = "Show results",
-  optionType: A,
-  id: c = `toolbar-filter-${t}`
+  onChange: a,
+  onRemove: d,
+  buttonAltText: y = "Remove button",
+  getSelectedLabel: n,
+  showResultsLabel: A = "Show results",
+  optionType: h,
+  id: e = `toolbar-filter-${t}`
 }) => {
-  const { currentId: h, toggleId: T, closeAll: u } = j(), w = (m ?? []).map(
-    (n) => ({
-      ...n,
+  const { currentId: u, toggleId: T, closeAll: b } = B(), w = (m ?? []).map(
+    (i) => ({
+      ...i,
       name: t,
-      checked: Array.isArray(r) ? r.includes(n.value) : n.value === r
+      checked: Array.isArray(r) ? r.includes(i.value) : i.value === r
     })
-  ), x = (i == null ? void 0 : i(t, r)) ?? D(t, r), e = () => T(c), l = h === c;
-  return /* @__PURE__ */ b(C, { expanded: l, children: [
+  ), x = (n == null ? void 0 : n(t, r)) ?? F(t, r), c = () => T(e), l = u === e;
+  return /* @__PURE__ */ j(O, { expanded: l, children: [
     /* @__PURE__ */ s(
-      B,
+      C,
       {
         type: "select",
         removable: p,
         active: Array.isArray(r) ? r.length > 0 : typeof r < "u",
-        onToggle: e,
-        onRemove: a,
+        onToggle: c,
+        ariaLabel: y,
+        onRemove: d,
         children: x || o
       }
     ),
     /* @__PURE__ */ s(
-      O,
+      k,
       {
         open: l,
         drawerTitle: o,
-        onClose: u,
-        drawerButton: { onClick: e, label: y },
+        onClose: b,
+        drawerButton: { onClick: c, label: A },
         children: /* @__PURE__ */ s(
-          k,
+          D,
           {
             options: w,
             optionGroups: f,
-            onChange: d,
-            optionType: A
+            onChange: a,
+            optionType: h
           }
         )
       }

package/dist/components/Toolbar/ToolbarMenu.js

@@ -1,6 +1,5 @@
 import { jsxs as d, jsx as o } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
-import "../Icon/SvgIcon.js";
 import "react";
 import { useRootContext as u } from "../RootProvider/RootProvider.js";
 import { ToolbarButton as f } from "./ToolbarButton.js";
@@ -9,13 +8,13 @@ import { Menu as T } from "../Menu/Menu.js";
 import { DrawerOrDropdown as b } from "../Dropdown/DrawerOrDropdown.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-const y = ({ label: e, value: n, groups: m, search: i, items: p, id: r = "toolbar-menu" }) => {
-  const { currentId: l, toggleId: s, closeAll: c } = u(), a = () => s(r), t = l === r;
+const v = ({ label: e, value: n, groups: m, search: i, items: l, id: r = "toolbar-menu" }) => {
+  const { currentId: p, toggleId: s, closeAll: c } = u(), a = () => s(r), t = p === r;
   return /* @__PURE__ */ d(x, { expanded: t, children: [
     /* @__PURE__ */ o(f, { type: "switch", onToggle: a, active: !!n, children: e }),
-    /* @__PURE__ */ o(b, { open: t, drawerTitle: "Endre konto", onClose: c, children: /* @__PURE__ */ o(T, { groups: m, search: i, items: p }) })
+    /* @__PURE__ */ o(b, { open: t, drawerTitle: "Endre konto", onClose: c, children: /* @__PURE__ */ o(T, { groups: m, search: i, items: l }) })
   ] });
 };
 export {
-  y as ToolbarMenu
+  v as ToolbarMenu
 };

package/dist/components/Toolbar/ToolbarOptions.js

@@ -1,40 +1,39 @@
 import { jsxs as c, jsx as r } from "react/jsx-runtime";
 import { Fragment as M } from "react";
 import "../../index-L8X2o7IH.js";
-import "../Icon/SvgIcon.js";
 import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { MenuOption as v } from "../Menu/MenuOption.js";
 import { MenuSearch as j } from "../Menu/MenuSearch.js";
 import { MenuHeader as x } from "../Menu/MenuHeader.js";
-import { MenuBase as O, MenuList as I, MenuListItem as l } from "../Menu/MenuBase.js";
-const z = ({ search: d, optionGroups: n = {}, options: h, onChange: f, optionType: b }) => {
-  var i;
+import { MenuBase as O, MenuList as I, MenuListItem as m } from "../Menu/MenuBase.js";
+const w = ({ search: d, optionGroups: o = {}, options: h, onChange: f, optionType: b }) => {
+  var u;
   const p = h.reduce(
-    (e, m) => {
-      const o = m.groupId || "";
-      return e[o] = e[o] || [], e[o].push(m), e;
+    (e, l) => {
+      const n = l.groupId || "";
+      return e[n] = e[n] || [], e[n].push(l), e;
     },
     {}
   );
   return /* @__PURE__ */ c(O, { theme: "default", children: [
     d && /* @__PURE__ */ r(j, { ...d }),
-    /* @__PURE__ */ r(I, { children: (i = Object.keys(p)) == null ? void 0 : i.map((e, m) => {
-      var a;
-      const o = n[e] || {}, { title: u, divider: g = !0 } = o;
+    /* @__PURE__ */ r(I, { children: (u = Object.keys(p)) == null ? void 0 : u.map((e, l) => {
+      var i;
+      const n = o[e] || {}, { title: a, divider: g = !0 } = n;
       return /* @__PURE__ */ c(M, { children: [
-        m && g ? /* @__PURE__ */ r(l, { role: "separator" }) : "",
-        u && /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(x, { title: u }) }),
-        (a = p[e]) == null ? void 0 : a.map((t) => {
+        l && g ? /* @__PURE__ */ r(m, { role: "separator" }) : "",
+        a && /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(x, { title: a }) }),
+        (i = p[e]) == null ? void 0 : i.map((t) => {
           var s;
-          return /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(
+          return /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(
             v,
             {
               onChange: f,
               label: t.label,
               badge: t.badge,
-              type: t.type || ((s = n == null ? void 0 : n[e]) == null ? void 0 : s.optionType) || b,
+              type: t.type || ((s = o == null ? void 0 : o[e]) == null ? void 0 : s.optionType) || b,
               value: t.value,
               checked: t.checked
             }
@@ -45,5 +44,5 @@ const z = ({ search: d, optionGroups: n = {}, options: h, onChange: f, optionTyp
   ] });
 };
 export {
-  z as ToolbarOptions
+  w as ToolbarOptions
 };

package/dist/components/Toolbar/ToolbarSearch.js

@@ -1,32 +1,50 @@
-import { jsxs as a, jsx as o } from "react/jsx-runtime";
-import { Icon as e } from "../Icon/Icon.js";
-import "../Icon/SvgIcon.js";
+import { jsxs as a, jsx as i } from "react/jsx-runtime";
+import { Icon as m } from "../Icon/Icon.js";
 import "../../index-L8X2o7IH.js";
 import "react";
-import { IconButton as m } from "../Button/IconButton.js";
+import { IconButton as l } from "../Button/IconButton.js";
 import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/ToolbarSearch.css';const l = "_field_14byu_1", p = "_icon_14byu_5", u = "_input_14byu_14", _ = "_clear_14byu_30", i = {
-  field: l,
-  icon: p,
-  input: u,
-  clear: _
-}, k = ({ value: c, name: n, placeholder: r = "Search", onChange: s, onClear: t }) => /* @__PURE__ */ a("div", { className: i.field, children: [
-  /* @__PURE__ */ o(
+import { S as p } from "../../MagnifyingGlass-DWIcpwS4.js";
+import { S as u } from "../../XMark-Bv1I87Ev.js";
+import '../../assets/ToolbarSearch.css';const _ = "_field_14byu_1", f = "_icon_14byu_5", d = "_input_14byu_14", y = "_clear_14byu_30", o = {
+  field: _,
+  icon: f,
+  input: d,
+  clear: y
+}, M = ({
+  value: r,
+  name: c,
+  placeholder: s = "Search",
+  clearButtonAltText: n = "Clear search",
+  onChange: e,
+  onClear: t
+}) => /* @__PURE__ */ a("div", { className: o.field, children: [
+  /* @__PURE__ */ i(
     "input",
     {
       type: "search",
-      value: c,
-      name: n,
-      placeholder: r,
-      className: i.input,
-      onChange: s
+      value: r,
+      name: c,
+      placeholder: s,
+      className: o.input,
+      onChange: e
     }
   ),
-  /* @__PURE__ */ o(e, { name: "magnifying-glass", className: i.icon }),
-  t && /* @__PURE__ */ o(m, { icon: "x-mark", variant: "solid", size: "custom", className: i.clear, onClick: t })
+  /* @__PURE__ */ i(m, { svgElement: p, className: o.icon }),
+  t && /* @__PURE__ */ i(
+    l,
+    {
+      icon: u,
+      variant: "solid",
+      size: "custom",
+      className: o.clear,
+      onClick: t,
+      iconAltText: n
+    }
+  )
 ] });
 export {
-  k as ToolbarSearch
+  M as ToolbarSearch
 };