se-design 1.0.93 → 1.0.94

package/dist/index214.js

@@ -1,9 +1,9 @@
-import { useRef as o, useCallback as u, createContext as s, useContext as c, useEffect as a } from "react";
-const f = /* @__PURE__ */ s(null);
+import { createContext as u, useRef as o, useCallback as s, useContext as c, useEffect as a } from "react";
+const f = /* @__PURE__ */ u(null);
 function l() {
   const r = o(/* @__PURE__ */ new Set()), t = o([]);
   return {
-    register: u((n) => (r.current.add(n), t.current = Array.from(r.current), () => {
+    register: s((n) => (r.current.add(n), t.current = Array.from(r.current), () => {
       r.current.delete(n), t.current = Array.from(r.current);
     }), []),
     portalContainerRefs: t

package/dist/index214.js.map

@@ -1 +1 @@
-{"version":3,"file":"index214.js","sources":["../src/utils/a11y/FocusTrapPortalContext.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useEffect, useRef } from 'react';\n\ntype RegisterPortal = (ref: React.RefObject<HTMLElement | null>) => () => void;\n\n/**\n * Context for portal content to register with the nearest focus trap.\n * When a Modal (or any focus trap owner) provides this context, portal-rendered\n * content (e.g., Popover with isWithPortal) can register its container ref so\n * the focus trap's safety net allows focus to move into it.\n */\nexport const FocusTrapPortalContext = createContext<RegisterPortal | null>(null);\n\n/**\n * Hook for the focus trap owner (Modal) to create a portal registration function\n * and a stable ref to the current list of portal container refs.\n *\n * Usage in Modal:\n * ```tsx\n * const { register, portalContainerRefs } = useFocusTrapPortalRegistry();\n * // Pass portalContainerRefs.current to useModalA11y\n * // Wrap children with <FocusTrapPortalContext.Provider value={register}>\n * ```\n */\nexport function useFocusTrapPortalRegistry() {\n  const portalRefsSet = useRef<Set<React.RefObject<HTMLElement | null>>>(new Set());\n  const portalContainerRefs = useRef<React.RefObject<HTMLElement | null>[]>([]);\n\n  const register: RegisterPortal = useCallback((ref) => {\n    portalRefsSet.current.add(ref);\n    portalContainerRefs.current = Array.from(portalRefsSet.current);\n    return () => {\n      portalRefsSet.current.delete(ref);\n      portalContainerRefs.current = Array.from(portalRefsSet.current);\n    };\n  }, []);\n\n  return { register, portalContainerRefs };\n}\n\n/**\n * Hook for portal content (Popover) to register its container ref with the\n * nearest ancestor focus trap. No-op if there is no focus trap ancestor.\n *\n * @param portalRef - Ref to the portal's root DOM element\n * @param isActive - Whether the portal is currently mounted and should be registered\n */\nexport function useRegisterPortalWithFocusTrap(\n  portalRef: React.RefObject<HTMLElement | null>,\n  isActive: boolean\n) {\n  const register = useContext(FocusTrapPortalContext);\n\n  useEffect(() => {\n    if (!register || !isActive) return;\n    return register(portalRef);\n  }, [register, isActive, portalRef]);\n}\n"],"names":["useRef","useCallback","createContext","useContext","useEffect","FocusTrapPortalContext","useFocusTrapPortalRegistry","portalRefsSet","Set","portalContainerRefs","register","ref","current","add","Array","from","delete","useRegisterPortalWithFocusTrap","portalRef","isActive"],"mappings":"AAUO,SAAA,UAAAA,GAAA,eAAAC,GAAA,iBAAAC,GAAA,cAAAC,GAAA,aAAAC,SAAA;AAAA,MAAMC,sBAA8D,IAAI;AAaxE,SAASC,IAA6B;AAC3C,QAAMC,IAAgBP,EAAiD,oBAAIQ,KAAK,GAC1EC,IAAsBT,EAA8C,EAAE;AAW5E,SAAO;AAAA,IAAEU,UATwBT,EAAaU,CAAAA,OAC5CJ,EAAcK,QAAQC,IAAIF,CAAG,GAC7BF,EAAoBG,UAAUE,MAAMC,KAAKR,EAAcK,OAAO,GACvD,MAAM;AACXL,MAAAA,EAAcK,QAAQI,OAAOL,CAAG,GAChCF,EAAoBG,UAAUE,MAAMC,KAAKR,EAAcK,OAAO;AAAA,IAChE,IACC,CAAA,CAAE;AAAA,IAEcH,qBAAAA;AAAAA,EAAAA;AACrB;AASO,SAASQ,EACdC,GACAC,GACA;AACA,QAAMT,IAAWP,EAAWE,CAAsB;AAElDD,EAAAA,EAAU,MAAM;AACd,QAAI,GAACM,KAAY,CAACS;AAClB,aAAOT,EAASQ,CAAS;AAAA,EAC3B,GAAG,CAACR,GAAUS,GAAUD,CAAS,CAAC;AACpC;"}
+{"version":3,"file":"index214.js","sources":["../src/utils/a11y/FocusTrapPortalContext.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useEffect, useRef } from 'react';\n\ntype RegisterPortal = (ref: React.RefObject<HTMLElement | null>) => () => void;\n\n/**\n * Context for portal content to register with the nearest focus trap.\n * When a Modal (or any focus trap owner) provides this context, portal-rendered\n * content (e.g., Popover with isWithPortal) can register its container ref so\n * the focus trap's safety net allows focus to move into it.\n */\nexport const FocusTrapPortalContext = createContext<RegisterPortal | null>(null);\n\n/**\n * Hook for the focus trap owner (Modal) to create a portal registration function\n * and a stable ref to the current list of portal container refs.\n *\n * Usage in Modal:\n * ```tsx\n * const { register, portalContainerRefs } = useFocusTrapPortalRegistry();\n * // Pass portalContainerRefs.current to useModalA11y\n * // Wrap children with <FocusTrapPortalContext.Provider value={register}>\n * ```\n */\nexport function useFocusTrapPortalRegistry() {\n  const portalRefsSet = useRef<Set<React.RefObject<HTMLElement | null>>>(new Set());\n  const portalContainerRefs = useRef<React.RefObject<HTMLElement | null>[]>([]);\n\n  const register: RegisterPortal = useCallback((ref) => {\n    portalRefsSet.current.add(ref);\n    portalContainerRefs.current = Array.from(portalRefsSet.current);\n    return () => {\n      portalRefsSet.current.delete(ref);\n      portalContainerRefs.current = Array.from(portalRefsSet.current);\n    };\n  }, []);\n\n  return { register, portalContainerRefs };\n}\n\n/**\n * Hook for portal content (Popover) to register its container ref with the\n * nearest ancestor focus trap. No-op if there is no focus trap ancestor.\n *\n * @param portalRef - Ref to the portal's root DOM element\n * @param isActive - Whether the portal is currently mounted and should be registered\n */\nexport function useRegisterPortalWithFocusTrap(\n  portalRef: React.RefObject<HTMLElement | null>,\n  isActive: boolean\n) {\n  const register = useContext(FocusTrapPortalContext);\n\n  useEffect(() => {\n    if (!register || !isActive) return;\n    return register(portalRef);\n  }, [register, isActive, portalRef]);\n}\n"],"names":["createContext","useRef","useCallback","useContext","useEffect","FocusTrapPortalContext","useFocusTrapPortalRegistry","portalRefsSet","Set","portalContainerRefs","register","ref","current","add","Array","from","delete","useRegisterPortalWithFocusTrap","portalRef","isActive"],"mappings":"AAUO,SAAA,iBAAAA,GAAA,UAAAC,GAAA,eAAAC,GAAA,cAAAC,GAAA,aAAAC,SAAA;AAAA,MAAMC,sBAA8D,IAAI;AAaxE,SAASC,IAA6B;AAC3C,QAAMC,IAAgBN,EAAiD,oBAAIO,KAAK,GAC1EC,IAAsBR,EAA8C,EAAE;AAW5E,SAAO;AAAA,IAAES,UATwBR,EAAaS,CAAAA,OAC5CJ,EAAcK,QAAQC,IAAIF,CAAG,GAC7BF,EAAoBG,UAAUE,MAAMC,KAAKR,EAAcK,OAAO,GACvD,MAAM;AACXL,MAAAA,EAAcK,QAAQI,OAAOL,CAAG,GAChCF,EAAoBG,UAAUE,MAAMC,KAAKR,EAAcK,OAAO;AAAA,IAChE,IACC,CAAA,CAAE;AAAA,IAEcH,qBAAAA;AAAAA,EAAAA;AACrB;AASO,SAASQ,EACdC,GACAC,GACA;AACA,QAAMT,IAAWP,EAAWE,CAAsB;AAElDD,EAAAA,EAAU,MAAM;AACd,QAAI,GAACM,KAAY,CAACS;AAClB,aAAOT,EAASQ,CAAS;AAAA,EAC3B,GAAG,CAACR,GAAUS,GAAUD,CAAS,CAAC;AACpC;"}

package/dist/index33.js

@@ -1,7 +1,7 @@
 import e from "react";
 import { Button as N } from "./index4.js";
 import { Badge as I } from "./index10.js";
-import { Icon as g } from "./index6.js";
+import { Icon as d } from "./index6.js";
 /* empty css         */
 const t = {
   widgetCtn: "flex flex-col gap-[2px] align-center border border-[var(--color-gray-200)] rounded-[12px] w-[385px]",
@@ -21,16 +21,16 @@ const t = {
   requestFeatureImageCtn: "w-[48px] h-[48px] border border-[var(--color-gray-200)] rounded-[50%] flex items-center flex-shrink-0 bg-[var(--color-red-50)]",
   requestFeatureDescriptionCtn: "flex flex-col"
 }, B = ({
-  widgetClassName: d = "",
+  widgetClassName: g = "",
   widgetType: a = "general",
   widgetTitle: r = "",
   widgetDescription: l = "",
   widgetImage: p,
-  hasImage: x = !1,
+  hasImage: f = !1,
   hasButtonCta: n = !1,
   hasLinkCta: i = !1,
   ctaText: o = "",
-  hasBadge: f = !1,
+  hasBadge: x = !1,
   badgeText: w = "",
   buttonBgColor: u = "secondary",
   onCtaClick: b,
@@ -38,7 +38,7 @@ const t = {
   webinarDateInfo: c,
   webinarSpeaker: s
 }) => {
-  const E = f && /* @__PURE__ */ e.createElement(I, {
+  const E = x && /* @__PURE__ */ e.createElement(I, {
     label: w,
     className: t.widgetBadge,
     bgColor: "var(--color-yellow-50)",
@@ -52,14 +52,14 @@ const t = {
     label: o,
     className: `${t.widgetButtonCta} mt-[4px]`,
     onClick: b
-  })), C = x && /* @__PURE__ */ e.createElement("div", {
+  })), C = f && /* @__PURE__ */ e.createElement("div", {
     className: `${t.widgetImageCtn} widget-image-ctn`
   }, /* @__PURE__ */ e.createElement("img", {
     src: p,
     alt: "widget-image"
   }));
   return /* @__PURE__ */ e.createElement("div", {
-    className: `${t.widgetCtn} ${d} widget-ctn`,
+    className: `${t.widgetCtn} ${g} widget-ctn`,
     onClick: v
   }, a !== "general" && C, /* @__PURE__ */ e.createElement("div", {
     className: t.descriptionCtn
@@ -71,14 +71,14 @@ const t = {
     className: t.webinarInfoCtn
   }, s && /* @__PURE__ */ e.createElement("div", {
     className: `${t.webinarDescriptionInfo} align-baseline`
-  }, /* @__PURE__ */ e.createElement(g, {
+  }, /* @__PURE__ */ e.createElement(d, {
     name: "people",
     className: "relative top-[2px]"
   }), /* @__PURE__ */ e.createElement("span", {
     className: t.webinarSpeaker
   }, s)), c && /* @__PURE__ */ e.createElement("div", {
     className: `${t.webinarTimeInfo} align-baseline mb-[4px]`
-  }, /* @__PURE__ */ e.createElement(g, {
+  }, /* @__PURE__ */ e.createElement(d, {
     name: "clock",
     className: "relative top-[2px]"
   }), /* @__PURE__ */ e.createElement("span", {
@@ -96,6 +96,7 @@ const t = {
   }, l), m)) : m));
 };
 export {
-  B as Widget
+  B as Widget,
+  B as default
 };
 //# sourceMappingURL=index33.js.map

package/dist/index43.js

@@ -1,6 +1,6 @@
 import e, { useState as g, useRef as p } from "react";
 import { Icon as c } from "./index6.js";
-import { ProgressBar as x } from "./index42.js";
+import { ProgressBar as f } from "./index42.js";
 /* empty css         */
 const r = {
   gettingStartedWidgetCtn: "border border-[var(--color-gray-200)] rounded-[12px] w-[385px] p-4",
@@ -14,7 +14,7 @@ const r = {
 }) => {
   const [n, l] = g(!1), o = p(null), i = () => {
     l(!n);
-  }, m = (t) => t ? "var(--color-green-500)" : "var(--color-gray-200)";
+  }, d = (t) => t ? "var(--color-green-500)" : "var(--color-gray-200)";
   return /* @__PURE__ */ e.createElement("div", {
     className: `${r.gettingStartedWidgetCtn} ${s} getting-started-widget-ctn`
   }, /* @__PURE__ */ e.createElement("div", {
@@ -27,7 +27,7 @@ const r = {
     onClick: i
   })), /* @__PURE__ */ e.createElement("div", {
     className: "mt-[12px]"
-  }, /* @__PURE__ */ e.createElement(x, {
+  }, /* @__PURE__ */ e.createElement(f, {
     totalTasks: a.length,
     completedTasks: a.filter((t) => t.isComplete).length,
     progressBarCtnClassName: "get-started-progress-bar-ctn"
@@ -37,18 +37,19 @@ const r = {
     style: {
       maxHeight: n ? `${o.current?.scrollHeight}px` : "0px"
     }
-  }, a.map((t, d) => /* @__PURE__ */ e.createElement("div", {
-    key: d,
+  }, a.map((t, m) => /* @__PURE__ */ e.createElement("div", {
+    key: m,
     className: r.actionItemCtn
   }, /* @__PURE__ */ e.createElement(c, {
     name: "checked-circle",
-    stroke: m(t.isComplete)
+    stroke: d(t.isComplete)
   }), /* @__PURE__ */ e.createElement("span", {
     className: t.isComplete ? "text-[var(--color-gray-500)]" : "text-[var(--color-gray-900)] cursor-pointer",
     onClick: t?.handleActionItemClick
   }, t.label)))));
 };
 export {
-  E as GetStartedWidget
+  E as GetStartedWidget,
+  E as default
 };
 //# sourceMappingURL=index43.js.map

package/dist/index44.js

@@ -110,6 +110,7 @@ const f = {
   }));
 };
 export {
-  U as MessageBar
+  U as MessageBar,
+  U as default
 };
 //# sourceMappingURL=index44.js.map

package/dist/index60.js

@@ -1,4 +1,4 @@
-import a from "react";
+import t from "react";
 /* empty css         */
 const n = ({
   element: e,
@@ -15,12 +15,12 @@ const n = ({
     "--shimmer-base-color": s,
     "--shimmer-highlight-color": m
   }, r = `se-design-shimmer-element se-design-shimmer-${e.type}`;
-  return /* @__PURE__ */ a.createElement("div", {
+  return /* @__PURE__ */ t.createElement("div", {
     className: r,
     style: i
-  }, e.children && e.children.map((t, p) => /* @__PURE__ */ a.createElement(n, {
+  }, e.children && e.children.map((a, p) => /* @__PURE__ */ t.createElement(n, {
     key: p,
-    element: t,
+    element: a,
     animationDuration: d,
     baseColor: s,
     highlightColor: m
@@ -40,48 +40,48 @@ const n = ({
     alignItems: e.alignItems,
     flex: e.flex
   };
-  return /* @__PURE__ */ a.createElement("div", {
+  return /* @__PURE__ */ t.createElement("div", {
     className: `se-design-shimmer-container ${e.className || ""}`,
     style: i
-  }, e.children.map((r, t) => r.type === "container" ? /* @__PURE__ */ a.createElement(y, {
-    key: t,
+  }, e.children.map((r, a) => r.type === "container" ? /* @__PURE__ */ t.createElement(y, {
+    key: a,
     container: r,
     animationDuration: d,
     baseColor: s,
     highlightColor: m
-  }) : /* @__PURE__ */ a.createElement(n, {
-    key: t,
+  }) : /* @__PURE__ */ t.createElement(n, {
+    key: a,
     element: r,
     animationDuration: d,
     baseColor: s,
     highlightColor: m
   })));
-}, g = ({
+}, l = ({
   structure: e,
   className: d = "",
   animationDuration: s = 3,
   baseColor: m = "var(--color-gray-700)",
   highlightColor: i = "var(--color-gray-600)",
   width: r,
-  height: t
+  height: a
 }) => {
   const p = {
     width: r ? typeof r == "number" ? `${r}px` : r : "100%",
-    height: t ? typeof t == "number" ? `${t}px` : t : "auto",
+    height: a ? typeof a == "number" ? `${a}px` : a : "auto",
     "--shimmer-duration": `${s}s`,
     "--shimmer-base-color": m,
     "--shimmer-highlight-color": i
   };
-  return /* @__PURE__ */ a.createElement("div", {
+  return /* @__PURE__ */ t.createElement("div", {
     className: `se-design-shimmer-loader ${d}`,
     style: p
-  }, e.map((c, o) => c.type === "container" ? /* @__PURE__ */ a.createElement(y, {
+  }, e.map((c, o) => c.type === "container" ? /* @__PURE__ */ t.createElement(y, {
     key: o,
     container: c,
     animationDuration: s,
     baseColor: m,
     highlightColor: i
-  }) : /* @__PURE__ */ a.createElement(n, {
+  }) : /* @__PURE__ */ t.createElement(n, {
     key: o,
     element: c,
     animationDuration: s,
@@ -90,6 +90,7 @@ const n = ({
   })));
 };
 export {
-  g as ShimmerLoader
+  l as ShimmerLoader,
+  l as default
 };
 //# sourceMappingURL=index60.js.map

package/dist/index67.js

@@ -1,33 +1,35 @@
-import o, { useState as D, useRef as _, useCallback as m, useEffect as p } from "react";
-import { Button as L } from "./index4.js";
-import { Tooltip as U } from "./index16.js";
+import o, { useState as U, useRef as P, useCallback as m, useEffect as k } from "react";
+import { Button as M } from "./index4.js";
+import { Tooltip as Y } from "./index16.js";
+import { Icon as K } from "./index6.js";
 /* empty css         */
-const u = {
+const f = {
   gotIt: "got_it",
   finish: "finish",
   next: "next",
   back: "back"
-}, X = ({
-  steps: e = [],
+}, te = ({
+  steps: t = [],
   screenBaseElementSelector: T = "",
   handleCloseProductTour: d,
   tourType: g = "",
-  automationId: f = "onboarding-tour",
-  highlightBorderRadius: E = 6,
-  customClassName: A = "",
-  labels: H
+  automationId: h = "onboarding-tour",
+  highlightBorderRadius: w = 6,
+  customClassName: W = "",
+  showSkipCTA: v = !1,
+  labels: A
 }) => {
-  const [t, k] = D(0), c = _(null), l = _(null), {
-    next: P = "Next",
-    gotIt: M = "Got It",
-    finish: W = "Finish",
-    skip: O = "Skip tour",
-    stepInfo: V = "Step {step} of {total}"
-  } = H || {}, s = document.querySelector(T), y = m(() => {
+  const [e, y] = U(0), c = P(null), l = P(null), {
+    next: O = "Next",
+    gotIt: V = "Got It",
+    finish: z = "Finish",
+    skip: $ = "Skip tour",
+    stepInfo: F = "Step {step} of {total}"
+  } = A || {}, s = document.querySelector(T), x = m(() => {
     let n;
-    if (t >= e.length)
+    if (e >= t.length)
       return n;
-    const i = document.querySelector(e[t]?.targetElementContainerSelector ? e[t].targetElementContainerSelector : e[t]?.targetElementSelector);
+    const i = document.querySelector(t[e]?.targetElementContainerSelector ? t[e].targetElementContainerSelector : t[e]?.targetElementSelector);
     if (!i)
       return n;
     const r = i.getBoundingClientRect();
@@ -38,56 +40,56 @@ const u = {
       behavior: "auto",
       block: "end"
     })), n = setTimeout(() => {
-      const x = document.querySelector(e[t]?.targetElementSelector);
-      if (!x || !c.current || !l.current)
+      const I = document.querySelector(t[e]?.targetElementSelector);
+      if (!I || !c.current || !l.current)
         return;
-      const a = x.getBoundingClientRect(), w = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
-      c.current.style.height = `${w}px`;
-      const h = e[t]?.targetElementGap || {
+      const a = I.getBoundingClientRect(), p = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
+      c.current.style.height = `${p}px`;
+      const u = t[e]?.targetElementGap || {
         horizontal: 0,
         vertical: 0
-      }, S = E * 2, N = a.left - h.horizontal, I = a.top + window.scrollY - h.vertical, F = a.right + h.horizontal, G = a.bottom + window.scrollY + h.vertical, q = F - N, B = G - I, C = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth), R = encodeURIComponent(`
-      <svg width="${C}" height="${w}" xmlns="http://www.w3.org/2000/svg">
+      }, C = w * 2, R = a.left - u.horizontal, _ = a.top + window.scrollY - u.vertical, G = a.right + u.horizontal, q = a.bottom + window.scrollY + u.vertical, B = G - R, D = q - _, L = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth), H = encodeURIComponent(`
+      <svg width="${L}" height="${p}" xmlns="http://www.w3.org/2000/svg">
         <defs>
-          <mask id="highlight-mask-${t}">
-            <rect x="0" y="0" width="${C}" height="${w}" fill="white"/>
-            <rect x="${N}" y="${I}" width="${q}" height="${B}" rx="${S}" ry="${S}" fill="black"/>
+          <mask id="highlight-mask-${e}">
+            <rect x="0" y="0" width="${L}" height="${p}" fill="white"/>
+            <rect x="${R}" y="${_}" width="${B}" height="${D}" rx="${C}" ry="${C}" fill="black"/>
           </mask>
         </defs>
       </svg>
     `);
-      c.current.style.maskImage = `url("data:image/svg+xml,${R}#highlight-mask-${t}")`, c.current.style.webkitMaskImage = `url("data:image/svg+xml,${R}#highlight-mask-${t}")`, l.current.style.top = `${a.top}px`, l.current.style.left = `${a.left}px`, l.current.style.width = `${a.width}px`, l.current.style.height = `${a.height}px`, l.current.style.borderRadius = `${E}px`;
+      c.current.style.maskImage = `url("data:image/svg+xml,${H}#highlight-mask-${e}")`, c.current.style.webkitMaskImage = `url("data:image/svg+xml,${H}#highlight-mask-${e}")`, l.current.style.top = `${a.top}px`, l.current.style.left = `${a.left}px`, l.current.style.width = `${a.width}px`, l.current.style.height = `${a.height}px`, l.current.style.borderRadius = `${w}px`;
     }, 50), n;
-  }, [t, e]), z = m(() => {
+  }, [e, t]), N = m(() => {
     d(), s && s.scrollTo({
       top: 0,
       behavior: "smooth"
     });
-  }, [d, s]), v = m((n) => {
-    n?.preventDefault(), n?.stopPropagation(), t < e.length - 1 ? k((i) => i + 1) : (d(n), s && s.scrollTo({
+  }, [d, s]), b = m((n) => {
+    n?.preventDefault(), n?.stopPropagation(), e < t.length - 1 ? y((i) => i + 1) : (d(n), s && s.scrollTo({
       top: 0,
       behavior: "smooth"
-    })), e[t]?.tourMixPanelHandler?.({
+    })), t[e]?.tourMixPanelHandler?.({
       user_path: g,
-      action_type: `clicked_${t === e.length - 1 ? e.length === 1 ? u.gotIt : u.finish : u.next}`
+      action_type: `clicked_${e === t.length - 1 ? t.length === 1 ? f.gotIt : f.finish : f.next}`
     });
-  }, [t, e, d, g, s]), $ = m(() => {
-    t > 0 && k((n) => n - 1), e[t]?.tourMixPanelHandler?.({
+  }, [e, t, d, g, s]), S = m(() => {
+    e > 0 && y((n) => n - 1), t[e]?.tourMixPanelHandler?.({
       user_path: g,
-      action_type: `clicked_${u.back}`
+      action_type: `clicked_${f.back}`
     });
-  }, [t, e, g]), b = m((n) => {
-    (n.keyCode === 37 || n.key === "ArrowLeft") && t > 0 && $(), (n.keyCode === 39 || n.key === "ArrowRight") && v();
-  }, [t, v, $]);
-  return p(() => (window.addEventListener("keydown", b), () => {
-    window.removeEventListener("keydown", b);
-  }), [b]), p(() => {
+  }, [e, t, g]), E = m((n) => {
+    (n.keyCode === 37 || n.key === "ArrowLeft") && e > 0 && S(), (n.keyCode === 39 || n.key === "ArrowRight") && b();
+  }, [e, b, S]);
+  return k(() => (window.addEventListener("keydown", E), () => {
+    window.removeEventListener("keydown", E);
+  }), [E]), k(() => {
     let n;
-    return t < e.length && (n = y()), () => {
+    return e < t.length && (n = x()), () => {
       n && clearTimeout(n);
     };
-  }, [t, e, y]), p(() => {
-    if (t < e.length && c.current) {
+  }, [e, t, x]), k(() => {
+    if (e < t.length && c.current) {
       const n = c.current, i = (r) => {
         r.preventDefault(), r.stopPropagation();
       };
@@ -101,49 +103,57 @@ const u = {
         n.removeEventListener("wheel", i), n.removeEventListener("touchmove", i), n.removeEventListener("scroll", i);
       };
     }
-  }, [t]), !e || e.length === 0 ? null : /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement("div", {
+  }, [e]), !t || t.length === 0 ? null : /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement("div", {
     className: "se-design-onboarding-tour-overlay",
     ref: c,
-    "data-automation-id": `${f}-overlay`
-  }), /* @__PURE__ */ o.createElement(U, {
+    "data-automation-id": `${h}-overlay`
+  }), /* @__PURE__ */ o.createElement(Y, {
     content: /* @__PURE__ */ o.createElement("div", {
-      className: `se-design-onboarding-tour-tooltip-content ${A}`
-    }, e[t]?.content?.illustration && /* @__PURE__ */ o.createElement("img", {
-      src: e[t].content.illustration,
+      className: `se-design-onboarding-tour-tooltip-content ${W}`
+    }, t[e]?.content?.illustration && /* @__PURE__ */ o.createElement("img", {
+      src: t[e].content.illustration,
       className: "se-design-onboarding-tour-illustration",
       alt: "illustration"
     }), /* @__PURE__ */ o.createElement("div", {
       className: "se-design-onboarding-tour-content"
-    }, e[t]?.content?.title && /* @__PURE__ */ o.createElement("p", {
-      className: `se-design-onboarding-tour-title ${e[t].content.titleClassName || ""}`
-    }, e[t].content.title), e[t]?.content?.description && /* @__PURE__ */ o.createElement("p", {
-      className: `se-design-onboarding-tour-description ${e[t].content.descriptionClassName || ""}`
-    }, e[t].content.description)), /* @__PURE__ */ o.createElement("div", {
+    }, (t[e]?.content?.title || !v) && /* @__PURE__ */ o.createElement("div", {
+      className: "se-design-onboarding-tour-header"
+    }, t[e]?.content?.title && /* @__PURE__ */ o.createElement("p", {
+      className: `se-design-onboarding-tour-title ${t[e].content.titleClassName || ""}`
+    }, t[e].content.title), !v && /* @__PURE__ */ o.createElement(K, {
+      name: "close",
+      onClick: N,
+      ariaLabel: $,
+      className: "se-design-onboarding-tour-close-icon cursor-pointer",
+      automationId: `${h}-skip-button`
+    })), t[e]?.content?.description && /* @__PURE__ */ o.createElement("p", {
+      className: `se-design-onboarding-tour-description ${t[e].content.descriptionClassName || ""}`
+    }, t[e].content.description)), /* @__PURE__ */ o.createElement("div", {
       className: "se-design-onboarding-tour-actions"
-    }, e.length > 1 && /* @__PURE__ */ o.createElement("span", {
+    }, t.length > 1 && /* @__PURE__ */ o.createElement("span", {
       className: "steps"
-    }, V.replace("{step}", `${t + 1}`).replace("{total}", `${e.length}`)), /* @__PURE__ */ o.createElement("div", {
+    }, F.replace("{step}", `${e + 1}`).replace("{total}", `${t.length}`)), /* @__PURE__ */ o.createElement("div", {
       className: "btns-container"
-    }, t !== e.length - 1 && /* @__PURE__ */ o.createElement(L, {
+    }, v && e !== t.length - 1 && /* @__PURE__ */ o.createElement(M, {
       theme: "white",
       type: "link",
-      label: O,
-      automationId: `${f}-skip-button`,
-      onClick: z
-    }), /* @__PURE__ */ o.createElement(L, {
+      label: $,
+      automationId: `${h}-skip-button`,
+      onClick: N
+    }), /* @__PURE__ */ o.createElement(M, {
       theme: "white",
       type: "primary",
       size: "sm",
-      label: t === e.length - 1 ? e.length === 1 ? M : W : P,
-      automationId: `${f}-next-button`,
-      onClick: v
+      label: e === t.length - 1 ? t.length === 1 ? V : z : O,
+      automationId: `${h}-next-button`,
+      onClick: b
     })))),
     tooltipSrc: /* @__PURE__ */ o.createElement("div", {
       className: "blocker",
       ref: l
     }),
     tooltipSrcRef: l,
-    position: e[t]?.tooltipPosition || "bottom-center",
+    position: t[e]?.tooltipPosition || "bottom-center",
     tooltipOffset: 16,
     displayOn: "always-on",
     isWithPortal: !0,
@@ -151,6 +161,6 @@ const u = {
   }));
 };
 export {
-  X as OnboardingTour
+  te as OnboardingTour
 };
 //# sourceMappingURL=index67.js.map

package/dist/index67.js.map

@@ -1 +1 @@
-{"version":3,"file":"index67.js","sources":["../src/components/OnboardingTour/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useRef, useState, useCallback } from 'react';\n\nimport { Button } from 'components/Button';\nimport { Tooltip } from 'components/Tooltip';\n\nimport './style.scss';\n\nconst TOUR_NAVIGATION_STEPS = {\n  gotIt: 'got_it',\n  finish: 'finish',\n  next: 'next',\n  back: 'back'\n};\n\nexport interface TourStep {\n  targetElementSelector: string;\n  targetElementContainerSelector?: string;\n  targetElementGap?: {\n    horizontal: number;\n    vertical: number;\n  };\n  tooltipPosition?:\n    | 'top-left'\n    | 'top-center'\n    | 'top-right'\n    | 'bottom-left'\n    | 'bottom-center'\n    | 'bottom-right'\n    | 'left-top'\n    | 'left-center'\n    | 'left-bottom'\n    | 'right-top'\n    | 'right-center'\n    | 'right-bottom';\n  content: {\n    title?: string;\n    description?: string;\n    illustration?: any;\n    titleClassName?: string;\n    descriptionClassName?: string;\n  };\n  tourMixPanelHandler?: (data: { user_path: string; action_type: string }) => void;\n}\n\nexport interface OnboardingTourProps {\n  steps: TourStep[];\n  screenBaseElementSelector: string;\n  handleCloseProductTour: (e?: React.MouseEvent<HTMLButtonElement>) => void;\n  tourType?: string;\n  highlightBorderRadius?: number;\n  automationId?: string;\n  customClassName?: string;\n  labels?: {\n    next: string;\n    gotIt: string;\n    finish: string;\n    skip: string;\n    stepInfo: string;\n  };\n}\n\nexport const OnboardingTour: FC<OnboardingTourProps> = ({\n  steps = [],\n  screenBaseElementSelector = '',\n  handleCloseProductTour,\n  tourType = '',\n  automationId = 'onboarding-tour',\n  highlightBorderRadius = 6,\n  customClassName = '',\n  labels\n}) => {\n  const [currentStep, setCurrentStep] = useState(0);\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const blockerRef = useRef<HTMLDivElement>(null);\n\n  const {\n    next = 'Next',\n    gotIt = 'Got It',\n    finish = 'Finish',\n    skip = 'Skip tour',\n    stepInfo = 'Step {step} of {total}'\n  } = labels || {};\n\n  const parentScreenElement = document.querySelector(screenBaseElementSelector) as HTMLElement | null;\n\n  const clipTargetElementAndPositionTooltip = useCallback(() => {\n    let timerId: any;\n\n    if (currentStep >= steps.length) {\n      return timerId;\n    }\n\n    // get the target element\n    const initialTargetElement = document.querySelector(\n      steps[currentStep]?.targetElementContainerSelector\n        ? steps[currentStep].targetElementContainerSelector\n        : steps[currentStep]?.targetElementSelector\n    ) as HTMLElement | null;\n\n    if (!initialTargetElement) {\n      return timerId;\n    }\n\n    const initialTargetArea = initialTargetElement.getBoundingClientRect();\n\n    // check whether target element is fully visible in viewport\n    const isFullyVisible =\n      initialTargetArea.top >= 0 &&\n      initialTargetArea.left >= 0 &&\n      initialTargetArea.bottom <= window.innerHeight &&\n      initialTargetArea.right <= window.innerWidth;\n\n    if (!isFullyVisible) {\n      if (initialTargetArea.top < 0) {\n        initialTargetElement.scrollIntoView({ behavior: 'auto', block: 'start' });\n      } else if (initialTargetArea.bottom > window.innerHeight) {\n        initialTargetElement.scrollIntoView({ behavior: 'auto', block: 'end' });\n      }\n    }\n\n    // if the target element is visible, then clip the target element and position the tooltip\n    timerId = setTimeout(() => {\n      const targetElement = document.querySelector(steps[currentStep]?.targetElementSelector) as HTMLElement | null;\n\n      if (!targetElement || !overlayRef.current || !blockerRef.current) {\n        return;\n      }\n\n      const targetArea = targetElement.getBoundingClientRect();\n\n      const documentHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);\n\n      // Update overlay dimensions and calculate target element area to focus\n      overlayRef.current.style.height = `${documentHeight}px`;\n\n      // Providing gap around target element\n      const targetElementGap = steps[currentStep]?.targetElementGap || { horizontal: 0, vertical: 0 };\n\n      // clip the target element with rounded corners\n      const borderRadius = highlightBorderRadius * 2;\n      const left = targetArea.left - targetElementGap.horizontal;\n      const top = targetArea.top + window.scrollY - targetElementGap.vertical;\n      const right = targetArea.right + targetElementGap.horizontal;\n      const bottom = targetArea.bottom + window.scrollY + targetElementGap.vertical;\n      const width = right - left;\n      const height = bottom - top;\n      const documentWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);\n\n      // Create SVG mask with rounded rectangle hole\n      const svgMask = encodeURIComponent(`\n      <svg width=\"${documentWidth}\" height=\"${documentHeight}\" xmlns=\"http://www.w3.org/2000/svg\">\n        <defs>\n          <mask id=\"highlight-mask-${currentStep}\">\n            <rect x=\"0\" y=\"0\" width=\"${documentWidth}\" height=\"${documentHeight}\" fill=\"white\"/>\n            <rect x=\"${left}\" y=\"${top}\" width=\"${width}\" height=\"${height}\" rx=\"${borderRadius}\" ry=\"${borderRadius}\" fill=\"black\"/>\n          </mask>\n        </defs>\n      </svg>\n    `);\n\n      // Apply created mask to the overlay\n      overlayRef.current.style.maskImage = `url(\"data:image/svg+xml,${svgMask}#highlight-mask-${currentStep}\")`;\n      overlayRef.current.style.webkitMaskImage = `url(\"data:image/svg+xml,${svgMask}#highlight-mask-${currentStep}\")`;\n\n      // Position blocker over clipped area to avoid clicks on the target element\n      blockerRef.current.style.top = `${targetArea.top}px`;\n      blockerRef.current.style.left = `${targetArea.left}px`;\n      blockerRef.current.style.width = `${targetArea.width}px`;\n      blockerRef.current.style.height = `${targetArea.height}px`;\n      blockerRef.current.style.borderRadius = `${highlightBorderRadius}px`;\n    }, 50);\n\n    return timerId;\n  }, [currentStep, steps]);\n\n  const handleSkipTour = useCallback(() => {\n    handleCloseProductTour();\n    if (parentScreenElement) {\n      parentScreenElement.scrollTo({ top: 0, behavior: 'smooth' });\n    }\n  }, [handleCloseProductTour, parentScreenElement]);\n\n  const handleNextClick = useCallback(\n    (e?: React.MouseEvent<HTMLButtonElement>) => {\n      e?.preventDefault();\n      e?.stopPropagation();\n\n      if (currentStep < steps.length - 1) {\n        setCurrentStep((prev) => prev + 1);\n      } else {\n        handleCloseProductTour(e);\n        if (parentScreenElement) {\n          parentScreenElement.scrollTo({ top: 0, behavior: 'smooth' });\n        }\n      }\n      steps[currentStep]?.tourMixPanelHandler?.({\n        user_path: tourType,\n        action_type: `clicked_${\n          currentStep === steps.length - 1\n            ? steps.length === 1\n              ? TOUR_NAVIGATION_STEPS.gotIt\n              : TOUR_NAVIGATION_STEPS.finish\n            : TOUR_NAVIGATION_STEPS.next\n        }`\n      });\n    },\n    [currentStep, steps, handleCloseProductTour, tourType, parentScreenElement]\n  );\n\n  const handlePrevClick = useCallback(() => {\n    if (currentStep > 0) {\n      setCurrentStep((prev) => prev - 1);\n    }\n    steps[currentStep]?.tourMixPanelHandler?.({\n      user_path: tourType,\n      action_type: `clicked_${TOUR_NAVIGATION_STEPS.back}`\n    });\n  }, [currentStep, steps, tourType]);\n\n  const handleKeyPress = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.keyCode === 37 || e.key === 'ArrowLeft') {\n        // for previous navigation\n        if (currentStep > 0) {\n          handlePrevClick();\n        }\n      }\n      if (e.keyCode === 39 || e.key === 'ArrowRight') {\n        // for next navigation\n        handleNextClick();\n      }\n    },\n    [currentStep, handleNextClick, handlePrevClick]\n  );\n\n  useEffect(() => {\n    // Adding event listener for keydown\n    window.addEventListener('keydown', handleKeyPress);\n\n    return () => {\n      window.removeEventListener('keydown', handleKeyPress);\n    };\n  }, [handleKeyPress]);\n\n  useEffect(() => {\n    let timerId: any;\n    if (currentStep < steps.length) {\n      timerId = clipTargetElementAndPositionTooltip();\n    }\n\n    return () => {\n      if (timerId) {\n        clearTimeout(timerId);\n      }\n    };\n  }, [currentStep, steps, clipTargetElementAndPositionTooltip]);\n\n  // To prevent scroll when tour is active\n  useEffect(() => {\n    if (currentStep < steps.length && overlayRef.current) {\n      const overlay = overlayRef.current;\n\n      const preventScroll = (e: Event) => {\n        e.preventDefault();\n        e.stopPropagation();\n      };\n\n      overlay.addEventListener('wheel', preventScroll, { passive: false });\n      overlay.addEventListener('touchmove', preventScroll, { passive: false });\n      overlay.addEventListener('scroll', preventScroll, { passive: false });\n\n      return () => {\n        overlay.removeEventListener('wheel', preventScroll);\n        overlay.removeEventListener('touchmove', preventScroll);\n        overlay.removeEventListener('scroll', preventScroll);\n      };\n    }\n  }, [currentStep]);\n\n  if (!steps || steps.length === 0) {\n    return null;\n  }\n\n  return (\n    <>\n      <div\n        className=\"se-design-onboarding-tour-overlay\"\n        ref={overlayRef}\n        data-automation-id={`${automationId}-overlay`}\n      />\n\n      <Tooltip\n        content={\n          <div className={`se-design-onboarding-tour-tooltip-content ${customClassName}`}>\n            {steps[currentStep]?.content?.illustration && (\n              <img\n                src={steps[currentStep].content.illustration}\n                className=\"se-design-onboarding-tour-illustration\"\n                alt=\"illustration\"\n              />\n            )}\n            <div className=\"se-design-onboarding-tour-content\">\n              {steps[currentStep]?.content?.title && (\n                <p\n                  className={`se-design-onboarding-tour-title ${steps[currentStep].content.titleClassName || ''}`}\n                >\n                  {steps[currentStep].content.title}\n                </p>\n              )}\n              {steps[currentStep]?.content?.description && (\n                <p\n                  className={`se-design-onboarding-tour-description ${\n                    steps[currentStep].content.descriptionClassName || ''\n                  }`}\n                >\n                  {steps[currentStep].content.description}\n                </p>\n              )}\n            </div>\n\n            <div className=\"se-design-onboarding-tour-actions\">\n              {steps.length > 1 && (\n                <span className=\"steps\">\n                  {stepInfo.replace('{step}', `${currentStep + 1}`).replace('{total}', `${steps.length}`)}\n                </span>\n              )}\n              <div className=\"btns-container\">\n                {currentStep !== steps.length - 1 && (\n                  <Button\n                    theme=\"white\"\n                    type=\"link\"\n                    label={skip}\n                    automationId={`${automationId}-skip-button`}\n                    onClick={handleSkipTour}\n                  />\n                )}\n                <Button\n                  theme=\"white\"\n                  type=\"primary\"\n                  size=\"sm\"\n                  label={currentStep === steps.length - 1 ? (steps.length === 1 ? gotIt : finish) : next}\n                  automationId={`${automationId}-next-button`}\n                  onClick={handleNextClick}\n                />\n              </div>\n            </div>\n          </div>\n        }\n        tooltipSrc={<div className=\"blocker\" ref={blockerRef} />}\n        tooltipSrcRef={blockerRef as React.RefObject<HTMLDivElement>}\n        position={steps[currentStep]?.tooltipPosition || 'bottom-center'}\n        tooltipOffset={16}\n        displayOn=\"always-on\"\n        isWithPortal={true}\n        maxWidth={384}\n      />\n    </>\n  );\n};\n"],"names":["React__default","useState","useRef","useCallback","useEffect","Button","Tooltip","TOUR_NAVIGATION_STEPS","gotIt","finish","next","back","OnboardingTour","steps","screenBaseElementSelector","handleCloseProductTour","tourType","automationId","highlightBorderRadius","customClassName","labels","currentStep","setCurrentStep","overlayRef","blockerRef","skip","stepInfo","parentScreenElement","document","querySelector","clipTargetElementAndPositionTooltip","timerId","length","initialTargetElement","targetElementContainerSelector","targetElementSelector","initialTargetArea","getBoundingClientRect","top","left","bottom","window","innerHeight","right","innerWidth","scrollIntoView","behavior","block","setTimeout","targetElement","current","targetArea","documentHeight","Math","max","documentElement","scrollHeight","body","style","height","targetElementGap","horizontal","vertical","borderRadius","scrollY","width","documentWidth","scrollWidth","svgMask","encodeURIComponent","maskImage","webkitMaskImage","handleSkipTour","scrollTo","handleNextClick","e","preventDefault","stopPropagation","prev","tourMixPanelHandler","user_path","action_type","handlePrevClick","handleKeyPress","keyCode","key","addEventListener","removeEventListener","clearTimeout","overlay","preventScroll","passive","createElement","React","Fragment","className","ref","content","illustration","src","alt","title","titleClassName","description","descriptionClassName","replace","theme","type","label","onClick","size","tooltipSrc","tooltipSrcRef","position","tooltipPosition","tooltipOffset","displayOn","isWithPortal","maxWidth"],"mappings":"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"}
+{"version":3,"file":"index67.js","sources":["../src/components/OnboardingTour/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useRef, useState, useCallback } from 'react';\n\nimport { Button } from 'components/Button';\nimport { Tooltip } from 'components/Tooltip';\nimport { Icon } from 'components/Icon';\n\nimport './style.scss';\n\nconst TOUR_NAVIGATION_STEPS = {\n  gotIt: 'got_it',\n  finish: 'finish',\n  next: 'next',\n  back: 'back'\n};\n\nexport interface TourStep {\n  targetElementSelector: string;\n  targetElementContainerSelector?: string;\n  targetElementGap?: {\n    horizontal: number;\n    vertical: number;\n  };\n  tooltipPosition?:\n    | 'top-left'\n    | 'top-center'\n    | 'top-right'\n    | 'bottom-left'\n    | 'bottom-center'\n    | 'bottom-right'\n    | 'left-top'\n    | 'left-center'\n    | 'left-bottom'\n    | 'right-top'\n    | 'right-center'\n    | 'right-bottom';\n  content: {\n    title?: string;\n    description?: string;\n    illustration?: any;\n    titleClassName?: string;\n    descriptionClassName?: string;\n  };\n  tourMixPanelHandler?: (data: { user_path: string; action_type: string }) => void;\n}\n\nexport interface OnboardingTourProps {\n  steps: TourStep[];\n  screenBaseElementSelector: string;\n  handleCloseProductTour: (e?: React.MouseEvent<HTMLButtonElement>) => void;\n  tourType?: string;\n  highlightBorderRadius?: number;\n  automationId?: string;\n  customClassName?: string;\n  showSkipCTA?: boolean;\n  labels?: {\n    next: string;\n    gotIt: string;\n    finish: string;\n    skip: string;\n    stepInfo: string;\n  };\n}\n\nexport const OnboardingTour: FC<OnboardingTourProps> = ({\n  steps = [],\n  screenBaseElementSelector = '',\n  handleCloseProductTour,\n  tourType = '',\n  automationId = 'onboarding-tour',\n  highlightBorderRadius = 6,\n  customClassName = '',\n  showSkipCTA = false,\n  labels\n}) => {\n  const [currentStep, setCurrentStep] = useState(0);\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const blockerRef = useRef<HTMLDivElement>(null);\n\n  const {\n    next = 'Next',\n    gotIt = 'Got It',\n    finish = 'Finish',\n    skip = 'Skip tour',\n    stepInfo = 'Step {step} of {total}'\n  } = labels || {};\n\n  const parentScreenElement = document.querySelector(screenBaseElementSelector) as HTMLElement | null;\n\n  const clipTargetElementAndPositionTooltip = useCallback(() => {\n    let timerId: any;\n\n    if (currentStep >= steps.length) {\n      return timerId;\n    }\n\n    // get the target element\n    const initialTargetElement = document.querySelector(\n      steps[currentStep]?.targetElementContainerSelector\n        ? steps[currentStep].targetElementContainerSelector\n        : steps[currentStep]?.targetElementSelector\n    ) as HTMLElement | null;\n\n    if (!initialTargetElement) {\n      return timerId;\n    }\n\n    const initialTargetArea = initialTargetElement.getBoundingClientRect();\n\n    // check whether target element is fully visible in viewport\n    const isFullyVisible =\n      initialTargetArea.top >= 0 &&\n      initialTargetArea.left >= 0 &&\n      initialTargetArea.bottom <= window.innerHeight &&\n      initialTargetArea.right <= window.innerWidth;\n\n    if (!isFullyVisible) {\n      if (initialTargetArea.top < 0) {\n        initialTargetElement.scrollIntoView({ behavior: 'auto', block: 'start' });\n      } else if (initialTargetArea.bottom > window.innerHeight) {\n        initialTargetElement.scrollIntoView({ behavior: 'auto', block: 'end' });\n      }\n    }\n\n    // if the target element is visible, then clip the target element and position the tooltip\n    timerId = setTimeout(() => {\n      const targetElement = document.querySelector(steps[currentStep]?.targetElementSelector) as HTMLElement | null;\n\n      if (!targetElement || !overlayRef.current || !blockerRef.current) {\n        return;\n      }\n\n      const targetArea = targetElement.getBoundingClientRect();\n\n      const documentHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);\n\n      // Update overlay dimensions and calculate target element area to focus\n      overlayRef.current.style.height = `${documentHeight}px`;\n\n      // Providing gap around target element\n      const targetElementGap = steps[currentStep]?.targetElementGap || { horizontal: 0, vertical: 0 };\n\n      // clip the target element with rounded corners\n      const borderRadius = highlightBorderRadius * 2;\n      const left = targetArea.left - targetElementGap.horizontal;\n      const top = targetArea.top + window.scrollY - targetElementGap.vertical;\n      const right = targetArea.right + targetElementGap.horizontal;\n      const bottom = targetArea.bottom + window.scrollY + targetElementGap.vertical;\n      const width = right - left;\n      const height = bottom - top;\n      const documentWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);\n\n      // Create SVG mask with rounded rectangle hole\n      const svgMask = encodeURIComponent(`\n      <svg width=\"${documentWidth}\" height=\"${documentHeight}\" xmlns=\"http://www.w3.org/2000/svg\">\n        <defs>\n          <mask id=\"highlight-mask-${currentStep}\">\n            <rect x=\"0\" y=\"0\" width=\"${documentWidth}\" height=\"${documentHeight}\" fill=\"white\"/>\n            <rect x=\"${left}\" y=\"${top}\" width=\"${width}\" height=\"${height}\" rx=\"${borderRadius}\" ry=\"${borderRadius}\" fill=\"black\"/>\n          </mask>\n        </defs>\n      </svg>\n    `);\n\n      // Apply created mask to the overlay\n      overlayRef.current.style.maskImage = `url(\"data:image/svg+xml,${svgMask}#highlight-mask-${currentStep}\")`;\n      overlayRef.current.style.webkitMaskImage = `url(\"data:image/svg+xml,${svgMask}#highlight-mask-${currentStep}\")`;\n\n      // Position blocker over clipped area to avoid clicks on the target element\n      blockerRef.current.style.top = `${targetArea.top}px`;\n      blockerRef.current.style.left = `${targetArea.left}px`;\n      blockerRef.current.style.width = `${targetArea.width}px`;\n      blockerRef.current.style.height = `${targetArea.height}px`;\n      blockerRef.current.style.borderRadius = `${highlightBorderRadius}px`;\n    }, 50);\n\n    return timerId;\n  }, [currentStep, steps]);\n\n  const handleSkipTour = useCallback(() => {\n    handleCloseProductTour();\n    if (parentScreenElement) {\n      parentScreenElement.scrollTo({ top: 0, behavior: 'smooth' });\n    }\n  }, [handleCloseProductTour, parentScreenElement]);\n\n  const handleNextClick = useCallback(\n    (e?: React.MouseEvent<HTMLButtonElement>) => {\n      e?.preventDefault();\n      e?.stopPropagation();\n\n      if (currentStep < steps.length - 1) {\n        setCurrentStep((prev) => prev + 1);\n      } else {\n        handleCloseProductTour(e);\n        if (parentScreenElement) {\n          parentScreenElement.scrollTo({ top: 0, behavior: 'smooth' });\n        }\n      }\n      steps[currentStep]?.tourMixPanelHandler?.({\n        user_path: tourType,\n        action_type: `clicked_${\n          currentStep === steps.length - 1\n            ? steps.length === 1\n              ? TOUR_NAVIGATION_STEPS.gotIt\n              : TOUR_NAVIGATION_STEPS.finish\n            : TOUR_NAVIGATION_STEPS.next\n        }`\n      });\n    },\n    [currentStep, steps, handleCloseProductTour, tourType, parentScreenElement]\n  );\n\n  const handlePrevClick = useCallback(() => {\n    if (currentStep > 0) {\n      setCurrentStep((prev) => prev - 1);\n    }\n    steps[currentStep]?.tourMixPanelHandler?.({\n      user_path: tourType,\n      action_type: `clicked_${TOUR_NAVIGATION_STEPS.back}`\n    });\n  }, [currentStep, steps, tourType]);\n\n  const handleKeyPress = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.keyCode === 37 || e.key === 'ArrowLeft') {\n        // for previous navigation\n        if (currentStep > 0) {\n          handlePrevClick();\n        }\n      }\n      if (e.keyCode === 39 || e.key === 'ArrowRight') {\n        // for next navigation\n        handleNextClick();\n      }\n    },\n    [currentStep, handleNextClick, handlePrevClick]\n  );\n\n  useEffect(() => {\n    // Adding event listener for keydown\n    window.addEventListener('keydown', handleKeyPress);\n\n    return () => {\n      window.removeEventListener('keydown', handleKeyPress);\n    };\n  }, [handleKeyPress]);\n\n  useEffect(() => {\n    let timerId: any;\n    if (currentStep < steps.length) {\n      timerId = clipTargetElementAndPositionTooltip();\n    }\n\n    return () => {\n      if (timerId) {\n        clearTimeout(timerId);\n      }\n    };\n  }, [currentStep, steps, clipTargetElementAndPositionTooltip]);\n\n  // To prevent scroll when tour is active\n  useEffect(() => {\n    if (currentStep < steps.length && overlayRef.current) {\n      const overlay = overlayRef.current;\n\n      const preventScroll = (e: Event) => {\n        e.preventDefault();\n        e.stopPropagation();\n      };\n\n      overlay.addEventListener('wheel', preventScroll, { passive: false });\n      overlay.addEventListener('touchmove', preventScroll, { passive: false });\n      overlay.addEventListener('scroll', preventScroll, { passive: false });\n\n      return () => {\n        overlay.removeEventListener('wheel', preventScroll);\n        overlay.removeEventListener('touchmove', preventScroll);\n        overlay.removeEventListener('scroll', preventScroll);\n      };\n    }\n  }, [currentStep]);\n\n  if (!steps || steps.length === 0) {\n    return null;\n  }\n\n  return (\n    <>\n      <div\n        className=\"se-design-onboarding-tour-overlay\"\n        ref={overlayRef}\n        data-automation-id={`${automationId}-overlay`}\n      />\n\n      <Tooltip\n        content={\n          <div className={`se-design-onboarding-tour-tooltip-content ${customClassName}`}>\n            {steps[currentStep]?.content?.illustration && (\n              <img\n                src={steps[currentStep].content.illustration}\n                className=\"se-design-onboarding-tour-illustration\"\n                alt=\"illustration\"\n              />\n            )}\n            <div className=\"se-design-onboarding-tour-content\">\n              {(steps[currentStep]?.content?.title || !showSkipCTA) && (\n                <div className=\"se-design-onboarding-tour-header\">\n                  {steps[currentStep]?.content?.title && (\n                    <p\n                      className={`se-design-onboarding-tour-title ${steps[currentStep].content.titleClassName || ''}`}\n                    >\n                      {steps[currentStep].content.title}\n                    </p>\n                  )}\n                  {!showSkipCTA && (\n                    <Icon\n                      name=\"close\"\n                      onClick={handleSkipTour}\n                      ariaLabel={skip}\n                      className=\"se-design-onboarding-tour-close-icon cursor-pointer\"\n                      automationId={`${automationId}-skip-button`}\n                    />\n                  )}\n                </div>\n              )}\n              {steps[currentStep]?.content?.description && (\n                <p\n                  className={`se-design-onboarding-tour-description ${\n                    steps[currentStep].content.descriptionClassName || ''\n                  }`}\n                >\n                  {steps[currentStep].content.description}\n                </p>\n              )}\n            </div>\n\n            <div className=\"se-design-onboarding-tour-actions\">\n              {steps.length > 1 && (\n                <span className=\"steps\">\n                  {stepInfo.replace('{step}', `${currentStep + 1}`).replace('{total}', `${steps.length}`)}\n                </span>\n              )}\n              <div className=\"btns-container\">\n                {showSkipCTA && currentStep !== steps.length - 1 && (\n                  <Button\n                    theme=\"white\"\n                    type=\"link\"\n                    label={skip}\n                    automationId={`${automationId}-skip-button`}\n                    onClick={handleSkipTour}\n                  />\n                )}\n                <Button\n                  theme=\"white\"\n                  type=\"primary\"\n                  size=\"sm\"\n                  label={currentStep === steps.length - 1 ? (steps.length === 1 ? gotIt : finish) : next}\n                  automationId={`${automationId}-next-button`}\n                  onClick={handleNextClick}\n                />\n              </div>\n            </div>\n          </div>\n        }\n        tooltipSrc={<div className=\"blocker\" ref={blockerRef} />}\n        tooltipSrcRef={blockerRef as React.RefObject<HTMLDivElement>}\n        position={steps[currentStep]?.tooltipPosition || 'bottom-center'}\n        tooltipOffset={16}\n        displayOn=\"always-on\"\n        isWithPortal={true}\n        maxWidth={384}\n      />\n    </>\n  );\n};\n"],"names":["React__default","useState","useRef","useCallback","useEffect","Button","Tooltip","Icon","TOUR_NAVIGATION_STEPS","gotIt","finish","next","back","OnboardingTour","steps","screenBaseElementSelector","handleCloseProductTour","tourType","automationId","highlightBorderRadius","customClassName","showSkipCTA","labels","currentStep","setCurrentStep","overlayRef","blockerRef","skip","stepInfo","parentScreenElement","document","querySelector","clipTargetElementAndPositionTooltip","timerId","length","initialTargetElement","targetElementContainerSelector","targetElementSelector","initialTargetArea","getBoundingClientRect","top","left","bottom","window","innerHeight","right","innerWidth","scrollIntoView","behavior","block","setTimeout","targetElement","current","targetArea","documentHeight","Math","max","documentElement","scrollHeight","body","style","height","targetElementGap","horizontal","vertical","borderRadius","scrollY","width","documentWidth","scrollWidth","svgMask","encodeURIComponent","maskImage","webkitMaskImage","handleSkipTour","scrollTo","handleNextClick","e","preventDefault","stopPropagation","prev","tourMixPanelHandler","user_path","action_type","handlePrevClick","handleKeyPress","keyCode","key","addEventListener","removeEventListener","clearTimeout","overlay","preventScroll","passive","createElement","React","Fragment","className","ref","content","illustration","src","alt","title","titleClassName","name","onClick","ariaLabel","description","descriptionClassName","replace","theme","type","label","size","tooltipSrc","tooltipSrcRef","position","tooltipPosition","tooltipOffset","displayOn","isWithPortal","maxWidth"],"mappings":"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"}