CINXE.COM

<!DOCTYPE html><html lang="en-us" data-amplify-theme="amplify-docs"><head><meta charSet="utf-8"/><title>Migration | Amplify UI for React</title><meta name="viewport" content="width=device-width, initial-scale=1"/><meta name="description" content="Migration Guide - How to migrate from an older version of Amplify UI to a newer version."/><meta property="og:title" content="Migration | Amplify UI for React"/><meta property="og:description" content="Migration Guide - How to migrate from an older version of Amplify UI to a newer version."/><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/getting-started/migration"/><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="Migration Guide - How to migrate from an older version of Amplify UI to a newer version."/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Migration | Amplify UI for React"/><meta name="twitter:site" content="@AWSAmplify"/><meta name="twitter:url" content="https://ui.docs.amplify.aws/react/getting-started/migration"/><meta name="twitter:description" content="Migration Guide - How to migrate from an older version of Amplify UI to a newer version."/><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-ayLcZHBeCMOSJqQqu0caErMdcLNb179iPPBF6ywBbA0=' 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/pages/%5Bplatform%5D/getting-started/migration-27040d229d4351d4.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 class="amplify-button amplify-field-group__control amplify-button--small docs-framework-link " type="button" href="/angular/getting-started/migration"><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/getting-started/migration"><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 class="amplify-button amplify-field-group__control amplify-button--small docs-framework-link " type="button" href="/react-native/getting-started/migration"><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 class="amplify-button amplify-field-group__control amplify-button--small docs-framework-link " type="button" href="/vue/getting-started/migration"><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 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 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 current" href="/react/getting-started/migration">Migration</a><a class="docs-secondary-nav-link " href="/react/getting-started/troubleshooting">Troubleshooting</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 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 " 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">Migration</h1><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/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-flex amplify-message amplify-message--filled amplify-message--info" title="Link to other packages' migration guides"><div class="amplify-message__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="M11 7H13V9H11V7ZM11 11H13V17H11V11ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z" fill="currentColor"></path></svg></span></div><div class="amplify-flex amplify-message__content"><p>Migration guides for <a href="#aws-amplifyui-react-liveness"><code>Liveness</code></a>, <a href="#aws-amplifyui-react-notifications"><code>In-App Messaging</code></a> and <a href="#aws-amplifyui-react-storage"><code>Storage</code></a> packages can be found towards the bottom of this page.</p></div></div> <h2 id="aws-amplifyui-react"><a aria-hidden="true" tabindex="-1" href="#aws-amplifyui-react"><span class="icon icon-link"></span></a><code>@aws-amplify/ui-react</code></h2> <h3 id="migrate-from-5x-to-6x"><a aria-hidden="true" tabindex="-1" href="#migrate-from-5x-to-6x"><span class="icon icon-link"></span></a>Migrate from 5.x to 6.x</h3> <h4 id="installation"><a aria-hidden="true" tabindex="-1" href="#installation"><span class="icon icon-link"></span></a>Installation</h4> <p>Install the 6.x version of both <code>@aws-amplify/ui-react</code> and <code>aws-amplify</code>.</p> <div class="amplify-flex amplify-message amplify-message--filled amplify-message--warning" title="Upgrade both @aws-amplify/ui-react and aws-amplify"><div class="amplify-message__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="M1 21H23L12 2L1 21ZM13 18H11V16H13V18ZM13 14H11V10H13V14Z" fill="currentColor"></path></svg></span></div><div class="amplify-flex amplify-message__content"><p>The 6.x version of <code>@aws-amplify/ui-react</code> has a minimum dependency of 6.x on <code>aws-amplify</code>. <code>aws-amplify@6</code> introduced breaking API changes.</p></div></div> <div class="amplify-tabs"><div role="tablist" class="amplify-tabs__list"><button role="tab" id="amplify-id-:R3bpdl6:-tab-npm" aria-selected="true" aria-controls="amplify-id-:R3bpdl6:-panel-npm" class="amplify-tabs__item amplify-tabs__item--active">npm</button><button role="tab" id="amplify-id-:R3bpdl6:-tab-yarn" aria-selected="false" aria-controls="amplify-id-:R3bpdl6:-panel-yarn" tabindex="-1" class="amplify-tabs__item">yarn</button></div><div role="tabpanel" id="amplify-id-:R3bpdl6:-panel-npm" aria-labelledby="amplify-id-:R3bpdl6:-tab-npm" class="amplify-tabs__panel amplify-tabs__panel--active"><div class="install-code__container default"><code class="install-code__content">npm install @aws-amplify/ui-react@6.x aws-amplify@6.x</code><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small install-code__button" type="button">Copy</button></div></div><div role="tabpanel" id="amplify-id-:R3bpdl6:-panel-yarn" aria-labelledby="amplify-id-:R3bpdl6:-tab-yarn" class="amplify-tabs__panel"><div class="install-code__container default"><code class="install-code__content">yarn add @aws-amplify/ui-react@6.x aws-amplify@6.x</code><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small install-code__button" type="button">Copy</button></div></div></div> <h4 id="update-and-usage"><a aria-hidden="true" tabindex="-1" href="#update-and-usage"><span class="icon icon-link"></span></a>Update and usage</h4> <p><code>@aws-amplify/ui-react@6.x</code> introduces the following breaking changes:</p> <h4 id="1-updates-to-the-authenticator"><a aria-hidden="true" tabindex="-1" href="#1-updates-to-the-authenticator"><span class="icon icon-link"></span></a>1. Updates to the Authenticator</h4> <p>The <code>initialState</code> property now accepts <code>forgotPassword</code> in place of <code>resetPassword</code>:</p> <pre class="language-diff"><code class="language-diff"><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> <Authenticator initialState="resetPassword" /> </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> <Authenticator initialState="forgotPassword" /> </span></span></code></pre> <p>The corresponding key of the <code>components</code> prop has been updated to reflect the change as well:</p> <pre class="language-diff"><code class="language-diff"><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> <Authenticator components={{ ResetPassword: MyResetPassword }} /> </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> <Authenticator components={{ ForgotPassword: MyForgotPassword }} /> </span></span></code></pre> <hr/> <p>The <code>user</code> object provided after an end user has been authenticated has been updated to reflect the <code>AuthUser</code> interface available from <code>aws-amplify/auth</code>:</p> <pre class="language-diff"><code class="language-diff"><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> interface AmplifyUser { </span><span class="token prefix deleted">-</span><span class="token line"> challengeName?: ChallengeName; </span><span class="token prefix deleted">-</span><span class="token line"> attributes?: CognitoAttributes; </span><span class="token prefix deleted">-</span><span class="token line"> username: string; </span><span class="token prefix deleted">-</span><span class="token line"> } </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> interface AuthUser { </span><span class="token prefix inserted">+</span><span class="token line"> username: string; </span><span class="token prefix inserted">+</span><span class="token line"> userId: string; </span><span class="token prefix inserted">+</span><span class="token line"> signInDetails?: CognitoAuthSignInDetails; </span><span class="token prefix inserted">+</span><span class="token line"> } </span></span></code></pre> <p><code>AuthUser</code> can be imported from <code>aws-amplify/auth</code>:</p> <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">AuthUser</span> <span class="token punctuation">}</span></span> <span class="token keyword">from</span> <span class="token string">'aws-amplify/auth'</span><span class="token punctuation">;</span> </code></pre> <p>User attributes are now available by directly calling <code>fetchUserAttribues</code>:</p> <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token imports"><span class="token punctuation">{</span> fetchUserAttributes <span class="token punctuation">}</span></span> <span class="token keyword">from</span> <span class="token string">'aws-amplify/auth'</span><span class="token punctuation">;</span> <span class="token keyword">const</span> userAttributes <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetchUserAttributes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <hr/> <p>The function signatures of the <code>services</code> interface have been updated to align with the shape of the underlying <code>aws-amplify/auth</code> APIs used by the <code>Authenticator</code> and provide improved typescript support:</p> <pre class="language-diff"><code class="language-diff">interface AuthenticatorProps { <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> services?: { </span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> getCurrentUser?: () => Promise<any>, </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> getCurrentUser?: () => Promise<AuthUser>, </span></span> <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> handleSignIn?: ({ username, password, }: { username: string;password: string; }) => Promise<any>, </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> handleSignIn?: (input: SignInInput) => Promise<SignInOutput>, </span></span> <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> handleSignUp?: (formData: any) => Promise<ISignUpResult>, </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> handleSignUp?: (input: SignUpInput) => Promise<SignUpOutput>, </span></span> <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> handleConfirmSignIn?: ({ user, code, mfaType, }: { user: any; code: string; mfaType: ChallengeName; }) =>Promise<any>), </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> handleConfirmSignIn?: (input: ConfirmSignInInput) => Promise<ConfirmSignInOutput>, </span></span> <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> handleConfirmSignUp?: ({ username, code, }: { username: string; code: string; }) => Promise<any>, </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> handleConfirmSignUp?: (input: ConfirmSignUpInput) => Promise<ConfirmSignUpOutput>, </span></span> <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> handleForgotPasswordSubmit?: ({ username, code, password, }: { username: string; code: string; password:string; }) => Promise<string>), </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> handleForgotPasswordSubmit?: (input: ConfirmResetPasswordInput) => Promise<void>, </span></span> <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> handleForgotPassword?: (formData: any) => Promise<any>, </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> handleForgotPassword?: (input: ResetPasswordInput) => Promise<ResetPasswordOutput>, </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> } </span></span>} </code></pre> <p>The input and return type interfaces are available as imports from <code>aws-amplify/auth</code>:</p> <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">ConfirmSignInInput</span> <span class="token punctuation">}</span></span> <span class="token keyword">from</span> <span class="token string">'aws-amplify'</span><span class="token punctuation">;</span> </code></pre> <h4 id="2-expander-is-now-accordion"><a aria-hidden="true" tabindex="-1" href="#2-expander-is-now-accordion"><span class="icon icon-link"></span></a>2. Expander is now Accordion</h4> <p>The Expander component has been replaced by the <a href="../components/accordion"><code>Accordion</code></a> component in Amplify UI v6. The Accordion is fully composable and uses HTML elements <code><summary></code> and <code><details></code>.</p> <pre class="language-jsx"><code class="language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Expander</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>single<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">ExpanderItem</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Is it accessible?<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo-item-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text"> Yes! It adheres to the WAI-ARIA design pattern. </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">ExpanderItem</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">ExpanderItem</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Can I customize the styling?<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo-item-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text"> Of course! See the section on CSS Styling below. </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">ExpanderItem</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">ExpanderItem</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Is it a great way to organize content?<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo-item-3<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token plain-text"> Most definitely! </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">ExpanderItem</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">Expander</span></span><span class="token punctuation">></span></span> <span class="token comment">// Becomes </span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Accordion</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> trigger<span class="token operator">:</span> <span class="token string">'Is it accessible?'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'accessible'</span><span class="token punctuation">,</span> content<span class="token operator">:</span> <span class="token string">'Yes! It uses HTML native elements: <details> and <summary>.'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> trigger<span class="token operator">:</span> <span class="token string">'Can I customize the styling?'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'styling'</span><span class="token punctuation">,</span> content<span class="token operator">:</span> <span class="token string">'Of course! See the section on CSS Styling below.'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> trigger<span class="token operator">:</span> <span class="token string">'Is it a great way to organize content?'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'content'</span><span class="token punctuation">,</span> content<span class="token operator">:</span> <span class="token string">'Most definitely!'</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span> </code></pre> <p>The <a href="../components/accordion"><code>Accordion</code></a> is also fully composable now too:</p> <pre class="language-jsx"><code class="language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Accordion.Container</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">Accordion.Item</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Accordion-item<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">Accordion.Trigger</span></span><span class="token punctuation">></span></span><span class="token plain-text"> What is an Accordion? </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Accordion.Icon</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">Accordion.Trigger</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">Accordion.Content</span></span><span class="token punctuation">></span></span><span class="token plain-text"> An Accordion contains all the parts of a collapsible section. </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Accordion.Content</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">Accordion.Item</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">Accordion.Item</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>unique-value<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">Accordion.Trigger</span></span><span class="token punctuation">></span></span><span class="token plain-text"> This is the item title </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Accordion.Icon</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">Accordion.Trigger</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">Accordion.Content</span></span><span class="token punctuation">></span></span><span class="token plain-text"> The `children` of the Accordion are displayed here. </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Accordion.Content</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">Accordion.Item</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">Accordion.Container</span></span><span class="token punctuation">></span></span> </code></pre> <p><strong>Behavior</strong></p> <p>Here are some differences in behavior between the Expander and Accordion components:</p> <ul> <li>The Accordion allows only 1 item expanded by default, while the Expander allowed multiple items expanded by default. To allow multiple open with Accordion, you need to add the allowMultiple prop.</li> <li>The Accordion cannot be fully collapsed by default, while the Expander could be collapsed. To make the Accordion always have 1 item open, use the preventCollapse prop.</li> </ul> <p><strong>Styling</strong></p> <p>The class names have changed between Expander and Accordion. Here is a mapping:</p> <ul> <li><code>amplify-expander</code> -> <code>amplify-accordion</code></li> <li><code>amplify-expander__item</code> -> <code>amplify-accordion__item</code></li> <li><code>amplify-expander__content</code> -> <code>amplify-accordion__content</code></li> <li><code>amplify-expander__header</code> -> <code>amplify-accordion__trigger</code></li> <li><code>amplify-expander__icon</code> -> <code>amplify-accordion__icon</code></li> </ul> <p>The <code>--amplify-components-accordion-</code> CSS variables can also be used to style Accordion.</p> <h4 id="3-tabs-refactor"><a aria-hidden="true" tabindex="-1" href="#3-tabs-refactor"><span class="icon icon-link"></span></a>3. Tabs refactor</h4> <p>The <a href="../components/tabs"><code>Tabs</code></a> component is now fully composable and more light-weight after removing the Radix dependency.</p> <pre class="language-diff"><code class="language-diff"><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> import { Tabs, TabItem } from '@aws-amplify/ui-react' </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> import { Tabs } from '@aws-amplify/ui-react' </span></span> <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> <Tabs> </span><span class="token prefix deleted">-</span><span class="token line"> <TabItem title="Tab 1"> </span><span class="token prefix deleted">-</span><span class="token line"> Tab 1 Content </span><span class="token prefix deleted">-</span><span class="token line"> </TabItem> </span></span> <span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> <Tabs.Container defaultValue="Tab 1"> </span><span class="token prefix inserted">+</span><span class="token line"> <Tabs.List> </span><span class="token prefix inserted">+</span><span class="token line"> <Tabs.Item value="Tab 1">Tab 1</Tabs.Item> </span><span class="token prefix inserted">+</span><span class="token line"> </Tabs.List> </span><span class="token prefix inserted">+</span><span class="token line"> <Tabs.Panel value="Tab 1"> </span><span class="token prefix inserted">+</span><span class="token line"> Tab 1 Content </span><span class="token prefix inserted">+</span><span class="token line"> </Tabs.Panel> </span></span></code></pre> <p>You can also use the Tabs in a uncomposed way too:</p> <pre class="language-jsx"><code class="language-jsx"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Tabs</span></span> <span class="token attr-name">defaultValue</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token string">'Tab 1'</span><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> label<span class="token operator">:</span> <span class="token string">'Tab 1'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'Tab 1'</span><span class="token punctuation">,</span> content<span class="token operator">:</span> <span class="token string">'Tab content #1'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> label<span class="token operator">:</span> <span class="token string">'Tab 2'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'Tab 2'</span><span class="token punctuation">,</span> content<span class="token operator">:</span> <span class="token string">'Tab content #2'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> label<span class="token operator">:</span> <span class="token string">'Tab 3'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'Tab 3'</span><span class="token punctuation">,</span> content<span class="token operator">:</span> <span class="token string">'Tab content #3'</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> </code></pre> <p>Some notable differences:</p> <ul> <li>Instead of providing a <code>defaultIndex</code> or <code>currentIndex</code> you provide a <code>defaultValue</code> or <code>value</code>. Each Tabs.Item and Tabs.Panel should have a <code>value</code> that matches with the corresponding element.</li> <li><code>onChange</code> becomes <code>onValueChange</code></li> <li>You should supply a <code>defaultValue</code> or <code>value</code> or else there will be no default selected tab. Previously the Tabs component would default to the first tab.</li> </ul> <p>There are also more design tokens and better CSS classes for easier customization.</p> <h4 id="4-removal-of-extraneous-data-attributes-and-updating-classnames"><a aria-hidden="true" tabindex="-1" href="#4-removal-of-extraneous-data-attributes-and-updating-classnames"><span class="icon icon-link"></span></a>4. Removal of extraneous <code>data</code> attributes and updating classNames</h4> <p><a href="https://github.com/aws-amplify/amplify-ui/pull/4452">#4452</a></p> <p>If you were using <code>[data-]</code> attributes in CSS to target styling components you will need to change these selectors to classes.</p> <p>ClassName updates:</p> <ul> <li><code>amplify-loader__percentage-text</code> -> <code>amplify-loader__label</code></li> <li><code>amplify-menu-content-wrapper</code> -> <code>amplify-menu__wrapper</code></li> <li><code>amplify-menu-trigger</code> -> <code>amplify-menu__trigger</code></li> <li><code>amplify-menu-content</code> -> <code>amplify-menu__content</code></li> <li><code>amplify-menu-content__item</code> -> <code>amplify-menu__content__item</code></li> <li><code>amplify-pagination__item-button</code> -> <code>amplify-pagination__item</code></li> <li><code>amplify-pagination__item-current</code> -> <code>amplify-pagination__item--current</code></li> <li><code>amplify-pagination__item-ellipsis</code> -> <code>amplify-pagination__item--ellipsis</code></li> <li><code>amplify-rating-icon-container</code> -> <code>amplify-rating__item</code></li> <li><code>amplify-rating-icon</code> -> <code>amplify-rating__icon</code></li> <li><code>amplify-rating-icon-filled</code> -> <code>amplify-rating__icon--filled</code></li> <li><code>amplify-rating-icon-empty</code> -> <code>amplify-rating__icon--empty</code></li> <li><code>amplify-select__icon-wrapper</code> -> <code>amplify-select__icon</code></li> <li><code>.amplify-switch-label</code> -> <code>.amplify-switch__label</code></li> <li><code>.amplify-switch-thumb</code> -> <code>.amplify-switch__thumb</code></li> <li><code>.amplify-switch-track</code> -> <code>.amplify-switch__track</code></li> </ul> <h4 id="5-moving-brandprimary-and-brandsecondary-up-a-level"><a aria-hidden="true" tabindex="-1" href="#5-moving-brandprimary-and-brandsecondary-up-a-level"><span class="icon icon-link"></span></a>5. Moving brand.primary and brand.secondary up a level</h4> <p>To make it easier to access the primary and secondary colors in the Theme, we removed the <code>brand</code> namespace and moved <code>primary</code> and <code>secondary</code> up a level.</p> <pre class="language-diff"><code class="language-diff"><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> tokens.colors.brand.primary[10] </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> tokens.colors.primary[10] </span></span></code></pre> <pre class="language-diff"><code class="language-diff">const theme = createTheme({ <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> tokens: { </span><span class="token prefix unchanged"> </span><span class="token line"> colors: { </span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> brand: { </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> primary: { </span><span class="token prefix unchanged"> </span><span class="token line"> //... </span><span class="token prefix unchanged"> </span><span class="token line"> } </span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> } </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> } </span><span class="token prefix unchanged"> </span><span class="token line"> } </span></span>}) </code></pre> <p>We also added the ability to easily set the entire range of primary and secondary colors at the theme level</p> <pre class="language-ts"><code class="language-ts"><span class="token keyword">const</span> theme <span class="token operator">=</span> <span class="token function">createTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span> primaryColor<span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span> secondaryColor<span class="token operator">:</span> <span class="token string">'green'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <h3 id="migrate-from-4x-to-5x"><a aria-hidden="true" tabindex="-1" href="#migrate-from-4x-to-5x"><span class="icon icon-link"></span></a>Migrate from 4.x to 5.x</h3> <h4 id="installation-1"><a aria-hidden="true" tabindex="-1" href="#installation-1"><span class="icon icon-link"></span></a>Installation</h4> <p>Install the 5.x version of the <code>@aws-amplify/ui-react</code> library.</p> <div class="amplify-tabs"><div role="tablist" class="amplify-tabs__list"><button role="tab" id="amplify-id-:Rubpdl6:-tab-npm" aria-selected="true" aria-controls="amplify-id-:Rubpdl6:-panel-npm" class="amplify-tabs__item amplify-tabs__item--active">npm</button><button role="tab" id="amplify-id-:Rubpdl6:-tab-yarn" aria-selected="false" aria-controls="amplify-id-:Rubpdl6:-panel-yarn" tabindex="-1" class="amplify-tabs__item">yarn</button></div><div role="tabpanel" id="amplify-id-:Rubpdl6:-panel-npm" aria-labelledby="amplify-id-:Rubpdl6:-tab-npm" class="amplify-tabs__panel amplify-tabs__panel--active"><div class="install-code__container default"><code class="install-code__content">npm install @aws-amplify/ui-react@5.x</code><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small install-code__button" type="button">Copy</button></div></div><div role="tabpanel" id="amplify-id-:Rubpdl6:-panel-yarn" aria-labelledby="amplify-id-:Rubpdl6:-tab-yarn" class="amplify-tabs__panel"><div class="install-code__container default"><code class="install-code__content">yarn add @aws-amplify/ui-react@5.x</code><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small install-code__button" type="button">Copy</button></div></div></div> <h4 id="update-and-usage-1"><a aria-hidden="true" tabindex="-1" href="#update-and-usage-1"><span class="icon icon-link"></span></a>Update and usage</h4> <p><code>@aws-amplify/ui-react@5.x</code> introduces the following breaking changes:</p> <h4 id="1-aws-amplifyui-react5x-drops-amplify-geo-components-they-are-moved-to-a-separate-new-package-aws-amplifyui-react-geo"><a aria-hidden="true" tabindex="-1" href="#1-aws-amplifyui-react5x-drops-amplify-geo-components-they-are-moved-to-a-separate-new-package-aws-amplifyui-react-geo"><span class="icon icon-link"></span></a>1. <code>@aws-amplify/ui-react@5.x</code> drops Amplify Geo components. They are moved to a separate new package <code>@aws-amplify/ui-react-geo</code>.</h4> <p>Install the 1.x version of the <code>@aws-amplify/ui-react-geo</code> library and update your existing imports accordingly.</p> <div class="amplify-tabs"><div role="tablist" class="amplify-tabs__list"><button role="tab" id="amplify-id-:R10rpdl6:-tab-npm" aria-selected="true" aria-controls="amplify-id-:R10rpdl6:-panel-npm" class="amplify-tabs__item amplify-tabs__item--active">npm</button><button role="tab" id="amplify-id-:R10rpdl6:-tab-yarn" aria-selected="false" aria-controls="amplify-id-:R10rpdl6:-panel-yarn" tabindex="-1" class="amplify-tabs__item">yarn</button></div><div role="tabpanel" id="amplify-id-:R10rpdl6:-panel-npm" aria-labelledby="amplify-id-:R10rpdl6:-tab-npm" class="amplify-tabs__panel amplify-tabs__panel--active"><div class="install-code__container default"><code class="install-code__content">npm install @aws-amplify/ui-react-geo@1.x</code><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small install-code__button" type="button">Copy</button></div></div><div role="tabpanel" id="amplify-id-:R10rpdl6:-panel-yarn" aria-labelledby="amplify-id-:R10rpdl6:-tab-yarn" class="amplify-tabs__panel"><div class="install-code__container default"><code class="install-code__content">yarn add @aws-amplify/ui-react-geo@1.x</code><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small install-code__button" type="button">Copy</button></div></div></div> <p>Styles supporting Amplify Geo UI components are moved to <code>@aws-amplify/ui-react-geo</code> library and are not available through <code>@aws-amplify/ui-react</code> library anymore. When using components like <code>MapView</code> or <code>LocationSearch</code> from <code>@aws-amplify/ui-react-geo</code> library, import the styles from the same library as well.</p> <pre class="language-tsx"><code class="language-tsx"><span class="token keyword">import</span> <span class="token string">'@aws-amplify/ui-react-geo/styles.css'</span><span class="token punctuation">;</span> </code></pre> <p>For example, you can import the MapView component with related styles from <code>@aws-amplify/ui-react-geo</code> library.</p> <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">Amplify</span> <span class="token punctuation">}</span></span> <span class="token keyword">from</span> <span class="token string">'aws-amplify'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">MapView</span> <span class="token punctuation">}</span></span> <span class="token keyword">from</span> <span class="token string">'@aws-amplify/ui-react-geo'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token string">'@aws-amplify/ui-react-geo/styles.css'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token imports">awsExports</span> <span class="token keyword">from</span> <span class="token string">'./aws-exports'</span><span class="token punctuation">;</span> <span class="token maybe-class-name">Amplify</span><span class="token punctuation">.</span><span class="token method function property-access">configure</span><span class="token punctuation">(</span>awsExports<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">BasicMap</span></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 tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MapView</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <h4 id="2-aws-amplifyui-react5x-drops-amplify-notifications-components-they-are-moved-to-a-separate-new-package-aws-amplifyui-react-notifications"><a aria-hidden="true" tabindex="-1" href="#2-aws-amplifyui-react5x-drops-amplify-notifications-components-they-are-moved-to-a-separate-new-package-aws-amplifyui-react-notifications"><span class="icon icon-link"></span></a>2. <code>@aws-amplify/ui-react@5.x</code> drops Amplify Notifications components. They are moved to a separate new package <code>@aws-amplify/ui-react-notifications</code>.</h4> <p>Install the 1.x version of the <code>@aws-amplify/ui-react-notifications</code> library and update your existing imports accordingly.</p> <div class="amplify-tabs"><div role="tablist" class="amplify-tabs__list"><button role="tab" id="amplify-id-:R14bpdl6:-tab-npm" aria-selected="true" aria-controls="amplify-id-:R14bpdl6:-panel-npm" class="amplify-tabs__item amplify-tabs__item--active">npm</button><button role="tab" id="amplify-id-:R14bpdl6:-tab-yarn" aria-selected="false" aria-controls="amplify-id-:R14bpdl6:-panel-yarn" tabindex="-1" class="amplify-tabs__item">yarn</button></div><div role="tabpanel" id="amplify-id-:R14bpdl6:-panel-npm" aria-labelledby="amplify-id-:R14bpdl6:-tab-npm" class="amplify-tabs__panel amplify-tabs__panel--active"><div class="install-code__container default"><code class="install-code__content">npm install @aws-amplify/ui-react-notifications@1.x</code><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small install-code__button" type="button">Copy</button></div></div><div role="tabpanel" id="amplify-id-:R14bpdl6:-panel-yarn" aria-labelledby="amplify-id-:R14bpdl6:-tab-yarn" class="amplify-tabs__panel"><div class="install-code__container default"><code class="install-code__content">yarn add @aws-amplify/ui-react-notifications@1.x</code><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small install-code__button" type="button">Copy</button></div></div></div> <p>For example, you can import the In-App messaging components like InAppMessageDisplay and InAppMessagingProvider from <code>@aws-amplify/ui-react-notifications</code> library.</p> <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">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">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">InAppMessageDisplay</span> <span class="token maybe-class-name">InAppMessagingProvider</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-notifications'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token string">'@aws-amplify/ui-react/styles.css'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token imports">awsExports</span> <span class="token keyword">from</span> <span class="token string">'./aws-exports'</span><span class="token punctuation">;</span> <span class="token maybe-class-name">Amplify</span><span class="token punctuation">.</span><span class="token method function property-access">configure</span><span class="token punctuation">(</span>awsExports<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">App</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 function">useEffect</span><span class="token punctuation">(</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 maybe-class-name">InAppMessaging</span><span class="token punctuation">.</span><span class="token method function property-access">syncMessages</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">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">InAppMessagingProvider</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">InAppMessageDisplay</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 plain-text">In-App Messaging Example</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">InAppMessagingProvider</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> <h4 id="3-aws-amplifyui-react5x-removes-the-to-prop-from-the-link-component"><a aria-hidden="true" tabindex="-1" href="#3-aws-amplifyui-react5x-removes-the-to-prop-from-the-link-component"><span class="icon icon-link"></span></a>3. <code>@aws-amplify/ui-react@5.x</code> removes the <code>to</code> prop from the <code>Link</code> component.</h4> <p>If using a <code>Link</code> component with the <code>to</code> prop, remove <code>to</code> and instead extend from the underlying rendered third-party <code>Link</code>. For example, using React Router <code>Link</code> with the Amplify UI <code>Link</code> component:</p> <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">Link</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> <span class="token maybe-class-name">Link</span> <span class="token keyword">as</span> <span class="token maybe-class-name">ReactRouterLink</span> <span class="token punctuation">}</span></span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span><span class="token punctuation">;</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Link</span></span> <span class="token attr-name">as</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token maybe-class-name">ReactRouterLink</span><span class="token punctuation">}</span></span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Home</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Link</span></span><span class="token punctuation">></span></span> </code></pre> <h4 id="4-aws-amplifyui-react5x-updates-component-types-to-include-the-underlying-rendered-html-elements-attributes-and-strictly-types-the-view-component"><a aria-hidden="true" tabindex="-1" href="#4-aws-amplifyui-react5x-updates-component-types-to-include-the-underlying-rendered-html-elements-attributes-and-strictly-types-the-view-component"><span class="icon icon-link"></span></a>4. <code>@aws-amplify/ui-react@5.x</code> updates component types to include the underlying rendered HTML element's attributes and strictly types the <code>View</code> component.</h4> <h3 id="migrate-from-3x-to-4x"><a aria-hidden="true" tabindex="-1" href="#migrate-from-3x-to-4x"><span class="icon icon-link"></span></a>Migrate from 3.x to 4.x</h3> <h4 id="installation-2"><a aria-hidden="true" tabindex="-1" href="#installation-2"><span class="icon icon-link"></span></a>Installation</h4> <p>Install the 4.x version of the <code>@aws-amplify/ui-react</code> library and the 5.x version of the <code>aws-amplify</code> library.</p> <div class="amplify-tabs"><div role="tablist" class="amplify-tabs__list"><button role="tab" id="amplify-id-:R19bpdl6:-tab-npm" aria-selected="true" aria-controls="amplify-id-:R19bpdl6:-panel-npm" class="amplify-tabs__item amplify-tabs__item--active">npm</button><button role="tab" id="amplify-id-:R19bpdl6:-tab-yarn" aria-selected="false" aria-controls="amplify-id-:R19bpdl6:-panel-yarn" tabindex="-1" class="amplify-tabs__item">yarn</button></div><div role="tabpanel" id="amplify-id-:R19bpdl6:-panel-npm" aria-labelledby="amplify-id-:R19bpdl6:-tab-npm" class="amplify-tabs__panel amplify-tabs__panel--active"><div class="install-code__container default"><code class="install-code__content">npm install aws-amplify@5.x @aws-amplify/ui-react@4.x</code><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small install-code__button" type="button">Copy</button></div></div><div role="tabpanel" id="amplify-id-:R19bpdl6:-panel-yarn" aria-labelledby="amplify-id-:R19bpdl6:-tab-yarn" class="amplify-tabs__panel"><div class="install-code__container default"><code class="install-code__content">yarn add aws-amplify@5.x @aws-amplify/ui-react@4.x</code><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small install-code__button" type="button">Copy</button></div></div></div> <h4 id="update-and-usage-2"><a aria-hidden="true" tabindex="-1" href="#update-and-usage-2"><span class="icon icon-link"></span></a>Update and usage</h4> <p><code>@aws-amplify/ui-react@4.x</code> introduces the following breaking changes:</p> <h4 id="1-aws-amplifyui-react4x-removes-ismultiline-prop-from-textfield"><a aria-hidden="true" tabindex="-1" href="#1-aws-amplifyui-react4x-removes-ismultiline-prop-from-textfield"><span class="icon icon-link"></span></a>1. <code>@aws-amplify/ui-react@4.x</code> removes <code>isMultiline</code> prop from <code>TextField</code>.</h4> <p>Replace any <code>TextField</code> components using the <code>isMultiline</code> prop with the <code>TextAreaField</code> component.</p> <pre class="language-diff"><code class="language-diff"><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> <TextField </span><span class="token prefix deleted">-</span><span class="token line"> isMultiline </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> <TextAreaField </span></span></code></pre> <h4 id="2-aws-amplifyui-react4x-moves-text-directionality-support-to-themeprovider"><a aria-hidden="true" tabindex="-1" href="#2-aws-amplifyui-react4x-moves-text-directionality-support-to-themeprovider"><span class="icon icon-link"></span></a>2. <code>@aws-amplify/ui-react@4.x</code> moves text directionality support to ThemeProvider</h4> <div class="amplify-flex amplify-message amplify-message--filled amplify-message--info"><div class="amplify-message__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="M11 7H13V9H11V7ZM11 11H13V17H11V11ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z" fill="currentColor"></path></svg></span></div><div class="amplify-flex amplify-message__content"><div class="amplify-flex amplify-message__heading">Note</div><p>If you are NOT using <code>dir="rtl"</code> in your application, feel free to skip this item.</p></div></div> <p><code>@aws-amplify/ui-react</code> has a dependency on Radix components for Menu, SliderField, Tabs, and Expander. There were a number of changes in the <a href="https://www.radix-ui.com/primitives/docs/overview/releases#july-21-2022">July 21, 2022 release</a> of <code>radix-ui/*</code> packages, and the breaking change for <code>@aws-amplify/ui-react</code> was removal of support for the <code>dir</code> HTML attribute, and the addition of the <code>DirectionProvider</code>. In order to make the transition seamless for most of Amplify users, we've added the <code>DirectionProvider</code> with a default <code>direction</code> of <code>ltr</code> to the <code>ThemeProvider</code>.</p> <p>If your application is using right to left directionality, the example below shows the needed change for apps using the native HTML <code>dir="rtl"</code>:</p> <pre class="language-diff"><code class="language-diff"><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> <View dir="rtl"> </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> <ThemeProvider direction="rtl"> </span></span></code></pre> <p>Also see: <a href="/getting-started/internationalization">Internationalization</a></p> <h4 id="3-aws-amplifyui-react4x-removes-legacy-component-exports"><a aria-hidden="true" tabindex="-1" href="#3-aws-amplifyui-react4x-removes-legacy-component-exports"><span class="icon icon-link"></span></a>3. <code>@aws-amplify/ui-react@4.x</code> removes legacy component exports</h4> <p>The following deprecated components imported from <code>@aws-amplify/ui-react/legacy</code> are removed:</p> <ul> <li><a href="https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-authenticator/readme.md">AmplifyAuthenticator</a></li> <li><a href="https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-sign-in/readme.md">AmplifySignIn</a></li> <li><a href="https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-sign-out/readme.md">AmplifySignOut</a></li> <li><a href="https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md">AmplifyChatbot</a></li> <li><a href="https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-photo-picker/readme.md">AmplifyPhotoPicker</a></li> <li><a href="https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-picker/readme.md">AmplifyPicker</a></li> <li><a href="https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-s3-album/readme.md">AmplifyS3Album</a></li> <li><a href="https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-s3-image/readme.md">AmplifyS3Image</a></li> <li><a href="https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-s3-image-picker/readme.md">AmplifyS3ImagePicker</a></li> <li><a href="https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-s3-text/readme.md">AmplifyS3Text</a></li> <li><a href="https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-s3-text-picker/readme.md">AmplifyS3TextPicker</a></li> <li>withAuthenticator</li> </ul> <p>Depending on the v1 version of this package and re-exporting these components caused issues. If you still want to use these legacy components you can depend on the v1 version of this package with an npm alias in your dependencies:</p> <p><code>"@aws-amplify/ui-react-v1": "npm:@aws-amplify/ui-react@1.2.9"</code></p> <p><a href="https://github.com/aws-amplify/amplify-js/tree/v4-stable/packages/amplify-ui-components#readme">Documentation for legacy components</a></p> <h4 id="4-aws-amplifyui-react4x-adds-inputstyles-prop-to-field-primitives"><a aria-hidden="true" tabindex="-1" href="#4-aws-amplifyui-react4x-adds-inputstyles-prop-to-field-primitives"><span class="icon icon-link"></span></a>4. <code>@aws-amplify/ui-react@4.x</code> adds <code>inputStyles</code> prop to Field primitives</h4> <p>Before 4.0, Field components like <code>TextField</code> would try to intelligently apply certain style props onto the wrapper element and some on the input element. We felt this was a little too opaque to users, but we still want to allow you to style the input element directly. <code>@aws-amplify/ui-react@4.x</code> adds an <code>inputStyles</code> prop to Field components so you can apply style props directly on the input (or <code>textarea</code> or <code>select</code>) as well as on the wrapper element.</p> <p>Hopefully this change won't affect your code but will allow for more customization and control.</p> <div class="amplify-flex amplify-message amplify-message--filled amplify-message--info"><div class="amplify-message__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="M11 7H13V9H11V7ZM11 11H13V17H11V11ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z" fill="currentColor"></path></svg></span></div><div class="amplify-flex amplify-message__content"><div class="amplify-flex amplify-message__heading">Note</div><p>The TextAreaField component does apply 1 style prop directly on the <code>textarea</code> element: <code>resize</code>. We felt this one makes sense to apply direclty on the the <code>textarea</code> element and not the wrapper element.</p></div></div> <h4 id="5-aws-amplifyui-react4x-moves-automatic-signin-on-signup-logic-to-aws-amplify"><a aria-hidden="true" tabindex="-1" href="#5-aws-amplifyui-react4x-moves-automatic-signin-on-signup-logic-to-aws-amplify"><span class="icon icon-link"></span></a>5. <code>@aws-amplify/ui-react@4.x</code> moves automatic signin on signup logic to <code>aws-amplify</code>.</h4> <p>If you are overriding <code>Auth.signUp</code>, update the override function call to include the <code>autoSignIn</code> option set to <code>enabled</code>. If this change is not made, users will not be automatically signed in on signup.</p> <pre class="language-diff"><code class="language-diff"><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">async handleSignUp(formData) { </span><span class="token prefix unchanged"> </span><span class="token line"> let { username, password, attributes } = formData; </span><span class="token prefix unchanged"> </span><span class="token line"> // custom username </span><span class="token prefix unchanged"> </span><span class="token line"> username = username.toLowerCase(); </span><span class="token prefix unchanged"> </span><span class="token line"> attributes.email = attributes.email.toLowerCase(); </span><span class="token prefix unchanged"> </span><span class="token line"> return Auth.signUp({ </span><span class="token prefix unchanged"> </span><span class="token line"> username, </span><span class="token prefix unchanged"> </span><span class="token line"> password, </span><span class="token prefix unchanged"> </span><span class="token line"> attributes, </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> autoSignIn: { </span><span class="token prefix inserted">+</span><span class="token line"> enabled: true </span><span class="token prefix inserted">+</span><span class="token line"> } </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> }); </span></span>} </code></pre> <h5 id="6-aws-amplifyui-react4x-removes-legacy-i18n-translation-keys-removed"><a aria-hidden="true" tabindex="-1" href="#6-aws-amplifyui-react4x-removes-legacy-i18n-translation-keys-removed"><span class="icon icon-link"></span></a>6. <code>@aws-amplify/ui-react@4.x</code> removes legacy i18n translation keys removed</h5> <p>We replaced following legacy Authenticator texts:</p> <ul> <li><code>Forgot your password? </code> with the trailing space is replaced by <code>Forgot your password</code>.</li> </ul> <p>If you were using <code>I18n</code> to translate those keys, please update your translations accordingly to match the new strings.</p> <h3 id="migrate-from-2x-to-3x"><a aria-hidden="true" tabindex="-1" href="#migrate-from-2x-to-3x"><span class="icon icon-link"></span></a>Migrate from 2.x to 3.x</h3> <h4 id="installation-3"><a aria-hidden="true" tabindex="-1" href="#installation-3"><span class="icon icon-link"></span></a>Installation</h4> <p>Install the 3.x version of the <code>@aws-amplify/ui-react</code> library.</p> <div class="amplify-tabs"><div role="tablist" class="amplify-tabs__list"><button role="tab" id="amplify-id-:R1pbpdl6:-tab-npm" aria-selected="true" aria-controls="amplify-id-:R1pbpdl6:-panel-npm" class="amplify-tabs__item amplify-tabs__item--active">npm</button><button role="tab" id="amplify-id-:R1pbpdl6:-tab-yarn" aria-selected="false" aria-controls="amplify-id-:R1pbpdl6:-panel-yarn" tabindex="-1" class="amplify-tabs__item">yarn</button></div><div role="tabpanel" id="amplify-id-:R1pbpdl6:-panel-npm" aria-labelledby="amplify-id-:R1pbpdl6:-tab-npm" class="amplify-tabs__panel amplify-tabs__panel--active"><div class="install-code__container default"><code class="install-code__content">npm install aws-amplify @aws-amplify/ui-react@3.x</code><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small install-code__button" type="button">Copy</button></div></div><div role="tabpanel" id="amplify-id-:R1pbpdl6:-panel-yarn" aria-labelledby="amplify-id-:R1pbpdl6:-tab-yarn" class="amplify-tabs__panel"><div class="install-code__container default"><code class="install-code__content">yarn add aws-amplify @aws-amplify/ui-react@3.x</code><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small install-code__button" type="button">Copy</button></div></div></div> <h4 id="update-and-usage-3"><a aria-hidden="true" tabindex="-1" href="#update-and-usage-3"><span class="icon icon-link"></span></a>Update and usage</h4> <p><code>@aws-amplify/ui-react@3.x</code> introduces the following breaking changes:</p> <h4 id="1-aws-amplifyui-react3x-removes-the-built-in-icons-icon360-iconsave-etc"><a aria-hidden="true" tabindex="-1" href="#1-aws-amplifyui-react3x-removes-the-built-in-icons-icon360-iconsave-etc"><span class="icon icon-link"></span></a>1. <code>@aws-amplify/ui-react@3.x</code> removes the built-in icons (Icon360, IconSave, etc).</h4> <p>Replace any icon components in use the react-icons package or other React icon libraries in its place.</p> <pre class="language-diff"><code class="language-diff"><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> import { IconSave } from '@aws-amplify/ui-react'; </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> import { MdSave } from 'react-icons/md'; </span></span></code></pre> <p>Note: We did not remove the <a href="/react/components/icon">Icon</a> component, which allows customers to easily add SVG icons using the <code>pathData</code> prop.</p> <h5 id="2-aws-amplifyui-react3x-removes-sharetext"><a aria-hidden="true" tabindex="-1" href="#2-aws-amplifyui-react3x-removes-sharetext"><span class="icon icon-link"></span></a>2. <code>@aws-amplify/ui-react@3.x</code> removes <code>ShareText</code>.</h5> <p>This export has been removed and should no longer be used.</p> <h3 id="migrate-from-1x-to-2x"><a aria-hidden="true" tabindex="-1" href="#migrate-from-1x-to-2x"><span class="icon icon-link"></span></a>Migrate from 1.x to 2.x</h3> <h4 id="installation-4"><a aria-hidden="true" tabindex="-1" href="#installation-4"><span class="icon icon-link"></span></a>Installation</h4> <p>Install the 2.x version of the <code>@aws-amplify/ui-react</code> library.</p> <div class="amplify-tabs"><div role="tablist" class="amplify-tabs__list"><button role="tab" id="amplify-id-:R1vbpdl6:-tab-npm" aria-selected="true" aria-controls="amplify-id-:R1vbpdl6:-panel-npm" class="amplify-tabs__item amplify-tabs__item--active">npm</button><button role="tab" id="amplify-id-:R1vbpdl6:-tab-yarn" aria-selected="false" aria-controls="amplify-id-:R1vbpdl6:-panel-yarn" tabindex="-1" class="amplify-tabs__item">yarn</button></div><div role="tabpanel" id="amplify-id-:R1vbpdl6:-panel-npm" aria-labelledby="amplify-id-:R1vbpdl6:-tab-npm" class="amplify-tabs__panel amplify-tabs__panel--active"><div class="install-code__container default"><code class="install-code__content">npm install aws-amplify @aws-amplify/ui-react@2.x</code><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small install-code__button" type="button">Copy</button></div></div><div role="tabpanel" id="amplify-id-:R1vbpdl6:-panel-yarn" aria-labelledby="amplify-id-:R1vbpdl6:-tab-yarn" class="amplify-tabs__panel"><div class="install-code__container default"><code class="install-code__content">yarn add aws-amplify @aws-amplify/ui-react@2.x</code><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small install-code__button" type="button">Copy</button></div></div></div> <h4 id="update-and-usage-4"><a aria-hidden="true" tabindex="-1" href="#update-and-usage-4"><span class="icon icon-link"></span></a>Update and Usage</h4> <p>Update the <strong>App.js</strong> with the new <code>Authenticator</code> and remove the old <code>AmplifyAuthenticator</code> as seen below:</p> <p><strong>App.js</strong></p> <pre class="language-diff"><code class="language-diff"><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> import { AmplifyAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react'; </span></span>import { Amplify } from 'aws-amplify'; <span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> import { Authenticator } from '@aws-amplify/ui-react'; </span><span class="token prefix inserted">+</span><span class="token line"> import '@aws-amplify/ui-react/styles.css'; </span></span> import awsExports from './aws-exports'; Amplify.configure(awsExports); <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">const App = () => ( </span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> <AmplifyAuthenticator> </span><span class="token prefix deleted">-</span><span class="token line"> <div> </span><span class="token prefix deleted">-</span><span class="token line"> My App </span><span class="token prefix deleted">-</span><span class="token line"> <AmplifySignOut /> </span><span class="token prefix deleted">-</span><span class="token line"> </div> </span><span class="token prefix deleted">-</span><span class="token line"> </AmplifyAuthenticator> </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> <Authenticator> </span><span class="token prefix inserted">+</span><span class="token line"> {({ signOut, user }) => ( </span><span class="token prefix inserted">+</span><span class="token line"> <main> </span><span class="token prefix inserted">+</span><span class="token line"> <h1>Hello {user.username}</h1> </span><span class="token prefix inserted">+</span><span class="token line"> <button onClick={signOut}>Sign out</button> </span><span class="token prefix inserted">+</span><span class="token line"> </main> </span><span class="token prefix inserted">+</span><span class="token line"> )} </span><span class="token prefix inserted">+</span><span class="token line"> </Authenticator> </span></span>); </code></pre> <h4 id="authenticator-breaking-changes-1x-to-2x"><a aria-hidden="true" tabindex="-1" href="#authenticator-breaking-changes-1x-to-2x"><span class="icon icon-link"></span></a>Authenticator breaking changes (1.x to 2.x)</h4> <p>The latest version of the <code>Authenticator</code> component has several differences from earlier versions. Here are a few of the major changes that you'll need to look out for.</p> <h4 id="slots"><a aria-hidden="true" tabindex="-1" href="#slots"><span class="icon icon-link"></span></a>Slots</h4> <p>All the slot locations have changed with the latest version of the <code>Authenticator</code>. To get a sense of the changes please check out the <a href="../connected-components/authenticator/customization#headers--footers">Headers and Footers</a> section.</p> <h4 id="form-fields"><a aria-hidden="true" tabindex="-1" href="#form-fields"><span class="icon icon-link"></span></a>Form Fields</h4> <p>The latest version of the <code>Authenticator</code> has a different format for the <code>formFields</code> prop. It also no longer accepts <code>inputProps</code> nor <code>hint</code>. Instead, it's recommended that you use the <a href="../connected-components/authenticator/customization#headers--footers">Headers and Footers Slots</a> or use the <a href="../connected-components/authenticator/customization#sign-up-fields">Sign Up Fields customization</a>. For more information on form field customizations please see the <a href="../connected-components/authenticator/customization#form-field-customization">Form Field Customization</a> section.</p> <h4 id="css-styling"><a aria-hidden="true" tabindex="-1" href="#css-styling"><span class="icon icon-link"></span></a>CSS Styling</h4> <p>The latest version of the <code>Authenticator</code> has a completely different set of CSS variables. Please look over the <a href="../connected-components/authenticator/customization#styling">Amplify CSS Variables</a> section for more information.</p> <h4 id="onauthuistatechange"><a aria-hidden="true" tabindex="-1" href="#onauthuistatechange"><span class="icon icon-link"></span></a><code>onAuthUIStateChange</code></h4> <p>Previous versions of <code>Authenticator</code> exposed a <code>onAuthUIStateChange</code> handler to detect Auth state changes. For similar functionality see <a href="/react/connected-components/authenticator/advanced#access-auth-state">useAuthenticator</a>.</p> <h2 id="aws-amplifyui-react-liveness"><a aria-hidden="true" tabindex="-1" href="#aws-amplifyui-react-liveness"><span class="icon icon-link"></span></a><code>@aws-amplify/ui-react-liveness</code></h2> <h3 id="migrate-from-2x-to-3x-1"><a aria-hidden="true" tabindex="-1" href="#migrate-from-2x-to-3x-1"><span class="icon icon-link"></span></a>Migrate from 2.x to 3.x</h3> <h4 id="installation-5"><a aria-hidden="true" tabindex="-1" href="#installation-5"><span class="icon icon-link"></span></a>Installation</h4> <p>Install the 3.x version of the <code>@aws-amplify/ui-react-liveness</code> library.</p> <div class="amplify-tabs"><div role="tablist" class="amplify-tabs__list"><button role="tab" id="amplify-id-:R28rpdl6:-tab-npm" aria-selected="true" aria-controls="amplify-id-:R28rpdl6:-panel-npm" class="amplify-tabs__item amplify-tabs__item--active">npm</button><button role="tab" id="amplify-id-:R28rpdl6:-tab-yarn" aria-selected="false" aria-controls="amplify-id-:R28rpdl6:-panel-yarn" tabindex="-1" class="amplify-tabs__item">yarn</button></div><div role="tabpanel" id="amplify-id-:R28rpdl6:-panel-npm" aria-labelledby="amplify-id-:R28rpdl6:-tab-npm" class="amplify-tabs__panel amplify-tabs__panel--active"><div class="install-code__container default"><code class="install-code__content">npm install aws-amplify@6.x @aws-amplify/ui-react-liveness@3.x</code><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small install-code__button" type="button">Copy</button></div></div><div role="tabpanel" id="amplify-id-:R28rpdl6:-panel-yarn" aria-labelledby="amplify-id-:R28rpdl6:-tab-yarn" class="amplify-tabs__panel"><div class="install-code__container default"><code class="install-code__content">yarn add aws-amplify@6.x @aws-amplify/ui-react-liveness@3.x</code><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small install-code__button" type="button">Copy</button></div></div></div> <h4 id="update-and-usage-5"><a aria-hidden="true" tabindex="-1" href="#update-and-usage-5"><span class="icon icon-link"></span></a>Update and Usage</h4> <p>Optionally update your App with the new prop usage:</p> <p><strong>App.js</strong></p> <pre class="language-diff"><code class="language-diff"><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">const App = () => ( </span><span class="token prefix unchanged"> </span><span class="token line"> return ( </span><span class="token prefix unchanged"> </span><span class="token line"> <ThemeProvider> </span><span class="token prefix unchanged"> </span><span class="token line"> {loading ? ( </span><span class="token prefix unchanged"> </span><span class="token line"> <Loader /> </span><span class="token prefix unchanged"> </span><span class="token line"> ) : ( </span><span class="token prefix unchanged"> </span><span class="token line"> <FaceLivenessDetector </span><span class="token prefix unchanged"> </span><span class="token line"> sessionId={createLivenessApiData.sessionId} </span><span class="token prefix unchanged"> </span><span class="token line"> region="us-east-1" </span><span class="token prefix unchanged"> </span><span class="token line"> onAnalysisComplete={handleAnalysisComplete} </span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> disableInstructionScreen={true} </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> disableStartScreen={true} </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> /> </span><span class="token prefix unchanged"> </span><span class="token line"> )} </span><span class="token prefix unchanged"> </span><span class="token line"> </ThemeProvider> </span><span class="token prefix unchanged"> </span><span class="token line"> ); </span></span>); </code></pre> <h4 id="cdn-csp-policy"><a aria-hidden="true" tabindex="-1" href="#cdn-csp-policy"><span class="icon icon-link"></span></a>CDN CSP Policy</h4> <p>The 3.x version of the <code>FaceLivenessDetector</code> has been updated to use the latest version of TensorFlow and Blazeface, thus the default CDN paths have changed. If your application has an existing CSP policy, ensure your policy allows <a href="https://cdn.liveness.rekognition.amazonaws.com">https://cdn.liveness.rekognition.amazonaws.com</a>. If you are using a custom CDN make sure to update your CDN versions to match <a href="https://www.npmjs.com/package/@tensorflow/tfjs-backend-wasm/v/4.11.0">@tensorflow/tfjs-backend-wasm</a> and <a href="https://www.npmjs.com/package/@tensorflow-models/face-detection/v/1.0.2">@tensorflow-models/face-detection</a>.Please look over the <a href="../connected-components/liveness/customization#facelivenessdetectorconfig">Liveness Config</a> section for more information.</p> <h3 id="migrate-from-1x-to-2x-1"><a aria-hidden="true" tabindex="-1" href="#migrate-from-1x-to-2x-1"><span class="icon icon-link"></span></a>Migrate from 1.x to 2.x</h3> <h4 id="installation-6"><a aria-hidden="true" tabindex="-1" href="#installation-6"><span class="icon icon-link"></span></a>Installation</h4> <p>Install the 2.x version of the <code>@aws-amplify/ui-react-liveness</code> library.</p> <div class="amplify-tabs"><div role="tablist" class="amplify-tabs__list"><button role="tab" id="amplify-id-:R2drpdl6:-tab-npm" aria-selected="true" aria-controls="amplify-id-:R2drpdl6:-panel-npm" class="amplify-tabs__item amplify-tabs__item--active">npm</button><button role="tab" id="amplify-id-:R2drpdl6:-tab-yarn" aria-selected="false" aria-controls="amplify-id-:R2drpdl6:-panel-yarn" tabindex="-1" class="amplify-tabs__item">yarn</button></div><div role="tabpanel" id="amplify-id-:R2drpdl6:-panel-npm" aria-labelledby="amplify-id-:R2drpdl6:-tab-npm" class="amplify-tabs__panel amplify-tabs__panel--active"><div class="install-code__container default"><code class="install-code__content">npm install aws-amplify@5.x @aws-amplify/ui-react-liveness@2.x</code><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small install-code__button" type="button">Copy</button></div></div><div role="tabpanel" id="amplify-id-:R2drpdl6:-panel-yarn" aria-labelledby="amplify-id-:R2drpdl6:-tab-yarn" class="amplify-tabs__panel"><div class="install-code__container default"><code class="install-code__content">yarn add aws-amplify@5.x @aws-amplify/ui-react-liveness@2.x</code><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small install-code__button" type="button">Copy</button></div></div></div> <h4 id="update-and-usage-6"><a aria-hidden="true" tabindex="-1" href="#update-and-usage-6"><span class="icon icon-link"></span></a>Update and Usage</h4> <p>Optionally update your App with the new prop usage:</p> <p><strong>App.js</strong></p> <pre class="language-diff"><code class="language-diff"><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line">const App = () => ( </span><span class="token prefix unchanged"> </span><span class="token line"> return ( </span><span class="token prefix unchanged"> </span><span class="token line"> <ThemeProvider> </span><span class="token prefix unchanged"> </span><span class="token line"> {loading ? ( </span><span class="token prefix unchanged"> </span><span class="token line"> <Loader /> </span><span class="token prefix unchanged"> </span><span class="token line"> ) : ( </span><span class="token prefix unchanged"> </span><span class="token line"> <FaceLivenessDetector </span><span class="token prefix unchanged"> </span><span class="token line"> sessionId={createLivenessApiData.sessionId} </span><span class="token prefix unchanged"> </span><span class="token line"> region="us-east-1" </span><span class="token prefix unchanged"> </span><span class="token line"> onAnalysisComplete={handleAnalysisComplete} </span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> onError={(error) => { </span><span class="token prefix deleted">-</span><span class="token line"> console.error(error); </span><span class="token prefix deleted">-</span><span class="token line"> }} </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> onError={(livenessError) => { </span><span class="token prefix inserted">+</span><span class="token line"> console.error({ state: livenessError.state, error: livenessError.error}); </span><span class="token prefix inserted">+</span><span class="token line"> }} </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> /> </span><span class="token prefix unchanged"> </span><span class="token line"> )} </span><span class="token prefix unchanged"> </span><span class="token line"> </ThemeProvider> </span><span class="token prefix unchanged"> </span><span class="token line"> ); </span></span>); </code></pre> <h4 id="cdn-csp-policy-1"><a aria-hidden="true" tabindex="-1" href="#cdn-csp-policy-1"><span class="icon icon-link"></span></a>CDN CSP Policy</h4> <p>The 2.x version of the <code>FaceLivenessDetector</code> has updated the default CDN for TensorFlow and Blazeface to a new URL. If your application has an existing CSP policy, update your policy to allow <a href="https://cdn.liveness.rekognition.amazonaws.com">https://cdn.liveness.rekognition.amazonaws.com</a>. Please look over the <a href="../connected-components/liveness/customization#facelivenessdetectorconfig">Liveness Config</a> section for more information.</p> <h2 id="aws-amplifyui-react-notifications"><a aria-hidden="true" tabindex="-1" href="#aws-amplifyui-react-notifications"><span class="icon icon-link"></span></a><code>@aws-amplify/ui-react-notifications</code></h2> <h4 id="installation-7"><a aria-hidden="true" tabindex="-1" href="#installation-7"><span class="icon icon-link"></span></a>Installation</h4> <p>Install the 2.x version of <code>@aws-amplify/ui-react-notifications</code> and the 6.x version of <code>aws-amplify</code>.</p> <div class="amplify-flex amplify-message amplify-message--filled amplify-message--warning" title="Upgrade both @aws-amplify/ui-react and aws-amplify"><div class="amplify-message__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="M1 21H23L12 2L1 21ZM13 18H11V16H13V18ZM13 14H11V10H13V14Z" fill="currentColor"></path></svg></span></div><div class="amplify-flex amplify-message__content"><p>The 2.x version of <code>@aws-amplify/ui-react-notifications</code> has a minimum dependency of 6.x on <code>aws-amplify</code>. <code>aws-amplify@6</code> introduced breaking API changes.</p></div></div> <div class="amplify-tabs"><div role="tablist" class="amplify-tabs__list"><button role="tab" id="amplify-id-:R2jbpdl6:-tab-npm" aria-selected="true" aria-controls="amplify-id-:R2jbpdl6:-panel-npm" class="amplify-tabs__item amplify-tabs__item--active">npm</button><button role="tab" id="amplify-id-:R2jbpdl6:-tab-yarn" aria-selected="false" aria-controls="amplify-id-:R2jbpdl6:-panel-yarn" tabindex="-1" class="amplify-tabs__item">yarn</button></div><div role="tabpanel" id="amplify-id-:R2jbpdl6:-panel-npm" aria-labelledby="amplify-id-:R2jbpdl6:-tab-npm" class="amplify-tabs__panel amplify-tabs__panel--active"><div class="install-code__container default"><code class="install-code__content">npm install @aws-amplify/ui-react-notifications@2.x aws-amplify@6.x</code><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small install-code__button" type="button">Copy</button></div></div><div role="tabpanel" id="amplify-id-:R2jbpdl6:-panel-yarn" aria-labelledby="amplify-id-:R2jbpdl6:-tab-yarn" class="amplify-tabs__panel"><div class="install-code__container default"><code class="install-code__content">yarn add @aws-amplify/ui-react-notifications@2.x aws-amplify@6.x</code><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small install-code__button" type="button">Copy</button></div></div></div> <h4 id="update-and-usage-7"><a aria-hidden="true" tabindex="-1" href="#update-and-usage-7"><span class="icon icon-link"></span></a>Update and usage</h4> <p><code>@aws-amplify/ui-react-notifications@2.x</code> introduces the following breaking changes:</p> <h2 id="migrate-from-1x-to-2x-2"><a aria-hidden="true" tabindex="-1" href="#migrate-from-1x-to-2x-2"><span class="icon icon-link"></span></a>Migrate from 1.x to 2.x</h2> <p>Starting with <code>aws-amplify@6</code>, the Notifications category is no longer exported from the base <code>aws-amplify</code> package. If you are using in-app messaging you will need to change your imports accordingly and run <code>initializeInAppMessaging</code> before your application code:</p> <pre class="language-diff"><code class="language-diff"><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> import { Amplify, Notifications } from 'aws-amplify' </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> import { Amplify } from 'aws-amplify'; </span><span class="token prefix inserted">+</span><span class="token line"> import { initializeInAppMessaging, syncMessages } from 'aws-amplify/in-app-messaging'; </span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> import exports from './aws-exports'; </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> import config from './amplifyconfiguration'; </span></span> Amplify.configure(config); <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> const { InAppMessaging } = Notifications; </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> initializeInAppMessaging() </span></span> const MyApp = () => { <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> React.useEffect(() => { </span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> InAppMessaging.syncMessages() </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> syncMessages(); </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> }, []) </span></span> <span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> // .. </span></span>} </code></pre> <h2 id="aws-amplifyui-react-storage"><a aria-hidden="true" tabindex="-1" href="#aws-amplifyui-react-storage"><span class="icon icon-link"></span></a><code>@aws-amplify/ui-react-storage</code></h2> <h3 id="migrate-from-2x-to-3x-2"><a aria-hidden="true" tabindex="-1" href="#migrate-from-2x-to-3x-2"><span class="icon icon-link"></span></a>Migrate from 2.x to 3.x</h3> <h4 id="installation-8"><a aria-hidden="true" tabindex="-1" href="#installation-8"><span class="icon icon-link"></span></a>Installation</h4> <p>Install the 3.x version of <code>@aws-amplify/ui-react-storage</code> and the 6.x version of <code>aws-amplify</code>.</p> <div class="amplify-flex amplify-message amplify-message--filled amplify-message--warning" title="Upgrade both @aws-amplify/ui-react-storage and aws-amplify"><div class="amplify-message__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="M1 21H23L12 2L1 21ZM13 18H11V16H13V18ZM13 14H11V10H13V14Z" fill="currentColor"></path></svg></span></div><div class="amplify-flex amplify-message__content"><p>The 3.x version of <code>@aws-amplify/ui-react-storage</code> has a minimum dependency of 6.x on <code>aws-amplify</code>. <code>aws-amplify@6</code> introduced breaking API changes.</p></div></div> <div class="amplify-tabs"><div role="tablist" class="amplify-tabs__list"><button role="tab" id="amplify-id-:R2orpdl6:-tab-npm" aria-selected="true" aria-controls="amplify-id-:R2orpdl6:-panel-npm" class="amplify-tabs__item amplify-tabs__item--active">npm</button><button role="tab" id="amplify-id-:R2orpdl6:-tab-yarn" aria-selected="false" aria-controls="amplify-id-:R2orpdl6:-panel-yarn" tabindex="-1" class="amplify-tabs__item">yarn</button></div><div role="tabpanel" id="amplify-id-:R2orpdl6:-panel-npm" aria-labelledby="amplify-id-:R2orpdl6:-tab-npm" class="amplify-tabs__panel amplify-tabs__panel--active"><div class="install-code__container default"><code class="install-code__content">npm install @aws-amplify/ui-react-storage@3.x aws-amplify@6.x</code><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small install-code__button" type="button">Copy</button></div></div><div role="tabpanel" id="amplify-id-:R2orpdl6:-panel-yarn" aria-labelledby="amplify-id-:R2orpdl6:-tab-yarn" class="amplify-tabs__panel"><div class="install-code__container default"><code class="install-code__content">yarn add @aws-amplify/ui-react-storage@3.x aws-amplify@6.x</code><button class="amplify-button amplify-field-group__control amplify-button--link amplify-button--small install-code__button" type="button">Copy</button></div></div></div> <h4 id="update-and-usage-8"><a aria-hidden="true" tabindex="-1" href="#update-and-usage-8"><span class="icon icon-link"></span></a>Update and usage</h4> <p><code>@aws-amplify/ui-react-storage@3.x</code> introduces the following breaking changes:</p> <h4 id="1-public-accesslevel-becomes-guest-in-storage-components"><a aria-hidden="true" tabindex="-1" href="#1-public-accesslevel-becomes-guest-in-storage-components"><span class="icon icon-link"></span></a>1. public accessLevel becomes 'guest' in Storage components</h4> <p>Starting in v6 of the Amplify JS libraries, <code>'public'</code> access level, meaning unauthentiated users can access it, became <code>'guest'</code>. The <code>accessLevel</code> property on FileUploader and StorageImage components have been updated to reflect this change.</p> </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]/getting-started/migration","query":{"platform":"react"},"buildId":"-WIT3zg9fx60YQufP5mRY","isFallback":false,"gsp":true,"scriptLoader":[]}</script></body></html>