CINXE.COM

<!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-109b42c41651c4d4.js" defer=""></script><script src="/big-design/_next/static/chunks/pages/_app-7565adf838eba40a.js" defer=""></script><script src="/big-design/_next/static/chunks/97571557-0a2b44b9c5b71850.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/8425-87016cd08236f058.js" defer=""></script><script src="/big-design/_next/static/chunks/3554-d256c030b8137b10.js" defer=""></script><script src="/big-design/_next/static/chunks/8254-44ef0231880a903e.js" defer=""></script><script src="/big-design/_next/static/chunks/pages/offset-pagination-d6fed6cd25a22625.js" defer=""></script><script src="/big-design/_next/static/WzHu2dN1S5olaIwOmyI67/_buildManifest.js" defer=""></script><script src="/big-design/_next/static/WzHu2dN1S5olaIwOmyI67/_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*/ .kfkrJE{vertical-align:middle;color:#DB3643;height:1.5rem;width:1.5rem;}/*!sc*/ data-styled.g2[id="base__StyledIcon-sc-a9u0e1-0"]{content:"WZeNJ,emfseH,hmYaOT,kssbwd,kfkrJE,"}/*!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*/ .kdkpVN{margin-bottom:0.5rem;box-sizing:border-box;}/*!sc*/ .ZlwvB{margin-right:1.25rem;box-sizing:border-box;}/*!sc*/ .bqOync{margin-top:1.5rem;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,kdkpVN,ZlwvB,bqOync,"}/*!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*/ .fAYsrw{-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:column;-ms-flex-direction:column;flex-direction:column;-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,fAYsrw,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*/ data-styled.g9[id="sc-1352b694-0"]{content:"hNmeKU,"}/*!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*/ .cYQsCo{color:#313440;margin:0 0 1rem;font-size:1.25rem;font-weight:400;line-height:1.75rem;margin:0 0 0.75rem;}/*!sc*/ data-styled.g19[id="sc-218b28a9-3"]{content:"cYQsCo,"}/*!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*/ .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.g43[id="sc-1d19ed82-0"]{content:"drsGpI,AibSD,kiAuZK,"}/*!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.g126[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.g128[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.g129[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.g131[id="sc-b8bb177c-0"]{content:"eERKuz,"}/*!sc*/ .fJecZz{margin:0;max-width:100%;overflow-x:auto;white-space:nowrap;margin-bottom:1.5rem;}/*!sc*/ @media (min-width:720px){.fJecZz{white-space:normal;}}/*!sc*/ data-styled.g132[id="sc-d5cd1ead-0"]{content:"fJecZz,"}/*!sc*/ .dANuiw{border-color:transparent;border-spacing:0;color:#313440;text-align:left;width:100%;}/*!sc*/ data-styled.g133[id="sc-d5cd1ead-1"]{content:"dANuiw,"}/*!sc*/ .jtamvM{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}/*!sc*/ data-styled.g171[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.g172[id="sc-ddc6a9be-0"]{content:"kxoA-DP,"}/*!sc*/ .hzKGs{cursor:pointer;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}/*!sc*/ data-styled.g173[id="sc-e6496ff5-0"]{content:"hzKGs,"}/*!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">v1.6.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/offset-pagination" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">OffsetPagination</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/stateless-pagination" class="sc-d0458d4a-0 lhllpz sc-50275482-0 lcyNul">StatelessPagination</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">OffsetPagination</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">OffsetPagination</code> is used to divide a long list or table into several pages, indicating other pages exist and allowing the user to access them. This makes the content easier to read and ensures faster loading time. The user can easily navigate through the pages in order, or jump to any page in the list. The user can also select the number of results they want to see on each page, giving them more control over the way they view the data.</p><p class="sc-218b28a9-5 gTNfIX">When to use:</p><ul class="sc-228d67c6-1 eLiXKV"><li>On tables that contain more than 25 number of rows of data/content. </li><li>When the data/content uses an offset, rather than cursor-based, form of pagination.</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">ExampleList</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">items</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 function" style="color:#79b6f2">useState</span><span class="token punctuation" style="color:#8dc891">(</span><span class="token punctuation" style="color:#8dc891">[</span><span class="token string" style="color:#8dc891">'Item1'</span><span class="token punctuation" style="color:#8dc891">,</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'Item2'</span><span class="token punctuation" style="color:#8dc891">,</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'Item3'</span><span class="token punctuation" style="color:#8dc891">,</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'Item 4'</span><span class="token punctuation" style="color:#8dc891">,</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'Item 5'</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 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">ranges</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 function" style="color:#79b6f2">useState</span><span class="token punctuation" style="color:#8dc891">(</span><span class="token punctuation" style="color:#8dc891">[</span><span class="token number" style="color:#5a9bcf">2</span><span class="token punctuation" style="color:#8dc891">,</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">3</span><span class="token punctuation" style="color:#8dc891">,</span><span class="token plain"> </span><span class="token number" style="color:#5a9bcf">4</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 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">range</span><span class="token punctuation" style="color:#8dc891">,</span><span class="token plain"> setRange</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 function" style="color:#79b6f2">useState</span><span class="token punctuation" style="color:#8dc891">(</span><span class="token plain">ranges</span><span class="token punctuation" style="color:#8dc891">[</span><span class="token number" style="color:#5a9bcf">0</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 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">page</span><span class="token punctuation" style="color:#8dc891">,</span><span class="token plain"> setPage</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 function" style="color:#79b6f2">useState</span><span class="token punctuation" style="color:#8dc891">(</span><span class="token number" style="color:#5a9bcf">1</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 keyword" style="color:#c5a5c5">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#8dc891">[</span><span class="token plain">currentItems</span><span class="token punctuation" style="color:#8dc891">,</span><span class="token plain"> setCurrentItems</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 function" style="color:#79b6f2">useState</span><span class="token punctuation" style="color:#8dc891">(</span><span class="token punctuation" style="color:#8dc891">[</span><span class="token string" 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">onItemsPerPageChange</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">newRange</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 function" style="color:#79b6f2">setPage</span><span class="token punctuation" style="color:#8dc891">(</span><span class="token number" style="color:#5a9bcf">1</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 function" style="color:#79b6f2">setRange</span><span class="token punctuation" style="color:#8dc891">(</span><span class="token plain">newRange</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 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 function" style="color:#79b6f2">useEffect</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 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"> maxItems </span><span class="token operator" style="color:#d7deea">=</span><span class="token plain"> page </span><span class="token operator" style="color:#d7deea">*</span><span class="token plain"> range</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"> lastItem </span><span class="token operator" style="color:#d7deea">=</span><span class="token plain"> </span><span class="token known-class-name class-name" style="color:#FAC863">Math</span><span class="token punctuation" style="color:#8dc891">.</span><span class="token method function property-access" style="color:#79b6f2">min</span><span class="token punctuation" style="color:#8dc891">(</span><span class="token plain">maxItems</span><span class="token punctuation" style="color:#8dc891">,</span><span class="token plain"> items</span><span class="token punctuation" style="color:#8dc891">.</span><span class="token property-access">length</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 keyword" style="color:#c5a5c5">const</span><span class="token plain"> firstItem </span><span class="token operator" style="color:#d7deea">=</span><span class="token plain"> </span><span class="token known-class-name class-name" style="color:#FAC863">Math</span><span class="token punctuation" style="color:#8dc891">.</span><span class="token method function property-access" style="color:#79b6f2">max</span><span class="token punctuation" style="color:#8dc891">(</span><span class="token number" style="color:#5a9bcf">0</span><span class="token punctuation" style="color:#8dc891">,</span><span class="token plain"> maxItems </span><span class="token operator" style="color:#d7deea">-</span><span class="token plain"> range</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 function" style="color:#79b6f2">setCurrentItems</span><span class="token punctuation" style="color:#8dc891">(</span><span class="token plain">items</span><span class="token punctuation" style="color:#8dc891">.</span><span class="token method function property-access" style="color:#79b6f2">slice</span><span class="token punctuation" style="color:#8dc891">(</span><span class="token plain">firstItem</span><span class="token punctuation" style="color:#8dc891">,</span><span class="token plain"> lastItem</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 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 class="token punctuation" style="color:#8dc891">[</span><span class="token plain">page</span><span class="token punctuation" style="color:#8dc891">,</span><span class="token plain"> items</span><span class="token punctuation" style="color:#8dc891">,</span><span class="token plain"> range</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">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 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">OffsetPagination</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">currentPage</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">page</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">itemsPerPage</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">range</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">itemsPerPageOptions</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">ranges</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">onItemsPerPageChange</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">onItemsPerPageChange</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">onPageChange</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">newPage</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 function" style="color:#79b6f2">setPage</span><span class="token tag script language-javascript punctuation" style="color:#8dc891">(</span><span class="token tag script language-javascript" style="color:#fc929e">newPage</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">totalItems</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">items</span><span class="token tag script language-javascript punctuation" style="color:#8dc891">.</span><span class="token tag script language-javascript property-access" style="color:#fc929e">length</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" style="color:#fc929e">ul</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 punctuation" style="color:#8dc891">{</span><span class="token plain">currentItems</span><span class="token punctuation" style="color:#8dc891">.</span><span class="token method function property-access" style="color:#79b6f2">map</span><span class="token punctuation" style="color:#8dc891">(</span><span class="token punctuation" style="color:#8dc891">(</span><span class="token plain">item</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 tag punctuation" style="color:#8dc891"><</span><span class="token tag" style="color:#fc929e">li</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">key</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">item</span><span class="token tag script language-javascript punctuation" style="color:#8dc891">}</span><span class="token tag punctuation" style="color:#8dc891">></span><span class="token punctuation" style="color:#8dc891">{</span><span class="token plain">item</span><span class="token punctuation" style="color:#8dc891">}</span><span class="token tag punctuation" style="color:#8dc891"></</span><span class="token tag" style="color:#fc929e">li</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 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" style="color:#fc929e">ul</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 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"><figure class="sc-d5cd1ead-0 fJecZz"><table id=":Rdpe6:" 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">itemsPerPage</code><b> *</b></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD">number</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">Indicates how many items are displayed per page.</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">currentPage</code><b> *</b></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD">number</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">Indicates the page currently/initially displayed.</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">totalItems</code><b> *</b></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD">number</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">Indicates how many items in total will be displayed.</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">itemsPerPageOptions</code><b> *</b></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD">number[]</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">Indicates options for per-page ranges.</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">onPageChange</code><b> *</b></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD">(page: number) => 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 that will be called when a navigation arrow is clicked.</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">onItemsPerPageChange</code><b> *</b></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD">(range: number) => 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 that will be called when a new per-page range is selected.</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></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 kiAuZK">pagination</code></td><td width="50%" class="sc-7811a1c9-0 dDxSsd"><p class="sc-218b28a9-5 fcHZuG">Overrides the aria label of the pagination wrapper navigation 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">getRangeLabel</code></span></td><td class="sc-7811a1c9-0 gZzqse"><code class="sc-1d19ed82-0 AibSD">(start: number, end: number, totalItems: number) => 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">A callback to format the label of the per-page range dropdown.</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">{ of: string, previousPage: string, nextPage: 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 the labels with localized text.</p></td></tr></tbody></table><p class="sc-218b28a9-6 biIcFC">Props ending with * are required</p></figure><h3 class="sc-218b28a9-3 cYQsCo">Inherited</h3><div class="sc-12d4dbf-0 eIPFYx sc-3a1154b6-0 fAYsrw"><div tabindex="0" class="sc-12d4dbf-0 kdkpVN sc-3a1154b6-0 fithVi sc-e6496ff5-0 hzKGs"><svg aria-labelledby=":R5npe6:" 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=":R5npe6:">Expand</title><path d="M0 0h24v24H0z" fill="none"></path><path d="M9.29 6.71a.996.996 0 0 0 0 1.41L13.17 12l-3.88 3.88a.996.996 0 1 0 1.41 1.41l4.59-4.59a.996.996 0 0 0 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01"></path></svg><p class="sc-218b28a9-5 fcHZuG">Margin Props</p></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="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">Place <code class="sc-1d19ed82-0 drsGpI">OffsetPagination</code> directly above the header of the table that it controls, right aligned.</div></div></td></tr><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">Disable dropdown options greater than the option that will show the total number of results (e.g., if there are 42 results, the highest option should be 50).</div></div></td></tr><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">Dropdown increments should be multiples of 10 and in increments that make sense for the context.</div></div></td></tr></tbody></table><div class="sc-12d4dbf-0 bqOync"><table id=":Rtre6:" 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">Don't</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="danger" class="base__StyledIcon-sc-a9u0e1-0 kfkrJE"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 11c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1m1 4h-2v-2h2z"></path></svg></div><div class="sc-12d4dbf-0 eIPFYx sc-2b88929e-0 fUJlIf">Don鈥檛 place <code class="sc-1d19ed82-0 drsGpI">OffsetPagination</code> below a table.</div></div></td></tr><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="danger" class="base__StyledIcon-sc-a9u0e1-0 kfkrJE"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 11c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1m1 4h-2v-2h2z"></path></svg></div><div class="sc-12d4dbf-0 eIPFYx sc-2b88929e-0 fUJlIf">Don鈥檛 show dropdown arrow when there are less than 10 items.</div></div></td></tr></tbody></table></div></div></div></main></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/offset-pagination","query":{},"buildId":"WzHu2dN1S5olaIwOmyI67","assetPrefix":"/big-design","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>