CINXE.COM

<!DOCTYPE html><html lang="en-us" data-amplify-theme="amplify-docs"><head><meta charSet="utf-8"/><title>Collection | Amplify UI for React</title><meta name="viewport" content="width=device-width, initial-scale=1"/><meta name="description" content="Collection provides a way to display items from a data source."/><meta property="og:title" content="Collection | Amplify UI for React"/><meta property="og:description" content="Collection provides a way to display items from a data source."/><meta property="og:type" content="website"/><meta property="og:site_name" content="Amplify UI"/><meta property="og:url" content="https://ui.docs.amplify.aws/react/components/collection"/><meta property="og:image" content="https://ui.docs.amplify.aws/previews/react-4.png"/><meta property="og:image:width" content="1280"/><meta property="og:image:height" content="640"/><meta property="og:image:secure_url" content="https://ui.docs.amplify.aws/previews/react-4.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:alt" content="Collection provides a way to display items from a data source."/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Collection | Amplify UI for React"/><meta name="twitter:site" content="@AWSAmplify"/><meta name="twitter:url" content="https://ui.docs.amplify.aws/react/components/collection"/><meta name="twitter:description" content="Collection provides a way to display items from a data source."/><meta name="twitter:image" content="https://ui.docs.amplify.aws/previews/react-4.png"/><meta name="next-head-count" content="21"/><meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; font-src 'self'; frame-src 'self' *.aws.demdex.net dpm.demdex.net *.youtube.com https://snack.expo.dev; img-src 'self' blob: amazonwebservices.d2.sc.omtrdc.net aws.demdex.net dpm.demdex.net cm.everesttech.net images.unsplash.com a0.awsstatic.com; connect-src 'self' *.shortbread.aws.dev amazonwebservices.d2.sc.omtrdc.net aws.demdex.net dpm.demdex.net cm.everesttech.net d2c.aws.amazon.com vs.aws.amazon.com a0.awsstatic.com https://*.algolia.net https://*.algolianet.com; script-src 'unsafe-eval' 'self' 'sha256-+EmC7N7vtECfHfQDmozCfkA4y5ziaduMsva/ETc/ZMU=' a0.awsstatic.com aa0.awsstatic.com; "/><link rel="icon" type="image/svg+xml" href="/svg/favicon.svg"/><link rel="apple-touch-icon" href="/svg/favicon.svg"/><link rel="preload" href="/fonts/AmazonEmber_W_Rg.woff2" as="font" type="font/woff2" crossorigin="anonymous"/><link rel="preload" href="/fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous"/><link rel="preload" href="/fonts/Inter.var.woff2" as="font" type="font/woff2" crossorigin="anonymous"/><link rel="preload" href="/fonts/Inter-italic.var.woff2" as="font" type="font/woff2" crossorigin="anonymous"/><link rel="preload" href="/_next/static/css/830f7c6d291c343b.css" as="style"/><link rel="stylesheet" href="/_next/static/css/830f7c6d291c343b.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js"></script><script src="/_next/static/chunks/webpack-5f3c334a3ef514cc.js" defer=""></script><script src="/_next/static/chunks/framework-d57fa332274b7d65.js" defer=""></script><script src="/_next/static/chunks/main-b300e1aa5b1ce03a.js" defer=""></script><script src="/_next/static/chunks/pages/_app-8d0178ed882b6c47.js" defer=""></script><script src="/_next/static/chunks/9664-c0a421658afb3a86.js" defer=""></script><script src="/_next/static/chunks/2549-9687c9cd037e5ec0.js" defer=""></script><script src="/_next/static/chunks/7595-39daad24df9cd8f8.js" defer=""></script><script src="/_next/static/chunks/3570-2afe95e1a81e94ed.js" defer=""></script><script src="/_next/static/chunks/8623-be318c8389ff0e7c.js" defer=""></script><script src="/_next/static/chunks/9629-3f9afeac032345d9.js" defer=""></script><script src="/_next/static/chunks/pages/%5Bplatform%5D/components/collection-52e53c76b615f31b.js" defer=""></script><script src="/_next/static/-WIT3zg9fx60YQufP5mRY/_buildManifest.js" defer=""></script><script src="/_next/static/-WIT3zg9fx60YQufP5mRY/_ssgManifest.js" defer=""></script></head><body><div id="__next"><div class=""><div data-amplify-theme="amplify-docs" data-amplify-color-mode="system" dir="ltr"><nav aria-label="Amplify Dev Center - External links to additional Amplify resources" class="GlobalNav_navbar__rKvoa "><a class="amplify-button amplify-field-group__control amplify-button--small GlobalNav_skip-to-main__XMJfx" type="button" href="#docs-content">Skip to main content</a><div class="amplify-flex GlobalNav_nav-links-container__yEBob"><div style="height:100%" class="amplify-flex GlobalNav_left-nav-links__COtFv" id="left-nav"><div style="justify-content:space-between" class="amplify-flex GlobalNav_logo-container__mHVj3"><div style="gap:var(--amplify-space-xs);align-items:center;flex-direction:row" class="amplify-flex GlobalNav_desktop-only__kk82R"><svg style="width:20px;height:20px;color:var(--amplify-colors-primary-60)" class="amplify-icon" viewBox="0 0 24 22" aria-hidden="true"><path d="M14.3128 20.0394C14.3651 20.1298 14.4618 20.1855 14.5664 20.1855H16.8444C17.0698 20.1855 17.2107 19.942 17.098 19.7472L8.82308 5.44278C8.71037 5.24795 8.4286 5.24795 8.31589 5.44278L7.09981 7.54494C7.09518 7.55294 7.09518 7.56281 7.09981 7.57081L7.10128 7.57334C7.1106 7.58946 7.09894 7.60961 7.08029 7.60961C7.07163 7.60961 7.06363 7.61422 7.0593 7.62171L0.0396396 19.7616C-0.0730193 19.9565 0.0678714 20.2 0.293265 20.2H10.9633C11.1887 20.2 11.3296 19.9564 11.2169 19.7616L10.1254 17.8749C10.0731 17.7845 9.97646 17.7288 9.87184 17.7288H4.4145C4.3018 17.7288 4.23135 17.607 4.28771 17.5096L8.4417 10.3288C8.49805 10.2314 8.63894 10.2314 8.6953 10.3288L14.3128 20.0394Z"></path><path d="M10.1282 2.30989C10.0759 2.40032 10.0759 2.51172 10.1282 2.60214L20.2155 20.0394C20.2678 20.1298 20.3645 20.1855 20.4691 20.1855H22.7412C22.9666 20.1855 23.1075 19.942 22.9948 19.7472L11.7715 0.346077C11.6588 0.151242 11.377 0.151243 11.2643 0.346077L10.1282 2.30989Z"></path></svg><span class="amplify-text GlobalNav_dev-center-logo__2MCYI">Amplify Dev Center<span class="GlobalNav_mobile-only__s7Y_2"> <svg style="transform:rotate(270deg);width:10px;height:9px" class="amplify-icon GlobalNav_chevron-icon__AWCXb" viewBox="2 -1.5 11 12" aria-hidden="true"><path d="M14.12 0.0599976L8 6.16667L1.88 0.0599976L0 1.94L8 9.94L16 1.94L14.12 0.0599976Z"></path></svg> UI Library</span></span></div><a style="text-decoration:none;cursor:pointer;gap:var(--amplify-space-xs);align-items:center;flex-direction:row" class="amplify-flex GlobalNav_mobile-only__s7Y_2 GlobalNav_mobile-current-link__hQZYC" href="/"><svg style="width:20px;height:20px;color:var(--amplify-colors-primary-60)" class="amplify-icon" viewBox="0 0 24 22" aria-hidden="true"><path d="M14.3128 20.0394C14.3651 20.1298 14.4618 20.1855 14.5664 20.1855H16.8444C17.0698 20.1855 17.2107 19.942 17.098 19.7472L8.82308 5.44278C8.71037 5.24795 8.4286 5.24795 8.31589 5.44278L7.09981 7.54494C7.09518 7.55294 7.09518 7.56281 7.09981 7.57081L7.10128 7.57334C7.1106 7.58946 7.09894 7.60961 7.08029 7.60961C7.07163 7.60961 7.06363 7.61422 7.0593 7.62171L0.0396396 19.7616C-0.0730193 19.9565 0.0678714 20.2 0.293265 20.2H10.9633C11.1887 20.2 11.3296 19.9564 11.2169 19.7616L10.1254 17.8749C10.0731 17.7845 9.97646 17.7288 9.87184 17.7288H4.4145C4.3018 17.7288 4.23135 17.607 4.28771 17.5096L8.4417 10.3288C8.49805 10.2314 8.63894 10.2314 8.6953 10.3288L14.3128 20.0394Z"></path><path d="M10.1282 2.30989C10.0759 2.40032 10.0759 2.51172 10.1282 2.60214L20.2155 20.0394C20.2678 20.1298 20.3645 20.1855 20.4691 20.1855H22.7412C22.9666 20.1855 23.1075 19.942 22.9948 19.7472L11.7715 0.346077C11.6588 0.151242 11.377 0.151243 11.2643 0.346077L10.1282 2.30989Z"></path></svg><span class="amplify-text GlobalNav_dev-center-logo__2MCYI">Amplify Dev Center<span class="GlobalNav_mobile-only__s7Y_2"> <svg style="transform:rotate(270deg);width:10px;height:9px" class="amplify-icon GlobalNav_chevron-icon__AWCXb" viewBox="2 -1.5 11 12" aria-hidden="true"><path d="M14.12 0.0599976L8 6.16667L1.88 0.0599976L0 1.94L8 9.94L16 1.94L14.12 0.0599976Z"></path></svg> UI Library</span></span></a><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--large GlobalNav_mobile-only__s7Y_2 GlobalNav_nav-expander___P1K6" type="button" aria-expanded="false" aria-controls="mobile-nav-links"><span class="amplify-visually-hidden">Open Dev Center menu</span><svg style="transform:rotate(0deg);width:10px;height:9px" class="amplify-icon GlobalNav_chevron-icon__AWCXb" viewBox="2 -1.5 11 12" aria-hidden="true"><path d="M14.12 0.0599976L8 6.16667L1.88 0.0599976L0 1.94L8 9.94L16 1.94L14.12 0.0599976Z"></path></svg></button></div><div class="amplify-flex GlobalNav_left-nav-links__COtFv GlobalNav_collapsed-menu__DZKMg"><div class="GlobalNav_mobile-border__ssz74"><a class="amplify-link GlobalNav_nav-menu-item__j3csT " href="https://docs.amplify.aws/">Docs</a></div><div class="GlobalNav_mobile-border__ssz74"><a class="amplify-link GlobalNav_nav-menu-item__j3csT GlobalNav_current-nav-menu-item__PMv7u" href="https://ui.docs.amplify.aws/">UI Library</a></div><div class="GlobalNav_mobile-border__ssz74"><a class="amplify-link GlobalNav_nav-menu-item__j3csT " href="https://docs.amplify.aws/contribute/">Contribute</a></div></div></div><div class="amplify-flex GlobalNav_right-nav-links__jLl5J GlobalNav_collapsed-menu__DZKMg" id="right-nav"><div class="GlobalNav_mobile-border__ssz74"><a class="amplify-link GlobalNav_nav-menu-item__j3csT" rel="noopener noreferrer" target="_blank" href="https://aws.amazon.com/amplify/"><div style="align-items:center;gap:var(--amplify-space-xs)" class="amplify-flex">About AWS Amplify<svg class="amplify-icon" viewBox="0 0 16 16" aria-hidden="true"><path class="GlobalNav_custom-path-stroke__LzN5t" d="M9.79505 1.59277L16.3138 1.59278M16.3138 1.59278L16.3138 8.11155M16.3138 1.59278L9.79504 8.11156" stroke-width="1.5" stroke-linecap="round"></path><path d="M17.0834 12.3333C17.0834 11.9191 16.7476 11.5833 16.3334 11.5833C15.9192 11.5833 15.5834 11.9191 15.5834 12.3333H17.0834ZM5.66675 2.41663C6.08096 2.41663 6.41675 2.08084 6.41675 1.66663C6.41675 1.25241 6.08096 0.916626 5.66675 0.916626V2.41663ZM15.5834 12.3333V13.6666H17.0834V12.3333H15.5834ZM13.6667 15.5833H4.33341V17.0833H13.6667V15.5833ZM4.33341 15.5833C3.27487 15.5833 2.41675 14.7252 2.41675 13.6666H0.916748C0.916748 15.5536 2.44644 17.0833 4.33341 17.0833V15.5833ZM15.5834 13.6666C15.5834 14.7252 14.7253 15.5833 13.6667 15.5833V17.0833C15.5537 17.0833 17.0834 15.5536 17.0834 13.6666H15.5834ZM4.33341 2.41663H5.66675V0.916626H4.33341V2.41663ZM2.41675 4.33329C2.41675 3.27475 3.27487 2.41663 4.33341 2.41663V0.916626C2.44644 0.916626 0.916748 2.44632 0.916748 4.33329H2.41675ZM2.41675 13.6666V4.33329H0.916748V13.6666H2.41675Z"></path></svg></div></a></div><div class="GlobalNav_mobile-border__ssz74"><a class="amplify-link GlobalNav_nav-menu-item__j3csT" rel="noopener noreferrer" target="_blank" href="https://aws.amazon.com/amplify/pricing/"><div style="align-items:center;gap:var(--amplify-space-xs)" class="amplify-flex">Pricing<svg class="amplify-icon" viewBox="0 0 16 16" aria-hidden="true"><path class="GlobalNav_custom-path-stroke__LzN5t" d="M9.79505 1.59277L16.3138 1.59278M16.3138 1.59278L16.3138 8.11155M16.3138 1.59278L9.79504 8.11156" stroke-width="1.5" stroke-linecap="round"></path><path d="M17.0834 12.3333C17.0834 11.9191 16.7476 11.5833 16.3334 11.5833C15.9192 11.5833 15.5834 11.9191 15.5834 12.3333H17.0834ZM5.66675 2.41663C6.08096 2.41663 6.41675 2.08084 6.41675 1.66663C6.41675 1.25241 6.08096 0.916626 5.66675 0.916626V2.41663ZM15.5834 12.3333V13.6666H17.0834V12.3333H15.5834ZM13.6667 15.5833H4.33341V17.0833H13.6667V15.5833ZM4.33341 15.5833C3.27487 15.5833 2.41675 14.7252 2.41675 13.6666H0.916748C0.916748 15.5536 2.44644 17.0833 4.33341 17.0833V15.5833ZM15.5834 13.6666C15.5834 14.7252 14.7253 15.5833 13.6667 15.5833V17.0833C15.5537 17.0833 17.0834 15.5536 17.0834 13.6666H15.5834ZM4.33341 2.41663H5.66675V0.916626H4.33341V2.41663ZM2.41675 4.33329C2.41675 3.27475 3.27487 2.41663 4.33341 2.41663V0.916626C2.44644 0.916626 0.916748 2.44632 0.916748 4.33329H2.41675ZM2.41675 13.6666V4.33329H0.916748V13.6666H2.41675Z"></path></svg></div></a></div></div></div><div class=""></div></nav><header class="amplify-flex docs-header"><button class="amplify-button amplify-field-group__control amplify-button--small docs-header-menu-button open" type="button" aria-expanded="false" aria-controls="docs-sidebar"><span class="amplify-visually-hidden">Open menu</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="docs-header-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></button><aside aria-label="Main navigation" id="docs-sidebar" class="docs-sidebar collapsed"><div class="docs-sidebar-overlay"></div><div class="docs-sidebar-inner"><div style="flex-direction:column" class="amplify-flex docs-sidebar-nav"><nav style="flex-direction:row;align-items:center;justify-content:space-between" class="amplify-flex"><a class="docs-logo-link" href="/react">Amplify UI</a><button class="amplify-button amplify-field-group__control amplify-button--small docs-header-menu-button open" type="button" aria-expanded="false" aria-controls="docs-sidebar"><span class="amplify-visually-hidden">Open menu</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="docs-header-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></button></nav><div class="amplify-flex docs-framework-chooser"><a disabled="" class="amplify-button amplify-field-group__control amplify-button--small amplify-button--disabled docs-framework-link " type="button"><svg class="amplify-icon docs-framework-img" viewBox="0 0 40 34"><g transform="scale(0.03, 0.036) translate(0,75)"><path d="M930.77,536.42a53.07,53.07,0,1,1,53.06-53.08,53.14,53.14,0,0,1-53.06,53.08m-586.54,0a53.07,53.07,0,1,1,53.06-53.08,53.13,53.13,0,0,1-53.06,53.08M949.8,216.77,1055.85,33.09A22.06,22.06,0,1,0,1017.64,11L910.25,197c-82.12-37.48-174.35-58.35-272.76-58.35S446.86,159.55,364.74,197L257.36,11a22.06,22.06,0,1,0-38.22,22.06L325.2,216.77C143.09,315.82,18.53,500.18.31,718H1274.69c-18.24-217.82-142.79-402.18-324.89-501.23" fill="#3ddc84"></path></g></svg>Android</a><a disabled="" class="amplify-button amplify-field-group__control amplify-button--small amplify-button--disabled docs-framework-link " type="button"><svg class="amplify-icon docs-framework-img" viewBox="0 0 70 70"><g transform="translate(10.000000, 8.000000)"><polygon fill="#000000" points="25.2197802 -0.000168131868 0 8.96686484 3.92307692 42.0333593 25.2197802 53.8020297 46.7967033 41.892689 51 8.82675495"></polygon><polygon fill="#DE3641" points="25.2197802 -0.000168131868 0 8.96686484 3.92307692 42.0333593 25.2197802 53.8020297"></polygon><polygon fill="#B13138" points="25.2197802 -0.000168131868 25.2197802 53.8020297 46.7967033 41.892689 51 8.82675495"></polygon><polygon fill="#FFFFFF" points="25.2197802 6.02472527 41.6126374 41.0521978 36.0082418 41.0521978 32.5054945 33.0659341 25.2197802 33.0659341 25.2197802 28.3021978 30.543956 28.3021978 25.2197802 17.2895604 20.7362637 28.3021978 25.2197802 28.3021978 25.2197802 33.0659341 18.5505495 33.0659341 15.4120879 41.0521978 9.38736264 41.0521978"></polygon></g></svg>Angular</a><a disabled="" class="amplify-button amplify-field-group__control amplify-button--small amplify-button--disabled docs-framework-link " type="button"><svg class="amplify-icon docs-framework-img" viewBox="0 0 44 44"><g transform="scale(0.8) translate(5,5)"><path d="M37.0631 20.0376H23.7056L12.0195 31.7265L18.6969 38.4038L37.0631 20.0376Z" fill="#54C5F8"></path><path d="M8.68014 28.3864L2 21.7063L23.7063 0H37.0638L8.68014 28.3864Z" fill="#54C5F8"></path><path d="M18.6975 38.4039L23.7062 43.4126H37.0637L25.3749 31.7266L18.6975 38.4039Z" fill="#01579B"></path><path d="M18.6966 25.0456L12.019 31.7231L18.6966 38.4007L25.3741 31.7231L18.6966 25.0456Z" fill="#29B6F6"></path></g></svg>Flutter</a><a class="amplify-button amplify-field-group__control amplify-button--small docs-framework-link current" type="button" href="/react/components/collection"><svg class="amplify-icon docs-framework-img" viewBox="0 0 70 70"><path d="M23.9381606,8.33333333 C23.9952526,8.36500885 24.0500692,8.41873301 24.1098503,8.42504741 C25.8858045,8.61240913 27.5036179,9.26838219 29.0614433,10.0983636 C31.4167985,11.353273 33.5117231,12.9699666 35.4737433,14.7655337 C35.734691,15.0044457 35.9078286,15.0086898 36.1660872,14.7697778 C36.7596578,14.220839 37.3629506,13.6798708 37.9911694,13.1711993 C40.2231355,11.363935 42.5842825,9.76939364 45.3432119,8.8632254 C45.9569508,8.66157865 46.5868245,8.50868734 47.2093548,8.33333333 L49.2779054,8.33333333 C49.4366667,8.38136418 49.5934628,8.4375727 49.7544995,8.47608019 C51.7478582,8.95235162 52.9516512,10.3068423 53.684849,12.1186612 C54.6356583,14.4680322 54.8064171,16.9408964 54.5817725,19.4330143 C54.4016018,21.4320914 54.0968009,23.4197819 53.8434034,25.4445307 C54.9392181,25.8537245 56.1365986,26.2699574 57.3101908,26.7451937 C59.8480955,27.7728882 62.2518547,29.0453952 64.2383873,30.9676643 C65.6857521,32.3683226 66.7701898,33.9776666 66.6587983,36.1301526 C66.5858819,37.5377463 65.9558014,38.7052893 65.085769,39.7621751 C63.4482009,41.7513148 61.3192487,43.0861376 59.019641,44.1388828 C57.4121703,44.8748727 55.7301284,45.448034 54.081597,46.0941731 C54.0037161,46.12471 53.9269729,46.1582488 53.8192014,46.2031742 C53.9803415,47.0578956 54.1625808,47.8954335 54.2931063,48.7410456 C54.7762163,51.8691582 55.0428525,55.0001693 54.2408754,58.1206218 C53.8936692,59.472007 53.3557426,60.7310571 52.3458762,61.7383592 C51.0525149,63.0283602 49.4673846,63.4245112 47.7030144,63.230421 C44.747159,62.9051776 42.2457642,61.4973769 39.8857549,59.8212658 C38.611114,58.9159257 37.4366944,57.8690809 36.2168701,56.8862082 C36.112098,56.8017402 36.0064985,56.7181003 35.9005887,56.6334252 C34.9124421,57.452848 33.9680453,58.2811732 32.9768993,59.0489422 C30.7164907,60.7997909 28.3175925,62.311624 25.5072597,63.0242196 C23.9811865,63.4111578 22.4440466,63.5204694 20.956345,62.8440004 C19.1093361,62.0040816 18.1917271,60.4106789 17.6462503,58.5734989 C16.9090189,56.0911113 16.8683719,53.5478571 17.194272,50.9990131 C17.3859232,49.4998088 17.6420098,48.0081611 17.9047157,46.5195153 C17.9802178,46.0916888 17.6738655,46.1252275 17.463287,46.0375505 C15.4954748,45.2189558 13.4784312,44.5024266 11.5672973,43.5682059 C9.41972803,42.5182556 7.47953101,41.132193 6.10342773,39.1042352 C4.57487227,36.8513399 4.63651507,34.468016 6.27532428,32.2912041 C7.54324236,30.6072259 9.20563305,29.3896853 11.0175799,28.3619907 C13.0014234,27.2367853 15.0933486,26.3556676 17.2732906,25.692552 C17.7657091,25.5427662 17.9025437,25.3547834 17.7792581,24.8184734 C17.1312846,22.0020437 16.8325859,19.1417238 17.0262023,16.2552146 C17.1715179,14.0867874 17.6126364,11.9859553 19.0529681,10.2388331 C19.8918688,9.22138648 20.9799264,8.65412558 22.2689437,8.44336953 C22.3801283,8.42525444 22.485521,8.37090919 22.5936028,8.33333333 L23.9381606,8.33333333 Z M20.6427527,47.026013 C20.0319097,49.8918192 19.5623487,52.7800881 19.9362392,55.716802 C20.0754527,56.8096073 20.3964918,57.9047935 20.8055476,58.9306248 C21.2462523,60.0355414 22.1892011,60.6122221 23.4011649,60.4938012 C24.23024,60.4127492 25.0744155,60.2600649 25.8582927,59.9860613 C28.1132197,59.1981069 30.0425569,57.8386476 31.8778784,56.3422382 C32.5394009,55.8029262 33.1729979,55.2293509 33.7930459,54.6940761 C33.7500201,54.5725498 33.746607,54.5343528 33.7263352,54.5100269 C32.0830786,52.5205766 30.4420974,50.5290561 28.785809,48.5504749 C28.6710044,48.4134214 28.4480146,48.326469 28.2625691,48.2967602 C27.5849119,48.1884838 26.897636,48.1386932 26.2216336,48.0225496 C24.3787619,47.7057945 22.5400273,47.3665766 20.6427527,47.026013 Z M51.0746484,47.0291185 C48.8315122,47.4157461 46.6885972,47.8189361 44.5333743,48.140453 C43.6378988,48.2740905 42.9171123,48.4119722 42.3004774,49.2696955 C40.9669863,51.1248871 39.4385342,52.8396091 37.9088411,54.7108455 C39.0017598,55.5847171 40.0977813,56.5260804 41.2607204,57.375626 C43.0903534,58.7124157 45.0185529,59.8996265 47.2867186,60.3294198 C49.2293979,60.6974148 50.4519113,60.4188565 51.2097248,58.2469098 C51.5671703,57.2223207 51.7539605,56.1109862 51.8407362,55.0247023 C51.9892581,53.1674404 51.8599737,51.3060379 51.5461745,49.4652349 C51.4031343,48.6257302 51.2234807,47.7925398 51.0746484,47.0291185 Z M39.334693,48.6527475 L32.3443365,48.6527475 C33.5497844,50.0378786 34.6738348,51.3291217 35.868733,52.702245 C37.0591839,51.3113172 38.1661688,50.0179002 39.334693,48.6527475 Z M35.8572526,25.7391337 C34.0795402,25.8334356 32.2928296,25.9200775 30.5077739,26.0343578 C30.3188118,26.0463655 30.0715166,26.1728605 29.9668479,26.3255448 C27.9562167,29.2578075 26.1927774,32.3339557 24.6793223,35.5517121 C24.6033031,35.7132986 24.584893,35.968359 24.6581197,36.1241487 C26.1774701,39.3589851 27.9665595,42.4399985 30.0036681,45.3751596 C30.112267,45.5316739 30.3553217,45.6704872 30.5446975,45.6830125 C31.9345567,45.774623 33.3272084,45.8945967 34.7181018,45.8854874 C36.8508809,45.8718234 38.9834531,45.7716211 41.1148876,45.6773192 C41.328362,45.6678993 41.605341,45.4965824 41.730178,45.3156386 C43.7089535,42.4451742 45.4221271,39.4200588 46.9432358,36.2835615 C47.1123398,35.9349238 47.0874137,35.6498441 46.9253428,35.3141457 C45.4153009,32.1901737 43.676891,29.1995287 41.7078377,26.3441775 C41.6004799,26.1883877 41.3645617,26.0433636 41.1796333,26.0314594 C39.4118499,25.9172826 37.6423083,25.8330216 35.8572526,25.7391337 Z M48.6607533,39.2260721 C47.4864372,41.2792874 46.3831757,43.2085956 45.2120658,45.2562211 C46.9768497,44.9105853 48.6343793,44.5856525 50.4055758,44.2385675 C49.8025933,42.506455 49.244912,40.9044605 48.6607533,39.2260721 Z M23.0016244,39.2754487 C22.4318421,40.946798 21.8814008,42.5620424 21.3046889,44.2540947 C23.0675077,44.5924845 24.715522,44.9088256 26.4601375,45.2436958 C25.2771334,43.2022812 24.174596,41.2996798 23.0016244,39.2754487 Z M53.1183764,28.1695568 C53.0396681,28.2686204 53.0099844,28.2919112 52.9988142,28.322034 C52.1169911,30.7281312 51.2310309,33.1326756 50.3668939,35.5451907 C50.3010105,35.7291364 50.3420712,35.9871987 50.4157116,36.1793221 C50.7483346,37.0469828 51.135981,37.8938371 51.4568132,38.7656385 C52.0204932,40.2974499 52.5497319,41.8419937 53.1454744,43.5280421 C54.7559445,42.8682391 56.3699311,42.27541 57.923516,41.5525664 C59.6933679,40.729003 61.3520352,39.7033787 62.6879052,38.2409221 C63.3470488,37.5193207 63.9216922,36.7360245 63.8629453,35.6856602 C63.8108179,34.7528887 63.2862334,34.0373946 62.6792173,33.3922906 C60.9036769,31.5050095 58.6534041,30.3515445 56.3092191,29.3652558 C55.2542583,28.9213845 54.1649596,28.5589793 53.1183764,28.1695568 Z M18.5304523,28.1543401 C17.2413315,28.6559727 15.929043,29.1155782 14.6593667,29.6722806 C12.5853344,30.5819683 10.6210388,31.6799494 9.03042681,33.3423965 C7.68586893,34.7476094 7.45512211,35.9831616 8.31346718,37.3760563 C8.52828616,37.724694 8.79823201,38.047039 9.08162344,38.3444369 C10.769147,40.1146428 12.8901354,41.2185243 15.0935555,42.1726198 C16.2250526,42.6626587 17.3999894,43.0521848 18.5797872,43.4963666 C18.6635635,43.299171 18.7213795,43.1777482 18.7675082,43.0519778 C19.6026855,40.7759987 20.4429307,38.5017793 21.2596979,36.2192788 C21.3376823,36.0014837 21.3348897,35.7057421 21.2542163,35.4890857 C20.9304881,34.6187335 20.5351881,33.7747777 20.2144593,32.9033904 C19.645401,31.3578115 19.1114047,29.7991897 18.5304523,28.1543401 Z M35.9197634,30.083602 C39.1034726,30.0946538 41.6452631,32.6639526 41.6291233,35.8555002 C41.6129332,39.0429297 39.063866,41.5322338 35.8227738,41.5131943 C32.7804427,41.4950677 30.0964425,39.1061429 30.1172334,35.7841537 C30.1389599,32.3255456 32.980451,30.0732396 35.9197634,30.083602 Z M26.4512428,26.4049406 C24.6884239,26.7467464 23.021379,27.0699195 21.2673515,27.410069 C21.8597844,29.124998 22.4128114,30.7258539 22.9988318,32.4228749 C24.1809051,30.36231 25.2864419,28.4352792 26.4512428,26.4049406 Z M45.2019299,26.3979016 C46.3786249,28.4326913 47.492436,30.3585835 48.6637527,32.3842639 C49.2406715,30.6878639 49.7862517,29.0837992 50.3593436,27.3990964 C48.6149349,27.0603961 46.9581293,26.7387757 45.2019299,26.3979016 Z M47.0888617,11.293545 C45.3745504,11.6381457 43.8643016,12.464504 42.4107311,13.3986212 C40.7859881,14.4425676 39.2924946,15.6538974 37.8552656,17.0058002 C37.9640714,17.1602442 38.0263347,17.2629308 38.1021471,17.3542309 C39.6848986,19.2596271 41.2655815,21.1666796 42.8601238,23.0621384 C42.9773071,23.2014693 43.1863342,23.308193 43.3684701,23.339972 C43.9937929,23.4489731 44.6292517,23.4990742 45.2549882,23.6059014 C47.1642604,23.9318694 49.0708435,24.2739857 51.0190044,24.6170336 C51.0532389,24.4774957 51.1133303,24.2988293 51.1397044,24.1155046 C51.3783117,22.4499521 51.6961445,20.7901964 51.8235672,19.1159486 C51.9742611,17.1365393 51.855216,15.1552667 51.1408421,13.2637415 C50.7219606,12.1542703 50.0544393,11.2764651 48.7737996,11.1691203 C48.2184972,11.1226421 47.6380619,11.1830948 47.0888617,11.293545 Z M20.4426204,13.4766714 C20.0861057,14.519065 19.8528767,15.6544149 19.837466,16.7514644 C19.8124365,18.5337816 19.9767828,20.3224132 20.132855,22.1021425 C20.2084605,22.9646275 20.446861,23.8128275 20.5968309,24.5908444 C23.1906899,24.1687112 25.660229,23.7523748 28.1362841,23.3786865 C28.5235167,23.3200972 28.734302,23.1544736 28.9592569,22.8678412 C30.0112183,21.5278426 31.0796247,20.2004728 32.1599253,18.8831439 C32.6785109,18.2509792 33.2368127,17.6514217 33.8328655,16.9738141 C32.6456209,16.0282067 31.5339818,15.0763885 30.3540806,14.2185617 C28.5360315,12.8968852 26.6226222,11.7017037 24.3675917,11.3106249 C22.2957315,10.9513252 21.1977448,11.2694261 20.4426204,13.4766714 Z M35.7991263,18.9529129 C34.6101234,20.339079 33.5034489,21.6291835 32.3376138,22.9884359 L39.3099738,22.9884359 C38.1091802,21.60817 36.9859572,20.3171339 35.7991263,18.9529129 Z" fill="#04B5E5"></path></svg>React</a><a disabled="" class="amplify-button amplify-field-group__control amplify-button--small amplify-button--disabled docs-framework-link " type="button"><svg class="amplify-icon docs-framework-img" viewBox="0 0 70 70"><path d="M23.9381606,8.33333333 C23.9952526,8.36500885 24.0500692,8.41873301 24.1098503,8.42504741 C25.8858045,8.61240913 27.5036179,9.26838219 29.0614433,10.0983636 C31.4167985,11.353273 33.5117231,12.9699666 35.4737433,14.7655337 C35.734691,15.0044457 35.9078286,15.0086898 36.1660872,14.7697778 C36.7596578,14.220839 37.3629506,13.6798708 37.9911694,13.1711993 C40.2231355,11.363935 42.5842825,9.76939364 45.3432119,8.8632254 C45.9569508,8.66157865 46.5868245,8.50868734 47.2093548,8.33333333 L49.2779054,8.33333333 C49.4366667,8.38136418 49.5934628,8.4375727 49.7544995,8.47608019 C51.7478582,8.95235162 52.9516512,10.3068423 53.684849,12.1186612 C54.6356583,14.4680322 54.8064171,16.9408964 54.5817725,19.4330143 C54.4016018,21.4320914 54.0968009,23.4197819 53.8434034,25.4445307 C54.9392181,25.8537245 56.1365986,26.2699574 57.3101908,26.7451937 C59.8480955,27.7728882 62.2518547,29.0453952 64.2383873,30.9676643 C65.6857521,32.3683226 66.7701898,33.9776666 66.6587983,36.1301526 C66.5858819,37.5377463 65.9558014,38.7052893 65.085769,39.7621751 C63.4482009,41.7513148 61.3192487,43.0861376 59.019641,44.1388828 C57.4121703,44.8748727 55.7301284,45.448034 54.081597,46.0941731 C54.0037161,46.12471 53.9269729,46.1582488 53.8192014,46.2031742 C53.9803415,47.0578956 54.1625808,47.8954335 54.2931063,48.7410456 C54.7762163,51.8691582 55.0428525,55.0001693 54.2408754,58.1206218 C53.8936692,59.472007 53.3557426,60.7310571 52.3458762,61.7383592 C51.0525149,63.0283602 49.4673846,63.4245112 47.7030144,63.230421 C44.747159,62.9051776 42.2457642,61.4973769 39.8857549,59.8212658 C38.611114,58.9159257 37.4366944,57.8690809 36.2168701,56.8862082 C36.112098,56.8017402 36.0064985,56.7181003 35.9005887,56.6334252 C34.9124421,57.452848 33.9680453,58.2811732 32.9768993,59.0489422 C30.7164907,60.7997909 28.3175925,62.311624 25.5072597,63.0242196 C23.9811865,63.4111578 22.4440466,63.5204694 20.956345,62.8440004 C19.1093361,62.0040816 18.1917271,60.4106789 17.6462503,58.5734989 C16.9090189,56.0911113 16.8683719,53.5478571 17.194272,50.9990131 C17.3859232,49.4998088 17.6420098,48.0081611 17.9047157,46.5195153 C17.9802178,46.0916888 17.6738655,46.1252275 17.463287,46.0375505 C15.4954748,45.2189558 13.4784312,44.5024266 11.5672973,43.5682059 C9.41972803,42.5182556 7.47953101,41.132193 6.10342773,39.1042352 C4.57487227,36.8513399 4.63651507,34.468016 6.27532428,32.2912041 C7.54324236,30.6072259 9.20563305,29.3896853 11.0175799,28.3619907 C13.0014234,27.2367853 15.0933486,26.3556676 17.2732906,25.692552 C17.7657091,25.5427662 17.9025437,25.3547834 17.7792581,24.8184734 C17.1312846,22.0020437 16.8325859,19.1417238 17.0262023,16.2552146 C17.1715179,14.0867874 17.6126364,11.9859553 19.0529681,10.2388331 C19.8918688,9.22138648 20.9799264,8.65412558 22.2689437,8.44336953 C22.3801283,8.42525444 22.485521,8.37090919 22.5936028,8.33333333 L23.9381606,8.33333333 Z M20.6427527,47.026013 C20.0319097,49.8918192 19.5623487,52.7800881 19.9362392,55.716802 C20.0754527,56.8096073 20.3964918,57.9047935 20.8055476,58.9306248 C21.2462523,60.0355414 22.1892011,60.6122221 23.4011649,60.4938012 C24.23024,60.4127492 25.0744155,60.2600649 25.8582927,59.9860613 C28.1132197,59.1981069 30.0425569,57.8386476 31.8778784,56.3422382 C32.5394009,55.8029262 33.1729979,55.2293509 33.7930459,54.6940761 C33.7500201,54.5725498 33.746607,54.5343528 33.7263352,54.5100269 C32.0830786,52.5205766 30.4420974,50.5290561 28.785809,48.5504749 C28.6710044,48.4134214 28.4480146,48.326469 28.2625691,48.2967602 C27.5849119,48.1884838 26.897636,48.1386932 26.2216336,48.0225496 C24.3787619,47.7057945 22.5400273,47.3665766 20.6427527,47.026013 Z M51.0746484,47.0291185 C48.8315122,47.4157461 46.6885972,47.8189361 44.5333743,48.140453 C43.6378988,48.2740905 42.9171123,48.4119722 42.3004774,49.2696955 C40.9669863,51.1248871 39.4385342,52.8396091 37.9088411,54.7108455 C39.0017598,55.5847171 40.0977813,56.5260804 41.2607204,57.375626 C43.0903534,58.7124157 45.0185529,59.8996265 47.2867186,60.3294198 C49.2293979,60.6974148 50.4519113,60.4188565 51.2097248,58.2469098 C51.5671703,57.2223207 51.7539605,56.1109862 51.8407362,55.0247023 C51.9892581,53.1674404 51.8599737,51.3060379 51.5461745,49.4652349 C51.4031343,48.6257302 51.2234807,47.7925398 51.0746484,47.0291185 Z M39.334693,48.6527475 L32.3443365,48.6527475 C33.5497844,50.0378786 34.6738348,51.3291217 35.868733,52.702245 C37.0591839,51.3113172 38.1661688,50.0179002 39.334693,48.6527475 Z M35.8572526,25.7391337 C34.0795402,25.8334356 32.2928296,25.9200775 30.5077739,26.0343578 C30.3188118,26.0463655 30.0715166,26.1728605 29.9668479,26.3255448 C27.9562167,29.2578075 26.1927774,32.3339557 24.6793223,35.5517121 C24.6033031,35.7132986 24.584893,35.968359 24.6581197,36.1241487 C26.1774701,39.3589851 27.9665595,42.4399985 30.0036681,45.3751596 C30.112267,45.5316739 30.3553217,45.6704872 30.5446975,45.6830125 C31.9345567,45.774623 33.3272084,45.8945967 34.7181018,45.8854874 C36.8508809,45.8718234 38.9834531,45.7716211 41.1148876,45.6773192 C41.328362,45.6678993 41.605341,45.4965824 41.730178,45.3156386 C43.7089535,42.4451742 45.4221271,39.4200588 46.9432358,36.2835615 C47.1123398,35.9349238 47.0874137,35.6498441 46.9253428,35.3141457 C45.4153009,32.1901737 43.676891,29.1995287 41.7078377,26.3441775 C41.6004799,26.1883877 41.3645617,26.0433636 41.1796333,26.0314594 C39.4118499,25.9172826 37.6423083,25.8330216 35.8572526,25.7391337 Z M48.6607533,39.2260721 C47.4864372,41.2792874 46.3831757,43.2085956 45.2120658,45.2562211 C46.9768497,44.9105853 48.6343793,44.5856525 50.4055758,44.2385675 C49.8025933,42.506455 49.244912,40.9044605 48.6607533,39.2260721 Z M23.0016244,39.2754487 C22.4318421,40.946798 21.8814008,42.5620424 21.3046889,44.2540947 C23.0675077,44.5924845 24.715522,44.9088256 26.4601375,45.2436958 C25.2771334,43.2022812 24.174596,41.2996798 23.0016244,39.2754487 Z M53.1183764,28.1695568 C53.0396681,28.2686204 53.0099844,28.2919112 52.9988142,28.322034 C52.1169911,30.7281312 51.2310309,33.1326756 50.3668939,35.5451907 C50.3010105,35.7291364 50.3420712,35.9871987 50.4157116,36.1793221 C50.7483346,37.0469828 51.135981,37.8938371 51.4568132,38.7656385 C52.0204932,40.2974499 52.5497319,41.8419937 53.1454744,43.5280421 C54.7559445,42.8682391 56.3699311,42.27541 57.923516,41.5525664 C59.6933679,40.729003 61.3520352,39.7033787 62.6879052,38.2409221 C63.3470488,37.5193207 63.9216922,36.7360245 63.8629453,35.6856602 C63.8108179,34.7528887 63.2862334,34.0373946 62.6792173,33.3922906 C60.9036769,31.5050095 58.6534041,30.3515445 56.3092191,29.3652558 C55.2542583,28.9213845 54.1649596,28.5589793 53.1183764,28.1695568 Z M18.5304523,28.1543401 C17.2413315,28.6559727 15.929043,29.1155782 14.6593667,29.6722806 C12.5853344,30.5819683 10.6210388,31.6799494 9.03042681,33.3423965 C7.68586893,34.7476094 7.45512211,35.9831616 8.31346718,37.3760563 C8.52828616,37.724694 8.79823201,38.047039 9.08162344,38.3444369 C10.769147,40.1146428 12.8901354,41.2185243 15.0935555,42.1726198 C16.2250526,42.6626587 17.3999894,43.0521848 18.5797872,43.4963666 C18.6635635,43.299171 18.7213795,43.1777482 18.7675082,43.0519778 C19.6026855,40.7759987 20.4429307,38.5017793 21.2596979,36.2192788 C21.3376823,36.0014837 21.3348897,35.7057421 21.2542163,35.4890857 C20.9304881,34.6187335 20.5351881,33.7747777 20.2144593,32.9033904 C19.645401,31.3578115 19.1114047,29.7991897 18.5304523,28.1543401 Z M35.9197634,30.083602 C39.1034726,30.0946538 41.6452631,32.6639526 41.6291233,35.8555002 C41.6129332,39.0429297 39.063866,41.5322338 35.8227738,41.5131943 C32.7804427,41.4950677 30.0964425,39.1061429 30.1172334,35.7841537 C30.1389599,32.3255456 32.980451,30.0732396 35.9197634,30.083602 Z M26.4512428,26.4049406 C24.6884239,26.7467464 23.021379,27.0699195 21.2673515,27.410069 C21.8597844,29.124998 22.4128114,30.7258539 22.9988318,32.4228749 C24.1809051,30.36231 25.2864419,28.4352792 26.4512428,26.4049406 Z M45.2019299,26.3979016 C46.3786249,28.4326913 47.492436,30.3585835 48.6637527,32.3842639 C49.2406715,30.6878639 49.7862517,29.0837992 50.3593436,27.3990964 C48.6149349,27.0603961 46.9581293,26.7387757 45.2019299,26.3979016 Z M47.0888617,11.293545 C45.3745504,11.6381457 43.8643016,12.464504 42.4107311,13.3986212 C40.7859881,14.4425676 39.2924946,15.6538974 37.8552656,17.0058002 C37.9640714,17.1602442 38.0263347,17.2629308 38.1021471,17.3542309 C39.6848986,19.2596271 41.2655815,21.1666796 42.8601238,23.0621384 C42.9773071,23.2014693 43.1863342,23.308193 43.3684701,23.339972 C43.9937929,23.4489731 44.6292517,23.4990742 45.2549882,23.6059014 C47.1642604,23.9318694 49.0708435,24.2739857 51.0190044,24.6170336 C51.0532389,24.4774957 51.1133303,24.2988293 51.1397044,24.1155046 C51.3783117,22.4499521 51.6961445,20.7901964 51.8235672,19.1159486 C51.9742611,17.1365393 51.855216,15.1552667 51.1408421,13.2637415 C50.7219606,12.1542703 50.0544393,11.2764651 48.7737996,11.1691203 C48.2184972,11.1226421 47.6380619,11.1830948 47.0888617,11.293545 Z M20.4426204,13.4766714 C20.0861057,14.519065 19.8528767,15.6544149 19.837466,16.7514644 C19.8124365,18.5337816 19.9767828,20.3224132 20.132855,22.1021425 C20.2084605,22.9646275 20.446861,23.8128275 20.5968309,24.5908444 C23.1906899,24.1687112 25.660229,23.7523748 28.1362841,23.3786865 C28.5235167,23.3200972 28.734302,23.1544736 28.9592569,22.8678412 C30.0112183,21.5278426 31.0796247,20.2004728 32.1599253,18.8831439 C32.6785109,18.2509792 33.2368127,17.6514217 33.8328655,16.9738141 C32.6456209,16.0282067 31.5339818,15.0763885 30.3540806,14.2185617 C28.5360315,12.8968852 26.6226222,11.7017037 24.3675917,11.3106249 C22.2957315,10.9513252 21.1977448,11.2694261 20.4426204,13.4766714 Z M35.7991263,18.9529129 C34.6101234,20.339079 33.5034489,21.6291835 32.3376138,22.9884359 L39.3099738,22.9884359 C38.1091802,21.60817 36.9859572,20.3171339 35.7991263,18.9529129 Z" fill="#04B5E5"></path></svg>React Native</a><a disabled="" class="amplify-button amplify-field-group__control amplify-button--small amplify-button--disabled docs-framework-link " type="button"><svg class="amplify-icon docs-framework-img" viewBox="0 0 70 70"><g transform="matrix(0.535411, 0, 0, 0.535917, 141.51651, -177.655396)"><path fill="#F05138" d="M-145.9,373.3c0-1.1,0-2.1,0-3.2c-0.1-2.3-0.2-4.7-0.6-7c-0.4-2.3-1.1-4.5-2.2-6.6c-1.1-2.1-2.4-4-4.1-5.6 c-1.7-1.7-3.6-3-5.6-4.1c-2.1-1.1-4.3-1.8-6.6-2.2c-2.3-0.4-4.6-0.6-7-0.6c-1.1,0-2.1,0-3.2,0c-1.3,0-2.5,0-3.8,0h-28.1h-11.6 c-1.3,0-2.5,0-3.8,0c-1.1,0-2.1,0-3.2,0c-0.6,0-1.2,0-1.7,0.1c-1.7,0.1-3.5,0.2-5.2,0.5c-1.7,0.3-3.4,0.8-5,1.4 c-0.5,0.2-1.1,0.5-1.6,0.7c-1.6,0.8-3,1.8-4.4,2.9c-0.4,0.4-0.9,0.8-1.3,1.2c-1.7,1.7-3,3.6-4.1,5.6c-1.1,2.1-1.8,4.3-2.2,6.6 c-0.4,2.3-0.5,4.6-0.6,7c0,1.1,0,2.1,0,3.2c0,1.3,0,2.5,0,3.8v17.3v22.4c0,1.3,0,2.5,0,3.8c0,1.1,0,2.1,0,3.2 c0.1,2.3,0.2,4.7,0.6,7c0.4,2.3,1.1,4.5,2.2,6.6c1.1,2.1,2.4,4,4.1,5.6c1.7,1.7,3.6,3,5.6,4.1c2.1,1.1,4.3,1.8,6.6,2.2 c2.3,0.4,4.6,0.6,7,0.6c1.1,0,2.1,0,3.2,0c1.3,0,2.5,0,3.8,0h39.7c1.3,0,2.5,0,3.8,0c1.1,0,2.1,0,3.2,0c2.3-0.1,4.7-0.2,7-0.6 c2.3-0.4,4.5-1.1,6.6-2.2c2.1-1.1,4-2.4,5.6-4.1c1.7-1.7,3-3.6,4.1-5.6c1.1-2.1,1.8-4.3,2.2-6.6c0.4-2.3,0.6-4.6,0.6-7 c0-1.1,0-2.1,0-3.2c0-1.3,0-2.5,0-3.8v-39.7C-145.9,375.8-145.9,374.6-145.9,373.3z"></path><path fill="#FFFFFF" d="M-168,409.4c0.1-0.4,0.2-0.8,0.3-1.2c4.4-17.5-6.3-38.3-24.5-49.2c8,10.8,11.5,23.9,8.4,35.3 c-0.3,1-0.6,2-1,3c-0.4-0.3-0.9-0.6-1.6-0.9c0,0-18.1-11.2-37.7-30.9c-0.5-0.5,10.5,15.7,22.9,28.8c-5.9-3.3-22.2-15.2-32.6-24.6 c1.3,2.1,2.8,4.2,4.4,6.1c8.6,11,19.9,24.5,33.4,34.9c-9.5,5.8-22.9,6.3-36.2,0c-3.3-1.5-6.4-3.4-9.3-5.5 c5.6,9,14.3,16.8,24.9,21.4c12.6,5.4,25.2,5.1,34.5,0.1l0,0c0,0,0.1,0,0.1-0.1c0.4-0.2,0.8-0.5,1.2-0.7c4.5-2.3,13.3-4.6,18.1,4.6 C-161.3,432.6-158.8,420.6-168,409.4C-168,409.4-168,409.4-168,409.4z"></path></g></svg>Swift</a><a disabled="" class="amplify-button amplify-field-group__control amplify-button--small amplify-button--disabled docs-framework-link " type="button"><svg class="amplify-icon docs-framework-img" viewBox="0 0 70 70"><g transform="translate(5.000000, 9.000000)"><polygon fill="#3D5269" points="36.8637539 1.171875e-05 29.7655898 12.1603242 22.777582 1.171875e-05 -3.515625e-05 1.171875e-05 29.7655898 51.7968867 59.9999648 1.171875e-05"></polygon><polygon fill="#4AC08E" points="47.8591875 1.171875e-05 29.7655547 30.9975117 11.9527031 1.171875e-05 4.6875e-05 1.171875e-05 29.7655547 51.7968867 59.9999297 1.171875e-05"></polygon></g></svg>Vue</a></div><div class="amplify-accordion"><details class="amplify-accordion__item"><summary class="amplify-accordion__item__trigger"><div style="flex-direction:row;align-items:center;gap:var(--amplify-space-small);padding:var(--amplify-space-small) var(--amplify-space-xs)" class="amplify-flex"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" style="color:var(--amplify-colors-primary-60);height:var(--amplify-font-sizes-large);width:var(--amplify-font-sizes-large)" color="var(--amplify-colors-primary-60)" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M22 7h-9v2h9V7zm0 8h-9v2h9v-2zM5.54 11L2 7.46l1.41-1.41 2.12 2.12 4.24-4.24 1.41 1.41L5.54 11zm0 8L2 15.46l1.41-1.41 2.12 2.12 4.24-4.24 1.41 1.41L5.54 19z"></path></svg><span class="amplify-text">Getting started</span></div><span class="amplify-accordion__item__icon" aria-hidden="true"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z" fill="currentColor"></path></svg></span></span></summary><div class="amplify-accordion__item__content"><a class="docs-secondary-nav-link " href="/react/getting-started/introduction">Introduction</a><a class="docs-secondary-nav-link " href="/react/getting-started/installation">Installation</a><a class="docs-secondary-nav-link " href="/react/getting-started/usage">Usage</a><a class="docs-tertiary-nav-link " href="/react/getting-started/usage/nextjs">Next.js</a><a class="docs-tertiary-nav-link " href="/react/getting-started/usage/vite">Vite</a><a class="docs-secondary-nav-link " href="/react/getting-started/figma">Figma</a><a class="docs-secondary-nav-link " href="/react/getting-started/accessibility">Accessibility</a><a class="docs-secondary-nav-link " href="/react/getting-started/internationalization">Internationalization (i18n)</a><a class="docs-secondary-nav-link " href="/react/getting-started/migration">Migration</a><a class="docs-secondary-nav-link " href="/react/getting-started/troubleshooting">Troubleshooting</a></div></details><details open="" class="amplify-accordion__item"><summary class="amplify-accordion__item__trigger"><div style="flex-direction:row;align-items:center;gap:var(--amplify-space-small);padding:var(--amplify-space-small) var(--amplify-space-xs)" class="amplify-flex"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" style="color:var(--amplify-colors-primary-60);height:var(--amplify-font-sizes-large);width:var(--amplify-font-sizes-large)" color="var(--amplify-colors-primary-60)" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M16.66 4.52l2.83 2.83-2.83 2.83-2.83-2.83 2.83-2.83M9 5v4H5V5h4m10 10v4h-4v-4h4M9 15v4H5v-4h4m7.66-13.31L11 7.34 16.66 13l5.66-5.66-5.66-5.65zM11 3H3v8h8V3zm10 10h-8v8h8v-8zm-10 0H3v8h8v-8z"></path></svg><span class="amplify-text">Components</span></div><span class="amplify-accordion__item__icon" aria-hidden="true"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z" fill="currentColor"></path></svg></span></span></summary><div class="amplify-accordion__item__content"><div class="amplify-flex amplify-collection"><div style="flex-direction:column;gap:0" class="amplify-flex amplify-collection-items"><a class="docs-secondary-nav-link " href="/react/components">Overview</a></div></div><p style="font-size:var(--amplify-font-sizes-xs);font-weight:var(--amplify-font-weights-semibold);text-transform:uppercase;letter-spacing:0.125em;color:var(--amplify-colors-font-tertiary);padding:var(--amplify-space-large) var(--amplify-space-medium) var(--amplify-space-xs) var(--secondary-nav-indent)" class="amplify-text">Base</p><div class="amplify-flex amplify-collection"><div style="flex-direction:column;gap:0" class="amplify-flex amplify-collection-items"><a class="docs-secondary-nav-link " href="/react/components/divider">Divider</a><a class="docs-secondary-nav-link " href="/react/components/heading">Heading</a><a class="docs-secondary-nav-link " href="/react/components/icon">Icon</a><a class="docs-secondary-nav-link " href="/react/components/image">Image</a><a class="docs-secondary-nav-link " href="/react/components/scrollview">ScrollView</a><a class="docs-secondary-nav-link " href="/react/components/text">Text</a><a class="docs-secondary-nav-link " href="/react/components/view">View</a></div></div><p style="font-size:var(--amplify-font-sizes-xs);font-weight:var(--amplify-font-weights-semibold);text-transform:uppercase;letter-spacing:0.125em;color:var(--amplify-colors-font-tertiary);padding:var(--amplify-space-large) var(--amplify-space-medium) var(--amplify-space-xs) var(--secondary-nav-indent)" class="amplify-text">Feedback</p><div class="amplify-flex amplify-collection"><div style="flex-direction:column;gap:0" class="amplify-flex amplify-collection-items"><a class="docs-secondary-nav-link " href="/react/components/alert">Alert</a><a class="docs-secondary-nav-link " href="/react/components/loader">Loader</a><a class="docs-secondary-nav-link " href="/react/components/message">Message</a><a class="docs-secondary-nav-link " href="/react/components/placeholder">Placeholder</a></div></div><p style="font-size:var(--amplify-font-sizes-xs);font-weight:var(--amplify-font-weights-semibold);text-transform:uppercase;letter-spacing:0.125em;color:var(--amplify-colors-font-tertiary);padding:var(--amplify-space-large) var(--amplify-space-medium) var(--amplify-space-xs) var(--secondary-nav-indent)" class="amplify-text">Navigation</p><div class="amplify-flex amplify-collection"><div style="flex-direction:column;gap:0" class="amplify-flex amplify-collection-items"><a class="docs-secondary-nav-link " href="/react/components/breadcrumbs">Breadcrumbs</a><a class="docs-secondary-nav-link " href="/react/components/link">Link</a><a class="docs-secondary-nav-link " href="/react/components/menu">Menu</a><a class="docs-secondary-nav-link " href="/react/components/tabs">Tabs</a></div></div><p style="font-size:var(--amplify-font-sizes-xs);font-weight:var(--amplify-font-weights-semibold);text-transform:uppercase;letter-spacing:0.125em;color:var(--amplify-colors-font-tertiary);padding:var(--amplify-space-large) var(--amplify-space-medium) var(--amplify-space-xs) var(--secondary-nav-indent)" class="amplify-text">Inputs</p><div class="amplify-flex amplify-collection"><div style="flex-direction:column;gap:0" class="amplify-flex amplify-collection-items"><a class="docs-secondary-nav-link " href="/react/components/autocomplete">Autocomplete</a><a class="docs-secondary-nav-link " href="/react/components/button">Button</a><a class="docs-secondary-nav-link " href="/react/components/checkboxfield">Checkbox Field</a><a class="docs-secondary-nav-link " href="/react/components/dropzone">DropZone</a><a class="docs-secondary-nav-link " href="/react/components/fieldset">Fieldset</a><a class="docs-secondary-nav-link " href="/react/components/input">Input</a><a class="docs-secondary-nav-link " href="/react/components/label">Label</a><a class="docs-secondary-nav-link " href="/react/components/passwordfield">Password Field</a><a class="docs-secondary-nav-link " href="/react/components/phonenumberfield">Phone Number Field</a><a class="docs-secondary-nav-link " href="/react/components/radiogroupfield">Radio Group Field</a><a class="docs-secondary-nav-link " href="/react/components/searchfield">Search Field</a><a class="docs-secondary-nav-link " href="/react/components/selectfield">Select Field</a><a class="docs-secondary-nav-link " href="/react/components/sliderfield">Slider Field</a><a class="docs-secondary-nav-link " href="/react/components/stepperfield">Stepper Field</a><a class="docs-secondary-nav-link " href="/react/components/switchfield">Switch Field</a><a class="docs-secondary-nav-link " href="/react/components/textfield">Text Field</a><a class="docs-secondary-nav-link " href="/react/components/textareafield">TextArea Field</a><a class="docs-secondary-nav-link " href="/react/components/togglebutton">Toggle Button</a></div></div><p style="font-size:var(--amplify-font-sizes-xs);font-weight:var(--amplify-font-weights-semibold);text-transform:uppercase;letter-spacing:0.125em;color:var(--amplify-colors-font-tertiary);padding:var(--amplify-space-large) var(--amplify-space-medium) var(--amplify-space-xs) var(--secondary-nav-indent)" class="amplify-text">Layout</p><div class="amplify-flex amplify-collection"><div style="flex-direction:column;gap:0" class="amplify-flex amplify-collection-items"><a class="docs-secondary-nav-link " href="/react/components/accordion">Accordion</a><a class="docs-secondary-nav-link " href="/react/components/card">Card</a><a class="docs-secondary-nav-link current" href="/react/components/collection">Collection</a><a class="docs-secondary-nav-link " href="/react/components/flex">Flex</a><a class="docs-secondary-nav-link " href="/react/components/grid">Grid</a><a class="docs-secondary-nav-link " href="/react/components/pagination">Pagination</a><a class="docs-secondary-nav-link " href="/react/components/table">Table</a></div></div><p style="font-size:var(--amplify-font-sizes-xs);font-weight:var(--amplify-font-weights-semibold);text-transform:uppercase;letter-spacing:0.125em;color:var(--amplify-colors-font-tertiary);padding:var(--amplify-space-large) var(--amplify-space-medium) var(--amplify-space-xs) var(--secondary-nav-indent)" class="amplify-text">Data display</p><div class="amplify-flex amplify-collection"><div style="flex-direction:column;gap:0" class="amplify-flex amplify-collection-items"><a class="docs-secondary-nav-link " href="/react/components/avatar">Avatar</a><a class="docs-secondary-nav-link " href="/react/components/badge">Badge</a><a class="docs-secondary-nav-link " href="/react/components/rating">Rating</a></div></div><p style="font-size:var(--amplify-font-sizes-xs);font-weight:var(--amplify-font-weights-semibold);text-transform:uppercase;letter-spacing:0.125em;color:var(--amplify-colors-font-tertiary);padding:var(--amplify-space-large) var(--amplify-space-medium) var(--amplify-space-xs) var(--secondary-nav-indent)" class="amplify-text">Utilities</p><div class="amplify-flex amplify-collection"><div style="flex-direction:column;gap:0" class="amplify-flex amplify-collection-items"><a class="docs-secondary-nav-link " href="/react/components/highlightmatch">Highlight Match</a><a class="docs-secondary-nav-link " href="/react/components/visuallyhidden">Visually Hidden</a></div></div></div></details><details class="amplify-accordion__item"><summary class="amplify-accordion__item__trigger"><div style="flex-direction:row;align-items:center;gap:var(--amplify-space-small);padding:var(--amplify-space-small) var(--amplify-space-xs)" class="amplify-flex"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" style="color:var(--amplify-colors-primary-60);height:var(--amplify-font-sizes-large);width:var(--amplify-font-sizes-large)" color="var(--amplify-colors-primary-60)" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M16 9v4.66l-3.5 3.51V19h-1v-1.83L8 13.65V9h8m0-6h-2v4h-4V3H8v4h-.01C6.9 6.99 6 7.89 6 8.98v5.52L9.5 18v3h5v-3l3.5-3.51V9c0-1.1-.9-2-2-2V3z"></path></svg><span class="amplify-text">Connected components</span></div><span class="amplify-accordion__item__icon" aria-hidden="true"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z" fill="currentColor"></path></svg></span></span></summary><div class="amplify-accordion__item__content"><a class="docs-secondary-nav-link " href="/react/connected-components/authenticator">Authenticator</a><a class="docs-tertiary-nav-link " href="/react/connected-components/authenticator/configuration">Configuration</a><a class="docs-tertiary-nav-link " href="/react/connected-components/authenticator/customization">Customization</a><a class="docs-tertiary-nav-link " href="/react/connected-components/authenticator/advanced">Advanced Usage</a><a class="docs-secondary-nav-link " href="/react/connected-components/account-settings">Account Settings</a><a class="docs-tertiary-nav-link " href="/react/connected-components/account-settings/change-password">Change Password</a><a class="docs-tertiary-nav-link " href="/react/connected-components/account-settings/delete-user">Delete User</a><a class="docs-secondary-nav-link " href="/react/connected-components/liveness">Face Liveness</a><a class="docs-tertiary-nav-link " href="/react/connected-components/liveness/customization">Customization</a><a class="docs-tertiary-nav-link " href="/react/connected-components/liveness/troubleshooting">Troubleshooting</a><a class="docs-secondary-nav-link " href="/react/connected-components/geo">Geo</a><a class="docs-secondary-nav-link " href="/react/connected-components/storage">Storage</a><a class="docs-tertiary-nav-link " href="/react/connected-components/storage/storageimage">Storage Image</a><a class="docs-tertiary-nav-link " href="/react/connected-components/storage/fileuploader">File Uploader</a><a class="docs-secondary-nav-link " href="/react/connected-components/in-app-messaging">In-App Messaging</a></div></details><details class="amplify-accordion__item"><summary class="amplify-accordion__item__trigger"><div style="flex-direction:row;align-items:center;gap:var(--amplify-space-small);padding:var(--amplify-space-small) var(--amplify-space-xs)" class="amplify-flex"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" style="color:var(--amplify-colors-primary-60);height:var(--amplify-font-sizes-large);width:var(--amplify-font-sizes-large)" color="var(--amplify-colors-primary-60)" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M19 9l1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25zM11.5 9.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12l-5.5-2.5zm-1.51 3.49L9 15.17l-.99-2.18L5.83 12l2.18-.99L9 8.83l.99 2.18 2.18.99-2.18.99z"></path></svg><span class="amplify-text">Theming</span></div><span class="amplify-accordion__item__icon" aria-hidden="true"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z" fill="currentColor"></path></svg></span></span></summary><div class="amplify-accordion__item__content"><a class="docs-secondary-nav-link " href="/react/theming">Overview</a><a class="docs-secondary-nav-link " href="/react/theming/responsive">Responsive</a><a class="docs-secondary-nav-link " href="/react/theming/default-theme">Default Theme</a><a class="docs-tertiary-nav-link " href="/react/theming/default-theme/colors">Colors</a><a class="docs-tertiary-nav-link " href="/react/theming/default-theme/typography">Typography</a><a class="docs-tertiary-nav-link " href="/react/theming/default-theme/sizes">Sizes</a><a class="docs-secondary-nav-link " href="/react/theming/icons">Icons</a><a class="docs-secondary-nav-link " href="/react/theming/theme-provider">ThemeProvider</a><a class="docs-secondary-nav-link " href="/react/theming/dark-mode">Dark mode</a><a class="docs-secondary-nav-link " href="/react/theming/css-variables">CSS variables</a><a class="docs-secondary-nav-link " href="/react/theming/style-props">Style Props</a></div></details><details class="amplify-accordion__item"><summary class="amplify-accordion__item__trigger"><div style="flex-direction:row;align-items:center;gap:var(--amplify-space-small);padding:var(--amplify-space-small) var(--amplify-space-xs)" class="amplify-flex"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" style="color:var(--amplify-colors-primary-60);height:var(--amplify-font-sizes-large);width:var(--amplify-font-sizes-large)" color="var(--amplify-colors-primary-60)" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M19 5v14H5V5h14m0-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-2z"></path><path d="M14 17H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"></path></svg><span class="amplify-text">Guides</span></div><span class="amplify-accordion__item__icon" aria-hidden="true"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z" fill="currentColor"></path></svg></span></span></summary><div class="amplify-accordion__item__content"><a class="docs-secondary-nav-link " href="/react/guides">Overview</a><a class="docs-secondary-nav-link " href="/react/guides/css-in-js">CSS in JS</a></div></details></div></div></div></aside><a class="docs-logo-link" href="/react">Amplify UI</a><svg style="height:1.5rem;width:1.5rem" class="amplify-icon docs-logo-framework" viewBox="0 0 70 70" alt="react"><path d="M23.9381606,8.33333333 C23.9952526,8.36500885 24.0500692,8.41873301 24.1098503,8.42504741 C25.8858045,8.61240913 27.5036179,9.26838219 29.0614433,10.0983636 C31.4167985,11.353273 33.5117231,12.9699666 35.4737433,14.7655337 C35.734691,15.0044457 35.9078286,15.0086898 36.1660872,14.7697778 C36.7596578,14.220839 37.3629506,13.6798708 37.9911694,13.1711993 C40.2231355,11.363935 42.5842825,9.76939364 45.3432119,8.8632254 C45.9569508,8.66157865 46.5868245,8.50868734 47.2093548,8.33333333 L49.2779054,8.33333333 C49.4366667,8.38136418 49.5934628,8.4375727 49.7544995,8.47608019 C51.7478582,8.95235162 52.9516512,10.3068423 53.684849,12.1186612 C54.6356583,14.4680322 54.8064171,16.9408964 54.5817725,19.4330143 C54.4016018,21.4320914 54.0968009,23.4197819 53.8434034,25.4445307 C54.9392181,25.8537245 56.1365986,26.2699574 57.3101908,26.7451937 C59.8480955,27.7728882 62.2518547,29.0453952 64.2383873,30.9676643 C65.6857521,32.3683226 66.7701898,33.9776666 66.6587983,36.1301526 C66.5858819,37.5377463 65.9558014,38.7052893 65.085769,39.7621751 C63.4482009,41.7513148 61.3192487,43.0861376 59.019641,44.1388828 C57.4121703,44.8748727 55.7301284,45.448034 54.081597,46.0941731 C54.0037161,46.12471 53.9269729,46.1582488 53.8192014,46.2031742 C53.9803415,47.0578956 54.1625808,47.8954335 54.2931063,48.7410456 C54.7762163,51.8691582 55.0428525,55.0001693 54.2408754,58.1206218 C53.8936692,59.472007 53.3557426,60.7310571 52.3458762,61.7383592 C51.0525149,63.0283602 49.4673846,63.4245112 47.7030144,63.230421 C44.747159,62.9051776 42.2457642,61.4973769 39.8857549,59.8212658 C38.611114,58.9159257 37.4366944,57.8690809 36.2168701,56.8862082 C36.112098,56.8017402 36.0064985,56.7181003 35.9005887,56.6334252 C34.9124421,57.452848 33.9680453,58.2811732 32.9768993,59.0489422 C30.7164907,60.7997909 28.3175925,62.311624 25.5072597,63.0242196 C23.9811865,63.4111578 22.4440466,63.5204694 20.956345,62.8440004 C19.1093361,62.0040816 18.1917271,60.4106789 17.6462503,58.5734989 C16.9090189,56.0911113 16.8683719,53.5478571 17.194272,50.9990131 C17.3859232,49.4998088 17.6420098,48.0081611 17.9047157,46.5195153 C17.9802178,46.0916888 17.6738655,46.1252275 17.463287,46.0375505 C15.4954748,45.2189558 13.4784312,44.5024266 11.5672973,43.5682059 C9.41972803,42.5182556 7.47953101,41.132193 6.10342773,39.1042352 C4.57487227,36.8513399 4.63651507,34.468016 6.27532428,32.2912041 C7.54324236,30.6072259 9.20563305,29.3896853 11.0175799,28.3619907 C13.0014234,27.2367853 15.0933486,26.3556676 17.2732906,25.692552 C17.7657091,25.5427662 17.9025437,25.3547834 17.7792581,24.8184734 C17.1312846,22.0020437 16.8325859,19.1417238 17.0262023,16.2552146 C17.1715179,14.0867874 17.6126364,11.9859553 19.0529681,10.2388331 C19.8918688,9.22138648 20.9799264,8.65412558 22.2689437,8.44336953 C22.3801283,8.42525444 22.485521,8.37090919 22.5936028,8.33333333 L23.9381606,8.33333333 Z M20.6427527,47.026013 C20.0319097,49.8918192 19.5623487,52.7800881 19.9362392,55.716802 C20.0754527,56.8096073 20.3964918,57.9047935 20.8055476,58.9306248 C21.2462523,60.0355414 22.1892011,60.6122221 23.4011649,60.4938012 C24.23024,60.4127492 25.0744155,60.2600649 25.8582927,59.9860613 C28.1132197,59.1981069 30.0425569,57.8386476 31.8778784,56.3422382 C32.5394009,55.8029262 33.1729979,55.2293509 33.7930459,54.6940761 C33.7500201,54.5725498 33.746607,54.5343528 33.7263352,54.5100269 C32.0830786,52.5205766 30.4420974,50.5290561 28.785809,48.5504749 C28.6710044,48.4134214 28.4480146,48.326469 28.2625691,48.2967602 C27.5849119,48.1884838 26.897636,48.1386932 26.2216336,48.0225496 C24.3787619,47.7057945 22.5400273,47.3665766 20.6427527,47.026013 Z M51.0746484,47.0291185 C48.8315122,47.4157461 46.6885972,47.8189361 44.5333743,48.140453 C43.6378988,48.2740905 42.9171123,48.4119722 42.3004774,49.2696955 C40.9669863,51.1248871 39.4385342,52.8396091 37.9088411,54.7108455 C39.0017598,55.5847171 40.0977813,56.5260804 41.2607204,57.375626 C43.0903534,58.7124157 45.0185529,59.8996265 47.2867186,60.3294198 C49.2293979,60.6974148 50.4519113,60.4188565 51.2097248,58.2469098 C51.5671703,57.2223207 51.7539605,56.1109862 51.8407362,55.0247023 C51.9892581,53.1674404 51.8599737,51.3060379 51.5461745,49.4652349 C51.4031343,48.6257302 51.2234807,47.7925398 51.0746484,47.0291185 Z M39.334693,48.6527475 L32.3443365,48.6527475 C33.5497844,50.0378786 34.6738348,51.3291217 35.868733,52.702245 C37.0591839,51.3113172 38.1661688,50.0179002 39.334693,48.6527475 Z M35.8572526,25.7391337 C34.0795402,25.8334356 32.2928296,25.9200775 30.5077739,26.0343578 C30.3188118,26.0463655 30.0715166,26.1728605 29.9668479,26.3255448 C27.9562167,29.2578075 26.1927774,32.3339557 24.6793223,35.5517121 C24.6033031,35.7132986 24.584893,35.968359 24.6581197,36.1241487 C26.1774701,39.3589851 27.9665595,42.4399985 30.0036681,45.3751596 C30.112267,45.5316739 30.3553217,45.6704872 30.5446975,45.6830125 C31.9345567,45.774623 33.3272084,45.8945967 34.7181018,45.8854874 C36.8508809,45.8718234 38.9834531,45.7716211 41.1148876,45.6773192 C41.328362,45.6678993 41.605341,45.4965824 41.730178,45.3156386 C43.7089535,42.4451742 45.4221271,39.4200588 46.9432358,36.2835615 C47.1123398,35.9349238 47.0874137,35.6498441 46.9253428,35.3141457 C45.4153009,32.1901737 43.676891,29.1995287 41.7078377,26.3441775 C41.6004799,26.1883877 41.3645617,26.0433636 41.1796333,26.0314594 C39.4118499,25.9172826 37.6423083,25.8330216 35.8572526,25.7391337 Z M48.6607533,39.2260721 C47.4864372,41.2792874 46.3831757,43.2085956 45.2120658,45.2562211 C46.9768497,44.9105853 48.6343793,44.5856525 50.4055758,44.2385675 C49.8025933,42.506455 49.244912,40.9044605 48.6607533,39.2260721 Z M23.0016244,39.2754487 C22.4318421,40.946798 21.8814008,42.5620424 21.3046889,44.2540947 C23.0675077,44.5924845 24.715522,44.9088256 26.4601375,45.2436958 C25.2771334,43.2022812 24.174596,41.2996798 23.0016244,39.2754487 Z M53.1183764,28.1695568 C53.0396681,28.2686204 53.0099844,28.2919112 52.9988142,28.322034 C52.1169911,30.7281312 51.2310309,33.1326756 50.3668939,35.5451907 C50.3010105,35.7291364 50.3420712,35.9871987 50.4157116,36.1793221 C50.7483346,37.0469828 51.135981,37.8938371 51.4568132,38.7656385 C52.0204932,40.2974499 52.5497319,41.8419937 53.1454744,43.5280421 C54.7559445,42.8682391 56.3699311,42.27541 57.923516,41.5525664 C59.6933679,40.729003 61.3520352,39.7033787 62.6879052,38.2409221 C63.3470488,37.5193207 63.9216922,36.7360245 63.8629453,35.6856602 C63.8108179,34.7528887 63.2862334,34.0373946 62.6792173,33.3922906 C60.9036769,31.5050095 58.6534041,30.3515445 56.3092191,29.3652558 C55.2542583,28.9213845 54.1649596,28.5589793 53.1183764,28.1695568 Z M18.5304523,28.1543401 C17.2413315,28.6559727 15.929043,29.1155782 14.6593667,29.6722806 C12.5853344,30.5819683 10.6210388,31.6799494 9.03042681,33.3423965 C7.68586893,34.7476094 7.45512211,35.9831616 8.31346718,37.3760563 C8.52828616,37.724694 8.79823201,38.047039 9.08162344,38.3444369 C10.769147,40.1146428 12.8901354,41.2185243 15.0935555,42.1726198 C16.2250526,42.6626587 17.3999894,43.0521848 18.5797872,43.4963666 C18.6635635,43.299171 18.7213795,43.1777482 18.7675082,43.0519778 C19.6026855,40.7759987 20.4429307,38.5017793 21.2596979,36.2192788 C21.3376823,36.0014837 21.3348897,35.7057421 21.2542163,35.4890857 C20.9304881,34.6187335 20.5351881,33.7747777 20.2144593,32.9033904 C19.645401,31.3578115 19.1114047,29.7991897 18.5304523,28.1543401 Z M35.9197634,30.083602 C39.1034726,30.0946538 41.6452631,32.6639526 41.6291233,35.8555002 C41.6129332,39.0429297 39.063866,41.5322338 35.8227738,41.5131943 C32.7804427,41.4950677 30.0964425,39.1061429 30.1172334,35.7841537 C30.1389599,32.3255456 32.980451,30.0732396 35.9197634,30.083602 Z M26.4512428,26.4049406 C24.6884239,26.7467464 23.021379,27.0699195 21.2673515,27.410069 C21.8597844,29.124998 22.4128114,30.7258539 22.9988318,32.4228749 C24.1809051,30.36231 25.2864419,28.4352792 26.4512428,26.4049406 Z M45.2019299,26.3979016 C46.3786249,28.4326913 47.492436,30.3585835 48.6637527,32.3842639 C49.2406715,30.6878639 49.7862517,29.0837992 50.3593436,27.3990964 C48.6149349,27.0603961 46.9581293,26.7387757 45.2019299,26.3979016 Z M47.0888617,11.293545 C45.3745504,11.6381457 43.8643016,12.464504 42.4107311,13.3986212 C40.7859881,14.4425676 39.2924946,15.6538974 37.8552656,17.0058002 C37.9640714,17.1602442 38.0263347,17.2629308 38.1021471,17.3542309 C39.6848986,19.2596271 41.2655815,21.1666796 42.8601238,23.0621384 C42.9773071,23.2014693 43.1863342,23.308193 43.3684701,23.339972 C43.9937929,23.4489731 44.6292517,23.4990742 45.2549882,23.6059014 C47.1642604,23.9318694 49.0708435,24.2739857 51.0190044,24.6170336 C51.0532389,24.4774957 51.1133303,24.2988293 51.1397044,24.1155046 C51.3783117,22.4499521 51.6961445,20.7901964 51.8235672,19.1159486 C51.9742611,17.1365393 51.855216,15.1552667 51.1408421,13.2637415 C50.7219606,12.1542703 50.0544393,11.2764651 48.7737996,11.1691203 C48.2184972,11.1226421 47.6380619,11.1830948 47.0888617,11.293545 Z M20.4426204,13.4766714 C20.0861057,14.519065 19.8528767,15.6544149 19.837466,16.7514644 C19.8124365,18.5337816 19.9767828,20.3224132 20.132855,22.1021425 C20.2084605,22.9646275 20.446861,23.8128275 20.5968309,24.5908444 C23.1906899,24.1687112 25.660229,23.7523748 28.1362841,23.3786865 C28.5235167,23.3200972 28.734302,23.1544736 28.9592569,22.8678412 C30.0112183,21.5278426 31.0796247,20.2004728 32.1599253,18.8831439 C32.6785109,18.2509792 33.2368127,17.6514217 33.8328655,16.9738141 C32.6456209,16.0282067 31.5339818,15.0763885 30.3540806,14.2185617 C28.5360315,12.8968852 26.6226222,11.7017037 24.3675917,11.3106249 C22.2957315,10.9513252 21.1977448,11.2694261 20.4426204,13.4766714 Z M35.7991263,18.9529129 C34.6101234,20.339079 33.5034489,21.6291835 32.3376138,22.9884359 L39.3099738,22.9884359 C38.1091802,21.60817 36.9859572,20.3171339 35.7991263,18.9529129 Z" fill="#04B5E5"></path></svg><div style="flex:1;justify-content:flex-end;gap:var(--amplify-space-small)" class="amplify-flex"><div aria-label="color-switcher" style="align-items:stretch" class="amplify-flex amplify-togglebuttongroup color-switcher" role="group"><button class="amplify-button amplify-field-group__control amplify-button--small amplify-togglebutton" type="button" aria-pressed="false" title="Light mode"><span class="amplify-visually-hidden">Light mode</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="docs-header-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"></path></svg></button><button class="amplify-button amplify-field-group__control amplify-button--small amplify-togglebutton" type="button" aria-pressed="false" title="Dark mode"><span class="amplify-visually-hidden">Dark mode</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="docs-header-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12.34 2.02C6.59 1.82 2 6.42 2 12c0 5.52 4.48 10 10 10 3.71 0 6.93-2.02 8.66-5.02-7.51-.25-12.09-8.43-8.32-14.96z"></path></svg></button><button class="amplify-button amplify-field-group__control amplify-button--small amplify-togglebutton amplify-togglebutton--pressed" type="button" aria-pressed="true" title="System preferences"><span class="amplify-visually-hidden">System preference</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="docs-header-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93s3.05-7.44 7-7.93v15.86zm2-15.86c1.03.13 2 .45 2.87.93H13v-.93zM13 7h5.24c.25.31.48.65.68 1H13V7zm0 3h6.74c.08.33.15.66.19 1H13v-1zm0 9.93V19h2.87c-.87.48-1.84.8-2.87.93zM18.24 17H13v-1h5.92c-.2.35-.43.69-.68 1zm1.5-3H13v-1h6.93c-.04.34-.11.67-.19 1z"></path></svg></button></div></div></header><div class="docs-main"><div class="docs-sidebar-spacer collapsed"></div><div class="docs-content"><main class="docs-content-body" id="docs-content" tabindex="-1" aria-label="Main content"><section class="docs-meta"><h1 class="amplify-heading amplify-heading--1">Collection</h1><p class="amplify-text docs-description">Collection provides a way to display items from a data source.</p><div class="docs-component-links"><a class="amplify-link docs-component-link" rel="noopener noreferrer" target="_blank" href="https://github.com/aws-amplify/amplify-ui//blob/main/packages/ui/src/theme/tokens/components/collection.ts"><svg aria-label="" style="margin-inline-end:var(--amplify-space-xs)" class="amplify-icon" viewBox="0 0 200 200"><path d="M100.011 9L100.04 9.04999L100.069 9L179.21 54.6924L179.033 55H179.069V145.053L179.152 145.198L179.069 145.246V146H177.762L100.069 190.856L100.04 190.806L100.011 190.856L21 145.239L21.1382 145H21.0688V55H21.3122L21.0684 54.5776L100.011 9ZM125.466 75.9893L154.782 59.0637L100.04 27.4586L45.5198 58.9358L74.7197 75.7944C81.0908 69.1422 90.0617 65 100 65C110.035 65 119.084 69.2232 125.466 75.9893ZM133.499 89.8267C134.475 93.046 135 96.4617 135 100C135 116.553 123.509 130.422 108.069 134.065V167.762L163.069 136.008V72.7543L133.499 89.8267ZM92.0688 134.098C76.5593 130.504 65 116.602 65 100C65 96.3676 65.5533 92.8645 66.5803 89.5703L37.0688 72.5318V136.041L92.0688 167.796V134.098ZM119 100C119 110.493 110.493 119 100 119C89.5066 119 81 110.493 81 100C81 89.5066 89.5066 81 100 81C110.493 81 119 89.5066 119 100Z" fill-rule="evenodd"></path></svg>Theme source</a><a class="amplify-link docs-component-link" rel="noopener noreferrer" target="_blank" href="https://github.com/aws-amplify/amplify-ui//blob/main/packages/react/src/primitives/Collection/Collection.tsx"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" aria-label="" style="margin-inline-end:var(--amplify-space-xs)" class="amplify-icon" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><title></title><path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z"></path></svg>React source</a><a class="amplify-link docs-component-link" rel="noopener noreferrer" target="_blank" href="https://github.com/aws-amplify/amplify-ui/issues/new/choose"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" aria-label="GitHub" style="margin-inline-end:var(--amplify-space-xs)" class="amplify-icon" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><title></title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg>Feedback</a></div></section>  <div class="amplify-tabs"><div role="tablist" class="amplify-tabs__list"><button role="tab" id="amplify-id-:R1pdl6:-tab-documentation" aria-selected="true" aria-controls="amplify-id-:R1pdl6:-panel-documentation" class="amplify-tabs__item amplify-tabs__item--active">Documentation</button><button role="tab" id="amplify-id-:R1pdl6:-tab-props" aria-selected="false" aria-controls="amplify-id-:R1pdl6:-panel-props" tabindex="-1" class="amplify-tabs__item">Props</button></div><div role="tabpanel" id="amplify-id-:R1pdl6:-panel-documentation" aria-labelledby="amplify-id-:R1pdl6:-tab-documentation" class="amplify-tabs__panel amplify-tabs__panel--active"><div class="docs-page-tab"><h2 id="demo"><a aria-hidden="true" tabindex="-1" href="#demo"><span class="icon icon-link"></span></a>Demo</h2> <div style="display:none" class="docs-component-demo"><div style="flex-direction:column;align-items:stretch" class="amplify-flex"><div style="flex-direction:column;flex:1" class="amplify-flex"><div style="overflow:auto;padding:5px"><div style="background-color:var(--amplify-colors-neutral-20);padding:1rem"><div class="amplify-flex amplify-collection"><div style="flex-direction:row;gap:20px;flex-wrap:nowrap" class="amplify-flex amplify-collection-items"><div style="border-radius:var(--amplify-radii-medium);max-width:20rem" class="amplify-card amplify-card--outlined"><img class="amplify-image" src="/road-to-milford-new-zealand-800w.jpg" alt="Glittering stream with old log, snowy mountain peaks tower over a green field."/><div style="padding:var(--amplify-space-xs)"><div class="amplify-flex"><span style="background-color:var(--amplify-colors-blue-40)" class="amplify-badge">Waterfront</span><span style="background-color:var(--amplify-colors-yellow-40)" class="amplify-badge">Verified</span></div><hr style="padding:var(--amplify-space-xs)" aria-orientation="horizontal" class="amplify-divider amplify-divider--horizontal"/><h6 style="padding:var(--amplify-space-medium)" class="amplify-heading amplify-heading--6">Milford - Room #1</h6><button class="amplify-button amplify-field-group__control amplify-button--primary amplify-button--fullwidth" type="button">Book it</button></div></div><div style="border-radius:var(--amplify-radii-medium);max-width:20rem" class="amplify-card amplify-card--outlined"><img class="amplify-image" src="/road-to-milford-new-zealand-800w.jpg" alt="Glittering stream with old log, snowy mountain peaks tower over a green field."/><div style="padding:var(--amplify-space-xs)"><div class="amplify-flex"><span style="background-color:var(--amplify-colors-green-40)" class="amplify-badge">Mountain</span><span style="background-color:var(--amplify-colors-yellow-40)" class="amplify-badge">Verified</span></div><hr style="padding:var(--amplify-space-xs)" aria-orientation="horizontal" class="amplify-divider amplify-divider--horizontal"/><h6 style="padding:var(--amplify-space-medium)" class="amplify-heading amplify-heading--6">Milford - Room #2</h6><button class="amplify-button amplify-field-group__control amplify-button--primary amplify-button--fullwidth" type="button">Book it</button></div></div></div></div></div></div><hr style="margin:20px 0 0;border:2px solid var(--amplify-colors-border-secondary)" aria-orientation="horizontal" class="amplify-divider amplify-divider--horizontal"/><div style="padding:var(--amplify-space-medium) 0"><div style="flex-direction:column" class="amplify-flex"><div class="amplify-flex amplify-field amplify-selectfield"><label class="amplify-label" for="direction">direction</label><div class="amplify-select__wrapper"><select aria-invalid="false" size="1" class="amplify-select amplify-field-group__control" id="direction" name="direction"><option value="row" selected="">row</option><option value="column">column</option></select><div class="amplify-flex amplify-select__icon" aria-hidden="true"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z" fill="currentColor"></path></svg></span></div></div></div><div class="amplify-flex amplify-field amplify-textfield"><label class="amplify-label" for="amplify-id-:Rb86rpdl6:">gap</label><div class="amplify-flex amplify-field-group amplify-field-group--horizontal"><div class="amplify-field-group__field-wrapper amplify-field-group__field-wrapper--horizontal"><input aria-invalid="false" class="amplify-input amplify-field-group__control" id="amplify-id-:Rb86rpdl6:" type="text" value="20px"/></div></div></div><div class="amplify-flex amplify-field amplify-selectfield"><label class="amplify-label" for="wrap">wrap</label><div class="amplify-select__wrapper"><select aria-invalid="false" size="1" class="amplify-select amplify-field-group__control" id="wrap" name="wrap"><option value="nowrap" selected="">nowrap</option><option value="wrap">wrap</option><option value="wrap-reverse">wrap-reverse</option></select><div class="amplify-flex amplify-select__icon" aria-hidden="true"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z" fill="currentColor"></path></svg></span></div></div></div></div></div></div><div style="flex:1;overflow:auto;position:relative;background-color:var(--amplify-colors-background-secondary)"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small example-copy-button" type="button">Copy</button><pre class="prism-code language-jsx" style="max-height:100%"><code class="prism-code language-jsx"><div class="token-line"><span class="token plain"> </span></div><div class="token-line"><span class="token plain"></span><span class="token keyword">const</span><span class="token plain"> items </span><span class="token operator">=</span><span class="token plain"> </span><span class="token punctuation">[</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> title</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string">'Milford - Room #1'</span><span class="token punctuation">,</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> badges</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation">[</span><span class="token string">'Waterfront'</span><span class="token punctuation">,</span><span class="token plain"> </span><span class="token string">'Verified'</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> title</span><span class="token operator">:</span><span class="token plain"> </span><span class="token string">'Milford - Room #2'</span><span class="token punctuation">,</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> badges</span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation">[</span><span class="token string">'Mountain'</span><span class="token punctuation">,</span><span class="token plain"> </span><span class="token string">'Verified'</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token punctuation">]</span><span class="token punctuation">;</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span></div><div class="token-line"><span class="token plain"></span><span class="token tag punctuation"><</span><span class="token tag class-name">Collection</span><span class="token tag"></span></div><div class="token-line"><span class="token tag"> </span><span class="token tag attr-name">items</span><span class="token tag script language-javascript script-punctuation punctuation">=</span><span class="token tag script language-javascript punctuation">{</span><span class="token tag script language-javascript">items</span><span class="token tag script language-javascript punctuation">}</span><span class="token tag"></span></div><div class="token-line"><span class="token tag"> </span><span class="token tag attr-name">type</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">list</span><span class="token tag attr-value punctuation">"</span><span class="token tag"></span></div><div class="token-line"><span class="token tag"> </span><span class="token tag attr-name">direction</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">row</span><span class="token tag attr-value punctuation">"</span><span class="token tag"></span></div><div class="token-line"><span class="token tag"> </span><span class="token tag attr-name">gap</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">20px</span><span class="token tag attr-value punctuation">"</span><span class="token tag"></span></div><div class="token-line"><span class="token tag"> </span><span class="token tag attr-name">wrap</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">nowrap</span><span class="token tag attr-value punctuation">"</span><span class="token tag"></span></div><div class="token-line"><span class="token tag"></span><span class="token tag punctuation">></span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token parameter punctuation">,</span><span class="token parameter"> index</span><span class="token punctuation">)</span><span class="token plain"> </span><span class="token operator">=></span><span class="token plain"> </span><span class="token punctuation">(</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token tag punctuation"><</span><span class="token tag class-name">Card</span><span class="token tag"></span></div><div class="token-line"><span class="token tag"> </span><span class="token tag attr-name">key</span><span class="token tag script language-javascript script-punctuation punctuation">=</span><span class="token tag script language-javascript punctuation">{</span><span class="token tag script language-javascript">index</span><span class="token tag script language-javascript punctuation">}</span><span class="token tag"></span></div><div class="token-line"><span class="token tag"> </span><span class="token tag attr-name">borderRadius</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">medium</span><span class="token tag attr-value punctuation">"</span><span class="token tag"></span></div><div class="token-line"><span class="token tag"> </span><span class="token tag attr-name">maxWidth</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">20rem</span><span class="token tag attr-value punctuation">"</span><span class="token tag"></span></div><div class="token-line"><span class="token tag"> </span><span class="token tag attr-name">variation</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">outlined</span><span class="token tag attr-value punctuation">"</span><span class="token tag"></span></div><div class="token-line"><span class="token tag"> </span><span class="token tag punctuation">></span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token tag punctuation"><</span><span class="token tag class-name">Image</span><span class="token tag"></span></div><div class="token-line"><span class="token tag"> </span><span class="token tag attr-name">src</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">/road-to-milford-new-zealand-800w.jpg</span><span class="token tag attr-value punctuation">"</span><span class="token tag"></span></div><div class="token-line"><span class="token tag"> </span><span class="token tag attr-name">alt</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">Glittering stream with old log, snowy mountain peaks tower over a green field.</span><span class="token tag attr-value punctuation">"</span><span class="token tag"></span></div><div class="token-line"><span class="token tag"> </span><span class="token tag punctuation">/></span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token tag punctuation"><</span><span class="token tag class-name">View</span><span class="token tag"> </span><span class="token tag attr-name">padding</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">xs</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">></span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token tag punctuation"><</span><span class="token tag class-name">Flex</span><span class="token tag punctuation">></span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain">item</span><span class="token punctuation">.</span><span class="token plain">badges</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">badge</span><span class="token punctuation">)</span><span class="token plain"> </span><span class="token operator">=></span><span class="token plain"> </span><span class="token punctuation">(</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token tag punctuation"><</span><span class="token tag class-name">Badge</span><span class="token tag"></span></div><div class="token-line"><span class="token tag"> </span><span class="token tag attr-name">key</span><span class="token tag script language-javascript script-punctuation punctuation">=</span><span class="token tag script language-javascript punctuation">{</span><span class="token tag script language-javascript">badge</span><span class="token tag script language-javascript punctuation">}</span><span class="token tag"></span></div><div class="token-line"><span class="token tag"> </span><span class="token tag attr-name">backgroundColor</span><span class="token tag script language-javascript script-punctuation punctuation">=</span><span class="token tag script language-javascript punctuation">{</span><span class="token tag script language-javascript"></span></div><div class="token-line"><span class="token tag script language-javascript"> badge </span><span class="token tag script language-javascript operator">===</span><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript string">'Waterfront'</span><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript operator">?</span><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript string">'blue.40'</span><span class="token tag script language-javascript"> </span></div><div class="token-line"><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript operator">:</span><span class="token tag script language-javascript"> badge </span><span class="token tag script language-javascript operator">===</span><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript string">'Mountain'</span><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript operator">?</span><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript string">'green.40'</span><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript operator">:</span><span class="token tag script language-javascript"> </span><span class="token tag script language-javascript string">'yellow.40'</span><span class="token tag script language-javascript punctuation">}</span><span class="token tag"></span></div><div class="token-line"><span class="token tag"> </span><span class="token tag punctuation">></span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain">badge</span><span class="token punctuation">}</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token tag punctuation"></</span><span class="token tag class-name">Badge</span><span class="token tag punctuation">></span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token tag punctuation"></</span><span class="token tag class-name">Flex</span><span class="token tag punctuation">></span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token tag punctuation"><</span><span class="token tag class-name">Divider</span><span class="token tag"> </span><span class="token tag attr-name">padding</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">xs</span><span class="token tag attr-value punctuation">"</span><span class="token tag"> </span><span class="token tag punctuation">/></span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token tag punctuation"><</span><span class="token tag class-name">Heading</span><span class="token tag"> </span><span class="token tag attr-name">padding</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">medium</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">></span><span class="token punctuation">{</span><span class="token plain">item</span><span class="token punctuation">.</span><span class="token plain">title</span><span class="token punctuation">}</span><span class="token tag punctuation"></</span><span class="token tag class-name">Heading</span><span class="token tag punctuation">></span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token tag punctuation"><</span><span class="token tag class-name">Button</span><span class="token tag"> </span><span class="token tag attr-name">variation</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">primary</span><span class="token tag attr-value punctuation">"</span><span class="token tag"> </span><span class="token tag attr-name">isFullWidth</span><span class="token tag punctuation">></span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> Book it</span></div><div class="token-line"><span class="token plain"> </span><span class="token tag punctuation"></</span><span class="token tag class-name">Button</span><span class="token tag punctuation">></span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token tag punctuation"></</span><span class="token tag class-name">View</span><span class="token tag punctuation">></span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token tag punctuation"></</span><span class="token tag class-name">Card</span><span class="token tag punctuation">></span><span class="token plain"></span></div><div class="token-line"><span class="token plain"> </span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain"></span></div><div class="token-line"><span class="token plain"></span><span class="token tag punctuation"></</span><span class="token tag class-name">Collection</span><span class="token tag punctuation">></span></div></code></pre></div></div></div> <h2 id="usage"><a aria-hidden="true" tabindex="-1" href="#usage"><span class="icon icon-link"></span></a>Usage</h2> <p>Import the <code>Collection</code> component and provide your own repeating component as a function. Here's an example using the <code>list</code> collection <code>type</code>.</p> <div style="background-color:inherit;margin-block-end:space.large" class="amplify-card amplify-card--outlined example "><div style="flex-direction:column" class="amplify-flex"><div class="amplify-flex amplify-collection"><div style="flex-direction:column;gap:1.5rem" class="amplify-flex amplify-collection-items"><div style="padding:1rem" class="amplify-card"><h4 class="amplify-heading amplify-heading--4">Fiordland National Park</h4><p class="amplify-text">This national park includes the famous fjords of Milford, Dusky and Doubtful Sounds.</p></div><div style="padding:1rem" class="amplify-card"><h4 class="amplify-heading amplify-heading--4">Bay of Islands, North Island</h4><p class="amplify-text">Three hours north of Auckland, this area features over 144 islands to explore.</p></div><div style="padding:1rem" class="amplify-card"><h4 class="amplify-heading amplify-heading--4">Queenstown, South Island</h4><p class="amplify-text">This hopping town is New Zealand's adventure capital and is located right on Lake Wakatipu.</p></div></div></div><div class="example-code"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small example-copy-button" type="button">Copy</button><div><pre class="language-tsx"><code class="language-tsx"><span class="token keyword">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Collection</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Card</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Heading</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Text</span> <span class="token punctuation">}</span></span> <span class="token keyword">from</span> <span class="token string">'@aws-amplify/ui-react'</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">DefaultCollectionExample</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Collection</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>list<span class="token punctuation">"</span></span> <span class="token attr-name">items</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'Fiordland National Park'</span><span class="token punctuation">,</span> description<span class="token operator">:</span> <span class="token string">'This national park includes the famous fjords of Milford, Dusky and Doubtful Sounds.'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'Bay of Islands, North Island'</span><span class="token punctuation">,</span> description<span class="token operator">:</span> <span class="token string">'Three hours north of Auckland, this area features over 144 islands to explore.'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'Queenstown, South Island'</span><span class="token punctuation">,</span> description<span class="token operator">:</span> <span class="token string">"This hopping town is New Zealand's adventure capital and is located right on Lake Wakatipu."</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">}</span></span> <span class="token attr-name">gap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1.5rem<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Card</span></span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>index<span class="token punctuation">}</span></span> <span class="token attr-name">padding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1rem<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Heading</span></span> <span class="token attr-name">level</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>item<span class="token punctuation">.</span><span class="token property-access">title</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Heading</span></span><span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>item<span class="token punctuation">.</span><span class="token property-access">description</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Card</span></span><span class="token punctuation">></span></span> <span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Collection</span></span><span class="token punctuation">></span></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre></div></div></div></div> <h2 id="collection-types"><a aria-hidden="true" tabindex="-1" href="#collection-types"><span class="icon icon-link"></span></a>Collection types</h2> <p>Collection <code>type</code> options include <code>list</code> and <code>grid</code>.</p> <h3 id="list"><a aria-hidden="true" tabindex="-1" href="#list"><span class="icon icon-link"></span></a>List</h3> <p>The <code>list</code> collection type can be customized with any of following Flex props: <code>alignItems</code>, <code>alignContent</code>, <code>direction</code>, <code>gap</code>, <code>justifyContent</code>, <code>wrap</code>.</p> <div style="background-color:inherit;margin-block-end:space.large" class="amplify-card amplify-card--outlined example "><div style="flex-direction:column" class="amplify-flex"><div class="amplify-flex amplify-collection"><div style="flex-direction:row;justify-content:space-between;flex-wrap:wrap" class="amplify-flex amplify-collection-items"><div style="padding:var(--amplify-space-medium);max-width:180px;font-size:var(--amplify-font-sizes-xs)" class="amplify-card"><h4 class="amplify-heading amplify-heading--4">Fiordland National Park</h4><p class="amplify-text">This national park includes the famous fjords of Milford, Dusky and Doubtful Sounds.</p></div><div style="padding:var(--amplify-space-medium);max-width:180px;font-size:var(--amplify-font-sizes-xs)" class="amplify-card"><h4 class="amplify-heading amplify-heading--4">Bay of Islands, North Island</h4><p class="amplify-text">Three hours north of Auckland, this area features over 144 islands to explore.</p></div><div style="padding:var(--amplify-space-medium);max-width:180px;font-size:var(--amplify-font-sizes-xs)" class="amplify-card"><h4 class="amplify-heading amplify-heading--4">Queenstown, South Island</h4><p class="amplify-text">This hopping town is New Zealand's adventure capital and is located right on Lake Wakatipu.</p></div></div></div><div class="example-code"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small example-copy-button" type="button">Copy</button><div><pre class="language-tsx"><code class="language-tsx"><span class="token keyword">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Collection</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Card</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Heading</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Text</span><span class="token punctuation">,</span> useTheme<span class="token punctuation">,</span> <span class="token punctuation">}</span></span> <span class="token keyword">from</span> <span class="token string">'@aws-amplify/ui-react'</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">ListCollectionExample</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> tokens <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useTheme</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> items <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'Fiordland National Park'</span><span class="token punctuation">,</span> description<span class="token operator">:</span> <span class="token string">'This national park includes the famous fjords of Milford, Dusky and Doubtful Sounds.'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'Bay of Islands, North Island'</span><span class="token punctuation">,</span> description<span class="token operator">:</span> <span class="token string">'Three hours north of Auckland, this area features over 144 islands to explore.'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'Queenstown, South Island'</span><span class="token punctuation">,</span> description<span class="token operator">:</span> <span class="token string">"This hopping town is New Zealand's adventure capital and is located right on Lake Wakatipu."</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Collection</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>list<span class="token punctuation">"</span></span> <span class="token attr-name">items</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>items<span class="token punctuation">}</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span> <span class="token attr-name">justifyContent</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>space-between<span class="token punctuation">"</span></span> <span class="token attr-name">wrap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>wrap<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Card</span></span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>index<span class="token punctuation">}</span></span> <span class="token attr-name">padding</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>tokens<span class="token punctuation">.</span><span class="token property-access">space</span><span class="token punctuation">.</span><span class="token property-access">medium</span><span class="token punctuation">}</span></span> <span class="token attr-name">maxWidth</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>180px<span class="token punctuation">"</span></span> <span class="token attr-name">fontSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>tokens<span class="token punctuation">.</span><span class="token property-access">fontSizes</span><span class="token punctuation">.</span><span class="token property-access">xs</span><span class="token punctuation">}</span></span> <span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Heading</span></span> <span class="token attr-name">level</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>item<span class="token punctuation">.</span><span class="token property-access">title</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Heading</span></span><span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>item<span class="token punctuation">.</span><span class="token property-access">description</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Card</span></span><span class="token punctuation">></span></span> <span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Collection</span></span><span class="token punctuation">></span></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre></div></div></div></div> <h3 id="grid"><a aria-hidden="true" tabindex="-1" href="#grid"><span class="icon icon-link"></span></a>Grid</h3> <p>The <code>grid</code> collection type can be customized with the following Grid props: <code>templateColumns</code> and <code>templateRows</code>. Then the Collection children can use the Grid props to control their size and placement such as <code>row</code> and <code>column</code>.</p> <div style="background-color:inherit;margin-block-end:space.large" class="amplify-card amplify-card--outlined example "><div style="flex-direction:column" class="amplify-flex"><div class="amplify-flex amplify-collection"><div style="grid-template-columns:1fr 1fr 1fr;grid-template-rows:12rem 12rem 12rem" class="amplify-grid amplify-collection-items"><div style="grid-row:1;grid-column:1;padding:var(--amplify-space-medium);max-width:180px;font-size:var(--amplify-font-sizes-xs);background-color:var(--amplify-colors-background-secondary)" class="amplify-card"><h4 class="amplify-heading amplify-heading--4">Fiordland National Park</h4><p class="amplify-text">This national park includes the famous fjords of Milford, Dusky and Doubtful Sounds.</p></div><div style="grid-row:2;grid-column:2;padding:var(--amplify-space-medium);max-width:180px;font-size:var(--amplify-font-sizes-xs);background-color:var(--amplify-colors-background-secondary)" class="amplify-card"><h4 class="amplify-heading amplify-heading--4">Bay of Islands</h4><p class="amplify-text">Three hours north of Auckland, this area features over 144 islands to explore.</p></div><div style="grid-row:3;grid-column:3;padding:var(--amplify-space-medium);max-width:180px;font-size:var(--amplify-font-sizes-xs);background-color:var(--amplify-colors-background-secondary)" class="amplify-card"><h4 class="amplify-heading amplify-heading--4">Queenstown, South Island</h4><p class="amplify-text">This hopping town is New Zealand's adventure capital and is located right on Lake Wakatipu.</p></div></div></div><div class="example-code"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small example-copy-button" type="button">Copy</button><div><pre class="language-tsx"><code class="language-tsx"><span class="token keyword">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Collection</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Card</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Heading</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Text</span><span class="token punctuation">,</span> useTheme<span class="token punctuation">,</span> <span class="token punctuation">}</span></span> <span class="token keyword">from</span> <span class="token string">'@aws-amplify/ui-react'</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">GridCollectionExample</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> tokens <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useTheme</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> items <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'Fiordland National Park'</span><span class="token punctuation">,</span> description<span class="token operator">:</span> <span class="token string">'This national park includes the famous fjords of Milford, Dusky and Doubtful Sounds.'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'Bay of Islands'</span><span class="token punctuation">,</span> description<span class="token operator">:</span> <span class="token string">'Three hours north of Auckland, this area features over 144 islands to explore.'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'Queenstown, South Island'</span><span class="token punctuation">,</span> description<span class="token operator">:</span> <span class="token string">"This hopping town is New Zealand's adventure capital and is located right on Lake Wakatipu."</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Collection</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>grid<span class="token punctuation">"</span></span> <span class="token attr-name">items</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>items<span class="token punctuation">}</span></span> <span class="token attr-name">templateColumns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1fr 1fr 1fr<span class="token punctuation">"</span></span> <span class="token attr-name">templateRows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12rem 12rem 12rem<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Card</span></span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>index<span class="token punctuation">}</span></span> <span class="token attr-name">padding</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>tokens<span class="token punctuation">.</span><span class="token property-access">space</span><span class="token punctuation">.</span><span class="token property-access">medium</span><span class="token punctuation">}</span></span> <span class="token attr-name">maxWidth</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>180px<span class="token punctuation">"</span></span> <span class="token attr-name">fontSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>tokens<span class="token punctuation">.</span><span class="token property-access">fontSizes</span><span class="token punctuation">.</span><span class="token property-access">xs</span><span class="token punctuation">}</span></span> <span class="token attr-name">backgroundColor</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>tokens<span class="token punctuation">.</span><span class="token property-access">colors</span><span class="token punctuation">.</span><span class="token property-access">background</span><span class="token punctuation">.</span><span class="token property-access">secondary</span><span class="token punctuation">}</span></span> <span class="token attr-name">row</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>index <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">}</span></span> <span class="token attr-name">column</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>index <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">}</span></span> <span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Heading</span></span> <span class="token attr-name">level</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>item<span class="token punctuation">.</span><span class="token property-access">title</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Heading</span></span><span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>item<span class="token punctuation">.</span><span class="token property-access">description</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Card</span></span><span class="token punctuation">></span></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Collection</span></span><span class="token punctuation">></span></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre></div></div></div></div> <h2 id="pagination"><a aria-hidden="true" tabindex="-1" href="#pagination"><span class="icon icon-link"></span></a>Pagination</h2> <p>A Collection can be paginated by adding a special <code>isPaginated</code> property. Change the page size by passing a <code>itemsPerPage</code> property (default: 10).</p> <div style="background-color:inherit;margin-block-end:space.large" class="amplify-card amplify-card--outlined example "><div style="flex-direction:column" class="amplify-flex"><div class="amplify-flex amplify-collection"><div style="flex-direction:row;flex-wrap:wrap" class="amplify-flex amplify-collection-items"><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇩 Andorra</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇪 United Arab Emirates</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇫 Afghanistan</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇬 Antigua and Barbuda</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇮 Anguilla</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇱 Albania</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇲 Armenia</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇴 Angola</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇶 Antarctica</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇷 Argentina</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇸 American Samoa</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇹 Austria</button></div><div class="amplify-flex amplify-collection-pagination"><nav class="amplify-pagination"><ol style="justify-content:center;align-items:center;gap:inherit" class="amplify-flex"><li><button aria-label="Go to previous page" disabled="" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-button--disabled amplify-pagination__item amplify-pagination__item--link amplify-pagination__item--disabled" type="button"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.41 7.41L14 6L8 12L14 18L15.41 16.59L10.83 12L15.41 7.41Z" fill="currentColor"></path></svg></span></button></li><li><button data-testid="current" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item amplify-pagination__item--current" type="button" aria-current="page"><span class="amplify-visually-hidden">Page:</span>1</button></li><li><button aria-label="Go to page 2" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item" type="button">2</button></li><li><button aria-label="Go to page 3" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item" type="button">3</button></li><li><button aria-label="Go to page 4" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item" type="button">4</button></li><li><button aria-label="Go to page 5" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item" type="button">5</button></li><li><span data-testid="ellipsis" class="amplify-flex amplify-pagination__item--ellipsis">…</span></li><li><button aria-label="Go to page 21" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item" type="button">21</button></li><li><button aria-label="Go to next page" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item amplify-pagination__item--link" type="button"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.99984 6L8.58984 7.41L13.1698 12L8.58984 16.59L9.99984 18L15.9998 12L9.99984 6Z" fill="currentColor"></path></svg></span></button></li></ol></nav></div></div><div class="example-code"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small example-copy-button" type="button">Copy</button><div><pre class="language-tsx"><code class="language-tsx"><span class="token keyword">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Collection</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Button</span> <span class="token punctuation">}</span></span> <span class="token keyword">from</span> <span class="token string">'@aws-amplify/ui-react'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token imports"><span class="token punctuation">{</span> countries <span class="token punctuation">}</span></span> <span class="token keyword">from</span> <span class="token string">'countries-list'</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">PaginationCollectionExample</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Collection</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>list<span class="token punctuation">"</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span> <span class="token attr-name">wrap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>wrap<span class="token punctuation">"</span></span> <span class="token attr-name">items</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token known-class-name class-name">Object</span><span class="token punctuation">.</span><span class="token method function property-access">values</span><span class="token punctuation">(</span>countries<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> name<span class="token punctuation">,</span> emoji <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> name<span class="token punctuation">,</span> emoji<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token attr-name">isPaginated</span> <span class="token attr-name">itemsPerPage</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">12</span><span class="token punctuation">}</span></span> <span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">regions<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">grow</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>index<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token punctuation">{</span>regions<span class="token punctuation">.</span><span class="token property-access">emoji</span><span class="token punctuation">}</span><span class="token plain-text"> </span><span class="token punctuation">{</span>regions<span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">}</span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span> <span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Collection</span></span><span class="token punctuation">></span></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre></div></div></div></div> <h2 id="search"><a aria-hidden="true" tabindex="-1" href="#search"><span class="icon icon-link"></span></a>Search</h2> <p>Collections can also be filtered, adding a <code>isSearchable</code> property. Pass a custom <code>searchFilter</code> function to enhance your search experience (default search filter looks for any string-like property inside of items)</p> <div style="background-color:inherit;margin-block-end:space.large" class="amplify-card amplify-card--outlined example "><div style="flex-direction:column" class="amplify-flex"><div class="amplify-flex amplify-collection"><div class="amplify-flex amplify-collection-search"><div class="amplify-flex amplify-field amplify-textfield amplify-searchfield"><label class="amplify-label amplify-visually-hidden" for="amplify-id-:R1aarpdl6:">Search</label><div class="amplify-flex amplify-field-group amplify-field-group--has-inner-end amplify-field-group--horizontal"><div class="amplify-field-group__field-wrapper amplify-field-group__field-wrapper--horizontal"><input aria-invalid="false" autoComplete="off" class="amplify-input amplify-field-group__control" id="amplify-id-:R1aarpdl6:" type="text" name="q" placeholder="Type to search..." value=""/><div class="amplify-field-group__inner-end"></div></div><div class="amplify-field-group__outer-end"><button aria-label="Search" class="amplify-button amplify-field-group__control amplify-field-group__icon amplify-field-group__icon-button amplify-searchfield__search" type="submit"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14V14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z" fill="currentColor"></path></svg></span></button></div></div></div></div><div style="grid-template-columns:1fr 1fr 1fr;gap:15px" class="amplify-grid amplify-collection-items"><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇩 Andorra</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇪 United Arab Emirates</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇫 Afghanistan</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇬 Antigua and Barbuda</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇮 Anguilla</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇱 Albania</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇲 Armenia</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇴 Angola</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇶 Antarctica</button></div><div class="amplify-flex amplify-collection-pagination"><nav class="amplify-pagination"><ol style="justify-content:center;align-items:center;gap:inherit" class="amplify-flex"><li><button aria-label="Go to previous page" disabled="" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-button--disabled amplify-pagination__item amplify-pagination__item--link amplify-pagination__item--disabled" type="button"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.41 7.41L14 6L8 12L14 18L15.41 16.59L10.83 12L15.41 7.41Z" fill="currentColor"></path></svg></span></button></li><li><button data-testid="current" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item amplify-pagination__item--current" type="button" aria-current="page"><span class="amplify-visually-hidden">Page:</span>1</button></li><li><button aria-label="Go to page 2" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item" type="button">2</button></li><li><button aria-label="Go to page 3" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item" type="button">3</button></li><li><button aria-label="Go to page 4" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item" type="button">4</button></li><li><button aria-label="Go to page 5" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item" type="button">5</button></li><li><span data-testid="ellipsis" class="amplify-flex amplify-pagination__item--ellipsis">…</span></li><li><button aria-label="Go to page 28" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item" type="button">28</button></li><li><button aria-label="Go to next page" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item amplify-pagination__item--link" type="button"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.99984 6L8.58984 7.41L13.1698 12L8.58984 16.59L9.99984 18L15.9998 12L9.99984 6Z" fill="currentColor"></path></svg></span></button></li></ol></nav></div></div><div class="example-code"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small example-copy-button" type="button">Copy</button><div><pre class="language-tsx"><code class="language-tsx"><span class="token keyword">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Collection</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Button</span> <span class="token punctuation">}</span></span> <span class="token keyword">from</span> <span class="token string">'@aws-amplify/ui-react'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token imports"><span class="token punctuation">{</span> countries <span class="token punctuation">}</span></span> <span class="token keyword">from</span> <span class="token string">'countries-list'</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">SearchCollectionExample</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Collection</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>grid<span class="token punctuation">"</span></span> <span class="token attr-name">templateColumns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1fr 1fr 1fr<span class="token punctuation">"</span></span> <span class="token attr-name">gap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>15px<span class="token punctuation">"</span></span> <span class="token attr-name">items</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token known-class-name class-name">Object</span><span class="token punctuation">.</span><span class="token method function property-access">values</span><span class="token punctuation">(</span>countries<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> name<span class="token punctuation">,</span> emoji <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> name<span class="token punctuation">,</span> emoji<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token attr-name">isSearchable</span> <span class="token attr-name">isPaginated</span> <span class="token attr-name">itemsPerPage</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">9</span><span class="token punctuation">}</span></span> <span class="token attr-name">searchPlaceholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Type to search...<span class="token punctuation">"</span></span> <span class="token attr-name">searchFilter</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">regions<span class="token punctuation">,</span> keyword</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>regions <span class="token keyword">as</span> <span class="token builtin">any</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">.</span><span class="token method function property-access">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">startsWith</span><span class="token punctuation">(</span>keyword<span class="token punctuation">.</span><span class="token method function property-access">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">}</span></span> <span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">regions<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">grow</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>index<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token punctuation">{</span>regions<span class="token punctuation">.</span><span class="token property-access">emoji</span><span class="token punctuation">}</span><span class="token plain-text"> </span><span class="token punctuation">{</span>regions<span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">}</span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span> <span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Collection</span></span><span class="token punctuation">></span></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre></div></div></div></div> <h3 id="no-results-found"><a aria-hidden="true" tabindex="-1" href="#no-results-found"><span class="icon icon-link"></span></a>No Results Found</h3> <p>To handle the case when no results are found from the search, you can pass a custom <code>ReactNode</code> (includes <code>string</code>) to the <code>searchNoResultsFound</code> prop. By default, Collection renders the text "No results found".</p> <div style="background-color:inherit;margin-block-end:space.large" class="amplify-card amplify-card--outlined example "><div style="flex-direction:column" class="amplify-flex"><div class="amplify-flex amplify-collection"><div class="amplify-flex amplify-collection-search"><div class="amplify-flex amplify-field amplify-textfield amplify-searchfield"><label class="amplify-label amplify-visually-hidden" for="amplify-id-:R1amrpdl6:">Search</label><div class="amplify-flex amplify-field-group amplify-field-group--has-inner-end amplify-field-group--horizontal"><div class="amplify-field-group__field-wrapper amplify-field-group__field-wrapper--horizontal"><input aria-invalid="false" autoComplete="off" class="amplify-input amplify-field-group__control" id="amplify-id-:R1amrpdl6:" type="text" name="q" placeholder="Type to search..." value=""/><div class="amplify-field-group__inner-end"></div></div><div class="amplify-field-group__outer-end"><button aria-label="Search" class="amplify-button amplify-field-group__control amplify-field-group__icon amplify-field-group__icon-button amplify-searchfield__search" type="submit"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14V14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z" fill="currentColor"></path></svg></span></button></div></div></div></div><div style="grid-template-columns:1fr 1fr 1fr;gap:15px" class="amplify-grid amplify-collection-items"><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇩 Andorra</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇪 United Arab Emirates</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇫 Afghanistan</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇬 Antigua and Barbuda</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇮 Anguilla</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇱 Albania</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇲 Armenia</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇴 Angola</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇶 Antarctica</button></div><div class="amplify-flex amplify-collection-pagination"><nav class="amplify-pagination"><ol style="justify-content:center;align-items:center;gap:inherit" class="amplify-flex"><li><button aria-label="Go to previous page" disabled="" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-button--disabled amplify-pagination__item amplify-pagination__item--link amplify-pagination__item--disabled" type="button"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.41 7.41L14 6L8 12L14 18L15.41 16.59L10.83 12L15.41 7.41Z" fill="currentColor"></path></svg></span></button></li><li><button data-testid="current" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item amplify-pagination__item--current" type="button" aria-current="page"><span class="amplify-visually-hidden">Page:</span>1</button></li><li><button aria-label="Go to page 2" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item" type="button">2</button></li><li><button aria-label="Go to page 3" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item" type="button">3</button></li><li><button aria-label="Go to page 4" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item" type="button">4</button></li><li><button aria-label="Go to page 5" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item" type="button">5</button></li><li><span data-testid="ellipsis" class="amplify-flex amplify-pagination__item--ellipsis">…</span></li><li><button aria-label="Go to page 28" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item" type="button">28</button></li><li><button aria-label="Go to next page" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item amplify-pagination__item--link" type="button"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.99984 6L8.58984 7.41L13.1698 12L8.58984 16.59L9.99984 18L15.9998 12L9.99984 6Z" fill="currentColor"></path></svg></span></button></li></ol></nav></div></div><div class="example-code"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small example-copy-button" type="button">Copy</button><div><pre class="language-tsx"><code class="language-tsx"><span class="token keyword">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Collection</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Button</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Text</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Flex</span> <span class="token punctuation">}</span></span> <span class="token keyword">from</span> <span class="token string">'@aws-amplify/ui-react'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token imports"><span class="token punctuation">{</span> countries <span class="token punctuation">}</span></span> <span class="token keyword">from</span> <span class="token string">'countries-list'</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">SearchNoResultsFoundCollectionExample</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Collection</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>grid<span class="token punctuation">"</span></span> <span class="token attr-name">templateColumns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1fr 1fr 1fr<span class="token punctuation">"</span></span> <span class="token attr-name">gap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>15px<span class="token punctuation">"</span></span> <span class="token attr-name">items</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token known-class-name class-name">Object</span><span class="token punctuation">.</span><span class="token method function property-access">values</span><span class="token punctuation">(</span>countries<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> name<span class="token punctuation">,</span> emoji <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> name<span class="token punctuation">,</span> emoji<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token attr-name">isSearchable</span> <span class="token attr-name">isPaginated</span> <span class="token attr-name">itemsPerPage</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">9</span><span class="token punctuation">}</span></span> <span class="token attr-name">searchNoResultsFound</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Flex</span></span> <span class="token attr-name">justifyContent</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>purple.80<span class="token punctuation">"</span></span> <span class="token attr-name">fontSize</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1rem<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text"> Nothing found, please try again </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Flex</span></span><span class="token punctuation">></span></span> <span class="token punctuation">}</span></span> <span class="token attr-name">searchPlaceholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Type to search...<span class="token punctuation">"</span></span> <span class="token attr-name">searchFilter</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">regions<span class="token punctuation">,</span> keyword</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>regions <span class="token keyword">as</span> <span class="token builtin">any</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">.</span><span class="token method function property-access">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">startsWith</span><span class="token punctuation">(</span>keyword<span class="token punctuation">.</span><span class="token method function property-access">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">}</span></span> <span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">regions<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">grow</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>index<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token punctuation">{</span>regions<span class="token punctuation">.</span><span class="token property-access">emoji</span><span class="token punctuation">}</span><span class="token plain-text"> </span><span class="token punctuation">{</span>regions<span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">}</span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span> <span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Collection</span></span><span class="token punctuation">></span></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre></div></div></div></div> <h2 id="customization"><a aria-hidden="true" tabindex="-1" href="#customization"><span class="icon icon-link"></span></a>Customization</h2> <h3 id="theme"><a aria-hidden="true" tabindex="-1" href="#theme"><span class="icon icon-link"></span></a>Theme</h3> <p>You can customize the appearance of all Collection components in your application with a <a href="/theming">Theme</a>.</p> <a class="amplify-link docs-component-link" rel="noopener noreferrer" target="_blank" href="https://github.com/aws-amplify/amplify-ui//blob/main/packages/ui/src/theme/tokens/components/collection.ts"><svg aria-label="theme-source" style="margin-inline-end:0.5rem" class="amplify-icon" viewBox="0 0 200 200"><path d="M100.011 9L100.04 9.04999L100.069 9L179.21 54.6924L179.033 55H179.069V145.053L179.152 145.198L179.069 145.246V146H177.762L100.069 190.856L100.04 190.806L100.011 190.856L21 145.239L21.1382 145H21.0688V55H21.3122L21.0684 54.5776L100.011 9ZM125.466 75.9893L154.782 59.0637L100.04 27.4586L45.5198 58.9358L74.7197 75.7944C81.0908 69.1422 90.0617 65 100 65C110.035 65 119.084 69.2232 125.466 75.9893ZM133.499 89.8267C134.475 93.046 135 96.4617 135 100C135 116.553 123.509 130.422 108.069 134.065V167.762L163.069 136.008V72.7543L133.499 89.8267ZM92.0688 134.098C76.5593 130.504 65 116.602 65 100C65 96.3676 65.5533 92.8645 66.5803 89.5703L37.0688 72.5318V136.041L92.0688 167.796V134.098ZM119 100C119 110.493 110.493 119 100 119C89.5066 119 81 110.493 81 100C81 89.5066 89.5066 81 100 81C110.493 81 119 89.5066 119 100Z" fill-rule="evenodd"></path></svg><p>Collection Theme Source</p></a> <div style="background-color:var(--amplify-colors-white)"><div style="background-color:inherit;margin-block-end:space.large" class="amplify-card amplify-card--outlined example "><div style="flex-direction:column" class="amplify-flex"><div data-amplify-theme="collection-theme" data-amplify-color-mode="light" dir="ltr"><div class="amplify-flex amplify-collection"><div class="amplify-flex amplify-collection-search"><div class="amplify-flex amplify-field amplify-textfield amplify-searchfield"><label class="amplify-label amplify-visually-hidden" for="amplify-id-:R1bqurpdl6:">Search</label><div class="amplify-flex amplify-field-group amplify-field-group--has-inner-end amplify-field-group--horizontal"><div class="amplify-field-group__field-wrapper amplify-field-group__field-wrapper--horizontal"><input aria-invalid="false" autoComplete="off" class="amplify-input amplify-field-group__control" id="amplify-id-:R1bqurpdl6:" type="text" name="q" placeholder="Type to search..." value=""/><div class="amplify-field-group__inner-end"></div></div><div class="amplify-field-group__outer-end"><button aria-label="Search" class="amplify-button amplify-field-group__control amplify-field-group__icon amplify-field-group__icon-button amplify-searchfield__search" type="submit"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14V14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z" fill="currentColor"></path></svg></span></button></div></div></div></div><div style="grid-template-columns:1fr 1fr 1fr;gap:15px" class="amplify-grid amplify-collection-items"><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇩 Andorra</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇪 United Arab Emirates</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇫 Afghanistan</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇬 Antigua and Barbuda</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇮 Anguilla</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇱 Albania</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇲 Armenia</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇴 Angola</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇶 Antarctica</button></div><div class="amplify-flex amplify-collection-pagination"><nav class="amplify-pagination"><ol style="justify-content:center;align-items:center;gap:inherit" class="amplify-flex"><li><button aria-label="Go to previous page" disabled="" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-button--disabled amplify-pagination__item amplify-pagination__item--link amplify-pagination__item--disabled" type="button"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.41 7.41L14 6L8 12L14 18L15.41 16.59L10.83 12L15.41 7.41Z" fill="currentColor"></path></svg></span></button></li><li><button data-testid="current" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item amplify-pagination__item--current" type="button" aria-current="page"><span class="amplify-visually-hidden">Page:</span>1</button></li><li><button aria-label="Go to page 2" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item" type="button">2</button></li><li><button aria-label="Go to page 3" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item" type="button">3</button></li><li><button aria-label="Go to page 4" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item" type="button">4</button></li><li><button aria-label="Go to page 5" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item" type="button">5</button></li><li><span data-testid="ellipsis" class="amplify-flex amplify-pagination__item--ellipsis">…</span></li><li><button aria-label="Go to page 28" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item" type="button">28</button></li><li><button aria-label="Go to next page" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item amplify-pagination__item--link" type="button"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.99984 6L8.58984 7.41L13.1698 12L8.58984 16.59L9.99984 18L15.9998 12L9.99984 6Z" fill="currentColor"></path></svg></span></button></li></ol></nav></div></div></div><style id="amplify-theme-collection-theme">[data-amplify-theme="collection-theme"] { --amplify-components-accordion-background-color: var(--amplify-colors-background-primary); --amplify-components-accordion-item-border-color: var(--amplify-colors-border-secondary); --amplify-components-accordion-item-border-width: var(--amplify-border-widths-small); --amplify-components-accordion-item-border-style: solid; --amplify-components-accordion-item-border-radius: var(--amplify-radii-small); --amplify-components-accordion-item-trigger-align-items: center; --amplify-components-accordion-item-trigger-background-color: var(--amplify-colors-background-primary); --amplify-components-accordion-item-trigger-color: inherit; --amplify-components-accordion-item-trigger-gap: var(--amplify-space-small); --amplify-components-accordion-item-trigger-justify-content: space-between; --amplify-components-accordion-item-trigger-padding-block: var(--amplify-space-xs); --amplify-components-accordion-item-trigger-padding-inline: var(--amplify-space-small); --amplify-components-accordion-item-trigger-hover-color: inherit; --amplify-components-accordion-item-trigger-hover-background-color: var(--amplify-colors-overlay-5); --amplify-components-accordion-item-trigger-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-accordion-item-trigger-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus); --amplify-components-accordion-item-content-color: inherit; --amplify-components-accordion-item-content-padding-inline: var(--amplify-space-small); --amplify-components-accordion-item-content-padding-block-end: var(--amplify-space-small); --amplify-components-accordion-item-content-padding-block-start: var(--amplify-space-xxxs); --amplify-components-accordion-item-icon-color: var(--amplify-colors-font-tertiary); --amplify-components-accordion-item-icon-transition-duration: var(--amplify-time-medium); --amplify-components-accordion-item-icon-transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1); --amplify-components-ai-conversation-message-background-color: var(--amplify-colors-background-secondary); --amplify-components-ai-conversation-message-border-radius: var(--amplify-radii-large); --amplify-components-ai-conversation-message-gap: var(--amplify-space-small); --amplify-components-ai-conversation-message-padding-block: var(--amplify-space-small); --amplify-components-ai-conversation-message-padding-inline: var(--amplify-space-small); --amplify-components-ai-conversation-message-user-background-color: var(--amplify-colors-background-secondary); --amplify-components-ai-conversation-message-assistant-background-color: var(--amplify-colors-primary-10); --amplify-components-ai-conversation-message-sender-gap: var(--amplify-space-small); --amplify-components-ai-conversation-message-sender-username-color: var(--amplify-colors-font-primary); --amplify-components-ai-conversation-message-sender-username-font-size: inherit; --amplify-components-ai-conversation-message-sender-username-font-weight: var(--amplify-font-weights-bold); --amplify-components-ai-conversation-message-sender-timestamp-color: var(--amplify-colors-font-tertiary); --amplify-components-ai-conversation-message-sender-timestamp-font-size: inherit; --amplify-components-ai-conversation-message-sender-timestamp-font-weight: inherit; --amplify-components-ai-conversation-message-body-gap: var(--amplify-space-xs); --amplify-components-ai-conversation-form-gap: var(--amplify-space-small); --amplify-components-ai-conversation-form-padding: var(--amplify-space-small); --amplify-components-ai-conversation-attachment-border-color: var(--amplify-colors-border-secondary); --amplify-components-ai-conversation-attachment-border-width: var(--amplify-border-widths-small); --amplify-components-ai-conversation-attachment-border-radius: var(--amplify-radii-small); --amplify-components-ai-conversation-attachment-font-size: var(--amplify-font-sizes-small); --amplify-components-ai-conversation-attachment-padding-block: var(--amplify-space-xxxs); --amplify-components-ai-conversation-attachment-padding-inline: var(--amplify-space-xs); --amplify-components-ai-conversation-attachment-gap: var(--amplify-space-xs); --amplify-components-ai-conversation-attachment-list-padding-block-start: var(--amplify-space-xs); --amplify-components-ai-conversation-attachment-list-gap: var(--amplify-space-xxs); --amplify-components-ai-conversation-attachment-name-color: var(--amplify-colors-font-primary); --amplify-components-ai-conversation-attachment-name-font-size: var(--amplify-font-sizes-small); --amplify-components-ai-conversation-attachment-name-font-weight: var(--amplify-font-weights-normal); --amplify-components-ai-conversation-attachment-size-color: var(--amplify-colors-font-tertiary); --amplify-components-ai-conversation-attachment-size-font-size: var(--amplify-font-sizes-small); --amplify-components-ai-conversation-attachment-size-font-weight: var(--amplify-font-weights-normal); --amplify-components-ai-conversation-attachment-remove-padding: var(--amplify-space-xxs); --amplify-components-ai-conversation-attachment-image-width: var(--amplify-font-sizes-medium); --amplify-components-ai-conversation-attachment-image-height: var(--amplify-font-sizes-medium); --amplify-components-alert-align-items: center; --amplify-components-alert-justify-content: space-between; --amplify-components-alert-color: var(--amplify-colors-font-primary); --amplify-components-alert-background-color: var(--amplify-colors-background-tertiary); --amplify-components-alert-padding-block: var(--amplify-space-small); --amplify-components-alert-padding-inline: var(--amplify-space-medium); --amplify-components-alert-icon-size: var(--amplify-font-sizes-xl); --amplify-components-alert-heading-font-size: var(--amplify-font-sizes-medium); --amplify-components-alert-heading-font-weight: var(--amplify-font-weights-bold); --amplify-components-alert-info-color: var(--amplify-colors-font-info); --amplify-components-alert-info-background-color: var(--amplify-colors-background-info); --amplify-components-alert-error-color: var(--amplify-colors-font-error); --amplify-components-alert-error-background-color: var(--amplify-colors-background-error); --amplify-components-alert-warning-color: var(--amplify-colors-font-warning); --amplify-components-alert-warning-background-color: var(--amplify-colors-background-warning); --amplify-components-alert-success-color: var(--amplify-colors-font-success); --amplify-components-alert-success-background-color: var(--amplify-colors-background-success); --amplify-components-authenticator-max-width: 60rem; --amplify-components-authenticator-modal-width: var(--amplify-space-relative-full); --amplify-components-authenticator-modal-height: var(--amplify-space-relative-full); --amplify-components-authenticator-modal-background-color: var(--amplify-colors-overlay-50); --amplify-components-authenticator-modal-top: var(--amplify-space-zero); --amplify-components-authenticator-modal-left: var(--amplify-space-zero); --amplify-components-authenticator-container-width-max: 30rem; --amplify-components-authenticator-router-border-width: var(--amplify-border-widths-small); --amplify-components-authenticator-router-border-style: solid; --amplify-components-authenticator-router-border-color: var(--amplify-colors-border-primary); --amplify-components-authenticator-router-background-color: var(--amplify-colors-background-primary); --amplify-components-authenticator-router-box-shadow: var(--amplify-shadows-medium); --amplify-components-authenticator-footer-padding-bottom: var(--amplify-space-medium); --amplify-components-authenticator-form-padding: var(--amplify-space-xl); --amplify-components-authenticator-state-inactive-background-color: var(--amplify-colors-background-secondary); --amplify-components-authenticator-or-container-color: var(--amplify-colors-neutral-80); --amplify-components-authenticator-or-container-or-line-background-color: var(--amplify-colors-background-primary); --amplify-components-autocomplete-menu-width: 100%; --amplify-components-autocomplete-menu-margin-block-start: var(--amplify-space-xxxs); --amplify-components-autocomplete-menu-background-color: var(--amplify-colors-background-primary); --amplify-components-autocomplete-menu-border-color: var(--amplify-colors-border-primary); --amplify-components-autocomplete-menu-border-width: var(--amplify-border-widths-small); --amplify-components-autocomplete-menu-border-style: solid; --amplify-components-autocomplete-menu-border-radius: var(--amplify-radii-small); --amplify-components-autocomplete-menu-options-display: flex; --amplify-components-autocomplete-menu-options-flex-direction: column; --amplify-components-autocomplete-menu-options-max-height: 300px; --amplify-components-autocomplete-menu-option-background-color: var(--amplify-colors-background-primary); --amplify-components-autocomplete-menu-option-color: currentcolor; --amplify-components-autocomplete-menu-option-cursor: pointer; --amplify-components-autocomplete-menu-option-transition-duration: var(--amplify-time-short); --amplify-components-autocomplete-menu-option-transition-property: background-color, color; --amplify-components-autocomplete-menu-option-transition-timing-function: ease; --amplify-components-autocomplete-menu-option-active-background-color: var(--amplify-colors-primary-80); --amplify-components-autocomplete-menu-option-active-color: var(--amplify-colors-white); --amplify-components-autocomplete-menu-empty-display: flex; --amplify-components-autocomplete-menu-loading-align-items: center; --amplify-components-autocomplete-menu-loading-display: flex; --amplify-components-autocomplete-menu-loading-gap: var(--amplify-space-xxxs); --amplify-components-autocomplete-menu-space-shared-padding-block: var(--amplify-space-xs); --amplify-components-autocomplete-menu-space-shared-padding-inline: var(--amplify-space-small); --amplify-components-avatar-color: var(--amplify-colors-font-tertiary); --amplify-components-avatar-line-height: 1; --amplify-components-avatar-font-weight: var(--amplify-font-weights-semibold); --amplify-components-avatar-font-size: var(--amplify-font-sizes-small); --amplify-components-avatar-text-align: center; --amplify-components-avatar-width: var(--amplify-font-sizes-xxl); --amplify-components-avatar-height: var(--amplify-font-sizes-xxl); --amplify-components-avatar-background-color: var(--amplify-colors-background-tertiary); --amplify-components-avatar-border-radius: 100%; --amplify-components-avatar-border-color: var(--amplify-colors-border-primary); --amplify-components-avatar-border-width: var(--amplify-border-widths-medium); --amplify-components-avatar-info-color: var(--amplify-colors-font-info); --amplify-components-avatar-info-background-color: var(--amplify-colors-background-info); --amplify-components-avatar-info-border-color: var(--amplify-colors-border-info); --amplify-components-avatar-warning-color: var(--amplify-colors-font-warning); --amplify-components-avatar-warning-background-color: var(--amplify-colors-background-warning); --amplify-components-avatar-warning-border-color: var(--amplify-colors-border-warning); --amplify-components-avatar-success-color: var(--amplify-colors-font-success); --amplify-components-avatar-success-background-color: var(--amplify-colors-background-success); --amplify-components-avatar-success-border-color: var(--amplify-colors-border-success); --amplify-components-avatar-error-color: var(--amplify-colors-font-error); --amplify-components-avatar-error-background-color: var(--amplify-colors-background-error); --amplify-components-avatar-error-border-color: var(--amplify-colors-border-error); --amplify-components-avatar-small-font-size: var(--amplify-font-sizes-xs); --amplify-components-avatar-small-width: var(--amplify-font-sizes-xl); --amplify-components-avatar-small-height: var(--amplify-font-sizes-xl); --amplify-components-avatar-large-font-size: var(--amplify-font-sizes-medium); --amplify-components-avatar-large-width: var(--amplify-font-sizes-xxxl); --amplify-components-avatar-large-height: var(--amplify-font-sizes-xxxl); --amplify-components-badge-color: var(--amplify-colors-font-primary); --amplify-components-badge-line-height: 1; --amplify-components-badge-font-weight: var(--amplify-font-weights-semibold); --amplify-components-badge-font-size: var(--amplify-font-sizes-small); --amplify-components-badge-text-align: center; --amplify-components-badge-padding-vertical: var(--amplify-space-xs); --amplify-components-badge-padding-horizontal: var(--amplify-space-small); --amplify-components-badge-background-color: var(--amplify-colors-background-tertiary); --amplify-components-badge-border-radius: var(--amplify-radii-xl); --amplify-components-badge-info-color: var(--amplify-colors-font-info); --amplify-components-badge-info-background-color: var(--amplify-colors-background-info); --amplify-components-badge-warning-color: var(--amplify-colors-font-warning); --amplify-components-badge-warning-background-color: var(--amplify-colors-background-warning); --amplify-components-badge-success-color: var(--amplify-colors-font-success); --amplify-components-badge-success-background-color: var(--amplify-colors-background-success); --amplify-components-badge-error-color: var(--amplify-colors-font-error); --amplify-components-badge-error-background-color: var(--amplify-colors-background-error); --amplify-components-badge-small-font-size: var(--amplify-font-sizes-xs); --amplify-components-badge-small-padding-vertical: var(--amplify-space-xxs); --amplify-components-badge-small-padding-horizontal: var(--amplify-space-xs); --amplify-components-badge-large-font-size: var(--amplify-font-sizes-medium); --amplify-components-badge-large-padding-vertical: var(--amplify-space-small); --amplify-components-badge-large-padding-horizontal: var(--amplify-space-medium); --amplify-components-breadcrumbs-flex-direction: row; --amplify-components-breadcrumbs-flex-wrap: wrap; --amplify-components-breadcrumbs-gap: 0; --amplify-components-breadcrumbs-color: var(--amplify-colors-font-tertiary); --amplify-components-breadcrumbs-item-flex-direction: row; --amplify-components-breadcrumbs-item-color: inherit; --amplify-components-breadcrumbs-item-font-size: inherit; --amplify-components-breadcrumbs-item-align-items: center; --amplify-components-breadcrumbs-item-line-height: 1; --amplify-components-breadcrumbs-separator-color: inherit; --amplify-components-breadcrumbs-separator-font-size: inherit; --amplify-components-breadcrumbs-separator-padding-inline: var(--amplify-space-xxs); --amplify-components-breadcrumbs-link-color: var(--amplify-components-link-color); --amplify-components-breadcrumbs-link-font-size: inherit; --amplify-components-breadcrumbs-link-font-weight: normal; --amplify-components-breadcrumbs-link-text-decoration: none; --amplify-components-breadcrumbs-link-padding-inline: var(--amplify-space-xs); --amplify-components-breadcrumbs-link-padding-block: var(--amplify-space-xxs); --amplify-components-breadcrumbs-link-current-color: inherit; --amplify-components-breadcrumbs-link-current-font-size: inherit; --amplify-components-breadcrumbs-link-current-font-weight: normal; --amplify-components-breadcrumbs-link-current-text-decoration: none; --amplify-components-button-font-weight: var(--amplify-font-weights-bold); --amplify-components-button-transition-duration: var(--amplify-components-fieldcontrol-transition-duration); --amplify-components-button-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-button-line-height: var(--amplify-components-fieldcontrol-line-height); --amplify-components-button-padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start); --amplify-components-button-padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end); --amplify-components-button-padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start); --amplify-components-button-padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end); --amplify-components-button-background-color: transparent; --amplify-components-button-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-button-border-width: var(--amplify-components-fieldcontrol-border-width); --amplify-components-button-border-style: var(--amplify-components-fieldcontrol-border-style); --amplify-components-button-border-radius: var(--amplify-components-fieldcontrol-border-radius); --amplify-components-button-color: var(--amplify-colors-font-primary); --amplify-components-button-hover-color: var(--amplify-colors-font-focus); --amplify-components-button-hover-background-color: var(--amplify-colors-primary-10); --amplify-components-button-hover-border-color: var(--amplify-colors-primary-60); --amplify-components-button-focus-color: var(--amplify-colors-font-focus); --amplify-components-button-focus-background-color: var(--amplify-colors-primary-10); --amplify-components-button-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-button-active-color: var(--amplify-colors-font-active); --amplify-components-button-active-background-color: var(--amplify-colors-primary-20); --amplify-components-button-active-border-color: var(--amplify-colors-primary-100); --amplify-components-button-loading-color: var(--amplify-colors-font-disabled); --amplify-components-button-loading-background-color: transparent; --amplify-components-button-loading-border-color: var(--amplify-colors-border-tertiary); --amplify-components-button-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-disabled-background-color: transparent; --amplify-components-button-disabled-border-color: var(--amplify-colors-border-tertiary); --amplify-components-button-outlined-info-border-color: var(--amplify-colors-blue-60); --amplify-components-button-outlined-info-background-color: transparent; --amplify-components-button-outlined-info-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-info-hover-border-color: var(--amplify-colors-blue-60); --amplify-components-button-outlined-info-hover-background-color: var(--amplify-colors-blue-10); --amplify-components-button-outlined-info-hover-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-info-focus-border-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-info-focus-background-color: var(--amplify-colors-blue-10); --amplify-components-button-outlined-info-focus-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow); --amplify-components-button-outlined-info-active-border-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-info-active-background-color: var(--amplify-colors-blue-20); --amplify-components-button-outlined-info-active-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-warning-border-color: var(--amplify-colors-orange-60); --amplify-components-button-outlined-warning-background-color: transparent; --amplify-components-button-outlined-warning-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-warning-hover-border-color: var(--amplify-colors-orange-60); --amplify-components-button-outlined-warning-hover-background-color: var(--amplify-colors-orange-10); --amplify-components-button-outlined-warning-hover-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-warning-focus-border-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-warning-focus-background-color: var(--amplify-colors-orange-10); --amplify-components-button-outlined-warning-focus-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-warning-focus-box-shadow); --amplify-components-button-outlined-warning-active-border-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-warning-active-background-color: var(--amplify-colors-orange-20); --amplify-components-button-outlined-warning-active-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-success-border-color: var(--amplify-colors-green-60); --amplify-components-button-outlined-success-background-color: transparent; --amplify-components-button-outlined-success-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-success-hover-border-color: var(--amplify-colors-green-60); --amplify-components-button-outlined-success-hover-background-color: var(--amplify-colors-green-10); --amplify-components-button-outlined-success-hover-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-success-focus-border-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-success-focus-background-color: var(--amplify-colors-green-10); --amplify-components-button-outlined-success-focus-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow); --amplify-components-button-outlined-success-active-border-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-success-active-background-color: var(--amplify-colors-green-20); --amplify-components-button-outlined-success-active-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-80); --amplify-components-button-outlined-error-background-color: transparent; --amplify-components-button-outlined-error-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-80); --amplify-components-button-outlined-error-hover-background-color: var(--amplify-colors-red-10); --amplify-components-button-outlined-error-hover-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-error-focus-border-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-error-focus-background-color: var(--amplify-colors-red-10); --amplify-components-button-outlined-error-focus-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-button-outlined-error-active-border-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-error-active-background-color: var(--amplify-colors-red-20); --amplify-components-button-outlined-error-active-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-overlay-border-color: var(--amplify-colors-overlay-60); --amplify-components-button-outlined-overlay-background-color: transparent; --amplify-components-button-outlined-overlay-color: var(--amplify-colors-font-primary); --amplify-components-button-outlined-overlay-hover-border-color: var(--amplify-colors-overlay-60); --amplify-components-button-outlined-overlay-hover-background-color: var(--amplify-colors-overlay-5); --amplify-components-button-outlined-overlay-hover-color: var(--amplify-colors-neutral-90); --amplify-components-button-outlined-overlay-focus-border-color: var(--amplify-colors-overlay-90); --amplify-components-button-outlined-overlay-focus-background-color: var(--amplify-colors-overlay-5); --amplify-components-button-outlined-overlay-focus-color: var(--amplify-colors-neutral-90); --amplify-components-button-outlined-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow); --amplify-components-button-outlined-overlay-active-border-color: var(--amplify-colors-overlay-90); --amplify-components-button-outlined-overlay-active-background-color: var(--amplify-colors-overlay-10); --amplify-components-button-outlined-overlay-active-color: var(--amplify-colors-neutral-100); --amplify-components-button-primary-border-color: transparent; --amplify-components-button-primary-border-width: var(--amplify-border-widths-small); --amplify-components-button-primary-border-style: solid; --amplify-components-button-primary-background-color: var(--amplify-colors-primary-80); --amplify-components-button-primary-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-disabled-border-color: transparent; --amplify-components-button-primary-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-button-primary-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-primary-loading-border-color: transparent; --amplify-components-button-primary-loading-background-color: var(--amplify-colors-background-disabled); --amplify-components-button-primary-loading-color: var(--amplify-colors-font-disabled); --amplify-components-button-primary-hover-border-color: transparent; --amplify-components-button-primary-hover-background-color: var(--amplify-colors-primary-90); --amplify-components-button-primary-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-focus-border-color: transparent; --amplify-components-button-primary-focus-background-color: var(--amplify-colors-primary-90); --amplify-components-button-primary-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-button-primary-active-border-color: transparent; --amplify-components-button-primary-active-background-color: var(--amplify-colors-primary-100); --amplify-components-button-primary-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-info-border-color: transparent; --amplify-components-button-primary-info-background-color: var(--amplify-colors-blue-80); --amplify-components-button-primary-info-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-info-hover-border-color: transparent; --amplify-components-button-primary-info-hover-background-color: var(--amplify-colors-blue-90); --amplify-components-button-primary-info-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-info-focus-border-color: transparent; --amplify-components-button-primary-info-focus-background-color: var(--amplify-colors-blue-90); --amplify-components-button-primary-info-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow); --amplify-components-button-primary-info-active-border-color: transparent; --amplify-components-button-primary-info-active-background-color: var(--amplify-colors-blue-100); --amplify-components-button-primary-info-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-warning-border-color: transparent; --amplify-components-button-primary-warning-background-color: var(--amplify-colors-orange-80); --amplify-components-button-primary-warning-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-warning-hover-border-color: transparent; --amplify-components-button-primary-warning-hover-background-color: var(--amplify-colors-orange-90); --amplify-components-button-primary-warning-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-warning-focus-border-color: transparent; --amplify-components-button-primary-warning-focus-background-color: var(--amplify-colors-orange-90); --amplify-components-button-primary-warning-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow); --amplify-components-button-primary-warning-active-border-color: transparent; --amplify-components-button-primary-warning-active-background-color: var(--amplify-colors-orange-100); --amplify-components-button-primary-warning-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-error-border-color: transparent; --amplify-components-button-primary-error-background-color: var(--amplify-colors-red-80); --amplify-components-button-primary-error-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-error-hover-border-color: transparent; --amplify-components-button-primary-error-hover-background-color: var(--amplify-colors-red-90); --amplify-components-button-primary-error-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-error-focus-border-color: transparent; --amplify-components-button-primary-error-focus-background-color: var(--amplify-colors-red-90); --amplify-components-button-primary-error-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-button-primary-error-active-border-color: transparent; --amplify-components-button-primary-error-active-background-color: var(--amplify-colors-red-100); --amplify-components-button-primary-error-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-success-border-color: transparent; --amplify-components-button-primary-success-background-color: var(--amplify-colors-green-80); --amplify-components-button-primary-success-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-success-hover-border-color: transparent; --amplify-components-button-primary-success-hover-background-color: var(--amplify-colors-green-90); --amplify-components-button-primary-success-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-success-focus-border-color: transparent; --amplify-components-button-primary-success-focus-background-color: var(--amplify-colors-green-90); --amplify-components-button-primary-success-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow); --amplify-components-button-primary-success-active-border-color: transparent; --amplify-components-button-primary-success-active-background-color: var(--amplify-colors-green-100); --amplify-components-button-primary-success-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-overlay-border-color: transparent; --amplify-components-button-primary-overlay-background-color: var(--amplify-colors-overlay-70); --amplify-components-button-primary-overlay-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-overlay-hover-border-color: transparent; --amplify-components-button-primary-overlay-hover-background-color: var(--amplify-colors-overlay-90); --amplify-components-button-primary-overlay-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-overlay-focus-border-color: transparent; --amplify-components-button-primary-overlay-focus-background-color: var(--amplify-colors-overlay-90); --amplify-components-button-primary-overlay-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow); --amplify-components-button-primary-overlay-active-border-color: transparent; --amplify-components-button-primary-overlay-active-background-color: var(--amplify-colors-overlay-90); --amplify-components-button-primary-overlay-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-menu-border-width: var(--amplify-space-zero); --amplify-components-button-menu-background-color: transparent; --amplify-components-button-menu-justify-content: start; --amplify-components-button-menu-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-menu-hover-background-color: var(--amplify-colors-primary-80); --amplify-components-button-menu-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-menu-focus-background-color: var(--amplify-colors-primary-80); --amplify-components-button-menu-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-menu-active-background-color: var(--amplify-colors-primary-90); --amplify-components-button-menu-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-link-background-color: transparent; --amplify-components-button-link-border-color: transparent; --amplify-components-button-link-border-width: var(--amplify-border-widths-small); --amplify-components-button-link-color: var(--amplify-colors-font-interactive); --amplify-components-button-link-hover-border-color: transparent; --amplify-components-button-link-hover-background-color: var(--amplify-colors-primary-10); --amplify-components-button-link-hover-color: var(--amplify-colors-font-hover); --amplify-components-button-link-focus-border-color: transparent; --amplify-components-button-link-focus-background-color: var(--amplify-colors-primary-10); --amplify-components-button-link-focus-color: var(--amplify-colors-font-focus); --amplify-components-button-link-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-button-link-active-border-color: transparent; --amplify-components-button-link-active-background-color: var(--amplify-colors-primary-20); --amplify-components-button-link-active-color: var(--amplify-colors-font-active); --amplify-components-button-link-disabled-border-color: transparent; --amplify-components-button-link-disabled-background-color: transparent; --amplify-components-button-link-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-link-loading-border-color: transparent; --amplify-components-button-link-loading-background-color: transparent; --amplify-components-button-link-loading-color: var(--amplify-colors-font-disabled); --amplify-components-button-link-info-border-color: transparent; --amplify-components-button-link-info-background-color: transparent; --amplify-components-button-link-info-color: var(--amplify-colors-blue-100); --amplify-components-button-link-info-hover-border-color: transparent; --amplify-components-button-link-info-hover-background-color: var(--amplify-colors-blue-10); --amplify-components-button-link-info-hover-color: var(--amplify-colors-blue-90); --amplify-components-button-link-info-focus-border-color: transparent; --amplify-components-button-link-info-focus-background-color: var(--amplify-colors-blue-10); --amplify-components-button-link-info-focus-color: var(--amplify-colors-blue-100); --amplify-components-button-link-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow); --amplify-components-button-link-info-active-border-color: transparent; --amplify-components-button-link-info-active-background-color: var(--amplify-colors-blue-20); --amplify-components-button-link-info-active-color: var(--amplify-colors-blue-100); --amplify-components-button-link-warning-border-color: transparent; --amplify-components-button-link-warning-background-color: transparent; --amplify-components-button-link-warning-color: var(--amplify-colors-orange-100); --amplify-components-button-link-warning-hover-border-color: transparent; --amplify-components-button-link-warning-hover-background-color: var(--amplify-colors-orange-10); --amplify-components-button-link-warning-hover-color: var(--amplify-colors-orange-90); --amplify-components-button-link-warning-focus-border-color: transparent; --amplify-components-button-link-warning-focus-background-color: var(--amplify-colors-orange-10); --amplify-components-button-link-warning-focus-color: var(--amplify-colors-orange-100); --amplify-components-button-link-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-warning-focus-box-shadow); --amplify-components-button-link-warning-active-border-color: transparent; --amplify-components-button-link-warning-active-background-color: var(--amplify-colors-orange-20); --amplify-components-button-link-warning-active-color: var(--amplify-colors-orange-100); --amplify-components-button-link-success-border-color: transparent; --amplify-components-button-link-success-background-color: transparent; --amplify-components-button-link-success-color: var(--amplify-colors-green-100); --amplify-components-button-link-success-hover-border-color: transparent; --amplify-components-button-link-success-hover-background-color: var(--amplify-colors-green-10); --amplify-components-button-link-success-hover-color: var(--amplify-colors-green-90); --amplify-components-button-link-success-focus-border-color: transparent; --amplify-components-button-link-success-focus-background-color: var(--amplify-colors-green-10); --amplify-components-button-link-success-focus-color: var(--amplify-colors-green-100); --amplify-components-button-link-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow); --amplify-components-button-link-success-active-border-color: transparent; --amplify-components-button-link-success-active-background-color: var(--amplify-colors-green-20); --amplify-components-button-link-success-active-color: var(--amplify-colors-green-100); --amplify-components-button-link-error-border-color: transparent; --amplify-components-button-link-error-background-color: transparent; --amplify-components-button-link-error-color: var(--amplify-colors-red-100); --amplify-components-button-link-error-hover-border-color: transparent; --amplify-components-button-link-error-hover-background-color: var(--amplify-colors-red-10); --amplify-components-button-link-error-hover-color: var(--amplify-colors-red-90); --amplify-components-button-link-error-focus-border-color: transparent; --amplify-components-button-link-error-focus-background-color: var(--amplify-colors-red-10); --amplify-components-button-link-error-focus-color: var(--amplify-colors-red-100); --amplify-components-button-link-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-button-link-error-active-border-color: transparent; --amplify-components-button-link-error-active-background-color: var(--amplify-colors-red-20); --amplify-components-button-link-error-active-color: var(--amplify-colors-red-100); --amplify-components-button-link-overlay-border-color: transparent; --amplify-components-button-link-overlay-background-color: transparent; --amplify-components-button-link-overlay-color: var(--amplify-colors-neutral-100); --amplify-components-button-link-overlay-hover-border-color: transparent; --amplify-components-button-link-overlay-hover-background-color: var(--amplify-colors-overlay-5); --amplify-components-button-link-overlay-hover-color: var(--amplify-colors-overlay-80); --amplify-components-button-link-overlay-focus-border-color: transparent; --amplify-components-button-link-overlay-focus-background-color: var(--amplify-colors-overlay-5); --amplify-components-button-link-overlay-focus-color: var(--amplify-colors-overlay-90); --amplify-components-button-link-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow); --amplify-components-button-link-overlay-active-border-color: transparent; --amplify-components-button-link-overlay-active-background-color: var(--amplify-colors-overlay-10); --amplify-components-button-link-overlay-active-color: var(--amplify-colors-overlay-90); --amplify-components-button-warning-background-color: transparent; --amplify-components-button-warning-border-color: var(--amplify-colors-red-60); --amplify-components-button-warning-border-width: var(--amplify-border-widths-small); --amplify-components-button-warning-color: var(--amplify-colors-red-60); --amplify-components-button-warning-hover-border-color: var(--amplify-colors-red-80); --amplify-components-button-warning-hover-background-color: var(--amplify-colors-red-10); --amplify-components-button-warning-hover-color: var(--amplify-colors-font-error); --amplify-components-button-warning-focus-border-color: var(--amplify-colors-red-80); --amplify-components-button-warning-focus-background-color: var(--amplify-colors-red-10); --amplify-components-button-warning-focus-color: var(--amplify-colors-red-80); --amplify-components-button-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-button-warning-active-border-color: var(--amplify-colors-red-100); --amplify-components-button-warning-active-background-color: var(--amplify-colors-red-20); --amplify-components-button-warning-active-color: var(--amplify-colors-red-100); --amplify-components-button-warning-disabled-border-color: var(--amplify-colors-border-tertiary); --amplify-components-button-warning-disabled-background-color: transparent; --amplify-components-button-warning-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-warning-loading-border-color: var(--amplify-colors-border-tertiary); --amplify-components-button-warning-loading-background-color: transparent; --amplify-components-button-warning-loading-color: var(--amplify-colors-font-disabled); --amplify-components-button-destructive-border-color: transparent; --amplify-components-button-destructive-border-width: var(--amplify-border-widths-small); --amplify-components-button-destructive-border-style: solid; --amplify-components-button-destructive-background-color: var(--amplify-colors-red-60); --amplify-components-button-destructive-color: var(--amplify-colors-font-inverse); --amplify-components-button-destructive-disabled-border-color: transparent; --amplify-components-button-destructive-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-button-destructive-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-destructive-loading-border-color: transparent; --amplify-components-button-destructive-loading-background-color: var(--amplify-colors-background-disabled); --amplify-components-button-destructive-loading-color: var(--amplify-colors-font-disabled); --amplify-components-button-destructive-hover-border-color: transparent; --amplify-components-button-destructive-hover-background-color: var(--amplify-colors-red-80); --amplify-components-button-destructive-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-destructive-focus-border-color: transparent; --amplify-components-button-destructive-focus-background-color: var(--amplify-colors-red-80); --amplify-components-button-destructive-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-destructive-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-button-destructive-active-border-color: transparent; --amplify-components-button-destructive-active-background-color: var(--amplify-colors-red-100); --amplify-components-button-destructive-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-small-font-size: var(--amplify-components-fieldcontrol-small-font-size); --amplify-components-button-small-padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start); --amplify-components-button-small-padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end); --amplify-components-button-small-padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start); --amplify-components-button-small-padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end); --amplify-components-button-large-font-size: var(--amplify-components-fieldcontrol-large-font-size); --amplify-components-button-large-padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start); --amplify-components-button-large-padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end); --amplify-components-button-large-padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start); --amplify-components-button-large-padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end); --amplify-components-button-loader-wrapper-align-items: center; --amplify-components-button-loader-wrapper-gap: var(--amplify-space-xs); --amplify-components-card-background-color: var(--amplify-colors-background-primary); --amplify-components-card-border-radius: var(--amplify-radii-xs); --amplify-components-card-border-width: 0; --amplify-components-card-border-style: solid; --amplify-components-card-border-color: transparent; --amplify-components-card-box-shadow: none; --amplify-components-card-padding: var(--amplify-space-medium); --amplify-components-card-outlined-background-color: var(--amplify-components-card-background-color); --amplify-components-card-outlined-border-radius: var(--amplify-radii-xs); --amplify-components-card-outlined-border-width: var(--amplify-border-widths-small); --amplify-components-card-outlined-border-style: solid; --amplify-components-card-outlined-border-color: var(--amplify-colors-border-primary); --amplify-components-card-outlined-box-shadow: var(--amplify-components-card-box-shadow); --amplify-components-card-elevated-background-color: var(--amplify-components-card-background-color); --amplify-components-card-elevated-border-radius: var(--amplify-radii-xs); --amplify-components-card-elevated-border-width: 0; --amplify-components-card-elevated-border-style: solid; --amplify-components-card-elevated-border-color: transparent; --amplify-components-card-elevated-box-shadow: var(--amplify-shadows-medium); --amplify-components-checkbox-cursor: pointer; --amplify-components-checkbox-align-items: center; --amplify-components-checkbox-disabled-cursor: not-allowed; --amplify-components-checkbox-button-position: relative; --amplify-components-checkbox-button-align-items: center; --amplify-components-checkbox-button-justify-content: center; --amplify-components-checkbox-button-color: var(--amplify-colors-font-inverse); --amplify-components-checkbox-button-before-width: 100%; --amplify-components-checkbox-button-before-height: 100%; --amplify-components-checkbox-button-before-border-width: var(--amplify-border-widths-medium); --amplify-components-checkbox-button-before-border-radius: 20%; --amplify-components-checkbox-button-before-border-style: solid; --amplify-components-checkbox-button-before-border-color: var(--amplify-colors-border-primary); --amplify-components-checkbox-button-focus-outline-color: var(--amplify-colors-transparent); --amplify-components-checkbox-button-focus-outline-style: solid; --amplify-components-checkbox-button-focus-outline-width: var(--amplify-outline-widths-medium); --amplify-components-checkbox-button-focus-outline-offset: var(--amplify-outline-offsets-medium); --amplify-components-checkbox-button-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-checkbox-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-checkbox-button-disabled-border-color: var(--amplify-colors-border-disabled); --amplify-components-checkbox-button-error-border-color: var(--amplify-colors-border-error); --amplify-components-checkbox-button-error-focus-border-color: var(--amplify-colors-border-error); --amplify-components-checkbox-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-checkbox-icon-background-color: var(--amplify-colors-primary-80); --amplify-components-checkbox-icon-border-radius: 20%; --amplify-components-checkbox-icon-opacity: var(--amplify-opacities-0); --amplify-components-checkbox-icon-transform: scale(0); --amplify-components-checkbox-icon-transition-property: all; --amplify-components-checkbox-icon-transition-duration: var(--amplify-time-short); --amplify-components-checkbox-icon-transition-timing-function: ease-in-out; --amplify-components-checkbox-icon-checked-opacity: var(--amplify-opacities-100); --amplify-components-checkbox-icon-checked-transform: scale(1); --amplify-components-checkbox-icon-checked-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-checkbox-icon-indeterminate-opacity: var(--amplify-opacities-100); --amplify-components-checkbox-icon-indeterminate-transform: scale(1); --amplify-components-checkbox-icon-indeterminate-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-checkbox-label-color: var(--amplify-components-text-color); --amplify-components-checkbox-label-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-checkboxfield-align-items: flex-start; --amplify-components-checkboxfield-align-content: center; --amplify-components-checkboxfield-flex-direction: column; --amplify-components-checkboxfield-justify-content: center; --amplify-components-collection-pagination-current-color: white; --amplify-components-collection-pagination-current-background-color: var(--amplify-colors-blue-80); --amplify-components-collection-pagination-button-color: var(--amplify-colors-blue-60); --amplify-components-collection-pagination-button-hover-background-color: var(--amplify-colors-blue-10); --amplify-components-collection-pagination-button-hover-color: var(--amplify-colors-blue-60); --amplify-components-collection-pagination-button-disabled-color: var(--amplify-components-pagination-button-disabled-color); --amplify-components-collection-search-input-color: var(--amplify-colors-blue-60); --amplify-components-collection-search-button-color: var(--amplify-colors-blue-60); --amplify-components-collection-search-button-active-background-color: var(--amplify-components-searchfield-button-active-background-color); --amplify-components-collection-search-button-active-border-color: var(--amplify-components-searchfield-button-active-border-color); --amplify-components-collection-search-button-active-color: var(--amplify-components-searchfield-button-active-color); --amplify-components-collection-search-button-disabled-background-color: var(--amplify-components-searchfield-button-disabled-background-color); --amplify-components-collection-search-button-disabled-border-color: var(--amplify-components-searchfield-button-disabled-border-color); --amplify-components-collection-search-button-disabled-color: var(--amplify-components-searchfield-button-disabled-color); --amplify-components-collection-search-button-focus-background-color: var(--amplify-colors-blue-60); --amplify-components-collection-search-button-focus-border-color: var(--amplify-components-searchfield-button-focus-border-color); --amplify-components-collection-search-button-focus-color: white; --amplify-components-collection-search-button-hover-background-color: var(--amplify-colors-blue-80); --amplify-components-collection-search-button-hover-border-color: var(--amplify-components-searchfield-button-hover-border-color); --amplify-components-collection-search-button-hover-color: white; --amplify-components-copy-font-size: var(--amplify-font-sizes-xs); --amplify-components-copy-gap: var(--amplify-space-relative-medium); --amplify-components-copy-svg-path-fill: var(--amplify-colors-font-primary); --amplify-components-copy-tool-tip-bottom: var(--amplify-space-large); --amplify-components-copy-tool-tip-color: var(--amplify-colors-teal-100); --amplify-components-copy-tool-tip-font-size: var(--amplify-font-sizes-xxs); --amplify-components-countrycodeselect-height: var(--amplify-space-relative-full); --amplify-components-divider-border-style: solid; --amplify-components-divider-border-color: var(--amplify-colors-border-primary); --amplify-components-divider-border-width: var(--amplify-border-widths-medium); --amplify-components-divider-label-color: var(--amplify-colors-font-tertiary); --amplify-components-divider-label-padding-inline: var(--amplify-space-medium); --amplify-components-divider-label-font-size: var(--amplify-font-sizes-small); --amplify-components-divider-label-background-color: var(--amplify-colors-background-primary); --amplify-components-divider-small-border-width: var(--amplify-border-widths-small); --amplify-components-divider-large-border-width: var(--amplify-border-widths-large); --amplify-components-divider-opacity: var(--amplify-opacities-60); --amplify-components-dropzone-background-color: var(--amplify-colors-background-primary); --amplify-components-dropzone-border-radius: var(--amplify-radii-small); --amplify-components-dropzone-border-color: var(--amplify-colors-border-primary); --amplify-components-dropzone-border-style: dashed; --amplify-components-dropzone-border-width: var(--amplify-border-widths-small); --amplify-components-dropzone-color: var(--amplify-colors-font-primary); --amplify-components-dropzone-gap: var(--amplify-space-small); --amplify-components-dropzone-padding-block: var(--amplify-space-xl); --amplify-components-dropzone-padding-inline: var(--amplify-space-large); --amplify-components-dropzone-text-align: center; --amplify-components-dropzone-active-background-color: var(--amplify-colors-primary-10); --amplify-components-dropzone-active-border-radius: var(--amplify-components-dropzone-border-radius); --amplify-components-dropzone-active-border-color: var(--amplify-colors-border-pressed); --amplify-components-dropzone-active-border-style: var(--amplify-components-dropzone-border-style); --amplify-components-dropzone-active-border-width: var(--amplify-components-dropzone-border-width); --amplify-components-dropzone-active-color: var(--amplify-colors-font-primary); --amplify-components-dropzone-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-dropzone-disabled-border-radius: var(--amplify-components-dropzone-border-radius); --amplify-components-dropzone-disabled-border-color: var(--amplify-colors-border-disabled); --amplify-components-dropzone-disabled-border-style: var(--amplify-components-dropzone-border-style); --amplify-components-dropzone-disabled-border-width: var(--amplify-components-dropzone-border-width); --amplify-components-dropzone-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-dropzone-accepted-background-color: var(--amplify-colors-background-success); --amplify-components-dropzone-accepted-border-radius: var(--amplify-components-dropzone-border-radius); --amplify-components-dropzone-accepted-border-color: var(--amplify-colors-border-success); --amplify-components-dropzone-accepted-border-style: var(--amplify-components-dropzone-border-style); --amplify-components-dropzone-accepted-border-width: var(--amplify-components-dropzone-border-width); --amplify-components-dropzone-accepted-color: var(--amplify-colors-font-success); --amplify-components-dropzone-rejected-background-color: var(--amplify-colors-background-error); --amplify-components-dropzone-rejected-border-radius: var(--amplify-components-dropzone-border-radius); --amplify-components-dropzone-rejected-border-color: var(--amplify-colors-border-pressed); --amplify-components-dropzone-rejected-border-style: var(--amplify-components-dropzone-border-style); --amplify-components-dropzone-rejected-border-width: var(--amplify-components-dropzone-border-width); --amplify-components-dropzone-rejected-color: var(--amplify-colors-font-error); --amplify-components-field-gap: var(--amplify-space-xs); --amplify-components-field-font-size: var(--amplify-font-sizes-medium); --amplify-components-field-flex-direction: column; --amplify-components-field-small-gap: var(--amplify-space-xxxs); --amplify-components-field-small-font-size: var(--amplify-font-sizes-small); --amplify-components-field-large-gap: var(--amplify-space-small); --amplify-components-field-large-font-size: var(--amplify-font-sizes-large); --amplify-components-field-label-color: var(--amplify-colors-font-secondary); --amplify-components-fieldcontrol-border-style: solid; --amplify-components-fieldcontrol-border-color: var(--amplify-colors-border-primary); --amplify-components-fieldcontrol-border-width: var(--amplify-border-widths-small); --amplify-components-fieldcontrol-border-radius: var(--amplify-radii-small); --amplify-components-fieldcontrol-color: var(--amplify-colors-font-primary); --amplify-components-fieldcontrol-padding-block-start: var(--amplify-space-xs); --amplify-components-fieldcontrol-padding-block-end: var(--amplify-space-xs); --amplify-components-fieldcontrol-padding-inline-start: var(--amplify-space-medium); --amplify-components-fieldcontrol-padding-inline-end: var(--amplify-space-medium); --amplify-components-fieldcontrol-font-size: var(--amplify-components-field-font-size); --amplify-components-fieldcontrol-line-height: var(--amplify-line-heights-medium); --amplify-components-fieldcontrol-transition-duration: var(--amplify-time-medium); --amplify-components-fieldcontrol-outline-color: var(--amplify-colors-transparent); --amplify-components-fieldcontrol-outline-style: solid; --amplify-components-fieldcontrol-outline-width: var(--amplify-outline-widths-medium); --amplify-components-fieldcontrol-outline-offset: var(--amplify-outline-offsets-medium); --amplify-components-fieldcontrol-small-font-size: var(--amplify-components-field-small-font-size); --amplify-components-fieldcontrol-small-padding-block-start: var(--amplify-space-xxs); --amplify-components-fieldcontrol-small-padding-block-end: var(--amplify-space-xxs); --amplify-components-fieldcontrol-small-padding-inline-start: var(--amplify-space-small); --amplify-components-fieldcontrol-small-padding-inline-end: var(--amplify-space-small); --amplify-components-fieldcontrol-large-font-size: var(--amplify-components-field-large-font-size); --amplify-components-fieldcontrol-large-padding-block-start: var(--amplify-space-xs); --amplify-components-fieldcontrol-large-padding-block-end: var(--amplify-space-xs); --amplify-components-fieldcontrol-large-padding-inline-start: var(--amplify-space-medium); --amplify-components-fieldcontrol-large-padding-inline-end: var(--amplify-space-medium); --amplify-components-fieldcontrol-quiet-border-style: none; --amplify-components-fieldcontrol-quiet-border-inline-start: none; --amplify-components-fieldcontrol-quiet-border-inline-end: none; --amplify-components-fieldcontrol-quiet-border-block-start: none; --amplify-components-fieldcontrol-quiet-border-radius: 0; --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: transparent; --amplify-components-fieldcontrol-quiet-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-fieldcontrol-quiet-error-border-block-end-color: var(--amplify-colors-border-error); --amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color: transparent; --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-fieldcontrol-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus); --amplify-components-fieldcontrol-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-fieldcontrol-disabled-cursor: not-allowed; --amplify-components-fieldcontrol-disabled-border-color: var(--amplify-colors-transparent); --amplify-components-fieldcontrol-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-fieldcontrol-error-border-color: var(--amplify-colors-border-error); --amplify-components-fieldcontrol-error-color: var(--amplify-colors-font-error); --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-error); --amplify-components-fieldcontrol-info-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-blue-100); --amplify-components-fieldcontrol-warning-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-orange-100); --amplify-components-fieldcontrol-success-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-green-100); --amplify-components-fieldcontrol-overlay-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-overlay-90); --amplify-components-fieldgroup-gap: var(--amplify-space-zero); --amplify-components-fieldgroup-vertical-align-items: center; --amplify-components-fieldgroup-outer-align-items: center; --amplify-components-fieldmessages-error-color: var(--amplify-colors-font-error); --amplify-components-fieldmessages-error-font-size: var(--amplify-font-sizes-small); --amplify-components-fieldmessages-description-color: var(--amplify-colors-font-secondary); --amplify-components-fieldmessages-description-font-style: italic; --amplify-components-fieldmessages-description-font-size: var(--amplify-font-sizes-small); --amplify-components-fieldset-background-color: transparent; --amplify-components-fieldset-border-radius: var(--amplify-radii-xs); --amplify-components-fieldset-flex-direction: column; --amplify-components-fieldset-gap: var(--amplify-components-field-gap); --amplify-components-fieldset-legend-color: var(--amplify-colors-font-primary); --amplify-components-fieldset-legend-font-size: var(--amplify-components-field-font-size); --amplify-components-fieldset-legend-font-weight: var(--amplify-font-weights-bold); --amplify-components-fieldset-legend-line-height: var(--amplify-line-heights-medium); --amplify-components-fieldset-legend-small-font-size: var(--amplify-components-field-small-font-size); --amplify-components-fieldset-legend-large-font-size: var(--amplify-components-field-large-font-size); --amplify-components-fieldset-outlined-padding: var(--amplify-space-medium); --amplify-components-fieldset-outlined-border-color: var(--amplify-colors-neutral-40); --amplify-components-fieldset-outlined-border-width: var(--amplify-border-widths-small); --amplify-components-fieldset-outlined-border-style: solid; --amplify-components-fieldset-outlined-small-padding: var(--amplify-space-small); --amplify-components-fieldset-outlined-large-padding: var(--amplify-space-large); --amplify-components-fieldset-small-gap: var(--amplify-components-field-small-gap); --amplify-components-fieldset-large-gap: var(--amplify-components-field-large-gap); --amplify-components-fileuploader-dropzone-background-color: var(--amplify-colors-background-primary); --amplify-components-fileuploader-dropzone-border-radius: var(--amplify-radii-small); --amplify-components-fileuploader-dropzone-border-color: var(--amplify-colors-border-primary); --amplify-components-fileuploader-dropzone-border-style: dashed; --amplify-components-fileuploader-dropzone-border-width: var(--amplify-border-widths-small); --amplify-components-fileuploader-dropzone-gap: var(--amplify-space-small); --amplify-components-fileuploader-dropzone-padding-block: var(--amplify-space-xl); --amplify-components-fileuploader-dropzone-padding-inline: var(--amplify-space-large); --amplify-components-fileuploader-dropzone-text-align: center; --amplify-components-fileuploader-dropzone-active-background-color: var(--amplify-colors-primary-10); --amplify-components-fileuploader-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius); --amplify-components-fileuploader-dropzone-active-border-color: var(--amplify-colors-border-pressed); --amplify-components-fileuploader-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style); --amplify-components-fileuploader-dropzone-active-border-width: var(--amplify-border-widths-medium); --amplify-components-fileuploader-dropzone-icon-color: var(--amplify-colors-border-primary); --amplify-components-fileuploader-dropzone-icon-font-size: var(--amplify-font-sizes-xxl); --amplify-components-fileuploader-dropzone-text-color: var(--amplify-colors-font-tertiary); --amplify-components-fileuploader-dropzone-text-font-size: var(--amplify-font-sizes-medium); --amplify-components-fileuploader-dropzone-text-font-weight: var(--amplify-font-weights-bold); --amplify-components-fileuploader-file-background-color: var(--amplify-colors-background-primary); --amplify-components-fileuploader-file-border-radius: var(--amplify-radii-small); --amplify-components-fileuploader-file-border-color: var(--amplify-colors-border-primary); --amplify-components-fileuploader-file-border-style: solid; --amplify-components-fileuploader-file-border-width: var(--amplify-border-widths-small); --amplify-components-fileuploader-file-padding-block: var(--amplify-space-xs); --amplify-components-fileuploader-file-padding-inline: var(--amplify-space-small); --amplify-components-fileuploader-file-gap: var(--amplify-space-small); --amplify-components-fileuploader-file-align-items: baseline; --amplify-components-fileuploader-file-name-font-size: var(--amplify-font-sizes-medium); --amplify-components-fileuploader-file-name-font-weight: var(--amplify-font-weights-bold); --amplify-components-fileuploader-file-name-color: var(--amplify-colors-font-primary); --amplify-components-fileuploader-file-size-font-size: var(--amplify-font-sizes-small); --amplify-components-fileuploader-file-size-font-weight: var(--amplify-font-weights-normal); --amplify-components-fileuploader-file-size-color: var(--amplify-colors-font-tertiary); --amplify-components-fileuploader-file-image-width: var(--amplify-space-xxl); --amplify-components-fileuploader-file-image-height: var(--amplify-space-xxl); --amplify-components-fileuploader-file-image-background-color: var(--amplify-colors-background-secondary); --amplify-components-fileuploader-file-image-color: var(--amplify-colors-font-tertiary); --amplify-components-fileuploader-file-image-border-radius: var(--amplify-radii-small); --amplify-components-fileuploader-filelist-flex-direction: column; --amplify-components-fileuploader-filelist-gap: var(--amplify-space-small); --amplify-components-fileuploader-loader-stroke-linecap: round; --amplify-components-fileuploader-loader-stroke-empty: var(--amplify-colors-border-secondary); --amplify-components-fileuploader-loader-stroke-filled: var(--amplify-components-loader-stroke-filled); --amplify-components-fileuploader-loader-stroke-width: var(--amplify-border-widths-large); --amplify-components-fileuploader-previewer-background-color: var(--amplify-colors-background-primary); --amplify-components-fileuploader-previewer-border-color: var(--amplify-colors-border-primary); --amplify-components-fileuploader-previewer-border-style: solid; --amplify-components-fileuploader-previewer-border-width: var(--amplify-border-widths-small); --amplify-components-fileuploader-previewer-border-radius: var(--amplify-radii-small); --amplify-components-fileuploader-previewer-padding-block: var(--amplify-space-zero); --amplify-components-fileuploader-previewer-padding-inline: var(--amplify-space-zero); --amplify-components-fileuploader-previewer-max-height: 40rem; --amplify-components-fileuploader-previewer-max-width: auto; --amplify-components-fileuploader-previewer-text-font-size: var(--amplify-font-sizes-medium); --amplify-components-fileuploader-previewer-text-font-weight: var(--amplify-font-weights-bold); --amplify-components-fileuploader-previewer-text-color: var(--amplify-colors-font-primary); --amplify-components-fileuploader-previewer-body-padding-block: var(--amplify-space-medium); --amplify-components-fileuploader-previewer-body-padding-inline: var(--amplify-space-medium); --amplify-components-fileuploader-previewer-body-gap: var(--amplify-space-small); --amplify-components-fileuploader-previewer-footer-justify-content: flex-end; --amplify-components-flex-gap: var(--amplify-space-medium); --amplify-components-flex-justify-content: normal; --amplify-components-flex-align-items: stretch; --amplify-components-flex-align-content: normal; --amplify-components-flex-flex-wrap: nowrap; --amplify-components-heading-1-font-size: var(--amplify-font-sizes-xxxxl); --amplify-components-heading-1-font-weight: var(--amplify-font-weights-light); --amplify-components-heading-2-font-size: var(--amplify-font-sizes-xxxl); --amplify-components-heading-2-font-weight: var(--amplify-font-weights-normal); --amplify-components-heading-3-font-size: var(--amplify-font-sizes-xxl); --amplify-components-heading-3-font-weight: var(--amplify-font-weights-medium); --amplify-components-heading-4-font-size: var(--amplify-font-sizes-xl); --amplify-components-heading-4-font-weight: var(--amplify-font-weights-semibold); --amplify-components-heading-5-font-size: var(--amplify-font-sizes-large); --amplify-components-heading-5-font-weight: var(--amplify-font-weights-bold); --amplify-components-heading-6-font-size: var(--amplify-font-sizes-medium); --amplify-components-heading-6-font-weight: var(--amplify-font-weights-extrabold); --amplify-components-heading-color: var(--amplify-colors-font-primary); --amplify-components-heading-line-height: var(--amplify-line-heights-small); --amplify-components-icon-line-height: 1; --amplify-components-icon-height: 1em; --amplify-components-highlightmatch-highlighted-font-weight: var(--amplify-font-weights-bold); --amplify-components-image-max-width: 100%; --amplify-components-image-height: auto; --amplify-components-image-object-fit: initial; --amplify-components-image-object-position: initial; --amplify-components-inappmessaging-banner-height: 150px ; --amplify-components-inappmessaging-banner-width: 400px ; --amplify-components-inappmessaging-button-background-color: #e8e8e8; --amplify-components-inappmessaging-button-border-radius: 5px; --amplify-components-inappmessaging-button-color: black; --amplify-components-inappmessaging-dialog-height: 50vh; --amplify-components-inappmessaging-dialog-min-height: 400px; --amplify-components-inappmessaging-dialog-min-width: 400px; --amplify-components-inappmessaging-dialog-width: 30vw; --amplify-components-inappmessaging-header-font-size: var(--amplify-font-sizes-medium); --amplify-components-inappmessaging-header-font-weight: var(--amplify-font-weights-extrabold); --amplify-components-input-color: var(--amplify-components-fieldcontrol-color); --amplify-components-input-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-input-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-input-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color); --amplify-components-link-active-color: var(--amplify-colors-font-active); --amplify-components-link-color: var(--amplify-colors-font-interactive); --amplify-components-link-focus-color: var(--amplify-colors-font-focus); --amplify-components-link-hover-color: var(--amplify-colors-font-hover); --amplify-components-link-visited-color: var(--amplify-colors-font-interactive); --amplify-components-liveness-camera-module-background-color: var(--amplify-colors-background-primary); --amplify-components-loader-width: var(--amplify-font-sizes-medium); --amplify-components-loader-height: var(--amplify-font-sizes-medium); --amplify-components-loader-font-size: var(--amplify-font-sizes-xs); --amplify-components-loader-stroke-empty: var(--amplify-colors-neutral-20); --amplify-components-loader-stroke-filled: var(--amplify-colors-primary-80); --amplify-components-loader-stroke-linecap: round; --amplify-components-loader-animation-duration: 1s; --amplify-components-loader-small-width: var(--amplify-font-sizes-small); --amplify-components-loader-small-height: var(--amplify-font-sizes-small); --amplify-components-loader-small-font-size: var(--amplify-font-sizes-xxs); --amplify-components-loader-large-width: var(--amplify-font-sizes-large); --amplify-components-loader-large-height: var(--amplify-font-sizes-large); --amplify-components-loader-large-font-size: var(--amplify-font-sizes-small); --amplify-components-loader-linear-width: 100%; --amplify-components-loader-linear-min-width: 5rem; --amplify-components-loader-linear-font-size: var(--amplify-font-sizes-xxs); --amplify-components-loader-linear-stroke-width: var(--amplify-font-sizes-xxs); --amplify-components-loader-linear-stroke-filled: var(--amplify-colors-primary-80); --amplify-components-loader-linear-stroke-empty: var(--amplify-colors-neutral-20); --amplify-components-loader-linear-stroke-linecap: round; --amplify-components-loader-linear-animation-duration: 1s; --amplify-components-loader-linear-small-stroke-width: var(--amplify-font-sizes-xxxs); --amplify-components-loader-linear-small-font-size: var(--amplify-font-sizes-xxxs); --amplify-components-loader-linear-large-stroke-width: var(--amplify-font-sizes-xs); --amplify-components-loader-linear-large-font-size: var(--amplify-font-sizes-xs); --amplify-components-loader-text-fill: var(--amplify-colors-font-primary); --amplify-components-menu-background-color: var(--amplify-colors-background-primary); --amplify-components-menu-border-radius: var(--amplify-radii-medium); --amplify-components-menu-border-width: var(--amplify-border-widths-small); --amplify-components-menu-border-style: solid; --amplify-components-menu-border-color: var(--amplify-colors-border-primary); --amplify-components-menu-box-shadow: var(--amplify-shadows-large); --amplify-components-menu-flex-direction: column; --amplify-components-menu-gap: var(--amplify-space-zero); --amplify-components-menu-max-width: 30rem; --amplify-components-menu-min-width: 14rem; --amplify-components-menu-small-width: var(--amplify-font-sizes-medium); --amplify-components-menu-small-height: var(--amplify-font-sizes-medium); --amplify-components-menu-large-width: var(--amplify-font-sizes-xxxl); --amplify-components-menu-large-height: var(--amplify-font-sizes-xxxl); --amplify-components-menu-item-min-height: 2.5rem; --amplify-components-menu-item-padding-inline-start: var(--amplify-space-medium); --amplify-components-menu-item-padding-inline-end: var(--amplify-space-medium); --amplify-components-message-align-items: center; --amplify-components-message-background-color: var(--amplify-colors-background-tertiary); --amplify-components-message-border-color: transparent; --amplify-components-message-border-style: solid; --amplify-components-message-border-width: var(--amplify-border-widths-small); --amplify-components-message-border-radius: var(--amplify-radii-xs); --amplify-components-message-color: var(--amplify-colors-font-primary); --amplify-components-message-justify-content: flex-start; --amplify-components-message-padding-block: var(--amplify-space-small); --amplify-components-message-padding-inline: var(--amplify-space-medium); --amplify-components-message-line-height: var(--amplify-line-heights-small); --amplify-components-message-icon-size: var(--amplify-font-sizes-xl); --amplify-components-message-heading-font-size: var(--amplify-font-sizes-medium); --amplify-components-message-heading-font-weight: var(--amplify-font-weights-bold); --amplify-components-message-dismiss-gap: var(--amplify-space-xxs); --amplify-components-message-plain-color: var(--amplify-colors-font-primary); --amplify-components-message-plain-background-color: var(--amplify-colors-background-primary); --amplify-components-message-plain-border-color: transparent; --amplify-components-message-plain-info-color: var(--amplify-colors-font-info); --amplify-components-message-plain-info-background-color: var(--amplify-colors-background-primary); --amplify-components-message-plain-info-border-color: transparent; --amplify-components-message-plain-error-color: var(--amplify-colors-font-error); --amplify-components-message-plain-error-background-color: var(--amplify-colors-background-primary); --amplify-components-message-plain-error-border-color: transparent; --amplify-components-message-plain-success-color: var(--amplify-colors-font-success); --amplify-components-message-plain-success-background-color: var(--amplify-colors-background-primary); --amplify-components-message-plain-success-border-color: transparent; --amplify-components-message-plain-warning-color: var(--amplify-colors-font-warning); --amplify-components-message-plain-warning-background-color: var(--amplify-colors-background-primary); --amplify-components-message-plain-warning-border-color: transparent; --amplify-components-message-outlined-color: var(--amplify-colors-font-primary); --amplify-components-message-outlined-background-color: var(--amplify-colors-background-primary); --amplify-components-message-outlined-border-color: var(--amplify-colors-border-primary); --amplify-components-message-outlined-info-color: var(--amplify-colors-font-info); --amplify-components-message-outlined-info-background-color: var(--amplify-colors-background-primary); --amplify-components-message-outlined-info-border-color: var(--amplify-colors-border-info); --amplify-components-message-outlined-error-color: var(--amplify-colors-font-error); --amplify-components-message-outlined-error-background-color: var(--amplify-colors-background-primary); --amplify-components-message-outlined-error-border-color: var(--amplify-colors-border-error); --amplify-components-message-outlined-success-color: var(--amplify-colors-font-success); --amplify-components-message-outlined-success-background-color: var(--amplify-colors-background-primary); --amplify-components-message-outlined-success-border-color: var(--amplify-colors-border-success); --amplify-components-message-outlined-warning-color: var(--amplify-colors-font-warning); --amplify-components-message-outlined-warning-background-color: var(--amplify-colors-background-primary); --amplify-components-message-outlined-warning-border-color: var(--amplify-colors-border-warning); --amplify-components-message-filled-color: var(--amplify-colors-font-primary); --amplify-components-message-filled-background-color: var(--amplify-colors-background-secondary); --amplify-components-message-filled-border-color: transparent; --amplify-components-message-filled-info-color: var(--amplify-colors-font-info); --amplify-components-message-filled-info-background-color: var(--amplify-colors-background-info); --amplify-components-message-filled-info-border-color: transparent; --amplify-components-message-filled-error-color: var(--amplify-colors-font-error); --amplify-components-message-filled-error-background-color: var(--amplify-colors-background-error); --amplify-components-message-filled-error-border-color: transparent; --amplify-components-message-filled-success-color: var(--amplify-colors-font-success); --amplify-components-message-filled-success-background-color: var(--amplify-colors-background-success); --amplify-components-message-filled-success-border-color: transparent; --amplify-components-message-filled-warning-color: var(--amplify-colors-font-warning); --amplify-components-message-filled-warning-background-color: var(--amplify-colors-background-warning); --amplify-components-message-filled-warning-border-color: transparent; --amplify-components-pagination-current-align-items: center; --amplify-components-pagination-current-justify-content: center; --amplify-components-pagination-current-color: var(--amplify-colors-font-inverse); --amplify-components-pagination-current-font-size: var(--amplify-font-sizes-small); --amplify-components-pagination-current-background-color: var(--amplify-colors-overlay-40); --amplify-components-pagination-button-color: var(--amplify-colors-font-primary); --amplify-components-pagination-button-padding-inline-start: var(--amplify-space-xxs); --amplify-components-pagination-button-padding-inline-end: var(--amplify-space-xxs); --amplify-components-pagination-button-transition-property: background-color; --amplify-components-pagination-button-transition-duration: var(--amplify-time-medium); --amplify-components-pagination-button-hover-background-color: var(--amplify-colors-overlay-10); --amplify-components-pagination-button-hover-color: var(--amplify-colors-font-primary); --amplify-components-pagination-button-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-pagination-ellipsis-align-items: baseline; --amplify-components-pagination-ellipsis-justify-content: center; --amplify-components-pagination-ellipsis-padding-inline-start: var(--amplify-space-xs); --amplify-components-pagination-ellipsis-padding-inline-end: var(--amplify-space-xs); --amplify-components-pagination-item-container-margin-left: var(--amplify-space-xxxs); --amplify-components-pagination-item-container-margin-right: var(--amplify-space-xxxs); --amplify-components-pagination-item-shared-height: var(--amplify-font-sizes-xxl); --amplify-components-pagination-item-shared-min-width: var(--amplify-font-sizes-xxl); --amplify-components-pagination-item-shared-border-radius: var(--amplify-font-sizes-medium); --amplify-components-passwordfield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-passwordfield-button-color: var(--amplify-components-button-color); --amplify-components-passwordfield-button-active-background-color: var(--amplify-components-button-active-background-color); --amplify-components-passwordfield-button-active-border-color: var(--amplify-components-button-active-border-color); --amplify-components-passwordfield-button-active-color: var(--amplify-components-button-active-color); --amplify-components-passwordfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color); --amplify-components-passwordfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color); --amplify-components-passwordfield-button-disabled-color: var(--amplify-components-button-disabled-color); --amplify-components-passwordfield-button-error-color: var(--amplify-components-button-outlined-error-color); --amplify-components-passwordfield-button-error-background-color: var(--amplify-components-button-outlined-error-background-color); --amplify-components-passwordfield-button-error-border-color: var(--amplify-components-button-outlined-error-border-color); --amplify-components-passwordfield-button-error-active-border-color: var(--amplify-components-button-outlined-error-active-border-color); --amplify-components-passwordfield-button-error-active-background-color: var(--amplify-components-button-outlined-error-active-background-color); --amplify-components-passwordfield-button-error-active-color: var(--amplify-components-button-outlined-error-active-color); --amplify-components-passwordfield-button-error-focus-border-color: var(--amplify-components-button-outlined-error-focus-border-color); --amplify-components-passwordfield-button-error-focus-background-color: var(--amplify-components-button-outlined-error-focus-background-color); --amplify-components-passwordfield-button-error-focus-color: var(--amplify-components-button-outlined-error-focus-color); --amplify-components-passwordfield-button-error-focus-box-shadow: var(--amplify-components-button-outlined-error-focus-box-shadow); --amplify-components-passwordfield-button-error-hover-border-color: var(--amplify-components-button-outlined-error-hover-border-color); --amplify-components-passwordfield-button-error-hover-background-color: var(--amplify-components-button-outlined-error-hover-background-color); --amplify-components-passwordfield-button-error-hover-color: var(--amplify-components-button-outlined-error-hover-color); --amplify-components-passwordfield-button-focus-background-color: var(--amplify-components-button-focus-background-color); --amplify-components-passwordfield-button-focus-border-color: var(--amplify-components-button-focus-border-color); --amplify-components-passwordfield-button-focus-color: var(--amplify-components-button-focus-color); --amplify-components-passwordfield-button-hover-background-color: var(--amplify-components-button-hover-background-color); --amplify-components-passwordfield-button-hover-border-color: var(--amplify-components-button-hover-border-color); --amplify-components-passwordfield-button-hover-color: var(--amplify-components-button-hover-color); --amplify-components-phonenumberfield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-phonenumberfield-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-phonenumberfield-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-phonenumberfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color); --amplify-components-placeholder-border-radius: var(--amplify-radii-small); --amplify-components-placeholder-transition-duration: var(--amplify-time-long); --amplify-components-placeholder-start-color: var(--amplify-colors-background-secondary); --amplify-components-placeholder-end-color: var(--amplify-colors-background-tertiary); --amplify-components-placeholder-small-height: var(--amplify-space-small); --amplify-components-placeholder-default-height: var(--amplify-space-medium); --amplify-components-placeholder-large-height: var(--amplify-space-large); --amplify-components-radio-align-items: center; --amplify-components-radio-justify-content: flex-start; --amplify-components-radio-gap: inherit; --amplify-components-radio-disabled-cursor: not-allowed; --amplify-components-radio-button-align-items: center; --amplify-components-radio-button-justify-content: center; --amplify-components-radio-button-width: var(--amplify-font-sizes-medium); --amplify-components-radio-button-height: var(--amplify-font-sizes-medium); --amplify-components-radio-button-box-sizing: border-box; --amplify-components-radio-button-border-width: var(--amplify-border-widths-medium); --amplify-components-radio-button-border-style: solid; --amplify-components-radio-button-border-radius: 50%; --amplify-components-radio-button-border-color: var(--amplify-colors-border-primary); --amplify-components-radio-button-color: var(--amplify-colors-background-primary); --amplify-components-radio-button-background-color: var(--amplify-colors-background-primary); --amplify-components-radio-button-transition-property: all; --amplify-components-radio-button-transition-duration: var(--amplify-time-medium); --amplify-components-radio-button-outline-color: var(--amplify-colors-transparent); --amplify-components-radio-button-outline-style: solid; --amplify-components-radio-button-outline-width: var(--amplify-outline-widths-medium); --amplify-components-radio-button-outline-offset: var(--amplify-outline-offsets-medium); --amplify-components-radio-button-padding: var(--amplify-border-widths-medium); --amplify-components-radio-button-small-width: var(--amplify-font-sizes-small); --amplify-components-radio-button-small-height: var(--amplify-font-sizes-small); --amplify-components-radio-button-large-width: var(--amplify-font-sizes-large); --amplify-components-radio-button-large-height: var(--amplify-font-sizes-large); --amplify-components-radio-button-checked-color: var(--amplify-colors-primary-80); --amplify-components-radio-button-checked-disabled-color: var(--amplify-colors-background-disabled); --amplify-components-radio-button-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-radio-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-radio-button-error-border-color: var(--amplify-colors-border-error); --amplify-components-radio-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-radio-button-disabled-border-color: var(--amplify-colors-border-disabled); --amplify-components-radio-button-disabled-background-color: var(--amplify-colors-background-primary); --amplify-components-radio-label-color: var(--amplify-components-text-color); --amplify-components-radio-label-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-radiogroup-radio-border-width: var(--amplify-components-radio-button-border-width); --amplify-components-radiogroup-radio-border-color: var(--amplify-components-radio-button-border-color); --amplify-components-radiogroup-radio-background-color: var(--amplify-components-radio-button-background-color); --amplify-components-radiogroup-radio-checked-color: var(--amplify-components-radio-button-checked-color); --amplify-components-radiogroup-radio-label-color: var(--amplify-components-radio-label-color); --amplify-components-radiogroup-legend-color: var(--amplify-components-fieldset-legend-color); --amplify-components-radiogroup-legend-font-weight: var(--amplify-font-weights-normal); --amplify-components-rating-large-size: var(--amplify-font-sizes-xxxl); --amplify-components-rating-default-size: var(--amplify-font-sizes-xl); --amplify-components-rating-small-size: var(--amplify-font-sizes-small); --amplify-components-rating-filled-color: var(--amplify-colors-secondary-80); --amplify-components-rating-empty-color: var(--amplify-colors-background-tertiary); --amplify-components-searchfield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-searchfield-button-color: var(--amplify-components-button-color); --amplify-components-searchfield-button-background-color: var(--amplify-colors-background-primary); --amplify-components-searchfield-button-active-background-color: var(--amplify-components-button-active-background-color); --amplify-components-searchfield-button-active-border-color: var(--amplify-components-button-active-border-color); --amplify-components-searchfield-button-active-color: var(--amplify-components-button-active-color); --amplify-components-searchfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color); --amplify-components-searchfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color); --amplify-components-searchfield-button-disabled-color: var(--amplify-components-button-disabled-color); --amplify-components-searchfield-button-focus-background-color: var(--amplify-components-button-focus-background-color); --amplify-components-searchfield-button-focus-border-color: var(--amplify-components-button-focus-border-color); --amplify-components-searchfield-button-focus-color: var(--amplify-components-button-focus-color); --amplify-components-searchfield-button-hover-background-color: var(--amplify-components-button-hover-background-color); --amplify-components-searchfield-button-hover-border-color: var(--amplify-components-button-hover-border-color); --amplify-components-searchfield-button-hover-color: var(--amplify-components-button-hover-color); --amplify-components-select-color: var(--amplify-components-fieldcontrol-color); --amplify-components-select-background-color: var(--amplify-colors-background-primary); --amplify-components-select-padding-inline-end: var(--amplify-space-xxl); --amplify-components-select-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-select-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-select-wrapper-flex: 1; --amplify-components-select-wrapper-display: block; --amplify-components-select-wrapper-position: relative; --amplify-components-select-wrapper-cursor: pointer; --amplify-components-select-icon-wrapper-align-items: center; --amplify-components-select-icon-wrapper-position: absolute; --amplify-components-select-icon-wrapper-top: 50%; --amplify-components-select-icon-wrapper-right: var(--amplify-space-medium); --amplify-components-select-icon-wrapper-transform: translateY(-50%); --amplify-components-select-icon-wrapper-pointer-events: none; --amplify-components-select-icon-wrapper-small-right: var(--amplify-space-xs); --amplify-components-select-icon-wrapper-large-right: var(--amplify-space-medium); --amplify-components-select-option-background-color: transparent; --amplify-components-select-option-color: var(--amplify-colors-font-primary); --amplify-components-select-option-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-select-option-disabled-background-color: transparent; --amplify-components-select-white-space: nowrap; --amplify-components-select-min-width: 6.5rem; --amplify-components-select-small-min-width: 5.5rem; --amplify-components-select-small-padding-inline-end: var(--amplify-space-xl); --amplify-components-select-large-min-width: 7.5rem; --amplify-components-select-large-padding-inline-end: var(--amplify-space-xxl); --amplify-components-select-expanded-padding-block: var(--amplify-space-xs); --amplify-components-select-expanded-padding-inline: var(--amplify-space-small); --amplify-components-select-expanded-option-padding-block: var(--amplify-space-xs); --amplify-components-select-expanded-option-padding-inline: var(--amplify-space-small); --amplify-components-selectfield-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-selectfield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-selectfield-flex-direction: column; --amplify-components-selectfield-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-selectfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color); --amplify-components-selectfield-label-color: var(--amplify-components-field-label-color); --amplify-components-sliderfield-padding-block: var(--amplify-space-xs); --amplify-components-sliderfield-track-background-color: var(--amplify-colors-background-quaternary); --amplify-components-sliderfield-track-border-radius: 9999px; --amplify-components-sliderfield-track-height: 0.375rem; --amplify-components-sliderfield-track-min-width: 10rem; --amplify-components-sliderfield-range-background-color: var(--amplify-colors-primary-80); --amplify-components-sliderfield-range-border-radius: 9999px; --amplify-components-sliderfield-range-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-sliderfield-thumb-width: 1.25rem; --amplify-components-sliderfield-thumb-height: 1.25rem; --amplify-components-sliderfield-thumb-background-color: var(--amplify-colors-background-primary); --amplify-components-sliderfield-thumb-box-shadow: var(--amplify-shadows-small); --amplify-components-sliderfield-thumb-border-radius: 50%; --amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-medium); --amplify-components-sliderfield-thumb-border-color: var(--amplify-colors-border-primary); --amplify-components-sliderfield-thumb-border-style: solid; --amplify-components-sliderfield-thumb-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-sliderfield-thumb-disabled-border-color: transparent; --amplify-components-sliderfield-thumb-disabled-box-shadow: none; --amplify-components-sliderfield-thumb-hover-background-color: var(--amplify-colors-background-primary); --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus); --amplify-components-sliderfield-thumb-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-sliderfield-thumb-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-sliderfield-small-track-height: 0.25rem; --amplify-components-sliderfield-small-thumb-width: 1rem; --amplify-components-sliderfield-small-thumb-height: 1rem; --amplify-components-sliderfield-large-track-height: 0.625rem; --amplify-components-sliderfield-large-thumb-width: 1.5rem; --amplify-components-sliderfield-large-thumb-height: 1.5rem; --amplify-components-stepperfield-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-stepperfield-flex-direction: column; --amplify-components-stepperfield-input-color: var(--amplify-components-fieldcontrol-color); --amplify-components-stepperfield-input-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-stepperfield-input-text-align: center; --amplify-components-stepperfield-button-color: var(--amplify-components-button-color); --amplify-components-stepperfield-button-background-color: var(--amplify-colors-transparent); --amplify-components-stepperfield-button-active-color: var(--amplify-components-button-active-color); --amplify-components-stepperfield-button-active-background-color: var(--amplify-components-button-active-background-color); --amplify-components-stepperfield-button-focus-color: var(--amplify-components-button-focus-color); --amplify-components-stepperfield-button-focus-background-color: var(--amplify-components-button-focus-background-color); --amplify-components-stepperfield-button-disabled-color: var(--amplify-components-button-disabled-color); --amplify-components-stepperfield-button-disabled-background-color: var(--amplify-components-fieldcontrol-disabled-background-color); --amplify-components-stepperfield-button-hover-color: var(--amplify-components-button-hover-color); --amplify-components-stepperfield-button-hover-background-color: var(--amplify-components-button-hover-background-color); --amplify-components-storagemanager-dropzone-background-color: var(--amplify-colors-background-primary); --amplify-components-storagemanager-dropzone-border-radius: var(--amplify-radii-small); --amplify-components-storagemanager-dropzone-border-color: var(--amplify-colors-border-primary); --amplify-components-storagemanager-dropzone-border-style: dashed; --amplify-components-storagemanager-dropzone-border-width: var(--amplify-border-widths-small); --amplify-components-storagemanager-dropzone-gap: var(--amplify-space-small); --amplify-components-storagemanager-dropzone-padding-block: var(--amplify-space-xl); --amplify-components-storagemanager-dropzone-padding-inline: var(--amplify-space-large); --amplify-components-storagemanager-dropzone-text-align: center; --amplify-components-storagemanager-dropzone-active-background-color: var(--amplify-colors-primary-10); --amplify-components-storagemanager-dropzone-active-border-radius: var(--amplify-components-storagemanager-dropzone-border-radius); --amplify-components-storagemanager-dropzone-active-border-color: var(--amplify-colors-border-pressed); --amplify-components-storagemanager-dropzone-active-border-style: var(--amplify-components-storagemanager-dropzone-border-style); --amplify-components-storagemanager-dropzone-active-border-width: var(--amplify-border-widths-medium); --amplify-components-storagemanager-dropzone-icon-color: var(--amplify-colors-border-primary); --amplify-components-storagemanager-dropzone-icon-font-size: var(--amplify-font-sizes-xxl); --amplify-components-storagemanager-dropzone-text-color: var(--amplify-colors-font-tertiary); --amplify-components-storagemanager-dropzone-text-font-size: var(--amplify-font-sizes-medium); --amplify-components-storagemanager-dropzone-text-font-weight: var(--amplify-font-weights-bold); --amplify-components-storagemanager-file-background-color: var(--amplify-colors-background-primary); --amplify-components-storagemanager-file-border-radius: var(--amplify-radii-small); --amplify-components-storagemanager-file-border-color: var(--amplify-colors-border-primary); --amplify-components-storagemanager-file-border-style: solid; --amplify-components-storagemanager-file-border-width: var(--amplify-border-widths-small); --amplify-components-storagemanager-file-padding-block: var(--amplify-space-xs); --amplify-components-storagemanager-file-padding-inline: var(--amplify-space-small); --amplify-components-storagemanager-file-gap: var(--amplify-space-small); --amplify-components-storagemanager-file-align-items: baseline; --amplify-components-storagemanager-file-name-font-size: var(--amplify-font-sizes-medium); --amplify-components-storagemanager-file-name-font-weight: var(--amplify-font-weights-bold); --amplify-components-storagemanager-file-name-color: var(--amplify-colors-font-primary); --amplify-components-storagemanager-file-size-font-size: var(--amplify-font-sizes-small); --amplify-components-storagemanager-file-size-font-weight: var(--amplify-font-weights-normal); --amplify-components-storagemanager-file-size-color: var(--amplify-colors-font-tertiary); --amplify-components-storagemanager-file-image-width: var(--amplify-space-xxl); --amplify-components-storagemanager-file-image-height: var(--amplify-space-xxl); --amplify-components-storagemanager-file-image-background-color: var(--amplify-colors-background-secondary); --amplify-components-storagemanager-file-image-color: var(--amplify-colors-font-tertiary); --amplify-components-storagemanager-file-image-border-radius: var(--amplify-radii-small); --amplify-components-storagemanager-filelist-flex-direction: column; --amplify-components-storagemanager-filelist-gap: var(--amplify-space-small); --amplify-components-storagemanager-loader-stroke-linecap: round; --amplify-components-storagemanager-loader-stroke-empty: var(--amplify-colors-border-secondary); --amplify-components-storagemanager-loader-stroke-filled: var(--amplify-components-loader-stroke-filled); --amplify-components-storagemanager-loader-stroke-width: var(--amplify-border-widths-large); --amplify-components-storagemanager-previewer-background-color: var(--amplify-colors-background-primary); --amplify-components-storagemanager-previewer-border-color: var(--amplify-colors-border-primary); --amplify-components-storagemanager-previewer-border-style: solid; --amplify-components-storagemanager-previewer-border-width: var(--amplify-border-widths-small); --amplify-components-storagemanager-previewer-border-radius: var(--amplify-radii-small); --amplify-components-storagemanager-previewer-padding-block: var(--amplify-space-zero); --amplify-components-storagemanager-previewer-padding-inline: var(--amplify-space-zero); --amplify-components-storagemanager-previewer-max-height: 40rem; --amplify-components-storagemanager-previewer-max-width: auto; --amplify-components-storagemanager-previewer-text-font-size: var(--amplify-font-sizes-medium); --amplify-components-storagemanager-previewer-text-font-weight: var(--amplify-font-weights-bold); --amplify-components-storagemanager-previewer-text-color: var(--amplify-colors-font-primary); --amplify-components-storagemanager-previewer-body-padding-block: var(--amplify-space-medium); --amplify-components-storagemanager-previewer-body-padding-inline: var(--amplify-space-medium); --amplify-components-storagemanager-previewer-body-gap: var(--amplify-space-small); --amplify-components-storagemanager-previewer-footer-justify-content: flex-end; --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60); --amplify-components-switchfield-focused-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-switchfield-font-size: var(--amplify-font-sizes-medium); --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large); --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small); --amplify-components-switchfield-label-padding: var(--amplify-space-xs); --amplify-components-switchfield-thumb-background-color: var(--amplify-colors-background-primary); --amplify-components-switchfield-thumb-border-color: transparent; --amplify-components-switchfield-thumb-border-width: var(--amplify-border-widths-small); --amplify-components-switchfield-thumb-border-style: solid; --amplify-components-switchfield-thumb-border-radius: var(--amplify-radii-xxxl); --amplify-components-switchfield-thumb-checked-transform: var(--amplify-transforms-slide-x-medium); --amplify-components-switchfield-thumb-transition-duration: var(--amplify-time-medium); --amplify-components-switchfield-thumb-width: var(--amplify-space-relative-medium); --amplify-components-switchfield-track-background-color: var(--amplify-colors-background-quaternary); --amplify-components-switchfield-track-border-radius: var(--amplify-radii-xxxl); --amplify-components-switchfield-track-checked-background-color: var(--amplify-colors-primary-80); --amplify-components-switchfield-track-height: var(--amplify-space-relative-medium); --amplify-components-switchfield-track-padding: var(--amplify-outline-widths-medium); --amplify-components-switchfield-track-transition-duration: var(--amplify-time-short); --amplify-components-switchfield-track-width: var(--amplify-space-relative-xl); --amplify-components-switchfield-track-error-background-color: var(--amplify-colors-background-error); --amplify-components-table-border-collapse: collapse; --amplify-components-table-display: table; --amplify-components-table-width: 100%; --amplify-components-table-head-display: table-header-group; --amplify-components-table-head-vertical-align: middle; --amplify-components-table-body-display: table-row-group; --amplify-components-table-body-vertical-align: middle; --amplify-components-table-foot-display: table-footer-group; --amplify-components-table-foot-vertical-align: middle; --amplify-components-table-row-display: table-row; --amplify-components-table-row-vertical-align: middle; --amplify-components-table-row-hover-background-color: var(--amplify-colors-background-tertiary); --amplify-components-table-row-striped-background-color: var(--amplify-colors-background-secondary); --amplify-components-table-header-border-color: var(--amplify-colors-border-tertiary); --amplify-components-table-header-border-style: solid; --amplify-components-table-header-border-width: var(--amplify-border-widths-small); --amplify-components-table-header-color: var(--amplify-colors-font-primary); --amplify-components-table-header-display: table-cell; --amplify-components-table-header-font-size: var(--amplify-font-sizes-medium); --amplify-components-table-header-font-weight: var(--amplify-font-weights-bold); --amplify-components-table-header-padding: var(--amplify-space-medium); --amplify-components-table-header-vertical-align: middle; --amplify-components-table-header-large-font-size: var(--amplify-font-sizes-large); --amplify-components-table-header-large-padding: var(--amplify-space-large); --amplify-components-table-header-small-font-size: var(--amplify-font-sizes-small); --amplify-components-table-header-small-padding: var(--amplify-space-xs); --amplify-components-table-data-border-color: var(--amplify-colors-border-tertiary); --amplify-components-table-data-border-style: solid; --amplify-components-table-data-border-width: var(--amplify-border-widths-small); --amplify-components-table-data-color: var(--amplify-colors-font-primary); --amplify-components-table-data-display: table-cell; --amplify-components-table-data-font-size: var(--amplify-font-sizes-medium); --amplify-components-table-data-font-weight: var(--amplify-font-weights-normal); --amplify-components-table-data-padding: var(--amplify-space-medium); --amplify-components-table-data-vertical-align: middle; --amplify-components-table-data-large-font-size: var(--amplify-font-sizes-large); --amplify-components-table-data-large-padding: var(--amplify-space-large); --amplify-components-table-data-small-font-size: var(--amplify-font-sizes-small); --amplify-components-table-data-small-padding: var(--amplify-space-xs); --amplify-components-table-caption-caption-side: bottom; --amplify-components-table-caption-color: var(--amplify-colors-font-primary); --amplify-components-table-caption-display: table-caption; --amplify-components-table-caption-font-size: var(--amplify-font-sizes-medium); --amplify-components-table-caption-text-align: center; --amplify-components-table-caption-word-break: break-all; --amplify-components-table-caption-large-font-size: var(--amplify-font-sizes-large); --amplify-components-table-caption-small-font-size: var(--amplify-font-sizes-small); --amplify-components-tabs-background-color: transparent; --amplify-components-tabs-border-color: var(--amplify-colors-border-secondary); --amplify-components-tabs-border-style: solid; --amplify-components-tabs-border-width: var(--amplify-border-widths-medium); --amplify-components-tabs-gap: 0; --amplify-components-tabs-item-background-color: transparent; --amplify-components-tabs-item-border-color: var(--amplify-colors-border-secondary); --amplify-components-tabs-item-border-style: solid; --amplify-components-tabs-item-border-width: var(--amplify-border-widths-medium); --amplify-components-tabs-item-color: var(--amplify-colors-font-secondary); --amplify-components-tabs-item-font-size: var(--amplify-font-sizes-medium); --amplify-components-tabs-item-font-weight: var(--amplify-font-weights-bold); --amplify-components-tabs-item-padding-vertical: var(--amplify-space-small); --amplify-components-tabs-item-padding-horizontal: var(--amplify-space-medium); --amplify-components-tabs-item-text-align: center; --amplify-components-tabs-item-transition-duration: var(--amplify-time-medium); --amplify-components-tabs-item-hover-background-color: transparent; --amplify-components-tabs-item-hover-border-color: var(--amplify-colors-border-focus); --amplify-components-tabs-item-hover-box-shadow: none; --amplify-components-tabs-item-hover-color: var(--amplify-colors-font-hover); --amplify-components-tabs-item-focus-background-color: transparent; --amplify-components-tabs-item-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-tabs-item-focus-box-shadow: 0px 0px 0px var(--amplify-border-widths-medium) var(--amplify-colors-border-focus); --amplify-components-tabs-item-focus-color: var(--amplify-colors-font-focus); --amplify-components-tabs-item-active-background-color: transparent; --amplify-components-tabs-item-active-border-color: var(--amplify-colors-font-interactive); --amplify-components-tabs-item-active-box-shadow: none; --amplify-components-tabs-item-active-color: var(--amplify-colors-font-interactive); --amplify-components-tabs-item-disabled-background-color: transparent; --amplify-components-tabs-item-disabled-border-color: var(--amplify-colors-border-tertiary); --amplify-components-tabs-item-disabled-box-shadow: none; --amplify-components-tabs-item-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-tabs-panel-background-color: transparent; --amplify-components-tabs-panel-padding-inline: 0; --amplify-components-tabs-panel-padding-block: var(--amplify-space-small); --amplify-components-text-color: var(--amplify-colors-font-primary); --amplify-components-text-primary-color: var(--amplify-colors-font-primary); --amplify-components-text-secondary-color: var(--amplify-colors-font-secondary); --amplify-components-text-tertiary-color: var(--amplify-colors-font-tertiary); --amplify-components-text-error-color: var(--amplify-colors-font-error); --amplify-components-text-warning-color: var(--amplify-colors-font-warning); --amplify-components-text-success-color: var(--amplify-colors-font-success); --amplify-components-text-info-color: var(--amplify-colors-font-info); --amplify-components-textareafield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-textareafield-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-textareafield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color); --amplify-components-textfield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-textfield-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-textfield-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-textfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color); --amplify-components-togglebutton-border-color: var(--amplify-colors-border-primary); --amplify-components-togglebutton-color: var(--amplify-colors-font-primary); --amplify-components-togglebutton-hover-background-color: var(--amplify-colors-overlay-10); --amplify-components-togglebutton-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-togglebutton-focus-color: var(--amplify-colors-font-primary); --amplify-components-togglebutton-active-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-disabled-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-disabled); --amplify-components-togglebutton-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-togglebutton-pressed-border-color: var(--amplify-colors-border-pressed); --amplify-components-togglebutton-pressed-color: var(--amplify-colors-font-primary); --amplify-components-togglebutton-pressed-background-color: var(--amplify-colors-overlay-20); --amplify-components-togglebutton-pressed-hover-background-color: var(--amplify-colors-overlay-30); --amplify-components-togglebutton-primary-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-primary-border-width: var(--amplify-border-widths-small); --amplify-components-togglebutton-primary-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-togglebutton-primary-focus-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-togglebutton-primary-focus-color: var(--amplify-colors-font-primary); --amplify-components-togglebutton-primary-hover-background-color: var(--amplify-colors-overlay-10); --amplify-components-togglebutton-primary-hover-color: var(--amplify-colors-font-primary); --amplify-components-togglebutton-primary-disabled-border-color: var(--amplify-colors-border-disabled); --amplify-components-togglebutton-primary-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-togglebutton-primary-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-togglebutton-primary-pressed-background-color: var(--amplify-colors-primary-80); --amplify-components-togglebutton-primary-pressed-border-color: var(--amplify-colors-primary-80); --amplify-components-togglebutton-primary-pressed-color: var(--amplify-colors-background-primary); --amplify-components-togglebutton-primary-pressed-focus-background-color: var(--amplify-colors-border-focus); --amplify-components-togglebutton-primary-pressed-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-togglebutton-primary-pressed-focus-color: var(--amplify-colors-background-primary); --amplify-components-togglebutton-primary-pressed-hover-border-color: var(--amplify-colors-primary-60); --amplify-components-togglebutton-primary-pressed-hover-background-color: var(--amplify-colors-primary-60); --amplify-components-togglebutton-primary-pressed-hover-box-shadow: var(--amplify-colors-primary-60); --amplify-components-togglebutton-primary-pressed-hover-color: var(--amplify-colors-background-primary); --amplify-components-togglebutton-link-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-color: var(--amplify-colors-overlay-50); --amplify-components-togglebutton-link-hover-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-hover-color: var(--amplify-colors-overlay-50); --amplify-components-togglebutton-link-focus-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-focus-color: var(--amplify-colors-overlay-50); --amplify-components-togglebutton-link-disabled-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-togglebutton-link-pressed-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-pressed-color: var(--amplify-colors-overlay-90); --amplify-components-togglebutton-link-pressed-focus-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-pressed-focus-color: var(--amplify-colors-overlay-90); --amplify-components-togglebutton-link-pressed-hover-color: var(--amplify-colors-overlay-90); --amplify-components-togglebutton-link-pressed-hover-background-color: var(--amplify-colors-transparent); --amplify-components-togglebuttongroup-align-items: center; --amplify-components-togglebuttongroup-align-content: center; --amplify-components-togglebuttongroup-justify-content: flex-start; --amplify-border-widths-small: 1px; --amplify-border-widths-medium: 2px; --amplify-border-widths-large: 3px; --amplify-colors-red-10: hsl(0, 75%, 95%); --amplify-colors-red-20: hsl(0, 75%, 85%); --amplify-colors-red-40: hsl(0, 75%, 75%); --amplify-colors-red-60: hsl(0, 50%, 50%); --amplify-colors-red-80: hsl(0, 95%, 30%); --amplify-colors-red-90: hsl(0, 100%, 20%); --amplify-colors-red-100: hsl(0, 100%, 15%); --amplify-colors-orange-10: hsl(30, 75%, 95%); --amplify-colors-orange-20: hsl(30, 75%, 85%); --amplify-colors-orange-40: hsl(30, 75%, 75%); --amplify-colors-orange-60: hsl(30, 50%, 50%); --amplify-colors-orange-80: hsl(30, 95%, 30%); --amplify-colors-orange-90: hsl(30, 100%, 20%); --amplify-colors-orange-100: hsl(30, 100%, 15%); --amplify-colors-yellow-10: hsl(60, 75%, 95%); --amplify-colors-yellow-20: hsl(60, 75%, 85%); --amplify-colors-yellow-40: hsl(60, 75%, 75%); --amplify-colors-yellow-60: hsl(60, 50%, 50%); --amplify-colors-yellow-80: hsl(60, 95%, 30%); --amplify-colors-yellow-90: hsl(60, 100%, 20%); --amplify-colors-yellow-100: hsl(60, 100%, 15%); --amplify-colors-green-10: hsl(130, 60%, 95%); --amplify-colors-green-20: hsl(130, 60%, 90%); --amplify-colors-green-40: hsl(130, 44%, 63%); --amplify-colors-green-60: hsl(130, 43%, 46%); --amplify-colors-green-80: hsl(130, 33%, 37%); --amplify-colors-green-90: hsl(130, 27%, 29%); --amplify-colors-green-100: hsl(130, 22%, 23%); --amplify-colors-teal-10: hsl(190, 75%, 95%); --amplify-colors-teal-20: hsl(190, 75%, 85%); --amplify-colors-teal-40: hsl(190, 70%, 70%); --amplify-colors-teal-60: hsl(190, 50%, 50%); --amplify-colors-teal-80: hsl(190, 95%, 30%); --amplify-colors-teal-90: hsl(190, 100%, 20%); --amplify-colors-teal-100: hsl(190, 100%, 15%); --amplify-colors-blue-10: hsl(220, 95%, 95%); --amplify-colors-blue-20: hsl(220, 85%, 85%); --amplify-colors-blue-40: hsl(220, 70%, 70%); --amplify-colors-blue-60: hsl(220, 50%, 50%); --amplify-colors-blue-80: hsl(220, 95%, 30%); --amplify-colors-blue-90: hsl(220, 100%, 20%); --amplify-colors-blue-100: hsl(220, 100%, 15%); --amplify-colors-purple-10: hsl(300, 95%, 95%); --amplify-colors-purple-20: hsl(300, 85%, 85%); --amplify-colors-purple-40: hsl(300, 70%, 70%); --amplify-colors-purple-60: hsl(300, 50%, 50%); --amplify-colors-purple-80: hsl(300, 95%, 30%); --amplify-colors-purple-90: hsl(300, 100%, 20%); --amplify-colors-purple-100: hsl(300, 100%, 15%); --amplify-colors-pink-10: hsl(340, 95%, 95%); --amplify-colors-pink-20: hsl(340, 90%, 85%); --amplify-colors-pink-40: hsl(340, 70%, 70%); --amplify-colors-pink-60: hsl(340, 50%, 50%); --amplify-colors-pink-80: hsl(340, 95%, 30%); --amplify-colors-pink-90: hsl(340, 100%, 20%); --amplify-colors-pink-100: hsl(340, 100%, 15%); --amplify-colors-neutral-10: hsl(210, 5%, 98%); --amplify-colors-neutral-20: hsl(210, 5%, 94%); --amplify-colors-neutral-40: hsl(210, 5%, 87%); --amplify-colors-neutral-60: hsl(210, 10%, 58%); --amplify-colors-neutral-80: hsl(210, 10%, 40%); --amplify-colors-neutral-90: hsl(210, 25%, 25%); --amplify-colors-neutral-100: hsl(210, 50%, 10%); --amplify-colors-primary-10: var(--amplify-colors-teal-10); --amplify-colors-primary-20: var(--amplify-colors-teal-20); --amplify-colors-primary-40: var(--amplify-colors-teal-40); --amplify-colors-primary-60: var(--amplify-colors-teal-60); --amplify-colors-primary-80: var(--amplify-colors-teal-80); --amplify-colors-primary-90: var(--amplify-colors-teal-90); --amplify-colors-primary-100: var(--amplify-colors-teal-100); --amplify-colors-secondary-10: var(--amplify-colors-purple-10); --amplify-colors-secondary-20: var(--amplify-colors-purple-20); --amplify-colors-secondary-40: var(--amplify-colors-purple-40); --amplify-colors-secondary-60: var(--amplify-colors-purple-60); --amplify-colors-secondary-80: var(--amplify-colors-purple-80); --amplify-colors-secondary-90: var(--amplify-colors-purple-90); --amplify-colors-secondary-100: var(--amplify-colors-purple-100); --amplify-colors-font-primary: var(--amplify-colors-neutral-100); --amplify-colors-font-secondary: var(--amplify-colors-neutral-90); --amplify-colors-font-tertiary: var(--amplify-colors-neutral-80); --amplify-colors-font-disabled: var(--amplify-colors-neutral-60); --amplify-colors-font-inverse: var(--amplify-colors-white); --amplify-colors-font-interactive: var(--amplify-colors-primary-80); --amplify-colors-font-hover: var(--amplify-colors-primary-90); --amplify-colors-font-focus: var(--amplify-colors-primary-100); --amplify-colors-font-active: var(--amplify-colors-primary-100); --amplify-colors-font-info: var(--amplify-colors-blue-90); --amplify-colors-font-warning: var(--amplify-colors-orange-90); --amplify-colors-font-error: var(--amplify-colors-red-90); --amplify-colors-font-success: var(--amplify-colors-green-90); --amplify-colors-background-primary: var(--amplify-colors-white); --amplify-colors-background-secondary: var(--amplify-colors-neutral-10); --amplify-colors-background-tertiary: var(--amplify-colors-neutral-20); --amplify-colors-background-quaternary: var(--amplify-colors-neutral-60); --amplify-colors-background-disabled: var(--amplify-colors-background-tertiary); --amplify-colors-background-info: var(--amplify-colors-blue-10); --amplify-colors-background-warning: var(--amplify-colors-orange-10); --amplify-colors-background-error: var(--amplify-colors-red-10); --amplify-colors-background-success: var(--amplify-colors-green-10); --amplify-colors-border-primary: var(--amplify-colors-neutral-60); --amplify-colors-border-secondary: var(--amplify-colors-neutral-40); --amplify-colors-border-tertiary: var(--amplify-colors-neutral-20); --amplify-colors-border-disabled: var(--amplify-colors-border-tertiary); --amplify-colors-border-pressed: var(--amplify-colors-primary-100); --amplify-colors-border-focus: var(--amplify-colors-primary-100); --amplify-colors-border-error: var(--amplify-colors-red-80); --amplify-colors-border-info: var(--amplify-colors-blue-80); --amplify-colors-border-success: var(--amplify-colors-green-80); --amplify-colors-border-warning: var(--amplify-colors-orange-80); --amplify-colors-shadow-primary: hsla(210, 50%, 10%, 0.25); --amplify-colors-shadow-secondary: hsla(210, 50%, 10%, 0.15); --amplify-colors-shadow-tertiary: hsla(210, 50%, 10%, 0.05); --amplify-colors-overlay-5: hsla(0, 0%, 0%, 0.05); --amplify-colors-overlay-10: hsla(0, 0%, 0%, 0.1); --amplify-colors-overlay-20: hsla(0, 0%, 0%, 0.2); --amplify-colors-overlay-30: hsla(0, 0%, 0%, 0.3); --amplify-colors-overlay-40: hsla(0, 0%, 0%, 0.4); --amplify-colors-overlay-50: hsla(0, 0%, 0%, 0.5); --amplify-colors-overlay-60: hsla(0, 0%, 0%, 0.6); --amplify-colors-overlay-70: hsla(0, 0%, 0%, 0.7); --amplify-colors-overlay-80: hsla(0, 0%, 0%, 0.8); --amplify-colors-overlay-90: hsla(0, 0%, 0%, 0.9); --amplify-colors-black: hsl(0, 0%, 0%); --amplify-colors-white: hsl(0, 0%, 100%); --amplify-colors-transparent: transparent; --amplify-fonts-default-variable: 'InterVariable', 'Inter var', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif; --amplify-fonts-default-static: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif; --amplify-font-sizes-xxxs: 0.375rem; --amplify-font-sizes-xxs: 0.5rem; --amplify-font-sizes-xs: 0.75rem; --amplify-font-sizes-small: 0.875rem; --amplify-font-sizes-medium: 1rem; --amplify-font-sizes-large: 1.25rem; --amplify-font-sizes-xl: 1.5rem; --amplify-font-sizes-xxl: 2rem; --amplify-font-sizes-xxxl: 2.5rem; --amplify-font-sizes-xxxxl: 3rem; --amplify-font-weights-hairline: 100; --amplify-font-weights-thin: 200; --amplify-font-weights-light: 300; --amplify-font-weights-normal: 400; --amplify-font-weights-medium: 500; --amplify-font-weights-semibold: 600; --amplify-font-weights-bold: 700; --amplify-font-weights-extrabold: 800; --amplify-font-weights-black: 900; --amplify-line-heights-small: 1.25; --amplify-line-heights-medium: 1.5; --amplify-line-heights-large: 2; --amplify-opacities-0: 0; --amplify-opacities-10: 0.1; --amplify-opacities-20: 0.2; --amplify-opacities-30: 0.3; --amplify-opacities-40: 0.4; --amplify-opacities-50: 0.5; --amplify-opacities-60: 0.6; --amplify-opacities-70: 0.7; --amplify-opacities-80: 0.8; --amplify-opacities-90: 0.9; --amplify-opacities-100: 1; --amplify-outline-offsets-small: 1px; --amplify-outline-offsets-medium: 2px; --amplify-outline-offsets-large: 3px; --amplify-outline-widths-small: 1px; --amplify-outline-widths-medium: 2px; --amplify-outline-widths-large: 3px; --amplify-radii-xs: 0.125rem; --amplify-radii-small: 0.25rem; --amplify-radii-medium: 0.5rem; --amplify-radii-large: 1rem; --amplify-radii-xl: 2rem; --amplify-radii-xxl: 4rem; --amplify-radii-xxxl: 8rem; --amplify-shadows-small: 0px 2px 4px var(--amplify-colors-shadow-tertiary); --amplify-shadows-medium: 0px 2px 6px var(--amplify-colors-shadow-secondary); --amplify-shadows-large: 0px 4px 12px var(--amplify-colors-shadow-primary); --amplify-space-zero: 0; --amplify-space-xxxs: 0.25rem; --amplify-space-xxs: 0.375rem; --amplify-space-xs: 0.5rem; --amplify-space-small: 0.75rem; --amplify-space-medium: 1rem; --amplify-space-large: 1.5rem; --amplify-space-xl: 2.0rem; --amplify-space-xxl: 3.0rem; --amplify-space-xxxl: 4.5rem; --amplify-space-relative-xxxs: 0.25em; --amplify-space-relative-xxs: 0.375em; --amplify-space-relative-xs: 0.5em; --amplify-space-relative-small: 0.75em; --amplify-space-relative-medium: 1em; --amplify-space-relative-large: 1.5em; --amplify-space-relative-xl: 2.0em; --amplify-space-relative-xxl: 3.0em; --amplify-space-relative-xxxl: 4.5em; --amplify-space-relative-full: 100%; --amplify-time-short: 100ms; --amplify-time-medium: 250ms; --amplify-time-long: 500ms; --amplify-transforms-slide-x-small: translateX(0.5em); --amplify-transforms-slide-x-medium: translateX(1em); --amplify-transforms-slide-x-large: translateX(2em); } </style><div class="example-code"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small example-copy-button" type="button">Copy</button><div><pre class="language-tsx"><code class="language-tsx"><span class="token keyword">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Button</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Collection</span><span class="token punctuation">,</span> <span class="token maybe-class-name">ThemeProvider</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Theme</span><span class="token punctuation">,</span> <span class="token punctuation">}</span></span> <span class="token keyword">from</span> <span class="token string">'@aws-amplify/ui-react'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token imports"><span class="token punctuation">{</span> countries <span class="token punctuation">}</span></span> <span class="token keyword">from</span> <span class="token string">'countries-list'</span><span class="token punctuation">;</span> <span class="token keyword">const</span> theme<span class="token operator">:</span> <span class="token maybe-class-name">Theme</span> <span class="token operator">=</span> <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'collection-theme'</span><span class="token punctuation">,</span> tokens<span class="token operator">:</span> <span class="token punctuation">{</span> components<span class="token operator">:</span> <span class="token punctuation">{</span> collection<span class="token operator">:</span> <span class="token punctuation">{</span> pagination<span class="token operator">:</span> <span class="token punctuation">{</span> current<span class="token operator">:</span> <span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">'white'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> backgroundColor<span class="token operator">:</span> <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">'{colors.blue.80}'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> button<span class="token operator">:</span> <span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">'{colors.blue.60}'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> _hover<span class="token operator">:</span> <span class="token punctuation">{</span> backgroundColor<span class="token operator">:</span> <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">'{colors.blue.10}'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> color<span class="token operator">:</span> <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">'{colors.blue.60}'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> search<span class="token operator">:</span> <span class="token punctuation">{</span> input<span class="token operator">:</span> <span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">'{colors.blue.60}'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> button<span class="token operator">:</span> <span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">'{colors.blue.60}'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> _focus<span class="token operator">:</span> <span class="token punctuation">{</span> backgroundColor<span class="token operator">:</span> <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">'{colors.blue.60}'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> color<span class="token operator">:</span> <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">'white'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> _hover<span class="token operator">:</span> <span class="token punctuation">{</span> backgroundColor<span class="token operator">:</span> <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">'{colors.blue.80}'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> color<span class="token operator">:</span> <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token string">'white'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">CollectionThemeExample</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ThemeProvider</span></span> <span class="token attr-name">theme</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>theme<span class="token punctuation">}</span></span> <span class="token attr-name">colorMode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>light<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Collection</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>grid<span class="token punctuation">"</span></span> <span class="token attr-name">templateColumns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1fr 1fr 1fr<span class="token punctuation">"</span></span> <span class="token attr-name">gap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>15px<span class="token punctuation">"</span></span> <span class="token attr-name">items</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token known-class-name class-name">Object</span><span class="token punctuation">.</span><span class="token method function property-access">values</span><span class="token punctuation">(</span>countries<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> name<span class="token punctuation">,</span> emoji <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> name<span class="token punctuation">,</span> emoji<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token attr-name">isSearchable</span> <span class="token attr-name">isPaginated</span> <span class="token attr-name">itemsPerPage</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">9</span><span class="token punctuation">}</span></span> <span class="token attr-name">searchPlaceholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Type to search...<span class="token punctuation">"</span></span> <span class="token attr-name">searchFilter</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">regions<span class="token punctuation">,</span> keyword</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>regions <span class="token keyword">as</span> <span class="token builtin">any</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">.</span><span class="token method function property-access">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">startsWith</span><span class="token punctuation">(</span>keyword<span class="token punctuation">.</span><span class="token method function property-access">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">}</span></span> <span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">regions<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">grow</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>index<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token punctuation">{</span>regions<span class="token punctuation">.</span><span class="token property-access">emoji</span><span class="token punctuation">}</span><span class="token plain-text"> </span><span class="token punctuation">{</span>regions<span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">}</span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span> <span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Collection</span></span><span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">ThemeProvider</span></span><span class="token punctuation">></span></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre></div></div></div></div></div> <h3 id="target-classes"><a aria-hidden="true" tabindex="-1" href="#target-classes"><span class="icon icon-link"></span></a>Target classes</h3> <div class="amplify-tabs"><div role="tablist" class="amplify-tabs__list"><button role="tab" id="amplify-id-:R36rpdl6:-tab-classes" aria-selected="true" aria-controls="amplify-id-:R36rpdl6:-panel-classes" class="amplify-tabs__item amplify-tabs__item--active">Target Classes</button><button role="tab" id="amplify-id-:R36rpdl6:-tab-variables" aria-selected="false" aria-controls="amplify-id-:R36rpdl6:-panel-variables" tabindex="-1" class="amplify-tabs__item">CSS Variables</button></div><div role="tabpanel" id="amplify-id-:R36rpdl6:-panel-classes" aria-labelledby="amplify-id-:R36rpdl6:-tab-classes" class="amplify-tabs__panel amplify-tabs__panel--active"><div style="padding:var(--amplify-space-medium) 0"><table style="--labelWidth:6rem" class="amplify-table amplify-table--small docs-responsiveTable" data-highlightonhover="false"><thead class="amplify-table__head"><tr class="amplify-table__row"><th class="amplify-table__th">Class</th><th class="amplify-table__th">Description</th></tr></thead><tbody class="amplify-table__body"><tr class="amplify-table__row"><td class="amplify-table__td docs-responsiveTable__cell"><span class="docs-responsiveTable__label" aria-hidden="true">Class</span><span class="docs-responsiveTable__value"><code>amplify-collection</code></span></td><td class="amplify-table__td docs-responsiveTable__cell"><span class="docs-responsiveTable__label" aria-hidden="true">Description</span><span class="docs-responsiveTable__value">Top level element that wraps the Collection primitive</span></td></tr><tr class="amplify-table__row"><td class="amplify-table__td docs-responsiveTable__cell"><span class="docs-responsiveTable__label" aria-hidden="true">Class</span><span class="docs-responsiveTable__value"><code>amplify-collection-items</code></span></td><td class="amplify-table__td docs-responsiveTable__cell"><span class="docs-responsiveTable__label" aria-hidden="true">Description</span><span class="docs-responsiveTable__value">Class applied to the element that wraps all the items in a collection</span></td></tr><tr class="amplify-table__row"><td class="amplify-table__td docs-responsiveTable__cell"><span class="docs-responsiveTable__label" aria-hidden="true">Class</span><span class="docs-responsiveTable__value"><code>amplify-collection-search</code></span></td><td class="amplify-table__td docs-responsiveTable__cell"><span class="docs-responsiveTable__label" aria-hidden="true">Description</span><span class="docs-responsiveTable__value">Class applied to the element that wraps the collection search box</span></td></tr><tr class="amplify-table__row"><td class="amplify-table__td docs-responsiveTable__cell"><span class="docs-responsiveTable__label" aria-hidden="true">Class</span><span class="docs-responsiveTable__value"><code>amplify-collection-pagination</code></span></td><td class="amplify-table__td docs-responsiveTable__cell"><span class="docs-responsiveTable__label" aria-hidden="true">Description</span><span class="docs-responsiveTable__value">Class applied to the element that wraps the pagination component in a collection</span></td></tr></tbody></table></div></div><div role="tabpanel" id="amplify-id-:R36rpdl6:-panel-variables" aria-labelledby="amplify-id-:R36rpdl6:-tab-variables" class="amplify-tabs__panel"><div style="padding:var(--amplify-space-medium) 0"><div class="amplify-scrollview" tabindex="0"><ul style="grid-template-columns:1fr" class="amplify-grid docs-grid-bordered"><li><code>--amplify-components-collection-pagination-button-color</code></li><li><code>--amplify-components-collection-pagination-button-disabled-color</code></li><li><code>--amplify-components-collection-pagination-button-hover-background-color</code></li><li><code>--amplify-components-collection-pagination-button-hover-color</code></li><li><code>--amplify-components-collection-pagination-current-background-color</code></li><li><code>--amplify-components-collection-pagination-current-color</code></li><li><code>--amplify-components-collection-search-button-active-background-color</code></li><li><code>--amplify-components-collection-search-button-active-border-color</code></li><li><code>--amplify-components-collection-search-button-active-color</code></li><li><code>--amplify-components-collection-search-button-color</code></li><li><code>--amplify-components-collection-search-button-disabled-background-color</code></li><li><code>--amplify-components-collection-search-button-disabled-border-color</code></li><li><code>--amplify-components-collection-search-button-disabled-color</code></li><li><code>--amplify-components-collection-search-button-focus-background-color</code></li><li><code>--amplify-components-collection-search-button-focus-border-color</code></li><li><code>--amplify-components-collection-search-button-focus-color</code></li><li><code>--amplify-components-collection-search-button-hover-background-color</code></li><li><code>--amplify-components-collection-search-button-hover-border-color</code></li><li><code>--amplify-components-collection-search-button-hover-color</code></li><li><code>--amplify-components-collection-search-input-color</code></li></ul></div></div></div></div> <h3 id="global-styling"><a aria-hidden="true" tabindex="-1" href="#global-styling"><span class="icon icon-link"></span></a>Global Styling</h3> <p>To override the styling on all Collections you can use the built in <code>.amplify-collection</code> class.</p> <div style="background-color:inherit;margin-block-end:space.large" class="amplify-card amplify-card--outlined example "><div style="flex-direction:column" class="amplify-flex"><div class="amplify-flex amplify-collection collection-styling-example"><div class="amplify-flex amplify-collection-search"><div class="amplify-flex amplify-field amplify-textfield amplify-searchfield"><label class="amplify-label amplify-visually-hidden" for="amplify-id-:R1birpdl6:">Search</label><div class="amplify-flex amplify-field-group amplify-field-group--has-inner-end amplify-field-group--horizontal"><div class="amplify-field-group__field-wrapper amplify-field-group__field-wrapper--horizontal"><input aria-invalid="false" autoComplete="off" class="amplify-input amplify-field-group__control" id="amplify-id-:R1birpdl6:" type="text" name="q" placeholder="Type to search..." value=""/><div class="amplify-field-group__inner-end"></div></div><div class="amplify-field-group__outer-end"><button aria-label="Search" class="amplify-button amplify-field-group__control amplify-field-group__icon amplify-field-group__icon-button amplify-searchfield__search" type="submit"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14V14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z" fill="currentColor"></path></svg></span></button></div></div></div></div><div style="grid-template-columns:1fr 1fr 1fr;gap:15px" class="amplify-grid amplify-collection-items"><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇩 Andorra</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇪 United Arab Emirates</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇫 Afghanistan</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇬 Antigua and Barbuda</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇮 Anguilla</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇱 Albania</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇲 Armenia</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇴 Angola</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇶 Antarctica</button></div><div class="amplify-flex amplify-collection-pagination"><nav class="amplify-pagination"><ol style="justify-content:center;align-items:center;gap:inherit" class="amplify-flex"><li><button aria-label="Go to previous page" disabled="" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-button--disabled amplify-pagination__item amplify-pagination__item--link amplify-pagination__item--disabled" type="button"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.41 7.41L14 6L8 12L14 18L15.41 16.59L10.83 12L15.41 7.41Z" fill="currentColor"></path></svg></span></button></li><li><button data-testid="current" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item amplify-pagination__item--current" type="button" aria-current="page"><span class="amplify-visually-hidden">Page:</span>1</button></li><li><button aria-label="Go to page 2" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item" type="button">2</button></li><li><button aria-label="Go to page 3" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item" type="button">3</button></li><li><button aria-label="Go to page 4" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item" type="button">4</button></li><li><button aria-label="Go to page 5" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item" type="button">5</button></li><li><span data-testid="ellipsis" class="amplify-flex amplify-pagination__item--ellipsis">…</span></li><li><button aria-label="Go to page 28" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item" type="button">28</button></li><li><button aria-label="Go to next page" class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small amplify-pagination__item amplify-pagination__item--link" type="button"><span style="width:1em;height:1em" class="amplify-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.99984 6L8.58984 7.41L13.1698 12L8.58984 16.59L9.99984 18L15.9998 12L9.99984 6Z" fill="currentColor"></path></svg></span></button></li></ol></nav></div></div><div class="example-code"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small example-copy-button" type="button">Copy</button><div><pre class="language-css"><code class="language-css"><span class="token selector"><span class="token class">.amplify-collection</span></span> <span class="token punctuation">{</span> <span class="token variable">--amplify-components-collection-pagination-current-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span> <span class="token variable">--amplify-colors-secondary-20</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token variable">--amplify-components-collection-pagination-current-background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span> <span class="token variable">--amplify-colors-teal-80</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre></div></div></div></div> <h3 id="local-styling"><a aria-hidden="true" tabindex="-1" href="#local-styling"><span class="icon icon-link"></span></a>Local Styling</h3> <p>To override styling on a specific Collection, you can use a class selector or style props.</p> <p><em>Using a class selector:</em></p> <div style="background-color:inherit;margin-block-end:space.large" class="amplify-card amplify-card--outlined example "><div style="flex-direction:column" class="amplify-flex"><div class="amplify-flex amplify-collection collection-local-styling-example"><div style="flex-direction:row" class="amplify-flex amplify-collection-items"><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇩</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇪</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇫</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇬</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇮</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇱</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇲</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇴</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇶</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇷</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇸</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇹</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇺</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇼</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇽</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇿</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇧🇦</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇧🇧</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇧🇩</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇧🇪</button></div></div><div class="example-code"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small example-copy-button" type="button">Copy</button><div><pre class="language-tsx"><code class="language-tsx"><span class="token keyword">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Collection</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Button</span> <span class="token punctuation">}</span></span> <span class="token keyword">from</span> <span class="token string">'@aws-amplify/ui-react'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token imports"><span class="token punctuation">{</span> countries <span class="token punctuation">}</span></span> <span class="token keyword">from</span> <span class="token string">'countries-list'</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">LocalCollectionClassExample</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> items <span class="token operator">=</span> <span class="token known-class-name class-name">Object</span><span class="token punctuation">.</span><span class="token method function property-access">values</span><span class="token punctuation">(</span>countries<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> name<span class="token punctuation">,</span> emoji <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> name<span class="token punctuation">,</span> emoji<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token method function property-access">splice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Collection</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>list<span class="token punctuation">"</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>collection-local-styling-example<span class="token punctuation">"</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span> <span class="token attr-name">items</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>items<span class="token punctuation">}</span></span> <span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">regions<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">grow</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>index<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token punctuation">{</span>regions<span class="token punctuation">.</span><span class="token property-access">emoji</span><span class="token punctuation">}</span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span> <span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Collection</span></span><span class="token punctuation">></span></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre></div></div><div class="example-code"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small example-copy-button" type="button">Copy</button><div><pre class="language-css"><code class="language-css"><span class="token selector"><span class="token class">.collection-local-styling-example</span></span> <span class="token punctuation">{</span> <span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span> <span class="token property">gap</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">px</span><span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">5</span><span class="token unit">px</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector"><span class="token class">.collection-local-styling-example</span> <span class="token class">.amplify-collection-items</span></span> <span class="token punctuation">{</span> <span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span> <span class="token property">gap</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">px</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector"><span class="token class">.collection-local-styling-example</span> <span class="token class">.amplify-button</span></span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span><span class="token variable">--amplify-colors-neutral-60</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre></div></div></div></div> <p><em>Using style props:</em></p> <div style="background-color:inherit;margin-block-end:space.large" class="amplify-card amplify-card--outlined example "><div style="flex-direction:column" class="amplify-flex"><div class="amplify-flex amplify-collection"><div style="flex-direction:row;border:var(--amplify-border-widths-medium) solid var(--amplify-colors-red-60);flex-wrap:wrap;padding:5px;gap:20px" class="amplify-flex amplify-collection-items"><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇩</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇪</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇫</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇬</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇮</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇱</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇲</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇴</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇶</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇷</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇸</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇹</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇺</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇼</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇽</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇦🇿</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇧🇦</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇧🇧</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇧🇩</button><button style="flex-grow:1" class="amplify-button amplify-field-group__control" type="button">🇧🇪</button></div></div><div class="example-code"><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small example-copy-button" type="button">Copy</button><div><pre class="language-tsx"><code class="language-tsx"><span class="token keyword">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Collection</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Button</span><span class="token punctuation">,</span> useTheme <span class="token punctuation">}</span></span> <span class="token keyword">from</span> <span class="token string">'@aws-amplify/ui-react'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token imports"><span class="token punctuation">{</span> countries <span class="token punctuation">}</span></span> <span class="token keyword">from</span> <span class="token string">'countries-list'</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">CollectionStylePropExample</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> tokens <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useTheme</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> items <span class="token operator">=</span> <span class="token known-class-name class-name">Object</span><span class="token punctuation">.</span><span class="token method function property-access">values</span><span class="token punctuation">(</span>countries<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> name<span class="token punctuation">,</span> emoji <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> name<span class="token punctuation">,</span> emoji<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token method function property-access">splice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Collection</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>list<span class="token punctuation">"</span></span> <span class="token attr-name">border</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>tokens<span class="token punctuation">.</span><span class="token property-access">borderWidths</span><span class="token punctuation">.</span><span class="token property-access">medium</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> solid </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>tokens<span class="token punctuation">.</span><span class="token property-access">colors</span><span class="token punctuation">.</span><span class="token property-access">red</span><span class="token punctuation">[</span><span class="token number">60</span><span class="token punctuation">]</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span></span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span> <span class="token attr-name">wrap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>wrap<span class="token punctuation">"</span></span> <span class="token attr-name">padding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5px<span class="token punctuation">"</span></span> <span class="token attr-name">gap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>20px<span class="token punctuation">"</span></span> <span class="token attr-name">items</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>items<span class="token punctuation">}</span></span> <span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">regions<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">grow</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>index<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text"> </span><span class="token punctuation">{</span>regions<span class="token punctuation">.</span><span class="token property-access">emoji</span><span class="token punctuation">}</span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span> <span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Collection</span></span><span class="token punctuation">></span></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre></div></div></div></div></div></div></div></main><footer style="flex-direction:column" class="amplify-flex docs-footer"><div style="flex-direction:row;justify-content:center" class="amplify-flex"><svg class="docs-logo-svg" viewBox="0 0 644 125" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M108.727 98.4091H128.091V56.5C128.091 48.7727 133 43.6364 139.455 43.6364C145.818 43.6364 150.091 48 150.091 54.8636V98.4091H168.864V55.7727C168.864 48.5455 173 43.6364 180.045 43.6364C186.227 43.6364 190.864 47.5 190.864 55.2727V98.4091H210.182V51.4546C210.182 36.3182 201.182 27.6818 188.182 27.6818C177.955 27.6818 170 32.9091 167.136 40.9091H166.409C164.182 32.8182 157.045 27.6818 147.455 27.6818C138.045 27.6818 130.909 32.6818 128 40.9091H127.182V28.5909H108.727V98.4091Z" fill="var(--amplify-colors-font-primary)"></path><path d="M225.477 124.591H244.841V87.2273H245.432C248.114 93.0455 253.977 99.5455 265.25 99.5455C281.159 99.5455 293.568 86.9545 293.568 63.5909C293.568 39.5909 280.614 27.6818 265.295 27.6818C253.614 27.6818 248.023 34.6364 245.432 40.3182H244.568V28.5909H225.477V124.591ZM244.432 63.5C244.432 51.0455 249.705 43.0909 259.114 43.0909C268.705 43.0909 273.795 51.4091 273.795 63.5C273.795 75.6818 268.614 84.1364 259.114 84.1364C249.795 84.1364 244.432 75.9546 244.432 63.5Z" fill="var(--amplify-colors-font-primary)"></path><path d="M325.841 5.31818H306.477V98.4091H325.841V5.31818Z" fill="var(--amplify-colors-font-primary)"></path><path d="M341.352 98.4091H360.716V28.5909H341.352V98.4091ZM351.08 19.5909C356.852 19.5909 361.58 15.1818 361.58 9.77273C361.58 4.4091 356.852 0 351.08 0C345.352 0 340.625 4.4091 340.625 9.77273C340.625 15.1818 345.352 19.5909 351.08 19.5909Z" fill="var(--amplify-colors-font-primary)"></path><path d="M413.773 28.5909H399.909V23.9091C399.909 19.1818 401.818 16.4091 407.5 16.4091C409.818 16.4091 412.182 16.9091 413.727 17.4091L417.136 2.86364C414.727 2.13637 409.409 0.954544 403.455 0.954544C390.318 0.954544 380.545 8.36364 380.545 23.5455V28.5909H370.682V43.1364H380.545V98.4091H399.909V43.1364H413.773V28.5909Z" fill="var(--amplify-colors-font-primary)"></path><path d="M437.557 124.591C451.966 124.591 459.602 117.227 463.557 105.955L490.693 28.6818L470.193 28.5909L455.602 79.8636H454.875L440.421 28.5909H420.057L445.102 100.409L443.966 103.364C441.42 109.909 436.557 110.227 429.739 108.136L425.375 122.591C428.148 123.773 432.648 124.591 437.557 124.591Z" fill="var(--amplify-colors-font-primary)"></path><path d="M588.091 5.31818V64.0909C588.091 74.7273 580.636 82.4091 569.182 82.4091C557.773 82.4091 550.273 74.7273 550.273 64.0909V5.31818H530.591V65.7727C530.591 86.1364 545.955 99.7273 569.182 99.7273C592.318 99.7273 607.773 86.1364 607.773 65.7727V5.31818H588.091Z" fill="var(--amplify-colors-font-primary)"></path><path d="M643.648 5.31818H623.966V98.4091H643.648V5.31818Z" fill="var(--amplify-colors-font-primary)"></path><path d="M27.4194 82.4091H62.9094L72 98.4091H71.7439H0L25.2809 54.6012L35.8752 36.2564L44.971 52.0175L27.4194 82.4091ZM40.6554 27.9603L49.3888 12.8276L98.8145 98.4088H81.3109L40.6554 27.9603ZM54.2496 4.40906H71.7299L126 98.4091H108.498L54.2496 4.40906Z" fill="var(--amplify-colors-primary-60)"></path></svg></div><div style="justify-content:center;align-items:center;flex-direction:column;gap:var(--amplify-space-xs)" class="amplify-flex"><a style="gap:var(--amplify-space-xs)" class="amplify-button amplify-field-group__control amplify-button--link" type="button" href="https://github.com/aws-amplify/amplify-ui/" rel="noopener noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" aria-label="" class="amplify-icon" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><title></title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg>Contribute on GitHub</a><a style="gap:var(--amplify-space-xs)" class="amplify-button amplify-field-group__control amplify-button--link" type="button" href="https://discord.com/invite/amplify" rel="noopener noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" aria-label="" class="amplify-icon" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><title></title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"></path></svg>Discuss on Discord</a></div><div style="font-size:var(--amplify-font-sizes-small)"><p class="amplify-text">Amplify open source software, documentation and community are supported by Amazon Web Services.</p><p class="amplify-text"> © 2024 Amazon Web Services, Inc. and its affiliates. All rights reserved. View the <a class="amplify-link" rel="noopener noreferrer" target="_blank" href="https://aws.amazon.com/terms/">site terms</a> and <a class="amplify-link" rel="noopener noreferrer" target="_blank" href="https://aws.amazon.com/privacy/">privacy policy</a>.</p><p style="margin-block-start:var(--amplify-space-medium)" class="amplify-text">Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.</p></div></footer></div></div></div><style id="amplify-theme-amplify-docs">[data-amplify-theme="amplify-docs"] { --amplify-components-accordion-background-color: var(--amplify-colors-background-primary); --amplify-components-accordion-item-border-color: var(--amplify-colors-border-secondary); --amplify-components-accordion-item-border-width: var(--amplify-border-widths-small); --amplify-components-accordion-item-border-style: solid; --amplify-components-accordion-item-border-radius: var(--amplify-radii-small); --amplify-components-accordion-item-trigger-align-items: center; --amplify-components-accordion-item-trigger-background-color: var(--amplify-colors-background-primary); --amplify-components-accordion-item-trigger-color: inherit; --amplify-components-accordion-item-trigger-gap: var(--amplify-space-small); --amplify-components-accordion-item-trigger-justify-content: space-between; --amplify-components-accordion-item-trigger-padding-block: var(--amplify-space-xs); --amplify-components-accordion-item-trigger-padding-inline: var(--amplify-space-small); --amplify-components-accordion-item-trigger-hover-color: inherit; --amplify-components-accordion-item-trigger-hover-background-color: var(--amplify-colors-overlay-5); --amplify-components-accordion-item-trigger-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-accordion-item-trigger-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus); --amplify-components-accordion-item-content-color: inherit; --amplify-components-accordion-item-content-padding-inline: var(--amplify-space-small); --amplify-components-accordion-item-content-padding-block-end: var(--amplify-space-small); --amplify-components-accordion-item-content-padding-block-start: var(--amplify-space-xxxs); --amplify-components-accordion-item-icon-color: var(--amplify-colors-font-tertiary); --amplify-components-accordion-item-icon-transition-duration: var(--amplify-time-medium); --amplify-components-accordion-item-icon-transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1); --amplify-components-ai-conversation-message-background-color: var(--amplify-colors-background-secondary); --amplify-components-ai-conversation-message-border-radius: var(--amplify-radii-large); --amplify-components-ai-conversation-message-gap: var(--amplify-space-small); --amplify-components-ai-conversation-message-padding-block: var(--amplify-space-small); --amplify-components-ai-conversation-message-padding-inline: var(--amplify-space-small); --amplify-components-ai-conversation-message-user-background-color: var(--amplify-colors-background-secondary); --amplify-components-ai-conversation-message-assistant-background-color: var(--amplify-colors-primary-10); --amplify-components-ai-conversation-message-sender-gap: var(--amplify-space-small); --amplify-components-ai-conversation-message-sender-username-color: var(--amplify-colors-font-primary); --amplify-components-ai-conversation-message-sender-username-font-size: inherit; --amplify-components-ai-conversation-message-sender-username-font-weight: var(--amplify-font-weights-bold); --amplify-components-ai-conversation-message-sender-timestamp-color: var(--amplify-colors-font-tertiary); --amplify-components-ai-conversation-message-sender-timestamp-font-size: inherit; --amplify-components-ai-conversation-message-sender-timestamp-font-weight: inherit; --amplify-components-ai-conversation-message-body-gap: var(--amplify-space-xs); --amplify-components-ai-conversation-form-gap: var(--amplify-space-small); --amplify-components-ai-conversation-form-padding: var(--amplify-space-small); --amplify-components-ai-conversation-attachment-border-color: var(--amplify-colors-border-secondary); --amplify-components-ai-conversation-attachment-border-width: var(--amplify-border-widths-small); --amplify-components-ai-conversation-attachment-border-radius: var(--amplify-radii-small); --amplify-components-ai-conversation-attachment-font-size: var(--amplify-font-sizes-small); --amplify-components-ai-conversation-attachment-padding-block: var(--amplify-space-xxxs); --amplify-components-ai-conversation-attachment-padding-inline: var(--amplify-space-xs); --amplify-components-ai-conversation-attachment-gap: var(--amplify-space-xs); --amplify-components-ai-conversation-attachment-list-padding-block-start: var(--amplify-space-xs); --amplify-components-ai-conversation-attachment-list-gap: var(--amplify-space-xxs); --amplify-components-ai-conversation-attachment-name-color: var(--amplify-colors-font-primary); --amplify-components-ai-conversation-attachment-name-font-size: var(--amplify-font-sizes-small); --amplify-components-ai-conversation-attachment-name-font-weight: var(--amplify-font-weights-normal); --amplify-components-ai-conversation-attachment-size-color: var(--amplify-colors-font-tertiary); --amplify-components-ai-conversation-attachment-size-font-size: var(--amplify-font-sizes-small); --amplify-components-ai-conversation-attachment-size-font-weight: var(--amplify-font-weights-normal); --amplify-components-ai-conversation-attachment-remove-padding: var(--amplify-space-xxs); --amplify-components-ai-conversation-attachment-image-width: var(--amplify-font-sizes-medium); --amplify-components-ai-conversation-attachment-image-height: var(--amplify-font-sizes-medium); --amplify-components-alert-align-items: center; --amplify-components-alert-justify-content: space-between; --amplify-components-alert-color: var(--amplify-colors-font-primary); --amplify-components-alert-background-color: var(--amplify-colors-background-tertiary); --amplify-components-alert-padding-block: var(--amplify-space-small); --amplify-components-alert-padding-inline: var(--amplify-space-medium); --amplify-components-alert-icon-size: var(--amplify-font-sizes-xl); --amplify-components-alert-heading-font-size: var(--amplify-font-sizes-medium); --amplify-components-alert-heading-font-weight: var(--amplify-font-weights-bold); --amplify-components-alert-info-color: var(--amplify-colors-font-info); --amplify-components-alert-info-background-color: var(--amplify-colors-background-info); --amplify-components-alert-error-color: var(--amplify-colors-font-error); --amplify-components-alert-error-background-color: var(--amplify-colors-background-error); --amplify-components-alert-warning-color: var(--amplify-colors-font-warning); --amplify-components-alert-warning-background-color: var(--amplify-colors-background-warning); --amplify-components-alert-success-color: var(--amplify-colors-font-success); --amplify-components-alert-success-background-color: var(--amplify-colors-background-success); --amplify-components-authenticator-max-width: 60rem; --amplify-components-authenticator-modal-width: var(--amplify-space-relative-full); --amplify-components-authenticator-modal-height: var(--amplify-space-relative-full); --amplify-components-authenticator-modal-background-color: var(--amplify-colors-overlay-50); --amplify-components-authenticator-modal-top: var(--amplify-space-zero); --amplify-components-authenticator-modal-left: var(--amplify-space-zero); --amplify-components-authenticator-container-width-max: 30rem; --amplify-components-authenticator-router-border-width: var(--amplify-border-widths-small); --amplify-components-authenticator-router-border-style: solid; --amplify-components-authenticator-router-border-color: var(--amplify-colors-border-primary); --amplify-components-authenticator-router-background-color: var(--amplify-colors-background-primary); --amplify-components-authenticator-router-box-shadow: var(--amplify-shadows-medium); --amplify-components-authenticator-footer-padding-bottom: var(--amplify-space-medium); --amplify-components-authenticator-form-padding: var(--amplify-space-xl); --amplify-components-authenticator-state-inactive-background-color: var(--amplify-colors-background-secondary); --amplify-components-authenticator-or-container-color: var(--amplify-colors-neutral-80); --amplify-components-authenticator-or-container-or-line-background-color: var(--amplify-colors-background-primary); --amplify-components-autocomplete-menu-width: 100%; --amplify-components-autocomplete-menu-margin-block-start: var(--amplify-space-xxxs); --amplify-components-autocomplete-menu-background-color: var(--amplify-colors-background-primary); --amplify-components-autocomplete-menu-border-color: var(--amplify-colors-border-primary); --amplify-components-autocomplete-menu-border-width: var(--amplify-border-widths-small); --amplify-components-autocomplete-menu-border-style: solid; --amplify-components-autocomplete-menu-border-radius: var(--amplify-radii-small); --amplify-components-autocomplete-menu-options-display: flex; --amplify-components-autocomplete-menu-options-flex-direction: column; --amplify-components-autocomplete-menu-options-max-height: 300px; --amplify-components-autocomplete-menu-option-background-color: var(--amplify-colors-background-primary); --amplify-components-autocomplete-menu-option-color: currentcolor; --amplify-components-autocomplete-menu-option-cursor: pointer; --amplify-components-autocomplete-menu-option-transition-duration: var(--amplify-time-short); --amplify-components-autocomplete-menu-option-transition-property: background-color, color; --amplify-components-autocomplete-menu-option-transition-timing-function: ease; --amplify-components-autocomplete-menu-option-active-background-color: var(--amplify-colors-primary-80); --amplify-components-autocomplete-menu-option-active-color: var(--amplify-colors-white); --amplify-components-autocomplete-menu-empty-display: flex; --amplify-components-autocomplete-menu-loading-align-items: center; --amplify-components-autocomplete-menu-loading-display: flex; --amplify-components-autocomplete-menu-loading-gap: var(--amplify-space-xxxs); --amplify-components-autocomplete-menu-space-shared-padding-block: var(--amplify-space-xs); --amplify-components-autocomplete-menu-space-shared-padding-inline: var(--amplify-space-small); --amplify-components-avatar-color: var(--amplify-colors-font-tertiary); --amplify-components-avatar-line-height: 1; --amplify-components-avatar-font-weight: var(--amplify-font-weights-semibold); --amplify-components-avatar-font-size: var(--amplify-font-sizes-small); --amplify-components-avatar-text-align: center; --amplify-components-avatar-width: var(--amplify-font-sizes-xxl); --amplify-components-avatar-height: var(--amplify-font-sizes-xxl); --amplify-components-avatar-background-color: var(--amplify-colors-background-tertiary); --amplify-components-avatar-border-radius: 100%; --amplify-components-avatar-border-color: var(--amplify-colors-border-primary); --amplify-components-avatar-border-width: var(--amplify-border-widths-medium); --amplify-components-avatar-info-color: var(--amplify-colors-font-info); --amplify-components-avatar-info-background-color: var(--amplify-colors-background-info); --amplify-components-avatar-info-border-color: var(--amplify-colors-border-info); --amplify-components-avatar-warning-color: var(--amplify-colors-font-warning); --amplify-components-avatar-warning-background-color: var(--amplify-colors-background-warning); --amplify-components-avatar-warning-border-color: var(--amplify-colors-border-warning); --amplify-components-avatar-success-color: var(--amplify-colors-font-success); --amplify-components-avatar-success-background-color: var(--amplify-colors-background-success); --amplify-components-avatar-success-border-color: var(--amplify-colors-border-success); --amplify-components-avatar-error-color: var(--amplify-colors-font-error); --amplify-components-avatar-error-background-color: var(--amplify-colors-background-error); --amplify-components-avatar-error-border-color: var(--amplify-colors-border-error); --amplify-components-avatar-small-font-size: var(--amplify-font-sizes-xs); --amplify-components-avatar-small-width: var(--amplify-font-sizes-xl); --amplify-components-avatar-small-height: var(--amplify-font-sizes-xl); --amplify-components-avatar-large-font-size: var(--amplify-font-sizes-medium); --amplify-components-avatar-large-width: var(--amplify-font-sizes-xxxl); --amplify-components-avatar-large-height: var(--amplify-font-sizes-xxxl); --amplify-components-badge-color: var(--amplify-colors-font-primary); --amplify-components-badge-line-height: 1; --amplify-components-badge-font-weight: var(--amplify-font-weights-semibold); --amplify-components-badge-font-size: var(--amplify-font-sizes-small); --amplify-components-badge-text-align: center; --amplify-components-badge-padding-vertical: var(--amplify-space-xs); --amplify-components-badge-padding-horizontal: var(--amplify-space-small); --amplify-components-badge-background-color: var(--amplify-colors-background-tertiary); --amplify-components-badge-border-radius: var(--amplify-radii-xl); --amplify-components-badge-info-color: var(--amplify-colors-font-info); --amplify-components-badge-info-background-color: var(--amplify-colors-background-info); --amplify-components-badge-warning-color: var(--amplify-colors-font-warning); --amplify-components-badge-warning-background-color: var(--amplify-colors-background-warning); --amplify-components-badge-success-color: var(--amplify-colors-font-success); --amplify-components-badge-success-background-color: var(--amplify-colors-background-success); --amplify-components-badge-error-color: var(--amplify-colors-font-error); --amplify-components-badge-error-background-color: var(--amplify-colors-background-error); --amplify-components-badge-small-font-size: var(--amplify-font-sizes-xs); --amplify-components-badge-small-padding-vertical: var(--amplify-space-xxs); --amplify-components-badge-small-padding-horizontal: var(--amplify-space-xs); --amplify-components-badge-large-font-size: var(--amplify-font-sizes-medium); --amplify-components-badge-large-padding-vertical: var(--amplify-space-small); --amplify-components-badge-large-padding-horizontal: var(--amplify-space-medium); --amplify-components-breadcrumbs-flex-direction: row; --amplify-components-breadcrumbs-flex-wrap: wrap; --amplify-components-breadcrumbs-gap: 0; --amplify-components-breadcrumbs-color: var(--amplify-colors-font-tertiary); --amplify-components-breadcrumbs-item-flex-direction: row; --amplify-components-breadcrumbs-item-color: inherit; --amplify-components-breadcrumbs-item-font-size: inherit; --amplify-components-breadcrumbs-item-align-items: center; --amplify-components-breadcrumbs-item-line-height: 1; --amplify-components-breadcrumbs-separator-color: inherit; --amplify-components-breadcrumbs-separator-font-size: inherit; --amplify-components-breadcrumbs-separator-padding-inline: var(--amplify-space-xxs); --amplify-components-breadcrumbs-link-color: var(--amplify-components-link-color); --amplify-components-breadcrumbs-link-font-size: inherit; --amplify-components-breadcrumbs-link-font-weight: normal; --amplify-components-breadcrumbs-link-text-decoration: none; --amplify-components-breadcrumbs-link-padding-inline: var(--amplify-space-xs); --amplify-components-breadcrumbs-link-padding-block: var(--amplify-space-xxs); --amplify-components-breadcrumbs-link-current-color: inherit; --amplify-components-breadcrumbs-link-current-font-size: inherit; --amplify-components-breadcrumbs-link-current-font-weight: normal; --amplify-components-breadcrumbs-link-current-text-decoration: none; --amplify-components-button-font-weight: var(--amplify-font-weights-bold); --amplify-components-button-transition-duration: var(--amplify-components-fieldcontrol-transition-duration); --amplify-components-button-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-button-line-height: var(--amplify-components-fieldcontrol-line-height); --amplify-components-button-padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start); --amplify-components-button-padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end); --amplify-components-button-padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start); --amplify-components-button-padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end); --amplify-components-button-background-color: transparent; --amplify-components-button-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-button-border-width: var(--amplify-components-fieldcontrol-border-width); --amplify-components-button-border-style: var(--amplify-components-fieldcontrol-border-style); --amplify-components-button-border-radius: var(--amplify-components-fieldcontrol-border-radius); --amplify-components-button-color: var(--amplify-colors-font-primary); --amplify-components-button-hover-color: var(--amplify-colors-font-focus); --amplify-components-button-hover-background-color: var(--amplify-colors-primary-10); --amplify-components-button-hover-border-color: var(--amplify-colors-primary-60); --amplify-components-button-focus-color: var(--amplify-colors-font-focus); --amplify-components-button-focus-background-color: var(--amplify-colors-primary-10); --amplify-components-button-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-button-active-color: var(--amplify-colors-font-active); --amplify-components-button-active-background-color: var(--amplify-colors-primary-20); --amplify-components-button-active-border-color: var(--amplify-colors-primary-100); --amplify-components-button-loading-color: var(--amplify-colors-font-disabled); --amplify-components-button-loading-background-color: transparent; --amplify-components-button-loading-border-color: var(--amplify-colors-border-tertiary); --amplify-components-button-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-disabled-background-color: transparent; --amplify-components-button-disabled-border-color: var(--amplify-colors-border-tertiary); --amplify-components-button-outlined-info-border-color: var(--amplify-colors-blue-60); --amplify-components-button-outlined-info-background-color: transparent; --amplify-components-button-outlined-info-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-info-hover-border-color: var(--amplify-colors-blue-60); --amplify-components-button-outlined-info-hover-background-color: var(--amplify-colors-blue-10); --amplify-components-button-outlined-info-hover-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-info-focus-border-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-info-focus-background-color: var(--amplify-colors-blue-10); --amplify-components-button-outlined-info-focus-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow); --amplify-components-button-outlined-info-active-border-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-info-active-background-color: var(--amplify-colors-blue-20); --amplify-components-button-outlined-info-active-color: var(--amplify-colors-blue-100); --amplify-components-button-outlined-warning-border-color: var(--amplify-colors-orange-60); --amplify-components-button-outlined-warning-background-color: transparent; --amplify-components-button-outlined-warning-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-warning-hover-border-color: var(--amplify-colors-orange-60); --amplify-components-button-outlined-warning-hover-background-color: var(--amplify-colors-orange-10); --amplify-components-button-outlined-warning-hover-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-warning-focus-border-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-warning-focus-background-color: var(--amplify-colors-orange-10); --amplify-components-button-outlined-warning-focus-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-warning-focus-box-shadow); --amplify-components-button-outlined-warning-active-border-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-warning-active-background-color: var(--amplify-colors-orange-20); --amplify-components-button-outlined-warning-active-color: var(--amplify-colors-orange-100); --amplify-components-button-outlined-success-border-color: var(--amplify-colors-green-60); --amplify-components-button-outlined-success-background-color: transparent; --amplify-components-button-outlined-success-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-success-hover-border-color: var(--amplify-colors-green-60); --amplify-components-button-outlined-success-hover-background-color: var(--amplify-colors-green-10); --amplify-components-button-outlined-success-hover-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-success-focus-border-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-success-focus-background-color: var(--amplify-colors-green-10); --amplify-components-button-outlined-success-focus-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow); --amplify-components-button-outlined-success-active-border-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-success-active-background-color: var(--amplify-colors-green-20); --amplify-components-button-outlined-success-active-color: var(--amplify-colors-green-100); --amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-80); --amplify-components-button-outlined-error-background-color: transparent; --amplify-components-button-outlined-error-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-80); --amplify-components-button-outlined-error-hover-background-color: var(--amplify-colors-red-10); --amplify-components-button-outlined-error-hover-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-error-focus-border-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-error-focus-background-color: var(--amplify-colors-red-10); --amplify-components-button-outlined-error-focus-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-button-outlined-error-active-border-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-error-active-background-color: var(--amplify-colors-red-20); --amplify-components-button-outlined-error-active-color: var(--amplify-colors-red-100); --amplify-components-button-outlined-overlay-border-color: var(--amplify-colors-overlay-60); --amplify-components-button-outlined-overlay-background-color: transparent; --amplify-components-button-outlined-overlay-color: var(--amplify-colors-font-primary); --amplify-components-button-outlined-overlay-hover-border-color: var(--amplify-colors-overlay-60); --amplify-components-button-outlined-overlay-hover-background-color: var(--amplify-colors-overlay-5); --amplify-components-button-outlined-overlay-hover-color: var(--amplify-colors-neutral-90); --amplify-components-button-outlined-overlay-focus-border-color: var(--amplify-colors-overlay-90); --amplify-components-button-outlined-overlay-focus-background-color: var(--amplify-colors-overlay-5); --amplify-components-button-outlined-overlay-focus-color: var(--amplify-colors-neutral-90); --amplify-components-button-outlined-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow); --amplify-components-button-outlined-overlay-active-border-color: var(--amplify-colors-overlay-90); --amplify-components-button-outlined-overlay-active-background-color: var(--amplify-colors-overlay-10); --amplify-components-button-outlined-overlay-active-color: var(--amplify-colors-neutral-100); --amplify-components-button-primary-border-color: transparent; --amplify-components-button-primary-border-width: var(--amplify-border-widths-small); --amplify-components-button-primary-border-style: solid; --amplify-components-button-primary-background-color: var(--amplify-colors-primary-80); --amplify-components-button-primary-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-disabled-border-color: transparent; --amplify-components-button-primary-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-button-primary-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-primary-loading-border-color: transparent; --amplify-components-button-primary-loading-background-color: var(--amplify-colors-background-disabled); --amplify-components-button-primary-loading-color: var(--amplify-colors-font-disabled); --amplify-components-button-primary-hover-border-color: transparent; --amplify-components-button-primary-hover-background-color: var(--amplify-colors-primary-90); --amplify-components-button-primary-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-focus-border-color: transparent; --amplify-components-button-primary-focus-background-color: var(--amplify-colors-primary-90); --amplify-components-button-primary-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-button-primary-active-border-color: transparent; --amplify-components-button-primary-active-background-color: var(--amplify-colors-primary-100); --amplify-components-button-primary-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-info-border-color: transparent; --amplify-components-button-primary-info-background-color: var(--amplify-colors-blue-80); --amplify-components-button-primary-info-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-info-hover-border-color: transparent; --amplify-components-button-primary-info-hover-background-color: var(--amplify-colors-blue-90); --amplify-components-button-primary-info-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-info-focus-border-color: transparent; --amplify-components-button-primary-info-focus-background-color: var(--amplify-colors-blue-90); --amplify-components-button-primary-info-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow); --amplify-components-button-primary-info-active-border-color: transparent; --amplify-components-button-primary-info-active-background-color: var(--amplify-colors-blue-100); --amplify-components-button-primary-info-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-warning-border-color: transparent; --amplify-components-button-primary-warning-background-color: var(--amplify-colors-orange-80); --amplify-components-button-primary-warning-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-warning-hover-border-color: transparent; --amplify-components-button-primary-warning-hover-background-color: var(--amplify-colors-orange-90); --amplify-components-button-primary-warning-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-warning-focus-border-color: transparent; --amplify-components-button-primary-warning-focus-background-color: var(--amplify-colors-orange-90); --amplify-components-button-primary-warning-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow); --amplify-components-button-primary-warning-active-border-color: transparent; --amplify-components-button-primary-warning-active-background-color: var(--amplify-colors-orange-100); --amplify-components-button-primary-warning-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-error-border-color: transparent; --amplify-components-button-primary-error-background-color: var(--amplify-colors-red-80); --amplify-components-button-primary-error-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-error-hover-border-color: transparent; --amplify-components-button-primary-error-hover-background-color: var(--amplify-colors-red-90); --amplify-components-button-primary-error-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-error-focus-border-color: transparent; --amplify-components-button-primary-error-focus-background-color: var(--amplify-colors-red-90); --amplify-components-button-primary-error-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-button-primary-error-active-border-color: transparent; --amplify-components-button-primary-error-active-background-color: var(--amplify-colors-red-100); --amplify-components-button-primary-error-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-success-border-color: transparent; --amplify-components-button-primary-success-background-color: var(--amplify-colors-green-80); --amplify-components-button-primary-success-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-success-hover-border-color: transparent; --amplify-components-button-primary-success-hover-background-color: var(--amplify-colors-green-90); --amplify-components-button-primary-success-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-success-focus-border-color: transparent; --amplify-components-button-primary-success-focus-background-color: var(--amplify-colors-green-90); --amplify-components-button-primary-success-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow); --amplify-components-button-primary-success-active-border-color: transparent; --amplify-components-button-primary-success-active-background-color: var(--amplify-colors-green-100); --amplify-components-button-primary-success-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-overlay-border-color: transparent; --amplify-components-button-primary-overlay-background-color: var(--amplify-colors-overlay-70); --amplify-components-button-primary-overlay-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-overlay-hover-border-color: transparent; --amplify-components-button-primary-overlay-hover-background-color: var(--amplify-colors-overlay-90); --amplify-components-button-primary-overlay-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-overlay-focus-border-color: transparent; --amplify-components-button-primary-overlay-focus-background-color: var(--amplify-colors-overlay-90); --amplify-components-button-primary-overlay-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-primary-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow); --amplify-components-button-primary-overlay-active-border-color: transparent; --amplify-components-button-primary-overlay-active-background-color: var(--amplify-colors-overlay-90); --amplify-components-button-primary-overlay-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-menu-border-width: var(--amplify-space-zero); --amplify-components-button-menu-background-color: transparent; --amplify-components-button-menu-justify-content: start; --amplify-components-button-menu-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-menu-hover-background-color: var(--amplify-colors-primary-80); --amplify-components-button-menu-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-menu-focus-background-color: var(--amplify-colors-primary-80); --amplify-components-button-menu-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-menu-active-background-color: var(--amplify-colors-primary-90); --amplify-components-button-menu-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-link-background-color: transparent; --amplify-components-button-link-border-color: transparent; --amplify-components-button-link-border-width: var(--amplify-border-widths-small); --amplify-components-button-link-color: var(--amplify-colors-font-interactive); --amplify-components-button-link-hover-border-color: transparent; --amplify-components-button-link-hover-background-color: var(--amplify-colors-primary-10); --amplify-components-button-link-hover-color: var(--amplify-colors-font-hover); --amplify-components-button-link-focus-border-color: transparent; --amplify-components-button-link-focus-background-color: var(--amplify-colors-primary-10); --amplify-components-button-link-focus-color: var(--amplify-colors-font-focus); --amplify-components-button-link-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-button-link-active-border-color: transparent; --amplify-components-button-link-active-background-color: var(--amplify-colors-primary-20); --amplify-components-button-link-active-color: var(--amplify-colors-font-active); --amplify-components-button-link-disabled-border-color: transparent; --amplify-components-button-link-disabled-background-color: transparent; --amplify-components-button-link-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-link-loading-border-color: transparent; --amplify-components-button-link-loading-background-color: transparent; --amplify-components-button-link-loading-color: var(--amplify-colors-font-disabled); --amplify-components-button-link-info-border-color: transparent; --amplify-components-button-link-info-background-color: transparent; --amplify-components-button-link-info-color: var(--amplify-colors-blue-100); --amplify-components-button-link-info-hover-border-color: transparent; --amplify-components-button-link-info-hover-background-color: var(--amplify-colors-blue-10); --amplify-components-button-link-info-hover-color: var(--amplify-colors-blue-90); --amplify-components-button-link-info-focus-border-color: transparent; --amplify-components-button-link-info-focus-background-color: var(--amplify-colors-blue-10); --amplify-components-button-link-info-focus-color: var(--amplify-colors-blue-100); --amplify-components-button-link-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow); --amplify-components-button-link-info-active-border-color: transparent; --amplify-components-button-link-info-active-background-color: var(--amplify-colors-blue-20); --amplify-components-button-link-info-active-color: var(--amplify-colors-blue-100); --amplify-components-button-link-warning-border-color: transparent; --amplify-components-button-link-warning-background-color: transparent; --amplify-components-button-link-warning-color: var(--amplify-colors-orange-100); --amplify-components-button-link-warning-hover-border-color: transparent; --amplify-components-button-link-warning-hover-background-color: var(--amplify-colors-orange-10); --amplify-components-button-link-warning-hover-color: var(--amplify-colors-orange-90); --amplify-components-button-link-warning-focus-border-color: transparent; --amplify-components-button-link-warning-focus-background-color: var(--amplify-colors-orange-10); --amplify-components-button-link-warning-focus-color: var(--amplify-colors-orange-100); --amplify-components-button-link-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-warning-focus-box-shadow); --amplify-components-button-link-warning-active-border-color: transparent; --amplify-components-button-link-warning-active-background-color: var(--amplify-colors-orange-20); --amplify-components-button-link-warning-active-color: var(--amplify-colors-orange-100); --amplify-components-button-link-success-border-color: transparent; --amplify-components-button-link-success-background-color: transparent; --amplify-components-button-link-success-color: var(--amplify-colors-green-100); --amplify-components-button-link-success-hover-border-color: transparent; --amplify-components-button-link-success-hover-background-color: var(--amplify-colors-green-10); --amplify-components-button-link-success-hover-color: var(--amplify-colors-green-90); --amplify-components-button-link-success-focus-border-color: transparent; --amplify-components-button-link-success-focus-background-color: var(--amplify-colors-green-10); --amplify-components-button-link-success-focus-color: var(--amplify-colors-green-100); --amplify-components-button-link-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow); --amplify-components-button-link-success-active-border-color: transparent; --amplify-components-button-link-success-active-background-color: var(--amplify-colors-green-20); --amplify-components-button-link-success-active-color: var(--amplify-colors-green-100); --amplify-components-button-link-error-border-color: transparent; --amplify-components-button-link-error-background-color: transparent; --amplify-components-button-link-error-color: var(--amplify-colors-red-100); --amplify-components-button-link-error-hover-border-color: transparent; --amplify-components-button-link-error-hover-background-color: var(--amplify-colors-red-10); --amplify-components-button-link-error-hover-color: var(--amplify-colors-red-90); --amplify-components-button-link-error-focus-border-color: transparent; --amplify-components-button-link-error-focus-background-color: var(--amplify-colors-red-10); --amplify-components-button-link-error-focus-color: var(--amplify-colors-red-100); --amplify-components-button-link-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-button-link-error-active-border-color: transparent; --amplify-components-button-link-error-active-background-color: var(--amplify-colors-red-20); --amplify-components-button-link-error-active-color: var(--amplify-colors-red-100); --amplify-components-button-link-overlay-border-color: transparent; --amplify-components-button-link-overlay-background-color: transparent; --amplify-components-button-link-overlay-color: var(--amplify-colors-neutral-100); --amplify-components-button-link-overlay-hover-border-color: transparent; --amplify-components-button-link-overlay-hover-background-color: var(--amplify-colors-overlay-5); --amplify-components-button-link-overlay-hover-color: var(--amplify-colors-overlay-80); --amplify-components-button-link-overlay-focus-border-color: transparent; --amplify-components-button-link-overlay-focus-background-color: var(--amplify-colors-overlay-5); --amplify-components-button-link-overlay-focus-color: var(--amplify-colors-overlay-90); --amplify-components-button-link-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow); --amplify-components-button-link-overlay-active-border-color: transparent; --amplify-components-button-link-overlay-active-background-color: var(--amplify-colors-overlay-10); --amplify-components-button-link-overlay-active-color: var(--amplify-colors-overlay-90); --amplify-components-button-warning-background-color: transparent; --amplify-components-button-warning-border-color: var(--amplify-colors-red-60); --amplify-components-button-warning-border-width: var(--amplify-border-widths-small); --amplify-components-button-warning-color: var(--amplify-colors-red-60); --amplify-components-button-warning-hover-border-color: var(--amplify-colors-red-80); --amplify-components-button-warning-hover-background-color: var(--amplify-colors-red-10); --amplify-components-button-warning-hover-color: var(--amplify-colors-font-error); --amplify-components-button-warning-focus-border-color: var(--amplify-colors-red-80); --amplify-components-button-warning-focus-background-color: var(--amplify-colors-red-10); --amplify-components-button-warning-focus-color: var(--amplify-colors-red-80); --amplify-components-button-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-button-warning-active-border-color: var(--amplify-colors-red-100); --amplify-components-button-warning-active-background-color: var(--amplify-colors-red-20); --amplify-components-button-warning-active-color: var(--amplify-colors-red-100); --amplify-components-button-warning-disabled-border-color: var(--amplify-colors-border-tertiary); --amplify-components-button-warning-disabled-background-color: transparent; --amplify-components-button-warning-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-warning-loading-border-color: var(--amplify-colors-border-tertiary); --amplify-components-button-warning-loading-background-color: transparent; --amplify-components-button-warning-loading-color: var(--amplify-colors-font-disabled); --amplify-components-button-destructive-border-color: transparent; --amplify-components-button-destructive-border-width: var(--amplify-border-widths-small); --amplify-components-button-destructive-border-style: solid; --amplify-components-button-destructive-background-color: var(--amplify-colors-red-60); --amplify-components-button-destructive-color: var(--amplify-colors-font-inverse); --amplify-components-button-destructive-disabled-border-color: transparent; --amplify-components-button-destructive-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-button-destructive-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-button-destructive-loading-border-color: transparent; --amplify-components-button-destructive-loading-background-color: var(--amplify-colors-background-disabled); --amplify-components-button-destructive-loading-color: var(--amplify-colors-font-disabled); --amplify-components-button-destructive-hover-border-color: transparent; --amplify-components-button-destructive-hover-background-color: var(--amplify-colors-red-80); --amplify-components-button-destructive-hover-color: var(--amplify-colors-font-inverse); --amplify-components-button-destructive-focus-border-color: transparent; --amplify-components-button-destructive-focus-background-color: var(--amplify-colors-red-80); --amplify-components-button-destructive-focus-color: var(--amplify-colors-font-inverse); --amplify-components-button-destructive-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-button-destructive-active-border-color: transparent; --amplify-components-button-destructive-active-background-color: var(--amplify-colors-red-100); --amplify-components-button-destructive-active-color: var(--amplify-colors-font-inverse); --amplify-components-button-small-font-size: var(--amplify-components-fieldcontrol-small-font-size); --amplify-components-button-small-padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start); --amplify-components-button-small-padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end); --amplify-components-button-small-padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start); --amplify-components-button-small-padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end); --amplify-components-button-large-font-size: var(--amplify-components-fieldcontrol-large-font-size); --amplify-components-button-large-padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start); --amplify-components-button-large-padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end); --amplify-components-button-large-padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start); --amplify-components-button-large-padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end); --amplify-components-button-loader-wrapper-align-items: center; --amplify-components-button-loader-wrapper-gap: var(--amplify-space-xs); --amplify-components-card-background-color: var(--amplify-colors-background-primary); --amplify-components-card-border-radius: var(--amplify-radii-xs); --amplify-components-card-border-width: 0; --amplify-components-card-border-style: solid; --amplify-components-card-border-color: transparent; --amplify-components-card-box-shadow: none; --amplify-components-card-padding: var(--amplify-space-medium); --amplify-components-card-outlined-background-color: var(--amplify-components-card-background-color); --amplify-components-card-outlined-border-radius: var(--amplify-radii-xs); --amplify-components-card-outlined-border-width: var(--amplify-border-widths-small); --amplify-components-card-outlined-border-style: solid; --amplify-components-card-outlined-border-color: var(--amplify-colors-border-primary); --amplify-components-card-outlined-box-shadow: var(--amplify-components-card-box-shadow); --amplify-components-card-elevated-background-color: var(--amplify-components-card-background-color); --amplify-components-card-elevated-border-radius: var(--amplify-radii-xs); --amplify-components-card-elevated-border-width: 0; --amplify-components-card-elevated-border-style: solid; --amplify-components-card-elevated-border-color: transparent; --amplify-components-card-elevated-box-shadow: var(--amplify-shadows-medium); --amplify-components-checkbox-cursor: pointer; --amplify-components-checkbox-align-items: center; --amplify-components-checkbox-disabled-cursor: not-allowed; --amplify-components-checkbox-button-position: relative; --amplify-components-checkbox-button-align-items: center; --amplify-components-checkbox-button-justify-content: center; --amplify-components-checkbox-button-color: var(--amplify-colors-font-inverse); --amplify-components-checkbox-button-before-width: 100%; --amplify-components-checkbox-button-before-height: 100%; --amplify-components-checkbox-button-before-border-width: var(--amplify-border-widths-medium); --amplify-components-checkbox-button-before-border-radius: 20%; --amplify-components-checkbox-button-before-border-style: solid; --amplify-components-checkbox-button-before-border-color: var(--amplify-colors-border-primary); --amplify-components-checkbox-button-focus-outline-color: var(--amplify-colors-transparent); --amplify-components-checkbox-button-focus-outline-style: solid; --amplify-components-checkbox-button-focus-outline-width: var(--amplify-outline-widths-medium); --amplify-components-checkbox-button-focus-outline-offset: var(--amplify-outline-offsets-medium); --amplify-components-checkbox-button-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-checkbox-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-checkbox-button-disabled-border-color: var(--amplify-colors-border-disabled); --amplify-components-checkbox-button-error-border-color: var(--amplify-colors-border-error); --amplify-components-checkbox-button-error-focus-border-color: var(--amplify-colors-border-error); --amplify-components-checkbox-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-checkbox-icon-background-color: var(--amplify-colors-primary-80); --amplify-components-checkbox-icon-border-radius: 20%; --amplify-components-checkbox-icon-opacity: var(--amplify-opacities-0); --amplify-components-checkbox-icon-transform: scale(0); --amplify-components-checkbox-icon-transition-property: all; --amplify-components-checkbox-icon-transition-duration: var(--amplify-time-short); --amplify-components-checkbox-icon-transition-timing-function: ease-in-out; --amplify-components-checkbox-icon-checked-opacity: var(--amplify-opacities-100); --amplify-components-checkbox-icon-checked-transform: scale(1); --amplify-components-checkbox-icon-checked-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-checkbox-icon-indeterminate-opacity: var(--amplify-opacities-100); --amplify-components-checkbox-icon-indeterminate-transform: scale(1); --amplify-components-checkbox-icon-indeterminate-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-checkbox-label-color: var(--amplify-components-text-color); --amplify-components-checkbox-label-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-checkboxfield-align-items: flex-start; --amplify-components-checkboxfield-align-content: center; --amplify-components-checkboxfield-flex-direction: column; --amplify-components-checkboxfield-justify-content: center; --amplify-components-collection-pagination-current-color: var(--amplify-components-pagination-current-color); --amplify-components-collection-pagination-current-background-color: var(--amplify-components-pagination-current-background-color); --amplify-components-collection-pagination-button-color: var(--amplify-components-pagination-button-color); --amplify-components-collection-pagination-button-hover-background-color: var(--amplify-components-pagination-button-hover-background-color); --amplify-components-collection-pagination-button-hover-color: var(--amplify-components-pagination-button-hover-color); --amplify-components-collection-pagination-button-disabled-color: var(--amplify-components-pagination-button-disabled-color); --amplify-components-collection-search-input-color: var(--amplify-components-searchfield-color); --amplify-components-collection-search-button-color: var(--amplify-components-searchfield-button-color); --amplify-components-collection-search-button-active-background-color: var(--amplify-components-searchfield-button-active-background-color); --amplify-components-collection-search-button-active-border-color: var(--amplify-components-searchfield-button-active-border-color); --amplify-components-collection-search-button-active-color: var(--amplify-components-searchfield-button-active-color); --amplify-components-collection-search-button-disabled-background-color: var(--amplify-components-searchfield-button-disabled-background-color); --amplify-components-collection-search-button-disabled-border-color: var(--amplify-components-searchfield-button-disabled-border-color); --amplify-components-collection-search-button-disabled-color: var(--amplify-components-searchfield-button-disabled-color); --amplify-components-collection-search-button-focus-background-color: var(--amplify-components-searchfield-button-focus-background-color); --amplify-components-collection-search-button-focus-border-color: var(--amplify-components-searchfield-button-focus-border-color); --amplify-components-collection-search-button-focus-color: var(--amplify-components-searchfield-button-focus-color); --amplify-components-collection-search-button-hover-background-color: var(--amplify-components-searchfield-button-hover-background-color); --amplify-components-collection-search-button-hover-border-color: var(--amplify-components-searchfield-button-hover-border-color); --amplify-components-collection-search-button-hover-color: var(--amplify-components-searchfield-button-hover-color); --amplify-components-copy-font-size: var(--amplify-font-sizes-xs); --amplify-components-copy-gap: var(--amplify-space-relative-medium); --amplify-components-copy-svg-path-fill: var(--amplify-colors-font-primary); --amplify-components-copy-tool-tip-bottom: var(--amplify-space-large); --amplify-components-copy-tool-tip-color: var(--amplify-colors-teal-100); --amplify-components-copy-tool-tip-font-size: var(--amplify-font-sizes-xxs); --amplify-components-countrycodeselect-height: var(--amplify-space-relative-full); --amplify-components-divider-border-style: solid; --amplify-components-divider-border-color: var(--amplify-colors-border-primary); --amplify-components-divider-border-width: var(--amplify-border-widths-medium); --amplify-components-divider-label-color: var(--amplify-colors-font-tertiary); --amplify-components-divider-label-padding-inline: var(--amplify-space-medium); --amplify-components-divider-label-font-size: var(--amplify-font-sizes-small); --amplify-components-divider-label-background-color: var(--amplify-colors-background-primary); --amplify-components-divider-small-border-width: var(--amplify-border-widths-small); --amplify-components-divider-large-border-width: var(--amplify-border-widths-large); --amplify-components-divider-opacity: var(--amplify-opacities-60); --amplify-components-dropzone-background-color: var(--amplify-colors-background-primary); --amplify-components-dropzone-border-radius: var(--amplify-radii-small); --amplify-components-dropzone-border-color: var(--amplify-colors-border-primary); --amplify-components-dropzone-border-style: dashed; --amplify-components-dropzone-border-width: var(--amplify-border-widths-small); --amplify-components-dropzone-color: var(--amplify-colors-font-primary); --amplify-components-dropzone-gap: var(--amplify-space-small); --amplify-components-dropzone-padding-block: var(--amplify-space-xl); --amplify-components-dropzone-padding-inline: var(--amplify-space-large); --amplify-components-dropzone-text-align: center; --amplify-components-dropzone-active-background-color: var(--amplify-colors-primary-10); --amplify-components-dropzone-active-border-radius: var(--amplify-components-dropzone-border-radius); --amplify-components-dropzone-active-border-color: var(--amplify-colors-border-pressed); --amplify-components-dropzone-active-border-style: var(--amplify-components-dropzone-border-style); --amplify-components-dropzone-active-border-width: var(--amplify-components-dropzone-border-width); --amplify-components-dropzone-active-color: var(--amplify-colors-font-primary); --amplify-components-dropzone-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-dropzone-disabled-border-radius: var(--amplify-components-dropzone-border-radius); --amplify-components-dropzone-disabled-border-color: var(--amplify-colors-border-disabled); --amplify-components-dropzone-disabled-border-style: var(--amplify-components-dropzone-border-style); --amplify-components-dropzone-disabled-border-width: var(--amplify-components-dropzone-border-width); --amplify-components-dropzone-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-dropzone-accepted-background-color: var(--amplify-colors-background-success); --amplify-components-dropzone-accepted-border-radius: var(--amplify-components-dropzone-border-radius); --amplify-components-dropzone-accepted-border-color: var(--amplify-colors-border-success); --amplify-components-dropzone-accepted-border-style: var(--amplify-components-dropzone-border-style); --amplify-components-dropzone-accepted-border-width: var(--amplify-components-dropzone-border-width); --amplify-components-dropzone-accepted-color: var(--amplify-colors-font-success); --amplify-components-dropzone-rejected-background-color: var(--amplify-colors-background-error); --amplify-components-dropzone-rejected-border-radius: var(--amplify-components-dropzone-border-radius); --amplify-components-dropzone-rejected-border-color: var(--amplify-colors-border-pressed); --amplify-components-dropzone-rejected-border-style: var(--amplify-components-dropzone-border-style); --amplify-components-dropzone-rejected-border-width: var(--amplify-components-dropzone-border-width); --amplify-components-dropzone-rejected-color: var(--amplify-colors-font-error); --amplify-components-field-gap: var(--amplify-space-xs); --amplify-components-field-font-size: var(--amplify-font-sizes-medium); --amplify-components-field-flex-direction: column; --amplify-components-field-small-gap: var(--amplify-space-xxxs); --amplify-components-field-small-font-size: var(--amplify-font-sizes-small); --amplify-components-field-large-gap: var(--amplify-space-small); --amplify-components-field-large-font-size: var(--amplify-font-sizes-large); --amplify-components-field-label-color: var(--amplify-colors-font-secondary); --amplify-components-fieldcontrol-border-style: solid; --amplify-components-fieldcontrol-border-color: var(--amplify-colors-border-primary); --amplify-components-fieldcontrol-border-width: var(--amplify-border-widths-small); --amplify-components-fieldcontrol-border-radius: var(--amplify-radii-small); --amplify-components-fieldcontrol-color: var(--amplify-colors-font-primary); --amplify-components-fieldcontrol-padding-block-start: var(--amplify-space-xs); --amplify-components-fieldcontrol-padding-block-end: var(--amplify-space-xs); --amplify-components-fieldcontrol-padding-inline-start: var(--amplify-space-medium); --amplify-components-fieldcontrol-padding-inline-end: var(--amplify-space-medium); --amplify-components-fieldcontrol-font-size: var(--amplify-components-field-font-size); --amplify-components-fieldcontrol-line-height: var(--amplify-line-heights-medium); --amplify-components-fieldcontrol-transition-duration: var(--amplify-time-medium); --amplify-components-fieldcontrol-outline-color: var(--amplify-colors-transparent); --amplify-components-fieldcontrol-outline-style: solid; --amplify-components-fieldcontrol-outline-width: var(--amplify-outline-widths-medium); --amplify-components-fieldcontrol-outline-offset: var(--amplify-outline-offsets-medium); --amplify-components-fieldcontrol-small-font-size: var(--amplify-components-field-small-font-size); --amplify-components-fieldcontrol-small-padding-block-start: var(--amplify-space-xxs); --amplify-components-fieldcontrol-small-padding-block-end: var(--amplify-space-xxs); --amplify-components-fieldcontrol-small-padding-inline-start: var(--amplify-space-small); --amplify-components-fieldcontrol-small-padding-inline-end: var(--amplify-space-small); --amplify-components-fieldcontrol-large-font-size: var(--amplify-components-field-large-font-size); --amplify-components-fieldcontrol-large-padding-block-start: var(--amplify-space-xs); --amplify-components-fieldcontrol-large-padding-block-end: var(--amplify-space-xs); --amplify-components-fieldcontrol-large-padding-inline-start: var(--amplify-space-medium); --amplify-components-fieldcontrol-large-padding-inline-end: var(--amplify-space-medium); --amplify-components-fieldcontrol-quiet-border-style: none; --amplify-components-fieldcontrol-quiet-border-inline-start: none; --amplify-components-fieldcontrol-quiet-border-inline-end: none; --amplify-components-fieldcontrol-quiet-border-block-start: none; --amplify-components-fieldcontrol-quiet-border-radius: 0; --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: transparent; --amplify-components-fieldcontrol-quiet-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-fieldcontrol-quiet-error-border-block-end-color: var(--amplify-colors-border-error); --amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color: transparent; --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-fieldcontrol-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus); --amplify-components-fieldcontrol-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-fieldcontrol-disabled-cursor: not-allowed; --amplify-components-fieldcontrol-disabled-border-color: var(--amplify-colors-transparent); --amplify-components-fieldcontrol-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-fieldcontrol-error-border-color: var(--amplify-colors-border-error); --amplify-components-fieldcontrol-error-color: var(--amplify-colors-font-error); --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-error); --amplify-components-fieldcontrol-info-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-blue-100); --amplify-components-fieldcontrol-warning-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-orange-100); --amplify-components-fieldcontrol-success-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-green-100); --amplify-components-fieldcontrol-overlay-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-overlay-90); --amplify-components-fieldgroup-gap: var(--amplify-space-zero); --amplify-components-fieldgroup-vertical-align-items: center; --amplify-components-fieldgroup-outer-align-items: center; --amplify-components-fieldmessages-error-color: var(--amplify-colors-font-error); --amplify-components-fieldmessages-error-font-size: var(--amplify-font-sizes-small); --amplify-components-fieldmessages-description-color: var(--amplify-colors-font-secondary); --amplify-components-fieldmessages-description-font-style: italic; --amplify-components-fieldmessages-description-font-size: var(--amplify-font-sizes-small); --amplify-components-fieldset-background-color: transparent; --amplify-components-fieldset-border-radius: var(--amplify-radii-xs); --amplify-components-fieldset-flex-direction: column; --amplify-components-fieldset-gap: var(--amplify-components-field-gap); --amplify-components-fieldset-legend-color: var(--amplify-colors-font-primary); --amplify-components-fieldset-legend-font-size: var(--amplify-components-field-font-size); --amplify-components-fieldset-legend-font-weight: var(--amplify-font-weights-bold); --amplify-components-fieldset-legend-line-height: var(--amplify-line-heights-medium); --amplify-components-fieldset-legend-small-font-size: var(--amplify-components-field-small-font-size); --amplify-components-fieldset-legend-large-font-size: var(--amplify-components-field-large-font-size); --amplify-components-fieldset-outlined-padding: var(--amplify-space-medium); --amplify-components-fieldset-outlined-border-color: var(--amplify-colors-neutral-40); --amplify-components-fieldset-outlined-border-width: var(--amplify-border-widths-small); --amplify-components-fieldset-outlined-border-style: solid; --amplify-components-fieldset-outlined-small-padding: var(--amplify-space-small); --amplify-components-fieldset-outlined-large-padding: var(--amplify-space-large); --amplify-components-fieldset-small-gap: var(--amplify-components-field-small-gap); --amplify-components-fieldset-large-gap: var(--amplify-components-field-large-gap); --amplify-components-fileuploader-dropzone-background-color: var(--amplify-colors-background-primary); --amplify-components-fileuploader-dropzone-border-radius: var(--amplify-radii-small); --amplify-components-fileuploader-dropzone-border-color: var(--amplify-colors-border-primary); --amplify-components-fileuploader-dropzone-border-style: dashed; --amplify-components-fileuploader-dropzone-border-width: var(--amplify-border-widths-small); --amplify-components-fileuploader-dropzone-gap: var(--amplify-space-small); --amplify-components-fileuploader-dropzone-padding-block: var(--amplify-space-xl); --amplify-components-fileuploader-dropzone-padding-inline: var(--amplify-space-large); --amplify-components-fileuploader-dropzone-text-align: center; --amplify-components-fileuploader-dropzone-active-background-color: var(--amplify-colors-primary-10); --amplify-components-fileuploader-dropzone-active-border-radius: var(--amplify-components-fileuploader-dropzone-border-radius); --amplify-components-fileuploader-dropzone-active-border-color: var(--amplify-colors-border-pressed); --amplify-components-fileuploader-dropzone-active-border-style: var(--amplify-components-fileuploader-dropzone-border-style); --amplify-components-fileuploader-dropzone-active-border-width: var(--amplify-border-widths-medium); --amplify-components-fileuploader-dropzone-icon-color: var(--amplify-colors-border-primary); --amplify-components-fileuploader-dropzone-icon-font-size: var(--amplify-font-sizes-xxl); --amplify-components-fileuploader-dropzone-text-color: var(--amplify-colors-font-tertiary); --amplify-components-fileuploader-dropzone-text-font-size: var(--amplify-font-sizes-medium); --amplify-components-fileuploader-dropzone-text-font-weight: var(--amplify-font-weights-bold); --amplify-components-fileuploader-file-background-color: var(--amplify-colors-background-primary); --amplify-components-fileuploader-file-border-radius: var(--amplify-radii-small); --amplify-components-fileuploader-file-border-color: var(--amplify-colors-border-primary); --amplify-components-fileuploader-file-border-style: solid; --amplify-components-fileuploader-file-border-width: var(--amplify-border-widths-small); --amplify-components-fileuploader-file-padding-block: var(--amplify-space-xs); --amplify-components-fileuploader-file-padding-inline: var(--amplify-space-small); --amplify-components-fileuploader-file-gap: var(--amplify-space-small); --amplify-components-fileuploader-file-align-items: baseline; --amplify-components-fileuploader-file-name-font-size: var(--amplify-font-sizes-medium); --amplify-components-fileuploader-file-name-font-weight: var(--amplify-font-weights-bold); --amplify-components-fileuploader-file-name-color: var(--amplify-colors-font-primary); --amplify-components-fileuploader-file-size-font-size: var(--amplify-font-sizes-small); --amplify-components-fileuploader-file-size-font-weight: var(--amplify-font-weights-normal); --amplify-components-fileuploader-file-size-color: var(--amplify-colors-font-tertiary); --amplify-components-fileuploader-file-image-width: var(--amplify-space-xxl); --amplify-components-fileuploader-file-image-height: var(--amplify-space-xxl); --amplify-components-fileuploader-file-image-background-color: var(--amplify-colors-background-secondary); --amplify-components-fileuploader-file-image-color: var(--amplify-colors-font-tertiary); --amplify-components-fileuploader-file-image-border-radius: var(--amplify-radii-small); --amplify-components-fileuploader-filelist-flex-direction: column; --amplify-components-fileuploader-filelist-gap: var(--amplify-space-small); --amplify-components-fileuploader-loader-stroke-linecap: round; --amplify-components-fileuploader-loader-stroke-empty: var(--amplify-colors-border-secondary); --amplify-components-fileuploader-loader-stroke-filled: var(--amplify-components-loader-stroke-filled); --amplify-components-fileuploader-loader-stroke-width: var(--amplify-border-widths-large); --amplify-components-fileuploader-previewer-background-color: var(--amplify-colors-background-primary); --amplify-components-fileuploader-previewer-border-color: var(--amplify-colors-border-primary); --amplify-components-fileuploader-previewer-border-style: solid; --amplify-components-fileuploader-previewer-border-width: var(--amplify-border-widths-small); --amplify-components-fileuploader-previewer-border-radius: var(--amplify-radii-small); --amplify-components-fileuploader-previewer-padding-block: var(--amplify-space-zero); --amplify-components-fileuploader-previewer-padding-inline: var(--amplify-space-zero); --amplify-components-fileuploader-previewer-max-height: 40rem; --amplify-components-fileuploader-previewer-max-width: auto; --amplify-components-fileuploader-previewer-text-font-size: var(--amplify-font-sizes-medium); --amplify-components-fileuploader-previewer-text-font-weight: var(--amplify-font-weights-bold); --amplify-components-fileuploader-previewer-text-color: var(--amplify-colors-font-primary); --amplify-components-fileuploader-previewer-body-padding-block: var(--amplify-space-medium); --amplify-components-fileuploader-previewer-body-padding-inline: var(--amplify-space-medium); --amplify-components-fileuploader-previewer-body-gap: var(--amplify-space-small); --amplify-components-fileuploader-previewer-footer-justify-content: flex-end; --amplify-components-flex-gap: var(--amplify-space-medium); --amplify-components-flex-justify-content: normal; --amplify-components-flex-align-items: stretch; --amplify-components-flex-align-content: normal; --amplify-components-flex-flex-wrap: nowrap; --amplify-components-heading-1-font-size: var(--amplify-font-sizes-xxxxl); --amplify-components-heading-1-font-weight: var(--amplify-font-weights-light); --amplify-components-heading-2-font-size: var(--amplify-font-sizes-xxxl); --amplify-components-heading-2-font-weight: var(--amplify-font-weights-normal); --amplify-components-heading-3-font-size: var(--amplify-font-sizes-xxl); --amplify-components-heading-3-font-weight: var(--amplify-font-weights-medium); --amplify-components-heading-4-font-size: var(--amplify-font-sizes-xl); --amplify-components-heading-4-font-weight: var(--amplify-font-weights-semibold); --amplify-components-heading-5-font-size: var(--amplify-font-sizes-large); --amplify-components-heading-5-font-weight: var(--amplify-font-weights-bold); --amplify-components-heading-6-font-size: var(--amplify-font-sizes-medium); --amplify-components-heading-6-font-weight: var(--amplify-font-weights-extrabold); --amplify-components-heading-color: var(--amplify-colors-font-primary); --amplify-components-heading-line-height: var(--amplify-line-heights-small); --amplify-components-icon-line-height: 1; --amplify-components-icon-height: 1em; --amplify-components-highlightmatch-highlighted-font-weight: var(--amplify-font-weights-bold); --amplify-components-image-max-width: 100%; --amplify-components-image-height: auto; --amplify-components-image-object-fit: initial; --amplify-components-image-object-position: initial; --amplify-components-inappmessaging-banner-height: 150px ; --amplify-components-inappmessaging-banner-width: 400px ; --amplify-components-inappmessaging-button-background-color: #e8e8e8; --amplify-components-inappmessaging-button-border-radius: 5px; --amplify-components-inappmessaging-button-color: black; --amplify-components-inappmessaging-dialog-height: 50vh; --amplify-components-inappmessaging-dialog-min-height: 400px; --amplify-components-inappmessaging-dialog-min-width: 400px; --amplify-components-inappmessaging-dialog-width: 30vw; --amplify-components-inappmessaging-header-font-size: var(--amplify-font-sizes-medium); --amplify-components-inappmessaging-header-font-weight: var(--amplify-font-weights-extrabold); --amplify-components-input-color: var(--amplify-components-fieldcontrol-color); --amplify-components-input-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-input-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-input-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color); --amplify-components-link-active-color: var(--amplify-colors-font-active); --amplify-components-link-color: var(--amplify-colors-font-interactive); --amplify-components-link-focus-color: var(--amplify-colors-font-focus); --amplify-components-link-hover-color: var(--amplify-colors-font-hover); --amplify-components-link-visited-color: var(--amplify-colors-font-interactive); --amplify-components-liveness-camera-module-background-color: var(--amplify-colors-background-primary); --amplify-components-loader-width: var(--amplify-font-sizes-medium); --amplify-components-loader-height: var(--amplify-font-sizes-medium); --amplify-components-loader-font-size: var(--amplify-font-sizes-xs); --amplify-components-loader-stroke-empty: var(--amplify-colors-neutral-20); --amplify-components-loader-stroke-filled: var(--amplify-colors-primary-80); --amplify-components-loader-stroke-linecap: round; --amplify-components-loader-animation-duration: 1s; --amplify-components-loader-small-width: var(--amplify-font-sizes-small); --amplify-components-loader-small-height: var(--amplify-font-sizes-small); --amplify-components-loader-small-font-size: var(--amplify-font-sizes-xxs); --amplify-components-loader-large-width: var(--amplify-font-sizes-large); --amplify-components-loader-large-height: var(--amplify-font-sizes-large); --amplify-components-loader-large-font-size: var(--amplify-font-sizes-small); --amplify-components-loader-linear-width: 100%; --amplify-components-loader-linear-min-width: 5rem; --amplify-components-loader-linear-font-size: var(--amplify-font-sizes-xxs); --amplify-components-loader-linear-stroke-width: var(--amplify-font-sizes-xxs); --amplify-components-loader-linear-stroke-filled: var(--amplify-colors-primary-80); --amplify-components-loader-linear-stroke-empty: var(--amplify-colors-neutral-20); --amplify-components-loader-linear-stroke-linecap: round; --amplify-components-loader-linear-animation-duration: 1s; --amplify-components-loader-linear-small-stroke-width: var(--amplify-font-sizes-xxxs); --amplify-components-loader-linear-small-font-size: var(--amplify-font-sizes-xxxs); --amplify-components-loader-linear-large-stroke-width: var(--amplify-font-sizes-xs); --amplify-components-loader-linear-large-font-size: var(--amplify-font-sizes-xs); --amplify-components-loader-text-fill: var(--amplify-colors-font-primary); --amplify-components-menu-background-color: var(--amplify-colors-background-primary); --amplify-components-menu-border-radius: var(--amplify-radii-medium); --amplify-components-menu-border-width: var(--amplify-border-widths-small); --amplify-components-menu-border-style: solid; --amplify-components-menu-border-color: var(--amplify-colors-border-primary); --amplify-components-menu-box-shadow: var(--amplify-shadows-large); --amplify-components-menu-flex-direction: column; --amplify-components-menu-gap: var(--amplify-space-zero); --amplify-components-menu-max-width: 30rem; --amplify-components-menu-min-width: 14rem; --amplify-components-menu-small-width: var(--amplify-font-sizes-medium); --amplify-components-menu-small-height: var(--amplify-font-sizes-medium); --amplify-components-menu-large-width: var(--amplify-font-sizes-xxxl); --amplify-components-menu-large-height: var(--amplify-font-sizes-xxxl); --amplify-components-menu-item-min-height: 2.5rem; --amplify-components-menu-item-padding-inline-start: var(--amplify-space-medium); --amplify-components-menu-item-padding-inline-end: var(--amplify-space-medium); --amplify-components-message-align-items: center; --amplify-components-message-background-color: var(--amplify-colors-background-tertiary); --amplify-components-message-border-color: transparent; --amplify-components-message-border-style: solid; --amplify-components-message-border-width: var(--amplify-border-widths-small); --amplify-components-message-border-radius: var(--amplify-radii-xs); --amplify-components-message-color: var(--amplify-colors-font-primary); --amplify-components-message-justify-content: flex-start; --amplify-components-message-padding-block: var(--amplify-space-small); --amplify-components-message-padding-inline: var(--amplify-space-medium); --amplify-components-message-line-height: var(--amplify-line-heights-small); --amplify-components-message-icon-size: var(--amplify-font-sizes-xl); --amplify-components-message-heading-font-size: var(--amplify-font-sizes-medium); --amplify-components-message-heading-font-weight: var(--amplify-font-weights-bold); --amplify-components-message-dismiss-gap: var(--amplify-space-xxs); --amplify-components-message-plain-color: var(--amplify-colors-font-primary); --amplify-components-message-plain-background-color: var(--amplify-colors-background-primary); --amplify-components-message-plain-border-color: transparent; --amplify-components-message-plain-info-color: var(--amplify-colors-font-info); --amplify-components-message-plain-info-background-color: var(--amplify-colors-background-primary); --amplify-components-message-plain-info-border-color: transparent; --amplify-components-message-plain-error-color: var(--amplify-colors-font-error); --amplify-components-message-plain-error-background-color: var(--amplify-colors-background-primary); --amplify-components-message-plain-error-border-color: transparent; --amplify-components-message-plain-success-color: var(--amplify-colors-font-success); --amplify-components-message-plain-success-background-color: var(--amplify-colors-background-primary); --amplify-components-message-plain-success-border-color: transparent; --amplify-components-message-plain-warning-color: var(--amplify-colors-font-warning); --amplify-components-message-plain-warning-background-color: var(--amplify-colors-background-primary); --amplify-components-message-plain-warning-border-color: transparent; --amplify-components-message-outlined-color: var(--amplify-colors-font-primary); --amplify-components-message-outlined-background-color: var(--amplify-colors-background-primary); --amplify-components-message-outlined-border-color: var(--amplify-colors-border-primary); --amplify-components-message-outlined-info-color: var(--amplify-colors-font-info); --amplify-components-message-outlined-info-background-color: var(--amplify-colors-background-primary); --amplify-components-message-outlined-info-border-color: var(--amplify-colors-border-info); --amplify-components-message-outlined-error-color: var(--amplify-colors-font-error); --amplify-components-message-outlined-error-background-color: var(--amplify-colors-background-primary); --amplify-components-message-outlined-error-border-color: var(--amplify-colors-border-error); --amplify-components-message-outlined-success-color: var(--amplify-colors-font-success); --amplify-components-message-outlined-success-background-color: var(--amplify-colors-background-primary); --amplify-components-message-outlined-success-border-color: var(--amplify-colors-border-success); --amplify-components-message-outlined-warning-color: var(--amplify-colors-font-warning); --amplify-components-message-outlined-warning-background-color: var(--amplify-colors-background-primary); --amplify-components-message-outlined-warning-border-color: var(--amplify-colors-border-warning); --amplify-components-message-filled-color: var(--amplify-colors-font-primary); --amplify-components-message-filled-background-color: var(--amplify-colors-background-secondary); --amplify-components-message-filled-border-color: transparent; --amplify-components-message-filled-info-color: var(--amplify-colors-font-info); --amplify-components-message-filled-info-background-color: var(--amplify-colors-background-info); --amplify-components-message-filled-info-border-color: transparent; --amplify-components-message-filled-error-color: var(--amplify-colors-font-error); --amplify-components-message-filled-error-background-color: var(--amplify-colors-background-error); --amplify-components-message-filled-error-border-color: transparent; --amplify-components-message-filled-success-color: var(--amplify-colors-font-success); --amplify-components-message-filled-success-background-color: var(--amplify-colors-background-success); --amplify-components-message-filled-success-border-color: transparent; --amplify-components-message-filled-warning-color: var(--amplify-colors-font-warning); --amplify-components-message-filled-warning-background-color: var(--amplify-colors-background-warning); --amplify-components-message-filled-warning-border-color: transparent; --amplify-components-pagination-current-align-items: center; --amplify-components-pagination-current-justify-content: center; --amplify-components-pagination-current-color: var(--amplify-colors-font-inverse); --amplify-components-pagination-current-font-size: var(--amplify-font-sizes-small); --amplify-components-pagination-current-background-color: var(--amplify-colors-overlay-40); --amplify-components-pagination-button-color: var(--amplify-colors-font-primary); --amplify-components-pagination-button-padding-inline-start: var(--amplify-space-xxs); --amplify-components-pagination-button-padding-inline-end: var(--amplify-space-xxs); --amplify-components-pagination-button-transition-property: background-color; --amplify-components-pagination-button-transition-duration: var(--amplify-time-medium); --amplify-components-pagination-button-hover-background-color: var(--amplify-colors-overlay-10); --amplify-components-pagination-button-hover-color: var(--amplify-colors-font-primary); --amplify-components-pagination-button-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-pagination-ellipsis-align-items: baseline; --amplify-components-pagination-ellipsis-justify-content: center; --amplify-components-pagination-ellipsis-padding-inline-start: var(--amplify-space-xs); --amplify-components-pagination-ellipsis-padding-inline-end: var(--amplify-space-xs); --amplify-components-pagination-item-container-margin-left: var(--amplify-space-xxxs); --amplify-components-pagination-item-container-margin-right: var(--amplify-space-xxxs); --amplify-components-pagination-item-shared-height: var(--amplify-font-sizes-xxl); --amplify-components-pagination-item-shared-min-width: var(--amplify-font-sizes-xxl); --amplify-components-pagination-item-shared-border-radius: var(--amplify-font-sizes-medium); --amplify-components-passwordfield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-passwordfield-button-color: var(--amplify-components-button-color); --amplify-components-passwordfield-button-active-background-color: var(--amplify-components-button-active-background-color); --amplify-components-passwordfield-button-active-border-color: var(--amplify-components-button-active-border-color); --amplify-components-passwordfield-button-active-color: var(--amplify-components-button-active-color); --amplify-components-passwordfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color); --amplify-components-passwordfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color); --amplify-components-passwordfield-button-disabled-color: var(--amplify-components-button-disabled-color); --amplify-components-passwordfield-button-error-color: var(--amplify-components-button-outlined-error-color); --amplify-components-passwordfield-button-error-background-color: var(--amplify-components-button-outlined-error-background-color); --amplify-components-passwordfield-button-error-border-color: var(--amplify-components-button-outlined-error-border-color); --amplify-components-passwordfield-button-error-active-border-color: var(--amplify-components-button-outlined-error-active-border-color); --amplify-components-passwordfield-button-error-active-background-color: var(--amplify-components-button-outlined-error-active-background-color); --amplify-components-passwordfield-button-error-active-color: var(--amplify-components-button-outlined-error-active-color); --amplify-components-passwordfield-button-error-focus-border-color: var(--amplify-components-button-outlined-error-focus-border-color); --amplify-components-passwordfield-button-error-focus-background-color: var(--amplify-components-button-outlined-error-focus-background-color); --amplify-components-passwordfield-button-error-focus-color: var(--amplify-components-button-outlined-error-focus-color); --amplify-components-passwordfield-button-error-focus-box-shadow: var(--amplify-components-button-outlined-error-focus-box-shadow); --amplify-components-passwordfield-button-error-hover-border-color: var(--amplify-components-button-outlined-error-hover-border-color); --amplify-components-passwordfield-button-error-hover-background-color: var(--amplify-components-button-outlined-error-hover-background-color); --amplify-components-passwordfield-button-error-hover-color: var(--amplify-components-button-outlined-error-hover-color); --amplify-components-passwordfield-button-focus-background-color: var(--amplify-components-button-focus-background-color); --amplify-components-passwordfield-button-focus-border-color: var(--amplify-components-button-focus-border-color); --amplify-components-passwordfield-button-focus-color: var(--amplify-components-button-focus-color); --amplify-components-passwordfield-button-hover-background-color: var(--amplify-components-button-hover-background-color); --amplify-components-passwordfield-button-hover-border-color: var(--amplify-components-button-hover-border-color); --amplify-components-passwordfield-button-hover-color: var(--amplify-components-button-hover-color); --amplify-components-phonenumberfield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-phonenumberfield-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-phonenumberfield-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-phonenumberfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color); --amplify-components-placeholder-border-radius: var(--amplify-radii-small); --amplify-components-placeholder-transition-duration: var(--amplify-time-long); --amplify-components-placeholder-start-color: var(--amplify-colors-background-secondary); --amplify-components-placeholder-end-color: var(--amplify-colors-background-tertiary); --amplify-components-placeholder-small-height: var(--amplify-space-small); --amplify-components-placeholder-default-height: var(--amplify-space-medium); --amplify-components-placeholder-large-height: var(--amplify-space-large); --amplify-components-radio-align-items: center; --amplify-components-radio-justify-content: flex-start; --amplify-components-radio-gap: inherit; --amplify-components-radio-disabled-cursor: not-allowed; --amplify-components-radio-button-align-items: center; --amplify-components-radio-button-justify-content: center; --amplify-components-radio-button-width: var(--amplify-font-sizes-medium); --amplify-components-radio-button-height: var(--amplify-font-sizes-medium); --amplify-components-radio-button-box-sizing: border-box; --amplify-components-radio-button-border-width: var(--amplify-border-widths-medium); --amplify-components-radio-button-border-style: solid; --amplify-components-radio-button-border-radius: 50%; --amplify-components-radio-button-border-color: var(--amplify-colors-border-primary); --amplify-components-radio-button-color: var(--amplify-colors-background-primary); --amplify-components-radio-button-background-color: var(--amplify-colors-background-primary); --amplify-components-radio-button-transition-property: all; --amplify-components-radio-button-transition-duration: var(--amplify-time-medium); --amplify-components-radio-button-outline-color: var(--amplify-colors-transparent); --amplify-components-radio-button-outline-style: solid; --amplify-components-radio-button-outline-width: var(--amplify-outline-widths-medium); --amplify-components-radio-button-outline-offset: var(--amplify-outline-offsets-medium); --amplify-components-radio-button-padding: var(--amplify-border-widths-medium); --amplify-components-radio-button-small-width: var(--amplify-font-sizes-small); --amplify-components-radio-button-small-height: var(--amplify-font-sizes-small); --amplify-components-radio-button-large-width: var(--amplify-font-sizes-large); --amplify-components-radio-button-large-height: var(--amplify-font-sizes-large); --amplify-components-radio-button-checked-color: var(--amplify-colors-primary-80); --amplify-components-radio-button-checked-disabled-color: var(--amplify-colors-background-disabled); --amplify-components-radio-button-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-radio-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-radio-button-error-border-color: var(--amplify-colors-border-error); --amplify-components-radio-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow); --amplify-components-radio-button-disabled-border-color: var(--amplify-colors-border-disabled); --amplify-components-radio-button-disabled-background-color: var(--amplify-colors-background-primary); --amplify-components-radio-label-color: var(--amplify-components-text-color); --amplify-components-radio-label-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-radiogroup-radio-border-width: var(--amplify-components-radio-button-border-width); --amplify-components-radiogroup-radio-border-color: var(--amplify-components-radio-button-border-color); --amplify-components-radiogroup-radio-background-color: var(--amplify-components-radio-button-background-color); --amplify-components-radiogroup-radio-checked-color: var(--amplify-components-radio-button-checked-color); --amplify-components-radiogroup-radio-label-color: var(--amplify-components-radio-label-color); --amplify-components-radiogroup-legend-color: var(--amplify-components-fieldset-legend-color); --amplify-components-radiogroup-legend-font-weight: var(--amplify-font-weights-normal); --amplify-components-rating-large-size: var(--amplify-font-sizes-xxxl); --amplify-components-rating-default-size: var(--amplify-font-sizes-xl); --amplify-components-rating-small-size: var(--amplify-font-sizes-small); --amplify-components-rating-filled-color: var(--amplify-colors-secondary-80); --amplify-components-rating-empty-color: var(--amplify-colors-background-tertiary); --amplify-components-searchfield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-searchfield-button-color: var(--amplify-components-button-color); --amplify-components-searchfield-button-background-color: var(--amplify-colors-background-primary); --amplify-components-searchfield-button-active-background-color: var(--amplify-components-button-active-background-color); --amplify-components-searchfield-button-active-border-color: var(--amplify-components-button-active-border-color); --amplify-components-searchfield-button-active-color: var(--amplify-components-button-active-color); --amplify-components-searchfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color); --amplify-components-searchfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color); --amplify-components-searchfield-button-disabled-color: var(--amplify-components-button-disabled-color); --amplify-components-searchfield-button-focus-background-color: var(--amplify-components-button-focus-background-color); --amplify-components-searchfield-button-focus-border-color: var(--amplify-components-button-focus-border-color); --amplify-components-searchfield-button-focus-color: var(--amplify-components-button-focus-color); --amplify-components-searchfield-button-hover-background-color: var(--amplify-components-button-hover-background-color); --amplify-components-searchfield-button-hover-border-color: var(--amplify-components-button-hover-border-color); --amplify-components-searchfield-button-hover-color: var(--amplify-components-button-hover-color); --amplify-components-select-color: var(--amplify-components-fieldcontrol-color); --amplify-components-select-background-color: var(--amplify-colors-background-primary); --amplify-components-select-padding-inline-end: var(--amplify-space-xxl); --amplify-components-select-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-select-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-select-wrapper-flex: 1; --amplify-components-select-wrapper-display: block; --amplify-components-select-wrapper-position: relative; --amplify-components-select-wrapper-cursor: pointer; --amplify-components-select-icon-wrapper-align-items: center; --amplify-components-select-icon-wrapper-position: absolute; --amplify-components-select-icon-wrapper-top: 50%; --amplify-components-select-icon-wrapper-right: var(--amplify-space-medium); --amplify-components-select-icon-wrapper-transform: translateY(-50%); --amplify-components-select-icon-wrapper-pointer-events: none; --amplify-components-select-icon-wrapper-small-right: var(--amplify-space-xs); --amplify-components-select-icon-wrapper-large-right: var(--amplify-space-medium); --amplify-components-select-option-background-color: transparent; --amplify-components-select-option-color: var(--amplify-colors-font-primary); --amplify-components-select-option-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-select-option-disabled-background-color: transparent; --amplify-components-select-white-space: nowrap; --amplify-components-select-min-width: 6.5rem; --amplify-components-select-small-min-width: 5.5rem; --amplify-components-select-small-padding-inline-end: var(--amplify-space-xl); --amplify-components-select-large-min-width: 7.5rem; --amplify-components-select-large-padding-inline-end: var(--amplify-space-xxl); --amplify-components-select-expanded-padding-block: var(--amplify-space-xs); --amplify-components-select-expanded-padding-inline: var(--amplify-space-small); --amplify-components-select-expanded-option-padding-block: var(--amplify-space-xs); --amplify-components-select-expanded-option-padding-inline: var(--amplify-space-small); --amplify-components-selectfield-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-selectfield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-selectfield-flex-direction: column; --amplify-components-selectfield-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-selectfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color); --amplify-components-selectfield-label-color: var(--amplify-components-field-label-color); --amplify-components-sliderfield-padding-block: var(--amplify-space-xs); --amplify-components-sliderfield-track-background-color: var(--amplify-colors-background-quaternary); --amplify-components-sliderfield-track-border-radius: 9999px; --amplify-components-sliderfield-track-height: 0.375rem; --amplify-components-sliderfield-track-min-width: 10rem; --amplify-components-sliderfield-range-background-color: var(--amplify-colors-primary-80); --amplify-components-sliderfield-range-border-radius: 9999px; --amplify-components-sliderfield-range-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-sliderfield-thumb-width: 1.25rem; --amplify-components-sliderfield-thumb-height: 1.25rem; --amplify-components-sliderfield-thumb-background-color: var(--amplify-colors-background-primary); --amplify-components-sliderfield-thumb-box-shadow: var(--amplify-shadows-small); --amplify-components-sliderfield-thumb-border-radius: 50%; --amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-medium); --amplify-components-sliderfield-thumb-border-color: var(--amplify-colors-border-primary); --amplify-components-sliderfield-thumb-border-style: solid; --amplify-components-sliderfield-thumb-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-sliderfield-thumb-disabled-border-color: transparent; --amplify-components-sliderfield-thumb-disabled-box-shadow: none; --amplify-components-sliderfield-thumb-hover-background-color: var(--amplify-colors-background-primary); --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus); --amplify-components-sliderfield-thumb-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-sliderfield-thumb-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-sliderfield-small-track-height: 0.25rem; --amplify-components-sliderfield-small-thumb-width: 1rem; --amplify-components-sliderfield-small-thumb-height: 1rem; --amplify-components-sliderfield-large-track-height: 0.625rem; --amplify-components-sliderfield-large-thumb-width: 1.5rem; --amplify-components-sliderfield-large-thumb-height: 1.5rem; --amplify-components-stepperfield-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-stepperfield-flex-direction: column; --amplify-components-stepperfield-input-color: var(--amplify-components-fieldcontrol-color); --amplify-components-stepperfield-input-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-stepperfield-input-text-align: center; --amplify-components-stepperfield-button-color: var(--amplify-components-button-color); --amplify-components-stepperfield-button-background-color: var(--amplify-colors-transparent); --amplify-components-stepperfield-button-active-color: var(--amplify-components-button-active-color); --amplify-components-stepperfield-button-active-background-color: var(--amplify-components-button-active-background-color); --amplify-components-stepperfield-button-focus-color: var(--amplify-components-button-focus-color); --amplify-components-stepperfield-button-focus-background-color: var(--amplify-components-button-focus-background-color); --amplify-components-stepperfield-button-disabled-color: var(--amplify-components-button-disabled-color); --amplify-components-stepperfield-button-disabled-background-color: var(--amplify-components-fieldcontrol-disabled-background-color); --amplify-components-stepperfield-button-hover-color: var(--amplify-components-button-hover-color); --amplify-components-stepperfield-button-hover-background-color: var(--amplify-components-button-hover-background-color); --amplify-components-storagemanager-dropzone-background-color: var(--amplify-colors-background-primary); --amplify-components-storagemanager-dropzone-border-radius: var(--amplify-radii-small); --amplify-components-storagemanager-dropzone-border-color: var(--amplify-colors-border-primary); --amplify-components-storagemanager-dropzone-border-style: dashed; --amplify-components-storagemanager-dropzone-border-width: var(--amplify-border-widths-small); --amplify-components-storagemanager-dropzone-gap: var(--amplify-space-small); --amplify-components-storagemanager-dropzone-padding-block: var(--amplify-space-xl); --amplify-components-storagemanager-dropzone-padding-inline: var(--amplify-space-large); --amplify-components-storagemanager-dropzone-text-align: center; --amplify-components-storagemanager-dropzone-active-background-color: var(--amplify-colors-primary-10); --amplify-components-storagemanager-dropzone-active-border-radius: var(--amplify-components-storagemanager-dropzone-border-radius); --amplify-components-storagemanager-dropzone-active-border-color: var(--amplify-colors-border-pressed); --amplify-components-storagemanager-dropzone-active-border-style: var(--amplify-components-storagemanager-dropzone-border-style); --amplify-components-storagemanager-dropzone-active-border-width: var(--amplify-border-widths-medium); --amplify-components-storagemanager-dropzone-icon-color: var(--amplify-colors-border-primary); --amplify-components-storagemanager-dropzone-icon-font-size: var(--amplify-font-sizes-xxl); --amplify-components-storagemanager-dropzone-text-color: var(--amplify-colors-font-tertiary); --amplify-components-storagemanager-dropzone-text-font-size: var(--amplify-font-sizes-medium); --amplify-components-storagemanager-dropzone-text-font-weight: var(--amplify-font-weights-bold); --amplify-components-storagemanager-file-background-color: var(--amplify-colors-background-primary); --amplify-components-storagemanager-file-border-radius: var(--amplify-radii-small); --amplify-components-storagemanager-file-border-color: var(--amplify-colors-border-primary); --amplify-components-storagemanager-file-border-style: solid; --amplify-components-storagemanager-file-border-width: var(--amplify-border-widths-small); --amplify-components-storagemanager-file-padding-block: var(--amplify-space-xs); --amplify-components-storagemanager-file-padding-inline: var(--amplify-space-small); --amplify-components-storagemanager-file-gap: var(--amplify-space-small); --amplify-components-storagemanager-file-align-items: baseline; --amplify-components-storagemanager-file-name-font-size: var(--amplify-font-sizes-medium); --amplify-components-storagemanager-file-name-font-weight: var(--amplify-font-weights-bold); --amplify-components-storagemanager-file-name-color: var(--amplify-colors-font-primary); --amplify-components-storagemanager-file-size-font-size: var(--amplify-font-sizes-small); --amplify-components-storagemanager-file-size-font-weight: var(--amplify-font-weights-normal); --amplify-components-storagemanager-file-size-color: var(--amplify-colors-font-tertiary); --amplify-components-storagemanager-file-image-width: var(--amplify-space-xxl); --amplify-components-storagemanager-file-image-height: var(--amplify-space-xxl); --amplify-components-storagemanager-file-image-background-color: var(--amplify-colors-background-secondary); --amplify-components-storagemanager-file-image-color: var(--amplify-colors-font-tertiary); --amplify-components-storagemanager-file-image-border-radius: var(--amplify-radii-small); --amplify-components-storagemanager-filelist-flex-direction: column; --amplify-components-storagemanager-filelist-gap: var(--amplify-space-small); --amplify-components-storagemanager-loader-stroke-linecap: round; --amplify-components-storagemanager-loader-stroke-empty: var(--amplify-colors-border-secondary); --amplify-components-storagemanager-loader-stroke-filled: var(--amplify-components-loader-stroke-filled); --amplify-components-storagemanager-loader-stroke-width: var(--amplify-border-widths-large); --amplify-components-storagemanager-previewer-background-color: var(--amplify-colors-background-primary); --amplify-components-storagemanager-previewer-border-color: var(--amplify-colors-border-primary); --amplify-components-storagemanager-previewer-border-style: solid; --amplify-components-storagemanager-previewer-border-width: var(--amplify-border-widths-small); --amplify-components-storagemanager-previewer-border-radius: var(--amplify-radii-small); --amplify-components-storagemanager-previewer-padding-block: var(--amplify-space-zero); --amplify-components-storagemanager-previewer-padding-inline: var(--amplify-space-zero); --amplify-components-storagemanager-previewer-max-height: 40rem; --amplify-components-storagemanager-previewer-max-width: auto; --amplify-components-storagemanager-previewer-text-font-size: var(--amplify-font-sizes-medium); --amplify-components-storagemanager-previewer-text-font-weight: var(--amplify-font-weights-bold); --amplify-components-storagemanager-previewer-text-color: var(--amplify-colors-font-primary); --amplify-components-storagemanager-previewer-body-padding-block: var(--amplify-space-medium); --amplify-components-storagemanager-previewer-body-padding-inline: var(--amplify-space-medium); --amplify-components-storagemanager-previewer-body-gap: var(--amplify-space-small); --amplify-components-storagemanager-previewer-footer-justify-content: flex-end; --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60); --amplify-components-switchfield-focused-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-switchfield-font-size: var(--amplify-font-sizes-medium); --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large); --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small); --amplify-components-switchfield-label-padding: var(--amplify-space-xs); --amplify-components-switchfield-thumb-background-color: var(--amplify-colors-background-primary); --amplify-components-switchfield-thumb-border-color: transparent; --amplify-components-switchfield-thumb-border-width: var(--amplify-border-widths-small); --amplify-components-switchfield-thumb-border-style: solid; --amplify-components-switchfield-thumb-border-radius: var(--amplify-radii-xxxl); --amplify-components-switchfield-thumb-checked-transform: var(--amplify-transforms-slide-x-medium); --amplify-components-switchfield-thumb-transition-duration: var(--amplify-time-medium); --amplify-components-switchfield-thumb-width: var(--amplify-space-relative-medium); --amplify-components-switchfield-track-background-color: var(--amplify-colors-background-quaternary); --amplify-components-switchfield-track-border-radius: var(--amplify-radii-xxxl); --amplify-components-switchfield-track-checked-background-color: var(--amplify-colors-primary-80); --amplify-components-switchfield-track-height: var(--amplify-space-relative-medium); --amplify-components-switchfield-track-padding: var(--amplify-outline-widths-medium); --amplify-components-switchfield-track-transition-duration: var(--amplify-time-short); --amplify-components-switchfield-track-width: var(--amplify-space-relative-xl); --amplify-components-switchfield-track-error-background-color: var(--amplify-colors-background-error); --amplify-components-table-border-collapse: collapse; --amplify-components-table-display: table; --amplify-components-table-width: 100%; --amplify-components-table-head-display: table-header-group; --amplify-components-table-head-vertical-align: middle; --amplify-components-table-body-display: table-row-group; --amplify-components-table-body-vertical-align: middle; --amplify-components-table-foot-display: table-footer-group; --amplify-components-table-foot-vertical-align: middle; --amplify-components-table-row-display: table-row; --amplify-components-table-row-vertical-align: middle; --amplify-components-table-row-hover-background-color: var(--amplify-colors-background-tertiary); --amplify-components-table-row-striped-background-color: var(--amplify-colors-background-secondary); --amplify-components-table-header-border-color: var(--amplify-colors-border-tertiary); --amplify-components-table-header-border-style: solid; --amplify-components-table-header-border-width: var(--amplify-border-widths-small); --amplify-components-table-header-color: var(--amplify-colors-font-primary); --amplify-components-table-header-display: table-cell; --amplify-components-table-header-font-size: var(--amplify-font-sizes-medium); --amplify-components-table-header-font-weight: var(--amplify-font-weights-bold); --amplify-components-table-header-padding: var(--amplify-space-medium); --amplify-components-table-header-vertical-align: middle; --amplify-components-table-header-large-font-size: var(--amplify-font-sizes-large); --amplify-components-table-header-large-padding: var(--amplify-space-large); --amplify-components-table-header-small-font-size: var(--amplify-font-sizes-small); --amplify-components-table-header-small-padding: var(--amplify-space-xs); --amplify-components-table-data-border-color: var(--amplify-colors-border-tertiary); --amplify-components-table-data-border-style: solid; --amplify-components-table-data-border-width: var(--amplify-border-widths-small); --amplify-components-table-data-color: var(--amplify-colors-font-primary); --amplify-components-table-data-display: table-cell; --amplify-components-table-data-font-size: var(--amplify-font-sizes-medium); --amplify-components-table-data-font-weight: var(--amplify-font-weights-normal); --amplify-components-table-data-padding: var(--amplify-space-medium); --amplify-components-table-data-vertical-align: middle; --amplify-components-table-data-large-font-size: var(--amplify-font-sizes-large); --amplify-components-table-data-large-padding: var(--amplify-space-large); --amplify-components-table-data-small-font-size: var(--amplify-font-sizes-small); --amplify-components-table-data-small-padding: var(--amplify-space-xs); --amplify-components-table-caption-caption-side: bottom; --amplify-components-table-caption-color: var(--amplify-colors-font-primary); --amplify-components-table-caption-display: table-caption; --amplify-components-table-caption-font-size: var(--amplify-font-sizes-medium); --amplify-components-table-caption-text-align: center; --amplify-components-table-caption-word-break: break-all; --amplify-components-table-caption-large-font-size: var(--amplify-font-sizes-large); --amplify-components-table-caption-small-font-size: var(--amplify-font-sizes-small); --amplify-components-tabs-background-color: transparent; --amplify-components-tabs-border-color: var(--amplify-colors-border-secondary); --amplify-components-tabs-border-style: solid; --amplify-components-tabs-border-width: var(--amplify-border-widths-medium); --amplify-components-tabs-gap: 0; --amplify-components-tabs-item-background-color: transparent; --amplify-components-tabs-item-border-color: var(--amplify-colors-border-secondary); --amplify-components-tabs-item-border-style: solid; --amplify-components-tabs-item-border-width: var(--amplify-border-widths-medium); --amplify-components-tabs-item-color: var(--amplify-colors-font-secondary); --amplify-components-tabs-item-font-size: var(--amplify-font-sizes-medium); --amplify-components-tabs-item-font-weight: var(--amplify-font-weights-bold); --amplify-components-tabs-item-padding-vertical: var(--amplify-space-small); --amplify-components-tabs-item-padding-horizontal: var(--amplify-space-medium); --amplify-components-tabs-item-text-align: center; --amplify-components-tabs-item-transition-duration: var(--amplify-time-medium); --amplify-components-tabs-item-hover-background-color: transparent; --amplify-components-tabs-item-hover-border-color: var(--amplify-colors-border-focus); --amplify-components-tabs-item-hover-box-shadow: none; --amplify-components-tabs-item-hover-color: var(--amplify-colors-font-hover); --amplify-components-tabs-item-focus-background-color: transparent; --amplify-components-tabs-item-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-tabs-item-focus-box-shadow: 0px 0px 0px var(--amplify-border-widths-medium) var(--amplify-colors-border-focus); --amplify-components-tabs-item-focus-color: var(--amplify-colors-font-focus); --amplify-components-tabs-item-active-background-color: transparent; --amplify-components-tabs-item-active-border-color: var(--amplify-colors-font-interactive); --amplify-components-tabs-item-active-box-shadow: none; --amplify-components-tabs-item-active-color: var(--amplify-colors-font-interactive); --amplify-components-tabs-item-disabled-background-color: transparent; --amplify-components-tabs-item-disabled-border-color: var(--amplify-colors-border-tertiary); --amplify-components-tabs-item-disabled-box-shadow: none; --amplify-components-tabs-item-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-tabs-panel-background-color: transparent; --amplify-components-tabs-panel-padding-inline: 0; --amplify-components-tabs-panel-padding-block: var(--amplify-space-small); --amplify-components-text-color: var(--amplify-colors-font-primary); --amplify-components-text-primary-color: var(--amplify-colors-font-primary); --amplify-components-text-secondary-color: var(--amplify-colors-font-secondary); --amplify-components-text-tertiary-color: var(--amplify-colors-font-tertiary); --amplify-components-text-error-color: var(--amplify-colors-font-error); --amplify-components-text-warning-color: var(--amplify-colors-font-warning); --amplify-components-text-success-color: var(--amplify-colors-font-success); --amplify-components-text-info-color: var(--amplify-colors-font-info); --amplify-components-textareafield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-textareafield-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-textareafield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color); --amplify-components-textfield-color: var(--amplify-components-fieldcontrol-color); --amplify-components-textfield-border-color: var(--amplify-components-fieldcontrol-border-color); --amplify-components-textfield-font-size: var(--amplify-components-fieldcontrol-font-size); --amplify-components-textfield-focus-border-color: var(--amplify-components-fieldcontrol-focus-border-color); --amplify-components-togglebutton-border-color: var(--amplify-colors-border-primary); --amplify-components-togglebutton-color: var(--amplify-colors-font-primary); --amplify-components-togglebutton-hover-background-color: var(--amplify-colors-overlay-10); --amplify-components-togglebutton-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-togglebutton-focus-color: var(--amplify-colors-font-primary); --amplify-components-togglebutton-active-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-disabled-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-disabled); --amplify-components-togglebutton-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-togglebutton-pressed-border-color: var(--amplify-colors-border-pressed); --amplify-components-togglebutton-pressed-color: var(--amplify-colors-font-primary); --amplify-components-togglebutton-pressed-background-color: var(--amplify-colors-overlay-20); --amplify-components-togglebutton-pressed-hover-background-color: var(--amplify-colors-overlay-30); --amplify-components-togglebutton-primary-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-primary-border-width: var(--amplify-border-widths-small); --amplify-components-togglebutton-primary-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-togglebutton-primary-focus-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow); --amplify-components-togglebutton-primary-focus-color: var(--amplify-colors-font-primary); --amplify-components-togglebutton-primary-hover-background-color: var(--amplify-colors-overlay-10); --amplify-components-togglebutton-primary-hover-color: var(--amplify-colors-font-primary); --amplify-components-togglebutton-primary-disabled-border-color: var(--amplify-colors-border-disabled); --amplify-components-togglebutton-primary-disabled-background-color: var(--amplify-colors-background-disabled); --amplify-components-togglebutton-primary-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-togglebutton-primary-pressed-background-color: var(--amplify-colors-primary-80); --amplify-components-togglebutton-primary-pressed-border-color: var(--amplify-colors-primary-80); --amplify-components-togglebutton-primary-pressed-color: var(--amplify-colors-background-primary); --amplify-components-togglebutton-primary-pressed-focus-background-color: var(--amplify-colors-border-focus); --amplify-components-togglebutton-primary-pressed-focus-border-color: var(--amplify-colors-border-focus); --amplify-components-togglebutton-primary-pressed-focus-color: var(--amplify-colors-background-primary); --amplify-components-togglebutton-primary-pressed-hover-border-color: var(--amplify-colors-primary-60); --amplify-components-togglebutton-primary-pressed-hover-background-color: var(--amplify-colors-primary-60); --amplify-components-togglebutton-primary-pressed-hover-box-shadow: var(--amplify-colors-primary-60); --amplify-components-togglebutton-primary-pressed-hover-color: var(--amplify-colors-background-primary); --amplify-components-togglebutton-link-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-color: var(--amplify-colors-overlay-50); --amplify-components-togglebutton-link-hover-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-hover-color: var(--amplify-colors-overlay-50); --amplify-components-togglebutton-link-focus-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-focus-color: var(--amplify-colors-overlay-50); --amplify-components-togglebutton-link-disabled-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-disabled-color: var(--amplify-colors-font-disabled); --amplify-components-togglebutton-link-pressed-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-pressed-color: var(--amplify-colors-overlay-90); --amplify-components-togglebutton-link-pressed-focus-background-color: var(--amplify-colors-transparent); --amplify-components-togglebutton-link-pressed-focus-color: var(--amplify-colors-overlay-90); --amplify-components-togglebutton-link-pressed-hover-color: var(--amplify-colors-overlay-90); --amplify-components-togglebutton-link-pressed-hover-background-color: var(--amplify-colors-transparent); --amplify-components-togglebuttongroup-align-items: center; --amplify-components-togglebuttongroup-align-content: center; --amplify-components-togglebuttongroup-justify-content: flex-start; --amplify-border-widths-small: 1px; --amplify-border-widths-medium: 2px; --amplify-border-widths-large: 3px; --amplify-colors-red-10: hsl(0, 75%, 95%); --amplify-colors-red-20: hsl(0, 75%, 85%); --amplify-colors-red-40: hsl(0, 75%, 75%); --amplify-colors-red-60: hsl(0, 50%, 50%); --amplify-colors-red-80: hsl(0, 95%, 30%); --amplify-colors-red-90: hsl(0, 100%, 20%); --amplify-colors-red-100: hsl(0, 100%, 15%); --amplify-colors-orange-10: hsl(30, 75%, 95%); --amplify-colors-orange-20: hsl(30, 75%, 85%); --amplify-colors-orange-40: hsl(30, 75%, 75%); --amplify-colors-orange-60: hsl(30, 50%, 50%); --amplify-colors-orange-80: hsl(30, 95%, 30%); --amplify-colors-orange-90: hsl(30, 100%, 20%); --amplify-colors-orange-100: hsl(30, 100%, 15%); --amplify-colors-yellow-10: hsl(60, 75%, 95%); --amplify-colors-yellow-20: hsl(60, 75%, 85%); --amplify-colors-yellow-40: hsl(60, 75%, 75%); --amplify-colors-yellow-60: hsl(60, 50%, 50%); --amplify-colors-yellow-80: hsl(60, 95%, 30%); --amplify-colors-yellow-90: hsl(60, 100%, 20%); --amplify-colors-yellow-100: hsl(60, 100%, 15%); --amplify-colors-green-10: hsl(130, 60%, 95%); --amplify-colors-green-20: hsl(130, 60%, 90%); --amplify-colors-green-40: hsl(130, 44%, 63%); --amplify-colors-green-60: hsl(130, 43%, 46%); --amplify-colors-green-80: hsl(130, 33%, 37%); --amplify-colors-green-90: hsl(130, 27%, 29%); --amplify-colors-green-100: hsl(130, 22%, 23%); --amplify-colors-teal-10: hsl(190, 75%, 95%); --amplify-colors-teal-20: hsl(190, 75%, 85%); --amplify-colors-teal-40: hsl(190, 70%, 70%); --amplify-colors-teal-60: hsl(190, 50%, 50%); --amplify-colors-teal-80: hsl(190, 95%, 30%); --amplify-colors-teal-90: hsl(190, 100%, 20%); --amplify-colors-teal-100: hsl(190, 100%, 15%); --amplify-colors-blue-10: hsl(220, 95%, 95%); --amplify-colors-blue-20: hsl(220, 85%, 85%); --amplify-colors-blue-40: hsl(220, 70%, 70%); --amplify-colors-blue-60: hsl(220, 50%, 50%); --amplify-colors-blue-80: hsl(220, 95%, 30%); --amplify-colors-blue-90: hsl(220, 100%, 20%); --amplify-colors-blue-100: hsl(220, 100%, 15%); --amplify-colors-purple-10: hsl(300, 95%, 95%); --amplify-colors-purple-20: hsl(300, 85%, 85%); --amplify-colors-purple-40: hsl(300, 70%, 70%); --amplify-colors-purple-60: hsl(300, 50%, 50%); --amplify-colors-purple-80: hsl(300, 95%, 30%); --amplify-colors-purple-90: hsl(300, 100%, 20%); --amplify-colors-purple-100: hsl(300, 100%, 15%); --amplify-colors-pink-10: hsl(340, 95%, 95%); --amplify-colors-pink-20: hsl(340, 90%, 85%); --amplify-colors-pink-40: hsl(340, 70%, 70%); --amplify-colors-pink-60: hsl(340, 50%, 50%); --amplify-colors-pink-80: hsl(340, 95%, 30%); --amplify-colors-pink-90: hsl(340, 100%, 20%); --amplify-colors-pink-100: hsl(340, 100%, 15%); --amplify-colors-neutral-10: hsl(210, 5%, 98%); --amplify-colors-neutral-20: hsl(210, 5%, 94%); --amplify-colors-neutral-40: hsl(210, 5%, 87%); --amplify-colors-neutral-60: hsl(210, 10%, 58%); --amplify-colors-neutral-80: hsl(210, 10%, 40%); --amplify-colors-neutral-90: hsl(210, 25%, 25%); --amplify-colors-neutral-100: hsl(210, 50%, 10%); --amplify-colors-primary-10: var(--amplify-colors-teal-10); --amplify-colors-primary-20: var(--amplify-colors-teal-20); --amplify-colors-primary-40: var(--amplify-colors-teal-40); --amplify-colors-primary-60: var(--amplify-colors-teal-60); --amplify-colors-primary-80: var(--amplify-colors-teal-80); --amplify-colors-primary-90: var(--amplify-colors-teal-90); --amplify-colors-primary-100: var(--amplify-colors-teal-100); --amplify-colors-secondary-10: var(--amplify-colors-purple-10); --amplify-colors-secondary-20: var(--amplify-colors-purple-20); --amplify-colors-secondary-40: var(--amplify-colors-purple-40); --amplify-colors-secondary-60: var(--amplify-colors-purple-60); --amplify-colors-secondary-80: var(--amplify-colors-purple-80); --amplify-colors-secondary-90: var(--amplify-colors-purple-90); --amplify-colors-secondary-100: var(--amplify-colors-purple-100); --amplify-colors-font-primary: var(--amplify-colors-neutral-100); --amplify-colors-font-secondary: var(--amplify-colors-neutral-90); --amplify-colors-font-tertiary: var(--amplify-colors-neutral-80); --amplify-colors-font-disabled: var(--amplify-colors-neutral-60); --amplify-colors-font-inverse: var(--amplify-colors-white); --amplify-colors-font-interactive: var(--amplify-colors-primary-80); --amplify-colors-font-hover: var(--amplify-colors-primary-90); --amplify-colors-font-focus: var(--amplify-colors-primary-100); --amplify-colors-font-active: var(--amplify-colors-primary-100); --amplify-colors-font-info: var(--amplify-colors-blue-90); --amplify-colors-font-warning: var(--amplify-colors-orange-90); --amplify-colors-font-error: var(--amplify-colors-red-90); --amplify-colors-font-success: var(--amplify-colors-green-90); --amplify-colors-background-primary: var(--amplify-colors-white); --amplify-colors-background-secondary: var(--amplify-colors-neutral-10); --amplify-colors-background-tertiary: var(--amplify-colors-neutral-20); --amplify-colors-background-quaternary: var(--amplify-colors-neutral-60); --amplify-colors-background-disabled: var(--amplify-colors-background-tertiary); --amplify-colors-background-info: var(--amplify-colors-blue-10); --amplify-colors-background-warning: var(--amplify-colors-orange-10); --amplify-colors-background-error: var(--amplify-colors-red-10); --amplify-colors-background-success: var(--amplify-colors-green-10); --amplify-colors-border-primary: var(--amplify-colors-neutral-60); --amplify-colors-border-secondary: var(--amplify-colors-neutral-40); --amplify-colors-border-tertiary: var(--amplify-colors-neutral-20); --amplify-colors-border-disabled: var(--amplify-colors-border-tertiary); --amplify-colors-border-pressed: var(--amplify-colors-primary-100); --amplify-colors-border-focus: var(--amplify-colors-primary-100); --amplify-colors-border-error: var(--amplify-colors-red-80); --amplify-colors-border-info: var(--amplify-colors-blue-80); --amplify-colors-border-success: var(--amplify-colors-green-80); --amplify-colors-border-warning: var(--amplify-colors-orange-80); --amplify-colors-shadow-primary: hsla(210, 50%, 10%, 0.25); --amplify-colors-shadow-secondary: hsla(210, 50%, 10%, 0.15); --amplify-colors-shadow-tertiary: hsla(210, 50%, 10%, 0.05); --amplify-colors-overlay-5: hsla(0, 0%, 0%, 0.05); --amplify-colors-overlay-10: hsla(0, 0%, 0%, 0.1); --amplify-colors-overlay-20: hsla(0, 0%, 0%, 0.2); --amplify-colors-overlay-30: hsla(0, 0%, 0%, 0.3); --amplify-colors-overlay-40: hsla(0, 0%, 0%, 0.4); --amplify-colors-overlay-50: hsla(0, 0%, 0%, 0.5); --amplify-colors-overlay-60: hsla(0, 0%, 0%, 0.6); --amplify-colors-overlay-70: hsla(0, 0%, 0%, 0.7); --amplify-colors-overlay-80: hsla(0, 0%, 0%, 0.8); --amplify-colors-overlay-90: hsla(0, 0%, 0%, 0.9); --amplify-colors-black: hsl(0, 0%, 0%); --amplify-colors-white: hsl(0, 0%, 100%); --amplify-colors-transparent: transparent; --amplify-fonts-default-variable: 'InterVariable', 'Inter var', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif; --amplify-fonts-default-static: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif; --amplify-font-sizes-xxxs: 0.375rem; --amplify-font-sizes-xxs: 0.5rem; --amplify-font-sizes-xs: 0.75rem; --amplify-font-sizes-small: 0.875rem; --amplify-font-sizes-medium: 1rem; --amplify-font-sizes-large: 1.25rem; --amplify-font-sizes-xl: 1.5rem; --amplify-font-sizes-xxl: 2rem; --amplify-font-sizes-xxxl: 2.5rem; --amplify-font-sizes-xxxxl: 3rem; --amplify-font-weights-hairline: 100; --amplify-font-weights-thin: 200; --amplify-font-weights-light: 300; --amplify-font-weights-normal: 400; --amplify-font-weights-medium: 500; --amplify-font-weights-semibold: 600; --amplify-font-weights-bold: 700; --amplify-font-weights-extrabold: 800; --amplify-font-weights-black: 900; --amplify-line-heights-small: 1.25; --amplify-line-heights-medium: 1.5; --amplify-line-heights-large: 2; --amplify-opacities-0: 0; --amplify-opacities-10: 0.1; --amplify-opacities-20: 0.2; --amplify-opacities-30: 0.3; --amplify-opacities-40: 0.4; --amplify-opacities-50: 0.5; --amplify-opacities-60: 0.6; --amplify-opacities-70: 0.7; --amplify-opacities-80: 0.8; --amplify-opacities-90: 0.9; --amplify-opacities-100: 1; --amplify-outline-offsets-small: 1px; --amplify-outline-offsets-medium: 2px; --amplify-outline-offsets-large: 3px; --amplify-outline-widths-small: 1px; --amplify-outline-widths-medium: 2px; --amplify-outline-widths-large: 3px; --amplify-radii-xs: 0.125rem; --amplify-radii-small: 0.25rem; --amplify-radii-medium: 0.5rem; --amplify-radii-large: 1rem; --amplify-radii-xl: 2rem; --amplify-radii-xxl: 4rem; --amplify-radii-xxxl: 8rem; --amplify-shadows-small: 0px 2px 4px var(--amplify-colors-shadow-tertiary); --amplify-shadows-medium: 0px 2px 6px var(--amplify-colors-shadow-secondary); --amplify-shadows-large: 0px 4px 12px var(--amplify-colors-shadow-primary); --amplify-space-zero: 0; --amplify-space-xxxs: 0.25rem; --amplify-space-xxs: 0.375rem; --amplify-space-xs: 0.5rem; --amplify-space-small: 0.75rem; --amplify-space-medium: 1rem; --amplify-space-large: 1.5rem; --amplify-space-xl: 2.0rem; --amplify-space-xxl: 3.0rem; --amplify-space-xxxl: 4.5rem; --amplify-space-relative-xxxs: 0.25em; --amplify-space-relative-xxs: 0.375em; --amplify-space-relative-xs: 0.5em; --amplify-space-relative-small: 0.75em; --amplify-space-relative-medium: 1em; --amplify-space-relative-large: 1.5em; --amplify-space-relative-xl: 2.0em; --amplify-space-relative-xxl: 3.0em; --amplify-space-relative-xxxl: 4.5em; --amplify-space-relative-full: 100%; --amplify-time-short: 100ms; --amplify-time-medium: 250ms; --amplify-time-long: 500ms; --amplify-transforms-slide-x-small: translateX(0.5em); --amplify-transforms-slide-x-medium: translateX(1em); --amplify-transforms-slide-x-large: translateX(2em); } @media (prefers-color-scheme: dark) { [data-amplify-theme="amplify-docs"][data-amplify-color-mode="system"] { --amplify-colors-red-10: hsl(0, 100%, 15%); --amplify-colors-red-20: hsl(0, 100%, 20%); --amplify-colors-red-40: hsl(0, 95%, 30%); --amplify-colors-red-80: hsl(0, 75%, 75%); --amplify-colors-red-90: hsl(0, 75%, 85%); --amplify-colors-red-100: hsl(0, 75%, 95%); --amplify-colors-orange-10: hsl(30, 100%, 15%); --amplify-colors-orange-20: hsl(30, 100%, 20%); --amplify-colors-orange-40: hsl(30, 95%, 30%); --amplify-colors-orange-80: hsl(30, 75%, 75%); --amplify-colors-orange-90: hsl(30, 75%, 85%); --amplify-colors-orange-100: hsl(30, 75%, 95%); --amplify-colors-yellow-10: hsl(60, 100%, 15%); --amplify-colors-yellow-20: hsl(60, 100%, 20%); --amplify-colors-yellow-40: hsl(60, 95%, 30%); --amplify-colors-yellow-80: hsl(60, 75%, 75%); --amplify-colors-yellow-90: hsl(60, 75%, 85%); --amplify-colors-yellow-100: hsl(60, 75%, 95%); --amplify-colors-green-10: hsl(130, 22%, 23%); --amplify-colors-green-20: hsl(130, 27%, 29%); --amplify-colors-green-40: hsl(130, 33%, 37%); --amplify-colors-green-80: hsl(130, 44%, 63%); --amplify-colors-green-90: hsl(130, 60%, 90%); --amplify-colors-green-100: hsl(130, 60%, 95%); --amplify-colors-teal-10: hsl(190, 100%, 15%); --amplify-colors-teal-20: hsl(190, 100%, 20%); --amplify-colors-teal-40: hsl(190, 95%, 30%); --amplify-colors-teal-80: hsl(190, 70%, 70%); --amplify-colors-teal-90: hsl(190, 75%, 85%); --amplify-colors-teal-100: hsl(190, 75%, 95%); --amplify-colors-blue-10: hsl(220, 100%, 15%); --amplify-colors-blue-20: hsl(220, 100%, 20%); --amplify-colors-blue-40: hsl(220, 95%, 30%); --amplify-colors-blue-80: hsl(220, 70%, 70%); --amplify-colors-blue-90: hsl(220, 85%, 85%); --amplify-colors-blue-100: hsl(220, 95%, 95%); --amplify-colors-purple-10: hsl(300, 100%, 15%); --amplify-colors-purple-20: hsl(300, 100%, 20%); --amplify-colors-purple-40: hsl(300, 95%, 30%); --amplify-colors-purple-80: hsl(300, 70%, 70%); --amplify-colors-purple-90: hsl(300, 85%, 85%); --amplify-colors-purple-100: hsl(300, 95%, 95%); --amplify-colors-pink-10: hsl(340, 100%, 15%); --amplify-colors-pink-20: hsl(340, 100%, 20%); --amplify-colors-pink-40: hsl(340, 95%, 30%); --amplify-colors-pink-80: hsl(340, 70%, 70%); --amplify-colors-pink-90: hsl(340, 90%, 85%); --amplify-colors-pink-100: hsl(340, 95%, 95%); --amplify-colors-neutral-10: hsl(210, 50%, 10%); --amplify-colors-neutral-20: hsl(210, 25%, 25%); --amplify-colors-neutral-40: hsl(210, 10%, 40%); --amplify-colors-neutral-80: hsl(210, 5%, 87%); --amplify-colors-neutral-90: hsl(210, 5%, 94%); --amplify-colors-neutral-100: hsl(210, 5%, 98%); --amplify-colors-font-primary: var(--amplify-colors-white); --amplify-colors-font-secondary: var(--amplify-colors-neutral-100); --amplify-colors-font-tertiary: var(--amplify-colors-neutral-90); --amplify-colors-font-inverse: var(--amplify-colors-neutral-10); --amplify-colors-background-primary: var(--amplify-colors-neutral-10); --amplify-colors-background-secondary: var(--amplify-colors-neutral-20); --amplify-colors-background-tertiary: var(--amplify-colors-neutral-40); --amplify-colors-border-primary: var(--amplify-colors-neutral-60); --amplify-colors-border-secondary: var(--amplify-colors-neutral-40); --amplify-colors-border-tertiary: var(--amplify-colors-neutral-20); --amplify-colors-overlay-5: hsla(0, 0%, 100%, 0.05); --amplify-colors-overlay-10: hsla(0, 0%, 100%, 0.1); --amplify-colors-overlay-20: hsla(0, 0%, 100%, 0.2); --amplify-colors-overlay-30: hsla(0, 0%, 100%, 0.3); --amplify-colors-overlay-40: hsla(0, 0%, 100%, 0.4); --amplify-colors-overlay-50: hsla(0, 0%, 100%, 0.5); --amplify-colors-overlay-60: hsla(0, 0%, 100%, 0.6); --amplify-colors-overlay-70: hsla(0, 0%, 100%, 0.7); --amplify-colors-overlay-80: hsla(0, 0%, 100%, 0.8); --amplify-colors-overlay-90: hsla(0, 0%, 100%, 0.9); color-scheme: dark; } } [data-amplify-theme="amplify-docs"][data-amplify-color-mode="dark"] { --amplify-colors-red-10: hsl(0, 100%, 15%); --amplify-colors-red-20: hsl(0, 100%, 20%); --amplify-colors-red-40: hsl(0, 95%, 30%); --amplify-colors-red-80: hsl(0, 75%, 75%); --amplify-colors-red-90: hsl(0, 75%, 85%); --amplify-colors-red-100: hsl(0, 75%, 95%); --amplify-colors-orange-10: hsl(30, 100%, 15%); --amplify-colors-orange-20: hsl(30, 100%, 20%); --amplify-colors-orange-40: hsl(30, 95%, 30%); --amplify-colors-orange-80: hsl(30, 75%, 75%); --amplify-colors-orange-90: hsl(30, 75%, 85%); --amplify-colors-orange-100: hsl(30, 75%, 95%); --amplify-colors-yellow-10: hsl(60, 100%, 15%); --amplify-colors-yellow-20: hsl(60, 100%, 20%); --amplify-colors-yellow-40: hsl(60, 95%, 30%); --amplify-colors-yellow-80: hsl(60, 75%, 75%); --amplify-colors-yellow-90: hsl(60, 75%, 85%); --amplify-colors-yellow-100: hsl(60, 75%, 95%); --amplify-colors-green-10: hsl(130, 22%, 23%); --amplify-colors-green-20: hsl(130, 27%, 29%); --amplify-colors-green-40: hsl(130, 33%, 37%); --amplify-colors-green-80: hsl(130, 44%, 63%); --amplify-colors-green-90: hsl(130, 60%, 90%); --amplify-colors-green-100: hsl(130, 60%, 95%); --amplify-colors-teal-10: hsl(190, 100%, 15%); --amplify-colors-teal-20: hsl(190, 100%, 20%); --amplify-colors-teal-40: hsl(190, 95%, 30%); --amplify-colors-teal-80: hsl(190, 70%, 70%); --amplify-colors-teal-90: hsl(190, 75%, 85%); --amplify-colors-teal-100: hsl(190, 75%, 95%); --amplify-colors-blue-10: hsl(220, 100%, 15%); --amplify-colors-blue-20: hsl(220, 100%, 20%); --amplify-colors-blue-40: hsl(220, 95%, 30%); --amplify-colors-blue-80: hsl(220, 70%, 70%); --amplify-colors-blue-90: hsl(220, 85%, 85%); --amplify-colors-blue-100: hsl(220, 95%, 95%); --amplify-colors-purple-10: hsl(300, 100%, 15%); --amplify-colors-purple-20: hsl(300, 100%, 20%); --amplify-colors-purple-40: hsl(300, 95%, 30%); --amplify-colors-purple-80: hsl(300, 70%, 70%); --amplify-colors-purple-90: hsl(300, 85%, 85%); --amplify-colors-purple-100: hsl(300, 95%, 95%); --amplify-colors-pink-10: hsl(340, 100%, 15%); --amplify-colors-pink-20: hsl(340, 100%, 20%); --amplify-colors-pink-40: hsl(340, 95%, 30%); --amplify-colors-pink-80: hsl(340, 70%, 70%); --amplify-colors-pink-90: hsl(340, 90%, 85%); --amplify-colors-pink-100: hsl(340, 95%, 95%); --amplify-colors-neutral-10: hsl(210, 50%, 10%); --amplify-colors-neutral-20: hsl(210, 25%, 25%); --amplify-colors-neutral-40: hsl(210, 10%, 40%); --amplify-colors-neutral-80: hsl(210, 5%, 87%); --amplify-colors-neutral-90: hsl(210, 5%, 94%); --amplify-colors-neutral-100: hsl(210, 5%, 98%); --amplify-colors-font-primary: var(--amplify-colors-white); --amplify-colors-font-secondary: var(--amplify-colors-neutral-100); --amplify-colors-font-tertiary: var(--amplify-colors-neutral-90); --amplify-colors-font-inverse: var(--amplify-colors-neutral-10); --amplify-colors-background-primary: var(--amplify-colors-neutral-10); --amplify-colors-background-secondary: var(--amplify-colors-neutral-20); --amplify-colors-background-tertiary: var(--amplify-colors-neutral-40); --amplify-colors-border-primary: var(--amplify-colors-neutral-60); --amplify-colors-border-secondary: var(--amplify-colors-neutral-40); --amplify-colors-border-tertiary: var(--amplify-colors-neutral-20); --amplify-colors-overlay-5: hsla(0, 0%, 100%, 0.05); --amplify-colors-overlay-10: hsla(0, 0%, 100%, 0.1); --amplify-colors-overlay-20: hsla(0, 0%, 100%, 0.2); --amplify-colors-overlay-30: hsla(0, 0%, 100%, 0.3); --amplify-colors-overlay-40: hsla(0, 0%, 100%, 0.4); --amplify-colors-overlay-50: hsla(0, 0%, 100%, 0.5); --amplify-colors-overlay-60: hsla(0, 0%, 100%, 0.6); --amplify-colors-overlay-70: hsla(0, 0%, 100%, 0.7); --amplify-colors-overlay-80: hsla(0, 0%, 100%, 0.8); --amplify-colors-overlay-90: hsla(0, 0%, 100%, 0.9); color-scheme: dark; } </style></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{},"__N_SSG":true},"page":"/[platform]/components/collection","query":{"platform":"react"},"buildId":"-WIT3zg9fx60YQufP5mRY","isFallback":false,"gsp":true,"scriptLoader":[]}</script></body></html>