(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[43591,56628,85872],{23299:(e,s,t)=>{"use strict";t.d(s,{A:()=>y});var n=t(87687),a=t(52751),r=t(31928),i=t(30251),o=t(21040);let c=a.forwardRef(function(e,s){let{Icon:t,iconSide:a="left",iconProps:r={},backgroundColor:i,highlightColor:c,boopEffect:y={rotation:10},children:u,style:j={},discouraged:g=!1,href:f,textAlign:A="center",...I}=e,[v,w]=(0,o.A)(y);return(0,n.jsxs)(l,{ref:s,onMouseEnter:()=>{w()},style:{"--pb-background-color":i,"--pb-highlight-color":c,...j},"data-discouraged":g,href:f,as:"string"==typeof f?"a":"button",...I,children:[t&&(0,n.jsx)(p,{style:{order:"left"===a?1:3},children:(0,n.jsx)(h,{children:(0,n.jsx)(x,{style:v,children:(0,n.jsx)(t,{size:20,...r})})})}),u&&(0,n.jsx)(m,{style:{order:2},children:u}),"true-center"===A&&(0,n.jsx)(d,{style:{order:"left"===a?3:1}})]})}),l=(0,r.I)("button")({name:"Wrapper",class:"w19mrn5v",propsAsIs:!1}),d=(0,r.I)("span")({name:"Col",class:"c1rpf4ut",propsAsIs:!1}),p=(0,r.I)(d)({name:"IconCol",class:"iwv8n0j",propsAsIs:!0}),h=(0,r.I)("span")({name:"IconBox",class:"i1qpbbb9",propsAsIs:!1}),x=(0,r.I)(i.CS.span)({name:"IconWrapper",class:"i1m1cbkp",propsAsIs:!0}),m=(0,r.I)("span")({name:"ChildWrapper",class:"c7sw782",propsAsIs:!1}),y=c;t(52391)},42558:(e,s,t)=>{"use strict";t.d(s,{A:()=>r});var n=t(31928),a=t(23299);let r=(0,n.I)(a.A)({name:"ButtonPrimary",class:"bcww6zb",propsAsIs:!0});t(69628)},17774:(e,s,t)=>{"use strict";t.d(s,{A:()=>r});var n=t(31928),a=t(23299);let r=(0,n.I)(a.A)({name:"ButtonSecondary",class:"bis146",propsAsIs:!0});t(49716)},64075:(e,s,t)=>{"use strict";t.d(s,{A:()=>r});var n=t(31928),a=t(42591);let r=(0,n.I)(a.uS)({name:"Space",class:"s1hfctpl",propsAsIs:!0});t(6743)},60115:(e,s,t)=>{"use strict";t.d(s,{A:()=>o});var n=t(52751),a=t(68852),r=t(21347);let i={a:[89,20],b:[141,20],c:[183,20],d:[225,20],e:[295,20],f:[353,20]};function o(){let[e]=(0,r.A)("/sounds/tick-sprite.mp3",{sprite:i,volume:.15});return n.useCallback(()=>{e({id:(0,a.Z6)(Object.keys(i))})},[e])}},63350:(e,s,t)=>{"use strict";t.d(s,{BS:()=>c,FP:()=>u,JU:()=>p,Uc:()=>x,ZW:()=>l,fI:()=>h,hW:()=>o,z7:()=>d});var n=t(87687),a=t(52751),r=t(31928),i=t(51311);let o=5;function c(e){let{width:s,height:t,size:r=280,defs:i,children:o,...c}=e,l=a.useId().replace(/:/g,""),d="".concat(l,"-grid");return(0,n.jsxs)(y,{width:null!=s?s:r,height:null!=t?t:r,...c,children:[(0,n.jsxs)("defs",{children:[(0,n.jsx)("pattern",{id:d,width:"20",height:"20",patternUnits:"userSpaceOnUse",children:(0,n.jsx)("path",{d:"\n              M 20 0 L 20 20\n              M 0 20 L 20 20\n            ",fill:"none",stroke:"hsl(0 0% 80%)",strokeWidth:"0.5"})}),i]}),(0,n.jsx)("rect",{width:"100%",height:"100%",fill:"url(#".concat(d,")"),fillOpacity:"0.5"}),o]})}function l(e){let{cx:s,cy:t,...a}=e;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("circle",{cx:s,cy:t,r:o,fill:"var(--color-background)",...a}),(0,n.jsx)("circle",{cx:s,cy:t,r:o-2,fill:"white",...a})]})}let d=a.memo(function(e){let{code:s,lang:t="html",highlightedLines:a,...r}=e;return(0,n.jsx)(m,{...r,children:(0,n.jsx)(i.default,{lang:t,includeLoadingSpinner:!0,includeContentStyles:!1,lockedToColorMode:"dark",highlight:a,code:s})})});function p(e){let{x:s,y:t,textAnchor:a,dominantBaseline:r,fontSize:i="1rem",children:o,ref:c,...l}=e;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(f,{x:s,y:t,textAnchor:a,dominantBaseline:r,fontSize:i,...l,children:o}),(0,n.jsx)(g,{x:s,y:t,textAnchor:a,dominantBaseline:r,fontSize:i,...l,children:o})]})}let h=(0,r.I)("div")({name:"Row",class:"rd9id5h",propsAsIs:!1}),x=(0,r.I)("tspan")({name:"Coord",class:"c1nimlao",propsAsIs:!0}),m=(0,r.I)("div")({name:"CodeWrapper",class:"cujkhw1",propsAsIs:!1}),y=(0,r.I)("svg")({name:"StyledSvg",class:"s1j66pt9",propsAsIs:!1}),u=(0,r.I)("g")({name:"Indicators",class:"i1wntda9",propsAsIs:!0}),j=(0,r.I)("text")({name:"LabelBase",class:"ley0nm0",propsAsIs:!0}),g=(0,r.I)(j)({name:"LabelForeground",class:"l1tcs5u4",propsAsIs:!0}),f=(0,r.I)(j)({name:"LabelBackground",class:"l1s5y600",propsAsIs:!0});t(7820)},43108:(e,s,t)=>{"use strict";t.r(s),t.d(s,{default:()=>m});var n=t(87687);t(52751);var a=t(31928),r=t(68852),i=t(20120),o=t(99800),c=t(63350);let l={a:{stroke:"hsl(45deg 100% 50%)","stroke-width":"6px","stroke-dasharray":"20, 14","stroke-linecap":"butt"},b:{stroke:"oklch(0.7 0.2 348)","stroke-width":"16px","stroke-dasharray":"0, 15","stroke-linecap":"round"},c:{stroke:"oklch(0.9 0.2 179)","stroke-width":"4px","stroke-dasharray":"0, 10, 25, 10","stroke-linecap":"square"},d:{stroke:"white","stroke-width":"10px","stroke-dasharray":"0, 20, 26, 60","stroke-linecap":"round"},e:{stroke:"hsl(10deg 100% 80%)","stroke-width":"12px","stroke-dasharray":"3, 12","stroke-linecap":"butt"}},d=(0,a.I)("div")({name:"OuterDemoWrapper",class:"o1yub8jp",propsAsIs:!1}),p=(0,a.I)("div")({name:"Row",class:"r1gmx7oh",propsAsIs:!1}),h=(0,a.I)("div")({name:"CodeWrapper",class:"cdy9myh",propsAsIs:!1}),x=(0,a.I)(c.BS)({name:"StyledSvg",class:"slq2vh6",propsAsIs:!0}),m=function(e){let{codeOutput:s}=e;return(0,n.jsx)(d,{children:(0,n.jsx)(i.Ay,{outputWrapper:null,initialValues:{variant:"a"},controlPosition:"top",controls:[(0,n.jsx)(i.Cd,{id:"variant",label:"Variant",options:[{label:"A",value:"a"},{label:"B",value:"b"},{label:"C",value:"c"},{label:"D",value:"d"},{label:"E",value:"e"}]},"variant")],customGrid:{gridTemplateColumns:"min(400px, 100%)",justifyContent:"center"},children:e=>{let{variant:t}=e,a=l[t],i=(0,r.yS)(a,(e,s)=>[(0,r.Iq)(e),s]);return(0,n.jsxs)(p,{children:[(0,n.jsx)(x,{viewBox:"0 0 200 200",size:300,"data-variant":t,fill:"none",children:(0,n.jsx)("circle",{cx:"100",cy:"100",r:"50",style:i})}),(0,n.jsx)(h,{children:(0,n.jsx)(o.A,{lang:"html",code:function(e){let s=Object.entries(l[e]).map(e=>{let[s,t]=e;return"    ".concat(s,": ").concat(t,";")}).join("\n");return"\n<style>\n  circle {\n".concat(s,"\n  }\n</style>\n").concat("\n \n",'\n<svg viewBox="0 0 200 200">\n  <circle cx="100" cy="100" r="50" />\n</svg>\n  ')}(t),children:s})})]})}})})};t(2614)},57363:(e,s,t)=>{"use strict";t.r(s),t.d(s,{default:()=>sf});var n=t(87687),a=t(52751),r=t(31928),i=t(60115),o=t(20120),c=t(64075),l=t(63350);let d=(0,r.I)("line")({name:"GuideLineBase",class:"gqltevh",propsAsIs:!0}),p=(0,r.I)(d)({name:"GuideLineForeground",class:"g1mx31e3",propsAsIs:!0}),h=(0,r.I)(d)({name:"GuideLineBackground",class:"gvcx5r",propsAsIs:!0}),x=function(e){let{isActive:s=!1,isHidden:t=!1,ref:a,...r}=e;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(h,{"data-is-active":s,...r}),(0,n.jsx)(p,{"data-is-active":s,...r})]})};t(12959);let m=(0,r.I)("g")({name:"Wrapper",class:"wo5do96",propsAsIs:!0}),y=(0,r.I)("line")({name:"BaseLine",class:"b17e17kt",propsAsIs:!0}),u=(0,r.I)(y)({name:"BackgroundLine",class:"b1ty2sj0",propsAsIs:!0}),j=(0,r.I)(y)({name:"ForegroundLine",class:"f488zl3",propsAsIs:!0}),g=(0,r.I)("line")({name:"BackgroundEndCap",class:"b1yhqbyh",propsAsIs:!0}),f=(0,r.I)("line")({name:"ForegroundEndCap",class:"fmx9r0i",propsAsIs:!0}),A=function(e){let{x1:s,y1:t,x2:a,y2:r,isActive:i=!1,isHidden:o=!1,endCapLength:c=10,mask:l,ref:d,...p}=e,h=Math.atan2(r-t,a-s)+Math.PI/2,x=c/2,y=s+Math.cos(h)*x,A=t+Math.sin(h)*x,I=s-Math.cos(h)*x,v=t-Math.sin(h)*x,w=a+Math.cos(h)*x,k=r+Math.sin(h)*x,b=a-Math.cos(h)*x,S=r-Math.sin(h)*x;return(0,n.jsxs)(m,{"data-is-active":i,"data-is-hidden":o,mask:l,children:[(0,n.jsx)(u,{x1:s,y1:t,x2:a,y2:r,...p}),(0,n.jsx)(g,{x1:y,y1:A,x2:I,y2:v,...p}),(0,n.jsx)(g,{x1:w,y1:k,x2:b,y2:S,...p}),(0,n.jsx)(j,{x1:s,y1:t,x2:a,y2:r,...p}),(0,n.jsx)(f,{x1:y,y1:A,x2:I,y2:v,...p}),(0,n.jsx)(f,{x1:w,y1:k,x2:b,y2:S,...p})]})};t(62516);let I=(0,r.I)("div")({name:"DemoWrapper",class:"dsdfd8z",propsAsIs:!1}),v=(0,r.I)(c.A)({name:"OutputWrapper",class:"o1vaqllh",propsAsIs:!0}),w=(0,r.I)("div")({name:"ControlsGrid",class:"c142omxx",propsAsIs:!1}),k=(0,r.I)(l.fI)({name:"StyledRow",class:"s1gb9soz",propsAsIs:!0}),b=(0,r.I)(l.z7)({name:"StyledCodeSnippet",class:"s11scz11",propsAsIs:!0}),S=(0,r.I)("div")({name:"SvgWrapper",class:"sva3ab2",propsAsIs:!1});t(85452);let C=(0,r.I)(c.A)({name:"OutputWrapper",class:"od7w2hb",propsAsIs:!0}),W=(0,r.I)("div")({name:"ControlsGrid",class:"cf5fqrh",propsAsIs:!1}),z=(0,r.I)(l.fI)({name:"StyledRow",class:"sutr18x",propsAsIs:!0}),B=(0,r.I)(l.z7)({name:"StyledCodeSnippet",class:"s1udi4f0",propsAsIs:!0}),q=(0,r.I)("div")({name:"SvgWrapper",class:"s14u0ic6",propsAsIs:!1});t(12672);let M=(0,r.I)(c.A)({name:"OutputWrapper",class:"o7utzz9",propsAsIs:!0}),P=(0,r.I)("div")({name:"ControlsGrid",class:"c1pwj92y",propsAsIs:!1}),L=(0,r.I)(l.fI)({name:"StyledRow",class:"sd9vgnu",propsAsIs:!0}),D=(0,r.I)("div")({name:"SvgWrapper",class:"sgio299",propsAsIs:!1}),G=(0,r.I)(l.z7)({name:"StyledCodeSnippet",class:"s1c5u40e",propsAsIs:!0});t(36195);let O=[[60,100],[100,180],[140,140],[180,180],[220,100]],U=(0,r.I)(c.A)({name:"OutputWrapper",class:"owduyfw",propsAsIs:!0}),R=(0,r.I)("div")({name:"ControlsGrid",class:"c1va82ni",propsAsIs:!1}),T=(0,r.I)(l.fI)({name:"StyledRow",class:"sisyji7",propsAsIs:!0}),J=(0,r.I)(l.z7)({name:"StyledCodeSnippet",class:"so1es9b",propsAsIs:!0}),F=(0,r.I)("div")({name:"SvgWrapper",class:"s17tlxie",propsAsIs:!1});t(81076);let E=[[60,100],[100,180],[140,140],[180,180],[220,100]],V=(0,r.I)(c.A)({name:"OutputWrapper",class:"oihe7kn",propsAsIs:!0}),Z=(0,r.I)("div")({name:"ControlsGrid",class:"c1s3f71m",propsAsIs:!1}),H=(0,r.I)(l.fI)({name:"StyledRow",class:"s1ojqu8g",propsAsIs:!0}),_=(0,r.I)(l.z7)({name:"StyledCodeSnippet",class:"s8cqeik",propsAsIs:!0}),Y=(0,r.I)("div")({name:"SvgWrapper",class:"sdfxt1e",propsAsIs:!1});t(31388);let N=(0,r.I)(c.A)({name:"OutputWrapper",class:"ofzv9i5",propsAsIs:!0}),K=(0,r.I)("div")({name:"ControlsGrid",class:"cts0t3k",propsAsIs:!1}),Q=(0,r.I)(l.fI)({name:"StyledRow",class:"s1x8d8sp",propsAsIs:!0}),X=(0,r.I)(l.z7)({name:"StyledCodeSnippet",class:"s1s5wfwx",propsAsIs:!0}),$=(0,r.I)("div")({name:"SvgWrapper",class:"s82l4rc",propsAsIs:!1}),ee=(0,r.I)("text")({name:"StyledText",class:"s1njrb8a",propsAsIs:!0});t(73927);var es=t(92597),et=t(68852),en=t(21347);let ea=(0,r.I)("div")({name:"Wrapper",class:"w1vxraon",propsAsIs:!1}),er=(0,r.I)("div")({name:"IconWrapper",class:"iu0orjd",propsAsIs:!1}),ei=(0,r.I)(es.A)({name:"Icon",class:"i7i3bzs",propsAsIs:!0}),eo=(0,r.I)("div")({name:"Particle",class:"p1j4rpzn",propsAsIs:!1}),ec=function(e){let{isExploded:s,svgSize:t,x1:r,y1:i}=e,[o,c]=a.useState(!1),[l,d]=a.useState([]),[p]=(0,en.A)("/sounds/pop.mp3");return a.useEffect(()=>{if(!s)return;let e=window.setTimeout(()=>{c(!0)},1e3);p(),d((0,et.y1)(25).map(e=>{let s=(0,et.S8)(e,0,25,0,360)+(0,et.yT)(-10,10),t=(0,et.yT)(5,55),n=(0,et.S8)(t,5,55,300,700)+(0,et.yT)(100,250),a=(0,et.S8)(t,5,55,400,1400)+(0,et.yT)(200,300),r=(0,et.yT)(10,13);return{id:crypto.randomUUID(),angle:s,distance:t,size:r,popDuration:n,fadeDuration:a,createdAt:Date.now()}}));let t=window.setTimeout(()=>{d([])},3e3);return()=>{window.clearTimeout(e),window.clearTimeout(t)}},[s,p]),(0,n.jsxs)(ea,{children:[o&&s&&(0,n.jsx)(er,{children:(0,n.jsx)(ei,{size:96,strokeWidth:1.5})}),l.map(e=>(0,n.jsx)(eo,{style:{"--angle":e.angle+"deg","--distance":e.distance+"px","--size":e.size+"px","--pop-duration":e.popDuration+"ms","--fade-duration":e.fadeDuration+"ms","--x":r+"px","--y":i+"px"}},e.id))]})};t(44786);var el=t(51838),ed=t(87542),ep=t(17774),eh=t(11374);let ex=(0,r.I)("div")({name:"Wrapper",class:"wvt1cu8",propsAsIs:!1}),em=(0,r.I)("div")({name:"Content",class:"c1ykrpbo",propsAsIs:!1}),ey=(0,r.I)("p")({name:"Heading",class:"h13zszij",propsAsIs:!1}),eu=(0,r.I)("p")({name:"Paragraph",class:"pz1qtdx",propsAsIs:!1}),ej=(0,r.I)(ep.A)({name:"ResetButton",class:"r1g7wv4f",propsAsIs:!0}),eg=function(e){let{explodedState:s,handleResetExplosion:t}=e,{setActiveControlId:r}=a.useContext(ed.A),[i]=(0,en.A)("/sounds/alarm-military.mp3",{volume:.1});return(a.useEffect(()=>{"exploded"===s&&(r(null),window.setTimeout(()=>{i()},1e3))},[s,r,i]),"peace"===s||"aftermath"===s)?null:(0,n.jsx)(ex,{style:{opacity:"cleanup"===s?0:1},children:(0,n.jsxs)(em,{style:{opacity:"cleanup"===s?0:1},children:[(0,n.jsx)(ey,{style:{"--fade-duration":"2000ms"},children:"Oh no! You blew up the line!"}),(0,n.jsxs)(eu,{style:{"--fade-duration":"2600ms"},children:["By setting the start and end points to the same value, you've inadvertently discovered a"," ",(0,n.jsx)(eh.A,{style:{color:"var(--wham-primary-500)"},children:"logical paradox"}),". Your device may explode momentarily."]}),(0,n.jsxs)(eu,{style:{"--fade-duration":"4500ms"},children:[(0,n.jsx)("strong",{children:"Just kidding!"})," This doesn't cause any problems. You'll just wind up with an invisible line. \uD83D\uDE04"]}),(0,n.jsx)(ej,{"data-color-mode":"dark",Icon:el.A,style:{"--fade-duration":"5000ms"},onClick:()=>{t()},children:"Re-enable Demo"})]})})};t(85287);let ef=(0,r.I)(c.A)({name:"OutputWrapper",class:"o1t6knjz",propsAsIs:!0}),eA=(0,r.I)("div")({name:"ControlsGrid",class:"c183pwrh",propsAsIs:!1}),eI=(0,r.I)("div")({name:"GridRow",class:"gj1mt5k",propsAsIs:!1}),ev=(0,r.I)("div")({name:"SvgWrapper",class:"s1tjkkdj",propsAsIs:!1}),ew=(0,r.I)("div")({name:"CodeWrapper",class:"c1fvq5of",propsAsIs:!1});t(76042);let ek=(0,r.I)(c.A)({name:"OutputWrapper",class:"o14h9zt6",propsAsIs:!0}),eb=(0,r.I)("div")({name:"ControlsGrid",class:"ciw1dk0",propsAsIs:!1}),eS=(0,r.I)("div")({name:"Wrapper",class:"wojy1f0",propsAsIs:!1}),eC=(0,r.I)(l.z7)({name:"StyledCodeSnippet",class:"so8d2eq",propsAsIs:!0}),eW=(0,r.I)("div")({name:"SvgWrapper",class:"s2q7ydm",propsAsIs:!1});function ez(e,s,t,n){return Array.from({length:e},(a,r)=>{let i=e%2==0?Math.PI/e:0,o=2*r*Math.PI/e-Math.PI/2+i,c=(0,et.GB)(s+n*Math.cos(o),2),l=(0,et.GB)(t+n*Math.sin(o),2);return"".concat(c,",").concat(l)}).join(" ")}t(18080);let eB=(0,r.I)(c.A)({name:"OutputWrapper",class:"o1bsewpq",propsAsIs:!0}),eq=(0,r.I)("div")({name:"ControlsGrid",class:"c1nd7loa",propsAsIs:!1}),eM=(0,r.I)("div")({name:"Row",class:"rhwr8he",propsAsIs:!1}),eP=(0,r.I)("div")({name:"SvgWrapper",class:"sdqayf3",propsAsIs:!1}),eL=(0,r.I)("polygon")({name:"Polygon",class:"pw86l56",propsAsIs:!0}),eD=(0,r.I)("text")({name:"StopText",class:"s1h8jyfz",propsAsIs:!0});t(98324);let eG=(0,r.I)(c.A)({name:"OutputWrapper",class:"o8jiojw",propsAsIs:!0}),eO=(0,r.I)("div")({name:"ControlsGrid",class:"c1w3c3xa",propsAsIs:!1}),eU=(0,r.I)("div")({name:"Wrapper",class:"wtjclid",propsAsIs:!1}),eR=(0,r.I)(l.z7)({name:"StyledCodeSnippet",class:"szxmz3j",propsAsIs:!0}),eT=(0,r.I)("div")({name:"SvgWrapper",class:"sqzyt6s",propsAsIs:!1});t(75982);let eJ=(0,r.I)(c.A)({name:"OutputWrapper",class:"o1niwk7v",propsAsIs:!0}),eF=(0,r.I)("div")({name:"ControlsGrid",class:"c1419mng",propsAsIs:!1}),eE=(0,r.I)("div")({name:"Wrapper",class:"w1hs08j5",propsAsIs:!1}),eV=(0,r.I)(l.z7)({name:"StyledCodeSnippet",class:"sx8x7yz",propsAsIs:!0}),eZ=(0,r.I)("div")({name:"SvgWrapper",class:"s1ahchi3",propsAsIs:!1});t(36428);var eH=t(43108);let e_=(0,r.I)(c.A)({name:"OutputWrapper",class:"oy4ainf",propsAsIs:!0}),eY=(0,r.I)("div")({name:"ControlsGrid",class:"cyuh0xp",propsAsIs:!1}),eN=(0,r.I)(l.fI)({name:"StyledRow",class:"s1ud5t8u",propsAsIs:!0}),eK=(0,r.I)(l.z7)({name:"StyledCodeSnippet",class:"std8bu6",propsAsIs:!0}),eQ=(0,r.I)("div")({name:"SvgWrapper",class:"s1wk4q1a",propsAsIs:!1});t(23863);var eX=t(2651);let e$=(0,eX.A)("Eraser",[["path",{d:"m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21",key:"182aya"}],["path",{d:"M22 21H7",key:"t4ddhn"}],["path",{d:"m5 11 9 9",key:"1mo9qw"}]]),e0=(0,eX.A)("Pencil",[["path",{d:"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",key:"1a8usu"}],["path",{d:"m15 5 4 4",key:"1mk7zo"}]]);var e1=t(42558);let e2=(function(e,s){let t=.75*Math.min(280,320)/2,n=.382*t,a=[];for(let e=0;e<10;e++){let s=e*Math.PI/5-Math.PI/2,r=e%2==0?t:n,i=140+r*Math.cos(s),o=160+r*Math.sin(s);a.push({x:i,y:o})}return a})(280,320).map(e=>"".concat(e.x,",").concat(e.y)).join("\n  "),e8=(0,r.I)(c.A)({name:"OutputWrapper",class:"op4lys4",propsAsIs:!0}),e5=(0,r.I)(l.fI)({name:"StyledRow",class:"s1kyz05y",propsAsIs:!0}),e3=(0,r.I)(l.z7)({name:"StyledCodeSnippet",class:"snfepu6",propsAsIs:!0}),e4=(0,r.I)("div")({name:"SvgWrapper",class:"suoi4i9",propsAsIs:!1}),e6=(0,r.I)("polygon")({name:"BaseShape",class:"bdmnx4b",propsAsIs:!0}),e7=(0,r.I)(e6)({name:"TraceShape",class:"t15hp6at",propsAsIs:!0}),e9=(0,r.I)(e6)({name:"Shape",class:"s4xrk5u",propsAsIs:!0}),se=(0,r.I)(e1.A)({name:"StyledButton",class:"s48bz4b",propsAsIs:!0});t(92038);var ss=t(54401),st=t(24283),sn=t(98553);let sa=(0,r.I)(c.A)({name:"OutputWrapper",class:"o1nz8vq1",propsAsIs:!0}),sr=(0,r.I)(l.fI)({name:"StyledRow",class:"s12wa3g0",propsAsIs:!0}),si=(0,r.I)(l.z7)({name:"StyledCodeSnippet",class:"s1u6jllm",propsAsIs:!0}),so=(0,r.I)("div")({name:"SvgWrapper",class:"s1j7d6km",propsAsIs:!1}),sc=(0,r.I)("polygon")({name:"Shape",class:"s1pqhd22",propsAsIs:!0});t(94820);var sl=t(7660),sd=t(53740);let sp=(0,r.I)("div")({name:"OutputWrapper",class:"ookhw4o",propsAsIs:!1}),sh=(0,r.I)(l.fI)({name:"StyledRow",class:"sbuc1m5",propsAsIs:!0}),sx=(0,r.I)(l.z7)({name:"StyledCodeSnippet",class:"s10dze7f",propsAsIs:!0}),sm=(0,r.I)("div")({name:"SvgWrapper",class:"st1ingj",propsAsIs:!1}),sy=(0,r.I)("g")({name:"Group",class:"g12xut6c",propsAsIs:!0}),su=(0,r.I)("circle")({name:"Circle",class:"c16naf2",propsAsIs:!0}),sj=(0,r.I)(e1.A)({name:"StyledButton",class:"s6f5g0x",propsAsIs:!0});t(80185);let sg={BasicCircleDemo:function(e){let{variant:s="default"}=e,t=a.useId().replace(/:/g,""),r="".concat(t,"-circle-mask"),c=(0,i.A)(),d=Math.round(280*("default"===s?.5:.25)),p=[(0,n.jsx)(o.oP,{highlightControlWhenActive:!0,id:"r",label:"r",secondaryLabel:"(radius)",min:0,max:d,wrapperStyle:{gridArea:"r"},onChange:()=>{c()}},"r")];return"default"===s&&p.unshift((0,n.jsx)(o.oP,{highlightControlWhenActive:!0,id:"cx",label:"cx",secondaryLabel:"(center x)",min:0,max:280,step:10,wrapperStyle:{gridArea:"cx"},onChange:()=>{c()}},"cx"),(0,n.jsx)(o.oP,{highlightControlWhenActive:!0,id:"cy",label:"cy",secondaryLabel:"(center y)",min:0,max:280,step:10,wrapperStyle:{gridArea:"cy"},onChange:()=>{c()}},"cy")),(0,n.jsx)(I,{"data-variant":s,children:(0,n.jsx)(o.Ay,{id:"basic-circle-demo",initialValues:{cx:Math.round(140),cy:Math.round(140),r:"default"===s?Math.round(70):Math.round(35)},outputWrapper:v,CustomGridComponent:w,controls:p,children:(e,t)=>{let{cx:a,cy:i,r:o}=e,c=Math.max(o-6,0),d=Math.PI/4,p=a+l.hW,h=i+l.hW,m=a+c*Math.cos(d),y=i+c*Math.sin(d),u=p+c*Math.cos(d)*.4,j=h+c*Math.sin(d)*.4,g='<svg width="'.concat(280,'" height="').concat(280,'">\n  <circle\n    cx="').concat(a,'"\n    cy="').concat(i,'"\n    r="').concat(o,'"\n    fill="none"\n    stroke="oklch(0.9 0.3 164)"\n    stroke-width="5"\n  />\n</svg>');return(0,n.jsxs)(k,{"data-variant":s,children:["default"===s&&(0,n.jsx)(b,{code:g}),(0,n.jsx)(S,{children:(0,n.jsxs)(l.BS,{size:280,defs:(0,n.jsxs)("mask",{id:r,children:[(0,n.jsx)("rect",{width:280,height:280,fill:"black"}),(0,n.jsx)("circle",{cx:a,cy:i,r:Math.max(o-5,0),fill:"white"})]}),children:[(0,n.jsx)(l.ZW,{cx:a,cy:i,mask:"url(#".concat(r,")")}),(0,n.jsx)("circle",{cx:a,cy:i,r:o,fill:"transparent",stroke:"var(--wham-complementary-500)",strokeWidth:5}),(0,n.jsxs)(l.FP,{style:{opacity:0===o?0:1},children:[(0,n.jsx)(x,{x1:a-l.hW-2,y1:i,x2:0,y2:i,isActive:"cx"===t}),(0,n.jsx)(x,{x1:a,y1:i-l.hW-2,x2:a,y2:0,isActive:"cy"===t}),(0,n.jsx)(A,{x1:p,y1:h,x2:m,y2:y,isActive:"r"===t,isHidden:o<=13,mask:"url(#".concat(r,")")}),(0,n.jsx)(l.JU,{x:a/2,y:i+20,textAnchor:"middle",dominantBaseline:"bottom","data-is-hidden":a<30,"data-is-active":"cx"===t,children:"cx"}),(0,n.jsx)(l.JU,{x:a+30,y:i/2,textAnchor:"end",dominantBaseline:"middle","data-is-hidden":i<20,"data-is-active":"cy"===t,children:"cy"}),(0,n.jsx)(l.JU,{x:u+8,y:j-8,textAnchor:"start",dominantBaseline:"middle",mask:"url(#".concat(r,")"),"data-is-active":"r"===t,children:"r"})]})]})})]})}})})},BasicEllipseDemo:function(){let e=a.useId().replace(/:/g,""),s="".concat(e,"-ellipse-mask"),t=(0,i.A)();return(0,n.jsx)(o.Ay,{id:"basic-ellipse-demo",initialValues:{cx:Math.round(150),cy:Math.round(150),rx:Math.round(75),ry:Math.round(50)},outputWrapper:C,CustomGridComponent:W,controls:[(0,n.jsx)(o.oP,{highlightControlWhenActive:!0,id:"cx",label:"cx",secondaryLabel:"(center x)",min:0,max:300,step:10,wrapperStyle:{gridArea:"cx"},onChange:()=>{t()}},"cx"),(0,n.jsx)(o.oP,{highlightControlWhenActive:!0,id:"cy",label:"cy",secondaryLabel:"(center y)",min:0,max:300,step:10,wrapperStyle:{gridArea:"cy"},onChange:()=>{t()}},"cy"),(0,n.jsx)(o.oP,{highlightControlWhenActive:!0,id:"rx",label:"rx",secondaryLabel:"(horizontal radius)",min:0,max:Math.round(150),step:2,wrapperStyle:{gridArea:"rx"},onChange:()=>{t()}},"rx"),(0,n.jsx)(o.oP,{highlightControlWhenActive:!0,id:"ry",label:"ry",secondaryLabel:"(vertical radius)",min:0,max:Math.round(150),step:2,wrapperStyle:{gridArea:"ry"},onChange:()=>{t()}},"ry")],children:(e,t)=>{let{cx:a,cy:r,rx:i,ry:o}=e,c='<svg width="'.concat(300,'" height="').concat(300,'">\n  <ellipse\n    cx="').concat(a,'"\n    cy="').concat(r,'"\n    rx="').concat(i,'"\n    ry="').concat(o,'"\n    fill="none"\n    stroke="oklch(0.9 0.3 164)"\n    stroke-width="5"\n  />\n</svg>');return(0,n.jsxs)(z,{children:[(0,n.jsx)(B,{code:c}),(0,n.jsx)(q,{children:(0,n.jsxs)(l.BS,{size:300,defs:(0,n.jsxs)("mask",{id:s,children:[(0,n.jsx)("rect",{width:300,height:300,fill:"black"}),(0,n.jsx)("ellipse",{cx:a,cy:r,rx:Math.max(i-5,0),ry:Math.max(o-5,0),fill:"white"})]}),children:[(0,n.jsx)(l.ZW,{cx:a,cy:r,mask:"url(#".concat(s,")")}),(0,n.jsx)("ellipse",{cx:a,cy:r,rx:i,ry:o,fill:"transparent",stroke:"var(--wham-complementary-500)",strokeWidth:5}),(0,n.jsxs)(l.FP,{style:{opacity:0===i||0===o?0:1},children:[(0,n.jsx)(x,{x1:a-l.hW-2,y1:r,x2:0,y2:r,isActive:"cx"===t}),(0,n.jsx)(x,{x1:a,y1:r-l.hW-2,x2:a,y2:0,isActive:"cy"===t}),(0,n.jsx)(A,{x1:a+8,y1:r,x2:a+i-6,y2:r,isActive:"rx"===t,isHidden:i<=13,mask:"url(#".concat(s,")")}),(0,n.jsx)(A,{x1:a,y1:r+8,x2:a,y2:r+o-6,isActive:"ry"===t,isHidden:o<=13,mask:"url(#".concat(s,")")}),(0,n.jsx)(l.JU,{x:a/2,y:r+16,textAnchor:"middle",dominantBaseline:"bottom","data-is-hidden":a<30,"data-is-active":"cx"===t,style:{fontSize:"0.85rem"},children:"cx"}),(0,n.jsx)(l.JU,{x:a+30,y:r/2,textAnchor:"end",dominantBaseline:"middle","data-is-hidden":r<20,"data-is-active":"cy"===t,style:{fontSize:"0.85rem"},children:"cy"}),(0,n.jsx)(l.JU,{x:Math.max(a+i/2,a+32),y:r+16,textAnchor:"middle",dominantBaseline:"bottom","data-is-active":"rx"===t,style:{fontSize:"0.85rem"},mask:"url(#".concat(s,")"),children:"rx"}),(0,n.jsx)(l.JU,{x:a+18,y:Math.max(r+o/2,r+32),textAnchor:"middle",dominantBaseline:"middle","data-is-active":"ry"===t,style:{fontSize:"0.85rem"},mask:"url(#".concat(s,")"),children:"ry"})]})]})})]})}})},BasicRectangleDemo:function(){let e=(0,i.A)();return(0,n.jsx)(o.Ay,{id:"basic-rectangle-demo",outputWrapper:M,initialValues:{x:60,y:100,width:180,height:100},CustomGridComponent:P,controls:[(0,n.jsx)(o.oP,{highlightControlWhenActive:!0,id:"x",label:"x",min:0,max:300,step:10,wrapperStyle:{gridArea:"x"},onChange:()=>{e()}},"x"),(0,n.jsx)(o.oP,{highlightControlWhenActive:!0,id:"y",label:"y",min:0,max:300,step:10,wrapperStyle:{gridArea:"y"},onChange:()=>{e()}},"y"),(0,n.jsx)(o.oP,{highlightControlWhenActive:!0,id:"width",label:"width",min:0,max:300,wrapperStyle:{gridArea:"width"},onChange:()=>{e()}},"width"),(0,n.jsx)(o.oP,{highlightControlWhenActive:!0,id:"height",label:"height",min:0,max:300,wrapperStyle:{gridArea:"height"},onChange:()=>{e()}},"height")],children:(e,s)=>{let{x:t,y:a,width:r,height:i}=e,o='<svg width="'.concat(300,'" height="').concat(300,'">\n  <rect\n    x="').concat(t,'"\n    y="').concat(a,'"\n    width="').concat(r,'"\n    height="').concat(i,'"\n    fill="none"\n    stroke="oklch(0.9 0.3 164)"\n    stroke-width="5"\n  />\n</svg>');return(0,n.jsxs)(L,{children:[(0,n.jsx)(G,{code:o}),(0,n.jsx)(D,{children:(0,n.jsxs)(l.BS,{size:300,children:[(0,n.jsx)("rect",{x:t,y:a,width:r,height:i,fill:"transparent",stroke:"var(--wham-complementary-500)",strokeWidth:5}),(0,n.jsxs)(l.FP,{style:{opacity:0===r||0===i?0:1},children:[(0,n.jsx)(l.ZW,{cx:t,cy:a}),(0,n.jsx)(x,{x1:t-l.hW-2,y1:a,x2:0,y2:a,"data-is-active":"x"===s}),(0,n.jsx)(x,{x1:t,y1:a-l.hW-2,x2:t,y2:0,"data-is-active":"y"===s}),(0,n.jsx)(A,{x1:t,y1:a+i+12,x2:t+r,y2:a+i+12,isActive:"width"===s,isHidden:r<=13||i<=0}),(0,n.jsx)(A,{x1:t+r+12,y1:a,x2:t+r+12,y2:a+i,isActive:"height"===s,isHidden:i<=13||r<=0}),(0,n.jsx)(l.JU,{x:t/2,y:a+20,textAnchor:"middle",dominantBaseline:"bottom","data-is-hidden":t<25,"data-is-active":"x"===s,children:"x"}),(0,n.jsx)(l.JU,{x:t+30,y:a/2,textAnchor:"end",dominantBaseline:"middle","data-is-hidden":a<25,"data-is-active":"y"===s,children:"y"}),(0,n.jsx)(l.JU,{x:t+r/2,y:a+i+32,textAnchor:"middle",dominantBaseline:"bottom","data-is-hidden":r<=40||i<=0,"data-is-active":"width"===s,style:{fontSize:"0.85rem"},children:"width"}),(0,n.jsx)(l.JU,{x:t+r+29,y:a+i/2,textAnchor:"middle",dominantBaseline:"middle","data-is-active":"height"===s,"data-is-hidden":i<=40||r<=0,transform:"rotate(90 ".concat(t+r+29," ").concat(a+i/2,")"),style:{fontSize:"0.85rem"},children:"height"})]})]})})]})}})},BasicPolygonDemo:function(){let e=(0,i.A)();return(0,n.jsx)(o.Ay,{id:"basic-polygon-demo",outputWrapper:U,initialValues:{cx:O[O.length-1][0],cy:O[O.length-1][1]},CustomGridComponent:R,controls:[(0,n.jsx)(o.oP,{highlightControlWhenActive:!0,id:"cx",label:"x",secondaryLabel:"(final point)",min:0,max:300,step:10,wrapperStyle:{gridArea:"cx"},onChange:()=>{e()}},"cx"),(0,n.jsx)(o.oP,{highlightControlWhenActive:!0,id:"cy",label:"y",secondaryLabel:"(final point)",min:0,max:300,step:10,wrapperStyle:{gridArea:"cy"},onChange:()=>{e()}},"cy")],children:(e,s)=>{let{cx:t,cy:r}=e,i=O.map((e,s)=>{let[n,a]=e;return s===O.length-1?[t,r]:[n,a]}),o=i.map(e=>{let[s,t]=e;return"".concat(s,",").concat(t)}),c=o.join(" "),d="\n      "+o.join("\n      ")+"\n    ",p='<svg width="'.concat(300,'" height="').concat(300,'">\n  <polygon\n    points="').concat(d,'"\n  />\n</svg>');return(0,n.jsxs)(T,{children:[(0,n.jsx)(J,{code:p}),(0,n.jsx)(F,{children:(0,n.jsxs)(l.BS,{size:300,children:[(0,n.jsx)("polygon",{points:c,fill:"none",stroke:"var(--wham-complementary-500)",strokeWidth:5}),i.map((e,t)=>{let[r,i]=e,o=t%2==0,c=t===O.length-1;return(0,n.jsxs)(a.Fragment,{children:[(0,n.jsxs)(l.JU,{x:r,y:o?i-12:i+12,textAnchor:"middle",dominantBaseline:"middle",style:{fontSize:"0.625rem"},children:["(",(0,n.jsx)(l.Uc,{"data-is-active":c&&"cx"===s,children:r}),","," ",(0,n.jsx)(l.Uc,{"data-is-active":c&&"cy"===s,children:i}),")"]}),(0,n.jsx)(l.ZW,{cx:r,cy:i},"".concat(r,"-").concat(i))]},t)}),(0,n.jsx)(l.ZW,{cx:t,cy:r})]})})]})}})},BasicPolylineDemo:function(){let e=(0,i.A)();return(0,n.jsx)(o.Ay,{id:"basic-polyline-demo",outputWrapper:V,initialValues:{cx:E[E.length-1][0],cy:E[E.length-1][1]},CustomGridComponent:Z,controls:[(0,n.jsx)(o.oP,{highlightControlWhenActive:!0,id:"cx",label:"x",secondaryLabel:"(final point)",min:0,max:280,step:10,wrapperStyle:{gridArea:"cx"},onChange:()=>{e()}},"cx"),(0,n.jsx)(o.oP,{highlightControlWhenActive:!0,id:"cy",label:"y",secondaryLabel:"(final point)",min:0,max:280,step:10,wrapperStyle:{gridArea:"cy"},onChange:()=>{e()}},"cy")],children:(e,s)=>{let{cx:t,cy:r}=e,i=E.map((e,s)=>{let[n,a]=e;return s===E.length-1?[t,r]:[n,a]}),o=i.map(e=>{let[s,t]=e;return"".concat(s,",").concat(t)}),c=o.join(" "),d="\n      "+o.join("\n      ")+"\n    ",p='<svg width="'.concat(280,'" height="').concat(280,'">\n  <polyline\n    points="').concat(d,'"\n    fill="none"\n    stroke="oklch(0.9 0.3 164)"\n    stroke-width="5"\n  />\n</svg>');return(0,n.jsxs)(H,{children:[(0,n.jsx)(_,{code:p}),(0,n.jsx)(Y,{children:(0,n.jsxs)(l.BS,{size:280,children:[(0,n.jsx)("polyline",{points:c,fill:"none",stroke:"var(--wham-complementary-500)",strokeWidth:5}),i.map((e,t)=>{let[r,i]=e,o=t===E.length-1,c=t%2==0?i-12:i+12;return(0,n.jsxs)(a.Fragment,{children:[(0,n.jsxs)(l.JU,{x:r,y:c,textAnchor:"middle",dominantBaseline:"middle",style:{fontSize:"0.625rem"},children:["(",(0,n.jsx)(l.Uc,{"data-is-active":o&&"cx"===s,children:r}),","," ",(0,n.jsx)(l.Uc,{"data-is-active":o&&"cy"===s,children:i}),")"]}),(0,n.jsx)(l.ZW,{cx:r,cy:i},"".concat(r,"-").concat(i))]},"".concat(r,"-").concat(i))}),(0,n.jsx)(l.ZW,{cx:t,cy:r})]})})]})}})},BasicTextDemo:function(){let e=(0,i.A)();return(0,n.jsx)(o.Ay,{id:"basic-text-demo",initialValues:{x:Math.round(140),y:Math.round(140),fontSize:32},outputWrapper:N,CustomGridComponent:K,controls:[(0,n.jsx)(o.oP,{highlightControlWhenActive:!0,id:"x",label:"x",min:0,max:280,step:10,wrapperStyle:{gridArea:"x"},onChange:()=>{e()}},"x"),(0,n.jsx)(o.oP,{highlightControlWhenActive:!0,id:"y",label:"y",min:0,max:280,step:10,wrapperStyle:{gridArea:"y"},onChange:()=>{e()}},"y")],children:(e,s)=>{let{x:t,y:a}=e,r='<svg width="'.concat(280,'" height="').concat(280,'">\n  <text\n    x="').concat(t,'"\n    y="').concat(a,'"\n    text-anchor="middle"\n    dominant-baseline="middle"\n    fill="oklch(0.9 0.3 164)"\n  >\n    Hello World\n  </text>\n</svg>');return(0,n.jsxs)(Q,{children:[(0,n.jsx)(X,{code:r}),(0,n.jsx)($,{children:(0,n.jsxs)(l.BS,{size:280,children:[(0,n.jsx)(x,{x1:t,y1:a,x2:0,y2:a,isActive:"x"===s}),(0,n.jsx)(x,{x1:t,y1:a,x2:t,y2:0,isActive:"y"===s}),(0,n.jsx)(l.JU,{x:t/2,y:a+24,"data-is-active":"x"===s,"data-is-hidden":t<40,children:"x"}),(0,n.jsx)(l.JU,{x:t+24,y:a/2,"data-is-active":"y"===s,"data-is-hidden":a<50,children:"y"}),(0,n.jsx)(ee,{x:t,y:a,fontSize:"2rem",textAnchor:"middle",dominantBaseline:"middle",stroke:"var(--color-background)",strokeWidth:2,fill:"var(--wham-complementary-500)",children:"Hello World"}),(0,n.jsx)(ee,{x:t,y:a,fontSize:"2rem",textAnchor:"middle",dominantBaseline:"middle",fill:"var(--wham-complementary-500)",children:"Hello World"}),(0,n.jsx)(l.ZW,{cx:t,cy:a})]})})]})}})},BasicLineDemo:function(){let[e,s]=a.useState("peace"),t="exploded"===e,r=(0,i.A)(),c=a.useRef({x1:80,y1:80,x2:200,y2:200});function d(){"peace"===e&&c.current.x1===c.current.x2&&c.current.y1===c.current.y2&&s("exploded")}return(0,n.jsx)(o.Ay,{id:"basic-line-demo",outputWrapper:ef,initialValues:{x1:80,y1:80,x2:200,y2:200},CustomGridComponent:eA,controls:[(0,n.jsx)(o.oP,{highlightControlWhenActive:!0,id:"x1",label:"x1",min:0,max:280,step:10,disabled:t,wrapperStyle:{gridArea:"x1"},onChange:e=>{c.current.x1=e,r(),d()}},"x1"),(0,n.jsx)(o.oP,{highlightControlWhenActive:!0,id:"y1",label:"y1",min:0,max:280,step:10,disabled:t,wrapperStyle:{gridArea:"y1"},onChange:e=>{c.current.y1=e,r(),d()}},"y1"),(0,n.jsx)(o.oP,{highlightControlWhenActive:!0,id:"x2",label:"x2",min:0,max:280,step:10,disabled:t,wrapperStyle:{gridArea:"x2"},onChange:e=>{c.current.x2=e,r(),d()}},"x2"),(0,n.jsx)(o.oP,{highlightControlWhenActive:!0,id:"y2",label:"y2",min:0,max:280,step:10,disabled:t,wrapperStyle:{gridArea:"y2"},onChange:e=>{c.current.y2=e,r(),d()}},"y2")],children:(a,r)=>{let{x1:i,y1:o,x2:c,y2:d}=a,p=i===c&&o===d,h='<svg width="'.concat(280,'" height="').concat(280,'">\n  <line\n    x1="').concat(i,'"\n    y1="').concat(o,'"\n    x2="').concat(c,'"\n    y2="').concat(d,'"\n    stroke="oklch(0.9 0.3 164)"\n    stroke-width="5"\n  />\n</svg>');return(0,n.jsxs)(eI,{children:[(0,n.jsxs)(ev,{children:[(0,n.jsx)(l.BS,{size:280,children:(0,n.jsxs)(l.FP,{style:{opacity:p?0:1},children:[(0,n.jsx)(x,{x1:i-l.hW-2,y1:o,x2:0,y2:o,"data-is-active":"x1"===r}),(0,n.jsx)(x,{x1:i,y1:o-l.hW-2,x2:i,y2:0,"data-is-active":"y1"===r}),(0,n.jsx)(x,{x1:c-l.hW-2,y1:d,x2:0,y2:d,"data-is-active":"x2"===r}),(0,n.jsx)(x,{x1:c,y1:d-l.hW-2,x2:c,y2:0,"data-is-active":"y2"===r}),(0,n.jsx)("line",{x1:i,y1:o,x2:c,y2:d,stroke:"var(--wham-complementary-500)",strokeWidth:5}),(0,n.jsx)(l.JU,{x:i/2,y:o+20,textAnchor:"middle",dominantBaseline:"bottom","data-is-hidden":i<30,"data-is-active":"x1"===r,children:"x1"}),(0,n.jsx)(l.JU,{x:i+30,y:o/2,textAnchor:"end",dominantBaseline:"middle","data-is-hidden":o<20,"data-is-active":"y1"===r,children:"y1"}),(0,n.jsx)(l.JU,{x:c/2,y:d+20,textAnchor:"middle",dominantBaseline:"bottom","data-is-hidden":c<30,"data-is-active":"x2"===r,children:"x2"}),(0,n.jsx)(l.JU,{x:c+30,y:d/2,textAnchor:"end",dominantBaseline:"middle","data-is-hidden":d<20,"data-is-active":"y2"===r,children:"y2"}),(0,n.jsx)(l.ZW,{cx:i,cy:o}),(0,n.jsx)(l.ZW,{cx:c,cy:d})]})}),(0,n.jsx)(ec,{isExploded:t,svgSize:280,x1:i,y1:o,x2:c,y2:d})]}),(0,n.jsx)(ew,{children:(0,n.jsx)(l.z7,{code:h})}),(0,n.jsx)(eg,{explodedState:e,handleResetExplosion:()=>{s("cleanup"),window.setTimeout(()=>{s("aftermath")},1e3)}})]})}})},CenteredStrokeDemo:function(){let e=(0,i.A)();return(0,n.jsx)(o.Ay,{id:"centered-stroke-demo",outputWrapper:ek,initialValues:{strokeWidth:5},CustomGridComponent:eb,controls:[(0,n.jsx)(o.oP,{id:"strokeWidth",label:"stroke-width",min:0,max:200,step:2,onChange:()=>{e()}},"strokeWidth")],children:e=>{let{strokeWidth:s}=e,t='<svg width="'.concat(300,'" height="').concat(300,'">\n  <rect\n    x="80"\n    y="100"\n    width="140"\n    height="100"\n    stroke-width="').concat(s,'"\n    stroke="green"\n    fill="none"\n  />\n</svg>');return(0,n.jsxs)(eS,{children:[(0,n.jsx)(eC,{code:t}),(0,n.jsx)(eW,{children:(0,n.jsxs)(l.BS,{size:300,fill:"none",children:[(0,n.jsx)("rect",{x:80,y:100,width:140,height:100,strokeWidth:s,stroke:"var(--wham-complementary-500)"}),(0,n.jsx)("rect",{x:80,y:100,width:140,height:100,rx:2,strokeWidth:3,strokeDasharray:"6 5",strokeLinecap:"round",stroke:"hsl(210deg 15% 6% / 0.5)"}),(0,n.jsx)("rect",{x:80,y:100,width:140,height:100,rx:2,strokeWidth:1,strokeDasharray:"6 5",stroke:"white",strokeLinecap:"round"})]})})]})}})},PolygonFamilyDemo:function(){let e=a.useRef(0),s=a.useRef(0),t=(0,i.A)();return(0,n.jsx)(o.Ay,{id:"basic-polyline-demo",outputWrapper:eB,initialValues:{numOfSides:6},CustomGridComponent:eq,controls:[(0,n.jsx)(o.oP,{id:"numOfSides",label:"# of sides",min:3,max:12,step:1,onChange:()=>{t()}},"numOfSides")],children:t=>{let{numOfSides:a}=t,r=ez(a,140,140,80),i=ez(8,140,140,76);8===a&&8!==s.current&&e.current++,s.current=a;let o=8===a&&e.current<=3;return(0,n.jsx)(eM,{children:(0,n.jsx)(eP,{children:(0,n.jsxs)(l.BS,{size:280,children:[(0,n.jsx)(eL,{points:r,stroke:o?"red":"var(--wham-complementary-500)",fill:o?"red":"transparent",strokeWidth:5}),(0,n.jsx)(l.ZW,{cx:140,cy:140,style:{opacity:o?0:1}}),(0,n.jsx)(eD,{x:140,y:144,textAnchor:"middle",dominantBaseline:"middle",style:{opacity:o?1:0},children:"STOP"}),(0,n.jsx)(eL,{points:i,fill:"transparent",stroke:"white",strokeWidth:4,strokeLinejoin:"round",style:{opacity:o?1:0}})]})})})}})},RoundedRectangleBasicDemo:function(){let e=(0,i.A)();return(0,n.jsx)(o.Ay,{id:"centered-stroke-demo",outputWrapper:eG,initialValues:{rx:5},CustomGridComponent:eO,controls:[(0,n.jsx)(o.oP,{id:"rx",label:"rx",min:0,max:90,step:1,onChange:()=>{e()}},"rx")],children:e=>{let{rx:s}=e,t='<svg width="'.concat(320,'" height="').concat(320,'">\n  <rect\n    x="80"\n    y="100"\n    width="140"\n    height="100"\n    rx="').concat(s,'"\n    stroke="green"\n    stroke-width="5"\n    fill="none"\n  />\n</svg>');return(0,n.jsxs)(eU,{children:[(0,n.jsx)(eR,{code:t}),(0,n.jsx)(eT,{children:(0,n.jsx)(l.BS,{size:320,fill:"none",children:(0,n.jsx)("rect",{x:80,y:100,width:140,height:100,strokeWidth:5,rx:s,stroke:"var(--wham-complementary-500)"})})})]})}})},RoundedRectangleAdvancedDemo:function(){let e=(0,i.A)();return(0,n.jsx)(o.Ay,{id:"centered-stroke-demo",outputWrapper:eJ,initialValues:{rx:100,ry:50},CustomGridComponent:eF,controls:[(0,n.jsx)(o.oP,{highlightControlWhenActive:!0,id:"rx",label:"rx",secondaryLabel:"(horizontal radius)",min:20,max:200,step:10,onChange:()=>{e()}},"rx"),(0,n.jsx)(o.oP,{highlightControlWhenActive:!0,id:"ry",label:"ry",secondaryLabel:"(vertical radius)",min:20,max:200,step:10,onChange:()=>{e()}},"ry")],children:(e,s)=>{let{rx:t,ry:a}=e,r=function(e,s){let t=Math.max(e,s),n=Math.min(e,s),a=Math.pow(t-n,2)/Math.pow(t+n,2);return Math.PI*(t+n)*(1+3*a/(10+Math.sqrt(4-3*a)))}(t,a),i='<svg width="'.concat(340,'" height="').concat(340,'">\n  <rect\n    x="80"\n    y="100"\n    width="500"\n    height="500"\n    rx="').concat(t,'"\n    ry="').concat(a,'"\n    stroke="green"\n    stroke-width="5"\n    fill="none"\n  />\n</svg>');return(0,n.jsxs)(eE,{children:[(0,n.jsx)(eV,{code:i}),(0,n.jsx)(eZ,{children:(0,n.jsxs)(l.BS,{size:340,fill:"none",children:[(0,n.jsx)("ellipse",{cx:80+t,cy:100+a,rx:t,ry:a,fill:"none",stroke:"white",strokeWidth:Math.round((0,et.S8)(t+a,40,400,3,8)),strokeOpacity:.5,strokeDasharray:"".concat(r/50," ").concat(r/40),transform:"rotate(180 ".concat(80+t," ").concat(100+a,")"),strokeLinecap:"round"}),(0,n.jsx)(x,{x1:80+t-6,y1:100+a,x2:80,y2:100+a,stroke:"var(--wham-primary-500)",isActive:"rx"===s}),(0,n.jsx)(x,{x1:80+t,y1:100+a-6,x2:80+t,y2:100,stroke:"var(--wham-primary-500)",isActive:"ry"===s}),(0,n.jsx)("rect",{x:80,y:100,width:500,height:500,strokeWidth:5,rx:t,ry:a,stroke:"var(--wham-complementary-500)"}),(0,n.jsx)(l.JU,{x:80+t/2,y:100+a+16,textAnchor:"middle",dominantBaseline:"bottom","data-is-hidden":t<30,"data-is-active":"rx"===s,style:{fontSize:"0.8rem",opacity:t>=40?1:0},children:"rx"}),(0,n.jsx)(l.JU,{x:80+t+16,y:100+a/2,textAnchor:"start",dominantBaseline:"middle","data-is-hidden":a<30,"data-is-active":"ry"===s,style:{fontSize:"0.8rem",opacity:a>=30?1:0},children:"ry"}),(0,n.jsx)(l.ZW,{cx:80+t,cy:100+a})]})})]})}})},StrokeStylesDemo:eH.default,StrokeDashOffsetDemo:function(){let e=(0,i.A)();return(0,n.jsx)(o.Ay,{id:"stroke-dashoffset-basic-demo",outputWrapper:e_,initialValues:{dashLength:10,gapLength:10,dashOffset:0},CustomGridComponent:eY,controls:[(0,n.jsx)(o.oP,{id:"dashOffset",label:"Dash Offset",min:-40,max:40,step:1,wrapperStyle:{gridArea:"dashOffset"},onChange:()=>{e()}},"dashOffset"),(0,n.jsx)(o.oP,{id:"dashLength",label:"Dash Size",min:0,max:40,step:.5,wrapperStyle:{gridArea:"dashLength"},onChange:()=>{e()}},"dashLength"),(0,n.jsx)(o.oP,{id:"gapLength",label:"Gap Size",min:0,max:40,step:.5,wrapperStyle:{gridArea:"gapLength"},onChange:()=>{e()}},"gapLength")],children:e=>{let{dashLength:s,gapLength:t,dashOffset:a}=e,r="".concat(s,", ").concat(t),i="<style>\n  rect {\n    stroke: oklch(0.9 0.25 164);\n    stroke-width: 5;\n    stroke-dasharray: ".concat(r,";\n    stroke-dashoffset: ").concat(a,";\n  }\n</style>\n");return(0,n.jsxs)(eN,{children:[(0,n.jsx)(eK,{code:i}),(0,n.jsx)(eQ,{children:(0,n.jsx)(l.BS,{width:280,height:280,viewBox:"0 0 ".concat(280," ").concat(280),children:(0,n.jsx)("rect",{x:70,y:70,width:140,height:140,rx:10,fill:"none",stroke:"var(--wham-complementary-500)",strokeWidth:5,strokeLinecap:"round",strokeLinejoin:"round",strokeDasharray:r,strokeDashoffset:a})})})]})}})},SelfDrawingDemo:function(){let[e,s]=a.useState(!1),[t,r]=a.useState(763),i=a.useRef(null);return a.useEffect(()=>{i.current&&r(Math.ceil(i.current.getTotalLength()))},[]),(0,n.jsx)(o.Ay,{outputWrapper:e8,initialValues:{},children:a=>{let{}=a,r="<style>\n  polygon {\n    stroke-dasharray: ".concat(t,", 10000;\n    stroke-dashoffset: ").concat(e?0:t,";\n    transition:\n      stroke-dashoffset ").concat(3e3,'ms;\n  }\n</style>\n\n \n\n<svg viewBox="0 0 ').concat(280," ").concat(320,'">\n  <polygon points="..." />\n</svg>');return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e5,{children:[(0,n.jsx)(e4,{children:(0,n.jsxs)(l.BS,{width:280,height:320,viewBox:"0 0 ".concat(280," ").concat(320),children:[(0,n.jsx)(e7,{points:e2}),(0,n.jsx)(e9,{ref:i,points:e2,style:{"--path-length":t},strokeDashoffset:e?0:t})]})}),(0,n.jsx)(e3,{code:r})]}),(0,n.jsx)(se,{textAlign:"true-center",Icon:e?e$:e0,onClick:()=>s(!e),children:e?"Erase":"Draw shape"})]})}})},CasinoLightsEffect:function(){let[e,s]=a.useState(25),[t,r]=a.useState(0),i=a.useRef(0),c=(0,ss.A)();return(0,st.A)(()=>{i.current=t,r(t+e)}),a.useEffect(()=>{c&&s(0)},[c]),(0,n.jsx)(o.Ay,{outputWrapper:sa,initialValues:{},customGrid:{gridTemplateColumns:"min(400px, 100%)",justifyContent:"center"},controls:[(0,n.jsx)(sn.A,{id:"speed",label:"Animation Speed",min:0,max:100,value:e,setValue:s,handleReset:()=>s(c?0:25)},"speed")],children:e=>{let{}=e,s="@keyframes casinoLights {\n  from {\n    stroke-dashoffset: 0;\n  }\n  to {\n    stroke-dashoffset: ".concat(26,";\n  }\n}\n\n\n\npolygon {\n  stroke-dasharray: ").concat(0,", ").concat(26,";\n  animation:\n    casinoLights 400ms linear infinite;\n}\n");return(0,n.jsxs)(sr,{children:[(0,n.jsx)(so,{children:(0,n.jsx)(l.BS,{width:280,height:340,viewBox:"0 0 ".concat(280," ").concat(340),children:(0,n.jsx)(sc,{style:{strokeDashoffset:t/100},points:"\n                    ".concat(56," ").concat(255,"\n                    ").concat(140," ").concat(85,"\n                    ").concat(224," ").concat(255,"\n                  ")})})}),(0,n.jsx)(si,{lang:"css",code:s})]})}})},FancyLoadingSpinner:function(){let[e,s]=a.useState("paused"),t=(0,ss.A)();return a.useEffect(()=>{t&&s("paused")},[t]),(0,n.jsx)(o.Ay,{outputWrapper:sp,initialValues:{},customGrid:{gridTemplateColumns:"min(400px, 100%)",justifyContent:"center"},children:t=>{let{}=t,a="@keyframes grow {\n  from {\n    stroke-dasharray:\n      calc(var(--circumference) * 0.05),\n      var(--circumference);\n  }\n  to {\n    stroke-dasharray:\n      calc(var(--circumference) * 0.25),\n      var(--circumference);\n  }\n}\n\n \n\n@keyframes spin {\n  from {\n    stroke-dashoffset: 0;\n  }\n  to {\n    stroke-dashoffset:\n      calc(var(--circumference) * -0.95);\n  }\n}\n\n \n\ncircle {\n  /*\n    Calculate the circumference in JS, and\n    apply it as a custom property:\n  */\n  --circumference: 572px;\n  \n\n  animation:\n    grow 1200ms infinite alternate".concat("running"===e?"":" paused",",\n    spin 2400ms infinite alternate").concat("running"===e?"":" paused",";\n}\n"),r=162.5*Math.PI;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(sh,{children:[(0,n.jsx)(sm,{children:(0,n.jsx)(l.BS,{width:250,height:340,viewBox:"0 0 ".concat(250," ").concat(340),children:(0,n.jsx)(sy,{children:(0,n.jsx)(su,{cx:125,cy:170,r:81.25,fill:"none",stroke:"var(--wham-complementary-500)",style:{animationPlayState:e,"--circumference":r+"px"}})})})}),(0,n.jsx)(sx,{lang:"css",code:a})]}),(0,n.jsx)(sj,{textAlign:"true-center",Icon:"running"===e?sl.A:sd.A,onClick:()=>s("running"===e?"paused":"running"),children:"running"===e?"Pause":"Play"})]})}})}};function sf(e){let{componentName:s,...t}=e,a=sg[s];return(0,n.jsx)(a,{...t})}},52391:e=>{e.exports={w19mrn5v:"w19mrn5v",c1rpf4ut:"c1rpf4ut",iwv8n0j:"iwv8n0j",i1qpbbb9:"i1qpbbb9",i1m1cbkp:"i1m1cbkp",c7sw782:"c7sw782"}},69628:e=>{e.exports={bcww6zb:"bcww6zb",d16kq653:"d16kq653"}},49716:e=>{e.exports={bis146:"bis146",d16kq653:"d16kq653"}},85452:e=>{e.exports={o1vaqllh:"o1vaqllh",c142omxx:"c142omxx",s1gb9soz:"s1gb9soz",s11scz11:"s11scz11",sva3ab2:"sva3ab2"}},12672:e=>{e.exports={od7w2hb:"od7w2hb",cf5fqrh:"cf5fqrh",sutr18x:"sutr18x",s1udi4f0:"s1udi4f0",s14u0ic6:"s14u0ic6"}},76042:e=>{e.exports={o1t6knjz:"o1t6knjz",c183pwrh:"c183pwrh",gj1mt5k:"gj1mt5k",s1tjkkdj:"s1tjkkdj",c1fvq5of:"c1fvq5of"}},81076:e=>{e.exports={owduyfw:"owduyfw",c1va82ni:"c1va82ni",sisyji7:"sisyji7",so1es9b:"so1es9b",s17tlxie:"s17tlxie"}},31388:e=>{e.exports={oihe7kn:"oihe7kn",c1s3f71m:"c1s3f71m",s1ojqu8g:"s1ojqu8g",s8cqeik:"s8cqeik",sdfxt1e:"sdfxt1e"}},36195:e=>{e.exports={o7utzz9:"o7utzz9",c1pwj92y:"c1pwj92y",sd9vgnu:"sd9vgnu",sgio299:"sgio299",s1c5u40e:"s1c5u40e"}},7820:e=>{e.exports={rd9id5h:"rd9id5h",c1nimlao:"c1nimlao",cujkhw1:"cujkhw1",s1j66pt9:"s1j66pt9",i1wntda9:"i1wntda9",ley0nm0:"ley0nm0",l1tcs5u4:"l1tcs5u4",l1s5y600:"l1s5y600"}},73927:e=>{e.exports={ofzv9i5:"ofzv9i5",cts0t3k:"cts0t3k",s1x8d8sp:"s1x8d8sp",s1s5wfwx:"s1s5wfwx",s82l4rc:"s82l4rc",s1njrb8a:"s1njrb8a"}},18080:e=>{e.exports={o14h9zt6:"o14h9zt6",ciw1dk0:"ciw1dk0",wojy1f0:"wojy1f0",so8d2eq:"so8d2eq",s2q7ydm:"s2q7ydm"}},85287:e=>{e.exports={wvt1cu8:"wvt1cu8",c1ykrpbo:"c1ykrpbo",h13zszij:"h13zszij",fadeFromTransparent:"fadeFromTransparent",pz1qtdx:"pz1qtdx",r1g7wv4f:"r1g7wv4f"}},44786:e=>{e.exports={w1vxraon:"w1vxraon",iu0orjd:"iu0orjd",fadeToTransparent:"fadeToTransparent",i7i3bzs:"i7i3bzs","fadeIn-i7i3bzs":"fadeIn-i7i3bzs",p1j4rpzn:"p1j4rpzn","explode-p1j4rpzn":"explode-p1j4rpzn"}},12959:e=>{e.exports={gqltevh:"gqltevh",g1mx31e3:"g1mx31e3",gvcx5r:"gvcx5r"}},98324:e=>{e.exports={o1bsewpq:"o1bsewpq",c1nd7loa:"c1nd7loa",rhwr8he:"rhwr8he",sdqayf3:"sdqayf3",pw86l56:"pw86l56",s1h8jyfz:"s1h8jyfz"}},36428:e=>{e.exports={o1niwk7v:"o1niwk7v",c1419mng:"c1419mng",w1hs08j5:"w1hs08j5",sx8x7yz:"sx8x7yz",s1ahchi3:"s1ahchi3"}},75982:e=>{e.exports={o8jiojw:"o8jiojw",c1w3c3xa:"c1w3c3xa",wtjclid:"wtjclid",szxmz3j:"szxmz3j",sqzyt6s:"sqzyt6s"}},62516:e=>{e.exports={wo5do96:"wo5do96",b17e17kt:"b17e17kt",b1ty2sj0:"b1ty2sj0",f488zl3:"f488zl3",b1yhqbyh:"b1yhqbyh",fmx9r0i:"fmx9r0i"}},94820:e=>{e.exports={o1nz8vq1:"o1nz8vq1",s12wa3g0:"s12wa3g0",s1u6jllm:"s1u6jllm",s1j7d6km:"s1j7d6km",s1pqhd22:"s1pqhd22"}},80185:e=>{e.exports={ookhw4o:"ookhw4o",sbuc1m5:"sbuc1m5",s10dze7f:"s10dze7f",st1ingj:"st1ingj",g12xut6c:"g12xut6c",c16naf2:"c16naf2","tweakDashArray-c16naf2":"tweakDashArray-c16naf2","tweakOffset-c16naf2":"tweakOffset-c16naf2",s6f5g0x:"s6f5g0x"}},92038:e=>{e.exports={op4lys4:"op4lys4",s1kyz05y:"s1kyz05y",snfepu6:"snfepu6",suoi4i9:"suoi4i9",bdmnx4b:"bdmnx4b",t15hp6at:"t15hp6at",s4xrk5u:"s4xrk5u",s48bz4b:"s48bz4b"}},23863:e=>{e.exports={oy4ainf:"oy4ainf",cyuh0xp:"cyuh0xp",s1ud5t8u:"s1ud5t8u",std8bu6:"std8bu6",s1wk4q1a:"s1wk4q1a"}},2614:e=>{e.exports={o1yub8jp:"o1yub8jp",r1gmx7oh:"r1gmx7oh",cdy9myh:"cdy9myh",slq2vh6:"slq2vh6"}}}]);
//# sourceMappingURL=43591.b93e9209b1d33a60.js.map