@altinn/altinn-components 0.52.6 → 0.53.0

package/dist/components/Notifications/NotificationItemBase.js

@@ -1,6 +1,7 @@
 import { jsx as o, jsxs as r } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
+import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import { getAriaLabelFromTitle as j } from "../Menu/MenuItemLabel.js";
 import { ListItemBase as B } from "../List/ListItemBase.js";
@@ -15,12 +16,12 @@ import '../../assets/NotificationItemBase.css';const C = "_item_w20tn_1", T = "_
   link: g,
   linkFocus: q,
   controls: D
-}, U = ({
+}, V = ({
   as: s,
   href: m,
   ref: n,
   disabled: a,
-  loading: e,
+  loading: i,
   onClick: c,
   onKeyPress: l,
   tabIndex: _,
@@ -29,7 +30,7 @@ import '../../assets/NotificationItemBase.css';const C = "_item_w20tn_1", T = "_
   icon: f,
   iconBadge: h,
   label: k,
-  title: i,
+  title: e,
   description: N,
   highlightWords: L,
   dismissable: b,
@@ -38,7 +39,7 @@ import '../../assets/NotificationItemBase.css';const C = "_item_w20tn_1", T = "_
   contextMenu: w,
   ...F
 }) => {
-  const x = F.ariaLabel || j(i);
+  const x = F.ariaLabel || j(e);
   return /* @__PURE__ */ o(B, { ref: n, className: t.item, color: d, variant: p, size: "md", children: /* @__PURE__ */ r("header", { className: t.header, children: [
     /* @__PURE__ */ o(A, { icon: f, badge: h }),
     /* @__PURE__ */ r(
@@ -49,8 +50,8 @@ import '../../assets/NotificationItemBase.css';const C = "_item_w20tn_1", T = "_
         onClick: c,
         onKeyPress: l,
         tabIndex: _,
-        loading: e,
-        disabled: a || e,
+        loading: i,
+        disabled: a || i,
         ariaLabel: x,
         className: t.link,
         children: [
@@ -58,10 +59,10 @@ import '../../assets/NotificationItemBase.css';const C = "_item_w20tn_1", T = "_
           /* @__PURE__ */ o(
             y,
             {
-              loading: e,
+              loading: i,
               highlightWords: L,
               className: t.label,
-              title: i,
+              title: e,
               description: N,
               children: k
             }
@@ -82,5 +83,5 @@ import '../../assets/NotificationItemBase.css';const C = "_item_w20tn_1", T = "_
   ] }) });
 };
 export {
-  U as NotificationItemBase
+  V as NotificationItemBase
 };

package/dist/components/Notifications/NotificationItemControls.js

@@ -1,33 +1,23 @@
-import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
-import { IconButton as p } from "../Button/IconButton.js";
-import { ContextMenu as f } from "../ContextMenu/ContextMenu.js";
+import { Button as l } from "../Button/Button.js";
+import { ContextMenu as p } from "../ContextMenu/ContextMenu.js";
 import "../RootProvider/RootProvider.js";
-import { ListItemControls as l } from "../List/ListItemControls.js";
+import { ListItemControls as a } from "../List/ListItemControls.js";
 import "../Snackbar/useSnackbar.js";
-import { S as c } from "../../XMark-tKk6aExO.js";
-const S = ({
-  className: r,
+import { S as f } from "../../XMark-tKk6aExO.js";
+const k = ({
+  className: t,
   loading: i,
   dismissable: m,
-  dismissLabel: n,
-  onDismiss: s,
-  contextMenu: o
-}) => i ? null : /* @__PURE__ */ e(l, { className: r, children: [
-  o && /* @__PURE__ */ t(f, { ...o }),
-  m && /* @__PURE__ */ t(
-    p,
-    {
-      rounded: !0,
-      variant: "text",
-      icon: c,
-      iconAltText: n || "Dismiss",
-      onClick: s,
-      size: "xs"
-    }
-  )
+  dismissLabel: s,
+  onDismiss: n,
+  contextMenu: r
+}) => i ? null : /* @__PURE__ */ e(a, { className: t, children: [
+  r && /* @__PURE__ */ o(p, { ...r }),
+  m && /* @__PURE__ */ o(l, { variant: "ghost", "aria-label": s || "Dismiss", onClick: n, size: "xs", children: /* @__PURE__ */ o(f, { style: { fontSize: "1.5em" } }) })
 ] });
 export {
-  S as NotificationItemControls
+  k as NotificationItemControls
 };

package/dist/components/Notifications/NotificationItemIcon.js

@@ -1,10 +1,11 @@
-import { jsx as r, jsxs as o, Fragment as n } from "react/jsx-runtime";
-import { isValidElement as p } from "react";
+import { jsx as r, jsxs as o, Fragment as p } from "react/jsx-runtime";
+import { isValidElement as n } from "react";
 import { Badge as i } from "../Badge/Badge.js";
 import { Icon as e, isIconProps as c } from "../Icon/Icon.js";
 import "../../index-p1eeF8LQ.js";
 import { isAvatarProps as l, Avatar as _ } from "../Avatar/Avatar.js";
 import { isAvatarGroupProps as f, AvatarGroup as v } from "../Avatar/AvatarGroup.js";
+import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { S as d } from "../../XMark-tKk6aExO.js";
@@ -16,18 +17,18 @@ import '../../assets/NotificationItemIcon.css';const u = "_icon_15rz1_1", g = "_
   badge: b
 };
 function z(t) {
-  return typeof t == "string" || typeof t == "number" || typeof t == "boolean" || t === null || p(t);
+  return typeof t == "string" || typeof t == "number" || typeof t == "boolean" || t === null || n(t);
 }
-const B = ({ loading: t, icon: a, badge: m }) => a ? t ? /* @__PURE__ */ r("div", { className: s.icon, children: /* @__PURE__ */ r(e, { svgElement: d, loading: !0 }) }) : /* @__PURE__ */ o("div", { className: s.icon, children: [
-  l(a) && /* @__PURE__ */ r(_, { ...a, className: s.avatar }) || f(a) && /* @__PURE__ */ r(v, { ...a, className: s.avatarGroup }) || c(a) && /* @__PURE__ */ o(n, { children: [
+const F = ({ loading: t, icon: a, badge: m }) => a ? t ? /* @__PURE__ */ r("div", { className: s.icon, children: /* @__PURE__ */ r(e, { svgElement: d, loading: !0 }) }) : /* @__PURE__ */ o("div", { className: s.icon, children: [
+  l(a) && /* @__PURE__ */ r(_, { ...a, className: s.avatar }) || f(a) && /* @__PURE__ */ r(v, { ...a, className: s.avatarGroup }) || c(a) && /* @__PURE__ */ o(p, { children: [
     /* @__PURE__ */ r("span", { className: s.shape }),
     /* @__PURE__ */ r(e, { ...a })
-  ] }) || z(a) && a || /* @__PURE__ */ o(n, { children: [
+  ] }) || z(a) && a || /* @__PURE__ */ o(p, { children: [
     /* @__PURE__ */ r("span", { className: s.shape }),
     /* @__PURE__ */ r(e, { svgElement: a })
   ] }),
   m && /* @__PURE__ */ r(i, { ...m, size: "xs", variant: "base", className: s.badge })
 ] }) : null;
 export {
-  B as NotificationItemIcon
+  F as NotificationItemIcon
 };

package/dist/components/Page/AccordionSection.js

@@ -2,14 +2,15 @@ import { jsx as r } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
 import { Typography as e } from "../Typography/Typography.js";
+import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { PageDetails as n } from "./PageDetails.js";
 import { Section as c } from "./Section.js";
-const g = ({ items: o }) => /* @__PURE__ */ r(c, { children: o?.map((t) => {
+const x = ({ items: o }) => /* @__PURE__ */ r(c, { children: o?.map((t) => {
   const { id: i, title: m, children: p } = t;
   return /* @__PURE__ */ r(n, { summary: m, children: /* @__PURE__ */ r(e, { children: p }) }, i);
 }) });
 export {
-  g as AccordionSection
+  x as AccordionSection
 };

package/dist/components/Page/Breadcrumbs.js

@@ -2,11 +2,12 @@
 import { jsx as i, jsxs as m } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import { Icon as f } from "../Icon/Icon.js";
-import s, { forwardRef as d } from "react";
+import s, { forwardRef as p } from "react";
+import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { BreadcrumbsLink as c } from "./BreadcrumbsLink.js";
-import { u as p } from "../../useId-BVFxCjkq.js";
+import { u as d } from "../../useId-BVFxCjkq.js";
 import '../../assets/Breadcrumbs.css';var u = function(e, n) {
   var r = {};
   for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && n.indexOf(t) < 0 && (r[t] = e[t]);
@@ -15,9 +16,9 @@ import '../../assets/Breadcrumbs.css';var u = function(e, n) {
       n.indexOf(t[l]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[l]) && (r[t[l]] = e[t[l]]);
   return r;
 };
-const h = d((e, n) => {
+const h = p((e, n) => {
   var { title: r, titleId: t } = e, l = u(e, ["title", "titleId"]);
-  let o = p();
+  let o = d();
   return o = r ? t || "title-" + o : void 0, s.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),
@@ -28,7 +29,7 @@ const h = d((e, n) => {
   list: _,
   item: b,
   icon: g
-}, k = ({ items: e = [] }) => /* @__PURE__ */ i("ul", { className: a.list, children: e.map((n, r) => {
+}, N = ({ items: e = [] }) => /* @__PURE__ */ i("ul", { className: a.list, children: e.map((n, r) => {
   const { label: t, ...l } = n;
   return e?.length > r + 1 ? /* @__PURE__ */ m("li", { className: a.item, children: [
     /* @__PURE__ */ i(c, { ...l, children: t }),
@@ -36,5 +37,5 @@ const h = d((e, n) => {
   ] }, r) : /* @__PURE__ */ i("li", { className: a.item, children: /* @__PURE__ */ i(c, { ...l, as: "span", children: t }) }, r);
 }) });
 export {
-  k as Breadcrumbs
+  N as Breadcrumbs
 };

package/dist/components/Page/ContactButtons.js

@@ -1,11 +1,16 @@
-import { jsx as m } from "react/jsx-runtime";
-import { createElement as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+import { createElement as p } from "react";
 import "../../index-p1eeF8LQ.js";
-import { Button as i } from "../Button/Button.js";
+import { Button as u } from "../Button/Button.js";
+import { ButtonIcon as c } from "../Button/ButtonIcon.js";
+import { ButtonLabel as a } from "../Button/ButtonLabel.js";
+import { ButtonGroup as l } from "../Button/ButtonGroup.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as n } from "./Flex.js";
-const x = ({ items: t }) => /* @__PURE__ */ m(n, { spacing: 2, children: t.map((r, o) => /* @__PURE__ */ e(i, { ...r, variant: "outline", key: o })) });
+const v = ({ items: o }) => /* @__PURE__ */ t(l, { children: o.map((r, n) => {
+  const { icon: m, label: i, ...e } = r;
+  return /* @__PURE__ */ p(u, { ...e, variant: "outline", key: n }, /* @__PURE__ */ t(c, { icon: m }), /* @__PURE__ */ t(a, { children: i }));
+}) });
 export {
-  x as ContactButtons
+  v as ContactButtons
 };

package/dist/components/Page/ContactSection.js

@@ -3,11 +3,12 @@ import "../../index-p1eeF8LQ.js";
 import "react";
 import { Typography as a } from "../Typography/Typography.js";
 import { Heading as s } from "../Typography/Heading.js";
+import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { Section as g } from "./Section.js";
 import { ContactButtons as h } from "./ContactButtons.js";
-const z = ({
+const B = ({
   variant: r = "inline",
   theme: t,
   color: p,
@@ -33,5 +34,5 @@ const z = ({
   }
 );
 export {
-  z as ContactSection
+  B as ContactSection
 };

package/dist/components/Page/PageMenu.js

@@ -1,14 +1,15 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
+import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
-import { MenuItem as r } from "../Menu/MenuItem.js";
+import { MenuItem as n } from "../Menu/MenuItem.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/PageMenu.css';const o = "_menu_13em0_1", l = "_list_13em0_6", a = "_item_13em0_29", t = {
+import '../../assets/PageMenu.css';const o = "_menu_13em0_1", l = "_list_13em0_6", a = "_item_13em0_29", e = {
   menu: o,
   list: l,
   item: a
-}, N = ({ theme: i, color: s, items: n = [] }) => /* @__PURE__ */ e("nav", { "data-theme": i, "data-color": s, className: t.menu, children: /* @__PURE__ */ e("ul", { className: t.list, children: n.map((m) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(r, { ...m, className: t.item }) }, m.id)) }) });
+}, f = ({ theme: i, color: r, items: s = [] }) => /* @__PURE__ */ t("nav", { "data-theme": i, "data-color": r, className: e.menu, children: /* @__PURE__ */ t("ul", { className: e.list, children: s.map((m) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(n, { ...m, className: e.item }) }, m.id)) }) });
 export {
-  N as PageMenu
+  f as PageMenu
 };

package/dist/components/Page/PageNav.js

@@ -1,7 +1,7 @@
 "use client";
-import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import { jsxs as s, jsx as i } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
-import a, { forwardRef as s } from "react";
+import a, { forwardRef as c } from "react";
 import { Button as f } from "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
@@ -16,7 +16,7 @@ import '../../assets/PageNav.css';var u = function(t, o) {
       o.indexOf(e[r]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[r]) && (l[e[r]] = t[e[r]]);
   return l;
 };
-const b = s((t, o) => {
+const b = c((t, o) => {
   var { title: l, titleId: e } = t, r = u(t, ["title", "titleId"]);
   let n = p();
   return n = l ? e || "title-" + n : void 0, a.createElement(
@@ -25,8 +25,8 @@ const b = s((t, o) => {
     l ? a.createElement("title", { id: n }, l) : null,
     a.createElement("path", { fill: "currentColor", d: "M8.97 6.97a.75.75 0 1 1 1.06 1.06l-3.22 3.22H19a.75.75 0 0 1 0 1.5H6.81l3.22 3.22a.75.75 0 1 1-1.06 1.06l-4.5-4.5a.75.75 0 0 1 0-1.06z" })
   );
-}), v = "_controls_9bu1z_7", w = {
-  controls: v
+}), g = "_controls_9bu1z_7", v = {
+  controls: g
 }, E = ({
   color: t,
   padding: o,
@@ -36,9 +36,12 @@ const b = s((t, o) => {
     label: "Back"
   },
   controls: r
-}) => /* @__PURE__ */ c(m, { as: "nav", direction: "row", align: "center", justify: "between", color: t, padding: o, children: [
-  l ? /* @__PURE__ */ i(d, { items: l }) : /* @__PURE__ */ i(f, { ...e, variant: "text", size: "sm", icon: b, children: e?.label || "Back" }),
-  r && /* @__PURE__ */ i("div", { className: w.controls, children: r })
+}) => /* @__PURE__ */ s(m, { as: "nav", direction: "row", align: "center", justify: "between", color: t, padding: o, children: [
+  l ? /* @__PURE__ */ i(d, { items: l }) : /* @__PURE__ */ s(f, { ...e, variant: "ghost", size: "sm", children: [
+    /* @__PURE__ */ i(b, {}),
+    /* @__PURE__ */ i("span", { children: e?.label || "Back" })
+  ] }),
+  r && /* @__PURE__ */ i("div", { className: v.controls, children: r })
 ] });
 export {
   E as PageNav

package/dist/components/Page/PageTabs.js

@@ -1,14 +1,15 @@
 import { jsx as t } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
+import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
-import { MenuItem as l } from "../Menu/MenuItem.js";
+import { MenuItem as p } from "../Menu/MenuItem.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as p } from "./Flex.js";
-import '../../assets/PageTabs.css';const c = "_list_gp6cp_1", n = "_item_gp6cp_21", e = {
+import { Flex as l } from "./Flex.js";
+import '../../assets/PageTabs.css';const c = "_list_gp6cp_1", n = "_item_gp6cp_21", m = {
   list: c,
   item: n
-}, x = ({ variant: m, color: r, items: s = [], padding: o = 0 }) => /* @__PURE__ */ t(p, { theme: m, color: r, padding: o, children: /* @__PURE__ */ t("ul", { className: e.list, children: s.map((i) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(l, { ...i, className: e.item }) }, i.id)) }) });
+}, N = ({ variant: r, color: e, items: o = [], padding: s = 0 }) => /* @__PURE__ */ t(l, { theme: r, color: e, padding: s, children: /* @__PURE__ */ t("ul", { className: m.list, children: o.map((i) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(p, { ...i, className: m.item }) }, i.id)) }) });
 export {
-  x as PageTabs
+  N as PageTabs
 };

package/dist/components/Page/Section.js

@@ -1,12 +1,32 @@
-import { jsx as r } from "react/jsx-runtime";
-import { c as m } from "../../index-p1eeF8LQ.js";
+import { jsx as m } from "react/jsx-runtime";
+import { c as n } from "../../index-p1eeF8LQ.js";
 import "react";
+import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as n } from "./Flex.js";
-import '../../assets/Section.css';const p = "_section_1w6kc_1", l = {
-  section: p
-}, k = ({ as: o = "section", direction: t = "col", variant: c, className: s, children: e, ...i }) => /* @__PURE__ */ r(n, { as: o, direction: t, theme: c, className: m(l.section, s), ...i, children: e });
+import { Flex as p } from "./Flex.js";
+import '../../assets/Section.css';const l = "_section_1w6kc_1", a = {
+  section: l
+}, w = ({
+  as: o = "section",
+  direction: t = "col",
+  align: i = "initial",
+  variant: c,
+  className: s,
+  children: e,
+  ...r
+}) => /* @__PURE__ */ m(
+  p,
+  {
+    as: o,
+    align: i,
+    direction: t,
+    theme: c,
+    className: n(a.section, s),
+    ...r,
+    children: e
+  }
+);
 export {
-  k as Section
+  w as Section
 };

package/dist/components/ResourceListItem/ResourceListItem.js

@@ -1,10 +1,11 @@
 import { jsx as p } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
+import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { ListItem as s } from "../List/ListItem.js";
-const g = ({
+const h = ({
   ownerName: t,
   resourceName: i,
   ownerLogoUrlAlt: r,
@@ -26,5 +27,5 @@ const g = ({
   }
 );
 export {
-  g as ResourceListItem
+  h as ResourceListItem
 };

package/dist/components/RootProvider/RootProvider.js

@@ -1,8 +1,9 @@
 "use client";
 import { jsx as l } from "react/jsx-runtime";
-import { createContext as C, useState as a, useContext as g } from "react";
-import { useEscapeKey as p } from "../../hooks/useEscapeKey.js";
+import { createContext as p, useState as a, useContext as C } from "react";
+import { useEscapeKey as g } from "../../hooks/useEscapeKey.js";
 import "../../index-p1eeF8LQ.js";
+import "../Button/Button.js";
 import { SnackbarProvider as x } from "../Snackbar/useSnackbar.js";
 const f = {
   currentId: "",
@@ -15,7 +16,7 @@ const f = {
     console.warn("setPreviousId called outside of RootProvider context");
   },
   languageCode: "nb"
-}, I = C(f), A = ({ children: n, initialValue: e, debug: s, languageCode: t }) => {
+}, I = p(f), E = ({ children: n, initialValue: e, debug: s, languageCode: t }) => {
   const [u, d] = a(e?.currentId || ""), [c, r] = a(e?.previousId || "");
   return /* @__PURE__ */ l(
     I.Provider,
@@ -31,8 +32,8 @@ const f = {
       children: /* @__PURE__ */ l(x, { children: n })
     }
   );
-}, E = () => {
-  const n = g(I);
+}, S = () => {
+  const n = C(I);
   if (!n)
     throw new Error("useRootContext must be used within a RootProvider.");
   const { currentId: e, setCurrentId: s, debug: t, setPreviousId: u, previousId: d, languageCode: c } = n, r = (o) => {
@@ -42,7 +43,7 @@ const f = {
   }, i = () => {
     t && console.debug("useRootContext: closeAll called"), r("");
   };
-  return p(i), {
+  return g(i), {
     currentId: e,
     previousId: d,
     toggleId: v,
@@ -54,6 +55,6 @@ const f = {
   };
 };
 export {
-  A as RootProvider,
-  E as useRootContext
+  E as RootProvider,
+  S as useRootContext
 };

package/dist/components/Search/SearchItem.js

@@ -2,18 +2,19 @@ import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
 import { Heading as m } from "../Typography/Heading.js";
+import "../Button/Button.js";
 import { Byline as l } from "../Byline/Byline.js";
 import "../RootProvider/RootProvider.js";
-import { ListItemBase as c } from "../List/ListItemBase.js";
-import { ListItemHeader as p } from "../List/ListItemHeader.js";
+import { ListItemBase as p } from "../List/ListItemBase.js";
+import { ListItemHeader as c } from "../List/ListItemHeader.js";
 import "../Snackbar/useSnackbar.js";
 import '../../assets/SearchItem.css';const h = "_item_kjtr0_1", d = {
   item: h
-}, z = ({ color: o = "neutral", size: s, title: r, summary: i, owner: e, category: g, ...a }) => /* @__PURE__ */ t(c, { className: d.item, color: o, size: s, children: /* @__PURE__ */ n(p, { ...a, children: [
+}, B = ({ color: o = "neutral", size: s, title: r, summary: i, owner: e, category: g, ...a }) => /* @__PURE__ */ t(p, { className: d.item, color: o, size: s, children: /* @__PURE__ */ n(c, { ...a, children: [
   r && /* @__PURE__ */ t(m, { as: "h2", size: "lg", weight: "bold", children: r }),
   e && /* @__PURE__ */ t(l, { avatar: e, children: e?.name }),
   i && /* @__PURE__ */ t(m, { as: "h3", size: "sm", variant: "subtle", weight: "normal", style: { marginTop: ".5em" }, children: i })
 ] }) });
 export {
-  z as SearchItem
+  B as SearchItem
 };

package/dist/components/Searchbar/Autocomplete.js

@@ -2,13 +2,14 @@ import { jsx as e, jsxs as B } from "react/jsx-runtime";
 import { useRef as C, Fragment as P } from "react";
 import "../../index-p1eeF8LQ.js";
 import { useMenu as k } from "../../hooks/useMenu.js";
+import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import { MenuHeader as y } from "../Menu/MenuHeader.js";
 import { MenuList as F, MenuListItem as r } from "../Menu/MenuBase.js";
 import { AutocompleteBase as H } from "./AutocompleteBase.js";
 import { AutocompleteItem as K } from "./AutocompleteItem.js";
 import "../Snackbar/useSnackbar.js";
-const O = ({
+const Q = ({
   className: u,
   items: d,
   id: l,
@@ -49,5 +50,5 @@ const O = ({
   }) }) });
 };
 export {
-  O as Autocomplete
+  Q as Autocomplete
 };

package/dist/components/Searchbar/AutocompleteItem.js

@@ -1,55 +1,56 @@
 import { jsx as m } from "react/jsx-runtime";
-import { Badge as i } from "../Badge/Badge.js";
+import { Badge as l } from "../Badge/Badge.js";
 import "../../index-p1eeF8LQ.js";
 import "react";
+import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import { MenuItem as s } from "../Menu/MenuItem.js";
 import { QueryLabel as f } from "./QueryLabel.js";
 import "../Snackbar/useSnackbar.js";
 import '../../assets/AutocompleteItem.css';const p = "_item_4v2ol_1", I = {
   item: p
-}, L = ({
+}, M = ({
   interactive: o = !0,
   role: r = "menuitem",
   params: u,
   badge: t,
   label: c,
   size: n = "md",
-  ...l
+  ...i
 }) => u ? /* @__PURE__ */ m(
   s,
   {
-    ...l,
+    ...i,
     role: r,
     interactive: o,
     label: /* @__PURE__ */ m(f, { params: u }),
-    controls: t && /* @__PURE__ */ m(i, { ...t }),
+    controls: t && /* @__PURE__ */ m(l, { ...t }),
     linkIcon: o,
     size: n || "md"
   }
 ) : c ? /* @__PURE__ */ m(
   s,
   {
-    ...l,
+    ...i,
     role: r,
     interactive: o,
     label: c,
     className: I.item,
-    controls: t && /* @__PURE__ */ m(i, { ...t }),
+    controls: t && /* @__PURE__ */ m(l, { ...t }),
     linkIcon: o,
     size: n || "md"
   }
 ) : /* @__PURE__ */ m(
   s,
   {
-    ...l,
+    ...i,
     role: r,
     interactive: o,
-    controls: t && /* @__PURE__ */ m(i, { ...t }),
+    controls: t && /* @__PURE__ */ m(l, { ...t }),
     linkIcon: o,
     size: n
   }
 );
 export {
-  L as AutocompleteItem
+  M as AutocompleteItem
 };

package/dist/components/Searchbar/Searchbar.js

@@ -1,13 +1,14 @@
-import { jsxs as f, jsx as i } from "react/jsx-runtime";
+import { jsxs as f, jsx as c } from "react/jsx-runtime";
 import { useState as g } from "react";
 import "../../index-p1eeF8LQ.js";
 import { useIsDesktop as h } from "../../hooks/useIsDesktop.js";
+import "../Button/Button.js";
 import { useRootContext as I } from "../RootProvider/RootProvider.js";
 import { SearchbarBase as T } from "./SearchbarBase.js";
 import { SearchbarField as A } from "./SearchbarField.js";
 import { Autocomplete as B } from "./Autocomplete.js";
 import "../Snackbar/useSnackbar.js";
-const H = ({
+const N = ({
   className: l,
   autocomplete: e,
   expanded: r = !1,
@@ -16,7 +17,7 @@ const H = ({
   useGlobalHeader: m = !1,
   ...o
 }) => {
-  const [s, c] = g(!1), { previousId: d, openId: p } = I(), b = h();
+  const [s, i] = g(!1), { previousId: p, openId: d } = I(), b = h();
   return /* @__PURE__ */ f(
     T,
     {
@@ -25,11 +26,11 @@ const H = ({
       autocomplete: !!e,
       onBlurCapture: (t) => {
         const u = t.target?.attributes?.getNamedItem("data-testid")?.value;
-        t?.relatedTarget?.closest('[data-autocomplete="true"]') || t.relatedTarget === null || (u === "search-button-clear" || u === "search-button-close" || u === "searchbar-input" && t.relatedTarget?.getAttribute("data-testid") !== "searchbar-input" && t.relatedTarget?.getAttribute("data-testid") !== "search-button-clear" && t.relatedTarget?.getAttribute("data-testid") !== "search-button-close" && t.relatedTarget?.getAttribute("data-testid") !== "autocomplete-list") && (b || d !== "menu" ? a?.() : p("menu"));
+        t?.relatedTarget?.closest('[data-autocomplete="true"]') || t.relatedTarget === null || (u === "search-button-clear" || u === "search-button-close" || u === "searchbar-input" && t.relatedTarget?.getAttribute("data-testid") !== "searchbar-input" && t.relatedTarget?.getAttribute("data-testid") !== "search-button-clear" && t.relatedTarget?.getAttribute("data-testid") !== "search-button-close" && t.relatedTarget?.getAttribute("data-testid") !== "autocomplete-list") && (b || p !== "menu" ? a?.() : d("menu"));
       },
       useGlobalHeader: m,
       children: [
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ c(
           A,
           {
             ...o,
@@ -38,14 +39,14 @@ const H = ({
             tabIndex: n,
             ...e && { controlsId: "searchbar-autocomplete" },
             onFocus: (t) => {
-              o?.onFocus?.(t), s || c(!0);
+              o?.onFocus?.(t), s || i(!0);
             },
             onBlur: (t) => {
-              o?.onBlur?.(t), s && c(!1);
+              o?.onBlur?.(t), s && i(!1);
             }
           }
         ),
-        e && /* @__PURE__ */ i(
+        e && /* @__PURE__ */ c(
           B,
           {
             ...e,
@@ -60,5 +61,5 @@ const H = ({
   );
 };
 export {
-  H as Searchbar
+  N as Searchbar
 };