react-spotlight-tour-cct/dist/react-spotlight-tour-cct.umd.js

A lightweight and customizable React component for creating guided tours in your web applications. Highlight elements and display step-by-step instructions to guide users through your app's features.

(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(".popup-buttons{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:50px;gap:6px}.left-buttons,.right-buttons{display:flex;gap:5px}.left-buttons{justify-content:flex-start}.right-buttons{justify-content:flex-end}.button-close{position:absolute;top:0;right:0;background:transparent;border:none;font-size:20px;color:#d42d2d;cursor:pointer}.button-skip,.button-next,.button-previous{padding:6px;font-size:12px;cursor:pointer;border-radius:10px;transition:background-color .2s}.button-previous{background-color:#000;color:#fff}.button-previous:disabled{background-color:#708090}.button-next{background-color:#00f;border:none;outline:none;color:#ffff86}.button-skip{background-color:#fff;color:green}.count-button{padding:6px;font-size:12px;cursor:pointer;color:#fff;background-color:#0da505;transition:background-color .2s;margin-bottom:2px;bottom:0}.button-restart{position:fixed;top:10px;right:10px;background-color:#007bff;color:#fff;border:none;border-radius:5px;padding:5px 10px;font-size:12px;cursor:pointer;z-index:1002;box-shadow:0 2px 5px #0003;transition:background-color .3s ease,transform .2s ease}.button-restart:hover{background-color:#0056b3;transform:scale(1.05)}.button-restart:active{transform:scale(.95)}.button-restart{position:fixed;top:20px;right:20px;padding:10px 20px;background-color:#28a745;color:#fff;border:none;border-radius:6px;font-size:16px;font-weight:500;cursor:pointer;z-index:1050;transition:background-color .3s ease}.button-restart:hover{background-color:#218838}.button-restart:focus{outline:none}@media (max-width: 600px){.button-restart,.button-next,.button-prev{padding:12px 20px;font-size:14px;border-radius:25px;background-color:#4caf50;color:#fff;border:none;cursor:pointer;transition:background-color .3s,transform .2s;display:inline-block;margin:8px 0;text-align:center;width:100%;box-sizing:border-box}.button-restart:hover,.button-next:hover,.button-prev:hover{background-color:#45a049;transform:translateY(-2px)}.button-restart:active,.button-next:active,.button-prev:active{background-color:#388e3c;transform:translateY(0)}.button-restart:focus,.button-next:focus,.button-prev:focus{outline:none;box-shadow:0 0 4px #48c76099}.button-restart{background-color:#ff9800}.button-restart:hover{background-color:#fb8c00}.button-restart:active{background-color:#f57c00}.button-prev{background-color:#2196f3}.button-prev:hover{background-color:#1976d2}.button-prev:active{background-color:#1565c0}.button-next{background-color:#4caf50}.button-next:hover{background-color:#388e3c}.button-next:active{background-color:#2e7d32}}.highlighted{position:relative;z-index:1001;border:4px solid #e6c74c;border-radius:8px;box-shadow:0 0 10px 3px #ffcc00b3;animation:pulse 1.5s infinite}@keyframes pulse{0%{box-shadow:0 0 10px 3px #ffffffb3}50%{box-shadow:0 0 20px 6px #fff}to{box-shadow:0 0 10px 3px #ffffffb3}}.tour-guide-popup{position:absolute;background:#57677f;border:1px solid #000000;border-radius:11px;box-shadow:0 4px 12px #00000026;height:auto;width:50%;max-width:410px;z-index:1001;padding:12px;box-sizing:border-box;transition:opacity .3s ease,transform .3s ease,box-shadow .3s ease;min-height:100px;word-wrap:break-word;display:flex;flex-direction:column;justify-content:flex-start;transition:top .5s ease,left .5s ease,height .5s ease,opacity .3s ease}.tour-guide-popup.bottom{margin-top:10px}.tour-guide-popup.top{margin-bottom:10px}.tour-guide-popup.left,.tour-guide-popup.right{margin-left:10px;margin-right:10px}.popup-arrow{position:absolute;width:0;height:0;border-style:solid;transition:top .3s ease,left .3s ease,transform .3s ease}.progress-container{position:fixed;top:0;left:0;width:100%;height:6px;background-color:#f0f0f0;border-radius:3px;z-index:1050;margin-top:0}.progress-bar{height:100%;background-color:#4caf50;border-radius:3px;transition:width .3s ease}.tour-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#01000099;z-index:1000;pointer-events:all}----------------------------------------- .popup-arrow{position:absolute;width:0;height:0;border-style:solid}.popup-arrow.top{bottom:-9px;left:50%;transform:translate(-50%);border-width:10px 10px 0 10px;border-color:white transparent transparent transparent}.popup-arrow.bottom{top:-9px;left:50%;transform:translate(-50%);border-width:0 10px 10px 10px;border-color:transparent transparent white transparent}.popup-arrow.left{top:var(--arrow-offset, 50%);right:-9px;transform:translateY(-50%);border-width:10px 0 10px 10px;border-color:transparent transparent transparent white}.popup-arrow.right{top:var(--arrow-offset, 50%);left:-9px;transform:translateY(-50%);border-width:10px 10px 10px 0;border-color:transparent white transparent transparent}----------------------------- */ .popup-content{text-align:center;font-size:14px;color:#000000d6;line-height:1.2;margin-bottom:0}@media (max-width: 600px){.tour-guide-popup{width:85%;padding:10px;min-width:280px;max-width:90%;font-size:12px}.tooltip-arrow{border-width:8px}.popup-content{font-size:12px;color:#000;line-height:1.4;margin-bottom:15px}.tour-guide-popup.top{margin-bottom:20px}.tour-guide-popup.bottom{margin-top:20px}.tour-guide-popup.left,.tour-guide-popup.right{margin-left:10px;margin-right:10px}.progress-container{height:4px}.progress-bar{background-color:#4caf50;border-radius:2px}.button-close{font-size:18px}.button-restart,.button-next,.button-prev{padding:8px 16px;font-size:12px}}")),document.head.appendChild(o)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
(function(L,y){typeof exports=="object"&&typeof module<"u"?y(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],y):(L=typeof globalThis<"u"?globalThis:L||self,y(L["react-spotlight-tour-cct"]={},L.React))})(this,function(L,y){"use strict";var $={exports:{}},J={};/**
 * @license React
 * react-jsx-runtime.production.min.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var pe;function Le(){if(pe)return J;pe=1;var l=y,R=Symbol.for("react.element"),T=Symbol.for("react.fragment"),g=Object.prototype.hasOwnProperty,k=l.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,C={key:!0,ref:!0,__self:!0,__source:!0};function V(D,b,F){var m,x={},A=null,N=null;F!==void 0&&(A=""+F),b.key!==void 0&&(A=""+b.key),b.ref!==void 0&&(N=b.ref);for(m in b)g.call(b,m)&&!C.hasOwnProperty(m)&&(x[m]=b[m]);if(D&&D.defaultProps)for(m in b=D.defaultProps,b)x[m]===void 0&&(x[m]=b[m]);return{$$typeof:R,type:D,key:A,ref:N,props:x,_owner:k.current}}return J.Fragment=T,J.jsx=V,J.jsxs=V,J}var G={};/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var ve;function Ve(){return ve||(ve=1,process.env.NODE_ENV!=="production"&&function(){var l=y,R=Symbol.for("react.element"),T=Symbol.for("react.portal"),g=Symbol.for("react.fragment"),k=Symbol.for("react.strict_mode"),C=Symbol.for("react.profiler"),V=Symbol.for("react.provider"),D=Symbol.for("react.context"),b=Symbol.for("react.forward_ref"),F=Symbol.for("react.suspense"),m=Symbol.for("react.suspense_list"),x=Symbol.for("react.memo"),A=Symbol.for("react.lazy"),N=Symbol.for("react.offscreen"),X=Symbol.iterator,Z="@@iterator";function Q(e){if(e===null||typeof e!="object")return null;var r=X&&e[X]||e[Z];return typeof r=="function"?r:null}var c=l.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function s(e){{for(var r=arguments.length,t=new Array(r>1?r-1:0),n=1;n<r;n++)t[n-1]=arguments[n];p("error",e,t)}}function p(e,r,t){{var n=c.ReactDebugCurrentFrame,i=n.getStackAddendum();i!==""&&(r+="%s",t=t.concat([i]));var u=t.map(function(o){return String(o)});u.unshift("Warning: "+r),Function.prototype.apply.call(console[e],console,u)}}var h=!1,E=!1,W=!1,I=!1,P=!1,O;O=Symbol.for("react.module.reference");function S(e){return!!(typeof e=="string"||typeof e=="function"||e===g||e===C||P||e===k||e===F||e===m||I||e===N||h||E||W||typeof e=="object"&&e!==null&&(e.$$typeof===A||e.$$typeof===x||e.$$typeof===V||e.$$typeof===D||e.$$typeof===b||e.$$typeof===O||e.getModuleId!==void 0))}function ae(e,r,t){var n=e.displayName;if(n)return n;var i=r.displayName||r.name||"";return i!==""?t+"("+i+")":t}function q(e){return e.displayName||"Context"}function Y(e){if(e==null)return null;if(typeof e.tag=="number"&&s("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),typeof e=="function")return e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case g:return"Fragment";case T:return"Portal";case C:return"Profiler";case k:return"StrictMode";case F:return"Suspense";case m:return"SuspenseList"}if(typeof e=="object")switch(e.$$typeof){case D:var r=e;return q(r)+".Consumer";case V:var t=e;return q(t._context)+".Provider";case b:return ae(e,e.render,"ForwardRef");case x:var n=e.displayName||null;return n!==null?n:Y(e.type)||"Memo";case A:{var i=e,u=i._payload,o=i._init;try{return Y(o(u))}catch{return null}}}return null}var M=Object.assign,K=0,ge,be,me,ye,Ee,Re,_e;function we(){}we.__reactDisabledLog=!0;function Je(){{if(K===0){ge=console.log,be=console.info,me=console.warn,ye=console.error,Ee=console.group,Re=console.groupCollapsed,_e=console.groupEnd;var e={configurable:!0,enumerable:!0,value:we,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}K++}}function Ge(){{if(K--,K===0){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:M({},e,{value:ge}),info:M({},e,{value:be}),warn:M({},e,{value:me}),error:M({},e,{value:ye}),group:M({},e,{value:Ee}),groupCollapsed:M({},e,{value:Re}),groupEnd:M({},e,{value:_e})})}K<0&&s("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}}var oe=c.ReactCurrentDispatcher,ie;function ee(e,r,t){{if(ie===void 0)try{throw Error()}catch(i){var n=i.stack.trim().match(/\n( *(at )?)/);ie=n&&n[1]||""}return`
`+ie+e}}var se=!1,re;{var Ke=typeof WeakMap=="function"?WeakMap:Map;re=new Ke}function xe(e,r){if(!e||se)return"";{var t=re.get(e);if(t!==void 0)return t}var n;se=!0;var i=Error.prepareStackTrace;Error.prepareStackTrace=void 0;var u;u=oe.current,oe.current=null,Je();try{if(r){var o=function(){throw Error()};if(Object.defineProperty(o.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(o,[])}catch(w){n=w}Reflect.construct(e,[],o)}else{try{o.call()}catch(w){n=w}e.call(o.prototype)}}else{try{throw Error()}catch(w){n=w}e()}}catch(w){if(w&&n&&typeof w.stack=="string"){for(var a=w.stack.split(`
`),_=n.stack.split(`
`),f=a.length-1,v=_.length-1;f>=1&&v>=0&&a[f]!==_[v];)v--;for(;f>=1&&v>=0;f--,v--)if(a[f]!==_[v]){if(f!==1||v!==1)do if(f--,v--,v<0||a[f]!==_[v]){var j=`
`+a[f].replace(" at new "," at ");return e.displayName&&j.includes("<anonymous>")&&(j=j.replace("<anonymous>",e.displayName)),typeof e=="function"&&re.set(e,j),j}while(f>=1&&v>=0);break}}}finally{se=!1,oe.current=u,Ge(),Error.prepareStackTrace=i}var H=e?e.displayName||e.name:"",U=H?ee(H):"";return typeof e=="function"&&re.set(e,U),U}function ze(e,r,t){return xe(e,!1)}function $e(e){var r=e.prototype;return!!(r&&r.isReactComponent)}function te(e,r,t){if(e==null)return"";if(typeof e=="function")return xe(e,$e(e));if(typeof e=="string")return ee(e);switch(e){case F:return ee("Suspense");case m:return ee("SuspenseList")}if(typeof e=="object")switch(e.$$typeof){case b:return ze(e.render);case x:return te(e.type,r,t);case A:{var n=e,i=n._payload,u=n._init;try{return te(u(i),r,t)}catch{}}}return""}var z=Object.prototype.hasOwnProperty,Te={},Pe=c.ReactDebugCurrentFrame;function ne(e){if(e){var r=e._owner,t=te(e.type,e._source,r?r.type:null);Pe.setExtraStackFrame(t)}else Pe.setExtraStackFrame(null)}function Xe(e,r,t,n,i){{var u=Function.call.bind(z);for(var o in e)if(u(e,o)){var a=void 0;try{if(typeof e[o]!="function"){var _=Error((n||"React class")+": "+t+" type `"+o+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[o]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw _.name="Invariant Violation",_}a=e[o](r,o,n,t,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(f){a=f}a&&!(a instanceof Error)&&(ne(i),s("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",n||"React class",t,o,typeof a),ne(null)),a instanceof Error&&!(a.message in Te)&&(Te[a.message]=!0,ne(i),s("Failed %s type: %s",t,a.message),ne(null))}}}var Ze=Array.isArray;function ue(e){return Ze(e)}function Qe(e){{var r=typeof Symbol=="function"&&Symbol.toStringTag,t=r&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t}}function qe(e){try{return je(e),!1}catch{return!0}}function je(e){return""+e}function Ce(e){if(qe(e))return s("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",Qe(e)),je(e)}var Oe=c.ReactCurrentOwner,er={key:!0,ref:!0,__self:!0,__source:!0},Se,ke;function rr(e){if(z.call(e,"ref")){var r=Object.getOwnPropertyDescriptor(e,"ref").get;if(r&&r.isReactWarning)return!1}return e.ref!==void 0}function tr(e){if(z.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function nr(e,r){typeof e.ref=="string"&&Oe.current}function ar(e,r){{var t=function(){Se||(Se=!0,s("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}}function or(e,r){{var t=function(){ke||(ke=!0,s("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"ref",{get:t,configurable:!0})}}var ir=function(e,r,t,n,i,u,o){var a={$$typeof:R,type:e,key:r,ref:t,props:o,_owner:u};return a._store={},Object.defineProperty(a._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(a,"_self",{configurable:!1,enumerable:!1,writable:!1,value:n}),Object.defineProperty(a,"_source",{configurable:!1,enumerable:!1,writable:!1,value:i}),Object.freeze&&(Object.freeze(a.props),Object.freeze(a)),a};function sr(e,r,t,n,i){{var u,o={},a=null,_=null;t!==void 0&&(Ce(t),a=""+t),tr(r)&&(Ce(r.key),a=""+r.key),rr(r)&&(_=r.ref,nr(r,i));for(u in r)z.call(r,u)&&!er.hasOwnProperty(u)&&(o[u]=r[u]);if(e&&e.defaultProps){var f=e.defaultProps;for(u in f)o[u]===void 0&&(o[u]=f[u])}if(a||_){var v=typeof e=="function"?e.displayName||e.name||"Unknown":e;a&&ar(o,v),_&&or(o,v)}return ir(e,a,_,i,n,Oe.current,o)}}var le=c.ReactCurrentOwner,De=c.ReactDebugCurrentFrame;function B(e){if(e){var r=e._owner,t=te(e.type,e._source,r?r.type:null);De.setExtraStackFrame(t)}else De.setExtraStackFrame(null)}var ce;ce=!1;function fe(e){return typeof e=="object"&&e!==null&&e.$$typeof===R}function Fe(){{if(le.current){var e=Y(le.current.type);if(e)return`

Check the render method of \``+e+"`."}return""}}function ur(e){return""}var Ae={};function lr(e){{var r=Fe();if(!r){var t=typeof e=="string"?e:e.displayName||e.name;t&&(r=`

Check the top-level render call using <`+t+">.")}return r}}function Ie(e,r){{if(!e._store||e._store.validated||e.key!=null)return;e._store.validated=!0;var t=lr(r);if(Ae[t])return;Ae[t]=!0;var n="";e&&e._owner&&e._owner!==le.current&&(n=" It was passed a child from "+Y(e._owner.type)+"."),B(e),s('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',t,n),B(null)}}function Ne(e,r){{if(typeof e!="object")return;if(ue(e))for(var t=0;t<e.length;t++){var n=e[t];fe(n)&&Ie(n,r)}else if(fe(e))e._store&&(e._store.validated=!0);else if(e){var i=Q(e);if(typeof i=="function"&&i!==e.entries)for(var u=i.call(e),o;!(o=u.next()).done;)fe(o.value)&&Ie(o.value,r)}}}function cr(e){{var r=e.type;if(r==null||typeof r=="string")return;var t;if(typeof r=="function")t=r.propTypes;else if(typeof r=="object"&&(r.$$typeof===b||r.$$typeof===x))t=r.propTypes;else return;if(t){var n=Y(r);Xe(t,e.props,"prop",n,e)}else if(r.PropTypes!==void 0&&!ce){ce=!0;var i=Y(r);s("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",i||"Unknown")}typeof r.getDefaultProps=="function"&&!r.getDefaultProps.isReactClassApproved&&s("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function fr(e){{for(var r=Object.keys(e.props),t=0;t<r.length;t++){var n=r[t];if(n!=="children"&&n!=="key"){B(e),s("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n),B(null);break}}e.ref!==null&&(B(e),s("Invalid attribute `ref` supplied to `React.Fragment`."),B(null))}}var We={};function Ye(e,r,t,n,i,u){{var o=S(e);if(!o){var a="";(e===void 0||typeof e=="object"&&e!==null&&Object.keys(e).length===0)&&(a+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var _=ur();_?a+=_:a+=Fe();var f;e===null?f="null":ue(e)?f="array":e!==void 0&&e.$$typeof===R?(f="<"+(Y(e.type)||"Unknown")+" />",a=" Did you accidentally export a JSX literal instead of a component?"):f=typeof e,s("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",f,a)}var v=sr(e,r,t,i,u);if(v==null)return v;if(o){var j=r.children;if(j!==void 0)if(n)if(ue(j)){for(var H=0;H<j.length;H++)Ne(j[H],e);Object.freeze&&Object.freeze(j)}else s("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else Ne(j,e)}if(z.call(r,"key")){var U=Y(e),w=Object.keys(r).filter(function(br){return br!=="key"}),de=w.length>0?"{key: someKey, "+w.join(": ..., ")+": ...}":"{key: someKey}";if(!We[U+de]){var gr=w.length>0?"{"+w.join(": ..., ")+": ...}":"{}";s(`A props object containing a "key" prop is being spread into JSX:
  let props = %s;
  <%s {...props} />
React keys must be passed directly to JSX without using spread:
  let props = %s;
  <%s key={someKey} {...props} />`,de,U,gr,U),We[U+de]=!0}}return e===g?fr(v):cr(v),v}}function dr(e,r,t){return Ye(e,r,t,!0)}function pr(e,r,t){return Ye(e,r,t,!1)}var vr=pr,hr=dr;G.Fragment=g,G.jsx=vr,G.jsxs=hr}()),G}var he;function Me(){return he||(he=1,process.env.NODE_ENV==="production"?$.exports=Le():$.exports=Ve()),$.exports}var d=Me();const Ue=({currentStep:l,totalSteps:R,onPrevious:T,onNext:g,onClose:k})=>d.jsxs("div",{className:"popup-buttons",children:[d.jsxs("div",{className:"left-buttons",children:[d.jsx("button",{onClick:T,disabled:l===0,className:"button-previous",children:"Previous"}),d.jsx("button",{onClick:k,className:"button-skip",children:"Skip"})]}),d.jsxs("div",{className:"right-buttons",children:[d.jsx("button",{className:"count-button",disabled:!0,children:`${l+1} of ${R}`}),d.jsx("button",{onClick:g,className:"button-next",children:l===R-1?"Finish":"Next"})]})]}),Be=({targetId:l})=>(y.useEffect(()=>{const R=document.getElementById(l);return R&&R.classList.add("highlighted"),()=>{const T=document.getElementById(l);T&&T.classList.remove("highlighted")}},[l]),null),He=({steps:l})=>{var Z,Q;const[R,T]=y.useState(!1),[g,k]=y.useState(0),[C,V]=y.useState(null);y.useEffect(()=>{l.length>0&&T(!0)},[l]);const D=y.useCallback(({top:c,left:s,bottom:p,right:h})=>{const E=window.innerWidth;return[{position:"bottom",space:window.innerHeight-p},{position:"top",space:c},{position:"right",space:E-h},{position:"left",space:s}].sort((I,P)=>P.space-I.space)},[]),b=y.useCallback((c,{top:s,left:p,width:h,height:E})=>{let P=0,O=0,S=0;switch(c){case"bottom":O=s+E+15,S=p+h/2-300/2,P=p+h/2-S;break;case"top":O=s-150-15,S=p+h/2-300/2,P=p+h/2-S;break;case"right":O=s+E/2-150/2,S=p+h+15,P=s+E/2-O;break;case"left":O=s+E/2-150/2,S=p-300-15,P=s+E/2-O;break}return{top:Math.max(O+window.scrollY,0),left:Math.max(S+window.scrollX,0),width:300,height:150,position:c,arrowOffset:P}},[]);y.useEffect(()=>{var c,s;if(R&&((c=l[g])!=null&&c.id)){const p=document.getElementById(l[g].id);if(p){p.scrollIntoView({behavior:"smooth",block:"center"});const{top:h,left:E,width:W,height:I}=p.getBoundingClientRect(),P={top:h,left:E,width:W,height:I,x:E,y:h,bottom:h+I,right:E+W,toJSON:()=>({top:h,left:E,width:W,height:I,x:E,y:h,bottom:h+I,right:E+W})},S=((s=D(P).find(q=>q.space>=150))==null?void 0:s.position)||"bottom",ae=b(S,P);V(ae),p.style.zIndex="1001",p.style.position="relative"}}return()=>{var h;const p=document.getElementById((h=l[g])==null?void 0:h.id);p&&(p.style.zIndex="",p.style.position="")}},[R,g,l,D,b]);const F=()=>k(c=>Math.max(c-1,0)),m=()=>T(!1),x=()=>{g===l.length-1?m():k(c=>c+1)},A=()=>{k(0),T(!0)},N=y.useCallback(c=>{c.key==="ArrowLeft"?F():c.key==="ArrowRight"&&x()},[F,x]);if(y.useEffect(()=>(window.addEventListener("keydown",N),()=>{window.removeEventListener("keydown",N)}),[N]),!R||!C)return d.jsx("button",{onClick:A,className:"button-restart",children:"Restart Tour"});const X=(g+1)/l.length*100;return d.jsxs(d.Fragment,{children:[d.jsx("div",{className:"progress-container",children:d.jsx("div",{className:"progress-bar",style:{width:`${X}%`}})}),d.jsx("div",{className:"tour-overlay",onClick:m}),d.jsx(Be,{targetId:(Z=l[g])==null?void 0:Z.id}),d.jsxs("div",{className:`tour-guide-popup ${C.position}`,style:{top:C.top,left:C.left},children:[d.jsx("div",{className:`popup-arrow ${C.position}`,style:{"--arrow-offset":`${C.arrowOffset}px`}}),d.jsx("button",{onClick:m,className:"button-close","aria-label":"Close",children:"×"}),d.jsxs("div",{className:"popup-content",children:[d.jsx("p",{children:(Q=l[g])==null?void 0:Q.content}),d.jsx(Ue,{currentStep:g,totalSteps:l.length,onPrevious:F,onNext:x,onClose:m})]})]})]})};L.TourGuidePopup=He,Object.defineProperty(L,Symbol.toStringTag,{value:"Module"})});