slippers-ui 3.3.8 → 3.4.0-alpha.1

package/dist/slippers-ui.es.js

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