step-guide-react/dist/step-guide-react.umd.js

<div class="align" ><h1>React Tour-Guide</h1></div>

(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(".button-group-container{display:flex;justify-content:center;align-items:center;margin-top:16px;gap:16px}.button-group-container button{border:none;border-radius:4px;cursor:pointer;font-size:25px}.button-group-container button:disabled{background:#ccc;cursor:not-allowed}.previous-btn{padding:5px 15px;background-color:#f57d85;color:#fff;margin-right:15px;font-weight:800;font-size:25px;font-family:Arial Black,sans-serif}.next-btn{padding:5px 15px;background-color:#93c99b;color:#fff;margin-left:20px;font-weight:800;font-size:25px;font-family:Arial Black,sans-serif}.dots-container{display:flex;justify-content:center;align-items:center;gap:7px;overflow-x:auto;max-width:150px}.dot{width:8px;height:8px;background-color:#ccc;border-radius:50%;transition:background-color .3s}.dot.active{background-color:#d085df}.tooltip-container{padding:16px;border-radius:8px;max-width:300px;text-align:center;width:auto;height:auto;background-color:#fff}@media screen and (max-width: 768px){.tooltip-container{max-height:80vh;overflow-y:auto}}.close-btn{background-color:#df2b0b;border:none;position:absolute;top:0;right:0;outline:none;color:#fff;font-size:20px;cursor:pointer}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#4f4d4f80;z-index:998}.modal-container{position:absolute;z-index:10000;background-color:#fff;overflow:hidden}.modal-content{padding:24px;border-radius:8px;box-shadow:0 4px 8px #064a58cc;width:300px;text-align:center;font-family:var(--font-family)}")),document.head.appendChild(o)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
(function(E,k){typeof exports=="object"&&typeof module<"u"?module.exports=k(require("react")):typeof define=="function"&&define.amd?define(["react"],k):(E=typeof globalThis<"u"?globalThis:E||self,E["step-guide-react"]=k(E.React))})(this,function(E){"use strict";var k={exports:{}},U={};/**
 * @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 se;function We(){if(se)return U;se=1;var g=E,R=Symbol.for("react.element"),A=Symbol.for("react.fragment"),_=Object.prototype.hasOwnProperty,v=g.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,w={key:!0,ref:!0,__self:!0,__source:!0};function C(P,l,y){var d,x={},O=null,Y=null;y!==void 0&&(O=""+y),l.key!==void 0&&(O=""+l.key),l.ref!==void 0&&(Y=l.ref);for(d in l)_.call(l,d)&&!w.hasOwnProperty(d)&&(x[d]=l[d]);if(P&&P.defaultProps)for(d in l=P.defaultProps,l)x[d]===void 0&&(x[d]=l[d]);return{$$typeof:R,type:P,key:O,ref:Y,props:x,_owner:v.current}}return U.Fragment=A,U.jsx=C,U.jsxs=C,U}var $={};/**
 * @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 ue;function Ye(){return ue||(ue=1,process.env.NODE_ENV!=="production"&&function(){var g=E,R=Symbol.for("react.element"),A=Symbol.for("react.portal"),_=Symbol.for("react.fragment"),v=Symbol.for("react.strict_mode"),w=Symbol.for("react.profiler"),C=Symbol.for("react.provider"),P=Symbol.for("react.context"),l=Symbol.for("react.forward_ref"),y=Symbol.for("react.suspense"),d=Symbol.for("react.suspense_list"),x=Symbol.for("react.memo"),O=Symbol.for("react.lazy"),Y=Symbol.for("react.offscreen"),j=Symbol.iterator,G="@@iterator";function ce(e){if(e===null||typeof e!="object")return null;var r=j&&e[j]||e[G];return typeof r=="function"?r:null}var S=g.__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];m("error",e,t)}}function m(e,r,t){{var n=S.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 N=!1,M=!1,X=!1,K=!1,D=!1,fe;fe=Symbol.for("react.module.reference");function Le(e){return!!(typeof e=="string"||typeof e=="function"||e===_||e===w||D||e===v||e===y||e===d||K||e===Y||N||M||X||typeof e=="object"&&e!==null&&(e.$$typeof===O||e.$$typeof===x||e.$$typeof===C||e.$$typeof===P||e.$$typeof===l||e.$$typeof===fe||e.getModuleId!==void 0))}function Ue(e,r,t){var n=e.displayName;if(n)return n;var i=r.displayName||r.name||"";return i!==""?t+"("+i+")":t}function de(e){return e.displayName||"Context"}function F(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 _:return"Fragment";case A:return"Portal";case w:return"Profiler";case v:return"StrictMode";case y:return"Suspense";case d:return"SuspenseList"}if(typeof e=="object")switch(e.$$typeof){case P:var r=e;return de(r)+".Consumer";case C:var t=e;return de(t._context)+".Provider";case l:return Ue(e,e.render,"ForwardRef");case x:var n=e.displayName||null;return n!==null?n:F(e.type)||"Memo";case O:{var i=e,u=i._payload,o=i._init;try{return F(o(u))}catch{return null}}}return null}var I=Object.assign,B=0,ve,pe,he,me,be,ge,ye;function Ee(){}Ee.__reactDisabledLog=!0;function $e(){{if(B===0){ve=console.log,pe=console.info,he=console.warn,me=console.error,be=console.group,ge=console.groupCollapsed,ye=console.groupEnd;var e={configurable:!0,enumerable:!0,value:Ee,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}B++}}function Be(){{if(B--,B===0){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:I({},e,{value:ve}),info:I({},e,{value:pe}),warn:I({},e,{value:he}),error:I({},e,{value:me}),group:I({},e,{value:be}),groupCollapsed:I({},e,{value:ge}),groupEnd:I({},e,{value:ye})})}B<0&&s("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}}var Q=S.ReactCurrentDispatcher,ee;function H(e,r,t){{if(ee===void 0)try{throw Error()}catch(i){var n=i.stack.trim().match(/\n( *(at )?)/);ee=n&&n[1]||""}return`
`+ee+e}}var re=!1,q;{var Je=typeof WeakMap=="function"?WeakMap:Map;q=new Je}function Re(e,r){if(!e||re)return"";{var t=q.get(e);if(t!==void 0)return t}var n;re=!0;var i=Error.prepareStackTrace;Error.prepareStackTrace=void 0;var u;u=Q.current,Q.current=null,$e();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(b){n=b}Reflect.construct(e,[],o)}else{try{o.call()}catch(b){n=b}e.call(o.prototype)}}else{try{throw Error()}catch(b){n=b}e()}}catch(b){if(b&&n&&typeof b.stack=="string"){for(var a=b.stack.split(`
`),h=n.stack.split(`
`),c=a.length-1,f=h.length-1;c>=1&&f>=0&&a[c]!==h[f];)f--;for(;c>=1&&f>=0;c--,f--)if(a[c]!==h[f]){if(c!==1||f!==1)do if(c--,f--,f<0||a[c]!==h[f]){var T=`
`+a[c].replace(" at new "," at ");return e.displayName&&T.includes("<anonymous>")&&(T=T.replace("<anonymous>",e.displayName)),typeof e=="function"&&q.set(e,T),T}while(c>=1&&f>=0);break}}}finally{re=!1,Q.current=u,Be(),Error.prepareStackTrace=i}var L=e?e.displayName||e.name:"",W=L?H(L):"";return typeof e=="function"&&q.set(e,W),W}function Ge(e,r,t){return Re(e,!1)}function Xe(e){var r=e.prototype;return!!(r&&r.isReactComponent)}function z(e,r,t){if(e==null)return"";if(typeof e=="function")return Re(e,Xe(e));if(typeof e=="string")return H(e);switch(e){case y:return H("Suspense");case d:return H("SuspenseList")}if(typeof e=="object")switch(e.$$typeof){case l:return Ge(e.render);case x:return z(e.type,r,t);case O:{var n=e,i=n._payload,u=n._init;try{return z(u(i),r,t)}catch{}}}return""}var J=Object.prototype.hasOwnProperty,_e={},we=S.ReactDebugCurrentFrame;function Z(e){if(e){var r=e._owner,t=z(e.type,e._source,r?r.type:null);we.setExtraStackFrame(t)}else we.setExtraStackFrame(null)}function Ke(e,r,t,n,i){{var u=Function.call.bind(J);for(var o in e)if(u(e,o)){var a=void 0;try{if(typeof e[o]!="function"){var h=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 h.name="Invariant Violation",h}a=e[o](r,o,n,t,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(c){a=c}a&&!(a instanceof Error)&&(Z(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),Z(null)),a instanceof Error&&!(a.message in _e)&&(_e[a.message]=!0,Z(i),s("Failed %s type: %s",t,a.message),Z(null))}}}var He=Array.isArray;function te(e){return He(e)}function qe(e){{var r=typeof Symbol=="function"&&Symbol.toStringTag,t=r&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t}}function ze(e){try{return Te(e),!1}catch{return!0}}function Te(e){return""+e}function xe(e){if(ze(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)),Te(e)}var je=S.ReactCurrentOwner,Ze={key:!0,ref:!0,__self:!0,__source:!0},Se,Ce;function Qe(e){if(J.call(e,"ref")){var r=Object.getOwnPropertyDescriptor(e,"ref").get;if(r&&r.isReactWarning)return!1}return e.ref!==void 0}function er(e){if(J.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function rr(e,r){typeof e.ref=="string"&&je.current}function tr(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 nr(e,r){{var t=function(){Ce||(Ce=!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 ar=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 or(e,r,t,n,i){{var u,o={},a=null,h=null;t!==void 0&&(xe(t),a=""+t),er(r)&&(xe(r.key),a=""+r.key),Qe(r)&&(h=r.ref,rr(r,i));for(u in r)J.call(r,u)&&!Ze.hasOwnProperty(u)&&(o[u]=r[u]);if(e&&e.defaultProps){var c=e.defaultProps;for(u in c)o[u]===void 0&&(o[u]=c[u])}if(a||h){var f=typeof e=="function"?e.displayName||e.name||"Unknown":e;a&&tr(o,f),h&&nr(o,f)}return ar(e,a,h,i,n,je.current,o)}}var ne=S.ReactCurrentOwner,Pe=S.ReactDebugCurrentFrame;function V(e){if(e){var r=e._owner,t=z(e.type,e._source,r?r.type:null);Pe.setExtraStackFrame(t)}else Pe.setExtraStackFrame(null)}var ae;ae=!1;function oe(e){return typeof e=="object"&&e!==null&&e.$$typeof===R}function Oe(){{if(ne.current){var e=F(ne.current.type);if(e)return`

Check the render method of \``+e+"`."}return""}}function ir(e){return""}var ke={};function sr(e){{var r=Oe();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 De(e,r){{if(!e._store||e._store.validated||e.key!=null)return;e._store.validated=!0;var t=sr(r);if(ke[t])return;ke[t]=!0;var n="";e&&e._owner&&e._owner!==ne.current&&(n=" It was passed a child from "+F(e._owner.type)+"."),V(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),V(null)}}function Fe(e,r){{if(typeof e!="object")return;if(te(e))for(var t=0;t<e.length;t++){var n=e[t];oe(n)&&De(n,r)}else if(oe(e))e._store&&(e._store.validated=!0);else if(e){var i=ce(e);if(typeof i=="function"&&i!==e.entries)for(var u=i.call(e),o;!(o=u.next()).done;)oe(o.value)&&De(o.value,r)}}}function ur(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===l||r.$$typeof===x))t=r.propTypes;else return;if(t){var n=F(r);Ke(t,e.props,"prop",n,e)}else if(r.PropTypes!==void 0&&!ae){ae=!0;var i=F(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 lr(e){{for(var r=Object.keys(e.props),t=0;t<r.length;t++){var n=r[t];if(n!=="children"&&n!=="key"){V(e),s("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n),V(null);break}}e.ref!==null&&(V(e),s("Invalid attribute `ref` supplied to `React.Fragment`."),V(null))}}var Ae={};function Ie(e,r,t,n,i,u){{var o=Le(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 h=ir();h?a+=h:a+=Oe();var c;e===null?c="null":te(e)?c="array":e!==void 0&&e.$$typeof===R?(c="<"+(F(e.type)||"Unknown")+" />",a=" Did you accidentally export a JSX literal instead of a component?"):c=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",c,a)}var f=or(e,r,t,i,u);if(f==null)return f;if(o){var T=r.children;if(T!==void 0)if(n)if(te(T)){for(var L=0;L<T.length;L++)Fe(T[L],e);Object.freeze&&Object.freeze(T)}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 Fe(T,e)}if(J.call(r,"key")){var W=F(e),b=Object.keys(r).filter(function(hr){return hr!=="key"}),ie=b.length>0?"{key: someKey, "+b.join(": ..., ")+": ...}":"{key: someKey}";if(!Ae[W+ie]){var pr=b.length>0?"{"+b.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} />`,ie,W,pr,W),Ae[W+ie]=!0}}return e===_?lr(f):ur(f),f}}function cr(e,r,t){return Ie(e,r,t,!0)}function fr(e,r,t){return Ie(e,r,t,!1)}var dr=fr,vr=cr;$.Fragment=_,$.jsx=dr,$.jsxs=vr}()),$}var le;function Ne(){return le||(le=1,process.env.NODE_ENV==="production"?k.exports=We():k.exports=Ye()),k.exports}var p=Ne();const Me=({onNext:g,onPrevious:R,isNextDisabled:A,isPreviousDisabled:_,currentStep:v,totalSteps:w,onDotClick:C})=>{const l=Array.from({length:w},(y,d)=>d+1).slice(Math.max(0,v-3),Math.min(w,v+2));return p.jsxs("div",{className:"button-group-container",children:[p.jsx("button",{className:"previous-btn",onClick:R,disabled:_,children:"←"}),p.jsx("div",{className:"dots-container",children:l.map(y=>p.jsx("div",{className:`dot ${v===y?"active":""}`,onClick:()=>C(y)},y))}),p.jsx("button",{className:"next-btn",onClick:g,disabled:A,children:"→"})]})},Ve=({message:g})=>p.jsx("div",{className:"tooltip-container",children:g});return({isOpen:g,stepsConfig:R,onClose:A,totalSteps:_})=>{const[v,w]=E.useState(1),[C,P]=E.useState({}),l=E.useRef(null);E.useEffect(()=>{g&&w(1)},[g]),E.useEffect(()=>{var j,G;if(g&&R[v-1]){const S=R[v-1].target;if(S){const s=document.querySelector(`#${S}`);if(s){s.scrollIntoView({behavior:"smooth",block:"center"});const m=s.getBoundingClientRect(),N=((j=l.current)==null?void 0:j.offsetWidth)||300,M=((G=l.current)==null?void 0:G.offsetHeight)||200,X=window.innerWidth,K=window.innerHeight;let D={};m.bottom+M<=K?D={top:m.bottom+window.scrollY+10,left:m.left+window.scrollX}:m.top-M>=0?D={top:m.top-M+window.scrollY-10,left:m.left+window.scrollX}:m.left+N<=X?D={top:m.top+window.scrollY,left:m.right+window.scrollX+10}:m.right-N>=0?D={top:m.top+window.scrollY,left:m.left-N-10}:D={top:K/2-M/2,left:X/2-N/2},P(D),s.style.outline="5px solid rgb(10, 168, 196)",s.style.backgroundColor="white",s.style.zIndex="9999",s.style.transition="all 0.5s ease-in-out"}}return()=>{if(S){const s=document.querySelector(`#${S}`);s&&(s.style.outline="",s.style.backgroundColor="")}}}},[g,v,R]);const y=()=>w(j=>Math.min(j+1,_)),d=()=>w(j=>Math.max(j-1,1)),x=j=>w(j);if(!g)return null;const{title:O,content:Y}=R[v-1];return p.jsxs(p.Fragment,{children:[p.jsx("div",{className:"overlay"}),p.jsx("div",{className:"modal-container",style:{position:"absolute",top:C.top,left:C.left},ref:l,children:p.jsxs("div",{className:"modal-content",children:[p.jsx("button",{className:"close-btn",onClick:A,children:"X"}),p.jsx("h2",{children:O}),p.jsx(Ve,{message:Y}),p.jsx(Me,{onNext:y,onPrevious:d,isNextDisabled:v===_,isPreviousDisabled:v===1,currentStep:v,totalSteps:_,onDotClick:x})]})})]})}});