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