(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[29356],{53645:(e,s,t)=>{"use strict";t.d(s,{A:()=>a});let a=(0,t(2651).A)("ChevronLeft",[["path",{d:"m15 18-6-6 6-6",key:"1wnfg3"}]])},99150:(e,s,t)=>{"use strict";t.d(s,{A:()=>a});let a=(0,t(2651).A)("ChevronRight",[["path",{d:"m9 18 6-6-6-6",key:"mthhwq"}]])},37501:(e,s,t)=>{"use strict";t.d(s,{A:()=>a});let a=(0,t(2651).A)("ChevronUp",[["path",{d:"m18 15-6-6-6 6",key:"153udz"}]])},582:(e,s,t)=>{"use strict";t.d(s,{A:()=>a});let a=(0,t(2651).A)("OctagonAlert",[["path",{d:"M12 16h.01",key:"1drbdi"}],["path",{d:"M12 8v4",key:"1got3b"}],["path",{d:"M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z",key:"1fd625"}]])},85018:(e,s,t)=>{"use strict";t.d(s,{A:()=>a});let a=(0,t(2651).A)("RefreshCw",[["path",{d:"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8",key:"v9h5vc"}],["path",{d:"M21 3v5h-5",key:"1q7to0"}],["path",{d:"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16",key:"3uifl3"}],["path",{d:"M8 16H3v5",key:"1cv678"}]])},87378:(e,s,t)=>{"use strict";t.d(s,{A:()=>q});var a=t(87687);t(52751);var n=t(31928),r=t(37501),l=t(88700),i=t(53645),o=t(99150),c=t(30251),d=t(59341),p=t(68852);function u(e){let{distance:s,animateTransitions:t,flipTextSide:n,multiple:r=1,unit:l="px",...i}=e,o=(0,c.zh)({from:{number:!0===t?0:s},number:s,immediate:!t});return(0,a.jsxs)(h,{as:!0===t?d.P.div:"div",style:{width:!0===t?void 0:s,height:20},animate:!0===t?{width:s}:void 0,...i,children:[(0,a.jsx)(x,{children:(0,a.jsxs)(v,{children:[(0,a.jsx)(w,{size:20}),(0,a.jsx)(A,{size:20}),(0,a.jsx)(k,{})]})}),(0,a.jsx)(C,{style:{top:n?-16:16},children:o.number.to(e=>{let s="px"===l?Math.round(e*r):(0,p.GB)(e/16*r,1).toFixed(1);return e<40?s:s+l})})]})}function m(e){let{distance:s,animateTransitions:t,multiple:n=1,flipTextSide:r,...l}=e,i=(0,c.zh)({from:{number:0},number:s,immediate:!t});return(0,a.jsxs)(h,{as:t?d.P.div:"div",style:{width:20,height:t?void 0:s},animate:{height:t?s:void 0},...l,children:[(0,a.jsx)(x,{style:{opacity:s<16?0:1},children:(0,a.jsxs)(j,{children:[(0,a.jsx)(f,{size:20}),(0,a.jsx)(I,{size:20}),(0,a.jsx)(b,{})]})}),(0,a.jsx)(S,{children:i.number.to(e=>Math.round(e*n)+"px")})]})}let h=(0,n.I)(d.P.div)({name:"Wrapper",class:"w1mbq51h",propsAsIs:!0}),x=(0,n.I)("div")({name:"ArrowWrapper",class:"agjw958",propsAsIs:!1}),y=(0,n.I)("div")({name:"ArrowElem",class:"a15b5ky0",propsAsIs:!1}),j=(0,n.I)(y)({name:"VerticalArrowElem",class:"vt3r0v5",propsAsIs:!0}),v=(0,n.I)(y)({name:"HorizontalArrowElem",class:"h8ja5sk",propsAsIs:!0}),f=(0,n.I)(r.A)({name:"Up",class:"u8eocc7",propsAsIs:!0}),I=(0,n.I)(l.A)({name:"Down",class:"d1phaa8",propsAsIs:!0}),w=(0,n.I)(i.A)({name:"Left",class:"l1xa6ime",propsAsIs:!0}),A=(0,n.I)(o.A)({name:"Right",class:"r15impnm",propsAsIs:!0}),g=(0,n.I)("div")({name:"Shaft",class:"sqdmb0l",propsAsIs:!1}),b=(0,n.I)(g)({name:"VerticalShaft",class:"vfrhcon",propsAsIs:!0}),k=(0,n.I)(g)({name:"HorizontalShaft",class:"h1o8euj3",propsAsIs:!0}),z=(0,n.I)(c.CS.span)({name:"Label",class:"l18fzpc6",propsAsIs:!0}),S=(0,n.I)(z)({name:"VerticalLabel",class:"vcbaeky",propsAsIs:!0}),C=(0,n.I)(z)({name:"HorizontalLabel",class:"hguumh5",propsAsIs:!0}),q=function(e){let{distance:s,animateTransitions:t,flipTextSide:n,multiple:r=1,axis:l,unit:i="px",...o}=e;return(0,a.jsx)("horizontal"===l?u:m,{distance:s,animateTransitions:t,flipTextSide:n,multiple:r,unit:i,...o})};t(27687)},51900:(e,s,t)=>{"use strict";t.d(s,{A:()=>c});var a=t(87687);t(52751);var n=t(31928),r=t(30251),l=t(54401),i=t(60526);let o=(0,n.I)("svg")({name:"Svg",class:"s1c9ipa9",propsAsIs:!1}),c=function(e){let{size:s=20,isPressed:t,isBooped:n,...c}=e,d=(0,l.A)(),p={tension:300,friction:16,clamp:!!t},u=(0,r.zh)({...(0,i.tI)(t&&!d?"closing":"open",n),config:p}),m=(0,r.zh)({...(0,i.c1)(t&&!d?"closing":"open",n),config:p});return(0,a.jsxs)(o,{width:s/16+"rem",height:s/16+"rem",viewBox:"0 0 24 24",fill:"none",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",...c,children:[(0,a.jsx)(r.CS.line,{...u}),(0,a.jsx)(r.CS.line,{...m})]})};t(91186)},15691:(e,s,t)=>{"use strict";t.r(s),t.d(s,{default:()=>z});var a=t(87687),n=t(52751),r=t(31928),l=t(5770),i=t(50432),o=t(92597),c=t(582),d=t(30251),p=t(22559),u=t(54401),m=t(24283),h=t(51900),x=t(42591),y=t(42432),j=t(474);let v={info:l.A,success:i.A,warning:o.A,error:c.A},f=(0,r.I)("div")({name:"OuterWrapper",class:"ozep5mv",propsAsIs:!1}),I=(0,r.I)("button")({name:"CloseButton",class:"c1hag6y0",propsAsIs:!1}),w=(0,r.I)(x.YW)({name:"Wrapper",class:"waf1f9y",propsAsIs:!0}),A=(0,r.I)("div")({name:"TimeColumn",class:"tbw5dg6",propsAsIs:!1}),g=(0,r.I)("div")({name:"TimeRemaining",class:"t169lyus",propsAsIs:!1}),b=(0,r.I)("div")({name:"Main",class:"m15wgv93",propsAsIs:!1}),k=(0,r.I)("h2")({name:"Heading",class:"hl4y0lt",propsAsIs:!1}),z=function(e){let{id:s,type:t,title:r,handleDismiss:l,popTimeout:i=400,children:o,...c}=e,x=v[t],z=(0,u.A)(),[S,C]=n.useState(!1),[q,T]=n.useState(!1),[W,M]=n.useState("idle"),[P,E]=n.useState(3e4);n.useEffect(()=>{let e=window.setTimeout(()=>C(Date.now()),i);return()=>{window.clearTimeout(e)}},[i]),n.useEffect(()=>{if("booped"!==W)return;let e=window.setTimeout(()=>{M("idle")},150);return()=>{window.clearTimeout(e)}},[W]),n.useEffect(()=>{if(S)return window.addEventListener("keydown",e,{capture:!0}),()=>{window.removeEventListener("keydown",e,{capture:!0})};function e(e){"Escape"===e.key&&C(!1)}},[S]);let R="number"==typeof S&&"number"==typeof P&&P>0&&!q;(0,m.A)(()=>{if("number"!=typeof S)return;let e=Math.max(0,3e4-(Date.now()-S));0===e&&window.setTimeout(()=>C(!1),500),E(e)},R);let D=(0,d.zh)({from:{transform:"translateY(150%)"},to:{transform:S?"translateY(0px)":"translateY(150%)"},config:{tension:350,friction:20,mass:2,precision:.001},immediate:z}),B=n.useRef(!1),L=n.useRef();L.current=l,n.useEffect(()=>{let e;return S?B.current=!0:B.current&&(e=window.setTimeout(L.current,500)),()=>window.clearTimeout(e)},[S]);let V="color".concat(t[0].toUpperCase()).concat(t.slice(1),"500");return(0,a.jsx)(j.A,{children:(0,a.jsx)(f,{...c,onMouseEnter:e=>{T(!0),"function"==typeof c.onMouseEnter&&c.onMouseEnter(e)},onFocus:e=>{T(!0),"function"==typeof c.onFocus&&c.onFocus(e)},"data-test":"toast","data-test-type":t,"data-test-title":r,"data-test-body":o,"data-toast-id":s,children:(0,a.jsxs)(w,{as:d.CS.div,style:{"--h":p.Z6[V][0]+"deg","--s":p.Z6[V][1]+"%","--l":p.Z6[V][2]+"%",...D},children:[(0,a.jsx)(A,{children:(0,a.jsx)(g,{style:{"--transform":"scaleY(".concat("number"!=typeof P||q?1:P/3e4,")"),"--transition":R?"none":"transform 400ms","--gradient-opacity":R?1:0}})}),(0,a.jsx)(x,{size:24,style:{color:"hsl(var(--h) var(--s) var(--l))"}}),(0,a.jsxs)(b,{children:[(0,a.jsx)(k,{children:r}),"string"==typeof o?(0,a.jsx)("p",{children:o}):o]}),(0,a.jsxs)(I,{onClick:()=>C(!1),onMouseEnter:()=>M("booped"),onMouseLeave:()=>M("idle"),onMouseDown:()=>M("pressed"),onMouseUp:()=>M("idle"),children:[(0,a.jsx)(h.A,{size:24,isPressed:"pressed"===W,isBooped:"booped"===W}),(0,a.jsx)(y.A,{children:"Dismiss Toast"})]})]})})})};t(88911)},43892:(e,s,t)=>{"use strict";t.d(s,{A:()=>a.default});var a=t(15691)},92287:(e,s,t)=>{"use strict";t.r(s),t.d(s,{default:()=>eN});var a=t(87687),n=t(52751),r=t(31928),l=t(2651);let i=(0,l.A)("Globe",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["path",{d:"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20",key:"13o1zl"}],["path",{d:"M2 12h20",key:"9i4pu4"}]]),o=(0,l.A)("Briefcase",[["path",{d:"M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16",key:"jecpp"}],["rect",{width:"20",height:"14",x:"2",y:"6",rx:"2",key:"i6l2r4"}]]),c=(0,l.A)("Calendar",[["path",{d:"M8 2v4",key:"1cmpym"}],["path",{d:"M16 2v4",key:"4m81vk"}],["rect",{width:"18",height:"18",x:"3",y:"4",rx:"2",key:"1hopcy"}],["path",{d:"M3 10h18",key:"8toen8"}]]),d=(0,l.A)("Hash",[["line",{x1:"4",x2:"20",y1:"9",y2:"9",key:"4lhtct"}],["line",{x1:"4",x2:"20",y1:"15",y2:"15",key:"vyu0kd"}],["line",{x1:"10",x2:"8",y1:"3",y2:"21",key:"1ggp8o"}],["line",{x1:"16",x2:"14",y1:"3",y2:"21",key:"weycgp"}]]);var p=t(68852),u=t(9980),m=t(71597),h=t(43892);let x="profile-card-action-toast",y=(0,r.I)("div")({name:"Actions",class:"act9n2c",propsAsIs:!1}),j=(0,r.I)("button")({name:"Action",class:"at8jntl",propsAsIs:!1}),v=(0,r.I)(j)({name:"PrimaryAction",class:"pdc9phi",propsAsIs:!0}),f=(0,r.I)(j)({name:"SecondaryAction",class:"s8u1p3t",propsAsIs:!0}),I=function(){let[e,s]=n.useState(!1);function t(){if(e){s(!1),window.setTimeout(()=>{s(!0)},100);return}document.querySelector('[data-toast-id="'.concat(x,'"]'))||s(!0)}return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(y,{children:[(0,a.jsx)(f,{onClick:t,children:"Follow"}),(0,a.jsx)(v,{onClick:t,children:"Message"})]}),e&&(0,a.jsx)(h.A,{id:x,type:"error",title:"Not real buttons",handleDismiss:()=>s(!1),popTimeout:0,children:"These buttons don’t actually do anything, they’re just for show!"})]})};t(71819);let w=["#F4A1C1","#B588EF","#7EE5E6","#A3E7AC","#EDEB97","#F9BCAF"],A=(0,r.I)(m.A)({name:"Wrapper",class:"w1oihum1",propsAsIs:!0}),g=(0,r.I)("div")({name:"AvatarWrapper",class:"a1v0kyqm",propsAsIs:!1}),b=(0,r.I)("img")({name:"Avatar",class:"a9bdap5",propsAsIs:!1}),k=(0,r.I)("p")({name:"NameAndHandle",class:"nxb64my",propsAsIs:!1}),z=(0,r.I)("span")({name:"Name",class:"nt73zxa",propsAsIs:!1}),S=(0,r.I)("span")({name:"Handle",class:"h5vnfkj",propsAsIs:!1}),C=(0,r.I)("ul")({name:"Deets",class:"d4gwkq5",propsAsIs:!1}),q=(0,r.I)("li")({name:"Item",class:"iwoykth",propsAsIs:!1}),T=(0,r.I)("span")({name:"TextClamp",class:"t1k3jjl6",propsAsIs:!1}),W=function(e){var s;let{avatarBackdropIndex:t,avatarIndex:r,name:l,handle:m,city:h,country:x,job:y,...j}=e,[v]=n.useState(()=>null!=t?t:(0,p.yT)(0,w.length-1)),[f]=n.useState(()=>null!=r?r:(0,p.yT)(1,16)),[W]=n.useState(()=>null!=l?l:(0,u.gx)()),[M]=n.useState(()=>null!=m?m:(0,u.G_)(W)),[[P,E]]=n.useState(()=>h&&x?[h,x]:(0,u.dy)()),[R]=n.useState(()=>null!=y?y:(0,u.ZA)()),[D]=n.useState(()=>new Date((0,p.yT)(2010,2025),(0,p.yT)(0,11),(0,p.yT)(1,28))),[B]=n.useState(()=>(0,p.yT)(2,2345)),L="/images/peeps/".concat(String(f).padStart(3,"0"),".png"),V=null!==(s=w[v])&&void 0!==s?s:w[0];return(0,a.jsxs)(A,{...j,children:[(0,a.jsx)(g,{style:{"--bg":V},children:(0,a.jsx)(b,{alt:"",src:L})}),(0,a.jsxs)(k,{children:[(0,a.jsx)(z,{children:W}),(0,a.jsxs)(S,{children:["@",M]})]}),(0,a.jsxs)(C,{children:[(0,a.jsxs)(q,{children:[(0,a.jsx)(i,{size:18}),(0,a.jsxs)(T,{children:[P,", ",E]})]}),(0,a.jsxs)(q,{children:[(0,a.jsx)(o,{size:18}),(0,a.jsx)(T,{children:R})]}),(0,a.jsxs)(q,{children:[(0,a.jsx)(c,{size:18}),D.toLocaleDateString("en-US",{year:"numeric",month:"short",day:"numeric"})]}),(0,a.jsxs)(q,{children:[(0,a.jsx)(d,{size:18}),B," Posts"]})]}),(0,a.jsx)(I,{})]})};t(89304);var M=t(45830),P=t(85018),E=t(30251);let R=(0,r.I)(E.CS.span)({name:"Wrapper",class:"w10os1y8",propsAsIs:!0}),D=function(e){let{size:s=20,isBooped:t,changeKey:r,...l}=e,[i,o]=n.useState(0),c=n.useRef(r);n.useEffect(()=>{r!==c.current&&o(e=>e+180)},[r]);let d=(0,E.zh)({transform:"rotate(".concat(t?i-64:i,"deg)")});return(0,a.jsx)(R,{style:d,children:(0,a.jsx)(P.A,{size:s})})};t(35453);var B=t(17503);let L=(0,r.I)(m.A)({name:"Wrapper",class:"w11gfz5q",propsAsIs:!0}),V=function(e){return(0,a.jsx)(L,{...e,children:(0,a.jsx)(B.A,{})})};t(72257);let F=(0,r.I)("div")({name:"OuterWrapper",class:"o1c85q28",propsAsIs:!1}),O=(0,r.I)("div")({name:"Wrapper",class:"wm9vynf",propsAsIs:!1}),H=(0,r.I)("button")({name:"RefreshButton",class:"r1lxvgy6",propsAsIs:!1});t(32009);let N=(0,r.I)("div")({name:"Wrapper",class:"w10vw3sr",propsAsIs:!1}),_=(0,r.I)("div")({name:"CardWrapper",class:"c35z2b7",propsAsIs:!1});t(50650);var U=t(20120);let Y=(0,r.I)("div")({name:"DesktopOnly",class:"dtoxwjb",propsAsIs:!1}),G=(0,r.I)("div")({name:"MobileFallback",class:"m1moa004",propsAsIs:!1}),J=(0,r.I)("div")({name:"Wrapper",class:"w1y67q3j",propsAsIs:!1}),Z=(0,r.I)("div")({name:"CardWrapper",class:"c1gem8nb",propsAsIs:!1}),K=(0,r.I)("img")({name:"Image",class:"iisidno",propsAsIs:!1});t(7039);var X=t(55866),Q=t.n(X),$=t(99460),ee=t(19901),es=t(87378);let et=(0,r.I)("div")({name:"OutputWrapper",class:"owg32ql",propsAsIs:!1}),ea=(0,r.I)("div")({name:"MetadataLayoutIndicator",class:"m19mb36q",propsAsIs:!1}),en=(0,r.I)("div")({name:"LayoutValue",class:"l1pkai3d",propsAsIs:!1}),er=(0,r.I)("div")({name:"MetadataWrapper",class:"mb9pa39",propsAsIs:!1}),el=(0,r.I)("div")({name:"WidthIndicator",class:"w1t2s1hn",propsAsIs:!1}),ei=(0,r.I)("div")({name:"Metadata",class:"m1iz4qre",propsAsIs:!1}),eo=(0,r.I)("div")({name:"Header",class:"h1xgbvfz",propsAsIs:!1}),ec=(0,r.I)("div")({name:"Line",class:"l1uelmzs",propsAsIs:!1}),ed=(0,r.I)("span")({name:"Key",class:"k1qrap7q",propsAsIs:!1}),ep=(0,r.I)("span")({name:"Value",class:"v16bqo69",propsAsIs:!1}),eu=(0,r.I)("div")({name:"Body",class:"b16zruhm",propsAsIs:!1});t(67686);var em=t(59341);let eh=(0,r.I)(em.P.div)({name:"Wrapper",class:"wz5cj0s",propsAsIs:!0}),ex=(0,r.I)(em.P.p)({name:"Title",class:"tcgk9x4",propsAsIs:!0}),ey=(0,r.I)("dl")({name:"Row",class:"r2my5zi",propsAsIs:!1}),ej=(0,r.I)("dt")({name:"Label",class:"lgv49wq",propsAsIs:!1}),ev=(0,r.I)("dd")({name:"Value",class:"v1xvnc9l",propsAsIs:!1}),ef=(0,r.I)(em.P.div)({name:"Divider",class:"dnq6j8n",propsAsIs:!0}),eI=(0,r.I)(em.P.span)({name:"Motion",class:"m1109chk",propsAsIs:!0});t(33348);var ew=t(47495);let eA="Hello world! This is a sentence that includes several different words, but contains no real meaning.",eg=(0,r.I)(m.A)({name:"OutputWrapper",class:"owu2orl",propsAsIs:!0}),eb=(0,r.I)("div")({name:"SliderWrapper",class:"s1ildd3l",propsAsIs:!1}),ek=(0,r.I)("div")({name:"Wrapper",class:"w1a877nv",propsAsIs:!1}),ez=(0,r.I)("div")({name:"Sentence",class:"s4uteva",propsAsIs:!1}),eS=(0,r.I)("div")({name:"ArrowWrapper",class:"a1rqk0u8",propsAsIs:!1});t(72442);let eC=(0,r.I)("div")({name:"SliderWrapper",class:"s1lsdu1t",propsAsIs:!1}),eq=(0,r.I)(m.A)({name:"Wrapper",class:"w8vhxud",propsAsIs:!0}),eT=(0,r.I)("div")({name:"Group",class:"gcy3zv3",propsAsIs:!1}),eW=(0,r.I)("div")({name:"Sentence",class:"svcjyc6",propsAsIs:!1}),eM=(0,r.I)("div")({name:"ArrowWrapper",class:"a26ileo",propsAsIs:!1});t(70845);var eP=t(82494);let eE="Hello world! This is a sentence that includes several different words.",eR=eE.length,eD=(0,r.I)("div")({name:"SliderWrapper",class:"sl2v57h",propsAsIs:!1}),eB=(0,r.I)("div")({name:"Wrapper",class:"w26yazv",propsAsIs:!1}),eL=(0,r.I)("div")({name:"Sentence",class:"sae4cet",propsAsIs:!1}),eV=(0,r.I)("div")({name:"ArrowWrapper",class:"a1ambr24",propsAsIs:!1});t(8924);var eF=t(25057);let eO=(0,r.I)("div")({name:"Wrapper",class:"wcs4idl",propsAsIs:!1});t(17032);let eH={ProfileCard:W,SoloProfileCard:function(e){let{}=e,[s,t]=n.useState(0),[r,l]=n.useState(!1),i=(0,M.A)();return(0,a.jsx)(F,{children:(0,a.jsxs)(O,{children:[i?(0,a.jsx)(W,{},"render"+s):(0,a.jsx)(V,{}),(0,a.jsx)(H,{onClick:()=>{t(s+1),l(!1)},onMouseDown:()=>l(!0),onMouseLeave:()=>l(!1),children:(0,a.jsx)(D,{isBooped:r,changeKey:s})})]})})},TripletProfileCard:function(){let e=(0,M.A)();return(0,a.jsx)(N,{children:e?[(0,a.jsx)(_,{children:(0,a.jsx)(W,{avatarBackdropIndex:0,avatarIndex:5,name:"Anthony Harris",handle:"theboxmodel",city:"San Francisco",country:"US",job:"Staff UI/UX Designer"})},"card-1"),(0,a.jsx)(_,{children:(0,a.jsx)(W,{avatarBackdropIndex:2,avatarIndex:12,name:"Dr. Kai Bechstein",handle:"pianofingers",city:"Berlin",country:"DE",job:"Physician"})},"card-2"),(0,a.jsx)(_,{children:(0,a.jsx)(W,{avatarBackdropIndex:4,avatarIndex:13,name:"Faajal Singh",handle:"faajal31",city:"Vancouver",country:"CA",job:"Principal Engineer"})},"card-3")]:[(0,a.jsx)(V,{},"loader-1"),(0,a.jsx)(V,{},"loader-2"),(0,a.jsx)(V,{},"loader-3")]})},ProfileCardDemo:function(){let e=(0,M.A)();return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(Y,{children:(0,a.jsx)(U.Ay,{initialValues:{numOfCards:3},controlPosition:"top",outputWrapper:null,controlStyles:{gridTemplateColumns:"min(".concat(440,"px, 100%)"),justifyContent:"center"},controls:[(0,a.jsx)(U.oP,{id:"numOfCards",name:"numOfCards",label:"Number of Profiles",min:1,max:6},"numOfCards")],children:s=>{let{numOfCards:t}=s,n=3===t?420:305,r="".concat(n/16,"rem");return(0,a.jsx)(J,{"data-num-of-cards":t,children:(0,p.y1)(t).map(s=>e?(0,a.jsx)(Z,{children:(0,a.jsx)(W,{})},"card-".concat(s)):(0,a.jsx)(V,{style:{height:r}},"loader-".concat(s)))})}})}),(0,a.jsx)(G,{children:(0,a.jsx)(K,{loading:"lazy",alt:"A grid of profile cards with two rows. The first row has 3 cards, and each card uses the 'narrow' layout. The second row has 2 cards, and each card uses the 'wide' layout.",src:"/images/container-queries/card-grid-demo.png"})})]})},EmailLayoutDemo:function(e){let{type:s}=e,t=n.useRef(null),r=(0,$.A)(t);return(0,a.jsx)(U.Ay,{ref:t,initialValues:{width:100},controlPosition:"top",outputWrapper:null,controlStyles:{gridTemplateColumns:"min(".concat(440,"px, 100%)"),justifyContent:"center"},controls:[(0,a.jsx)(U.oP,{id:"width",name:"width",label:"Window Width",min:1,max:100,previewRenderer:()=>null},"width")],children:e=>{let{width:t}=e,n="showing-metadata-width"===s?48:8;if(!r)return(0,a.jsx)(ee.A,{axis:"vertical",size:"showing-metadata-width"===s?"calc(15rem + 16px + ".concat(n,"px)"):"301px",children:(0,a.jsx)(B.A,{})});let l=Math.min(r.width,440),i=Math.round((0,p.S8)(t,1,100,120,l)),o=i>=(window.innerWidth,250),c=i-16,d=c-8,u=o?Math.round(.42*d):c,m=o?d-u:c,h="sparse";return"showing-metadata-layout"===s&&(h=u>150?"sparse":"condensed"),(0,a.jsxs)(a.Fragment,{children:["showing-metadata-layout"===s&&(0,a.jsxs)(ea,{children:[(0,a.jsx)(en,{"data-matched":"sparse"===h,children:"Sparse"}),(0,a.jsx)(en,{"data-matched":"condensed"===h,children:"Condensed"})]}),(0,a.jsxs)(et,{style:{width:i,marginTop:n},children:[(0,a.jsxs)(er,{style:{width:u,minWidth:u},children:["showing-metadata-width"===s&&(0,a.jsx)(el,{children:(0,a.jsx)(es.A,{axis:"horizontal",unit:"rem",flipTextSide:!0,distance:u,multiple:2})}),(0,a.jsxs)(ei,{className:Q().className,"data-layout":h,children:[(0,a.jsx)(eo,{children:"Subject line here"}),(0,a.jsxs)(ec,{children:[(0,a.jsx)(ed,{children:"From:"}),(0,a.jsx)(ep,{children:"Jerica Lancaster"})]}),(0,a.jsxs)(ec,{children:[(0,a.jsx)(ed,{children:"Reply:"}),(0,a.jsx)(ep,{children:"Jerica@email.com"})]}),(0,a.jsxs)(ec,{children:[(0,a.jsx)(ed,{children:"Date:"}),(0,a.jsx)(ep,{children:"January 1"})]})]})]}),(0,a.jsxs)(eu,{style:{width:m,minWidth:m},className:Q().className,children:[(0,a.jsx)("p",{children:"Hi, screen-reader users! This is a scribble intended to represent text in an email."}),(0,a.jsx)("p",{children:"You can ignore all text in this container."})]})]})]})}})},MetadataSparseVsCondensed:function(){let e=n.useRef(null),s=(0,$.A)(e),t=new Date(new Date).toLocaleDateString("en-US",{year:"numeric",month:"long",day:"numeric"});return(0,a.jsx)(U.Ay,{ref:e,initialValues:{layoutType:"sparse"},controlPosition:"top",outputWrapper:null,controlStyles:{gridTemplateColumns:"min(".concat(440,"px, 100%)"),justifyContent:"center"},controls:[(0,a.jsx)(U.Cd,{id:"layoutType",label:"Layout Type",inline:!0,options:[{value:"sparse",label:"Sparse"},{value:"condensed",label:"Condensed"}]},"layoutType")],children:e=>{let{layoutType:n}=e,r=Math.min((null==s?void 0:s.width)||1e4,440);return(0,a.jsxs)(eh,{layout:!0,"data-layout-type":n,style:{width:"sparse"===n?r:.75*r},children:[(0,a.jsx)(ex,{layout:!0,children:(0,a.jsx)(eI,{layout:!0,children:"Some thoughts about passion…"})}),(0,a.jsxs)(ey,{children:[(0,a.jsx)(ej,{children:(0,a.jsx)(eI,{layout:!0,children:"From"})}),(0,a.jsx)(ev,{children:(0,a.jsx)(eI,{layout:!0,children:"Jerica W. Lancaster"})})]}),(0,a.jsx)(em.P.div,{layout:!0,children:(0,a.jsx)(ef,{layout:!0})}),(0,a.jsxs)(ey,{children:[(0,a.jsx)(ej,{children:(0,a.jsx)(eI,{layout:!0,children:"Reply-To"})}),(0,a.jsx)(ev,{children:(0,a.jsx)(eI,{layout:!0,children:"support@joshwcomeau.com"})})]}),(0,a.jsx)(em.P.div,{layout:!0,children:(0,a.jsx)(ef,{layout:!0})}),(0,a.jsxs)(ey,{style:{borderBottom:"revert"},children:[(0,a.jsx)(ej,{children:(0,a.jsx)(eI,{layout:!0,children:"Sent"})}),(0,a.jsx)(ev,{children:(0,a.jsx)(eI,{layout:!0,children:t})})]})]})}})},FitContentDemo:function(){let e=n.useRef(null),[s,t]=n.useState(12),[r,l]=n.useState(null);return n.useEffect(()=>{e.current&&l(e.current.getBoundingClientRect().width)},[s]),(0,a.jsx)(U.Ay,{initialValues:{},outputWrapper:eg,controlPosition:"top",controlStyles:{gridTemplateColumns:"min(500px, 100%) !important",justifyContent:"center"},renderAltControls:()=>(0,a.jsx)(eb,{children:(0,a.jsx)(ew.A,{id:"numOfCharacters",name:"numOfCharacters",label:"Num of Characters",value:s,setValue:t,min:5,max:100},"numOfCharacters")}),children:()=>{let t=eA.slice(0,Math.min(12,s)),n=eA.slice(12,Math.max(12,s));return(0,a.jsxs)(ek,{children:["number"==typeof r&&r>5&&(0,a.jsx)(eS,{children:(0,a.jsx)(es.A,{animateTransitions:"label-only",axis:"horizontal",unit:"rem",distance:r+4,flipTextSide:!0})}),(0,a.jsxs)(ez,{ref:e,children:[(0,a.jsxs)("strong",{children:[t," "===t[t.length-1]&&"​"]}),n," "===n[n.length-1]&&"​"]})]})}})},BigHelloWorld:function(){let e=n.useRef(null),[s,t]=n.useState(1),[r,l]=n.useState(null);return n.useEffect(()=>{e.current&&l(e.current.getBoundingClientRect().width)},[s]),(0,a.jsx)(U.Ay,{initialValues:{},controlPosition:"top",controlStyles:{gridTemplateColumns:"min(500px, 100%) !important",justifyContent:"center"},outputWrapper:null,renderAltControls:()=>(0,a.jsx)(eC,{children:(0,a.jsx)(ew.A,{id:"fontSize",name:"fontSize",label:"font-size",value:s,setValue:t,min:.8,max:3,step:.1,previewRenderer:e=>"".concat(e,"rem")},"fontSize")}),children:()=>(0,a.jsx)(eq,{children:(0,a.jsxs)(eT,{children:["number"==typeof r&&r>5&&(0,a.jsx)(eM,{children:(0,a.jsx)(es.A,{animateTransitions:"label-only",axis:"horizontal",unit:"rem",distance:r+4,flipTextSide:!0})}),(0,a.jsx)(eW,{ref:e,style:{fontSize:"".concat(s,"rem")},children:(0,a.jsx)("strong",{children:"Hello World!"})})]})})})},RecursiveNightmare:function(e){let{}=e,s=n.useRef(null),[t,r]=n.useState(eR),[l,i]=n.useState(0),[o,c]=n.useState(!1);return n.useEffect(()=>{s.current&&(i(s.current.getBoundingClientRect().width),t<=19&&window.setTimeout(()=>{(0,eP.flushSync)(()=>{c(!o)})},500))},[t,o]),(0,a.jsx)(U.Ay,{controlPosition:"top",initialValues:{},controlStyles:{gridTemplateColumns:"min(500px, 100%) !important",justifyContent:"center"},renderAltControls:()=>(0,a.jsx)(eD,{children:(0,a.jsx)(ew.A,{id:"numOfCharacters",name:"numOfCharacters",label:"Num of Characters",value:t,setValue:r,min:11,max:eR,handleColor:t<=19?"var(--color-secondary)":void 0},"numOfCharacters")}),children:()=>{let e=eE.slice(0,Math.min(12,t)),n=eE.slice(12,Math.max(12,t)),r=t<=19&&o?3:1.125;return(0,a.jsxs)(eB,{children:[l>5&&(0,a.jsx)(eV,{children:(0,a.jsx)(es.A,{animateTransitions:"label-only",axis:"horizontal",unit:"rem",distance:l+4,flipTextSide:!0})}),(0,a.jsxs)(eL,{ref:s,children:[(0,a.jsxs)("strong",{style:{fontSize:"".concat(r,"rem")},children:[e," "===e[e.length-1]&&"​"]}),n," "===n[n.length-1]&&"​"]})]})}})},ContainmentDemo:function(){return(0,a.jsx)(U.Ay,{initialValues:{imageWidth:200,contain:"none"},controlPosition:"top",outputWrapperProps:{layout:!1,style:{minHeight:"0",padding:16}},customGrid:{gridTemplateColumns:"1fr 1fr"},controls:[(0,a.jsx)(U.oP,{id:"imageWidth",label:"Image width",min:100,max:250,previewRenderer:()=>null},"imageWidth"),(0,a.jsx)(U.wI,{id:"contain",label:"contain",options:[{label:"none (default)",value:"none"},"size"]},"contain")],children:e=>{let{imageWidth:s,contain:t}=e;return(0,a.jsxs)(eO,{style:{contain:t},children:[(0,a.jsx)(eF.default,{alt:"an axolotl in an aquarium",src:"/images/container-queries/axolotl-closeup.jpg",width:500,height:385,style:{width:s,height:.77*s}}),(0,a.jsx)("p",{children:"The axolotl is a ridiculous aquatic salamander. It’s absolutely adorable and looks like a Pok\xe9mon. It is one of my favourite animals."})]})}})}};function eN(e){let{variant:s,...t}=e,n=eH[s];return(0,a.jsx)(n,{...t})}},25057:(e,s,t)=>{"use strict";t.d(s,{default:()=>n.a});var a=t(42102),n=t.n(a)},42102:(e,s,t)=>{"use strict";Object.defineProperty(s,"__esModule",{value:!0}),function(e,s){for(var t in s)Object.defineProperty(e,t,{enumerable:!0,get:s[t]})}(s,{default:function(){return o},getImageProps:function(){return i}});let a=t(99802),n=t(44542),r=t(86318),l=a._(t(24262));function i(e){let{props:s}=(0,n.getImgProps)(e,{defaultLoader:l.default,imgConf:{deviceSizes:[640,750,828,1080,1200,1920,2048,3840],imageSizes:[16,32,48,64,96,128,256,384],path:"/_next/image/",loader:"default",dangerouslyAllowSVG:!1,unoptimized:!1}});for(let[e,t]of Object.entries(s))void 0===t&&delete s[e];return{props:s}}let o=r.Image},27687:e=>{e.exports={w1mbq51h:"w1mbq51h",agjw958:"agjw958",a15b5ky0:"a15b5ky0",vt3r0v5:"vt3r0v5","verticalEnter-vt3r0v5a15b5ky0":"verticalEnter-vt3r0v5a15b5ky0",h8ja5sk:"h8ja5sk","horizontalEnter-h8ja5ska15b5ky0":"horizontalEnter-h8ja5ska15b5ky0",u8eocc7:"u8eocc7",d1phaa8:"d1phaa8",l1xa6ime:"l1xa6ime",r15impnm:"r15impnm",sqdmb0l:"sqdmb0l",vfrhcon:"vfrhcon",h1o8euj3:"h1o8euj3",l18fzpc6:"l18fzpc6",vcbaeky:"vcbaeky",hguumh5:"hguumh5"}},91186:e=>{e.exports={s1c9ipa9:"s1c9ipa9"}},35453:e=>{e.exports={w10os1y8:"w10os1y8"}},88911:e=>{e.exports={ozep5mv:"ozep5mv",c1hag6y0:"c1hag6y0",waf1f9y:"waf1f9y",tbw5dg6:"tbw5dg6",t169lyus:"t169lyus",m15wgv93:"m15wgv93",hl4y0lt:"hl4y0lt"}},70845:e=>{e.exports={s1lsdu1t:"s1lsdu1t",w8vhxud:"w8vhxud",gcy3zv3:"gcy3zv3",svcjyc6:"svcjyc6",a26ileo:"a26ileo"}},17032:e=>{e.exports={wcs4idl:"wcs4idl"}},67686:e=>{e.exports={owg32ql:"owg32ql",m19mb36q:"m19mb36q",l1pkai3d:"l1pkai3d","glowYellow-l1pkai3d":"glowYellow-l1pkai3d","jump-l1pkai3d":"jump-l1pkai3d",mb9pa39:"mb9pa39",w1t2s1hn:"w1t2s1hn",m1iz4qre:"m1iz4qre",h1xgbvfz:"h1xgbvfz",l1uelmzs:"l1uelmzs",k1qrap7q:"k1qrap7q",v16bqo69:"v16bqo69",b16zruhm:"b16zruhm"}},72442:e=>{e.exports={owu2orl:"owu2orl",s1ildd3l:"s1ildd3l",w1a877nv:"w1a877nv",s4uteva:"s4uteva",a1rqk0u8:"a1rqk0u8"}},33348:e=>{e.exports={wz5cj0s:"wz5cj0s",tcgk9x4:"tcgk9x4",r2my5zi:"r2my5zi",lgv49wq:"lgv49wq",v1xvnc9l:"v1xvnc9l",dnq6j8n:"dnq6j8n",m1109chk:"m1109chk"}},89304:e=>{e.exports={w1oihum1:"w1oihum1",a1v0kyqm:"a1v0kyqm",a9bdap5:"a9bdap5","riseIn-a9bdap5":"riseIn-a9bdap5",fadeIn:"fadeIn",nxb64my:"nxb64my",nt73zxa:"nt73zxa",h5vnfkj:"h5vnfkj",d4gwkq5:"d4gwkq5",iwoykth:"iwoykth",t1k3jjl6:"t1k3jjl6"}},71819:e=>{e.exports={act9n2c:"act9n2c",at8jntl:"at8jntl",pdc9phi:"pdc9phi",s8u1p3t:"s8u1p3t"}},7039:e=>{e.exports={dtoxwjb:"dtoxwjb",m1moa004:"m1moa004",w1y67q3j:"w1y67q3j",c1gem8nb:"c1gem8nb",iisidno:"iisidno"}},72257:e=>{e.exports={w11gfz5q:"w11gfz5q"}},8924:e=>{e.exports={sl2v57h:"sl2v57h",w26yazv:"w26yazv",sae4cet:"sae4cet",a1ambr24:"a1ambr24"}},32009:e=>{e.exports={o1c85q28:"o1c85q28",wm9vynf:"wm9vynf",r1lxvgy6:"r1lxvgy6"}},50650:e=>{e.exports={w10vw3sr:"w10vw3sr",c35z2b7:"c35z2b7"}},55866:e=>{e.exports={style:{fontFamily:"'Redacted Script', 'Redacted Script Fallback'",fontStyle:"normal"},className:"__className_5a20f0"}}}]);
//# sourceMappingURL=29356.ec876b1632fe8e3d.js.map