(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[48551],{40084:(e,t,s)=>{"use strict";s.d(t,{Z:()=>o,m:()=>c});var n=s(67841),r=s(79477);let c=r.createContext({code:"",lang:""}),o=r.memo(function(e){let{code:t,lang:s,children:r}=e;return(0,n.jsx)(c.Provider,{value:{code:t,lang:s},children:r})})},59769:(e,t,s)=>{"use strict";s.d(t,{Z:()=>n});let n=(0,s(64833).z)("button")({name:"DefaultButton",class:"dj4vswd",propsAsIs:!1});s(16368)},40194:(e,t,s)=>{"use strict";s.d(t,{Z:()=>r});var n=s(67841);s(79477);let r=function(e){return(0,n.jsx)("svg",{viewBox:"0 0 14 22",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:(0,n.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M9.00225 2C4.03169 2 0 6.02944 0 11C0 15.9706 4.03169 20 9.00225 20H11.5C13.7503 20 14 22 14 22V0.5C14 0.5 13 2 11.5 2H9.00225ZM9 15C11.2091 15 13 13.2091 13 11C13 8.79086 11.2091 7 9 7C6.79086 7 5 8.79086 5 11C5 13.2091 6.79086 15 9 15Z",fill:"white"})})}},92798:(e,t,s)=>{"use strict";s.d(t,{Z:()=>c});var n=s(67841);s(79477);let r=(0,s(64833).z)("svg")({name:"Svg",class:"s4f6bxv",propsAsIs:!1}),c=function(e){let{}=e;return(0,n.jsx)(r,{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"100%",fill:"none",viewBox:"0 0 100 200",children:(0,n.jsx)("path",{d:"\n          M 50 0\n          C 120 66\n            0 132\n            50 200\n        "})})};s(7307)},48551:(e,t,s)=>{"use strict";s.r(t),s.d(t,{default:()=>W});var n=s(67841),r=s(79477),c=s(64833),o=s(40996),i=s(40084),a=s(76375),l=s(92798),d=s(40194),p=s(73672),u=s(24315),f=s(45700),h=s(74631),x=s(59769);let m=["apple","banana","cherry","durian","eggplant","fig","grape","honeydew"],g=(0,c.z)("div")({name:"Wrapper",class:"wrf5bts",propsAsIs:!1}),v=(0,c.z)("span")({name:"Actions",class:"a1qfnoas",propsAsIs:!1}),j=(0,c.z)(x.Z)({name:"ActionButton",class:"asyqsga",propsAsIs:!0}),w=function(e){let{numOfFruits:t,increment:s,decrement:c}=e,[o,i]=r.useState(!0);return(0,n.jsxs)(g,{children:[(0,n.jsxs)(v,{children:[(0,n.jsx)(j,{onClick:s,disabled:t===m.length,children:"Add Item"}),(0,n.jsx)(j,{onClick:()=>{c(),i(!1),window.setTimeout(()=>i(!0),200)},disabled:!o||1===t,children:"Remove Item"})]}),"[",(0,n.jsx)(u.M,{children:(0,h.w6)(t).map(e=>(0,n.jsx)(f.E.span,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0,color:"red",transition:{duration:.2}},children:"  ".concat(m[e],",")},e))}),"]"]})};s(13443);let y=(0,c.z)("div")({name:"Wrapper",class:"w1tcfmca",propsAsIs:!1}),b=(0,c.z)("div")({name:"Label",class:"l1m4afjs",propsAsIs:!1}),C=(0,c.z)("span")({name:"Prefix",class:"p6r42fp",propsAsIs:!1}),k=(0,c.z)("div")({name:"WireWrapper",class:"wrszgpv",propsAsIs:!1}),z=(0,c.z)("div")({name:"MobileWireWrapper",class:"mxesct",propsAsIs:!1}),I=(0,c.z)(p.Z)({name:"FloatingPadlock",class:"f1sv7gge",propsAsIs:!0}),A=(0,c.z)(p.Z)({name:"MobilePadlock",class:"mv977jb",propsAsIs:!0}),R=(0,c.z)("div")({name:"ChoicesWrapper",class:"cs6uh00",propsAsIs:!1}),E=(0,c.z)("label")({name:"Choice",class:"c1b1nlc",propsAsIs:!1}),Z=(0,c.z)("div")({name:"Background",class:"bvndy2f",propsAsIs:!1}),M=(0,c.z)("div")({name:"ChoiceLabel",class:"cgs0x35",propsAsIs:!1}),P=(0,c.z)(d.Z)({name:"BackHook",class:"bnhg10k",propsAsIs:!0}),q=(0,c.z)(P)({name:"FrontHook",class:"f1w46daq",propsAsIs:!0}),B=(0,c.z)("div")({name:"SubsequentCopy",class:"s1t4tnzc",propsAsIs:!1}),W=function(e){let{codeOutput:t}=e,s=r.useId(),[c,d]=r.useState(1),p=r.useRef({}),u=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,t=m.slice(1,e),s="// Point the `fruits` label at this array:\nconst fruits = ['apple'];";return t.length>0?"".concat(s,"\n\n// Modify the array:\nfruits.push('").concat(t.join("', '"),"');"):"".concat(s,"\n\n// ⚠️ Click the “Add Item” button to mutate the array!")}(c);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(y,{children:[(0,n.jsxs)(b,{children:[" ",(0,n.jsx)(C,{children:"const"}),"fruits"]}),(0,n.jsxs)(k,{children:[(0,n.jsx)(a.Z,{choiceRefs:p,choiceIndex:0,connectionStyle:"locked"}),(0,n.jsx)(I,{})]}),(0,n.jsxs)(z,{children:[(0,n.jsx)(l.Z,{}),(0,n.jsx)(A,{})]}),(0,n.jsx)(R,{children:(0,n.jsxs)(E,{ref:e=>{p.current[0]=e},htmlFor:"choice-".concat(s),children:[(0,n.jsx)(Z,{children:(0,n.jsx)(P,{})}),(0,n.jsx)(M,{children:(0,n.jsx)(w,{numOfFruits:c,increment:()=>d(c+1),decrement:()=>d(c-1)})}),(0,n.jsx)(q,{})]})})]}),(0,n.jsxs)(B,{children:[(0,n.jsx)(o.Z,{children:"In code, this would look something like this:"}),(0,n.jsx)(i.Z,{lang:"js",code:u,children:t})]})]})};s(44585)},73672:(e,t,s)=>{"use strict";s.d(t,{Z:()=>c});var n=s(67841),r=s(79477);let c=function(e){let t=r.useId(),s="linear-gradient-".concat(t).replace(/:/g,"");return(0,n.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"30",fill:"none",viewBox:"0 0 24 30",...e,children:[(0,n.jsx)("rect",{width:"21",height:"17",x:"1.5",y:"11.5",fill:"url(#".concat(s,")"),stroke:"var(--color-gray-700)",strokeWidth:"3",rx:"2.5"}),(0,n.jsx)("path",{stroke:"var(--color-gray-700)",strokeWidth:"3",d:"M6 11V7.5C6 4.462 8.686 2 12 2s6 2.462 6 5.5V11"}),(0,n.jsx)("defs",{children:(0,n.jsxs)("linearGradient",{id:s,x1:"24",x2:"0",y1:"20",y2:"20",gradientUnits:"userSpaceOnUse",children:[(0,n.jsx)("stop",{stopColor:"hsl(50deg 100% 80%)"}),(0,n.jsx)("stop",{offset:"0.5",stopColor:"hsl(50deg 100% 70%)"}),(0,n.jsx)("stop",{offset:"1",stopColor:"hsl(50deg 100% 80%)"})]})})]})}},76375:(e,t,s)=>{"use strict";s.d(t,{Z:()=>d});var n=s(67841),r=s(79477),c=s(64833),o=s(45700),i=s(74631),a=s(76955);let l=(0,c.z)("svg")({name:"Svg",class:"s1wq5k0m",propsAsIs:!1}),d=function(e){let{choiceRefs:t,choiceIndex:s,connectionStyle:c="centered",dependency:d=[]}=e,p=(0,a.Z)(),[u,f]=r.useState(""),h=r.useRef(null);return r.useEffect(()=>{var e;let n=null===(e=t.current)||void 0===e?void 0:e[s];if(!n||!h.current)return;let r=h.current.getBoundingClientRect(),o=n.getBoundingClientRect(),a=r.left-4,l={x:0,y:"centered"===c?r.height/2:90},d={x:o.left-a-16,y:"centered"===c?o.top-r.top+o.height/2-2:o.top-r.top+26},p=(0,i.Fv)(s,0,Object.keys(t.current).length,2,-2),u=(0,i.Fv)(s,0,Object.keys(t.current).length,20,-20),x=.5*r.width;f("\n      M ".concat(l.x," ").concat(l.y+p,"\n      C ").concat(l.x+x," ").concat(l.y+u,"\n        ").concat(d.x-x," ").concat(d.y-30,"\n        ").concat(d.x," ").concat(d.y,"\n      Q ").concat(d.x+6," ").concat(d.y+4,"\n        ").concat(d.x-2," ").concat(d.y+8,"\n      C ").concat(d.x-8," ").concat(d.y+12,"\n        ").concat(d.x-22," ").concat(d.y,"\n        ").concat(d.x-3," ").concat(d.y-3,"\n    "))},[s,t,c,p.width,d]),(0,n.jsx)(l,{xmlns:"http://www.w3.org/2000/svg",ref:h,width:"100%",height:"100%",fill:"none",children:u&&(0,n.jsx)(o.E.path,{animate:{d:u},transition:{type:"spring",damping:10,stiffness:100}})})};s(90823)},16368:e=>{e.exports={dj4vswd:"dj4vswd"}},13443:e=>{e.exports={wrf5bts:"wrf5bts",a1qfnoas:"a1qfnoas",asyqsga:"asyqsga"}},7307:e=>{e.exports={s4f6bxv:"s4f6bxv"}},44585:e=>{e.exports={w1tcfmca:"w1tcfmca",l1m4afjs:"l1m4afjs",p6r42fp:"p6r42fp",wrszgpv:"wrszgpv",mxesct:"mxesct",f1sv7gge:"f1sv7gge",mv977jb:"mv977jb",cs6uh00:"cs6uh00",c1b1nlc:"c1b1nlc",bvndy2f:"bvndy2f",cgs0x35:"cgs0x35",bnhg10k:"bnhg10k",f1w46daq:"f1w46daq",s1t4tnzc:"s1t4tnzc"}},90823:e=>{e.exports={s1wq5k0m:"s1wq5k0m"}},24315:(e,t,s)=>{"use strict";s.d(t,{M:()=>v});var n=s(67841),r=s(79477),c=s(68e3),o=s(54165),i=s(41920),a=s(8092),l=s(42910);class d extends r.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 p({children:e,isPresent:t}){let s=(0,r.useId)(),c=(0,r.useRef)(null),o=(0,r.useRef)({width:0,height:0,top:0,left:0}),{nonce:i}=(0,r.useContext)(l._);return(0,r.useInsertionEffect)(()=>{let{width:e,height:n,top:r,left:a}=o.current;if(t||!c.current||!e||!n)return;c.current.dataset.motionPopId=s;let l=document.createElement("style");return i&&(l.nonce=i),document.head.appendChild(l),l.sheet&&l.sheet.insertRule(`
          [data-motion-pop-id="${s}"] {
            position: absolute !important;
            width: ${e}px !important;
            height: ${n}px !important;
            top: ${r}px !important;
            left: ${a}px !important;
          }
        `),()=>{document.head.removeChild(l)}},[t]),(0,n.jsx)(d,{isPresent:t,childRef:c,sizeRef:o,children:r.cloneElement(e,{ref:c})})}let u=({children:e,initial:t,isPresent:s,onExitComplete:c,custom:o,presenceAffectsLayout:l,mode:d})=>{let u=(0,a.h)(f),h=(0,r.useId)(),x=(0,r.useMemo)(()=>({id:h,initial:t,isPresent:s,custom:o,onExitComplete:e=>{for(let t of(u.set(e,!0),u.values()))if(!t)return;c&&c()},register:e=>(u.set(e,!1),()=>u.delete(e))}),l?[Math.random()]:[s]);return(0,r.useMemo)(()=>{u.forEach((e,t)=>u.set(t,!1))},[s]),r.useEffect(()=>{s||u.size||!c||c()},[s]),"popLayout"===d&&(e=(0,n.jsx)(p,{isPresent:s,children:e})),(0,n.jsx)(i.O.Provider,{value:x,children:e})};function f(){return new Map}var h=s(12597),x=s(38906),m=s(92723);let g=e=>e.key||"",v=({children:e,custom:t,initial:s=!0,onExitComplete:i,exitBeforeEnter:a,presenceAffectsLayout:l=!0,mode:d="sync"})=>{var p;(0,m.k)(!a,"Replace exitBeforeEnter with mode='wait'");let f=(0,r.useContext)(h.p).forceRender||(0,c.N)()[0],v=(0,o.t)(),j=function(e){let t=[];return r.Children.forEach(e,e=>{(0,r.isValidElement)(e)&&t.push(e)}),t}(e),w=j,y=(0,r.useRef)(new Map).current,b=(0,r.useRef)(w),C=(0,r.useRef)(new Map).current,k=(0,r.useRef)(!0);if((0,x.L)(()=>{k.current=!1,function(e,t){e.forEach(e=>{let s=g(e);t.set(s,e)})}(j,C),b.current=w}),p=()=>{k.current=!0,C.clear(),y.clear()},(0,r.useEffect)(()=>()=>p(),[]),k.current)return(0,n.jsx)(n.Fragment,{children:w.map(e=>(0,n.jsx)(u,{isPresent:!0,initial:!!s&&void 0,presenceAffectsLayout:l,mode:d,children:e},g(e)))});w=[...w];let z=b.current.map(g),I=j.map(g),A=z.length;for(let e=0;e<A;e++){let t=z[e];-1!==I.indexOf(t)||y.has(t)||y.set(t,void 0)}return"wait"===d&&y.size&&(w=[]),y.forEach((e,s)=>{if(-1!==I.indexOf(s))return;let r=C.get(s);if(!r)return;let c=z.indexOf(s),o=e;o||(o=(0,n.jsx)(u,{isPresent:!1,onExitComplete:()=>{y.delete(s);let e=Array.from(C.keys()).filter(e=>!I.includes(e));if(e.forEach(e=>C.delete(e)),b.current=j.filter(t=>{let n=g(t);return n===s||e.includes(n)}),!y.size){if(!1===v.current)return;f(),i&&i()}},custom:t,presenceAffectsLayout:l,mode:d,children:r},g(r)),y.set(s,o)),w.splice(c,0,o)}),w=w.map(e=>{let t=e.key;return y.has(t)?e:(0,n.jsx)(u,{isPresent:!0,presenceAffectsLayout:l,mode:d,children:e},g(e))}),(0,n.jsx)(n.Fragment,{children:y.size?w:w.map(e=>(0,r.cloneElement)(e))})}},68e3:(e,t,s)=>{"use strict";s.d(t,{N:()=>o});var n=s(79477),r=s(54165),c=s(72453);function o(){let e=(0,r.t)(),[t,s]=(0,n.useState)(0),o=(0,n.useCallback)(()=>{e.current&&s(t+1)},[t]);return[(0,n.useCallback)(()=>c.Wi.postRender(o),[o]),t]}},54165:(e,t,s)=>{"use strict";s.d(t,{t:()=>c});var n=s(79477),r=s(38906);function c(){let e=(0,n.useRef)(!1);return(0,r.L)(()=>(e.current=!0,()=>{e.current=!1}),[]),e}}}]);
//# sourceMappingURL=48551.6fc533fa8bf0033c.js.map