https://www.geoguessr.com/_next/static/chunks/pages/examples/kbd-6e213e2e9783c2a1.js

1!function(){try{var e="u">typeof window?window:"u">typeof global?global:"u">typeof globalThis?globalThis:"u">typeof self?self:{};e._sentryModuleMetadata=e._sentryModuleMetadata||{},e._sentryModuleMetadata[(new e.Error).stack]=function(e){for(var s=1;s<arguments.length;s++){var n=arguments[s];if(null!=n)for(var a in n)n.hasOwnProperty(a)&&(e[a]=n[a])}return e}({},e._sentryModuleMetadata[(new e.Error).stack],{"_sentryBundlerPluginAppKey:gg-sentry-application-key":!0});var s=(new e.Error).stack;s&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[s]="0b51a04f-e3d9-4e41-95f3-18bd4764098b",e._sentryDebugIdIdentifier="sentry-dbid-0b51a04f-e3d9-4e41-95f3-18bd4764098b")}catch(e){}}(),(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[25997],{216178:(e,s,n)=>{"use strict";n.d(s,{Y:()=>p});var a=n(164255),l=n(75005),r=n(399812),i=n(892860),t=n.n(i),c=n(508280),d=n.n(c);let o=["--font-size-11","--font-size-14","--font-size-16","--font-size-20","--font-size-30","--font-size-48","--font-size-60"],h=[{label:"default",props:{}},{label:"ghost",props:{ghost:!0}},{label:"inverted",props:{inverted:!0}},{label:"outline",props:{outline:!0}}],_=()=>{let e,s,n,i,c,_,p,u,j,f,y,k,v,g,N,S,w,z,I,E,D,K,T=(0,l.c)(22);return T[0]===Symbol.for("react.memo_cache_sentinel")?(e=(0,a.jsx)("h1",{children:"Kbd"}),T[0]=e):e=T[0],T[1]===Symbol.for("react.memo_cache_sentinel")?(s=(0,a.jsx)("code",{children:"<kbd>"}),T[1]=s):s=T[1],T[2]===Symbol.for("react.memo_cache_sentinel")?(n=(0,a.jsx)("code",{children:"font-size"}),T[2]=n):n=T[2],T[3]===Symbol.for("react.memo_cache_sentinel")?(i=(0,a.jsx)("code",{children:"ghost"}),T[3]=i):i=T[3],T[4]===Symbol.for("react.memo_cache_sentinel")?(c=(0,a.jsx)("code",{children:"inverted"}),T[4]=c):c=T[4],T[5]===Symbol.for("react.memo_cache_sentinel")?(_=(0,a.jsx)("code",{children:"disabled"}),T[5]=_):_=T[5],T[6]===Symbol.for("react.memo_cache_sentinel")?(p=(0,a.jsxs)("p",{children:["A semantic ",s," styled as a 3D keyboard key. Geometry is em-based, so the key scales with the parent"," ",n,". Variants are applied through boolean props (",i,", ",c,", ",_,"), and any extra styling goes through ",(0,a.jsx)("code",{children:"className"}),"."]}),u=(0,a.jsx)("h2",{children:"Variants"}),j=(0,a.jsx)("p",{children:"Default reads on dark surfaces. Ghost removes the chrome for inline hints. Inverted swaps to a light fill for use on dark backgrounds. Outline drops the fill for a bordered key that follows the current text color."}),T[6]=p,T[7]=u,T[8]=j):(p=T[6],u=T[7],j=T[8]),T[9]===Symbol.for("react.memo_cache_sentinel")?(y=(0,a.jsxs)("section",{children:[u,j,(0,a.jsx)("div",{className:t().variantGrid,children:h.map(m)})]}),f=(0,a.jsx)("h2",{children:"Sizing"}),T[9]=f,T[10]=y):(f=T[9],y=T[10]),T[11]===Symbol.for("react.memo_cache_sentinel")?(k=(0,a.jsx)("code",{children:"em"}),T[11]=k):k=T[11],T[12]===Symbol.for("react.memo_cache_sentinel")?(v=(0,a.jsxs)("section",{children:[f,(0,a.jsxs)("p",{children:["The key is sized in ",k,", so it follows the parent"," ",(0,a.jsx)("code",{children:"font-size"}),"."]}),o.map(b)]}),g=(0,a.jsx)("h2",{children:"Disabled"}),T[12]=v,T[13]=g):(v=T[12],g=T[13]),T[14]===Symbol.for("react.memo_cache_sentinel")?(N=(0,a.jsxs)("p",{children:["The ",(0,a.jsx)("code",{children:"disabled"})," prop dims the key and switches the cursor."]}),T[14]=N):N=T[14],T[15]===Symbol.for("react.memo_cache_sentinel")?(S=(0,a.jsxs)("section",{children:[g,N,(0,a.jsx)("div",{className:t().variantGrid,children:h.map(x)})]}),w=(0,a.jsx)("h2",{children:"Combos"}),z=(0,a.jsx)("p",{children:"Compose multi-key shortcuts by rendering siblings inside a flex wrapper."}),T[15]=S,T[16]=w,T[17]=z):(S=T[15],w=T[16],z=T[17]),T[18]===Symbol.for("react.memo_cache_sentinel")?(I=(0,a.jsxs)("div",{className:t().combo,children:[(0,a.jsx)(r.u,{children:"⌘"}),(0,a.jsx)("span",{children:"+"}),(0,a.jsx)(r.u,{children:"K"})]}),T[18]=I):I=T[18],T[19]===Symbol.for("react.memo_cache_sentinel")?(E=(0,a.jsxs)("div",{className:t().combo,children:[(0,a.jsx)(r.u,{children:"Ctrl"}),(0,a.jsx)("span",{children:"+"}),(0,a.jsx)(r.u,{children:"Shift"}),(0,a.jsx)("span",{children:"+"}),(0,a.jsx)(r.u,{children:"P"})]}),T[19]=E):E=T[19],T[20]===Symbol.for("react.memo_cache_sentinel")?(D=(0,a.jsxs)("div",{className:t().combo,children:[(0,a.jsx)(r.u,{ghost:!0,children:"⌘"}),(0,a.jsx)("span",{children:"+"}),(0,a.jsx)(r.u,{ghost:!0,children:"K"})]}),T[20]=D):D=T[20],T[21]===Symbol.for("react.memo_cache_sentinel")?(K=(0,a.jsxs)("div",{className:d().page,children:[e,p,y,v,S,(0,a.jsxs)("section",{children:[w,z,(0,a.jsxs)("div",{className:t().comboList,children:[I,E,D,(0,a.jsxs)("div",{className:t().combo,children:[(0,a.jsx)(r.u,{inverted:!0,children:"⌘"}),(0,a.jsx)("span",{children:"+"}),(0,a.jsx)(r.u,{inverted:!0,children:"K"})]})]})]})]}),T[21]=K):K=T[21],K};function m(e){return(0,a.jsxs)("div",{className:t().stateItem,children:[(0,a.jsx)("div",{className:t().kbdBox,children:(0,a.jsx)(r.u,{...e.props,children:"⌘"})}),(0,a.jsx)("span",{className:t().stateLabel,children:e.label})]},e.label)}function b(e){return(0,a.jsxs)("div",{className:t().sizeRow,children:[(0,a.jsx)("span",{className:t().sizeLabel,children:(0,a.jsx)("code",{children:e})}),(0,a.jsxs)("div",{className:t().sizeKbds,style:{fontSize:`var(${e})`},children:[(0,a.jsx)(r.u,{children:"⌘"}),(0,a.jsx)(r.u,{children:"K"})]})]},e)}function x(e){return(0,a.jsxs)("div",{className:t().stateItem,children:[(0,a.jsx)("div",{className:t().kbdBox,children:(0,a.jsx)(r.u,{...e.props,disabled:!0,children:"⌘"})}),(0,a.jsx)("span",{className:t().stateLabel,children:e.label})]},e.label)}let p=()=>{let e,s=(0,l.c)(1);return s[0]===Symbol.for("react.memo_cache_sentinel")?(e=(0,a.jsx)(_,{}),s[0]=e):e=s[0],e}},288280:(e,s,n)=>{"use strict";n.r(s),n.d(s,{__N_SSP:()=>l,default:()=>r});var a=n(216178);a.Y.layoutProps={theme:{name:"examples"}},a.Y.seo={type:"NoIndex"};var l=!0;let r=a.Y},399812:(e,s,n)=>{"use strict";n.d(s,{u:()=>d});var a=n(164255),l=n(75005),r=n(611230),i=n.n(r),t=n(953504),c=n.n(t);let d=e=>{let s,n,r,t=(0,l.c)(11),{children:d,ghost:o,inverted:h,outline:_,disabled:m,className:b}=e;return t[0]!==b||t[1]!==m||t[2]!==o||t[3]!==h||t[4]!==_?(s=i()(c().kbd,b,{[c().isGhost]:o,[c().isInverted]:h,[c().isOutline]:_,[c().isDisabled]:m}),t[0]=b,t[1]=m,t[2]=o,t[3]=h,t[4]=_,t[5]=s):s=t[5],t[6]!==d?(n=(0,a.jsx)("span",{children:d}),t[6]=d,t[7]=n):n=t[7],t[8]!==s||t[9]!==n?(r=(0,a.jsx)("kbd",{className:s,children:n}),t[8]=s,t[9]=n,t[10]=r):r=t[10],r}},508280:e=>{e.exports={page:"examples_page__Ek9B3",animateTextShine:"examples_animateTextShine__mkhrH"}},792181:(e,s,n)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/examples/kbd",function(){return n(288280)}])},892860:e=>{e.exports={variantGrid:"kbd_example_variantGrid__5ujVE",stateItem:"kbd_example_stateItem__pm_2z",kbdBox:"kbd_example_kbdBox__sWKtd",

1stateLabel:"kbd_example_stateLabel__WhNE5",sizeRow:"kbd_example_sizeRow__Cwcck",sizeLabel:"kbd_example_sizeLabel__NJ_QT",sizeKbds:"kbd_example_sizeKbds__3RJkM",comboList:"kbd_example_comboList__SHE0q",combo:"kbd_example_combo__DdTxs",animateTextShine:"kbd_example_animateTextShine__I7CV1"}},953504:e=>{e.exports={kbd:"kbd_kbd__IrxDJ",isGhost:"kbd_isGhost__NGjth",isInverted:"kbd_isInverted__crKnK",isOutline:"kbd_isOutline__bbduX",isDisabled:"kbd_isDisabled__fmgE4"}}},e=>{e.O(0,[46593,90636,38792],()=>e(e.s=792181)),_N_E=e.O()}]);