@altinn/altinn-components 0.27.0 → 0.28.0

package/dist/components/GlobalMenu/AccountMenu.js

@@ -1,28 +1,27 @@
 "use client";
-import { jsx as v } from "react/jsx-runtime";
-import { useState as L } from "react";
+import { jsx as L } from "react/jsx-runtime";
+import { useState as M } from "react";
 import "../../index-L8X2o7IH.js";
 import "../RootProvider/RootProvider.js";
-import "../Search/AutocompleteBase.js";
+import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { Menu as M } from "../Menu/Menu.js";
-const w = (d) => `${d} hits`, k = ({
-  accounts: d = [],
+import { Menu as w } from "../Menu/Menu.js";
+const v = (p) => `${p} hits`, $ = ({
+  accounts: p = [],
   accountGroups: y = {},
   accountSearch: s,
-  onSelectAccount: m,
-  currentAccount: p,
+  onSelectAccount: r,
+  currentAccount: m,
   menuItemsVirtual: C
 }) => {
   var f;
-  const t = d.map((e) => ({
+  const g = p.map((e) => ({
     id: e.id || e.name,
     groupId: e.groupId || "search",
-    selected: e.selected ?? (p == null ? void 0 : p.id) === e.id,
+    selected: e.selected ?? (m == null ? void 0 : m.id) === e.id,
     title: e.name,
     ...(e == null ? void 0 : e.items) && {
-      avatarGroup: {
-        size: "sm",
+      icon: {
         items: e.items.map((i) => ({
           name: i.name,
           type: i.type || e.type
@@ -30,36 +29,35 @@ const w = (d) => `${d} hits`, k = ({
       }
     },
     ...!(e != null && e.items) && {
-      avatar: {
-        size: "md",
+      icon: {
         type: e.type,
         name: e.name
       }
     },
     badge: e.badge,
     alertBadge: e.alertBadge,
-    onClick: () => m == null ? void 0 : m(e.id || e.name)
-  })), [l, g] = L(""), r = l ? t.filter((e) => {
+    onClick: () => r == null ? void 0 : r(e.id || e.name)
+  })), [l, t] = M(""), d = l ? g.filter((e) => {
     var i;
     return (i = e == null ? void 0 : e.title) == null ? void 0 : i.toLowerCase().includes(l.toLowerCase());
   }).map((e) => ({
     ...e,
     groupId: "search"
-  })) : t, I = l ? {
+  })) : g, I = l ? {
     search: {
-      title: ((f = s == null ? void 0 : s.getResultsLabel) == null ? void 0 : f.call(s, r.length)) ?? w(r.length)
+      title: ((f = s == null ? void 0 : s.getResultsLabel) == null ? void 0 : f.call(s, d.length)) ?? v(d.length)
     }
   } : y, b = {
     name: "account-search",
     value: l,
     placeholder: (s == null ? void 0 : s.placeholder) ?? "Find account",
-    onChange: (e) => g(e.target.value),
-    onClear: () => g("")
+    onChange: (e) => t(e.target.value),
+    onClear: () => t("")
   }, h = [
-    ...r.length > 0 ? r : [{ id: "search", groupId: "search", hidden: !0 }]
+    ...d.length > 0 ? d : [{ id: "search", groupId: "search", hidden: !0 }]
   ];
-  return /* @__PURE__ */ v(
-    M,
+  return /* @__PURE__ */ L(
+    w,
     {
       theme: "default",
       search: s && b,
@@ -70,5 +68,5 @@ const w = (d) => `${d} hits`, k = ({
   );
 };
 export {
-  k as AccountMenu
+  $ as AccountMenu
 };

package/dist/components/GlobalMenu/BackButton.js

@@ -1,12 +1,31 @@
-import { jsx as m } from "react/jsx-runtime";
+"use client";
+import { jsx as a } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
-import "react";
+import * as n from "react";
+import { forwardRef as m } from "react";
 import "../RootProvider/RootProvider.js";
-import "../Search/AutocompleteBase.js";
+import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { MenuItem as i } from "../Menu/MenuItem.js";
-import { S as p } from "../../ArrowRedo-BYz1MHxK.js";
-const k = ({ label: o, onClick: r, as: t }) => /* @__PURE__ */ m(i, { size: "sm", id: "back", icon: p, title: o, onClick: r, as: t });
+import { MenuItem as f } from "../Menu/MenuItem.js";
+import { u as p } from "../../useId-CsCRkvK3.js";
+var c = function(t, l) {
+  var r = {};
+  for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && l.indexOf(e) < 0 && (r[e] = t[e]);
+  if (t != null && typeof Object.getOwnPropertySymbols == "function")
+    for (var o = 0, e = Object.getOwnPropertySymbols(t); o < e.length; o++)
+      l.indexOf(e[o]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[o]) && (r[e[o]] = t[e[o]]);
+  return r;
+};
+const d = m((t, l) => {
+  var { title: r, titleId: e } = t, o = c(t, ["title", "titleId"]);
+  let i = p();
+  return i = r ? e || "title-" + i : void 0, n.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: l, "aria-labelledby": i }, o),
+    r ? n.createElement("title", { id: i }, r) : null,
+    n.createElement("path", { fill: "currentColor", d: "M16.03 3.97a.75.75 0 1 0-1.06 1.06l3.22 3.22H8a5.75 5.75 0 0 0 0 11.5h1.5a.75.75 0 0 0 0-1.5H8a4.25 4.25 0 0 1 0-8.5h10.19l-3.22 3.22a.75.75 0 0 0 1.06 1.06l4.5-4.5a.75.75 0 0 0 0-1.06z" })
+  );
+}), v = ({ label: t, onClick: l, as: r }) => /* @__PURE__ */ a(f, { size: "sm", id: "back", icon: d, title: t, onClick: l, as: r });
 export {
-  k as BackButton
+  v as BackButton
 };

package/dist/components/GlobalMenu/EndUserLabel.js

@@ -1,13 +1,33 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { S as l } from "../../PersonCircle-DMwECpgW.js";
-import '../../assets/EndUserLabel.css';const n = "_text_1tx3s_1", o = "_icon_1tx3s_11", c = "_label_1tx3s_15", s = {
-  text: n,
-  icon: o,
-  label: c
-}, x = ({ children: e }) => /* @__PURE__ */ a("p", { className: s.text, children: [
-  /* @__PURE__ */ t(l, { className: s.icon, "aria-hidden": !0 }),
-  /* @__PURE__ */ t("span", { className: s.label, children: e })
+"use client";
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import * as a from "react";
+import { forwardRef as d } from "react";
+import { u as f } from "../../useId-CsCRkvK3.js";
+import '../../assets/EndUserLabel.css';var m = function(t, n) {
+  var r = {};
+  for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && n.indexOf(e) < 0 && (r[e] = t[e]);
+  if (t != null && typeof Object.getOwnPropertySymbols == "function")
+    for (var l = 0, e = Object.getOwnPropertySymbols(t); l < e.length; l++)
+      n.indexOf(e[l]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[l]) && (r[e[l]] = t[e[l]]);
+  return r;
+};
+const p = d((t, n) => {
+  var { title: r, titleId: e } = t, l = m(t, ["title", "titleId"]);
+  let o = f();
+  return o = r ? e || "title-" + o : 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: n, "aria-labelledby": o }, l),
+    r ? a.createElement("title", { id: o }, r) : null,
+    a.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M12 3.75a8.25 8.25 0 0 0-5.144 14.7 5.25 5.25 0 0 1 10.288 0A8.25 8.25 0 0 0 12 3.75m3.747 15.602a3.75 3.75 0 0 0-7.494 0A8.2 8.2 0 0 0 12 20.25c1.35 0 2.623-.324 3.747-.898M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12M12 7.25a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5M8.25 9.5a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0", clipRule: "evenodd" })
+  );
+}), u = "_text_1tx3s_1", b = "_icon_1tx3s_11", x = "_label_1tx3s_15", i = {
+  text: u,
+  icon: b,
+  label: x
+}, g = ({ children: t }) => /* @__PURE__ */ c("p", { className: i.text, children: [
+  /* @__PURE__ */ s(p, { className: i.icon, "aria-hidden": !0 }),
+  /* @__PURE__ */ s("span", { className: i.label, children: t })
 ] });
 export {
-  x as EndUserLabel
+  g as EndUserLabel
 };

package/dist/components/GlobalMenu/GlobalMenu.js

@@ -8,7 +8,7 @@ import { AccountButton as J } from "./AccountButton.js";
 import { BackButton as K } from "./BackButton.js";
 import { LogoutButton as v } from "./LogoutButton.js";
 import { EndUserLabel as x } from "./EndUserLabel.js";
-import "../Search/AutocompleteBase.js";
+import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { MenuListItem as d } from "../Menu/MenuBase.js";
 import { Menu as G } from "../Menu/Menu.js";

package/dist/components/GlobalMenu/LogoutButton.js

@@ -4,7 +4,7 @@ import { ButtonLabel as s } from "../Button/ButtonLabel.js";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import "../Search/AutocompleteBase.js";
+import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import '../../assets/LogoutButton.css';const i = "_button_1260s_1", m = "_label_1260s_5", o = {
   button: i,

package/dist/components/Header/Header.js

@@ -11,8 +11,8 @@ import { HeaderLogo as N } from "./HeaderLogo.js";
 import { HeaderButton as b } from "./HeaderButton.js";
 import { LocaleButton as H } from "./LocaleButton.js";
 import { LocaleSwitcher as h } from "./LocaleSwitcher.js";
-import { Searchbar as j } from "../Search/Searchbar.js";
-import "../Search/AutocompleteBase.js";
+import { Searchbar as j } from "../Searchbar/Searchbar.js";
+import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { HeaderGroup as B } from "./HeaderGroup.js";
 import { HeaderSearch as L } from "./HeaderSearch.js";

package/dist/components/Header/HeaderBase.js

@@ -3,7 +3,7 @@ import { c as p } from "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
 import { Backdrop as m } from "../Dropdown/Backdrop.js";
-import "../Search/AutocompleteBase.js";
+import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import '../../assets/HeaderBase.css';const i = "_header_19y6k_1", n = "_backdrop_19y6k_11", r = {
   header: i,

package/dist/components/Header/HeaderButton.js

@@ -1,52 +1,71 @@
-import { jsxs as _, jsx as n } from "react/jsx-runtime";
-import { c } from "../../index-L8X2o7IH.js";
-import { Avatar as h } from "../Avatar/Avatar.js";
-import { AvatarGroup as b } from "../Avatar/AvatarGroup.js";
-import { Badge as a } from "../Badge/Badge.js";
+"use client";
+import { jsxs as d, jsx as l } from "react/jsx-runtime";
+import { c as m } from "../../index-L8X2o7IH.js";
+import { Avatar as I } from "../Avatar/Avatar.js";
+import { AvatarGroup as y } from "../Avatar/AvatarGroup.js";
+import { Badge as f } from "../Badge/Badge.js";
 import { ButtonBase as u } from "../Button/ButtonBase.js";
-import { Icon as f } from "../Icon/Icon.js";
-import "react";
+import { Icon as b } from "../Icon/Icon.js";
+import * as _ from "react";
+import { forwardRef as v } from "react";
 import "../RootProvider/RootProvider.js";
-import "../Search/AutocompleteBase.js";
+import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { S as I } from "../../XMark-Bv1I87Ev.js";
-import { S as x } from "../../PadlockLocked-xJsxvaHH.js";
-import '../../assets/HeaderButton.css';const B = "_button_ottvn_1", G = "_label_ottvn_12", S = "_icon_ottvn_18", k = "_avatarGroup_ottvn_28", v = "_loginIcon_ottvn_37", y = "_closeIcon_ottvn_42", j = "_badge_ottvn_46", o = {
-  button: B,
-  label: G,
-  icon: S,
-  avatarGroup: k,
-  loginIcon: v,
-  closeIcon: y,
-  badge: j
+import { S as N } from "../../XMark-Bv1I87Ev.js";
+import { u as w } from "../../useId-CsCRkvK3.js";
+import '../../assets/HeaderButton.css';var O = function(o, c) {
+  var r = {};
+  for (var e in o) Object.prototype.hasOwnProperty.call(o, e) && c.indexOf(e) < 0 && (r[e] = o[e]);
+  if (o != null && typeof Object.getOwnPropertySymbols == "function")
+    for (var n = 0, e = Object.getOwnPropertySymbols(o); n < e.length; n++)
+      c.indexOf(e[n]) < 0 && Object.prototype.propertyIsEnumerable.call(o, e[n]) && (r[e[n]] = o[e[n]]);
+  return r;
+};
+const x = v((o, c) => {
+  var { title: r, titleId: e } = o, n = O(o, ["title", "titleId"]);
+  let i = w();
+  return i = r ? e || "title-" + i : void 0, _.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: c, "aria-labelledby": i }, n),
+    r ? _.createElement("title", { id: i }, r) : null,
+    _.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M7.25 7a4.75 4.75 0 0 1 9.5 0v2.25H17c.966 0 1.75.784 1.75 1.75v9a.75.75 0 0 1-.75.75H6a.75.75 0 0 1-.75-.75v-9c0-.966.784-1.75 1.75-1.75h.25zm1.5 0a3.25 3.25 0 0 1 6.5 0v2.25h-6.5zM7 10.75a.25.25 0 0 0-.25.25v8.25h10.5V11a.25.25 0 0 0-.25-.25zm3.5 3.75a1.5 1.5 0 1 1 2.25 1.3V17a.75.75 0 0 1-1.5 0v-1.2a1.5 1.5 0 0 1-.75-1.3", clipRule: "evenodd" })
+  );
+}), j = "_button_1p2eq_1", q = "_label_1p2eq_12", E = "_icon_1p2eq_18", S = "_avatarGroup_1p2eq_28", B = "_loginIcon_1p2eq_37", z = "_closeIcon_1p2eq_42", G = "_badge_1p2eq_46", t = {
+  button: j,
+  label: q,
+  icon: E,
+  avatarGroup: S,
+  loginIcon: B,
+  closeIcon: z,
+  badge: G
 }, K = ({
-  className: s,
-  as: l = "button",
-  color: m = "accent",
-  variant: i = "solid",
-  avatar: t,
-  avatarGroup: d,
-  icon: N = x,
+  className: o,
+  as: c = "button",
+  color: r = "accent",
+  variant: e = "solid",
+  avatar: n,
+  avatarGroup: i,
+  icon: h = x,
   expanded: g,
-  label: r = "Menu",
-  badge: e,
+  label: a = "Menu",
+  badge: s,
   ...p
-}) => g ? /* @__PURE__ */ _(u, { ...p, as: l, variant: i, color: m, className: c(o.button, s), children: [
-  /* @__PURE__ */ n("span", { className: o.label, children: r }),
-  /* @__PURE__ */ n("span", { className: c(o.icon, o.closeIcon), children: /* @__PURE__ */ n(f, { svgElement: I }) }),
-  e && /* @__PURE__ */ n(a, { ...e, className: o.badge })
-] }) : d ? /* @__PURE__ */ _(u, { ...p, as: l, variant: i, color: m, className: c(o.button, s), children: [
-  /* @__PURE__ */ n("span", { className: o.label, children: r }),
-  /* @__PURE__ */ n(b, { ...d, size: "sm", className: o.avatarGroup }),
-  e && /* @__PURE__ */ n(a, { ...e, className: o.badge })
-] }) : t ? /* @__PURE__ */ _(u, { ...p, as: l, variant: i, color: m, className: c(o.button, s), children: [
-  /* @__PURE__ */ n("span", { className: o.label, children: r }),
-  /* @__PURE__ */ n(h, { type: t == null ? void 0 : t.type, name: t == null ? void 0 : t.name, size: "lg" }),
-  e && /* @__PURE__ */ n(a, { ...e, className: o.badge })
-] }) : /* @__PURE__ */ _(u, { ...p, as: l, variant: i, color: m, className: c(o.button, s), children: [
-  /* @__PURE__ */ n("span", { className: o.label, children: r }),
-  /* @__PURE__ */ n("span", { className: c(o.icon, o.loginIcon), children: /* @__PURE__ */ n(f, { svgElement: N }) }),
-  e && /* @__PURE__ */ n(a, { ...e, className: o.badge })
+}) => g ? /* @__PURE__ */ d(u, { ...p, as: c, variant: e, color: r, className: m(t.button, o), children: [
+  /* @__PURE__ */ l("span", { className: t.label, children: a }),
+  /* @__PURE__ */ l("span", { className: m(t.icon, t.closeIcon), children: /* @__PURE__ */ l(b, { svgElement: N }) }),
+  s && /* @__PURE__ */ l(f, { ...s, className: t.badge })
+] }) : i ? /* @__PURE__ */ d(u, { ...p, as: c, variant: e, color: r, className: m(t.button, o), children: [
+  /* @__PURE__ */ l("span", { className: t.label, children: a }),
+  /* @__PURE__ */ l(y, { ...i, className: t.avatarGroup }),
+  s && /* @__PURE__ */ l(f, { ...s, className: t.badge })
+] }) : n ? /* @__PURE__ */ d(u, { ...p, as: c, variant: e, color: r, className: m(t.button, o), children: [
+  /* @__PURE__ */ l("span", { className: t.label, children: a }),
+  /* @__PURE__ */ l(I, { type: n == null ? void 0 : n.type, name: n == null ? void 0 : n.name, style: { fontSize: "2.25rem" } }),
+  s && /* @__PURE__ */ l(f, { ...s, className: t.badge })
+] }) : /* @__PURE__ */ d(u, { ...p, as: c, variant: e, color: r, className: m(t.button, o), children: [
+  /* @__PURE__ */ l("span", { className: t.label, children: a }),
+  /* @__PURE__ */ l("span", { className: m(t.icon, t.loginIcon), children: /* @__PURE__ */ l(b, { svgElement: h }) }),
+  s && /* @__PURE__ */ l(f, { ...s, className: t.badge })
 ] });
 export {
   K as HeaderButton

package/dist/components/Header/HeaderLogo.js

@@ -4,7 +4,7 @@ import { ButtonBase as e } from "../Button/ButtonBase.js";
 import "react";
 import "../RootProvider/RootProvider.js";
 import { DigdirLogomark as c } from "./DigdirLogomark.js";
-import "../Search/AutocompleteBase.js";
+import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import '../../assets/HeaderLogo.css';const a = "_logo_y48xn_1", x = "_symbol_y48xn_8", y = "_riksSymbol_y48xn_14", _ = "_text_y48xn_20", o = {
   logo: a,

package/dist/components/Header/LocaleButton.js

@@ -5,7 +5,7 @@ import * as i from "react";
 import { forwardRef as c } from "react";
 import { IconButton as m } from "../Button/IconButton.js";
 import "../RootProvider/RootProvider.js";
-import "../Search/AutocompleteBase.js";
+import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { u } from "../../useId-CsCRkvK3.js";
 import '../../assets/LocaleButton.css';var f = function(e, n) {

package/dist/components/Header/LocaleSwitcher.js

@@ -3,7 +3,7 @@ import { jsx as t, jsxs as a } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import { useRootContext as n } from "../RootProvider/RootProvider.js";
-import "../Search/AutocompleteBase.js";
+import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { MenuOption as p } from "../Menu/MenuOption.js";
 import { MenuHeader as u } from "../Menu/MenuHeader.js";

package/dist/components/Icon/Icon.js

@@ -1,22 +1,34 @@
-import { jsx as r } from "react/jsx-runtime";
-import { c as t } from "../../index-L8X2o7IH.js";
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { c as n } from "../../index-L8X2o7IH.js";
 import "react";
-import { Skeleton as d } from "../Skeleton/Skeleton.js";
+import { Skeleton as _ } from "../Skeleton/Skeleton.js";
 import "../RootProvider/RootProvider.js";
-import "../Search/AutocompleteBase.js";
+import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/Icon.css';const p = "_icon_ti5cw_1", a = {
-  icon: p
-}, b = ({
-  loading: c,
-  altText: n,
-  svgElement: o,
-  size: e,
-  color: s,
-  theme: m,
-  iconUrl: l,
-  className: i
-}) => o ? /* @__PURE__ */ r(d, { loading: c, variant: "circle", children: /* @__PURE__ */ r("span", { "data-size": e, "data-color": s, "data-theme": m, className: t([a.icon], i), children: /* @__PURE__ */ r(o, { "aria-hidden": "true", "alt-label": n }) }) }) : l ? /* @__PURE__ */ r(d, { loading: c, variant: "circle", children: /* @__PURE__ */ r("span", { "data-size": e, "data-color": s, "data-theme": m, className: t([a.icon], i), children: /* @__PURE__ */ r("img", { src: l, alt: n, className: a.icon }) }) }) : /* @__PURE__ */ r("span", { className: t([a.icon], i) });
+import '../../assets/Icon.css';const f = "_icon_2h14f_1", g = "_shape_2h14f_9", v = "_svg_2h14f_15", N = "_image_2h14f_16", a = {
+  icon: f,
+  shape: g,
+  svg: v,
+  image: N
+}, z = (s) => typeof s == "object" && s !== null && ("svgElement" in s || "iconUrl" in s), E = ({
+  loading: s,
+  altText: r,
+  svgElement: c,
+  variant: i = "fill",
+  size: o,
+  color: m,
+  theme: l,
+  iconUrl: p,
+  className: t,
+  style: h
+}) => c ? /* @__PURE__ */ e("span", { "data-size": o, "data-color": m, "data-theme": l, className: n(a.icon, t), style: h, children: /* @__PURE__ */ d(_, { loading: s, variant: "circle", className: a.shape, children: [
+  /* @__PURE__ */ e("span", { className: a.shape }),
+  /* @__PURE__ */ e(c, { "aria-hidden": "true", "alt-label": r, "data-variant": i, className: a.svg })
+] }) }) : p ? /* @__PURE__ */ e("span", { "data-size": o, "data-color": m, "data-theme": l, className: n(a.icon, t), style: h, children: /* @__PURE__ */ d(_, { loading: s, variant: "circle", className: a.shape, children: [
+  /* @__PURE__ */ e("span", { className: a.shape }),
+  /* @__PURE__ */ e("img", { src: p, alt: r, className: a.image, "data-variant": i })
+] }) }) : /* @__PURE__ */ e("span", { className: n(a.icon, t) });
 export {
-  b as Icon
+  E as Icon,
+  z as isIconProps
 };

package/dist/components/Icon/IconOrAvatar.js

@@ -1,25 +1,33 @@
-import { jsx as n } from "react/jsx-runtime";
-import { isValidElement as o } from "react";
+import { jsx as e } from "react/jsx-runtime";
+import { isValidElement as f } from "react";
 import { Icon as i } from "./Icon.js";
 import "../../index-L8X2o7IH.js";
-import { Avatar as s } from "../Avatar/Avatar.js";
-import { AvatarGroup as p } from "../Avatar/AvatarGroup.js";
+import { Avatar as p } from "../Avatar/Avatar.js";
+import { AvatarGroup as c } from "../Avatar/AvatarGroup.js";
 import "../RootProvider/RootProvider.js";
-import "../Search/AutocompleteBase.js";
+import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-function u(r) {
-  return typeof r == "string" || typeof r == "number" || typeof r == "boolean" || r === null || o(r);
+import { S as u } from "../../XMark-Bv1I87Ev.js";
+import '../../assets/IconOrAvatar.css';const l = "_icon_1ez59_1", _ = "_avatar_1ez59_2", v = "_avatarGroup_1ez59_6", n = {
+  icon: l,
+  avatar: _,
+  avatarGroup: v
+};
+function d(r) {
+  return typeof r == "string" || typeof r == "number" || typeof r == "boolean" || r === null || f(r);
 }
-const d = (r) => r.svgElement !== void 0 || r.iconUrl !== void 0, x = ({ size: r, icon: e, iconTheme: f, avatar: t, avatarGroup: m }) => {
-  if (!e && !t && !m)
+const g = (r) => r.svgElement !== void 0 || r.iconUrl !== void 0, S = ({ loading: r, size: m, icon: t, iconTheme: s, avatar: o, avatarGroup: a }) => {
+  if (!t && !o && !a)
     return null;
-  if (e)
-    return d(e) ? /* @__PURE__ */ n(i, { theme: e.theme || f, size: e.size || r, ...e }) : u(e) ? e : /* @__PURE__ */ n(i, { svgElement: e, theme: f, size: r });
+  if (r)
+    return /* @__PURE__ */ e(i, { className: n.icon, svgElement: u, loading: !0 });
   if (t)
-    return /* @__PURE__ */ n(s, { ...t, size: t.size || r });
-  if (m)
-    return /* @__PURE__ */ n(p, { ...m, size: m.size || r });
+    return g(t) ? /* @__PURE__ */ e(i, { className: n.icon, theme: t.theme || s, variant: "contain", ...t }) : d(t) ? t : /* @__PURE__ */ e(i, { className: n.icon, svgElement: t, variant: "contain", theme: s });
+  if (o)
+    return /* @__PURE__ */ e(p, { ...o, size: o.size || m, className: n.avatar });
+  if (a)
+    return /* @__PURE__ */ e(c, { ...a, className: n.avatarGroup });
 };
 export {
-  x as IconOrAvatar
+  S as IconOrAvatar
 };

package/dist/components/Icon/index.js

@@ -1,12 +1,13 @@
-import { Icon as e } from "./Icon.js";
-import { CheckboxIcon as t } from "./CheckboxIcon.js";
-import { RadioIcon as f } from "./RadioIcon.js";
-import { ProgressIcon as n } from "./ProgressIcon.js";
-import { IconOrAvatar as I } from "./IconOrAvatar.js";
+import { Icon as c, isIconProps as e } from "./Icon.js";
+import { CheckboxIcon as p } from "./CheckboxIcon.js";
+import { RadioIcon as x } from "./RadioIcon.js";
+import { ProgressIcon as f } from "./ProgressIcon.js";
+import { IconOrAvatar as s } from "./IconOrAvatar.js";
 export {
-  t as CheckboxIcon,
-  e as Icon,
-  I as IconOrAvatar,
-  n as ProgressIcon,
-  f as RadioIcon
+  p as CheckboxIcon,
+  c as Icon,
+  s as IconOrAvatar,
+  f as ProgressIcon,
+  x as RadioIcon,
+  e as isIconProps
 };

package/dist/components/Layout/Layout.js

@@ -10,7 +10,7 @@ import "../../index-L8X2o7IH.js";
 import "react";
 import { useRootContext as C } from "../RootProvider/RootProvider.js";
 import { Menu as F } from "../Menu/Menu.js";
-import "../Search/AutocompleteBase.js";
+import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 const E = ({ color: n, theme: c = "subtle", header: u, footer: l, sidebar: o, content: t = {}, children: f }) => {
   const { currentId: r } = C();

package/dist/components/LayoutAction/ActionHeader.js

@@ -4,7 +4,7 @@ import "react";
 import { IconButton as c } from "../Button/IconButton.js";
 import "../RootProvider/RootProvider.js";
 import { Heading as l } from "../Typography/Heading.js";
-import "../Search/AutocompleteBase.js";
+import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { S as p } from "../../XMark-Bv1I87Ev.js";
 import '../../assets/ActionHeader.css';const h = "_header_7fwyg_1", _ = "_title_7fwyg_34", f = "_dismiss_7fwyg_40", t = {

package/dist/components/LayoutAction/LayoutAction.js

@@ -2,7 +2,7 @@ import { jsxs as n, jsx as o } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import "../Search/AutocompleteBase.js";
+import "../Searchbar/AutocompleteBase.js";
 import { LayoutBase as s } from "../Layout/LayoutBase.js";
 import { ActionHeader as f } from "./ActionHeader.js";
 import { ActionFooter as u } from "./ActionFooter.js";

package/dist/components/List/List.js

@@ -1,21 +1,12 @@
-import { jsx as f } from "react/jsx-runtime";
-import { createElement as l } from "react";
+import { jsx as p } from "react/jsx-runtime";
+import { createElement as n } from "react";
 import "../../index-L8X2o7IH.js";
 import "../RootProvider/RootProvider.js";
-import { ListItem as a } from "./ListItem.js";
-import { ListBase as h } from "./ListBase.js";
-import "../Search/AutocompleteBase.js";
+import { ListItem as c } from "./ListItem.js";
+import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-const k = ({ defaultItemSize: o, defaultItemTheme: p, defaultItemColor: s, items: c = [], ...n }) => /* @__PURE__ */ f(h, { ...n, children: c.map((r, t) => /* @__PURE__ */ l(
-  a,
-  {
-    ...r,
-    size: (r == null ? void 0 : r.size) || o,
-    color: (r == null ? void 0 : r.color) || s,
-    theme: (r == null ? void 0 : r.theme) || p,
-    key: `item-${r.id ?? t}`
-  }
-)) });
+import { Flex as l } from "../Page/Flex.js";
+const j = ({ children: t, spacing: o = 2, items: m = [], ...i }) => /* @__PURE__ */ p(l, { direction: "col", as: "ul", spacing: o, ...i, children: t || m.map((r, e) => /* @__PURE__ */ n(c, { ...r, key: `item-${r.id ?? e}` })) });
 export {
-  k as List
+  j as List
 };

package/dist/components/List/ListBase.js

@@ -1,11 +1,11 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as m } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import "../Search/AutocompleteBase.js";
+import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as m } from "../Page/Flex.js";
-const a = ({ spacing: o = 2, children: r, ...t }) => /* @__PURE__ */ i(m, { direction: "col", spacing: o, as: "ul", ...t, children: r });
+import { Flex as p } from "../Page/Flex.js";
+const u = ({ size: o, spacing: r = 2, children: t, ...i }) => /* @__PURE__ */ m(p, { direction: "col", spacing: r, size: o, as: "ul", ...i, children: t });
 export {
-  a as ListBase
+  u as List
 };