react-headless-tour 0.1.0

package/dist/index.js

@@ -0,0 +1,689 @@
+"use client";
+
+// src/TourContext.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect as useEffect4,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState as useState4
+} from "react";
+import { createPortal } from "react-dom";
+
+// src/motion.ts
+import { useEffect, useState } from "react";
+var EASE_SPRING = "cubic-bezier(0.22, 1, 0.36, 1)";
+function useEntered() {
+  const [entered, setEntered] = useState(false);
+  useEffect(() => {
+    let inner = 0;
+    const outer = requestAnimationFrame(() => {
+      inner = requestAnimationFrame(() => setEntered(true));
+    });
+    return () => {
+      cancelAnimationFrame(outer);
+      cancelAnimationFrame(inner);
+    };
+  }, []);
+  return entered;
+}
+function useIsScrolling(idleMs = 150) {
+  const [scrolling, setScrolling] = useState(false);
+  useEffect(() => {
+    let timer = null;
+    const onScroll = () => {
+      setScrolling(true);
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => setScrolling(false), idleMs);
+    };
+    window.addEventListener("scroll", onScroll, { capture: true, passive: true });
+    return () => {
+      window.removeEventListener("scroll", onScroll, { capture: true });
+      if (timer) clearTimeout(timer);
+    };
+  }, [idleMs]);
+  return scrolling;
+}
+function useReducedMotion() {
+  const [reduced, setReduced] = useState(false);
+  useEffect(() => {
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReduced(mq.matches);
+    const onChange = (e) => setReduced(e.matches);
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, []);
+  return reduced;
+}
+
+// src/useTargetRect.ts
+import { useEffect as useEffect2, useState as useState2 } from "react";
+function resolveTarget(step) {
+  if (!step?.target) return null;
+  if (typeof step.target === "function") return step.target();
+  if (typeof document === "undefined") return null;
+  return document.querySelector(step.target);
+}
+function readRect(el) {
+  const r = el.getBoundingClientRect();
+  return { x: r.left, y: r.top, width: r.width, height: r.height };
+}
+function rectsEqual(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
+function useTargetRect(step, active) {
+  const [rect, setRect] = useState2(null);
+  useEffect2(() => {
+    if (!active || !step) {
+      setRect(null);
+      return;
+    }
+    let el = resolveTarget(step);
+    let frame = 0;
+    let current = null;
+    const update = () => {
+      if (!el || !el.isConnected) el = resolveTarget(step);
+      const next = el ? readRect(el) : null;
+      if (!rectsEqual(current, next)) {
+        current = next;
+        setRect(next);
+      }
+    };
+    const tick = () => {
+      update();
+      frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    update();
+    return () => cancelAnimationFrame(frame);
+  }, [step, active]);
+  return rect;
+}
+
+// src/TourOverlay.tsx
+import { useId } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function TourOverlay({
+  rect,
+  step,
+  interactive,
+  padding,
+  radius,
+  color,
+  blur,
+  className,
+  onMaskClick
+}) {
+  const maskId = useId();
+  const reducedMotion = useReducedMotion();
+  const scrolling = useIsScrolling();
+  const hole = rect ? {
+    x: rect.x - padding,
+    y: rect.y - padding,
+    width: rect.width + padding * 2,
+    height: rect.height + padding * 2
+  } : null;
+  const fill = color ?? "var(--tour-overlay-color, rgba(0, 0, 0, 0.55))";
+  const interactable = Boolean(step.interactable && hole);
+  const holeTransition = reducedMotion || scrolling ? void 0 : ["x", "y", "width", "height", "rx"].map((p) => `${p} 350ms ${EASE_SPRING}`).join(", ");
+  const blockerStyle = {
+    position: "absolute",
+    pointerEvents: interactive ? "auto" : "none",
+    cursor: onMaskClick ? "pointer" : "default"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-tour-overlay": "",
+      className,
+      style: { position: "absolute", inset: 0, pointerEvents: "none" },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: "100%",
+            height: "100%",
+            style: {
+              position: "absolute",
+              inset: 0,
+              backdropFilter: blur ? `blur(${blur}px)` : void 0,
+              WebkitBackdropFilter: blur ? `blur(${blur}px)` : void 0
+            },
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("mask", { id: maskId, children: [
+                /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: "#fff" }),
+                hole && /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    x: hole.x,
+                    y: hole.y,
+                    width: hole.width,
+                    height: hole.height,
+                    rx: radius,
+                    fill: "#000",
+                    style: { transition: holeTransition }
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", fill, mask: `url(#${maskId})` })
+            ]
+          }
+        ),
+        interactable && hole ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { style: { ...blockerStyle, left: 0, top: 0, right: 0, height: Math.max(0, hole.y) }, onClick: onMaskClick }),
+          /* @__PURE__ */ jsx("div", { style: { ...blockerStyle, left: 0, top: hole.y + hole.height, right: 0, bottom: 0 }, onClick: onMaskClick }),
+          /* @__PURE__ */ jsx("div", { style: { ...blockerStyle, left: 0, top: hole.y, width: Math.max(0, hole.x), height: hole.height }, onClick: onMaskClick }),
+          /* @__PURE__ */ jsx("div", { style: { ...blockerStyle, left: hole.x + hole.width, top: hole.y, right: 0, height: hole.height }, onClick: onMaskClick })
+        ] }) : /* @__PURE__ */ jsx("div", { style: { ...blockerStyle, inset: 0 }, onClick: onMaskClick })
+      ]
+    }
+  );
+}
+
+// src/TourPopover.tsx
+import { useEffect as useEffect3, useMemo, useRef, useState as useState3 } from "react";
+import {
+  arrow,
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  size,
+  useFloating
+} from "@floating-ui/react-dom";
+
+// src/DefaultCard.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function DefaultCard(props) {
+  const { step, stepIndex, totalSteps, isFirst, isLast, next, prev, stop, arrow: arrow2, labels, classNames } = props;
+  const buttonBase = {
+    font: "inherit",
+    fontSize: "0.875em",
+    fontWeight: 500,
+    border: "var(--tour-border, 1px solid rgba(0,0,0,0.12))",
+    borderRadius: "calc(var(--tour-radius, 12px) * 0.6)",
+    padding: "0.45em 0.9em",
+    cursor: "pointer",
+    background: "transparent",
+    color: "inherit"
+  };
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      "data-tour-card": "",
+      className: classNames?.card,
+      style: {
+        position: "relative",
+        background: "var(--tour-bg, #ffffff)",
+        color: "var(--tour-fg, #1a1a1a)",
+        fontFamily: "var(--tour-font, inherit)",
+        borderRadius: "var(--tour-radius, 12px)",
+        boxShadow: "var(--tour-shadow, 0 10px 38px -10px rgba(0,0,0,0.35), 0 10px 20px -15px rgba(0,0,0,0.2))",
+        padding: "var(--tour-padding, 16px)",
+        width: "max-content",
+        maxWidth: "min(var(--tour-max-width, 320px), 100%)",
+        boxSizing: "border-box"
+      },
+      children: [
+        arrow2,
+        step.title != null && /* @__PURE__ */ jsx2(
+          "div",
+          {
+            "data-tour-title": "",
+            className: classNames?.title,
+            style: { fontWeight: 600, fontSize: "1em", marginBottom: 6 },
+            children: step.title
+          }
+        ),
+        step.content != null && /* @__PURE__ */ jsx2(
+          "div",
+          {
+            "data-tour-content": "",
+            className: classNames?.content,
+            style: { fontSize: "0.9em", lineHeight: 1.5, color: "var(--tour-muted, #555)" },
+            children: step.content
+          }
+        ),
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            "data-tour-footer": "",
+            className: classNames?.footer,
+            style: { display: "flex", alignItems: "center", gap: 8, marginTop: 14 },
+            children: [
+              /* @__PURE__ */ jsx2(
+                "span",
+                {
+                  "data-tour-progress": "",
+                  className: classNames?.progress,
+                  style: { fontSize: "0.8em", color: "var(--tour-muted, #888)", marginRight: "auto" },
+                  children: labels?.progress ? labels.progress(stepIndex, totalSteps) : `${stepIndex + 1} / ${totalSteps}`
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  "data-tour-skip": "",
+                  className: classNames?.skipButton,
+                  onClick: () => stop("skipped"),
+                  style: { ...buttonBase, border: "none", color: "var(--tour-muted, #888)" },
+                  children: labels?.skip ?? "Skip"
+                }
+              ),
+              !isFirst && /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  "data-tour-prev": "",
+                  className: classNames?.navButton,
+                  onClick: prev,
+                  style: buttonBase,
+                  children: labels?.prev ?? "Back"
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  "data-tour-next": "",
+                  className: classNames?.primaryButton,
+                  onClick: next,
+                  style: {
+                    ...buttonBase,
+                    border: "none",
+                    background: "var(--tour-accent, #1a1a1a)",
+                    color: "var(--tour-accent-fg, #ffffff)"
+                  },
+                  children: isLast ? labels?.finish ?? "Finish" : labels?.next ?? "Next"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/TourPopover.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function TourPopover({
+  rect,
+  step,
+  controls,
+  interactive,
+  offset: offsetDistance,
+  padding,
+  components,
+  classNames,
+  labels
+}) {
+  const arrowRef = useRef(null);
+  const popoverRef = useRef(null);
+  const hasTarget = Boolean(rect);
+  const entered = useEntered();
+  const reducedMotion = useReducedMotion();
+  useEffect3(() => {
+    if (interactive) popoverRef.current?.focus({ preventScroll: true });
+  }, [interactive]);
+  const [maxSize, setMaxSize] = useState3(null);
+  const maxSizeRef = useRef(maxSize);
+  maxSizeRef.current = maxSize;
+  const { refs, floatingStyles, middlewareData, placement, update, isPositioned } = useFloating({
+    placement: step.placement ?? "bottom",
+    strategy: "fixed",
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(offsetDistance + padding),
+      // If neither side of the preferred axis fits (e.g. a full-width target
+      // with placement "right"), try the other axis too.
+      flip({ padding: 12, fallbackAxisSideDirection: "start" }),
+      // crossAxis lets shift pull the popover back into view even when that
+      // means overlapping a large target.
+      shift({ padding: 12, crossAxis: true }),
+      size({
+        padding: 12,
+        apply({ availableWidth, availableHeight }) {
+          const next = {
+            width: Math.max(120, Math.floor(availableWidth)),
+            height: Math.max(80, Math.floor(availableHeight))
+          };
+          const current = maxSizeRef.current;
+          if (!current || Math.abs(current.width - next.width) > 1 || Math.abs(current.height - next.height) > 1) {
+            setMaxSize(next);
+          }
+        }
+      }),
+      arrow({ element: arrowRef, padding: 12 })
+    ]
+  });
+  useEffect3(() => {
+    if (!rect) return;
+    refs.setReference({
+      getBoundingClientRect: () => ({
+        x: rect.x,
+        y: rect.y,
+        width: rect.width,
+        height: rect.height,
+        top: rect.y,
+        left: rect.x,
+        right: rect.x + rect.width,
+        bottom: rect.y + rect.height
+      })
+    });
+    update();
+  }, [rect, refs, update]);
+  const side = placement.split("-")[0];
+  const arrowNode = useMemo(() => {
+    if (!hasTarget) return null;
+    const { x, y } = middlewareData.arrow ?? {};
+    const staticSide = { top: "bottom", bottom: "top", left: "right", right: "left" }[side];
+    const ArrowComponent = components?.Arrow;
+    return /* @__PURE__ */ jsx3(
+      "div",
+      {
+        ref: arrowRef,
+        "data-tour-arrow": "",
+        className: classNames?.arrow,
+        style: {
+          position: "absolute",
+          left: x != null ? x : void 0,
+          top: y != null ? y : void 0,
+          [staticSide]: "calc(var(--tour-arrow-size, 12px) / -2)",
+          pointerEvents: "none"
+        },
+        children: ArrowComponent ? /* @__PURE__ */ jsx3(ArrowComponent, { side }) : /* @__PURE__ */ jsx3(
+          "div",
+          {
+            style: {
+              width: "var(--tour-arrow-size, 12px)",
+              height: "var(--tour-arrow-size, 12px)",
+              transform: "rotate(45deg)",
+              background: "var(--tour-bg, #ffffff)",
+              borderRadius: 2
+            }
+          }
+        )
+      }
+    );
+  }, [hasTarget, middlewareData.arrow, side, components?.Arrow, classNames?.arrow]);
+  const CustomCard = components?.Card;
+  const cardProps = { ...controls, step, arrow: arrowNode };
+  const positionStyles = hasTarget ? floatingStyles : {
+    position: "fixed",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)"
+  };
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ref: (node) => {
+        refs.setFloating(node);
+        popoverRef.current = node;
+      },
+      tabIndex: -1,
+      "data-tour-popover": "",
+      className: classNames?.popover,
+      style: {
+        ...positionStyles,
+        // Never paint before Floating UI has computed a real position — a
+        // freshly mounted popover would otherwise flash at a stale spot.
+        visibility: hasTarget && !isPositioned ? "hidden" : void 0,
+        pointerEvents: interactive ? "auto" : "none",
+        maxWidth: hasTarget && maxSize ? Math.min(maxSize.width, window.innerWidth - 24) : "calc(100vw - 24px)",
+        maxHeight: hasTarget && maxSize ? maxSize.height : "calc(100vh - 24px)",
+        overflowY: "auto"
+      },
+      role: "dialog",
+      "aria-modal": "false",
+      "aria-label": `Tour step ${controls.stepIndex + 1} of ${controls.totalSteps}${typeof step.title === "string" ? `: ${step.title}` : ""}`,
+      children: /* @__PURE__ */ jsx3(
+        "div",
+        {
+          style: {
+            opacity: entered ? 1 : 0,
+            transform: entered ? "none" : `scale(0.96) translateY(${side === "top" ? 6 : -6}px)`,
+            transition: reducedMotion ? void 0 : `opacity 200ms ease, transform 250ms ${EASE_SPRING}`
+          },
+          children: CustomCard ? /* @__PURE__ */ jsx3(CustomCard, { ...cardProps }) : /* @__PURE__ */ jsx3(DefaultCard, { ...cardProps, labels, classNames })
+        }
+      )
+    }
+  );
+}
+
+// src/TourContext.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var TourContext = createContext(null);
+var EXIT_DURATION_MS = 220;
+function useTour() {
+  const ctx = useContext(TourContext);
+  if (!ctx) throw new Error("useTour must be used within a <TourProvider>");
+  return ctx;
+}
+function TourLayer({
+  closing,
+  zIndex,
+  className,
+  theme,
+  children
+}) {
+  const entered = useEntered();
+  const reducedMotion = useReducedMotion();
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-tour-root": "",
+      className,
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: `var(--tour-z-index, ${zIndex})`,
+        pointerEvents: "none",
+        opacity: entered && !closing ? 1 : 0,
+        transition: reducedMotion ? void 0 : `opacity ${EXIT_DURATION_MS}ms ease`,
+        ...theme
+      },
+      children
+    }
+  );
+}
+function TourProvider(props) {
+  const {
+    children,
+    steps,
+    autoStart = false,
+    stepIndex: controlledIndex,
+    onStepChange,
+    onStart,
+    onStop,
+    keyboard = true,
+    lockScroll = false,
+    scrollIntoViewOptions = { behavior: "smooth", block: "center", inline: "nearest" },
+    portalContainer
+  } = props;
+  const [mounted, setMounted] = useState4(false);
+  const [phase, setPhase] = useState4("idle");
+  const [internalIndex, setInternalIndex] = useState4(0);
+  const isControlled = controlledIndex !== void 0;
+  const isActive = phase === "active";
+  const stepIndex = isActive ? isControlled ? controlledIndex : internalIndex : -1;
+  const step = stepIndex >= 0 && stepIndex < steps.length ? steps[stepIndex] : null;
+  const closingSnapshot = useRef2(null);
+  const exitTimer = useRef2(null);
+  const stateRef = useRef2({ steps, stepIndex, step, phase, onStepChange, onStart, onStop });
+  stateRef.current = { steps, stepIndex, step, phase, onStepChange, onStart, onStop };
+  useEffect4(() => setMounted(true), []);
+  useEffect4(
+    () => () => {
+      if (exitTimer.current) clearTimeout(exitTimer.current);
+    },
+    []
+  );
+  const setIndex = useCallback(
+    (index) => {
+      const s = stateRef.current;
+      const clamped = Math.max(0, Math.min(index, s.steps.length - 1));
+      if (clamped === s.stepIndex) return;
+      s.step?.onExit?.(s.step, s.stepIndex);
+      if (!isControlled) setInternalIndex(clamped);
+      s.onStepChange?.(clamped, s.steps[clamped]);
+    },
+    [isControlled]
+  );
+  const start = useCallback(
+    (atIndex = 0) => {
+      const s = stateRef.current;
+      if (s.phase === "active" || s.steps.length === 0) return;
+      if (exitTimer.current) clearTimeout(exitTimer.current);
+      const clamped = Math.max(0, Math.min(atIndex, s.steps.length - 1));
+      if (!isControlled) setInternalIndex(clamped);
+      else s.onStepChange?.(clamped, s.steps[clamped]);
+      setPhase("active");
+      s.onStart?.();
+    },
+    [isControlled]
+  );
+  const stop = useCallback((reason = "programmatic") => {
+    const s = stateRef.current;
+    if (s.phase !== "active") return;
+    s.step?.onExit?.(s.step, s.stepIndex);
+    if (s.step) closingSnapshot.current = { step: s.step, stepIndex: s.stepIndex };
+    setPhase("closing");
+    if (exitTimer.current) clearTimeout(exitTimer.current);
+    exitTimer.current = setTimeout(() => {
+      closingSnapshot.current = null;
+      setPhase("idle");
+    }, EXIT_DURATION_MS);
+    s.onStop?.(reason, s.stepIndex);
+  }, []);
+  const next = useCallback(() => {
+    const s = stateRef.current;
+    if (s.phase !== "active") return;
+    if (s.stepIndex >= s.steps.length - 1) stop("finished");
+    else setIndex(s.stepIndex + 1);
+  }, [setIndex, stop]);
+  const prev = useCallback(() => {
+    const s = stateRef.current;
+    if (s.phase !== "active" || s.stepIndex <= 0) return;
+    setIndex(s.stepIndex - 1);
+  }, [setIndex]);
+  const goTo = useCallback((index) => setIndex(index), [setIndex]);
+  const autoStartedRef = useRef2(false);
+  useEffect4(() => {
+    if (autoStart && mounted && !autoStartedRef.current) {
+      autoStartedRef.current = true;
+      start(0);
+    }
+  }, [autoStart, mounted, start]);
+  useEffect4(() => {
+    if (!isActive || !step) return;
+    step.onEnter?.(step, stepIndex);
+    if (!step.disableScroll) {
+      const el = resolveTarget(step);
+      const reducedMotion = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      el?.scrollIntoView(
+        reducedMotion ? { ...scrollIntoViewOptions, behavior: "auto" } : scrollIntoViewOptions
+      );
+    }
+  }, [isActive, stepIndex]);
+  useEffect4(() => {
+    if (!isActive || !keyboard) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") stop("escape");
+      else if (e.key === "ArrowRight" || e.key === "Enter") next();
+      else if (e.key === "ArrowLeft") prev();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [isActive, keyboard, next, prev, stop]);
+  useEffect4(() => {
+    if (!isActive || !lockScroll) return;
+    const previous = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previous;
+    };
+  }, [isActive, lockScroll]);
+  const renderStep = step ?? closingSnapshot.current?.step ?? null;
+  const renderIndex = step ? stepIndex : closingSnapshot.current?.stepIndex ?? -1;
+  const targetRect = useTargetRect(renderStep, phase !== "idle");
+  const controls = useMemo2(
+    () => ({
+      isActive,
+      stepIndex,
+      totalSteps: steps.length,
+      step,
+      isFirst: stepIndex <= 0,
+      isLast: stepIndex === steps.length - 1,
+      start,
+      stop,
+      next,
+      prev,
+      goTo
+    }),
+    [isActive, stepIndex, steps.length, step, start, stop, next, prev, goTo]
+  );
+  const container = portalContainer ?? (typeof document !== "undefined" ? document.body : null);
+  const zIndex = props.zIndex ?? 1e4;
+  const closing = phase === "closing";
+  return /* @__PURE__ */ jsxs3(TourContext.Provider, { value: controls, children: [
+    children,
+    mounted && container && phase !== "idle" && renderStep && createPortal(
+      /* @__PURE__ */ jsxs3(
+        TourLayer,
+        {
+          closing,
+          zIndex,
+          className: props.classNames?.root,
+          theme: props.theme,
+          children: [
+            (props.showOverlay ?? true) && /* @__PURE__ */ jsx4(
+              TourOverlay,
+              {
+                rect: targetRect,
+                step: renderStep,
+                interactive: !closing,
+                padding: renderStep.spotlightPadding ?? props.spotlightPadding ?? 8,
+                radius: renderStep.spotlightRadius ?? props.spotlightRadius ?? 8,
+                color: props.overlayColor,
+                blur: props.overlayBlur ?? 0,
+                className: props.classNames?.overlay,
+                onMaskClick: props.closeOnMaskClick ? () => stop("mask") : void 0
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              TourPopover,
+              {
+                rect: targetRect,
+                controls,
+                step: renderStep,
+                interactive: !closing,
+                offset: props.offset ?? 12,
+                padding: renderStep.spotlightPadding ?? props.spotlightPadding ?? 8,
+                components: props.components,
+                classNames: props.classNames,
+                labels: props.labels
+              },
+              renderIndex
+            )
+          ]
+        }
+      ),
+      container
+    )
+  ] });
+}
+export {
+  DefaultCard,
+  TourProvider,
+  useTour
+};
+//# sourceMappingURL=index.js.map