https://blog.maximeheckel.com/_next/static/chunks/6443.c4d30ccb00f…?dpl=dpl_HAZS2TYAzzLU2EY9wDXjbZmJDpKM

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6443],{18734:(e,r,t)=>{t.d(r,{G:()=>s});var o=t(87730),a=t(25841),n=t(53051),i=t(49683);function s(e,r,t,a){if("function"==typeof e){i.bt.current=[],e();let r=(0,n.j)(i.bt.current,e);return i.bt.current=void 0,r}let s="function"==typeof r?r:function(...e){let r=!Array.isArray(e[0]),t=r?0:-1,a=e[0+t],n=e[1+t],i=e[2+t],s=e[3+t],c=(0,o.G)(n,i,s);return r?c(a):c}(r,t,a);return Array.isArray(e)?c(e,s):c([e],([e])=>s(e))}function c(e,r){let t=(0,a.M)(()=>[]);return(0,n.j)(e,()=>{t.length=0;let o=e.length;for(let r=0;r<o;r++)t[r]=e[r].get();return r(t)})}},35627:(e,r,t)=>{t.d(r,{d:()=>s});var o=t(49683),a=t(16466),n=t(18292),i=t(25841);function s(e){let r=(0,i.M)(()=>(0,o.OQ)(e)),{isStatic:t}=(0,a.useContext)(n.Q);if(t){let[,t]=(0,a.useState)(e);(0,a.useEffect)(()=>r.on("change",t),[])}return r}},36443:(e,r,t)=>{t.r(r),t.d(r,{HighlightedCodeText:()=>v,default:()=>k});var o=t(67002),a=t(14699),n=t(45448),i=t(1119),s=t(18734),c=t(69560),l=t(98891),d=t(16466),p=t(90745),u=t(35627),h=t(42475);let x=e=>{let r={checked:{opacity:0,filter:"blur(2px)"},unchecked:{opacity:1,filter:"blur(0px)"}},[t,a]=(0,d.useState)(!1),n=(0,u.d)(0),i=(0,s.G)(n,[.05,.15],[0,1]);return(0,d.useEffect)(()=>{t&&setTimeout(()=>a(!1),2500)},[t]),(0,o.jsx)(p.b,{onClick:()=>{(e=>{let r=document.createElement("textarea");r.value=e,r.setAttribute("readonly",""),r.style.position="absolute",r.style.left="-9999px",document.body.appendChild(r),r.select(),document.execCommand("copy"),document.body.removeChild(r)})(e.text),a(!0)},variant:"tertiary",size:"small","aria-label":"Copy code to clipboard",children:(0,o.jsxs)(h.P.svg,{initial:"idle",whileHover:"hover",whileTap:"pressed",transition:{duration:.275},variants:{hover:e=>({scale:e?1:1.05}),pressed:e=>({scale:e?1:.97}

1),idle:{scale:1}},custom:t,width:"25",height:"25",viewBox:"0 0 25 25",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{outline:"none"},children:[(0,o.jsx)(h.P.path,{d:"M20.8511 9.46338H11.8511C10.7465 9.46338 9.85107 10.3588 9.85107 11.4634V20.4634C9.85107 21.5679 10.7465 22.4634 11.8511 22.4634H20.8511C21.9556 22.4634 22.8511 21.5679 22.8511 20.4634V11.4634C22.8511 10.3588 21.9556 9.46338 20.8511 9.46338Z",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",initial:!1,animate:t?"checked":"unchecked",variants:r,custom:t,transition:{duration:.275}}),(0,o.jsx)(h.P.path,{d:"M5.85107 15.4634H4.85107C4.32064 15.4634 3.81193 15.2527 3.43686 14.8776C3.06179 14.5025 2.85107 13.9938 2.85107 13.4634V4.46338C2.85107 3.93295 3.06179 3.42424 3.43686 3.04917C3.81193 2.67409 4.32064 2.46338 4.85107 2.46338H13.8511C14.3815 2.46338 14.8902 2.67409 15.2653 3.04917C15.6404 3.42424 15.8511 3.93295 15.8511 4.46338V5.46338",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",initial:!1,animate:t?"checked":"unchecked",variants:r,custom:t,transition:{duration:.275}}),(0,o.jsx)(h.P.path,{d:"M20 6L9 17L4 12",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",initial:!1,animate:t?"checked":"unchecked",variants:{pressed:e=>({pathLength:e?.85:.05}),checked:{pathLength:1,filter:"blur(0px)",scale:1.05},unchecked:{pathLength:0,filter:"blur(2px)",scale:.97}},style:{pathLength:n,opacity:i},custom:t,transition:{duration:.275}})]})})};var b=t(1219);(void 0!==t.g?t.g:window).Prism=l.My,t(20263),t(72536);let v=e=>e.codeString?(0,o.jsx)(g,{...e}):null,g=e=>{let{codeString:r,language:t,highlightLine:a}=e,n=(0,d.useRef)(null),{scrollX:p}=(0,i.L)({container:n}),u=(0,s.G)(p,[10,50],[0,1]);return(0,c.L)(u,"change",e=>{if(n.current){if(n.current.scrollWidth<=n.current.clientWidth){n.current.style.setProperty("--shadow-opacity-left","0"),n.current.style.setProperty("--shadow-opacity-right","0");return}n.current.style.setProperty("--shadow-opacity-left",e.toString()),n.current.style.setProperty("--shadow-opacity-right",(1-e).toString())}}),(0,d.useLayoutEffect)(()=>{if(n.current){if(n.current.scrollWidth<=n.current.clientWidth){n.current.style.setProperty("--shadow-opacity-left","0"),n.current.style.setProperty("--shadow-opacity-right","0");return}n.current.style.setProperty("--shadow-opacity-right","1")}},[]),(0,o.jsx)(l.f4,{theme:{plain:{},styles:[]},code:r,language:t,children:e=>{let{className:r,style:t,tokens:i,getLineProps:s,getTokenProps:c}=e;return(0,o.jsx)(y,{ref:n,className:r,style:t,children:i.map((e,r)=>{let{className:t}=s({className:a&&a(r)?"highlight-line":"",key:r,line:e});return(0,o.jsxs)(f,{"data-testid":a&&a(r)?"highlight-line":"line",className:t,children:[(0,o.jsx)(m,{"data-testid":"number-line",children:r+1}),(0,o.jsx)(w,{children:e.map((e,r)=>{let{key:t,...a}=c({token:e,key:r});return(0,o.jsx)("span",{"data-testid":"content-line",...a},r)})})]},r)})})}})},k=e=>{let{codeString:r,language:t,metastring:n}=e,i=(0,b.V8)(n),s=(0,b.h7)(n);return(0,o.jsxs)(a.a,{css:{display:"grid",background:"unset",width:"100%","@media(max-width: 750px)":{width:"100vw",position:"relative",left:"50%",right:"50%",marginLeft:"-50vw",marginRight:"-50vw"}},children:[s?(0,o.jsxs)(a.a.Header,{css:{zIndex:3,backgroundColor:"var(--code-snippet-background)",padding:"var(--space-2) var(--space-3)"},children:[(0,o.jsx)(j,{"data-testid":"codesnippet-title",children:s}),(0,o.jsx)(x,{title:s,text:r})]}):null,(0,o.jsx)(v,{codeString:r,language:t,highlightLine:i})]})},y=(0,n.g)("pre",{"--shadow-size":"70px","--shadow-color":"oklch(from var(--gray-000) l c h / 0.75)",marginTop:"0",marginBottom:"0",textAlign:"left",padding:"var(--space-2) 0px",borderBottomLeftRadius:"var(--border-radius-2)",borderBottomRightRadius:"var(--border-radius-2)",backgroundColor:"var(--code-snippet-background)",fontFamily:"var(--font-mono-code)",fontSize:"var(--font-size-1)",lineHeight:"24px",overflowX:"auto","&::before, &::after":{content:'""',position:"absolute",top:"0",width:"var(--shadow-size, 40px)",height:"100%",pointerEvents:"none",zIndex:"2"},"&::before":{left:"0",opacity:"var(--shadow-opacity-left, 0)",background:"linear-gradient(to right, var(--shadow-color), transparent)"},"&::after":{right:"0",opacity:"var(--shadow-opacity-right, 0)",background:"linear-gradient(to left, var(--shadow-color), transparent)"},".token.parameter,.token.imports,.token.plain,.token.comment,.token.prolog,.token.doctype,.token.cdata":{color:"var(--token-comment)"},".token.punctuation":{color:"var(--token-punctuation)"},".token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted":{color:"var(--token-symbol)"},".token.selector,.token.attr-name,.token.char,.token.builtin,.token.number,.token.string,.token.inserted":{color:"var(--token-selector)"},".token.operator,.token.entity,.token.url,.language-css .style":{color:"var(--token-operator)"},".token.atrule,.token.attr-value,.token.keyword":{color:"var(--token-keyword)"},".token.function,.token.maybe-class-name,.token.class-name":{color:"var(--token-function)"},".token.regex,.token.important,.token.variable":{color:"var(--token-operator)"}}),f=(0,n.g)("div",{display:"table",borderCollapse:"collapse",padding:"0px 14px",borderLeft:"3px solid transparent","&.highlight-line":{background:"var(--emphasis)",borderColor:"var(--accent)"},"&:hover":{backgroundColor:"var(--emphasis)"}}),m=(0,n.g)("div",{width:"45px",padding:"0 12px",userSelect:"none",opacity:"1",color:"var(--text-tertiary)"}),w=(0,n.g)("span",{display:"table-cell",width:"100%"}),j=(0,n.g)("p",{marginBlockStart:"0px",fontSize:"var(--font-size-1)",marginBottom:"0px",color:"var(--text-primary)",fontWeight:"500"})},53051:(e,r,t)=>{t.d(r,{j:()=>i});var o=t(94790),a=t(64626),n=t(35627);function i(e,r){let t=(0,n.d)(r()),i=()=>t.set(r());return i(),(0,a.E)(()=>{let r=()=>o.Gt.preRender(i,!1,!0),t=e.map(e=>e.on("change",r));return()=>

1{t.forEach(e=>e()),(0,o.WG)(i)}}),t}},90745:(e,r,t)=>{t.d(r,{a:()=>p,b:()=>h});var o=t(16466),a=t(92342),n=t(63933),i=t(45448),s=t(67002),c=(0,i.g)("button",{WebkitAppearance:"none",WebkitTapHighlightColor:"transparent",WebkitUserSelect:"none",MozUserSelect:"none",MsUserSelect:"none",userSelect:"none",display:"flex",justifyContent:"center",alignItems:"center",flexShrink:"0",outline:"none",cursor:"pointer",border:"0",font:"inherit",fontSize:"var(--font-size-1)",fontWeight:"var(--font-weight-500)",height:"34px",width:"max-content",padding:"0px 12px",transition:"background 0.2s, transform 0.2s, color 0.2s, box-shadow 0.3s",borderRadius:"var(--border-radius-1)",background:"var(--button-background, white)",color:"var(--color, black)",transform:"scale(var(--button-scale, 1)) translateZ(0)",boxShadow:"var(--shadow, none)",opacity:"var(--opacity, 1)","--shadow-hover-primary":"0 2px 40px -4px var(--input-focus)","& svg":{width:"18px",height:"18px"},"&:active":{"--button-scale":"0.95"},"&:disabled":{cursor:"not-allowed","--button-scale":"1.0 !important","--shadow":"none !important","--opacity":"0.4",filter:"grayscale(0.25)"},variants:{hasIcon:{startIcon:{padding:"0px 12px 0px 10px"},endIcon:{padding:"0px 10px 0px 12px"},none:{padding:"0px 12px"}},variant:{primary:{"--button-background":"var(--accent)","--color":"var(--white)","--shadow":"inset 0px 1px 1px rgba(255, 255, 255, 0.3), inset 0px -1.5px 2px rgba(0, 0, 0, 0.3)","&:hover":{"&:not(:disabled)":{"--shadow":"inset 0px 1px 1px rgba(255, 255, 255, 0.3), inset 0px -1.5px 2px rgba(0, 0, 0, 0.3), var(--shadow-hover-primary)"}},"&:focus-visible":{"--shadow":"inset 0px 1px 1px rgba(255, 255, 255, 0.3), inset 0px -1.5px 2px rgba(0, 0, 0, 0.3), var(--shadow-hover-primary)"},"&:active":{"--shadow":"inset 0px -1px 1px rgba(255, 255, 255, 0.2), inset 0px -1.5px 2px rgba(0, 0, 0, 0.3)"}},secondary:{"--button-background":"transparent","--color":"var(--accent)","&:hover":{"&:not(:disabled)":{}},"&:focus-visible":{}},tertiary:{"--button-background":"transparent","--color":"var(--text-tertiary)","&:hover":{"&:not(:disabled)":{"--button-background":a.a["background-color"],"--color":"var(--text-primary)"}},"&:focus-visible":{"--button-background":a.a["background-color"],"--color":"var(--text-primary)"}}},inverted:{true:{},false:{}},rounded:{true:{borderRadius:"9999px"},false:{}}},compoundVariants:[{variant:"primary",inverted:!0,css:{"--button-background":"var(--text-primary)","--color":"var(--background)"}},{variant:"secondary",inverted:!0,css:{}}]}),l=(0,i.g)("button",{WebkitAppearance:"none",WebkitTapHighlightColor:"transparent",WebkitUserSelect:"none",MozUserSelect:"none",MsUserSelect:"none",userSelect:"none",display:"flex",justifyContent:"center",alignItems:"center",flexShrink:"0",outline:"none",cursor:"pointer",opacity:"var(--opacity, 1)",background:"var(--button-background, var(--foreground))",color:"var(--color, var(--text-tertiary))",transform:"scale(var(--button-content-scale, 1)) translateZ(0)","--shadow-hover-primary":"0 2px 40px -4px var(--input-focus)",borderRadius:"var(--corner, var(--border-radius-1))",boxShadow:"var(--shadow, none)",border:"var(--border-thickness, 1px) solid var(--border-color, oklch(from var(--border-color) l c h / 60%))",transition:"box-shadow 0.3s ease, border 0.2s, border-color 0.2s, color 0.3s ease, background 0.3s ease, transform 0.2s","&:disabled":{cursor:"not-allowed","--button-scale":"1.0 !important","--shadow":"none !important","--opacity":"0.4",filter:"grayscale(0.25)"},"&:hover":{"--button-content-scale":"1.1"},"&:focus-visible":{"--button-content-scale":"1.1"},"&:active":{"--button-content-scale":"0.95"},variants:{variant:{primary:{"--button-background":"var(--accent)","--border-color":"transparent","--border-thickness":"0px","--color":"var(--text-primary)","--shadow":"inset 0px 1px 1px rgba(255, 255, 255, 0.3), inset 0px -1.5px 2px rgba(0, 0, 0, 0.3)","&:hover":{"&:not(:disabled)":{"--shadow":"inset 0px 1px 1px rgba(255, 255, 255, 0.3), inset 0px -1.5px 2px rgba(0, 0, 0, 0.3), var(--shadow-hover-primary)"}},"&:focus-visible":{"--shadow":"inset 0px 1px 1px rgba(255, 255, 255, 0.3), inset 0px -1.5px 2px rgba(0, 0, 0, 0.3), var(--shadow-hover-primary)"}},secondary:{"--button-background":a.a["background-color"],border:a.a.border,"--color":"var(--text-secondary)","&:hover":{"&:not(:disabled)":{"--color":"var(--text-primary)","--shadow":"var(--shadow-hover-primary)"}},"&:focus-visible":{"--color":"var(--text-primary)","--shadow":"var(--shadow-hover-primary)"}},tertiary:{"--border-color":"transparent","--button-background":"transparent","&:hover":{"&:not(:disabled)":{"--button-background":a.a["background-color"],"--color":"var(--text-primary)"}},"&:focus-visible":{"--button-background":a.a["background-color"],"--color":"var(--text-primary)"}}},rounded:{true:{borderRadius:"9999px","&::after":{borderRadius:"9999px"}},false:{}},size:{small:{width:"30px",height:"30px","& svg":{width:"16px",height:"16px"}},large:{width:"34px",height:"34px","& svg":{width:"18px",height:"18px"}}}},defaultVariants:{size:"large",variant:"secondary"}}),d=o.forwardRef((e,r)=>{let{variant:t="primary",children:o,icon:a,startIcon:i,endIcon:d,...p}=e;return"icon"===t?(0,s.jsx)(l,{variant:"tertiary",ref:r,...p,children:(0,s.jsx)(n.a,{css:{zIndex:1},children:a})}):(0,s.jsxs)(c,{hasIcon:i?"startIcon":d?"endIcon":"none",variant:t,ref:r,...p,children:[i?(0,s.jsx)(n.a,{css:{marginRight:"var(--space-1)"},children:i}):null,o,d?(0,s.jsx)(n.a,{css:{marginLeft:"var(--space-1)"},children:d}):null]})});d.displayName="Button";var p=d,u=o.forwardRef((e,r)=>{let{variant:t="secondary",children:a,...i}=e;return o.isValidElement(a)||console.error("Children must be a valid icon"),(0,s.jsx)(l,{variant:t,ref:r,...i,children:(0,s.jsx)(n.a,{css:{zIndex:1},children:a})})});u.displayName="IconButton";var h=u}}]);