@aws-amplify/ui 5.8.1 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (343) hide show
  1. package/dist/esm/helpers/accountSettings/utils.mjs +33 -1
  2. package/dist/esm/helpers/accountSettings/validator.mjs +120 -1
  3. package/dist/esm/helpers/authenticator/actor.mjs +20 -1
  4. package/dist/esm/helpers/authenticator/constants.mjs +144 -1
  5. package/dist/esm/helpers/authenticator/defaultAuthHubHandler.mjs +52 -0
  6. package/dist/esm/helpers/authenticator/facade.mjs +137 -1
  7. package/dist/esm/helpers/authenticator/form.mjs +43 -1
  8. package/dist/esm/helpers/authenticator/formFields/defaults.mjs +132 -1
  9. package/dist/esm/helpers/authenticator/formFields/formFields.mjs +62 -1
  10. package/dist/esm/helpers/authenticator/formFields/utils.mjs +35 -0
  11. package/dist/esm/helpers/authenticator/getRoute.mjs +47 -0
  12. package/dist/esm/helpers/authenticator/textUtil.mjs +112 -1
  13. package/dist/esm/helpers/authenticator/utils.mjs +38 -1
  14. package/dist/esm/helpers/utils.mjs +5 -1
  15. package/dist/esm/i18n/country-dial-codes.mjs +210 -1
  16. package/dist/esm/i18n/dictionaries/authenticator/de.mjs +87 -1
  17. package/dist/esm/i18n/dictionaries/authenticator/defaultTexts.mjs +83 -1
  18. package/dist/esm/i18n/dictionaries/authenticator/en.mjs +74 -1
  19. package/dist/esm/i18n/dictionaries/authenticator/es.mjs +83 -1
  20. package/dist/esm/i18n/dictionaries/authenticator/fr.mjs +92 -1
  21. package/dist/esm/i18n/dictionaries/authenticator/he.mjs +54 -1
  22. package/dist/esm/i18n/dictionaries/authenticator/id.mjs +96 -1
  23. package/dist/esm/i18n/dictionaries/authenticator/it.mjs +82 -1
  24. package/dist/esm/i18n/dictionaries/authenticator/ja.mjs +86 -1
  25. package/dist/esm/i18n/dictionaries/authenticator/kr.mjs +71 -1
  26. package/dist/esm/i18n/dictionaries/authenticator/nb.mjs +95 -1
  27. package/dist/esm/i18n/dictionaries/authenticator/nl.mjs +67 -1
  28. package/dist/esm/i18n/dictionaries/authenticator/pl.mjs +71 -1
  29. package/dist/esm/i18n/dictionaries/authenticator/pt.mjs +61 -1
  30. package/dist/esm/i18n/dictionaries/authenticator/ru.mjs +61 -1
  31. package/dist/esm/i18n/dictionaries/authenticator/sv.mjs +82 -1
  32. package/dist/esm/i18n/dictionaries/authenticator/tr.mjs +76 -1
  33. package/dist/esm/i18n/dictionaries/authenticator/ua.mjs +84 -1
  34. package/dist/esm/i18n/dictionaries/authenticator/zh.mjs +74 -1
  35. package/dist/esm/i18n/dictionaries/index.mjs +47 -1
  36. package/dist/esm/i18n/translations.mjs +67 -1
  37. package/dist/esm/index.mjs +28 -1
  38. package/dist/esm/machines/authenticator/actions.mjs +188 -1
  39. package/dist/esm/machines/authenticator/actors/forgotPassword.mjs +184 -0
  40. package/dist/esm/machines/authenticator/actors/signIn.mjs +328 -1
  41. package/dist/esm/machines/authenticator/actors/signOut.mjs +28 -1
  42. package/dist/esm/machines/authenticator/actors/signUp.mjs +295 -0
  43. package/dist/esm/machines/authenticator/actors/verifyUserAttributes.mjs +106 -0
  44. package/dist/esm/machines/authenticator/defaultServices.mjs +102 -1
  45. package/dist/esm/machines/authenticator/guards.mjs +70 -0
  46. package/dist/esm/machines/authenticator/index.mjs +368 -1
  47. package/dist/esm/machines/authenticator/utils.mjs +71 -0
  48. package/dist/esm/theme/breakpoints.mjs +14 -1
  49. package/dist/esm/theme/createTheme.mjs +156 -1
  50. package/dist/esm/theme/defaultDarkModeOverride.mjs +128 -1
  51. package/dist/esm/theme/defaultTheme.mjs +10 -1
  52. package/dist/esm/theme/tokens/borderWidths.mjs +7 -1
  53. package/dist/esm/theme/tokens/colors.mjs +166 -1
  54. package/dist/esm/theme/tokens/components/accordion.mjs +47 -0
  55. package/dist/esm/theme/tokens/components/alert.mjs +35 -1
  56. package/dist/esm/theme/tokens/components/authenticator.mjs +39 -1
  57. package/dist/esm/theme/tokens/components/autocomplete.mjs +42 -1
  58. package/dist/esm/theme/tokens/components/badge.mjs +44 -1
  59. package/dist/esm/theme/tokens/components/breadcrumbs.mjs +34 -1
  60. package/dist/esm/theme/tokens/components/button.mjs +685 -1
  61. package/dist/esm/theme/tokens/components/card.mjs +27 -1
  62. package/dist/esm/theme/tokens/components/checkbox.mjs +87 -1
  63. package/dist/esm/theme/tokens/components/checkboxField.mjs +8 -1
  64. package/dist/esm/theme/tokens/components/collection.mjs +72 -1
  65. package/dist/esm/theme/tokens/components/copy.mjs +18 -1
  66. package/dist/esm/theme/tokens/components/dialCodeSelect.mjs +7 -1
  67. package/dist/esm/theme/tokens/components/divider.mjs +22 -1
  68. package/dist/esm/theme/tokens/components/dropZone.mjs +46 -1
  69. package/dist/esm/theme/tokens/components/field.mjs +20 -1
  70. package/dist/esm/theme/tokens/components/fieldControl.mjs +131 -1
  71. package/dist/esm/theme/tokens/components/fieldGroup.mjs +11 -1
  72. package/dist/esm/theme/tokens/components/fieldMessages.mjs +13 -1
  73. package/dist/esm/theme/tokens/components/fieldset.mjs +40 -1
  74. package/dist/esm/theme/tokens/components/flex.mjs +9 -1
  75. package/dist/esm/theme/tokens/components/heading.mjs +30 -1
  76. package/dist/esm/theme/tokens/components/highlightMatch.mjs +7 -1
  77. package/dist/esm/theme/tokens/components/icon.mjs +6 -1
  78. package/dist/esm/theme/tokens/components/image.mjs +8 -1
  79. package/dist/esm/theme/tokens/components/inAppMessaging.mjs +23 -1
  80. package/dist/esm/theme/tokens/components/index.mjs +111 -1
  81. package/dist/esm/theme/tokens/components/input.mjs +12 -1
  82. package/dist/esm/theme/tokens/components/link.mjs +9 -1
  83. package/dist/esm/theme/tokens/components/liveness.mjs +7 -1
  84. package/dist/esm/theme/tokens/components/loader.mjs +42 -1
  85. package/dist/esm/theme/tokens/components/menu.mjs +27 -1
  86. package/dist/esm/theme/tokens/components/message.mjs +102 -1
  87. package/dist/esm/theme/tokens/components/pagination.mjs +40 -1
  88. package/dist/esm/theme/tokens/components/passwordField.mjs +38 -1
  89. package/dist/esm/theme/tokens/components/phoneNumberField.mjs +10 -1
  90. package/dist/esm/theme/tokens/components/placeholder.mjs +18 -1
  91. package/dist/esm/theme/tokens/components/radio.mjs +67 -1
  92. package/dist/esm/theme/tokens/components/radioGroup.mjs +19 -1
  93. package/dist/esm/theme/tokens/components/rating.mjs +9 -1
  94. package/dist/esm/theme/tokens/components/searchField.mjs +39 -1
  95. package/dist/esm/theme/tokens/components/select.mjs +63 -1
  96. package/dist/esm/theme/tokens/components/selectField.mjs +16 -1
  97. package/dist/esm/theme/tokens/components/sliderField.mjs +70 -1
  98. package/dist/esm/theme/tokens/components/stepperField.mjs +33 -1
  99. package/dist/esm/theme/tokens/components/storagemanager.mjs +97 -1
  100. package/dist/esm/theme/tokens/components/switchField.mjs +61 -1
  101. package/dist/esm/theme/tokens/components/table.mjs +105 -1
  102. package/dist/esm/theme/tokens/components/tabs.mjs +59 -1
  103. package/dist/esm/theme/tokens/components/text.mjs +28 -1
  104. package/dist/esm/theme/tokens/components/textAreaField.mjs +11 -1
  105. package/dist/esm/theme/tokens/components/textField.mjs +12 -1
  106. package/dist/esm/theme/tokens/components/toggleButton.mjs +96 -1
  107. package/dist/esm/theme/tokens/components/toggleButtonGroup.mjs +7 -1
  108. package/dist/esm/theme/tokens/fontSizes.mjs +14 -1
  109. package/dist/esm/theme/tokens/fontWeights.mjs +13 -1
  110. package/dist/esm/theme/tokens/fonts.mjs +19 -1
  111. package/dist/esm/theme/tokens/index.mjs +65 -1
  112. package/dist/esm/theme/tokens/lineHeights.mjs +7 -1
  113. package/dist/esm/theme/tokens/opacities.mjs +15 -1
  114. package/dist/esm/theme/tokens/outlineOffsets.mjs +7 -1
  115. package/dist/esm/theme/tokens/outlineWidths.mjs +7 -1
  116. package/dist/esm/theme/tokens/radii.mjs +11 -1
  117. package/dist/esm/theme/tokens/shadows.mjs +28 -1
  118. package/dist/esm/theme/tokens/space.mjs +29 -1
  119. package/dist/esm/theme/tokens/time.mjs +7 -1
  120. package/dist/esm/theme/tokens/transforms.mjs +10 -1
  121. package/dist/esm/theme/utils.mjs +81 -1
  122. package/dist/esm/types/authenticator/attributes.mjs +41 -1
  123. package/dist/esm/types/authenticator/user.mjs +18 -1
  124. package/dist/esm/types/authenticator/utils.mjs +5 -1
  125. package/dist/esm/types/primitives/componentClassName.mjs +164 -1
  126. package/dist/esm/utils/classNames.mjs +39 -0
  127. package/dist/esm/utils/setUserAgent/constants.mjs +43 -0
  128. package/dist/esm/utils/setUserAgent/setUserAgent.mjs +65 -0
  129. package/dist/esm/utils/utils.mjs +227 -0
  130. package/dist/esm/validators/index.mjs +19 -1
  131. package/dist/index.js +8396 -1
  132. package/dist/styles/StorageManager.css +138 -0
  133. package/dist/styles/StorageManager.layer.css +140 -0
  134. package/dist/styles/_fieldControl.css +0 -0
  135. package/dist/styles/_fieldControl.layer.css +3 -0
  136. package/dist/styles/accordion.css +64 -0
  137. package/dist/styles/accordion.layer.css +66 -0
  138. package/dist/styles/alert.css +44 -0
  139. package/dist/styles/alert.layer.css +46 -0
  140. package/dist/styles/authenticator.css +72 -0
  141. package/dist/styles/authenticator.layer.css +74 -0
  142. package/dist/styles/autocomplete.css +48 -0
  143. package/dist/styles/autocomplete.layer.css +50 -0
  144. package/dist/styles/badge.css +35 -0
  145. package/dist/styles/badge.layer.css +37 -0
  146. package/dist/styles/base.css +1491 -0
  147. package/dist/styles/base.layer.css +1493 -0
  148. package/dist/styles/breadcrumbs.css +40 -0
  149. package/dist/styles/breadcrumbs.layer.css +42 -0
  150. package/dist/styles/button.css +1122 -0
  151. package/dist/styles/button.layer.css +1124 -0
  152. package/dist/styles/card.css +26 -0
  153. package/dist/styles/card.layer.css +28 -0
  154. package/dist/styles/checkbox.css +95 -0
  155. package/dist/styles/checkbox.layer.css +97 -0
  156. package/dist/styles/checkboxField.css +6 -0
  157. package/dist/styles/checkboxField.layer.css +8 -0
  158. package/dist/styles/collection.css +70 -0
  159. package/dist/styles/collection.layer.css +72 -0
  160. package/dist/styles/copy.css +27 -0
  161. package/dist/styles/copy.layer.css +29 -0
  162. package/dist/styles/dialCodeSelect.css +3 -0
  163. package/dist/styles/dialCodeSelect.layer.css +5 -0
  164. package/dist/styles/divider.css +47 -0
  165. package/dist/styles/divider.layer.css +49 -0
  166. package/dist/styles/dropZone.css +45 -0
  167. package/dist/styles/dropZone.layer.css +47 -0
  168. package/dist/styles/field.css +17 -0
  169. package/dist/styles/field.layer.css +19 -0
  170. package/dist/styles/fieldGroup.css +130 -0
  171. package/dist/styles/fieldGroup.layer.css +132 -0
  172. package/dist/styles/fieldMessages.css +10 -0
  173. package/dist/styles/fieldMessages.layer.css +12 -0
  174. package/dist/styles/fieldModifiers.css +15 -0
  175. package/dist/styles/fieldModifiers.layer.css +17 -0
  176. package/dist/styles/fieldset.css +37 -0
  177. package/dist/styles/fieldset.layer.css +39 -0
  178. package/dist/styles/flex.css +8 -0
  179. package/dist/styles/flex.layer.css +10 -0
  180. package/dist/styles/grid.css +3 -0
  181. package/dist/styles/grid.layer.css +5 -0
  182. package/dist/styles/heading.css +40 -0
  183. package/dist/styles/heading.layer.css +42 -0
  184. package/dist/styles/highlightMatch.css +3 -0
  185. package/dist/styles/highlightMatch.layer.css +5 -0
  186. package/dist/styles/icon.css +14 -0
  187. package/dist/styles/icon.layer.css +16 -0
  188. package/dist/styles/image.css +9 -0
  189. package/dist/styles/image.layer.css +11 -0
  190. package/dist/styles/inAppMessaging.css +179 -0
  191. package/dist/styles/inAppMessaging.layer.css +181 -0
  192. package/dist/styles/input.css +83 -0
  193. package/dist/styles/input.layer.css +85 -0
  194. package/dist/styles/link.css +26 -0
  195. package/dist/styles/link.layer.css +28 -0
  196. package/dist/styles/liveness.css +374 -0
  197. package/dist/styles/liveness.layer.css +376 -0
  198. package/dist/styles/loader.css +108 -0
  199. package/dist/styles/loader.layer.css +110 -0
  200. package/dist/styles/menu.css +54 -0
  201. package/dist/styles/menu.layer.css +56 -0
  202. package/dist/styles/message.css +111 -0
  203. package/dist/styles/message.layer.css +113 -0
  204. package/dist/styles/pagination.css +41 -0
  205. package/dist/styles/pagination.layer.css +43 -0
  206. package/dist/styles/passwordField.css +49 -0
  207. package/dist/styles/passwordField.layer.css +51 -0
  208. package/dist/styles/phoneNumberField.css +30 -0
  209. package/dist/styles/phoneNumberField.layer.css +32 -0
  210. package/dist/styles/placeholder.css +31 -0
  211. package/dist/styles/placeholder.layer.css +33 -0
  212. package/dist/styles/radio.css +82 -0
  213. package/dist/styles/radio.layer.css +84 -0
  214. package/dist/styles/radioGroupField.css +25 -0
  215. package/dist/styles/radioGroupField.layer.css +27 -0
  216. package/dist/styles/radiogroup.css +5 -0
  217. package/dist/styles/radiogroup.layer.css +7 -0
  218. package/dist/styles/rating.css +33 -0
  219. package/dist/styles/rating.layer.css +35 -0
  220. package/dist/styles/reset.css +76 -0
  221. package/dist/styles/reset.layer.css +78 -0
  222. package/dist/styles/scrollView.css +4 -0
  223. package/dist/styles/scrollView.layer.css +6 -0
  224. package/dist/styles/searchField.css +29 -0
  225. package/dist/styles/searchField.layer.css +31 -0
  226. package/dist/styles/select.css +128 -0
  227. package/dist/styles/select.layer.css +130 -0
  228. package/dist/styles/selectField.css +18 -0
  229. package/dist/styles/selectField.layer.css +20 -0
  230. package/dist/styles/sliderField.css +143 -0
  231. package/dist/styles/sliderField.layer.css +145 -0
  232. package/dist/styles/stepperField.css +77 -0
  233. package/dist/styles/stepperField.layer.css +79 -0
  234. package/dist/styles/switchField.css +76 -0
  235. package/dist/styles/switchField.layer.css +78 -0
  236. package/dist/styles/table.css +146 -0
  237. package/dist/styles/table.layer.css +148 -0
  238. package/dist/styles/tabs.css +87 -0
  239. package/dist/styles/tabs.layer.css +89 -0
  240. package/dist/styles/text.css +40 -0
  241. package/dist/styles/text.layer.css +42 -0
  242. package/dist/styles/textArea.css +71 -0
  243. package/dist/styles/textArea.layer.css +73 -0
  244. package/dist/styles/textAreaField.css +12 -0
  245. package/dist/styles/textAreaField.layer.css +14 -0
  246. package/dist/styles/textField.css +14 -0
  247. package/dist/styles/textField.layer.css +16 -0
  248. package/dist/styles/toggleButton.css +280 -0
  249. package/dist/styles/toggleButton.layer.css +282 -0
  250. package/dist/styles/toggleButtonGroup.css +31 -0
  251. package/dist/styles/toggleButtonGroup.layer.css +33 -0
  252. package/dist/styles/visuallyHidden.css +12 -0
  253. package/dist/styles/visuallyHidden.layer.css +14 -0
  254. package/dist/styles.css +298 -684
  255. package/dist/styles.layer.css +6115 -0
  256. package/dist/theme.css +93 -156
  257. package/dist/types/helpers/accountSettings/utils.d.ts +1 -3
  258. package/dist/types/helpers/authenticator/actor.d.ts +1 -1
  259. package/dist/types/helpers/authenticator/constants.d.ts +5 -0
  260. package/dist/types/helpers/authenticator/defaultAuthHubHandler.d.ts +15 -0
  261. package/dist/types/helpers/authenticator/facade.d.ts +35 -6
  262. package/dist/types/helpers/authenticator/formFields/defaults.d.ts +3 -1
  263. package/dist/types/helpers/authenticator/formFields/formFields.d.ts +2 -1
  264. package/dist/types/helpers/authenticator/formFields/index.d.ts +1 -1
  265. package/dist/types/helpers/authenticator/formFields/{util.d.ts → utils.d.ts} +2 -0
  266. package/dist/types/helpers/authenticator/getRoute.d.ts +2 -0
  267. package/dist/types/helpers/authenticator/index.d.ts +2 -1
  268. package/dist/types/helpers/authenticator/textUtil.d.ts +8 -7
  269. package/dist/types/{types/authenticator/stateMachine/authMachine.d.ts → helpers/authenticator/types.d.ts} +5 -5
  270. package/dist/types/helpers/authenticator/utils.d.ts +0 -25
  271. package/dist/types/helpers/index.d.ts +0 -1
  272. package/dist/types/helpers/utils.d.ts +2 -2
  273. package/dist/types/i18n/translations.d.ts +2 -3
  274. package/dist/types/machines/authenticator/actions.d.ts +4 -62
  275. package/dist/types/machines/authenticator/actors/{resetPassword.d.ts → forgotPassword.d.ts} +3 -3
  276. package/dist/types/machines/authenticator/actors/index.d.ts +3 -1
  277. package/dist/types/machines/authenticator/actors/signIn.d.ts +3 -3
  278. package/dist/types/machines/authenticator/actors/signOut.d.ts +2 -2
  279. package/dist/types/machines/authenticator/{signUp.d.ts → actors/signUp.d.ts} +3 -3
  280. package/dist/types/machines/authenticator/actors/verifyUserAttributes.d.ts +5 -0
  281. package/dist/types/machines/authenticator/defaultServices.d.ts +208 -28
  282. package/dist/types/machines/authenticator/getAuthenticatorConfig.d.ts +14 -0
  283. package/dist/types/machines/authenticator/guards.d.ts +4 -0
  284. package/dist/types/machines/authenticator/index.d.ts +4 -2
  285. package/dist/types/machines/authenticator/types.d.ts +125 -0
  286. package/dist/types/machines/authenticator/utils.d.ts +7 -0
  287. package/dist/types/machines/index.d.ts +1 -0
  288. package/dist/types/theme/tokens/borderWidths.d.ts +2 -2
  289. package/dist/types/theme/tokens/colors.d.ts +7 -9
  290. package/dist/types/theme/tokens/components/accordion.d.ts +12 -0
  291. package/dist/types/theme/tokens/components/index.d.ts +2 -4
  292. package/dist/types/theme/tokens/components/radioGroup.d.ts +1 -1
  293. package/dist/types/theme/tokens/components/storagemanager.d.ts +18 -3
  294. package/dist/types/theme/tokens/components/tabs.d.ts +4 -3
  295. package/dist/types/theme/tokens/fontSizes.d.ts +2 -2
  296. package/dist/types/theme/tokens/fontWeights.d.ts +2 -2
  297. package/dist/types/theme/tokens/fonts.d.ts +2 -2
  298. package/dist/types/theme/tokens/lineHeights.d.ts +2 -2
  299. package/dist/types/theme/tokens/opacities.d.ts +2 -2
  300. package/dist/types/theme/tokens/outlineOffsets.d.ts +2 -2
  301. package/dist/types/theme/tokens/outlineWidths.d.ts +2 -2
  302. package/dist/types/theme/tokens/radii.d.ts +2 -2
  303. package/dist/types/theme/tokens/shadows.d.ts +2 -2
  304. package/dist/types/theme/tokens/space.d.ts +2 -2
  305. package/dist/types/theme/tokens/time.d.ts +2 -2
  306. package/dist/types/theme/tokens/types/designToken.d.ts +12 -6
  307. package/dist/types/theme/types.d.ts +5 -1
  308. package/dist/types/types/authenticator/attributes.d.ts +10 -4
  309. package/dist/types/types/authenticator/form.d.ts +7 -6
  310. package/dist/types/types/authenticator/index.d.ts +0 -1
  311. package/dist/types/types/authenticator/user.d.ts +3 -29
  312. package/dist/types/types/authenticator/validator.d.ts +2 -2
  313. package/dist/types/types/displayText.d.ts +84 -0
  314. package/dist/types/types/index.d.ts +1 -0
  315. package/dist/types/types/primitives/componentClassName.d.ts +162 -180
  316. package/dist/types/types/util.d.ts +0 -5
  317. package/dist/types/utils/classNames.d.ts +4 -0
  318. package/dist/types/utils/index.d.ts +3 -135
  319. package/dist/types/utils/setUserAgent/constants.d.ts +7 -0
  320. package/dist/types/utils/setUserAgent/index.d.ts +1 -0
  321. package/dist/types/utils/setUserAgent/setUserAgent.d.ts +19 -0
  322. package/dist/types/utils/utils.d.ts +147 -0
  323. package/dist/types/validators/index.d.ts +2 -2
  324. package/package.json +5 -19
  325. package/dist/esm/helpers/authenticator/context.mjs +0 -1
  326. package/dist/esm/helpers/authenticator/formFields/util.mjs +0 -1
  327. package/dist/esm/helpers/storage/fileUploader/utils/uploader.mjs +0 -1
  328. package/dist/esm/machines/authenticator/actors/resetPassword.mjs +0 -1
  329. package/dist/esm/machines/authenticator/signUp.mjs +0 -1
  330. package/dist/esm/theme/tokens/components/expander.mjs +0 -1
  331. package/dist/esm/theme/tokens/components/fileUploader.mjs +0 -1
  332. package/dist/esm/utils/index.mjs +0 -1
  333. package/dist/types/helpers/authenticator/context.d.ts +0 -13
  334. package/dist/types/helpers/storage/fileUploader/index.d.ts +0 -1
  335. package/dist/types/helpers/storage/fileUploader/utils/index.d.ts +0 -1
  336. package/dist/types/helpers/storage/fileUploader/utils/uploader.d.ts +0 -28
  337. package/dist/types/helpers/storage/index.d.ts +0 -1
  338. package/dist/types/theme/tokens/components/expander.d.ts +0 -22
  339. package/dist/types/theme/tokens/components/fileUploader.d.ts +0 -23
  340. package/dist/types/types/authenticator/stateMachine/context.d.ts +0 -109
  341. package/dist/types/types/authenticator/stateMachine/event.d.ts +0 -17
  342. package/dist/types/types/authenticator/stateMachine/index.d.ts +0 -4
  343. package/dist/types/types/authenticator/stateMachine/state.d.ts +0 -10
package/dist/styles/button.layer.css ADDED
@@ -0,0 +1,1124 @@
1
+ @layer amplify.components {
2
+ /*
3
+ * Button base styles
4
+ */
5
+ .amplify-button {
6
+ --amplify-internal-button-background-color: var(
7
+ --amplify-components-button-background-color
8
+ );
9
+ --amplify-internal-button-border-color: var(
10
+ --amplify-components-button-border-color
11
+ );
12
+ --amplify-internal-button-color: var(--amplify-components-button-color);
13
+ --amplify-internal-button-focus-box-shadow: var(
14
+ --amplify-components-button-focus-box-shadow
15
+ );
16
+ --amplify-internal-button-border-width: var(
17
+ --amplify-components-button-border-width
18
+ );
19
+ align-items: center;
20
+ background-color: var(--amplify-internal-button-background-color);
21
+ border-color: var(--amplify-internal-button-border-color);
22
+ border-radius: var(--amplify-components-button-border-radius);
23
+ border-style: var(--amplify-components-button-border-style);
24
+ border-width: var(--amplify-internal-button-border-width);
25
+ box-sizing: border-box;
26
+ color: var(--amplify-internal-button-color);
27
+ cursor: pointer;
28
+ display: inline-flex;
29
+ font-size: var(--amplify-components-button-font-size);
30
+ font-weight: var(--amplify-components-button-font-weight);
31
+ justify-content: center;
32
+ line-height: var(--amplify-components-button-line-height);
33
+ padding-block-start: var(--amplify-components-button-padding-block-start);
34
+ padding-block-end: var(--amplify-components-button-padding-block-end);
35
+ padding-inline-start: var(--amplify-components-button-padding-inline-start);
36
+ padding-inline-end: var(--amplify-components-button-padding-inline-end);
37
+ transition: all var(--amplify-components-button-transition-duration);
38
+ -webkit-user-select: none;
39
+ -moz-user-select: none;
40
+ user-select: none;
41
+ --amplify-internal-button-disabled-color: var(
42
+ --amplify-components-button-disabled-color
43
+ );
44
+ --amplify-internal-button-disabled-background-color: var(
45
+ --amplify-components-button-disabled-background-color
46
+ );
47
+ --amplify-internal-button-disabled-border-color: var(
48
+ --amplify-components-button-disabled-border-color
49
+ );
50
+ --amplify-internal-button-disabled-text-decoration: initial;
51
+ --amplify-internal-button-loading-background-color: var(
52
+ --amplify-components-button-loading-background-color
53
+ );
54
+ --amplify-internal-button-loading-border-color: var(
55
+ --amplify-components-button-loading-border-color
56
+ );
57
+ --amplify-internal-button-loading-color: var(
58
+ --amplify-components-button-loading-color
59
+ );
60
+ --amplify-internal-button-loading-text-decoration: initial;
61
+ }
62
+ .amplify-button:hover {
63
+ --amplify-internal-button-background-color: var(
64
+ --amplify-components-button-hover-background-color
65
+ );
66
+ --amplify-internal-button-border-color: var(
67
+ --amplify-components-button-hover-border-color
68
+ );
69
+ --amplify-internal-button-color: var(
70
+ --amplify-components-button-hover-color
71
+ );
72
+ }
73
+ .amplify-button:focus {
74
+ --amplify-internal-button-background-color: var(
75
+ --amplify-components-button-hover-background-color
76
+ );
77
+ --amplify-internal-button-border-color: var(
78
+ --amplify-components-button-focus-border-color
79
+ );
80
+ --amplify-internal-button-color: var(
81
+ --amplify-components-button-focus-color
82
+ );
83
+ box-shadow: var(--amplify-internal-button-focus-box-shadow);
84
+ }
85
+ .amplify-button:active {
86
+ --amplify-internal-button-background-color: var(
87
+ --amplify-components-button-active-background-color
88
+ );
89
+ --amplify-internal-button-border-color: var(
90
+ --amplify-components-button-active-border-color
91
+ );
92
+ --amplify-internal-button-color: var(
93
+ --amplify-components-button-active-color
94
+ );
95
+ }
96
+ .amplify-button--fullwidth {
97
+ width: 100%;
98
+ }
99
+ .amplify-button--outlined--info {
100
+ --amplify-internal-button-background-color: var(
101
+ --amplify-components-button-outlined-info-background-color
102
+ );
103
+ --amplify-internal-button-border-color: var(
104
+ --amplify-components-button-outlined-info-border-color
105
+ );
106
+ --amplify-internal-button-color: var(
107
+ --amplify-components-button-outlined-info-color
108
+ );
109
+ }
110
+ .amplify-button--outlined--info:hover {
111
+ --amplify-internal-button-background-color: var(
112
+ --amplify-components-button-outlined-info-hover-background-color
113
+ );
114
+ --amplify-internal-button-border-color: var(
115
+ --amplify-components-button-outlined-info-hover-border-color
116
+ );
117
+ --amplify-internal-button-color: var(
118
+ --amplify-components-button-outlined-info-hover-color
119
+ );
120
+ }
121
+ .amplify-button--outlined--info:focus {
122
+ --amplify-internal-button-background-color: var(
123
+ --amplify-components-button-outlined-info-focus-background-color
124
+ );
125
+ --amplify-internal-button-border-color: var(
126
+ --amplify-components-button-outlined-info-focus-border-color
127
+ );
128
+ --amplify-internal-button-color: var(
129
+ --amplify-components-button-outlined-info-focus-color
130
+ );
131
+ --amplify-internal-button-focus-box-shadow: var(
132
+ --amplify-components-button-outlined-info-focus-box-shadow
133
+ );
134
+ }
135
+ .amplify-button--outlined--info:active {
136
+ --amplify-internal-button-background-color: var(
137
+ --amplify-components-button-outlined-info-active-background-color
138
+ );
139
+ --amplify-internal-button-border-color: var(
140
+ --amplify-components-button-outlined-info-active-border-color
141
+ );
142
+ --amplify-internal-button-color: var(
143
+ --amplify-components-button-outlined-info-active-color
144
+ );
145
+ }
146
+ .amplify-button--outlined--warning {
147
+ --amplify-internal-button-background-color: var(
148
+ --amplify-components-button-outlined-warning-background-color
149
+ );
150
+ --amplify-internal-button-border-color: var(
151
+ --amplify-components-button-outlined-warning-border-color
152
+ );
153
+ --amplify-internal-button-color: var(
154
+ --amplify-components-button-outlined-warning-color
155
+ );
156
+ }
157
+ .amplify-button--outlined--warning:hover {
158
+ --amplify-internal-button-background-color: var(
159
+ --amplify-components-button-outlined-warning-hover-background-color
160
+ );
161
+ --amplify-internal-button-border-color: var(
162
+ --amplify-components-button-outlined-warning-hover-border-color
163
+ );
164
+ --amplify-internal-button-color: var(
165
+ --amplify-components-button-outlined-warning-hover-color
166
+ );
167
+ }
168
+ .amplify-button--outlined--warning:focus {
169
+ --amplify-internal-button-background-color: var(
170
+ --amplify-components-button-outlined-warning-focus-background-color
171
+ );
172
+ --amplify-internal-button-border-color: var(
173
+ --amplify-components-button-outlined-warning-focus-border-color
174
+ );
175
+ --amplify-internal-button-color: var(
176
+ --amplify-components-button-outlined-warning-focus-color
177
+ );
178
+ --amplify-internal-button-focus-box-shadow: var(
179
+ --amplify-components-button-outlined-warning-focus-box-shadow
180
+ );
181
+ }
182
+ .amplify-button--outlined--warning:active {
183
+ --amplify-internal-button-background-color: var(
184
+ --amplify-components-button-outlined-warning-active-background-color
185
+ );
186
+ --amplify-internal-button-border-color: var(
187
+ --amplify-components-button-outlined-warning-active-border-color
188
+ );
189
+ --amplify-internal-button-color: var(
190
+ --amplify-components-button-outlined-warning-active-color
191
+ );
192
+ }
193
+ .amplify-button--outlined--error {
194
+ --amplify-internal-button-background-color: var(
195
+ --amplify-components-button-outlined-error-background-color
196
+ );
197
+ --amplify-internal-button-border-color: var(
198
+ --amplify-components-button-outlined-error-border-color
199
+ );
200
+ --amplify-internal-button-color: var(
201
+ --amplify-components-button-outlined-error-color
202
+ );
203
+ }
204
+ .amplify-button--outlined--error:hover {
205
+ --amplify-internal-button-background-color: var(
206
+ --amplify-components-button-outlined-error-hover-background-color
207
+ );
208
+ --amplify-internal-button-border-color: var(
209
+ --amplify-components-button-outlined-error-hover-border-color
210
+ );
211
+ --amplify-internal-button-color: var(
212
+ --amplify-components-button-outlined-error-hover-color
213
+ );
214
+ }
215
+ .amplify-button--outlined--error:focus {
216
+ --amplify-internal-button-background-color: var(
217
+ --amplify-components-button-outlined-error-focus-background-color
218
+ );
219
+ --amplify-internal-button-border-color: var(
220
+ --amplify-components-button-outlined-error-focus-border-color
221
+ );
222
+ --amplify-internal-button-color: var(
223
+ --amplify-components-button-outlined-error-focus-color
224
+ );
225
+ --amplify-internal-button-focus-box-shadow: var(
226
+ --amplify-components-button-outlined-error-focus-box-shadow
227
+ );
228
+ }
229
+ .amplify-button--outlined--error:active {
230
+ --amplify-internal-button-background-color: var(
231
+ --amplify-components-button-outlined-error-active-background-color
232
+ );
233
+ --amplify-internal-button-border-color: var(
234
+ --amplify-components-button-outlined-error-active-border-color
235
+ );
236
+ --amplify-internal-button-color: var(
237
+ --amplify-components-button-outlined-error-active-color
238
+ );
239
+ }
240
+ .amplify-button--outlined--success {
241
+ --amplify-internal-button-background-color: var(
242
+ --amplify-components-button-outlined-success-background-color
243
+ );
244
+ --amplify-internal-button-border-color: var(
245
+ --amplify-components-button-outlined-success-border-color
246
+ );
247
+ --amplify-internal-button-color: var(
248
+ --amplify-components-button-outlined-success-color
249
+ );
250
+ }
251
+ .amplify-button--outlined--success:hover {
252
+ --amplify-internal-button-background-color: var(
253
+ --amplify-components-button-outlined-success-hover-background-color
254
+ );
255
+ --amplify-internal-button-border-color: var(
256
+ --amplify-components-button-outlined-success-hover-border-color
257
+ );
258
+ --amplify-internal-button-color: var(
259
+ --amplify-components-button-outlined-success-hover-color
260
+ );
261
+ }
262
+ .amplify-button--outlined--success:focus {
263
+ --amplify-internal-button-background-color: var(
264
+ --amplify-components-button-outlined-success-focus-background-color
265
+ );
266
+ --amplify-internal-button-border-color: var(
267
+ --amplify-components-button-outlined-success-focus-border-color
268
+ );
269
+ --amplify-internal-button-color: var(
270
+ --amplify-components-button-outlined-success-focus-color
271
+ );
272
+ --amplify-internal-button-focus-box-shadow: var(
273
+ --amplify-components-button-outlined-success-focus-box-shadow
274
+ );
275
+ }
276
+ .amplify-button--outlined--success:active {
277
+ --amplify-internal-button-background-color: var(
278
+ --amplify-components-button-outlined-success-active-background-color
279
+ );
280
+ --amplify-internal-button-border-color: var(
281
+ --amplify-components-button-outlined-success-active-border-color
282
+ );
283
+ --amplify-internal-button-color: var(
284
+ --amplify-components-button-outlined-success-active-color
285
+ );
286
+ }
287
+ .amplify-button--outlined--overlay {
288
+ --amplify-internal-button-background-color: var(
289
+ --amplify-components-button-outlined-overlay-background-color
290
+ );
291
+ --amplify-internal-button-border-color: var(
292
+ --amplify-components-button-outlined-overlay-border-color
293
+ );
294
+ --amplify-internal-button-color: var(
295
+ --amplify-components-button-outlined-overlay-color
296
+ );
297
+ }
298
+ .amplify-button--outlined--overlay:hover {
299
+ --amplify-internal-button-background-color: var(
300
+ --amplify-components-button-outlined-overlay-hover-background-color
301
+ );
302
+ --amplify-internal-button-border-color: var(
303
+ --amplify-components-button-outlined-overlay-hover-border-color
304
+ );
305
+ --amplify-internal-button-color: var(
306
+ --amplify-components-button-outlined-overlay-hover-color
307
+ );
308
+ }
309
+ .amplify-button--outlined--overlay:focus {
310
+ --amplify-internal-button-background-color: var(
311
+ --amplify-components-button-outlined-overlay-focus-background-color
312
+ );
313
+ --amplify-internal-button-border-color: var(
314
+ --amplify-components-button-outlined-overlay-focus-border-color
315
+ );
316
+ --amplify-internal-button-color: var(
317
+ --amplify-components-button-outlined-overlay-focus-color
318
+ );
319
+ --amplify-internal-button-focus-box-shadow: var(
320
+ --amplify-components-button-outlined-overlay-focus-box-shadow
321
+ );
322
+ }
323
+ .amplify-button--outlined--overlay:active {
324
+ --amplify-internal-button-background-color: var(
325
+ --amplify-components-button-outlined-overlay-active-background-color
326
+ );
327
+ --amplify-internal-button-border-color: var(
328
+ --amplify-components-button-outlined-overlay-active-border-color
329
+ );
330
+ --amplify-internal-button-color: var(
331
+ --amplify-components-button-outlined-overlay-active-color
332
+ );
333
+ }
334
+ .amplify-button--menu {
335
+ border-width: var(--amplify-components-button-menu-border-width);
336
+ background-color: var(--amplify-components-button-menu-background-color);
337
+ justify-content: var(--amplify-components-button-menu-justify-content);
338
+ --amplify-internal-button-disabled-color: var(
339
+ --amplify-components-button-menu-disabled-color
340
+ );
341
+ }
342
+ .amplify-button--menu:hover {
343
+ color: var(--amplify-components-button-menu-hover-color);
344
+ background-color: var(--amplify-components-button-menu-hover-background-color);
345
+ }
346
+ .amplify-button--menu:focus {
347
+ box-shadow: none;
348
+ color: var(--amplify-components-button-menu-focus-color);
349
+ background-color: var(--amplify-components-button-menu-focus-background-color);
350
+ }
351
+ .amplify-button--menu:active {
352
+ color: var(--amplify-components-button-menu-active-color);
353
+ background-color: var(--amplify-components-button-menu-active-background-color);
354
+ }
355
+ .amplify-button--primary {
356
+ --amplify-internal-button-border-width: var(
357
+ --amplify-components-button-primary-border-width
358
+ );
359
+ --amplify-internal-button-background-color: var(
360
+ --amplify-components-button-primary-background-color
361
+ );
362
+ --amplify-internal-button-border-color: var(
363
+ --amplify-components-button-primary-border-color
364
+ );
365
+ --amplify-internal-button-color: var(
366
+ --amplify-components-button-primary-color
367
+ );
368
+ --amplify-internal-button-disabled-border-color: var(
369
+ --amplify-components-button-primary-disabled-border-color
370
+ );
371
+ --amplify-internal-button-disabled-background-color: var(
372
+ --amplify-components-button-primary-disabled-background-color
373
+ );
374
+ --amplify-internal-button-disabled-color: var(
375
+ --amplify-components-button-primary-disabled-color
376
+ );
377
+ --amplify-internal-button-loading-background-color: var(
378
+ --amplify-components-button-primary-loading-background-color
379
+ );
380
+ --amplify-internal-button-loading-border-color: var(
381
+ --amplify-components-button-primary-loading-border-color
382
+ );
383
+ --amplify-internal-button-loading-color: var(
384
+ --amplify-components-button-primary-loading-color
385
+ );
386
+ }
387
+ .amplify-button--primary:hover {
388
+ --amplify-internal-button-background-color: var(
389
+ --amplify-components-button-primary-hover-background-color
390
+ );
391
+ --amplify-internal-button-border-color: var(
392
+ --amplify-components-button-primary-hover-border-color
393
+ );
394
+ --amplify-internal-button-color: var(
395
+ --amplify-components-button-primary-hover-color
396
+ );
397
+ }
398
+ .amplify-button--primary:focus {
399
+ --amplify-internal-button-background-color: var(
400
+ --amplify-components-button-primary-focus-background-color
401
+ );
402
+ --amplify-internal-button-border-color: var(
403
+ --amplify-components-button-primary-focus-border-color
404
+ );
405
+ --amplify-internal-button-color: var(
406
+ --amplify-components-button-primary-focus-color
407
+ );
408
+ --amplify-internal-button-focus-box-shadow: var(
409
+ --amplify-components-button-primary-focus-box-shadow
410
+ );
411
+ }
412
+ .amplify-button--primary:active {
413
+ --amplify-internal-button-background-color: var(
414
+ --amplify-components-button-primary-active-background-color
415
+ );
416
+ --amplify-internal-button-border-color: var(
417
+ --amplify-components-button-primary-active-border-color
418
+ );
419
+ --amplify-internal-button-color: var(
420
+ --amplify-components-button-primary-active-color
421
+ );
422
+ }
423
+ .amplify-button--primary--info {
424
+ --amplify-internal-button-background-color: var(
425
+ --amplify-components-button-primary-info-background-color
426
+ );
427
+ --amplify-internal-button-border-color: var(
428
+ --amplify-components-button-primary-info-border-color
429
+ );
430
+ --amplify-internal-button-color: var(
431
+ --amplify-components-button-primary-info-color
432
+ );
433
+ }
434
+ .amplify-button--primary--info:hover {
435
+ --amplify-internal-button-background-color: var(
436
+ --amplify-components-button-primary-info-hover-background-color
437
+ );
438
+ --amplify-internal-button-border-color: var(
439
+ --amplify-components-button-primary-info-hover-border-color
440
+ );
441
+ --amplify-internal-button-color: var(
442
+ --amplify-components-button-primary-info-hover-color
443
+ );
444
+ }
445
+ .amplify-button--primary--info:focus {
446
+ --amplify-internal-button-background-color: var(
447
+ --amplify-components-button-primary-info-focus-background-color
448
+ );
449
+ --amplify-internal-button-border-color: var(
450
+ --amplify-components-button-primary-info-focus-border-color
451
+ );
452
+ --amplify-internal-button-color: var(
453
+ --amplify-components-button-primary-info-focus-color
454
+ );
455
+ --amplify-internal-button-focus-box-shadow: var(
456
+ --amplify-components-button-primary-info-focus-box-shadow
457
+ );
458
+ }
459
+ .amplify-button--primary--info:active {
460
+ --amplify-internal-button-background-color: var(
461
+ --amplify-components-button-primary-info-active-background-color
462
+ );
463
+ --amplify-internal-button-border-color: var(
464
+ --amplify-components-button-primary-info-active-border-color
465
+ );
466
+ --amplify-internal-button-color: var(
467
+ --amplify-components-button-primary-info-active-color
468
+ );
469
+ }
470
+ .amplify-button--primary--warning {
471
+ --amplify-internal-button-background-color: var(
472
+ --amplify-components-button-primary-warning-background-color
473
+ );
474
+ --amplify-internal-button-border-color: var(
475
+ --amplify-components-button-primary-warning-border-color
476
+ );
477
+ --amplify-internal-button-color: var(
478
+ --amplify-components-button-primary-warning-color
479
+ );
480
+ }
481
+ .amplify-button--primary--warning:hover {
482
+ --amplify-internal-button-background-color: var(
483
+ --amplify-components-button-primary-warning-hover-background-color
484
+ );
485
+ --amplify-internal-button-border-color: var(
486
+ --amplify-components-button-primary-warning-hover-border-color
487
+ );
488
+ --amplify-internal-button-color: var(
489
+ --amplify-components-button-primary-warning-hover-color
490
+ );
491
+ }
492
+ .amplify-button--primary--warning:focus {
493
+ --amplify-internal-button-background-color: var(
494
+ --amplify-components-button-primary-warning-focus-background-color
495
+ );
496
+ --amplify-internal-button-border-color: var(
497
+ --amplify-components-button-primary-warning-focus-border-color
498
+ );
499
+ --amplify-internal-button-color: var(
500
+ --amplify-components-button-primary-warning-focus-color
501
+ );
502
+ --amplify-internal-button-focus-box-shadow: var(
503
+ --amplify-components-button-primary-warning-focus-box-shadow
504
+ );
505
+ }
506
+ .amplify-button--primary--warning:active {
507
+ --amplify-internal-button-background-color: var(
508
+ --amplify-components-button-primary-warning-active-background-color
509
+ );
510
+ --amplify-internal-button-border-color: var(
511
+ --amplify-components-button-primary-warning-active-border-color
512
+ );
513
+ --amplify-internal-button-color: var(
514
+ --amplify-components-button-primary-warning-active-color
515
+ );
516
+ }
517
+ .amplify-button--primary--error {
518
+ --amplify-internal-button-background-color: var(
519
+ --amplify-components-button-primary-error-background-color
520
+ );
521
+ --amplify-internal-button-border-color: var(
522
+ --amplify-components-button-primary-error-border-color
523
+ );
524
+ --amplify-internal-button-color: var(
525
+ --amplify-components-button-primary-error-color
526
+ );
527
+ }
528
+ .amplify-button--primary--error:hover {
529
+ --amplify-internal-button-background-color: var(
530
+ --amplify-components-button-primary-error-hover-background-color
531
+ );
532
+ --amplify-internal-button-border-color: var(
533
+ --amplify-components-button-primary-error-hover-border-color
534
+ );
535
+ --amplify-internal-button-color: var(
536
+ --amplify-components-button-primary-error-hover-color
537
+ );
538
+ }
539
+ .amplify-button--primary--error:focus {
540
+ --amplify-internal-button-background-color: var(
541
+ --amplify-components-button-primary-error-focus-background-color
542
+ );
543
+ --amplify-internal-button-border-color: var(
544
+ --amplify-components-button-primary-error-focus-border-color
545
+ );
546
+ --amplify-internal-button-color: var(
547
+ --amplify-components-button-primary-error-focus-color
548
+ );
549
+ --amplify-internal-button-focus-box-shadow: var(
550
+ --amplify-components-button-primary-error-focus-box-shadow
551
+ );
552
+ }
553
+ .amplify-button--primary--error:active {
554
+ --amplify-internal-button-background-color: var(
555
+ --amplify-components-button-primary-error-active-background-color
556
+ );
557
+ --amplify-internal-button-border-color: var(
558
+ --amplify-components-button-primary-error-active-border-color
559
+ );
560
+ --amplify-internal-button-color: var(
561
+ --amplify-components-button-primary-error-active-color
562
+ );
563
+ }
564
+ .amplify-button--primary--success {
565
+ --amplify-internal-button-background-color: var(
566
+ --amplify-components-button-primary-success-background-color
567
+ );
568
+ --amplify-internal-button-border-color: var(
569
+ --amplify-components-button-primary-success-border-color
570
+ );
571
+ --amplify-internal-button-color: var(
572
+ --amplify-components-button-primary-success-color
573
+ );
574
+ }
575
+ .amplify-button--primary--success:hover {
576
+ --amplify-internal-button-background-color: var(
577
+ --amplify-components-button-primary-success-hover-background-color
578
+ );
579
+ --amplify-internal-button-border-color: var(
580
+ --amplify-components-button-primary-success-hover-border-color
581
+ );
582
+ --amplify-internal-button-color: var(
583
+ --amplify-components-button-primary-success-hover-color
584
+ );
585
+ }
586
+ .amplify-button--primary--success:focus {
587
+ --amplify-internal-button-background-color: var(
588
+ --amplify-components-button-primary-success-focus-background-color
589
+ );
590
+ --amplify-internal-button-border-color: var(
591
+ --amplify-components-button-primary-success-focus-border-color
592
+ );
593
+ --amplify-internal-button-color: var(
594
+ --amplify-components-button-primary-success-focus-color
595
+ );
596
+ --amplify-internal-button-focus-box-shadow: var(
597
+ --amplify-components-button-primary-success-focus-box-shadow
598
+ );
599
+ }
600
+ .amplify-button--primary--success:active {
601
+ --amplify-internal-button-background-color: var(
602
+ --amplify-components-button-primary-success-active-background-color
603
+ );
604
+ --amplify-internal-button-border-color: var(
605
+ --amplify-components-button-primary-success-active-border-color
606
+ );
607
+ --amplify-internal-button-color: var(
608
+ --amplify-components-button-primary-success-active-color
609
+ );
610
+ }
611
+ .amplify-button--primary--overlay {
612
+ --amplify-internal-button-background-color: var(
613
+ --amplify-components-button-primary-overlay-background-color
614
+ );
615
+ --amplify-internal-button-border-color: var(
616
+ --amplify-components-button-primary-overlay-border-color
617
+ );
618
+ --amplify-internal-button-color: var(
619
+ --amplify-components-button-primary-overlay-color
620
+ );
621
+ }
622
+ .amplify-button--primary--overlay:hover {
623
+ --amplify-internal-button-background-color: var(
624
+ --amplify-components-button-primary-overlay-hover-background-color
625
+ );
626
+ --amplify-internal-button-border-color: var(
627
+ --amplify-components-button-primary-overlay-hover-border-color
628
+ );
629
+ --amplify-internal-button-color: var(
630
+ --amplify-components-button-primary-overlay-hover-color
631
+ );
632
+ }
633
+ .amplify-button--primary--overlay:focus {
634
+ --amplify-internal-button-background-color: var(
635
+ --amplify-components-button-primary-overlay-focus-background-color
636
+ );
637
+ --amplify-internal-button-border-color: var(
638
+ --amplify-components-button-primary-overlay-focus-border-color
639
+ );
640
+ --amplify-internal-button-color: var(
641
+ --amplify-components-button-primary-overlay-focus-color
642
+ );
643
+ --amplify-internal-button-focus-box-shadow: var(
644
+ --amplify-components-button-primary-overlay-focus-box-shadow
645
+ );
646
+ }
647
+ .amplify-button--primary--overlay:active {
648
+ --amplify-internal-button-background-color: var(
649
+ --amplify-components-button-primary-overlay-active-background-color
650
+ );
651
+ --amplify-internal-button-border-color: var(
652
+ --amplify-components-button-primary-overlay-active-border-color
653
+ );
654
+ --amplify-internal-button-color: var(
655
+ --amplify-components-button-primary-overlay-active-color
656
+ );
657
+ }
658
+ .amplify-button--link {
659
+ --amplify-internal-button-border-width: var(
660
+ --amplify-components-button-link-border-width
661
+ );
662
+ --amplify-internal-button-background-color: var(
663
+ --amplify-components-button-link-background-color
664
+ );
665
+ --amplify-internal-button-border-color: var(
666
+ --amplify-components-button-link-border-color
667
+ );
668
+ --amplify-internal-button-color: var(
669
+ --amplify-components-button-link-color
670
+ );
671
+ --amplify-internal-button-disabled-border-color: var(
672
+ --amplify-components-button-link-disabled-border-color
673
+ );
674
+ --amplify-internal-button-disabled-background-color: var(
675
+ --amplify-components-button-link-disabled-background-color
676
+ );
677
+ --amplify-internal-button-disabled-color: var(
678
+ --amplify-components-button-link-disabled-color
679
+ );
680
+ --amplify-internal-button-loading-background-color: var(
681
+ --amplify-components-button-link-loading-background-color
682
+ );
683
+ --amplify-internal-button-loading-border-color: var(
684
+ --amplify-components-button-link-loading-border-color
685
+ );
686
+ --amplify-internal-button-loading-color: var(
687
+ --amplify-components-button-link-loading-color
688
+ );
689
+ }
690
+ .amplify-button--link:hover {
691
+ --amplify-internal-button-background-color: var(
692
+ --amplify-components-button-link-hover-background-color
693
+ );
694
+ --amplify-internal-button-border-color: var(
695
+ --amplify-components-button-link-hover-border-color
696
+ );
697
+ --amplify-internal-button-color: var(
698
+ --amplify-components-button-link-hover-color
699
+ );
700
+ }
701
+ .amplify-button--link:focus {
702
+ --amplify-internal-button-background-color: var(
703
+ --amplify-components-button-link-focus-background-color
704
+ );
705
+ --amplify-internal-button-border-color: var(
706
+ --amplify-components-button-link-focus-border-color
707
+ );
708
+ --amplify-internal-button-color: var(
709
+ --amplify-components-button-link-focus-color
710
+ );
711
+ --amplify-internal-button-focus-box-shadow: var(
712
+ --amplify-components-button-link-focus-box-shadow
713
+ );
714
+ }
715
+ .amplify-button--link:active {
716
+ --amplify-internal-button-background-color: var(
717
+ --amplify-components-button-link-active-background-color
718
+ );
719
+ --amplify-internal-button-border-color: var(
720
+ --amplify-components-button-link-active-border-color
721
+ );
722
+ --amplify-internal-button-color: var(
723
+ --amplify-components-button-link-active-color
724
+ );
725
+ }
726
+ .amplify-button--link--info {
727
+ --amplify-internal-button-background-color: var(
728
+ --amplify-components-button-link-info-background-color
729
+ );
730
+ --amplify-internal-button-border-color: var(
731
+ --amplify-components-button-link-info-border-color
732
+ );
733
+ --amplify-internal-button-color: var(
734
+ --amplify-components-button-link-info-color
735
+ );
736
+ }
737
+ .amplify-button--link--info:hover {
738
+ --amplify-internal-button-background-color: var(
739
+ --amplify-components-button-link-info-hover-background-color
740
+ );
741
+ --amplify-internal-button-border-color: var(
742
+ --amplify-components-button-link-info-hover-border-color
743
+ );
744
+ --amplify-internal-button-color: var(
745
+ --amplify-components-button-link-info-hover-color
746
+ );
747
+ }
748
+ .amplify-button--link--info:focus {
749
+ --amplify-internal-button-background-color: var(
750
+ --amplify-components-button-link-info-focus-background-color
751
+ );
752
+ --amplify-internal-button-border-color: var(
753
+ --amplify-components-button-link-info-focus-border-color
754
+ );
755
+ --amplify-internal-button-color: var(
756
+ --amplify-components-button-link-info-focus-color
757
+ );
758
+ --amplify-internal-button-focus-box-shadow: var(
759
+ --amplify-components-button-link-info-focus-box-shadow
760
+ );
761
+ }
762
+ .amplify-button--link--info:active {
763
+ --amplify-internal-button-background-color: var(
764
+ --amplify-components-button-link-info-active-background-color
765
+ );
766
+ --amplify-internal-button-border-color: var(
767
+ --amplify-components-button-link-info-active-border-color
768
+ );
769
+ --amplify-internal-button-color: var(
770
+ --amplify-components-button-link-info-active-color
771
+ );
772
+ }
773
+ .amplify-button--link--warning {
774
+ --amplify-internal-button-background-color: var(
775
+ --amplify-components-button-link-warning-background-color
776
+ );
777
+ --amplify-internal-button-border-color: var(
778
+ --amplify-components-button-link-warning-border-color
779
+ );
780
+ --amplify-internal-button-color: var(
781
+ --amplify-components-button-link-warning-color
782
+ );
783
+ }
784
+ .amplify-button--link--warning:hover {
785
+ --amplify-internal-button-background-color: var(
786
+ --amplify-components-button-link-warning-hover-background-color
787
+ );
788
+ --amplify-internal-button-border-color: var(
789
+ --amplify-components-button-link-warning-hover-border-color
790
+ );
791
+ --amplify-internal-button-color: var(
792
+ --amplify-components-button-link-warning-hover-color
793
+ );
794
+ }
795
+ .amplify-button--link--warning:focus {
796
+ --amplify-internal-button-background-color: var(
797
+ --amplify-components-button-link-warning-focus-background-color
798
+ );
799
+ --amplify-internal-button-border-color: var(
800
+ --amplify-components-button-link-warning-focus-border-color
801
+ );
802
+ --amplify-internal-button-color: var(
803
+ --amplify-components-button-link-warning-focus-color
804
+ );
805
+ --amplify-internal-button-focus-box-shadow: var(
806
+ --amplify-components-button-link-warning-focus-box-shadow
807
+ );
808
+ }
809
+ .amplify-button--link--warning:active {
810
+ --amplify-internal-button-background-color: var(
811
+ --amplify-components-button-link-warning-active-background-color
812
+ );
813
+ --amplify-internal-button-border-color: var(
814
+ --amplify-components-button-link-warning-active-border-color
815
+ );
816
+ --amplify-internal-button-color: var(
817
+ --amplify-components-button-link-warning-active-color
818
+ );
819
+ }
820
+ .amplify-button--link--error {
821
+ --amplify-internal-button-background-color: var(
822
+ --amplify-components-button-link-error-background-color
823
+ );
824
+ --amplify-internal-button-border-color: var(
825
+ --amplify-components-button-link-error-border-color
826
+ );
827
+ --amplify-internal-button-color: var(
828
+ --amplify-components-button-link-error-color
829
+ );
830
+ }
831
+ .amplify-button--link--error:hover {
832
+ --amplify-internal-button-background-color: var(
833
+ --amplify-components-button-link-error-hover-background-color
834
+ );
835
+ --amplify-internal-button-border-color: var(
836
+ --amplify-components-button-link-error-hover-border-color
837
+ );
838
+ --amplify-internal-button-color: var(
839
+ --amplify-components-button-link-error-hover-color
840
+ );
841
+ }
842
+ .amplify-button--link--error:focus {
843
+ --amplify-internal-button-background-color: var(
844
+ --amplify-components-button-link-error-focus-background-color
845
+ );
846
+ --amplify-internal-button-border-color: var(
847
+ --amplify-components-button-link-error-focus-border-color
848
+ );
849
+ --amplify-internal-button-color: var(
850
+ --amplify-components-button-link-error-focus-color
851
+ );
852
+ --amplify-internal-button-focus-box-shadow: var(
853
+ --amplify-components-button-link-error-focus-box-shadow
854
+ );
855
+ }
856
+ .amplify-button--link--error:active {
857
+ --amplify-internal-button-background-color: var(
858
+ --amplify-components-button-link-error-active-background-color
859
+ );
860
+ --amplify-internal-button-border-color: var(
861
+ --amplify-components-button-link-error-active-border-color
862
+ );
863
+ --amplify-internal-button-color: var(
864
+ --amplify-components-button-link-error-active-color
865
+ );
866
+ }
867
+ .amplify-button--link--success {
868
+ --amplify-internal-button-background-color: var(
869
+ --amplify-components-button-link-success-background-color
870
+ );
871
+ --amplify-internal-button-border-color: var(
872
+ --amplify-components-button-link-success-border-color
873
+ );
874
+ --amplify-internal-button-color: var(
875
+ --amplify-components-button-link-success-color
876
+ );
877
+ }
878
+ .amplify-button--link--success:hover {
879
+ --amplify-internal-button-background-color: var(
880
+ --amplify-components-button-link-success-hover-background-color
881
+ );
882
+ --amplify-internal-button-border-color: var(
883
+ --amplify-components-button-link-success-hover-border-color
884
+ );
885
+ --amplify-internal-button-color: var(
886
+ --amplify-components-button-link-success-hover-color
887
+ );
888
+ }
889
+ .amplify-button--link--success:focus {
890
+ --amplify-internal-button-background-color: var(
891
+ --amplify-components-button-link-success-focus-background-color
892
+ );
893
+ --amplify-internal-button-border-color: var(
894
+ --amplify-components-button-link-success-focus-border-color
895
+ );
896
+ --amplify-internal-button-color: var(
897
+ --amplify-components-button-link-success-focus-color
898
+ );
899
+ --amplify-internal-button-focus-box-shadow: var(
900
+ --amplify-components-button-link-success-focus-box-shadow
901
+ );
902
+ }
903
+ .amplify-button--link--success:active {
904
+ --amplify-internal-button-background-color: var(
905
+ --amplify-components-button-link-success-active-background-color
906
+ );
907
+ --amplify-internal-button-border-color: var(
908
+ --amplify-components-button-link-success-active-border-color
909
+ );
910
+ --amplify-internal-button-color: var(
911
+ --amplify-components-button-link-success-active-color
912
+ );
913
+ }
914
+ .amplify-button--link--overlay {
915
+ --amplify-internal-button-background-color: var(
916
+ --amplify-components-button-link-overlay-background-color
917
+ );
918
+ --amplify-internal-button-border-color: var(
919
+ --amplify-components-button-link-overlay-border-color
920
+ );
921
+ --amplify-internal-button-color: var(
922
+ --amplify-components-button-link-overlay-color
923
+ );
924
+ }
925
+ .amplify-button--link--overlay:hover {
926
+ --amplify-internal-button-background-color: var(
927
+ --amplify-components-button-link-overlay-hover-background-color
928
+ );
929
+ --amplify-internal-button-border-color: var(
930
+ --amplify-components-button-link-overlay-hover-border-color
931
+ );
932
+ --amplify-internal-button-color: var(
933
+ --amplify-components-button-link-overlay-hover-color
934
+ );
935
+ }
936
+ .amplify-button--link--overlay:focus {
937
+ --amplify-internal-button-background-color: var(
938
+ --amplify-components-button-link-overlay-focus-background-color
939
+ );
940
+ --amplify-internal-button-border-color: var(
941
+ --amplify-components-button-link-overlay-focus-border-color
942
+ );
943
+ --amplify-internal-button-color: var(
944
+ --amplify-components-button-link-overlay-focus-color
945
+ );
946
+ --amplify-internal-button-focus-box-shadow: var(
947
+ --amplify-components-button-link-overlay-focus-box-shadow
948
+ );
949
+ }
950
+ .amplify-button--link--overlay:active {
951
+ --amplify-internal-button-background-color: var(
952
+ --amplify-components-button-link-overlay-active-background-color
953
+ );
954
+ --amplify-internal-button-border-color: var(
955
+ --amplify-components-button-link-overlay-active-border-color
956
+ );
957
+ --amplify-internal-button-color: var(
958
+ --amplify-components-button-link-overlay-active-color
959
+ );
960
+ }
961
+ .amplify-button--destructive {
962
+ border-width: var(--amplify-components-button-destructive-border-width);
963
+ background-color: var(--amplify-components-button-destructive-background-color);
964
+ border-color: var(--amplify-components-button-destructive-border-color);
965
+ color: var(--amplify-components-button-destructive-color);
966
+ --amplify-internal-button-disabled-border-color: var(
967
+ --amplify-components-button-destructive-disabled-border-color
968
+ );
969
+ --amplify-internal-button-disabled-background-color: var(
970
+ --amplify-components-button-destructive-disabled-background-color
971
+ );
972
+ --amplify-internal-button-disabled-color: var(
973
+ --amplify-components-button-destructive-disabled-color
974
+ );
975
+ --amplify-internal-button-loading-background-color: var(
976
+ --amplify-components-button-destructive-loading-background-color
977
+ );
978
+ --amplify-internal-button-loading-border-color: var(
979
+ --amplify-components-button-destructive-loading-border-color
980
+ );
981
+ --amplify-internal-button-loading-color: var(
982
+ --amplify-components-button-destructive-loading-color
983
+ );
984
+ }
985
+ .amplify-button--destructive:hover {
986
+ background-color: var(--amplify-components-button-destructive-hover-background-color);
987
+ border-color: var(--amplify-components-button-destructive-hover-border-color);
988
+ color: var(--amplify-components-button-destructive-hover-color);
989
+ }
990
+ .amplify-button--destructive:focus {
991
+ background-color: var(--amplify-components-button-destructive-focus-background-color);
992
+ border-color: var(--amplify-components-button-destructive-focus-border-color);
993
+ color: var(--amplify-components-button-destructive-focus-color);
994
+ box-shadow: var(--amplify-components-button-destructive-focus-box-shadow);
995
+ }
996
+ .amplify-button--destructive:active {
997
+ background-color: var(--amplify-components-button-destructive-active-background-color);
998
+ border-color: var(--amplify-components-button-destructive-active-border-color);
999
+ color: var(--amplify-components-button-destructive-active-color);
1000
+ }
1001
+ .amplify-button--warning {
1002
+ background-color: var(--amplify-components-button-warning-background-color);
1003
+ border-color: var(--amplify-components-button-warning-border-color);
1004
+ border-width: var(--amplify-components-button-warning-border-width);
1005
+ color: var(--amplify-components-button-warning-color);
1006
+ --amplify-internal-button-disabled-text-decoration: none;
1007
+ --amplify-internal-button-disabled-border-color: var(
1008
+ --amplify-components-button-warning-disabled-border-color
1009
+ );
1010
+ --amplify-internal-button-disabled-background-color: var(
1011
+ --amplify-components-button-warning-disabled-background-color
1012
+ );
1013
+ --amplify-internal-button-disabled-color: var(
1014
+ --amplify-components-button-warning-disabled-color
1015
+ );
1016
+ --amplify-internal-button-loading-background-color: var(
1017
+ --amplify-components-button-warning-loading-background-color
1018
+ );
1019
+ --amplify-internal-button-loading-border-color: var(
1020
+ --amplify-components-button-warning-loading-border-color
1021
+ );
1022
+ --amplify-internal-button-loading-color: var(
1023
+ --amplify-components-button-warning-loading-color
1024
+ );
1025
+ --amplify-internal-button-loading-text-decoration: none;
1026
+ }
1027
+ .amplify-button--warning:hover {
1028
+ background-color: var(--amplify-components-button-warning-hover-background-color);
1029
+ border-color: var(--amplify-components-button-warning-hover-border-color);
1030
+ color: var(--amplify-components-button-warning-hover-color);
1031
+ }
1032
+ .amplify-button--warning:focus {
1033
+ background-color: var(--amplify-components-button-warning-focus-background-color);
1034
+ border-color: var(--amplify-components-button-warning-focus-border-color);
1035
+ color: var(--amplify-components-button-warning-focus-color);
1036
+ box-shadow: var(--amplify-components-button-warning-focus-box-shadow);
1037
+ }
1038
+ .amplify-button--warning:active {
1039
+ background-color: var(--amplify-components-button-warning-active-background-color);
1040
+ border-color: var(--amplify-components-button-warning-active-border-color);
1041
+ color: var(--amplify-components-button-warning-active-color);
1042
+ }
1043
+ .amplify-button--small {
1044
+ font-size: var(--amplify-components-button-small-font-size);
1045
+ padding-block-start: var(--amplify-components-button-small-padding-block-start);
1046
+ padding-block-end: var(--amplify-components-button-small-padding-block-end);
1047
+ padding-inline-start: var(--amplify-components-button-small-padding-inline-start);
1048
+ padding-inline-end: var(--amplify-components-button-small-padding-inline-end);
1049
+ }
1050
+ .amplify-button--large {
1051
+ font-size: var(--amplify-components-button-large-font-size);
1052
+ padding-block-start: var(--amplify-components-button-large-padding-block-start);
1053
+ padding-block-end: var(--amplify-components-button-large-padding-block-end);
1054
+ padding-inline-start: var(--amplify-components-button-large-padding-inline-start);
1055
+ padding-inline-end: var(--amplify-components-button-large-padding-inline-end);
1056
+ }
1057
+ .amplify-button--disabled {
1058
+ background-color: var(--amplify-internal-button-disabled-background-color);
1059
+ border-color: var(--amplify-internal-button-disabled-border-color);
1060
+ color: var(--amplify-internal-button-disabled-color);
1061
+ -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1062
+ text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1063
+ cursor: not-allowed;
1064
+ }
1065
+ .amplify-button--disabled:hover {
1066
+ background-color: var(--amplify-internal-button-disabled-background-color);
1067
+ border-color: var(--amplify-internal-button-disabled-border-color);
1068
+ color: var(--amplify-internal-button-disabled-color);
1069
+ -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1070
+ text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1071
+ }
1072
+ .amplify-button--disabled :focus {
1073
+ background-color: var(--amplify-internal-button-disabled-background-color);
1074
+ border-color: var(--amplify-internal-button-disabled-border-color);
1075
+ color: var(--amplify-internal-button-disabled-color);
1076
+ -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1077
+ text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1078
+ }
1079
+ .amplify-button--disabled:active {
1080
+ background-color: var(--amplify-internal-button-disabled-background-color);
1081
+ border-color: var(--amplify-internal-button-disabled-border-color);
1082
+ color: var(--amplify-internal-button-disabled-color);
1083
+ -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1084
+ text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1085
+ }
1086
+ .amplify-button--loading {
1087
+ background-color: var(--amplify-internal-button-loading-background-color);
1088
+ border-color: var(--amplify-internal-button-loading-border-color);
1089
+ color: var(--amplify-components-button-loading-color);
1090
+ -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
1091
+ text-decoration: var(--amplify-internal-button-loading-text-decoration);
1092
+ }
1093
+ .amplify-button--loading:hover {
1094
+ background-color: var(--amplify-internal-button-loading-background-color);
1095
+ border-color: var(--amplify-internal-button-loading-border-color);
1096
+ color: var(--amplify-components-button-loading-color);
1097
+ -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
1098
+ text-decoration: var(--amplify-internal-button-loading-text-decoration);
1099
+ }
1100
+ .amplify-button--loading:focus {
1101
+ background-color: var(--amplify-internal-button-loading-background-color);
1102
+ border-color: var(--amplify-internal-button-loading-border-color);
1103
+ color: var(--amplify-components-button-loading-color);
1104
+ -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
1105
+ text-decoration: var(--amplify-internal-button-loading-text-decoration);
1106
+ }
1107
+ .amplify-button--loading:active {
1108
+ background-color: var(--amplify-internal-button-loading-background-color);
1109
+ border-color: var(--amplify-internal-button-loading-border-color);
1110
+ color: var(--amplify-components-button-loading-color);
1111
+ -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
1112
+ text-decoration: var(--amplify-internal-button-loading-text-decoration);
1113
+ }
1114
+ .amplify-button__loader-wrapper {
1115
+ align-items: var(--amplify-components-button-loader-wrapper-align-items);
1116
+ gap: var(--amplify-components-button-loader-wrapper-gap);
1117
+ }
1118
+
1119
+ @media (prefers-reduced-motion: reduce) {
1120
+ .amplify-button {
1121
+ transition: none;
1122
+ }
1123
+ }
1124
+ }