slippers-ui 3.1.52 → 3.2.0

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 L, unref as A, Fragment as M, renderList as V, withModifiers as x, toDisplayString as C, 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(u) {
+    const e = u, s = S(() => e.disabled ?? !1), r = S(() => e.variant ?? "primary");
+    S(() => e.href ?? "");
+    const t = S(() => {
+      let n = [`slp-btn-${r.value}`];
+      return s.value && n.push("slp-btn-disabled"), n.join(" ");
     });
-    return (o, u) => e.href ? (s(), l("a", X({ key: 0 }, o.$attrs, {
+    return (n, v) => e.href ? (a(), l("a", X({ key: 0 }, n.$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, {
+      $(n.$slots, "default", {}, void 0, !0)
+    ], 16, he)) : (a(), l("button", X({ key: 1 }, n.$attrs, {
       class: ["slp-btn", t.value],
       type: "button"
     }), [
-      $(o.$slots, "default", {}, void 0, !0)
+      $(n.$slots, "default", {}, void 0, !0)
     ], 16));
   }
-}), Q = /* @__PURE__ */ L(me, [["__scopeId", "data-v-c6fd7cb9"]]), _e = /* @__PURE__ */ N({
+}), k = (u, e) => {
+  const s = u.__vccOpts || u;
+  for (const [r, t] of e)
+    s[r] = t;
+  return s;
+}, 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(u) {
+    const e = u, s = S(() => e.cols ?? null), r = S(() => e.size ?? "md"), t = S(() => s.value ? `slp-col-${r.value}-${s.value}` : `slp-col-${r.value}`);
+    return (n, v) => (a(), l("div", {
       class: m(t.value)
     }, [
-      $(o.$slots, "default", {}, void 0, !0)
+      $(n.$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 = {
+}, Ce = {
   key: 8,
   class: "slp-partial-grey-background"
-}, Ne = /* @__PURE__ */ N({
+}, Le = /* @__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(u) {
+    const e = u, s = S(() => e.fluid ?? !1), r = S(() => e.variant ?? "white"), t = S(() => s.value ? "fluid" : "");
+    return (n, v) => r.value === "light-purple-100" ? (a(), l("div", _e, [
+      p("div", {
         class: m(["slp-container", t.value])
       }, [
-        $(o.$slots, "default", {}, void 0, !0)
+        $(n.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "grey-100" ? (s(), l("div", ye, [
-      f("div", {
+    ])) : r.value === "grey-100" ? (a(), l("div", be, [
+      p("div", {
         class: m(["slp-container", t.value])
       }, [
-        $(o.$slots, "default", {}, void 0, !0)
+        $(n.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "gradient" ? (s(), l("div", $e, [
-      f("div", {
+    ])) : r.value === "gradient" ? (a(), l("div", ye, [
+      p("div", {
         class: m(["slp-container", t.value])
       }, [
-        $(o.$slots, "default", {}, void 0, !0)
+        $(n.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "gradient-full" ? (s(), l("div", ke, [
-      f("div", {
+    ])) : r.value === "gradient-full" ? (a(), l("div", $e, [
+      p("div", {
         class: m(["slp-container", t.value])
       }, [
-        $(o.$slots, "default", {}, void 0, !0)
+        $(n.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "charcoal-100" ? (s(), l("div", we, [
-      f("div", {
+    ])) : r.value === "charcoal-100" ? (a(), l("div", ke, [
+      p("div", {
         class: m(["slp-container", t.value])
       }, [
-        $(o.$slots, "default", {}, void 0, !0)
+        $(n.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "charcoal-75" ? (s(), l("div", Se, [
-      f("div", {
+    ])) : r.value === "charcoal-75" ? (a(), l("div", we, [
+      p("div", {
         class: m(["slp-container", t.value])
       }, [
-        $(o.$slots, "default", {}, void 0, !0)
+        $(n.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "grey-50" ? (s(), l("div", Ie, [
-      f("div", {
+    ])) : r.value === "grey-50" ? (a(), l("div", Se, [
+      p("div", {
         class: m(["slp-container", t.value])
       }, [
-        $(o.$slots, "default", {}, void 0, !0)
+        $(n.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "white-75" ? (s(), l("div", Ce, [
-      f("div", {
+    ])) : r.value === "white-75" ? (a(), l("div", Ie, [
+      p("div", {
         class: m(["slp-container", t.value])
       }, [
-        $(o.$slots, "default", {}, void 0, !0)
+        $(n.$slots, "default", {}, void 0, !0)
       ], 2)
-    ])) : i.value === "grey-75" ? (s(), l("div", Le, [
-      f("div", {
+    ])) : r.value === "grey-75" ? (a(), l("div", Ce, [
+      p("div", {
         class: m(["slp-container", t.value])
       }, [
-        $(o.$slots, "default", {}, void 0, !0)
+        $(n.$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)
+      $(n.$slots, "default", {}, void 0, !0)
     ], 2));
   }
-}), ie = /* @__PURE__ */ L(Ne, [["__scopeId", "data-v-e594efe8"]]), Te = /* @__PURE__ */ N({
+}), se = /* @__PURE__ */ k(Le, [["__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(u) {
+    const e = u, s = 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;
+    }), r = S(() => {
+      var n;
       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 ((n = e.color) != null && n.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), {
-        class: m(["slp-icon", n.value]),
-        style: te(i.value),
+    return (t, n) => {
+      var v, i;
+      return a(), D(ee(u.icon), {
+        class: m(["slp-icon", s.value]),
+        style: te(r.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": ((i = (v = u.icon) == null ? void 0 : v.__docgenInfo) == null ? void 0 : i.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(u, e) {
+  return a(), l("div", Ee, [
+    $(u.$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(u) {
     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)
+    ], s = ["span", "h1", "h2", "h3", "h4", "h5", "p", "div"], r = u, t = S(() => e.includes(r.variant || "") ? r.variant : "body1"), n = S(() => s.includes(r.tag || "") ? r.tag : "span"), v = S(() => `slp-text-${t.value}`);
+    return (i, d) => (a(), D(ee(n.value), {
+      class: m(v.value)
     }, {
       default: T(() => [
-        $(r.$slots, "default", {}, void 0, !0),
-        t.value === "arrow" ? (s(), l("span", Pe, "→")) : V("", !0)
+        $(i.$slots, "default", {}, void 0, !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(u, 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 ne = /* @__PURE__ */ k(Ve, [["render", Ge]]), Oe = {}, Re = {
+  viewBox: "0 0 16 16",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+function Ae(u, 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(u, 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(u, 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 re = /* @__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 = { class: "side-navigation" }, Ye = ["data-ga-name", "onClick"], Qe = /* @__PURE__ */ N({
   __name: "SlpSideNavigation",
   props: {
     position: {
@@ -245,109 +309,102 @@ const Bt = /* @__PURE__ */ L(Ee, [["render", Ve], ["__scopeId", "data-v-adc8d02f
     navigationItems: {
       type: Array,
       required: !0
-    },
-    navigationLabel: {
-      type: String,
-      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(u) {
+    const e = u, s = I(null), r = (f) => {
+      s.value && !s.value.contains(f.target) && (i.value = !1);
+    }, t = I(null), n = I(null);
+    let v = null;
+    const i = I(!1), d = I(!0), c = (f) => {
+      window.location.hash = f, i.value = !1;
+    }, o = () => {
+      if (!n.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(() => {
-      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", {
+    return j(() => {
+      document.addEventListener("click", r), window.addEventListener("load", () => {
+        o();
+      }), document.readyState === "complete" && o();
+    }), oe(() => {
+      v && v.disconnect(), document.removeEventListener("click", r);
+    }), (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,
+        ref: s,
         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] = (_) => i.value = !i.value)
         }, [
-          k[1] || (k[1] = f("span", null, "Jump to a section", -1)),
-          C(W, {
-            icon: r.value ? A(se) : A(ne),
+          w[1] || (w[1] = p("span", null, "Jump to a section", -1)),
+          L(W, {
+            icon: i.value ? A(re) : A(ne),
             color: "black",
             size: "sm"
           }, null, 8, ["icon"])
         ]),
-        r.value ? (s(), l("ul", Me, [
-          (s(!0), l(P, null, B(e.navigationItems, (_) => (s(), l("li", {
+        i.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)
+            }, C(_.text), 9, Fe)
           ]))), 128))
-        ])) : V("", !0)
+        ])) : B("", !0)
       ], 512),
-      f("nav", {
-        class: "side-navigation",
-        "aria-label": p.navigationLabel
-      }, [
-        $(v.$slots, "navigation-header", {}, void 0, !0),
-        f("ul", null, [
-          (s(!0), l(P, null, B(e.navigationItems, (_) => (s(), l("li", {
+      p("nav", Je, [
+        $(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)
+            }, C(_.text), 11, Ye)
           ]))), 128))
         ])
-      ], 8, Oe),
-      f("div", {
+      ]),
+      p("div", {
         ref_key: "slotContentRef",
-        ref: o,
+        ref: n,
         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-1bd8ef5a"]]), Xe = ["for"], xe = ["name", "value", "id", "checked", "disabled"], et = /* @__PURE__ */ N({
   __name: "SlpRadioButton",
   props: {
     option: {},
@@ -355,32 +412,32 @@ const Bt = /* @__PURE__ */ L(Ee, [["render", Ve], ["__scopeId", "data-v-adc8d02f
     config: {}
   },
   emits: ["update:modelValue"],
-  setup(p, { emit: e }) {
-    const n = e, i = (t) => {
-      const o = t.target;
-      n("update:modelValue", o.value);
+  setup(u, { emit: e }) {
+    const s = e, r = (t) => {
+      const n = t.target;
+      s("update:modelValue", n.value);
     };
-    return (t, o) => {
-      var u, r, d;
-      return s(), l("label", {
+    return (t, n) => {
+      var v, i, 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(C(t.option) + " ", 1),
+        p("input", {
           type: "radio",
           name: t.name,
           value: t.option,
           id: t.option,
-          onInput: i,
-          checked: (r = t.config) == null ? void 0 : r.checked,
+          onInput: r,
+          checked: (i = t.config) == null ? void 0 : i.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),
+        n[0] || (n[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 +448,29 @@ const Bt = /* @__PURE__ */ L(Ee, [["render", Ve], ["__scopeId", "data-v-adc8d02f
     } }
   },
   emits: ["update:modelValue"],
-  setup(p, { emit: e }) {
-    const n = {
+  setup(u, { emit: e }) {
+    const s = {
       VERTICAL: "vertical",
       HORIZONTAL: "horizontal"
-    }, i = e, t = (o) => {
-      i("update:modelValue", o);
+    }, r = e, t = (n) => {
+      r("update:modelValue", n);
     };
-    return (o, u) => {
-      var r, d;
-      return s(), D(ie, {
+    return (n, v) => {
+      var i, d;
+      return a(), D(se, {
         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": ((i = n.config) == null ? void 0 : i.orientation) === s.VERTICAL,
+          "slp-radio-group--horizontal": ((d = n.config) == null ? void 0 : d.orientation) === s.HORIZONTAL
         }])
       }, {
         default: T(() => [
-          (s(!0), l(P, null, B(o.options, (c) => (s(), D(He, {
+          (a(!0), l(M, null, V(n.options, (c) => (a(), D(tt, {
             key: c.value,
             option: c.value,
-            name: o.name,
+            name: n.name,
             config: {
               ...c.config,
-              checked: c.value === o.modelValue
+              checked: c.value === n.modelValue
             },
             "onUpdate:modelValue": t
           }, null, 8, ["option", "name", "config"]))), 128))
@@ -422,26 +479,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 = {
+}, st = {
   key: 1,
   class: "slp-loading-linear"
-}, Fe = /* @__PURE__ */ N({
+}, nt = /* @__PURE__ */ N({
   name: "SlpLoader",
   __name: "SlpLoader",
   props: {
     config: {}
   },
-  setup(p) {
-    const e = p;
-    return (n, i) => {
+  setup(u) {
+    const e = u;
+    return (s, r) => {
       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", st));
     };
   }
-}), Ot = /* @__PURE__ */ L(Fe, [["__scopeId", "data-v-ee32411b"]]), Ze = ["href", "data-ga-name", "data-ga-location"], Je = /* @__PURE__ */ N({
+}), Ft = /* @__PURE__ */ k(nt, [["__scopeId", "data-v-ee32411b"]]), lt = ["href", "data-ga-name", "data-ga-location"], rt = /* @__PURE__ */ N({
   __name: "Tree",
   props: {
     text: { default: "" },
@@ -455,32 +512,32 @@ const Bt = /* @__PURE__ */ L(Ee, [["render", Ve], ["__scopeId", "data-v-adc8d02f
       mobile: !1
     }) }
   },
-  setup(p) {
-    return (e, n) => {
-      var t, o, u, r, d, c;
-      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 }])
+  setup(u) {
+    return (e, s) => {
+      var t, n, v, i, d, c;
+      const r = de("Tree", !0);
+      return a(), l("div", {
+        class: m([`depth-${(t = e.config) == null ? void 0 : t.depth}`, { mobile: (n = e.config) == null ? void 0 : n.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 }]),
-          href: (r = e.config) == null ? void 0 : r.href,
+          class: m(["anchor", { selected: (v = e.config) == null ? void 0 : v.isSelected }]),
+          href: (i = e.config) == null ? void 0 : i.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,
+        }, C(e.text), 11, lt)) : B("", !0),
+        (a(!0), l(M, null, V(e.nodes, (o) => {
+          var f, w, _, E, O, h;
+          return a(), D(r, {
+            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,57 +545,57 @@ 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({
+}), ie = /* @__PURE__ */ k(rt, [["__scopeId", "data-v-c3be63ed"]]), it = { 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(u) {
+    const e = I(!1), s = () => {
       e.value = !e.value;
     };
-    return (i, t) => {
-      var o, u, r;
-      return s(), l("div", {
+    return (r, t) => {
+      var n, v, i;
+      return a(), l("div", {
         class: m(["dropdown", { hide: !e.value }])
       }, [
-        C(Q, {
+        L(Q, {
           class: "dropdown__button",
           variant: "ghost",
-          onClick: n
+          onClick: s
         }, {
           default: T(() => [
-            f("span", null, I(i.dropdownLabel), 1),
-            C(W, {
-              icon: e.value ? A(se) : A(ne)
+            p("span", null, C(r.dropdownLabel), 1),
+            L(W, {
+              icon: e.value ? A(re) : A(ne)
             }, null, 8, ["icon"])
           ]),
           _: 1
         }),
-        f("div", Ye, [
-          U(C(q, {
+        p("div", it, [
+          U(L(q, {
             tag: "div",
             variant: "body3-bold",
             class: "nav-heading"
           }, {
             default: T(() => [
-              G(I(i.anchors.text), 1)
+              G(C(r.anchors.text), 1)
             ]),
             _: 1
           }, 512), [
-            [Y, i.anchors.text]
+            [Y, r.anchors.text]
           ]),
-          C(re, {
+          L(ie, {
             mobile: "",
-            nodes: i.anchors.data,
-            onClick: n
+            nodes: r.anchors.data,
+            onClick: s
           }, 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, (n = r.hyperlinks) == null ? void 0 : n.data.length]
           ]),
-          U(C(q, {
+          U(L(q, {
             tag: "div",
             variant: "body3-bold",
             class: "nav-heading"
@@ -546,27 +603,27 @@ 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(C((d = r.hyperlinks) == null ? void 0 : d.text), 1)
               ];
             }),
             _: 1
           }, 512), [
-            [Y, (u = i.hyperlinks) == null ? void 0 : u.text]
+            [Y, (v = r.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((i = r.hyperlinks) == null ? void 0 : i.data, (d) => (a(), l("li", {
               key: d.text
             }, [
-              C(Q, {
+              L(Q, {
                 class: "dropdown__link",
                 variant: "ghost",
                 href: d.config.href
               }, {
                 default: T(() => [
-                  f("span", null, I(d.text), 1),
-                  C(Q, { variant: "icon" }, {
+                  p("span", null, C(d.text), 1),
+                  L(Q, { variant: "icon" }, {
                     default: T(() => [
-                      C(W, {
+                      L(W, {
                         icon: A(le),
                         size: "xs"
                       }, null, 8, ["icon"])
@@ -582,18 +639,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(u) {
+    const e = u, s = I([]), r = I(null), t = I([]), n = I(
       e.anchors.data.map((h) => ({
         text: h.text,
         nodes: h.nodes,
@@ -605,59 +662,59 @@ const Bt = /* @__PURE__ */ L(Ee, [["render", Ve], ["__scopeId", "data-v-adc8d02f
           mobile: !1
         }
       }))
-    ), u = S(!1), r = S(!0);
+    ), v = I(!1), i = 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)));
+    }), 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 = r.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;
+        r.value = b, t.value = o(b), s.value = t.value.slice(), n.value = f(!1), i.value = !1;
         return;
       }
-      r.value && !e.alwaysExpanded && (o.value = v(!0), r.value = !1);
+      i.value && !e.alwaysExpanded && (n.value = f(!0), i.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;
+      r.value = g, t.value = g ? o(g) : [], n.value = f(!0), i.value = !1;
       const b = (window.innerHeight - 120 - 48) * -1;
       d = new IntersectionObserver(_, {
         rootMargin: `-120px 0px ${b}px 0px`,
@@ -669,40 +726,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, [
+        L(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(C(h.anchors.text), 1)
               ]),
               _: 1
-            })) : V("", !0),
-            C(re, { nodes: o.value }, null, 8, ["nodes"])
+            })) : B("", !0),
+            L(ie, { nodes: n.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"], Ct = ["id"], Lt = /* @__PURE__ */ N({
   __name: "SlpTooltip",
   props: {
     text: { default: "" },
@@ -712,263 +769,263 @@ 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");
-    }, r = () => {
-      e.mode === "click" ? (c(), n.value = !n.value) : n.value = !1;
-    }, d = (a) => {
-      a.target.id !== e.id && (n.value = !1);
+  setup(u) {
+    const e = u, s = I(!1), r = I(""), t = I(""), n = I(""), v = (o) => {
+      e.mode === "hover" && (s.value = o.type === "mouseenter");
+    }, i = () => {
+      e.mode === "click" ? (c(), s.value = !s.value) : s.value = !1;
+    }, d = (o) => {
+      o.target.id !== e.id && (s.value = !1);
     }, c = () => {
-      document.querySelectorAll('[data-tooltip-open="true"]').forEach((v) => {
-        v.setAttribute("data-tooltip-open", "false");
+      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(/\[.*?\]\((.*?)\)/);
+        r.value = o ? o[1] : "", t.value = f ? f[1] : "", n.value = e.text.replace(`(${t.value})`, "").replace(`[${r.value}]`, "").trim();
       }
-    }), pe(n, (a) => {
+    }), pe(s, (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,
-        "data-tooltip-open": n.value,
+        id: o.id,
+        "data-tooltip-open": s.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,
-        onClick: r
+        onMouseenter: v,
+        onMouseleave: v,
+        onClick: i
       }, [
-        f("div", it, [
-          $(a.$slots, "default", {}, void 0, !0),
-          n.value ? (s(), l("div", {
+        p("div", bt, [
+          $(o.$slots, "default", {}, void 0, !0),
+          s.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(C(n.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", {
+            }, C(r.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)
+              }, C(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,
-        "data-tooltip-open": n.value,
+        id: o.id,
+        "data-tooltip-open": s.value,
         "aria-label": "Click to open tooltip with more information.",
-        "aria-describedby": `${a.id}-content`,
-        class: m(`slp-tooltip ${a.mode === "click" ? "button-mode" : ""}`),
-        onClick: r
+        "aria-describedby": `${o.id}-content`,
+        class: m(`slp-tooltip ${o.mode === "click" ? "button-mode" : ""}`),
+        onClick: i
       }, [
-        f("div", ut, [
-          $(a.$slots, "default", {}, void 0, !0),
-          n.value ? (s(), l("div", {
+        p("div", wt, [
+          $(o.$slots, "default", {}, void 0, !0),
+          s.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(C(n.value) + " ", 1),
+              r.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", {
+              }, C(r.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)
+              }, C(b.text), 1))), 128))
+            ], 8, Ct))
+          ], 2)) : B("", !0)
         ])
-      ], 10, ct));
+      ], 10, kt));
     };
   }
-}), gt = /* @__PURE__ */ L(ht, [["__scopeId", "data-v-0412a63f"]]), mt = {
+}), Nt = /* @__PURE__ */ k(Lt, [["__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) => {
-      const d = r.split(" ");
+  setup(u) {
+    const e = u, s = I(e.crumbs), r = I(!1), t = (i) => {
+      const d = i.split(" ");
       for (let c = 0; c < d.length; c++)
         d[c] = d[c][0].toUpperCase() + d[c].substr(1);
       return d.join(" ");
-    }, o = () => {
-      i.value = window.innerWidth < 768;
-    }, u = (r) => {
-      n.value[r] && (n.value[r] = {
-        ...n.value[r],
-        hover: !n.value[r].hover
+    }, n = () => {
+      r.value = window.innerWidth < 768;
+    }, v = (i) => {
+      s.value[i] && (s.value[i] = {
+        ...s.value[i],
+        hover: !s.value[i].hover
       });
     };
     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 i = e.router.currentRoute.path, d = i.startsWith("/") ? i.substring(1).split("/") : i.split("/"), c = [];
+        let o = "";
+        d.forEach((f) => {
+          o = `${o}/${f}`;
+          const w = e.router.match(o);
+          w.params.slug !== null && f.length && c.push({
+            title: t(f.replace(/-/g, " ")),
             hover: !1,
-            ...k
+            ...w
           });
-        }), n.value = c;
+        }), s.value = c;
       }
-    }), 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", {
+    }), j(() => {
+      n(), window.addEventListener("resize", n);
+    }), ae(() => {
+      window.removeEventListener("resize", n);
+    }), (i, d) => s.value && !r.value ? (a(), l("ol", Tt, [
+      (a(!0), l(M, null, V(s.value, (c, o) => (a(), l("li", {
         key: c.title,
         class: m(["breadcrumb__crumb", {
-          "breadcrumb__crumb--disabled": a === n.value.length - 1
+          "breadcrumb__crumb--disabled": o === s.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, {
+        L(Nt, {
           text: c.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
+              href: o !== s.value.length - 1 ? c.path : void 0
             }, [
-              C(q, {
+              L(q, {
                 tag: "span",
                 variant: "body3",
                 property: "name"
               }, {
                 default: T(() => [
-                  G(I(c.title.length > 18 ? c.title.substring(0, 18).concat("...") : c.title), 1)
+                  G(C(c.title.length > 18 ? c.title.substring(0, 18).concat("...") : c.title), 1)
                 ]),
                 _: 2
               }, 1024)
-            ], 8, bt)
+            ], 8, zt)
           ]),
           _: 2
         }, 1032, ["text"]),
-        a !== n.value.length - 1 ? (s(), l("span", yt, [
-          C(W, {
+        o !== s.value.length - 1 ? (a(), l("span", Bt, [
+          L(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", {
+          content: o + 1
+        }, null, 8, Mt)
+      ], 42, Et))), 128))
+    ])) : s.value && r.value ? (a(), l("ol", Vt, [
+      (a(!0), l(M, null, V(s.value, (c) => (a(), l("li", {
         key: c.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,
+          href: s.value[s.value.length - 2].path,
           "data-ga-name": c.dataGaName || c.title.toLowerCase(),
           "data-ga-location": c.dataGaLocation || "breadcrumb",
           property: "item",
           typeof: "WebPage"
         }, [
-          f("span", null, [
-            C(W, {
+          p("span", null, [
+            L(W, {
               color: "accent-500",
               size: "xs",
-              icon: A(he)
+              icon: A(De)
             }, null, 8, ["icon"])
           ]),
-          C(q, {
+          L(q, {
             class: "slp-ml-8",
             tag: "span",
             variant: "body2",
             property: "name"
           }, {
             default: T(() => [
-              G(I(n.value[n.value.length - 2].title), 1)
+              G(C(s.value[s.value.length - 2].title), 1)
             ]),
             _: 1
           })
-        ], 8, wt),
-        f("meta", {
+        ], 8, Pt),
+        p("meta", {
           property: "position",
-          content: n.value.length - 1
-        }, null, 8, St)
+          content: s.value.length - 1
+        }, 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 +1034,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) => {
-      if (typeof r == "object" && r !== null) {
+  setup(u, { emit: e }) {
+    const s = u, r = e, t = (i, d) => {
+      if (typeof i == "object" && i !== null) {
         if (!d) {
-          const v = Object.keys(r)[0];
-          return r[v];
+          const f = Object.keys(i)[0];
+          return i[f];
         }
         const c = d.split(".");
-        let a = r;
-        for (const v of c)
-          a = a == null ? void 0 : a[v];
-        return a;
+        let o = i;
+        for (const f of c)
+          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({
+      return i;
+    }, n = S(() => s.options.length > 0 ? t(s.options[0], s.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: () => s.modelValue ?? n.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)
+      set: (i) => r("update:modelValue", i)
     });
-    return (r, d) => {
+    return (i, d) => {
       var c;
-      return (c = r.options) != null && c.length ? U((s(), l("select", {
+      return (c = i.options) != null && c.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(i.options, (o, f) => (a(), l("option", {
+          key: `${t(o, i.valueKey)}-${f}`,
+          value: t(o, i.valueKey)
+        }, C(t(o, i.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(u) {
+        const e = /^#([A-Fa-f0-9]{3}){1,2}$/.test(u), s = /^\$color-[a-zA-Z0-9-]+$/.test(u);
+        return u ? e || s : !0;
       }
     },
     id: {
@@ -1033,42 +1090,42 @@ const Bt = /* @__PURE__ */ L(Ee, [["render", Ve], ["__scopeId", "data-v-adc8d02f
       required: !1
     }
   },
-  setup(p) {
-    const e = p, n = w(() => {
+  setup(u) {
+    const e = u, s = 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;
+    }), r = S(() => {
+      var t, n;
+      return (t = e.backgroundColor) != null && t.startsWith("$") ? `slp-background-${(n = e.backgroundColor) == null ? void 0 : n.slice(1)}` : null;
     });
-    return (t, o) => (s(), l("section", {
-      style: te(n.value),
-      class: m(i.value),
-      id: p.id || void 0
+    return (t, n) => (a(), l("section", {
+      style: te(s.value),
+      class: m(r.value),
+      id: u.id || void 0
     }, [
-      C(ie, null, {
+      L(se, 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,
+  se 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
 };