@canonical/maas-react-components 2.7.0 → 2.7.1

package/dist/@canonical/maas-react-components.es.js

@@ -1,20 +1,30 @@
-import { C as Re, D as Ae, F as Me, G as Le, I as Fe, L as De, a as Be, M as Oe, N as Ue, b as je, e as Ve, f as Te, P as qe, S as Ge, c as Ke, T as Qe, d as $e, m as He, t as ze, u as Ze } from "../QueryInput-D7uXzKgr.mjs";
-import { jsx as a, jsxs as w, Fragment as te } from "react/jsx-runtime";
-import { Link as ne, Spinner as H, Label as le, Button as V, Icon as K, CheckboxInput as se, useClickOutside as oe, useOnEscapePressed as ae, SearchBox as z } from "@canonical/react-components";
+import { C as te, S as ne } from "../QueryInput-D7uXzKgr.mjs";
+import { D as Be, F as Oe, G as Ue, I as je, L as Ve, a as Te, M as qe, N as Ge, b as Ke, e as ze, f as Qe, P as $e, c as He, T as Ze, d as Xe, m as Ye, t as Je, u as We } from "../QueryInput-D7uXzKgr.mjs";
+import { jsx as s, jsxs as N, Fragment as le } from "react/jsx-runtime";
+import { Link as se, Spinner as $, Label as oe, Button as V, Icon as K, CheckboxInput as ae, useClickOutside as ie, useOnEscapePressed as re, SearchBox as H } from "@canonical/react-components";
+import { lazy as ce, Suspense as de, useReducer as ue, useCallback as w, useId as q, useMemo as O, useState as U, useEffect as G, useRef as T } from "react";
 import L from "classnames";
-import { useReducer as ie, useCallback as S, useId as q, useMemo as O, useState as U, useEffect as G, useRef as T } from "react";
-import { useDropzone as re } from "react-dropzone";
-const Ne = ({ children: t, to: l, ...e }) => /* @__PURE__ */ a(ne, { ...e, href: l, rel: "noreferrer noopener", target: "_blank", children: t }), ce = ({
+import { useDropzone as pe } from "react-dropzone";
+const Ee = ({ children: t, to: l, ...e }) => /* @__PURE__ */ s(se, { ...e, href: l, rel: "noreferrer noopener", target: "_blank", children: t }), he = ({
   percentComplete: t
-}) => /* @__PURE__ */ w("small", { className: "progress-indicator", children: [
+}) => /* @__PURE__ */ N("small", { className: "progress-indicator", children: [
   t,
   "% ",
-  /* @__PURE__ */ a(H, { className: "progress-indicator__spinner" })
-] }), Z = ({
+  /* @__PURE__ */ s($, { className: "progress-indicator__spinner" })
+] }), xe = (t, l) => {
+  const e = ce(t);
+  return (r) => /* @__PURE__ */ s(
+    de,
+    {
+      fallback: /* @__PURE__ */ s(te, { children: /* @__PURE__ */ s(ne.Skeleton, { hasTitle: l }) }),
+      children: /* @__PURE__ */ s(e, { ...r })
+    }
+  );
+}, Z = ({
   children: t,
   className: l,
   isVisible: e
-}) => /* @__PURE__ */ a(
+}) => /* @__PURE__ */ s(
   "div",
   {
     className: L("fade-in--down", l),
@@ -22,12 +32,12 @@ const Ne = ({ children: t, to: l, ...e }) => /* @__PURE__ */ a(ne, { ...e, href:
     style: { visibility: e ? "visible" : "hidden" },
     children: t
   }
-), we = ({
+), Pe = ({
   children: t,
   ...l
-}) => /* @__PURE__ */ a(Z, { isVisible: !l["aria-hidden"], children: /* @__PURE__ */ a("div", { className: "p-form__nested-group", ...l, children: t }) }), Se = ({ activeStep: t, items: l }) => /* @__PURE__ */ a("ol", { className: "stepper", children: l.map((e, n) => {
+}) => /* @__PURE__ */ s(Z, { isVisible: !l["aria-hidden"], children: /* @__PURE__ */ s("div", { className: "p-form__nested-group", ...l, children: t }) }), ke = ({ activeStep: t, items: l }) => /* @__PURE__ */ s("ol", { className: "stepper", children: l.map((e, n) => {
   const r = n === t, p = n < t;
-  return /* @__PURE__ */ a("li", { "aria-label": e, className: "stepper__item", children: /* @__PURE__ */ a(
+  return /* @__PURE__ */ s("li", { "aria-label": e, className: "stepper__item", children: /* @__PURE__ */ s(
     "p",
     {
       "aria-label": p ? `${e} (completed)` : e,
@@ -38,7 +48,7 @@ const Ne = ({ children: t, to: l, ...e }) => /* @__PURE__ */ a(ne, { ...e, href:
       children: e
     }
   ) }, n);
-}) }), de = () => {
+}) }), me = () => {
   const t = (u, g) => {
     switch (g.type) {
       case "add-files":
@@ -67,13 +77,13 @@ const Ne = ({ children: t, to: l, ...e }) => /* @__PURE__ */ a(ne, { ...e, href:
           )
         };
     }
-  }, [{ acceptedFiles: l, fileRejections: e }, n] = ie(
+  }, [{ acceptedFiles: l, fileRejections: e }, n] = ue(
     t,
     {
       acceptedFiles: [],
       fileRejections: []
     }
-  ), r = S(
+  ), r = w(
     (u, g) => n({
       type: "add-files",
       payload: { acceptedFiles: u, fileRejections: g }
@@ -81,7 +91,7 @@ const Ne = ({ children: t, to: l, ...e }) => /* @__PURE__ */ a(ne, { ...e, href:
     [n]
   );
   return { acceptedFiles: l, fileRejections: e, onFileUpload: r, removeFile: (u) => n({ type: "remove-accepted", payload: u }), removeRejectedFile: (u) => n({ type: "remove-rejected", payload: u }) };
-}, Ie = ({
+}, Re = ({
   accept: t,
   error: l,
   files: e,
@@ -94,26 +104,26 @@ const Ne = ({ children: t, to: l, ...e }) => /* @__PURE__ */ a(ne, { ...e, href:
   onRemoveFile: v,
   rejectedFiles: C
 }) => {
-  const d = de(), b = e ?? d.acceptedFiles, f = C ?? d.fileRejections, E = g ?? d.onFileUpload, h = (c) => {
+  const d = me(), b = e ?? d.acceptedFiles, f = C ?? d.fileRejections, E = g ?? d.onFileUpload, h = (c) => {
     v ? v(c) : "file" in c && "errors" in c ? d.removeRejectedFile(c) : d.removeFile(c);
-  }, { getRootProps: x, getInputProps: i } = re({
+  }, { getRootProps: x, getInputProps: i } = pe({
     accept: t,
     maxFiles: p,
     maxSize: m,
     minSize: u,
     onDrop: E
   }), y = q();
-  return /* @__PURE__ */ w(
+  return /* @__PURE__ */ N(
     "div",
     {
       className: L("p-form__group p-form-validation", {
         "is-error": !!l
       }),
       children: [
-        r && /* @__PURE__ */ a(le, { id: y, children: r }),
-        n && /* @__PURE__ */ a("p", { className: "p-form-help-text", children: n }),
-        /* @__PURE__ */ w("div", { className: "p-form__control", children: [
-          !p || b.length + f.length < p ? /* @__PURE__ */ a("div", { className: "file-upload__wrapper", children: /* @__PURE__ */ w(
+        r && /* @__PURE__ */ s(oe, { id: y, children: r }),
+        n && /* @__PURE__ */ s("p", { className: "p-form-help-text", children: n }),
+        /* @__PURE__ */ N("div", { className: "p-form__control", children: [
+          !p || b.length + f.length < p ? /* @__PURE__ */ s("div", { className: "file-upload__wrapper", children: /* @__PURE__ */ N(
             "div",
             {
               ...x(),
@@ -121,61 +131,61 @@ const Ne = ({ children: t, to: l, ...e }) => /* @__PURE__ */ a(ne, { ...e, href:
               className: "file-upload",
               "data-testid": "file-upload",
               children: [
-                /* @__PURE__ */ a("input", { ...i() }),
-                /* @__PURE__ */ a("button", { className: "file-upload__button", type: "button", children: "Drag and drop files here or click to upload" })
+                /* @__PURE__ */ s("input", { ...i() }),
+                /* @__PURE__ */ s("button", { className: "file-upload__button", type: "button", children: "Drag and drop files here or click to upload" })
               ]
             }
           ) }) : null,
-          /* @__PURE__ */ w("div", { className: "file-upload__files-list", children: [
-            f && f.map((c) => /* @__PURE__ */ a("span", { className: "is-error", children: /* @__PURE__ */ w("div", { className: "file-upload__file is-rejected", children: [
+          /* @__PURE__ */ N("div", { className: "file-upload__files-list", children: [
+            f && f.map((c) => /* @__PURE__ */ s("span", { className: "is-error", children: /* @__PURE__ */ N("div", { className: "file-upload__file is-rejected", children: [
               c.file.name,
-              /* @__PURE__ */ a(
+              /* @__PURE__ */ s(
                 V,
                 {
                   appearance: "base",
                   className: "file-upload__file-remove-button",
                   onClick: () => h(c),
                   type: "button",
-                  children: /* @__PURE__ */ a(K, { name: "close", children: "Remove file" })
+                  children: /* @__PURE__ */ s(K, { name: "close", children: "Remove file" })
                 }
               )
             ] }) }, c.file.name)),
-            b && b.map((c) => /* @__PURE__ */ w("div", { className: "file-upload__file", children: [
+            b && b.map((c) => /* @__PURE__ */ N("div", { className: "file-upload__file", children: [
               c.name,
-              c.percentUploaded !== void 0 ? /* @__PURE__ */ a(ce, { percentComplete: c.percentUploaded }) : /* @__PURE__ */ a(
+              c.percentUploaded !== void 0 ? /* @__PURE__ */ s(he, { percentComplete: c.percentUploaded }) : /* @__PURE__ */ s(
                 V,
                 {
                   appearance: "base",
                   className: "file-upload__file-remove-button",
                   onClick: () => h(c),
                   type: "button",
-                  children: /* @__PURE__ */ a(K, { name: "close", children: "Remove file" })
+                  children: /* @__PURE__ */ s(K, { name: "close", children: "Remove file" })
                 }
               )
             ] }, c.name))
           ] }),
-          l ? /* @__PURE__ */ w("p", { className: "p-form-validation__message", children: [
-            /* @__PURE__ */ a("strong", { children: "Error: " }),
+          l ? /* @__PURE__ */ N("p", { className: "p-form-validation__message", children: [
+            /* @__PURE__ */ s("strong", { children: "Error: " }),
             l
           ] }) : null
         ] })
       ]
     }
   );
-}, X = (t, l) => t.label.localeCompare(l.label, "en", { numeric: !0 }), ue = (t) => (l, e) => {
+}, X = (t, l) => t.label.localeCompare(l.label, "en", { numeric: !0 }), fe = (t) => (l, e) => {
   if (t) {
     const n = t.has(l.value), r = t.has(e.value);
     if (n && !r) return -1;
     if (!n && r) return 1;
   }
   return 0;
-}, pe = (t) => {
+}, ge = (t) => {
   const l = /* @__PURE__ */ new Map();
   return t.forEach((e) => {
     const n = e.group || "Ungrouped", r = l.get(n) || [];
     r.push(e), l.set(n, r);
   }), Array.from(l, ([e, n]) => ({ group: e, items: n }));
-}, he = ({
+}, ve = ({
   items: t,
   selectedItems: l,
   disabledItems: e,
@@ -184,7 +194,7 @@ const Ne = ({ children: t, to: l, ...e }) => /* @__PURE__ */ a(ne, { ...e, href:
   isOpen: p,
   footer: m,
   sortFn: u = X,
-  groupFn: g = pe,
+  groupFn: g = ge,
   ...v
 }) => {
   const C = O(
@@ -207,12 +217,12 @@ const Ne = ({ children: t, to: l, ...e }) => /* @__PURE__ */ a(ne, { ...e, href:
       r(I);
     }
   };
-  return /* @__PURE__ */ a(Z, { isVisible: p, className: "put-above", children: /* @__PURE__ */ w("div", { className: "multi-select__dropdown", role: "listbox", ...v, children: [
+  return /* @__PURE__ */ s(Z, { isVisible: p, className: "put-above", children: /* @__PURE__ */ N("div", { className: "multi-select__dropdown", role: "listbox", ...v, children: [
     n || null,
-    h.map(({ group: i, items: y }) => /* @__PURE__ */ w("div", { className: "multi-select__group", children: [
-      E ? /* @__PURE__ */ a("h5", { className: "multi-select__dropdown-header", children: i }) : null,
-      /* @__PURE__ */ a("ul", { className: "multi-select__dropdown-list", "aria-label": i, children: y.sort(u).sort(ue(b)).map((c) => /* @__PURE__ */ a("li", { className: "multi-select__dropdown-item", children: /* @__PURE__ */ a(
-        se,
+    h.map(({ group: i, items: y }) => /* @__PURE__ */ N("div", { className: "multi-select__group", children: [
+      E ? /* @__PURE__ */ s("h5", { className: "multi-select__dropdown-header", children: i }) : null,
+      /* @__PURE__ */ s("ul", { className: "multi-select__dropdown-list", "aria-label": i, children: y.sort(u).sort(fe(b)).map((c) => /* @__PURE__ */ s("li", { className: "multi-select__dropdown-item", children: /* @__PURE__ */ s(
+        ae,
         {
           disabled: d.has(c.value),
           label: c.label,
@@ -223,9 +233,9 @@ const Ne = ({ children: t, to: l, ...e }) => /* @__PURE__ */ a(ne, { ...e, href:
         c.value
       ) }, c.value)) })
     ] }, i)),
-    m ? /* @__PURE__ */ a("div", { className: "multi-select__footer", children: m }) : null
+    m ? /* @__PURE__ */ s("div", { className: "multi-select__footer", children: m }) : null
   ] }) });
-}, Ce = ({
+}, Ae = ({
   disabled: t,
   selectedItems: l = [],
   label: e,
@@ -238,10 +248,10 @@ const Ne = ({ children: t, to: l, ...e }) => /* @__PURE__ */ a(ne, { ...e, href:
   dropdownFooter: v,
   variant: C = "search"
 }) => {
-  const d = oe(() => {
+  const d = ie(() => {
     f(!1), h("");
   });
-  ae(() => {
+  re(() => {
     f(!1), h("");
   });
   const [b, f] = U(!1), [E, h] = U("");
@@ -254,9 +264,9 @@ const Ne = ({ children: t, to: l, ...e }) => /* @__PURE__ */ a(ne, { ...e, href:
   }, P = q(), I = q(), F = y.filter(
     (_) => m.some((R) => R.value === _.value)
   ).sort(X).map((_) => _.label).join(", ");
-  return /* @__PURE__ */ a("div", { ref: d, children: /* @__PURE__ */ w("div", { className: "multi-select", children: [
-    C === "search" ? /* @__PURE__ */ a(
-      z,
+  return /* @__PURE__ */ s("div", { ref: d, children: /* @__PURE__ */ N("div", { className: "multi-select", children: [
+    C === "search" ? /* @__PURE__ */ s(
+      H,
       {
         externallyControlled: !0,
         "aria-controls": P,
@@ -276,7 +286,7 @@ const Ne = ({ children: t, to: l, ...e }) => /* @__PURE__ */ a(ne, { ...e, href:
         value: E,
         className: "multi-select__input"
       }
-    ) : /* @__PURE__ */ a(
+    ) : /* @__PURE__ */ s(
       "button",
       {
         role: "combobox",
@@ -288,11 +298,11 @@ const Ne = ({ children: t, to: l, ...e }) => /* @__PURE__ */ a(ne, { ...e, href:
         onClick: () => {
           f((_) => !_);
         },
-        children: /* @__PURE__ */ a("span", { className: "multi-select__condensed-text", children: y.length > 0 ? F : r ?? "Select items" })
+        children: /* @__PURE__ */ s("span", { className: "multi-select__condensed-text", children: y.length > 0 ? F : r ?? "Select items" })
       }
     ),
-    /* @__PURE__ */ a(
-      he,
+    /* @__PURE__ */ s(
+      ve,
       {
         id: P,
         isOpen: b,
@@ -303,8 +313,8 @@ const Ne = ({ children: t, to: l, ...e }) => /* @__PURE__ */ a(ne, { ...e, href:
         disabledItems: u,
         header: g,
         updateItems: c,
-        footer: v || /* @__PURE__ */ w(te, { children: [
-          /* @__PURE__ */ a(
+        footer: v || /* @__PURE__ */ N(le, { children: [
+          /* @__PURE__ */ s(
             V,
             {
               appearance: "link",
@@ -320,7 +330,7 @@ const Ne = ({ children: t, to: l, ...e }) => /* @__PURE__ */ a(ne, { ...e, href:
               children: "Select all"
             }
           ),
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ s(
             V,
             {
               appearance: "link",
@@ -340,7 +350,7 @@ const Ne = ({ children: t, to: l, ...e }) => /* @__PURE__ */ a(ne, { ...e, href:
       }
     )
   ] }) });
-}, Q = {
+}, z = {
   DEFAULT: 4,
   EXPANDED: 15
 }, k = {
@@ -350,9 +360,9 @@ const Ne = ({ children: t, to: l, ...e }) => /* @__PURE__ */ a(ne, { ...e, href:
   COLON: ":",
   COMMA: ","
 }, j = (t, l = t.length) => {
-  const e = me(t, l), { token: n, tokenStart: r, tokenEnd: p } = fe(t, l);
+  const e = be(t, l), { token: n, tokenStart: r, tokenEnd: p } = _e(t, l);
   return { context: e, token: n, tokenStart: r, tokenEnd: p };
-}, me = (t, l) => {
+}, be = (t, l) => {
   let e = 0;
   for (let n = l - 1; n >= 0; n--) {
     const r = t[n];
@@ -367,17 +377,17 @@ const Ne = ({ children: t, to: l, ...e }) => /* @__PURE__ */ a(ne, { ...e, href:
     }
   }
   return "";
-}, fe = (t, l) => {
+}, _e = (t, l) => {
   let e = l, n = l;
   for (; n < t.length && /[^\s=(),]/.test(t[n]); )
     n++;
   for (; e > 0 && /[^\s=(),]/.test(t[e - 1]); )
     e--;
   return { token: t.slice(e, n), tokenStart: e, tokenEnd: n };
-}, $ = (t, l) => {
+}, Q = (t, l) => {
   const e = t.charAt(l - 1);
   return l > 0 && (e === k.CLOSE_PAREN || e === k.COMMA);
-}, Ee = ({
+}, Me = ({
   className: t,
   disabled: l = !1,
   search: e,
@@ -396,48 +406,48 @@ const Ne = ({ children: t, to: l, ...e }) => /* @__PURE__ */ a(ne, { ...e, href:
     showingMore: !1,
     cursorPosition: 0
   }), f = T(null), E = T(null), h = T(null), x = O(() => {
-    const s = d.showingMore ? Q.EXPANDED : Q.DEFAULT, o = u.slice(0, s);
-    return !d.showingMore && u.length > s ? [...o, { value: "Show more...", type: "more" }] : o;
-  }, [u, d.showingMore]), i = S(
-    (s) => {
-      b(typeof s == "function" ? (o) => ({ ...o, ...s(o) }) : (o) => ({ ...o, ...s }));
+    const o = d.showingMore ? z.EXPANDED : z.DEFAULT, a = u.slice(0, o);
+    return !d.showingMore && u.length > o ? [...a, { value: "Show more...", type: "more" }] : a;
+  }, [u, d.showingMore]), i = w(
+    (o) => {
+      b(typeof o == "function" ? (a) => ({ ...a, ...o(a) }) : (a) => ({ ...a, ...o }));
     },
     []
-  ), y = S(
-    (s) => {
-      f.current && !f.current.contains(s.target) && i({
+  ), y = w(
+    (o) => {
+      f.current && !f.current.contains(o.target) && i({
         isVisible: !1,
         highlightedIndex: -1
       });
     },
     [i]
-  ), c = S(
-    (s, o) => {
-      const { tokenStart: N, tokenEnd: A } = o;
-      if (s.type === "filter") {
-        const B = s.value + k.COLON + k.OPEN_PAREN;
-        return e.slice(0, N) + B + e.slice(A);
+  ), c = w(
+    (o, a) => {
+      const { tokenStart: S, tokenEnd: A } = a;
+      if (o.type === "filter") {
+        const B = o.value + k.COLON + k.OPEN_PAREN;
+        return e.slice(0, S) + B + e.slice(A);
       }
       if (r.length === 0) {
-        const B = s.type + k.COLON + k.OPEN_PAREN + k.EQUALS + s.value;
-        return e.slice(0, N) + B + e.slice(A);
+        const B = o.type + k.COLON + k.OPEN_PAREN + k.EQUALS + o.value;
+        return e.slice(0, S) + B + e.slice(A);
       }
-      const M = e.charAt(N - 1) === k.EQUALS ? s.value : k.EQUALS + s.value;
-      return e.slice(0, N) + M + e.slice(A);
+      const M = e.charAt(S - 1) === k.EQUALS ? o.value : k.EQUALS + o.value;
+      return e.slice(0, S) + M + e.slice(A);
     },
     [e, r]
-  ), P = S(
-    (s) => {
-      const o = x[s];
-      if (!o) return;
-      if (o.type === "more") {
+  ), P = w(
+    (o) => {
+      const a = x[o];
+      if (!a) return;
+      if (a.type === "more") {
         i({ showingMore: !0 });
         return;
       }
-      const N = j(
+      const S = j(
         e,
         d.cursorPosition
-      ), A = c(o, N), M = N.tokenStart + (o.type === "filter" ? o.value.length + 2 : r.length === 0 ? o.type.length + o.value.length + 3 : o.value.length + 1), { context: B, token: ee } = j(
+      ), A = c(a, S), M = S.tokenStart + (a.type === "filter" ? a.value.length + 2 : r.length === 0 ? a.type.length + a.value.length + 3 : a.value.length + 1), { context: B, token: ee } = j(
         A,
         M
       );
@@ -449,7 +459,7 @@ const Ne = ({ children: t, to: l, ...e }) => /* @__PURE__ */ a(ne, { ...e, href:
       }, 0), i({
         highlightedIndex: 0,
         showingMore: !1,
-        isVisible: o.type === "filter",
+        isVisible: a.type === "filter",
         cursorPosition: M
       });
     },
@@ -464,46 +474,46 @@ const Ne = ({ children: t, to: l, ...e }) => /* @__PURE__ */ a(ne, { ...e, href:
       n,
       i
     ]
-  ), I = S(() => {
+  ), I = w(() => {
     if (!h.current) return;
-    const s = h.current.selectionStart || 0, { context: o, token: N } = j(
+    const o = h.current.selectionStart || 0, { context: a, token: S } = j(
       e,
-      s
+      o
     );
-    p(o), m(N), i((A) => ({
+    p(a), m(S), i((A) => ({
       ...A,
-      isVisible: !$(e, s),
-      cursorPosition: s
+      isVisible: !Q(e, o),
+      cursorPosition: o
     }));
-  }, [e, p, m, i]), F = S(
-    (s) => {
-      const { key: o } = s;
+  }, [e, p, m, i]), F = w(
+    (o) => {
+      const { key: a } = o;
       if (d.isVisible) {
-        const N = x.length;
-        switch (o) {
+        const S = x.length;
+        switch (a) {
           case "Tab":
           case "ArrowDown":
-            s.preventDefault(), i({
-              highlightedIndex: (d.highlightedIndex + 1) % N
+            o.preventDefault(), i({
+              highlightedIndex: (d.highlightedIndex + 1) % S
             });
             return;
           case "ArrowUp":
-            s.preventDefault(), i({
-              highlightedIndex: d.highlightedIndex <= 0 ? N - 1 : d.highlightedIndex - 1
+            o.preventDefault(), i({
+              highlightedIndex: d.highlightedIndex <= 0 ? S - 1 : d.highlightedIndex - 1
             });
             return;
           case "Enter":
-            s.preventDefault(), d.highlightedIndex >= 0 ? P(d.highlightedIndex) : i({ isVisible: !1 });
+            o.preventDefault(), d.highlightedIndex >= 0 ? P(d.highlightedIndex) : i({ isVisible: !1 });
             return;
           case "Escape":
-            s.preventDefault(), i({
+            o.preventDefault(), i({
               isVisible: !1,
               highlightedIndex: -1
             });
             return;
         }
       }
-      (o === "ArrowLeft" || o === "ArrowRight" || o === "Home" || o === "End") && setTimeout(I, 0);
+      (a === "ArrowLeft" || a === "ArrowRight" || a === "Home" || a === "End") && setTimeout(I, 0);
     },
     [
       d,
@@ -512,46 +522,46 @@ const Ne = ({ children: t, to: l, ...e }) => /* @__PURE__ */ a(ne, { ...e, href:
       P,
       I
     ]
-  ), _ = S(
-    (s) => {
-      const { key: o } = s;
-      (o === "ArrowLeft" || o === "ArrowRight" || o === "Home" || o === "End") && I();
+  ), _ = w(
+    (o) => {
+      const { key: a } = o;
+      (a === "ArrowLeft" || a === "ArrowRight" || a === "Home" || a === "End") && I();
     },
     [I]
-  ), R = S(() => {
+  ), R = w(() => {
     i({
       isVisible: !0,
       highlightedIndex: 0
     });
-  }, [i]), D = S(
-    (s) => {
+  }, [i]), D = w(
+    (o) => {
       var M;
-      const o = ((M = h.current) == null ? void 0 : M.selectionStart) || s.length, { context: N, token: A } = j(
-        s,
-        o
+      const a = ((M = h.current) == null ? void 0 : M.selectionStart) || o.length, { context: S, token: A } = j(
+        o,
+        a
       );
-      p(N), m(A), n(s), i({
+      p(S), m(A), n(o), i({
         highlightedIndex: 0,
-        isVisible: !$(s, o),
+        isVisible: !Q(o, a),
         showingMore: !1,
-        cursorPosition: o
+        cursorPosition: a
       });
     },
     [p, m, n, i]
-  ), Y = S(() => {
+  ), Y = w(() => {
     setTimeout(I, 0);
-  }, [I]), J = S(() => {
+  }, [I]), J = w(() => {
     i({
       isVisible: !1,
       highlightedIndex: -1
     });
-  }, [i]), W = S(
-    (s) => {
-      i({ highlightedIndex: s });
+  }, [i]), W = w(
+    (o) => {
+      i({ highlightedIndex: o });
     },
     [i]
   );
-  return G(() => (document.addEventListener("mousedown", y), () => document.removeEventListener("mousedown", y)), [y]), /* @__PURE__ */ w(
+  return G(() => (document.addEventListener("mousedown", y), () => document.removeEventListener("mousedown", y)), [y]), /* @__PURE__ */ N(
     "div",
     {
       className: L("p-query-input", t),
@@ -559,8 +569,8 @@ const Ne = ({ children: t, to: l, ...e }) => /* @__PURE__ */ a(ne, { ...e, href:
       ref: f,
       ...C,
       children: [
-        /* @__PURE__ */ a(
-          z,
+        /* @__PURE__ */ s(
+          H,
           {
             disabled: l,
             placeholder: v,
@@ -582,7 +592,7 @@ const Ne = ({ children: t, to: l, ...e }) => /* @__PURE__ */ a(ne, { ...e, href:
             "aria-owns": "query-suggestions"
           }
         ),
-        d.isVisible && u.length > 0 && /* @__PURE__ */ a(
+        d.isVisible && u.length > 0 && /* @__PURE__ */ s(
           "ul",
           {
             className: "p-query-input__list",
@@ -590,42 +600,42 @@ const Ne = ({ children: t, to: l, ...e }) => /* @__PURE__ */ a(ne, { ...e, href:
             id: "query-suggestions",
             role: "listbox",
             "aria-label": "Search suggestions",
-            children: g ? /* @__PURE__ */ a("div", { className: "p-query-input__loading", children: /* @__PURE__ */ a(H, { text: "Loading..." }) }) : x.map((s, o) => /* @__PURE__ */ w(
+            children: g ? /* @__PURE__ */ s("div", { className: "p-query-input__loading", children: /* @__PURE__ */ s($, { text: "Loading..." }) }) : x.map((o, a) => /* @__PURE__ */ N(
               "li",
               {
                 className: L("p-query-input__item", {
-                  highlight: o === d.highlightedIndex
+                  highlight: a === d.highlightedIndex
                 }),
-                onClick: () => P(o),
-                onKeyDown: () => P(o),
-                onMouseEnter: () => W(o),
+                onClick: () => P(a),
+                onKeyDown: () => P(a),
+                onMouseEnter: () => W(a),
                 role: "option",
-                "aria-selected": o === d.highlightedIndex,
+                "aria-selected": a === d.highlightedIndex,
                 tabIndex: -1,
                 children: [
-                  /* @__PURE__ */ w("span", { className: "p-query-input__item-label", children: [
-                    /* @__PURE__ */ a(
+                  /* @__PURE__ */ N("span", { className: "p-query-input__item-label", children: [
+                    /* @__PURE__ */ s(
                       "span",
                       {
                         className: L({
-                          "u-text--muted": s.type === "more"
+                          "u-text--muted": o.type === "more"
                         }),
-                        children: s.value
+                        children: o.value
                       }
                     ),
-                    s.type === "filter" && /* @__PURE__ */ a("span", { className: "u-text--muted", children: ":()" })
+                    o.type === "filter" && /* @__PURE__ */ s("span", { className: "u-text--muted", children: ":()" })
                   ] }),
-                  s.type !== "more" && /* @__PURE__ */ a("span", { className: "u-text--muted u-align-text--right", children: s.type })
+                  o.type !== "more" && /* @__PURE__ */ s("span", { className: "u-text--muted u-align-text--right", children: o.type })
                 ]
               },
-              `${s.value}-${o}`
+              `${o.value}-${a}`
             ))
           }
         )
       ]
     }
   );
-}, xe = ({ value: t, unit: l }, {
+}, Le = ({ value: t, unit: l }, {
   binary: e = !1,
   convertTo: n,
   decimals: r = 2,
@@ -646,33 +656,34 @@ const Ne = ({ children: t, to: l, ...e }) => /* @__PURE__ */ a(ne, { ...e, href:
   };
 };
 export {
-  Re as ContentSection,
-  Ae as DynamicTable,
-  Ne as ExternalLink,
-  Ie as FileUpload,
-  Me as FormSection,
-  Le as GenericTable,
-  Fe as InputGroup,
-  De as Layout,
-  Be as MainToolbar,
-  Oe as Meter,
-  Ce as MultiSelect,
-  he as MultiSelectDropdown,
-  Ue as Navigation,
-  je as NavigationBar,
-  we as NestedFormGroup,
-  Ve as Pagination,
-  Te as PaginationContainer,
-  qe as Placeholder,
-  ce as ProgressIndicator,
-  Ee as QueryInput,
-  Ge as SidePanel,
-  Ke as SidePanelContextProvider,
-  Se as Stepper,
-  Qe as TableCaption,
-  $e as defaultFilledColors,
-  xe as formatBytes,
-  He as meterColor,
-  ze as testIds,
-  Ze as useSidePanel
+  te as ContentSection,
+  Be as DynamicTable,
+  Ee as ExternalLink,
+  Re as FileUpload,
+  Oe as FormSection,
+  Ue as GenericTable,
+  je as InputGroup,
+  Ve as Layout,
+  Te as MainToolbar,
+  qe as Meter,
+  Ae as MultiSelect,
+  ve as MultiSelectDropdown,
+  Ge as Navigation,
+  Ke as NavigationBar,
+  Pe as NestedFormGroup,
+  ze as Pagination,
+  Qe as PaginationContainer,
+  $e as Placeholder,
+  he as ProgressIndicator,
+  Me as QueryInput,
+  ne as SidePanel,
+  He as SidePanelContextProvider,
+  ke as Stepper,
+  Ze as TableCaption,
+  Xe as defaultFilledColors,
+  Le as formatBytes,
+  xe as lazyLoadSidePanel,
+  Ye as meterColor,
+  Je as testIds,
+  We as useSidePanel
 };

package/dist/sections/SidePanel/index.d.ts

@@ -1,2 +1,3 @@
 export { SidePanel } from './SidePanel';
 export { SidePanelContextProvider, useSidePanel } from './SidePanelContextProvider/SidePanelContextProvider';
+export { lazyLoadSidePanel } from './utils';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@canonical/maas-react-components",
   "description": "React components for use in MAAS UI projects.",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/canonical/maas-react-components.git"