https://what-can-browser-run-do.examples.workers.dev/assets/brand-card-5w5tGAFV.js

1import{i as e,t}from"./jsx-runtime-C_gQudXe.js";import{W as n,n as r}from"./palette-DuQ0Y6wh.js";import{N as i}from"./index-DEZ3WWMO.js";var a=e(n(),1),o=new Map([[`bold`,a.createElement(a.Fragment,null,a.createElement(`path`,{d:`M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z`}))],[`duotone`,a.createElement(a.Fragment,null,a.createElement(`path`,{d:`M232,56V200a16,16,0,0,1-16,16H40a16,16,0,0,1-16-16V56A16,16,0,0,1,40,40H216A16,16,0,0,1,232,56Z`,opacity:`0.2`}),a.createElement(`path`,{d:`M205.66,85.66l-96,96a8,8,0,0,1-11.32,0l-40-40a8,8,0,0,1,11.32-11.32L104,164.69l90.34-90.35a8,8,0,0,1,11.32,11.32Z`}))],[`fill`,a.createElement(a.Fragment,null,a.createElement(`path`,{d:`M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM205.66,85.66l-96,96a8,8,0,0,1-11.32,0l-40-40a8,8,0,0,1,11.32-11.32L104,164.69l90.34-90.35a8,8,0,0,1,11.32,11.32Z`}))],[`light`,a.createElement(a.Fragment,null,a.createElement(`path`,{d:`M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z`}))],[`regular`,a.createElement(a.Fragment,null,a.createElement(`path`,{d:`M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z`}))],[`thin`,a.createElement(a.Fragment,null,a.createElement(`path`,{d:`M226.83,74.83l-128,128a4,4,0,0,1-5.66,0l-56-56a4,4,0,0,1,5.66-5.66L96,194.34,221.17,69.17a4,4,0,1,1,5.66,5.66Z`}))]]),s=a.forwardRef((e,t)=>a.createElement(i,{ref:t,...e,weights:o}));s.displayName=`CheckIcon`;var c=r(`check`,[[`path`,{d:`M20 6 9 17l-5-5`,key:`1gmf2c`}]]),l=r(`chevron-left`,[[`path`,{d:`m15 18-6-6 6-6`,key:`1wnfg3`}]]),u=r(`download`,[[`path`,{d:`M12 15V3`,key:`m9g1x1`}],[`path`,{d:`M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4`,key:`ih7n3h`}],[`path`,{d:`m7 10 5 5 5-5`,key:`brsn70`}]]),d=r(`external-link`,[[`path`,{d:`M15 3h6v6`,key:`1q9fwt`}],[`path`,{d:`M10 14 21 3`,key:`gplh6r`}],[`path`,{d:`M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6`,key:`a6xqqp`}]]),f=r(`file-code-corner`,[[`path`,{d:`M4 12.15V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2h-3.35`,key:`1wthlu`}],[`path`,{d:`M14 2v5a1 1 0 0 0 1 1h5`,key:`wfsgrz`}],[`path`,{d:`m5 16-3 3 3 3`,key:`331omg`}],[`path`,{d:`m9 22 3-3-3-3`,key:`lsp7cz`}]]),p=r(`type`,[[`path`,{d:`M12 4v16`,key:`1654pz`}],[`path`,{d:`M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2`,key:`e0r10z`}],[`path`,{d:`M9 20h6`,key:`s66wpe`}]]),m=r(`zap`,[[`path`,{d:`M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z`,key:`1xq2db`}]]);function h(e){let t=e.trim().replace(/^#/,``).match(/^([0-9a-f]{3}|[0-9a-f]{6})$/i);if(!t)return null;let n=t[1];return n.length===3&&(n=n.split(``).map(e=>e+e).join(``)),{r:parseInt(n.slice(0,2),16),g:parseInt(n.slice(2,4),16),b:parseInt(n.slice(4,6),16)}}function g({r:e,g:t,b:n}){let r=e=>Math.max(0,Math.min(255,Math.round(e))).toString(16).padStart(2,`0`);return`#${r(e)}${r(t)}${r(n)}`.toUpperCase()}function _({r:e,g:t,b:n}){let r=e/255,i=t/255,a=n/255,o=Math.max(r,i,a),s=Math.min(r,i,a),c=o-s,l=(o+s)/2,u=0,d=0;if(c!==0)switch(d=l>.5?c/(2-o-s):c/(o+s),o){case r:u=((i-a)/c+(i<a?6:0))/6;break;case i:u=((a-r)/c+2)/6;break;default:u=((r-i)/c+4)/6}return{h:u*360,s:d,l}}function v({h:e,s:t,l:n}){let r=e/360;if(t===0){let e=n*255;return{r:e,g:e,b:e}}let i=n<.5?n*(1+t):n+t-n*t,a=2*n-i,o=e=>{let t=e;return t<0&&(t+=1),t>1&&--t,t<1/6?a+(i-a)*6*t:t<1/2?i:t<2/3?a+(i-a)*(2/3-t)*6:a};return{r:o(r+1/3)*255,g:o(r)*255,b:o(r-1/3)*255}}function y({r:e,g:t,b:n}){let r=e=>{let t=e/255;return t<=.03928?t/12.92:((t+.055)/1.055)**2.4};return .2126*r(e)+.7152*r(t)+.0722*r(n)}function b(e){let t=h(e);return t?y(t)>.45?`#000000`:`#FFFFFF`:`#000000`}var x=[50,100,200,300,400,500,600,700,800,900,950],S=[.97,.938,.86,.77,.66,.55,.46,.38,.3,.23,.15];function C(e){let t=h(e);if(!t)return null;let n=_(t),r=500,i=1/0;x.forEach((e,t)=>{let a=Math.abs(S[t]-n.l);a<i&&(i=a,r=e)});let a=x.map((e,i)=>{if(e===r)return{stop:e,hex:g(t).toUpperCase()};let a=S[i],o=a>.85?.85:a<.2?.92:1,s=Math.min(1,n.s*o);return{stop:e,hex:g(v({h:n.h,s,l:a})).toUpperCase()}});return{base:g(t).toUpperCase(),baseStop:r,shades:a}}var w=t(),T=new Set([`primary`,`secondary`,`accent`]);function E(){let[e,t]=(0,a.useState)(null);async function n(e){try{await navigator.clipboard.writeText(e),t(e),setTimeout(()=>t(t=>t===e?null:t),1100)}catch{}}return{copied:e,copy:n}}function D({brand:e,className:t}){let n=e.logoUrl||e.icon;return n?(0,w.jsx)(`img`,{src:n,alt:`${e.name??`Brand`} logo`,className:t,onError:e=>{e.currentTarget.style.display=`none`}}):null}function O({brand:e}){let t=e.colors??[],n=e.surface??{},r=t.filter(e=>!T.has((e.name??``).toLowerCase())),i=[n.background?{name:`background`,hex:n.background}:null,n.foreground?{name:`foreground`,hex:n.foreground}:null,n.muted?{name:`muted`,hex:n.muted}:null,n.border?{name:`border`,hex:n.border}

1:null].filter(Boolean),a=e.typeScale??[],o=e.radii??[],s=e.shadows??[],c=e.fonts?.find(e=>e.usage===`headings`)?.name;return(0,w.jsxs)(`div`,{className:`flex flex-col gap-6`,children:[e.tagline?(0,w.jsxs)(`p`,{className:`text-[15px] font-medium text-kumo-default`,children:[`“`,e.tagline,`”`]}):null,e.description?(0,w.jsx)(`p`,{className:`text-sm leading-relaxed text-kumo-subtle`,children:e.description}):null,t.some(e=>T.has((e.name??``).toLowerCase()))?(0,w.jsx)(k,{title:`Color scales`,children:(0,w.jsx)(`div`,{className:`flex flex-col gap-4`,children:t.filter(e=>T.has((e.name??``).toLowerCase())).map(e=>(0,w.jsx)(A,{role:(e.name??`color`).toLowerCase(),hex:e.hex},e.name))})}):null,i.length>0||r.length>0?(0,w.jsx)(k,{title:`Core colors`,children:(0,w.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[i.map(e=>(0,w.jsx)(j,{color:e},`s-${e.name}`)),r.map((e,t)=>(0,w.jsx)(j,{color:e},`${e.hex}-${t}`))]})}):null,e.fonts&&e.fonts.length>0?(0,w.jsx)(k,{title:`Typefaces`,children:(0,w.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:e.fonts.map((e,t)=>(0,w.jsxs)(`div`,{className:`flex items-center gap-2 rounded-xl bg-kumo-tint px-3 py-2 ring-1 ring-kumo-hairline`,children:[(0,w.jsx)(p,{className:`h-4 w-4 text-kumo-subtle`}),(0,w.jsx)(`span`,{className:`text-sm font-medium text-kumo-default`,style:{fontFamily:`${e.name}, sans-serif`},children:e.name}),e.usage?(0,w.jsx)(`span`,{className:`text-xs text-kumo-subtle`,children:e.usage}):null]},`${e.name}-${t}`))})}):null,a.length>0?(0,w.jsx)(k,{title:`Type scale`,children:(0,w.jsx)(`div`,{className:`rounded-xl bg-kumo-tint px-4 ring-1 ring-kumo-hairline`,children:a.map(e=>(0,w.jsxs)(`div`,{className:`flex items-baseline justify-between gap-4 border-b border-kumo-hairline py-2.5 last:border-0`,children:[(0,w.jsx)(`span`,{className:`truncate text-kumo-default`,style:{fontSize:`min(${e.fontSize}, 2.25rem)`,fontWeight:e.fontWeight??void 0,fontFamily:`${e.fontFamily??c??`inherit`}, sans-serif`,lineHeight:1.1},children:e.name}),(0,w.jsxs)(`span`,{className:`tnum shrink-0 text-xs text-kumo-subtle`,children:[e.fontSize,e.fontWeight?` · ${e.fontWeight}`:``]})]},e.name))})}):null,o.length>0?(0,w.jsx)(k,{title:`Radius`,children:(0,w.jsx)(`div`,{className:`flex flex-wrap gap-2`,children:o.map(e=>(0,w.jsxs)(`div`,{className:`flex items-center gap-6`,children:[(0,w.jsx)(`span`,{className:`img-outline h-9 w-9 bg-kumo-fill`,style:{borderRadius:e.value}}),(0,w.jsxs)(`span`,{className:`text-left`,children:[(0,w.jsx)(`span`,{className:`block text-xs font-medium text-kumo-default`,children:e.name}),(0,w.jsx)(`span`,{className:`tnum block text-xs text-kumo-subtle`,children:e.value})]})]},e.name))})}):null,s.length>0?(0,w.jsx)(k,{title:`Elevation`,children:(0,w.jsx)(`div`,{className:`flex flex-wrap gap-3`,children:s.map(e=>(0,w.jsx)(`div`,{className:`grid h-16 w-24 place-items-center rounded-xl bg-kumo-base text-xs font-medium text-kumo-subtle`,style:{boxShadow:e.value},title:e.value,children:e.name},e.name))})}):null,e.button?.background?(0,w.jsx)(k,{title:`Primary button`,children:(0,w.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,w.jsx)(`button`,{type:`button`,style:{backgroundColor:e.button.background,color:e.button.color??`#fff`,borderRadius:e.button.borderRadius??`8px`,paddingTop:e.button.paddingY??`8px`,paddingBottom:e.button.paddingY??`8px`,paddingLeft:e.button.paddingX??`16px`,paddingRight:e.button.paddingX??`16px`,fontSize:e.button.fontSize??void 0,fontWeight:e.button.fontWeight??void 0},children:`Get started`}),(0,w.jsx)(`span`,{className:`tnum text-xs text-kumo-subtle`,children:e.button.background})]})}):null,e.ogImage?(0,w.jsx)(k,{title:`Social card`,children:(0,w.jsx)(`img`,{src:e.ogImage,alt:`${e.name??`Brand`} social share image`,loading:`lazy`,className:`img-outline aspect-[1200/630] w-full rounded-xl bg-kumo-tint object-cover`,onError:e=>{e.currentTarget.style.display=`none`}})}):null]})}function k({title:e,children:t}){return(0,w.jsxs)(`section`,{children:[(0,w.jsx)(`h4`,{className:`mb-2.5 text-xs font-semibold tracking-wide text-kumo-subtle uppercase`,children:e}),t]})}function A({role:e,hex:t}){let n=C(t),{copied:r,copy:i}=E();return n?(0,w.jsxs)(`div`,{children:[(0,w.jsxs)(`div`,{className:`mb-1.5 flex items-center justify-between`,children:[(0,w.jsx)(`span`,{className:`text-xs font-medium text-kumo-default capitalize`,children:e}),(0,w.jsx)(`span`,{className:`tnum text-xs text-kumo-subtle`,children:n.base})]}),(0,w.jsx)(`div`,{className:`flex overflow-hidden rounded-lg ring-1 ring-kumo-hairline`,children:n.shades.map(t=>{let a=b(t.hex),o=t.stop===n.baseStop;return(0,w.jsx)(`button`,{type:`button`,onClick:()=>i(t.hex),title:`${e}-${t.stop} · ${t.hex}`,className:`relative flex-1 cursor-pointer transition-[flex] active:flex-[1.3]`,style:{backgroundColor:t.hex},children:(0,w.jsxs)(`span`,{className:`flex h-12 flex-col items-center justify-center gap-1`,style:{color:a},children:[(0,w.jsx)(`span`,{className:`tnum text-[10px] font-semibold opacity-90`,children:r===t.hex?`✓`:t.stop}),o?(0,w.jsx)(`span`,{className:`h-1 w-1 rounded-full`,style:{backgroundColor:a}}):null]})},t.stop)})})]}):null}function j({color:e}){let[t,n]=(0,a.useState)(!1);async function r(){try{await navigator.clipboard.writeText(e.hex),n(!0),setTimeout(()=>n(!1),1200)}catch{}}return(0,w.jsxs)(`button`,{type:`button`,onClick:r,className:`group flex items-center gap-2.5 rounded-xl bg-kumo-tint py-1.5 pr-3 pl-1.5 ring-1 ring-kumo-hairline transition-transform active:scale-[0.96]`,title:`Copy ${e.hex}`,children:[(0,w.jsx)(`span`,{className:`img-outline h-9 w-9 rounded-lg`,style:{backgroundColor:e.hex}}),(0,w.jsxs)(`span`,{className:`text-left`,children:[e.name?(0,w.jsx)(`span`,{className:`block text-xs font-medium text-kumo-default capitalize`,children:e.name}):null,(0,w.jsx)(`span`,{className:`tnum flex items-center gap-1 text-xs text-kumo-subtle uppercase`,children:t?(0,w.jsxs)(w.Fragment,{children:[(0,w.jsx)(c,{className:`h-3 w-3 text-emerald-500`}),` copied`]}):e.hex})]})]})}export{d as a,c,f as i,s as l,O as n,u as o,m as r,l as s,D as t};