(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[15559],{23600:(e,t,s)=>{"use strict";s.d(t,{Z:()=>h});var r=s(79477);let n=function(e,t,s,n){let i=r.useRef(s),l=r.useRef(n);r.useEffect(()=>{i.current=s,l.current=n}),r.useEffect(()=>{let s=e&&"current"in e?e.current:e;if(!s)return;let r=0;function n(...e){r||i.current.apply(this,e)}s.addEventListener(t,n);let a=l.current;return()=>{r=1,s.removeEventListener(t,n),a&&a()}},[e,t])},i=e=>{let t=r.useRef(e);return r.useEffect(()=>{t.current=e}),t},l="undefined"!=typeof performance?performance:Date,a=()=>l.now();function o(e,t=30,s=!1){let n=i(e),l=1e3/t,o=r.useRef(0),c=r.useRef(),d=()=>c.current&&clearTimeout(c.current),u=[t,s,n];function p(){o.current=0,d()}return r.useEffect(()=>p,u),r.useCallback(function(){let e=arguments,t=a(),r=()=>{o.current=t,d(),n.current.apply(null,e)},i=o.current;if(s&&0===i)return r();if(t-i>l){if(i>0)return r();o.current=t}d(),c.current=setTimeout(()=>{r(),o.current=0},l)},u)}function c(e,t){if("undefined"==typeof window)return e;let{event:s,element:r}=t,{clientX:n,clientY:i,screenX:l,screenY:a,pageX:o=0,pageY:c=0}="touches"in s?s.touches[0]:s,d=r.getBoundingClientRect(),u=o-d.left-(window.pageXOffset||window.scrollX),p=c-d.top-(window.pageYOffset||window.scrollY);return"touches"in s&&(u<0||p<0||u>d.width||p>d.height)?{...e,context:{...e.context,hoverStatus:"leave",touchStatus:"end"}}:{context:{...e.context,hoverStatus:"enter"},mouse:{...e.mouse,x:u,y:p,pageX:o,pageY:c,clientX:n,clientY:i,screenX:l,screenY:a,elementWidth:d.width,elementHeight:d.height,isOver:!0,isTouch:"touches"in s}}}function d(e,t){let{mouse:s,context:r}=e;if("mousemove"===t.type)return"end"===r.touchStatus?e:c(e,t);if("touchmove"===t.type)return c({context:{...r,touchStatus:"start"},mouse:s},t);if("touchdown"===t.type)return c({context:{...r,touchStatus:"start"},mouse:{...s,isDown:!0}},t);if("mousedown"===t.type)return{context:r,mouse:{...s,isDown:!0}};if("mouseup"===t.type)return{context:r,mouse:{...s,isDown:!1}};if("mouseleave"===t.type)return{context:{...r,hoverStatus:"leave"},mouse:{...s,isOver:!1}};if("touchleave"===t.type)return{context:{...r,hoverStatus:"leave",touchStatus:"end"},mouse:{...s,isOver:!1,isDown:!1}};else if("activeStatus"===t.type)return{context:{...r,activeStatus:t.value},mouse:s};return e}let u={x:null,y:null,pageX:null,pageY:null,clientX:null,clientY:null,screenX:null,screenY:null,elementWidth:null,elementHeight:null,isOver:!1,isDown:!1,isTouch:!1},p={hoverStatus:"idle",touchStatus:"idle",activeStatus:"inactive"},h=function(e,t={}){let{fps:s=30,enterDelay:i=0,leaveDelay:l=0}=t,[a,c]=r.useReducer(d,{mouse:u,context:p}),h=o(t=>{let s=e&&"current"in e?e.current:e;s&&c({type:"mousemove",event:t,element:s})},s,!0),x=o(t=>{let s=e&&"current"in e?e.current:e;s&&c({type:"touchmove",event:t,element:s})},s,!0),f=o(()=>c({type:"mouseleave"}),s,!1),m=o(t=>{let s=e&&"current"in e?e.current:e;s&&c("touches"in t?{type:"touchdown",element:s,event:t}:{type:"mousedown",element:s,event:t})},s,!0),w=o(()=>c({type:"mouseup"}),s,!1),g=o(()=>c({type:"touchleave"}),s,!1);function j(){return c({type:"activeStatus",value:"active"})}function v(){return c({type:"activeStatus",value:"inactive"})}return n(e,"mouseenter",h),n(e,"mousemove",h),n(e,"mouseleave",f),n(e,"mousedown",m),n("undefined"!=typeof window?window:null,"mousedown",m),n("undefined"!=typeof window?window:null,"mouseup",w),n(e,"touchstart",m),n(e,"touchmove",x),n(e,"touchend",g),n(e,"touchcancel",g),r.useEffect(()=>{if("enter"===a.context.hoverStatus){if(i){let e=setTimeout(j,i);return()=>clearTimeout(e)}c({type:"activeStatus",value:"active"})}else{if(l){let e=setTimeout(v,l);return()=>clearTimeout(e)}c({type:"activeStatus",value:"inactive"})}},[a.context.hoverStatus,i,l]),"active"===a.context.activeStatus?a.mouse:u}},56575:(e,t,s)=>{"use strict";s.d(t,{Z:()=>r});/**
 * @license lucide-react v0.460.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */let r=(0,s(43349).Z)("Plus",[["path",{d:"M5 12h14",key:"1ays0h"}],["path",{d:"M12 5v14",key:"s699le"}]])},1347:(e,t,s)=>{"use strict";s.d(t,{Z:()=>i});var r=s(67841);s(79477);let n=(0,s(64833).z)("div")({name:"Wrapper",class:"wi7qe6i",propsAsIs:!1}),i=function(e){let{breakpoint:t,children:s,...i}=e;return(0,r.jsx)(n,{"data-breakpoint":t,...i,children:s})};s(94502)},56073:(e,t,s)=>{"use strict";s.d(t,{Z:()=>r});let r=(0,s(64833).z)("code")({name:"InlineCode",class:"i165vvr1",propsAsIs:!1});s(67787)},15559:(e,t,s)=>{"use strict";s.r(t),s.d(t,{default:()=>tL});var r=s(67841),n=s(79477),i=s(64833),l=s(74631),a=s(55158);let o=(0,i.z)(a.ZP)({name:"StyledDemo",class:"s6zaruz",propsAsIs:!0}),c=function(e){let{children:t,centered:s,...i}=e,l=n.useId().replace(/:/g,"");return(0,r.jsx)(o,{...i,id:"flex-demo-".concat(l),outputWrapper:null,"data-align":s?"center":"stretch",children:t})};function d(){return(0,r.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"47",height:"24",fill:"none",viewBox:"0 0 47 24",children:[(0,r.jsx)("path",{fill:"#fd3",d:"M.94 10.94a1.5 1.5 0 000 2.12l9.545 9.547a1.5 1.5 0 102.122-2.122L4.12 12l8.486-8.485a1.5 1.5 0 10-2.122-2.122L.94 10.94zM2 13.5h33v-3H2v3z"}),(0,r.jsx)("path",{stroke:"#fd3",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"3",d:"M30 12h10.5a5 5 0 005-5V1.5"})]})}s(83310);let u=(0,i.z)("div")({name:"Wrapper",class:"w1ay2007",propsAsIs:!1}),p=(0,i.z)("span")({name:"Text",class:"tdthhle",propsAsIs:!1}),h=function(){return(0,r.jsxs)(u,{children:[(0,r.jsx)(p,{children:"Drag me!"}),(0,r.jsx)(d,{})]})};s(13598);let x=["Maria","Nushi","Mohammed","Jose","Wei","Ahmed","John","David","Anna","Mary","Jean","Elena","Min","Fatima","Aleksandr","Lin","Olga","Rosa","Jorge","Elizabeth","Patricia","Hassan","Anita"],f=["gmail.com","yahoo.com","hotmail.com","aol.com","yahoo.co.uk","live.com","web.de","libero.it","comcast.net"],m=(0,i.z)("div")({name:"SliderWrapper",class:"s1w1d0nd",propsAsIs:!1}),w=(0,i.z)("div")({name:"IndicatorWrapper",class:"i1af9l9f",propsAsIs:!1}),g=(0,i.z)("form")({name:"Form",class:"f1rebvie",propsAsIs:!1}),j=(0,i.z)("label")({name:"Label",class:"llk4ia8",propsAsIs:!1}),v=(0,i.z)(j)({name:"NameLabel",class:"n1a97jd",propsAsIs:!0}),y=(0,i.z)(j)({name:"EmailLabel",class:"e1wampmk",propsAsIs:!0}),b=(0,i.z)("input")({name:"Input",class:"ip8i2qa",propsAsIs:!1}),z=(0,i.z)("button")({name:"Button",class:"btck347",propsAsIs:!1});s(82122);var k=s(97718),S=s(23600),A=s(17034);let I={tension:110,friction:19},W="0 0 ".concat(450," ").concat(300),C={x:125,y:150},L={x:325,y:150},B=(0,i.z)("div")({name:"Wrapper",class:"wd5evqm",propsAsIs:!1}),E=(0,i.z)("svg")({name:"Svg",class:"s9qnkps",propsAsIs:!1}),q=(0,i.z)(k.q.circle)({name:"Circle",class:"c106wyb7",propsAsIs:!0}),F=(0,i.z)("div")({name:"TitleLayer",class:"t1fpi6rc",propsAsIs:!1}),R=(0,i.z)(k.q.div)({name:"Title",class:"t1mfnqci",propsAsIs:!0}),D=(0,i.z)(R)({name:"LeftTitle",class:"lup5uen",propsAsIs:!0}),V=(0,i.z)(R)({name:"RightTitle",class:"rppdi72",propsAsIs:!0}),M=(0,i.z)("div")({name:"TextLayer",class:"t1yh3sge",propsAsIs:!1}),T=(0,i.z)(k.q.div)({name:"Text",class:"t1kh3f58",propsAsIs:!0}),X=(0,i.z)(T)({name:"Left",class:"lb0r9if",propsAsIs:!0}),Z=(0,i.z)(T)({name:"Right",class:"rzow8g2",propsAsIs:!0}),H=(0,i.z)(T)({name:"Center",class:"c1m8wu8k",propsAsIs:!0}),G=(0,i.z)("button")({name:"TextButton",class:"twsty9n",propsAsIs:!1}),O=(0,i.z)("span")({name:"Item",class:"if91kz6",propsAsIs:!1});s(63914);var P=s(1347),Y=s(34308);let N="/images/interactive-guide-to-flexbox",Q={red:{min:-116,max:25},green:{min:-130,max:25},purple:{min:-122,max:25}},U=(0,i.z)("div")({name:"Wrapper",class:"wrdpfit",propsAsIs:!1}),J=(0,i.z)("img")({name:"ToothpickOutline",class:"t10u4ow9",propsAsIs:!1}),_=(0,i.z)("img")({name:"WienerBottom",class:"w198iq3",propsAsIs:!1}),K=(0,i.z)("img")({name:"Toothpick",class:"t1it9j3v",propsAsIs:!1}),$=(0,i.z)("button")({name:"WienerHandle",class:"wpdr2q3",propsAsIs:!1}),ee=(0,i.z)("img")({name:"WienerTop",class:"wg7sfs3",propsAsIs:!1}),et=function(e){let{color:t,initialPosition:s="12%",onInteract:i}=e,[a,o]=n.useState(0),c=n.useRef(null),d=n.useRef(0),u=n.useRef();u.current=a;let p=n.useCallback(e=>{let s;if(e.touches?(e.preventDefault(),s=e.touches[0].clientY):s=e.clientY,!c.current)return;let r=s-c.current.y+d.current;o(r=(0,l.uZ)(r,Q[t].min,Q[t].max))},[t]),h=n.useCallback(()=>{c.current=null,d.current=u.current,window.removeEventListener("mousemove",p)},[p]),x=n.useCallback(e=>{let t,s;if(e.touches){e.preventDefault();let r=e.touches[0];[t,s]=[r.clientX,r.clientY]}else[t,s]=[e.clientX,e.clientY];c.current={x:t,y:s},i(),window.addEventListener("mousemove",p),window.addEventListener("touchmove",p),window.addEventListener("mouseup",h),window.addEventListener("touchend",h)},[i,p,h]),f=n.useCallback(()=>{o(0),c.current=null,d.current=0},[]),m=n.useCallback(e=>{if("Enter"===e.code){f();return}if("ArrowUp"!==e.code&&"ArrowDown"!==e.code)return;event.preventDefault(),i();let s="ArrowUp"===e.code?-10:10;o(e=>{let r=(0,l.uZ)(e+s,Q[t].min,Q[t].max);return d.current=r,r})},[t,f,i]);return n.useEffect(()=>()=>{window.removeEventListener("mousemove",p),window.removeEventListener("touchmove",p)},[p]),(0,r.jsxs)(U,{children:[(0,r.jsx)(J,{alt:"",src:"".concat(N,"/").concat(t,"-toothpick-outline.png")}),(0,r.jsx)(_,{alt:"",src:"".concat(N,"/").concat(t,"-wiener-bottom.png"),style:{bottom:s,transform:"translateY(".concat(a,"px)")}}),(0,r.jsx)(K,{alt:"",src:"".concat(N,"/").concat(t,"-toothpick.png")}),(0,r.jsxs)($,{style:{bottom:s},onMouseDown:x,onTouchStart:x,onKeyDown:m,onDoubleClick:()=>{f()},children:[(0,r.jsx)(ee,{draggable:!1,alt:"",src:"".concat(N,"/").concat(t,"-wiener-top.png"),style:{transform:"translateY(".concat(a,"px)")}}),(0,r.jsx)(Y.Z,{children:"This button inclues a draggable image of a wiener which can be dragged up and down to change its vertical position."})]})]})};s(47578);let es=(0,i.z)("div")({name:"Wrapper",class:"w1ulnsl8",propsAsIs:!1}),er=(0,i.z)("div")({name:"WienerWrapper",class:"w10stlkg",propsAsIs:!1}),en=(0,i.z)("div")({name:"Encouragement",class:"eztg1fj",propsAsIs:!1}),ei=(0,i.z)("img")({name:"Arrow",class:"anhbzyq",propsAsIs:!1});s(59447);var el=s(87740),ea=s(91769);let eo=(0,i.z)("img")({name:"Layer",class:"l1lk5kxi",propsAsIs:!1}),ec=n.forwardRef(function(e,t){let{status:s,index:n,left:i}=e,l="fine"===s?"hue-rotate(0deg) saturate(0)":"hue-rotate(-43deg) saturate(5.5)",a="intersecting"===s?1===n?"left":"right":void 0;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(eo,{alt:"","data-wiggle":a,src:"/images/interactive-guide-to-flexbox/souvlaki-".concat(n,"-back.png"),style:{left:i,filter:l,zIndex:2,"--animation-duration":1===n?"220ms":"200ms"}}),(0,r.jsx)(eo,{ref:t,alt:"","data-wiggle":a,src:"/images/interactive-guide-to-flexbox/souvlaki-".concat(n,"-front.png"),style:{left:i,filter:l,zIndex:1===n?101:99,"--animation-duration":1===n?"220ms":"200ms"}})]})});s(69913);let ed={min:-60,max:60},eu=(0,i.z)("img")({name:"Background",class:"bc039bv",propsAsIs:!1}),ep=(0,i.z)("button")({name:"GrabButton",class:"g1ayol0g",propsAsIs:!1}),eh=(0,i.z)("img")({name:"Foreground",class:"f15alv42",propsAsIs:!1}),ex=function(e){let{index:t,status:s,left:i,firstBB:a,thirdBB:o,handleIntersect:c,handleClear:d}=e,[u,p]=n.useState(0),h=n.useRef(null),x=n.useRef(),f=n.useRef(0),m=n.useRef();m.current=u;let w=n.useRef();w.current=()=>{if(!a||!o||!x.current)return;let e=x.current.getBoundingClientRect(),t=e.left<a.left+a.width-22,r=e.left+e.width>o.left+12,n=t||r;n&&"fine"===s?c(t?"left":"right"):n||"intersecting-left"!==s&&"intersecting-right"!==s||d()},n.useEffect(()=>{w.current()},[u]);let g=n.useCallback(e=>{let t;if(e.touches?(e.preventDefault(),t=e.touches[0].clientX):t=e.clientX,!h.current)return;let s=t-h.current.x+f.current;p(s=(0,l.uZ)(s,ed.min,ed.max))},[]),j=n.useCallback(()=>{h.current=null,f.current=m.current,window.removeEventListener("mousemove",g)},[g]),v=n.useCallback(e=>{let t,s;if(e.touches){e.preventDefault();let r=e.touches[0];[t,s]=[r.clientX,r.clientX]}else[t,s]=[e.clientX,e.clientX];h.current={x:t,y:s},window.addEventListener("mousemove",g),window.addEventListener("touchmove",g),window.addEventListener("mouseup",j),window.addEventListener("touchend",j)},[g,j]),y=n.useCallback(()=>{p(0),h.current=null,f.current=0},[]),b=n.useCallback(e=>{if("Enter"===e.code){y();return}if("ArrowLeft"!==e.code&&"ArrowRight"!==e.code)return;event.preventDefault();let t="ArrowLeft"===e.code?-10:10;p(e=>{let s=(0,l.uZ)(e+t,ed.min,ed.max);return f.current=s,s})},[y]);return n.useEffect(()=>()=>{window.removeEventListener("mousemove",g),window.removeEventListener("touchmove",g)},[g]),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(eu,{src:"/images/interactive-guide-to-flexbox/souvlaki-".concat(t,"-back.png"),alt:"",style:{left:i,transform:"translateX(".concat(u,"px)")}}),(0,r.jsxs)(ep,{onMouseDown:v,onTouchStart:v,onKeyDown:b,style:{left:i,transform:"translateX(".concat(u,"px)")},children:[(0,r.jsx)(eh,{ref:x,draggable:!1,alt:"",src:"/images/interactive-guide-to-flexbox/souvlaki-".concat(t,"-front.png")}),(0,r.jsx)(Y.Z,{children:"This button inclues a draggable image of a kebab piece which can be dragged horizontally, but only a tiny bit, as it runs into the other pieces on the kebab."})]})]})};s(71619);let ef=(0,i.z)("div")({name:"Wrapper",class:"w1iovb5t",propsAsIs:!1});(0,i.z)("div")({name:"ToggleWrapper",class:"t1l6g8kp",propsAsIs:!1});let em=(0,i.z)("img")({name:"StickOutline",class:"s13fzmd2",propsAsIs:!1}),ew=(0,i.z)("img")({name:"Stick",class:"s1bqnbxd",propsAsIs:!1});s(40988);var eg=s(45700);let ej=n.forwardRef(function(e,t){let{primary:s,layout:n=!0,style:i={},wrapperStyle:l={},textWrapperStyle:a={},children:o,...c}=e;return(0,r.jsxs)(ev,{ref:t,layout:n,initial:{borderRadius:4},style:{background:s?"hsl(50deg 100% 90%)":"var(--color-gray-500)",...i},...c,children:[(0,r.jsx)(ey,{layout:n,initial:{borderRadius:2},style:{color:s?"black":"var(--color-text)",background:s?"hsl(50deg 100% 50%)":"var(--color-gray-100)",...l},children:(0,r.jsx)(eg.E.span,{layout:n,style:{display:"inline-block",...a},children:o})}),(0,r.jsx)(eb,{layout:n})]})}),ev=(0,i.z)(eg.E.div)({name:"Wrapper",class:"w1npvboi",propsAsIs:!0}),ey=(0,i.z)(eg.E.div)({name:"InnerWrapper",class:"iy4souc",propsAsIs:!0}),eb=(0,i.z)(eg.E.div)({name:"Reflection",class:"r1t64vdy",propsAsIs:!0});function ez(e){let{isVisible:t,insetBy:s}=e;return(0,r.jsxs)(eA,{children:[(0,r.jsx)(eI,{children:(0,r.jsxs)(eL,{style:{"--stroke":"var(--color-background)","--stroke-width":"6px"},children:[(0,r.jsx)("div",{}),(0,r.jsx)(eq,{style:{left:t?-4:s,right:t?0:s}}),(0,r.jsx)(eS,{isVisible:t,type:"right",insetBy:s})]})}),(0,r.jsx)(eW,{children:(0,r.jsxs)(eL,{style:{"--stroke":"var(--color-text)","--stroke-width":"2px"},children:[(0,r.jsx)("div",{}),(0,r.jsx)(eq,{layout:!0,animate:{left:t?0:s,right:t?0:s}}),(0,r.jsx)(eS,{isVisible:t,type:"right",insetBy:s})]})})]})}function ek(e){let{isVisible:t,insetBy:s}=e;return(0,r.jsxs)(eA,{children:[(0,r.jsx)(eI,{children:(0,r.jsxs)(eB,{style:{"--stroke":"var(--color-background)","--stroke-width":"6px"},children:[(0,r.jsx)("div",{}),(0,r.jsx)(eF,{style:{top:t?-4:s,bottom:t?0:s}}),(0,r.jsx)(eS,{isVisible:t,type:"bottom",insetBy:s})]})}),(0,r.jsx)(eW,{children:(0,r.jsxs)(eB,{style:{"--stroke":"var(--color-text)","--stroke-width":"2px"},children:[(0,r.jsx)("div",{}),(0,r.jsx)(eF,{layout:!0,animate:{top:t?0:s,bottom:t?0:s}}),(0,r.jsx)(eS,{isVisible:t,type:"bottom",insetBy:s})]})})]})}s(42655);let eS=n.memo(function(e){let t,s,n,{isVisible:i,type:l,insetBy:a}=e;return"left"===l?(t="\n      M 8 0\n      L 0 8\n      L 8 16\n    ",s=i?0:a,n=0):"right"===l?(t="\n      M 8 0\n      L 16 8\n      L 8 16\n    ",s=i?0:-a,n=0):"top"===l?(t="\n      M 0 8\n      L 8 0\n      L 16 8\n    ",s=0,n=i?0:a):"bottom"===l&&(t="\n    M 0 8\n    L 8 16\n    L 16 8\n    ",s=0,n=i?0:-a),(0,r.jsx)(eR,{animate:{x:s,y:n},xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",children:(0,r.jsx)("path",{d:t,strokeLinecap:"round",strokeLinejoin:"round"})})}),eA=(0,i.z)("div")({name:"OuterWrapper",class:"onhqpdl",propsAsIs:!1}),eI=(0,i.z)("div")({name:"BackLayer",class:"bggl0fb",propsAsIs:!1}),eW=(0,i.z)("div")({name:"FrontLayer",class:"f4akn40",propsAsIs:!1}),eC=(0,i.z)("div")({name:"Wrapper",class:"wq9e9bu",propsAsIs:!1}),eL=(0,i.z)(eC)({name:"HorizontalWrapper",class:"h1jd4eox",propsAsIs:!0}),eB=(0,i.z)(eC)({name:"VerticalWrapper",class:"vpwy74f",propsAsIs:!0}),eE=(0,i.z)(eg.E.div)({name:"Line",class:"l196uu2l",propsAsIs:!0}),eq=(0,i.z)(eE)({name:"HorizontalLine",class:"h16miv7f",propsAsIs:!0}),eF=(0,i.z)(eE)({name:"VerticalLine",class:"v11wd52t",propsAsIs:!0}),eR=(0,i.z)(eg.E.svg)({name:"ArrowSvg",class:"agwqywx",propsAsIs:!0}),eD=function(e){let{isVisible:t,direction:s,insetBy:n=2}=e;return"horizontal"===s?(0,r.jsx)(ez,{isVisible:t,insetBy:n}):(0,r.jsx)(ek,{isVisible:t,insetBy:n})};s(6867);let eV=n.forwardRef(function(e,t){let{state:s={},height:n=300,wrapperStyle:i={},children:l}=e,{showAxisLabels:o,...c}=s,d=c["--direction"]||"row",u=!!(o&&d.match(/^row/)),p=!!(o&&d.match(/^column/));return(0,r.jsxs)(r.Fragment,{children:["boolean"==typeof o&&(0,r.jsx)(eT,{children:(0,r.jsx)(a.Cf,{id:"showAxisLabels",label:"Show Primary Axis",handleFocusColor:null,handleColor:o?"var(--color-text)":"var(--color-gray-400)"},"showAxisLabels")}),(0,r.jsxs)(eM,{children:[(0,r.jsx)(eX,{ref:t,style:{...c,...i,height:n},children:l}),"boolean"==typeof u&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(eH,{style:{opacity:u?1:0},children:[(0,r.jsx)("span",{children:"Primary Axis"}),(0,r.jsx)(eD,{isVisible:u,direction:"horizontal"})]}),(0,r.jsxs)(eG,{style:{opacity:p?1:0},children:[(0,r.jsx)("span",{children:"Primary Axis"}),(0,r.jsx)(eD,{isVisible:p,direction:"vertical"})]})]})]})]})}),eM=(0,i.z)("div")({name:"OuterWrapper",class:"o1yk55rv",propsAsIs:!1}),eT=(0,i.z)("header")({name:"Header",class:"hg0zpx3",propsAsIs:!1}),eX=(0,i.z)(eg.E.div)({name:"Wrapper",class:"w1ruoqon",propsAsIs:!0}),eZ=(0,i.z)("div")({name:"Axis",class:"a14681vo",propsAsIs:!1}),eH=(0,i.z)(eZ)({name:"HorizontalAxis",class:"hhw9alj",propsAsIs:!0}),eG=(0,i.z)(eZ)({name:"VerticalAxis",class:"vrx3br6",propsAsIs:!0});s(80983);let eO=(0,i.z)("div")({name:"Wrapper",class:"w1b00398",propsAsIs:!1});s(13821);let eP=(0,i.z)("svg")({name:"Svg",class:"s1a4d69t",propsAsIs:!1}),eY=function(){return(0,r.jsx)(eP,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 400 24",preserveAspectRatio:"none",children:(0,r.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"\n          M 0 24\n          C 0 -10\n            200 18\n            200 0\n          C 200 18\n            400 -10\n            400 24\n        "})})};s(50080);let eN=(0,i.z)("div")({name:"Wrapper",class:"w1gx1kri",propsAsIs:!1}),eQ=(0,i.z)("div")({name:"Header",class:"h1jry897",propsAsIs:!1}),eU=(0,i.z)("div")({name:"FreeSpaceIndicator",class:"f4lagrt",propsAsIs:!1}),eJ=(0,i.z)("span")({name:"Label",class:"l2o7z1z",propsAsIs:!1});s(41158);var e_=s(40996),eK=s(56073);let e$=(0,i.z)("div")({name:"Wrapper",class:"w10tf9ru",propsAsIs:!1}),e0=(0,i.z)("span")({name:"Numerator",class:"nesicel",propsAsIs:!1}),e1=(0,i.z)("span")({name:"Denominator",class:"dz7trip",propsAsIs:!1}),e2=(0,i.z)("div")({name:"Slash",class:"sqz6o3b",propsAsIs:!1}),e5=function(e){let{numerator:t,denominator:s}=e;return(0,r.jsxs)(e$,{children:[(0,r.jsx)(e0,{style:{right:t>0?"20%":"0%"},children:t}),t>0&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e2,{}),(0,r.jsx)(e1,{children:s})]})]})};s(54949);/**
 * @license lucide-react v0.460.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */let e3=(0,s(43349).Z)("Minus",[["path",{d:"M5 12h14",key:"1ays0h"}]]);var e4=s(56575);let e6=(0,i.z)("div")({name:"Wrapper",class:"w1mecebe",propsAsIs:!1}),e9=(0,i.z)("button")({name:"Button",class:"bj09a15",propsAsIs:!1}),e8=function(e){let{value:t,highlighted:s,handleIncrement:n,handleDecrement:i}=e;return(0,r.jsxs)(e6,{children:[(0,r.jsxs)(e9,{style:{"--background":s?"var(--color-gray-500)":"var(--color-gray-300)"},onClick:i,disabled:0===t,children:[(0,r.jsx)(e3,{size:20,strokeWidth:3}),(0,r.jsx)(Y.Z,{children:"Decrement"})]}),(0,r.jsxs)(e9,{style:{"--background":s?"var(--color-gray-500)":"var(--color-gray-300)"},onClick:n,children:[(0,r.jsx)(e4.Z,{size:20,strokeWidth:3}),(0,r.jsx)(Y.Z,{children:"Increment"})]})]})};s(94419);let e7=(0,i.z)("div")({name:"Wrapper",class:"w1eyykcs",propsAsIs:!1}),te=(0,i.z)("div")({name:"Header",class:"h1e27qv9",propsAsIs:!1}),tt=function(e){let{id:t,flexGrow:s,totalGrow:n,handleIncrement:i,handleDecrement:l}=e,a=s>0;return(0,r.jsx)(ej,{style:{flexGrow:s,background:a?"var(--color-gray-700)":"var(--color-gray-500)"},wrapperStyle:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",height:"100%",willChange:"transform",transition:"background 200ms",background:a?"var(--color-gray-300)":"var(--color-gray-100)"},textWrapperStyle:{willChange:"transform"},children:(0,r.jsxs)(e7,{children:[(0,r.jsx)(te,{children:"flex-grow:"}),(0,r.jsx)(e5,{numerator:s,denominator:n}),(0,r.jsx)(e8,{highlighted:a,value:s,handleIncrement:()=>i(t),handleDecrement:()=>l(t)})]})})};s(88337);var ts=s(98585);let tr=(0,i.z)("dl")({name:"Dl",class:"d17izmww",propsAsIs:!1});s(76422);let tn=n.forwardRef(function(e,t){let{primary:s,flexShrink:n,flexBasis:i,actualSize:l,shrunkBy:a,layout:o=!1}=e;return(0,r.jsx)(ej,{ref:t,style:{flexShrink:n,flexBasis:i},wrapperStyle:{paddingLeft:4,paddingRight:4},primary:s,layout:o,textWrapperStyle:{display:"flex",flexDirection:"column",justifyContent:"center",height:"100%"},children:(0,r.jsxs)(tr,{children:[(0,r.jsx)("dt",{"data-prop":!0,children:"flex-basis"}),(0,r.jsxs)("dd",{children:[i,"px"]}),"number"==typeof n&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("dt",{"data-prop":!0,children:"flex-shrink"}),(0,r.jsx)("dd",{children:n})]}),"number"==typeof l&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("dt",{children:"Actual size:"}),(0,r.jsxs)("dd",{children:[Math.round(l),"px"]})]}),(0,r.jsx)("dt",{style:{opacity:a?1:0},children:"Reduced by:"}),(0,r.jsxs)("dd",{style:{opacity:a?1:0},children:[a,"%"]})]})})}),ti=(0,i.z)("div")({name:"PseudoControlWrapper",class:"p1bv2dwa",propsAsIs:!1});s(66622);let tl=function(e){let{dependencies:t}=e,s=n.useRef(),r=n.useRef(),[i,l]=n.useState(null),[a,o]=n.useState(null),[c,d]=n.useState(1),u=n.useRef();u.current=c;let p=i?i.width*(1/c):void 0,h=a?a.width*(1/c):void 0;return n.useEffect(()=>{s.current&&r.current&&(l(s.current.getBoundingClientRect()),o(r.current.getBoundingClientRect()))},[...t,c]),n.useEffect(()=>{function e(){let e=window.innerWidth;e<676?d(e/676):1!==u.current&&d(1)}return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}},[]),{scale:c,firstItemRef:s,secondItemRef:r,firstBBWidth:p,secondBBWidth:h}},ta=(0,i.z)("div")({name:"ScaleWrapper",class:"s9tg3ao",propsAsIs:!1}),to=(0,i.z)("div")({name:"PseudoControlWrapper",class:"ptz92tw",propsAsIs:!1});s(81276);let tc=(0,i.z)("div")({name:"ScaleWrapper",class:"s11j1x9z",propsAsIs:!1}),td=(0,i.z)("div")({name:"PseudoControlWrapper",class:"pk3957s",propsAsIs:!1}),tu=(0,i.z)("div")({name:"SizeShower",class:"sdg3sfj",propsAsIs:!1});s(28510);let tp=(0,i.z)("div")({name:"Wrapper",class:"w1l1jlq1",propsAsIs:!1}),th=(0,i.z)("form")({name:"Form",class:"ffcco1t",propsAsIs:!1}),tx=(0,i.z)("label")({name:"Label",class:"l39gj1b",propsAsIs:!1}),tf=(0,i.z)("input")({name:"SearchInput",class:"s18327gu",propsAsIs:!1});function tm(e){let{primary:t,type:s,flexBasis:n,flexShrink:i}=e;return(0,r.jsx)(tw,{style:{flexGrow:"stretch"===s?1:void 0,flexBasis:n,flexShrink:i},children:(0,r.jsx)(t?tj:tg,{style:{borderRadius:"ball"===s?"50%":"1000px"}})})}s(82451);let tw=(0,i.z)("div")({name:"ItemOuterWrapper",class:"iyoltwk",propsAsIs:!1}),tg=(0,i.z)("div")({name:"BaseShape",class:"bbssao9",propsAsIs:!1}),tj=(0,i.z)(tg)({name:"PrimaryShape",class:"pw60wn2",propsAsIs:!0});s(21135);let tv=(0,i.z)("div")({name:"PseudoControlWrapper",class:"p7aqsq2",propsAsIs:!1}),ty=(0,i.z)("div")({name:"Ball",class:"bfjahjy",propsAsIs:!1}),tb=(0,i.z)("div")({name:"Stretch",class:"s1e2cci",propsAsIs:!1});s(19006);let tz=(0,i.z)("div")({name:"PseudoItem",class:"p1ew2ee3",propsAsIs:!1}),tk=(0,i.z)(tz)({name:"RowItem",class:"r1jxbgun",propsAsIs:!0}),tS=(0,i.z)(tz)({name:"ColItem",class:"co9m7hs",propsAsIs:!0});s(21334);let tA=(0,i.z)("a")({name:"NavLink",class:"nfj8k47",propsAsIs:!1});function tI(e){let{scale:t,flexBasis:s=180,flexWrap:i,containerWidth:l,...a}=e,o=n.useRef(),[c,d]=n.useState(null);return n.useEffect(()=>{o.current&&d(Math.round(o.current.getBoundingClientRect().width*(1/t)))},[t,i,l]),(0,r.jsx)(ej,{ref:o,layout:!1,style:{minHeight:200,flexBasis:s},textWrapperStyle:{display:"flex",flexDirection:"column",justifyContent:"center",height:"100%"},...a,children:(0,r.jsxs)(tr,{children:[(0,r.jsx)("dt",{"data-prop":!0,children:"flex-basis"}),(0,r.jsxs)("dd",{children:[s,"px"]}),"number"==typeof c&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("dt",{children:"Actual size"}),(0,r.jsxs)("dd",{children:[c,"px"]})]})]})})}s(1214);let tW=(0,i.z)("div")({name:"ScaleWrapper",class:"s1e34fq0",propsAsIs:!1});s(88629);let tC={ArgyleDemo:function(e){let{showInteractionFlag:t}=e,s=n.useId(),[i,o]=n.useState(null),[d,u]=n.useState(null),[p,j]=n.useState(!1),[k,S]=n.useState(1),A=n.useRef();return A.current=k,n.useEffect(()=>{let e=(0,l.UP)(x),t="".concat(e).concat((0,l.MX)(1e3,9999),"@").concat((0,l.UP)(f));o(e),u(t)},[]),n.useEffect(()=>{function e(){let e=window.innerWidth;e<664?S(e/664):1!==A.current&&S(1)}return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}},[]),(0,r.jsx)(c,{centered:!0,controlPosition:"top",customGrid:{gridTemplateCols:"1fr"},initialValues:{containerWidth:600},controls:[(0,r.jsxs)(m,{children:[(0,r.jsx)(a.vn,{id:"containerWidth",label:"Container width",min:250,max:600,step:10,handleFocusColor:"white",wrapperStyle:{width:400,maxWidth:"80vw"},onChange:()=>{p||j(!0)}}),(0,r.jsx)(w,{style:{opacity:t&&!p?1:0},children:(0,r.jsx)(h,{})})]},"containerWidth")],children:e=>{let{containerWidth:t}=e;return(0,r.jsxs)(g,{style:{width:t,transform:"scale(".concat(k,")")},onSubmit:e=>{alert("Not a real form, I’m afraid \uD83D\uDE41"),e.preventDefault()},children:[(0,r.jsxs)(v,{htmlFor:"name-".concat(s),children:["Name:",(0,r.jsx)(b,{id:"name-".concat(s),type:"text",placeholder:i})]}),(0,r.jsxs)(y,{htmlFor:"email-".concat(s),children:["Email:",(0,r.jsx)(b,{id:"email-".concat(s),type:"email",placeholder:d})]}),(0,r.jsx)(z,{children:"Submit"})]})}})},FlexVennDiagram:()=>{let e=(0,A.If)(),[t,s]=n.useState({left:!1,right:!1}),i=n.useRef(),a=(0,S.Z)(i);n.useEffect(()=>{if(!a.x){s({left:!1,right:!1});return}let e=(0,l.Fv)(a.x,0,a.elementWidth,0,450),t=(0,l.Fv)(a.y,0,a.elementHeight,0,300);s({left:150>Math.sqrt(Math.abs(e-C.x)**2+Math.abs(t-C.y)**2),right:150>Math.sqrt(Math.abs(e-L.x)**2+Math.abs(t-L.y)**2)})},[a]);let o=t.left&&t.right,c=!t.left&&!t.right,d=(0,k.q_)({transform:t.left?"scale(".concat(1.1,")"):"scale(1)",fillOpacity:t.left?.5:.35,cx:o?C.x+10:t.left?C.x-20:C.x,config:I}),u=(0,k.q_)({transform:t.right?"scale(".concat(1.1,")"):"scale(1)",fillOpacity:t.right?.5:.35,cx:o?L.x-10:t.right?L.x+20:L.x,config:I}),p=.05*a.elementWidth,h={transform:t.left?"translateX(-".concat(p,"px) scale(1.1)"):"translateX(0) scale(1)",opacity:c?.75:t.left?1:.25},x={transform:o?"scale(1.1) translateX(0px)":t.left?"scale(1.1) translateX(-30px)":t.right?"scale(1.1) translateX(30px)":"scale(1) translateX(0px)",opacity:c?.75:t.left||t.right?1:.25},f={transform:t.right?"translateX(".concat(p,"px) scale(1.1)"):"translateX(0) scale(1)",opacity:c?.75:t.right?1:.25},m="light"===e?"var(--color-primary)":"hsl(50deg 100% 50%)";return(0,r.jsxs)(B,{children:[(0,r.jsxs)(E,{viewBox:W,ref:i,children:[(0,r.jsx)(q,{cx:L.x,cy:L.y,r:150,stroke:t.right&&!t.left?m:null,strokeWidth:3,fill:"var(--color-venn-1)",...u}),(0,r.jsx)(q,{cx:C.x,cy:C.y,r:150,stroke:t.left&&!t.right?m:null,strokeWidth:3,fill:"var(--color-venn-0)",...d})]}),(0,r.jsxs)(F,{children:[(0,r.jsx)(D,{style:h,children:"justify-content"}),(0,r.jsx)(V,{style:f,children:"align-items"})]}),(0,r.jsxs)(M,{children:[(0,r.jsx)(X,{style:h,children:(0,r.jsxs)(G,{onFocus:()=>s({left:!0,right:!1}),onBlur:()=>s({left:!1,right:!1}),children:[(0,r.jsx)(O,{children:"space-between"}),(0,r.jsx)(O,{children:"space-around"}),(0,r.jsx)(O,{children:"space-evenly"})]})}),(0,r.jsx)(Z,{style:f,children:(0,r.jsxs)(G,{onFocus:()=>s({left:!1,right:!0}),onBlur:()=>s({left:!1,right:!1}),children:[(0,r.jsx)(O,{children:"stretch"}),(0,r.jsx)(O,{children:"baseline"})]})}),(0,r.jsxs)(H,{style:x,children:[(0,r.jsx)(O,{children:"flex-start"}),(0,r.jsx)(O,{children:"center"}),(0,r.jsx)(O,{children:"flex-end"})]})]})]})},WienersDemo:function(){let[e,t]=n.useState(!0),s=n.useCallback(()=>{t(!1)},[]);return(0,r.jsxs)(es,{children:[(0,r.jsxs)(er,{children:[(0,r.jsx)(et,{color:"purple",onInteract:s}),(0,r.jsxs)(en,{style:{opacity:e?1:0,pointerEvents:e?"auto":"none"},children:[(0,r.jsx)(ei,{alt:"",src:"/images/interactive-guide-to-flexbox/arrow.png"}),"Drag me!"]})]}),(0,r.jsx)(er,{children:(0,r.jsx)(et,{color:"green",onInteract:s})}),(0,r.jsx)(P.Z,{breakpoint:"mdAndLarger",children:(0,r.jsx)(er,{children:(0,r.jsx)(et,{color:"red",onInteract:s})})})]})},SouvlakiDemo:function(){let[e,t]=n.useState("fine"),[s,{stop:i}]=(0,ea.Z)("/sounds/wrong.mp3",{volume:.5}),l=n.useRef(),a=n.useRef(),o=(0,el.Z)(l),c=(0,el.Z)(a);return(0,r.jsxs)(ef,{children:[(0,r.jsx)(em,{alt:"",src:"/images/interactive-guide-to-flexbox/souvlaki-stick-white.png"}),(0,r.jsx)(ec,{ref:l,status:"intersecting-left"===e?"intersecting":"fine",index:1,left:"15%"}),(0,r.jsx)(ex,{index:2,left:"36%",status:e,firstBB:o,thirdBB:c,handleIntersect:function(e){t("intersecting-".concat(e)),i(),s()},handleClear:function(){t("fine")}}),(0,r.jsx)(ec,{ref:a,status:"intersecting-right"===e?"intersecting":"fine",index:3,left:"58%"}),(0,r.jsxs)("picture",{children:[(0,r.jsx)("source",{type:"image/avif",srcSet:"/images/interactive-guide-to-flexbox/souvlaki-stick-front.avif"}),(0,r.jsx)("source",{type:"image/png",srcSet:"/images/interactive-guide-to-flexbox/souvlaki-stick-front.png"}),(0,r.jsx)(ew,{alt:"",src:"/images/interactive-guide-to-flexbox/souvlaki-stick-front.png"})]})]})},FlexDemoLayoutMode:function(){return(0,r.jsx)(c,{initialValues:{display:"block","--gap":"0px"},customGrid:{gridTemplateColumns:"1fr"},controls:[(0,r.jsx)(a.aU,{inline:!0,id:"display",label:"display",options:["block","flex"]},"display")],children:e=>(0,r.jsxs)(eV,{state:e,children:[(0,r.jsx)(ej,{children:"Hello"}),(0,r.jsx)(ej,{children:"to"}),(0,r.jsx)(ej,{children:"the"}),(0,r.jsx)(ej,{children:"world"})]})})},FlexDemoDirection:function(){return(0,r.jsx)(c,{initialValues:{"--direction":"column",showAxisLabels:!0},customGrid:{gridTemplateColumns:"1fr"},controls:[(0,r.jsx)(a.aU,{inline:!0,id:"--direction",label:"flex-direction",options:["row","column"]},"--direction")],children:e=>(0,r.jsxs)(eV,{state:e,children:[(0,r.jsx)(ej,{children:"Hello"}),(0,r.jsx)(ej,{children:"to"}),(0,r.jsx)(ej,{children:"the"}),(0,r.jsx)(ej,{children:"world"})]})})},FlexDemoJustify:function(){return(0,r.jsx)(c,{initialValues:{"--direction":"row","--justify":"flex-start",showAxisLabels:!1},controls:[(0,r.jsx)(a.Qc,{inline:!0,id:"--direction",label:"flex-direction",options:["row","column"]},"--direction"),(0,r.jsx)(a.Qc,{inline:!0,id:"--justify",label:"justify-content",options:["flex-start","center","flex-end","space-between","space-around","space-evenly"]},"--justify")],children:e=>(0,r.jsxs)(eV,{state:e,children:[(0,r.jsx)(ej,{style:{fontSize:"1.375rem"},children:"Hello"}),(0,r.jsx)(ej,{children:"to"}),(0,r.jsx)(ej,{children:"the"}),(0,r.jsx)(ej,{style:{fontSize:"1.375rem"},children:"World"})]})})},FlexDemoJustifyAndAlign:function(){return(0,r.jsx)(c,{initialValues:{"--direction":"row","--justify":"flex-start","--align-items":"stretch",showAxisLabels:!1},customGrid:{gridTemplateColumns:"1fr 1fr 1fr"},controls:[(0,r.jsx)(a.Qc,{id:"--direction",label:"flex-direction",options:["row","column"]},"--direction"),(0,r.jsx)(a.Qc,{id:"--justify",label:"justify-content",options:["flex-start","center","flex-end","space-between","space-around","space-evenly"]},"--justify"),(0,r.jsx)(a.Qc,{isNew:!0,id:"--align-items",label:"align-items",options:["stretch","flex-start","center","flex-end","baseline"]},"--align-items")],children:e=>(0,r.jsxs)(eV,{state:e,children:[(0,r.jsx)(ej,{style:{fontSize:"1.375rem"},children:"Hello"}),(0,r.jsx)(ej,{children:"to"}),(0,r.jsx)(ej,{children:"the"}),(0,r.jsx)(ej,{style:{fontSize:"1.375rem"},children:"World"})]})})},FlexDemoAlignSelf:function(){return(0,r.jsx)(c,{initialValues:{"--direction":"row",firstChildAlignSelf:"stretch",showAxisLabels:!1},controls:[(0,r.jsx)(a.Qc,{inline:!0,id:"--direction",label:"flex-direction",options:["row","column"]},"--direction"),(0,r.jsx)(a.Qc,{inline:!0,id:"firstChildAlignSelf",label:"align-self",options:["stretch","flex-start","center","flex-end","baseline"],wrapperStyle:{color:"hsl(50deg 100% 65%)"},style:{color:"black",background:"hsl(50deg 100% 50%)"}},"firstChildAlignSelf")],children:e=>{let{firstChildAlignSelf:t,...s}=e;return(0,r.jsxs)(eV,{state:s,children:[(0,r.jsx)(ej,{primary:!0,style:{alignSelf:t,fontSize:"1.375rem"},children:"Hello"}),(0,r.jsx)(ej,{children:"to"}),(0,r.jsx)(ej,{children:"the"}),(0,r.jsx)(ej,{style:{fontSize:"1.375rem"},children:"world"})]})}})},FlexDemoFlexBasis:function(){return(0,r.jsx)(c,{initialValues:{"--direction":"row",flexBasis:50,showAxisLabels:!1},controls:[(0,r.jsx)(a.Xr,{id:"--direction",label:"flex-direction",options:["row","column"]},"--direction"),(0,r.jsx)(a.vn,{id:"flexBasis",label:"flex-basis",min:50,max:350,wrapperStyle:{color:"hsl(50deg 100% 65%)"},handleColor:"hsl(50deg 100% 60%)",handleFocusColor:"hsl(50deg 100% 60%)"},"flexBasis")],children:e=>{let{flexBasis:t,...s}=e;return(0,r.jsx)(eO,{children:(0,r.jsxs)(eV,{state:s,height:300,children:[(0,r.jsx)(ej,{primary:!0,layout:!1,style:{flexBasis:t},wrapperStyle:{padding:0}}),(0,r.jsx)(ej,{layout:!1,style:{flexBasis:50,minWidth:0,minHeight:0},wrapperStyle:{padding:0}}),(0,r.jsx)(ej,{layout:!1,style:{flexBasis:50,minWidth:0,minHeight:0},wrapperStyle:{padding:0}}),"row"===s["--direction"]&&(0,r.jsx)(ej,{layout:!1,style:{flexBasis:50,minWidth:0,minHeight:0},wrapperStyle:{padding:0}})]})})}})},FlexDemoFlexGrowIntro:function(){let e=n.useRef(),t=(0,el.Z)(e),s=0;return t&&(s=t.width-225-16),(0,r.jsx)(c,{initialValues:{"--direction":"row",flexGrow:0},controls:[(0,r.jsx)(a.Xr,{id:"--direction",label:"flex-direction",options:["row","column"]},"--direction"),(0,r.jsx)(a.Xr,{id:"flexGrow",label:"flex-grow",options:[{label:"0 (default)",value:0},1],wrapperStyle:{color:"hsl(50deg 100% 65%)",fontWeight:"var(--font-weight-medium)"}},"flexGrow")],children:t=>{let{flexGrow:n,...i}=t;return(0,r.jsxs)(eN,{children:[(0,r.jsx)(eQ,{ref:e,children:s&&(0,r.jsxs)(eU,{style:{width:s,opacity:"row"===i["--direction"]?1-n:0},children:[(0,r.jsx)(eJ,{children:"Extra Space"}),(0,r.jsx)(eY,{})]})}),(0,r.jsxs)(eV,{state:i,children:[(0,r.jsx)(ej,{primary:!0,style:{flexBasis:75,flexGrow:n}}),(0,r.jsx)(ej,{style:{flexBasis:75}}),(0,r.jsx)(ej,{style:{flexBasis:75}})]})]})}})},FlexDemoFlexGrowMultiple:function(){let e;let[t,s]=n.useState({a:1,b:1}),i=n.useCallback(e=>{s(t=>({...t,[e]:t[e]+1}))},[]),l=n.useCallback(e=>{s(t=>{let s=t[e];return s<=0?t:{...t,[e]:s-1}})},[]),a=n.useMemo(()=>Object.values(t).reduce((e,t)=>e+t,0),[t]);return e=0===a?"no-grow":Object.values(t).some(e=>0===e)?"single-child":"mixed-up",(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(c,{initialValues:{},controls:[],children:e=>(0,r.jsx)(eV,{state:e,children:["a","b"].map(e=>(0,r.jsx)(tt,{id:e,flexGrow:t[e],totalGrow:a,handleIncrement:i,handleDecrement:l},e))})}),"no-grow"===e&&(0,r.jsxs)(e_.Z,{children:["With no ",(0,r.jsx)(eK.Z,{children:"flex-grow"}),", both children shrink down to their minimum comfortable size, and the extra space isn't distributed."]}),"single-child"===e&&(0,r.jsxs)(e_.Z,{children:["When a single child is given a positive"," ",(0,r.jsx)(eK.Z,{children:"flex-grow"})," value, it gobbles up all of the extra space. In this case, it doesn't matter what the number is: 1 and 1000 have the same effect."]}),"mixed-up"===e&&(0,r.jsxs)(e_.Z,{children:["The first child wants ",t.a," ",1===t.a?"unit":"units"," of extra space, while the second child wants ",t.b," ",1===t.b?"unit":"units",". That means the total # of units is ",(0,r.jsx)("strong",{children:a})," (",t.a," + ",t.b,"). Each child gets a proportional share of that extra space."]})]})},FlexDemoShrinkBasis:function(){let e=n.useRef(),t=n.useRef(),[s,i]=n.useState(null),[l,a]=n.useState(null),[o,d]=n.useState(200),[u,p]=n.useState(0);return n.useEffect(()=>{if(!e.current||!t.current)return;let s=e.current.getBoundingClientRect();i(s),a(t.current.getBoundingClientRect()),p(100-Math.round(s.width/o*100))},[o]),(0,r.jsx)(c,{centered:!0,initialValues:{"--direction":"row"},children:n=>(0,r.jsxs)("div",{style:{width:612},children:[(0,r.jsxs)(eV,{state:n,children:[(0,r.jsx)(tn,{primary:!0,ref:e,boundingBox:s,flexBasis:o,shrunkBy:u,actualSizeOverride:800===o?480:void 0}),(0,r.jsx)(tn,{ref:t,boundingBox:l,flexBasis:200,shrunkBy:u,actualSizeOverride:800===o?120:void 0})]}),(0,r.jsx)(ti,{children:(0,r.jsx)(ts.Z,{id:"flexBasis",label:"flex-basis",min:200,max:800,value:o,setValue:d,wrapperStyle:{color:"hsl(50deg 100% 65%)",fontWeight:"var(--font-weight-medium)"}},"flexBasis")})]})})},FlexDemoShrinkContainer:function(){let[e,t]=n.useState(600),[s,i]=n.useState(0),{scale:l,firstItemRef:a,secondItemRef:o,firstBBWidth:d,secondBBWidth:u}=tl({dependencies:[e]});return n.useEffect(()=>{"number"==typeof d&&i(100-Math.round(d/300*100))},[d]),(0,r.jsx)(c,{centered:!0,initialValues:{"--direction":"row"},renderAfter:()=>{},children:n=>(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(ta,{style:{width:612,height:300*l,transform:"scale(".concat(l,")")},children:(0,r.jsxs)(eV,{state:n,height:300,wrapperStyle:{width:e+12},children:[(0,r.jsx)(tn,{ref:a,flexBasis:300,actualSize:d,shrunkBy:s}),(0,r.jsx)(tn,{ref:o,flexBasis:150,actualSize:u,shrunkBy:s})]})}),(0,r.jsx)(to,{children:(0,r.jsx)(ts.Z,{id:"containerWidth",label:"Container width",min:300,max:600,value:e,setValue:t,handleFocusColor:"white"})})]})})},FlexDemoShrinkProperDemo:function(e){let{locked:t}=e,[s,i]=n.useState(t?400:600),[l,a]=n.useState(t?3:1),{scale:o,firstItemRef:d,secondItemRef:u,firstBBWidth:p,secondBBWidth:h}=tl({dependencies:[s,l]});return(0,r.jsx)(c,{centered:!0,initialValues:{"--direction":"row"},renderAfter:()=>{},children:e=>(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(tc,{style:{width:612,height:300*o,transform:"scale(".concat(o,")")},children:(0,r.jsxs)(eV,{state:e,wrapperStyle:{width:s+4+8},children:[(0,r.jsx)(tn,{primary:!0,ref:d,actualSize:p,flexShrink:l,flexBasis:250,shrunkBy:p?100-Math.round(p/250*100):0}),(0,r.jsx)(tn,{ref:u,actualSize:h,flexBasis:250,flexShrink:1,shrunkBy:h?100-Math.round(h/250*100):0})]})}),t?(0,r.jsx)(tu,{children:(0,r.jsx)("span",{children:"400px"})}):(0,r.jsxs)(td,{children:[(0,r.jsx)(ts.Z,{disabled:t,id:"flexShrink",label:"flex-shrink",min:1,max:8,value:l,setValue:a,handleColor:"hsl(50deg 100% 60%)",handleFocusColor:"hsl(50deg 100% 60%)",wrapperStyle:{flex:1,flexBasis:200,color:"hsl(50deg 100% 65%)",fontWeight:"var(--font-weight-medium)"}}),(0,r.jsx)(ts.Z,{disabled:t,id:"container-width",label:"Container width",min:400,max:600,value:s,setValue:i,handleFocusColor:"white",wrapperStyle:{flex:1,flexBasis:200}})]})]})})},FlexDemoShrinkSearchField:function(e){let{solvable:t}=e,s=n.useId(),[i,l]=n.useState(null);return(n.useEffect(()=>{let e=document.documentElement.clientWidth-32-16;e<500?l(e):l(500)},[]),i)?(0,r.jsx)(c,{centered:!0,customGrid:{gridTemplateColumns:t?"1fr 1fr":"1fr"},initialValues:{minWidth:"auto",containerWidth:i},controls:[!!t&&(0,r.jsx)(a.Xr,{id:"minWidth",label:"min-width",options:[{label:"auto (default)",value:"auto"},"0px"],wrapperStyle:{width:284,color:"hsl(50deg 100% 65%)",fontWeight:"var(--font-weight-medium)"}},"minWidth"),(0,r.jsx)(a.vn,{id:"containerWidth",label:"Container width",min:180,max:i,wrapperStyle:{width:284}},"containerWidth")],children:e=>{let{minWidth:t,containerWidth:n}=e;return(0,r.jsx)(tp,{style:{width:n},children:(0,r.jsxs)(th,{onSubmit:e=>{e.preventDefault(),alert("This isn't a real search form :(")},children:[(0,r.jsx)(tx,{htmlFor:"flex-demo-search-field-".concat(s),children:"Search:"}),(0,r.jsx)(tf,{id:"flex-demo-search-field-".concat(s),placeholder:"Fancy shoes",style:{minWidth:t}})]})})}}):null},FlexDemoShrinkZero:function(e){let{solvable:t}=e,[s,i]=n.useState(null);n.useEffect(()=>{let e=document.documentElement.clientWidth-32-16;e<600?i(e):i(600)},[]);let l=s-64-64;return(l=Math.min(l,300),s)?(0,r.jsx)(c,{initialValues:{"--direction":"row",containerWidth:s,flexShrink:1},centered:!0,customGrid:{gridTemplateColumns:t?"1fr 1fr":"1fr"},controls:[!!t&&(0,r.jsx)(a.Xr,{id:"flexShrink",label:"flex-shrink",options:[0,{label:"1 (default)",value:1}],wrapperStyle:{width:180,color:"hsl(50deg 100% 65%)",fontWeight:"var(--font-weight-medium)"}},"flexShrink"),(0,r.jsx)(a.vn,{id:"containerWidth",label:"Container width",min:148,max:s,wrapperStyle:{width:284},handleFocusColor:"white"},"containerWidth")],children:e=>{let{containerWidth:s,flexShrink:n}=e;return(0,r.jsxs)(eV,{state:{"--gap":"16px"},height:64,wrapperStyle:{width:s+4+8,padding:16},children:[(0,r.jsx)(tm,{type:"ball",primary:!!t,flexBasis:32,flexShrink:n,containerWidth:s}),(0,r.jsx)(tm,{type:"stretch",flexBasis:l,containerWidth:s}),(0,r.jsx)(tm,{type:"ball",primary:!!t,flexBasis:32,flexShrink:n,containerWidth:s})]})}}):null},FlexDemoShrinkZeroFixed:function(){let[e,t]=n.useState(600);return(0,r.jsx)(c,{centered:!0,initialValues:{"--direction":"row"},children:()=>(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(eV,{state:{"--gap":"16px"},height:64,wrapperStyle:{width:e+4+8,padding:16},children:[(0,r.jsx)(ty,{style:{flexShrink:0}}),(0,r.jsx)(tb,{}),(0,r.jsx)(ty,{style:{flexShrink:0}})]}),(0,r.jsx)(tv,{children:(0,r.jsx)(ts.Z,{id:"container-width",label:"Container width",min:100,max:600,value:e,setValue:t,wrapperStyle:{flex:1}})})]})})},FlexDemoShrinkWords:function(e){let{applyMinWidth:t}=e,s=n.useRef(),[i,l]=n.useState(null);return n.useEffect(()=>{s.current&&l(Math.min(600,s.current.getBoundingClientRect().width-32))},[]),(0,r.jsx)("div",{ref:s,children:"number"==typeof i&&(0,r.jsx)(c,{centered:!0,customGrid:{gridTemplateCols:"1fr"},initialValues:{flexShrink:0,containerWidth:i},controls:[(0,r.jsx)(a.vn,{id:"containerWidth",label:"Container width",min:t?100:150,max:i,wrapperStyle:{width:284}},"containerWidth")],style:{"--color-alert":"var(--color-gray-300)"},children:e=>{let{containerWidth:s,...n}=e;return(0,r.jsxs)(eV,{state:n,wrapperStyle:{width:s+4+8,padding:16,overflow:"unset"},children:[(0,r.jsx)(ej,{layout:!1,style:{minWidth:t?"0px":void 0},children:"The longest word in this item is “sesquipedalian”."}),(0,r.jsx)(ej,{layout:!1,style:{minWidth:t?"0px":void 0},children:"This one has no long words."})]})}})})},FlexDemoGapIntro:function(){return(0,r.jsx)(c,{initialValues:{"--direction":"row",gap:4},controls:[(0,r.jsx)(a.Xr,{id:"--direction",label:"flex-direction",options:["row","column"],wrapperStyle:{width:284}},"--direction"),(0,r.jsx)(a.vn,{id:"gap",label:"gap",min:0,max:48,previewRenderer:e=>"".concat(e,"px"),wrapperStyle:{width:284}},"gap")],children:e=>{let t="row"===e["--direction"],s=t?tk:tS;return(0,r.jsxs)(eV,{state:e,children:[(0,r.jsx)(s,{layout:!1,style:{flexBasis:64},children:(0,r.jsx)(eb,{})}),(0,r.jsx)(s,{layout:!1,style:{flexBasis:64},children:(0,r.jsx)(eb,{})}),(0,r.jsx)(s,{layout:!1,style:{flexBasis:64},children:(0,r.jsx)(eb,{})}),t&&(0,r.jsx)(s,{layout:!1,style:{flexBasis:64},children:(0,r.jsx)(eb,{})})]})}})},FlexDemoGapHeader:function(){return(0,r.jsx)(c,{initialValues:{"--justify":"center","--align-items":"center",gap:16},controls:[(0,r.jsx)(a.Xr,{id:"--justify",label:"justify-content",options:["flex-start","center","flex-end"]},"--justify"),(0,r.jsx)(a.vn,{id:"gap",label:"gap",min:0,max:64,previewRenderer:e=>"".concat(e,"px")},"gap")],children:e=>{let{gap:t,...s}=e;return(0,r.jsxs)(eV,{state:{...s,"--gap":"".concat(t,"px")},height:100,wrapperStyle:{padding:32},children:[(0,r.jsx)(tA,{href:"",children:"Home"}),(0,r.jsx)(tA,{href:"",children:"Shop"}),(0,r.jsx)(tA,{href:"",children:"Contact"})]})}})},FlexDemoAutoMargins:function(){return(0,r.jsx)(c,{initialValues:{marginLeft:0,marginRight:0},controls:[(0,r.jsx)(a.Xr,{inline:!0,id:"marginLeft",label:"margin-left",options:[{label:"0 (default)",value:0},"auto"],wrapperStyle:{color:"hsl(50deg 100% 65%)"}},"marginLeft"),(0,r.jsx)(a.Xr,{inline:!0,id:"marginRight",label:"margin-right",options:[{label:"0 (default)",value:0},"auto"],wrapperStyle:{color:"hsl(50deg 100% 65%)"}},"marginRight")],children:e=>{let{marginLeft:t,marginRight:s}=e;return(0,r.jsxs)(eV,{children:[(0,r.jsx)(ej,{primary:!0,style:{flexBasis:64,marginLeft:t,marginRight:s}}),(0,r.jsx)(ej,{style:{flexBasis:64}}),(0,r.jsx)(ej,{style:{flexBasis:64}})]})}})},FlexDemoWrappingIntro:function(){let[e,t]=n.useState(1),s=n.useRef();return s.current=e,n.useEffect(()=>{function e(){let e=window.innerWidth;e<680?t(e/680):1!==s.current&&t(1)}return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}},[]),(0,r.jsx)(c,{centered:!0,controlPosition:"top",initialValues:{"--wrap":"nowrap","--justify":"center",containerWidth:600},controls:[(0,r.jsx)(a.Xr,{id:"--wrap",label:"flex-wrap",options:[{label:"nowrap (default)",value:"nowrap"},"wrap"],wrapperStyle:{width:284}},"--wrap"),(0,r.jsx)(a.vn,{id:"containerWidth",label:"Container width",min:142,max:600,handleFocusColor:"white",previewRenderer:e=>e>360?e:e>180?e+4:e+8,wrapperStyle:{width:284}},"containerWidth")],children:t=>{let{containerWidth:s,...n}=t;return(0,r.jsx)(tW,{style:{width:616,transform:"scale(".concat(e,")")},children:(0,r.jsxs)(eV,{state:n,height:"auto",wrapperStyle:{width:s+16},children:[(0,r.jsx)(tI,{scale:e,containerWidth:s,flexWrap:n["--wrap"]}),(0,r.jsx)(tI,{scale:e,containerWidth:s,flexWrap:n["--wrap"]}),(0,r.jsx)(tI,{scale:e,containerWidth:s,flexWrap:n["--wrap"]})]})})}})},FlexDemoWrappingAlignItems:function(e){let{withContent:t}=e,s=n.useRef(),[i,l]=n.useState(600),o=t||i<600?a.Qc:a.aU;n.useEffect(()=>{function e(){s.current&&(document.documentElement.clientWidth<700?l(document.documentElement.clientWidth-76):l(600))}return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}},[]);let d=Math.floor(i/2);return(0,r.jsx)(c,{centered:!0,initialValues:{"--wrap":"wrap","--align-items":"flex-start","--align-content":"flex-start"},customGrid:{gridTemplateColumns:t?"1fr 1fr":"1fr"},controls:[(0,r.jsx)(o,{id:"--align-items",label:"align-items",options:["flex-start","center","flex-end","stretch"],wrapperStyle:{width:t?284:i}},"--align-items"),t&&(0,r.jsx)(o,{isNew:!0,id:"--align-content",label:"align-content",options:["flex-start","center","flex-end","stretch","space-between","space-around","space-evenly"],wrapperStyle:{width:284}},"--align-content")],children:e=>(0,r.jsxs)(eV,{ref:s,state:e,height:"280px",wrapperStyle:{width:i+12},children:[(0,r.jsx)(ej,{style:{flexBasis:d,minHeight:0}}),(0,r.jsx)(ej,{style:{flexBasis:d,minHeight:100}}),(0,r.jsx)(ej,{style:{flexBasis:d,minHeight:100}}),(0,r.jsx)(ej,{style:{flexBasis:d,minHeight:35}})]})})}};function tL(e){let{variant:t,...s}=e,n=tC[t];return(0,r.jsx)(n,{...s})}},82122:e=>{e.exports={s1w1d0nd:"s1w1d0nd",i1af9l9f:"i1af9l9f",f1rebvie:"f1rebvie",llk4ia8:"llk4ia8",n1a97jd:"n1a97jd",e1wampmk:"e1wampmk",ip8i2qa:"ip8i2qa",btck347:"btck347"}},6867:e=>{e.exports={onhqpdl:"onhqpdl",bggl0fb:"bggl0fb",f4akn40:"f4akn40",wq9e9bu:"wq9e9bu",h1jd4eox:"h1jd4eox",vpwy74f:"vpwy74f",l196uu2l:"l196uu2l",h16miv7f:"h16miv7f",v11wd52t:"v11wd52t",agwqywx:"agwqywx"}},50080:e=>{e.exports={s1a4d69t:"s1a4d69t"}},76422:e=>{e.exports={d17izmww:"d17izmww"}},13821:e=>{e.exports={w1b00398:"w1b00398"}},83310:e=>{e.exports={s6zaruz:"s6zaruz"}},41158:e=>{e.exports={h1jry897:"h1jry897",f4lagrt:"f4lagrt",l2o7z1z:"l2o7z1z"}},63914:e=>{e.exports={wd5evqm:"wd5evqm",s9qnkps:"s9qnkps",c106wyb7:"c106wyb7",t1fpi6rc:"t1fpi6rc",t1mfnqci:"t1mfnqci",lup5uen:"lup5uen",rppdi72:"rppdi72",t1yh3sge:"t1yh3sge",t1kh3f58:"t1kh3f58",lb0r9if:"lb0r9if",rzow8g2:"rzow8g2",c1m8wu8k:"c1m8wu8k",twsty9n:"twsty9n",if91kz6:"if91kz6"}},54949:e=>{e.exports={w10tf9ru:"w10tf9ru",nesicel:"nesicel",dz7trip:"dz7trip",sqz6o3b:"sqz6o3b"}},1214:e=>{e.exports={nfj8k47:"nfj8k47"}},21334:e=>{e.exports={p1ew2ee3:"p1ew2ee3",r1jxbgun:"r1jxbgun",co9m7hs:"co9m7hs"}},88337:e=>{e.exports={w1eyykcs:"w1eyykcs",h1e27qv9:"h1e27qv9"}},13598:e=>{e.exports={w1ay2007:"w1ay2007","point-w1ay2007":"point-w1ay2007",tdthhle:"tdthhle"}},94419:e=>{e.exports={w1mecebe:"w1mecebe",bj09a15:"bj09a15"}},42655:e=>{e.exports={w1npvboi:"w1npvboi",iy4souc:"iy4souc",r1t64vdy:"r1t64vdy"}},80983:e=>{e.exports={o1yk55rv:"o1yk55rv",hg0zpx3:"hg0zpx3",w1ruoqon:"w1ruoqon",a14681vo:"a14681vo",hhw9alj:"hhw9alj",vrx3br6:"vrx3br6"}},66622:e=>{e.exports={p1bv2dwa:"p1bv2dwa"}},81276:e=>{e.exports={s9tg3ao:"s9tg3ao",ptz92tw:"ptz92tw"}},28510:e=>{e.exports={s11j1x9z:"s11j1x9z",pk3957s:"pk3957s",sdg3sfj:"sdg3sfj"}},82451:e=>{e.exports={w1l1jlq1:"w1l1jlq1",ffcco1t:"ffcco1t",l39gj1b:"l39gj1b",s18327gu:"s18327gu"}},21135:e=>{e.exports={bbssao9:"bbssao9",pw60wn2:"pw60wn2"}},19006:e=>{e.exports={p7aqsq2:"p7aqsq2",bfjahjy:"bfjahjy",s1e2cci:"s1e2cci"}},40988:e=>{e.exports={w1iovb5t:"w1iovb5t",s13fzmd2:"s13fzmd2",s1bqnbxd:"s1bqnbxd"}},71619:e=>{e.exports={bc039bv:"bc039bv",g1ayol0g:"g1ayol0g",f15alv42:"f15alv42"}},69913:e=>{e.exports={l1lk5kxi:"l1lk5kxi","wiggleLeft-l1lk5kxi":"wiggleLeft-l1lk5kxi","wiggleRight-l1lk5kxi":"wiggleRight-l1lk5kxi"}},47578:e=>{e.exports={wrdpfit:"wrdpfit",t10u4ow9:"t10u4ow9",w198iq3:"w198iq3",t1it9j3v:"t1it9j3v",wpdr2q3:"wpdr2q3",wg7sfs3:"wg7sfs3"}},59447:e=>{e.exports={w1ulnsl8:"w1ulnsl8",w10stlkg:"w10stlkg",eztg1fj:"eztg1fj","levitate-eztg1fj":"levitate-eztg1fj",anhbzyq:"anhbzyq"}},88629:e=>{e.exports={s1e34fq0:"s1e34fq0"}}}]);
//# sourceMappingURL=15559.c13ddac3334d5a22.js.map