slippers-ui 3.1.53 → 3.2.1

package/dist/slippers-ui.es.js

@@ -1,142 +1,146 @@
-import { defineComponent as N, computed as w, createElementBlock as l, openBlock as s, mergeProps as X, renderSlot as $, normalizeClass as m, createElementVNode as f, createBlock as D, resolveDynamicComponent as ee, normalizeStyle as te, withCtx as T, createCommentVNode as V, ref as S, onMounted as K, onUnmounted as ae, createVNode as C, unref as A, Fragment as P, renderList as B, withModifiers as x, toDisplayString as I, createTextVNode as G, resolveComponent as de, withDirectives as U, vShow as Y, normalizeProps as ce, guardReactiveProps as ue, watch as pe, onBeforeUnmount as oe, onBeforeMount as ve, vModelSelect as fe } from "vue";
-import { _ as L, C as se, a as ne, b as le, c as he } from "./chunks/ChevronLgUp-HZ_-4Y4K.js";
-const ge = ["href"], me = /* @__PURE__ */ N({
+import { defineComponent as N, computed as S, createElementBlock as l, openBlock as a, mergeProps as X, renderSlot as $, normalizeClass as m, createElementVNode as p, createBlock as D, resolveDynamicComponent as ee, normalizeStyle as te, withCtx as T, createCommentVNode as B, ref as I, onMounted as j, onUnmounted as oe, createVNode as C, unref as A, Fragment as M, renderList as V, withModifiers as x, toDisplayString as L, createTextVNode as G, resolveComponent as de, withDirectives as U, vShow as Y, normalizeProps as ce, guardReactiveProps as ue, watch as pe, onBeforeUnmount as ae, onBeforeMount as ve, vModelSelect as fe } from "vue";
+const he = ["href"], ge = /* @__PURE__ */ N({
   __name: "SlpButton",
   props: {
     disabled: { type: Boolean },
     variant: {},
     href: {}
   },
-  setup(p) {
-    const e = p, n = w(() => e.disabled ?? !1), i = w(() => e.variant ?? "primary");
-    w(() => e.href ?? "");
-    const t = w(() => {
-      let o = [`slp-btn-${i.value}`];
-      return n.value && o.push("slp-btn-disabled"), o.join(" ");
+  setup(c) {
+    const e = c, n = S(() => e.disabled ?? !1), i = S(() => e.variant ?? "primary");
+    S(() => e.href ?? "");
+    const t = S(() => {
+      let s = [`slp-btn-${i.value}`];
+      return n.value && s.push("slp-btn-disabled"), s.join(" ");
     });
-    return (o, u) => e.href ? (s(), l("a", X({ key: 0 }, o.$attrs, {
+    return (s, v) => e.href ? (a(), l("a", X({ key: 0 }, s.$attrs, {
       class: ["slp-btn", t.value],
       href: e.href
     }), [
-      $(o.$slots, "default", {}, void 0, !0)
-    ], 16, ge)) : (s(), l("button", X({ key: 1 }, o.$attrs, {
+      $(s.$slots, "default", {}, void 0, !0)
+    ], 16, he)) : (a(), l("button", X({ key: 1 }, s.$attrs, {
       class: ["slp-btn", t.value],
       type: "button"
     }), [
-      $(o.$slots, "default", {}, void 0, !0)
+      $(s.$slots, "default", {}, void 0, !0)
     ], 16));
   }
-}), Q = /* @__PURE__ */ L(me, [["__scopeId", "data-v-c6fd7cb9"]]), _e = /* @__PURE__ */ N({
+}), k = (c, e) => {
+  const n = c.__vccOpts || c;
+  for (const [i, t] of e)
+    n[i] = t;
+  return n;
+}, Q = /* @__PURE__ */ k(ge, [["__scopeId", "data-v-c6fd7cb9"]]), me = /* @__PURE__ */ N({
   __name: "SlpColumn",
   props: {
     cols: {},
     size: {}
   },
-  setup(p) {
-    const e = p, n = w(() => e.cols ?? null), i = w(() => e.size ?? "md"), t = w(() => n.value ? `slp-col-${i.value}-${n.value}` : `slp-col-${i.value}`);
-    return (o, u) => (s(), l("div", {
+  setup(c) {
+    const e = c, n = S(() => e.cols ?? null), i = S(() => e.size ?? "md"), t = S(() => n.value ? `slp-col-${i.value}-${n.value}` : `slp-col-${i.value}`);
+    return (s, v) => (a(), l("div", {
       class: m(t.value)
     }, [
-      $(o.$slots, "default", {}, void 0, !0)
+      $(s.$slots, "default", {}, void 0, !0)
     ], 2));
   }
-}), Pt = /* @__PURE__ */ L(_e, [["__scopeId", "data-v-00b68f22"]]), be = {
+}), Ut = /* @__PURE__ */ k(me, [["__scopeId", "data-v-00b68f22"]]), _e = {
   key: 0,
   class: "slp-full-light-purple-background"
-}, ye = {
+}, be = {
   key: 1,
   class: "slp-charcoal-grey-background"
-}, $e = {
+}, ye = {
   key: 2,
   class: "slp-gradient-background"
-}, ke = {
+}, $e = {
   key: 3,
   class: "slp-full-gradient-background"
-}, we = {
+}, ke = {
   key: 4,
   class: "slp-full-charcoal-background"
-}, Se = {
+}, we = {
   key: 5,
   class: "slp-partial-charcoal-background"
-}, Ie = {
+}, Se = {
   key: 6,
   class: "slp-half-grey-background"
-}, Ce = {
+}, Ie = {
   key: 7,
   class: "slp-partial-white-background"
 }, Le = {
   key: 8,
   class: "slp-partial-grey-background"
-}, Ne = /* @__PURE__ */ N({
+}, Ce = /* @__PURE__ */ N({
   __name: "SlpContainer",
   props: {
     fluid: { type: Boolean },
     variant: {}
   },
-  setup(p) {
-    const e = p, n = w(() => e.fluid ?? !1), i = w(() => e.variant ?? "white"), t = w(() => n.value ? "fluid" : "");
-    return (o, u) => i.value === "light-purple-100" ? (s(), l("div", be, [
-      f("div", {
+  setup(c) {
+    const e = c, n = S(() => e.fluid ?? !1), i = S(() => e.variant ?? "white"), t = S(() => n.value ? "fluid" : "");
+    return (s, v) => i.value === "light-purple-100" ? (a(), l("div", _e, [
+      p("div", {
         class: m(["slp-container", t.value])
       }, [
-        $(o.$slots, "default", {}, void 0, !0)
+        $(s.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "grey-100" ? (s(), l("div", ye, [
-      f("div", {
+    ])) : i.value === "grey-100" ? (a(), l("div", be, [
+      p("div", {
         class: m(["slp-container", t.value])
       }, [
-        $(o.$slots, "default", {}, void 0, !0)
+        $(s.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "gradient" ? (s(), l("div", $e, [
-      f("div", {
+    ])) : i.value === "gradient" ? (a(), l("div", ye, [
+      p("div", {
         class: m(["slp-container", t.value])
       }, [
-        $(o.$slots, "default", {}, void 0, !0)
+        $(s.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "gradient-full" ? (s(), l("div", ke, [
-      f("div", {
+    ])) : i.value === "gradient-full" ? (a(), l("div", $e, [
+      p("div", {
         class: m(["slp-container", t.value])
       }, [
-        $(o.$slots, "default", {}, void 0, !0)
+        $(s.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "charcoal-100" ? (s(), l("div", we, [
-      f("div", {
+    ])) : i.value === "charcoal-100" ? (a(), l("div", ke, [
+      p("div", {
         class: m(["slp-container", t.value])
       }, [
-        $(o.$slots, "default", {}, void 0, !0)
+        $(s.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "charcoal-75" ? (s(), l("div", Se, [
-      f("div", {
+    ])) : i.value === "charcoal-75" ? (a(), l("div", we, [
+      p("div", {
         class: m(["slp-container", t.value])
       }, [
-        $(o.$slots, "default", {}, void 0, !0)
+        $(s.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "grey-50" ? (s(), l("div", Ie, [
-      f("div", {
+    ])) : i.value === "grey-50" ? (a(), l("div", Se, [
+      p("div", {
         class: m(["slp-container", t.value])
       }, [
-        $(o.$slots, "default", {}, void 0, !0)
+        $(s.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "white-75" ? (s(), l("div", Ce, [
-      f("div", {
+    ])) : i.value === "white-75" ? (a(), l("div", Ie, [
+      p("div", {
         class: m(["slp-container", t.value])
       }, [
-        $(o.$slots, "default", {}, void 0, !0)
+        $(s.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "grey-75" ? (s(), l("div", Le, [
-      f("div", {
+    ])) : i.value === "grey-75" ? (a(), l("div", Le, [
+      p("div", {
         class: m(["slp-container", t.value])
       }, [
-        $(o.$slots, "default", {}, void 0, !0)
+        $(s.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : (s(), l("div", {
+    ])) : (a(), l("div", {
       key: 9,
       class: m(["slp-container", t.value])
     }, [
-      $(o.$slots, "default", {}, void 0, !0)
+      $(s.$slots, "default", {}, void 0, !0)
     ], 2));
   }
-}), ie = /* @__PURE__ */ L(Ne, [["__scopeId", "data-v-e594efe8"]]), Te = /* @__PURE__ */ N({
+}), ne = /* @__PURE__ */ k(Ce, [["__scopeId", "data-v-e594efe8"]]), Ne = /* @__PURE__ */ N({
   __name: "SlpIcon",
   props: {
     size: {
@@ -155,46 +159,46 @@ const ge = ["href"], me = /* @__PURE__ */ N({
       required: !0
     }
   },
-  setup(p) {
-    const e = p, n = w(() => {
+  setup(c) {
+    const e = c, n = S(() => {
       const t = ["slp-icon"];
       return typeof e.size == "string" && isNaN(Number(e.size)) && t.push(`slp-icon--size-${e.size}`), e.color && !e.color.startsWith("#") && t.push(`slp-icon--color-${e.color}`), t;
-    }), i = w(() => {
-      var o;
+    }), i = S(() => {
+      var s;
       const t = {};
-      if ((o = e.color) != null && o.startsWith("#") && (t.color = e.color, t.fill = e.color), typeof e.size == "number" || !isNaN(Number(e.size))) {
-        const u = typeof e.size == "number" ? e.size : Number(e.size);
-        t.width = `${u}px`, t.height = `${u}px`;
+      if ((s = e.color) != null && s.startsWith("#") && (t.color = e.color, t.fill = e.color), typeof e.size == "number" || !isNaN(Number(e.size))) {
+        const v = typeof e.size == "number" ? e.size : Number(e.size);
+        t.width = `${v}px`, t.height = `${v}px`;
       }
       return t;
     });
-    return (t, o) => {
-      var u, r;
-      return s(), D(ee(p.icon), {
+    return (t, s) => {
+      var v, r;
+      return a(), D(ee(c.icon), {
         class: m(["slp-icon", n.value]),
         style: te(i.value),
         role: "img",
         "aria-hidden": "true",
-        "data-icon-name": ((r = (u = p.icon) == null ? void 0 : u.__docgenInfo) == null ? void 0 : r.displayName) || ""
+        "data-icon-name": ((r = (v = c.icon) == null ? void 0 : v.__docgenInfo) == null ? void 0 : r.displayName) || ""
       }, null, 8, ["class", "style", "data-icon-name"]);
     };
   }
-}), W = /* @__PURE__ */ L(Te, [["__scopeId", "data-v-c3411281"]]), Ee = {}, ze = { class: "slp-row" };
-function Ve(p, e) {
-  return s(), l("div", ze, [
-    $(p.$slots, "default", {}, void 0, !0)
+}), W = /* @__PURE__ */ k(Ne, [["__scopeId", "data-v-c3411281"]]), Te = {}, Ee = { class: "slp-row" };
+function ze(c, e) {
+  return a(), l("div", Ee, [
+    $(c.$slots, "default", {}, void 0, !0)
   ]);
 }
-const Bt = /* @__PURE__ */ L(Ee, [["render", Ve], ["__scopeId", "data-v-adc8d02f"]]), Pe = {
+const jt = /* @__PURE__ */ k(Te, [["render", ze], ["__scopeId", "data-v-adc8d02f"]]), Be = {
   key: 0,
   class: "arrow-symbol"
-}, Be = /* @__PURE__ */ N({
+}, Me = /* @__PURE__ */ N({
   __name: "SlpTypography",
   props: {
     variant: {},
     tag: {}
   },
-  setup(p) {
+  setup(c) {
     const e = [
       "display1",
       "heading1",
@@ -217,21 +221,81 @@ const Bt = /* @__PURE__ */ L(Ee, [["render", Ve], ["__scopeId", "data-v-adc8d02f
       "arrow",
       "quotes",
       "emphasis"
-    ], n = ["span", "h1", "h2", "h3", "h4", "h5", "p", "div"], i = p, t = w(() => e.includes(i.variant || "") ? i.variant : "body1"), o = w(() => n.includes(i.tag || "") ? i.tag : "span"), u = w(() => `slp-text-${t.value}`);
-    return (r, d) => (s(), D(ee(o.value), {
-      class: m(u.value)
+    ], n = ["span", "h1", "h2", "h3", "h4", "h5", "p", "div"], i = c, t = S(() => e.includes(i.variant || "") ? i.variant : "body1"), s = S(() => n.includes(i.tag || "") ? i.tag : "span"), v = S(() => `slp-text-${t.value}`);
+    return (r, d) => (a(), D(ee(s.value), {
+      class: m(v.value)
     }, {
       default: T(() => [
         $(r.$slots, "default", {}, void 0, !0),
-        t.value === "arrow" ? (s(), l("span", Pe, "→")) : V("", !0)
+        t.value === "arrow" ? (a(), l("span", Be, "→")) : B("", !0)
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}), q = /* @__PURE__ */ L(Be, [["__scopeId", "data-v-64ad2128"]]), Me = {
+}), q = /* @__PURE__ */ k(Me, [["__scopeId", "data-v-64ad2128"]]), Ve = {}, Pe = {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+function Ge(c, e) {
+  return a(), l("svg", Pe, e[0] || (e[0] = [
+    p("path", {
+      fill: "currentColor",
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      d: "M2.22 5.22a.75.75 0 0 0 0 1.06l5.252 5.252a.75.75 0 0 0 1.06 0l5.252-5.252a.75.75 0 1 0-1.06-1.06L8.001 9.94 3.28 5.22a.75.75 0 0 0-1.06 0Z"
+    }, null, -1)
+  ]));
+}
+const se = /* @__PURE__ */ k(Ve, [["render", Ge]]), Oe = {}, Re = {
+  viewBox: "0 0 16 16",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+function Ae(c, e) {
+  return a(), l("svg", Re, e[0] || (e[0] = [
+    p("path", {
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      d: "M10.78 2.22a.75.75 0 0 0-1.06 0L4.468 7.472a.75.75 0 0 0 0 1.06l5.252 5.252a.75.75 0 1 0 1.06-1.06L6.06 8.001l4.72-4.721a.75.75 0 0 0 0-1.06Z",
+      fill: "currentColor"
+    }, null, -1)
+  ]));
+}
+const De = /* @__PURE__ */ k(Oe, [["render", Ae]]), We = {}, qe = {
+  viewBox: "0 0 16 16",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+function He(c, e) {
+  return a(), l("svg", qe, e[0] || (e[0] = [
+    p("path", {
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      d: "M5.22 2.22a.75.75 0 0 1 1.06 0l5.252 5.252a.75.75 0 0 1 0 1.06L6.28 13.784a.75.75 0 1 1-1.06-1.06l4.72-4.723L5.22 3.28a.75.75 0 0 1 0-1.06Z",
+      fill: "currentColor"
+    }, null, -1)
+  ]));
+}
+const le = /* @__PURE__ */ k(We, [["render", He]]), Ue = {}, je = {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+function Ke(c, e) {
+  return a(), l("svg", je, e[0] || (e[0] = [
+    p("path", {
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      d: "M2.22 10.78a.75.75 0 0 1 0-1.06l5.252-5.252a.75.75 0 0 1 1.06 0l5.252 5.252a.75.75 0 1 1-1.06 1.06L8.001 6.06 3.28 10.78a.75.75 0 0 1-1.06 0Z",
+      fill: "currentColor"
+    }, null, -1)
+  ]));
+}
+const ie = /* @__PURE__ */ k(Ue, [["render", Ke]]), Ze = {
   key: 0,
   class: "dropdown-menu"
-}, Ge = ["onClick"], Oe = ["aria-label"], Re = ["data-ga-name", "onClick"], Ae = /* @__PURE__ */ N({
+}, Fe = ["onClick"], Je = ["aria-label"], Ye = ["data-ga-name", "onClick"], Qe = /* @__PURE__ */ N({
   __name: "SlpSideNavigation",
   props: {
     position: {
@@ -251,103 +315,103 @@ const Bt = /* @__PURE__ */ L(Ee, [["render", Ve], ["__scopeId", "data-v-adc8d02f
       default: "secondary"
     }
   },
-  setup(p) {
-    const e = p, n = S(null), i = (v) => {
-      n.value && !n.value.contains(v.target) && (r.value = !1);
-    }, t = S(null), o = S(null);
-    let u = null;
-    const r = S(!1), d = S(!0), c = (v) => {
-      window.location.hash = v, r.value = !1;
-    }, a = () => {
-      if (!o.value) return;
-      const v = (window.innerHeight - 120 - 48) * -1;
-      u = new IntersectionObserver(
-        (k) => {
-          k.forEach((_) => {
+  setup(c) {
+    const e = c, n = I(null), i = (f) => {
+      n.value && !n.value.contains(f.target) && (r.value = !1);
+    }, t = I(null), s = I(null);
+    let v = null;
+    const r = I(!1), d = I(!0), u = (f) => {
+      window.location.hash = f, r.value = !1;
+    }, o = () => {
+      if (!s.value) return;
+      const f = (window.innerHeight - 120 - 48) * -1;
+      v = new IntersectionObserver(
+        (w) => {
+          w.forEach((_) => {
             _.isIntersecting ? t.value = _.target.id : d.value && (e.navigationItems.length > 0 && (t.value = e.navigationItems[0].id), d.value = !1);
           });
         },
         {
-          rootMargin: `-120px 0px ${v}px 0px`,
+          rootMargin: `-120px 0px ${f}px 0px`,
           threshold: 0
         }
-      ), e.navigationItems.forEach((k) => {
-        const _ = document.getElementById(k.id);
-        _ && u.observe(_);
+      ), e.navigationItems.forEach((w) => {
+        const _ = document.getElementById(w.id);
+        _ && v.observe(_);
       });
     };
-    return K(() => {
+    return j(() => {
       document.addEventListener("click", i), window.addEventListener("load", () => {
-        a();
-      }), document.readyState === "complete" && a();
-    }), ae(() => {
-      u && u.disconnect(), document.removeEventListener("click", i);
-    }), (v, k) => (s(), l("div", {
+        o();
+      }), document.readyState === "complete" && o();
+    }), oe(() => {
+      v && v.disconnect(), document.removeEventListener("click", i);
+    }), (f, w) => (a(), l("div", {
       class: m([
         "side-navigation-layout",
         `side-navigation-layout--${e.position}`,
         { "side-navigation--dark": e.darkMode }
       ])
     }, [
-      f("div", {
+      p("div", {
         ref_key: "dropdownRef",
         ref: n,
         class: "side-navigation-dropdown"
       }, [
-        f("button", {
+        p("button", {
           class: "dropdown-toggle",
-          onClick: k[0] || (k[0] = (_) => r.value = !r.value)
+          onClick: w[0] || (w[0] = (_) => r.value = !r.value)
         }, [
-          k[1] || (k[1] = f("span", null, "Jump to a section", -1)),
+          w[1] || (w[1] = p("span", null, "Jump to a section", -1)),
           C(W, {
-            icon: r.value ? A(se) : A(ne),
+            icon: r.value ? A(ie) : A(se),
             color: "black",
             size: "sm"
           }, null, 8, ["icon"])
         ]),
-        r.value ? (s(), l("ul", Me, [
-          (s(!0), l(P, null, B(e.navigationItems, (_) => (s(), l("li", {
+        r.value ? (a(), l("ul", Ze, [
+          (a(!0), l(M, null, V(e.navigationItems, (_) => (a(), l("li", {
             key: _.id,
             class: "dropdown-item"
           }, [
-            f("a", {
+            p("a", {
               href: "#",
               class: "dropdown-link",
-              onClick: x((E) => c(_.id), ["prevent"])
-            }, I(_.text), 9, Ge)
+              onClick: x((E) => u(_.id), ["prevent"])
+            }, L(_.text), 9, Fe)
           ]))), 128))
-        ])) : V("", !0)
+        ])) : B("", !0)
       ], 512),
-      f("nav", {
+      p("nav", {
         class: "side-navigation",
-        "aria-label": p.navigationLabel
+        "aria-label": c.navigationLabel
       }, [
-        $(v.$slots, "navigation-header", {}, void 0, !0),
-        f("ul", null, [
-          (s(!0), l(P, null, B(e.navigationItems, (_) => (s(), l("li", {
+        $(f.$slots, "navigation-header", {}, void 0, !0),
+        p("ul", null, [
+          (a(!0), l(M, null, V(e.navigationItems, (_) => (a(), l("li", {
             key: _.id,
             class: "side-navigation__item"
           }, [
-            f("a", {
+            p("a", {
               href: "#",
               class: m(["side-navigation__link", { "side-navigation__link--active": t.value === _.id }]),
               "data-ga-name": _.text,
               "data-ga-location": "side anchor",
-              onClick: x((E) => c(_.id), ["prevent"])
-            }, I(_.text), 11, Re)
+              onClick: x((E) => u(_.id), ["prevent"])
+            }, L(_.text), 11, Ye)
           ]))), 128))
         ])
-      ], 8, Oe),
-      f("div", {
+      ], 8, Je),
+      p("div", {
         ref_key: "slotContentRef",
-        ref: o,
+        ref: s,
         class: "side-navigation-content"
       }, [
-        $(v.$slots, "default", {}, void 0, !0)
+        $(f.$slots, "default", {}, void 0, !0)
       ], 512)
     ], 2));
   }
-}), Mt = /* @__PURE__ */ L(Ae, [["__scopeId", "data-v-3cc08323"]]), De = ["for"], We = ["name", "value", "id", "checked", "disabled"], qe = /* @__PURE__ */ N({
+}), Kt = /* @__PURE__ */ k(Qe, [["__scopeId", "data-v-3cc08323"]]), Xe = ["for"], xe = ["name", "value", "id", "checked", "disabled"], et = /* @__PURE__ */ N({
   __name: "SlpRadioButton",
   props: {
     option: {},
@@ -355,19 +419,19 @@ const Bt = /* @__PURE__ */ L(Ee, [["render", Ve], ["__scopeId", "data-v-adc8d02f
     config: {}
   },
   emits: ["update:modelValue"],
-  setup(p, { emit: e }) {
+  setup(c, { emit: e }) {
     const n = e, i = (t) => {
-      const o = t.target;
-      n("update:modelValue", o.value);
+      const s = t.target;
+      n("update:modelValue", s.value);
     };
-    return (t, o) => {
-      var u, r, d;
-      return s(), l("label", {
+    return (t, s) => {
+      var v, r, d;
+      return a(), l("label", {
         for: t.option,
-        class: m(["slp-radio", { disabled: (u = t.config) == null ? void 0 : u.disabled }])
+        class: m(["slp-radio", { disabled: (v = t.config) == null ? void 0 : v.disabled }])
       }, [
-        G(I(t.option) + " ", 1),
-        f("input", {
+        G(L(t.option) + " ", 1),
+        p("input", {
           type: "radio",
           name: t.name,
           value: t.option,
@@ -375,12 +439,12 @@ const Bt = /* @__PURE__ */ L(Ee, [["render", Ve], ["__scopeId", "data-v-adc8d02f
           onInput: i,
           checked: (r = t.config) == null ? void 0 : r.checked,
           disabled: (d = t.config) == null ? void 0 : d.disabled
-        }, null, 40, We),
-        o[0] || (o[0] = f("span", { class: "slp-radio__checkmark" }, null, -1))
-      ], 10, De);
+        }, null, 40, xe),
+        s[0] || (s[0] = p("span", { class: "slp-radio__checkmark" }, null, -1))
+      ], 10, Xe);
     };
   }
-}), He = /* @__PURE__ */ L(qe, [["__scopeId", "data-v-f37e970e"]]), Ue = /* @__PURE__ */ N({
+}), tt = /* @__PURE__ */ k(et, [["__scopeId", "data-v-f37e970e"]]), ot = /* @__PURE__ */ N({
   __name: "SlpRadioButtonGroup",
   props: {
     options: {},
@@ -391,29 +455,29 @@ const Bt = /* @__PURE__ */ L(Ee, [["render", Ve], ["__scopeId", "data-v-adc8d02f
     } }
   },
   emits: ["update:modelValue"],
-  setup(p, { emit: e }) {
+  setup(c, { emit: e }) {
     const n = {
       VERTICAL: "vertical",
       HORIZONTAL: "horizontal"
-    }, i = e, t = (o) => {
-      i("update:modelValue", o);
+    }, i = e, t = (s) => {
+      i("update:modelValue", s);
     };
-    return (o, u) => {
+    return (s, v) => {
       var r, d;
-      return s(), D(ie, {
+      return a(), D(ne, {
         class: m(["slp-radio-group", {
-          "slp-radio-group--vertical": ((r = o.config) == null ? void 0 : r.orientation) === n.VERTICAL,
-          "slp-radio-group--horizontal": ((d = o.config) == null ? void 0 : d.orientation) === n.HORIZONTAL
+          "slp-radio-group--vertical": ((r = s.config) == null ? void 0 : r.orientation) === n.VERTICAL,
+          "slp-radio-group--horizontal": ((d = s.config) == null ? void 0 : d.orientation) === n.HORIZONTAL
         }])
       }, {
         default: T(() => [
-          (s(!0), l(P, null, B(o.options, (c) => (s(), D(He, {
-            key: c.value,
-            option: c.value,
-            name: o.name,
+          (a(!0), l(M, null, V(s.options, (u) => (a(), D(tt, {
+            key: u.value,
+            option: u.value,
+            name: s.name,
             config: {
-              ...c.config,
-              checked: c.value === o.modelValue
+              ...u.config,
+              checked: u.value === s.modelValue
             },
             "onUpdate:modelValue": t
           }, null, 8, ["option", "name", "config"]))), 128))
@@ -422,26 +486,26 @@ const Bt = /* @__PURE__ */ L(Ee, [["render", Ve], ["__scopeId", "data-v-adc8d02f
       }, 8, ["class"]);
     };
   }
-}), Gt = /* @__PURE__ */ L(Ue, [["__scopeId", "data-v-ae31ec89"]]), Ke = {
+}), Zt = /* @__PURE__ */ k(ot, [["__scopeId", "data-v-ae31ec89"]]), at = {
   key: 0,
   class: "slp-loading-round"
-}, je = {
+}, nt = {
   key: 1,
   class: "slp-loading-linear"
-}, Fe = /* @__PURE__ */ N({
+}, st = /* @__PURE__ */ N({
   name: "SlpLoader",
   __name: "SlpLoader",
   props: {
     config: {}
   },
-  setup(p) {
-    const e = p;
+  setup(c) {
+    const e = c;
     return (n, i) => {
       var t;
-      return ((t = e.config) == null ? void 0 : t.variant) === "round" ? (s(), l("div", Ke)) : (s(), l("div", je));
+      return ((t = e.config) == null ? void 0 : t.variant) === "round" ? (a(), l("div", at)) : (a(), l("div", nt));
     };
   }
-}), Ot = /* @__PURE__ */ L(Fe, [["__scopeId", "data-v-ee32411b"]]), Ze = ["href", "data-ga-name", "data-ga-location"], Je = /* @__PURE__ */ N({
+}), Ft = /* @__PURE__ */ k(st, [["__scopeId", "data-v-ee32411b"]]), lt = ["href", "data-ga-name", "data-ga-location"], it = /* @__PURE__ */ N({
   __name: "Tree",
   props: {
     text: { default: "" },
@@ -455,32 +519,32 @@ const Bt = /* @__PURE__ */ L(Ee, [["render", Ve], ["__scopeId", "data-v-adc8d02f
       mobile: !1
     }) }
   },
-  setup(p) {
+  setup(c) {
     return (e, n) => {
-      var t, o, u, r, d, c;
+      var t, s, v, r, d, u;
       const i = de("Tree", !0);
-      return s(), l("div", {
-        class: m([`depth-${(t = e.config) == null ? void 0 : t.depth}`, { mobile: (o = e.config) == null ? void 0 : o.mobile }])
+      return a(), l("div", {
+        class: m([`depth-${(t = e.config) == null ? void 0 : t.depth}`, { mobile: (s = e.config) == null ? void 0 : s.mobile }])
       }, [
-        e.text ? (s(), l("a", {
+        e.text ? (a(), l("a", {
           key: 0,
-          class: m(["anchor", { selected: (u = e.config) == null ? void 0 : u.isSelected }]),
+          class: m(["anchor", { selected: (v = e.config) == null ? void 0 : v.isSelected }]),
           href: (r = e.config) == null ? void 0 : r.href,
           "data-ga-name": (d = e.config) == null ? void 0 : d.dataGaName,
-          "data-ga-location": (c = e.config) == null ? void 0 : c.dataGaLocation
-        }, I(e.text), 11, Ze)) : V("", !0),
-        (s(!0), l(P, null, B(e.nodes, (a) => {
-          var v, k, _, E, O, h;
-          return s(), D(i, {
-            key: a.text,
-            nodes: a.nodes,
-            text: a.text,
+          "data-ga-location": (u = e.config) == null ? void 0 : u.dataGaLocation
+        }, L(e.text), 11, lt)) : B("", !0),
+        (a(!0), l(M, null, V(e.nodes, (o) => {
+          var f, w, _, E, O, h;
+          return a(), D(i, {
+            key: o.text,
+            nodes: o.nodes,
+            text: o.text,
             config: {
-              href: ((v = a.config) == null ? void 0 : v.href) ?? "",
-              dataGaName: (k = a.config) == null ? void 0 : k.dataGaName,
-              dataGaLocation: (_ = a.config) == null ? void 0 : _.dataGaLocation,
+              href: ((f = o.config) == null ? void 0 : f.href) ?? "",
+              dataGaName: (w = o.config) == null ? void 0 : w.dataGaName,
+              dataGaLocation: (_ = o.config) == null ? void 0 : _.dataGaLocation,
               depth: (((E = e.config) == null ? void 0 : E.depth) ?? 0) + 1,
-              isSelected: (O = a.config) == null ? void 0 : O.isSelected,
+              isSelected: (O = o.config) == null ? void 0 : O.isSelected,
               mobile: (h = e.config) == null ? void 0 : h.mobile
             }
           }, null, 8, ["nodes", "text", "config"]);
@@ -488,20 +552,20 @@ const Bt = /* @__PURE__ */ L(Ee, [["render", Ve], ["__scopeId", "data-v-adc8d02f
       ], 2);
     };
   }
-}), re = /* @__PURE__ */ L(Je, [["__scopeId", "data-v-c3be63ed"]]), Ye = { class: "dropdown__list" }, Qe = { class: "horizontal-rule slp-my-16" }, Xe = /* @__PURE__ */ N({
+}), re = /* @__PURE__ */ k(it, [["__scopeId", "data-v-c3be63ed"]]), rt = { class: "dropdown__list" }, dt = { class: "horizontal-rule slp-my-16" }, ct = /* @__PURE__ */ N({
   __name: "SlpAnchorDropdown",
   props: {
     dropdownLabel: { default: "Jump to a section" },
     anchors: {},
     hyperlinks: {}
   },
-  setup(p) {
-    const e = S(!1), n = () => {
+  setup(c) {
+    const e = I(!1), n = () => {
       e.value = !e.value;
     };
     return (i, t) => {
-      var o, u, r;
-      return s(), l("div", {
+      var s, v, r;
+      return a(), l("div", {
         class: m(["dropdown", { hide: !e.value }])
       }, [
         C(Q, {
@@ -510,21 +574,21 @@ const Bt = /* @__PURE__ */ L(Ee, [["render", Ve], ["__scopeId", "data-v-adc8d02f
           onClick: n
         }, {
           default: T(() => [
-            f("span", null, I(i.dropdownLabel), 1),
+            p("span", null, L(i.dropdownLabel), 1),
             C(W, {
-              icon: e.value ? A(se) : A(ne)
+              icon: e.value ? A(ie) : A(se)
             }, null, 8, ["icon"])
           ]),
           _: 1
         }),
-        f("div", Ye, [
+        p("div", rt, [
           U(C(q, {
             tag: "div",
             variant: "body3-bold",
             class: "nav-heading"
           }, {
             default: T(() => [
-              G(I(i.anchors.text), 1)
+              G(L(i.anchors.text), 1)
             ]),
             _: 1
           }, 512), [
@@ -535,8 +599,8 @@ const Bt = /* @__PURE__ */ L(Ee, [["render", Ve], ["__scopeId", "data-v-adc8d02f
             nodes: i.anchors.data,
             onClick: n
           }, null, 8, ["nodes"]),
-          U(f("div", Qe, null, 512), [
-            [Y, (o = i.hyperlinks) == null ? void 0 : o.data.length]
+          U(p("div", dt, null, 512), [
+            [Y, (s = i.hyperlinks) == null ? void 0 : s.data.length]
           ]),
           U(C(q, {
             tag: "div",
@@ -546,15 +610,15 @@ const Bt = /* @__PURE__ */ L(Ee, [["render", Ve], ["__scopeId", "data-v-adc8d02f
             default: T(() => {
               var d;
               return [
-                G(I((d = i.hyperlinks) == null ? void 0 : d.text), 1)
+                G(L((d = i.hyperlinks) == null ? void 0 : d.text), 1)
               ];
             }),
             _: 1
           }, 512), [
-            [Y, (u = i.hyperlinks) == null ? void 0 : u.text]
+            [Y, (v = i.hyperlinks) == null ? void 0 : v.text]
           ]),
-          f("ul", null, [
-            (s(!0), l(P, null, B((r = i.hyperlinks) == null ? void 0 : r.data, (d) => (s(), l("li", {
+          p("ul", null, [
+            (a(!0), l(M, null, V((r = i.hyperlinks) == null ? void 0 : r.data, (d) => (a(), l("li", {
               key: d.text
             }, [
               C(Q, {
@@ -563,7 +627,7 @@ const Bt = /* @__PURE__ */ L(Ee, [["render", Ve], ["__scopeId", "data-v-adc8d02f
                 href: d.config.href
               }, {
                 default: T(() => [
-                  f("span", null, I(d.text), 1),
+                  p("span", null, L(d.text), 1),
                   C(Q, { variant: "icon" }, {
                     default: T(() => [
                       C(W, {
@@ -582,18 +646,18 @@ const Bt = /* @__PURE__ */ L(Ee, [["render", Ve], ["__scopeId", "data-v-adc8d02f
       ], 2);
     };
   }
-}), xe = /* @__PURE__ */ L(Xe, [["__scopeId", "data-v-bd9281e3"]]), et = { key: 0 }, tt = {
+}), ut = /* @__PURE__ */ k(ct, [["__scopeId", "data-v-bd9281e3"]]), pt = { key: 0 }, vt = {
   key: 1,
   id: "collapsible-sidebar-wrapper"
-}, at = { id: "collapsible-sidebar-content" }, ot = { id: "collapsible-sidebar" }, st = { class: "anchors" }, nt = /* @__PURE__ */ N({
+}, ft = { id: "collapsible-sidebar-content" }, ht = { id: "collapsible-sidebar" }, gt = { class: "anchors" }, mt = /* @__PURE__ */ N({
   __name: "SlpSideNavigationWithTree",
   props: {
     anchors: {},
     hyperlinks: {},
     alwaysExpanded: { type: Boolean }
   },
-  setup(p) {
-    const e = p, n = S([]), i = S(null), t = S([]), o = S(
+  setup(c) {
+    const e = c, n = I([]), i = I(null), t = I([]), s = I(
       e.anchors.data.map((h) => ({
         text: h.text,
         nodes: h.nodes,
@@ -605,59 +669,59 @@ const Bt = /* @__PURE__ */ L(Ee, [["render", Ve], ["__scopeId", "data-v-adc8d02f
           mobile: !1
         }
       }))
-    ), u = S(!1), r = S(!0);
+    ), v = I(!1), r = I(!0);
     let d = null;
-    const c = (h, g = []) => (h.forEach((b) => {
-      b.config.href && g.push(b.config.href), b.nodes && c(b.nodes, g);
-    }), g), a = (h) => {
-      const g = [], b = (z) => z.some((y, M) => (g.push(M), y.config.href === h || y.nodes && b(y.nodes) ? !0 : (g.pop(), !1)));
+    const u = (h, g = []) => (h.forEach((b) => {
+      b.config.href && g.push(b.config.href), b.nodes && u(b.nodes, g);
+    }), g), o = (h) => {
+      const g = [], b = (z) => z.some((y, P) => (g.push(P), y.config.href === h || y.nodes && b(y.nodes) ? !0 : (g.pop(), !1)));
       return b(e.anchors.data), g;
-    }, v = (h) => {
-      const g = t.value, b = i.value, z = (y, M, R) => {
-        const H = g[R] === M, j = y.config.href === b, F = {
+    }, f = (h) => {
+      const g = t.value, b = i.value, z = (y, P, R) => {
+        const H = g[R] === P, K = y.config.href === b, Z = {
           text: y.text,
           config: {
             href: y.config.href,
             dataGaName: y.config.dataGaName,
             dataGaLocation: y.config.dataGaLocation,
             // Highlight only the exact node (or first one on very first load)
-            isSelected: j || h && R === 0 && M === 0 && !b
+            isSelected: K || h && R === 0 && P === 0 && !b
           }
         };
-        return e.alwaysExpanded ? y.nodes && (F.nodes = y.nodes.map(
-          (Z, J) => z(Z, J, R + 1)
-        )) : H && y.nodes && (F.nodes = y.nodes.map(
-          (Z, J) => z(Z, J, R + 1)
-        )), F;
+        return e.alwaysExpanded ? y.nodes && (Z.nodes = y.nodes.map(
+          (F, J) => z(F, J, R + 1)
+        )) : H && y.nodes && (Z.nodes = y.nodes.map(
+          (F, J) => z(F, J, R + 1)
+        )), Z;
       };
-      return e.anchors.data.map((y, M) => z(y, M, 0));
-    }, k = (h) => {
+      return e.anchors.data.map((y, P) => z(y, P, 0));
+    }, w = (h) => {
       var b, z;
       let g = null;
       for (const y of h) {
         if (!y.isIntersecting) continue;
-        const M = ((b = y.boundingClientRect) == null ? void 0 : b.top) ?? Number.POSITIVE_INFINITY;
+        const P = ((b = y.boundingClientRect) == null ? void 0 : b.top) ?? Number.POSITIVE_INFINITY;
         if (!g) {
           g = y;
           continue;
         }
-        const R = ((z = g.boundingClientRect) == null ? void 0 : z.top) ?? Number.POSITIVE_INFINITY, H = M >= 0 && (R < 0 || M < R), j = !H && y.intersectionRatio > g.intersectionRatio;
-        (H || j) && (g = y);
+        const R = ((z = g.boundingClientRect) == null ? void 0 : z.top) ?? Number.POSITIVE_INFINITY, H = P >= 0 && (R < 0 || P < R), K = !H && y.intersectionRatio > g.intersectionRatio;
+        (H || K) && (g = y);
       }
       return g;
     }, _ = (h) => {
-      const g = k(h);
+      const g = w(h);
       if (g && g.isIntersecting) {
         const b = `#${g.target.id}`;
-        i.value = b, t.value = a(b), n.value = t.value.slice(), o.value = v(!1), r.value = !1;
+        i.value = b, t.value = o(b), n.value = t.value.slice(), s.value = f(!1), r.value = !1;
         return;
       }
-      r.value && !e.alwaysExpanded && (o.value = v(!0), r.value = !1);
+      r.value && !e.alwaysExpanded && (s.value = f(!0), r.value = !1);
     }, E = () => {
-      u.value = window.innerWidth < 768;
+      v.value = window.innerWidth < 768;
     }, O = () => {
-      const h = c(e.anchors.data), g = h[0] || null;
-      i.value = g, t.value = g ? a(g) : [], o.value = v(!0), r.value = !1;
+      const h = u(e.anchors.data), g = h[0] || null;
+      i.value = g, t.value = g ? o(g) : [], s.value = f(!0), r.value = !1;
       const b = (window.innerHeight - 120 - 48) * -1;
       d = new IntersectionObserver(_, {
         rootMargin: `-120px 0px ${b}px 0px`,
@@ -669,40 +733,40 @@ const Bt = /* @__PURE__ */ L(Ee, [["render", Ve], ["__scopeId", "data-v-adc8d02f
         });
       }, 0);
     };
-    return K(() => {
+    return j(() => {
       E(), window.addEventListener("resize", E), O();
-    }), ae(() => {
+    }), oe(() => {
       window.removeEventListener("resize", E), d && d.disconnect();
-    }), (h, g) => (s(), l("div", null, [
-      u.value ? (s(), l("div", et, [
-        C(xe, ce(ue({ anchors: h.anchors, hyperlinks: h.hyperlinks })), null, 16),
+    }), (h, g) => (a(), l("div", null, [
+      v.value ? (a(), l("div", pt, [
+        C(ut, ce(ue({ anchors: h.anchors, hyperlinks: h.hyperlinks })), null, 16),
         $(h.$slots, "default", {}, void 0, !0)
-      ])) : (s(), l("div", tt, [
-        f("div", at, [
+      ])) : (a(), l("div", vt, [
+        p("div", ft, [
           $(h.$slots, "default", {}, void 0, !0)
         ]),
-        f("nav", ot, [
+        p("nav", ht, [
           $(h.$slots, "header", {}, void 0, !0),
-          f("div", st, [
-            h.anchors.text ? (s(), D(q, {
+          p("div", gt, [
+            h.anchors.text ? (a(), D(q, {
               key: 0,
               tag: "div",
               variant: "body3-bold",
               class: "nav-heading"
             }, {
               default: T(() => [
-                G(I(h.anchors.text), 1)
+                G(L(h.anchors.text), 1)
               ]),
               _: 1
-            })) : V("", !0),
-            C(re, { nodes: o.value }, null, 8, ["nodes"])
+            })) : B("", !0),
+            C(re, { nodes: s.value }, null, 8, ["nodes"])
           ]),
           $(h.$slots, "footer", {}, void 0, !0)
         ])
       ]))
     ]));
   }
-}), Rt = /* @__PURE__ */ L(nt, [["__scopeId", "data-v-32a730be"]]), lt = ["id", "data-tooltip-open", "aria-describedby"], it = { class: "slp-tooltip__wrapper" }, rt = ["id", "data-ga-features", "data-ga-features-sub", "data-ga-features-sub-card", "data-ga-name", "data-ga-location", "href"], dt = ["id"], ct = ["id", "data-tooltip-open", "aria-describedby"], ut = { class: "slp-tooltip__wrapper" }, pt = ["id"], vt = ["data-ga-features", "data-ga-features-sub", "data-ga-features-sub-card", "data-ga-name", "data-ga-location", "href"], ft = ["id"], ht = /* @__PURE__ */ N({
+}), Jt = /* @__PURE__ */ k(mt, [["__scopeId", "data-v-32a730be"]]), _t = ["id", "data-tooltip-open", "aria-describedby"], bt = { class: "slp-tooltip__wrapper" }, yt = ["id", "data-ga-features", "data-ga-features-sub", "data-ga-features-sub-card", "data-ga-name", "data-ga-location", "href"], $t = ["id"], kt = ["id", "data-tooltip-open", "aria-describedby"], wt = { class: "slp-tooltip__wrapper" }, St = ["id"], It = ["data-ga-features", "data-ga-features-sub", "data-ga-features-sub-card", "data-ga-name", "data-ga-location", "href"], Lt = ["id"], Ct = /* @__PURE__ */ N({
   __name: "SlpTooltip",
   props: {
     text: { default: "" },
@@ -712,145 +776,145 @@ const Bt = /* @__PURE__ */ L(Ee, [["render", Ve], ["__scopeId", "data-v-adc8d02f
     id: { default: "" },
     dataProperties: { default: null }
   },
-  setup(p) {
-    const e = p, n = S(!1), i = S(""), t = S(""), o = S(""), u = (a) => {
-      e.mode === "hover" && (n.value = a.type === "mouseenter");
+  setup(c) {
+    const e = c, n = I(!1), i = I(""), t = I(""), s = I(""), v = (o) => {
+      e.mode === "hover" && (n.value = o.type === "mouseenter");
     }, r = () => {
-      e.mode === "click" ? (c(), n.value = !n.value) : n.value = !1;
-    }, d = (a) => {
-      a.target.id !== e.id && (n.value = !1);
-    }, c = () => {
-      document.querySelectorAll('[data-tooltip-open="true"]').forEach((v) => {
-        v.setAttribute("data-tooltip-open", "false");
+      e.mode === "click" ? (u(), n.value = !n.value) : n.value = !1;
+    }, d = (o) => {
+      o.target.id !== e.id && (n.value = !1);
+    }, u = () => {
+      document.querySelectorAll('[data-tooltip-open="true"]').forEach((f) => {
+        f.setAttribute("data-tooltip-open", "false");
       });
     };
-    return K(() => {
+    return j(() => {
       if (e.mode === "click" && document.addEventListener("click", d), e.text) {
-        const a = e.text.match(/\[(.*?)\]/), v = e.text.match(/\[.*?\]\((.*?)\)/);
-        i.value = a ? a[1] : "", t.value = v ? v[1] : "", o.value = e.text.replace(`(${t.value})`, "").replace(`[${i.value}]`, "").trim();
+        const o = e.text.match(/\[(.*?)\]/), f = e.text.match(/\[.*?\]\((.*?)\)/);
+        i.value = o ? o[1] : "", t.value = f ? f[1] : "", s.value = e.text.replace(`(${t.value})`, "").replace(`[${i.value}]`, "").trim();
       }
-    }), pe(n, (a) => {
+    }), pe(n, (o) => {
       if (e.mode === "click" && e.id) {
-        const v = document.getElementById(e.id);
-        v && v.setAttribute("data-tooltip-open", a.toString());
+        const f = document.getElementById(e.id);
+        f && f.setAttribute("data-tooltip-open", o.toString());
       }
-    }), oe(() => {
+    }), ae(() => {
       document.removeEventListener("click", d);
-    }), (a, v) => {
-      var k, _, E, O, h, g;
-      return a.mode === "hover" ? (s(), l("div", {
+    }), (o, f) => {
+      var w, _, E, O, h, g;
+      return o.mode === "hover" ? (a(), l("div", {
         key: 0,
-        id: a.id,
+        id: o.id,
         "data-tooltip-open": n.value,
         "aria-label": "Click to open tooltip with more information.",
-        "aria-describedby": `${a.id}-content`,
+        "aria-describedby": `${o.id}-content`,
         class: "slp-tooltip",
-        onMouseenter: u,
-        onMouseleave: u,
+        onMouseenter: v,
+        onMouseleave: v,
         onClick: r
       }, [
-        f("div", it, [
-          $(a.$slots, "default", {}, void 0, !0),
-          n.value ? (s(), l("div", {
+        p("div", bt, [
+          $(o.$slots, "default", {}, void 0, !0),
+          n.value ? (a(), l("div", {
             key: 0,
-            class: m(["slp-tooltip__content", `${a.position} ${a.mode === "hover" ? "hover-mode" : ""}`])
+            class: m(["slp-tooltip__content", `${o.position} ${o.mode === "hover" ? "hover-mode" : ""}`])
           }, [
-            G(I(o.value) + " ", 1),
-            a.text ? (s(), l("a", {
+            G(L(s.value) + " ", 1),
+            o.text ? (a(), l("a", {
               key: 0,
-              id: `${a.id}-content`,
-              "data-ga-features": a.dataProperties && a.dataProperties.features.toLowerCase() || null,
-              "data-ga-features-sub": (k = a.dataProperties) == null ? void 0 : k.sub,
-              "data-ga-features-sub-card": (_ = a.dataProperties) == null ? void 0 : _.card,
-              "data-ga-name": (E = a.dataProperties) == null ? void 0 : E.plan,
-              "data-ga-location": a.dataProperties ? "features content" : null,
+              id: `${o.id}-content`,
+              "data-ga-features": o.dataProperties && o.dataProperties.features.toLowerCase() || null,
+              "data-ga-features-sub": (w = o.dataProperties) == null ? void 0 : w.sub,
+              "data-ga-features-sub-card": (_ = o.dataProperties) == null ? void 0 : _.card,
+              "data-ga-name": (E = o.dataProperties) == null ? void 0 : E.plan,
+              "data-ga-location": o.dataProperties ? "features content" : null,
               role: "tooltip",
               href: t.value
-            }, I(i.value), 9, rt)) : a.list ? (s(), l("ul", {
+            }, L(i.value), 9, yt)) : o.list ? (a(), l("ul", {
               key: 1,
-              id: `${a.id}-content`,
+              id: `${o.id}-content`,
               role: "tooltip",
               class: "slp-tooltip__list"
             }, [
-              (s(!0), l(P, null, B(a.list, (b) => (s(), l("li", {
+              (a(!0), l(M, null, V(o.list, (b) => (a(), l("li", {
                 key: b.text
-              }, I(b.text), 1))), 128))
-            ], 8, dt)) : V("", !0)
-          ], 2)) : V("", !0)
+              }, L(b.text), 1))), 128))
+            ], 8, $t)) : B("", !0)
+          ], 2)) : B("", !0)
         ])
-      ], 40, lt)) : (s(), l("button", {
+      ], 40, _t)) : (a(), l("button", {
         key: 1,
-        id: a.id,
+        id: o.id,
         "data-tooltip-open": n.value,
         "aria-label": "Click to open tooltip with more information.",
-        "aria-describedby": `${a.id}-content`,
-        class: m(`slp-tooltip ${a.mode === "click" ? "button-mode" : ""}`),
+        "aria-describedby": `${o.id}-content`,
+        class: m(`slp-tooltip ${o.mode === "click" ? "button-mode" : ""}`),
         onClick: r
       }, [
-        f("div", ut, [
-          $(a.$slots, "default", {}, void 0, !0),
-          n.value ? (s(), l("div", {
+        p("div", wt, [
+          $(o.$slots, "default", {}, void 0, !0),
+          n.value ? (a(), l("div", {
             key: 0,
-            class: m(["slp-tooltip__content", `${a.position}`])
+            class: m(["slp-tooltip__content", `${o.position}`])
           }, [
-            a.text ? (s(), l("span", {
+            o.text ? (a(), l("span", {
               key: 0,
-              id: `${a.id}-content`,
+              id: `${o.id}-content`,
               role: "tooltip"
             }, [
-              G(I(o.value) + " ", 1),
-              i.value && t.value ? (s(), l("a", {
+              G(L(s.value) + " ", 1),
+              i.value && t.value ? (a(), l("a", {
                 key: 0,
-                "data-ga-features": a.dataProperties && a.dataProperties.features.toLowerCase() || null,
-                "data-ga-features-sub": (O = a.dataProperties) == null ? void 0 : O.sub,
-                "data-ga-features-sub-card": (h = a.dataProperties) == null ? void 0 : h.card,
-                "data-ga-name": (g = a.dataProperties) == null ? void 0 : g.plan,
-                "data-ga-location": a.dataProperties ? "features content" : null,
+                "data-ga-features": o.dataProperties && o.dataProperties.features.toLowerCase() || null,
+                "data-ga-features-sub": (O = o.dataProperties) == null ? void 0 : O.sub,
+                "data-ga-features-sub-card": (h = o.dataProperties) == null ? void 0 : h.card,
+                "data-ga-name": (g = o.dataProperties) == null ? void 0 : g.plan,
+                "data-ga-location": o.dataProperties ? "features content" : null,
                 href: t.value
-              }, I(i.value), 9, vt)) : V("", !0)
-            ], 8, pt)) : (s(), l("ul", {
+              }, L(i.value), 9, It)) : B("", !0)
+            ], 8, St)) : (a(), l("ul", {
               key: 1,
-              id: `${a.id}-content`,
+              id: `${o.id}-content`,
               role: "tooltip",
               class: "slp-tooltip__list"
             }, [
-              (s(!0), l(P, null, B(a.list, (b) => (s(), l("li", {
+              (a(!0), l(M, null, V(o.list, (b) => (a(), l("li", {
                 key: b.text
-              }, I(b.text), 1))), 128))
-            ], 8, ft))
-          ], 2)) : V("", !0)
+              }, L(b.text), 1))), 128))
+            ], 8, Lt))
+          ], 2)) : B("", !0)
         ])
-      ], 10, ct));
+      ], 10, kt));
     };
   }
-}), gt = /* @__PURE__ */ L(ht, [["__scopeId", "data-v-0412a63f"]]), mt = {
+}), Nt = /* @__PURE__ */ k(Ct, [["__scopeId", "data-v-0412a63f"]]), Tt = {
   key: 0,
   class: "breadcrumb",
   vocab: "https://schema.org/",
   typeof: "BreadcrumbList"
-}, _t = ["onMouseenter", "onMouseleave"], bt = ["data-ga-name", "data-ga-location", "href"], yt = {
+}, Et = ["onMouseenter", "onMouseleave"], zt = ["data-ga-name", "data-ga-location", "href"], Bt = {
   key: 0,
   class: "breadcrumb__chevron"
-}, $t = ["content"], kt = {
+}, Mt = ["content"], Vt = {
   key: 1,
   class: "breadcrumb",
   vocab: "https://schema.org/",
   typeof: "BreadcrumbList"
-}, wt = ["href", "data-ga-name", "data-ga-location"], St = ["content"], It = /* @__PURE__ */ N({
+}, Pt = ["href", "data-ga-name", "data-ga-location"], Gt = ["content"], Ot = /* @__PURE__ */ N({
   __name: "SlpBreadcrumb",
   props: {
     crumbs: { default: () => [] },
     router: {}
   },
-  setup(p) {
-    const e = p, n = S(e.crumbs), i = S(!1), t = (r) => {
+  setup(c) {
+    const e = c, n = I(e.crumbs), i = I(!1), t = (r) => {
       const d = r.split(" ");
-      for (let c = 0; c < d.length; c++)
-        d[c] = d[c][0].toUpperCase() + d[c].substr(1);
+      for (let u = 0; u < d.length; u++)
+        d[u] = d[u][0].toUpperCase() + d[u].substr(1);
       return d.join(" ");
-    }, o = () => {
+    }, s = () => {
       i.value = window.innerWidth < 768;
-    }, u = (r) => {
+    }, v = (r) => {
       n.value[r] && (n.value[r] = {
         ...n.value[r],
         hover: !n.value[r].hover
@@ -858,45 +922,45 @@ const Bt = /* @__PURE__ */ L(Ee, [["render", Ve], ["__scopeId", "data-v-adc8d02f
     };
     return ve(() => {
       if (e.router) {
-        const r = e.router.currentRoute.path, d = r.startsWith("/") ? r.substring(1).split("/") : r.split("/"), c = [];
-        let a = "";
-        d.forEach((v) => {
-          a = `${a}/${v}`;
-          const k = e.router.match(a);
-          k.params.slug !== null && v.length && c.push({
-            title: t(v.replace(/-/g, " ")),
+        const r = e.router.currentRoute.path, d = r.startsWith("/") ? r.substring(1).split("/") : r.split("/"), u = [];
+        let o = "";
+        d.forEach((f) => {
+          o = `${o}/${f}`;
+          const w = e.router.match(o);
+          w.params.slug !== null && f.length && u.push({
+            title: t(f.replace(/-/g, " ")),
             hover: !1,
-            ...k
+            ...w
           });
-        }), n.value = c;
+        }), n.value = u;
       }
-    }), K(() => {
-      o(), window.addEventListener("resize", o);
-    }), oe(() => {
-      window.removeEventListener("resize", o);
-    }), (r, d) => n.value && !i.value ? (s(), l("ol", mt, [
-      (s(!0), l(P, null, B(n.value, (c, a) => (s(), l("li", {
-        key: c.title,
+    }), j(() => {
+      s(), window.addEventListener("resize", s);
+    }), ae(() => {
+      window.removeEventListener("resize", s);
+    }), (r, d) => n.value && !i.value ? (a(), l("ol", Tt, [
+      (a(!0), l(M, null, V(n.value, (u, o) => (a(), l("li", {
+        key: u.title,
         class: m(["breadcrumb__crumb", {
-          "breadcrumb__crumb--disabled": a === n.value.length - 1
+          "breadcrumb__crumb--disabled": o === n.value.length - 1
         }]),
         property: "itemListElement",
         typeof: "ListItem",
-        onMouseenter: (v) => u(a),
-        onMouseleave: (v) => u(a)
+        onMouseenter: (f) => v(o),
+        onMouseleave: (f) => v(o)
       }, [
-        C(gt, {
-          text: c.title,
+        C(Nt, {
+          text: u.title,
           class: "breadcrumb__crumb__tooltip",
           position: "top"
         }, {
           default: T(() => [
-            f("a", {
+            p("a", {
               property: "item",
               typeof: "WebPage",
-              "data-ga-name": c.dataGaName || c.title.toLowerCase(),
-              "data-ga-location": c.dataGaLocation || "breadcrumb",
-              href: a !== n.value.length - 1 ? c.path : void 0
+              "data-ga-name": u.dataGaName || u.title.toLowerCase(),
+              "data-ga-location": u.dataGaLocation || "breadcrumb",
+              href: o !== n.value.length - 1 ? u.path : void 0
             }, [
               C(q, {
                 tag: "span",
@@ -904,46 +968,46 @@ const Bt = /* @__PURE__ */ L(Ee, [["render", Ve], ["__scopeId", "data-v-adc8d02f
                 property: "name"
               }, {
                 default: T(() => [
-                  G(I(c.title.length > 18 ? c.title.substring(0, 18).concat("...") : c.title), 1)
+                  G(L(u.title.length > 18 ? u.title.substring(0, 18).concat("...") : u.title), 1)
                 ]),
                 _: 2
               }, 1024)
-            ], 8, bt)
+            ], 8, zt)
           ]),
           _: 2
         }, 1032, ["text"]),
-        a !== n.value.length - 1 ? (s(), l("span", yt, [
+        o !== n.value.length - 1 ? (a(), l("span", Bt, [
           C(W, {
             color: "accent-500",
             size: "xs",
             icon: A(le)
           }, null, 8, ["icon"])
-        ])) : V("", !0),
-        f("meta", {
+        ])) : B("", !0),
+        p("meta", {
           property: "position",
-          content: a + 1
-        }, null, 8, $t)
-      ], 42, _t))), 128))
-    ])) : n.value && i.value ? (s(), l("ol", kt, [
-      (s(!0), l(P, null, B(n.value, (c) => (s(), l("li", {
-        key: c.title,
+          content: o + 1
+        }, null, 8, Mt)
+      ], 42, Et))), 128))
+    ])) : n.value && i.value ? (a(), l("ol", Vt, [
+      (a(!0), l(M, null, V(n.value, (u) => (a(), l("li", {
+        key: u.title,
         class: "breadcrumb__crumb breadcrumb__crumb--mobile",
         property: "itemListElement",
         typeof: "ListItem"
       }, [
-        f("a", {
+        p("a", {
           class: "slp-flex slp-align-items-center",
           href: n.value[n.value.length - 2].path,
-          "data-ga-name": c.dataGaName || c.title.toLowerCase(),
-          "data-ga-location": c.dataGaLocation || "breadcrumb",
+          "data-ga-name": u.dataGaName || u.title.toLowerCase(),
+          "data-ga-location": u.dataGaLocation || "breadcrumb",
           property: "item",
           typeof: "WebPage"
         }, [
-          f("span", null, [
+          p("span", null, [
             C(W, {
               color: "accent-500",
               size: "xs",
-              icon: A(he)
+              icon: A(De)
             }, null, 8, ["icon"])
           ]),
           C(q, {
@@ -953,22 +1017,22 @@ const Bt = /* @__PURE__ */ L(Ee, [["render", Ve], ["__scopeId", "data-v-adc8d02f
             property: "name"
           }, {
             default: T(() => [
-              G(I(n.value[n.value.length - 2].title), 1)
+              G(L(n.value[n.value.length - 2].title), 1)
             ]),
             _: 1
           })
-        ], 8, wt),
-        f("meta", {
+        ], 8, Pt),
+        p("meta", {
           property: "position",
           content: n.value.length - 1
-        }, null, 8, St)
+        }, null, 8, Gt)
       ]))), 128))
-    ])) : V("", !0);
+    ])) : B("", !0);
   }
-}), At = /* @__PURE__ */ L(It, [["__scopeId", "data-v-6894f4b8"]]), Ct = ["value"], Lt = {
+}), Yt = /* @__PURE__ */ k(Ot, [["__scopeId", "data-v-6894f4b8"]]), Rt = ["value"], At = {
   key: 1,
   class: "dropdown"
-}, Nt = /* @__PURE__ */ N({
+}, Dt = /* @__PURE__ */ N({
   __name: "SlpDropdown",
   props: {
     modelValue: {},
@@ -977,55 +1041,55 @@ const Bt = /* @__PURE__ */ L(Ee, [["render", Ve], ["__scopeId", "data-v-adc8d02f
     valueKey: {}
   },
   emits: ["update:modelValue"],
-  setup(p, { emit: e }) {
-    const n = p, i = e, t = (r, d) => {
+  setup(c, { emit: e }) {
+    const n = c, i = e, t = (r, d) => {
       if (typeof r == "object" && r !== null) {
         if (!d) {
-          const v = Object.keys(r)[0];
-          return r[v];
+          const f = Object.keys(r)[0];
+          return r[f];
         }
-        const c = d.split(".");
-        let a = r;
-        for (const v of c)
-          a = a == null ? void 0 : a[v];
-        return a;
+        const u = d.split(".");
+        let o = r;
+        for (const f of u)
+          o = o == null ? void 0 : o[f];
+        return o;
       }
       return r;
-    }, o = w(() => n.options.length > 0 ? t(n.options[0], n.valueKey) : ""), u = w({
+    }, s = S(() => n.options.length > 0 ? t(n.options[0], n.valueKey) : ""), v = S({
       // Getter: Called when the template reads selectedValue
       // Returns the current modelValue from parent (or empty string if undefined)
-      get: () => n.modelValue ?? o.value,
+      get: () => n.modelValue ?? s.value,
       // Setter: Called when the select's v-model updates selectedValue
       // Emits the new value to the parent component
       set: (r) => i("update:modelValue", r)
     });
     return (r, d) => {
-      var c;
-      return (c = r.options) != null && c.length ? U((s(), l("select", {
+      var u;
+      return (u = r.options) != null && u.length ? U((a(), l("select", {
         key: 0,
-        "onUpdate:modelValue": d[0] || (d[0] = (a) => u.value = a),
+        "onUpdate:modelValue": d[0] || (d[0] = (o) => v.value = o),
         class: "dropdown"
       }, [
-        (s(!0), l(P, null, B(r.options, (a, v) => (s(), l("option", {
-          key: `${t(a, r.valueKey)}-${v}`,
-          value: t(a, r.valueKey)
-        }, I(t(a, r.labelKey)), 9, Ct))), 128))
+        (a(!0), l(M, null, V(r.options, (o, f) => (a(), l("option", {
+          key: `${t(o, r.valueKey)}-${f}`,
+          value: t(o, r.valueKey)
+        }, L(t(o, r.labelKey)), 9, Rt))), 128))
       ], 512)), [
-        [fe, u.value]
-      ]) : (s(), l("div", Lt, d[1] || (d[1] = [
-        f("p", null, "No options available", -1)
+        [fe, v.value]
+      ]) : (a(), l("div", At, d[1] || (d[1] = [
+        p("p", null, "No options available", -1)
       ])));
     };
   }
-}), Dt = /* @__PURE__ */ L(Nt, [["__scopeId", "data-v-4a5d0657"]]), Tt = ["id"], Et = /* @__PURE__ */ N({
+}), Qt = /* @__PURE__ */ k(Dt, [["__scopeId", "data-v-4a5d0657"]]), Wt = ["id"], qt = /* @__PURE__ */ N({
   __name: "SlpSection",
   props: {
     backgroundColor: {
       type: String,
       required: !1,
-      validator(p) {
-        const e = /^#([A-Fa-f0-9]{3}){1,2}$/.test(p), n = /^\$color-[a-zA-Z0-9-]+$/.test(p);
-        return p ? e || n : !0;
+      validator(c) {
+        const e = /^#([A-Fa-f0-9]{3}){1,2}$/.test(c), n = /^\$color-[a-zA-Z0-9-]+$/.test(c);
+        return c ? e || n : !0;
       }
     },
     id: {
@@ -1033,42 +1097,42 @@ const Bt = /* @__PURE__ */ L(Ee, [["render", Ve], ["__scopeId", "data-v-adc8d02f
       required: !1
     }
   },
-  setup(p) {
-    const e = p, n = w(() => {
+  setup(c) {
+    const e = c, n = S(() => {
       var t;
       return !e.backgroundColor || (t = e.backgroundColor) != null && t.startsWith("$") ? {} : { backgroundColor: e.backgroundColor };
-    }), i = w(() => {
-      var t, o;
-      return (t = e.backgroundColor) != null && t.startsWith("$") ? `slp-background-${(o = e.backgroundColor) == null ? void 0 : o.slice(1)}` : null;
+    }), i = S(() => {
+      var t, s;
+      return (t = e.backgroundColor) != null && t.startsWith("$") ? `slp-background-${(s = e.backgroundColor) == null ? void 0 : s.slice(1)}` : null;
     });
-    return (t, o) => (s(), l("section", {
+    return (t, s) => (a(), l("section", {
       style: te(n.value),
       class: m(i.value),
-      id: p.id || void 0
+      id: c.id || void 0
     }, [
-      C(ie, null, {
+      C(ne, null, {
         default: T(() => [
           $(t.$slots, "default", {}, void 0, !0)
         ]),
         _: 3
       })
-    ], 14, Tt));
+    ], 14, Wt));
   }
-}), Wt = /* @__PURE__ */ L(Et, [["__scopeId", "data-v-2b3ad016"]]);
+}), Xt = /* @__PURE__ */ k(qt, [["__scopeId", "data-v-2b3ad016"]]);
 export {
-  At as SlpBreadcrumb,
+  Yt as SlpBreadcrumb,
   Q as SlpButton,
-  Pt as SlpColumn,
-  ie as SlpContainer,
-  Dt as SlpDropdown,
+  Ut as SlpColumn,
+  ne as SlpContainer,
+  Qt as SlpDropdown,
   W as SlpIcon,
-  Ot as SlpLoader,
-  He as SlpRadioButton,
-  Gt as SlpRadioButtonGroup,
-  Bt as SlpRow,
-  Wt as SlpSection,
-  Mt as SlpSideNavigation,
-  Rt as SlpSideNavigationWithTree,
-  gt as SlpTooltip,
+  Ft as SlpLoader,
+  tt as SlpRadioButton,
+  Zt as SlpRadioButtonGroup,
+  jt as SlpRow,
+  Xt as SlpSection,
+  Kt as SlpSideNavigation,
+  Jt as SlpSideNavigationWithTree,
+  Nt as SlpTooltip,
   q as SlpTypography
 };