slippers-ui 3.2.0 → 3.3.0-alpha

package/dist/slippers-ui.es.js

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