@aws-amplify/ui-react 6.1.0 → 6.1.2

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.
@@ -864,21 +864,21 @@ const IconWarning = (props) => {
864
864
  /**
865
865
  * @internal For internal Amplify UI use only. May be removed in a future release.
866
866
  */
867
- const AlertIcon = ({ variation, ariaHidden, }) => {
867
+ const AlertIcon = ({ variation, ariaHidden, ariaLabel, role, }) => {
868
868
  const icons = useIcons('alert');
869
869
  let icon;
870
870
  switch (variation) {
871
871
  case 'info':
872
- icon = icons?.info ?? React__namespace.createElement(IconInfo, { "aria-hidden": ariaHidden });
872
+ icon = icons?.info ?? (React__namespace.createElement(IconInfo, { "aria-hidden": ariaHidden, "aria-label": ariaLabel, role: role }));
873
873
  break;
874
874
  case 'error':
875
- icon = icons?.error ?? React__namespace.createElement(IconError, { "aria-hidden": ariaHidden });
875
+ icon = icons?.error ?? (React__namespace.createElement(IconError, { "aria-hidden": ariaHidden, "aria-label": ariaLabel, role: role }));
876
876
  break;
877
877
  case 'warning':
878
- icon = icons?.warning ?? React__namespace.createElement(IconWarning, { "aria-hidden": ariaHidden });
878
+ icon = icons?.warning ?? (React__namespace.createElement(IconWarning, { "aria-hidden": ariaHidden, "aria-label": ariaLabel, role: role }));
879
879
  break;
880
880
  case 'success':
881
- icon = icons?.success ?? React__namespace.createElement(IconCheckCircle, { "aria-hidden": ariaHidden });
881
+ icon = icons?.success ?? (React__namespace.createElement(IconCheckCircle, { "aria-hidden": ariaHidden, "aria-label": ariaLabel, role: role }));
882
882
  break;
883
883
  }
884
884
  return icon ? (React__namespace.createElement("span", { className: ui.ComponentClassName.AlertIcon }, icon)) : null;
@@ -12,21 +12,21 @@ import { IconWarning } from '../Icon/icons/IconWarning.mjs';
12
12
  /**
13
13
  * @internal For internal Amplify UI use only. May be removed in a future release.
14
14
  */
15
- const AlertIcon = ({ variation, ariaHidden, }) => {
15
+ const AlertIcon = ({ variation, ariaHidden, ariaLabel, role, }) => {
16
16
  const icons = useIcons('alert');
17
17
  let icon;
18
18
  switch (variation) {
19
19
  case 'info':
20
- icon = icons?.info ?? React.createElement(IconInfo, { "aria-hidden": ariaHidden });
20
+ icon = icons?.info ?? (React.createElement(IconInfo, { "aria-hidden": ariaHidden, "aria-label": ariaLabel, role: role }));
21
21
  break;
22
22
  case 'error':
23
- icon = icons?.error ?? React.createElement(IconError, { "aria-hidden": ariaHidden });
23
+ icon = icons?.error ?? (React.createElement(IconError, { "aria-hidden": ariaHidden, "aria-label": ariaLabel, role: role }));
24
24
  break;
25
25
  case 'warning':
26
- icon = icons?.warning ?? React.createElement(IconWarning, { "aria-hidden": ariaHidden });
26
+ icon = icons?.warning ?? (React.createElement(IconWarning, { "aria-hidden": ariaHidden, "aria-label": ariaLabel, role: role }));
27
27
  break;
28
28
  case 'success':
29
- icon = icons?.success ?? React.createElement(IconCheckCircle, { "aria-hidden": ariaHidden });
29
+ icon = icons?.success ?? (React.createElement(IconCheckCircle, { "aria-hidden": ariaHidden, "aria-label": ariaLabel, role: role }));
30
30
  break;
31
31
  }
32
32
  return icon ? (React.createElement("span", { className: ComponentClassName.AlertIcon }, icon)) : null;
@@ -18,7 +18,7 @@ const ShowPasswordButtonPrimitive = ({ fieldType, passwordIsHiddenLabel = passwo
18
18
  const icon = fieldType === 'password'
19
19
  ? icons?.visibility ?? React.createElement(IconVisibility, { "aria-hidden": "true" })
20
20
  : icons?.visibilityOff ?? React.createElement(IconVisibilityOff, { "aria-hidden": "true" });
21
- return (React.createElement(Button, { "aria-checked": fieldType !== 'password', ariaLabel: showPasswordButtonLabel, className: showPasswordButtonClass, ref: ref, role: "switch", size: size, ...rest },
21
+ return (React.createElement(Button, { "aria-checked": fieldType !== 'password', ariaLabel: showPasswordButtonLabel, className: showPasswordButtonClass, colorTheme: hasError ? 'error' : undefined, ref: ref, role: "switch", size: size, ...rest },
22
22
  React.createElement(VisuallyHidden, { "aria-live": "polite" }, fieldType === 'password'
23
23
  ? passwordIsHiddenLabel
24
24
  : passwordIsShownLabel),
@@ -1,3 +1,3 @@
1
- const VERSION = '6.1.0';
1
+ const VERSION = '6.1.2';
2
2
 
3
3
  export { VERSION };
package/dist/index.js CHANGED
@@ -6,7 +6,7 @@ var React = require('react');
6
6
  var isEqual = require('lodash/isEqual.js');
7
7
  var uiReactCore = require('@aws-amplify/ui-react-core');
8
8
  var ui = require('@aws-amplify/ui');
9
- var Field = require('./Field-0ebfe8d5.js');
9
+ var Field = require('./Field-e99a3ed1.js');
10
10
  require('aws-amplify/storage');
11
11
  var debounce = require('lodash/debounce.js');
12
12
  var Dropdown = require('@radix-ui/react-dropdown-menu');
@@ -1460,7 +1460,7 @@ const ShowPasswordButtonPrimitive = ({ fieldType, passwordIsHiddenLabel = passwo
1460
1460
  const icon = fieldType === 'password'
1461
1461
  ? icons?.visibility ?? React__namespace.createElement(Field.IconVisibility, { "aria-hidden": "true" })
1462
1462
  : icons?.visibilityOff ?? React__namespace.createElement(Field.IconVisibilityOff, { "aria-hidden": "true" });
1463
- return (React__namespace.createElement(Field.Button, { "aria-checked": fieldType !== 'password', ariaLabel: showPasswordButtonLabel, className: showPasswordButtonClass, ref: ref, role: "switch", size: size, ...rest },
1463
+ return (React__namespace.createElement(Field.Button, { "aria-checked": fieldType !== 'password', ariaLabel: showPasswordButtonLabel, className: showPasswordButtonClass, colorTheme: hasError ? 'error' : undefined, ref: ref, role: "switch", size: size, ...rest },
1464
1464
  React__namespace.createElement(VisuallyHidden, { "aria-live": "polite" }, fieldType === 'password'
1465
1465
  ? passwordIsHiddenLabel
1466
1466
  : passwordIsShownLabel),
@@ -2383,7 +2383,7 @@ const defaultDeleteUserDisplayText = {
2383
2383
  warningText: 'Deleting your account is not reversible. You will lose access to your account and all data associated with it.',
2384
2384
  };
2385
2385
 
2386
- const VERSION = '6.1.0';
2386
+ const VERSION = '6.1.2';
2387
2387
 
2388
2388
  const logger$2 = ui.getLogger('AccountSettings');
2389
2389
  const getIsDisabled = (formValues, validationError) => {
package/dist/internal.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var Field = require('./Field-0ebfe8d5.js');
5
+ var Field = require('./Field-e99a3ed1.js');
6
6
  var React = require('react');
7
7
  var Storage = require('aws-amplify/storage');
8
8
  var ui = require('@aws-amplify/ui');
@@ -197,10 +197,10 @@
197
197
  --amplify-components-button-outlined-success-active-border-color: var(--amplify-colors-green-100);
198
198
  --amplify-components-button-outlined-success-active-background-color: var(--amplify-colors-green-20);
199
199
  --amplify-components-button-outlined-success-active-color: var(--amplify-colors-green-100);
200
- --amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-60);
200
+ --amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-80);
201
201
  --amplify-components-button-outlined-error-background-color: transparent;
202
202
  --amplify-components-button-outlined-error-color: var(--amplify-colors-red-100);
203
- --amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-60);
203
+ --amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-80);
204
204
  --amplify-components-button-outlined-error-hover-background-color: var(--amplify-colors-red-10);
205
205
  --amplify-components-button-outlined-error-hover-color: var(--amplify-colors-red-100);
206
206
  --amplify-components-button-outlined-error-focus-border-color: var(--amplify-colors-red-100);
@@ -851,6 +851,19 @@
851
851
  --amplify-components-passwordfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color);
852
852
  --amplify-components-passwordfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color);
853
853
  --amplify-components-passwordfield-button-disabled-color: var(--amplify-components-button-disabled-color);
854
+ --amplify-components-passwordfield-button-error-color: var(--amplify-components-button-outlined-error-color);
855
+ --amplify-components-passwordfield-button-error-background-color: var(--amplify-components-button-outlined-error-background-color);
856
+ --amplify-components-passwordfield-button-error-border-color: var(--amplify-components-button-outlined-error-border-color);
857
+ --amplify-components-passwordfield-button-error-active-border-color: var(--amplify-components-button-outlined-error-active-border-color);
858
+ --amplify-components-passwordfield-button-error-active-background-color: var(--amplify-components-button-outlined-error-active-background-color);
859
+ --amplify-components-passwordfield-button-error-active-color: var(--amplify-components-button-outlined-error-active-color);
860
+ --amplify-components-passwordfield-button-error-focus-border-color: var(--amplify-components-button-outlined-error-focus-border-color);
861
+ --amplify-components-passwordfield-button-error-focus-background-color: var(--amplify-components-button-outlined-error-focus-background-color);
862
+ --amplify-components-passwordfield-button-error-focus-color: var(--amplify-components-button-outlined-error-focus-color);
863
+ --amplify-components-passwordfield-button-error-focus-box-shadow: var(--amplify-components-button-outlined-error-focus-box-shadow);
864
+ --amplify-components-passwordfield-button-error-hover-border-color: var(--amplify-components-button-outlined-error-hover-border-color);
865
+ --amplify-components-passwordfield-button-error-hover-background-color: var(--amplify-components-button-outlined-error-hover-background-color);
866
+ --amplify-components-passwordfield-button-error-hover-color: var(--amplify-components-button-outlined-error-hover-color);
854
867
  --amplify-components-passwordfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
855
868
  --amplify-components-passwordfield-button-focus-border-color: var(--amplify-components-button-focus-border-color);
856
869
  --amplify-components-passwordfield-button-focus-color: var(--amplify-components-button-focus-color);
@@ -198,10 +198,10 @@
198
198
  --amplify-components-button-outlined-success-active-border-color: var(--amplify-colors-green-100);
199
199
  --amplify-components-button-outlined-success-active-background-color: var(--amplify-colors-green-20);
200
200
  --amplify-components-button-outlined-success-active-color: var(--amplify-colors-green-100);
201
- --amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-60);
201
+ --amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-80);
202
202
  --amplify-components-button-outlined-error-background-color: transparent;
203
203
  --amplify-components-button-outlined-error-color: var(--amplify-colors-red-100);
204
- --amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-60);
204
+ --amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-80);
205
205
  --amplify-components-button-outlined-error-hover-background-color: var(--amplify-colors-red-10);
206
206
  --amplify-components-button-outlined-error-hover-color: var(--amplify-colors-red-100);
207
207
  --amplify-components-button-outlined-error-focus-border-color: var(--amplify-colors-red-100);
@@ -852,6 +852,19 @@
852
852
  --amplify-components-passwordfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color);
853
853
  --amplify-components-passwordfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color);
854
854
  --amplify-components-passwordfield-button-disabled-color: var(--amplify-components-button-disabled-color);
855
+ --amplify-components-passwordfield-button-error-color: var(--amplify-components-button-outlined-error-color);
856
+ --amplify-components-passwordfield-button-error-background-color: var(--amplify-components-button-outlined-error-background-color);
857
+ --amplify-components-passwordfield-button-error-border-color: var(--amplify-components-button-outlined-error-border-color);
858
+ --amplify-components-passwordfield-button-error-active-border-color: var(--amplify-components-button-outlined-error-active-border-color);
859
+ --amplify-components-passwordfield-button-error-active-background-color: var(--amplify-components-button-outlined-error-active-background-color);
860
+ --amplify-components-passwordfield-button-error-active-color: var(--amplify-components-button-outlined-error-active-color);
861
+ --amplify-components-passwordfield-button-error-focus-border-color: var(--amplify-components-button-outlined-error-focus-border-color);
862
+ --amplify-components-passwordfield-button-error-focus-background-color: var(--amplify-components-button-outlined-error-focus-background-color);
863
+ --amplify-components-passwordfield-button-error-focus-color: var(--amplify-components-button-outlined-error-focus-color);
864
+ --amplify-components-passwordfield-button-error-focus-box-shadow: var(--amplify-components-button-outlined-error-focus-box-shadow);
865
+ --amplify-components-passwordfield-button-error-hover-border-color: var(--amplify-components-button-outlined-error-hover-border-color);
866
+ --amplify-components-passwordfield-button-error-hover-background-color: var(--amplify-components-button-outlined-error-hover-background-color);
867
+ --amplify-components-passwordfield-button-error-hover-color: var(--amplify-components-button-outlined-error-hover-color);
855
868
  --amplify-components-passwordfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
856
869
  --amplify-components-passwordfield-button-focus-border-color: var(--amplify-components-button-focus-border-color);
857
870
  --amplify-components-passwordfield-button-focus-color: var(--amplify-components-button-focus-color);
@@ -5,6 +5,12 @@
5
5
  right: var(--amplify-space-medium);
6
6
  }
7
7
 
8
+ .liveness-detector .amplify-button--primary:focus {
9
+ box-shadow: unset;
10
+ outline: var(--amplify-components-button-focus-color) solid 2px;
11
+ outline-offset: 2px;
12
+ }
13
+
8
14
  .amplify-liveness-cancel-button {
9
15
  background-color: #fff;
10
16
  color: hsl(190, 95%, 30%);
@@ -39,6 +45,7 @@
39
45
  left: 0;
40
46
  height: 100%;
41
47
  width: 100%;
48
+ z-index: 2;
42
49
  }
43
50
 
44
51
  .amplify-liveness-video {
@@ -108,7 +115,7 @@
108
115
  }
109
116
 
110
117
  .amplify-liveness-instruction-overlay {
111
- z-index: 1;
118
+ z-index: 2;
112
119
  }
113
120
 
114
121
  .amplify-liveness-countdown-container {
@@ -342,6 +349,10 @@
342
349
  font-weight: var(--amplify-font-weights-bold);
343
350
  }
344
351
 
352
+ .amplify-liveness-hint--mobile {
353
+ margin-top: var(--amplify-space-xxxl);
354
+ }
355
+
345
356
  .amplify-liveness-hint__text {
346
357
  align-items: center;
347
358
  gap: var(--amplify-space-xs);
@@ -419,5 +430,6 @@
419
430
  flex-direction: column;
420
431
  align-items: center;
421
432
  justify-content: center;
433
+ text-align: center;
422
434
  height: 480px;
423
435
  }
@@ -6,6 +6,12 @@
6
6
  right: var(--amplify-space-medium);
7
7
  }
8
8
 
9
+ .liveness-detector .amplify-button--primary:focus {
10
+ box-shadow: unset;
11
+ outline: var(--amplify-components-button-focus-color) solid 2px;
12
+ outline-offset: 2px;
13
+ }
14
+
9
15
  .amplify-liveness-cancel-button {
10
16
  background-color: #fff;
11
17
  color: hsl(190, 95%, 30%);
@@ -40,6 +46,7 @@
40
46
  left: 0;
41
47
  height: 100%;
42
48
  width: 100%;
49
+ z-index: 2;
43
50
  }
44
51
 
45
52
  .amplify-liveness-video {
@@ -109,7 +116,7 @@
109
116
  }
110
117
 
111
118
  .amplify-liveness-instruction-overlay {
112
- z-index: 1;
119
+ z-index: 2;
113
120
  }
114
121
 
115
122
  .amplify-liveness-countdown-container {
@@ -343,6 +350,10 @@
343
350
  font-weight: var(--amplify-font-weights-bold);
344
351
  }
345
352
 
353
+ .amplify-liveness-hint--mobile {
354
+ margin-top: var(--amplify-space-xxxl);
355
+ }
356
+
346
357
  .amplify-liveness-hint__text {
347
358
  align-items: center;
348
359
  gap: var(--amplify-space-xs);
@@ -420,6 +431,7 @@
420
431
  flex-direction: column;
421
432
  align-items: center;
422
433
  justify-content: center;
434
+ text-align: center;
423
435
  height: 480px;
424
436
  }
425
437
  }
@@ -41,9 +41,43 @@
41
41
  --amplify-components-button-hover-color: var(
42
42
  --amplify-components-passwordfield-button-hover-color
43
43
  );
44
- }
45
-
46
- .amplify-field__show-password--error {
47
- color: var(--amplify-components-fieldcontrol-error-color);
48
- border-color: var(--amplify-components-fieldcontrol-error-border-color);
44
+ --amplify-components-button-outlined-error-color: var(
45
+ --amplify-components-passwordfield-button-error-color
46
+ );
47
+ --amplify-components-button-outlined-error-border-color: var(
48
+ --amplify-components-passwordfield-button-error-border-color
49
+ );
50
+ --amplify-components-button-outlined-error-background-color: var(
51
+ --amplify-components-passwordfield-button-error-background-color
52
+ );
53
+ --amplify-components-button-outlined-error-active-color: var(
54
+ --amplify-components-passwordfield-button-error-active-color
55
+ );
56
+ --amplify-components-button-outlined-error-active-border-color: var(
57
+ --amplify-components-passwordfield-button-error-active-border-color
58
+ );
59
+ --amplify-components-button-outlined-error-active-background-color: var(
60
+ --amplify-components-passwordfield-button-error-active-background-color
61
+ );
62
+ --amplify-components-button-outlined-error-hover-color: var(
63
+ --amplify-components-passwordfield-button-error-hover-color
64
+ );
65
+ --amplify-components-button-outlined-error-hover-border-color: var(
66
+ --amplify-components-passwordfield-button-error-hover-border-color
67
+ );
68
+ --amplify-components-button-outlined-error-hover-background-color: var(
69
+ --amplify-components-passwordfield-button-error-hover-background-color
70
+ );
71
+ --amplify-components-button-outlined-error-focus-color: var(
72
+ --amplify-components-passwordfield-button-error-focus-color
73
+ );
74
+ --amplify-components-button-outlined-error-focus-box-shadow: var(
75
+ --amplify-components-passwordfield-button-error-focus-box-shadow
76
+ );
77
+ --amplify-components-button-outlined-error-focus-border-color: var(
78
+ --amplify-components-passwordfield-button-error-focus-border-color
79
+ );
80
+ --amplify-components-button-outlined-error-focus-background-color: var(
81
+ --amplify-components-passwordfield-button-error-focus-background-color
82
+ );
49
83
  }
@@ -42,10 +42,44 @@
42
42
  --amplify-components-button-hover-color: var(
43
43
  --amplify-components-passwordfield-button-hover-color
44
44
  );
45
- }
46
-
47
- .amplify-field__show-password--error {
48
- color: var(--amplify-components-fieldcontrol-error-color);
49
- border-color: var(--amplify-components-fieldcontrol-error-border-color);
45
+ --amplify-components-button-outlined-error-color: var(
46
+ --amplify-components-passwordfield-button-error-color
47
+ );
48
+ --amplify-components-button-outlined-error-border-color: var(
49
+ --amplify-components-passwordfield-button-error-border-color
50
+ );
51
+ --amplify-components-button-outlined-error-background-color: var(
52
+ --amplify-components-passwordfield-button-error-background-color
53
+ );
54
+ --amplify-components-button-outlined-error-active-color: var(
55
+ --amplify-components-passwordfield-button-error-active-color
56
+ );
57
+ --amplify-components-button-outlined-error-active-border-color: var(
58
+ --amplify-components-passwordfield-button-error-active-border-color
59
+ );
60
+ --amplify-components-button-outlined-error-active-background-color: var(
61
+ --amplify-components-passwordfield-button-error-active-background-color
62
+ );
63
+ --amplify-components-button-outlined-error-hover-color: var(
64
+ --amplify-components-passwordfield-button-error-hover-color
65
+ );
66
+ --amplify-components-button-outlined-error-hover-border-color: var(
67
+ --amplify-components-passwordfield-button-error-hover-border-color
68
+ );
69
+ --amplify-components-button-outlined-error-hover-background-color: var(
70
+ --amplify-components-passwordfield-button-error-hover-background-color
71
+ );
72
+ --amplify-components-button-outlined-error-focus-color: var(
73
+ --amplify-components-passwordfield-button-error-focus-color
74
+ );
75
+ --amplify-components-button-outlined-error-focus-box-shadow: var(
76
+ --amplify-components-passwordfield-button-error-focus-box-shadow
77
+ );
78
+ --amplify-components-button-outlined-error-focus-border-color: var(
79
+ --amplify-components-passwordfield-button-error-focus-border-color
80
+ );
81
+ --amplify-components-button-outlined-error-focus-background-color: var(
82
+ --amplify-components-passwordfield-button-error-focus-background-color
83
+ );
50
84
  }
51
85
  }
@@ -80,6 +80,9 @@
80
80
  var(--amplify-components-table-header-border-width)
81
81
  var(--amplify-components-table-header-border-width);
82
82
  }
83
+ .amplify-table--striped .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
84
+ background-color: var(--amplify-components-table-row-striped-background-color);
85
+ }
83
86
  .amplify-table__caption {
84
87
  caption-side: var(--amplify-components-table-caption-caption-side);
85
88
  color: var(--amplify-components-table-caption-color);
@@ -138,9 +141,6 @@
138
141
  .amplify-table__td:last-child {
139
142
  border-right-width: var(--amplify-components-table-data-border-width);
140
143
  }
141
- .amplify-table[data-variation=striped] .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
142
- background-color: var(--amplify-components-table-row-striped-background-color);
143
- }
144
144
  .amplify-table[data-highlightonhover=true] .amplify-table__row:not(.amplify-table__head *):hover {
145
145
  background-color: var(--amplify-components-table-row-hover-background-color);
146
146
  }
@@ -81,6 +81,9 @@
81
81
  var(--amplify-components-table-header-border-width)
82
82
  var(--amplify-components-table-header-border-width);
83
83
  }
84
+ .amplify-table--striped .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
85
+ background-color: var(--amplify-components-table-row-striped-background-color);
86
+ }
84
87
  .amplify-table__caption {
85
88
  caption-side: var(--amplify-components-table-caption-caption-side);
86
89
  color: var(--amplify-components-table-caption-color);
@@ -139,9 +142,6 @@
139
142
  .amplify-table__td:last-child {
140
143
  border-right-width: var(--amplify-components-table-data-border-width);
141
144
  }
142
- .amplify-table[data-variation=striped] .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
143
- background-color: var(--amplify-components-table-row-striped-background-color);
144
- }
145
145
  .amplify-table[data-highlightonhover=true] .amplify-table__row:not(.amplify-table__head *):hover {
146
146
  background-color: var(--amplify-components-table-row-hover-background-color);
147
147
  }
package/dist/styles.css CHANGED
@@ -197,10 +197,10 @@
197
197
  --amplify-components-button-outlined-success-active-border-color: var(--amplify-colors-green-100);
198
198
  --amplify-components-button-outlined-success-active-background-color: var(--amplify-colors-green-20);
199
199
  --amplify-components-button-outlined-success-active-color: var(--amplify-colors-green-100);
200
- --amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-60);
200
+ --amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-80);
201
201
  --amplify-components-button-outlined-error-background-color: transparent;
202
202
  --amplify-components-button-outlined-error-color: var(--amplify-colors-red-100);
203
- --amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-60);
203
+ --amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-80);
204
204
  --amplify-components-button-outlined-error-hover-background-color: var(--amplify-colors-red-10);
205
205
  --amplify-components-button-outlined-error-hover-color: var(--amplify-colors-red-100);
206
206
  --amplify-components-button-outlined-error-focus-border-color: var(--amplify-colors-red-100);
@@ -851,6 +851,19 @@
851
851
  --amplify-components-passwordfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color);
852
852
  --amplify-components-passwordfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color);
853
853
  --amplify-components-passwordfield-button-disabled-color: var(--amplify-components-button-disabled-color);
854
+ --amplify-components-passwordfield-button-error-color: var(--amplify-components-button-outlined-error-color);
855
+ --amplify-components-passwordfield-button-error-background-color: var(--amplify-components-button-outlined-error-background-color);
856
+ --amplify-components-passwordfield-button-error-border-color: var(--amplify-components-button-outlined-error-border-color);
857
+ --amplify-components-passwordfield-button-error-active-border-color: var(--amplify-components-button-outlined-error-active-border-color);
858
+ --amplify-components-passwordfield-button-error-active-background-color: var(--amplify-components-button-outlined-error-active-background-color);
859
+ --amplify-components-passwordfield-button-error-active-color: var(--amplify-components-button-outlined-error-active-color);
860
+ --amplify-components-passwordfield-button-error-focus-border-color: var(--amplify-components-button-outlined-error-focus-border-color);
861
+ --amplify-components-passwordfield-button-error-focus-background-color: var(--amplify-components-button-outlined-error-focus-background-color);
862
+ --amplify-components-passwordfield-button-error-focus-color: var(--amplify-components-button-outlined-error-focus-color);
863
+ --amplify-components-passwordfield-button-error-focus-box-shadow: var(--amplify-components-button-outlined-error-focus-box-shadow);
864
+ --amplify-components-passwordfield-button-error-hover-border-color: var(--amplify-components-button-outlined-error-hover-border-color);
865
+ --amplify-components-passwordfield-button-error-hover-background-color: var(--amplify-components-button-outlined-error-hover-background-color);
866
+ --amplify-components-passwordfield-button-error-hover-color: var(--amplify-components-button-outlined-error-hover-color);
854
867
  --amplify-components-passwordfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
855
868
  --amplify-components-passwordfield-button-focus-border-color: var(--amplify-components-button-focus-border-color);
856
869
  --amplify-components-passwordfield-button-focus-color: var(--amplify-components-button-focus-color);
@@ -3911,6 +3924,12 @@ html[dir=rtl] .amplify-field-group__inner-start {
3911
3924
  right: var(--amplify-space-medium);
3912
3925
  }
3913
3926
 
3927
+ .liveness-detector .amplify-button--primary:focus {
3928
+ box-shadow: unset;
3929
+ outline: var(--amplify-components-button-focus-color) solid 2px;
3930
+ outline-offset: 2px;
3931
+ }
3932
+
3914
3933
  .amplify-liveness-cancel-button {
3915
3934
  background-color: #fff;
3916
3935
  color: hsl(190, 95%, 30%);
@@ -3945,6 +3964,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
3945
3964
  left: 0;
3946
3965
  height: 100%;
3947
3966
  width: 100%;
3967
+ z-index: 2;
3948
3968
  }
3949
3969
 
3950
3970
  .amplify-liveness-video {
@@ -4014,7 +4034,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4014
4034
  }
4015
4035
 
4016
4036
  .amplify-liveness-instruction-overlay {
4017
- z-index: 1;
4037
+ z-index: 2;
4018
4038
  }
4019
4039
 
4020
4040
  .amplify-liveness-countdown-container {
@@ -4248,6 +4268,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
4248
4268
  font-weight: var(--amplify-font-weights-bold);
4249
4269
  }
4250
4270
 
4271
+ .amplify-liveness-hint--mobile {
4272
+ margin-top: var(--amplify-space-xxxl);
4273
+ }
4274
+
4251
4275
  .amplify-liveness-hint__text {
4252
4276
  align-items: center;
4253
4277
  gap: var(--amplify-space-xs);
@@ -4325,6 +4349,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4325
4349
  flex-direction: column;
4326
4350
  align-items: center;
4327
4351
  justify-content: center;
4352
+ text-align: center;
4328
4353
  height: 480px;
4329
4354
  }
4330
4355
 
@@ -4580,11 +4605,45 @@ html[dir=rtl] .amplify-field-group__inner-start {
4580
4605
  --amplify-components-button-hover-color: var(
4581
4606
  --amplify-components-passwordfield-button-hover-color
4582
4607
  );
4583
- }
4584
-
4585
- .amplify-field__show-password--error {
4586
- color: var(--amplify-components-fieldcontrol-error-color);
4587
- border-color: var(--amplify-components-fieldcontrol-error-border-color);
4608
+ --amplify-components-button-outlined-error-color: var(
4609
+ --amplify-components-passwordfield-button-error-color
4610
+ );
4611
+ --amplify-components-button-outlined-error-border-color: var(
4612
+ --amplify-components-passwordfield-button-error-border-color
4613
+ );
4614
+ --amplify-components-button-outlined-error-background-color: var(
4615
+ --amplify-components-passwordfield-button-error-background-color
4616
+ );
4617
+ --amplify-components-button-outlined-error-active-color: var(
4618
+ --amplify-components-passwordfield-button-error-active-color
4619
+ );
4620
+ --amplify-components-button-outlined-error-active-border-color: var(
4621
+ --amplify-components-passwordfield-button-error-active-border-color
4622
+ );
4623
+ --amplify-components-button-outlined-error-active-background-color: var(
4624
+ --amplify-components-passwordfield-button-error-active-background-color
4625
+ );
4626
+ --amplify-components-button-outlined-error-hover-color: var(
4627
+ --amplify-components-passwordfield-button-error-hover-color
4628
+ );
4629
+ --amplify-components-button-outlined-error-hover-border-color: var(
4630
+ --amplify-components-passwordfield-button-error-hover-border-color
4631
+ );
4632
+ --amplify-components-button-outlined-error-hover-background-color: var(
4633
+ --amplify-components-passwordfield-button-error-hover-background-color
4634
+ );
4635
+ --amplify-components-button-outlined-error-focus-color: var(
4636
+ --amplify-components-passwordfield-button-error-focus-color
4637
+ );
4638
+ --amplify-components-button-outlined-error-focus-box-shadow: var(
4639
+ --amplify-components-passwordfield-button-error-focus-box-shadow
4640
+ );
4641
+ --amplify-components-button-outlined-error-focus-border-color: var(
4642
+ --amplify-components-passwordfield-button-error-focus-border-color
4643
+ );
4644
+ --amplify-components-button-outlined-error-focus-background-color: var(
4645
+ --amplify-components-passwordfield-button-error-focus-background-color
4646
+ );
4588
4647
  }
4589
4648
 
4590
4649
  .amplify-phonenumberfield select:not(:focus) {
@@ -5327,6 +5386,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
5327
5386
  var(--amplify-components-table-header-border-width)
5328
5387
  var(--amplify-components-table-header-border-width);
5329
5388
  }
5389
+ .amplify-table--striped .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
5390
+ background-color: var(--amplify-components-table-row-striped-background-color);
5391
+ }
5330
5392
  .amplify-table__caption {
5331
5393
  caption-side: var(--amplify-components-table-caption-caption-side);
5332
5394
  color: var(--amplify-components-table-caption-color);
@@ -5385,9 +5447,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
5385
5447
  .amplify-table__td:last-child {
5386
5448
  border-right-width: var(--amplify-components-table-data-border-width);
5387
5449
  }
5388
- .amplify-table[data-variation=striped] .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
5389
- background-color: var(--amplify-components-table-row-striped-background-color);
5390
- }
5391
5450
  .amplify-table[data-highlightonhover=true] .amplify-table__row:not(.amplify-table__head *):hover {
5392
5451
  background-color: var(--amplify-components-table-row-hover-background-color);
5393
5452
  }
@@ -198,10 +198,10 @@
198
198
  --amplify-components-button-outlined-success-active-border-color: var(--amplify-colors-green-100);
199
199
  --amplify-components-button-outlined-success-active-background-color: var(--amplify-colors-green-20);
200
200
  --amplify-components-button-outlined-success-active-color: var(--amplify-colors-green-100);
201
- --amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-60);
201
+ --amplify-components-button-outlined-error-border-color: var(--amplify-colors-red-80);
202
202
  --amplify-components-button-outlined-error-background-color: transparent;
203
203
  --amplify-components-button-outlined-error-color: var(--amplify-colors-red-100);
204
- --amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-60);
204
+ --amplify-components-button-outlined-error-hover-border-color: var(--amplify-colors-red-80);
205
205
  --amplify-components-button-outlined-error-hover-background-color: var(--amplify-colors-red-10);
206
206
  --amplify-components-button-outlined-error-hover-color: var(--amplify-colors-red-100);
207
207
  --amplify-components-button-outlined-error-focus-border-color: var(--amplify-colors-red-100);
@@ -852,6 +852,19 @@
852
852
  --amplify-components-passwordfield-button-disabled-background-color: var(--amplify-components-button-disabled-background-color);
853
853
  --amplify-components-passwordfield-button-disabled-border-color: var(--amplify-components-button-disabled-border-color);
854
854
  --amplify-components-passwordfield-button-disabled-color: var(--amplify-components-button-disabled-color);
855
+ --amplify-components-passwordfield-button-error-color: var(--amplify-components-button-outlined-error-color);
856
+ --amplify-components-passwordfield-button-error-background-color: var(--amplify-components-button-outlined-error-background-color);
857
+ --amplify-components-passwordfield-button-error-border-color: var(--amplify-components-button-outlined-error-border-color);
858
+ --amplify-components-passwordfield-button-error-active-border-color: var(--amplify-components-button-outlined-error-active-border-color);
859
+ --amplify-components-passwordfield-button-error-active-background-color: var(--amplify-components-button-outlined-error-active-background-color);
860
+ --amplify-components-passwordfield-button-error-active-color: var(--amplify-components-button-outlined-error-active-color);
861
+ --amplify-components-passwordfield-button-error-focus-border-color: var(--amplify-components-button-outlined-error-focus-border-color);
862
+ --amplify-components-passwordfield-button-error-focus-background-color: var(--amplify-components-button-outlined-error-focus-background-color);
863
+ --amplify-components-passwordfield-button-error-focus-color: var(--amplify-components-button-outlined-error-focus-color);
864
+ --amplify-components-passwordfield-button-error-focus-box-shadow: var(--amplify-components-button-outlined-error-focus-box-shadow);
865
+ --amplify-components-passwordfield-button-error-hover-border-color: var(--amplify-components-button-outlined-error-hover-border-color);
866
+ --amplify-components-passwordfield-button-error-hover-background-color: var(--amplify-components-button-outlined-error-hover-background-color);
867
+ --amplify-components-passwordfield-button-error-hover-color: var(--amplify-components-button-outlined-error-hover-color);
855
868
  --amplify-components-passwordfield-button-focus-background-color: var(--amplify-components-button-focus-background-color);
856
869
  --amplify-components-passwordfield-button-focus-border-color: var(--amplify-components-button-focus-border-color);
857
870
  --amplify-components-passwordfield-button-focus-color: var(--amplify-components-button-focus-color);
@@ -3912,6 +3925,12 @@ html[dir=rtl] .amplify-field-group__inner-start {
3912
3925
  right: var(--amplify-space-medium);
3913
3926
  }
3914
3927
 
3928
+ .liveness-detector .amplify-button--primary:focus {
3929
+ box-shadow: unset;
3930
+ outline: var(--amplify-components-button-focus-color) solid 2px;
3931
+ outline-offset: 2px;
3932
+ }
3933
+
3915
3934
  .amplify-liveness-cancel-button {
3916
3935
  background-color: #fff;
3917
3936
  color: hsl(190, 95%, 30%);
@@ -3946,6 +3965,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
3946
3965
  left: 0;
3947
3966
  height: 100%;
3948
3967
  width: 100%;
3968
+ z-index: 2;
3949
3969
  }
3950
3970
 
3951
3971
  .amplify-liveness-video {
@@ -4015,7 +4035,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4015
4035
  }
4016
4036
 
4017
4037
  .amplify-liveness-instruction-overlay {
4018
- z-index: 1;
4038
+ z-index: 2;
4019
4039
  }
4020
4040
 
4021
4041
  .amplify-liveness-countdown-container {
@@ -4249,6 +4269,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
4249
4269
  font-weight: var(--amplify-font-weights-bold);
4250
4270
  }
4251
4271
 
4272
+ .amplify-liveness-hint--mobile {
4273
+ margin-top: var(--amplify-space-xxxl);
4274
+ }
4275
+
4252
4276
  .amplify-liveness-hint__text {
4253
4277
  align-items: center;
4254
4278
  gap: var(--amplify-space-xs);
@@ -4326,6 +4350,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
4326
4350
  flex-direction: column;
4327
4351
  align-items: center;
4328
4352
  justify-content: center;
4353
+ text-align: center;
4329
4354
  height: 480px;
4330
4355
  }
4331
4356
 
@@ -4581,11 +4606,45 @@ html[dir=rtl] .amplify-field-group__inner-start {
4581
4606
  --amplify-components-button-hover-color: var(
4582
4607
  --amplify-components-passwordfield-button-hover-color
4583
4608
  );
4584
- }
4585
-
4586
- .amplify-field__show-password--error {
4587
- color: var(--amplify-components-fieldcontrol-error-color);
4588
- border-color: var(--amplify-components-fieldcontrol-error-border-color);
4609
+ --amplify-components-button-outlined-error-color: var(
4610
+ --amplify-components-passwordfield-button-error-color
4611
+ );
4612
+ --amplify-components-button-outlined-error-border-color: var(
4613
+ --amplify-components-passwordfield-button-error-border-color
4614
+ );
4615
+ --amplify-components-button-outlined-error-background-color: var(
4616
+ --amplify-components-passwordfield-button-error-background-color
4617
+ );
4618
+ --amplify-components-button-outlined-error-active-color: var(
4619
+ --amplify-components-passwordfield-button-error-active-color
4620
+ );
4621
+ --amplify-components-button-outlined-error-active-border-color: var(
4622
+ --amplify-components-passwordfield-button-error-active-border-color
4623
+ );
4624
+ --amplify-components-button-outlined-error-active-background-color: var(
4625
+ --amplify-components-passwordfield-button-error-active-background-color
4626
+ );
4627
+ --amplify-components-button-outlined-error-hover-color: var(
4628
+ --amplify-components-passwordfield-button-error-hover-color
4629
+ );
4630
+ --amplify-components-button-outlined-error-hover-border-color: var(
4631
+ --amplify-components-passwordfield-button-error-hover-border-color
4632
+ );
4633
+ --amplify-components-button-outlined-error-hover-background-color: var(
4634
+ --amplify-components-passwordfield-button-error-hover-background-color
4635
+ );
4636
+ --amplify-components-button-outlined-error-focus-color: var(
4637
+ --amplify-components-passwordfield-button-error-focus-color
4638
+ );
4639
+ --amplify-components-button-outlined-error-focus-box-shadow: var(
4640
+ --amplify-components-passwordfield-button-error-focus-box-shadow
4641
+ );
4642
+ --amplify-components-button-outlined-error-focus-border-color: var(
4643
+ --amplify-components-passwordfield-button-error-focus-border-color
4644
+ );
4645
+ --amplify-components-button-outlined-error-focus-background-color: var(
4646
+ --amplify-components-passwordfield-button-error-focus-background-color
4647
+ );
4589
4648
  }
4590
4649
 
4591
4650
  .amplify-phonenumberfield select:not(:focus) {
@@ -5328,6 +5387,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
5328
5387
  var(--amplify-components-table-header-border-width)
5329
5388
  var(--amplify-components-table-header-border-width);
5330
5389
  }
5390
+ .amplify-table--striped .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
5391
+ background-color: var(--amplify-components-table-row-striped-background-color);
5392
+ }
5331
5393
  .amplify-table__caption {
5332
5394
  caption-side: var(--amplify-components-table-caption-caption-side);
5333
5395
  color: var(--amplify-components-table-caption-color);
@@ -5386,9 +5448,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
5386
5448
  .amplify-table__td:last-child {
5387
5449
  border-right-width: var(--amplify-components-table-data-border-width);
5388
5450
  }
5389
- .amplify-table[data-variation=striped] .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
5390
- background-color: var(--amplify-components-table-row-striped-background-color);
5391
- }
5392
5451
  .amplify-table[data-highlightonhover=true] .amplify-table__row:not(.amplify-table__head *):hover {
5393
5452
  background-color: var(--amplify-components-table-row-hover-background-color);
5394
5453
  }
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
- import { AlertVariations } from '../types';
3
- interface AlertIconProps {
2
+ import { AlertVariations, ViewProps } from '../types';
3
+ interface AlertIconProps extends Pick<ViewProps, 'role' | 'ariaLabel'> {
4
4
  variation?: AlertVariations;
5
5
  ariaHidden?: boolean;
6
6
  }
@@ -8,7 +8,7 @@ interface AlertIconProps {
8
8
  * @internal For internal Amplify UI use only. May be removed in a future release.
9
9
  */
10
10
  export declare const AlertIcon: {
11
- ({ variation, ariaHidden, }: AlertIconProps): JSX.Element | null;
11
+ ({ variation, ariaHidden, ariaLabel, role, }: AlertIconProps): JSX.Element | null;
12
12
  displayName: string;
13
13
  };
14
14
  export {};
@@ -18,13 +18,14 @@ type PurpleKeys = 'purple.10' | 'purple.20' | 'purple.40' | 'purple.60' | 'purpl
18
18
  type PinkKeys = 'pink.10' | 'pink.20' | 'pink.40' | 'pink.60' | 'pink.80' | 'pink.90' | 'pink.100';
19
19
  type NeutralKeys = 'neutral.10' | 'neutral.20' | 'neutral.40' | 'neutral.60' | 'neutral.80' | 'neutral.90' | 'neutral.100';
20
20
  type OverlayKeys = 'overlay.10' | 'overlay.20' | 'overlay.30' | 'overlay.40' | 'overlay.50' | 'overlay.60' | 'overlay.70' | 'overlay.80' | 'overlay.90';
21
- type BrandColorKeys = 'brand.primary.10' | 'brand.primary.20' | 'brand.primary.40' | 'brand.primary.60' | 'brand.primary.80' | 'brand.primary.90' | 'brand.primary.100' | 'brand.secondary.10' | 'brand.secondary.20' | 'brand.secondary.40' | 'brand.secondary.60' | 'brand.secondary.80' | 'brand.secondary.90' | 'brand.secondary.100';
21
+ type PrimaryColorKey = 'primary.10' | 'primary.20' | 'primary.40' | 'primary.60' | 'primary.80' | 'primary.90' | 'primary.100';
22
+ type SecondaryColorKey = 'secondary.10' | 'secondary.20' | 'secondary.40' | 'secondary.60' | 'secondary.80' | 'secondary.90' | 'secondary.100';
22
23
  type FontColorKeys = 'font.primary' | 'font.secondary' | 'font.tertiary' | 'font.disabled' | 'font.inverse' | 'font.interactive' | 'font.hover' | 'font.focus' | 'font.active' | 'font.success' | 'font.info' | 'font.warning' | 'font.error';
23
24
  type BackgroundColorKeys = 'background.primary' | 'background.secondary' | 'background.tertiary' | 'background.quaternary' | 'background.disabled' | 'background.success' | 'background.info' | 'background.warning' | 'background.error';
24
25
  type BorderColorKeys = 'border.primary' | 'border.secondary' | 'border.tertiary' | 'border.disabled' | 'border.focus' | 'border.pressed' | 'border.error';
25
26
  type ShadowColorKeys = 'shadow.primary' | 'shadow.secondary' | 'shadow.tertiary';
26
27
  export type BorderWidthKeys<PropertyType> = PropertyType | keyof BorderWidths;
27
- export type ColorKeys<PropertyType> = PropertyType | WhiteKey | BlackKey | RedKeys | OrangeKeys | YellowKeys | GreenKeys | TealKeys | BlueKeys | PurpleKeys | PinkKeys | NeutralKeys | OverlayKeys | BrandColorKeys | FontColorKeys | BackgroundColorKeys | BorderColorKeys | ShadowColorKeys;
28
+ export type ColorKeys<PropertyType> = PropertyType | WhiteKey | BlackKey | RedKeys | OrangeKeys | YellowKeys | GreenKeys | TealKeys | BlueKeys | PurpleKeys | PinkKeys | NeutralKeys | OverlayKeys | PrimaryColorKey | SecondaryColorKey | FontColorKeys | BackgroundColorKeys | BorderColorKeys | ShadowColorKeys;
28
29
  export type BoxShadowKeys<PropertyType> = PropertyType | keyof Shadows;
29
30
  export type FontSizeKeys<PropertyType> = PropertyType | keyof FontSizes;
30
31
  export type FontWeightKeys<PropertyType> = PropertyType | keyof FontWeights;
@@ -1 +1 @@
1
- export declare const VERSION = "6.1.0";
1
+ export declare const VERSION = "6.1.2";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui-react",
3
- "version": "6.1.0",
3
+ "version": "6.1.2",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.mjs",
6
6
  "exports": {
@@ -49,8 +49,8 @@
49
49
  "typecheck": "tsc --noEmit"
50
50
  },
51
51
  "dependencies": {
52
- "@aws-amplify/ui": "6.0.6",
53
- "@aws-amplify/ui-react-core": "3.0.6",
52
+ "@aws-amplify/ui": "6.0.8",
53
+ "@aws-amplify/ui-react-core": "3.0.8",
54
54
  "@radix-ui/react-direction": "1.0.0",
55
55
  "@radix-ui/react-dropdown-menu": "1.0.0",
56
56
  "@radix-ui/react-slider": "1.0.0",