@altinn/altinn-components 0.15.4 → 0.16.0

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/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,7 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
 import { useRef as b, createElement as v } from "react";
 import "../../index-L8X2o7IH.js";
-import "../Icon/SvgIcon.js";
 import { useMenu as x } from "../../hooks/useMenu.js";
 import "../RootProvider/RootProvider.js";
 import { AutocompleteBase as A } from "./AutocompleteBase.js";
@@ -9,12 +8,12 @@ import { AutocompleteGroup as I } 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 C = ({ className: u, items: i, groups: s = {}, expanded: n, onSelect: r }) => {
   const p = b(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();
+    var t;
+    const e = (t = p.current) == null ? void 0 : t.querySelector('[data-active="true"]');
+    e == null || e.dispatchEvent(new MouseEvent("click", { bubbles: !0 })), r == null || r();
   });
   const { menu: c, setActiveIndex: d } = x({
     items: i,
@@ -22,7 +21,7 @@ const D = ({ className: u, items: i, groups: s = {}, expanded: n, onSelect: r })
     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__ */ o(A, { className: u, expanded: n, ref: p, children: c.map((e, t) => /* @__PURE__ */ v(I, { ...e.props, key: t }, /* @__PURE__ */ o("ul", { children: e.items.map((a, f) => {
     const {
       active: l,
       menuIndex: y,
@@ -41,5 +40,5 @@ const D = ({ className: u, items: i, groups: s = {}, expanded: n, onSelect: r })
   }) }))) });
 };
 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
 };

package/dist/components/Snackbar/SnackbarItem.js

@@ -1,35 +1,65 @@
-import { jsxs as l, jsx as n } from "react/jsx-runtime";
-import { c as d } from "../../index-L8X2o7IH.js";
-import { Icon as _ } from "../Icon/Icon.js";
-import "../Icon/SvgIcon.js";
-import "react";
-import { IconButton as p } from "../Button/IconButton.js";
+"use client";
+import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import { c as p } from "../../index-L8X2o7IH.js";
+import { Icon as v } from "../Icon/Icon.js";
+import * as a from "react";
+import { forwardRef as u } from "react";
+import { IconButton as _ } from "../Button/IconButton.js";
 import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "./useSnackbar.js";
-import '../../assets/SnackbarItem.css';const v = "_item_137l4_1", f = "_media_137l4_23", N = "_icon_137l4_32", x = "_content_137l4_36", g = "_action_137l4_44", i = {
-  item: v,
-  media: f,
-  icon: N,
-  content: x,
-  action: g
+import { S as g } from "../../XMark-Bv1I87Ev.js";
+import { u as h } from "../../useId-CsCRkvK3.js";
+import '../../assets/SnackbarItem.css';var w = function(e, o) {
+  var i = {};
+  for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && o.indexOf(t) < 0 && (i[t] = e[t]);
+  if (e != null && typeof Object.getOwnPropertySymbols == "function")
+    for (var n = 0, t = Object.getOwnPropertySymbols(e); n < t.length; n++)
+      o.indexOf(t[n]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[n]) && (i[t[n]] = e[t[n]]);
+  return i;
 };
-var h = /* @__PURE__ */ ((t) => (t.accent = "accent", t.neutral = "neutral", t.alert = "alert", t.success = "success", t.warning = "warning", t.danger = "danger", t.info = "info", t))(h || {});
-const F = ({
-  as: t,
-  message: e,
-  className: c,
-  color: o = "accent",
-  icon: s = "bell",
-  dismissable: a = !0,
+const y = u((e, o) => {
+  var { title: i, titleId: t } = e, n = w(e, ["title", "titleId"]);
+  let c = h();
+  return c = i ? t || "title-" + c : 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: o, "aria-labelledby": c }, n),
+    i ? a.createElement("title", { id: c }, i) : 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_137l4_1", O = "_media_137l4_23", I = "_icon_137l4_32", j = "_content_137l4_36", b = "_action_137l4_44", l = {
+  item: x,
+  media: O,
+  icon: I,
+  content: j,
+  action: b
+};
+var N = /* @__PURE__ */ ((e) => (e.accent = "accent", e.neutral = "neutral", e.alert = "alert", e.success = "success", e.warning = "warning", e.danger = "danger", e.info = "info", e))(N || {});
+const D = ({
+  as: e,
+  message: o,
+  className: i,
+  color: t = "accent",
+  icon: n = y,
+  iconAltText: c = "Bell icon",
+  dismissable: s = !0,
   onDismiss: m,
-  ...r
-}) => /* @__PURE__ */ l(t || "div", { className: d(i.item, c), "data-color": o, ...r, children: [
-  /* @__PURE__ */ n("div", { className: i.media, children: /* @__PURE__ */ n(_, { name: s, variant: "solid", className: i.icon }) }),
-  /* @__PURE__ */ n("div", { className: i.content, children: e }),
-  a && /* @__PURE__ */ n("div", { className: i.action, children: /* @__PURE__ */ n(p, { icon: "x-mark", variant: "outline", onClick: m, className: i.dismiss }) })
+  ...d
+}) => /* @__PURE__ */ f(e || "div", { className: p(l.item, i), "data-color": t, ...d, children: [
+  /* @__PURE__ */ r("div", { className: l.media, children: /* @__PURE__ */ r(v, { svgElement: n, className: l.icon }) }),
+  /* @__PURE__ */ r("div", { className: l.content, children: o }),
+  s && /* @__PURE__ */ r("div", { className: l.action, children: /* @__PURE__ */ r(
+    _,
+    {
+      icon: g,
+      variant: "outline",
+      onClick: m,
+      className: l.dismiss,
+      iconAltText: "close"
+    }
+  ) })
 ] });
 export {
-  h as SnackbarColorEnum,
-  F as SnackbarItem
+  N as SnackbarColorEnum,
+  D as SnackbarItem
 };