https://coolhead.in/_next/static/chunks/pages/animation/multiStep-172a8e748231f1dc.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7332],{5290:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/animation/multiStep",function(){return n(1739)}])},6891:function(e,t,n){"use strict";n.d(t,{Z:function(){return SimpleLayout}});var s=n(5893);function SimpleLayout(e){let{children:t,className:n}=e;return(0,s.jsx)("div",{className:"container mx-auto h-screen w-screen px-4 py-4 "+n,children:t})}n(7294)},1739:function(e,t,n){"use strict";n.r(t);var s=n(5893),i=n(3093),o=n(8506),l=n(3114),a=n(7294),c=n(2427),u=n(6891);function MultiStepComponent(){let[e,t]=(0,a.useState)(0),[n,u]=(0,a.useState)(0),[h,f]=(0,c.Z)(),p=(0,a.useMemo)(()=>{switch(e){case 0:return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("h2",{className:"heading",children:"This is step one"}),(0,s.jsx)("p",{children:"Usually in this step we would explain why this thing exists and what it does. Also, we would show a button to go to the next step."}),(0,s.jsxs)("div",{className:"skeletons",children:[(0,s.jsx)("div",{className:"skeleton",style:{width:256}}),(0,s.jsx)("div",{className:"skeleton",style:{width:192}}),(0,s.jsx)("div",{className:"skeleton"}),(0,s.jsx)("div",{className:"skeleton",style:{width:384}})]})]});case 1:return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("h2",{className:"heading",children:"This is step two"}),(0,s.jsx)("p",{children:"Usually in this step we would explain why this thing exists and what it does. Also, we would show a button to go to the next step."}),(0,s.jsxs)("div",{className:"skeletons",children:[(0,s.jsx)("div",{className:"skeleton",style:{width:256}}),(0,s.jsx)("div",{className:"skeleton",style:{width:192}}),(0,s.jsx)("div",{className:"skeleton",style:{width:384}})]})]});case 2:return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("h2",{className:"heading",children:"This is step three"}),(0,s.jsx)("p",{children:"Usually in this step we would explain why this thing exists and what it does. Also, we would show a button to go to the next step."}),(0,s.jsxs)("div",{className:"skeletons",children:[(0,s.jsx)("div",{className:"skeleton",style:{width:256}}),(0,s.jsx)("div",{className:"skeleton",style:{width:192}}),(0,s.jsx)("div",{className:"skeleton",style:{width:128}}),(0,s.jsx)("div",{className:"skeleton",style:{width:224}}),(0,s.jsx)("div",{className:"skeleton",style:{width:384}})]})]})}},[e]);return(0,s.jsx)(i.A,{transition:{duration:.5,type:"spring",bounce:0},children:(0,s.jsx)(o.E.div,{animate:{height:f.height},className:"multi-step-wrapper",children:(0,s.jsxs)("div",{className:"multi-step-inner",ref:h,children:[(0,s.jsx)(l.M,{mode:"popLayout",initial:!1,custom:n,children:(0,s.jsx)(o.E.div,{variants:d,initial:"initial",animate:"active",exit:"exit",custom:n,children:p},e)}),(0,s.jsxs)(o.E.div,{layout:!0,className:"actions",children:[(0,s.jsx)("button",{className:"secondary-button",disabled:0===e,onClick:()=>{0!==e&&(u(-1),t(e=>e-1))},children:"Back"}),(0,s.jsx)("button",{className:"primary-button",disabled:2===e,onClick:()=>{if(2===e){t(0),u(-1);return}u(1),t(e=>e+1)},children:"Continue"})]})]})})})}let d={initial:e=>({x:"".concat(110*e,"%"),opacity:0}),active:{x:"0%",opacity:1},exit:e=>({x:"".concat(-110*e,"%"),opacity:0})};t.default=function(){return(0,s.jsxs)(u.Z,{className:"bg-white",children:[(0,s.jsx)("title",{children:"Multi Step Component"}),(0,s.jsx)(MultiStepComponent,{})]})}},3114:function(e,t,n){"use strict";n.d(t,{M:function(){return AnimatePresence}});var s=n(5893),i=n(7294),o=n(5364),l=n(6681),a=n(240),c=n(6014);let PopChildMeasure=class PopChildMeasure extends i.Component{getSnapshotBeforeUpdate(e){let t=this.props.childRef.current;if(t&&e.isPresent&&!this.props.isPresent){let e=this.props.sizeRef.current;e.height=t.offsetHeight||0,e.width=t.offsetWidth||0,e.top=t.offsetTop,e.left=t.offsetLeft}return null}componentDidUpdate(){}render(){return this.props.children}};function PopChild({children:e,isPresent:t}){let n=(0,i.useId)(),o=(0,i.useRef)(null),l=(0,i.useRef)({width:0,height:0,top:0,left:0}),{nonce:a}=(0,i.useContext)(c._);return(0,i.useInsertionEffect)(()=>{let{width:e,height:s,top:i,left:c}=l.current;if(t||!o.current||!e||!s)return;o.current.dataset.motionPopId=n;let u=document.createElement("style");return a&&(u.nonce=a),document.head.appendChild(u),u.sheet&&u.sheet.insertRule(`
2          [data-motion-pop-id="${n}"] {
3            position: absolute !important;
4            width: ${e}px !important;
5            height: ${s}px !important;
6            top: ${i}px !important;
7            left: ${c}px !important;
8          }
9        `),()=>{document.head.removeChild(u)}},[t]),(0,s.jsx)(PopChildMeasure,{isPresent:t,childRef:o,sizeRef:l,children:i.cloneElement(e,{ref:o})})}let PresenceChild=({children:e,initial:t,isPresent:n,onExitComplete:o,custom:c,presenceAffectsLayout:u,mode:d})=>{let h=(0,l.h)(newChildrenMap),f=(0,i.useId)(),p=(0,i.useCallback)(e=>

9{for(let t of(h.set(e,!0),h.values()))if(!t)return;o&&o()},[h,o]),m=(0,i.useMemo)(()=>({id:f,initial:t,isPresent:n,custom:c,onExitComplete:p,register:e=>(h.set(e,!1),()=>h.delete(e))}),u?[Math.random(),p]:[n,p]);return(0,i.useMemo)(()=>{h.forEach((e,t)=>h.set(t,!1))},[n]),i.useEffect(()=>{n||h.size||!o||o()},[n]),"popLayout"===d&&(e=(0,s.jsx)(PopChild,{isPresent:n,children:e})),(0,s.jsx)(a.O.Provider,{value:m,children:e})};function newChildrenMap(){return new Map}var u=n(5947);let getChildKey=e=>e.key||"";function onlyElements(e){let t=[];return i.Children.forEach(e,e=>{(0,i.isValidElement)(e)&&t.push(e)}),t}var d=n(8868);let AnimatePresence=({children:e,custom:t,initial:n=!0,onExitComplete:a,presenceAffectsLayout:c=!0,mode:h="sync",propagate:f=!1})=>{let[p,m]=(0,u.oO)(f),w=(0,i.useMemo)(()=>onlyElements(e),[e]),x=f&&!p?[]:w.map(getChildKey),y=(0,i.useRef)(!0),C=(0,i.useRef)(w),N=(0,l.h)(()=>new Map),[k,M]=(0,i.useState)(w),[L,P]=(0,i.useState)(w);(0,d.L)(()=>{y.current=!1,C.current=w;for(let e=0;e<L.length;e++){let t=getChildKey(L[e]);x.includes(t)?N.delete(t):!0!==N.get(t)&&N.set(t,!1)}},[L,x.length,x.join("-")]);let S=[];if(w!==k){let e=[...w];for(let t=0;t<L.length;t++){let n=L[t],s=getChildKey(n);x.includes(s)||(e.splice(t,0,n),S.push(n))}"wait"===h&&S.length&&(e=S),P(onlyElements(e)),M(w);return}let{forceRender:z}=(0,i.useContext)(o.p);return(0,s.jsx)(s.Fragment,{children:L.map(e=>{let i=getChildKey(e),o=(!f||!!p)&&(w===L||x.includes(i));return(0,s.jsx)(PresenceChild,{isPresent:o,initial:(!y.current||!!n)&&void 0,custom:o?void 0:t,presenceAffectsLayout:c,mode:h,onExitComplete:o?void 0:()=>{if(!N.has(i))return;N.set(i,!0);let e=!0;N.forEach(t=>{t||(e=!1)}),e&&(null==z||z(),P(C.current),f&&(null==m||m()),a&&a())},children:e},i)})})}},3093:function(e,t,n){"use strict";n.d(t,{A:function(){return MotionConfig}});var s=n(5893),i=n(7294),o=n(6014),l=n(1492),a=n(6681);function MotionConfig({children:e,isValidProp:t,...n}){t&&(0,l.K)(t),(n={...(0,i.useContext)(o._),...n}).isStatic=(0,a.h)(()=>n.isStatic);let c=(0,i.useMemo)(()=>n,[JSON.stringify(n.transition),n.transformPagePoint,n.reducedMotion]);return(0,s.jsx)(o._.Provider,{value:c,children:e})}},2427:function(e,t,n){"use strict";n.d(t,{Z:function(){return j}});var s=n(7294);function g(e,t){let n;return(...s)=>{window.clearTimeout(n),n=window.setTimeout(()=>e(...s),t)}}function j({debounce:e,scroll:t,polyfill:n,offsetSize:i}={debounce:0,scroll:!1,offsetSize:!1}){var o;let l=n||("undefined"==typeof window?class{}:window.ResizeObserver);if(!l)throw Error("This browser does not support ResizeObserver out of the box. See: https://github.com/react-spring/react-use-measure/#resize-observer-polyfills");let[a,c]=(0,s.useState)({left:0,top:0,width:0,height:0,bottom:0,right:0,x:0,y:0}),u=(0,s.useRef)({element:null,scrollContainers:null,resizeObserver:null,lastBounds:a,orientationHandler:null}),d=e?"number"==typeof e?e:e.scroll:null,h=e?"number"==typeof e?e:e.resize:null,f=(0,s.useRef)(!1);(0,s.useEffect)(()=>(f.current=!0,()=>void(f.current=!1)));let[p,m,w]=(0,s.useMemo)(()=>{let r=()=>{if(!u.current.element)return;let{left:e,top:t,width:n,height:s,bottom:o,right:l,x:a,y:d}=u.current.element.getBoundingClientRect(),h={left:e,top:t,width:n,height:s,bottom:o,right:l,x:a,y:d};u.current.element instanceof HTMLElement&&i&&(h.height=u.current.element.offsetHeight,h.width=u.current.element.offsetWidth),Object.freeze(h),f.current&&!D(u.current.lastBounds,h)&&c(u.current.lastBounds=h)};return[r,h?g(r,h):r,d?g(r,d):r]},[c,i,d,h]);function v(){u.current.scrollContainers&&(u.current.scrollContainers.forEach(e=>e.removeEventListener("scroll",w,!0)),u.current.scrollContainers=null),u.current.resizeObserver&&(u.current.resizeObserver.disconnect(),u.current.resizeObserver=null),u.current.orientationHandler&&("orientation"in screen&&"removeEventListener"in screen.orientation?screen.orientation.removeEventListener("change",u.current.orientationHandler):"onorientationchange"in window&&window.removeEventListener("orientationchange",u.current.orientationHandler))}function b(){u.current.element&&(u.current.resizeObserver=new l(w),u.current.resizeObserver.observe(u.current.element),t&&u.current.scrollC

9ontainers&&u.current.scrollContainers.forEach(e=>e.addEventListener("scroll",w,{capture:!0,passive:!0})),u.current.orientationHandler=()=>{w()},"orientation"in screen&&"addEventListener"in screen.orientation?screen.orientation.addEventListener("change",u.current.orientationHandler):"onorientationchange"in window&&window.addEventListener("orientationchange",u.current.orientationHandler))}return o=!!t,(0,s.useEffect)(()=>{if(o)return window.addEventListener("scroll",w,{capture:!0,passive:!0}),()=>void window.removeEventListener("scroll",w,!0)},[w,o]),(0,s.useEffect)(()=>(window.addEventListener("resize",m),()=>void window.removeEventListener("resize",m)),[m]),(0,s.useEffect)(()=>{v(),b()},[t,w,m]),(0,s.useEffect)(()=>v,[]),[e=>{e&&e!==u.current.element&&(v(),u.current.element=e,u.current.scrollContainers=function E(e){let t=[];if(!e||e===document.body)return t;let{overflow:n,overflowX:s,overflowY:i}=window.getComputedStyle(e);return[n,s,i].some(e=>"auto"===e||"scroll"===e)&&t.push(e),[...t,...E(e.parentElement)]}(e),b())},a,p]}let i=["x","y","top","bottom","left","right","width","height"],D=(e,t)=>i.every(n=>e[n]===t[n])}},function(e){e.O(0,[9177,8506,9774,2888,179],function(){return e(e.s=5290)}),_N_E=e.O()}]);