@aws-amplify/ui-react 5.3.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 (479) hide show
  1. package/dist/Field-6c0e096a.js +1174 -0
  2. package/dist/esm/PrimitiveCatalog.mjs +16255 -1
  3. package/dist/esm/components/AccountSettings/AccountSettings.mjs +6 -1
  4. package/dist/esm/components/AccountSettings/ChangePassword/ChangePassword.mjs +209 -1
  5. package/dist/esm/components/AccountSettings/ChangePassword/defaults.mjs +77 -1
  6. package/dist/esm/components/AccountSettings/DeleteUser/DeleteUser.mjs +156 -1
  7. package/dist/esm/components/AccountSettings/DeleteUser/defaults.mjs +85 -1
  8. package/dist/esm/components/AccountSettings/constants.mjs +7 -1
  9. package/dist/esm/components/AccountSettings/shared/Defaults.mjs +66 -1
  10. package/dist/esm/components/AccountSettings/utils/displayText.mjs +14 -0
  11. package/dist/esm/components/Authenticator/Authenticator.mjs +74 -1
  12. package/dist/esm/components/Authenticator/ConfirmSignIn/ConfirmSignIn.mjs +42 -1
  13. package/dist/esm/components/Authenticator/ConfirmSignUp/ConfirmSignUp.mjs +51 -1
  14. package/dist/esm/components/Authenticator/FederatedSignIn/FederatedSignIn.mjs +34 -1
  15. package/dist/esm/components/Authenticator/FederatedSignIn/FederatedSignInButtons/FederatedSignInButton.mjs +54 -1
  16. package/dist/esm/components/Authenticator/ForceNewPassword/ForceNewPassword.mjs +43 -1
  17. package/dist/esm/components/Authenticator/ForgotPassword/ConfirmResetPassword.mjs +39 -0
  18. package/dist/esm/components/Authenticator/ForgotPassword/ForgotPassword.mjs +40 -0
  19. package/dist/esm/components/Authenticator/RouteContainer/RouteContainer.mjs +26 -1
  20. package/dist/esm/components/Authenticator/Router/Router.mjs +63 -1
  21. package/dist/esm/components/Authenticator/SetupTotp/SetupTotp.mjs +76 -0
  22. package/dist/esm/components/Authenticator/SignIn/SignIn.mjs +47 -1
  23. package/dist/esm/components/Authenticator/SignUp/SignUp.mjs +46 -1
  24. package/dist/esm/components/Authenticator/VerifyUser/ConfirmVerifyUser.mjs +37 -1
  25. package/dist/esm/components/Authenticator/VerifyUser/VerifyUser.mjs +59 -1
  26. package/dist/esm/components/Authenticator/hooks/useCustomComponents/defaultComponents.mjs +62 -1
  27. package/dist/esm/components/Authenticator/hooks/useCustomComponents/useCustomComponents.mjs +14 -1
  28. package/dist/esm/components/Authenticator/hooks/useFormHandlers/useFormHandlers.mjs +30 -1
  29. package/dist/esm/components/Authenticator/shared/ConfirmSignInFooter.mjs +18 -1
  30. package/dist/esm/components/Authenticator/shared/FormField.mjs +35 -1
  31. package/dist/esm/components/Authenticator/shared/FormFields.mjs +15 -1
  32. package/dist/esm/components/Authenticator/shared/RemoteErrorMessage.mjs +11 -1
  33. package/dist/esm/components/Authenticator/shared/SignInSignUpTabs.mjs +27 -1
  34. package/dist/esm/components/Authenticator/shared/TwoButtonSubmitFooter.mjs +35 -1
  35. package/dist/esm/components/Authenticator/utils.mjs +3 -1
  36. package/dist/esm/components/Authenticator/withAuthenticator.mjs +14 -1
  37. package/dist/esm/components/ThemeProvider/ThemeContext.mjs +8 -0
  38. package/dist/esm/components/ThemeProvider/ThemeProvider.mjs +23 -1
  39. package/dist/esm/components/index.mjs +5 -1
  40. package/dist/esm/components/shared/ValidationErrors.mjs +15 -1
  41. package/dist/esm/helpers/utils.mjs +6 -1
  42. package/dist/esm/hooks/useAuth.mjs +73 -1
  43. package/dist/esm/hooks/useBreakpointValue.mjs +29 -1
  44. package/dist/esm/hooks/useComposeRefsCallback.mjs +20 -1
  45. package/dist/esm/hooks/useDeprecationWarning.mjs +15 -1
  46. package/dist/esm/hooks/useStorageURL.mjs +40 -1
  47. package/dist/esm/hooks/useTheme.mjs +23 -1
  48. package/dist/esm/hooks/useThemeBreakpoint.mjs +19 -1
  49. package/dist/esm/index.mjs +71 -1
  50. package/dist/esm/internal.mjs +32 -1
  51. package/dist/esm/primitives/Accordion/Accordion.mjs +28 -0
  52. package/dist/esm/primitives/Accordion/AccordionContainer.mjs +49 -0
  53. package/dist/esm/primitives/Accordion/AccordionContent.mjs +15 -0
  54. package/dist/esm/primitives/Accordion/AccordionContext.mjs +6 -0
  55. package/dist/esm/primitives/Accordion/AccordionIcon.mjs +20 -0
  56. package/dist/esm/primitives/Accordion/AccordionItem.mjs +19 -0
  57. package/dist/esm/primitives/Accordion/AccordionTrigger.mjs +27 -0
  58. package/dist/esm/primitives/Alert/Alert.mjs +36 -1
  59. package/dist/esm/primitives/Alert/AlertIcon.mjs +36 -1
  60. package/dist/esm/primitives/Autocomplete/Autocomplete.mjs +67 -1
  61. package/dist/esm/primitives/Autocomplete/AutocompleteMenu.mjs +36 -1
  62. package/dist/esm/primitives/Autocomplete/AutocompleteOption.mjs +12 -1
  63. package/dist/esm/primitives/Autocomplete/useAutocomplete.mjs +188 -1
  64. package/dist/esm/primitives/Badge/Badge.mjs +16 -1
  65. package/dist/esm/primitives/Breadcrumbs/BreadcrumbContainer.mjs +18 -1
  66. package/dist/esm/primitives/Breadcrumbs/BreadcrumbItem.mjs +16 -1
  67. package/dist/esm/primitives/Breadcrumbs/BreadcrumbLink.mjs +24 -1
  68. package/dist/esm/primitives/Breadcrumbs/BreadcrumbSeparator.mjs +16 -1
  69. package/dist/esm/primitives/Breadcrumbs/Breadcrumbs.mjs +28 -1
  70. package/dist/esm/primitives/Button/Button.mjs +33 -1
  71. package/dist/esm/primitives/ButtonGroup/ButtonGroup.mjs +19 -1
  72. package/dist/esm/primitives/Card/Card.mjs +15 -1
  73. package/dist/esm/primitives/Checkbox/Checkbox.mjs +84 -1
  74. package/dist/esm/primitives/CheckboxField/CheckboxField.mjs +24 -1
  75. package/dist/esm/primitives/Collection/Collection.mjs +58 -1
  76. package/dist/esm/primitives/Collection/utils.mjs +30 -1
  77. package/dist/esm/primitives/Divider/Divider.mjs +16 -1
  78. package/dist/esm/primitives/DropZone/DropZone.mjs +27 -1
  79. package/dist/esm/primitives/DropZone/DropZoneChildren.mjs +39 -1
  80. package/dist/esm/primitives/DropZone/DropZoneContainer.mjs +18 -1
  81. package/dist/esm/primitives/DropZone/DropZoneProvider.mjs +8 -1
  82. package/dist/esm/primitives/DropZone/filterAllowedFiles.mjs +34 -0
  83. package/dist/esm/primitives/DropZone/useDropZone.mjs +65 -1
  84. package/dist/esm/primitives/Field/Field.mjs +20 -1
  85. package/dist/esm/primitives/Field/FieldClearButton.mjs +21 -1
  86. package/dist/esm/primitives/Field/FieldDescription.mjs +11 -1
  87. package/dist/esm/primitives/Field/FieldErrorMessage.mjs +10 -1
  88. package/dist/esm/primitives/FieldGroup/FieldGroup.mjs +29 -1
  89. package/dist/esm/primitives/FieldGroupIcon/FieldGroupIcon.mjs +12 -1
  90. package/dist/esm/primitives/FieldGroupIcon/FieldGroupIconButton.mjs +11 -1
  91. package/dist/esm/primitives/Fieldset/Fieldset.mjs +33 -1
  92. package/dist/esm/primitives/Fieldset/useFieldset.mjs +13 -1
  93. package/dist/esm/primitives/Flex/Flex.mjs +13 -1
  94. package/dist/esm/primitives/Grid/Grid.mjs +13 -1
  95. package/dist/esm/primitives/Heading/Heading.mjs +21 -1
  96. package/dist/esm/primitives/HighlightMatch/HighlightMatch.mjs +28 -1
  97. package/dist/esm/primitives/Icon/Icon.mjs +36 -1
  98. package/dist/esm/primitives/Icon/context/IconsContext.mjs +5 -1
  99. package/dist/esm/primitives/Icon/context/IconsProvider.mjs +8 -1
  100. package/dist/esm/primitives/Icon/context/useIcons.mjs +12 -1
  101. package/dist/esm/primitives/Icon/icons/IconAdd.mjs +15 -1
  102. package/dist/esm/primitives/Icon/icons/IconCheck.mjs +15 -1
  103. package/dist/esm/primitives/Icon/icons/IconCheckCircle.mjs +15 -1
  104. package/dist/esm/primitives/Icon/icons/IconCheckCircleOutline.mjs +13 -1
  105. package/dist/esm/primitives/Icon/icons/IconChevronLeft.mjs +15 -1
  106. package/dist/esm/primitives/Icon/icons/IconChevronRight.mjs +15 -1
  107. package/dist/esm/primitives/Icon/icons/IconClose.mjs +15 -1
  108. package/dist/esm/primitives/Icon/icons/IconEdit.mjs +15 -1
  109. package/dist/esm/primitives/Icon/icons/IconError.mjs +15 -1
  110. package/dist/esm/primitives/Icon/icons/IconExpandMore.mjs +15 -1
  111. package/dist/esm/primitives/Icon/icons/IconFile.mjs +15 -1
  112. package/dist/esm/primitives/Icon/icons/IconIndeterminate.mjs +15 -1
  113. package/dist/esm/primitives/Icon/icons/IconInfo.mjs +15 -1
  114. package/dist/esm/primitives/Icon/icons/IconMenu.mjs +15 -1
  115. package/dist/esm/primitives/Icon/icons/IconRemove.mjs +15 -1
  116. package/dist/esm/primitives/Icon/icons/IconSearch.mjs +15 -1
  117. package/dist/esm/primitives/Icon/icons/IconStar.mjs +15 -1
  118. package/dist/esm/primitives/Icon/icons/IconUpload.mjs +15 -1
  119. package/dist/esm/primitives/Icon/icons/IconVisibility.mjs +15 -1
  120. package/dist/esm/primitives/Icon/icons/IconVisibilityOff.mjs +15 -1
  121. package/dist/esm/primitives/Icon/icons/IconWarning.mjs +15 -1
  122. package/dist/esm/primitives/Image/Image.mjs +13 -1
  123. package/dist/esm/primitives/Input/Input.mjs +15 -1
  124. package/dist/esm/primitives/Label/Label.mjs +14 -1
  125. package/dist/esm/primitives/Link/Link.mjs +15 -1
  126. package/dist/esm/primitives/Loader/Loader.mjs +56 -1
  127. package/dist/esm/primitives/Menu/Menu.mjs +31 -1
  128. package/dist/esm/primitives/Menu/MenuButton.mjs +18 -1
  129. package/dist/esm/primitives/Menu/MenuItem.mjs +22 -1
  130. package/dist/esm/primitives/Message/Message.mjs +23 -1
  131. package/dist/esm/primitives/Message/MessageContainer.mjs +19 -1
  132. package/dist/esm/primitives/Message/MessageContent.mjs +12 -1
  133. package/dist/esm/primitives/Message/MessageDismiss.mjs +28 -1
  134. package/dist/esm/primitives/Message/MessageHeading.mjs +12 -1
  135. package/dist/esm/primitives/Message/MessageIcon.mjs +35 -1
  136. package/dist/esm/primitives/Message/useMessage.mjs +9 -1
  137. package/dist/esm/primitives/Pagination/Pagination.mjs +31 -1
  138. package/dist/esm/primitives/Pagination/PaginationItem.mjs +48 -1
  139. package/dist/esm/primitives/Pagination/usePagination.mjs +41 -1
  140. package/dist/esm/primitives/Pagination/usePaginationItems.mjs +39 -1
  141. package/dist/esm/primitives/Pagination/useRange.mjs +72 -1
  142. package/dist/esm/primitives/PasswordField/PasswordField.mjs +25 -1
  143. package/dist/esm/primitives/PasswordField/ShowPasswordButton.mjs +30 -1
  144. package/dist/esm/primitives/PhoneNumberField/DialCodeSelect.mjs +21 -0
  145. package/dist/esm/primitives/PhoneNumberField/PhoneNumberField.mjs +17 -1
  146. package/dist/esm/primitives/Placeholder/Placeholder.mjs +18 -1
  147. package/dist/esm/primitives/Radio/Radio.mjs +31 -1
  148. package/dist/esm/primitives/RadioGroupField/RadioGroupField.mjs +55 -1
  149. package/dist/esm/primitives/RadioGroupField/context.mjs +9 -1
  150. package/dist/esm/primitives/Rating/Rating.mjs +44 -1
  151. package/dist/esm/primitives/Rating/RatingIcon.mjs +11 -1
  152. package/dist/esm/primitives/Rating/RatingMixedIcon.mjs +13 -1
  153. package/dist/esm/primitives/Rating/utils.mjs +18 -1
  154. package/dist/esm/primitives/ScrollView/ScrollView.mjs +13 -1
  155. package/dist/esm/primitives/SearchField/SearchField.mjs +38 -1
  156. package/dist/esm/primitives/SearchField/SearchFieldButton.mjs +21 -1
  157. package/dist/esm/primitives/SearchField/useSearchField.mjs +64 -1
  158. package/dist/esm/primitives/Select/Select.mjs +31 -1
  159. package/dist/esm/primitives/SelectField/SelectField.mjs +42 -1
  160. package/dist/esm/primitives/SliderField/SliderField.mjs +77 -1
  161. package/dist/esm/primitives/StepperField/StepperField.mjs +60 -1
  162. package/dist/esm/primitives/StepperField/useStepper.mjs +113 -1
  163. package/dist/esm/primitives/SwitchField/SwitchField.mjs +48 -1
  164. package/dist/esm/primitives/SwitchField/useSwitch.mjs +30 -1
  165. package/dist/esm/primitives/Table/Table.mjs +18 -1
  166. package/dist/esm/primitives/Table/TableBody.mjs +10 -1
  167. package/dist/esm/primitives/Table/TableCell.mjs +12 -1
  168. package/dist/esm/primitives/Table/TableFoot.mjs +10 -1
  169. package/dist/esm/primitives/Table/TableHead.mjs +10 -1
  170. package/dist/esm/primitives/Table/TableRow.mjs +10 -1
  171. package/dist/esm/primitives/Tabs/Tabs.mjs +24 -1
  172. package/dist/esm/primitives/Tabs/TabsContainer.mjs +35 -0
  173. package/dist/esm/primitives/Tabs/TabsContext.mjs +8 -0
  174. package/dist/esm/primitives/Tabs/TabsItem.mjs +24 -0
  175. package/dist/esm/primitives/Tabs/TabsList.mjs +85 -0
  176. package/dist/esm/primitives/Tabs/TabsPanel.mjs +19 -0
  177. package/dist/esm/primitives/Text/Text.mjs +16 -1
  178. package/dist/esm/primitives/TextArea/TextArea.mjs +15 -1
  179. package/dist/esm/primitives/TextAreaField/TextAreaField.mjs +36 -1
  180. package/dist/esm/primitives/TextField/TextField.mjs +34 -1
  181. package/dist/esm/primitives/ToggleButton/ToggleButton.mjs +24 -1
  182. package/dist/esm/primitives/ToggleButton/useToggleButton.mjs +23 -1
  183. package/dist/esm/primitives/ToggleButtonGroup/ToggleButtonGroup.mjs +35 -1
  184. package/dist/esm/primitives/ToggleButtonGroup/useToggleButtonGroup.mjs +36 -1
  185. package/dist/esm/primitives/View/View.mjs +23 -1
  186. package/dist/esm/primitives/VisuallyHidden/VisuallyHidden.mjs +13 -1
  187. package/dist/esm/primitives/index.mjs +63 -1
  188. package/dist/esm/primitives/shared/constants.mjs +98 -1
  189. package/dist/esm/primitives/shared/getStyleValue.mjs +25 -1
  190. package/dist/esm/primitives/shared/responsive/getMediaQueries.mjs +29 -1
  191. package/dist/esm/primitives/shared/responsive/useBreakpoint.mjs +39 -1
  192. package/dist/esm/primitives/shared/responsive/utils.mjs +51 -1
  193. package/dist/esm/primitives/shared/styleUtils.mjs +122 -1
  194. package/dist/esm/primitives/shared/utils.mjs +60 -1
  195. package/dist/esm/primitives/types/style.mjs +104 -1
  196. package/dist/esm/primitives/types/theme.mjs +7 -1
  197. package/dist/esm/primitives/utils/getTestId.mjs +3 -1
  198. package/dist/esm/primitives/utils/primitiveWithForwardRef.mjs +14 -0
  199. package/dist/esm/primitives/utils/splitPrimitiveProps.mjs +36 -1
  200. package/dist/esm/primitives/utils/useLayoutEffect.mjs +13 -1
  201. package/dist/esm/primitives/utils/useStableId.mjs +34 -1
  202. package/dist/esm/version.mjs +3 -1
  203. package/dist/index.js +3485 -1
  204. package/dist/internal.js +16403 -1
  205. package/dist/styles/StorageManager.css +138 -0
  206. package/dist/styles/StorageManager.layer.css +140 -0
  207. package/dist/styles/_fieldControl.css +0 -0
  208. package/dist/styles/_fieldControl.layer.css +3 -0
  209. package/dist/styles/accordion.css +64 -0
  210. package/dist/styles/accordion.layer.css +66 -0
  211. package/dist/styles/alert.css +44 -0
  212. package/dist/styles/alert.layer.css +46 -0
  213. package/dist/styles/authenticator.css +72 -0
  214. package/dist/styles/authenticator.layer.css +74 -0
  215. package/dist/styles/autocomplete.css +48 -0
  216. package/dist/styles/autocomplete.layer.css +50 -0
  217. package/dist/styles/badge.css +35 -0
  218. package/dist/styles/badge.layer.css +37 -0
  219. package/dist/styles/base.css +1491 -0
  220. package/dist/styles/base.layer.css +1493 -0
  221. package/dist/styles/breadcrumbs.css +40 -0
  222. package/dist/styles/breadcrumbs.layer.css +42 -0
  223. package/dist/styles/button.css +1122 -0
  224. package/dist/styles/button.layer.css +1124 -0
  225. package/dist/styles/card.css +26 -0
  226. package/dist/styles/card.layer.css +28 -0
  227. package/dist/styles/checkbox.css +95 -0
  228. package/dist/styles/checkbox.layer.css +97 -0
  229. package/dist/styles/checkboxField.css +6 -0
  230. package/dist/styles/checkboxField.layer.css +8 -0
  231. package/dist/styles/collection.css +70 -0
  232. package/dist/styles/collection.layer.css +72 -0
  233. package/dist/styles/copy.css +27 -0
  234. package/dist/styles/copy.layer.css +29 -0
  235. package/dist/styles/dialCodeSelect.css +3 -0
  236. package/dist/styles/dialCodeSelect.layer.css +5 -0
  237. package/dist/styles/divider.css +47 -0
  238. package/dist/styles/divider.layer.css +49 -0
  239. package/dist/styles/dropZone.css +45 -0
  240. package/dist/styles/dropZone.layer.css +47 -0
  241. package/dist/styles/field.css +17 -0
  242. package/dist/styles/field.layer.css +19 -0
  243. package/dist/styles/fieldGroup.css +130 -0
  244. package/dist/styles/fieldGroup.layer.css +132 -0
  245. package/dist/styles/fieldMessages.css +10 -0
  246. package/dist/styles/fieldMessages.layer.css +12 -0
  247. package/dist/styles/fieldModifiers.css +15 -0
  248. package/dist/styles/fieldModifiers.layer.css +17 -0
  249. package/dist/styles/fieldset.css +37 -0
  250. package/dist/styles/fieldset.layer.css +39 -0
  251. package/dist/styles/flex.css +8 -0
  252. package/dist/styles/flex.layer.css +10 -0
  253. package/dist/styles/grid.css +3 -0
  254. package/dist/styles/grid.layer.css +5 -0
  255. package/dist/styles/heading.css +40 -0
  256. package/dist/styles/heading.layer.css +42 -0
  257. package/dist/styles/highlightMatch.css +3 -0
  258. package/dist/styles/highlightMatch.layer.css +5 -0
  259. package/dist/styles/icon.css +14 -0
  260. package/dist/styles/icon.layer.css +16 -0
  261. package/dist/styles/image.css +9 -0
  262. package/dist/styles/image.layer.css +11 -0
  263. package/dist/styles/inAppMessaging.css +179 -0
  264. package/dist/styles/inAppMessaging.layer.css +181 -0
  265. package/dist/styles/input.css +83 -0
  266. package/dist/styles/input.layer.css +85 -0
  267. package/dist/styles/link.css +26 -0
  268. package/dist/styles/link.layer.css +28 -0
  269. package/dist/styles/liveness.css +374 -0
  270. package/dist/styles/liveness.layer.css +376 -0
  271. package/dist/styles/loader.css +108 -0
  272. package/dist/styles/loader.layer.css +110 -0
  273. package/dist/styles/menu.css +54 -0
  274. package/dist/styles/menu.layer.css +56 -0
  275. package/dist/styles/message.css +111 -0
  276. package/dist/styles/message.layer.css +113 -0
  277. package/dist/styles/pagination.css +41 -0
  278. package/dist/styles/pagination.layer.css +43 -0
  279. package/dist/styles/passwordField.css +49 -0
  280. package/dist/styles/passwordField.layer.css +51 -0
  281. package/dist/styles/phoneNumberField.css +30 -0
  282. package/dist/styles/phoneNumberField.layer.css +32 -0
  283. package/dist/styles/placeholder.css +31 -0
  284. package/dist/styles/placeholder.layer.css +33 -0
  285. package/dist/styles/radio.css +82 -0
  286. package/dist/styles/radio.layer.css +84 -0
  287. package/dist/styles/radioGroupField.css +25 -0
  288. package/dist/styles/radioGroupField.layer.css +27 -0
  289. package/dist/styles/radiogroup.css +5 -0
  290. package/dist/styles/radiogroup.layer.css +7 -0
  291. package/dist/styles/rating.css +33 -0
  292. package/dist/styles/rating.layer.css +35 -0
  293. package/dist/styles/reset.css +76 -0
  294. package/dist/styles/reset.layer.css +78 -0
  295. package/dist/styles/scrollView.css +4 -0
  296. package/dist/styles/scrollView.layer.css +6 -0
  297. package/dist/styles/searchField.css +29 -0
  298. package/dist/styles/searchField.layer.css +31 -0
  299. package/dist/styles/select.css +128 -0
  300. package/dist/styles/select.layer.css +130 -0
  301. package/dist/styles/selectField.css +18 -0
  302. package/dist/styles/selectField.layer.css +20 -0
  303. package/dist/styles/sliderField.css +143 -0
  304. package/dist/styles/sliderField.layer.css +145 -0
  305. package/dist/styles/stepperField.css +77 -0
  306. package/dist/styles/stepperField.layer.css +79 -0
  307. package/dist/styles/switchField.css +76 -0
  308. package/dist/styles/switchField.layer.css +78 -0
  309. package/dist/styles/table.css +146 -0
  310. package/dist/styles/table.layer.css +148 -0
  311. package/dist/styles/tabs.css +87 -0
  312. package/dist/styles/tabs.layer.css +89 -0
  313. package/dist/styles/text.css +40 -0
  314. package/dist/styles/text.layer.css +42 -0
  315. package/dist/styles/textArea.css +71 -0
  316. package/dist/styles/textArea.layer.css +73 -0
  317. package/dist/styles/textAreaField.css +12 -0
  318. package/dist/styles/textAreaField.layer.css +14 -0
  319. package/dist/styles/textField.css +14 -0
  320. package/dist/styles/textField.layer.css +16 -0
  321. package/dist/styles/toggleButton.css +280 -0
  322. package/dist/styles/toggleButton.layer.css +282 -0
  323. package/dist/styles/toggleButtonGroup.css +31 -0
  324. package/dist/styles/toggleButtonGroup.layer.css +33 -0
  325. package/dist/styles/visuallyHidden.css +12 -0
  326. package/dist/styles/visuallyHidden.layer.css +14 -0
  327. package/dist/styles.css +299 -685
  328. package/dist/styles.layer.css +6115 -0
  329. package/dist/types/components/AccountSettings/ChangePassword/ChangePassword.d.ts +6 -6
  330. package/dist/types/components/AccountSettings/ChangePassword/types.d.ts +3 -0
  331. package/dist/types/components/AccountSettings/DeleteUser/DeleteUser.d.ts +3 -3
  332. package/dist/types/components/AccountSettings/DeleteUser/types.d.ts +7 -2
  333. package/dist/types/components/AccountSettings/utils/displayText.d.ts +18 -0
  334. package/dist/types/components/AccountSettings/utils/index.d.ts +1 -0
  335. package/dist/types/components/Authenticator/Authenticator.d.ts +4 -3
  336. package/dist/types/components/Authenticator/ConfirmSignIn/ConfirmSignIn.d.ts +2 -2
  337. package/dist/types/components/Authenticator/ConfirmSignUp/ConfirmSignUp.d.ts +2 -2
  338. package/dist/types/components/Authenticator/{ResetPassword → ForgotPassword}/index.d.ts +1 -1
  339. package/dist/types/components/Authenticator/{SetupTOTP/SetupTOTP.d.ts → SetupTotp/SetupTotp.d.ts} +1 -1
  340. package/dist/types/components/Authenticator/SetupTotp/index.d.ts +1 -0
  341. package/dist/types/components/Authenticator/SignIn/SignIn.d.ts +2 -2
  342. package/dist/types/components/Authenticator/SignUp/SignUp.d.ts +2 -2
  343. package/dist/types/components/Authenticator/VerifyUser/ConfirmVerifyUser.d.ts +2 -2
  344. package/dist/types/components/Authenticator/hooks/useCustomComponents/defaultComponents.d.ts +1 -1
  345. package/dist/types/components/Authenticator/withAuthenticator.d.ts +2 -2
  346. package/dist/types/components/ThemeProvider/ThemeContext.d.ts +6 -0
  347. package/dist/types/components/ThemeProvider/ThemeProvider.d.ts +1 -2
  348. package/dist/types/components/ThemeProvider/index.d.ts +1 -1
  349. package/dist/types/components/index.d.ts +0 -1
  350. package/dist/types/hooks/index.d.ts +0 -1
  351. package/dist/types/hooks/useAuth.d.ts +2 -2
  352. package/dist/types/hooks/useStorageURL.d.ts +2 -6
  353. package/dist/types/hooks/useTheme.d.ts +2 -2
  354. package/dist/types/index.d.ts +1 -1
  355. package/dist/types/internal.d.ts +0 -12
  356. package/dist/types/primitives/Accordion/Accordion.d.ts +19 -0
  357. package/dist/types/primitives/Accordion/AccordionContainer.d.ts +8 -0
  358. package/dist/types/primitives/Accordion/AccordionContent.d.ts +9 -0
  359. package/dist/types/primitives/Accordion/AccordionContext.d.ts +9 -0
  360. package/dist/types/primitives/Accordion/AccordionIcon.d.ts +9 -0
  361. package/dist/types/primitives/Accordion/AccordionItem.d.ts +6 -0
  362. package/dist/types/primitives/Accordion/AccordionTrigger.d.ts +9 -0
  363. package/dist/types/primitives/Accordion/index.d.ts +2 -0
  364. package/dist/types/primitives/Accordion/types.d.ts +49 -0
  365. package/dist/types/primitives/Alert/AlertIcon.d.ts +5 -2
  366. package/dist/types/primitives/Breadcrumbs/BreadcrumbItem.d.ts +1 -1
  367. package/dist/types/primitives/DropZone/DropZoneChildren.d.ts +10 -3
  368. package/dist/types/primitives/DropZone/filterAllowedFiles.d.ts +10 -0
  369. package/dist/types/primitives/Icon/context/IconsContext.d.ts +1 -1
  370. package/dist/types/primitives/PhoneNumberField/DialCodeSelect.d.ts +2 -0
  371. package/dist/types/primitives/StepperField/useStepper.d.ts +1 -1
  372. package/dist/types/primitives/Tabs/Tabs.d.ts +14 -3
  373. package/dist/types/primitives/Tabs/TabsContainer.d.ts +6 -0
  374. package/dist/types/primitives/Tabs/TabsContext.d.ts +7 -0
  375. package/dist/types/primitives/Tabs/TabsItem.d.ts +6 -0
  376. package/dist/types/primitives/Tabs/TabsList.d.ts +6 -0
  377. package/dist/types/primitives/Tabs/TabsPanel.d.ts +6 -0
  378. package/dist/types/primitives/Tabs/index.d.ts +2 -1
  379. package/dist/types/primitives/Tabs/types.d.ts +93 -0
  380. package/dist/types/primitives/components.d.ts +2 -2
  381. package/dist/types/primitives/index.d.ts +0 -1
  382. package/dist/types/primitives/shared/constants.d.ts +0 -6
  383. package/dist/types/primitives/shared/responsive/utils.d.ts +1 -1
  384. package/dist/types/primitives/shared/styleUtils.d.ts +2 -2
  385. package/dist/types/primitives/types/collection.d.ts +2 -2
  386. package/dist/types/primitives/types/fieldset.d.ts +1 -1
  387. package/dist/types/primitives/types/index.d.ts +0 -3
  388. package/dist/types/primitives/types/radioGroupField.d.ts +2 -1
  389. package/dist/types/primitives/types/view.d.ts +32 -2
  390. package/dist/types/primitives/utils/primitiveWithForwardRef.d.ts +11 -0
  391. package/dist/types/version.d.ts +1 -1
  392. package/package.json +13 -45
  393. package/dist/Field-4bd811d7.js +0 -1
  394. package/dist/esm/components/Authenticator/ResetPassword/ConfirmResetPassword.mjs +0 -1
  395. package/dist/esm/components/Authenticator/ResetPassword/ResetPassword.mjs +0 -1
  396. package/dist/esm/components/Authenticator/SetupTOTP/SetupTOTP.mjs +0 -1
  397. package/dist/esm/components/Storage/FileUploader/FileUploader.mjs +0 -1
  398. package/dist/esm/components/Storage/FileUploader/UploadDropZone/UploadDropZone.mjs +0 -1
  399. package/dist/esm/components/Storage/FileUploader/UploadPreviewer/UploadPreviewer.mjs +0 -1
  400. package/dist/esm/components/Storage/FileUploader/UploadTracker/UploadMessage.mjs +0 -1
  401. package/dist/esm/components/Storage/FileUploader/UploadTracker/UploadTracker.mjs +0 -1
  402. package/dist/esm/components/Storage/FileUploader/hooks/useFileUploader/useFileUploader.mjs +0 -1
  403. package/dist/esm/components/Storage/FileUploader/types.mjs +0 -1
  404. package/dist/esm/components/ThemeProvider/AmplifyContext.mjs +0 -1
  405. package/dist/esm/helpers/constants.mjs +0 -1
  406. package/dist/esm/hooks/actions/constants.mjs +0 -1
  407. package/dist/esm/hooks/actions/shared/types.mjs +0 -1
  408. package/dist/esm/hooks/actions/shared/useTypeCastFields.mjs +0 -1
  409. package/dist/esm/hooks/actions/useAuthSignOutAction.mjs +0 -1
  410. package/dist/esm/hooks/actions/useDataStoreCreateAction.mjs +0 -1
  411. package/dist/esm/hooks/actions/useDataStoreDeleteAction.mjs +0 -1
  412. package/dist/esm/hooks/actions/useDataStoreUpdateAction.mjs +0 -1
  413. package/dist/esm/hooks/actions/useNavigateAction.mjs +0 -1
  414. package/dist/esm/hooks/actions/useStateMutationAction.mjs +0 -1
  415. package/dist/esm/hooks/useAmplify.mjs +0 -1
  416. package/dist/esm/hooks/useDataStore.mjs +0 -1
  417. package/dist/esm/primitives/Expander/Expander.mjs +0 -1
  418. package/dist/esm/primitives/Expander/ExpanderItem.mjs +0 -1
  419. package/dist/esm/primitives/PhoneNumberField/CountryCodeSelect.mjs +0 -1
  420. package/dist/esm/primitives/shared/datastore.mjs +0 -1
  421. package/dist/esm/studio/findChildOverrides.mjs +0 -1
  422. package/dist/esm/studio/getOverrideProps.mjs +0 -1
  423. package/dist/esm/studio/getOverridesFromVariants.mjs +0 -1
  424. package/dist/esm/studio/mergeVariantsAndOverrides.mjs +0 -1
  425. package/dist/styles.js +0 -2
  426. package/dist/types/components/Authenticator/SetupTOTP/index.d.ts +0 -1
  427. package/dist/types/components/Storage/FileUploader/FileUploader.d.ts +0 -3
  428. package/dist/types/components/Storage/FileUploader/UploadDropZone/UploadDropZone.d.ts +0 -3
  429. package/dist/types/components/Storage/FileUploader/UploadDropZone/index.d.ts +0 -1
  430. package/dist/types/components/Storage/FileUploader/UploadPreviewer/UploadPreviewer.d.ts +0 -3
  431. package/dist/types/components/Storage/FileUploader/UploadPreviewer/index.d.ts +0 -1
  432. package/dist/types/components/Storage/FileUploader/UploadTracker/UploadMessage.d.ts +0 -3
  433. package/dist/types/components/Storage/FileUploader/UploadTracker/UploadTracker.d.ts +0 -3
  434. package/dist/types/components/Storage/FileUploader/UploadTracker/index.d.ts +0 -1
  435. package/dist/types/components/Storage/FileUploader/hooks/index.d.ts +0 -1
  436. package/dist/types/components/Storage/FileUploader/hooks/useFileUploader/index.d.ts +0 -2
  437. package/dist/types/components/Storage/FileUploader/hooks/useFileUploader/types.d.ts +0 -18
  438. package/dist/types/components/Storage/FileUploader/hooks/useFileUploader/useFileUploader.d.ts +0 -9
  439. package/dist/types/components/Storage/FileUploader/index.d.ts +0 -1
  440. package/dist/types/components/Storage/FileUploader/types.d.ts +0 -91
  441. package/dist/types/components/Storage/index.d.ts +0 -1
  442. package/dist/types/components/ThemeProvider/AmplifyContext.d.ts +0 -6
  443. package/dist/types/hooks/actions/constants.d.ts +0 -39
  444. package/dist/types/hooks/actions/shared/types.d.ts +0 -27
  445. package/dist/types/hooks/actions/shared/useTypeCastFields.d.ts +0 -15
  446. package/dist/types/hooks/actions/testModels/model.d.ts +0 -25
  447. package/dist/types/hooks/actions/testModels/schema.d.ts +0 -2
  448. package/dist/types/hooks/actions/testModels/todo.d.ts +0 -13
  449. package/dist/types/hooks/actions/useAuthSignOutAction.d.ts +0 -9
  450. package/dist/types/hooks/actions/useDataStoreCreateAction.d.ts +0 -9
  451. package/dist/types/hooks/actions/useDataStoreDeleteAction.d.ts +0 -10
  452. package/dist/types/hooks/actions/useDataStoreUpdateAction.d.ts +0 -10
  453. package/dist/types/hooks/actions/useNavigateAction.d.ts +0 -15
  454. package/dist/types/hooks/actions/useStateMutationAction.d.ts +0 -10
  455. package/dist/types/hooks/useAmplify.d.ts +0 -6
  456. package/dist/types/hooks/useDataStore.d.ts +0 -18
  457. package/dist/types/primitives/Expander/Expander.d.ts +0 -6
  458. package/dist/types/primitives/Expander/ExpanderItem.d.ts +0 -7
  459. package/dist/types/primitives/Expander/index.d.ts +0 -2
  460. package/dist/types/primitives/Menu/__tests_/menu.test.d.ts +0 -1
  461. package/dist/types/primitives/PhoneNumberField/CountryCodeSelect.d.ts +0 -2
  462. package/dist/types/primitives/Rating/__test__/Rating.test.d.ts +0 -1
  463. package/dist/types/primitives/Rating/__test__/utils.test.d.ts +0 -1
  464. package/dist/types/primitives/Text/__test__/Text.test.d.ts +0 -1
  465. package/dist/types/primitives/shared/datastore.d.ts +0 -7
  466. package/dist/types/primitives/shared/index.d.ts +0 -1
  467. package/dist/types/primitives/shared/types.d.ts +0 -15
  468. package/dist/types/primitives/types/datastore.d.ts +0 -31
  469. package/dist/types/primitives/types/expander.d.ts +0 -51
  470. package/dist/types/primitives/types/tabs.d.ts +0 -63
  471. package/dist/types/studio/findChildOverrides.d.ts +0 -18
  472. package/dist/types/studio/getOverrideProps.d.ts +0 -18
  473. package/dist/types/studio/getOverridesFromVariants.d.ts +0 -20
  474. package/dist/types/studio/index.d.ts +0 -5
  475. package/dist/types/studio/mergeVariantsAndOverrides.d.ts +0 -18
  476. package/dist/types/studio/types.d.ts +0 -18
  477. package/dist/types/styles.d.ts +0 -1
  478. /package/dist/types/components/Authenticator/{ResetPassword → ForgotPassword}/ConfirmResetPassword.d.ts +0 -0
  479. /package/dist/types/components/Authenticator/{ResetPassword/ResetPassword.d.ts → ForgotPassword/ForgotPassword.d.ts} +0 -0
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
+ }