@layers-app/shared 0.4.0 → 0.4.2

package/dist/components/Notification/NotificationCard.js

@@ -1,92 +1,93 @@
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import { useTranslation as g } from "react-i18next";
-import { Flex as a, Text as l, Tooltip as x } from "@mantine/core";
-import { IconFileText as h, IconCheckbox as u, IconX as y } from "@tabler/icons-react";
-const b = p(
-  ({ isFocused: o, notification: e }, n) => {
-    const { i18n: s } = g("appContainer"), i = (d) => {
-      const m = s.language === "ru" ? "ru-RU" : "en-US";
-      return d.toLocaleDateString(m, {
-        day: "numeric",
-        month: "long",
-        year: "numeric"
-      });
-    }, c = new Date(e.createdAt), f = i(c);
-    return /* @__PURE__ */ t(
-      a,
-      {
-        ref: n,
-        px: 8,
-        w: "100%",
-        py: "sm",
-        justify: "flex-start",
-        style: {
-          backgroundColor: o ? "#f0f0f0" : "transparent",
-          cursor: "pointer",
-          borderRadius: "4px"
-        },
-        children: [
-          /* @__PURE__ */ t(a, { w: 274, justify: "flex-start", children: [
-            /* @__PURE__ */ r(
-              h,
-              {
-                size: 20,
-                color: "gray",
-                style: { alignSelf: "flex-start" }
-              }
-            ),
-            /* @__PURE__ */ r(l, { fz: 16, style: { alignSelf: "flex-start" }, children: e.pageIcon === "DefaultIcon" ? /* @__PURE__ */ r(u, { size: 20, color: "gray" }) : e.pageIcon }),
-            /* @__PURE__ */ t(a, { direction: "column", gap: 0, w: 200, children: [
-              /* @__PURE__ */ r(
-                x,
-                {
-                  disabled: e.description.length < 40,
-                  label: e.description,
-                  children: /* @__PURE__ */ r(
-                    l,
-                    {
-                      fz: "sm",
-                      style: {
-                        alignSelf: "flex-start",
-                        lineHeight: "16px"
-                      },
-                      lineClamp: 2,
-                      children: e.description
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ t(
-                l,
-                {
-                  c: "dimmed",
-                  fz: "sm",
-                  h: "16",
-                  style: { alignSelf: "flex-start" },
-                  children: [
-                    " ",
-                    e.pageName
-                  ]
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ r(l, { c: "dimmed", fz: "sm", w: 98, style: { alignSelf: "flex-start" }, children: f }),
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { useTranslation as p } from "react-i18next";
+import { Flex as a, Text as t, Tooltip as g } from "@mantine/core";
+import { IconFileText as x, IconCheckbox as h, IconX as u } from "@tabler/icons-react";
+const D = ({
+  isFocused: n,
+  notification: e,
+  ref: s
+}) => {
+  const { i18n: o } = p("appContainer"), i = (f) => {
+    const m = o.language === "ru" ? "ru-RU" : "en-US";
+    return f.toLocaleDateString(m, {
+      day: "numeric",
+      month: "long",
+      year: "numeric"
+    });
+  }, c = new Date(e.createdAt), d = i(c);
+  return /* @__PURE__ */ l(
+    a,
+    {
+      ref: s,
+      px: 8,
+      w: "100%",
+      py: "sm",
+      justify: "flex-start",
+      style: {
+        backgroundColor: n ? "#f0f0f0" : "transparent",
+        cursor: "pointer",
+        borderRadius: "4px"
+      },
+      children: [
+        /* @__PURE__ */ l(a, { w: 274, justify: "flex-start", children: [
           /* @__PURE__ */ r(
-            y,
+            x,
             {
-              width: 12,
-              height: 12,
+              size: 20,
               color: "gray",
-              style: { alignSelf: "flex-start", marginTop: "5px" }
+              style: { alignSelf: "flex-start" }
             }
-          )
-        ]
-      }
-    );
-  }
-);
+          ),
+          /* @__PURE__ */ r(t, { fz: 16, style: { alignSelf: "flex-start" }, children: e.pageIcon === "DefaultIcon" ? /* @__PURE__ */ r(h, { size: 20, color: "gray" }) : e.pageIcon }),
+          /* @__PURE__ */ l(a, { direction: "column", gap: 0, w: 200, children: [
+            /* @__PURE__ */ r(
+              g,
+              {
+                disabled: e.description.length < 40,
+                label: e.description,
+                children: /* @__PURE__ */ r(
+                  t,
+                  {
+                    fz: "sm",
+                    style: {
+                      alignSelf: "flex-start",
+                      lineHeight: "16px"
+                    },
+                    lineClamp: 2,
+                    children: e.description
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ l(
+              t,
+              {
+                c: "dimmed",
+                fz: "sm",
+                h: "16",
+                style: { alignSelf: "flex-start" },
+                children: [
+                  " ",
+                  e.pageName
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ r(t, { c: "dimmed", fz: "sm", w: 98, style: { alignSelf: "flex-start" }, children: d }),
+        /* @__PURE__ */ r(
+          u,
+          {
+            width: 12,
+            height: 12,
+            color: "gray",
+            style: { alignSelf: "flex-start", marginTop: "5px" }
+          }
+        )
+      ]
+    }
+  );
+};
 export {
-  b as default
+  D as default
 };

package/dist/components/OnboardingTour/OnboardingTourFooter.d.ts

@@ -1,4 +1,4 @@
-import { type OnboardingTourController } from '@gfazioli/mantine-onboarding-tour';
+import { type OnboardingTourController } from '@layers-app/onboarding-tour';
 export declare const DefaultSingleFooter: ({ controller, label, }: {
     controller: OnboardingTourController;
     label: string;
@@ -12,6 +12,11 @@ export declare const DefaultMultiFooter: ({ controller, stepIndex, totalSteps, l
         back: string;
         next: string;
         done: string;
+        continue?: string;
     };
 }) => import("react/jsx-runtime").JSX.Element;
+export declare const DefaultTourHeader: ({ controller, title, }: {
+    controller: OnboardingTourController;
+    title: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=OnboardingTourFooter.d.ts.map

package/dist/components/OnboardingTour/OnboardingTourFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OnboardingTourFooter.d.ts","sourceRoot":"","sources":["../../../src/components/OnboardingTour/OnboardingTourFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,mCAAmC,CAAC;AAGlF,eAAO,MAAM,mBAAmB,GAAI,wBAGjC;IACD,UAAU,EAAE,wBAAwB,CAAC;IACrC,KAAK,EAAE,MAAM,CAAC;CACf,4CAMA,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,gDAKhC;IACD,UAAU,EAAE,wBAAwB,CAAC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;CACtE,4CA+BA,CAAC"}
+{"version":3,"file":"OnboardingTourFooter.d.ts","sourceRoot":"","sources":["../../../src/components/OnboardingTour/OnboardingTourFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAI5E,eAAO,MAAM,mBAAmB,GAAI,wBAGjC;IACD,UAAU,EAAE,wBAAwB,CAAC;IACrC,KAAK,EAAE,MAAM,CAAC;CACf,4CAMA,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,gDAKhC;IACD,UAAU,EAAE,wBAAwB,CAAC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,4CAiCA,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,wBAG/B;IACD,UAAU,EAAE,wBAAwB,CAAC;IACrC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,4CAaA,CAAC"}

package/dist/components/OnboardingTour/OnboardingTourFooter.js

@@ -1,40 +1,58 @@
-import { jsx as t, jsxs as c } from "react/jsx-runtime";
-import { Group as r, Button as s, Text as u } from "@mantine/core";
-const a = ({
-  controller: e,
-  label: i
-}) => /* @__PURE__ */ t(r, { justify: "flex-end", mt: "md", children: /* @__PURE__ */ t(s, { size: "sm", onClick: () => e.endTour(), children: i }) }), h = ({
-  controller: e,
-  stepIndex: i,
-  totalSteps: d,
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { Group as r, Button as s, Text as p, ActionIcon as d } from "@mantine/core";
+import { IconX as f } from "@tabler/icons-react";
+const g = ({
+  controller: i,
+  label: t
+}) => /* @__PURE__ */ e(r, { justify: "flex-end", children: /* @__PURE__ */ e(s, { size: "sm", onClick: () => i.endTour(), children: t }) }), k = ({
+  controller: i,
+  stepIndex: t,
+  totalSteps: u,
   labels: n
 }) => {
-  const m = i === 0, o = i === d - 1;
-  return /* @__PURE__ */ c(r, { justify: "space-between", mt: "md", children: [
-    /* @__PURE__ */ t(u, { size: "sm", c: "gray.5", children: n.stepOf }),
-    /* @__PURE__ */ c(r, { gap: "xs", children: [
-      !m && /* @__PURE__ */ t(
+  const c = t === 0, a = t === u - 1, l = c && n.continue ? n.continue : n.next;
+  return /* @__PURE__ */ o(r, { justify: "space-between", children: [
+    /* @__PURE__ */ e(p, { size: "sm", c: "gray.5", children: n.stepOf }),
+    /* @__PURE__ */ o(r, { gap: "xs", children: [
+      !c && /* @__PURE__ */ e(
         s,
         {
           variant: "subtle",
           color: "gray.5",
           size: "sm",
-          onClick: () => e.prevStep(),
+          onClick: () => i.prevStep(),
           children: n.back
         }
       ),
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ e(
         s,
         {
           size: "sm",
-          onClick: () => o ? e.endTour() : e.nextStep(),
-          children: o ? n.done : n.next
+          onClick: () => a ? i.endTour() : i.nextStep(),
+          children: a ? n.done : l
         }
       )
     ] })
   ] });
-};
+}, y = ({
+  controller: i,
+  title: t
+}) => /* @__PURE__ */ o(r, { justify: "space-between", align: "flex-start", gap: "xs", wrap: "nowrap", children: [
+  /* @__PURE__ */ e("div", { style: { flex: 1 }, children: t }),
+  /* @__PURE__ */ e(
+    d,
+    {
+      variant: "subtle",
+      color: "gray",
+      size: "sm",
+      onClick: () => i.skipTour(),
+      "aria-label": "Skip tour",
+      children: /* @__PURE__ */ e(f, { size: 16 })
+    }
+  )
+] });
 export {
-  h as DefaultMultiFooter,
-  a as DefaultSingleFooter
+  k as DefaultMultiFooter,
+  g as DefaultSingleFooter,
+  y as DefaultTourHeader
 };

package/dist/components/OnboardingTour/OnboardingTourWrapper.d.ts

@@ -1,13 +1,12 @@
-import { type ReactNode } from 'react';
-import { type OnboardingTourProps, type OnboardingTourStep } from '@gfazioli/mantine-onboarding-tour';
-import './OnboardingTourWrapper.css';
+import { type MutableRefObject, type ReactNode } from 'react';
+import { type OnboardingTourController, type OnboardingTourProps, type OnboardingTourStep } from '@layers-app/onboarding-tour';
 export interface OnboardingTourWrapperProps extends Partial<Omit<OnboardingTourProps, 'tour' | 'started' | 'children'>> {
     featureKey: string;
     tour: OnboardingTourStep[];
     children: ReactNode;
     onComplete?: () => void;
     dependsOn?: string;
-    withPopoverMoveAnimation?: boolean;
+    controllerRef?: MutableRefObject<OnboardingTourController | null>;
 }
-export declare const OnboardingTourWrapper: ({ featureKey, tour, children, onComplete, dependsOn, withPopoverMoveAnimation, classNames, focusRevealProps: externalFocusRevealProps, onOnboardingTourEnd: externalOnEnd, onOnboardingTourClose: externalOnClose, onOnboardingTourChange: externalOnChange, onOnboardingTourStart: externalOnStart, ...rest }: OnboardingTourWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const OnboardingTourWrapper: ({ featureKey, tour, children, onComplete, dependsOn, controllerRef, classNames, focusRevealProps: externalFocusRevealProps, onOnboardingTourEnd: externalOnEnd, onOnboardingTourSkip: externalOnClose, onOnboardingTourChange: externalOnChange, onOnboardingTourStart: externalOnStart, ...rest }: OnboardingTourWrapperProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=OnboardingTourWrapper.d.ts.map

package/dist/components/OnboardingTour/OnboardingTourWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OnboardingTourWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/OnboardingTour/OnboardingTourWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAA2C,MAAM,OAAO,CAAC;AAGhF,OAAO,EAGL,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACxB,MAAM,mCAAmC,CAAC;AAS3C,OAAO,6BAA6B,CAAC;AAErC,MAAM,WAAW,0BACf,SAAQ,OAAO,CAAC,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;IAC3E,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,kBAAkB,EAAE,CAAC;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AA+BD,eAAO,MAAM,qBAAqB,GAAI,gTAcnC,0BAA0B,4CAiP5B,CAAC"}
+{"version":3,"file":"OnboardingTourWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/OnboardingTour/OnboardingTourWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,KAAK,wBAAwB,EAC7B,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACxB,MAAM,6BAA6B,CAAC;AAcrC,MAAM,WAAW,0BACf,SAAQ,OAAO,CAAC,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;IAC3E,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,kBAAkB,EAAE,CAAC;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,gBAAgB,CAAC,wBAAwB,GAAG,IAAI,CAAC,CAAC;CACnE;AA4BD,eAAO,MAAM,qBAAqB,GAAI,oSAcnC,0BAA0B,4CA4J5B,CAAC"}

package/dist/components/OnboardingTour/OnboardingTourWrapper.js

@@ -1,164 +1,128 @@
-import { jsx as p, Fragment as q } from "react/jsx-runtime";
-import { useRef as x, useCallback as A, useMemo as R, useEffect as W } from "react";
-import { useTranslation as M } from "react-i18next";
-import { OnboardingTour as U } from "@gfazioli/mantine-onboarding-tour";
-import { Text as D } from "@mantine/core";
-import { DefaultSingleFooter as V, DefaultMultiFooter as G } from "./OnboardingTourFooter.js";
-import { useOnboardingTour as H } from "./useOnboardingTour.js";
-/* empty css                          */
-const w = "onboarding-tour-popover-dropdown", T = "data-onboarding-tour-active-dropdown", J = (n) => typeof n == "string" ? /* @__PURE__ */ p(D, { fw: 500, size: "md", c: "white", mb: 4, children: n }) : n, K = (n) => typeof n == "string" ? /* @__PURE__ */ p(D, { size: "sm", c: "gray.3", children: n }) : n, nt = ({
-  featureKey: n,
+import { jsx as a, Fragment as E } from "react/jsx-runtime";
+import { useMemo as b, useCallback as m } from "react";
+import { useTranslation as F } from "react-i18next";
+import { OnboardingTour as M } from "@layers-app/onboarding-tour";
+import { Text as v } from "@mantine/core";
+import { DefaultSingleFooter as H, DefaultMultiFooter as N, DefaultTourHeader as W } from "./OnboardingTourFooter.js";
+import { useOnboardingTour as q, getSavedStepIndex as A, saveStepIndex as G } from "./useOnboardingTour.js";
+const J = (o) => typeof o == "string" ? /* @__PURE__ */ a(v, { fw: 500, size: "md", c: "white", mb: 4, children: o }) : o, L = (o) => typeof o == "string" ? /* @__PURE__ */ a(v, { size: "sm", c: "gray.3", children: o }) : o, $ = ({
+  featureKey: o,
   tour: d,
-  children: P,
-  onComplete: m,
+  children: l,
+  onComplete: p,
   dependsOn: k,
-  withPopoverMoveAnimation: O = !1,
-  classNames: N = {},
-  focusRevealProps: g,
-  onOnboardingTourEnd: C,
-  onOnboardingTourClose: S,
-  onOnboardingTourChange: $,
-  onOnboardingTourStart: E,
-  ...F
+  controllerRef: s,
+  classNames: x = {},
+  focusRevealProps: c,
+  onOnboardingTourEnd: T,
+  onOnboardingTourSkip: S,
+  onOnboardingTourChange: h,
+  onOnboardingTourStart: O,
+  ...I
 }) => {
-  const { t: l } = M("pages"), { started: y, complete: f } = H(n, { dependsOn: k }), c = x(null), b = x(null), B = A(() => {
-    f(), m?.(), C?.();
-  }, [f, m, C]), _ = A(() => {
-    f(), m?.(), S?.();
-  }, [f, m, S]), j = R(() => {
-    const o = d.length, e = o === 1;
-    return d.map((r, s) => {
-      const a = {
+  const { t: e } = F("pages"), { started: P, complete: u } = q(o, { dependsOn: k }), y = b(
+    () => A(o),
+    [o]
+  ), B = m(
+    (n) => {
+      const i = d.findIndex((r) => r.id === n.id);
+      i >= 0 && G(o, i), h?.(n);
+    },
+    [o, d, h]
+  ), C = m(() => {
+    u(), p?.(), T?.();
+  }, [u, p, T]), D = m(() => {
+    u(), p?.(), S?.();
+  }, [u, p, S]), j = b(() => {
+    const n = d.length, i = n === 1;
+    return d.map((r, w) => {
+      const g = J(r.title), f = {
         ...r,
-        title: J(r.title),
-        content: K(r.content)
+        title: void 0,
+        header: (t) => /* @__PURE__ */ a(
+          W,
+          {
+            controller: t,
+            title: typeof g == "function" ? g(t) : g
+          }
+        ),
+        content: L(r.content)
       };
-      return r.footer === void 0 && (e ? a.footer = (u) => /* @__PURE__ */ p(
-        V,
+      return r.footer === void 0 && (i ? f.footer = (t) => (s && (s.current = t), /* @__PURE__ */ a(
+        H,
         {
-          controller: u,
-          label: l("onboarding.continue")
+          controller: t,
+          label: e("onboarding.continue")
         }
-      ) : a.footer = (u) => /* @__PURE__ */ p(
-        G,
+      )) : f.footer = (t) => (s && (s.current = t), /* @__PURE__ */ a(
+        N,
         {
-          controller: u,
-          stepIndex: s,
-          totalSteps: o,
+          controller: t,
+          stepIndex: w,
+          totalSteps: n,
           labels: {
-            stepOf: l("onboarding.stepOf", {
-              current: s + 1,
-              total: o
+            stepOf: e("onboarding.stepOf", {
+              current: w + 1,
+              total: n
             }),
-            back: l("onboarding.back"),
-            next: l("onboarding.next"),
-            done: l("onboarding.done")
+            back: e("onboarding.back"),
+            next: e("onboarding.next"),
+            done: e("onboarding.done"),
+            continue: e("onboarding.continue")
           }
         }
-      )), a;
+      ))), f;
     });
-  }, [d, l]), z = R(() => {
-    const o = typeof g == "object" ? g : void 0, e = o?.popoverProps ?? {}, r = e.classNames ?? {}, s = e.styles ?? {}, a = [w, r.dropdown].filter(Boolean).join(" ");
+  }, [d, e, s]), z = b(() => {
+    const n = typeof c == "object" ? c : void 0, i = n?.popoverProps ?? {}, r = i.styles ?? {};
     return {
-      ...o,
-      disableTargetInteraction: o?.disableTargetInteraction ?? !0,
-      overlayProps: {
-        blur: 0,
-        ...o?.overlayProps
-      },
+      ...n,
+      disableTargetInteraction: n?.disableTargetInteraction ?? !0,
       popoverProps: {
         position: "bottom",
         offset: 10,
-        transitionProps: {
-          duration: 0,
-          ...e.transitionProps ?? {}
-        },
-        ...e,
-        classNames: {
-          ...r,
-          dropdown: a
-        },
+        ...i,
         styles: {
-          ...s,
+          ...r,
           dropdown: {
             backgroundColor: "var(--mantine-color-dark-7)",
             padding: 16,
             color: "white",
             border: "none",
             width: 300,
-            ...s.dropdown
+            ...r.dropdown
           },
           arrow: {
             backgroundColor: "var(--mantine-color-dark-7)",
             border: "none",
-            ...s.arrow
+            ...r.arrow
           }
         }
       }
     };
-  }, [g]);
-  return W(() => {
-    if (!y || !O) return;
-    let o = 0;
-    const e = document.createElement("style");
-    e.setAttribute("data-onboarding-tour-popover-animation", "true"), e.textContent = `.${w}:not([${T}]) { opacity: 0 !important; pointer-events: none !important; }`, document.head.appendChild(e);
-    const r = (t) => {
-      t.removeAttribute(T), t.style.removeProperty("position"), t.style.removeProperty("top"), t.style.removeProperty("left"), t.style.removeProperty("width"), t.style.removeProperty("transform"), t.style.removeProperty("opacity"), t.style.removeProperty("pointer-events"), t.style.removeProperty("will-change"), t.style.removeProperty("transition");
-    }, s = (t) => {
-      const i = t.getBoundingClientRect();
-      if (i.width === 0 || i.height === 0) return;
-      const v = i.top, h = i.left, I = b.current?.top ?? v, L = b.current?.left ?? h;
-      c.current && c.current !== t && r(c.current), c.current = t, t.setAttribute(T, "true"), Object.assign(t.style, {
-        position: "fixed",
-        top: `${I}px`,
-        left: `${L}px`,
-        width: `${i.width}px`,
-        transform: "none",
-        opacity: "1",
-        pointerEvents: "auto",
-        willChange: "top, left",
-        transition: "top 260ms cubic-bezier(0.2, 0, 0, 1), left 260ms cubic-bezier(0.2, 0, 0, 1)"
-      }), requestAnimationFrame(() => {
-        t.isConnected && (t.style.top = `${v}px`, t.style.left = `${h}px`);
-      }), b.current = { top: v, left: h };
-    }, a = () => {
-      const t = Array.from(
-        document.querySelectorAll(`.${w}`)
-      ), i = t[t.length - 1];
-      i && s(i);
-    }, u = new MutationObserver(() => {
-      cancelAnimationFrame(o), o = requestAnimationFrame(a);
-    });
-    return a(), u.observe(document.body, { childList: !0, subtree: !0 }), () => {
-      u.disconnect(), cancelAnimationFrame(o), e.remove(), c.current && (r(c.current), c.current = null), b.current = null;
-    };
-  }, [y, O]), d.length === 0 ? /* @__PURE__ */ p(q, { children: P }) : /* @__PURE__ */ p(
-    U,
+  }, [c]);
+  return d.length === 0 ? /* @__PURE__ */ a(E, { children: l }) : /* @__PURE__ */ a(
+    M,
     {
       tour: j,
-      started: y,
-      onOnboardingTourStart: () => {
-        E?.();
-      },
-      onOnboardingTourChange: (o) => {
-        $?.(o);
-      },
-      onOnboardingTourEnd: B,
-      onOnboardingTourClose: _,
+      started: P,
+      initialStepIndex: y,
+      onOnboardingTourStart: O,
+      onOnboardingTourChange: B,
+      onOnboardingTourEnd: C,
+      onOnboardingTourSkip: D,
       withPrevButton: !1,
       withNextButton: !1,
       withSkipButton: !1,
       withStepper: !1,
       maw: 300,
-      classNames: {
-        ...N
-      },
+      classNames: x,
       focusRevealProps: z,
-      ...F,
-      children: P
+      ...I,
+      children: l
     }
   );
 };
 export {
-  nt as OnboardingTourWrapper
+  $ as OnboardingTourWrapper
 };

package/dist/components/OnboardingTour/index.d.ts

@@ -1,4 +1,4 @@
 export { OnboardingTourWrapper } from './OnboardingTourWrapper';
 export type { OnboardingTourWrapperProps } from './OnboardingTourWrapper';
-export { useOnboardingTour, isOnboardingCompleted, resetOnboarding, } from './useOnboardingTour';
+export { useOnboardingTour, isOnboardingCompleted, resetOnboarding, getSavedStepIndex, saveStepIndex, clearSavedStep, setOnboardingUserId, } from './useOnboardingTour';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/OnboardingTour/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/OnboardingTour/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,eAAe,GAChB,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/OnboardingTour/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,eAAe,EACf,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,mBAAmB,GACpB,MAAM,qBAAqB,CAAC"}

package/dist/components/OnboardingTour/useOnboardingTour.d.ts

@@ -1,5 +1,9 @@
+export declare const setOnboardingUserId: (userId: string | null) => void;
 export declare const isOnboardingCompleted: (featureKey: string) => boolean;
 export declare const resetOnboarding: (featureKey: string) => void;
+export declare const getSavedStepIndex: (featureKey: string) => number | undefined;
+export declare const saveStepIndex: (featureKey: string, stepIndex: number) => void;
+export declare const clearSavedStep: (featureKey: string) => void;
 interface UseOnboardingTourOptions {
     dependsOn?: string;
 }

package/dist/components/OnboardingTour/useOnboardingTour.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useOnboardingTour.d.ts","sourceRoot":"","sources":["../../../src/components/OnboardingTour/useOnboardingTour.ts"],"names":[],"mappings":"AAyBA,eAAO,MAAM,qBAAqB,GAAI,YAAY,MAAM,KAAG,OAE1D,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,YAAY,MAAM,KAAG,IAOpD,CAAC;AAEF,UAAU,wBAAwB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,uBAAuB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,iBAAiB,GAC5B,YAAY,MAAM,EAClB,UAAU,wBAAwB,KACjC,uBAwDF,CAAC"}
+{"version":3,"file":"useOnboardingTour.d.ts","sourceRoot":"","sources":["../../../src/components/OnboardingTour/useOnboardingTour.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,mBAAmB,GAAI,QAAQ,MAAM,GAAG,IAAI,KAAG,IAE3D,CAAC;AA4CF,eAAO,MAAM,qBAAqB,GAAI,YAAY,MAAM,KAAG,OAE1D,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,YAAY,MAAM,KAAG,IAUpD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,YAAY,MAAM,KAAG,MAAM,GAAG,SAI/D,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,YAAY,MAAM,EAAE,WAAW,MAAM,KAAG,IAIrE,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,YAAY,MAAM,KAAG,IAInD,CAAC;AAEF,UAAU,wBAAwB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,uBAAuB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,iBAAiB,GAC5B,YAAY,MAAM,EAClB,UAAU,wBAAwB,KACjC,uBAyDF,CAAC"}