(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[84115],{99800:(e,t,s)=>{"use strict";s.d(t,{A:()=>o,M:()=>c});var n=s(87687),r=s(52751);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})})},43256:(e,t,s)=>{"use strict";s.d(t,{A:()=>n});let n=(0,s(31928).I)("button")({name:"DefaultButton",class:"dj4vswd",propsAsIs:!1});s(25551)},85633:(e,t,s)=>{"use strict";s.d(t,{A:()=>r});var n=s(87687);s(52751);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"})})}},97349:(e,t,s)=>{"use strict";s.d(t,{A:()=>c});var n=s(87687);s(52751);let r=(0,s(31928).I)("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(56793)},84115:(e,t,s)=>{"use strict";s.r(t),s.d(t,{default:()=>W});var n=s(87687),r=s(52751),c=s(31928),o=s(54729),i=s(99800),a=s(54631),l=s(97349),d=s(85633),p=s(78922),u=s(77204),f=s(59341),h=s(68852),x=s(43256);let m=["apple","banana","cherry","durian","eggplant","fig","grape","honeydew"],g=(0,c.I)("div")({name:"Wrapper",class:"wrf5bts",propsAsIs:!1}),v=(0,c.I)("span")({name:"Actions",class:"a1qfnoas",propsAsIs:!1}),j=(0,c.I)(x.A)({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.N,{children:(0,h.y1)(t).map(e=>(0,n.jsx)(f.P.span,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0,color:"red",transition:{duration:.2}},children:" ".concat(m[e],",")},e))}),"]"]})};s(58298);let I=(0,c.I)("div")({name:"Wrapper",class:"w1tcfmca",propsAsIs:!1}),y=(0,c.I)("div")({name:"Label",class:"l1m4afjs",propsAsIs:!1}),A=(0,c.I)("span")({name:"Prefix",class:"p6r42fp",propsAsIs:!1}),C=(0,c.I)("div")({name:"WireWrapper",class:"wrszgpv",propsAsIs:!1}),b=(0,c.I)("div")({name:"MobileWireWrapper",class:"mxesct",propsAsIs:!1}),k=(0,c.I)(p.A)({name:"FloatingPadlock",class:"f1sv7gge",propsAsIs:!0}),R=(0,c.I)(p.A)({name:"MobilePadlock",class:"mv977jb",propsAsIs:!0}),E=(0,c.I)("div")({name:"ChoicesWrapper",class:"cs6uh00",propsAsIs:!1}),M=(0,c.I)("label")({name:"Choice",class:"c1b1nlc",propsAsIs:!1}),P=(0,c.I)("div")({name:"Background",class:"bvndy2f",propsAsIs:!1}),q=(0,c.I)("div")({name:"ChoiceLabel",class:"cgs0x35",propsAsIs:!1}),z=(0,c.I)(d.A)({name:"BackHook",class:"bnhg10k",propsAsIs:!0}),S=(0,c.I)(z)({name:"FrontHook",class:"f1w46daq",propsAsIs:!0}),B=(0,c.I)("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)(I,{children:[(0,n.jsxs)(y,{children:[" ",(0,n.jsx)(A,{children:"const"}),"fruits"]}),(0,n.jsxs)(C,{children:[(0,n.jsx)(a.A,{choiceRefs:p,choiceIndex:0,connectionStyle:"locked"}),(0,n.jsx)(k,{})]}),(0,n.jsxs)(b,{children:[(0,n.jsx)(l.A,{}),(0,n.jsx)(R,{})]}),(0,n.jsx)(E,{children:(0,n.jsxs)(M,{ref:e=>{p.current[0]=e},htmlFor:"choice-".concat(s),children:[(0,n.jsx)(P,{children:(0,n.jsx)(z,{})}),(0,n.jsx)(q,{children:(0,n.jsx)(w,{numOfFruits:c,increment:()=>d(c+1),decrement:()=>d(c-1)})}),(0,n.jsx)(S,{})]})})]}),(0,n.jsxs)(B,{children:[(0,n.jsx)(o.A,{children:"In code, this would look something like this:"}),(0,n.jsx)(i.A,{lang:"js",code:u,children:t})]})]})};s(47955)},78922:(e,t,s)=>{"use strict";s.d(t,{A:()=>c});var n=s(87687),r=s(52751);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%)"})]})})]})}},54631:(e,t,s)=>{"use strict";s.d(t,{A:()=>d});var n=s(87687),r=s(52751),c=s(31928),o=s(59341),i=s(68852),a=s(82310);let l=(0,c.I)("svg")({name:"Svg",class:"s1wq5k0m",propsAsIs:!1}),d=function(e){let{choiceRefs:t,choiceIndex:s,connectionStyle:c="centered",dependency:d=[]}=e,p=(0,a.A)(),[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.S8)(s,0,Object.keys(t.current).length,2,-2),u=(0,i.S8)(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.P.path,{animate:{d:u},transition:{type:"spring",damping:10,stiffness:100}})})};s(49731)},25551:e=>{e.exports={dj4vswd:"dj4vswd"}},58298:e=>{e.exports={wrf5bts:"wrf5bts",a1qfnoas:"a1qfnoas",asyqsga:"asyqsga"}},56793:e=>{e.exports={s4f6bxv:"s4f6bxv"}},47955: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"}},49731:e=>{e.exports={s1wq5k0m:"s1wq5k0m"}},77204:(e,t,s)=>{"use strict";s.d(t,{N:()=>v});var n=s(87687),r=s(52751),c=s(63182),o=s(59476),i=s(79219),a=s(41611),l=s(73034);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.Q);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.M)(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.t.Provider,{value:x,children:e})};function f(){return new Map}var h=s(16663),x=s(13524),m=s(24408);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.V)(!a,"Replace exitBeforeEnter with mode='wait'");let f=(0,r.useContext)(h.L).forceRender||(0,c.C)()[0],v=(0,o.a)(),j=function(e){let t=[];return r.Children.forEach(e,e=>{(0,r.isValidElement)(e)&&t.push(e)}),t}(e),w=j,I=(0,r.useRef)(new Map).current,y=(0,r.useRef)(w),A=(0,r.useRef)(new Map).current,C=(0,r.useRef)(!0);if((0,x.E)(()=>{C.current=!1,function(e,t){e.forEach(e=>{let s=g(e);t.set(s,e)})}(j,A),y.current=w}),p=()=>{C.current=!0,A.clear(),I.clear()},(0,r.useEffect)(()=>()=>p(),[]),C.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 b=y.current.map(g),k=j.map(g),R=b.length;for(let e=0;e{if(-1!==k.indexOf(s))return;let r=A.get(s);if(!r)return;let c=b.indexOf(s),o=e;o||(o=(0,n.jsx)(u,{isPresent:!1,onExitComplete:()=>{I.delete(s);let e=Array.from(A.keys()).filter(e=>!k.includes(e));if(e.forEach(e=>A.delete(e)),y.current=j.filter(t=>{let n=g(t);return n===s||e.includes(n)}),!I.size){if(!1===v.current)return;f(),i&&i()}},custom:t,presenceAffectsLayout:l,mode:d,children:r},g(r)),I.set(s,o)),w.splice(c,0,o)}),w=w.map(e=>{let t=e.key;return I.has(t)?e:(0,n.jsx)(u,{isPresent:!0,presenceAffectsLayout:l,mode:d,children:e},g(e))}),(0,n.jsx)(n.Fragment,{children:I.size?w:w.map(e=>(0,r.cloneElement)(e))})}},63182:(e,t,s)=>{"use strict";s.d(t,{C:()=>o});var n=s(52751),r=s(59476),c=s(47424);function o(){let e=(0,r.a)(),[t,s]=(0,n.useState)(0),o=(0,n.useCallback)(()=>{e.current&&s(t+1)},[t]);return[(0,n.useCallback)(()=>c.Gt.postRender(o),[o]),t]}},59476:(e,t,s)=>{"use strict";s.d(t,{a:()=>c});var n=s(52751),r=s(13524);function c(){let e=(0,n.useRef)(!1);return(0,r.E)(()=>(e.current=!0,()=>{e.current=!1}),[]),e}}}]); //# sourceMappingURL=84115.0906fccf1cebeb13.js.map