1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[246],{85700:(e,s,r)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/samples/radius",function(){return r(97190)}])},97190:(e,s,r)=>{"use strict";r.r(s),r.d(s,{__N_SSP:()=>c,default:()=>m});var a=r(37876),i=r(26196),d=r(36676),t=r(74003),n=r(40995);let l=e=>{let{name:s,value:r,index:i}=e,d=["bg-wk-aquamarine-100","bg-wk-indigo-100","bg-wk-dusk-100","bg-wk-cambridge-green-100","bg-wk-chili-crisp-red-100"],t=d[i%d.length],n=s.replace("wk-radius-","");return(0,a.jsxs)("div",{className:"rounded border border-wk-primary-ui bg-wk-primary-background p-4",children:[(0,a.jsxs)("div",{className:"wk-text-sm mb-2 font-mono text-wk-primary-text",children:[s,": ",r]}),(0,a.jsx)("div",{style:{width:"100px",height:"100px",borderRadius:r},className:"mb-4 ".concat(t)}),(0,a.jsxs)("div",{className:"space-y-1",children:[(0,a.jsx)("div",{className:"wk-text-sm font-medium text-wk-primary-text",children:"Tailwind usage examples:"}),(0,a.jsxs)("ul",{className:"wk-text-xs list-inside list-disc space-y-1 font-mono text-wk-primary-text",children:[(0,a.jsxs)("li",{children:["rounded-wk-radius-",n]}),(0,a.jsxs)("li",{children:["rounded-t-wk-radius-",n]}),(0,a.jsxs)("li",{children:["rounded-b-wk-radius-",n]})]})]})]})};var c=!0;let m=(0,n.A)(function(){return(0,a.jsxs)("div",{className:"min-h-screen bg-wk-primary-background",children:[(0,a.jsx)(d.A,{}),(0,a.jsx)(t.A,{}),(0,a.jsxs)("main",{className:"mx-auto max-w-7xl p-8",children:[(0,a.jsxs)("header",{className:"mb-12",children:[(0,a.jsx)("h1",{className:"wk-h4 mb-4 font-bold text-wk-primary-text",children:"Border Radius"}),(0,a.jsx)("p",{className:"wk-text-lg max-w-3xl text-wk-primary-text",children:"Our border radius system provides consistent corner rounding across the application. These tokens are used to define the shape of UI elements, from buttons to cards and modals."})]}),(0,a.jsxs)("section",{className:"mb-12",children:[(0,a.jsx)("h2",{className:"wk-h6 mb-4 font-semibold text-wk-primary-text",children:"Border Radius Tokens"}),(0,a.jsx)("div",{className:"grid gap-4 sm:grid-cols-2 lg:grid-cols-3",children:Object.entries(i.radius).map((e,s)=>{let[r,i]=e;return(0,a.jsx)(l,{name:r,value:i,index:s},r)})})]})]})]})})}},e=>{e.O(0,[305,636,593,792],()=>e(e.s=85700)),_N_E=e.O()}]); 2//# sourceMappingURL=radius-817b54a94007ded2.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.