@aws-amplify/ui 3.0.1-next.5 → 3.0.3

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