diff --git a/src/components/BootstrapBlazor.DriverJs/BootstrapBlazor.DriverJs.csproj b/src/components/BootstrapBlazor.DriverJs/BootstrapBlazor.DriverJs.csproj
index cee955c4..4cc62789 100644
--- a/src/components/BootstrapBlazor.DriverJs/BootstrapBlazor.DriverJs.csproj
+++ b/src/components/BootstrapBlazor.DriverJs/BootstrapBlazor.DriverJs.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <RootNamespace>BootstrapBlazor.Components</RootNamespace>
+    <Version>10.0.1</Version>
   </PropertyGroup>
 
   <PropertyGroup>
diff --git a/src/components/BootstrapBlazor.DriverJs/Components/DriverJs.razor.cs b/src/components/BootstrapBlazor.DriverJs/Components/DriverJs.razor.cs
index ae819df6..9298fd9d 100644
--- a/src/components/BootstrapBlazor.DriverJs/Components/DriverJs.razor.cs
+++ b/src/components/BootstrapBlazor.DriverJs/Components/DriverJs.razor.cs
@@ -1,4 +1,4 @@
-// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Copyright (c) BootstrapBlazor & Argo Zhang (argo@live.ca). All rights reserved.
 // Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
 // Website: https://www.blazor.zone or https://argozhang.github.io/
 
@@ -67,7 +67,7 @@ public async Task Start(int? index = 0)
     {
         string? ret = null;
 
-        if (Config?.OnDestroyStartedAsync != null)
+        if (Config is { OnDestroyStartedAsync: not null })
         {
             ret = await Config.OnDestroyStartedAsync(Config, index);
         }
@@ -81,12 +81,25 @@ public async Task Start(int? index = 0)
     [JSInvokable]
     public async Task OnDestroyed()
     {
-        if (Config?.OnDestroyedAsync != null)
+        if (Config is { OnDestroyedAsync: not null })
         {
             await Config.OnDestroyedAsync();
         }
     }
 
+    /// <summary>
+    /// 点击组件这招回调方法由 JavaScript 调用
+    /// </summary>
+    /// <returns></returns>
+    [JSInvokable]
+    public async Task OnOverlayClicked(int index)
+    {
+        if (Config is { OnOverlayClickedAsync: not null })
+        {
+            await Config.OnOverlayClickedAsync(this, Config, index);
+        }
+    }
+
     /// <summary>
     /// Starts at step 0
     /// </summary>
diff --git a/src/components/BootstrapBlazor.DriverJs/Components/DriverJs.razor.js b/src/components/BootstrapBlazor.DriverJs/Components/DriverJs.razor.js
index 1733b1e9..4d2a8cbb 100644
--- a/src/components/BootstrapBlazor.DriverJs/Components/DriverJs.razor.js
+++ b/src/components/BootstrapBlazor.DriverJs/Components/DriverJs.razor.js
@@ -1,4 +1,4 @@
-import { driver } from "../driver.js"
+import { driver } from "../driver.js.mjs"
 import { addLink } from '../../BootstrapBlazor/modules/utility.js'
 import Data from "../../BootstrapBlazor/modules/data.js"
 
@@ -18,7 +18,7 @@ export function start(id, options, config) {
     if (d) {
         d.config = config;
         const { index } = config;
-        const { hookDestroyStarted, hookDestroyed } = options;
+        const { hookDestroyStarted, hookDestroyed, overlayClickBehavior } = options;
         if (hookDestroyStarted) {
             delete options.hookDestroyStarted;
             options.onDestroyStarted = async (el, step, { state }) => {
@@ -34,6 +34,12 @@ export function start(id, options, config) {
                 d.invoke.invokeMethodAsync("OnDestroyed");
             };
         }
+        if (overlayClickBehavior === "function") {
+            options.overlayClickBehavior = async (el, step, { state }) => {
+                await d.invoke.invokeMethodAsync("OnOverlayClicked", state.activeIndex)
+            };
+        }
+
         const driverObj = driver(options);
         d.driver = driverObj;
         driverObj.drive(index);
diff --git a/src/components/BootstrapBlazor.DriverJs/Components/DriverJsConfig.cs b/src/components/BootstrapBlazor.DriverJs/Components/DriverJsConfig.cs
index 1634260a..7b4eed52 100644
--- a/src/components/BootstrapBlazor.DriverJs/Components/DriverJsConfig.cs
+++ b/src/components/BootstrapBlazor.DriverJs/Components/DriverJsConfig.cs
@@ -1,4 +1,4 @@
-// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Copyright (c) BootstrapBlazor & Argo Zhang (argo@live.ca). All rights reserved.
 // Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
 // Website: https://www.blazor.zone or https://argozhang.github.io/
 
@@ -142,4 +142,19 @@ public class DriverJsConfig
     /// </summary>
     [JsonIgnore]
     public Func<Task>? OnDestroyedAsync { get; set; }
+
+    /// <summary>
+    /// 获得/设置 点击遮罩行为 close nextStep function 默认 close
+    /// </summary>
+    [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+    public string? OverlayClickBehavior { get; set; }
+
+    [JsonInclude]
+    private string OverlayClickCallbackMethod => nameof(OnOverlayClickedAsync);
+
+    /// <summary>
+    /// 获得/设置 组件销毁前回调方法名称
+    /// </summary>
+    [JsonIgnore]
+    public Func<DriverJs, DriverJsConfig, int, Task>? OnOverlayClickedAsync { get; set; }
 }
diff --git a/src/components/BootstrapBlazor.DriverJs/wwwroot/driver.js b/src/components/BootstrapBlazor.DriverJs/wwwroot/driver.js
deleted file mode 100644
index d1e398b3..00000000
--- a/src/components/BootstrapBlazor.DriverJs/wwwroot/driver.js
+++ /dev/null
@@ -1,631 +0,0 @@
-let F = {};
-function D(e = {}) {
-  F = {
-    animate: !0,
-    allowClose: !0,
-    overlayOpacity: 0.7,
-    smoothScroll: !1,
-    disableActiveInteraction: !1,
-    showProgress: !1,
-    stagePadding: 10,
-    stageRadius: 5,
-    popoverOffset: 10,
-    showButtons: ["next", "previous", "close"],
-    disableButtons: [],
-    overlayColor: "#000",
-    ...e
-  };
-}
-function a(e) {
-  return e ? F[e] : F;
-}
-function W(e, o, t, i) {
-  return (e /= i / 2) < 1 ? t / 2 * e * e + o : -t / 2 * (--e * (e - 2) - 1) + o;
-}
-function Q(e) {
-  const o = 'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])';
-  return e.flatMap((t) => {
-    const i = t.matches(o), p = Array.from(t.querySelectorAll(o));
-    return [...i ? [t] : [], ...p];
-  }).filter((t) => getComputedStyle(t).pointerEvents !== "none" && ae(t));
-}
-function Z(e) {
-  if (!e || se(e))
-    return;
-  const o = a("smoothScroll");
-  e.scrollIntoView({
-    // Removing the smooth scrolling for elements which exist inside the scrollable parent
-    // This was causing the highlight to not properly render
-    behavior: !o || re(e) ? "auto" : "smooth",
-    inline: "center",
-    block: "center"
-  });
-}
-function re(e) {
-  if (!e || !e.parentElement)
-    return;
-  const o = e.parentElement;
-  return o.scrollHeight > o.clientHeight;
-}
-function se(e) {
-  const o = e.getBoundingClientRect();
-  return o.top >= 0 && o.left >= 0 && o.bottom <= (window.innerHeight || document.documentElement.clientHeight) && o.right <= (window.innerWidth || document.documentElement.clientWidth);
-}
-function ae(e) {
-  return !!(e.offsetWidth || e.offsetHeight || e.getClientRects().length);
-}
-let O = {};
-function b(e, o) {
-  O[e] = o;
-}
-function l(e) {
-  return e ? O[e] : O;
-}
-function V() {
-  O = {};
-}
-let R = {};
-function N(e, o) {
-  R[e] = o;
-}
-function L(e) {
-  var o;
-  (o = R[e]) == null || o.call(R);
-}
-function ce() {
-  R = {};
-}
-function le(e, o, t, i) {
-  let p = l("__activeStagePosition");
-  const n = p || t.getBoundingClientRect(), f = i.getBoundingClientRect(), w = W(e, n.x, f.x - n.x, o), r = W(e, n.y, f.y - n.y, o), v = W(e, n.width, f.width - n.width, o), s = W(e, n.height, f.height - n.height, o);
-  p = {
-    x: w,
-    y: r,
-    width: v,
-    height: s
-  }, J(p), b("__activeStagePosition", p);
-}
-function G(e) {
-  if (!e)
-    return;
-  const o = e.getBoundingClientRect(), t = {
-    x: o.x,
-    y: o.y,
-    width: o.width,
-    height: o.height
-  };
-  b("__activeStagePosition", t), J(t);
-}
-function de() {
-  const e = l("__activeStagePosition"), o = l("__overlaySvg");
-  if (!e)
-    return;
-  if (!o) {
-    console.warn("No stage svg found.");
-    return;
-  }
-  const t = window.innerWidth, i = window.innerHeight;
-  o.setAttribute("viewBox", `0 0 ${t} ${i}`);
-}
-function pe(e) {
-  const o = ue(e);
-  document.body.appendChild(o), te(o, (t) => {
-    t.target.tagName === "path" && L("overlayClick");
-  }), b("__overlaySvg", o);
-}
-function J(e) {
-  const o = l("__overlaySvg");
-  if (!o) {
-    pe(e);
-    return;
-  }
-  const t = o.firstElementChild;
-  if ((t == null ? void 0 : t.tagName) !== "path")
-    throw new Error("no path element found in stage svg");
-  t.setAttribute("d", U(e));
-}
-function ue(e) {
-  const o = window.innerWidth, t = window.innerHeight, i = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  i.classList.add("driver-overlay", "driver-overlay-animated"), i.setAttribute("viewBox", `0 0 ${o} ${t}`), i.setAttribute("xmlSpace", "preserve"), i.setAttribute("xmlnsXlink", "http://www.w3.org/1999/xlink"), i.setAttribute("version", "1.1"), i.setAttribute("preserveAspectRatio", "xMinYMin slice"), i.style.fillRule = "evenodd", i.style.clipRule = "evenodd", i.style.strokeLinejoin = "round", i.style.strokeMiterlimit = "2", i.style.zIndex = "10000", i.style.position = "fixed", i.style.top = "0", i.style.left = "0", i.style.width = "100%", i.style.height = "100%";
-  const p = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  return p.setAttribute("d", U(e)), p.style.fill = a("overlayColor") || "rgb(0,0,0)", p.style.opacity = `${a("overlayOpacity")}`, p.style.pointerEvents = "auto", p.style.cursor = "auto", i.appendChild(p), i;
-}
-function U(e) {
-  const o = window.innerWidth, t = window.innerHeight, i = a("stagePadding") || 0, p = a("stageRadius") || 0, n = e.width + i * 2, f = e.height + i * 2, w = Math.min(p, n / 2, f / 2), r = Math.floor(Math.max(w, 0)), v = e.x - i + r, s = e.y - i, c = n - r * 2, d = f - r * 2;
-  return `M${o},0L0,0L0,${t}L${o},${t}L${o},0Z
-    M${v},${s} h${c} a${r},${r} 0 0 1 ${r},${r} v${d} a${r},${r} 0 0 1 -${r},${r} h-${c} a${r},${r} 0 0 1 -${r},-${r} v-${d} a${r},${r} 0 0 1 ${r},-${r} z`;
-}
-function ve() {
-  const e = l("__overlaySvg");
-  e && e.remove();
-}
-function fe() {
-  const e = document.getElementById("driver-dummy-element");
-  if (e)
-    return e;
-  let o = document.createElement("div");
-  return o.id = "driver-dummy-element", o.style.width = "0", o.style.height = "0", o.style.pointerEvents = "none", o.style.opacity = "0", o.style.position = "fixed", o.style.top = "50%", o.style.left = "50%", document.body.appendChild(o), o;
-}
-function K(e) {
-  const { element: o } = e;
-  let t = typeof o == "string" ? document.querySelector(o) : o;
-  t || (t = fe()), ge(t, e);
-}
-function he() {
-  const e = l("__activeElement"), o = l("__activeStep");
-  e && (G(e), de(), ie(e, o));
-}
-function ge(e, o) {
-  const i = Date.now(), p = l("__activeStep"), n = l("__activeElement") || e, f = !n || n === e, w = e.id === "driver-dummy-element", r = n.id === "driver-dummy-element", v = a("animate"), s = o.onHighlightStarted || a("onHighlightStarted"), c = (o == null ? void 0 : o.onHighlighted) || a("onHighlighted"), d = (p == null ? void 0 : p.onDeselected) || a("onDeselected"), m = a(), g = l();
-  !f && d && d(r ? void 0 : n, p, {
-    config: m,
-    state: g
-  }), s && s(w ? void 0 : e, o, {
-    config: m,
-    state: g
-  });
-  const u = !f && v;
-  let h = !1;
-  xe(), b("previousStep", p), b("previousElement", n), b("activeStep", o), b("activeElement", e);
-  const P = () => {
-    if (l("__transitionCallback") !== P)
-      return;
-    const x = Date.now() - i, y = 400 - x <= 400 / 2;
-    o.popover && y && !h && u && (X(e, o), h = !0), a("animate") && x < 400 ? le(x, 400, n, e) : (G(e), c && c(w ? void 0 : e, o, {
-      config: a(),
-      state: l()
-    }), b("__transitionCallback", void 0), b("__previousStep", p), b("__previousElement", n), b("__activeStep", o), b("__activeElement", e)), window.requestAnimationFrame(P);
-  };
-  b("__transitionCallback", P), window.requestAnimationFrame(P), Z(e), !u && o.popover && X(e, o), n.classList.remove("driver-active-element", "driver-no-interaction"), n.removeAttribute("aria-haspopup"), n.removeAttribute("aria-expanded"), n.removeAttribute("aria-controls"), a("disableActiveInteraction") && e.classList.add("driver-no-interaction"), e.classList.add("driver-active-element"), e.setAttribute("aria-haspopup", "dialog"), e.setAttribute("aria-expanded", "true"), e.setAttribute("aria-controls", "driver-popover-content");
-}
-function we() {
-  var e;
-  (e = document.getElementById("driver-dummy-element")) == null || e.remove(), document.querySelectorAll(".driver-active-element").forEach((o) => {
-    o.classList.remove("driver-active-element", "driver-no-interaction"), o.removeAttribute("aria-haspopup"), o.removeAttribute("aria-expanded"), o.removeAttribute("aria-controls");
-  });
-}
-function I() {
-  const e = l("__resizeTimeout");
-  e && window.cancelAnimationFrame(e), b("__resizeTimeout", window.requestAnimationFrame(he));
-}
-function me(e) {
-  var r;
-  if (!l("isInitialized") || !(e.key === "Tab" || e.keyCode === 9))
-    return;
-  const i = l("__activeElement"), p = (r = l("popover")) == null ? void 0 : r.wrapper, n = Q([
-    ...p ? [p] : [],
-    ...i ? [i] : []
-  ]), f = n[0], w = n[n.length - 1];
-  if (e.preventDefault(), e.shiftKey) {
-    const v = n[n.indexOf(document.activeElement) - 1] || w;
-    v == null || v.focus();
-  } else {
-    const v = n[n.indexOf(document.activeElement) + 1] || f;
-    v == null || v.focus();
-  }
-}
-function ee(e) {
-  var t;
-  ((t = a("allowKeyboardControl")) == null || t) && (e.key === "Escape" ? L("escapePress") : e.key === "ArrowRight" ? L("arrowRightPress") : e.key === "ArrowLeft" && L("arrowLeftPress"));
-}
-function te(e, o, t) {
-  const i = (n, f) => {
-    const w = n.target;
-    e.contains(w) && ((!t || t(w)) && (n.preventDefault(), n.stopPropagation(), n.stopImmediatePropagation()), f == null || f(n));
-  };
-  document.addEventListener("pointerdown", i, !0), document.addEventListener("mousedown", i, !0), document.addEventListener("pointerup", i, !0), document.addEventListener("mouseup", i, !0), document.addEventListener(
-    "click",
-    (n) => {
-      i(n, o);
-    },
-    !0
-  );
-}
-function ye() {
-  window.addEventListener("keyup", ee, !1), window.addEventListener("keydown", me, !1), window.addEventListener("resize", I), window.addEventListener("scroll", I);
-}
-function be() {
-  window.removeEventListener("keyup", ee), window.removeEventListener("resize", I), window.removeEventListener("scroll", I);
-}
-function xe() {
-  const e = l("popover");
-  e && (e.wrapper.style.display = "none");
-}
-function X(e, o) {
-  var C, y;
-  let t = l("popover");
-  t && document.body.removeChild(t.wrapper), t = Pe(), document.body.appendChild(t.wrapper);
-  const {
-    title: i,
-    description: p,
-    showButtons: n,
-    disableButtons: f,
-    showProgress: w,
-    nextBtnText: r = a("nextBtnText") || "Next &rarr;",
-    prevBtnText: v = a("prevBtnText") || "&larr; Previous",
-    progressText: s = a("progressText") || "{current} of {total}"
-  } = o.popover || {};
-  t.nextButton.innerHTML = r, t.previousButton.innerHTML = v, t.progress.innerHTML = s, i ? (t.title.innerHTML = i, t.title.style.display = "block") : t.title.style.display = "none", p ? (t.description.innerHTML = p, t.description.style.display = "block") : t.description.style.display = "none";
-  const c = n || a("showButtons"), d = w || a("showProgress") || !1, m = (c == null ? void 0 : c.includes("next")) || (c == null ? void 0 : c.includes("previous")) || d;
-  t.closeButton.style.display = c.includes("close") ? "block" : "none", m ? (t.footer.style.display = "flex", t.progress.style.display = d ? "block" : "none", t.nextButton.style.display = c.includes("next") ? "block" : "none", t.previousButton.style.display = c.includes("previous") ? "block" : "none") : t.footer.style.display = "none";
-  const g = f || a("disableButtons") || [];
-  g != null && g.includes("next") && (t.nextButton.disabled = !0, t.nextButton.classList.add("driver-popover-btn-disabled")), g != null && g.includes("previous") && (t.previousButton.disabled = !0, t.previousButton.classList.add("driver-popover-btn-disabled")), g != null && g.includes("close") && (t.closeButton.disabled = !0, t.closeButton.classList.add("driver-popover-btn-disabled"));
-  const u = t.wrapper;
-  u.style.display = "block", u.style.left = "", u.style.top = "", u.style.bottom = "", u.style.right = "", u.id = "driver-popover-content", u.setAttribute("role", "dialog"), u.setAttribute("aria-labelledby", "driver-popover-title"), u.setAttribute("aria-describedby", "driver-popover-description");
-  const h = t.arrow;
-  h.className = "driver-popover-arrow";
-  const P = ((C = o.popover) == null ? void 0 : C.popoverClass) || a("popoverClass") || "";
-  u.className = `driver-popover ${P}`.trim(), te(
-    t.wrapper,
-    (k) => {
-      var $, B, M;
-      const T = k.target, E = (($ = o.popover) == null ? void 0 : $.onNextClick) || a("onNextClick"), A = ((B = o.popover) == null ? void 0 : B.onPrevClick) || a("onPrevClick"), H = ((M = o.popover) == null ? void 0 : M.onCloseClick) || a("onCloseClick");
-      if (T.classList.contains("driver-popover-next-btn"))
-        return E ? E(e, o, {
-          config: a(),
-          state: l()
-        }) : L("nextClick");
-      if (T.classList.contains("driver-popover-prev-btn"))
-        return A ? A(e, o, {
-          config: a(),
-          state: l()
-        }) : L("prevClick");
-      if (T.classList.contains("driver-popover-close-btn"))
-        return H ? H(e, o, {
-          config: a(),
-          state: l()
-        }) : L("closeClick");
-    },
-    (k) => !(t != null && t.description.contains(k)) && !(t != null && t.title.contains(k)) && typeof k.className == "string" && k.className.includes("driver-popover")
-  ), b("popover", t);
-  const S = ((y = o.popover) == null ? void 0 : y.onPopoverRender) || a("onPopoverRender");
-  S && S(t, {
-    config: a(),
-    state: l()
-  }), ie(e, o), Z(u);
-  const _ = e.classList.contains("driver-dummy-element"), x = Q([u, ..._ ? [] : [e]]);
-  x.length > 0 && x[0].focus();
-}
-function oe() {
-  const e = l("popover");
-  if (!(e != null && e.wrapper))
-    return;
-  const o = e.wrapper.getBoundingClientRect(), t = a("stagePadding") || 0, i = a("popoverOffset") || 0;
-  return {
-    width: o.width + t + i,
-    height: o.height + t + i,
-    realWidth: o.width,
-    realHeight: o.height
-  };
-}
-function Y(e, o) {
-  const { elementDimensions: t, popoverDimensions: i, popoverPadding: p, popoverArrowDimensions: n } = o;
-  return e === "start" ? Math.max(
-    Math.min(
-      t.top - p,
-      window.innerHeight - i.realHeight - n.width
-    ),
-    n.width
-  ) : e === "end" ? Math.max(
-    Math.min(
-      t.top - (i == null ? void 0 : i.realHeight) + t.height + p,
-      window.innerHeight - (i == null ? void 0 : i.realHeight) - n.width
-    ),
-    n.width
-  ) : e === "center" ? Math.max(
-    Math.min(
-      t.top + t.height / 2 - (i == null ? void 0 : i.realHeight) / 2,
-      window.innerHeight - (i == null ? void 0 : i.realHeight) - n.width
-    ),
-    n.width
-  ) : 0;
-}
-function j(e, o) {
-  const { elementDimensions: t, popoverDimensions: i, popoverPadding: p, popoverArrowDimensions: n } = o;
-  return e === "start" ? Math.max(
-    Math.min(
-      t.left - p,
-      window.innerWidth - i.realWidth - n.width
-    ),
-    n.width
-  ) : e === "end" ? Math.max(
-    Math.min(
-      t.left - (i == null ? void 0 : i.realWidth) + t.width + p,
-      window.innerWidth - (i == null ? void 0 : i.realWidth) - n.width
-    ),
-    n.width
-  ) : e === "center" ? Math.max(
-    Math.min(
-      t.left + t.width / 2 - (i == null ? void 0 : i.realWidth) / 2,
-      window.innerWidth - (i == null ? void 0 : i.realWidth) - n.width
-    ),
-    n.width
-  ) : 0;
-}
-function ie(e, o) {
-  const t = l("popover");
-  if (!t)
-    return;
-  const { align: i = "start", side: p = "left" } = (o == null ? void 0 : o.popover) || {}, n = i, f = e.id === "driver-dummy-element" ? "over" : p, w = a("stagePadding") || 0, r = oe(), v = t.arrow.getBoundingClientRect(), s = e.getBoundingClientRect(), c = s.top - r.height;
-  let d = c >= 0;
-  const m = window.innerHeight - (s.bottom + r.height);
-  let g = m >= 0;
-  const u = s.left - r.width;
-  let h = u >= 0;
-  const P = window.innerWidth - (s.right + r.width);
-  let S = P >= 0;
-  const _ = !d && !g && !h && !S;
-  let x = f;
-  if (f === "top" && d ? S = h = g = !1 : f === "bottom" && g ? S = h = d = !1 : f === "left" && h ? S = d = g = !1 : f === "right" && S && (h = d = g = !1), f === "over") {
-    const C = window.innerWidth / 2 - r.realWidth / 2, y = window.innerHeight / 2 - r.realHeight / 2;
-    t.wrapper.style.left = `${C}px`, t.wrapper.style.right = "auto", t.wrapper.style.top = `${y}px`, t.wrapper.style.bottom = "auto";
-  } else if (_) {
-    const C = window.innerWidth / 2 - (r == null ? void 0 : r.realWidth) / 2, y = 10;
-    t.wrapper.style.left = `${C}px`, t.wrapper.style.right = "auto", t.wrapper.style.bottom = `${y}px`, t.wrapper.style.top = "auto";
-  } else if (h) {
-    const C = Math.min(
-      u,
-      window.innerWidth - (r == null ? void 0 : r.realWidth) - v.width
-    ), y = Y(n, {
-      elementDimensions: s,
-      popoverDimensions: r,
-      popoverPadding: w,
-      popoverArrowDimensions: v
-    });
-    t.wrapper.style.left = `${C}px`, t.wrapper.style.top = `${y}px`, t.wrapper.style.bottom = "auto", t.wrapper.style.right = "auto", x = "left";
-  } else if (S) {
-    const C = Math.min(
-      P,
-      window.innerWidth - (r == null ? void 0 : r.realWidth) - v.width
-    ), y = Y(n, {
-      elementDimensions: s,
-      popoverDimensions: r,
-      popoverPadding: w,
-      popoverArrowDimensions: v
-    });
-    t.wrapper.style.right = `${C}px`, t.wrapper.style.top = `${y}px`, t.wrapper.style.bottom = "auto", t.wrapper.style.left = "auto", x = "right";
-  } else if (d) {
-    const C = Math.min(
-      c,
-      window.innerHeight - r.realHeight - v.width
-    );
-    let y = j(n, {
-      elementDimensions: s,
-      popoverDimensions: r,
-      popoverPadding: w,
-      popoverArrowDimensions: v
-    });
-    t.wrapper.style.top = `${C}px`, t.wrapper.style.left = `${y}px`, t.wrapper.style.bottom = "auto", t.wrapper.style.right = "auto", x = "top";
-  } else if (g) {
-    const C = Math.min(
-      m,
-      window.innerHeight - (r == null ? void 0 : r.realHeight) - v.width
-    );
-    let y = j(n, {
-      elementDimensions: s,
-      popoverDimensions: r,
-      popoverPadding: w,
-      popoverArrowDimensions: v
-    });
-    t.wrapper.style.left = `${y}px`, t.wrapper.style.bottom = `${C}px`, t.wrapper.style.top = "auto", t.wrapper.style.right = "auto", x = "bottom";
-  }
-  _ ? t.arrow.classList.add("driver-popover-arrow-none") : Ce(n, x, e);
-}
-function Ce(e, o, t) {
-  const i = l("popover");
-  if (!i)
-    return;
-  const p = t.getBoundingClientRect(), n = oe(), f = i.arrow, w = n.width, r = window.innerWidth, v = p.width, s = p.left, c = n.height, d = window.innerHeight, m = p.top, g = p.height;
-  f.className = "driver-popover-arrow";
-  let u = o, h = e;
-  o === "top" ? (s + v <= 0 ? (u = "right", h = "end") : s + v - w <= 0 && (u = "top", h = "start"), s >= r ? (u = "left", h = "end") : s + w >= r && (u = "top", h = "end")) : o === "bottom" ? (s + v <= 0 ? (u = "right", h = "start") : s + v - w <= 0 && (u = "bottom", h = "start"), s >= r ? (u = "left", h = "start") : s + w >= r && (u = "bottom", h = "end")) : o === "left" ? (m + g <= 0 ? (u = "bottom", h = "end") : m + g - c <= 0 && (u = "left", h = "start"), m >= d ? (u = "top", h = "end") : m + c >= d && (u = "left", h = "end")) : o === "right" && (m + g <= 0 ? (u = "bottom", h = "start") : m + g - c <= 0 && (u = "right", h = "start"), m >= d ? (u = "top", h = "start") : m + c >= d && (u = "right", h = "end")), u ? (f.classList.add(`driver-popover-arrow-side-${u}`), f.classList.add(`driver-popover-arrow-align-${h}`)) : f.classList.add("driver-popover-arrow-none");
-}
-function Pe() {
-  const e = document.createElement("div");
-  e.classList.add("driver-popover");
-  const o = document.createElement("div");
-  o.classList.add("driver-popover-arrow");
-  const t = document.createElement("header");
-  t.id = "driver-popover-title", t.classList.add("driver-popover-title"), t.style.display = "none", t.innerText = "Popover Title";
-  const i = document.createElement("div");
-  i.id = "driver-popover-description", i.classList.add("driver-popover-description"), i.style.display = "none", i.innerText = "Popover description is here";
-  const p = document.createElement("button");
-  p.type = "button", p.classList.add("driver-popover-close-btn"), p.setAttribute("aria-label", "Close"), p.innerHTML = "&times;";
-  const n = document.createElement("footer");
-  n.classList.add("driver-popover-footer");
-  const f = document.createElement("span");
-  f.classList.add("driver-popover-progress-text"), f.innerText = "";
-  const w = document.createElement("span");
-  w.classList.add("driver-popover-navigation-btns");
-  const r = document.createElement("button");
-  r.type = "button", r.classList.add("driver-popover-prev-btn"), r.innerHTML = "&larr; Previous";
-  const v = document.createElement("button");
-  return v.type = "button", v.classList.add("driver-popover-next-btn"), v.innerHTML = "Next &rarr;", w.appendChild(r), w.appendChild(v), n.appendChild(f), n.appendChild(w), e.appendChild(p), e.appendChild(o), e.appendChild(t), e.appendChild(i), e.appendChild(n), {
-    wrapper: e,
-    arrow: o,
-    title: t,
-    description: i,
-    footer: n,
-    previousButton: r,
-    nextButton: v,
-    closeButton: p,
-    footerButtons: w,
-    progress: f
-  };
-}
-function Se() {
-  var o;
-  const e = l("popover");
-  e && ((o = e.wrapper.parentElement) == null || o.removeChild(e.wrapper));
-}
-function ke(e = {}) {
-  D(e);
-  function o() {
-    a("allowClose") && v();
-  }
-  function t() {
-    const s = l("activeIndex"), c = a("steps") || [];
-    if (typeof s == "undefined")
-      return;
-    const d = s + 1;
-    c[d] ? r(d) : v();
-  }
-  function i() {
-    const s = l("activeIndex"), c = a("steps") || [];
-    if (typeof s == "undefined")
-      return;
-    const d = s - 1;
-    c[d] ? r(d) : v();
-  }
-  function p(s) {
-    (a("steps") || [])[s] ? r(s) : v();
-  }
-  function n() {
-    var h;
-    if (l("__transitionCallback"))
-      return;
-    const c = l("activeIndex"), d = l("__activeStep"), m = l("__activeElement");
-    if (typeof c == "undefined" || typeof d == "undefined" || typeof l("activeIndex") == "undefined")
-      return;
-    const u = ((h = d.popover) == null ? void 0 : h.onPrevClick) || a("onPrevClick");
-    if (u)
-      return u(m, d, {
-        config: a(),
-        state: l()
-      });
-    i();
-  }
-  function f() {
-    var u;
-    if (l("__transitionCallback"))
-      return;
-    const c = l("activeIndex"), d = l("__activeStep"), m = l("__activeElement");
-    if (typeof c == "undefined" || typeof d == "undefined")
-      return;
-    const g = ((u = d.popover) == null ? void 0 : u.onNextClick) || a("onNextClick");
-    if (g)
-      return g(m, d, {
-        config: a(),
-        state: l()
-      });
-    t();
-  }
-  function w() {
-    l("isInitialized") || (b("isInitialized", !0), document.body.classList.add("driver-active", a("animate") ? "driver-fade" : "driver-simple"), ye(), N("overlayClick", o), N("escapePress", o), N("arrowLeftPress", n), N("arrowRightPress", f));
-  }
-  function r(s = 0) {
-    var E, A, H, $, B, M, z, q;
-    const c = a("steps");
-    if (!c) {
-      console.error("No steps to drive through"), v();
-      return;
-    }
-    if (!c[s]) {
-      v();
-      return;
-    }
-    b("__activeOnDestroyed", document.activeElement), b("activeIndex", s);
-    const d = c[s], m = c[s + 1], g = c[s - 1], u = ((E = d.popover) == null ? void 0 : E.doneBtnText) || a("doneBtnText") || "Done", h = a("allowClose"), P = typeof ((A = d.popover) == null ? void 0 : A.showProgress) != "undefined" ? (H = d.popover) == null ? void 0 : H.showProgress : a("showProgress"), _ = ((($ = d.popover) == null ? void 0 : $.progressText) || a("progressText") || "{{current}} of {{total}}").replace("{{current}}", `${s + 1}`).replace("{{total}}", `${c.length}`), x = ((B = d.popover) == null ? void 0 : B.showButtons) || a("showButtons"), C = [
-      "next",
-      "previous",
-      ...h ? ["close"] : []
-    ].filter((ne) => !(x != null && x.length) || x.includes(ne)), y = ((M = d.popover) == null ? void 0 : M.onNextClick) || a("onNextClick"), k = ((z = d.popover) == null ? void 0 : z.onPrevClick) || a("onPrevClick"), T = ((q = d.popover) == null ? void 0 : q.onCloseClick) || a("onCloseClick");
-    K({
-      ...d,
-      popover: {
-        showButtons: C,
-        nextBtnText: m ? void 0 : u,
-        disableButtons: [...g ? [] : ["previous"]],
-        showProgress: P,
-        progressText: _,
-        onNextClick: y || (() => {
-          m ? r(s + 1) : v();
-        }),
-        onPrevClick: k || (() => {
-          r(s - 1);
-        }),
-        onCloseClick: T || (() => {
-          v();
-        }),
-        ...(d == null ? void 0 : d.popover) || {}
-      }
-    });
-  }
-  function v(s = !0) {
-    const c = l("__activeElement"), d = l("__activeStep"), m = l("__activeOnDestroyed"), g = a("onDestroyStarted");
-    if (s && g) {
-      const P = !c || (c == null ? void 0 : c.id) === "driver-dummy-element";
-      g(P ? void 0 : c, d, {
-        config: a(),
-        state: l()
-      });
-      return;
-    }
-    const u = (d == null ? void 0 : d.onDeselected) || a("onDeselected"), h = a("onDestroyed");
-    if (document.body.classList.remove("driver-active", "driver-fade", "driver-simple"), be(), Se(), we(), ve(), ce(), V(), c && d) {
-      const P = c.id === "driver-dummy-element";
-      u && u(P ? void 0 : c, d, {
-        config: a(),
-        state: l()
-      }), h && h(P ? void 0 : c, d, {
-        config: a(),
-        state: l()
-      });
-    }
-    m && m.focus();
-  }
-  return {
-    isActive: () => l("isInitialized") || !1,
-    refresh: I,
-    drive: (s = 0) => {
-      w(), r(s);
-    },
-    setConfig: D,
-    setSteps: (s) => {
-      V(), D({
-        ...a(),
-        steps: s
-      });
-    },
-    getConfig: a,
-    getState: l,
-    getActiveIndex: () => l("activeIndex"),
-    isFirstStep: () => l("activeIndex") === 0,
-    isLastStep: () => {
-      const s = a("steps") || [], c = l("activeIndex");
-      return c !== void 0 && c === s.length - 1;
-    },
-    getActiveStep: () => l("activeStep"),
-    getActiveElement: () => l("activeElement"),
-    getPreviousElement: () => l("previousElement"),
-    getPreviousStep: () => l("previousStep"),
-    moveNext: t,
-    movePrevious: i,
-    moveTo: p,
-    hasNextStep: () => {
-      const s = a("steps") || [], c = l("activeIndex");
-      return c !== void 0 && s[c + 1];
-    },
-    hasPreviousStep: () => {
-      const s = a("steps") || [], c = l("activeIndex");
-      return c !== void 0 && s[c - 1];
-    },
-    highlight: (s) => {
-      w(), K({
-        ...s,
-        popover: s.popover ? {
-          showButtons: [],
-          showProgress: !1,
-          progressText: "",
-          ...s.popover
-        } : void 0
-      });
-    },
-    destroy: () => {
-      v(!1);
-    }
-  };
-}
-export {
-  ke as driver
-};
diff --git a/src/components/BootstrapBlazor.DriverJs/wwwroot/driver.js.mjs b/src/components/BootstrapBlazor.DriverJs/wwwroot/driver.js.mjs
new file mode 100644
index 00000000..25cd54d1
--- /dev/null
+++ b/src/components/BootstrapBlazor.DriverJs/wwwroot/driver.js.mjs
@@ -0,0 +1,675 @@
+let z = {}, J;
+function F(e = {}) {
+  z = {
+    animate: !0,
+    allowClose: !0,
+    overlayClickBehavior: "close",
+    overlayOpacity: 0.7,
+    smoothScroll: !1,
+    disableActiveInteraction: !1,
+    showProgress: !1,
+    stagePadding: 10,
+    stageRadius: 5,
+    popoverOffset: 10,
+    showButtons: ["next", "previous", "close"],
+    disableButtons: [],
+    overlayColor: "#000",
+    ...e
+  };
+}
+function s(e) {
+  return e ? z[e] : z;
+}
+function le(e) {
+  J = e;
+}
+function _() {
+  return J;
+}
+let I = {};
+function N(e, o) {
+  I[e] = o;
+}
+function L(e) {
+  var o;
+  (o = I[e]) == null || o.call(I);
+}
+function de() {
+  I = {};
+}
+function O(e, o, t, i) {
+  return (e /= i / 2) < 1 ? t / 2 * e * e + o : -t / 2 * (--e * (e - 2) - 1) + o;
+}
+function U(e) {
+  const o = 'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])';
+  return e.flatMap((t) => {
+    const i = t.matches(o), d = Array.from(t.querySelectorAll(o));
+    return [...i ? [t] : [], ...d];
+  }).filter((t) => getComputedStyle(t).pointerEvents !== "none" && ve(t));
+}
+function ee(e) {
+  if (!e || ue(e))
+    return;
+  const o = s("smoothScroll"), t = e.offsetHeight > window.innerHeight;
+  e.scrollIntoView({
+    // Removing the smooth scrolling for elements which exist inside the scrollable parent
+    // This was causing the highlight to not properly render
+    behavior: !o || pe(e) ? "auto" : "smooth",
+    inline: "center",
+    block: t ? "start" : "center"
+  });
+}
+function pe(e) {
+  if (!e || !e.parentElement)
+    return;
+  const o = e.parentElement;
+  return o.scrollHeight > o.clientHeight;
+}
+function ue(e) {
+  const o = e.getBoundingClientRect();
+  return o.top >= 0 && o.left >= 0 && o.bottom <= (window.innerHeight || document.documentElement.clientHeight) && o.right <= (window.innerWidth || document.documentElement.clientWidth);
+}
+function ve(e) {
+  return !!(e.offsetWidth || e.offsetHeight || e.getClientRects().length);
+}
+let D = {};
+function k(e, o) {
+  D[e] = o;
+}
+function l(e) {
+  return e ? D[e] : D;
+}
+function X() {
+  D = {};
+}
+function fe(e, o, t, i) {
+  let d = l("__activeStagePosition");
+  const n = d || t.getBoundingClientRect(), f = i.getBoundingClientRect(), w = O(e, n.x, f.x - n.x, o), r = O(e, n.y, f.y - n.y, o), v = O(e, n.width, f.width - n.width, o), g = O(e, n.height, f.height - n.height, o);
+  d = {
+    x: w,
+    y: r,
+    width: v,
+    height: g
+  }, oe(d), k("__activeStagePosition", d);
+}
+function te(e) {
+  if (!e)
+    return;
+  const o = e.getBoundingClientRect(), t = {
+    x: o.x,
+    y: o.y,
+    width: o.width,
+    height: o.height
+  };
+  k("__activeStagePosition", t), oe(t);
+}
+function he() {
+  const e = l("__activeStagePosition"), o = l("__overlaySvg");
+  if (!e)
+    return;
+  if (!o) {
+    console.warn("No stage svg found.");
+    return;
+  }
+  const t = window.innerWidth, i = window.innerHeight;
+  o.setAttribute("viewBox", `0 0 ${t} ${i}`);
+}
+function ge(e) {
+  const o = we(e);
+  document.body.appendChild(o), re(o, (t) => {
+    t.target.tagName === "path" && L("overlayClick");
+  }), k("__overlaySvg", o);
+}
+function oe(e) {
+  const o = l("__overlaySvg");
+  if (!o) {
+    ge(e);
+    return;
+  }
+  const t = o.firstElementChild;
+  if ((t == null ? void 0 : t.tagName) !== "path")
+    throw new Error("no path element found in stage svg");
+  t.setAttribute("d", ie(e));
+}
+function we(e) {
+  const o = window.innerWidth, t = window.innerHeight, i = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  i.classList.add("driver-overlay", "driver-overlay-animated"), i.setAttribute("viewBox", `0 0 ${o} ${t}`), i.setAttribute("xmlSpace", "preserve"), i.setAttribute("xmlnsXlink", "http://www.w3.org/1999/xlink"), i.setAttribute("version", "1.1"), i.setAttribute("preserveAspectRatio", "xMinYMin slice"), i.style.fillRule = "evenodd", i.style.clipRule = "evenodd", i.style.strokeLinejoin = "round", i.style.strokeMiterlimit = "2", i.style.zIndex = "10000", i.style.position = "fixed", i.style.top = "0", i.style.left = "0", i.style.width = "100%", i.style.height = "100%";
+  const d = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  return d.setAttribute("d", ie(e)), d.style.fill = s("overlayColor") || "rgb(0,0,0)", d.style.opacity = `${s("overlayOpacity")}`, d.style.pointerEvents = "auto", d.style.cursor = "auto", i.appendChild(d), i;
+}
+function ie(e) {
+  const o = window.innerWidth, t = window.innerHeight, i = s("stagePadding") || 0, d = s("stageRadius") || 0, n = e.width + i * 2, f = e.height + i * 2, w = Math.min(d, n / 2, f / 2), r = Math.floor(Math.max(w, 0)), v = e.x - i + r, g = e.y - i, y = n - r * 2, a = f - r * 2;
+  return `M${o},0L0,0L0,${t}L${o},${t}L${o},0Z
+    M${v},${g} h${y} a${r},${r} 0 0 1 ${r},${r} v${a} a${r},${r} 0 0 1 -${r},${r} h-${y} a${r},${r} 0 0 1 -${r},-${r} v-${a} a${r},${r} 0 0 1 ${r},-${r} z`;
+}
+function me() {
+  const e = l("__overlaySvg");
+  e && e.remove();
+}
+function ye() {
+  const e = document.getElementById("driver-dummy-element");
+  if (e)
+    return e;
+  let o = document.createElement("div");
+  return o.id = "driver-dummy-element", o.style.width = "0", o.style.height = "0", o.style.pointerEvents = "none", o.style.opacity = "0", o.style.position = "fixed", o.style.top = "50%", o.style.left = "50%", document.body.appendChild(o), o;
+}
+function j(e) {
+  const { element: o } = e;
+  let t = typeof o == "function" ? o() : typeof o == "string" ? document.querySelector(o) : o;
+  t || (t = ye()), be(t, e);
+}
+function xe() {
+  const e = l("__activeElement"), o = l("__activeStep");
+  e && (te(e), he(), ae(e, o));
+}
+function be(e, o) {
+  var C;
+  const i = Date.now(), d = l("__activeStep"), n = l("__activeElement") || e, f = !n || n === e, w = e.id === "driver-dummy-element", r = n.id === "driver-dummy-element", v = s("animate"), g = o.onHighlightStarted || s("onHighlightStarted"), y = (o == null ? void 0 : o.onHighlighted) || s("onHighlighted"), a = (d == null ? void 0 : d.onDeselected) || s("onDeselected"), p = s(), c = l();
+  !f && a && a(r ? void 0 : n, d, {
+    config: p,
+    state: c,
+    driver: _()
+  }), g && g(w ? void 0 : e, o, {
+    config: p,
+    state: c,
+    driver: _()
+  });
+  const u = !f && v;
+  let h = !1;
+  Se(), k("previousStep", d), k("previousElement", n), k("activeStep", o), k("activeElement", e);
+  const m = () => {
+    if (l("__transitionCallback") !== m)
+      return;
+    const b = Date.now() - i, E = 400 - b <= 400 / 2;
+    o.popover && E && !h && u && (Q(e, o), h = !0), s("animate") && b < 400 ? fe(b, 400, n, e) : (te(e), y && y(w ? void 0 : e, o, {
+      config: s(),
+      state: l(),
+      driver: _()
+    }), k("__transitionCallback", void 0), k("__previousStep", d), k("__previousElement", n), k("__activeStep", o), k("__activeElement", e)), window.requestAnimationFrame(m);
+  };
+  k("__transitionCallback", m), window.requestAnimationFrame(m), ee(e), !u && o.popover && Q(e, o), n.classList.remove("driver-active-element", "driver-no-interaction"), n.removeAttribute("aria-haspopup"), n.removeAttribute("aria-expanded"), n.removeAttribute("aria-controls"), ((C = o.disableActiveInteraction) != null ? C : s("disableActiveInteraction")) && e.classList.add("driver-no-interaction"), e.classList.add("driver-active-element"), e.setAttribute("aria-haspopup", "dialog"), e.setAttribute("aria-expanded", "true"), e.setAttribute("aria-controls", "driver-popover-content");
+}
+function Ce() {
+  var e;
+  (e = document.getElementById("driver-dummy-element")) == null || e.remove(), document.querySelectorAll(".driver-active-element").forEach((o) => {
+    o.classList.remove("driver-active-element", "driver-no-interaction"), o.removeAttribute("aria-haspopup"), o.removeAttribute("aria-expanded"), o.removeAttribute("aria-controls");
+  });
+}
+function M() {
+  const e = l("__resizeTimeout");
+  e && window.cancelAnimationFrame(e), k("__resizeTimeout", window.requestAnimationFrame(xe));
+}
+function Pe(e) {
+  var r;
+  if (!l("isInitialized") || !(e.key === "Tab" || e.keyCode === 9))
+    return;
+  const i = l("__activeElement"), d = (r = l("popover")) == null ? void 0 : r.wrapper, n = U([
+    ...d ? [d] : [],
+    ...i ? [i] : []
+  ]), f = n[0], w = n[n.length - 1];
+  if (e.preventDefault(), e.shiftKey) {
+    const v = n[n.indexOf(document.activeElement) - 1] || w;
+    v == null || v.focus();
+  } else {
+    const v = n[n.indexOf(document.activeElement) + 1] || f;
+    v == null || v.focus();
+  }
+}
+function ne(e) {
+  var t;
+  ((t = s("allowKeyboardControl")) == null || t) && (e.key === "Escape" ? L("escapePress") : e.key === "ArrowRight" ? L("arrowRightPress") : e.key === "ArrowLeft" && L("arrowLeftPress"));
+}
+function re(e, o, t) {
+  const i = (n, f) => {
+    const w = n.target;
+    e.contains(w) && ((!t || t(w)) && (n.preventDefault(), n.stopPropagation(), n.stopImmediatePropagation()), f == null || f(n));
+  };
+  document.addEventListener("pointerdown", i, !0), document.addEventListener("mousedown", i, !0), document.addEventListener("pointerup", i, !0), document.addEventListener("mouseup", i, !0), document.addEventListener(
+    "click",
+    (n) => {
+      i(n, o);
+    },
+    !0
+  );
+}
+function ke() {
+  window.addEventListener("keyup", ne, !1), window.addEventListener("keydown", Pe, !1), window.addEventListener("resize", M), window.addEventListener("scroll", M);
+}
+function _e() {
+  window.removeEventListener("keyup", ne), window.removeEventListener("resize", M), window.removeEventListener("scroll", M);
+}
+function Se() {
+  const e = l("popover");
+  e && (e.wrapper.style.display = "none");
+}
+function Q(e, o) {
+  var b, P;
+  let t = l("popover");
+  t && document.body.removeChild(t.wrapper), t = Le(), document.body.appendChild(t.wrapper);
+  const {
+    title: i,
+    description: d,
+    showButtons: n,
+    disableButtons: f,
+    showProgress: w,
+    nextBtnText: r = s("nextBtnText") || "Next &rarr;",
+    prevBtnText: v = s("prevBtnText") || "&larr; Previous",
+    progressText: g = s("progressText") || "{current} of {total}"
+  } = o.popover || {};
+  t.nextButton.innerHTML = r, t.previousButton.innerHTML = v, t.progress.innerHTML = g, i ? (t.title.innerHTML = i, t.title.style.display = "block") : t.title.style.display = "none", d ? (t.description.innerHTML = d, t.description.style.display = "block") : t.description.style.display = "none";
+  const y = n || s("showButtons"), a = w || s("showProgress") || !1, p = (y == null ? void 0 : y.includes("next")) || (y == null ? void 0 : y.includes("previous")) || a;
+  t.closeButton.style.display = y.includes("close") ? "block" : "none", p ? (t.footer.style.display = "flex", t.progress.style.display = a ? "block" : "none", t.nextButton.style.display = y.includes("next") ? "block" : "none", t.previousButton.style.display = y.includes("previous") ? "block" : "none") : t.footer.style.display = "none";
+  const c = f || s("disableButtons") || [];
+  c != null && c.includes("next") && (t.nextButton.disabled = !0, t.nextButton.classList.add("driver-popover-btn-disabled")), c != null && c.includes("previous") && (t.previousButton.disabled = !0, t.previousButton.classList.add("driver-popover-btn-disabled")), c != null && c.includes("close") && (t.closeButton.disabled = !0, t.closeButton.classList.add("driver-popover-btn-disabled"));
+  const u = t.wrapper;
+  u.style.display = "block", u.style.left = "", u.style.top = "", u.style.bottom = "", u.style.right = "", u.id = "driver-popover-content", u.setAttribute("role", "dialog"), u.setAttribute("aria-labelledby", "driver-popover-title"), u.setAttribute("aria-describedby", "driver-popover-description");
+  const h = t.arrow;
+  h.className = "driver-popover-arrow";
+  const m = ((b = o.popover) == null ? void 0 : b.popoverClass) || s("popoverClass") || "";
+  u.className = `driver-popover ${m}`.trim(), re(
+    t.wrapper,
+    (E) => {
+      var B, R, W;
+      const T = E.target, A = ((B = o.popover) == null ? void 0 : B.onNextClick) || s("onNextClick"), H = ((R = o.popover) == null ? void 0 : R.onPrevClick) || s("onPrevClick"), $ = ((W = o.popover) == null ? void 0 : W.onCloseClick) || s("onCloseClick");
+      if (T.closest(".driver-popover-next-btn"))
+        return A ? A(e, o, {
+          config: s(),
+          state: l(),
+          driver: _()
+        }) : L("nextClick");
+      if (T.closest(".driver-popover-prev-btn"))
+        return H ? H(e, o, {
+          config: s(),
+          state: l(),
+          driver: _()
+        }) : L("prevClick");
+      if (T.closest(".driver-popover-close-btn"))
+        return $ ? $(e, o, {
+          config: s(),
+          state: l(),
+          driver: _()
+        }) : L("closeClick");
+    },
+    (E) => !(t != null && t.description.contains(E)) && !(t != null && t.title.contains(E)) && typeof E.className == "string" && E.className.includes("driver-popover")
+  ), k("popover", t);
+  const x = ((P = o.popover) == null ? void 0 : P.onPopoverRender) || s("onPopoverRender");
+  x && x(t, {
+    config: s(),
+    state: l(),
+    driver: _()
+  }), ae(e, o), ee(u);
+  const C = e.classList.contains("driver-dummy-element"), S = U([u, ...C ? [] : [e]]);
+  S.length > 0 && S[0].focus();
+}
+function se() {
+  const e = l("popover");
+  if (!(e != null && e.wrapper))
+    return;
+  const o = e.wrapper.getBoundingClientRect(), t = s("stagePadding") || 0, i = s("popoverOffset") || 0;
+  return {
+    width: o.width + t + i,
+    height: o.height + t + i,
+    realWidth: o.width,
+    realHeight: o.height
+  };
+}
+function Z(e, o) {
+  const { elementDimensions: t, popoverDimensions: i, popoverPadding: d, popoverArrowDimensions: n } = o;
+  return e === "start" ? Math.max(
+    Math.min(
+      t.top - d,
+      window.innerHeight - i.realHeight - n.width
+    ),
+    n.width
+  ) : e === "end" ? Math.max(
+    Math.min(
+      t.top - (i == null ? void 0 : i.realHeight) + t.height + d,
+      window.innerHeight - (i == null ? void 0 : i.realHeight) - n.width
+    ),
+    n.width
+  ) : e === "center" ? Math.max(
+    Math.min(
+      t.top + t.height / 2 - (i == null ? void 0 : i.realHeight) / 2,
+      window.innerHeight - (i == null ? void 0 : i.realHeight) - n.width
+    ),
+    n.width
+  ) : 0;
+}
+function G(e, o) {
+  const { elementDimensions: t, popoverDimensions: i, popoverPadding: d, popoverArrowDimensions: n } = o;
+  return e === "start" ? Math.max(
+    Math.min(
+      t.left - d,
+      window.innerWidth - i.realWidth - n.width
+    ),
+    n.width
+  ) : e === "end" ? Math.max(
+    Math.min(
+      t.left - (i == null ? void 0 : i.realWidth) + t.width + d,
+      window.innerWidth - (i == null ? void 0 : i.realWidth) - n.width
+    ),
+    n.width
+  ) : e === "center" ? Math.max(
+    Math.min(
+      t.left + t.width / 2 - (i == null ? void 0 : i.realWidth) / 2,
+      window.innerWidth - (i == null ? void 0 : i.realWidth) - n.width
+    ),
+    n.width
+  ) : 0;
+}
+function ae(e, o) {
+  const t = l("popover");
+  if (!t)
+    return;
+  const { align: i = "start", side: d = "left" } = (o == null ? void 0 : o.popover) || {}, n = i, f = e.id === "driver-dummy-element" ? "over" : d, w = s("stagePadding") || 0, r = se(), v = t.arrow.getBoundingClientRect(), g = e.getBoundingClientRect(), y = g.top - r.height;
+  let a = y >= 0;
+  const p = window.innerHeight - (g.bottom + r.height);
+  let c = p >= 0;
+  const u = g.left - r.width;
+  let h = u >= 0;
+  const m = window.innerWidth - (g.right + r.width);
+  let x = m >= 0;
+  const C = !a && !c && !h && !x;
+  let S = f;
+  if (f === "top" && a ? x = h = c = !1 : f === "bottom" && c ? x = h = a = !1 : f === "left" && h ? x = a = c = !1 : f === "right" && x && (h = a = c = !1), f === "over") {
+    const b = window.innerWidth / 2 - r.realWidth / 2, P = window.innerHeight / 2 - r.realHeight / 2;
+    t.wrapper.style.left = `${b}px`, t.wrapper.style.right = "auto", t.wrapper.style.top = `${P}px`, t.wrapper.style.bottom = "auto";
+  } else if (C) {
+    const b = window.innerWidth / 2 - (r == null ? void 0 : r.realWidth) / 2, P = 10;
+    t.wrapper.style.left = `${b}px`, t.wrapper.style.right = "auto", t.wrapper.style.bottom = `${P}px`, t.wrapper.style.top = "auto";
+  } else if (h) {
+    const b = Math.min(
+      u,
+      window.innerWidth - (r == null ? void 0 : r.realWidth) - v.width
+    ), P = Z(n, {
+      elementDimensions: g,
+      popoverDimensions: r,
+      popoverPadding: w,
+      popoverArrowDimensions: v
+    });
+    t.wrapper.style.left = `${b}px`, t.wrapper.style.top = `${P}px`, t.wrapper.style.bottom = "auto", t.wrapper.style.right = "auto", S = "left";
+  } else if (x) {
+    const b = Math.min(
+      m,
+      window.innerWidth - (r == null ? void 0 : r.realWidth) - v.width
+    ), P = Z(n, {
+      elementDimensions: g,
+      popoverDimensions: r,
+      popoverPadding: w,
+      popoverArrowDimensions: v
+    });
+    t.wrapper.style.right = `${b}px`, t.wrapper.style.top = `${P}px`, t.wrapper.style.bottom = "auto", t.wrapper.style.left = "auto", S = "right";
+  } else if (a) {
+    const b = Math.min(
+      y,
+      window.innerHeight - r.realHeight - v.width
+    );
+    let P = G(n, {
+      elementDimensions: g,
+      popoverDimensions: r,
+      popoverPadding: w,
+      popoverArrowDimensions: v
+    });
+    t.wrapper.style.top = `${b}px`, t.wrapper.style.left = `${P}px`, t.wrapper.style.bottom = "auto", t.wrapper.style.right = "auto", S = "top";
+  } else if (c) {
+    const b = Math.min(
+      p,
+      window.innerHeight - (r == null ? void 0 : r.realHeight) - v.width
+    );
+    let P = G(n, {
+      elementDimensions: g,
+      popoverDimensions: r,
+      popoverPadding: w,
+      popoverArrowDimensions: v
+    });
+    t.wrapper.style.left = `${P}px`, t.wrapper.style.bottom = `${b}px`, t.wrapper.style.top = "auto", t.wrapper.style.right = "auto", S = "bottom";
+  }
+  C ? t.arrow.classList.add("driver-popover-arrow-none") : Ee(n, S, e);
+}
+function Ee(e, o, t) {
+  const i = l("popover");
+  if (!i)
+    return;
+  const d = t.getBoundingClientRect(), n = se(), f = i.arrow, w = n.width, r = window.innerWidth, v = d.width, g = d.left, y = n.height, a = window.innerHeight, p = d.top, c = d.height;
+  f.className = "driver-popover-arrow";
+  let u = o, h = e;
+  if (o === "top" ? (g + v <= 0 ? (u = "right", h = "end") : g + v - w <= 0 && (u = "top", h = "start"), g >= r ? (u = "left", h = "end") : g + w >= r && (u = "top", h = "end")) : o === "bottom" ? (g + v <= 0 ? (u = "right", h = "start") : g + v - w <= 0 && (u = "bottom", h = "start"), g >= r ? (u = "left", h = "start") : g + w >= r && (u = "bottom", h = "end")) : o === "left" ? (p + c <= 0 ? (u = "bottom", h = "end") : p + c - y <= 0 && (u = "left", h = "start"), p >= a ? (u = "top", h = "end") : p + y >= a && (u = "left", h = "end")) : o === "right" && (p + c <= 0 ? (u = "bottom", h = "start") : p + c - y <= 0 && (u = "right", h = "start"), p >= a ? (u = "top", h = "start") : p + y >= a && (u = "right", h = "end")), !u)
+    f.classList.add("driver-popover-arrow-none");
+  else {
+    f.classList.add(`driver-popover-arrow-side-${u}`), f.classList.add(`driver-popover-arrow-align-${h}`);
+    const m = t.getBoundingClientRect(), x = f.getBoundingClientRect(), C = s("stagePadding") || 0, S = m.left - C < window.innerWidth && m.right + C > 0 && m.top - C < window.innerHeight && m.bottom + C > 0;
+    o === "bottom" && S && (x.x > m.x && x.x + x.width < m.x + m.width ? i.wrapper.style.transform = "translateY(0)" : (f.classList.remove(`driver-popover-arrow-align-${h}`), f.classList.add("driver-popover-arrow-none"), i.wrapper.style.transform = `translateY(-${C / 2}px)`));
+  }
+}
+function Le() {
+  const e = document.createElement("div");
+  e.classList.add("driver-popover");
+  const o = document.createElement("div");
+  o.classList.add("driver-popover-arrow");
+  const t = document.createElement("header");
+  t.id = "driver-popover-title", t.classList.add("driver-popover-title"), t.style.display = "none", t.innerText = "Popover Title";
+  const i = document.createElement("div");
+  i.id = "driver-popover-description", i.classList.add("driver-popover-description"), i.style.display = "none", i.innerText = "Popover description is here";
+  const d = document.createElement("button");
+  d.type = "button", d.classList.add("driver-popover-close-btn"), d.setAttribute("aria-label", "Close"), d.innerHTML = "&times;";
+  const n = document.createElement("footer");
+  n.classList.add("driver-popover-footer");
+  const f = document.createElement("span");
+  f.classList.add("driver-popover-progress-text"), f.innerText = "";
+  const w = document.createElement("span");
+  w.classList.add("driver-popover-navigation-btns");
+  const r = document.createElement("button");
+  r.type = "button", r.classList.add("driver-popover-prev-btn"), r.innerHTML = "&larr; Previous";
+  const v = document.createElement("button");
+  return v.type = "button", v.classList.add("driver-popover-next-btn"), v.innerHTML = "Next &rarr;", w.appendChild(r), w.appendChild(v), n.appendChild(f), n.appendChild(w), e.appendChild(d), e.appendChild(o), e.appendChild(t), e.appendChild(i), e.appendChild(n), {
+    wrapper: e,
+    arrow: o,
+    title: t,
+    description: i,
+    footer: n,
+    previousButton: r,
+    nextButton: v,
+    closeButton: d,
+    footerButtons: w,
+    progress: f
+  };
+}
+function Te() {
+  var o;
+  const e = l("popover");
+  e && ((o = e.wrapper.parentElement) == null || o.removeChild(e.wrapper));
+}
+function Ae(e = {}) {
+  F(e);
+  function o() {
+    s("allowClose") && g();
+  }
+  function t() {
+    const a = s("overlayClickBehavior");
+    if (s("allowClose") && a === "close") {
+      g();
+      return;
+    }
+    if (typeof a == "function") {
+      const p = l("__activeStep"), c = l("__activeElement");
+      a(c, p, {
+        config: s(),
+        state: l(),
+        driver: _()
+      });
+      return;
+    }
+    a === "nextStep" && i();
+  }
+  function i() {
+    const a = l("activeIndex"), p = s("steps") || [];
+    if (typeof a == "undefined")
+      return;
+    const c = a + 1;
+    p[c] ? v(c) : g();
+  }
+  function d() {
+    const a = l("activeIndex"), p = s("steps") || [];
+    if (typeof a == "undefined")
+      return;
+    const c = a - 1;
+    p[c] ? v(c) : g();
+  }
+  function n(a) {
+    (s("steps") || [])[a] ? v(a) : g();
+  }
+  function f() {
+    var x;
+    if (l("__transitionCallback"))
+      return;
+    const p = l("activeIndex"), c = l("__activeStep"), u = l("__activeElement");
+    if (typeof p == "undefined" || typeof c == "undefined" || typeof l("activeIndex") == "undefined")
+      return;
+    const m = ((x = c.popover) == null ? void 0 : x.onPrevClick) || s("onPrevClick");
+    if (m)
+      return m(u, c, {
+        config: s(),
+        state: l(),
+        driver: _()
+      });
+    d();
+  }
+  function w() {
+    var m;
+    if (l("__transitionCallback"))
+      return;
+    const p = l("activeIndex"), c = l("__activeStep"), u = l("__activeElement");
+    if (typeof p == "undefined" || typeof c == "undefined")
+      return;
+    const h = ((m = c.popover) == null ? void 0 : m.onNextClick) || s("onNextClick");
+    if (h)
+      return h(u, c, {
+        config: s(),
+        state: l(),
+        driver: _()
+      });
+    i();
+  }
+  function r() {
+    l("isInitialized") || (k("isInitialized", !0), document.body.classList.add("driver-active", s("animate") ? "driver-fade" : "driver-simple"), ke(), N("overlayClick", t), N("escapePress", o), N("arrowLeftPress", f), N("arrowRightPress", w));
+  }
+  function v(a = 0) {
+    var $, B, R, W, V, q, K, Y;
+    const p = s("steps");
+    if (!p) {
+      console.error("No steps to drive through"), g();
+      return;
+    }
+    if (!p[a]) {
+      g();
+      return;
+    }
+    k("__activeOnDestroyed", document.activeElement), k("activeIndex", a);
+    const c = p[a], u = p[a + 1], h = p[a - 1], m = (($ = c.popover) == null ? void 0 : $.doneBtnText) || s("doneBtnText") || "Done", x = s("allowClose"), C = typeof ((B = c.popover) == null ? void 0 : B.showProgress) != "undefined" ? (R = c.popover) == null ? void 0 : R.showProgress : s("showProgress"), b = (((W = c.popover) == null ? void 0 : W.progressText) || s("progressText") || "{{current}} of {{total}}").replace("{{current}}", `${a + 1}`).replace("{{total}}", `${p.length}`), P = ((V = c.popover) == null ? void 0 : V.showButtons) || s("showButtons"), E = [
+      "next",
+      "previous",
+      ...x ? ["close"] : []
+    ].filter((ce) => !(P != null && P.length) || P.includes(ce)), T = ((q = c.popover) == null ? void 0 : q.onNextClick) || s("onNextClick"), A = ((K = c.popover) == null ? void 0 : K.onPrevClick) || s("onPrevClick"), H = ((Y = c.popover) == null ? void 0 : Y.onCloseClick) || s("onCloseClick");
+    j({
+      ...c,
+      popover: {
+        showButtons: E,
+        nextBtnText: u ? void 0 : m,
+        disableButtons: [...h ? [] : ["previous"]],
+        showProgress: C,
+        progressText: b,
+        onNextClick: T || (() => {
+          u ? v(a + 1) : g();
+        }),
+        onPrevClick: A || (() => {
+          v(a - 1);
+        }),
+        onCloseClick: H || (() => {
+          g();
+        }),
+        ...(c == null ? void 0 : c.popover) || {}
+      }
+    });
+  }
+  function g(a = !0) {
+    const p = l("__activeElement"), c = l("__activeStep"), u = l("__activeOnDestroyed"), h = s("onDestroyStarted");
+    if (a && h) {
+      const C = !p || (p == null ? void 0 : p.id) === "driver-dummy-element";
+      h(C ? void 0 : p, c, {
+        config: s(),
+        state: l(),
+        driver: _()
+      });
+      return;
+    }
+    const m = (c == null ? void 0 : c.onDeselected) || s("onDeselected"), x = s("onDestroyed");
+    if (document.body.classList.remove("driver-active", "driver-fade", "driver-simple"), _e(), Te(), Ce(), me(), de(), X(), p && c) {
+      const C = p.id === "driver-dummy-element";
+      m && m(C ? void 0 : p, c, {
+        config: s(),
+        state: l(),
+        driver: _()
+      }), x && x(C ? void 0 : p, c, {
+        config: s(),
+        state: l(),
+        driver: _()
+      });
+    }
+    u && u.focus();
+  }
+  const y = {
+    isActive: () => l("isInitialized") || !1,
+    refresh: M,
+    drive: (a = 0) => {
+      r(), v(a);
+    },
+    setConfig: F,
+    setSteps: (a) => {
+      X(), F({
+        ...s(),
+        steps: a
+      });
+    },
+    getConfig: s,
+    getState: l,
+    getActiveIndex: () => l("activeIndex"),
+    isFirstStep: () => l("activeIndex") === 0,
+    isLastStep: () => {
+      const a = s("steps") || [], p = l("activeIndex");
+      return p !== void 0 && p === a.length - 1;
+    },
+    getActiveStep: () => l("activeStep"),
+    getActiveElement: () => l("activeElement"),
+    getPreviousElement: () => l("previousElement"),
+    getPreviousStep: () => l("previousStep"),
+    moveNext: i,
+    movePrevious: d,
+    moveTo: n,
+    hasNextStep: () => {
+      const a = s("steps") || [], p = l("activeIndex");
+      return p !== void 0 && !!a[p + 1];
+    },
+    hasPreviousStep: () => {
+      const a = s("steps") || [], p = l("activeIndex");
+      return p !== void 0 && !!a[p - 1];
+    },
+    highlight: (a) => {
+      r(), j({
+        ...a,
+        popover: a.popover ? {
+          showButtons: [],
+          showProgress: !1,
+          progressText: "",
+          ...a.popover
+        } : void 0
+      });
+    },
+    destroy: () => {
+      g(!1);
+    }
+  };
+  return le(y), y;
+}
+export {
+  Ae as driver
+};