(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[37378],{69102:(e,s,t)=>{"use strict";t.d(s,{Z:()=>r});var n=t(67841),c=t(79477),a=t(52574),i=t(83928);let r=function(e){let{width:s,height:t,thumbnailSrc:r,style:o={},...l}=e,p=c.useRef(null),d=(0,a.Z)(p),[u,h]=c.useState(!1),x="number"==typeof s&&"number"==typeof t?"".concat(s," / ").concat(t):void 0;return c.useEffect(()=>{d&&h(!0)},[d]),(0,n.jsx)("div",{ref:p,children:u?(0,n.jsx)(i.default,{style:{aspectRatio:x,...o},...l}):(0,n.jsx)("img",{alt:"",src:r,style:{aspectRatio:x}})})}},37378:(e,s,t)=>{"use strict";t.r(s),t.d(s,{default:()=>C});var n=t(67841),c=t(79477),a=t(64833),i=t(45700),r=t(74631),o=t(69102),l=t(76955);let p=(0,a.z)("svg")({name:"Svg",class:"s18yz36x",propsAsIs:!1}),d=function(e){let{}=e,s=(0,l.Z)(),[t,a]=c.useState(""),r=c.useRef(null);return c.useEffect(()=>{if(!r.current)return;let e=r.current.getBoundingClientRect(),s={x:0,y:e.height/2},t={x:e.width-10,y:e.height/2};a("\n      M ".concat(s.x," ").concat(s.y,"\n      L ").concat(t.x," ").concat(t.y,"\n      L ").concat(t.x-1," ").concat(t.y+8,"\n      L ").concat(t.x+10," ").concat(t.y,"\n      L ").concat(t.x-1," ").concat(t.y-8,"\n      L ").concat(t.x," ").concat(t.y,"\n    "))},[s.width]),(0,n.jsx)(p,{xmlns:"http://www.w3.org/2000/svg",ref:r,width:"100%",height:"100%",fill:"none",children:t&&(0,n.jsx)(i.E.path,{animate:{d:t}})})};t(207);let u=(0,a.z)("div")({name:"Wrapper",class:"w1bi9krb",propsAsIs:!1}),h=(0,a.z)("div")({name:"Label",class:"l1bvy36a",propsAsIs:!1}),x=(0,a.z)("span")({name:"Prefix",class:"pge3x9",propsAsIs:!1}),m=(0,a.z)("div")({name:"ArrowWrapper",class:"af2tx0d",propsAsIs:!1}),g=(0,a.z)("div")({name:"ChoicesConstrainer",class:"cig2036",propsAsIs:!1}),f=(0,a.z)("div")({name:"ChoicesWrapper",class:"c1u0z33k",propsAsIs:!1}),b=(0,a.z)(i.E.label)({name:"Choice",class:"cg5kgp0",propsAsIs:!0}),v=(0,a.z)("div")({name:"Shadow",class:"s1csii64",propsAsIs:!1}),y=(0,a.z)("div")({name:"ActiveBackground",class:"akjdf8u",propsAsIs:!1}),j=(0,a.z)("div")({name:"ChoiceLabel",class:"c1w4a0os",propsAsIs:!1}),w=(0,a.z)("input")({name:"Radio",class:"r2yvtb3",propsAsIs:!1}),k=(0,a.z)("div")({name:"Gradient",class:"gjo45tc",propsAsIs:!1}),z=(0,a.z)(k)({name:"TopGradient",class:"t1tdbxdk",propsAsIs:!0}),A=(0,a.z)(k)({name:"BottomGradient",class:"b1hl09f2",propsAsIs:!0}),I=(0,a.z)("div")({name:"MobileAlternative",class:"m1sglpve",propsAsIs:!1}),C=function(){let e=c.useId(),[s,t]=c.useState(36),a=(0,r.w6)(s-7+1,s+7),i=c.useRef(!1);return c.useEffect(()=>{i.current=!0;let e=window.setTimeout(()=>{i.current=!1},150);return()=>{window.clearTimeout(e)}},[s]),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(u,{children:[(0,n.jsxs)(h,{children:[(0,n.jsx)(x,{children:"let"}),"age"]}),(0,n.jsx)(m,{children:(0,n.jsx)(d,{})}),(0,n.jsx)(g,{style:{height:"24rem"},children:(0,n.jsx)(f,{children:a.map(c=>{let a=c===s;return(0,n.jsxs)(b,{layout:!0,animate:{x:a?-16:0},transition:{type:"spring",stiffness:100,damping:20},children:[(0,n.jsx)(v,{style:{opacity:a?1:.25}}),(0,n.jsx)(y,{style:{opacity:a?1:0}}),(0,n.jsx)(j,{children:c}),(0,n.jsx)(w,{type:"radio",name:"infinite-number-".concat(e),id:"choice-".concat(e,"-").concat(c),checked:a,onKeyDown:e=>{i.current&&e.preventDefault()},onChange:()=>{t(c)}})]},c)})})}),(0,n.jsx)(z,{}),(0,n.jsx)(A,{})]}),(0,n.jsx)(I,{children:(0,n.jsx)(o.Z,{includeBorder:!1,alt:"Diagram showing that the “age” variable is pointing to the number 36. The number 36 is part of a big wheel of adjacent numbers: 33, 34, 35, 36, 37, 37, 39…",width:550,height:400,src:"/images/the-const-deception/infinite-number-picker.mp4",thumbnailSrc:"/images/the-const-deception/infinite-number-picker-thumbnail.png"})})]})};t(24664)},24664:e=>{e.exports={w1bi9krb:"w1bi9krb",l1bvy36a:"l1bvy36a",pge3x9:"pge3x9",af2tx0d:"af2tx0d",cig2036:"cig2036",c1u0z33k:"c1u0z33k",cg5kgp0:"cg5kgp0",s1csii64:"s1csii64",akjdf8u:"akjdf8u",c1w4a0os:"c1w4a0os",r2yvtb3:"r2yvtb3",gjo45tc:"gjo45tc",t1tdbxdk:"t1tdbxdk",b1hl09f2:"b1hl09f2",m1sglpve:"m1sglpve"}},207:e=>{e.exports={s18yz36x:"s18yz36x"}}}]);
//# sourceMappingURL=37378.fd08e9798235897c.js.map