CINXE.COM
Github
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><link href="/big-design/favicon.svg" rel="icon" type="image/svg+xml" class="jsx-4019840177"/><title class="jsx-4019840177">BigDesign</title><meta content="/big-design/og-image.png" property="og:image" class="jsx-4019840177"/><link href="https://fonts.googleapis.com" rel="preconnect" class="jsx-4019840177"/><link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect" class="jsx-4019840177"/><link rel="preload" href="/big-design/_next/static/media/logo-with-text.e21d3669.svg" as="image" fetchpriority="high"/><meta name="next-head-count" content="9"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/big-design/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js"></script><script src="/big-design/_next/static/chunks/webpack-1b2dfdccf2200e8a.js" defer=""></script><script src="/big-design/_next/static/chunks/framework-e7c7420b044eb910.js" defer=""></script><script src="/big-design/_next/static/chunks/main-a417af770db1b893.js" defer=""></script><script src="/big-design/_next/static/chunks/pages/_app-8357c4e81bc7a2dd.js" defer=""></script><script src="/big-design/_next/static/chunks/b9ef3c76-3093263aa3957be4.js" defer=""></script><script src="/big-design/_next/static/chunks/6bd07e6a-09bba16be7266586.js" defer=""></script><script src="/big-design/_next/static/chunks/4fca2c30-5ac8204cf351e150.js" defer=""></script><script src="/big-design/_next/static/chunks/999671ce-169a017c298075ea.js" defer=""></script><script src="/big-design/_next/static/chunks/1703-7deae201e23823eb.js" defer=""></script><script src="/big-design/_next/static/chunks/9105-2decc3ba13812403.js" defer=""></script><script src="/big-design/_next/static/chunks/9076-72097db7d50821c0.js" defer=""></script><script src="/big-design/_next/static/chunks/3975-b518d274d6eab34c.js" defer=""></script><script src="/big-design/_next/static/chunks/pages/file-uploader-40cbffaa3536d729.js" defer=""></script><script src="/big-design/_next/static/c2CtNX9kz9-sAtL5xGy_Q/_buildManifest.js" defer=""></script><script src="/big-design/_next/static/c2CtNX9kz9-sAtL5xGy_Q/_ssgManifest.js" defer=""></script><style id="__jsx-4019840177">body{min-height:100vh;background-color:#F6F7FC}</style><style data-styled="" data-styled-version="5.3.11">html{line-height:1.15;-webkit-text-size-adjust:100%;text-size-adjust:100%;}/*!sc*/ body{margin:0;}/*!sc*/ main{display:block;}/*!sc*/ h1{font-size:2em;margin:0.67em 0;}/*!sc*/ hr{box-sizing:content-box;height:0;overflow:visible;}/*!sc*/ pre{font-family:monospace,monospace;font-size:1em;}/*!sc*/ a{background-color:transparent;}/*!sc*/ abbr[title]{border-bottom:none;-webkit-text-decoration:underline;text-decoration:underline;}/*!sc*/ b,strong{font-weight:bolder;}/*!sc*/ code,kbd,samp{font-family:monospace,monospace;font-size:1em;}/*!sc*/ small{font-size:80%;}/*!sc*/ sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}/*!sc*/ sub{bottom:-0.25em;}/*!sc*/ sup{top:-0.5em;}/*!sc*/ img{border-style:none;}/*!sc*/ button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}/*!sc*/ button,input{overflow:visible;}/*!sc*/ button,select{text-transform:none;}/*!sc*/ button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}/*!sc*/ button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}/*!sc*/ button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;}/*!sc*/ fieldset{padding:0.35em 0.625em 0.75em;}/*!sc*/ legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}/*!sc*/ progress{vertical-align:baseline;}/*!sc*/ textarea{overflow:auto;}/*!sc*/ [type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;}/*!sc*/ [type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}/*!sc*/ [type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}/*!sc*/ [type="search"]::-webkit-search-decoration{-webkit-appearance:none;}/*!sc*/ ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}/*!sc*/ details{display:block;}/*!sc*/ summary{display:list-item;}/*!sc*/ template{display:none;}/*!sc*/ [hidden]{display:none;}/*!sc*/ abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}/*!sc*/ body{font-family:"Source Sans Pro","Helvetica Neue",Arial,sans-serif;}/*!sc*/ data-styled.g1[id="sc-global-MjHVH1"]{content:"sc-global-MjHVH1,"}/*!sc*/ .WZeNJ{vertical-align:middle;color:#313440;height:1.5rem;width:1.5rem;}/*!sc*/ .emfseH{vertical-align:middle;height:1.5rem;width:1.5rem;}/*!sc*/ .hmYaOT{vertical-align:middle;color:#5E637A;height:1.5rem;width:1.5rem;}/*!sc*/ .kssbwd{vertical-align:middle;color:#2AAB3F;height:1.5rem;width:1.5rem;}/*!sc*/ data-styled.g2[id="base__StyledIcon-sc-a9u0e1-0"]{content:"WZeNJ,emfseH,hmYaOT,kssbwd,"}/*!sc*/ .koRBsY{margin-left:auto;margin-right:auto;box-sizing:border-box;}/*!sc*/ @media (min-width:720px){.koRBsY{padding-left:1rem;padding-right:1rem;}}/*!sc*/ .heLZwM{box-sizing:border-box;}/*!sc*/ @media (min-width:720px){.heLZwM{padding-top:2rem;padding-bottom:2rem;}}/*!sc*/ .buMTzK{box-sizing:border-box;background-color:#F6F7FC;border-radius:0.25rem;box-shadow:0px 1px 6px rgba(49,52,64,0.2);}/*!sc*/ @media (min-width:0px){.buMTzK{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}/*!sc*/ @media (min-width:720px){.buMTzK{display:block;}}/*!sc*/ @media (min-width:0px){.buMTzK{padding-top:1rem;padding-bottom:1rem;}}/*!sc*/ @media (min-width:720px){.buMTzK{padding-top:0;padding-bottom:0;}}/*!sc*/ @media (min-width:0px){.buMTzK{padding-left:1rem;padding-right:1rem;}}/*!sc*/ @media (min-width:720px){.buMTzK{padding-left:0;padding-right:0;}}/*!sc*/ .eIPFYx{box-sizing:border-box;}/*!sc*/ .flvPv{box-sizing:border-box;border-radius:0.25rem;box-shadow:0px 2px 12px rgba(49,52,64,0.2);border-top:1px solid #D9DCE9;border-bottom:1px solid #D9DCE9;}/*!sc*/ .ittXGm{box-sizing:border-box;}/*!sc*/ @media (min-width:0px){.ittXGm{margin-top:0.25rem;}}/*!sc*/ @media (min-width:720px){.ittXGm{margin-top:1.5rem;}}/*!sc*/ @media (min-width:0px){.ittXGm{margin-left:1rem;margin-right:1rem;}}/*!sc*/ @media (min-width:720px){.ittXGm{margin-left:0;margin-right:0;}}/*!sc*/ .lnPWxc{padding:0.5rem;box-sizing:border-box;}/*!sc*/ .LfETB{margin-top:1rem;margin-bottom:1rem;box-sizing:border-box;}/*!sc*/ @media (min-width:0px){.LfETB{margin-left:0.75rem;margin-right:0.75rem;}}/*!sc*/ @media (min-width:720px){.LfETB{margin-left:2rem;margin-right:2rem;}}/*!sc*/ @media (min-width:720px){.LfETB{padding-top:1.25rem;}}/*!sc*/ .kKyUSp{margin-bottom:1rem;box-sizing:border-box;background-color:#FFFFFF;border-radius:0.25rem;box-shadow:0px 1px 6px rgba(49,52,64,0.2);}/*!sc*/ @media (min-width:0px){.kKyUSp{padding:1rem;}}/*!sc*/ @media (min-width:720px){.kKyUSp{padding:1.5rem;}}/*!sc*/ .gZUsCT{margin-top:1rem;box-sizing:border-box;}/*!sc*/ .eFdwFm{box-sizing:border-box;border:1px solid #D9DCE9;}/*!sc*/ .iPGfeD{padding:1rem;box-sizing:border-box;background-color:#FFFFFF;border-bottom:1px solid #D9DCE9;}/*!sc*/ .gOmLsB{box-sizing:border-box;background-color:#ECEEF5;border-bottom:1px solid #D9DCE9;}/*!sc*/ .kerrQ{box-sizing:border-box;border-left:1px solid #D9DCE9;}/*!sc*/ .gfnS{box-sizing:border-box;z-index:1060;}/*!sc*/ .gpXGlR{margin-top:0.5rem;box-sizing:border-box;}/*!sc*/ .ZlwvB{margin-right:1.25rem;box-sizing:border-box;}/*!sc*/ data-styled.g3[id="sc-12d4dbf-0"]{content:"koRBsY,heLZwM,buMTzK,eIPFYx,flvPv,ittXGm,lnPWxc,LfETB,kKyUSp,gZUsCT,eFdwFm,iPGfeD,gOmLsB,kerrQ,gfnS,gpXGlR,ZlwvB,"}/*!sc*/ .hKwTli{-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media (min-width:0px){.hKwTli{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}}/*!sc*/ @media (min-width:0px){.hKwTli{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}/*!sc*/ @media (min-width:720px){.hKwTli{display:block;}}/*!sc*/ .cMwWYy{-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media (min-width:0px){.cMwWYy{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}/*!sc*/ @media (min-width:720px){.cMwWYy{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}}/*!sc*/ .kWYuMh{-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:.5rem;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ .cCntAE{-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ .bKXHEd{-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media (min-width:0px){.bKXHEd{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}/*!sc*/ @media (min-width:720px){.bKXHEd{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}}/*!sc*/ .ghviGs{-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ .fithVi{-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ @media (min-width:0px){.fithVi{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}/*!sc*/ @media (min-width:720px){.fithVi{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}}/*!sc*/ data-styled.g8[id="sc-3a1154b6-0"]{content:"hKwTli,cMwWYy,kWYuMh,cCntAE,bKXHEd,ghviGs,fithVi,"}/*!sc*/ .hNmeKU{-webkit-transition:all 150ms ease-out;transition:all 150ms ease-out;-webkit-transition-property:background-color,border-color,box-shadow,color;transition-property:background-color,border-color,box-shadow,color;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #D9DCE9;border-radius:0.25rem;color:#FFFFFF;cursor:pointer;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex:none;-ms-flex:none;flex:none;font-size:1rem;font-weight:400;height:2.25rem;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;line-height:2rem;outline:none;padding:0 1rem;position:relative;text-align:center;-webkit-text-decoration:none;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;width:100%;background-color:transparent;border-color:transparent;color:#3C64F4;}/*!sc*/ .hNmeKU:focus{outline:none;}/*!sc*/ .hNmeKU[disabled]{border-color:#D9DCE9;pointer-events:none;}/*!sc*/ .hNmeKU + .bd-button{margin-top:0.5rem;}/*!sc*/ @media (min-width:720px){.hNmeKU + .bd-button{margin-top:0;margin-left:0.5rem;}}/*!sc*/ @media (min-width:720px){.hNmeKU{width:auto;padding:0;min-width:2.25rem;}}/*!sc*/ .hNmeKU:active{background-color:#DBE3FE;}/*!sc*/ .hNmeKU:focus{box-shadow:0 0 0 0.25rem #DBE3FE;}/*!sc*/ .hNmeKU:hover:not(:active){background-color:#F0F3FF;}/*!sc*/ .hNmeKU[disabled]{border-color:transparent;color:#D9DCE9;}/*!sc*/ .qmsNW{-webkit-transition:all 150ms ease-out;transition:all 150ms ease-out;-webkit-transition-property:background-color,border-color,box-shadow,color;transition-property:background-color,border-color,box-shadow,color;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #D9DCE9;border-radius:0.25rem;color:#FFFFFF;cursor:pointer;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex:none;-ms-flex:none;flex:none;font-size:1rem;font-weight:400;height:2.25rem;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;line-height:2rem;outline:none;padding:0 1rem;position:relative;text-align:center;-webkit-text-decoration:none;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;width:100%;background-color:transparent;border-color:transparent;color:#3C64F4;}/*!sc*/ .qmsNW.qmsNW{margin-right:0.5rem;}/*!sc*/ .qmsNW:focus{outline:none;}/*!sc*/ .qmsNW[disabled]{border-color:#D9DCE9;pointer-events:none;}/*!sc*/ .qmsNW + .bd-button{margin-top:0.5rem;}/*!sc*/ @media (min-width:720px){.qmsNW + .bd-button{margin-top:0;margin-left:0.5rem;}}/*!sc*/ @media (min-width:720px){.qmsNW{width:auto;}}/*!sc*/ .qmsNW:active{background-color:#DBE3FE;}/*!sc*/ .qmsNW:focus{box-shadow:0 0 0 0.25rem #DBE3FE;}/*!sc*/ .qmsNW:hover:not(:active){background-color:#F0F3FF;}/*!sc*/ .qmsNW[disabled]{border-color:transparent;color:#D9DCE9;}/*!sc*/ data-styled.g9[id="sc-1352b694-0"]{content:"hNmeKU,qmsNW,"}/*!sc*/ .cySnWD{-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:inline-grid;grid-auto-flow:column;grid-gap:0.5rem;}/*!sc*/ data-styled.g10[id="sc-1352b694-1"]{content:"cySnWD,"}/*!sc*/ .qTiwc{grid-area:nav;}/*!sc*/ .bKQwSy{grid-area:main;}/*!sc*/ data-styled.g13[id="sc-b6da41a7-0"]{content:"qTiwc,bKQwSy,"}/*!sc*/ .hXDjEj{gap:0;display:grid;}/*!sc*/ @media (min-width:0px){.hXDjEj{grid-template: "nav" 5rem "main" min-content / 100%;}}/*!sc*/ @media (min-width:720px){.hXDjEj{grid-template: "nav main" 1fr / minmax(13.125rem,18.75rem) 1fr;}}/*!sc*/ data-styled.g14[id="sc-7da2c49d-0"]{content:"hXDjEj,"}/*!sc*/ .lhllpz{-webkit-transition:all 70ms ease-out;transition:all 70ms ease-out;-webkit-transition-property:color;transition-property:color;color:#3C64F4;cursor:pointer;font-size:1rem;font-weight:400;-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .lhllpz:active{color:#0024A6;}/*!sc*/ .lhllpz:hover:not(:active){color:#0024A6;}/*!sc*/ data-styled.g15[id="sc-d0458d4a-0"]{content:"lhllpz,"}/*!sc*/ .dLrqcl{color:#313440;margin:0 0 1rem;font-size:2rem;font-weight:300;line-height:2.5rem;margin:0 0 1.5rem;}/*!sc*/ data-styled.g17[id="sc-218b28a9-1"]{content:"dLrqcl,"}/*!sc*/ .ifCyRn{color:#313440;margin:0 0 1rem;font-size:1.5rem;font-weight:400;line-height:2rem;margin-bottom:0;}/*!sc*/ data-styled.g18[id="sc-218b28a9-2"]{content:"ifCyRn,"}/*!sc*/ .eZqWNg{color:#313440;margin:0 0 1rem;font-size:1rem;font-weight:600;line-height:1.5rem;margin:0 0 0.5rem;}/*!sc*/ data-styled.g20[id="sc-218b28a9-4"]{content:"eZqWNg,"}/*!sc*/ .fcHZuG{color:#313440;margin:0 0 1rem;font-size:1rem;font-weight:400;line-height:1.5rem;}/*!sc*/ .fcHZuG:last-child{margin-bottom:0;}/*!sc*/ .gTNfIX{color:#313440;margin:0 0 1rem;font-size:1rem;font-weight:400;line-height:1.5rem;font-weight:600;}/*!sc*/ .gTNfIX:last-child{margin-bottom:0;}/*!sc*/ data-styled.g21[id="sc-218b28a9-5"]{content:"fcHZuG,gTNfIX,"}/*!sc*/ .gVIGoi{color:#313440;margin:0 0 1rem;color:#5E637A;font-size:0.875rem;font-weight:400;line-height:1.25rem;margin:0 0 0.75rem;}/*!sc*/ .gVIGoi:last-child{margin-bottom:0;}/*!sc*/ .eimaSR{color:#313440;margin:0 0 1rem;color:#5E637A;font-size:0.875rem;font-weight:400;line-height:1.25rem;margin:0 0 0.75rem;margin-left:0.75rem;margin-right:0.75rem;}/*!sc*/ .eimaSR:last-child{margin-bottom:0;}/*!sc*/ .biIcFC{color:#313440;margin:0 0 1rem;color:#5E637A;font-size:0.875rem;font-weight:400;line-height:1.25rem;margin:0 0 0.75rem;margin-top:0.5rem;}/*!sc*/ .biIcFC:last-child{margin-bottom:0;}/*!sc*/ data-styled.g22[id="sc-218b28a9-6"]{content:"gVIGoi,eimaSR,biIcFC,"}/*!sc*/ .lTGlb{color:#313440;font-size:1rem;font-weight:400;line-height:1.5rem;padding-left:1.5rem;list-style-type:none;margin:0;padding:0;}/*!sc*/ @media (min-width:720px){.lTGlb{-webkit-column-count:1;column-count:1;-webkit-column-gap:normal;column-gap:normal;}}/*!sc*/ .eLiXKV{color:#313440;font-size:1rem;font-weight:400;line-height:1.5rem;padding-left:1.5rem;}/*!sc*/ @media (min-width:720px){.eLiXKV{-webkit-column-count:1;column-count:1;-webkit-column-gap:normal;column-gap:normal;}}/*!sc*/ data-styled.g29[id="sc-228d67c6-1"]{content:"lTGlb,eLiXKV,"}/*!sc*/ .lcyNul{display:block;line-height:1.75rem;}/*!sc*/ @media (min-width:720px){.lcyNul{display:inline-block;line-height:1.5rem;}}/*!sc*/ data-styled.g30[id="sc-50275482-0"]{content:"lcyNul,"}/*!sc*/ .bgZsLA{cursor:pointer;}/*!sc*/ .bgZsLA img{margin:0 auto;max-width:100%;}/*!sc*/ .bgZsLA p{display:none;text-align:right;margin-right:1rem;}/*!sc*/ @media (min-width:720px){.bgZsLA p{display:block;}}/*!sc*/ data-styled.g31[id="sc-37d69e8e-0"]{content:"bgZsLA,"}/*!sc*/ .fUJlIf{-webkit-align-self:auto;-ms-flex-item-align:auto;align-self:auto;-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-order:0;-ms-flex-order:0;order:0;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}/*!sc*/ .juFVYe{-webkit-align-self:auto;-ms-flex-item-align:auto;align-self:auto;-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-order:0;-ms-flex-order:0;order:0;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}/*!sc*/ data-styled.g32[id="sc-2b88929e-0"]{content:"fUJlIf,juFVYe,"}/*!sc*/ @media (min-width:720px){.laobSg{display:none;}}/*!sc*/ data-styled.g33[id="sc-286b6187-0"]{content:"laobSg,"}/*!sc*/ .jvqsMD{border-radius:0.25rem;box-shadow:0px 2px 12px rgba(49,52,64,0.2);background-color:#FFFFFF;border-bottom:1px solid #D9DCE9;border-radius:0;border-top:1px solid #D9DCE9;display:none;height:16rem;left:0;overflow:auto;position:absolute;top:100%;width:100%;z-index:1020;}/*!sc*/ @media (min-width:720px){.jvqsMD{border:0;box-shadow:none;display:block;height:auto;position:static;background-color:transparent;}}/*!sc*/ data-styled.g34[id="sc-286b6187-1"]{content:"jvqsMD,"}/*!sc*/ .iWeQfW{position:-webkit-sticky;position:sticky;top:0;height:100vh;width:100%;}/*!sc*/ data-styled.g35[id="sc-4dd0e9a1-0"]{content:"iWeQfW,"}/*!sc*/ .jWCtqN{overflow:hidden;height:100%;}/*!sc*/ data-styled.g36[id="sc-4dd0e9a1-1"]{content:"jWCtqN,"}/*!sc*/ .dYqqWW{height:100%;width:100%;}/*!sc*/ data-styled.g37[id="sc-4dd0e9a1-2"]{content:"dYqqWW,"}/*!sc*/ .uCQWd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:none;padding:0.0625rem;border-radius:0.25rem;-webkit-transition:background-color 160ms ease-out;transition:background-color 160ms ease-out;width:0.5rem;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background-color:rgba(49,52,64,0.1);}/*!sc*/ data-styled.g38[id="sc-4dd0e9a1-3"]{content:"uCQWd,"}/*!sc*/ .ciqzLB{border-radius:0;}/*!sc*/ @media (min-width:720px){.ciqzLB{border-radius:0.25rem;}}/*!sc*/ data-styled.g41[id="sc-93a30afd-0"]{content:"ciqzLB,"}/*!sc*/ .eXgsEX{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}/*!sc*/ .eXgsEX ~ .bd-button{width:auto;margin-top:0;}/*!sc*/ data-styled.g42[id="sc-93a30afd-1"]{content:"eXgsEX,"}/*!sc*/ .cxnmIq{border-radius:0.25rem;box-shadow:0px 1px 6px rgba(49,52,64,0.2);height:100%;position:relative;overflow:hidden;}/*!sc*/ data-styled.g62[id="sc-fa563855-0"]{content:"cxnmIq,"}/*!sc*/ .juZVME{border-radius:0.25rem;box-shadow:0px 1px 6px rgba(49,52,64,0.2);background-color:#FFFFFF;color:#313440;margin:0;max-height:15.625rem;outline:none;overflow-y:auto;padding:0.5rem 0;z-index:1060;}/*!sc*/ data-styled.g63[id="sc-fa563855-1"]{content:"juZVME,"}/*!sc*/ .bENMgr{position:relative;}/*!sc*/ data-styled.g64[id="sc-c44cdc32-0"]{content:"bENMgr,"}/*!sc*/ .fKFien{background-color:#DBE3FE;}/*!sc*/ data-styled.g116[id="sc-2a0c2650-0"]{content:"fKFien,"}/*!sc*/ .idxPCs{position:absolute;visibility:hidden;z-index:-1070;}/*!sc*/ data-styled.g117[id="sc-2a0c2650-1"]{content:"idxPCs,"}/*!sc*/ .cdXfBB{background-color:#FFFFFF;border-bottom:1px solid #D9DCE9;border-top:1px solid #D9DCE9;box-sizing:border-box;color:#313440;font-size:1rem;padding:0.75rem;white-space:nowrap;}/*!sc*/ .cdXfBB:first-of-type{padding-left:1.5rem;}/*!sc*/ .cdXfBB:last-of-type{padding-right:1.5rem;}/*!sc*/ .hAoeUi{background-color:#FFFFFF;border-bottom:1px solid #D9DCE9;border-top:1px solid #D9DCE9;box-sizing:border-box;color:#313440;font-size:1rem;padding:0.75rem;white-space:nowrap;width:50%;}/*!sc*/ .hAoeUi:first-of-type{padding-left:1.5rem;}/*!sc*/ .hAoeUi:last-of-type{padding-right:1.5rem;}/*!sc*/ data-styled.g124[id="sc-48fc43a5-0"]{content:"cdXfBB,hAoeUi,"}/*!sc*/ .iqqGRm{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;}/*!sc*/ data-styled.g126[id="sc-48fc43a5-2"]{content:"iqqGRm,"}/*!sc*/ .gZzqse{background-color:#FFFFFF;box-sizing:border-box;color:#313440;font-size:1rem;padding:0.75rem;border-bottom:1px solid #D9DCE9;}/*!sc*/ .gZzqse:first-of-type{padding-left:1.5rem;}/*!sc*/ .gZzqse:last-of-type{padding-right:1.5rem;}/*!sc*/ .dDxSsd{background-color:#FFFFFF;box-sizing:border-box;color:#313440;font-size:1rem;padding:0.75rem;border-bottom:1px solid #D9DCE9;width:50%;}/*!sc*/ .dDxSsd:first-of-type{padding-left:1.5rem;}/*!sc*/ .dDxSsd:last-of-type{padding-right:1.5rem;}/*!sc*/ data-styled.g127[id="sc-7811a1c9-0"]{content:"gZzqse,dDxSsd,"}/*!sc*/ .eERKuz{-webkit-transition:all 150ms ease-out;transition:all 150ms ease-out;-webkit-transition-property:background-color;transition-property:background-color;display:table-row;background-color:transparent;}/*!sc*/ .eERKuz:hover{background-color:#F6F7FC;}/*!sc*/ data-styled.g129[id="sc-b8bb177c-0"]{content:"eERKuz,"}/*!sc*/ .igZfJj{margin:0;max-width:100%;overflow-x:auto;white-space:nowrap;margin-bottom:0;}/*!sc*/ @media (min-width:720px){.igZfJj{white-space:normal;}}/*!sc*/ data-styled.g130[id="sc-d5cd1ead-0"]{content:"igZfJj,"}/*!sc*/ .dANuiw{border-color:transparent;border-spacing:0;color:#313440;text-align:left;width:100%;}/*!sc*/ data-styled.g131[id="sc-d5cd1ead-1"]{content:"dANuiw,"}/*!sc*/ .jtamvM{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}/*!sc*/ data-styled.g169[id="sc-bcd98922-0"]{content:"jtamvM,"}/*!sc*/ .kxoA-DP{background-color:#313440;color:#DB3643;font-size:0.875rem;margin-bottom:2rem;margin-top:2rem;padding:0.75rem;}/*!sc*/ data-styled.g170[id="sc-ddc6a9be-0"]{content:"kxoA-DP,"}/*!sc*/ .drsGpI{color:#313440;white-space:nowrap;color:#0024A6;}/*!sc*/ .AibSD{color:#313440;white-space:nowrap;background-color:#FFF0BF;padding:0.25rem;}/*!sc*/ .kiAuZK{color:#313440;white-space:nowrap;}/*!sc*/ data-styled.g171[id="sc-1d19ed82-0"]{content:"drsGpI,AibSD,kiAuZK,"}/*!sc*/ </style><style data-href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600&display=swap">@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_Akw.woff) format('woff')}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zAkw.woff) format('woff')}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK3dSBYKcSV-LCoeQqfX1RYOo3aPA.woff) format('woff')}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rAkw.woff) format('woff')}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wmhdu3cOWxy40.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wkxdu3cOWxy40.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wmxdu3cOWxy40.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wlBdu3cOWxy40.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wmBdu3cOWxy40.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wmRdu3cOWxy40.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:200;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wlxdu3cOWxw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmhdu3cOWxy40.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwkxdu3cOWxy40.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmxdu3cOWxy40.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlBdu3cOWxy40.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmBdu3cOWxy40.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwmRdu3cOWxy40.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlxdu3cOWxw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lujVj9_mf.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lujVj9_mf.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNK7lujVj9_mf.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK3dSBYKcSV-LCoeQqfX1RYOo3qO67lujVj9_mf.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK3dSBYKcSV-LCoeQqfX1RYOo3qN67lujVj9_mf.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNq7lujVj9_mf.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7lujVj9w.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmhdu3cOWxy40.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwkxdu3cOWxy40.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmxdu3cOWxy40.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlBdu3cOWxy40.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmBdu3cOWxy40.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmRdu3cOWxy40.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/sourcesanspro/v22/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlxdu3cOWxw.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}</style></head><body><div id="__next"><div style="min-height:100vh;max-width:1400px;position:relative" class="sc-12d4dbf-0 koRBsY sc-7da2c49d-0 hXDjEj"><nav class="sc-12d4dbf-0 heLZwM sc-b6da41a7-0 qTiwc sc-4dd0e9a1-0 iWeQfW"><div dir="ltr" class="sc-4dd0e9a1-1 jWCtqN" style="position:relative;--radix-scroll-area-corner-width:0px;--radix-scroll-area-corner-height:0px"><style> [data-radix-scroll-area-viewport] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } [data-radix-scroll-area-viewport]::-webkit-scrollbar { display: none; } :where([data-radix-scroll-area-viewport]) { display: flex; flex-direction: column; align-items: stretch; } :where([data-radix-scroll-area-content]) { flex-grow: 1; } </style><div data-radix-scroll-area-viewport="" class="sc-4dd0e9a1-2 dYqqWW" style="overflow-x:hidden;overflow-y:hidden"><div data-radix-scroll-area-content=""><div display="[object Object]" style="position:relative" class="sc-12d4dbf-0 buMTzK sc-3a1154b6-0 hKwTli"><a style="text-decoration:none" href="/big-design"><div class="sc-37d69e8e-0 bgZsLA"><img alt="BigDesign Logo" fetchpriority="high" width="160" height="41" decoding="async" data-nimg="1" style="color:transparent" src="/big-design/_next/static/media/logo-with-text.e21d3669.svg"/><p class="sc-218b28a9-6 gVIGoi">v<!-- -->1.5.0</p></div></a><div style="display:flex;align-items:center" class="sc-12d4dbf-0 eIPFYx sc-2b88929e-0 fUJlIf"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 cMwWYy"><div class="sc-12d4dbf-0 eIPFYx sc-2b88929e-0 fUJlIf sc-286b6187-0 laobSg"><button class="sc-1352b694-0 hNmeKU bd-button"><span class="sc-1352b694-1 cySnWD"><svg aria-hidden="true" fill="currentColor" height="24" stroke="currentColor" stroke-width="0" viewBox="0 0 24 24" width="24" color="secondary70" class="base__StyledIcon-sc-a9u0e1-0 WZeNJ"><path d="M0 0h24v24H0z" fill="none"></path><path d="M4 18h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1m0-5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1M3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1"></path></svg></span></button></div><div class="sc-12d4dbf-0 flvPv sc-2b88929e-0 fUJlIf sc-286b6187-1 jvqsMD"><div class="sc-12d4dbf-0 ittXGm"><h4 class="sc-218b28a9-4 eZqWNg">Introduction</h4><ul class="sc-228d67c6-1 lTGlb"><li><a href="/big-design" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Getting Started</a></li><li><a href="https://codesandbox.io/p/devbox/github/bigcommerce/big-design/tree/%40bigcommerce/examples%401.0.6/packages/examples" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">CodeSandbox Example</a></li><div class="sc-12d4dbf-0 lnPWxc"></div><li><a href="https://github.com/bigcommerce/big-design" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 kWYuMh"><svg fill="currentColor" stroke="currentColor" stroke-width="0" viewBox="0 0 20 20" class="base__StyledIcon-sc-a9u0e1-0 emfseH"><title>Github</title><path clip-rule="evenodd" d="M10 0C4.475 0 0 4.475 0 10a9.994 9.994 0 006.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.287-.6-1.175-1.025-1.412-.35-.188-.85-.65-.013-.663.788-.013 1.35.725 1.538 1.025.9 1.512 2.337 1.087 2.912.825.088-.65.35-1.088.638-1.338-2.225-.25-4.55-1.112-4.55-4.937 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.274.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 012.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0020 10c0-5.525-4.475-10-10-10z" fill-rule="evenodd"></path></svg> Github</div></a></li></ul></div><div class="sc-12d4dbf-0 ittXGm"><h4 class="sc-218b28a9-4 eZqWNg">Foundations</h4><ul class="sc-228d67c6-1 lTGlb"><li><a href="/big-design/colors" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Colors</a></li><li><a href="/big-design/icons" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Icons</a></li><li><a href="/big-design/spacing" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Spacing</a></li><li><a href="/big-design/typography" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Typography</a></li></ul></div><div class="sc-12d4dbf-0 ittXGm"><h4 class="sc-218b28a9-4 eZqWNg">Layout</h4><ul class="sc-228d67c6-1 lTGlb"><li><a href="/big-design/accordion-panel" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Accordion Panel</a></li><li><a href="/big-design/collapse" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Collapse</a></li><li><a href="/big-design/modal" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Modal</a></li><li><a href="/big-design/pagination" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Pagination</a></li><li><a href="/big-design/panel" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Panel</a></li><li><a href="/big-design/statefulTable" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">StatefulTable</a></li><li><a href="/big-design/statefulTree" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">StatefulTree</a></li><li><a href="/big-design/table" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Table</a></li><li><a href="/big-design/tabs" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Tabs</a></li><li><a href="/big-design/worksheet" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Worksheet</a></li></ul></div><div class="sc-12d4dbf-0 ittXGm"><h4 class="sc-218b28a9-4 eZqWNg">Actions & Inputs</h4><ul class="sc-228d67c6-1 lTGlb"><li><a href="/big-design/button" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Button</a></li><li><a href="/big-design/button-group" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">ButtonGroup</a></li><li><a href="/big-design/checkbox" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Checkbox</a></li><li><a href="/big-design/counter" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Counter</a></li><li><a href="/big-design/datepicker" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Datepicker</a></li><li><a href="/big-design/dropdown" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Dropdown</a></li><li><a href="/big-design/file-uploader" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">FileUploader</a></li><li><a href="/big-design/form" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Form</a></li><li><a href="/big-design/input" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Input</a></li><li><a href="/big-design/link" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Link</a></li><li><a href="/big-design/multi-select" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">MultiSelect</a></li><li><a href="/big-design/pill-tabs" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">PillTabs</a></li><li><a href="/big-design/radio" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Radio</a></li><li><a href="/big-design/search" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Search</a></li><li><a href="/big-design/select" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Select</a></li><li><a href="/big-design/switch" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Switch</a></li><li><a href="/big-design/toggle" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Toggle</a></li><li><a href="/big-design/textarea" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Textarea</a></li><li><a href="/big-design/timepicker" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Timepicker</a></li></ul></div><div class="sc-12d4dbf-0 ittXGm"><h4 class="sc-218b28a9-4 eZqWNg">Status & Feedback</h4><ul class="sc-228d67c6-1 lTGlb"><li><a href="/big-design/alert" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Alert</a></li><li><a href="/big-design/badge" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Badge</a></li><li><a href="/big-design/inline-message" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">InlineMessage</a></li><li><a href="/big-design/message" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Message</a></li><li><a href="/big-design/progress-bar" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">ProgressBar</a></li><li><a href="/big-design/progress-circle" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">ProgressCircle</a></li><li><a href="/big-design/stepper" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Stepper</a></li><li><a href="/big-design/tooltip" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Tooltip</a></li></ul></div><div class="sc-12d4dbf-0 ittXGm"><h4 class="sc-218b28a9-4 eZqWNg">Patterns</h4><ul class="sc-228d67c6-1 lTGlb"><li><a href="/big-design/action-bar" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Action Bar</a></li><li><a href="/big-design/header" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Header</a></li><li><a href="/big-design/page" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Page</a></li></ul></div><div class="sc-12d4dbf-0 ittXGm"><h4 class="sc-218b28a9-4 eZqWNg">Utilities</h4><ul class="sc-228d67c6-1 lTGlb"><li><a href="/big-design/box" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Box</a></li><li><a href="/big-design/breakpoints" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Breakpoints</a></li><li><a href="/big-design/display" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Display</a></li><li><a href="/big-design/flex" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Flex</a></li><li><a href="/big-design/grid" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Grid</a></li><li><a href="/big-design/margin" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Margin</a></li><li><a href="/big-design/padding" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Padding</a></li><li><a href="/big-design/popover" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">Popover</a></li></ul></div></div></div></div></div></div></div></div></nav><main style="max-width:100%" class="sc-12d4dbf-0 LfETB sc-b6da41a7-0 bKQwSy"><h1 class="sc-218b28a9-1 dLrqcl">FileUploader</h1><div class="sc-12d4dbf-0 kKyUSp sc-93a30afd-0 ciqzLB"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 cCntAE"><h2 id="overview" class="sc-218b28a9-2 sc-93a30afd-1 ifCyRn eXgsEX">Overview</h2></div><div class="sc-12d4dbf-0 gZUsCT"><p class="sc-218b28a9-5 fcHZuG"><code class="sc-1d19ed82-0 drsGpI">FileUploader</code> allows users to upload content of their own to the system. A file uploader is commonly found in forms, but can also live as a standalone element.</p><p class="sc-218b28a9-5 gTNfIX">When to use:</p><ul class="sc-228d67c6-1 eLiXKV"><li>Uploading one or multiple documents or images.</li><li>Drag and drop one or multiple documents or images.</li></ul></div></div><div class="sc-12d4dbf-0 kKyUSp sc-93a30afd-0 ciqzLB"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 cCntAE"><h2 id="implementation" class="sc-218b28a9-2 sc-93a30afd-1 ifCyRn eXgsEX">Implementation</h2></div><div class="sc-12d4dbf-0 gZUsCT"><div class="sc-12d4dbf-0 eFdwFm"><div class="sc-12d4dbf-0 iPGfeD"><div></div></div><div style="z-index:999" class="sc-12d4dbf-0 gOmLsB sc-3a1154b6-0 bKXHEd sc-bcd98922-0 jtamvM"><div class="sc-12d4dbf-0 eIPFYx sc-2b88929e-0 juFVYe"><p class="sc-218b28a9-6 eimaSR">Edit the code below to see your changes live!</p></div><div class="sc-12d4dbf-0 kerrQ sc-2b88929e-0 fUJlIf"><button class="sc-1352b694-0 hNmeKU bd-button"><span class="sc-1352b694-1 cySnWD"><svg fill="currentColor" height="80" stroke="currentColor" stroke-width="0" viewBox="0 0 128 128" width="80" class="base__StyledIcon-sc-a9u0e1-0 emfseH"><title></title><path d="M22.67 47h99.67v73.67H22.67z" fill="#fff"></path><path d="M1.5 63.91v62.5h125v-125H1.5zm100.73-5a15.56 15.56 0 017.82 4.5 20.58 20.58 0 013 4c0 .16-5.4 3.81-8.69 5.85-.12.08-.6-.44-1.13-1.23a7.09 7.09 0 00-5.87-3.53c-3.79-.26-6.23 1.73-6.21 5a4.58 4.58 0 00.54 2.34c.83 1.73 2.38 2.76 7.24 4.86 8.95 3.85 12.78 6.39 15.16 10 2.66 4 3.25 10.46 1.45 15.24-2 5.2-6.9 8.73-13.83 9.9a38.32 38.32 0 01-9.52-.1 23 23 0 01-12.72-6.63c-1.15-1.27-3.39-4.58-3.25-4.82a9.34 9.34 0 011.15-.73L82 101l3.59-2.08.75 1.11a16.78 16.78 0 004.74 4.54c4 2.1 9.46 1.81 12.16-.62a5.43 5.43 0 00.69-6.92c-1-1.39-3-2.56-8.59-5-6.45-2.78-9.23-4.5-11.77-7.24a16.48 16.48 0 01-3.43-6.25 25 25 0 01-.22-8c1.33-6.23 6-10.58 12.82-11.87a31.66 31.66 0 019.49.26zm-29.34 5.24v5.12H56.66v46.23H45.15V69.26H28.88v-5a49.19 49.19 0 01.12-5.17C29.08 59 39 59 51 59h21.83z" data-name="original" fill="#007acc"></path></svg></span></button></div><div class="sc-12d4dbf-0 kerrQ sc-2b88929e-0 fUJlIf"><button class="sc-1352b694-0 hNmeKU bd-button"><span class="sc-1352b694-1 cySnWD"><svg fill="currentColor" height="80" preserveAspectRatio="xMinYMin meet" stroke="currentColor" stroke-width="0" viewBox="0 0 256 256" width="80" class="base__StyledIcon-sc-a9u0e1-0 emfseH"><title></title><path d="M0 0h256v256H0z" fill="#f7df1e"></path><path d="M67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371 7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607 9.969 0 16.325-4.984 16.325-11.858 0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257 0-18.044 13.747-31.792 35.228-31.792 15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31-7.046 0-11.514 4.468-11.514 10.31 0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804 0 21.654-17.012 33.51-39.867 33.51-22.339 0-36.774-10.654-43.819-24.574" fill="#000"></path></svg></span></button></div><div class="sc-12d4dbf-0 kerrQ sc-2b88929e-0 fUJlIf"><button class="sc-1352b694-0 hNmeKU bd-button"><span class="sc-1352b694-1 cySnWD"><svg aria-labelledby=":R1a5ne6:" fill="currentColor" height="24" stroke="currentColor" stroke-width="0" viewBox="0 0 24 24" width="24" color="secondary60" class="base__StyledIcon-sc-a9u0e1-0 hmYaOT"><title id=":R1a5ne6:">Copy</title><path d="M0 0h24v24H0z" fill="none"></path><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1m1 14H8c-.55 0-1-.45-1-1s.45-1 1-1h5c.55 0 1 .45 1 1s-.45 1-1 1m3-4H8c-.55 0-1-.45-1-1s.45-1 1-1h8c.55 0 1 .45 1 1s-.45 1-1 1m0-4H8c-.55 0-1-.45-1-1s.45-1 1-1h8c.55 0 1 .45 1 1s-.45 1-1 1"></path></svg></span></button></div><div class="sc-12d4dbf-0 kerrQ sc-2b88929e-0 fUJlIf"><button class="sc-1352b694-0 hNmeKU bd-button"><span class="sc-1352b694-1 cySnWD"><svg aria-labelledby=":R1alne6:" fill="currentColor" height="24" stroke="currentColor" stroke-width="0" viewBox="0 0 24 24" width="24" color="secondary60" class="base__StyledIcon-sc-a9u0e1-0 hmYaOT"><title id=":R1alne6:">Reset</title><path d="M0 0h24v24H0z" fill="none"></path><path d="M13.25 3a9.003 9.003 0 0 0-9.26 9H2.2c-.45 0-.67.54-.35.85l2.79 2.8c.2.2.51.2.71 0l2.79-2.8c.32-.31.09-.85-.35-.85h-1.8c0-3.9 3.18-7.05 7.1-7 3.72.05 6.85 3.18 6.9 6.9.05 3.91-3.1 7.1-7 7.1-1.61 0-3.1-.55-4.28-1.48a.994.994 0 0 0-1.32.08c-.42.43-.39 1.13.08 1.5a8.93 8.93 0 0 0 5.52 1.9c5.05 0 9.14-4.17 9-9.26-.13-4.69-4.05-8.61-8.74-8.74m-.51 5c-.41 0-.75.34-.75.75v3.68c0 .35.19.68.49.86l3.12 1.85c.36.21.82.09 1.03-.26.21-.36.09-.82-.26-1.03l-2.88-1.71v-3.4c0-.4-.33-.74-.75-.74"></path></svg></span></button></div><div class="sc-12d4dbf-0 kerrQ sc-2b88929e-0 fUJlIf"><button class="sc-1352b694-0 hNmeKU bd-button"><span class="sc-1352b694-1 cySnWD"><svg aria-labelledby=":R1b5ne6:" fill="currentColor" height="24" stroke="currentColor" stroke-width="0" viewBox="0 0 24 24" width="24" color="secondary60" class="base__StyledIcon-sc-a9u0e1-0 hmYaOT"><title id=":R1b5ne6:">Toggle Theme</title><path d="M24 0H0v24h24z" fill="none"></path><path d="M6.34 7.93c-3.12 3.12-3.12 8.19 0 11.31C7.9 20.8 9.95 21.58 12 21.58s4.1-.78 5.66-2.34c3.12-3.12 3.12-8.19 0-11.31l-4.95-4.95a.996.996 0 0 0-1.41 0zM12 19.59c-1.6 0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1z"></path></svg></span></button></div></div><div class="sc-12d4dbf-0 eIPFYx"><div style="background-color:#282c34;color:#ffffff"><pre class="prism-code language-tsx" style="margin:0;outline:none;padding:10px;font-family:monospace;background-color:#282c34;color:#ffffff;white-space:pre-wrap" spellcheck="false"><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token keyword" style="color:#c5a5c5">function</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">Example</span><span class="token punctuation" style="color:#8dc891">(</span><span class="token punctuation" style="color:#8dc891">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#8dc891">{</span><span class="token plain"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#8dc891">[</span><span class="token plain">files</span><span class="token punctuation" style="color:#8dc891">,</span><span class="token plain"> setFiles</span><span class="token punctuation" style="color:#8dc891">]</span><span class="token plain"> </span><span class="token operator" style="color:#d7deea">=</span><span class="token plain"> </span><span class="token generic-function function" style="color:#79b6f2">useState</span><span class="token generic-function generic class-name operator" style="color:#d7deea"><</span><span class="token generic-function generic class-name" style="color:#FAC863">File</span><span class="token generic-function generic class-name punctuation" style="color:#8dc891">[</span><span class="token generic-function generic class-name punctuation" style="color:#8dc891">]</span><span class="token generic-function generic class-name operator" style="color:#d7deea">></span><span class="token punctuation" style="color:#8dc891">(</span><span class="token punctuation" style="color:#8dc891">[</span><span class="token punctuation" style="color:#8dc891">]</span><span class="token punctuation" style="color:#8dc891">)</span><span class="token punctuation" style="color:#8dc891">;</span><span class="token plain"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#79b6f2">validateFileSize</span><span class="token plain"> </span><span class="token operator" style="color:#d7deea">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#8dc891">(</span><span class="token plain">file</span><span class="token operator" style="color:#d7deea">:</span><span class="token plain"> </span><span class="token maybe-class-name">File</span><span class="token punctuation" style="color:#8dc891">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#d7deea">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#8dc891">{</span><span class="token plain"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> </span><span class="token constant" style="color:#5a9bcf">MB</span><span class="token plain"> </span><span class="token operator" style="color:#d7deea">=</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">1024</span><span class="token plain"> </span><span class="token operator" style="color:#d7deea">*</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">1024</span><span class="token punctuation" style="color:#8dc891">;</span><span class="token plain"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">return</span><span class="token plain"> file</span><span class="token punctuation" style="color:#8dc891">.</span><span class="token property-access">size</span><span class="token plain"> </span><span class="token operator" style="color:#d7deea"><=</span><span class="token plain"> </span><span class="token constant" style="color:#5a9bcf">MB</span><span class="token punctuation" style="color:#8dc891">;</span><span class="token plain"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token plain"> </span><span class="token punctuation" style="color:#8dc891">}</span><span class="token punctuation" style="color:#8dc891">;</span><span class="token plain"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#8dc891">(</span><span class="token plain"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token plain"> </span><span class="token tag punctuation" style="color:#8dc891"><</span><span class="token tag class-name" style="color:#FAC863">Form</span><span class="token tag punctuation" style="color:#8dc891">></span><span class="token plain-text"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#8dc891"><</span><span class="token tag class-name" style="color:#FAC863">FormGroup</span><span class="token tag punctuation" style="color:#8dc891">></span><span class="token plain-text"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#8dc891"><</span><span class="token tag class-name" style="color:#FAC863">FileUploader</span><span class="token tag" style="color:#fc929e"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">dropzoneConfig</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#8dc891">=</span><span class="token tag script language-javascript punctuation" style="color:#8dc891">{</span><span class="token tag script language-javascript punctuation" style="color:#8dc891">{</span><span class="token tag script language-javascript" style="color:#fc929e"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token tag script language-javascript" style="color:#fc929e"> label</span><span class="token tag script language-javascript operator" style="color:#d7deea">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript string" style="color:#8dc891">'Drag and drop image here'</span><span class="token tag script language-javascript punctuation" style="color:#8dc891">,</span><span class="token tag script language-javascript" style="color:#fc929e"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token tag script language-javascript" style="color:#fc929e"> action</span><span class="token tag script language-javascript operator" style="color:#d7deea">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#8dc891">{</span><span class="token tag script language-javascript" style="color:#fc929e"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token tag script language-javascript" style="color:#fc929e"> label</span><span class="token tag script language-javascript operator" style="color:#d7deea">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript string" style="color:#8dc891">'Upload by URL'</span><span class="token tag script language-javascript punctuation" style="color:#8dc891">,</span><span class="token tag script language-javascript" style="color:#fc929e"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript function-variable function" style="color:#79b6f2">onClick</span><span class="token tag script language-javascript operator" style="color:#d7deea">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#8dc891">(</span><span class="token tag script language-javascript punctuation" style="color:#8dc891">)</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript arrow operator" style="color:#d7deea">=></span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript keyword" style="color:#c5a5c5">null</span><span class="token tag script language-javascript punctuation" style="color:#8dc891">,</span><span class="token tag script language-javascript" style="color:#fc929e"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#8dc891">}</span><span class="token tag script language-javascript punctuation" style="color:#8dc891">,</span><span class="token tag script language-javascript" style="color:#fc929e"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#8dc891">}</span><span class="token tag script language-javascript punctuation" style="color:#8dc891">}</span><span class="token tag" style="color:#fc929e"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">files</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#8dc891">=</span><span class="token tag script language-javascript punctuation" style="color:#8dc891">{</span><span class="token tag script language-javascript" style="color:#fc929e">files</span><span class="token tag script language-javascript punctuation" style="color:#8dc891">}</span><span class="token tag" style="color:#fc929e"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">label</span><span class="token tag attr-value punctuation attr-equals" style="color:#8dc891">=</span><span class="token tag attr-value punctuation" style="color:#8dc891">"</span><span class="token tag attr-value" style="color:#8dc891">Upload files</span><span class="token tag attr-value punctuation" style="color:#8dc891">"</span><span class="token tag" style="color:#fc929e"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">multiple</span><span class="token tag" style="color:#fc929e"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">onFilesChange</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#8dc891">=</span><span class="token tag script language-javascript punctuation" style="color:#8dc891">{</span><span class="token tag script language-javascript" style="color:#fc929e">setFiles</span><span class="token tag script language-javascript punctuation" style="color:#8dc891">}</span><span class="token tag" style="color:#fc929e"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">required</span><span class="token tag" style="color:#fc929e"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">validators</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#8dc891">=</span><span class="token tag script language-javascript punctuation" style="color:#8dc891">{</span><span class="token tag script language-javascript punctuation" style="color:#8dc891">[</span><span class="token tag script language-javascript" style="color:#fc929e"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#8dc891">{</span><span class="token tag script language-javascript" style="color:#fc929e"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token tag script language-javascript" style="color:#fc929e"> validator</span><span class="token tag script language-javascript operator" style="color:#d7deea">:</span><span class="token tag script language-javascript" style="color:#fc929e"> validateFileSize</span><span class="token tag script language-javascript punctuation" style="color:#8dc891">,</span><span class="token tag script language-javascript" style="color:#fc929e"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token tag script language-javascript" style="color:#fc929e"> type</span><span class="token tag script language-javascript operator" style="color:#d7deea">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript string" style="color:#8dc891">'file-size'</span><span class="token tag script language-javascript punctuation" style="color:#8dc891">,</span><span class="token tag script language-javascript" style="color:#fc929e"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#8dc891">}</span><span class="token tag script language-javascript punctuation" style="color:#8dc891">,</span><span class="token tag script language-javascript" style="color:#fc929e"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#8dc891">]</span><span class="token tag script language-javascript punctuation" style="color:#8dc891">}</span><span class="token tag" style="color:#fc929e"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token tag" style="color:#fc929e"> </span><span class="token tag punctuation" style="color:#8dc891">/></span><span class="token plain-text"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#8dc891"></</span><span class="token tag class-name" style="color:#FAC863">FormGroup</span><span class="token tag punctuation" style="color:#8dc891">></span><span class="token plain-text"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#8dc891"></</span><span class="token tag class-name" style="color:#FAC863">Form</span><span class="token tag punctuation" style="color:#8dc891">></span><span class="token plain"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token plain"> </span><span class="token punctuation" style="color:#8dc891">)</span><span class="token punctuation" style="color:#8dc891">;</span><span class="token plain"></span> </span><span class="token-line" style="color:#ffffff;font-family:monospace;white-space:pre-wrap"><span class="token plain"></span><span class="token punctuation" style="color:#8dc891">}</span> </span></pre></div></div></div></div></div><div class="sc-12d4dbf-0 kKyUSp sc-93a30afd-0 ciqzLB"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 cCntAE"><h2 id="props" class="sc-218b28a9-2 sc-93a30afd-1 ifCyRn eXgsEX">Props</h2></div><div class="sc-12d4dbf-0 gZUsCT"><div data-testid="pilltabs-wrapper" role="list" class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 cCntAE"><div data-testid="pilltabs-pill-0" role="listitem" class="sc-12d4dbf-0 eIPFYx sc-2b88929e-0 fUJlIf sc-2a0c2650-1"><button class="sc-1352b694-0 qmsNW sc-2a0c2650-0 fKFien" type="button"><span class="sc-1352b694-1 cySnWD">FileUploader</span></button></div><div data-testid="pilltabs-pill-1" role="listitem" class="sc-12d4dbf-0 eIPFYx sc-2b88929e-0 fUJlIf sc-2a0c2650-1"><button class="sc-1352b694-0 qmsNW sc-2a0c2650-0" type="button"><span class="sc-1352b694-1 cySnWD">Validator</span></button></div><div data-testid="pilltabs-pill-2" role="listitem" class="sc-12d4dbf-0 eIPFYx sc-2b88929e-0 fUJlIf sc-2a0c2650-1"><button class="sc-1352b694-0 qmsNW sc-2a0c2650-0" type="button"><span class="sc-1352b694-1 cySnWD">Error</span></button></div><div data-testid="pilltabs-pill-3" role="listitem" class="sc-12d4dbf-0 eIPFYx sc-2b88929e-0 fUJlIf sc-2a0c2650-1"><button class="sc-1352b694-0 qmsNW sc-2a0c2650-0" type="button"><span class="sc-1352b694-1 cySnWD">FileAction</span></button></div><div data-testid="pilltabs-pill-4" role="listitem" class="sc-12d4dbf-0 eIPFYx sc-2b88929e-0 fUJlIf sc-2a0c2650-1"><button class="sc-1352b694-0 qmsNW sc-2a0c2650-0" type="button"><span class="sc-1352b694-1 cySnWD">DropzoneConfig</span></button></div><div data-testid="pilltabs-dropdown-toggle" role="listitem" class="sc-12d4dbf-0 eIPFYx sc-2b88929e-0 fUJlIf sc-2a0c2650-1 idxPCs"><div class="sc-12d4dbf-0 eIPFYx sc-c44cdc32-0 bENMgr"><button class="sc-1352b694-0 hNmeKU bd-button" type="button" aria-activedescendant="" aria-controls=":Rjpe6:-menu" aria-expanded="false" aria-haspopup="menu" id=":Rjpe6:-toggle-button" role="button" tabindex="0"><span class="sc-1352b694-1 cySnWD"><svg aria-labelledby=":R2jjpe6:" fill="currentColor" height="24" stroke="currentColor" stroke-width="0" viewBox="0 0 24 24" width="24" class="base__StyledIcon-sc-a9u0e1-0 emfseH"><title id=":R2jjpe6:">add</title><path d="M0 0h24v24H0z" fill="none"></path><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"></path></svg></span></button><div style="position:absolute;left:0;top:0" class="sc-12d4dbf-0 gfnS"><div class="sc-fa563855-0 cxnmIq"><ul id=":Rjpe6:-menu" role="menu" aria-labelledby=":Rjpe6:-label" class="sc-fa563855-1 juZVME"></ul></div></div></div></div></div><div class="sc-12d4dbf-0 gpXGlR"><p class="sc-218b28a9-5 fcHZuG">Supports <!-- -->most<!-- --> native <code class="sc-1d19ed82-0 AibSD"><<!-- -->input<!-- --> /></code> element attributes.</p><figure class="sc-d5cd1ead-0 igZfJj"><table id="file-uploader-prop-table" class="sc-d5cd1ead-1 dANuiw"><thead class="sc-adc25cc9-0"><tr><th id="header-cell-0" class="sc-48fc43a5-0 cdXfBB"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 ghviGs sc-48fc43a5-2 iqqGRm">Prop name</div></th><th id="header-cell-1" class="sc-48fc43a5-0 cdXfBB"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 ghviGs sc-48fc43a5-2 iqqGRm">Type</div></th><th id="header-cell-2" class="sc-48fc43a5-0 cdXfBB"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 ghviGs sc-48fc43a5-2 iqqGRm">Default</div></th><th id="header-cell-3" width="50%" class="sc-48fc43a5-0 hAoeUi"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 ghviGs sc-48fc43a5-2 iqqGRm">Description</div></th></tr></thead><tbody class="sc-91891151-0"><tr class="sc-b8bb177c-0 eERKuz"><td class="sc-7811a1c9-0 gZzqse"><span style="white-space:nowrap"><code class="sc-1d19ed82-0 drsGpI">actions</code></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD"><a href="/big-design/file-uploader?props=file-uploader-file-actions#file-uploader-file-actions-prop-table" class="sc-d0458d4a-0 lhllpz">FileAction</a>[]</code></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 kiAuZK"></code></td><td width="50%" class="sc-7811a1c9-0 dDxSsd"><p class="sc-218b28a9-5 fcHZuG">Value for the <code class="sc-1d19ed82-0 drsGpI">FileUploader</code>. Only accepts <code class="sc-1d19ed82-0 AibSD">File[]</code>.</p></td></tr><tr class="sc-b8bb177c-0 eERKuz"><td class="sc-7811a1c9-0 gZzqse"><span style="white-space:nowrap"><code class="sc-1d19ed82-0 drsGpI">accept</code></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD">string</code></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 kiAuZK"></code></td><td width="50%" class="sc-7811a1c9-0 dDxSsd"><p class="sc-218b28a9-5 fcHZuG">Takes as its value a comma-separated list of one or more file types or unique file type specifiers, such as <code class="sc-1d19ed82-0 AibSD">video/*,image/*</code></p></td></tr><tr class="sc-b8bb177c-0 eERKuz"><td class="sc-7811a1c9-0 gZzqse"><span style="white-space:nowrap"><code class="sc-1d19ed82-0 drsGpI">description</code></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD">string</code> | <code class="sc-1d19ed82-0 AibSD">FormControlDescription</code></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 kiAuZK"></code></td><td width="50%" class="sc-7811a1c9-0 dDxSsd"><p class="sc-218b28a9-5 fcHZuG">Adds a description to the <code class="sc-1d19ed82-0 drsGpI">FileUploader</code>.'</p></td></tr><tr class="sc-b8bb177c-0 eERKuz"><td class="sc-7811a1c9-0 gZzqse"><span style="white-space:nowrap"><code class="sc-1d19ed82-0 drsGpI">disabled</code></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD">boolean</code></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 kiAuZK"></code></td><td width="50%" class="sc-7811a1c9-0 dDxSsd"><p class="sc-218b28a9-5 fcHZuG">Disables the <code class="sc-1d19ed82-0 drsGpI">FileUploader</code>.</p></td></tr><tr class="sc-b8bb177c-0 eERKuz"><td class="sc-7811a1c9-0 gZzqse"><span style="white-space:nowrap"><code class="sc-1d19ed82-0 drsGpI">dropzoneConfig</code></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD"><a href="/big-design/file-uploader?props=file-uploader-dropzone-config#file-uploader-dropzone-config-prop-table" class="sc-d0458d4a-0 lhllpz">DropzoneConfig</a>[]</code></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 kiAuZK"></code></td><td width="50%" class="sc-7811a1c9-0 dDxSsd"><p class="sc-218b28a9-5 fcHZuG">Adds a label and a description to the drop-zone box.</p></td></tr><tr class="sc-b8bb177c-0 eERKuz"><td class="sc-7811a1c9-0 gZzqse"><span style="white-space:nowrap"><code class="sc-1d19ed82-0 drsGpI">error</code></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD">string</code> | <code class="sc-1d19ed82-0 AibSD">string[]</code> | <code class="sc-1d19ed82-0 AibSD">FormControlError</code> | <code class="sc-1d19ed82-0 AibSD">FormControlError[]</code></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 kiAuZK"></code></td><td width="50%" class="sc-7811a1c9-0 dDxSsd"><p class="sc-218b28a9-5 fcHZuG">Displays an error message for the field. Error message will be passed to the<!-- --> <code class="sc-1d19ed82-0 AibSD">FormGroup</code> for display purposes.</p></td></tr><tr class="sc-b8bb177c-0 eERKuz"><td class="sc-7811a1c9-0 gZzqse"><span style="white-space:nowrap"><code class="sc-1d19ed82-0 drsGpI">files</code><b> *</b></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD">File[]</code></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 kiAuZK"></code></td><td width="50%" class="sc-7811a1c9-0 dDxSsd"><p class="sc-218b28a9-5 fcHZuG">Value for the <code class="sc-1d19ed82-0 drsGpI">FileUploader</code>. Only accepts <code class="sc-1d19ed82-0 AibSD">File[]</code>.</p></td></tr><tr class="sc-b8bb177c-0 eERKuz"><td class="sc-7811a1c9-0 gZzqse"><span style="white-space:nowrap"><code class="sc-1d19ed82-0 drsGpI">previewHidden</code></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD">boolean</code></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 kiAuZK"></code></td><td width="50%" class="sc-7811a1c9-0 dDxSsd"><p class="sc-218b28a9-5 fcHZuG">Value for the <code class="sc-1d19ed82-0 drsGpI">FileUploader</code>. Only accepts <code class="sc-1d19ed82-0 AibSD">File[]</code>.</p></td></tr><tr class="sc-b8bb177c-0 eERKuz"><td class="sc-7811a1c9-0 gZzqse"><span style="white-space:nowrap"><code class="sc-1d19ed82-0 drsGpI">label</code></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD">string</code> | <code class="sc-1d19ed82-0 AibSD">FormControlLabel</code></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 kiAuZK"></code></td><td width="50%" class="sc-7811a1c9-0 dDxSsd"><p class="sc-218b28a9-5 fcHZuG">Label element for <code class="sc-1d19ed82-0 drsGpI">FileUploader</code>. Component will auto generate<!-- --> <code class="sc-1d19ed82-0 AibSD">id</code>'s for the accessibility API.</p></td></tr><tr class="sc-b8bb177c-0 eERKuz"><td class="sc-7811a1c9-0 gZzqse"><span style="white-space:nowrap"><code class="sc-1d19ed82-0 drsGpI">labelId</code></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD">string</code></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 kiAuZK"></code></td><td width="50%" class="sc-7811a1c9-0 dDxSsd"><p class="sc-218b28a9-5 fcHZuG">Adds an <code class="sc-1d19ed82-0 AibSD">id</code> to the generated label element.</p></td></tr><tr class="sc-b8bb177c-0 eERKuz"><td class="sc-7811a1c9-0 gZzqse"><span style="white-space:nowrap"><code class="sc-1d19ed82-0 drsGpI">localization</code></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD">{ upload: string; optional: string }</code></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 kiAuZK"></code></td><td width="50%" class="sc-7811a1c9-0 dDxSsd"><p class="sc-218b28a9-5 fcHZuG">Overrides labels with localized text.</p></td></tr><tr class="sc-b8bb177c-0 eERKuz"><td class="sc-7811a1c9-0 gZzqse"><span style="white-space:nowrap"><code class="sc-1d19ed82-0 drsGpI">multiple</code></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD">boolean</code></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 kiAuZK"></code></td><td width="50%" class="sc-7811a1c9-0 dDxSsd"><p class="sc-218b28a9-5 fcHZuG">Allows to upload multiple files.</p></td></tr><tr class="sc-b8bb177c-0 eERKuz"><td class="sc-7811a1c9-0 gZzqse"><span style="white-space:nowrap"><code class="sc-1d19ed82-0 drsGpI">validators</code></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD"><a href="/big-design/file-uploader?props=file-uploader-validator#file-uploader-validator-prop-table" class="sc-d0458d4a-0 lhllpz">ValidatorConfig</a>[]</code></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 kiAuZK"></code></td><td width="50%" class="sc-7811a1c9-0 dDxSsd"><p class="sc-218b28a9-5 fcHZuG">Allows to define custom validators for files.</p></td></tr><tr class="sc-b8bb177c-0 eERKuz"><td class="sc-7811a1c9-0 gZzqse"><span style="white-space:nowrap"><code class="sc-1d19ed82-0 drsGpI">onFilesChange</code><b> *</b></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD">(files: File[]): void</code></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 kiAuZK"></code></td><td width="50%" class="sc-7811a1c9-0 dDxSsd"><p class="sc-218b28a9-5 fcHZuG">Function called to change files value. Receives new files from the component.</p></td></tr><tr class="sc-b8bb177c-0 eERKuz"><td class="sc-7811a1c9-0 gZzqse"><span style="white-space:nowrap"><code class="sc-1d19ed82-0 drsGpI">onFilesError</code></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD">(errors:<!-- --> <a href="/big-design/file-uploader?props=file-uploader-error#file-uploader-error-prop-table" class="sc-d0458d4a-0 lhllpz">FileValidationError</a>[]): void;</code></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 kiAuZK"></code></td><td width="50%" class="sc-7811a1c9-0 dDxSsd"><p class="sc-218b28a9-5 fcHZuG">Function called when one of the validators fails. Receives an array of errors.</p></td></tr></tbody></table><p class="sc-218b28a9-6 biIcFC">Props ending with * are required</p></figure></div></div></div><div class="sc-12d4dbf-0 kKyUSp sc-93a30afd-0 ciqzLB"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 cCntAE"><h2 id="guidelines" class="sc-218b28a9-2 sc-93a30afd-1 ifCyRn eXgsEX">Do's and Don'ts</h2></div><div class="sc-12d4dbf-0 gZUsCT"><table id=":Rrre6:" class="sc-d5cd1ead-1 dANuiw"><thead class="sc-adc25cc9-0"><tr><th id="header-cell-0" class="sc-48fc43a5-0 cdXfBB"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 ghviGs sc-48fc43a5-2 iqqGRm">Do</div></th></tr></thead><tbody class="sc-91891151-0"><tr class="sc-b8bb177c-0 eERKuz"><td class="sc-7811a1c9-0 gZzqse"><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 fithVi"><div class="sc-12d4dbf-0 ZlwvB sc-2b88929e-0 fUJlIf"><svg aria-hidden="true" fill="currentColor" height="24" stroke="currentColor" stroke-width="0" viewBox="0 0 24 24" width="24" color="success" class="base__StyledIcon-sc-a9u0e1-0 kssbwd"><path d="M0 0h24v24H0z" fill="none"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2M9.29 16.29 5.7 12.7a.996.996 0 1 1 1.41-1.41L10 14.17l6.88-6.88a.996.996 0 1 1 1.41 1.41l-7.59 7.59a.996.996 0 0 1-1.41 0"></path></svg></div><div class="sc-12d4dbf-0 eIPFYx sc-2b88929e-0 fUJlIf">Specify allowed file types and maximum size.</div></div></td></tr></tbody></table></div></div></main></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/file-uploader","query":{},"buildId":"c2CtNX9kz9-sAtL5xGy_Q","assetPrefix":"/big-design","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>