@aws-amplify/ui-react 6.4.0 → 6.5.1

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 (37) hide show
  1. package/dist/{Field-4b189104.js → Field-3db91851.js} +23 -12
  2. package/dist/{ThemeStyle-b2dce96a.js → ThemeStyle-7d5abbc4.js} +18 -12
  3. package/dist/esm/components/ThemeProvider/ComponentStyle.mjs +21 -0
  4. package/dist/esm/components/ThemeProvider/GlobalStyle.mjs +18 -0
  5. package/dist/esm/components/ThemeProvider/Style.mjs +62 -0
  6. package/dist/esm/components/ThemeProvider/ThemeStyle.mjs +7 -60
  7. package/dist/esm/server.mjs +2 -0
  8. package/dist/esm/version.mjs +1 -1
  9. package/dist/index.js +79 -80
  10. package/dist/internal.js +1 -2
  11. package/dist/server.js +61 -13
  12. package/dist/styles/breadcrumbs.css +4 -2
  13. package/dist/styles/breadcrumbs.layer.css +4 -2
  14. package/dist/styles/button.css +19 -10
  15. package/dist/styles/button.layer.css +19 -10
  16. package/dist/styles/input.css +3 -2
  17. package/dist/styles/input.layer.css +3 -2
  18. package/dist/styles/link.css +10 -5
  19. package/dist/styles/link.layer.css +10 -5
  20. package/dist/styles/reset.css +4 -1
  21. package/dist/styles/reset.layer.css +4 -1
  22. package/dist/styles/sliderField.css +3 -2
  23. package/dist/styles/sliderField.layer.css +3 -2
  24. package/dist/styles/textArea.css +3 -2
  25. package/dist/styles/textArea.layer.css +3 -2
  26. package/dist/styles.css +42 -23
  27. package/dist/styles.layer.css +42 -23
  28. package/dist/types/components/ThemeProvider/ComponentStyle.d.ts +22 -0
  29. package/dist/types/components/ThemeProvider/GlobalStyle.d.ts +20 -0
  30. package/dist/types/components/ThemeProvider/Style.d.ts +13 -0
  31. package/dist/types/components/ThemeProvider/ThemeStyle.d.ts +6 -4
  32. package/dist/types/primitives/shared/responsive/utils.d.ts +1 -1
  33. package/dist/types/server.d.ts +2 -0
  34. package/dist/types/version.d.ts +1 -1
  35. package/package.json +5 -4
  36. package/dist/primitiveWithForwardRef-7e929242.js +0 -36
  37. package/dist/types/primitives/Card/__test__/Card.test.d.ts +0 -1
package/dist/internal.js CHANGED
@@ -2,14 +2,13 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var Field = require('./Field-4b189104.js');
5
+ var Field = require('./Field-3db91851.js');
6
6
  var React = require('react');
7
7
  var Storage = require('aws-amplify/storage');
8
8
  var ui = require('@aws-amplify/ui');
9
9
  var uiReactCore = require('@aws-amplify/ui-react-core');
10
10
  require('@aws-amplify/core');
11
11
  require('aws-amplify/auth');
12
- require('./primitiveWithForwardRef-7e929242.js');
13
12
 
14
13
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
15
14
 
package/dist/server.js CHANGED
@@ -2,31 +2,79 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var ThemeStyle = require('./ThemeStyle-b2dce96a.js');
5
+ var ThemeStyle = require('./ThemeStyle-7d5abbc4.js');
6
+ var React = require('react');
6
7
  var ui = require('@aws-amplify/ui');
7
- require('react');
8
- require('./primitiveWithForwardRef-7e929242.js');
9
8
 
9
+ function _interopNamespace(e) {
10
+ if (e && e.__esModule) return e;
11
+ var n = Object.create(null);
12
+ if (e) {
13
+ Object.keys(e).forEach(function (k) {
14
+ if (k !== 'default') {
15
+ var d = Object.getOwnPropertyDescriptor(e, k);
16
+ Object.defineProperty(n, k, d.get ? d : {
17
+ enumerable: true,
18
+ get: function () { return e[k]; }
19
+ });
20
+ }
21
+ });
22
+ }
23
+ n["default"] = e;
24
+ return Object.freeze(n);
25
+ }
10
26
 
27
+ var React__namespace = /*#__PURE__*/_interopNamespace(React);
28
+
29
+ /**
30
+ * @experimental
31
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
32
+ */
33
+ const ComponentStyle = ({ theme, componentThemes = [], ...rest }) => {
34
+ if (!theme || !componentThemes.length) {
35
+ return null;
36
+ }
37
+ const cssText = ui.createComponentCSS({
38
+ theme,
39
+ components: componentThemes,
40
+ });
41
+ return React__namespace.createElement(ThemeStyle.Style, { ...rest, cssText: cssText });
42
+ };
43
+ ComponentStyle.displayName = 'ComponentStyle';
44
+
45
+ /**
46
+ * @experimental
47
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
48
+ */
49
+ const GlobalStyle = ({ styles, ...rest }) => {
50
+ if (!styles) {
51
+ return null;
52
+ }
53
+ const cssText = ui.createGlobalCSS(styles);
54
+ return React__namespace.createElement(ThemeStyle.Style, { ...rest, cssText: cssText });
55
+ };
56
+ GlobalStyle.displayName = 'GlobalStyle';
11
57
 
12
58
  exports.ThemeStyle = ThemeStyle.ThemeStyle;
13
59
  Object.defineProperty(exports, 'createComponentClasses', {
14
- enumerable: true,
15
- get: function () { return ui.createComponentClasses; }
60
+ enumerable: true,
61
+ get: function () { return ui.createComponentClasses; }
16
62
  });
17
63
  Object.defineProperty(exports, 'createTheme', {
18
- enumerable: true,
19
- get: function () { return ui.createTheme; }
64
+ enumerable: true,
65
+ get: function () { return ui.createTheme; }
20
66
  });
21
67
  Object.defineProperty(exports, 'defaultDarkModeOverride', {
22
- enumerable: true,
23
- get: function () { return ui.defaultDarkModeOverride; }
68
+ enumerable: true,
69
+ get: function () { return ui.defaultDarkModeOverride; }
24
70
  });
25
71
  Object.defineProperty(exports, 'defaultTheme', {
26
- enumerable: true,
27
- get: function () { return ui.defaultTheme; }
72
+ enumerable: true,
73
+ get: function () { return ui.defaultTheme; }
28
74
  });
29
75
  Object.defineProperty(exports, 'defineComponentTheme', {
30
- enumerable: true,
31
- get: function () { return ui.defineComponentTheme; }
76
+ enumerable: true,
77
+ get: function () { return ui.defineComponentTheme; }
32
78
  });
79
+ exports.ComponentStyle = ComponentStyle;
80
+ exports.GlobalStyle = GlobalStyle;
package/dist/styles/breadcrumbs.css CHANGED
@@ -27,12 +27,14 @@
27
27
  font-weight: var(--amplify-components-breadcrumbs-link-font-weight);
28
28
  padding-inline: var(--amplify-components-breadcrumbs-link-padding-inline);
29
29
  padding-block: var(--amplify-components-breadcrumbs-link-padding-block);
30
- text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
30
+ -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
31
+ text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
31
32
  }
32
33
 
33
34
  .amplify-breadcrumbs__link--current {
34
35
  color: var(--amplify-components-breadcrumbs-link-current-color);
35
36
  font-size: var(--amplify-components-breadcrumbs-link-current-font-size);
36
37
  font-weight: var(--amplify-components-breadcrumbs-link-current-font-weight);
37
- text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
38
+ -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
39
+ text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
38
40
  }
package/dist/styles/breadcrumbs.layer.css CHANGED
@@ -28,13 +28,15 @@
28
28
  font-weight: var(--amplify-components-breadcrumbs-link-font-weight);
29
29
  padding-inline: var(--amplify-components-breadcrumbs-link-padding-inline);
30
30
  padding-block: var(--amplify-components-breadcrumbs-link-padding-block);
31
- text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
31
+ -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
32
+ text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
32
33
  }
33
34
 
34
35
  .amplify-breadcrumbs__link--current {
35
36
  color: var(--amplify-components-breadcrumbs-link-current-color);
36
37
  font-size: var(--amplify-components-breadcrumbs-link-current-font-size);
37
38
  font-weight: var(--amplify-components-breadcrumbs-link-current-font-weight);
38
- text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
39
+ -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
40
+ text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
39
41
  }
40
42
  }
package/dist/styles/button.css CHANGED
@@ -34,8 +34,9 @@
34
34
  padding-inline-start: var(--amplify-components-button-padding-inline-start);
35
35
  padding-inline-end: var(--amplify-components-button-padding-inline-end);
36
36
  transition: all var(--amplify-components-button-transition-duration);
37
- -moz-user-select: none;
38
- user-select: none;
37
+ -webkit-user-select: none;
38
+ -moz-user-select: none;
39
+ user-select: none;
39
40
  --amplify-internal-button-disabled-color: var(
40
41
  --amplify-components-button-disabled-color
41
42
  );
@@ -1056,50 +1057,58 @@
1056
1057
  background-color: var(--amplify-internal-button-disabled-background-color);
1057
1058
  border-color: var(--amplify-internal-button-disabled-border-color);
1058
1059
  color: var(--amplify-internal-button-disabled-color);
1059
- text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1060
+ -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1061
+ text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1060
1062
  cursor: not-allowed;
1061
1063
  }
1062
1064
  .amplify-button--disabled:hover {
1063
1065
  background-color: var(--amplify-internal-button-disabled-background-color);
1064
1066
  border-color: var(--amplify-internal-button-disabled-border-color);
1065
1067
  color: var(--amplify-internal-button-disabled-color);
1066
- text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1068
+ -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1069
+ text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1067
1070
  }
1068
1071
  .amplify-button--disabled :focus {
1069
1072
  background-color: var(--amplify-internal-button-disabled-background-color);
1070
1073
  border-color: var(--amplify-internal-button-disabled-border-color);
1071
1074
  color: var(--amplify-internal-button-disabled-color);
1072
- text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1075
+ -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1076
+ text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1073
1077
  }
1074
1078
  .amplify-button--disabled:active {
1075
1079
  background-color: var(--amplify-internal-button-disabled-background-color);
1076
1080
  border-color: var(--amplify-internal-button-disabled-border-color);
1077
1081
  color: var(--amplify-internal-button-disabled-color);
1078
- text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1082
+ -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1083
+ text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1079
1084
  }
1080
1085
  .amplify-button--loading {
1081
1086
  background-color: var(--amplify-internal-button-loading-background-color);
1082
1087
  border-color: var(--amplify-internal-button-loading-border-color);
1083
1088
  color: var(--amplify-components-button-loading-color);
1084
- text-decoration: var(--amplify-internal-button-loading-text-decoration);
1089
+ -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
1090
+ text-decoration: var(--amplify-internal-button-loading-text-decoration);
1085
1091
  }
1086
1092
  .amplify-button--loading:hover {
1087
1093
  background-color: var(--amplify-internal-button-loading-background-color);
1088
1094
  border-color: var(--amplify-internal-button-loading-border-color);
1089
1095
  color: var(--amplify-components-button-loading-color);
1090
- text-decoration: var(--amplify-internal-button-loading-text-decoration);
1096
+ -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
1097
+ text-decoration: var(--amplify-internal-button-loading-text-decoration);
1091
1098
  }
1092
1099
  .amplify-button--loading:focus {
1093
1100
  background-color: var(--amplify-internal-button-loading-background-color);
1094
1101
  border-color: var(--amplify-internal-button-loading-border-color);
1095
1102
  color: var(--amplify-components-button-loading-color);
1096
- text-decoration: var(--amplify-internal-button-loading-text-decoration);
1103
+ -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
1104
+ text-decoration: var(--amplify-internal-button-loading-text-decoration);
1097
1105
  }
1098
1106
  .amplify-button--loading:active {
1099
1107
  background-color: var(--amplify-internal-button-loading-background-color);
1100
1108
  border-color: var(--amplify-internal-button-loading-border-color);
1101
1109
  color: var(--amplify-components-button-loading-color);
1102
- text-decoration: var(--amplify-internal-button-loading-text-decoration);
1110
+ -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
1111
+ text-decoration: var(--amplify-internal-button-loading-text-decoration);
1103
1112
  }
1104
1113
  .amplify-button__loader-wrapper {
1105
1114
  align-items: var(--amplify-components-button-loader-wrapper-align-items);
package/dist/styles/button.layer.css CHANGED
@@ -35,8 +35,9 @@
35
35
  padding-inline-start: var(--amplify-components-button-padding-inline-start);
36
36
  padding-inline-end: var(--amplify-components-button-padding-inline-end);
37
37
  transition: all var(--amplify-components-button-transition-duration);
38
- -moz-user-select: none;
39
- user-select: none;
38
+ -webkit-user-select: none;
39
+ -moz-user-select: none;
40
+ user-select: none;
40
41
  --amplify-internal-button-disabled-color: var(
41
42
  --amplify-components-button-disabled-color
42
43
  );
@@ -1057,50 +1058,58 @@
1057
1058
  background-color: var(--amplify-internal-button-disabled-background-color);
1058
1059
  border-color: var(--amplify-internal-button-disabled-border-color);
1059
1060
  color: var(--amplify-internal-button-disabled-color);
1060
- text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1061
+ -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1062
+ text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1061
1063
  cursor: not-allowed;
1062
1064
  }
1063
1065
  .amplify-button--disabled:hover {
1064
1066
  background-color: var(--amplify-internal-button-disabled-background-color);
1065
1067
  border-color: var(--amplify-internal-button-disabled-border-color);
1066
1068
  color: var(--amplify-internal-button-disabled-color);
1067
- text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1069
+ -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1070
+ text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1068
1071
  }
1069
1072
  .amplify-button--disabled :focus {
1070
1073
  background-color: var(--amplify-internal-button-disabled-background-color);
1071
1074
  border-color: var(--amplify-internal-button-disabled-border-color);
1072
1075
  color: var(--amplify-internal-button-disabled-color);
1073
- text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1076
+ -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1077
+ text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1074
1078
  }
1075
1079
  .amplify-button--disabled:active {
1076
1080
  background-color: var(--amplify-internal-button-disabled-background-color);
1077
1081
  border-color: var(--amplify-internal-button-disabled-border-color);
1078
1082
  color: var(--amplify-internal-button-disabled-color);
1079
- text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1083
+ -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1084
+ text-decoration: var(--amplify-internal-button-disabled-text-decoration);
1080
1085
  }
1081
1086
  .amplify-button--loading {
1082
1087
  background-color: var(--amplify-internal-button-loading-background-color);
1083
1088
  border-color: var(--amplify-internal-button-loading-border-color);
1084
1089
  color: var(--amplify-components-button-loading-color);
1085
- text-decoration: var(--amplify-internal-button-loading-text-decoration);
1090
+ -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
1091
+ text-decoration: var(--amplify-internal-button-loading-text-decoration);
1086
1092
  }
1087
1093
  .amplify-button--loading:hover {
1088
1094
  background-color: var(--amplify-internal-button-loading-background-color);
1089
1095
  border-color: var(--amplify-internal-button-loading-border-color);
1090
1096
  color: var(--amplify-components-button-loading-color);
1091
- text-decoration: var(--amplify-internal-button-loading-text-decoration);
1097
+ -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
1098
+ text-decoration: var(--amplify-internal-button-loading-text-decoration);
1092
1099
  }
1093
1100
  .amplify-button--loading:focus {
1094
1101
  background-color: var(--amplify-internal-button-loading-background-color);
1095
1102
  border-color: var(--amplify-internal-button-loading-border-color);
1096
1103
  color: var(--amplify-components-button-loading-color);
1097
- text-decoration: var(--amplify-internal-button-loading-text-decoration);
1104
+ -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
1105
+ text-decoration: var(--amplify-internal-button-loading-text-decoration);
1098
1106
  }
1099
1107
  .amplify-button--loading:active {
1100
1108
  background-color: var(--amplify-internal-button-loading-background-color);
1101
1109
  border-color: var(--amplify-internal-button-loading-border-color);
1102
1110
  color: var(--amplify-components-button-loading-color);
1103
- text-decoration: var(--amplify-internal-button-loading-text-decoration);
1111
+ -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
1112
+ text-decoration: var(--amplify-internal-button-loading-text-decoration);
1104
1113
  }
1105
1114
  .amplify-button__loader-wrapper {
1106
1115
  align-items: var(--amplify-components-button-loader-wrapper-align-items);
package/dist/styles/input.css CHANGED
@@ -17,8 +17,9 @@
17
17
  outline-style: var(--amplify-components-fieldcontrol-outline-style);
18
18
  outline-width: var(--amplify-components-fieldcontrol-outline-width);
19
19
  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
20
- -moz-user-select: text;
21
- user-select: text;
20
+ -webkit-user-select: text;
21
+ -moz-user-select: text;
22
+ user-select: text;
22
23
  display: inline-block;
23
24
  --amplify-components-fieldcontrol-color: var(
24
25
  --amplify-components-input-color
package/dist/styles/input.layer.css CHANGED
@@ -18,8 +18,9 @@
18
18
  outline-style: var(--amplify-components-fieldcontrol-outline-style);
19
19
  outline-width: var(--amplify-components-fieldcontrol-outline-width);
20
20
  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
21
- -moz-user-select: text;
22
- user-select: text;
21
+ -webkit-user-select: text;
22
+ -moz-user-select: text;
23
+ user-select: text;
23
24
  display: inline-block;
24
25
  --amplify-components-fieldcontrol-color: var(
25
26
  --amplify-components-input-color
package/dist/styles/link.css CHANGED
@@ -1,21 +1,26 @@
1
1
  .amplify-link {
2
2
  color: var(--amplify-components-link-color);
3
- text-decoration: var(--amplify-components-link-text-decoration);
3
+ -webkit-text-decoration: var(--amplify-components-link-text-decoration);
4
+ text-decoration: var(--amplify-components-link-text-decoration);
4
5
  cursor: pointer;
5
6
  }
6
7
  .amplify-link:visited {
7
8
  color: var(--amplify-components-link-visited-color);
8
- text-decoration: var(--amplify-components-link-visited-text-decoration);
9
+ -webkit-text-decoration: var(--amplify-components-link-visited-text-decoration);
10
+ text-decoration: var(--amplify-components-link-visited-text-decoration);
9
11
  }
10
12
  .amplify-link:active {
11
13
  color: var(--amplify-components-link-active-color);
12
- text-decoration: var(--amplify-components-link-active-text-decoration);
14
+ -webkit-text-decoration: var(--amplify-components-link-active-text-decoration);
15
+ text-decoration: var(--amplify-components-link-active-text-decoration);
13
16
  }
14
17
  .amplify-link:focus {
15
18
  color: var(--amplify-components-link-focus-color);
16
- text-decoration: var(--amplify-components-link-focus-text-decoration);
19
+ -webkit-text-decoration: var(--amplify-components-link-focus-text-decoration);
20
+ text-decoration: var(--amplify-components-link-focus-text-decoration);
17
21
  }
18
22
  .amplify-link:hover {
19
23
  color: var(--amplify-components-link-hover-color);
20
- text-decoration: var(--amplify-components-link-hover-text-decoration);
24
+ -webkit-text-decoration: var(--amplify-components-link-hover-text-decoration);
25
+ text-decoration: var(--amplify-components-link-hover-text-decoration);
21
26
  }
package/dist/styles/link.layer.css CHANGED
@@ -1,23 +1,28 @@
1
1
  @layer amplify.components {
2
2
  .amplify-link {
3
3
  color: var(--amplify-components-link-color);
4
- text-decoration: var(--amplify-components-link-text-decoration);
4
+ -webkit-text-decoration: var(--amplify-components-link-text-decoration);
5
+ text-decoration: var(--amplify-components-link-text-decoration);
5
6
  cursor: pointer;
6
7
  }
7
8
  .amplify-link:visited {
8
9
  color: var(--amplify-components-link-visited-color);
9
- text-decoration: var(--amplify-components-link-visited-text-decoration);
10
+ -webkit-text-decoration: var(--amplify-components-link-visited-text-decoration);
11
+ text-decoration: var(--amplify-components-link-visited-text-decoration);
10
12
  }
11
13
  .amplify-link:active {
12
14
  color: var(--amplify-components-link-active-color);
13
- text-decoration: var(--amplify-components-link-active-text-decoration);
15
+ -webkit-text-decoration: var(--amplify-components-link-active-text-decoration);
16
+ text-decoration: var(--amplify-components-link-active-text-decoration);
14
17
  }
15
18
  .amplify-link:focus {
16
19
  color: var(--amplify-components-link-focus-color);
17
- text-decoration: var(--amplify-components-link-focus-text-decoration);
20
+ -webkit-text-decoration: var(--amplify-components-link-focus-text-decoration);
21
+ text-decoration: var(--amplify-components-link-focus-text-decoration);
18
22
  }
19
23
  .amplify-link:hover {
20
24
  color: var(--amplify-components-link-hover-color);
21
- text-decoration: var(--amplify-components-link-hover-text-decoration);
25
+ -webkit-text-decoration: var(--amplify-components-link-hover-text-decoration);
26
+ text-decoration: var(--amplify-components-link-hover-text-decoration);
22
27
  }
23
28
  }
package/dist/styles/reset.css CHANGED
@@ -6,6 +6,8 @@
6
6
 
7
7
  html:focus-within {
8
8
  scroll-behavior: smooth;
9
+ -moz-text-size-adjust: none;
10
+ -webkit-text-size-adjust: none;
9
11
  text-size-adjust: none;
10
12
  }
11
13
 
@@ -52,7 +54,8 @@ picture {
52
54
  }
53
55
 
54
56
  a:not([class]) {
55
- text-decoration-skip-ink: auto;
57
+ -webkit-text-decoration-skip: ink;
58
+ text-decoration-skip-ink: auto;
56
59
  color: currentColor;
57
60
  }
58
61
 
package/dist/styles/reset.layer.css CHANGED
@@ -7,6 +7,8 @@
7
7
 
8
8
  html:focus-within {
9
9
  scroll-behavior: smooth;
10
+ -moz-text-size-adjust: none;
11
+ -webkit-text-size-adjust: none;
10
12
  text-size-adjust: none;
11
13
  }
12
14
 
@@ -53,7 +55,8 @@ picture {
53
55
  }
54
56
 
55
57
  a:not([class]) {
56
- text-decoration-skip-ink: auto;
58
+ -webkit-text-decoration-skip: ink;
59
+ text-decoration-skip-ink: auto;
57
60
  color: currentColor;
58
61
  }
59
62
 
package/dist/styles/sliderField.css CHANGED
@@ -14,8 +14,9 @@
14
14
  padding-block: var(--amplify-components-sliderfield-padding-block);
15
15
  position: relative;
16
16
  touch-action: none;
17
- -moz-user-select: none;
18
- user-select: none;
17
+ -webkit-user-select: none;
18
+ -moz-user-select: none;
19
+ user-select: none;
19
20
  --amplify-internal-sliderfield-root-height: var(
20
21
  --amplify-components-sliderfield-thumb-height
21
22
  );
package/dist/styles/sliderField.layer.css CHANGED
@@ -15,8 +15,9 @@
15
15
  padding-block: var(--amplify-components-sliderfield-padding-block);
16
16
  position: relative;
17
17
  touch-action: none;
18
- -moz-user-select: none;
19
- user-select: none;
18
+ -webkit-user-select: none;
19
+ -moz-user-select: none;
20
+ user-select: none;
20
21
  --amplify-internal-sliderfield-root-height: var(
21
22
  --amplify-components-sliderfield-thumb-height
22
23
  );
package/dist/styles/textArea.css CHANGED
@@ -17,8 +17,9 @@
17
17
  outline-style: var(--amplify-components-fieldcontrol-outline-style);
18
18
  outline-width: var(--amplify-components-fieldcontrol-outline-width);
19
19
  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
20
- -moz-user-select: text;
21
- user-select: text;
20
+ -webkit-user-select: text;
21
+ -moz-user-select: text;
22
+ user-select: text;
22
23
  white-space: pre-wrap;
23
24
  }
24
25
  .amplify-textarea:focus {
package/dist/styles/textArea.layer.css CHANGED
@@ -18,8 +18,9 @@
18
18
  outline-style: var(--amplify-components-fieldcontrol-outline-style);
19
19
  outline-width: var(--amplify-components-fieldcontrol-outline-width);
20
20
  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
21
- -moz-user-select: text;
22
- user-select: text;
21
+ -webkit-user-select: text;
22
+ -moz-user-select: text;
23
+ user-select: text;
23
24
  white-space: pre-wrap;
24
25
  }
25
26
  .amplify-textarea:focus {
package/dist/styles.css CHANGED
@@ -1730,8 +1730,9 @@ strong.amplify-text {
1730
1730
  padding-inline-start: var(--amplify-components-button-padding-inline-start);
1731
1731
  padding-inline-end: var(--amplify-components-button-padding-inline-end);
1732
1732
  transition: all var(--amplify-components-button-transition-duration);
1733
- -moz-user-select: none;
1734
- user-select: none;
1733
+ -webkit-user-select: none;
1734
+ -moz-user-select: none;
1735
+ user-select: none;
1735
1736
  --amplify-internal-button-disabled-color: var(
1736
1737
  --amplify-components-button-disabled-color
1737
1738
  );
@@ -2752,50 +2753,58 @@ strong.amplify-text {
2752
2753
  background-color: var(--amplify-internal-button-disabled-background-color);
2753
2754
  border-color: var(--amplify-internal-button-disabled-border-color);
2754
2755
  color: var(--amplify-internal-button-disabled-color);
2755
- text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2756
+ -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2757
+ text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2756
2758
  cursor: not-allowed;
2757
2759
  }
2758
2760
  .amplify-button--disabled:hover {
2759
2761
  background-color: var(--amplify-internal-button-disabled-background-color);
2760
2762
  border-color: var(--amplify-internal-button-disabled-border-color);
2761
2763
  color: var(--amplify-internal-button-disabled-color);
2762
- text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2764
+ -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2765
+ text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2763
2766
  }
2764
2767
  .amplify-button--disabled :focus {
2765
2768
  background-color: var(--amplify-internal-button-disabled-background-color);
2766
2769
  border-color: var(--amplify-internal-button-disabled-border-color);
2767
2770
  color: var(--amplify-internal-button-disabled-color);
2768
- text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2771
+ -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2772
+ text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2769
2773
  }
2770
2774
  .amplify-button--disabled:active {
2771
2775
  background-color: var(--amplify-internal-button-disabled-background-color);
2772
2776
  border-color: var(--amplify-internal-button-disabled-border-color);
2773
2777
  color: var(--amplify-internal-button-disabled-color);
2774
- text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2778
+ -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2779
+ text-decoration: var(--amplify-internal-button-disabled-text-decoration);
2775
2780
  }
2776
2781
  .amplify-button--loading {
2777
2782
  background-color: var(--amplify-internal-button-loading-background-color);
2778
2783
  border-color: var(--amplify-internal-button-loading-border-color);
2779
2784
  color: var(--amplify-components-button-loading-color);
2780
- text-decoration: var(--amplify-internal-button-loading-text-decoration);
2785
+ -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
2786
+ text-decoration: var(--amplify-internal-button-loading-text-decoration);
2781
2787
  }
2782
2788
  .amplify-button--loading:hover {
2783
2789
  background-color: var(--amplify-internal-button-loading-background-color);
2784
2790
  border-color: var(--amplify-internal-button-loading-border-color);
2785
2791
  color: var(--amplify-components-button-loading-color);
2786
- text-decoration: var(--amplify-internal-button-loading-text-decoration);
2792
+ -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
2793
+ text-decoration: var(--amplify-internal-button-loading-text-decoration);
2787
2794
  }
2788
2795
  .amplify-button--loading:focus {
2789
2796
  background-color: var(--amplify-internal-button-loading-background-color);
2790
2797
  border-color: var(--amplify-internal-button-loading-border-color);
2791
2798
  color: var(--amplify-components-button-loading-color);
2792
- text-decoration: var(--amplify-internal-button-loading-text-decoration);
2799
+ -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
2800
+ text-decoration: var(--amplify-internal-button-loading-text-decoration);
2793
2801
  }
2794
2802
  .amplify-button--loading:active {
2795
2803
  background-color: var(--amplify-internal-button-loading-background-color);
2796
2804
  border-color: var(--amplify-internal-button-loading-border-color);
2797
2805
  color: var(--amplify-components-button-loading-color);
2798
- text-decoration: var(--amplify-internal-button-loading-text-decoration);
2806
+ -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
2807
+ text-decoration: var(--amplify-internal-button-loading-text-decoration);
2799
2808
  }
2800
2809
  .amplify-button__loader-wrapper {
2801
2810
  align-items: var(--amplify-components-button-loader-wrapper-align-items);
@@ -2943,8 +2952,9 @@ strong.amplify-text {
2943
2952
  outline-style: var(--amplify-components-fieldcontrol-outline-style);
2944
2953
  outline-width: var(--amplify-components-fieldcontrol-outline-width);
2945
2954
  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
2946
- -moz-user-select: text;
2947
- user-select: text;
2955
+ -webkit-user-select: text;
2956
+ -moz-user-select: text;
2957
+ user-select: text;
2948
2958
  display: inline-block;
2949
2959
  --amplify-components-fieldcontrol-color: var(
2950
2960
  --amplify-components-input-color
@@ -3027,8 +3037,9 @@ strong.amplify-text {
3027
3037
  outline-style: var(--amplify-components-fieldcontrol-outline-style);
3028
3038
  outline-width: var(--amplify-components-fieldcontrol-outline-width);
3029
3039
  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
3030
- -moz-user-select: text;
3031
- user-select: text;
3040
+ -webkit-user-select: text;
3041
+ -moz-user-select: text;
3042
+ user-select: text;
3032
3043
  white-space: pre-wrap;
3033
3044
  }
3034
3045
  .amplify-textarea:focus {
@@ -3092,24 +3103,29 @@ strong.amplify-text {
3092
3103
 
3093
3104
  .amplify-link {
3094
3105
  color: var(--amplify-components-link-color);
3095
- text-decoration: var(--amplify-components-link-text-decoration);
3106
+ -webkit-text-decoration: var(--amplify-components-link-text-decoration);
3107
+ text-decoration: var(--amplify-components-link-text-decoration);
3096
3108
  cursor: pointer;
3097
3109
  }
3098
3110
  .amplify-link:visited {
3099
3111
  color: var(--amplify-components-link-visited-color);
3100
- text-decoration: var(--amplify-components-link-visited-text-decoration);
3112
+ -webkit-text-decoration: var(--amplify-components-link-visited-text-decoration);
3113
+ text-decoration: var(--amplify-components-link-visited-text-decoration);
3101
3114
  }
3102
3115
  .amplify-link:active {
3103
3116
  color: var(--amplify-components-link-active-color);
3104
- text-decoration: var(--amplify-components-link-active-text-decoration);
3117
+ -webkit-text-decoration: var(--amplify-components-link-active-text-decoration);
3118
+ text-decoration: var(--amplify-components-link-active-text-decoration);
3105
3119
  }
3106
3120
  .amplify-link:focus {
3107
3121
  color: var(--amplify-components-link-focus-color);
3108
- text-decoration: var(--amplify-components-link-focus-text-decoration);
3122
+ -webkit-text-decoration: var(--amplify-components-link-focus-text-decoration);
3123
+ text-decoration: var(--amplify-components-link-focus-text-decoration);
3109
3124
  }
3110
3125
  .amplify-link:hover {
3111
3126
  color: var(--amplify-components-link-hover-color);
3112
- text-decoration: var(--amplify-components-link-hover-text-decoration);
3127
+ -webkit-text-decoration: var(--amplify-components-link-hover-text-decoration);
3128
+ text-decoration: var(--amplify-components-link-hover-text-decoration);
3113
3129
  }
3114
3130
 
3115
3131
  .amplify-loader {
@@ -3672,14 +3688,16 @@ strong.amplify-text {
3672
3688
  font-weight: var(--amplify-components-breadcrumbs-link-font-weight);
3673
3689
  padding-inline: var(--amplify-components-breadcrumbs-link-padding-inline);
3674
3690
  padding-block: var(--amplify-components-breadcrumbs-link-padding-block);
3675
- text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
3691
+ -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
3692
+ text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
3676
3693
  }
3677
3694
 
3678
3695
  .amplify-breadcrumbs__link--current {
3679
3696
  color: var(--amplify-components-breadcrumbs-link-current-color);
3680
3697
  font-size: var(--amplify-components-breadcrumbs-link-current-font-size);
3681
3698
  font-weight: var(--amplify-components-breadcrumbs-link-current-font-weight);
3682
- text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
3699
+ -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
3700
+ text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
3683
3701
  }
3684
3702
 
3685
3703
  .amplify-card {
@@ -5229,8 +5247,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
5229
5247
  padding-block: var(--amplify-components-sliderfield-padding-block);
5230
5248
  position: relative;
5231
5249
  touch-action: none;
5232
- -moz-user-select: none;
5233
- user-select: none;
5250
+ -webkit-user-select: none;
5251
+ -moz-user-select: none;
5252
+ user-select: none;
5234
5253
  --amplify-internal-sliderfield-root-height: var(
5235
5254
  --amplify-components-sliderfield-thumb-height
5236
5255
  );