@altinn/altinn-components 0.15.5 → 0.17.0

package/dist/components/Page/Breadcrumbs.js

@@ -1,22 +1,22 @@
 import { jsx as r, jsxs as l } from "react/jsx-runtime";
 import { Icon as e } from "../Icon/Icon.js";
-import "../Icon/SvgIcon.js";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { BreadcrumbsLink as c } from "./BreadcrumbsLink.js";
-import '../../assets/Breadcrumbs.css';const a = "_list_tknjf_1", p = "_item_tknjf_12", _ = "_icon_tknjf_18", i = {
-  list: a,
-  item: p,
-  icon: _
-}, B = ({ items: t = [] }) => /* @__PURE__ */ r("ul", { className: i.list, children: t.map((m, o) => {
-  const { label: n, ...s } = m;
-  return (t == null ? void 0 : t.length) > o + 1 ? /* @__PURE__ */ l("li", { className: i.item, children: [
-    /* @__PURE__ */ r(c, { ...s, children: n }),
-    /* @__PURE__ */ r(e, { name: "arrow-right", className: i.icon })
-  ] }, o) : /* @__PURE__ */ r("li", { className: i.item, children: /* @__PURE__ */ r(c, { ...s, as: "span", children: n }) }, o);
+import { S as a } from "../../ArrowRight-OLgmLkGy.js";
+import '../../assets/Breadcrumbs.css';const p = "_list_tknjf_1", _ = "_item_tknjf_12", f = "_icon_tknjf_18", o = {
+  list: p,
+  item: _,
+  icon: f
+}, B = ({ items: t = [] }) => /* @__PURE__ */ r("ul", { className: o.list, children: t.map((m, i) => {
+  const { label: s, ...n } = m;
+  return (t == null ? void 0 : t.length) > i + 1 ? /* @__PURE__ */ l("li", { className: o.item, children: [
+    /* @__PURE__ */ r(c, { ...n, children: s }),
+    /* @__PURE__ */ r(e, { svgElement: a, className: o.icon })
+  ] }, i) : /* @__PURE__ */ r("li", { className: o.item, children: /* @__PURE__ */ r(c, { ...n, as: "span", children: s }) }, i);
 }) });
 export {
   B as Breadcrumbs

package/dist/components/Page/BreadcrumbsLink.js

@@ -1,28 +1,26 @@
-import { jsx as i } from "react/jsx-runtime";
-import { c as l } from "../../index-L8X2o7IH.js";
-import '../../assets/BreadcrumbsLink.css';const m = "_link_afpoj_1", p = {
-  link: m
-}, x = ({
+import { jsx as c } from "react/jsx-runtime";
+import { c as i } from "../../index-L8X2o7IH.js";
+import '../../assets/BreadcrumbsLink.css';const l = "_link_afpoj_1", m = {
+  link: l
+}, d = ({
   as: o,
   className: s,
   disabled: n = !1,
   selected: e,
   tabIndex: r = 0,
   label: t,
-  children: a,
-  ...c
-}) => /* @__PURE__ */ i(
+  children: a
+}) => /* @__PURE__ */ c(
   o || "a",
   {
     tabIndex: r,
     "aria-selected": e,
     "aria-disabled": n,
     disabled: n,
-    className: l(p.link, s),
-    ...c,
+    className: i(m.link, s),
     children: a || t
   }
 );
 export {
-  x as BreadcrumbsLink
+  d as BreadcrumbsLink
 };

package/dist/components/Page/ContactSection.js

@@ -1,8 +1,7 @@
 import { jsxs as p, jsx as r } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
-import "../Icon/SvgIcon.js";
 import "react";
-import { Button as a } from "../Button/Button.js";
+import { Button as m } from "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import { Typography as h } from "../Typography/Typography.js";
 import { Heading as g } from "../Typography/Heading.js";
@@ -10,7 +9,7 @@ import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { Flex as t } from "./Flex.js";
 import { Section as s } from "./Section.js";
-const H = ({
+const F = ({
   theme: e,
   color: l,
   variant: i = "inline",
@@ -31,10 +30,10 @@ const H = ({
         /* @__PURE__ */ r(g, { size: "lg", children: d }),
         n && /* @__PURE__ */ r(h, { children: n })
       ] }),
-      c && /* @__PURE__ */ r(t, { spacing: 2, children: c.map((o, m) => /* @__PURE__ */ r(a, { variant: "outline", icon: o == null ? void 0 : o.icon, children: o.label }, m)) })
+      c && /* @__PURE__ */ r(t, { spacing: 2, children: c.map((o, a) => /* @__PURE__ */ r(m, { variant: "outline", icon: o == null ? void 0 : o.icon, children: o.label }, a)) })
     ]
   }
 );
 export {
-  H as ContactSection
+  F as ContactSection
 };

package/dist/components/Page/Flex.js

@@ -1,6 +1,6 @@
-import { jsx as w } from "react/jsx-runtime";
+import { jsx as v } from "react/jsx-runtime";
 import { c as _ } from "../../index-L8X2o7IH.js";
-import '../../assets/Flex.css';const h = "_flex_8w6x1_1", j = {
+import '../../assets/Flex.css';const h = "_flex_vvg9d_1", j = {
   flex: h
 }, C = ({
   as: a = "div",
@@ -16,14 +16,14 @@ import '../../assets/Flex.css';const h = "_flex_8w6x1_1", j = {
   margin: c,
   bleed: f = !1,
   className: m,
-  style: x,
-  children: p,
+  style: p,
+  children: x,
   ...g
-}) => /* @__PURE__ */ w(
+}) => /* @__PURE__ */ v(
   a,
   {
     className: _(j.flex, m),
-    style: x,
+    style: p,
     "data-color": t,
     "data-theme": e,
     "data-shadow": n,
@@ -36,7 +36,7 @@ import '../../assets/Flex.css';const h = "_flex_8w6x1_1", j = {
     "data-margin": c,
     "data-bleed": f,
     ...g,
-    children: p
+    children: x
   }
 );
 export {

package/dist/components/Page/PageHeader.js

@@ -1,6 +1,5 @@
 import { jsxs as i, jsx as r } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
-import "../Icon/SvgIcon.js";
 import "react";
 import "../RootProvider/RootProvider.js";
 import { ListItemIcon as j } from "../List/ListItemIcon.js";
@@ -12,12 +11,12 @@ import { Flex as m } from "./Flex.js";
 import { PageNav as I } from "./PageNav.js";
 import { PageTabs as T } from "./PageTabs.js";
 import { Section as F } from "./Section.js";
-const U = ({
+const R = ({
   variant: g,
   size: f = "xl",
-  title: t,
+  title: x,
   description: o,
-  icon: x,
+  icon: t,
   avatar: h,
   avatarGroup: s,
   tabs: e,
@@ -33,9 +32,9 @@ const U = ({
 }) => (g === "card" && (l = "default", a = "page", c = "xs", d = !0), g === "card" ? /* @__PURE__ */ i(F, { as: "header", theme: l, shadow: c, bleed: d, ...P, children: [
   (p || n) && /* @__PURE__ */ r(I, { backButton: p, breadcrumbs: n, padding: 2 }),
   /* @__PURE__ */ i(m, { direction: "row", align: "center", padding: "page", spacing: 3, children: [
-    /* @__PURE__ */ r(j, { avatar: h, avatarGroup: s, icon: x, size: "xl" }),
+    /* @__PURE__ */ r(j, { avatar: h, avatarGroup: s, icon: t, size: "xl" }),
     /* @__PURE__ */ i(m, { direction: "col", children: [
-      /* @__PURE__ */ r(H, { size: f, children: t }),
+      /* @__PURE__ */ r(H, { size: f, children: x }),
       o && /* @__PURE__ */ r(y, { size: "xs", children: o })
     ] })
   ] }),
@@ -44,9 +43,9 @@ const U = ({
 ] }) : /* @__PURE__ */ i(F, { as: "header", theme: l, shadow: c, bleed: d, ...P, children: [
   (p || n) && /* @__PURE__ */ r(I, { backButton: p, breadcrumbs: n }),
   /* @__PURE__ */ i(m, { direction: "row", align: "center", padding: a, spacing: 3, children: [
-    /* @__PURE__ */ r(j, { avatar: h, avatarGroup: s, icon: x, size: "xl" }),
+    /* @__PURE__ */ r(j, { avatar: h, avatarGroup: s, icon: t, size: "xl" }),
     /* @__PURE__ */ i(m, { direction: "col", children: [
-      /* @__PURE__ */ r(H, { size: f, children: t }),
+      /* @__PURE__ */ r(H, { size: f, children: x }),
       o && /* @__PURE__ */ r(y, { size: "xs", children: o })
     ] })
   ] }),
@@ -54,5 +53,5 @@ const U = ({
   e && /* @__PURE__ */ r(T, { ...e })
 ] }));
 export {
-  U as PageHeader
+  R as PageHeader
 };

package/dist/components/Page/PageMenu.js

@@ -1,16 +1,15 @@
 import { jsx as t } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
-import "../Icon/SvgIcon.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import { MenuItem as o } from "../Menu/MenuItem.js";
+import { MenuItem as l } from "../Menu/MenuItem.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/PageMenu.css';const l = "_menu_1wsjl_1", n = "_list_1wsjl_6", a = "_item_1wsjl_29", e = {
-  menu: l,
-  list: n,
+import '../../assets/PageMenu.css';const n = "_menu_1wsjl_1", o = "_list_1wsjl_6", a = "_item_1wsjl_29", e = {
+  menu: n,
+  list: o,
   item: a
-}, 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)) }) });
+}, w = ({ 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(l, { ...m, className: e.item }) }, m.id)) }) });
 export {
-  N as PageMenu
+  w as PageMenu
 };

package/dist/components/Page/PageNav.js

@@ -1,17 +1,17 @@
-import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
-import "../Icon/SvgIcon.js";
 import "react";
-import { Button as m } from "../Button/Button.js";
+import { Button as n } from "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as l } from "./Flex.js";
-import { Breadcrumbs as a } from "./Breadcrumbs.js";
-import '../../assets/PageNav.css';const c = "_nav_9bu1z_1", p = "_controls_9bu1z_7", v = {
-  nav: c,
-  controls: p
-}, N = ({
+import { Flex as a } from "./Flex.js";
+import { Breadcrumbs as l } from "./Breadcrumbs.js";
+import { S as c } from "../../ArrowLeft-C91mClJx.js";
+import '../../assets/PageNav.css';const p = "_nav_9bu1z_1", v = "_controls_9bu1z_7", f = {
+  nav: p,
+  controls: v
+}, S = ({
   color: e,
   padding: s,
   breadcrumbs: i,
@@ -20,10 +20,10 @@ import '../../assets/PageNav.css';const c = "_nav_9bu1z_1", p = "_controls_9bu1z
     label: "Back"
   },
   controls: t
-}) => /* @__PURE__ */ n(l, { as: "nav", direction: "row", align: "center", justify: "between", color: e, padding: s, children: [
-  i ? /* @__PURE__ */ o(a, { items: i }) : /* @__PURE__ */ o(m, { ...r, variant: "text", icon: "arrow-left", children: (r == null ? void 0 : r.label) || "Back" }),
-  t && /* @__PURE__ */ o("div", { className: v.controls, children: t })
+}) => /* @__PURE__ */ m(a, { as: "nav", direction: "row", align: "center", justify: "between", color: e, padding: s, children: [
+  i ? /* @__PURE__ */ o(l, { items: i }) : /* @__PURE__ */ o(n, { ...r, variant: "text", icon: c, children: (r == null ? void 0 : r.label) || "Back" }),
+  t && /* @__PURE__ */ o("div", { className: f.controls, children: t })
 ] });
 export {
-  N as PageNav
+  S as PageNav
 };

package/dist/components/Page/PageTabs.js

@@ -1,6 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
-import "../Icon/SvgIcon.js";
 import "react";
 import "../RootProvider/RootProvider.js";
 import { MenuItem as l } from "../Menu/MenuItem.js";
@@ -10,7 +9,7 @@ import { Flex as n } from "./Flex.js";
 import '../../assets/PageTabs.css';const p = "_list_qqtoj_1", a = "_item_qqtoj_21", i = {
   list: p,
   item: a
-}, N = ({ theme: m = "transparent", color: o, items: e = [], padding: s = 0 }) => /* @__PURE__ */ t(n, { theme: m, color: o, padding: s, children: /* @__PURE__ */ t("ul", { className: i.list, children: e.map((r) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(l, { ...r, className: i.item }) }, r.id)) }) });
+}, x = ({ theme: m = "transparent", color: o, items: e = [], padding: s = 0 }) => /* @__PURE__ */ t(n, { theme: m, color: o, padding: s, children: /* @__PURE__ */ t("ul", { className: i.list, children: e.map((r) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(l, { ...r, className: i.item }) }, r.id)) }) });
 export {
-  N as PageTabs
+  x as PageTabs
 };

package/dist/components/Page/Section.js

@@ -1,12 +1,11 @@
 import { jsx as m } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
-import "../Icon/SvgIcon.js";
 import "react";
 import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { Flex as p } from "./Flex.js";
-const u = ({ as: o = "section", direction: r = "col", children: t, ...i }) => /* @__PURE__ */ m(p, { as: o, direction: r, ...i, children: t });
+const j = ({ as: o = "section", direction: r = "col", children: t, ...i }) => /* @__PURE__ */ m(p, { as: o, direction: r, ...i, children: t });
 export {
-  u as Section
+  j as Section
 };

package/dist/components/ResourceList/ResourceList.js

@@ -1,13 +1,12 @@
 import { jsx as e } from "react/jsx-runtime";
 import { createElement as i } from "react";
 import "../../index-L8X2o7IH.js";
-import "../Icon/SvgIcon.js";
 import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { ResourceListItem as p } from "./ResourceListItem.js";
 import { ListBase as s } from "../List/ListBase.js";
-const R = ({ items: o, defaultItemSize: t = "md", ...m }) => /* @__PURE__ */ e(s, { ...m, children: o.map((r) => /* @__PURE__ */ i(p, { ...r, key: r.id, size: t })) });
+const x = ({ items: o, defaultItemSize: t = "md", ...m }) => /* @__PURE__ */ e(s, { ...m, children: o.map((r) => /* @__PURE__ */ i(p, { ...r, key: r.id, size: t })) });
 export {
-  R as ResourceList
+  x as ResourceList
 };

package/dist/components/ResourceList/ResourceListItem.js

@@ -1,12 +1,11 @@
 import { jsx as p } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
-import "../Icon/SvgIcon.js";
 import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { ListItem as e } from "../List/ListItem.js";
-const x = ({
+const u = ({
   ownerName: t,
   resourceName: r,
   ownerLogoUrlAlt: i,
@@ -27,5 +26,5 @@ const x = ({
   }
 );
 export {
-  x as ResourceListItem
+  u as ResourceListItem
 };

package/dist/components/Search/Autocomplete.js

@@ -1,45 +1,47 @@
-import { jsx as o } from "react/jsx-runtime";
-import { useRef as b, createElement as v } from "react";
+import { jsx as m } from "react/jsx-runtime";
+import { useRef as v, createElement as x } from "react";
 import "../../index-L8X2o7IH.js";
-import "../Icon/SvgIcon.js";
-import { useMenu as x } from "../../hooks/useMenu.js";
+import { useMenu as A } from "../../hooks/useMenu.js";
 import "../RootProvider/RootProvider.js";
-import { AutocompleteBase as A } from "./AutocompleteBase.js";
-import { AutocompleteGroup as I } from "./AutocompleteGroup.js";
+import { AutocompleteBase as I } from "./AutocompleteBase.js";
+import { AutocompleteGroup as l } from "./AutocompleteGroup.js";
 import { AutocompleteItem as h } from "./AutocompleteItem.js";
 import "../Snackbar/useSnackbar.js";
 import { useEnterKey as k } from "../../hooks/useEnterKey.js";
-const D = ({ className: u, items: i, groups: s = {}, expanded: n, onSelect: r }) => {
-  const p = b(null);
+const C = ({ className: u, items: s, groups: i = {}, expanded: n, onSelect: r }) => {
+  const p = v(null);
   k(() => {
     var e;
     const t = (e = p.current) == null ? void 0 : e.querySelector('[data-active="true"]');
     t == null || t.dispatchEvent(new MouseEvent("click", { bubbles: !0 })), r == null || r();
   });
-  const { menu: c, setActiveIndex: d } = x({
-    items: i,
-    groups: s,
+  const { menu: a, setActiveIndex: c } = A({
+    items: s,
+    groups: i,
     groupByKey: "groupId",
     keyboardEvents: !0
   });
-  return /* @__PURE__ */ o(A, { className: u, expanded: n, ref: p, children: c.map((t, e) => /* @__PURE__ */ v(I, { ...t.props, key: e }, /* @__PURE__ */ o("ul", { children: t.items.map((a, f) => {
+  return /* @__PURE__ */ m(I, { className: u, expanded: n, ref: p, children: a.map((t, e) => /* @__PURE__ */ x(l, { ...t.props, key: e }, /* @__PURE__ */ m("ul", { children: t.items.map((d, f) => {
     const {
-      active: l,
-      menuIndex: y,
-      props: { groupId: M, onClick: m, ...E }
-    } = a;
-    return /* @__PURE__ */ o("li", { tabIndex: -1, onMouseEnter: () => d(y), children: /* @__PURE__ */ o(
+      active: y,
+      menuIndex: E,
+      props: { groupId: M, onClick: o, ...b }
+    } = d;
+    return /* @__PURE__ */ m(
       h,
       {
-        ...E,
+        tabIndex: -1,
+        onMouseEnter: () => c(E),
+        ...b,
         onClick: () => {
-          m == null || m(), r == null || r();
+          o == null || o(), r == null || r();
         },
-        active: l
-      }
-    ) }, f);
+        active: y
+      },
+      f
+    );
   }) }))) });
 };
 export {
-  D as Autocomplete
+  C as Autocomplete
 };

package/dist/components/Search/AutocompleteItem.js

@@ -1,6 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
-import "../Icon/SvgIcon.js";
 import "react";
 import { BookmarksListItem as a } from "../Bookmarks/BookmarksListItem.js";
 import "../RootProvider/RootProvider.js";
@@ -10,7 +9,7 @@ import "./AutocompleteBase.js";
 import { ScopeListItem as n } from "./ScopeListItem.js";
 import { SuggestListItem as s } from "./SuggestListItem.js";
 import "../Snackbar/useSnackbar.js";
-const g = ({ type: m, ...e }) => {
+const w = ({ type: m, ...e }) => {
   switch (m) {
     case "scope":
       return /* @__PURE__ */ t(
@@ -55,5 +54,5 @@ const g = ({ type: m, ...e }) => {
   }
 };
 export {
-  g as AutocompleteItem
+  w as AutocompleteItem
 };

package/dist/components/Search/ScopeListItem.js

@@ -1,14 +1,13 @@
 import { jsx as o } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
-import "../Icon/SvgIcon.js";
 import "../RootProvider/RootProvider.js";
 import "./AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { ListItem as i } from "../List/ListItem.js";
 import '../../assets/ScopeListItem.css';const r = "_item_1a3bc_1", e = {
   item: r
-}, I = ({ as: s = "a", label: t, ...m }) => /* @__PURE__ */ o(i, { className: e.item, label: t, ...m });
+}, x = ({ as: s = "a", label: t, ...m }) => /* @__PURE__ */ o(i, { className: e.item, label: t, ...m });
 export {
-  I as ScopeListItem
+  x as ScopeListItem
 };

package/dist/components/Search/SearchField.js

@@ -1,80 +1,85 @@
 "use client";
-import { jsxs as b, jsx as i } from "react/jsx-runtime";
+import { jsxs as C, jsx as o } from "react/jsx-runtime";
 import { c as I } from "../../index-L8X2o7IH.js";
 import { useRef as N } from "react";
-import { Icon as g } from "../Icon/Icon.js";
-import "../Icon/SvgIcon.js";
+import { Icon as v } from "../Icon/Icon.js";
 import { IconButton as n } from "../Button/IconButton.js";
 import "../RootProvider/RootProvider.js";
 import "./AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/SearchField.css';const C = "_field_1y3oc_1", j = "_icon_1y3oc_10", K = "_input_1y3oc_17", S = "_dismiss_1y3oc_41", T = "_clear_1y3oc_47", s = {
-  field: C,
-  icon: j,
+import { S as T } from "../../MagnifyingGlass-DWIcpwS4.js";
+import { S as l } from "../../XMark-Bv1I87Ev.js";
+import '../../assets/SearchField.css';const j = "_field_1y3oc_1", A = "_icon_1y3oc_10", K = "_input_1y3oc_17", M = "_dismiss_1y3oc_41", U = "_clear_1y3oc_47", s = {
+  field: j,
+  icon: A,
   input: K,
-  dismiss: S,
-  clear: T
-}, A = ({
-  className: l,
-  expanded: m,
-  name: p = "q",
-  value: t,
-  placeholder: u = "Søk",
-  onFocus: d,
-  onBlur: f,
-  onChange: _,
-  onClear: y,
-  onClose: x,
-  onEnter: c,
-  tabIndex: h
+  dismiss: M,
+  clear: U
+}, H = ({
+  className: m,
+  expanded: p,
+  name: u = "q",
+  value: i,
+  placeholder: d = "Search",
+  closeButtonAltText: f = "Close search",
+  clearButtonAltText: _ = "Clear search",
+  onFocus: y,
+  onBlur: h,
+  onChange: x,
+  onClear: S,
+  onClose: b,
+  onEnter: t,
+  tabIndex: g
 }) => {
-  const o = N(null), k = (e) => {
+  const c = N(null), k = (e) => {
     var a, r;
-    e.key === "Escape" && ((a = o.current) == null || a.blur()), e.key === "Enter" && ((r = o.current) == null || r.blur(), c == null || c());
+    e.key === "Escape" && ((a = c.current) == null || a.blur()), e.key === "Enter" && ((r = c.current) == null || r.blur(), t == null || t());
   };
-  return /* @__PURE__ */ b("div", { className: I(s.field, l), children: [
-    /* @__PURE__ */ i(
+  return /* @__PURE__ */ C("div", { className: I(s.field, m), children: [
+    /* @__PURE__ */ o(
       "input",
       {
-        ref: o,
-        onFocus: d,
-        onBlur: f,
-        name: p,
-        value: t,
-        onChange: _,
-        placeholder: u,
+        ref: c,
+        onFocus: y,
+        onBlur: h,
+        name: u,
+        value: i,
+        onChange: x,
+        placeholder: d,
         className: s.input,
         onKeyUp: k,
         type: "search",
         "aria-haspopup": !0,
         autoComplete: "off",
         "aria-autocomplete": "list",
-        tabIndex: h ?? 0
+        tabIndex: g ?? 0
       }
     ),
-    /* @__PURE__ */ i(g, { name: "magnifying-glass", className: s.icon }),
-    t && /* @__PURE__ */ i(
+    /* @__PURE__ */ o(v, { svgElement: T, className: s.icon }),
+    i && /* @__PURE__ */ o(
       n,
       {
-        icon: "x-mark",
+        icon: l,
         variant: "solid",
         size: "custom",
         className: s.clear,
-        onClick: y,
-        dataTestId: "search-button-clear"
+        onClick: S,
+        dataTestId: "search-button-clear",
+        iconAltText: _
       }
-    ) || m && /* @__PURE__ */ i(
+    ) || p && /* @__PURE__ */ o(
       n,
       {
-        icon: "x-mark",
+        icon: l,
         variant: "text",
         className: s.dismiss,
-        onClick: x,
-        dataTestId: "search-button-close"
+        onClick: b,
+        dataTestId: "search-button-close",
+        iconAltText: f
       }
     )
   ] });
 };
 export {
-  A as SearchField
+  H as SearchField
 };

package/dist/components/Search/Searchbar.js

@@ -1,6 +1,5 @@
 import { jsxs as e, jsx as t } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
-import "../Icon/SvgIcon.js";
 import "react";
 import "../RootProvider/RootProvider.js";
 import { SearchbarBase as f } from "./SearchbarBase.js";
@@ -8,7 +7,7 @@ import { SearchField as s } from "./SearchField.js";
 import "./AutocompleteBase.js";
 import { Autocomplete as a } from "./Autocomplete.js";
 import "../Snackbar/useSnackbar.js";
-const F = ({
+const B = ({
   className: i,
   autocomplete: r,
   expanded: o = !1,
@@ -20,5 +19,5 @@ const F = ({
   r && /* @__PURE__ */ t(a, { ...r, expanded: o, onSelect: m })
 ] });
 export {
-  F as Searchbar
+  B as Searchbar
 };

package/dist/components/Search/SuggestListItem.js

@@ -1,13 +1,12 @@
 import { jsx as t } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
-import "../Icon/SvgIcon.js";
 import "react";
 import "../RootProvider/RootProvider.js";
 import { ListItem as o } from "../List/ListItem.js";
 import "./AutocompleteBase.js";
 import { QueryLabel as i } from "./QueryLabel.js";
 import "../Snackbar/useSnackbar.js";
-const n = ({ as: p = "a", params: r, ...m }) => /* @__PURE__ */ t(o, { label: /* @__PURE__ */ t(i, { params: r }), ...m });
+const g = ({ as: p = "a", params: r, ...m }) => /* @__PURE__ */ t(o, { label: /* @__PURE__ */ t(i, { params: r }), ...m });
 export {
-  n as SuggestListItem
+  g as SuggestListItem
 };