(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[18998],{18998:(e,s,t)=>{"use strict";t.r(s),t.d(s,{default:()=>v});var i=t(67841),n=t(64833),r=t(97718),l=t(55158);let h=(0,n.z)("svg")({name:"Svg",class:"sxxp2m0",propsAsIs:!1}),p=function(){return(0,i.jsx)(h,{xmlns:"http://www.w3.org/2000/svg",width:"100%",fill:"none",viewBox:"0 0 775 170",children:(0,i.jsx)("path",{fill:"var(--color-text)",d:"M51.072 29.56C23.808 52.728 13.056 71.416 13.056 90.104c0 18.176 10.496 36.48 37.376 59.52l9.856-8.832c-24.576-19.968-33.152-35.584-33.152-51.328 0-15.616 8.192-30.848 33.536-51.328l-9.6-8.576zm80.359 66.688c0-10.24-8.192-19.2-35.2-22.528l1.152-17.792 30.592.128 1.024-12.416h-43.52l-2.432 39.296c25.984 2.56 35.072 7.68 35.072 14.208 0 8.064-9.216 12.032-37.12 14.464l.768 13.056c34.688-2.304 49.664-13.824 49.664-28.416zm142.798-5.376V78.968h-21.504V56.184h-12.672v22.784h-21.632v11.904h21.632v22.784h12.672V90.872h21.504zM415.363 123l1.152-11.904h-19.2V41.08l-13.696 1.152v9.344l-19.712 2.048.256 10.368 19.456-.512v47.616h-21.504V123h53.248zm26.343 26.624c27.264-23.168 38.016-41.984 38.016-60.544 0-18.176-10.624-36.48-37.504-59.52l-9.856 8.832c24.704 19.968 33.152 35.712 33.152 51.328 0 15.488-8.192 30.848-33.536 51.2l9.728 8.704zM765.574 123v-12.288h-35.968c21.376-16.768 33.92-28.416 33.92-44.544 0-13.184-10.752-23.936-47.36-23.552L715.014 55.8c26.752.384 34.432 5.12 34.432 14.08 0 11.776-12.928 23.296-36.864 41.856L713.99 123h51.584zM609.464 107.768l8.192-4.992-7.424-17.792 18.176-7.168-2.176-9.088-19.328 1.536-1.152-19.456-9.6-.64-4.48 18.944-18.56-5.248-3.712 8.832 16.64 10.368-10.496 15.872 7.168 6.4 14.72-12.544 12.032 14.976z"})})};t(29081);let o=[{x:"1%",y:"15%",width:"54%",height:"70%",title:"",description:""},{x:"3%",y:"20%",width:"49%",height:"60%",title:"The entire expression",explanation:"This chunk of code is itself an expression, producing the number “12”."},{x:"4%",y:"25%",width:"29.25%",height:"50%",title:"The addition in the parentheses",explanation:"This sub-expression evaluates first, because of the parens, and resolves to “6”."},{x:"7.25%",y:"27.5%",width:"6%",height:"45%",title:"The first number being added",explanation:"Individual numbers are themselves expressions, since they produce a value. This expression resolves to “5”."},{x:"24%",y:"27.5%",width:"6%",height:"45%",title:"The second number being added",explanation:"By the same logic, this number is also an expression, producing the number “1”."},{x:"45%",y:"27.5%",width:"6%",height:"45%",title:"The multiplier",explanation:"This number forms the final expression, which resolves to “2”."}];function a(e){let{currentlySelected:s}=e,{title:t,explanation:n,...l}=o[s],h=(0,r.q_)({...l});return(0,i.jsxs)(c,{children:[(0,i.jsx)(d,{children:(0,i.jsx)(p,{})}),(0,i.jsxs)(u,{preserveAspectRatio:"none",style:{opacity:0===s?0:1},children:[(0,i.jsxs)("mask",{id:"expression-highlight-cutout",children:[(0,i.jsx)("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"hsl(0deg 0% 50%)"}),(0,i.jsx)(m,{...h,rx:"8",fill:"hsl(0deg 0% 0%)"})]}),(0,i.jsx)("rect",{x:"0",y:"0",width:"100%",height:"100%",mask:"url(#expression-highlight-cutout)"})]})]})}function x(e){let{index:s,title:t,explanation:n}=e;return t||n?(0,i.jsxs)(w,{children:[(0,i.jsxs)(f,{children:["Expression #",s,": ",t]}),(0,i.jsx)("p",{children:n})]}):null}let c=(0,n.z)("div")({name:"SvgWrapper",class:"sfp3foy",propsAsIs:!1}),d=(0,n.z)("div")({name:"Box",class:"b33638x",propsAsIs:!1}),u=(0,n.z)("svg")({name:"MaskSvg",class:"m1qxyfbk",propsAsIs:!1}),m=(0,n.z)(r.q.rect)({name:"MaskRect",class:"mx4wlpa",propsAsIs:!0}),w=(0,n.z)("div")({name:"ExplanationWrapper",class:"e1pfqpww",propsAsIs:!1}),f=(0,n.z)("p")({name:"Title",class:"tt4yhsi",propsAsIs:!1}),g=(0,n.z)(l.ob)({name:"OutputWrapper",class:"oyobixw",propsAsIs:!0}),v=function(){return(0,i.jsx)(l.ZP,{id:"expression-highlighter",initialValues:{currentlySelected:0},outputWrapper:g,controls:[(0,i.jsx)(l.vn,{id:"currentlySelected",label:"Highlighted Expression",min:0,max:o.length-1,previewRenderer:e=>0===e?"—":"#".concat(e)},"currentlySelected")],renderAfter:e=>{let{currentlySelected:s}=e,{title:t,explanation:n}=o[s];return(0,i.jsx)(x,{index:s,title:t,explanation:n})},children:e=>{let{currentlySelected:s}=e;return(0,i.jsx)(a,{currentlySelected:s})}})};t(78039)},78039:e=>{e.exports={sfp3foy:"sfp3foy",b33638x:"b33638x",m1qxyfbk:"m1qxyfbk",mx4wlpa:"mx4wlpa",e1pfqpww:"e1pfqpww","dropIn-e1pfqpww":"dropIn-e1pfqpww",tt4yhsi:"tt4yhsi",oyobixw:"oyobixw"}},29081:e=>{e.exports={sxxp2m0:"sxxp2m0"}}}]);
//# sourceMappingURL=18998.50d7dc4bb8098383.js.map