@aws-amplify/ui 3.0.1-next.4 → 3.0.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.
Files changed (11) hide show
  1. package/LICENSE +201 -0
  2. package/README.md +1 -2
  3. package/dist/esm/index.js +31 -13
  4. package/dist/esm/index.js.map +3 -3
  5. package/dist/index.d.ts +615 -9289
  6. package/dist/index.js +31 -13
  7. package/dist/index.js.map +3 -3
  8. package/dist/styles.css +1683 -383
  9. package/dist/theme.css +580 -279
  10. package/package.json +18 -8
  11. package/CHANGELOG.md +0 -11
package/dist/styles.css CHANGED
@@ -3,15 +3,15 @@
3
3
  */
4
4
  /**
5
5
  * Do not edit directly
6
- * Generated on Wed, 29 Sep 2021 23:11:13 GMT
6
+ * Generated on Wed, 24 Nov 2021 22:44:54 GMT
7
7
  */
8
- :root {
8
+ :root, [data-amplify-theme] {
9
9
  --amplify-transforms-slide-x-large: translateX(2em);
10
10
  --amplify-transforms-slide-x-medium: translateX(1em);
11
11
  --amplify-transforms-slide-x-small: translateX(0.5em);
12
- --amplify-time-transition-long: 500ms;
13
- --amplify-time-transition-medium: 250ms;
14
- --amplify-time-transition-short: 100ms;
12
+ --amplify-time-long: 500ms;
13
+ --amplify-time-medium: 250ms;
14
+ --amplify-time-short: 100ms;
15
15
  --amplify-space-relative-xxxl: 4.5em;
16
16
  --amplify-space-relative-xxl: 3.0em;
17
17
  --amplify-space-relative-xl: 2.0em;
@@ -19,7 +19,8 @@
19
19
  --amplify-space-relative-medium: 1em;
20
20
  --amplify-space-relative-small: 0.75em;
21
21
  --amplify-space-relative-xs: 0.5em;
22
- --amplify-space-relative-xxs: 0.25em;
22
+ --amplify-space-relative-xxs: 0.375rem;
23
+ --amplify-space-relative-xxxs: 0.25em;
23
24
  --amplify-space-xxxl: 4.5rem;
24
25
  --amplify-space-xxl: 3.0rem;
25
26
  --amplify-space-xl: 2.0rem;
@@ -27,13 +28,18 @@
27
28
  --amplify-space-medium: 1rem;
28
29
  --amplify-space-small: 0.75rem;
29
30
  --amplify-space-xs: 0.5rem;
30
- --amplify-space-xxs: 0.25rem;
31
+ --amplify-space-xxs: 0.375rem;
32
+ --amplify-space-xxxs: 0.25rem;
33
+ --amplify-shadows-large: 0px 4px 12px var(--amplify-colors-shadow-primary);
34
+ --amplify-shadows-medium: 0px 2px 6px var(--amplify-colors-shadow-secondary);
35
+ --amplify-shadows-small: 0px 2px 4px var(--amplify-colors-shadow-tertiary);
31
36
  --amplify-radii-xxxl: 8rem;
32
37
  --amplify-radii-xxl: 4rem;
33
38
  --amplify-radii-xl: 2rem;
34
39
  --amplify-radii-large: 1rem;
35
- --amplify-radii-medium: 0.25rem;
36
- --amplify-radii-small: 0.125rem;
40
+ --amplify-radii-medium: 0.5rem;
41
+ --amplify-radii-small: 0.25rem;
42
+ --amplify-radii-xs: 0.125rem;
37
43
  --amplify-outline-widths-large: 3px;
38
44
  --amplify-outline-widths-medium: 2px;
39
45
  --amplify-outline-widths-small: 1px;
@@ -51,9 +57,9 @@
51
57
  --amplify-opacities-20: 0.2;
52
58
  --amplify-opacities-10: 0.1;
53
59
  --amplify-opacities-0: 0;
54
- --amplify-line-heights-large: 2.5;
55
- --amplify-line-heights-medium: 2.25;
56
- --amplify-line-heights-small: 2;
60
+ --amplify-line-heights-large: 2;
61
+ --amplify-line-heights-medium: 1.75;
62
+ --amplify-line-heights-small: 1.5;
57
63
  --amplify-font-weights-black: 900;
58
64
  --amplify-font-weights-extrabold: 800;
59
65
  --amplify-font-weights-bold: 700;
@@ -71,24 +77,76 @@
71
77
  --amplify-font-sizes-medium: 1rem;
72
78
  --amplify-font-sizes-small: 0.875rem;
73
79
  --amplify-font-sizes-xs: 0.75rem;
80
+ --amplify-font-sizes-xxs: 0.5rem;
81
+ --amplify-font-sizes-xxxs: 0.375rem;
74
82
  --amplify-fonts-default-static: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
75
83
  "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
76
84
  --amplify-fonts-default-variable: "InterVariable", -apple-system, BlinkMacSystemFont,
77
85
  "Helvetica Neue", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans",
78
86
  sans-serif;
79
87
  --amplify-colors-transparent: transparent;
80
- --amplify-colors-white: #fff;
81
- --amplify-colors-black: #000;
82
- --amplify-colors-shadow-tertiary: hsl(210, 50%, 10%, 0.05);
83
- --amplify-colors-shadow-secondary: hsl(210, 50%, 10%, 0.15);
84
- --amplify-colors-shadow-primary: hsl(210, 50%, 10%, 0.25);
88
+ --amplify-colors-white: hsl(0, 0%, 100%);
89
+ --amplify-colors-black: hsl(0, 0%, 0%);
90
+ --amplify-colors-overlay-90: hsla(0, 0%, 0%, 0.9);
91
+ --amplify-colors-overlay-80: hsla(0, 0%, 0%, 0.8);
92
+ --amplify-colors-overlay-70: hsla(0, 0%, 0%, 0.7);
93
+ --amplify-colors-overlay-60: hsla(0, 0%, 0%, 0.6);
94
+ --amplify-colors-overlay-50: hsla(0, 0%, 0%, 0.5);
95
+ --amplify-colors-overlay-40: hsla(0, 0%, 0%, 0.4);
96
+ --amplify-colors-overlay-30: hsla(0, 0%, 0%, 0.3);
97
+ --amplify-colors-overlay-20: hsla(0, 0%, 0%, 0.2);
98
+ --amplify-colors-overlay-10: hsla(0, 0%, 0%, 0.1);
99
+ --amplify-colors-shadow-tertiary: hsla(210, 50%, 10%, 0.05);
100
+ --amplify-colors-shadow-secondary: hsla(210, 50%, 10%, 0.15);
101
+ --amplify-colors-shadow-primary: hsla(210, 50%, 10%, 0.25);
102
+ --amplify-colors-border-error: var(--amplify-colors-red-80);
103
+ --amplify-colors-border-focus: var(--amplify-colors-brand-primary-100);
104
+ --amplify-colors-border-disabled: var(--amplify-colors-border-tertiary);
105
+ --amplify-colors-border-tertiary: var(--amplify-colors-neutral-20);
106
+ --amplify-colors-border-secondary: var(--amplify-colors-neutral-40);
107
+ --amplify-colors-border-primary: var(--amplify-colors-neutral-60);
108
+ --amplify-colors-background-success: var(--amplify-colors-green-20);
109
+ --amplify-colors-background-error: var(--amplify-colors-red-20);
110
+ --amplify-colors-background-warning: var(--amplify-colors-orange-20);
111
+ --amplify-colors-background-info: var(--amplify-colors-blue-20);
112
+ --amplify-colors-background-disabled: var(--amplify-colors-background-tertiary);
113
+ --amplify-colors-background-tertiary: var(--amplify-colors-neutral-20);
114
+ --amplify-colors-background-secondary: var(--amplify-colors-neutral-10);
115
+ --amplify-colors-background-primary: var(--amplify-colors-white);
116
+ --amplify-colors-font-success: var(--amplify-colors-green-90);
117
+ --amplify-colors-font-error: var(--amplify-colors-red-90);
118
+ --amplify-colors-font-warning: var(--amplify-colors-orange-90);
119
+ --amplify-colors-font-info: var(--amplify-colors-blue-90);
120
+ --amplify-colors-font-active: var(--amplify-colors-brand-primary-100);
121
+ --amplify-colors-font-focus: var(--amplify-colors-brand-primary-100);
122
+ --amplify-colors-font-hover: var(--amplify-colors-brand-primary-90);
123
+ --amplify-colors-font-interactive: var(--amplify-colors-brand-primary-80);
124
+ --amplify-colors-font-inverse: var(--amplify-colors-white);
125
+ --amplify-colors-font-disabled: var(--amplify-colors-font-tertiary);
126
+ --amplify-colors-font-tertiary: var(--amplify-colors-neutral-80);
127
+ --amplify-colors-font-secondary: var(--amplify-colors-neutral-90);
128
+ --amplify-colors-font-primary: var(--amplify-colors-neutral-100);
129
+ --amplify-colors-brand-secondary-100: var(--amplify-colors-purple-100);
130
+ --amplify-colors-brand-secondary-90: var(--amplify-colors-purple-90);
131
+ --amplify-colors-brand-secondary-80: var(--amplify-colors-purple-80);
132
+ --amplify-colors-brand-secondary-60: var(--amplify-colors-purple-60);
133
+ --amplify-colors-brand-secondary-40: var(--amplify-colors-purple-40);
134
+ --amplify-colors-brand-secondary-20: var(--amplify-colors-purple-20);
135
+ --amplify-colors-brand-secondary-10: var(--amplify-colors-purple-10);
136
+ --amplify-colors-brand-primary-100: var(--amplify-colors-teal-100);
137
+ --amplify-colors-brand-primary-90: var(--amplify-colors-teal-90);
138
+ --amplify-colors-brand-primary-80: var(--amplify-colors-teal-80);
139
+ --amplify-colors-brand-primary-60: var(--amplify-colors-teal-60);
140
+ --amplify-colors-brand-primary-40: var(--amplify-colors-teal-40);
141
+ --amplify-colors-brand-primary-20: var(--amplify-colors-teal-20);
142
+ --amplify-colors-brand-primary-10: var(--amplify-colors-teal-10);
85
143
  --amplify-colors-neutral-100: hsl(210, 50%, 10%);
86
144
  --amplify-colors-neutral-90: hsl(210, 25%, 25%);
87
145
  --amplify-colors-neutral-80: hsl(210, 10%, 40%);
88
146
  --amplify-colors-neutral-60: hsl(210, 6%, 70%);
89
- --amplify-colors-neutral-40: hsl(210, 5%, 80%);
90
- --amplify-colors-neutral-20: hsl(210, 5%, 90%);
91
- --amplify-colors-neutral-10: hsl(210, 5%, 95%);
147
+ --amplify-colors-neutral-40: hsl(210, 5%, 87%);
148
+ --amplify-colors-neutral-20: hsl(210, 5%, 94%);
149
+ --amplify-colors-neutral-10: hsl(210, 5%, 98%);
92
150
  --amplify-colors-pink-100: hsl(340, 100%, 15%);
93
151
  --amplify-colors-pink-90: hsl(340, 100%, 20%);
94
152
  --amplify-colors-pink-80: hsl(340, 95%, 30%);
@@ -117,13 +175,13 @@
117
175
  --amplify-colors-teal-40: hsl(190, 70%, 70%);
118
176
  --amplify-colors-teal-20: hsl(190, 75%, 85%);
119
177
  --amplify-colors-teal-10: hsl(190, 75%, 95%);
120
- --amplify-colors-green-100: hsl(130, 100%, 15%);
121
- --amplify-colors-green-90: hsl(130, 100%, 20%);
122
- --amplify-colors-green-80: hsl(130, 95%, 30%);
123
- --amplify-colors-green-60: hsl(130, 50%, 50%);
124
- --amplify-colors-green-40: hsl(130, 75%, 75%);
125
- --amplify-colors-green-20: hsl(130, 75%, 85%);
126
- --amplify-colors-green-10: hsl(130, 75%, 95%);
178
+ --amplify-colors-green-100: hsl(130, 22%, 23%);
179
+ --amplify-colors-green-90: hsl(130, 27%, 29%);
180
+ --amplify-colors-green-80: hsl(130, 33%, 37%);
181
+ --amplify-colors-green-60: hsl(130, 43%, 46%);
182
+ --amplify-colors-green-40: hsl(130, 44%, 63%);
183
+ --amplify-colors-green-20: hsl(130, 60%, 90%);
184
+ --amplify-colors-green-10: hsl(130, 60%, 95%);
127
185
  --amplify-colors-yellow-100: hsl(60, 100%, 15%);
128
186
  --amplify-colors-yellow-90: hsl(60, 100%, 20%);
129
187
  --amplify-colors-yellow-80: hsl(60, 95%, 30%);
@@ -145,370 +203,613 @@
145
203
  --amplify-colors-red-40: hsl(0, 75%, 75%);
146
204
  --amplify-colors-red-20: hsl(0, 75%, 85%);
147
205
  --amplify-colors-red-10: hsl(0, 75%, 95%);
148
- --amplify-breakpoints-default-breakpoint: base;
149
- --amplify-breakpoints-unit: em;
150
- --amplify-breakpoints-values-xxl: 96;
151
- --amplify-breakpoints-values-xl: 80;
152
- --amplify-breakpoints-values-large: 62;
153
- --amplify-breakpoints-values-medium: 48;
154
- --amplify-breakpoints-values-small: 30;
155
- --amplify-breakpoints-values-base: 0;
156
206
  --amplify-border-widths-large: 3px;
157
207
  --amplify-border-widths-medium: 2px;
158
208
  --amplify-border-widths-small: 1px;
209
+ --amplify-components-togglebuttongroup-justify-content: flex-start;
210
+ --amplify-components-togglebuttongroup-align-content: center;
211
+ --amplify-components-togglebuttongroup-align-items: center;
212
+ --amplify-components-togglebutton-link-pressed-hover-background-color: var(--amplify-colors-transparent);
213
+ --amplify-components-togglebutton-link-pressed-color: var(--amplify-colors-overlay-90);
214
+ --amplify-components-togglebutton-link-pressed-background-color: var(--amplify-colors-transparent);
215
+ --amplify-components-togglebutton-link-disabled-color: var(--amplify-colors-font-disabled);
216
+ --amplify-components-togglebutton-link-focus-color: var(--amplify-colors-overlay-50);
217
+ --amplify-components-togglebutton-link-focus-background-color: var(--amplify-colors-transparent);
218
+ --amplify-components-togglebutton-link-hover-color: var(--amplify-colors-overlay-50);
219
+ --amplify-components-togglebutton-link-hover-background-color: var(--amplify-colors-transparent);
220
+ --amplify-components-togglebutton-link-color: var(--amplify-colors-overlay-50);
221
+ --amplify-components-togglebutton-primary-pressed-hover-background-color: var(--amplify-colors-brand-primary-60);
222
+ --amplify-components-togglebutton-primary-pressed-hover-border-color: var(--amplify-colors-brand-primary-60);
223
+ --amplify-components-togglebutton-primary-pressed-focus-border-color: var(--amplify-colors-border-focus);
224
+ --amplify-components-togglebutton-primary-pressed-focus-background-color: var(--amplify-colors-border-focus);
225
+ --amplify-components-togglebutton-primary-pressed-color: var(--amplify-colors-white);
226
+ --amplify-components-togglebutton-primary-pressed-border-color: var(--amplify-colors-brand-primary-80);
227
+ --amplify-components-togglebutton-primary-pressed-background-color: var(--amplify-colors-brand-primary-80);
228
+ --amplify-components-togglebutton-primary-disabled-color: var(--amplify-colors-font-disabled);
229
+ --amplify-components-togglebutton-primary-disabled-background-color: var(--amplify-colors-background-tertiary);
230
+ --amplify-components-togglebutton-primary-hover-color: var(--amplify-colors-overlay-50);
231
+ --amplify-components-togglebutton-primary-hover-background-color: var(--amplify-colors-overlay-10);
232
+ --amplify-components-togglebutton-primary-focus-color: var(--amplify-colors-overlay-50);
233
+ --amplify-components-togglebutton-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
234
+ --amplify-components-togglebutton-primary-focus-background-color: var(--amplify-colors-transparent);
235
+ --amplify-components-togglebutton-primary-focus-border-color: var(--amplify-colors-border-focus);
236
+ --amplify-components-togglebutton-primary-border-width: var(--amplify-border-widths-small);
237
+ --amplify-components-togglebutton-primary-background-color: var(--amplify-colors-transparent);
238
+ --amplify-components-togglebutton-pressed-hover-background-color: var(--amplify-colors-overlay-30);
239
+ --amplify-components-togglebutton-pressed-background-color: var(--amplify-colors-overlay-20);
240
+ --amplify-components-togglebutton-pressed-color: var(--amplify-colors-overlay-90);
241
+ --amplify-components-togglebutton-disabled-color: var(--amplify-colors-font-disabled);
242
+ --amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-secondary);
243
+ --amplify-components-togglebutton-disabled-background-color: var(--amplify-colors-transparent);
244
+ --amplify-components-togglebutton-active-background-color: var(--amplify-colors-transparent);
245
+ --amplify-components-togglebutton-focus-color: var(--amplify-colors-overlay-50);
246
+ --amplify-components-togglebutton-focus-border-color: var(--amplify-colors-border-focus);
247
+ --amplify-components-togglebutton-hover-background-color: var(--amplify-colors-overlay-10);
248
+ --amplify-components-togglebutton-color: var(--amplify-colors-overlay-50);
249
+ --amplify-components-togglebutton-border-color: var(--amplify-colors-border-primary);
250
+ --amplify-components-text-info-color: var(--amplify-colors-font-info);
251
+ --amplify-components-text-success-color: var(--amplify-colors-font-success);
252
+ --amplify-components-text-warning-color: var(--amplify-colors-font-warning);
253
+ --amplify-components-text-error-color: var(--amplify-colors-font-error);
254
+ --amplify-components-text-tertiary-color: var(--amplify-colors-font-tertiary);
255
+ --amplify-components-text-secondary-color: var(--amplify-colors-font-secondary);
256
+ --amplify-components-text-primary-color: var(--amplify-colors-font-primary);
257
+ --amplify-components-text-color: var(--amplify-colors-font-primary);
258
+ --amplify-components-tabs-item-disabled-border-color: var(--amplify-colors-border-tertiary);
159
259
  --amplify-components-tabs-item-disabled-background-color: transparent;
260
+ --amplify-components-tabs-item-disabled-color: var(--amplify-colors-font-disabled);
160
261
  --amplify-components-tabs-item-active-background-color: transparent;
262
+ --amplify-components-tabs-item-active-border-color: var(--amplify-colors-font-interactive);
263
+ --amplify-components-tabs-item-active-color: var(--amplify-colors-font-interactive);
264
+ --amplify-components-tabs-item-focus-color: var(--amplify-colors-font-focus);
265
+ --amplify-components-tabs-item-hover-color: var(--amplify-colors-font-hover);
266
+ --amplify-components-tabs-item-transition-duration: var(--amplify-time-medium);
161
267
  --amplify-components-tabs-item-text-align: center;
268
+ --amplify-components-tabs-item-padding-horizontal: var(--amplify-space-medium);
269
+ --amplify-components-tabs-item-padding-vertical: var(--amplify-space-small);
270
+ --amplify-components-tabs-item-font-weight: var(--amplify-font-weights-bold);
271
+ --amplify-components-tabs-item-font-size: var(--amplify-font-sizes-medium);
272
+ --amplify-components-tabs-item-color: var(--amplify-colors-font-secondary);
273
+ --amplify-components-tabs-item-border-width: var(--amplify-border-widths-medium);
162
274
  --amplify-components-tabs-item-border-style: solid;
275
+ --amplify-components-tabs-item-border-color: var(--amplify-colors-border-secondary);
163
276
  --amplify-components-tabs-item-background-color: transparent;
277
+ --amplify-components-tabs-border-width: var(--amplify-border-widths-medium);
164
278
  --amplify-components-tabs-border-style: solid;
279
+ --amplify-components-tabs-border-color: var(--amplify-colors-border-secondary);
165
280
  --amplify-components-tabs-background-color: transparent;
166
- --amplify-components-select-icon-wrapper-pointer-events: none;
167
- --amplify-components-select-icon-wrapper-top: 25%;
168
- --amplify-components-select-icon-wrapper-height: 50%;
169
- --amplify-components-select-icon-wrapper-position: absolute;
170
- --amplify-components-select-wrapper-cursor: pointer;
171
- --amplify-components-select-wrapper-position: relative;
172
- --amplify-components-select-wrapper-display: block;
173
- --amplify-components-radio-label-disabled-color: #d6dbe2;
174
- --amplify-components-radio-button-disabled-border-color: #e9ecf0;
175
- --amplify-components-radio-button-before-background-color: currentColor;
176
- --amplify-components-radio-button-before-border-radius: 50%;
177
- --amplify-components-radio-button-before-height: 50%;
178
- --amplify-components-radio-button-before-width: 50%;
179
- --amplify-components-radio-button-before-display: inline-block;
180
- --amplify-components-radio-button-before-content: "";
181
- --amplify-components-radio-button-outline-style: solid;
182
- --amplify-components-radio-button-transition-property: all;
183
- --amplify-components-radio-button-border-radius: 50%;
184
- --amplify-components-radio-button-border-style: solid;
185
- --amplify-components-radio-button-box-sizing: border-box;
186
- --amplify-components-radio-button-justify-content: center;
187
- --amplify-components-radio-button-align-items: center;
188
- --amplify-components-radio-gap: inherit;
189
- --amplify-components-radio-justify-content: flex-start;
190
- --amplify-components-radio-align-items: center;
191
- --amplify-components-pagination-item-container-margin-right: 4px;
192
- --amplify-components-pagination-item-container-margin-left: 4px;
193
- --amplify-components-pagination-ellipsis-padding-left: 8px;
194
- --amplify-components-pagination-ellipsis-padding-right: 8px;
195
- --amplify-components-pagination-button-hover-background-color: rgba(0, 0, 0, 0.1);
196
- --amplify-components-pagination-button-padding-left: 6px;
197
- --amplify-components-pagination-button-padding-bottom: 0;
198
- --amplify-components-pagination-button-padding-right: 6px;
199
- --amplify-components-pagination-button-padding-top: 0;
200
- --amplify-components-pagination-button-font-weight: inherit;
201
- --amplify-components-pagination-button-color: inherit;
202
- --amplify-components-pagination-current-background-color: rgba(0, 0, 0, 0.4);
203
- --amplify-components-image-object-position: initial;
204
- --amplify-components-image-object-fit: initial;
205
- --amplify-components-image-height: auto;
206
- --amplify-components-image-max-width: 100%;
207
- --amplify-components-icon-line-height: 1;
208
- --amplify-components-heading-line-height: 1.25;
209
- --amplify-components-flex-flex-wrap: nowrap;
210
- --amplify-components-flex-align-content: normal;
211
- --amplify-components-flex-align-items: stretch;
212
- --amplify-components-flex-justify-content: normal;
213
- --amplify-components-fieldmessages-description-font-style: italic;
214
- --amplify-components-fieldgroup-gap: 0;
215
- --amplify-components-fieldcontrol-disabled-cursor: not-allowed;
216
- --amplify-components-fieldcontrol-quiet-border-radius: 0;
217
- --amplify-components-fieldcontrol-quiet-border-block-start: none;
218
- --amplify-components-fieldcontrol-quiet-border-inline-end: none;
219
- --amplify-components-fieldcontrol-quiet-border-inline-start: none;
220
- --amplify-components-fieldcontrol-quiet-border-style: none;
221
- --amplify-components-fieldcontrol-outline-style: solid;
222
- --amplify-components-fieldcontrol-border-style: solid;
223
- --amplify-components-divider-border-style: solid;
224
- --amplify-components-card-border-style: solid;
225
- --amplify-components-button-link-background-color: transparent;
226
- --amplify-components-button-link-border-width: 0;
227
- --amplify-components-button-primary-border-width: 0;
228
- --amplify-components-button-disabled-background-color: transparent;
229
- --amplify-components-button-loading-background-color: transparent;
230
- --amplify-components-button-border-style: solid;
231
- --amplify-components-button-text-align: center;
232
- --amplify-components-button-font-weight: bold;
233
- --amplify-components-badge-border-radius: 9999px;
234
- --amplify-components-badge-text-align: center;
235
- --amplify-components-badge-line-height: 1;
236
- --amplify-shadows-switch: 0 0 4px var(--amplify-colors-black);
237
- --amplify-shadows-large: 0 4px 12px var(--amplify-colors-shadow-primary);
238
- --amplify-shadows-medium: 0 2px 6px var(--amplify-colors-shadow-secondary);
239
- --amplify-shadows-small: 0 2px 4px var(--amplify-colors-shadow-tertiary);
240
- --amplify-colors-icon-empty: var(--amplify-colors-neutral-60);
241
- --amplify-colors-icon-filled: var(--amplify-colors-orange-40);
242
- --amplify-colors-error: var(--amplify-colors-red-80);
243
- --amplify-colors-border-tertiary: var(--amplify-colors-neutral-20);
244
- --amplify-colors-border-secondary: var(--amplify-colors-neutral-40);
245
- --amplify-colors-border-primary: var(--amplify-colors-neutral-60);
246
- --amplify-colors-background-success: var(--amplify-colors-green-20);
247
- --amplify-colors-background-error: var(--amplify-colors-red-20);
248
- --amplify-colors-background-warning: var(--amplify-colors-orange-20);
249
- --amplify-colors-background-info: var(--amplify-colors-blue-20);
250
- --amplify-colors-background-tertiary: var(--amplify-colors-neutral-20);
251
- --amplify-colors-background-secondary: var(--amplify-colors-neutral-10);
252
- --amplify-colors-background-primary: var(--amplify-colors-white);
253
- --amplify-colors-font-success: var(--amplify-colors-green-80);
254
- --amplify-colors-font-error: var(--amplify-colors-red-80);
255
- --amplify-colors-font-warning: var(--amplify-colors-orange-80);
256
- --amplify-colors-font-info: var(--amplify-colors-blue-80);
257
- --amplify-colors-font-inverse: var(--amplify-colors-white);
258
- --amplify-colors-font-tertiary: var(--amplify-colors-neutral-60);
259
- --amplify-colors-font-secondary: var(--amplify-colors-neutral-80);
260
- --amplify-colors-font-primary: var(--amplify-colors-neutral-100);
261
- --amplify-colors-brand-secondary-100: var(--amplify-colors-purple-100);
262
- --amplify-colors-brand-secondary-90: var(--amplify-colors-purple-90);
263
- --amplify-colors-brand-secondary-80: var(--amplify-colors-purple-80);
264
- --amplify-colors-brand-secondary-60: var(--amplify-colors-purple-60);
265
- --amplify-colors-brand-secondary-40: var(--amplify-colors-purple-40);
266
- --amplify-colors-brand-secondary-20: var(--amplify-colors-purple-20);
267
- --amplify-colors-brand-secondary-10: var(--amplify-colors-purple-10);
268
- --amplify-colors-brand-primary-100: var(--amplify-colors-teal-100);
269
- --amplify-colors-brand-primary-90: var(--amplify-colors-teal-90);
270
- --amplify-colors-brand-primary-80: var(--amplify-colors-teal-80);
271
- --amplify-colors-brand-primary-60: var(--amplify-colors-teal-60);
272
- --amplify-colors-brand-primary-40: var(--amplify-colors-teal-40);
273
- --amplify-colors-brand-primary-20: var(--amplify-colors-teal-20);
274
- --amplify-colors-brand-primary-10: var(--amplify-colors-teal-10);
275
- --amplify-components-tabs-item-transition-duration: var(--amplify-time-transition-medium);
276
- --amplify-components-tabs-item-padding: var(--amplify-space-small) var(--amplify-space-medium);
277
- --amplify-components-tabs-item-font-weight: 700;
278
- --amplify-components-tabs-item-font-size: var(--amplify-font-sizes-medium);
279
- --amplify-components-tabs-item-border-width: var(--amplify-border-widths-medium);
280
- --amplify-components-tabs-border-width: var(--amplify-border-widths-medium);
281
+ --amplify-components-table-caption-small-font-size: var(--amplify-font-sizes-small);
282
+ --amplify-components-table-caption-large-font-size: var(--amplify-font-sizes-large);
283
+ --amplify-components-table-caption-word-break: break-all;
284
+ --amplify-components-table-caption-text-align: center;
285
+ --amplify-components-table-caption-font-size: var(--amplify-font-sizes-medium);
286
+ --amplify-components-table-caption-display: table-caption;
287
+ --amplify-components-table-caption-color: var(--amplify-colors-font-primary);
288
+ --amplify-components-table-caption-caption-side: bottom;
289
+ --amplify-components-table-data-small-padding: var(--amplify-space-xs);
290
+ --amplify-components-table-data-small-font-size: var(--amplify-font-sizes-small);
291
+ --amplify-components-table-data-large-padding: var(--amplify-space-large);
292
+ --amplify-components-table-data-large-font-size: var(--amplify-font-sizes-large);
293
+ --amplify-components-table-data-vertical-align: middle;
294
+ --amplify-components-table-data-padding: var(--amplify-space-medium);
295
+ --amplify-components-table-data-font-weight: var(--amplify-font-weights-normal);
296
+ --amplify-components-table-data-font-size: var(--amplify-font-sizes-medium);
297
+ --amplify-components-table-data-display: table-cell;
298
+ --amplify-components-table-data-color: var(--amplify-colors-font-primary);
299
+ --amplify-components-table-data-border-width: var(--amplify-border-widths-small);
300
+ --amplify-components-table-data-border-style: solid;
301
+ --amplify-components-table-data-border-color: var(--amplify-colors-border-tertiary);
302
+ --amplify-components-table-header-small-padding: var(--amplify-space-xs);
303
+ --amplify-components-table-header-small-font-size: var(--amplify-font-sizes-small);
304
+ --amplify-components-table-header-large-padding: var(--amplify-space-large);
305
+ --amplify-components-table-header-large-font-size: var(--amplify-font-sizes-large);
306
+ --amplify-components-table-header-vertical-align: middle;
307
+ --amplify-components-table-header-padding: var(--amplify-space-medium);
308
+ --amplify-components-table-header-font-weight: var(--amplify-font-weights-bold);
309
+ --amplify-components-table-header-font-size: var(--amplify-font-sizes-medium);
310
+ --amplify-components-table-header-display: table-cell;
311
+ --amplify-components-table-header-color: var(--amplify-colors-font-primary);
312
+ --amplify-components-table-header-border-width: var(--amplify-border-widths-small);
313
+ --amplify-components-table-header-border-style: solid;
314
+ --amplify-components-table-header-border-color: var(--amplify-colors-border-tertiary);
315
+ --amplify-components-table-row-striped-background-color: var(--amplify-colors-background-secondary);
316
+ --amplify-components-table-row-hover-background-color: var(--amplify-colors-background-tertiary);
317
+ --amplify-components-table-row-vertical-align: middle;
318
+ --amplify-components-table-row-display: table-row;
319
+ --amplify-components-table-foot-vertical-align: middle;
320
+ --amplify-components-table-foot-display: table-footer-group;
321
+ --amplify-components-table-body-vertical-align: middle;
322
+ --amplify-components-table-body-display: table-row-group;
323
+ --amplify-components-table-head-vertical-align: middle;
324
+ --amplify-components-table-head-display: table-header-group;
325
+ --amplify-components-table-width: 100%;
326
+ --amplify-components-table-display: table;
327
+ --amplify-components-table-border-collapse: collapse;
281
328
  --amplify-components-switchfield-track-width: var(--amplify-space-relative-xl);
282
- --amplify-components-switchfield-track-transition-duration: var(--amplify-time-transition-short);
329
+ --amplify-components-switchfield-track-transition-duration: var(--amplify-time-short);
283
330
  --amplify-components-switchfield-track-padding: var(--amplify-outline-widths-medium);
284
331
  --amplify-components-switchfield-track-height: var(--amplify-space-relative-medium);
285
- --amplify-components-switchfield-track-checked-background: var(--amplify-colors-blue-40);
332
+ --amplify-components-switchfield-track-checked-background-color: var(--amplify-colors-brand-primary-60);
286
333
  --amplify-components-switchfield-track-border-radius: var(--amplify-radii-xxxl);
287
- --amplify-components-switchfield-track-background: var(--amplify-colors-neutral-40);
334
+ --amplify-components-switchfield-track-background-color: var(--amplify-colors-background-tertiary);
288
335
  --amplify-components-switchfield-thumb-width: var(--amplify-space-relative-medium);
289
- --amplify-components-switchfield-thumb-transition-duration: var(--amplify-time-transition-medium);
336
+ --amplify-components-switchfield-thumb-transition-duration: var(--amplify-time-medium);
290
337
  --amplify-components-switchfield-thumb-checked-transform: var(--amplify-transforms-slide-x-medium);
291
338
  --amplify-components-switchfield-thumb-border-radius: var(--amplify-radii-xxxl);
292
- --amplify-components-switchfield-thumb-border-color: var(--amplify-colors-neutral-20);
293
- --amplify-components-switchfield-thumb-background: var(--amplify-colors-white);
339
+ --amplify-components-switchfield-thumb-border-color: var(--amplify-colors-border-tertiary);
340
+ --amplify-components-switchfield-thumb-background-color: var(--amplify-colors-background-primary);
294
341
  --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);
295
342
  --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large);
296
343
  --amplify-components-switchfield-label-padding: var(--amplify-space-xs);
297
- --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-30);
344
+ --amplify-components-switchfield-focused-shadow: var(--amplify-shadows-small);
345
+ --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
346
+ --amplify-components-stepperfield-input-text-align: center;
347
+ --amplify-components-stepperfield-flex-direction: column;
348
+ --amplify-components-sliderfield-large-thumb-height: 1.5rem;
349
+ --amplify-components-sliderfield-large-thumb-width: 1.5rem;
350
+ --amplify-components-sliderfield-large-track-height: 0.625rem;
351
+ --amplify-components-sliderfield-small-thumb-height: 1rem;
352
+ --amplify-components-sliderfield-small-thumb-width: 1rem;
353
+ --amplify-components-sliderfield-small-track-height: 0.25rem;
354
+ --amplify-components-sliderfield-thumb-focus-box-shadow: 0 0 0 3px var(--amplify-colors-border-focus);
355
+ --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus);
356
+ --amplify-components-sliderfield-thumb-hover-background-color: var(--amplify-colors-background-primary);
357
+ --amplify-components-sliderfield-thumb-disabled-box-shadow: none;
358
+ --amplify-components-sliderfield-thumb-disabled-border-color: transparent;
359
+ --amplify-components-sliderfield-thumb-disabled-background-color: var(--amplify-colors-background-disabled);
360
+ --amplify-components-sliderfield-thumb-border-style: solid;
361
+ --amplify-components-sliderfield-thumb-border-color: var(--amplify-colors-border-primary);
362
+ --amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-small);
363
+ --amplify-components-sliderfield-thumb-border-radius: 50%;
364
+ --amplify-components-sliderfield-thumb-box-shadow: var(--amplify-shadows-medium);
365
+ --amplify-components-sliderfield-thumb-background-color: var(--amplify-colors-background-primary);
366
+ --amplify-components-sliderfield-thumb-height: 1.25rem;
367
+ --amplify-components-sliderfield-thumb-width: 1.25rem;
368
+ --amplify-components-sliderfield-range-disabled-background-color: var(--amplify-colors-background-disabled);
369
+ --amplify-components-sliderfield-range-border-radius: 9999px;
370
+ --amplify-components-sliderfield-range-background-color: var(--amplify-colors-brand-primary-80);
371
+ --amplify-components-sliderfield-track-min-width: 10rem;
372
+ --amplify-components-sliderfield-track-height: 0.375rem;
373
+ --amplify-components-sliderfield-track-border-radius: 9999px;
374
+ --amplify-components-sliderfield-track-background-color: var(--amplify-colors-background-tertiary);
375
+ --amplify-components-sliderfield-padding-block: var(--amplify-space-xs);
376
+ --amplify-components-selectfield-flex-direction: column;
377
+ --amplify-components-select-large-min-width: 7.5rem;
378
+ --amplify-components-select-small-min-width: 5.5rem;
379
+ --amplify-components-select-min-width: 6.5rem;
380
+ --amplify-components-select-white-space: nowrap;
381
+ --amplify-components-select-icon-wrapper-pointer-events: none;
382
+ --amplify-components-select-icon-wrapper-transform: translateY(-50%);
298
383
  --amplify-components-select-icon-wrapper-right: var(--amplify-space-medium);
384
+ --amplify-components-select-icon-wrapper-top: 50%;
385
+ --amplify-components-select-icon-wrapper-position: absolute;
386
+ --amplify-components-select-icon-wrapper-align-items: center;
387
+ --amplify-components-select-wrapper-cursor: pointer;
388
+ --amplify-components-select-wrapper-position: relative;
389
+ --amplify-components-select-wrapper-display: block;
299
390
  --amplify-components-select-padding-inline-end: var(--amplify-space-xxl);
391
+ --amplify-components-rating-empty-color: var(--amplify-colors-background-tertiary);
392
+ --amplify-components-rating-filled-color: var(--amplify-colors-brand-secondary-80);
300
393
  --amplify-components-rating-small-size: var(--amplify-font-sizes-small);
301
394
  --amplify-components-rating-default-size: var(--amplify-font-sizes-xl);
302
395
  --amplify-components-rating-large-size: var(--amplify-font-sizes-xxxl);
303
- --amplify-components-radio-button-disabled-color: var(--amplify-colors-white);
304
- --amplify-components-radio-button-disabled-background-color: var(--amplify-colors-white);
305
- --amplify-components-radio-button-checked-color: var(--amplify-colors-red-60);
396
+ --amplify-components-radio-label-disabled-color: var(--amplify-colors-font-disabled);
397
+ --amplify-components-radio-button-disabled-background-color: var(--amplify-colors-background-primary);
398
+ --amplify-components-radio-button-disabled-border-color: var(--amplify-colors-border-disabled);
399
+ --amplify-components-radio-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
400
+ --amplify-components-radio-button-error-border-color: var(--amplify-colors-border-error);
401
+ --amplify-components-radio-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
402
+ --amplify-components-radio-button-focus-border-color: var(--amplify-colors-border-focus);
403
+ --amplify-components-radio-button-checked-disabled-color: var(--amplify-colors-background-disabled);
404
+ --amplify-components-radio-button-checked-color: var(--amplify-colors-brand-primary-80);
306
405
  --amplify-components-radio-button-large-height: var(--amplify-font-sizes-large);
307
406
  --amplify-components-radio-button-large-width: var(--amplify-font-sizes-large);
308
- --amplify-components-radio-button-small-height: var(--amplify-font-sizes-xs);
309
- --amplify-components-radio-button-small-width: var(--amplify-font-sizes-xs);
407
+ --amplify-components-radio-button-small-height: var(--amplify-font-sizes-small);
408
+ --amplify-components-radio-button-small-width: var(--amplify-font-sizes-small);
409
+ --amplify-components-radio-button-padding: var(--amplify-border-widths-medium);
310
410
  --amplify-components-radio-button-outline-offset: var(--amplify-outline-offsets-medium);
311
411
  --amplify-components-radio-button-outline-width: var(--amplify-outline-widths-medium);
412
+ --amplify-components-radio-button-outline-style: solid;
312
413
  --amplify-components-radio-button-outline-color: var(--amplify-colors-transparent);
313
- --amplify-components-radio-button-transition-duration: var(--amplify-time-transition-medium);
414
+ --amplify-components-radio-button-transition-duration: var(--amplify-time-medium);
415
+ --amplify-components-radio-button-transition-property: all;
314
416
  --amplify-components-radio-button-background-color: var(--amplify-colors-white);
315
417
  --amplify-components-radio-button-color: var(--amplify-colors-white);
418
+ --amplify-components-radio-button-border-color: var(--amplify-colors-border-primary);
419
+ --amplify-components-radio-button-border-radius: 50%;
420
+ --amplify-components-radio-button-border-style: solid;
316
421
  --amplify-components-radio-button-border-width: var(--amplify-border-widths-medium);
422
+ --amplify-components-radio-button-box-sizing: border-box;
317
423
  --amplify-components-radio-button-height: var(--amplify-font-sizes-medium);
318
424
  --amplify-components-radio-button-width: var(--amplify-font-sizes-medium);
425
+ --amplify-components-radio-button-justify-content: center;
426
+ --amplify-components-radio-button-align-items: center;
427
+ --amplify-components-radio-disabled-cursor: not-allowed;
428
+ --amplify-components-radio-gap: inherit;
429
+ --amplify-components-radio-justify-content: flex-start;
430
+ --amplify-components-radio-align-items: center;
319
431
  --amplify-components-placeholder-large-height: var(--amplify-space-large);
320
432
  --amplify-components-placeholder-default-height: var(--amplify-space-medium);
321
433
  --amplify-components-placeholder-small-height: var(--amplify-space-small);
322
- --amplify-components-placeholder-transition-duration: var(--amplify-time-transition-long);
323
- --amplify-components-placeholder-border-radius: var(--amplify-radii-medium);
434
+ --amplify-components-placeholder-end-color: var(--amplify-colors-background-tertiary);
435
+ --amplify-components-placeholder-start-color: var(--amplify-colors-background-secondary);
436
+ --amplify-components-placeholder-transition-duration: var(--amplify-time-long);
437
+ --amplify-components-placeholder-border-radius: var(--amplify-radii-small);
324
438
  --amplify-components-pagination-item-shared-border-radius: var(--amplify-font-sizes-medium);
325
439
  --amplify-components-pagination-item-shared-min-width: var(--amplify-font-sizes-xxl);
326
440
  --amplify-components-pagination-item-shared-height: var(--amplify-font-sizes-xxl);
327
- --amplify-components-pagination-button-disabled-opacity: var(--amplify-opacities-40);
328
- --amplify-components-pagination-button-transition: background-color var(--amplify-time-transition-medium);
441
+ --amplify-components-pagination-item-container-margin-right: var(--amplify-space-xxxs);
442
+ --amplify-components-pagination-item-container-margin-left: var(--amplify-space-xxxs);
443
+ --amplify-components-pagination-ellipsis-padding-inline-end: var(--amplify-space-xs);
444
+ --amplify-components-pagination-ellipsis-padding-inline-start: var(--amplify-space-xs);
445
+ --amplify-components-pagination-ellipsis-justify-content: center;
446
+ --amplify-components-pagination-ellipsis-align-items: baseline;
447
+ --amplify-components-pagination-button-disabled-color: var(--amplify-colors-font-disabled);
448
+ --amplify-components-pagination-button-hover-color: var(--amplify-colors-font-primary);
449
+ --amplify-components-pagination-button-hover-background-color: var(--amplify-colors-overlay-10);
450
+ --amplify-components-pagination-button-transition-duration: var(--amplify-time-medium);
451
+ --amplify-components-pagination-button-transition-property: background-color;
452
+ --amplify-components-pagination-button-padding-inline-end: var(--amplify-space-xxs);
453
+ --amplify-components-pagination-button-padding-inline-start: var(--amplify-space-xxs);
454
+ --amplify-components-pagination-button-color: var(--amplify-colors-font-primary);
455
+ --amplify-components-pagination-current-background-color: var(--amplify-colors-overlay-40);
329
456
  --amplify-components-pagination-current-font-size: var(--amplify-font-sizes-small);
330
457
  --amplify-components-pagination-current-color: var(--amplify-colors-white);
458
+ --amplify-components-pagination-current-justify-content: center;
459
+ --amplify-components-pagination-current-align-items: center;
460
+ --amplify-components-menu-item-padding-inline-end: var(--amplify-space-medium);
461
+ --amplify-components-menu-item-padding-inline-start: var(--amplify-space-medium);
462
+ --amplify-components-menu-item-min-height: 2.5rem;
463
+ --amplify-components-menu-large-height: var(--amplify-font-sizes-xxxl);
464
+ --amplify-components-menu-large-width: var(--amplify-font-sizes-xxxl);
465
+ --amplify-components-menu-small-height: var(--amplify-font-sizes-medium);
466
+ --amplify-components-menu-small-width: var(--amplify-font-sizes-medium);
467
+ --amplify-components-menu-min-width: 14rem;
468
+ --amplify-components-menu-max-width: 30rem;
469
+ --amplify-components-menu-gap: 0;
470
+ --amplify-components-menu-flex-direction: column;
471
+ --amplify-components-menu-box-shadow: var(--amplify-shadows-large);
472
+ --amplify-components-menu-border-radius: var(--amplify-radii-medium);
473
+ --amplify-components-menu-background-color: var(--amplify-colors-white);
474
+ --amplify-components-loader-linear-large-stroke-width: var(--amplify-font-sizes-xs);
475
+ --amplify-components-loader-linear-large-height: var(--amplify-font-sizes-xs);
476
+ --amplify-components-loader-linear-small-stroke-width: var(--amplify-font-sizes-xxxs);
477
+ --amplify-components-loader-linear-small-height: var(--amplify-font-sizes-xxxs);
478
+ --amplify-components-loader-linear-animation-duration: 1s;
479
+ --amplify-components-loader-linear-stroke-linecap: round;
480
+ --amplify-components-loader-linear-stroke-empty: var(--amplify-colors-neutral-20);
481
+ --amplify-components-loader-linear-stroke-filled: var(--amplify-colors-brand-primary-80);
482
+ --amplify-components-loader-linear-stroke-width: var(--amplify-font-sizes-xxs);
483
+ --amplify-components-loader-linear-height: var(--amplify-font-sizes-xxs);
484
+ --amplify-components-loader-linear-min-width: 5rem;
485
+ --amplify-components-loader-linear-width: 100%;
486
+ --amplify-components-loader-large-height: var(--amplify-font-sizes-xxxl);
487
+ --amplify-components-loader-large-width: var(--amplify-font-sizes-xxxl);
488
+ --amplify-components-loader-small-height: var(--amplify-font-sizes-medium);
489
+ --amplify-components-loader-small-width: var(--amplify-font-sizes-medium);
490
+ --amplify-components-loader-animation-duration: 1s;
491
+ --amplify-components-loader-stroke-linecap: round;
492
+ --amplify-components-loader-stroke-filled: var(--amplify-colors-brand-primary-80);
493
+ --amplify-components-loader-stroke-empty: var(--amplify-colors-neutral-20);
494
+ --amplify-components-loader-height: var(--amplify-font-sizes-xxl);
495
+ --amplify-components-loader-width: var(--amplify-font-sizes-xxl);
496
+ --amplify-components-link-visited-color: var(--amplify-colors-font-interactive);
331
497
  --amplify-components-link-small-font-size: var(--amplify-font-sizes-small);
332
498
  --amplify-components-link-large-font-size: var(--amplify-font-sizes-large);
333
- --amplify-components-icon-small-height: var(--amplify-font-sizes-small);
334
- --amplify-components-icon-large-height: var(--amplify-font-sizes-large);
335
- --amplify-components-icon-height: var(--amplify-font-sizes-medium);
336
- --amplify-components-heading-6-font-weight: 700;
499
+ --amplify-components-link-hover-color: var(--amplify-colors-font-hover);
500
+ --amplify-components-link-focus-color: var(--amplify-colors-font-focus);
501
+ --amplify-components-link-color: var(--amplify-colors-font-interactive);
502
+ --amplify-components-link-active-color: var(--amplify-colors-font-active);
503
+ --amplify-components-image-object-position: initial;
504
+ --amplify-components-image-object-fit: initial;
505
+ --amplify-components-image-height: auto;
506
+ --amplify-components-image-max-width: 100%;
507
+ --amplify-components-icon-height: 1em;
508
+ --amplify-components-icon-line-height: 1;
509
+ --amplify-components-heading-line-height: 1.25;
510
+ --amplify-components-heading-color: var(--amplify-colors-font-primary);
511
+ --amplify-components-heading-6-font-weight: var(--amplify-font-weights-bold);
337
512
  --amplify-components-heading-6-font-size: var(--amplify-font-sizes-medium);
338
- --amplify-components-heading-5-font-weight: 600;
513
+ --amplify-components-heading-5-font-weight: var(--amplify-font-weights-semibold);
339
514
  --amplify-components-heading-5-font-size: var(--amplify-font-sizes-large);
340
- --amplify-components-heading-4-font-weight: 500;
515
+ --amplify-components-heading-4-font-weight: var(--amplify-font-weights-medium);
341
516
  --amplify-components-heading-4-font-size: var(--amplify-font-sizes-xl);
342
- --amplify-components-heading-3-font-weight: 400;
517
+ --amplify-components-heading-3-font-weight: var(--amplify-font-weights-normal);
343
518
  --amplify-components-heading-3-font-size: var(--amplify-font-sizes-xxl);
344
- --amplify-components-heading-2-font-weight: 300;
519
+ --amplify-components-heading-2-font-weight: var(--amplify-font-weights-light);
345
520
  --amplify-components-heading-2-font-size: var(--amplify-font-sizes-xxxl);
346
- --amplify-components-heading-1-font-weight: 300;
521
+ --amplify-components-heading-1-font-weight: var(--amplify-font-weights-light);
347
522
  --amplify-components-heading-1-font-size: var(--amplify-font-sizes-xxxxl);
523
+ --amplify-components-flex-flex-wrap: nowrap;
524
+ --amplify-components-flex-align-content: normal;
525
+ --amplify-components-flex-align-items: stretch;
526
+ --amplify-components-flex-justify-content: normal;
348
527
  --amplify-components-flex-gap: var(--amplify-space-medium);
349
528
  --amplify-components-fieldmessages-description-font-size: var(--amplify-font-sizes-small);
529
+ --amplify-components-fieldmessages-description-font-style: italic;
530
+ --amplify-components-fieldmessages-description-color: var(--amplify-colors-font-secondary);
350
531
  --amplify-components-fieldmessages-error-font-size: var(--amplify-font-sizes-small);
532
+ --amplify-components-fieldmessages-error-color: var(--amplify-colors-font-error);
533
+ --amplify-components-fieldgroup-outer-align-items: center;
534
+ --amplify-components-fieldgroup-vertical-align-items: center;
535
+ --amplify-components-fieldgroup-gap: 0;
536
+ --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-error);
537
+ --amplify-components-fieldcontrol-error-border-color: var(--amplify-colors-border-error);
538
+ --amplify-components-fieldcontrol-disabled-background-color: var(--amplify-colors-background-disabled);
351
539
  --amplify-components-fieldcontrol-disabled-border-color: var(--amplify-colors-transparent);
352
- --amplify-components-fieldcontrol-quiet-border-block-end: var(--amplify-border-widths-small) solid var(--amplify-colors-border-primary);
353
- --amplify-components-fieldcontrol-large-line-height: var(--amplify-line-heights-large);
354
- --amplify-components-fieldcontrol-large-padding-inline-end: var(--amplify-space-large);
355
- --amplify-components-fieldcontrol-large-padding-inline-start: var(--amplify-space-large);
356
- --amplify-components-fieldcontrol-large-padding-block-end: var(--amplify-space-medium);
357
- --amplify-components-fieldcontrol-large-padding-block-start: var(--amplify-space-medium);
358
- --amplify-components-fieldcontrol-small-line-height: var(--amplify-line-heights-small);
540
+ --amplify-components-fieldcontrol-disabled-cursor: not-allowed;
541
+ --amplify-components-fieldcontrol-disabled-color: var(--amplify-colors-font-disabled);
542
+ --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-focus);
543
+ --amplify-components-fieldcontrol-focus-border-color: var(--amplify-colors-border-focus);
544
+ --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: 0px 1px var(--amplify-colors-border-error);
545
+ --amplify-components-fieldcontrol-quiet-error-border-block-end-color: var(--amplify-colors-border-error);
546
+ --amplify-components-fieldcontrol-quiet-focus-box-shadow: 0px 1px var(--amplify-colors-border-focus);
547
+ --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: var(--amplify-colors-border-focus);
548
+ --amplify-components-fieldcontrol-quiet-border-radius: 0;
549
+ --amplify-components-fieldcontrol-quiet-border-block-start: none;
550
+ --amplify-components-fieldcontrol-quiet-border-inline-end: none;
551
+ --amplify-components-fieldcontrol-quiet-border-inline-start: none;
552
+ --amplify-components-fieldcontrol-quiet-border-block-end: var(--amplify-border-widths-small-solid-colors-border-primary-value);
553
+ --amplify-components-fieldcontrol-quiet-border-style: none;
554
+ --amplify-components-fieldcontrol-large-padding-inline-end: var(--amplify-space-medium);
555
+ --amplify-components-fieldcontrol-large-padding-inline-start: var(--amplify-space-medium);
556
+ --amplify-components-fieldcontrol-large-padding-block-end: var(--amplify-space-xs);
557
+ --amplify-components-fieldcontrol-large-padding-block-start: var(--amplify-space-xs);
558
+ --amplify-components-fieldcontrol-large-font-size: var(--amplify-components-field-large-font-size);
359
559
  --amplify-components-fieldcontrol-small-padding-inline-end: var(--amplify-space-small);
360
560
  --amplify-components-fieldcontrol-small-padding-inline-start: var(--amplify-space-small);
361
561
  --amplify-components-fieldcontrol-small-padding-block-end: var(--amplify-space-xs);
362
562
  --amplify-components-fieldcontrol-small-padding-block-start: var(--amplify-space-xs);
563
+ --amplify-components-fieldcontrol-small-font-size: var(--amplify-components-field-small-font-size);
363
564
  --amplify-components-fieldcontrol-outline-offset: var(--amplify-outline-offsets-medium);
364
565
  --amplify-components-fieldcontrol-outline-width: var(--amplify-outline-widths-medium);
566
+ --amplify-components-fieldcontrol-outline-style: solid;
365
567
  --amplify-components-fieldcontrol-outline-color: var(--amplify-colors-transparent);
366
- --amplify-components-fieldcontrol-transition-duration: var(--amplify-time-transition-medium);
568
+ --amplify-components-fieldcontrol-transition-duration: var(--amplify-time-medium);
367
569
  --amplify-components-fieldcontrol-line-height: var(--amplify-line-heights-medium);
570
+ --amplify-components-fieldcontrol-font-size: var(--amplify-components-field-font-size);
368
571
  --amplify-components-fieldcontrol-padding-inline-end: var(--amplify-space-medium);
369
572
  --amplify-components-fieldcontrol-padding-inline-start: var(--amplify-space-medium);
370
- --amplify-components-fieldcontrol-padding-block-end: var(--amplify-space-small);
371
- --amplify-components-fieldcontrol-padding-block-start: var(--amplify-space-small);
372
- --amplify-components-fieldcontrol-border-radius: var(--amplify-radii-medium);
573
+ --amplify-components-fieldcontrol-padding-block-end: var(--amplify-space-xs);
574
+ --amplify-components-fieldcontrol-padding-block-start: var(--amplify-space-xs);
575
+ --amplify-components-fieldcontrol-color: var(--amplify-colors-font-primary);
576
+ --amplify-components-fieldcontrol-border-radius: var(--amplify-radii-small);
373
577
  --amplify-components-fieldcontrol-border-width: var(--amplify-border-widths-small);
578
+ --amplify-components-fieldcontrol-border-color: var(--amplify-colors-border-primary);
579
+ --amplify-components-fieldcontrol-border-style: solid;
580
+ --amplify-components-field-label-color: var(--amplify-colors-font-secondary);
374
581
  --amplify-components-field-large-font-size: var(--amplify-font-sizes-large);
375
582
  --amplify-components-field-large-gap: var(--amplify-space-small);
376
583
  --amplify-components-field-small-font-size: var(--amplify-font-sizes-small);
377
- --amplify-components-field-small-gap: var(--amplify-space-xxs);
584
+ --amplify-components-field-small-gap: var(--amplify-space-xxxs);
378
585
  --amplify-components-field-font-size: var(--amplify-font-sizes-medium);
379
586
  --amplify-components-field-gap: var(--amplify-space-xs);
587
+ --amplify-components-expander-icon-transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
588
+ --amplify-components-expander-icon-transition-duration: var(--amplify-time-medium);
589
+ --amplify-components-expander-content-closed-animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
590
+ --amplify-components-expander-content-closed-animation-duration: var(--amplify-time-medium);
591
+ --amplify-components-expander-content-open-animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
592
+ --amplify-components-expander-content-open-animation-duration: var(--amplify-time-medium);
593
+ --amplify-components-expander-content-text-padding-block-end: var(--amplify-space-medium);
594
+ --amplify-components-expander-content-text-padding-block-start: var(--amplify-space-medium);
595
+ --amplify-components-expander-content-text-color: var(--amplify-colors-font-secondary);
596
+ --amplify-components-expander-content-padding-inline-end: var(--amplify-space-large);
597
+ --amplify-components-expander-content-padding-inline-start: var(--amplify-space-large);
598
+ --amplify-components-expander-trigger-hover-background-color: var(--amplify-colors-overlay-10);
599
+ --amplify-components-expander-trigger-justify-content: space-between;
600
+ --amplify-components-expander-trigger-align-items: center;
601
+ --amplify-components-expander-trigger-padding-inline-end: var(--amplify-space-large);
602
+ --amplify-components-expander-trigger-padding-inline-start: var(--amplify-space-large);
603
+ --amplify-components-expander-trigger-min-height: 3rem;
604
+ --amplify-components-expander-header-box-shadow: 0 1px 0 var(--amplify-colors-overlay-20);
605
+ --amplify-components-expander-item-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
606
+ --amplify-components-expander-item-border-end-end-radius: var(--amplify-radii-medium);
607
+ --amplify-components-expander-item-border-end-start-radius: var(--amplify-radii-medium);
608
+ --amplify-components-expander-item-border-start-end-radius: var(--amplify-radii-medium);
609
+ --amplify-components-expander-item-border-start-start-radius: var(--amplify-radii-medium);
610
+ --amplify-components-expander-item-border-top-right-radius: var(--amplify-radii-medium);
611
+ --amplify-components-expander-item-border-top-left-radius: var(--amplify-radii-medium);
612
+ --amplify-components-expander-item-border-bottom-right-radius: var(--amplify-radii-medium);
613
+ --amplify-components-expander-item-border-bottom-left-radius: var(--amplify-radii-medium);
614
+ --amplify-components-expander-item-box-shadow: var(--amplify-shadows-small);
615
+ --amplify-components-expander-item-margin-top: 1px;
616
+ --amplify-components-expander-width: 100%;
617
+ --amplify-components-expander-box-shadow: var(--amplify-shadows-large);
618
+ --amplify-components-expander-border-radius: var(--amplify-radii-medium);
619
+ --amplify-components-expander-background-color: var(--amplify-colors-white);
620
+ --amplify-components-expander-display: block;
380
621
  --amplify-components-divider-opacity: var(--amplify-opacities-60);
381
622
  --amplify-components-divider-large-border-width: var(--amplify-border-widths-large);
382
623
  --amplify-components-divider-small-border-width: var(--amplify-border-widths-small);
383
624
  --amplify-components-divider-border-width: var(--amplify-border-widths-medium);
384
- --amplify-components-card-padding: var(--amplify-space-medium);
385
- --amplify-components-card-border-width: var(--amplify-border-widths-small);
386
- --amplify-components-button-border-width: var(--amplify-border-widths-small);
387
- --amplify-components-badge-large-padding: var(--amplify-space-small) var(--amplify-space-medium);
388
- --amplify-components-badge-large-font-size: var(--amplify-font-sizes-medium);
389
- --amplify-components-badge-small-padding: var(--amplify-space-xxs) var(--amplify-space-xs);
390
- --amplify-components-badge-small-font-size: var(--amplify-font-sizes-xs);
391
- --amplify-components-badge-padding: var(--amplify-space-xs) var(--amplify-space-small);
392
- --amplify-components-badge-font-size: var(--amplify-font-sizes-small);
393
- --amplify-components-badge-font-weight: 600;
394
- --amplify-components-alert-padding: var(--amplify-space-small) var(--amplify-space-medium);
395
- --amplify-colors-focus: var(--amplify-colors-brand-primary-100);
396
- --amplify-colors-background-disabled: var(--amplify-colors-background-secondary);
397
- --amplify-colors-font-active: var(--amplify-colors-brand-primary-100);
398
- --amplify-colors-font-focus: var(--amplify-colors-brand-primary-90);
399
- --amplify-colors-font-hover: var(--amplify-colors-brand-primary-90);
400
- --amplify-colors-font-interactive: var(--amplify-colors-brand-primary-80);
401
- --amplify-colors-font-disabled: var(--amplify-colors-font-tertiary);
402
- --amplify-components-text-info-color: var(--amplify-colors-font-info);
403
- --amplify-components-text-success-color: var(--amplify-colors-font-success);
404
- --amplify-components-text-warning-color: var(--amplify-colors-font-warning);
405
- --amplify-components-text-error-color: var(--amplify-colors-font-error);
406
- --amplify-components-text-tertiary-color: var(--amplify-colors-font-tertiary);
407
- --amplify-components-text-secondary-color: var(--amplify-colors-font-secondary);
408
- --amplify-components-text-primary-color: var(--amplify-colors-font-primary);
409
- --amplify-components-text-color: var(--amplify-colors-font-primary);
410
- --amplify-components-tabs-item-disabled-border-color: var(--amplify-colors-border-tertiary);
411
- --amplify-components-tabs-item-color: var(--amplify-colors-font-secondary);
412
- --amplify-components-tabs-item-border-color: var(--amplify-colors-border-secondary);
413
- --amplify-components-tabs-border-color: var(--amplify-colors-border-secondary);
414
- --amplify-components-switchfield-focused-shadow: var(--amplify-shadows-switch);
415
- --amplify-components-rating-empty-color: var(--amplify-colors-icon-empty);
416
- --amplify-components-rating-filled-color: var(--amplify-colors-icon-filled);
417
- --amplify-components-radio-button-checked-disabled-color: var(--amplify-colors-border-secondary);
418
- --amplify-components-radio-button-border-color: var(--amplify-colors-border-primary);
419
- --amplify-components-placeholder-end-color: var(--amplify-colors-background-tertiary);
420
- --amplify-components-placeholder-start-color: var(--amplify-colors-background-secondary);
421
- --amplify-components-link-visited-color: var(--amplify-colors-font-tertiary);
422
- --amplify-components-heading-color: var(--amplify-colors-font-primary);
423
- --amplify-components-fieldmessages-error-color: var(--amplify-colors-error);
424
- --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-error);
425
- --amplify-components-fieldcontrol-error-border-color: var(--amplify-colors-error);
426
- --amplify-components-fieldcontrol-disabled-background-color: var(--amplify-colors-background-tertiary);
427
- --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: 0 1px var(--amplify-colors-error);
428
- --amplify-components-fieldcontrol-quiet-error-border-block-end-color: var(--amplify-colors-error);
429
- --amplify-components-fieldcontrol-large-font-size: var(--amplify-components-field-large-font-size);
430
- --amplify-components-fieldcontrol-small-font-size: var(--amplify-components-field-small-font-size);
431
- --amplify-components-fieldcontrol-font-size: var(--amplify-components-field-font-size);
432
- --amplify-components-fieldcontrol-border-color: var(--amplify-colors-border-primary);
433
625
  --amplify-components-divider-border-color: var(--amplify-colors-border-primary);
434
- --amplify-components-card-box-shadow: var(--amplify-shadows-medium);
435
- --amplify-components-card-border-color: var(--amplify-colors-border-primary);
626
+ --amplify-components-divider-border-style: solid;
627
+ --amplify-components-checkboxfield-justify-content: center;
628
+ --amplify-components-checkboxfield-flex-direction: column;
629
+ --amplify-components-checkboxfield-align-content: center;
630
+ --amplify-components-checkboxfield-align-items: flex-start;
631
+ --amplify-components-checkbox-label-disabled-color: var(--amplify-colors-font-disabled);
632
+ --amplify-components-checkbox-icon-checked-disabled-background-color: var(--amplify-colors-background-disabled);
633
+ --amplify-components-checkbox-icon-checked-transform: scale(1);
634
+ --amplify-components-checkbox-icon-checked-opacity: var(--amplify-opacities-100);
635
+ --amplify-components-checkbox-icon-transition-timing-function: ease-in-out;
636
+ --amplify-components-checkbox-icon-transition-duration: var(--amplify-time-short);
637
+ --amplify-components-checkbox-icon-transition-property: all;
638
+ --amplify-components-checkbox-icon-transform: scale(0);
639
+ --amplify-components-checkbox-icon-opacity: var(--amplify-opacities-0);
640
+ --amplify-components-checkbox-icon-border-radius: 20%;
641
+ --amplify-components-checkbox-icon-background-color: var(--amplify-colors-brand-primary-80);
642
+ --amplify-components-checkbox-button-error-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-error);
643
+ --amplify-components-checkbox-button-error-focus-border-color: var(--amplify-colors-transparent);
644
+ --amplify-components-checkbox-button-error-border-color: var(--amplify-colors-border-error);
645
+ --amplify-components-checkbox-button-disabled-border-color: var(--amplify-colors-border-disabled);
646
+ --amplify-components-checkbox-button-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
647
+ --amplify-components-checkbox-button-focus-border-color: var(--amplify-colors-transparent);
648
+ --amplify-components-checkbox-button-focus-outline-offset: var(--amplify-outline-offsets-medium);
649
+ --amplify-components-checkbox-button-focus-outline-width: var(--amplify-outline-widths-medium);
650
+ --amplify-components-checkbox-button-focus-outline-style: solid;
651
+ --amplify-components-checkbox-button-focus-outline-color: var(--amplify-colors-transparent);
652
+ --amplify-components-checkbox-button-before-border-color: var(--amplify-colors-border-primary);
653
+ --amplify-components-checkbox-button-before-border-style: solid;
654
+ --amplify-components-checkbox-button-before-border-radius: 20%;
655
+ --amplify-components-checkbox-button-before-border-width: var(--amplify-border-widths-medium);
656
+ --amplify-components-checkbox-button-before-height: 100%;
657
+ --amplify-components-checkbox-button-before-width: 100%;
658
+ --amplify-components-checkbox-button-color: var(--amplify-colors-white);
659
+ --amplify-components-checkbox-button-justify-content: center;
660
+ --amplify-components-checkbox-button-align-items: center;
661
+ --amplify-components-checkbox-button-position: relative;
662
+ --amplify-components-checkbox-disabled-cursor: not-allowed;
663
+ --amplify-components-checkbox-align-items: center;
664
+ --amplify-components-checkbox-cursor: pointer;
665
+ --amplify-components-card-elevated-box-shadow: var(--amplify-shadows-medium);
666
+ --amplify-components-card-elevated-border-color: transparent;
667
+ --amplify-components-card-elevated-border-style: solid;
668
+ --amplify-components-card-elevated-border-width: 0;
669
+ --amplify-components-card-elevated-border-radius: var(--amplify-radii-xs);
670
+ --amplify-components-card-elevated-background-color: var(--amplify-components-card-background-color);
671
+ --amplify-components-card-outlined-border-color: var(--amplify-colors-border-primary);
672
+ --amplify-components-card-outlined-border-style: solid;
673
+ --amplify-components-card-outlined-border-width: var(--amplify-border-widths-small);
674
+ --amplify-components-card-outlined-border-radius: var(--amplify-radii-xs);
675
+ --amplify-components-card-outlined-background-color: var(--amplify-components-card-background-color);
676
+ --amplify-components-card-padding: var(--amplify-space-medium);
677
+ --amplify-components-card-box-shadow: none;
678
+ --amplify-components-card-border-color: transparent;
679
+ --amplify-components-card-border-style: solid;
680
+ --amplify-components-card-border-width: 0;
681
+ --amplify-components-card-border-radius: var(--amplify-radii-xs);
436
682
  --amplify-components-card-background-color: var(--amplify-colors-background-primary);
437
683
  --amplify-components-button-large-padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
438
684
  --amplify-components-button-large-padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
439
685
  --amplify-components-button-large-padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
440
686
  --amplify-components-button-large-padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
687
+ --amplify-components-button-large-font-size: var(--amplify-components-fieldcontrol-large-font-size);
441
688
  --amplify-components-button-small-padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
442
689
  --amplify-components-button-small-padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
443
690
  --amplify-components-button-small-padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
444
691
  --amplify-components-button-small-padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
445
- --amplify-components-button-link-loading-color: var(--amplify-colors-font-tertiary);
446
- --amplify-components-button-link-disabled-color: var(--amplify-colors-font-tertiary);
692
+ --amplify-components-button-small-font-size: var(--amplify-components-fieldcontrol-small-font-size);
693
+ --amplify-components-button-link-loading-color: var(--amplify-colors-font-disabled);
694
+ --amplify-components-button-link-loading-background-color: transparent;
695
+ --amplify-components-button-link-loading-border-color: transparent;
696
+ --amplify-components-button-link-disabled-color: var(--amplify-colors-font-disabled);
697
+ --amplify-components-button-link-disabled-background-color: transparent;
698
+ --amplify-components-button-link-disabled-border-color: transparent;
699
+ --amplify-components-button-link-active-color: var(--amplify-colors-font-active);
700
+ --amplify-components-button-link-active-background-color: var(--amplify-colors-brand-primary-20);
701
+ --amplify-components-button-link-active-border-color: transparent;
702
+ --amplify-components-button-link-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
703
+ --amplify-components-button-link-focus-color: var(--amplify-colors-font-focus);
704
+ --amplify-components-button-link-focus-background-color: var(--amplify-colors-brand-primary-10);
705
+ --amplify-components-button-link-focus-border-color: transparent;
706
+ --amplify-components-button-link-hover-color: var(--amplify-colors-font-hover);
707
+ --amplify-components-button-link-hover-background-color: var(--amplify-colors-brand-primary-10);
708
+ --amplify-components-button-link-hover-border-color: transparent;
709
+ --amplify-components-button-link-color: var(--amplify-colors-font-interactive);
710
+ --amplify-components-button-link-background-color: transparent;
711
+ --amplify-components-button-link-border-color: transparent;
712
+ --amplify-components-button-link-border-width: 0;
713
+ --amplify-components-button-menu-disabled-color: var(--amplify-colors-font-disabled);
714
+ --amplify-components-button-menu-active-background-color: var(--amplify-colors-brand-primary-90);
715
+ --amplify-components-button-menu-active-color: var(--amplify-colors-font-inverse);
716
+ --amplify-components-button-menu-focus-background-color: var(--amplify-colors-brand-primary-80);
717
+ --amplify-components-button-menu-focus-color: var(--amplify-colors-font-inverse);
718
+ --amplify-components-button-menu-hover-background-color: var(--amplify-colors-brand-primary-80);
719
+ --amplify-components-button-menu-hover-color: var(--amplify-colors-font-inverse);
720
+ --amplify-components-button-menu-justify-content: start;
721
+ --amplify-components-button-menu-background-color: transparent;
722
+ --amplify-components-button-menu-border-width: 0;
723
+ --amplify-components-button-primary-active-color: var(--amplify-colors-font-inverse);
447
724
  --amplify-components-button-primary-active-background-color: var(--amplify-colors-brand-primary-100);
725
+ --amplify-components-button-primary-active-border-color: transparent;
726
+ --amplify-components-button-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
727
+ --amplify-components-button-primary-focus-color: var(--amplify-colors-font-inverse);
448
728
  --amplify-components-button-primary-focus-background-color: var(--amplify-colors-brand-primary-90);
729
+ --amplify-components-button-primary-focus-border-color: transparent;
730
+ --amplify-components-button-primary-hover-color: var(--amplify-colors-font-inverse);
449
731
  --amplify-components-button-primary-hover-background-color: var(--amplify-colors-brand-primary-90);
450
- --amplify-components-button-primary-loading-color: var(--amplify-colors-font-tertiary);
732
+ --amplify-components-button-primary-hover-border-color: transparent;
733
+ --amplify-components-button-primary-loading-color: var(--amplify-colors-font-inverse);
451
734
  --amplify-components-button-primary-loading-background-color: var(--amplify-colors-background-tertiary);
452
- --amplify-components-button-primary-disabled-color: var(--amplify-colors-font-tertiary);
453
- --amplify-components-button-primary-disabled-background-color: var(--amplify-colors-background-tertiary);
735
+ --amplify-components-button-primary-loading-border-color: transparent;
736
+ --amplify-components-button-primary-disabled-color: var(--amplify-colors-font-disabled);
737
+ --amplify-components-button-primary-disabled-background-color: var(--amplify-colors-background-disabled);
738
+ --amplify-components-button-primary-disabled-border-color: transparent;
454
739
  --amplify-components-button-primary-color: var(--amplify-colors-font-inverse);
455
740
  --amplify-components-button-primary-background-color: var(--amplify-colors-brand-primary-80);
741
+ --amplify-components-button-primary-border-style: solid;
742
+ --amplify-components-button-primary-border-width: var(--amplify-border-widths-small);
743
+ --amplify-components-button-primary-border-color: transparent;
456
744
  --amplify-components-button-disabled-border-color: var(--amplify-colors-border-tertiary);
457
- --amplify-components-button-disabled-color: var(--amplify-colors-font-tertiary);
745
+ --amplify-components-button-disabled-background-color: transparent;
746
+ --amplify-components-button-disabled-color: var(--amplify-colors-font-disabled);
458
747
  --amplify-components-button-loading-border-color: var(--amplify-colors-border-tertiary);
748
+ --amplify-components-button-loading-background-color: transparent;
459
749
  --amplify-components-button-loading-color: var(--amplify-colors-font-tertiary);
460
750
  --amplify-components-button-active-border-color: var(--amplify-colors-brand-primary-100);
461
- --amplify-components-button-active-background-color: var(--amplify-colors-brand-primary-100);
462
- --amplify-components-button-active-color: var(--amplify-colors-font-inverse);
751
+ --amplify-components-button-active-background-color: var(--amplify-colors-brand-primary-20);
752
+ --amplify-components-button-active-color: var(--amplify-colors-font-active);
753
+ --amplify-components-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
754
+ --amplify-components-button-focus-border-color: var(--amplify-colors-border-focus);
755
+ --amplify-components-button-focus-background-color: var(--amplify-colors-brand-primary-10);
756
+ --amplify-components-button-focus-color: var(--amplify-colors-font-focus);
463
757
  --amplify-components-button-hover-border-color: var(--amplify-colors-brand-primary-60);
464
758
  --amplify-components-button-hover-background-color: var(--amplify-colors-brand-primary-10);
465
- --amplify-components-button-color: var(--amplify-colors-brand-primary-80);
466
- --amplify-components-button-border-color: var(--amplify-colors-brand-primary-20);
759
+ --amplify-components-button-hover-color: var(--amplify-colors-font-focus);
760
+ --amplify-components-button-color: var(--amplify-colors-font-primary);
761
+ --amplify-components-button-border-radius: var(--amplify-components-fieldcontrol-border-radius);
762
+ --amplify-components-button-border-style: var(--amplify-components-fieldcontrol-border-style);
763
+ --amplify-components-button-border-width: var(--amplify-components-fieldcontrol-border-width);
764
+ --amplify-components-button-border-color: var(--amplify-components-fieldcontrol-border-color);
467
765
  --amplify-components-button-padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
468
766
  --amplify-components-button-padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
469
767
  --amplify-components-button-padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
470
768
  --amplify-components-button-padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
769
+ --amplify-components-button-line-height: var(--amplify-components-fieldcontrol-line-height);
770
+ --amplify-components-button-font-size: var(--amplify-components-fieldcontrol-font-size);
471
771
  --amplify-components-button-transition-duration: var(--amplify-components-fieldcontrol-transition-duration);
472
- --amplify-components-button-border-radius: var(--amplify-components-fieldcontrol-border-radius);
772
+ --amplify-components-button-font-weight: var(--amplify-font-weights-bold);
773
+ --amplify-components-badge-large-padding-horizontal: var(--amplify-space-medium);
774
+ --amplify-components-badge-large-padding-vertical: var(--amplify-space-small);
775
+ --amplify-components-badge-large-font-size: var(--amplify-font-sizes-medium);
776
+ --amplify-components-badge-small-padding-horizontal: var(--amplify-space-xs);
777
+ --amplify-components-badge-small-padding-vertical: var(--amplify-space-xxs);
778
+ --amplify-components-badge-small-font-size: var(--amplify-font-sizes-xs);
473
779
  --amplify-components-badge-error-background-color: var(--amplify-colors-background-error);
780
+ --amplify-components-badge-error-color: var(--amplify-colors-font-error);
474
781
  --amplify-components-badge-success-background-color: var(--amplify-colors-background-success);
782
+ --amplify-components-badge-success-color: var(--amplify-colors-font-success);
475
783
  --amplify-components-badge-warning-background-color: var(--amplify-colors-background-warning);
784
+ --amplify-components-badge-warning-color: var(--amplify-colors-font-warning);
476
785
  --amplify-components-badge-info-background-color: var(--amplify-colors-background-info);
786
+ --amplify-components-badge-info-color: var(--amplify-colors-font-info);
787
+ --amplify-components-badge-border-radius: var(--amplify-radii-xl);
477
788
  --amplify-components-badge-background-color: var(--amplify-colors-background-tertiary);
789
+ --amplify-components-badge-padding-horizontal: var(--amplify-space-small);
790
+ --amplify-components-badge-padding-vertical: var(--amplify-space-xs);
791
+ --amplify-components-badge-text-align: center;
792
+ --amplify-components-badge-font-size: var(--amplify-font-sizes-small);
793
+ --amplify-components-badge-font-weight: var(--amplify-font-weights-semibold);
794
+ --amplify-components-badge-line-height: 1;
795
+ --amplify-components-badge-color: var(--amplify-colors-font-primary);
478
796
  --amplify-components-alert-success-background-color: var(--amplify-colors-background-success);
797
+ --amplify-components-alert-success-color: var(--amplify-colors-font-success);
479
798
  --amplify-components-alert-warning-background-color: var(--amplify-colors-background-warning);
799
+ --amplify-components-alert-warning-color: var(--amplify-colors-font-warning);
480
800
  --amplify-components-alert-error-background-color: var(--amplify-colors-background-error);
801
+ --amplify-components-alert-error-color: var(--amplify-colors-font-error);
481
802
  --amplify-components-alert-info-background-color: var(--amplify-colors-background-info);
803
+ --amplify-components-alert-info-color: var(--amplify-colors-font-info);
804
+ --amplify-components-alert-heading-font-weight: var(--amplify-font-weights-bold);
805
+ --amplify-components-alert-heading-font-size: var(--amplify-font-sizes-medium);
806
+ --amplify-components-alert-icon-size: var(--amplify-font-sizes-xl);
807
+ --amplify-components-alert-padding-inline: var(--amplify-space-medium);
808
+ --amplify-components-alert-padding-block: var(--amplify-space-small);
482
809
  --amplify-components-alert-background-color: var(--amplify-colors-background-tertiary);
483
- --amplify-components-tabs-item-disabled-color: var(--amplify-colors-font-disabled);
484
- --amplify-components-tabs-item-active-border-color: var(--amplify-colors-font-interactive);
485
- --amplify-components-tabs-item-active-color: var(--amplify-colors-font-interactive);
486
- --amplify-components-tabs-item-focus-color: var(--amplify-colors-font-focus);
487
- --amplify-components-tabs-item-hover-color: var(--amplify-colors-font-hover);
488
- --amplify-components-radio-button-focus-box-shadow: 0 0 0 1px var(--amplify-colors-focus);
489
- --amplify-components-radio-button-focus-border-color: var(--amplify-colors-focus);
490
- --amplify-components-link-hover-color: var(--amplify-colors-font-hover);
491
- --amplify-components-link-focus-color: var(--amplify-colors-font-focus);
492
- --amplify-components-link-color: var(--amplify-colors-font-interactive);
493
- --amplify-components-link-active-color: var(--amplify-colors-font-active);
494
- --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-focus);
495
- --amplify-components-fieldcontrol-focus-border-color: var(--amplify-colors-focus);
496
- --amplify-components-fieldcontrol-quiet-focus-box-shadow: 0 1px var(--amplify-colors-focus);
497
- --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: var(--amplify-colors-focus);
498
- --amplify-components-button-large-line-height: var(--amplify-components-fieldcontrol-large-font-size);
499
- --amplify-components-button-large-font-size: var(--amplify-components-fieldcontrol-large-font-size);
500
- --amplify-components-button-small-line-height: var(--amplify-components-fieldcontrol-small-font-size);
501
- --amplify-components-button-small-font-size: var(--amplify-components-fieldcontrol-small-font-size);
502
- --amplify-components-button-link-active-color: var(--amplify-colors-font-active);
503
- --amplify-components-button-link-focus-color: var(--amplify-colors-font-focus);
504
- --amplify-components-button-link-hover-color: var(--amplify-colors-font-hover);
505
- --amplify-components-button-link-color: var(--amplify-colors-font-interactive);
506
- --amplify-components-button-focus-box-shadow: var(--amplify-colors-focus) 0px 0px 0px 1px;
507
- --amplify-components-button-focus-border-color: var(--amplify-colors-focus);
508
- --amplify-components-button-focus-color: var(--amplify-colors-focus);
509
- --amplify-components-button-hover-color: var(--amplify-colors-focus);
510
- --amplify-components-button-line-height: var(--amplify-components-fieldcontrol-font-size);
511
- --amplify-components-button-font-size: var(--amplify-components-fieldcontrol-font-size);
810
+ --amplify-components-alert-color: var(--amplify-colors-font-primary);
811
+ --amplify-components-alert-justify-content: space-between;
812
+ --amplify-components-alert-align-items: center;
512
813
  }
513
814
 
514
815
  html {
@@ -525,6 +826,10 @@ html {
525
826
  /* protect against external styles */
526
827
  }
527
828
 
829
+ [data-amplify-theme] * {
830
+ box-sizing: border-box;
831
+ }
832
+
528
833
  .sr-only {
529
834
  position: absolute !important;
530
835
  width: 1px !important;
@@ -579,45 +884,51 @@ strong.amplify-text {
579
884
  }
580
885
 
581
886
  .amplify-badge {
887
+ color: var(--amplify-components-badge-color);
582
888
  background-color: var(--amplify-components-badge-background-color);
583
889
  border-radius: var(--amplify-components-badge-border-radius);
584
890
  display: inline-flex;
585
891
  font-size: var(--amplify-components-badge-font-size);
586
892
  font-weight: var(--amplify-components-badge-font-weight);
587
- padding: var(--amplify-components-badge-padding);
893
+ padding: var(--amplify-components-badge-padding-vertical) var(--amplify-components-badge-padding-horizontal);
588
894
  text-align: var(--amplify-components-badge-text-align);
589
895
  line-height: var(--amplify-components-badge-line-height);
590
896
  }
591
897
  .amplify-badge[data-variation=info] {
898
+ color: var(--amplify-components-badge-info-color);
592
899
  background-color: var(--amplify-components-badge-info-background-color);
593
900
  }
594
901
  .amplify-badge[data-variation=error] {
902
+ color: var(--amplify-components-badge-error-color);
595
903
  background-color: var(--amplify-components-badge-error-background-color);
596
904
  }
597
905
  .amplify-badge[data-variation=warning] {
906
+ color: var(--amplify-components-badge-warning-color);
598
907
  background-color: var(--amplify-components-badge-warning-background-color);
599
908
  }
600
909
  .amplify-badge[data-variation=success] {
910
+ color: var(--amplify-components-badge-success-color);
601
911
  background-color: var(--amplify-components-badge-success-background-color);
602
912
  }
603
913
  .amplify-badge[data-size=small] {
604
914
  font-size: var(--amplify-components-badge-small-font-size);
605
- padding: var(--amplify-components-badge-small-padding);
915
+ padding: var(--amplify-components-badge-small-padding-vertical) var(--amplify-components-badge-small-padding-horizontal);
606
916
  }
607
917
  .amplify-badge[data-size=large] {
608
918
  font-size: var(--amplify-components-badge-large-font-size);
609
- padding: var(--amplify-components-badge-large-padding);
919
+ padding: var(--amplify-components-badge-large-padding-vertical) var(--amplify-components-badge-large-padding-horizontal);
610
920
  }
611
921
 
612
922
  /*
613
923
  * Button base styles
614
924
  */
615
925
  .amplify-button {
616
- display: inline-block;
926
+ display: inline-flex;
927
+ justify-content: center;
928
+ align-items: center;
617
929
  border-radius: var(--amplify-components-button-border-radius);
618
930
  box-sizing: border-box;
619
931
  font-weight: var(--amplify-components-button-font-weight);
620
- text-align: var(--amplify-components-button-text-align);
621
932
  transition: all var(--amplify-components-button-transition-duration);
622
933
  border-width: var(--amplify-components-button-border-width);
623
934
  border-style: var(--amplify-components-button-border-style);
@@ -625,7 +936,7 @@ strong.amplify-text {
625
936
  border-radius: var(--amplify-components-button-border-radius);
626
937
  color: var(--amplify-components-button-color);
627
938
  font-size: var(--amplify-components-button-font-size);
628
- line-height: var(--amplify-components-button-font-size);
939
+ line-height: var(--amplify-components-button-line-height);
629
940
  -webkit-padding-before: var(--amplify-components-button-padding-block-start);
630
941
  padding-block-start: var(--amplify-components-button-padding-block-start);
631
942
  -webkit-padding-after: var(--amplify-components-button-padding-block-end);
@@ -634,14 +945,19 @@ strong.amplify-text {
634
945
  padding-inline-start: var(--amplify-components-button-padding-inline-start);
635
946
  -webkit-padding-end: var(--amplify-components-button-padding-inline-end);
636
947
  padding-inline-end: var(--amplify-components-button-padding-inline-end);
948
+ -webkit-user-select: none;
949
+ -moz-user-select: none;
950
+ -ms-user-select: none;
951
+ user-select: none;
952
+ cursor: pointer;
637
953
  }
638
954
  .amplify-button:hover {
639
955
  background-color: var(--amplify-components-button-hover-background-color);
640
956
  border-color: var(--amplify-components-button-hover-border-color);
641
957
  color: var(--amplify-components-button-hover-color);
642
- cursor: pointer;
643
958
  }
644
959
  .amplify-button:focus {
960
+ background-color: var(--amplify-components-button-hover-background-color);
645
961
  border-color: var(--amplify-components-button-focus-border-color);
646
962
  color: var(--amplify-components-button-focus-color);
647
963
  box-shadow: var(--amplify-components-button-focus-box-shadow);
@@ -665,26 +981,57 @@ strong.amplify-text {
665
981
  .amplify-button[data-fullwidth=true] {
666
982
  width: 100%;
667
983
  }
984
+ .amplify-button[data-variation=menu] {
985
+ border-width: var(--amplify-components-button-menu-border-width);
986
+ background-color: var(--amplify-components-button-menu-background-color);
987
+ justify-content: var(--amplify-components-button-menu-justify-content);
988
+ }
989
+ .amplify-button[data-variation=menu]:hover {
990
+ color: var(--amplify-components-button-menu-hover-color);
991
+ background-color: var(--amplify-components-button-menu-hover-background-color);
992
+ }
993
+ .amplify-button[data-variation=menu]:focus {
994
+ box-shadow: none;
995
+ color: var(--amplify-components-button-menu-focus-color);
996
+ background-color: var(--amplify-components-button-menu-focus-background-color);
997
+ }
998
+ .amplify-button[data-variation=menu]:active {
999
+ color: var(--amplify-components-button-menu-active-color);
1000
+ background-color: var(--amplify-components-button-menu-active-background-color);
1001
+ }
1002
+ .amplify-button[data-variation=menu][disabled] {
1003
+ color: var(--amplify-components-button-menu-disabled-color);
1004
+ }
668
1005
  .amplify-button[data-variation=primary] {
669
1006
  border-width: var(--amplify-components-button-primary-border-width);
670
1007
  background-color: var(--amplify-components-button-primary-background-color);
1008
+ border-color: var(--amplify-components-button-primary-border-color);
671
1009
  color: var(--amplify-components-button-primary-color);
672
1010
  }
673
1011
  .amplify-button[data-variation=primary]:hover {
674
1012
  background-color: var(--amplify-components-button-primary-hover-background-color);
1013
+ border-color: var(--amplify-components-button-primary-hover-border-color);
1014
+ color: var(--amplify-components-button-primary-hover-color);
675
1015
  }
676
1016
  .amplify-button[data-variation=primary]:focus {
677
1017
  background-color: var(--amplify-components-button-primary-focus-background-color);
1018
+ border-color: var(--amplify-components-button-primary-focus-border-color);
1019
+ color: var(--amplify-components-button-primary-focus-color);
1020
+ box-shadow: var(--amplify-components-button-primary-focus-box-shadow);
678
1021
  }
679
1022
  .amplify-button[data-variation=primary]:active {
680
1023
  background-color: var(--amplify-components-button-primary-active-background-color);
1024
+ border-color: var(--amplify-components-button-primary-active-border-color);
1025
+ color: var(--amplify-components-button-primary-active-color);
681
1026
  }
682
1027
  .amplify-button[data-variation=primary][data-loading=true] {
683
1028
  background-color: var(--amplify-components-button-primary-loading-background-color);
1029
+ border-color: var(--amplify-components-button-primary-loading-border-color);
684
1030
  color: var(--amplify-components-button-primary-loading-color);
685
1031
  }
686
1032
  .amplify-button[data-variation=primary][disabled] {
687
1033
  background-color: var(--amplify-components-button-primary-disabled-background-color);
1034
+ border-color: var(--amplify-components-button-primary-disabled-border-color);
688
1035
  color: var(--amplify-components-button-primary-disabled-color);
689
1036
  }
690
1037
  .amplify-button[data-variation=link] {
@@ -693,32 +1040,35 @@ strong.amplify-text {
693
1040
  color: var(--amplify-components-button-link-color);
694
1041
  }
695
1042
  .amplify-button[data-variation=link]:hover {
1043
+ background-color: var(--amplify-components-button-link-hover-background-color);
1044
+ border-color: var(--amplify-components-button-link-hover-border-color);
696
1045
  color: var(--amplify-components-button-link-hover-color);
697
- text-decoration: underline;
698
1046
  }
699
1047
  .amplify-button[data-variation=link]:focus {
1048
+ background-color: var(--amplify-components-button-link-focus-background-color);
1049
+ border-color: var(--amplify-components-button-link-focus-border-color);
700
1050
  color: var(--amplify-components-button-link-focus-color);
701
- text-decoration: underline;
702
- box-shadow: none;
703
- }
704
- .amplify-button[data-variation=link]:focus-visible {
705
- outline: 2px solid black;
1051
+ box-shadow: var(--amplify-components-button-link-focus-box-shadow);
706
1052
  }
707
1053
  .amplify-button[data-variation=link]:active {
1054
+ background-color: var(--amplify-components-button-link-active-background-color);
1055
+ border-color: var(--amplify-components-button-link-active-border-color);
708
1056
  color: var(--amplify-components-button-link-active-color);
709
- text-decoration: underline;
710
1057
  }
711
1058
  .amplify-button[data-variation=link][disabled] {
1059
+ background-color: var(--amplify-components-button-link-disabled-background-color);
1060
+ border-color: var(--amplify-components-button-link-disabled-border-color);
712
1061
  color: var(--amplify-components-button-link-disabled-color);
713
1062
  text-decoration: none;
714
1063
  }
715
1064
  .amplify-button[data-variation=link][data-loading=true] {
1065
+ background-color: var(--amplify-components-button-link-loading-background-color);
1066
+ border-color: var(--amplify-components-button-link-loading-border-color);
716
1067
  color: var(--amplify-components-button-link-loading-color);
717
1068
  text-decoration: none;
718
1069
  }
719
1070
  .amplify-button[data-size=small] {
720
1071
  font-size: var(--amplify-components-button-small-font-size);
721
- line-height: var(--amplify-components-button-small-font-size);
722
1072
  -webkit-padding-before: var(--amplify-components-button-small-padding-block-start);
723
1073
  padding-block-start: var(--amplify-components-button-small-padding-block-start);
724
1074
  -webkit-padding-after: var(--amplify-components-button-small-padding-block-end);
@@ -730,7 +1080,6 @@ strong.amplify-text {
730
1080
  }
731
1081
  .amplify-button[data-size=large] {
732
1082
  font-size: var(--amplify-components-button-large-font-size);
733
- line-height: var(--amplify-components-button-large-font-size);
734
1083
  -webkit-padding-before: var(--amplify-components-button-large-padding-block-start);
735
1084
  padding-block-start: var(--amplify-components-button-large-padding-block-start);
736
1085
  -webkit-padding-after: var(--amplify-components-button-large-padding-block-end);
@@ -747,6 +1096,7 @@ strong.amplify-text {
747
1096
  }
748
1097
  }
749
1098
  .amplify-field__description {
1099
+ color: var(--amplify-components-fieldmessages-description-color);
750
1100
  font-style: var(--amplify-components-fieldmessages-description-font-style);
751
1101
  font-size: var(--amplify-components-fieldmessages-description-font-size);
752
1102
  }
@@ -758,7 +1108,6 @@ strong.amplify-text {
758
1108
 
759
1109
  .amplify-heading {
760
1110
  color: var(--amplify-components-heading-color);
761
- display: block;
762
1111
  line-height: var(--amplify-components-heading-line-height);
763
1112
  display: block;
764
1113
  }
@@ -803,11 +1152,9 @@ h6.amplify-heading {
803
1152
  height: var(--amplify-components-icon-height);
804
1153
  line-height: var(--amplify-components-icon-line-height);
805
1154
  }
806
- .amplify-icon[data-size=small] {
807
- height: var(--amplify-components-icon-small-height);
808
- }
809
- .amplify-icon[data-size=large] {
810
- height: var(--amplify-components-icon-large-height);
1155
+ .amplify-icon > svg {
1156
+ height: var(--amplify-components-icon-height);
1157
+ width: var(--amplify-components-icon-height);
811
1158
  }
812
1159
 
813
1160
  .amplify-image {
@@ -823,6 +1170,7 @@ h6.amplify-heading {
823
1170
  color: var(--amplify-components-link-color);
824
1171
  -webkit-text-decoration: var(--amplify-components-link-text-decoration);
825
1172
  text-decoration: var(--amplify-components-link-text-decoration);
1173
+ cursor: pointer;
826
1174
  }
827
1175
  .amplify-link:active {
828
1176
  color: var(--amplify-components-link-active-color);
@@ -851,6 +1199,120 @@ h6.amplify-heading {
851
1199
  font-size: var(--amplify-components-link-large-font-size);
852
1200
  }
853
1201
 
1202
+ .amplify-loader {
1203
+ width: var(--amplify-components-loader-width);
1204
+ height: var(--amplify-components-loader-height);
1205
+ fill: none;
1206
+ stroke: var(--amplify-components-loader-stroke-empty);
1207
+ }
1208
+ .amplify-loader circle:last-of-type {
1209
+ transform-origin: center center;
1210
+ -webkit-animation-name: amplify-loader-circular;
1211
+ animation-name: amplify-loader-circular;
1212
+ -webkit-animation-timing-function: linear;
1213
+ animation-timing-function: linear;
1214
+ -webkit-animation-iteration-count: infinite;
1215
+ animation-iteration-count: infinite;
1216
+ -webkit-animation-duration: var(--amplify-components-loader-animation-duration);
1217
+ animation-duration: var(--amplify-components-loader-animation-duration);
1218
+ stroke: var(--amplify-components-loader-stroke-filled);
1219
+ stroke-linecap: var(--amplify-components-loader-stroke-linecap);
1220
+ }
1221
+ @media (prefers-reduced-motion) {
1222
+ .amplify-loader circle:last-of-type {
1223
+ -webkit-animation: none;
1224
+ animation: none;
1225
+ stroke-dasharray: 100% 200%;
1226
+ stroke-dashoffset: 50%;
1227
+ }
1228
+ }
1229
+ .amplify-loader[data-size=small] {
1230
+ width: var(--amplify-components-loader-small-width);
1231
+ height: var(--amplify-components-loader-small-height);
1232
+ }
1233
+ .amplify-loader[data-size=large] {
1234
+ width: var(--amplify-components-loader-large-width);
1235
+ height: var(--amplify-components-loader-large-height);
1236
+ }
1237
+ .amplify-loader line:last-of-type {
1238
+ stroke: var(--amplify-components-loader-linear-stroke-filled);
1239
+ stroke-dasharray: 50% 200%;
1240
+ -webkit-animation-name: amplify-loader-linear;
1241
+ animation-name: amplify-loader-linear;
1242
+ -webkit-animation-duration: var(--amplify-components-loader-linear-animation-duration);
1243
+ animation-duration: var(--amplify-components-loader-linear-animation-duration);
1244
+ -webkit-animation-timing-function: linear;
1245
+ animation-timing-function: linear;
1246
+ -webkit-animation-iteration-count: infinite;
1247
+ animation-iteration-count: infinite;
1248
+ }
1249
+ @media (prefers-reduced-motion) {
1250
+ .amplify-loader line:last-of-type {
1251
+ -webkit-animation: none;
1252
+ animation: none;
1253
+ stroke-dashoffset: -50%;
1254
+ }
1255
+ }
1256
+ .amplify-loader[data-variation=linear] {
1257
+ width: var(--amplify-components-loader-linear-width);
1258
+ min-width: var(--amplify-components-loader-linear-min-width);
1259
+ height: var(--amplify-components-loader-linear-height);
1260
+ stroke: var(--amplify-components-loader-linear-stroke-empty);
1261
+ stroke-width: var(--amplify-components-loader-linear-stroke-width);
1262
+ stroke-linecap: var(--amplify-components-loader-linear-stroke-linecap);
1263
+ }
1264
+ .amplify-loader[data-variation=linear][data-size=small] {
1265
+ height: var(--amplify-components-loader-linear-small-height);
1266
+ stroke-width: var(--amplify-components-loader-linear-small-stroke-width);
1267
+ }
1268
+ .amplify-loader[data-variation=linear][data-size=large] {
1269
+ height: var(--amplify-components-loader-linear-large-height);
1270
+ stroke-width: var(--amplify-components-loader-linear-large-stroke-width);
1271
+ }
1272
+
1273
+ @-webkit-keyframes amplify-loader-circular {
1274
+ 0% {
1275
+ stroke-dasharray: 100% 200%;
1276
+ transform: rotate(120deg);
1277
+ }
1278
+ 50% {
1279
+ stroke-dasharray: 20% 400%;
1280
+ }
1281
+ 100% {
1282
+ stroke-dasharray: 100% 200%;
1283
+ transform: rotate(480deg);
1284
+ }
1285
+ }
1286
+
1287
+ @keyframes amplify-loader-circular {
1288
+ 0% {
1289
+ stroke-dasharray: 100% 200%;
1290
+ transform: rotate(120deg);
1291
+ }
1292
+ 50% {
1293
+ stroke-dasharray: 20% 400%;
1294
+ }
1295
+ 100% {
1296
+ stroke-dasharray: 100% 200%;
1297
+ transform: rotate(480deg);
1298
+ }
1299
+ }
1300
+ @-webkit-keyframes amplify-loader-linear {
1301
+ 0% {
1302
+ stroke-dashoffset: 200%;
1303
+ }
1304
+ 100% {
1305
+ stroke-dashoffset: -50%;
1306
+ }
1307
+ }
1308
+ @keyframes amplify-loader-linear {
1309
+ 0% {
1310
+ stroke-dashoffset: 200%;
1311
+ }
1312
+ 100% {
1313
+ stroke-dashoffset: -50%;
1314
+ }
1315
+ }
854
1316
  .amplify-placeholder {
855
1317
  -webkit-animation-direction: alternate;
856
1318
  animation-direction: alternate;
@@ -863,6 +1325,7 @@ h6.amplify-heading {
863
1325
  border-radius: var(--amplify-components-placeholder-border-radius);
864
1326
  height: var(--amplify-components-placeholder-default-height);
865
1327
  width: 100%;
1328
+ display: block;
866
1329
  }
867
1330
  .amplify-placeholder[data-size=small] {
868
1331
  height: var(--amplify-components-placeholder-small-height);
@@ -895,47 +1358,279 @@ h6.amplify-heading {
895
1358
  background-color: var(--amplify-components-placeholder-end-color);
896
1359
  }
897
1360
  }
898
- .amplify-flex {
899
- align-content: var(--amplify-components-flex-align-content);
900
- align-items: var(--amplify-components-flex-align-items);
901
- display: flex;
902
- flex-wrap: var(--amplify-components-flex-flex-wrap);
903
- gap: var(--amplify-components-flex-gap);
904
- justify-content: var(--amplify-components-flex-justify-content);
1361
+ .amplify-flex {
1362
+ align-content: var(--amplify-components-flex-align-content);
1363
+ align-items: var(--amplify-components-flex-align-items);
1364
+ display: flex;
1365
+ flex-wrap: var(--amplify-components-flex-flex-wrap);
1366
+ gap: var(--amplify-components-flex-gap);
1367
+ justify-content: var(--amplify-components-flex-justify-content);
1368
+ }
1369
+
1370
+ .amplify-grid {
1371
+ display: grid;
1372
+ }
1373
+
1374
+ .amplify-scrollview {
1375
+ display: block;
1376
+ overflow: scroll;
1377
+ }
1378
+ .amplify-scrollview[data-orientation=horizontal] {
1379
+ overflow-x: scroll;
1380
+ overflow-y: initial;
1381
+ }
1382
+ .amplify-scrollview[data-orientation=vertical] {
1383
+ overflow-x: initial;
1384
+ overflow-y: scroll;
1385
+ }
1386
+
1387
+ .amplify-alert {
1388
+ align-items: var(--amplify-components-alert-align-items);
1389
+ justify-content: var(--amplify-components-alert-justify-content);
1390
+ background-color: var(--amplify-components-alert-background-color);
1391
+ padding-block: var(--amplify-components-alert-padding-block);
1392
+ padding-inline: var(--amplify-components-alert-padding-inline);
1393
+ }
1394
+ .amplify-alert[data-variation=info] {
1395
+ color: var(--amplify-components-alert-info-color);
1396
+ background-color: var(--amplify-components-alert-info-background-color);
1397
+ }
1398
+ .amplify-alert[data-variation=error] {
1399
+ color: var(--amplify-components-alert-error-color);
1400
+ background-color: var(--amplify-components-alert-error-background-color);
1401
+ }
1402
+ .amplify-alert[data-variation=warning] {
1403
+ color: var(--amplify-components-alert-warning-color);
1404
+ background-color: var(--amplify-components-alert-warning-background-color);
1405
+ }
1406
+ .amplify-alert[data-variation=success] {
1407
+ color: var(--amplify-components-alert-success-color);
1408
+ background-color: var(--amplify-components-alert-success-background-color);
1409
+ }
1410
+
1411
+ .amplify-alert__icon {
1412
+ font-size: var(--amplify-components-alert-icon-size);
1413
+ }
1414
+
1415
+ .amplify-alert__heading {
1416
+ display: block;
1417
+ font-weight: var(--amplify-components-alert-heading-font-weight);
1418
+ font-size: var(--amplify-components-alert-heading-font-size);
1419
+ }
1420
+
1421
+ .amplify-alert__body {
1422
+ color: inherit;
1423
+ display: block;
1424
+ }
1425
+
1426
+ .amplify-button.amplify-alert__dismiss {
1427
+ color: inherit;
1428
+ }
1429
+
1430
+ /* Center by default */
1431
+ [data-amplify-authenticator] {
1432
+ display: grid;
1433
+ }
1434
+
1435
+ [data-amplify-authenticator][data-variation=modal] {
1436
+ display: grid;
1437
+ width: 100vw;
1438
+ height: 100vh;
1439
+ overflow: auto;
1440
+ background-color: var(--amplify-colors-background-secondary, #e1e5e9);
1441
+ /* Override browser default `body { margin: 8px }` */
1442
+ position: fixed;
1443
+ top: 0;
1444
+ left: 0;
1445
+ /* Having a z-index at least "wins" by default */
1446
+ z-index: 1;
1447
+ }
1448
+
1449
+ /* Texture for modal */
1450
+ [data-amplify-authenticator][data-variation=modal]::before {
1451
+ position: absolute;
1452
+ width: 100%;
1453
+ height: 100%;
1454
+ content: "";
1455
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='texture' data-v-1d260e0e=''%3E%3Cfilter id='noise' data-v-1d260e0e=''%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch' data-v-1d260e0e=''%3E%3C/feTurbulence%3E%3CfeColorMatrix type='saturate' values='0' data-v-1d260e0e=''%3E%3C/feColorMatrix%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' data-v-1d260e0e=''%3E%3C/rect%3E%3C/svg%3E");
1456
+ opacity: 0.35;
1457
+ filter: "contrast(120%) brightness(120%)";
1458
+ }
1459
+
1460
+ [data-amplify-authenticator] [data-amplify-container] {
1461
+ /* Fix z-index of texture being over the Authenticator */
1462
+ position: relative;
1463
+ place-self: center;
1464
+ width: 30rem;
1465
+ }
1466
+ @media (max-width: 30rem) {
1467
+ [data-amplify-authenticator] [data-amplify-container] {
1468
+ width: 100%;
1469
+ }
1470
+ }
1471
+
1472
+ [data-amplify-authenticator] [data-amplify-router] [data-amplify-footer] {
1473
+ padding-bottom: var(--amplify-space-medium);
1474
+ text-align: center;
1475
+ }
1476
+
1477
+ [data-amplify-authenticator] [data-amplify-router] {
1478
+ background-color: var(--amplify-colors-background-primary);
1479
+ box-shadow: var(--amplify-shadows-medium);
1480
+ }
1481
+
1482
+ [data-amplify-authenticator] [data-amplify-form] {
1483
+ padding: var(--amplify-space-xl);
1484
+ }
1485
+
1486
+ [data-amplify-authenticator] [data-state=inactive][role=tab] {
1487
+ background-color: var(--amplify-colors-background-secondary);
1488
+ }
1489
+
1490
+ /* Remove double-border between the password field & reveal button */
1491
+ [data-amplify-authenticator] .amplify-passwordfield .amplify-button:not(:focus) {
1492
+ border-left: none;
1493
+ }
1494
+
1495
+ [data-amplify-authenticator] .amplify-phonenumberfield .amplify-countrycodeselect {
1496
+ height: 100%;
1497
+ }
1498
+
1499
+ [data-amplify-authenticator] .amplify-phonenumberfield .amplify-select__wrapper {
1500
+ height: 100%;
1501
+ }
1502
+
1503
+ /* Remove double-border between the phone field & country select */
1504
+ [data-amplify-authenticator] .amplify-phonenumberfield select:not(:focus) {
1505
+ border-right: none;
1506
+ }
1507
+
1508
+ [data-amplify-authenticator] [data-or-container] {
1509
+ position: relative;
1510
+ color: gray;
1511
+ align-items: center;
1512
+ justify-content: center;
1513
+ padding: 1.5rem 0px;
1514
+ }
1515
+ [data-amplify-authenticator] [data-or-container] [data-or-line] {
1516
+ position: absolute;
1517
+ background: var(--amplify-colors-white);
1518
+ z-index: 1;
1519
+ padding: 0px 1.5rem;
1520
+ }
1521
+
1522
+ .amplify-card {
1523
+ background-color: var(--amplify-components-card-background-color);
1524
+ border-radius: var(--amplify-components-card-border-radius);
1525
+ border-width: var(--amplify-components-card-border-width);
1526
+ border-style: var(--amplify-components-card-border-style);
1527
+ border-color: var(--amplify-components-card-border-color);
1528
+ box-shadow: var(--amplify-components-card-box-shadow);
1529
+ display: inline-block;
1530
+ padding: var(--amplify-components-card-padding);
1531
+ }
1532
+ .amplify-card[data-variation=outlined] {
1533
+ background-color: var(--amplify-components-card-outlined-background-color);
1534
+ border-radius: var(--amplify-components-card-outlined-border-radius);
1535
+ border-width: var(--amplify-components-card-outlined-border-width);
1536
+ border-style: var(--amplify-components-card-outlined-border-style);
1537
+ border-color: var(--amplify-components-card-outlined-border-color);
1538
+ box-shadow: var(--amplify-components-card-outlined-box-shadow);
1539
+ }
1540
+ .amplify-card[data-variation=elevated] {
1541
+ background-color: var(--amplify-components-card-elevated-background-color);
1542
+ border-radius: var(--amplify-components-card-elevated-border-radius);
1543
+ border-width: var(--amplify-components-card-elevated-border-width);
1544
+ border-style: var(--amplify-components-card-elevated-border-style);
1545
+ border-color: var(--amplify-components-card-elevated-border-color);
1546
+ box-shadow: var(--amplify-components-card-elevated-box-shadow);
1547
+ }
1548
+
1549
+ .amplify-collection {
1550
+ flex-direction: column;
1551
+ }
1552
+
1553
+ .amplify-collection-search {
1554
+ flex-direction: row;
1555
+ justify-content: center;
1556
+ }
1557
+
1558
+ .amplify-collection-pagination {
1559
+ justify-content: center;
905
1560
  }
906
1561
 
907
- .amplify-grid {
908
- display: grid;
1562
+ .amplify-checkbox {
1563
+ cursor: var(--amplify-components-checkbox-cursor);
1564
+ align-items: var(--amplify-components-checkbox-align-items);
1565
+ gap: inherit;
1566
+ }
1567
+ .amplify-checkbox[data-disabled=true] {
1568
+ cursor: var(--amplify-components-checkbox-disabled-cursor);
909
1569
  }
910
1570
 
911
- .amplify-alert {
912
- background-color: var(--amplify-components-alert-background-color);
913
- padding: var(--amplify-components-alert-padding);
1571
+ .amplify-checkbox__button {
1572
+ position: var(--amplify-components-checkbox-button-position);
1573
+ align-items: var(--amplify-components-checkbox-button-align-items);
1574
+ justify-content: var(--amplify-components-checkbox-button-justify-content);
1575
+ color: var(--amplify-components-checkbox-button-color);
914
1576
  }
915
- .amplify-alert[data-variation=info] {
916
- background-color: var(--amplify-components-alert-info-background-color);
1577
+ .amplify-checkbox__button::before {
1578
+ content: "";
1579
+ display: inline-block;
1580
+ position: absolute;
1581
+ box-sizing: border-box;
1582
+ width: var(--amplify-components-checkbox-button-before-width);
1583
+ height: var(--amplify-components-checkbox-button-before-height);
1584
+ border-width: var(--amplify-components-checkbox-button-before-border-width);
1585
+ border-radius: var(--amplify-components-checkbox-button-before-border-radius);
1586
+ border-style: var(--amplify-components-checkbox-button-before-border-style);
1587
+ border-color: var(--amplify-components-checkbox-button-before-border-color);
917
1588
  }
918
- .amplify-alert[data-variation=error] {
919
- background-color: var(--amplify-components-alert-error-background-color);
1589
+ .amplify-checkbox__button[data-focus=true]::before {
1590
+ outline-color: var(--amplify-components-checkbox-button-focus-outline-color);
1591
+ outline-style: var(--amplify-components-checkbox-button-focus-outline-style);
1592
+ outline-width: var(--amplify-components-checkbox-button-focus-outline-width);
1593
+ outline-offset: var(--amplify-components-checkbox-button-focus-outline-offset);
1594
+ border-color: var(--amplify-components-checkbox-button-focus-border-color);
1595
+ box-shadow: var(--amplify-components-checkbox-button-focus-box-shadow);
920
1596
  }
921
- .amplify-alert[data-variation=warning] {
922
- background-color: var(--amplify-components-alert-warning-background-color);
1597
+ .amplify-checkbox__button[data-error=true]::before {
1598
+ border-color: var(--amplify-components-checkbox-button-error-border-color);
923
1599
  }
924
- .amplify-alert[data-variation=success] {
925
- background-color: var(--amplify-components-alert-success-background-color);
1600
+ .amplify-checkbox__button[data-error=true][data-focus=true]::before {
1601
+ border-color: var(--amplify-components-checkbox-button-error-focus-border-color);
1602
+ box-shadow: var(--amplify-components-checkbox-button-error-focus-box-shadow);
1603
+ }
1604
+ .amplify-checkbox__button[data-disabled=true]::before {
1605
+ border-color: var(--amplify-components-checkbox-button-disabled-border-color);
926
1606
  }
927
1607
 
928
- .amplify-alert-heading {
929
- color: inherit;
1608
+ .amplify-checkbox__icon {
1609
+ background-color: var(--amplify-components-checkbox-icon-background-color);
1610
+ opacity: var(--amplify-components-checkbox-icon-opacity);
1611
+ transform: var(--amplify-components-checkbox-icon-transform);
1612
+ border-radius: var(--amplify-components-checkbox-icon-border-radius);
1613
+ transition-property: var(--amplify-components-checkbox-icon-transition-property);
1614
+ transition-duration: var(--amplify-components-checkbox-icon-transition-duration);
1615
+ transition-timing-function: var(--amplify-components-checkbox-icon-transition-timing-function);
1616
+ }
1617
+ .amplify-checkbox__icon[data-checked=true] {
1618
+ opacity: var(--amplify-components-checkbox-icon-checked-opacity);
1619
+ transform: var(--amplify-components-checkbox-icon-checked-transform);
1620
+ }
1621
+ .amplify-checkbox__icon[data-checked=true][data-disabled=true] {
1622
+ background-color: var(--amplify-components-checkbox-icon-checked-disabled-background-color);
930
1623
  }
931
1624
 
932
- .amplify-card {
933
- background-color: var(--amplify-components-card-background-color);
934
- border-radius: var(--ammplify-components-card-border-radius);
935
- border: var(--amplify-components-card-border);
936
- box-shadow: var(--amplify-components-card-box-shadow);
937
- display: inline-block;
938
- padding: var(--amplify-components-card-padding);
1625
+ .amplify-checkbox__label[data-disabled=true] {
1626
+ color: var(--amplify-components-checkbox-label-disabled-color);
1627
+ }
1628
+
1629
+ .amplify-checkboxfield {
1630
+ align-content: var(--amplify-components-checkboxfield-align-content);
1631
+ align-items: var(--amplify-components-checkboxfield-align-items);
1632
+ flex-direction: var(--amplify-components-checkboxfield-flex-direction);
1633
+ justify-content: var(--amplify-components-checkboxfield-justify-content);
939
1634
  }
940
1635
 
941
1636
  .amplify-divider {
@@ -958,7 +1653,6 @@ h6.amplify-heading {
958
1653
  border-bottom-width: var(--amplify-components-divider-large-border-width);
959
1654
  }
960
1655
  .amplify-divider[aria-orientation=vertical] {
961
- height: 100%;
962
1656
  border-left-width: var(--amplify-components-divider-border-width);
963
1657
  }
964
1658
  .amplify-divider[aria-orientation=vertical][data-size=small] {
@@ -968,8 +1662,142 @@ h6.amplify-heading {
968
1662
  border-left-width: var(--amplify-components-divider-large-border-width);
969
1663
  }
970
1664
 
971
- .amplify-select, .amplify-input {
1665
+ .amplify-expander {
1666
+ display: block;
1667
+ background-color: var(--amplify-components-expander-background-color);
1668
+ border-radius: var(--amplify-components-expander-border-radius);
1669
+ box-shadow: var(--amplify-components-expander-box-shadow);
1670
+ width: var(--amplify-components-expander-width);
1671
+ }
1672
+
1673
+ .amplify-expander__item {
1674
+ display: block;
1675
+ overflow: hidden;
1676
+ box-shadow: var(--amplify-components-expander-item-box-shadow);
1677
+ }
1678
+ .amplify-expander__item:first-of-type {
1679
+ border-start-start-radius: var(--amplify-components-expander-item-border-start-start-radius);
1680
+ border-start-end-radius: var(--amplify-components-expander-item-border-start-end-radius);
1681
+ }
1682
+ @supports not (border-start-start-radius: var(--amplify-components-expander-item-border-start-start-radius)) {
1683
+ .amplify-expander__item:first-of-type {
1684
+ border-top-left-radius: var(--amplify-components-expander-item-border-top-left-radius);
1685
+ border-top-right-radius: var(--amplify-components-expander-item-border-top-right-radius);
1686
+ }
1687
+ }
1688
+ .amplify-expander__item:last-of-type {
1689
+ box-shadow: none;
1690
+ border-end-start-radius: var(--amplify-components-expander-item-border-end-start-radius);
1691
+ border-end-end-radius: var(--amplify-components-expander-item-border-end-end-radius);
1692
+ }
1693
+ @supports not (border-end-start-radius: var(--amplify-components-expander-item-border-end-start-radius)) {
1694
+ .amplify-expander__item:last-of-type {
1695
+ border-bottom-left-radius: var(--amplify-components-expander-item-border-bottom-left-radius);
1696
+ border-bottom-right-radius: var(--amplify-components-expander-item-border-bottom-right-radius);
1697
+ }
1698
+ }
1699
+ .amplify-expander__item:focus-within {
1700
+ box-shadow: var(--amplify-components-expander-item-focus-box-shadow);
1701
+ }
1702
+
1703
+ .amplify-expander__header {
1704
+ display: flex;
1705
+ box-shadow: var(--amplify-components-expander-header-box-shadow);
1706
+ }
1707
+
1708
+ .amplify-expander__trigger {
1709
+ flex: 1;
1710
+ display: flex;
1711
+ min-height: var(--amplify-components-expander-trigger-min-height);
1712
+ -webkit-padding-start: var(--amplify-components-expander-trigger-padding-inline-start);
1713
+ padding-inline-start: var(--amplify-components-expander-trigger-padding-inline-start);
1714
+ -webkit-padding-end: var(--amplify-components-expander-trigger-padding-inline-end);
1715
+ padding-inline-end: var(--amplify-components-expander-trigger-padding-inline-end);
1716
+ align-items: var(--amplify-components-expander-trigger-align-items);
1717
+ justify-content: var(--amplify-components-expander-trigger-justify-content);
1718
+ }
1719
+ .amplify-expander__trigger:hover {
1720
+ background-color: var(--amplify-components-expander-trigger-hover-background-color);
1721
+ }
1722
+
1723
+ .amplify-expander__content {
1724
+ display: block;
1725
+ -webkit-padding-start: var(--amplify-components-expander-content-padding-inline-start);
1726
+ padding-inline-start: var(--amplify-components-expander-content-padding-inline-start);
1727
+ -webkit-padding-end: var(--amplify-components-expander-content-padding-inline-end);
1728
+ padding-inline-end: var(--amplify-components-expander-content-padding-inline-end);
1729
+ }
1730
+ .amplify-expander__content[data-state=open] {
1731
+ -webkit-animation-name: amplify-expander-slide-down;
1732
+ animation-name: amplify-expander-slide-down;
1733
+ -webkit-animation-duration: var(--amplify-components-expander-content-open-animation-duration);
1734
+ animation-duration: var(--amplify-components-expander-content-open-animation-duration);
1735
+ -webkit-animation-timing-function: var(--amplify-components-expander-content-open-animation-timing-function);
1736
+ animation-timing-function: var(--amplify-components-expander-content-open-animation-timing-function);
1737
+ }
1738
+ .amplify-expander__content[data-state=closed] {
1739
+ -webkit-animation-name: amplify-expander-slide-up;
1740
+ animation-name: amplify-expander-slide-up;
1741
+ -webkit-animation-duration: var(--amplify-components-expander-content-closed-animation-duration);
1742
+ animation-duration: var(--amplify-components-expander-content-closed-animation-duration);
1743
+ -webkit-animation-timing-function: var(--amplify-components-expander-content-closed-animation-timing-function);
1744
+ animation-timing-function: var(--amplify-components-expander-content-closed-animation-timing-function);
1745
+ }
1746
+
1747
+ .amplify-expander__content__text {
1748
+ display: block;
1749
+ color: var(--amplify-components-expander-content-text-color);
1750
+ -webkit-padding-before: var(--amplify-components-expander-content-text-padding-block-start);
1751
+ padding-block-start: var(--amplify-components-expander-content-text-padding-block-start);
1752
+ -webkit-padding-after: var(--amplify-components-expander-content-text-padding-block-end);
1753
+ padding-block-end: var(--amplify-components-expander-content-text-padding-block-end);
1754
+ }
1755
+
1756
+ .amplify-expander__icon {
1757
+ transition-property: transform;
1758
+ transition-duration: var(--amplify-components-expander-icon-transition-duration);
1759
+ transition-timing-function: var(--amplify-components-expander-icon-transition-timing-function);
1760
+ }
1761
+ [data-state=open] .amplify-expander__icon {
1762
+ transform: rotate(180deg);
1763
+ }
1764
+
1765
+ @-webkit-keyframes amplify-expander-slide-down {
1766
+ from {
1767
+ height: 0;
1768
+ }
1769
+ to {
1770
+ height: auto;
1771
+ }
1772
+ }
1773
+
1774
+ @keyframes amplify-expander-slide-down {
1775
+ from {
1776
+ height: 0;
1777
+ }
1778
+ to {
1779
+ height: auto;
1780
+ }
1781
+ }
1782
+ @-webkit-keyframes amplify-expander-slide-up {
1783
+ from {
1784
+ height: auto;
1785
+ }
1786
+ to {
1787
+ height: 0;
1788
+ }
1789
+ }
1790
+ @keyframes amplify-expander-slide-up {
1791
+ from {
1792
+ height: auto;
1793
+ }
1794
+ to {
1795
+ height: 0;
1796
+ }
1797
+ }
1798
+ .amplify-select, .amplify-input, .amplify-textarea {
972
1799
  box-sizing: border-box;
1800
+ color: var(--amplify-components-fieldcontrol-color);
973
1801
  font-size: var(--amplify-components-fieldcontrol-font-size);
974
1802
  line-height: var(--amplify-components-fieldcontrol-line-height);
975
1803
  -webkit-padding-before: var(--amplify-components-fieldcontrol-padding-block-start);
@@ -991,13 +1819,12 @@ h6.amplify-heading {
991
1819
  outline-width: var(--amplify-components-fieldcontrol-outline-width);
992
1820
  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
993
1821
  }
994
- .amplify-select:focus, .amplify-input:focus {
1822
+ .amplify-select:focus, .amplify-input:focus, .amplify-textarea:focus {
995
1823
  border-color: var(--amplify-components-fieldcontrol-focus-border-color);
996
1824
  box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
997
1825
  }
998
- [data-size=small].amplify-select, [data-size=small].amplify-input {
1826
+ [data-size=small].amplify-select, [data-size=small].amplify-input, [data-size=small].amplify-textarea {
999
1827
  font-size: var(--amplify-components-fieldcontrol-small-font-size);
1000
- line-height: var(--amplify-components-fieldcontrol-small-line-height);
1001
1828
  -webkit-padding-before: var(--amplify-components-fieldcontrol-small-padding-block-start);
1002
1829
  padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
1003
1830
  -webkit-padding-after: var(--amplify-components-fieldcontrol-small-padding-block-end);
@@ -1007,9 +1834,8 @@ h6.amplify-heading {
1007
1834
  -webkit-padding-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
1008
1835
  padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
1009
1836
  }
1010
- [data-size=large].amplify-select, [data-size=large].amplify-input {
1837
+ [data-size=large].amplify-select, [data-size=large].amplify-input, [data-size=large].amplify-textarea {
1011
1838
  font-size: var(--amplify-components-fieldcontrol-large-font-size);
1012
- line-height: var(--amplify-components-fieldcontrol-large-line-height);
1013
1839
  -webkit-padding-before: var(--amplify-components-fieldcontrol-large-padding-block-start);
1014
1840
  padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
1015
1841
  -webkit-padding-after: var(--amplify-components-fieldcontrol-large-padding-block-end);
@@ -1019,19 +1845,20 @@ h6.amplify-heading {
1019
1845
  -webkit-padding-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
1020
1846
  padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
1021
1847
  }
1022
- [aria-invalid=true].amplify-select, [aria-invalid=true].amplify-input {
1848
+ [aria-invalid=true].amplify-select, [aria-invalid=true].amplify-input, [aria-invalid=true].amplify-textarea {
1023
1849
  border-color: var(--amplify-components-fieldcontrol-error-border-color);
1024
1850
  }
1025
- [aria-invalid=true].amplify-select:focus, [aria-invalid=true].amplify-input:focus {
1851
+ [aria-invalid=true].amplify-select:focus, [aria-invalid=true].amplify-input:focus, [aria-invalid=true].amplify-textarea:focus {
1026
1852
  border-color: var(--amplify-components-fieldcontrol-error-border-color);
1027
1853
  box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
1028
1854
  }
1029
- [disabled].amplify-select, [disabled].amplify-input {
1855
+ [disabled].amplify-select, [disabled].amplify-input, [disabled].amplify-textarea {
1856
+ color: var(--amplify-components-fieldcontrol-disabled-color);
1030
1857
  cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
1031
1858
  border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
1032
1859
  background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
1033
1860
  }
1034
- [data-variation=quiet].amplify-select, [data-variation=quiet].amplify-input {
1861
+ [data-variation=quiet].amplify-select, [data-variation=quiet].amplify-input, [data-variation=quiet].amplify-textarea {
1035
1862
  -webkit-border-before: var(--amplify-components-fieldcontrol-quiet-border-block-start);
1036
1863
  border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
1037
1864
  -webkit-border-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
@@ -1040,14 +1867,14 @@ h6.amplify-heading {
1040
1867
  border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
1041
1868
  border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius);
1042
1869
  }
1043
- [data-variation=quiet].amplify-select:focus, [data-variation=quiet].amplify-input:focus {
1870
+ [data-variation=quiet].amplify-select:focus, [data-variation=quiet].amplify-input:focus, [data-variation=quiet].amplify-textarea:focus {
1044
1871
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-focus-border-block-end-color);
1045
1872
  box-shadow: var(--amplify-components-fieldcontrol-quiet-focus-box-shadow);
1046
1873
  }
1047
- [data-variation=quiet][aria-invalid=true].amplify-select, [data-variation=quiet][aria-invalid=true].amplify-input {
1874
+ [data-variation=quiet][aria-invalid=true].amplify-select, [data-variation=quiet][aria-invalid=true].amplify-input, [data-variation=quiet][aria-invalid=true].amplify-textarea {
1048
1875
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
1049
1876
  }
1050
- [data-variation=quiet][aria-invalid=true].amplify-select:focus, [data-variation=quiet][aria-invalid=true].amplify-input:focus {
1877
+ [data-variation=quiet][aria-invalid=true].amplify-select:focus, [data-variation=quiet][aria-invalid=true].amplify-input:focus, [data-variation=quiet][aria-invalid=true].amplify-textarea:focus {
1051
1878
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
1052
1879
  }
1053
1880
 
@@ -1063,17 +1890,17 @@ h6.amplify-heading {
1063
1890
  font-size: var(--amplify-components-field-large-font-size);
1064
1891
  gap: var(--amplify-components-field-large-gap);
1065
1892
  }
1066
- .amplify-field .amplify-field__description,
1067
- .amplify-field .amplify-field__error-message {
1068
- margin: 0;
1893
+
1894
+ .amplify-label {
1895
+ color: var(--amplify-components-field-label-color);
1069
1896
  }
1070
1897
 
1071
- .amplify-field-group__outer-end .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control, .amplify-field-group__outer-start .amplify-select__wrapper:not(:first-child) .amplify-select, .amplify-field-group__outer-start .amplify-field-group__control:not(:first-child), .amplify-field-group :not(:first-child) .amplify-input {
1898
+ .amplify-field-group__outer-end .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control, .amplify-field-group__outer-start .amplify-select__wrapper:not(:first-child) .amplify-select:not(:first-child), .amplify-field-group__outer-start .amplify-field-group__control:not(:first-child), .amplify-field-group :not(:first-child) .amplify-input {
1072
1899
  border-start-start-radius: 0;
1073
1900
  border-end-start-radius: 0;
1074
1901
  }
1075
1902
  @supports not (border-start-start-radius: 0) {
1076
- .amplify-field-group__outer-end .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control, .amplify-field-group__outer-start .amplify-select__wrapper:not(:first-child) .amplify-select, .amplify-field-group__outer-start .amplify-field-group__control:not(:first-child), .amplify-field-group :not(:first-child) .amplify-input {
1903
+ .amplify-field-group__outer-end .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control, .amplify-field-group__outer-start .amplify-select__wrapper:not(:first-child) .amplify-select:not(:first-child), .amplify-field-group__outer-start .amplify-field-group__control:not(:first-child), .amplify-field-group :not(:first-child) .amplify-input {
1077
1904
  border-top-left-radius: 0;
1078
1905
  border-bottom-left-radius: 0;
1079
1906
  }
@@ -1093,9 +1920,17 @@ h6.amplify-heading {
1093
1920
  .amplify-field-group {
1094
1921
  gap: var(--amplify-components-fieldgroup-gap);
1095
1922
  }
1923
+ .amplify-field-group[data-orientation=horizontal] {
1924
+ flex-direction: row;
1925
+ }
1926
+ .amplify-field-group[data-orientation=vertical] {
1927
+ flex-direction: column;
1928
+ align-items: var(--amplify-components-fieldgroup-vertical-align-items);
1929
+ }
1096
1930
  .amplify-field-group__outer-start,
1097
1931
  .amplify-field-group__outer-end {
1098
1932
  display: flex;
1933
+ align-items: var(--amplify-components-fieldgroup-outer-align-items);
1099
1934
  }
1100
1935
  .amplify-field-group__outer-start .amplify-field-group__control,
1101
1936
  .amplify-field-group__outer-end .amplify-field-group__control {
@@ -1112,6 +1947,11 @@ h6.amplify-heading {
1112
1947
  position: relative;
1113
1948
  width: 100%;
1114
1949
  }
1950
+ .amplify-field-group__field-wrapper[data-orientation=vertical] {
1951
+ width: -webkit-fit-content;
1952
+ width: -moz-fit-content;
1953
+ width: fit-content;
1954
+ }
1115
1955
 
1116
1956
  .amplify-field-group__inner-end,
1117
1957
  .amplify-field-group__inner-start {
@@ -1169,7 +2009,57 @@ html[dir=rtl] .amplify-field-group__inner-start {
1169
2009
  height: 100%;
1170
2010
  }
1171
2011
 
1172
- .amplify-pagination .amplify-button[data-variation=link], .amplify-pagination .current {
2012
+ .amplify-menu-trigger {
2013
+ display: flex;
2014
+ justify-content: center;
2015
+ align-items: center;
2016
+ }
2017
+
2018
+ .amplify-menu-content {
2019
+ background-color: var(--amplify-components-menu-background-color);
2020
+ border-radius: var(--amplify-components-menu-border-radius);
2021
+ box-shadow: var(--amplify-components-menu-box-shadow);
2022
+ flex-direction: var(--amplify-components-menu-flex-direction);
2023
+ gap: var(--amplify-components-menu-gap);
2024
+ min-width: var(--amplify-components-menu-min-width);
2025
+ max-width: var(--amplify-components-menu-max-width);
2026
+ }
2027
+
2028
+ .amplify-menu-content__item {
2029
+ min-height: var(--amplify-components-menu-item-min-width);
2030
+ -webkit-padding-start: var(--amplify-components-menu-item-padding-inline-start);
2031
+ padding-inline-start: var(--amplify-components-menu-item-padding-inline-start);
2032
+ -webkit-padding-end: var(--amplify-components-menu-item-padding-inline-end);
2033
+ padding-inline-end: var(--amplify-components-menu-item-padding-inline-end);
2034
+ }
2035
+
2036
+ .amplify-menu-content__item:not(:first-child):not(:last-child) {
2037
+ border-radius: 0;
2038
+ }
2039
+
2040
+ .amplify-menu-content__item:first-child {
2041
+ border-end-end-radius: 0;
2042
+ border-end-start-radius: 0;
2043
+ }
2044
+ @supports not (border-end-end-radius: 0) {
2045
+ .amplify-menu-content__item:first-child {
2046
+ border-bottom-right-radius: 0;
2047
+ border-bottom-left-radius: 0;
2048
+ }
2049
+ }
2050
+
2051
+ .amplify-menu-content__item:last-child {
2052
+ border-start-end-radius: 0;
2053
+ border-start-start-radius: 0;
2054
+ }
2055
+ @supports not (border-end-end-radius: 0) {
2056
+ .amplify-menu-content__item:last-child {
2057
+ border-top-right-radius: 0;
2058
+ border-top-left-radius: 0;
2059
+ }
2060
+ }
2061
+
2062
+ .amplify-pagination__item-current, .amplify-pagination__item-button[data-variation=link] {
1173
2063
  height: var(--amplify-components-pagination-item-shared-height);
1174
2064
  min-width: var(--amplify-components-pagination-item-shared-min-width);
1175
2065
  border-radius: var(--amplify-components-pagination-item-shared-border-radius);
@@ -1182,37 +2072,51 @@ html[dir=rtl] .amplify-field-group__inner-start {
1182
2072
  margin-left: var(--amplify-components-pagination-item-container-margin-left);
1183
2073
  margin-right: var(--amplify-components-pagination-item-container-margin-right);
1184
2074
  }
1185
- .amplify-pagination .current {
1186
- color: var(--amplify-components-pagination-current-color);
1187
- font-size: var(--amplify-components-pagination-current-font-size);
1188
- background-color: var(--amplify-components-pagination-current-background-color);
1189
- }
1190
- .amplify-pagination .ellipsis {
1191
- padding-left: var(--amplify-components-pagination-ellipsis-padding-left);
1192
- padding-right: var(--amplify-components-pagination-ellipsis-padding-right);
1193
- }
1194
- .amplify-pagination .amplify-button[data-variation=link] {
2075
+
2076
+ .amplify-pagination__item-button[data-variation=link] {
1195
2077
  display: flex;
1196
2078
  align-items: center;
1197
2079
  justify-content: center;
2080
+ font-weight: initial;
1198
2081
  color: var(--amplify-components-pagination-button-color);
1199
- font-weight: var(--amplify-components-pagination-button-font-weight);
1200
- padding-top: var(--amplify-components-pagination-button-padding-top);
1201
- padding-right: var(--amplify-components-pagination-button-padding-right);
1202
- padding-bottom: var(--amplify-components-pagination-button-padding-bottom);
1203
- padding-left: var(--amplify-components-pagination-button-padding-left);
1204
- transition: var(--amplify-components-pagination-button-transition);
1205
- }
1206
- .amplify-pagination .amplify-button[data-variation=link]:hover {
2082
+ -webkit-padding-start: var(--amplify-components-pagination-button-padding-inline-start);
2083
+ padding-inline-start: var(--amplify-components-pagination-button-padding-inline-start);
2084
+ -webkit-padding-end: var(--amplify-components-pagination-button-padding-inline-end);
2085
+ padding-inline-end: var(--amplify-components-pagination-button-padding-inline-end);
2086
+ transition-property: var(--amplify-components-pagination-button-transition-property);
2087
+ transition-duration: var(--amplify-components-pagination-button-transition-duration);
2088
+ }
2089
+ .amplify-pagination__item-button[data-variation=link]:hover {
1207
2090
  text-decoration: none;
2091
+ color: var(--amplify-components-pagination-button-hover-color);
1208
2092
  background-color: var(--amplify-components-pagination-button-hover-background-color);
1209
2093
  }
1210
- .amplify-pagination .amplify-button[data-variation=link][disabled] {
1211
- opacity: var(--amplify-components-pagination-button-disabled-opacity);
1212
- cursor: default;
2094
+ .amplify-pagination__item-button[data-variation=link][disabled] {
2095
+ color: var(--amplify-components-pagination-button-disabled-color);
1213
2096
  pointer-events: none;
1214
2097
  }
1215
2098
 
2099
+ .amplify-pagination__item-current {
2100
+ align-items: var(--amplify-components-pagination-current-align-items);
2101
+ justify-content: var(--amplify-components-pagination-current-justify-content);
2102
+ color: var(--amplify-components-pagination-current-color);
2103
+ font-size: var(--amplify-components-pagination-current-font-size);
2104
+ background-color: var(--amplify-components-pagination-current-background-color);
2105
+ }
2106
+
2107
+ .amplify-pagination__item-ellipsis {
2108
+ align-items: var(--amplify-components-pagination-ellipsis-align-items);
2109
+ justify-content: var(--amplify-components-pagination-ellipsis-justify-content);
2110
+ -webkit-padding-start: var(--amplify-components-pagination-ellipsis-padding-inline-start);
2111
+ padding-inline-start: var(--amplify-components-pagination-ellipsis-padding-inline-start);
2112
+ -webkit-padding-end: var(--amplify-components-pagination-ellipsis-padding-inline-end);
2113
+ padding-inline-end: var(--amplify-components-pagination-ellipsis-padding-inline-end);
2114
+ }
2115
+
2116
+ .amplify-phonenumberfield select:not(:focus) {
2117
+ border-right: none;
2118
+ }
2119
+
1216
2120
  .amplify-rating {
1217
2121
  display: inline-flex;
1218
2122
  position: relative;
@@ -1274,11 +2178,16 @@ html[dir=rtl] .amplify-field-group__inner-start {
1274
2178
  gap: inherit;
1275
2179
  }
1276
2180
 
2181
+ .amplify-radio[data-disabled=true] {
2182
+ cursor: var(--amplify-components-radio-disabled-cursor);
2183
+ }
2184
+
1277
2185
  .amplify-radio__button {
1278
2186
  align-items: var(--amplify-components-radio-button-align-items);
1279
2187
  justify-content: var(--amplify-components-radio-button-justify-content);
1280
2188
  width: var(--amplify-components-radio-button-width);
1281
2189
  height: var(--amplify-components-radio-button-height);
2190
+ padding: var(--amplify-components-radio-button-padding);
1282
2191
  box-sizing: var(--amplify-components-radio-button-box-sizing);
1283
2192
  border-width: var(--amplify-components-radio-button-border-width);
1284
2193
  border-style: var(--amplify-components-radio-button-border-style);
@@ -1294,12 +2203,13 @@ html[dir=rtl] .amplify-field-group__inner-start {
1294
2203
  outline-offset: var(--amplify-components-radio-button-outline-offset);
1295
2204
  }
1296
2205
  .amplify-radio__button::before {
1297
- content: var(--amplify-components-radio-button-before-content);
1298
- display: var(--amplify-components-radio-button-before-display);
1299
- width: var(--amplify-components-radio-button-before-width);
1300
- height: var(--amplify-components-radio-button-before-height);
2206
+ content: "";
2207
+ display: inline-block;
2208
+ width: 100%;
2209
+ height: 100%;
1301
2210
  border-radius: var(--amplify-components-radio-button-before-border-radius);
1302
- background-color: var(--amplify-components-radio-button-before-background-color);
2211
+ background-color: currentColor;
2212
+ border-radius: 50%;
1303
2213
  }
1304
2214
  .amplify-radio__button[data-size=small] {
1305
2215
  width: var(--amplify-components-radio-button-small-width);
@@ -1323,6 +2233,14 @@ html[dir=rtl] .amplify-field-group__inner-start {
1323
2233
  box-shadow: var(--amplify-components-radio-button-focus-box-shadow);
1324
2234
  }
1325
2235
 
2236
+ .amplify-radio__input[aria-invalid=true] + .amplify-radio__button {
2237
+ border-color: var(--amplify-components-radio-button-error-border-color);
2238
+ }
2239
+
2240
+ .amplify-radio__input[aria-invalid=true]:focus + .amplify-radio__button {
2241
+ box-shadow: var(--amplify-components-radio-button-error-focus-box-shadow);
2242
+ }
2243
+
1326
2244
  .amplify-radio__input:disabled + .amplify-radio__button {
1327
2245
  border-color: var(--amplify-components-radio-button-disabled-border-color);
1328
2246
  background-color: var(--amplify-components-radio-button-disabled-background-color);
@@ -1337,6 +2255,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
1337
2255
  flex-direction: inherit;
1338
2256
  }
1339
2257
 
2258
+ .amplify-radiogroupfield {
2259
+ flex-direction: column;
2260
+ }
2261
+
1340
2262
  .amplify-select__wrapper {
1341
2263
  display: var(--amplify-components-select-wrapper-display);
1342
2264
  position: var(--amplify-components-select-wrapper-position);
@@ -1344,16 +2266,184 @@ html[dir=rtl] .amplify-field-group__inner-start {
1344
2266
  }
1345
2267
 
1346
2268
  .amplify-select__icon-wrapper {
2269
+ align-items: var(--amplify-components-select-icon-wrapper-align-items);
1347
2270
  position: var(--amplify-components-select-icon-wrapper-position);
1348
- height: var(--amplify-components-select-icon-wrapper-height);
1349
2271
  top: var(--amplify-components-select-icon-wrapper-top);
1350
2272
  right: var(--amplify-components-select-icon-wrapper-right);
2273
+ transform: var(--amplify-components-select-icon-wrapper-transform);
1351
2274
  pointer-events: var(--amplify-components-select-icon-wrapper-pointer-events);
1352
2275
  }
1353
2276
 
1354
2277
  .amplify-select {
1355
2278
  -webkit-padding-end: var(--amplify-components-select-padding-inline-end);
1356
2279
  padding-inline-end: var(--amplify-components-select-padding-inline-end);
2280
+ min-width: var(--amplify-components-select-min-width);
2281
+ white-space: var(--amplify-components-select-white-space);
2282
+ }
2283
+ .amplify-select[data-size=small] {
2284
+ min-width: var(--amplify-components-select-small-min-width);
2285
+ }
2286
+ .amplify-select[data-size=large] {
2287
+ min-width: var(--amplify-components-select-large-min-width);
2288
+ }
2289
+
2290
+ .amplify-selectfield {
2291
+ flex-direction: var(--amplify-components-selectfield-flex-direction);
2292
+ }
2293
+
2294
+ .amplify-sliderfield {
2295
+ flex-direction: column;
2296
+ }
2297
+
2298
+ .amplify-sliderfield__label {
2299
+ display: flex;
2300
+ justify-content: space-between;
2301
+ }
2302
+
2303
+ .amplify-sliderfield__root {
2304
+ position: relative;
2305
+ display: flex;
2306
+ align-items: center;
2307
+ -webkit-user-select: none;
2308
+ -moz-user-select: none;
2309
+ -ms-user-select: none;
2310
+ user-select: none;
2311
+ touch-action: none;
2312
+ box-sizing: content-box;
2313
+ padding-block: var(--amplify-components-sliderfield-padding-block);
2314
+ }
2315
+ .amplify-sliderfield__root[data-disabled] {
2316
+ cursor: not-allowed;
2317
+ }
2318
+ .amplify-sliderfield__root[data-orientation=horizontal] {
2319
+ height: var(--amplify-components-sliderfield-thumb-height);
2320
+ }
2321
+ .amplify-sliderfield__root[data-orientation=vertical] {
2322
+ flex-direction: column;
2323
+ width: var(--amplify-components-sliderfield-thumb-width);
2324
+ }
2325
+ [data-size=large] .amplify-sliderfield__root[data-orientation=horizontal] {
2326
+ height: var(--amplify-components-sliderfield-large-thumb-height);
2327
+ }
2328
+ [data-size=large] .amplify-sliderfield__root[data-orientation=vertical] {
2329
+ width: var(--amplify-components-sliderfield-large-thumb-height);
2330
+ }
2331
+ [data-size=small] .amplify-sliderfield__root[data-orientation=horizontal] {
2332
+ height: var(--amplify-components-sliderfield-small-thumb-height);
2333
+ }
2334
+ [data-size=small] .amplify-sliderfield__root[data-orientation=vertical] {
2335
+ width: var(--amplify-components-sliderfield-small-thumb-height);
2336
+ }
2337
+
2338
+ .amplify-sliderfield__track {
2339
+ position: relative;
2340
+ flex-grow: 1;
2341
+ border-radius: var(--amplify-components-sliderfield-track-border-radius);
2342
+ background-color: var(--amplify-components-sliderfield-track-background-color);
2343
+ }
2344
+ .amplify-sliderfield__track[data-orientation=horizontal] {
2345
+ height: var(--amplify-components-sliderfield-track-height);
2346
+ min-width: var(--amplify-components-sliderfield-track-min-width);
2347
+ }
2348
+ .amplify-sliderfield__track[data-orientation=vertical] {
2349
+ width: var(--amplify-components-sliderfield-track-height);
2350
+ min-height: var(--amplify-components-sliderfield-track-min-width);
2351
+ }
2352
+ [data-size=large] .amplify-sliderfield__track[data-orientation=vertical] {
2353
+ width: var(--amplify-components-sliderfield-large-track-height);
2354
+ }
2355
+ [data-size=large] .amplify-sliderfield__track[data-orientation=horizontal] {
2356
+ height: var(--amplify-components-sliderfield-large-track-height);
2357
+ }
2358
+ [data-size=small] .amplify-sliderfield__track[data-orientation=vertical] {
2359
+ width: var(--amplify-components-sliderfield-small-track-height);
2360
+ }
2361
+ [data-size=small] .amplify-sliderfield__track[data-orientation=horizontal] {
2362
+ height: var(--amplify-components-sliderfield-small-track-height);
2363
+ }
2364
+
2365
+ .amplify-sliderfield__range {
2366
+ position: absolute;
2367
+ border-radius: var(--amplify-components-sliderfield-range-border-radius);
2368
+ background-color: var(--amplify-components-sliderfield-range-background-color);
2369
+ }
2370
+ .amplify-sliderfield__range[data-disabled] {
2371
+ background-color: var(--amplify-components-sliderfield-range-disabled-background-color);
2372
+ }
2373
+ .amplify-sliderfield__range[data-orientation=horizontal] {
2374
+ height: 100%;
2375
+ }
2376
+ .amplify-sliderfield__range[data-orientation=vertical] {
2377
+ width: 100%;
2378
+ }
2379
+
2380
+ .amplify-sliderfield__thumb {
2381
+ display: block;
2382
+ width: var(--amplify-components-sliderfield-thumb-width);
2383
+ height: var(--amplify-components-sliderfield-thumb-height);
2384
+ background-color: var(--amplify-components-sliderfield-thumb-background-color);
2385
+ box-shadow: var(--amplify-components-sliderfield-thumb-box-shadow);
2386
+ border-radius: var(--amplify-components-sliderfield-thumb-border-radius);
2387
+ border-width: var(--amplify-components-sliderfield-thumb-border-width);
2388
+ border-color: var(--amplify-components-sliderfield-thumb-border-color);
2389
+ border-style: var(--amplify-components-sliderfield-thumb-border-style);
2390
+ }
2391
+ .amplify-sliderfield__thumb:hover {
2392
+ background-color: var(--amplify-components-sliderfield-thumb-hover-background-color);
2393
+ border-color: var(--amplify-components-sliderfield-thumb-hover-border-color);
2394
+ }
2395
+ .amplify-sliderfield__thumb:focus {
2396
+ box-shadow: var(--amplify-components-sliderfield-thumb-focus-box-shadow);
2397
+ }
2398
+ .amplify-sliderfield__thumb[data-disabled] {
2399
+ background-color: var(--amplify-components-sliderfield-thumb-disabled-background-color);
2400
+ border-color: var(--amplify-components-sliderfield-thumb-disabled-border-color);
2401
+ box-shadow: var(--amplify-components-sliderfield-thumb-disabled-box-shadow);
2402
+ }
2403
+ [data-size=large] .amplify-sliderfield__thumb {
2404
+ width: var(--amplify-components-sliderfield-large-thumb-width);
2405
+ height: var(--amplify-components-sliderfield-large-thumb-height);
2406
+ }
2407
+ [data-size=small] .amplify-sliderfield__thumb {
2408
+ width: var(--amplify-components-sliderfield-small-thumb-width);
2409
+ height: var(--amplify-components-sliderfield-small-thumb-height);
2410
+ }
2411
+
2412
+ .amplify-stepperfield {
2413
+ flex-direction: var(--amplify-components-stepperfield-flex-direction);
2414
+ }
2415
+
2416
+ .amplify-stepperfield__button--decrease[data-invalid=true] {
2417
+ -webkit-border-end: none;
2418
+ border-inline-end: none;
2419
+ }
2420
+ [data-variation=quiet] .amplify-stepperfield__button--decrease {
2421
+ border-width: 0 0 var(--amplify-components-button-border-width) 0;
2422
+ border-radius: 0;
2423
+ }
2424
+
2425
+ .amplify-stepperfield__button--increase[data-invalid=true] {
2426
+ -webkit-border-start: none;
2427
+ border-inline-start: none;
2428
+ }
2429
+ [data-variation=quiet] .amplify-stepperfield__button--increase {
2430
+ border-width: 0 0 var(--amplify-components-button-border-width) 0;
2431
+ border-radius: 0;
2432
+ }
2433
+
2434
+ .amplify-stepperfield__input {
2435
+ -moz-appearance: textfield;
2436
+ text-align: var(--amplify-components-stepperfield-input-text-align);
2437
+ }
2438
+ .amplify-stepperfield__input::-webkit-outer-spin-button, .amplify-stepperfield__input::-webkit-inner-spin-button {
2439
+ -webkit-appearance: none;
2440
+ margin: 0;
2441
+ }
2442
+ .amplify-stepperfield__input:not(:focus, [aria-invalid=true]) {
2443
+ -webkit-border-start: none;
2444
+ border-inline-start: none;
2445
+ -webkit-border-end: none;
2446
+ border-inline-end: none;
1357
2447
  }
1358
2448
 
1359
2449
  .amplify-switchfield {
@@ -1392,10 +2482,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
1392
2482
  width: var(--amplify-components-switchfield-track-width);
1393
2483
  height: var(--amplify-components-switchfield-track-height);
1394
2484
  transition-duration: var(--amplify-components-switchfield-track-transition-duration);
1395
- background: var(--amplify-components-switchfield-track-background);
2485
+ background-color: var(--amplify-components-switchfield-track-background-color);
1396
2486
  }
1397
2487
  .amplify-switch-track[data-checked=true] {
1398
- background: var(--amplify-components-switchfield-track-checked-background);
2488
+ background-color: var(--amplify-components-switchfield-track-checked-background-color);
1399
2489
  }
1400
2490
  .amplify-switch-track[data-disabled=true] {
1401
2491
  opacity: var(--amplify-components-switchfield-disabled-opacity);
@@ -1406,7 +2496,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
1406
2496
  }
1407
2497
 
1408
2498
  .amplify-switch-thumb {
1409
- background: var(--amplify-components-switchfield-thumb-background);
2499
+ background-color: var(--amplify-components-switchfield-thumb-background-color);
1410
2500
  transition-duration: var(--amplify-components-switchfield-thumb-transition-duration);
1411
2501
  border-radius: var(--amplify-components-switchfield-thumb-border-radius);
1412
2502
  width: var(--amplify-components-switchfield-thumb-width);
@@ -1426,6 +2516,100 @@ html[dir=rtl] .amplify-field-group__inner-start {
1426
2516
  cursor: pointer;
1427
2517
  }
1428
2518
 
2519
+ .amplify-table {
2520
+ /**
2521
+ * Default Table primitive stylings
2522
+ */
2523
+ border-collapse: var(--amplify-components-table-border-collapse);
2524
+ display: var(--amplify-components-table-display);
2525
+ width: var(--amplify-components-table-width);
2526
+ /**
2527
+ * Data attribute stylings
2528
+ */
2529
+ }
2530
+ .amplify-table .amplify-table__caption {
2531
+ caption-side: var(--amplify-components-table-caption-caption-side);
2532
+ color: var(--amplify-components-table-caption-color);
2533
+ display: var(--amplify-components-table-caption-display);
2534
+ font-size: var(--amplify-components-table-caption-font-size);
2535
+ text-align: var(--amplify-components-table-caption-text-align);
2536
+ word-break: var(--amplify-components-table-caption-word-break);
2537
+ }
2538
+ .amplify-table .amplify-table__head {
2539
+ display: var(--amplify-components-table-head-display);
2540
+ vertical-align: var(--amplify-components-table-head-vertical-align);
2541
+ }
2542
+ .amplify-table .amplify-table__body {
2543
+ display: var(--amplify-components-table-body-display);
2544
+ vertical-align: var(--amplify-components-table-body-vertical-align);
2545
+ }
2546
+ .amplify-table .amplify-table__foot {
2547
+ display: var(--amplify-components-table-foot-display);
2548
+ vertical-align: var(--amplify-components-table-foot-vertical-align);
2549
+ }
2550
+ .amplify-table .amplify-table__row {
2551
+ display: var(--amplify-components-table-row-display);
2552
+ vertical-align: var(--amplify-components-table-row-vertical-align);
2553
+ }
2554
+ .amplify-table .amplify-table__th {
2555
+ border-color: var(--amplify-components-table-header-border-color);
2556
+ border-style: var(--amplify-components-table-header-border-style);
2557
+ border-width: var(--amplify-components-table-header-border-width);
2558
+ color: var(--amplify-components-table-header-color);
2559
+ display: var(--amplify-components-table-header-display);
2560
+ font-size: var(--amplify-components-table-header-font-size);
2561
+ font-weight: var(--amplify-components-table-header-font-weight);
2562
+ padding: var(--amplify-components-table-header-padding);
2563
+ vertical-align: var(--amplify-components-table-header-vertical-align);
2564
+ }
2565
+ .amplify-table .amplify-table__td {
2566
+ border-color: var(--amplify-components-table-data-border-color);
2567
+ border-style: var(--amplify-components-table-data-border-style);
2568
+ border-width: var(--amplify-components-table-data-border-width);
2569
+ color: var(--amplify-components-table-data-color);
2570
+ display: var(--amplify-components-table-data-display);
2571
+ font-size: var(--amplify-components-table-data-font-size);
2572
+ font-weight: var(--amplify-components-table-data-font-weight);
2573
+ padding: var(--amplify-components-table-data-padding);
2574
+ vertical-align: var(--amplify-components-table-data-vertical-align);
2575
+ }
2576
+ .amplify-table:not([data-variation=bordered]) .amplify-table__td:not(:first-child),
2577
+ .amplify-table:not([data-variation=bordered]) .amplify-table__th:not(:first-child) {
2578
+ border-left: none;
2579
+ }
2580
+ .amplify-table:not([data-variation=bordered]) .amplify-table__td:not(:last-child),
2581
+ .amplify-table:not([data-variation=bordered]) .amplify-table__th:not(:last-child) {
2582
+ border-right: none;
2583
+ }
2584
+ .amplify-table[data-variation=striped] .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
2585
+ background-color: var(--amplify-components-table-row-striped-background-color);
2586
+ }
2587
+ .amplify-table[data-highlightonhover=true] .amplify-table__row:not(.amplify-table__head *):hover {
2588
+ background-color: var(--amplify-components-table-row-hover-background-color);
2589
+ }
2590
+ .amplify-table[data-size=small] .amplify-table__caption {
2591
+ font-size: var(--amplify-components-table-caption-small-font-size);
2592
+ }
2593
+ .amplify-table[data-size=small] .amplify-table__th {
2594
+ font-size: var(--amplify-components-table-header-small-font-size);
2595
+ padding: var(--amplify-components-table-header-small-padding);
2596
+ }
2597
+ .amplify-table[data-size=small] .amplify-table__td {
2598
+ font-size: var(--amplify-components-table-data-small-font-size);
2599
+ padding: var(--amplify-components-table-data-small-padding);
2600
+ }
2601
+ .amplify-table[data-size=large] .amplify-table__caption {
2602
+ font-size: var(--amplify-components-table-caption-large-font-size);
2603
+ }
2604
+ .amplify-table[data-size=large] .amplify-table__th {
2605
+ font-size: var(--amplify-components-table-header-large-font-size);
2606
+ padding: var(--amplify-components-table-header-large-padding);
2607
+ }
2608
+ .amplify-table[data-size=large] .amplify-table__td {
2609
+ font-size: var(--amplify-components-table-data-large-font-size);
2610
+ padding: var(--amplify-components-table-data-large-padding);
2611
+ }
2612
+
1429
2613
  .amplify-tabs {
1430
2614
  background-color: var(--amplify-components-tabs-background-color);
1431
2615
  box-shadow: var(--amplify-components-tabs-box-shadow);
@@ -1443,7 +2627,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
1443
2627
  color: var(--amplify-components-tabs-item-color);
1444
2628
  font-size: var(--amplify-components-tabs-item-font-size);
1445
2629
  font-weight: var(--amplify-components-tabs-item-font-weight);
1446
- padding: var(--amplify-components-tabs-item-padding);
2630
+ padding: var(--amplify-components-tabs-item-padding-vertical) var(--amplify-components-tabs-item-padding-horizontal);
1447
2631
  text-align: var(--amplify-components-tabs-item-text-align);
1448
2632
  transition: all var(--amplify-components-tabs-item-transition-duration);
1449
2633
  border-width: 0 0 var(--amplify-components-tabs-item-border-width) 0;
@@ -1480,13 +2664,129 @@ html[dir=rtl] .amplify-field-group__inner-start {
1480
2664
  color: var(--amplify-components-tabs-item-disabled-color);
1481
2665
  cursor: not-allowed;
1482
2666
  }
1483
- .amplify-tabs-item[data-grow=equal] {
2667
+ .amplify-tabs-item[data-spacing=equal] {
1484
2668
  flex: 1 1 0;
1485
2669
  }
1486
- .amplify-tabs-item[data-grow=relative] {
2670
+ .amplify-tabs-item[data-spacing=relative] {
1487
2671
  flex-grow: 1;
1488
2672
  }
1489
2673
 
2674
+ .amplify-textfield {
2675
+ flex-direction: column;
2676
+ }
2677
+
2678
+ .amplify-togglebutton[data-variation=primary], .amplify-togglebutton:hover, .amplify-togglebutton {
2679
+ border-color: var(--amplify-components-togglebutton-border-color);
2680
+ color: var(--amplify-components-togglebutton-color);
2681
+ }
2682
+
2683
+ .amplify-togglebutton:hover {
2684
+ background-color: var(--amplify-components-togglebutton-hover-background-color);
2685
+ }
2686
+ .amplify-togglebutton:focus {
2687
+ border-color: var(--amplify-components-togglebutton-focus-border-color);
2688
+ color: var(--amplify-components-togglebutton-focus-color);
2689
+ }
2690
+ .amplify-togglebutton:active {
2691
+ background-color: var(--amplify-components-togglebutton-active-background-color);
2692
+ }
2693
+ .amplify-togglebutton:disabled {
2694
+ background-color: var(--amplify-components-togglebutton-disabled-background-color);
2695
+ border-color: var(--amplify-components-togglebutton-disabled-border-color);
2696
+ color: var(--amplify-components-togglebutton-disabled-color);
2697
+ }
2698
+ .amplify-togglebutton[aria-pressed=true] {
2699
+ background-color: var(--amplify-components-togglebutton-pressed-background-color);
2700
+ color: var(--amplify-components-togglebutton-pressed-color);
2701
+ }
2702
+ .amplify-togglebutton[aria-pressed=true]:hover:not(:disabled) {
2703
+ background-color: var(--amplify-components-togglebutton-pressed-hover-background-color);
2704
+ }
2705
+ .amplify-togglebutton[data-variation=primary] {
2706
+ background-color: var(--amplify-components-togglebutton-primary-background-color);
2707
+ border-width: var(--amplify-components-togglebutton-primary-border-width);
2708
+ }
2709
+ .amplify-togglebutton[data-variation=primary]:focus {
2710
+ background-color: var(--amplify-components-togglebutton-primary-focus-background-color);
2711
+ border-color: var(--amplify-components-togglebutton-primary-focus-border-color);
2712
+ color: var(--amplify-components-togglebutton-primary-focus-color);
2713
+ box-shadow: var(--amplify-components-togglebutton-primary-focus-box-shadow);
2714
+ }
2715
+ .amplify-togglebutton[data-variation=primary]:hover {
2716
+ background-color: var(--amplify-components-togglebutton-primary-hover-background-color);
2717
+ color: var(--amplify-components-togglebutton-primary-hover-color);
2718
+ }
2719
+ .amplify-togglebutton[data-variation=primary]:disabled {
2720
+ background-color: var(--amplify-components-togglebutton-primary-disabled-background-color);
2721
+ color: var(--amplify-components-togglebutton-primary-disabled-color);
2722
+ }
2723
+ .amplify-togglebutton[data-variation=primary][aria-pressed=true] {
2724
+ background-color: var(--amplify-components-togglebutton-primary-pressed-background-color);
2725
+ border-color: var(--amplify-components-togglebutton-primary-pressed-border-color);
2726
+ color: var(--amplify-components-togglebutton-primary-pressed-color);
2727
+ }
2728
+ .amplify-togglebutton[data-variation=primary][aria-pressed=true]:focus {
2729
+ border-color: var(--amplify-components-togglebutton-primary-pressed-focus-border-color);
2730
+ background-color: var(--amplify-components-togglebutton-primary-pressed-focus-background-color);
2731
+ }
2732
+ .amplify-togglebutton[data-variation=primary][aria-pressed=true]:hover:not(:disabled) {
2733
+ border-color: var(--amplify-components-togglebutton-primary-pressed-hover-border-color);
2734
+ background-color: var(--amplify-components-togglebutton-primary-pressed-hover-background-color);
2735
+ }
2736
+ .amplify-togglebutton[data-variation=link] {
2737
+ color: var(--amplify-components-togglebutton-link-color);
2738
+ }
2739
+ .amplify-togglebutton[data-variation=link]:hover {
2740
+ background-color: var(--amplify-components-togglebutton-link-hover-background-color);
2741
+ color: var(--amplify-components-togglebutton-link-hover-color);
2742
+ }
2743
+ .amplify-togglebutton[data-variation=link]:focus {
2744
+ background-color: var(--amplify-components-togglebutton-link-focus-background-color);
2745
+ color: var(--amplify-components-togglebutton-link-focus-color);
2746
+ }
2747
+ .amplify-togglebutton[data-variation=link]:disabled {
2748
+ color: var(--amplify-components-togglebutton-link-disabled-color);
2749
+ }
2750
+ .amplify-togglebutton[data-variation=link][aria-pressed=true] {
2751
+ background-color: var(--amplify-components-togglebutton-link-pressed-background-color);
2752
+ color: var(--amplify-components-togglebutton-link-pressed-color);
2753
+ }
2754
+ .amplify-togglebutton[data-variation=link][aria-pressed=true]:hover {
2755
+ background-color: var(--amplify-components-togglebutton-link-pressed-hover-background-color);
2756
+ }
2757
+
2758
+ .amplify-togglebuttongroup {
2759
+ align-items: var(--amplify-components-togglebuttongroup-align-items);
2760
+ align-content: var(--amplify-components-togglebuttongroup-align-content);
2761
+ justify-content: var(--amplify-components-togglebuttongroup-justify-content);
2762
+ gap: 0;
2763
+ }
2764
+
2765
+ .amplify-togglebuttongroup .amplify-togglebutton:not(:first-of-type) {
2766
+ border-start-start-radius: 0;
2767
+ border-end-start-radius: 0;
2768
+ }
2769
+ @supports not (border-start-start-radius: 0) {
2770
+ .amplify-togglebuttongroup .amplify-togglebutton:not(:first-of-type) {
2771
+ border-top-left-radius: 0;
2772
+ border-bottom-left-radius: 0;
2773
+ }
2774
+ }
2775
+ .amplify-togglebuttongroup .amplify-togglebutton:not(:first-of-type):not(:focus) {
2776
+ -webkit-border-start: 1px solid transparent;
2777
+ border-inline-start: 1px solid transparent;
2778
+ }
2779
+ .amplify-togglebuttongroup .amplify-togglebutton:not(:last-of-type) {
2780
+ border-start-end-radius: 0;
2781
+ border-end-end-radius: 0;
2782
+ }
2783
+ @supports not (border-end-end-radius: 0) {
2784
+ .amplify-togglebuttongroup .amplify-togglebutton:not(:last-of-type) {
2785
+ border-bottom-right-radius: 0;
2786
+ border-top-right-radius: 0;
2787
+ }
2788
+ }
2789
+
1490
2790
  .amplify-visually-hidden {
1491
2791
  position: absolute;
1492
2792
  width: 1px;