@aws-amplify/ui 3.0.1-next.3 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/LICENSE +201 -0
  2. package/README.md +1 -2
  3. package/dist/esm/index.js +31 -12
  4. package/dist/esm/index.js.map +3 -3
  5. package/dist/index.d.ts +621 -8978
  6. package/dist/index.js +31 -12
  7. package/dist/index.js.map +3 -3
  8. package/dist/styles.css +1742 -360
  9. package/dist/theme.css +574 -261
  10. package/package.json +18 -8
package/dist/styles.css CHANGED
@@ -3,15 +3,15 @@
3
3
  */
4
4
  /**
5
5
  * Do not edit directly
6
- * Generated on Tue, 21 Sep 2021 20:42:13 GMT
6
+ * Generated on Mon, 22 Nov 2021 20:49:04 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,17 +77,69 @@
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-80);
117
+ --amplify-colors-font-error: var(--amplify-colors-red-80);
118
+ --amplify-colors-font-warning: var(--amplify-colors-orange-80);
119
+ --amplify-colors-font-info: var(--amplify-colors-blue-80);
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-60);
127
+ --amplify-colors-font-secondary: var(--amplify-colors-neutral-80);
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%);
@@ -145,148 +203,137 @@
145
203
  --amplify-colors-red-40: hsl(0, 75%, 75%);
146
204
  --amplify-colors-red-20: hsl(0, 75%, 85%);
147
205
  --amplify-colors-red-10: hsl(0, 75%, 95%);
148
- --amplify-breakpoints-default-breakpoint: base;
149
- --amplify-breakpoints-unit: em;
150
- --amplify-breakpoints-values-xxl: 96;
151
- --amplify-breakpoints-values-xl: 80;
152
- --amplify-breakpoints-values-large: 62;
153
- --amplify-breakpoints-values-medium: 48;
154
- --amplify-breakpoints-values-small: 30;
155
- --amplify-breakpoints-values-base: 0;
156
206
  --amplify-border-widths-large: 3px;
157
207
  --amplify-border-widths-medium: 2px;
158
208
  --amplify-border-widths-small: 1px;
209
+ --amplify-components-togglebuttongroup-justify-content: flex-start;
210
+ --amplify-components-togglebuttongroup-align-content: center;
211
+ --amplify-components-togglebuttongroup-align-items: center;
212
+ --amplify-components-togglebutton-link-pressed-hover-background-color: var(--amplify-colors-transparent);
213
+ --amplify-components-togglebutton-link-pressed-color: var(--amplify-colors-overlay-90);
214
+ --amplify-components-togglebutton-link-pressed-background-color: var(--amplify-colors-transparent);
215
+ --amplify-components-togglebutton-link-disabled-color: var(--amplify-colors-font-disabled);
216
+ --amplify-components-togglebutton-link-focus-color: var(--amplify-colors-overlay-50);
217
+ --amplify-components-togglebutton-link-focus-background-color: var(--amplify-colors-transparent);
218
+ --amplify-components-togglebutton-link-hover-color: var(--amplify-colors-overlay-50);
219
+ --amplify-components-togglebutton-link-hover-background-color: var(--amplify-colors-transparent);
220
+ --amplify-components-togglebutton-link-color: var(--amplify-colors-overlay-50);
221
+ --amplify-components-togglebutton-primary-pressed-hover-background-color: var(--amplify-colors-brand-primary-60);
222
+ --amplify-components-togglebutton-primary-pressed-hover-border-color: var(--amplify-colors-brand-primary-60);
223
+ --amplify-components-togglebutton-primary-pressed-focus-border-color: var(--amplify-colors-border-focus);
224
+ --amplify-components-togglebutton-primary-pressed-focus-background-color: var(--amplify-colors-border-focus);
225
+ --amplify-components-togglebutton-primary-pressed-color: var(--amplify-colors-white);
226
+ --amplify-components-togglebutton-primary-pressed-border-color: var(--amplify-colors-brand-primary-80);
227
+ --amplify-components-togglebutton-primary-pressed-background-color: var(--amplify-colors-brand-primary-80);
228
+ --amplify-components-togglebutton-primary-disabled-color: var(--amplify-colors-font-disabled);
229
+ --amplify-components-togglebutton-primary-disabled-background-color: var(--amplify-colors-background-tertiary);
230
+ --amplify-components-togglebutton-primary-hover-color: var(--amplify-colors-overlay-50);
231
+ --amplify-components-togglebutton-primary-hover-background-color: var(--amplify-colors-overlay-10);
232
+ --amplify-components-togglebutton-primary-focus-color: var(--amplify-colors-overlay-50);
233
+ --amplify-components-togglebutton-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
234
+ --amplify-components-togglebutton-primary-focus-background-color: var(--amplify-colors-transparent);
235
+ --amplify-components-togglebutton-primary-focus-border-color: var(--amplify-colors-border-focus);
236
+ --amplify-components-togglebutton-primary-border-width: var(--amplify-border-widths-small);
237
+ --amplify-components-togglebutton-primary-background-color: var(--amplify-colors-transparent);
238
+ --amplify-components-togglebutton-pressed-hover-background-color: var(--amplify-colors-overlay-30);
239
+ --amplify-components-togglebutton-pressed-background-color: var(--amplify-colors-overlay-20);
240
+ --amplify-components-togglebutton-pressed-color: var(--amplify-colors-overlay-90);
241
+ --amplify-components-togglebutton-disabled-color: var(--amplify-colors-font-disabled);
242
+ --amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-secondary);
243
+ --amplify-components-togglebutton-disabled-background-color: var(--amplify-colors-transparent);
244
+ --amplify-components-togglebutton-active-background-color: var(--amplify-colors-transparent);
245
+ --amplify-components-togglebutton-focus-color: var(--amplify-colors-overlay-50);
246
+ --amplify-components-togglebutton-focus-border-color: var(--amplify-colors-border-focus);
247
+ --amplify-components-togglebutton-hover-background-color: var(--amplify-colors-overlay-10);
248
+ --amplify-components-togglebutton-color: var(--amplify-colors-overlay-50);
249
+ --amplify-components-togglebutton-border-color: var(--amplify-colors-border-primary);
250
+ --amplify-components-text-info-color: var(--amplify-colors-font-info);
251
+ --amplify-components-text-success-color: var(--amplify-colors-font-success);
252
+ --amplify-components-text-warning-color: var(--amplify-colors-font-warning);
253
+ --amplify-components-text-error-color: var(--amplify-colors-font-error);
254
+ --amplify-components-text-tertiary-color: var(--amplify-colors-font-tertiary);
255
+ --amplify-components-text-secondary-color: var(--amplify-colors-font-secondary);
256
+ --amplify-components-text-primary-color: var(--amplify-colors-font-primary);
257
+ --amplify-components-text-color: var(--amplify-colors-font-primary);
258
+ --amplify-components-tabs-item-disabled-border-color: var(--amplify-colors-border-tertiary);
159
259
  --amplify-components-tabs-item-disabled-background-color: transparent;
260
+ --amplify-components-tabs-item-disabled-color: var(--amplify-colors-font-disabled);
160
261
  --amplify-components-tabs-item-active-background-color: transparent;
262
+ --amplify-components-tabs-item-active-border-color: var(--amplify-colors-font-interactive);
263
+ --amplify-components-tabs-item-active-color: var(--amplify-colors-font-interactive);
264
+ --amplify-components-tabs-item-focus-color: var(--amplify-colors-font-focus);
265
+ --amplify-components-tabs-item-hover-color: var(--amplify-colors-font-hover);
266
+ --amplify-components-tabs-item-transition-duration: var(--amplify-time-medium);
161
267
  --amplify-components-tabs-item-text-align: center;
268
+ --amplify-components-tabs-item-padding-horizontal: var(--amplify-space-medium);
269
+ --amplify-components-tabs-item-padding-vertical: var(--amplify-space-small);
270
+ --amplify-components-tabs-item-font-weight: var(--amplify-font-weights-bold);
271
+ --amplify-components-tabs-item-font-size: var(--amplify-font-sizes-medium);
272
+ --amplify-components-tabs-item-color: var(--amplify-colors-font-secondary);
273
+ --amplify-components-tabs-item-border-width: var(--amplify-border-widths-medium);
162
274
  --amplify-components-tabs-item-border-style: solid;
275
+ --amplify-components-tabs-item-border-color: var(--amplify-colors-border-secondary);
163
276
  --amplify-components-tabs-item-background-color: transparent;
277
+ --amplify-components-tabs-border-width: var(--amplify-border-widths-medium);
164
278
  --amplify-components-tabs-border-style: solid;
279
+ --amplify-components-tabs-border-color: var(--amplify-colors-border-secondary);
165
280
  --amplify-components-tabs-background-color: transparent;
166
- --amplify-components-select-icon-wrapper-pointer-events: none;
167
- --amplify-components-select-icon-wrapper-top: 25%;
168
- --amplify-components-select-icon-wrapper-height: 50%;
169
- --amplify-components-select-icon-wrapper-position: absolute;
170
- --amplify-components-select-wrapper-cursor: pointer;
171
- --amplify-components-select-wrapper-position: relative;
172
- --amplify-components-select-wrapper-display: block;
173
- --amplify-components-radio-label-disabled-color: #d6dbe2;
174
- --amplify-components-radio-button-disabled-border-color: #e9ecf0;
175
- --amplify-components-radio-button-before-background-color: currentColor;
176
- --amplify-components-radio-button-before-border-radius: 50%;
177
- --amplify-components-radio-button-before-height: 50%;
178
- --amplify-components-radio-button-before-width: 50%;
179
- --amplify-components-radio-button-before-display: inline-block;
180
- --amplify-components-radio-button-before-content: "";
181
- --amplify-components-radio-button-outline-style: solid;
182
- --amplify-components-radio-button-transition-property: all;
183
- --amplify-components-radio-button-border-radius: 50%;
184
- --amplify-components-radio-button-border-style: solid;
185
- --amplify-components-radio-button-box-sizing: border-box;
186
- --amplify-components-radio-button-justify-content: center;
187
- --amplify-components-radio-button-align-items: center;
188
- --amplify-components-radio-gap: inherit;
189
- --amplify-components-radio-justify-content: flex-start;
190
- --amplify-components-radio-align-items: center;
191
- --amplify-components-pagination-item-container-margin-right: 4px;
192
- --amplify-components-pagination-item-container-margin-left: 4px;
193
- --amplify-components-pagination-ellipsis-padding-left: 8px;
194
- --amplify-components-pagination-ellipsis-padding-right: 8px;
195
- --amplify-components-pagination-button-hover-background-color: rgba(0, 0, 0, 0.1);
196
- --amplify-components-pagination-button-padding-left: 6px;
197
- --amplify-components-pagination-button-padding-bottom: 0;
198
- --amplify-components-pagination-button-padding-right: 6px;
199
- --amplify-components-pagination-button-padding-top: 0;
200
- --amplify-components-pagination-button-font-weight: inherit;
201
- --amplify-components-pagination-button-color: inherit;
202
- --amplify-components-pagination-current-background-color: rgba(0, 0, 0, 0.4);
203
- --amplify-components-image-object-position: initial;
204
- --amplify-components-image-object-fit: initial;
205
- --amplify-components-image-height: auto;
206
- --amplify-components-image-max-width: 100%;
207
- --amplify-components-icon-line-height: 1;
208
- --amplify-components-heading-line-height: 1.25;
209
- --amplify-components-flex-flex-wrap: nowrap;
210
- --amplify-components-flex-align-content: normal;
211
- --amplify-components-flex-align-items: stretch;
212
- --amplify-components-flex-justify-content: normal;
213
- --amplify-components-fieldmessages-description-font-style: italic;
214
- --amplify-components-fieldgroup-gap: 0;
215
- --amplify-components-fieldcontrol-disabled-cursor: not-allowed;
216
- --amplify-components-fieldcontrol-quiet-border-radius: 0;
217
- --amplify-components-fieldcontrol-quiet-border-block-start: none;
218
- --amplify-components-fieldcontrol-quiet-border-inline-end: none;
219
- --amplify-components-fieldcontrol-quiet-border-inline-start: none;
220
- --amplify-components-fieldcontrol-quiet-border-style: none;
221
- --amplify-components-fieldcontrol-outline-style: solid;
222
- --amplify-components-fieldcontrol-border-style: solid;
223
- --amplify-components-divider-border-style: solid;
224
- --amplify-components-card-border-style: solid;
225
- --amplify-components-button-link-background-color: transparent;
226
- --amplify-components-button-link-border-width: 0;
227
- --amplify-components-button-primary-border-width: 0;
228
- --amplify-components-button-disabled-background-color: transparent;
229
- --amplify-components-button-loading-background-color: transparent;
230
- --amplify-components-button-border-style: solid;
231
- --amplify-components-button-text-align: center;
232
- --amplify-components-button-font-weight: bold;
233
- --amplify-components-badge-border-radius: 9999px;
234
- --amplify-components-badge-text-align: center;
235
- --amplify-components-badge-line-height: 1;
236
- --amplify-shadows-switch: 0 0 4px var(--amplify-colors-black);
237
- --amplify-shadows-large: 0 4px 12px var(--amplify-colors-shadow-primary);
238
- --amplify-shadows-medium: 0 2px 6px var(--amplify-colors-shadow-secondary);
239
- --amplify-shadows-small: 0 2px 4px var(--amplify-colors-shadow-tertiary);
240
- --amplify-colors-icon-empty: var(--amplify-colors-neutral-60);
241
- --amplify-colors-icon-filled: var(--amplify-colors-orange-40);
242
- --amplify-colors-error: var(--amplify-colors-red-80);
243
- --amplify-colors-border-tertiary: var(--amplify-colors-neutral-20);
244
- --amplify-colors-border-secondary: var(--amplify-colors-neutral-40);
245
- --amplify-colors-border-primary: var(--amplify-colors-neutral-60);
246
- --amplify-colors-background-success: var(--amplify-colors-green-20);
247
- --amplify-colors-background-error: var(--amplify-colors-red-20);
248
- --amplify-colors-background-warning: var(--amplify-colors-orange-20);
249
- --amplify-colors-background-info: var(--amplify-colors-blue-20);
250
- --amplify-colors-background-tertiary: var(--amplify-colors-neutral-20);
251
- --amplify-colors-background-secondary: var(--amplify-colors-neutral-10);
252
- --amplify-colors-background-primary: var(--amplify-colors-white);
253
- --amplify-colors-font-success: var(--amplify-colors-green-80);
254
- --amplify-colors-font-error: var(--amplify-colors-red-80);
255
- --amplify-colors-font-warning: var(--amplify-colors-orange-80);
256
- --amplify-colors-font-info: var(--amplify-colors-blue-80);
257
- --amplify-colors-font-inverse: var(--amplify-colors-white);
258
- --amplify-colors-font-tertiary: var(--amplify-colors-neutral-60);
259
- --amplify-colors-font-secondary: var(--amplify-colors-neutral-80);
260
- --amplify-colors-font-primary: var(--amplify-colors-neutral-100);
261
- --amplify-colors-brand-secondary-100: var(--amplify-colors-purple-100);
262
- --amplify-colors-brand-secondary-90: var(--amplify-colors-purple-90);
263
- --amplify-colors-brand-secondary-80: var(--amplify-colors-purple-80);
264
- --amplify-colors-brand-secondary-60: var(--amplify-colors-purple-60);
265
- --amplify-colors-brand-secondary-40: var(--amplify-colors-purple-40);
266
- --amplify-colors-brand-secondary-20: var(--amplify-colors-purple-20);
267
- --amplify-colors-brand-secondary-10: var(--amplify-colors-purple-10);
268
- --amplify-colors-brand-primary-100: var(--amplify-colors-teal-100);
269
- --amplify-colors-brand-primary-90: var(--amplify-colors-teal-90);
270
- --amplify-colors-brand-primary-80: var(--amplify-colors-teal-80);
271
- --amplify-colors-brand-primary-60: var(--amplify-colors-teal-60);
272
- --amplify-colors-brand-primary-40: var(--amplify-colors-teal-40);
273
- --amplify-colors-brand-primary-20: var(--amplify-colors-teal-20);
274
- --amplify-colors-brand-primary-10: var(--amplify-colors-teal-10);
275
- --amplify-components-tabs-item-transition-duration: var(--amplify-time-transition-medium);
276
- --amplify-components-tabs-item-padding: var(--amplify-space-small) var(--amplify-space-medium);
277
- --amplify-components-tabs-item-font-weight: 700;
278
- --amplify-components-tabs-item-font-size: var(--amplify-font-sizes-medium);
279
- --amplify-components-tabs-item-border-width: var(--amplify-border-widths-medium);
280
- --amplify-components-tabs-border-width: var(--amplify-border-widths-medium);
281
+ --amplify-components-table-caption-small-font-size: var(--amplify-font-sizes-small);
282
+ --amplify-components-table-caption-large-font-size: var(--amplify-font-sizes-large);
283
+ --amplify-components-table-caption-word-break: break-all;
284
+ --amplify-components-table-caption-text-align: center;
285
+ --amplify-components-table-caption-font-size: var(--amplify-font-sizes-medium);
286
+ --amplify-components-table-caption-display: table-caption;
287
+ --amplify-components-table-caption-color: var(--amplify-colors-font-primary);
288
+ --amplify-components-table-caption-caption-side: bottom;
289
+ --amplify-components-table-data-small-padding: var(--amplify-space-xs);
290
+ --amplify-components-table-data-small-font-size: var(--amplify-font-sizes-small);
291
+ --amplify-components-table-data-large-padding: var(--amplify-space-large);
292
+ --amplify-components-table-data-large-font-size: var(--amplify-font-sizes-large);
293
+ --amplify-components-table-data-vertical-align: middle;
294
+ --amplify-components-table-data-padding: var(--amplify-space-medium);
295
+ --amplify-components-table-data-font-weight: var(--amplify-font-weights-normal);
296
+ --amplify-components-table-data-font-size: var(--amplify-font-sizes-medium);
297
+ --amplify-components-table-data-display: table-cell;
298
+ --amplify-components-table-data-color: var(--amplify-colors-font-primary);
299
+ --amplify-components-table-data-border-width: var(--amplify-border-widths-small);
300
+ --amplify-components-table-data-border-style: solid;
301
+ --amplify-components-table-data-border-color: var(--amplify-colors-border-tertiary);
302
+ --amplify-components-table-header-small-padding: var(--amplify-space-xs);
303
+ --amplify-components-table-header-small-font-size: var(--amplify-font-sizes-small);
304
+ --amplify-components-table-header-large-padding: var(--amplify-space-large);
305
+ --amplify-components-table-header-large-font-size: var(--amplify-font-sizes-large);
306
+ --amplify-components-table-header-vertical-align: middle;
307
+ --amplify-components-table-header-padding: var(--amplify-space-medium);
308
+ --amplify-components-table-header-font-weight: var(--amplify-font-weights-bold);
309
+ --amplify-components-table-header-font-size: var(--amplify-font-sizes-medium);
310
+ --amplify-components-table-header-display: table-cell;
311
+ --amplify-components-table-header-color: var(--amplify-colors-font-primary);
312
+ --amplify-components-table-header-border-width: var(--amplify-border-widths-small);
313
+ --amplify-components-table-header-border-style: solid;
314
+ --amplify-components-table-header-border-color: var(--amplify-colors-border-tertiary);
315
+ --amplify-components-table-row-striped-background-color: var(--amplify-colors-background-secondary);
316
+ --amplify-components-table-row-hover-background-color: var(--amplify-colors-background-tertiary);
317
+ --amplify-components-table-row-vertical-align: middle;
318
+ --amplify-components-table-row-display: table-row;
319
+ --amplify-components-table-foot-vertical-align: middle;
320
+ --amplify-components-table-foot-display: table-footer-group;
321
+ --amplify-components-table-body-vertical-align: middle;
322
+ --amplify-components-table-body-display: table-row-group;
323
+ --amplify-components-table-head-vertical-align: middle;
324
+ --amplify-components-table-head-display: table-header-group;
325
+ --amplify-components-table-width: 100%;
326
+ --amplify-components-table-display: table;
327
+ --amplify-components-table-border-collapse: collapse;
281
328
  --amplify-components-switchfield-track-width: var(--amplify-space-relative-xl);
282
- --amplify-components-switchfield-track-transition-duration: var(--amplify-time-transition-short);
329
+ --amplify-components-switchfield-track-transition-duration: var(--amplify-time-short);
283
330
  --amplify-components-switchfield-track-padding: var(--amplify-outline-widths-medium);
284
331
  --amplify-components-switchfield-track-height: var(--amplify-space-relative-medium);
285
- --amplify-components-switchfield-track-checked-background: var(--amplify-colors-blue-40);
332
+ --amplify-components-switchfield-track-checked-background-color: var(--amplify-colors-brand-primary-600);
286
333
  --amplify-components-switchfield-track-border-radius: var(--amplify-radii-xxxl);
287
- --amplify-components-switchfield-track-background: var(--amplify-colors-neutral-40);
334
+ --amplify-components-switchfield-track-background-color: var(--amplify-colors-background-tertiary);
288
335
  --amplify-components-switchfield-thumb-width: var(--amplify-space-relative-medium);
289
- --amplify-components-switchfield-thumb-transition-duration: var(--amplify-time-transition-medium);
336
+ --amplify-components-switchfield-thumb-transition-duration: var(--amplify-time-medium);
290
337
  --amplify-components-switchfield-thumb-checked-transform: var(--amplify-transforms-slide-x-medium);
291
338
  --amplify-components-switchfield-thumb-border-radius: var(--amplify-radii-xxxl);
292
339
  --amplify-components-switchfield-thumb-border-color: var(--amplify-colors-neutral-20);
@@ -294,203 +341,469 @@
294
341
  --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);
295
342
  --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large);
296
343
  --amplify-components-switchfield-label-padding: var(--amplify-space-xs);
344
+ --amplify-components-switchfield-focused-shadow: var(--amplify-shadows-small);
297
345
  --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-30);
346
+ --amplify-components-stepperfield-input-text-align: center;
347
+ --amplify-components-stepperfield-input-border-color: var(--amplify-colors-brand-primary-20);
348
+ --amplify-components-stepperfield-flex-direction: column;
349
+ --amplify-components-sliderfield-thumb-focus-box-shadow: 0 0 0 3px var(--amplify-colors-border-focus);
350
+ --amplify-components-sliderfield-thumb-hover-background-color: var(--amplify-colors-background-secondary);
351
+ --amplify-components-sliderfield-thumb-border-radius: 50%;
352
+ --amplify-components-sliderfield-thumb-box-shadow: 0 2px 10px var(--amplify-colors-black);
353
+ --amplify-components-sliderfield-thumb-background-color: var(--amplify-colors-white);
354
+ --amplify-components-sliderfield-thumb-height: 1.25rem;
355
+ --amplify-components-sliderfield-thumb-width: 1.25rem;
356
+ --amplify-components-sliderfield-range-background-color: var(--amplify-colors-brand-primary-80);
357
+ --amplify-components-sliderfield-track-vertical-min-height: 10rem;
358
+ --amplify-components-sliderfield-track-vertical-width: 0.375rem;
359
+ --amplify-components-sliderfield-track-horizontal-min-width: 10rem;
360
+ --amplify-components-sliderfield-track-horizontal-height: 0.375rem;
361
+ --amplify-components-sliderfield-track-border-radius: 9999px;
362
+ --amplify-components-sliderfield-track-background-color: var(--amplify-colors-background-tertiary);
363
+ --amplify-components-sliderfield-root-vertical-width: 2rem;
364
+ --amplify-components-sliderfield-root-horizontal-height: 2rem;
365
+ --amplify-components-sliderfield-group-gap: var(--amplify-space-small);
366
+ --amplify-components-selectfield-flex-direction: column;
367
+ --amplify-components-select-large-min-width: 7.5rem;
368
+ --amplify-components-select-small-min-width: 5.5rem;
369
+ --amplify-components-select-min-width: 6.5rem;
370
+ --amplify-components-select-white-space: nowrap;
371
+ --amplify-components-select-icon-wrapper-pointer-events: none;
372
+ --amplify-components-select-icon-wrapper-transform: translateY(-50%);
298
373
  --amplify-components-select-icon-wrapper-right: var(--amplify-space-medium);
374
+ --amplify-components-select-icon-wrapper-top: 50%;
375
+ --amplify-components-select-icon-wrapper-position: absolute;
376
+ --amplify-components-select-icon-wrapper-align-items: center;
377
+ --amplify-components-select-wrapper-cursor: pointer;
378
+ --amplify-components-select-wrapper-position: relative;
379
+ --amplify-components-select-wrapper-display: block;
299
380
  --amplify-components-select-padding-inline-end: var(--amplify-space-xxl);
381
+ --amplify-components-rating-empty-color: var(--amplify-colors-background-tertiary);
382
+ --amplify-components-rating-filled-color: var(--amplify-colors-brand-secondary-80);
300
383
  --amplify-components-rating-small-size: var(--amplify-font-sizes-small);
301
384
  --amplify-components-rating-default-size: var(--amplify-font-sizes-xl);
302
385
  --amplify-components-rating-large-size: var(--amplify-font-sizes-xxxl);
386
+ --amplify-components-radio-label-disabled-color: var(--amplify-colors-font-disabled);
303
387
  --amplify-components-radio-button-disabled-color: var(--amplify-colors-white);
304
388
  --amplify-components-radio-button-disabled-background-color: var(--amplify-colors-white);
389
+ --amplify-components-radio-button-disabled-border-color: var(--amplify-colors-border-disabled);
390
+ --amplify-components-radio-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
391
+ --amplify-components-radio-button-error-border-color: var(--amplify-colors-border-error);
392
+ --amplify-components-radio-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
393
+ --amplify-components-radio-button-focus-border-color: var(--amplify-colors-border-focus);
394
+ --amplify-components-radio-button-checked-disabled-color: var(--amplify-colors-background-disabled);
305
395
  --amplify-components-radio-button-checked-color: var(--amplify-colors-red-60);
306
396
  --amplify-components-radio-button-large-height: var(--amplify-font-sizes-large);
307
397
  --amplify-components-radio-button-large-width: var(--amplify-font-sizes-large);
308
398
  --amplify-components-radio-button-small-height: var(--amplify-font-sizes-xs);
309
399
  --amplify-components-radio-button-small-width: var(--amplify-font-sizes-xs);
400
+ --amplify-components-radio-button-before-background-color: currentColor;
401
+ --amplify-components-radio-button-before-border-radius: 50%;
402
+ --amplify-components-radio-button-before-height: 50%;
403
+ --amplify-components-radio-button-before-width: 50%;
404
+ --amplify-components-radio-button-before-display: inline-block;
405
+ --amplify-components-radio-button-before-content: "";
310
406
  --amplify-components-radio-button-outline-offset: var(--amplify-outline-offsets-medium);
311
407
  --amplify-components-radio-button-outline-width: var(--amplify-outline-widths-medium);
408
+ --amplify-components-radio-button-outline-style: solid;
312
409
  --amplify-components-radio-button-outline-color: var(--amplify-colors-transparent);
313
- --amplify-components-radio-button-transition-duration: var(--amplify-time-transition-medium);
410
+ --amplify-components-radio-button-transition-duration: var(--amplify-time-medium);
411
+ --amplify-components-radio-button-transition-property: all;
314
412
  --amplify-components-radio-button-background-color: var(--amplify-colors-white);
315
413
  --amplify-components-radio-button-color: var(--amplify-colors-white);
414
+ --amplify-components-radio-button-border-color: var(--amplify-colors-border-primary);
415
+ --amplify-components-radio-button-border-radius: 50%;
416
+ --amplify-components-radio-button-border-style: solid;
316
417
  --amplify-components-radio-button-border-width: var(--amplify-border-widths-medium);
418
+ --amplify-components-radio-button-box-sizing: border-box;
317
419
  --amplify-components-radio-button-height: var(--amplify-font-sizes-medium);
318
420
  --amplify-components-radio-button-width: var(--amplify-font-sizes-medium);
421
+ --amplify-components-radio-button-justify-content: center;
422
+ --amplify-components-radio-button-align-items: center;
423
+ --amplify-components-radio-disabled-cursor: not-allowed;
424
+ --amplify-components-radio-gap: inherit;
425
+ --amplify-components-radio-justify-content: flex-start;
426
+ --amplify-components-radio-align-items: center;
319
427
  --amplify-components-placeholder-large-height: var(--amplify-space-large);
320
428
  --amplify-components-placeholder-default-height: var(--amplify-space-medium);
321
429
  --amplify-components-placeholder-small-height: var(--amplify-space-small);
322
- --amplify-components-placeholder-transition-duration: var(--amplify-time-transition-long);
323
- --amplify-components-placeholder-border-radius: var(--amplify-radii-medium);
430
+ --amplify-components-placeholder-end-color: var(--amplify-colors-background-tertiary);
431
+ --amplify-components-placeholder-start-color: var(--amplify-colors-background-secondary);
432
+ --amplify-components-placeholder-transition-duration: var(--amplify-time-long);
433
+ --amplify-components-placeholder-border-radius: var(--amplify-radii-small);
324
434
  --amplify-components-pagination-item-shared-border-radius: var(--amplify-font-sizes-medium);
325
435
  --amplify-components-pagination-item-shared-min-width: var(--amplify-font-sizes-xxl);
326
436
  --amplify-components-pagination-item-shared-height: var(--amplify-font-sizes-xxl);
327
- --amplify-components-pagination-button-disabled-opacity: var(--amplify-opacities-40);
328
- --amplify-components-pagination-button-transition: background-color var(--amplify-time-transition-medium);
437
+ --amplify-components-pagination-item-container-margin-right: var(--amplify-space-xxxs);
438
+ --amplify-components-pagination-item-container-margin-left: var(--amplify-space-xxxs);
439
+ --amplify-components-pagination-ellipsis-padding-inline-end: var(--amplify-space-xs);
440
+ --amplify-components-pagination-ellipsis-padding-inline-start: var(--amplify-space-xs);
441
+ --amplify-components-pagination-ellipsis-justify-content: center;
442
+ --amplify-components-pagination-ellipsis-align-items: baseline;
443
+ --amplify-components-pagination-button-disabled-color: var(--amplify-colors-font-disabled);
444
+ --amplify-components-pagination-button-hover-color: var(--amplify-colors-font-primary);
445
+ --amplify-components-pagination-button-hover-background-color: var(--amplify-colors-overlay-10);
446
+ --amplify-components-pagination-button-transition-duration: var(--amplify-time-medium);
447
+ --amplify-components-pagination-button-transition-property: background-color;
448
+ --amplify-components-pagination-button-padding-inline-end: var(--amplify-space-xxs);
449
+ --amplify-components-pagination-button-padding-inline-start: var(--amplify-space-xxs);
450
+ --amplify-components-pagination-button-color: var(--amplify-colors-font-primary);
451
+ --amplify-components-pagination-current-background-color: var(--amplify-colors-overlay-40);
329
452
  --amplify-components-pagination-current-font-size: var(--amplify-font-sizes-small);
330
453
  --amplify-components-pagination-current-color: var(--amplify-colors-white);
454
+ --amplify-components-pagination-current-justify-content: center;
455
+ --amplify-components-pagination-current-align-items: center;
456
+ --amplify-components-menu-item-padding-inline-end: var(--amplify-space-medium);
457
+ --amplify-components-menu-item-padding-inline-start: var(--amplify-space-medium);
458
+ --amplify-components-menu-item-min-height: 2.5rem;
459
+ --amplify-components-menu-large-height: var(--amplify-font-sizes-xxxl);
460
+ --amplify-components-menu-large-width: var(--amplify-font-sizes-xxxl);
461
+ --amplify-components-menu-small-height: var(--amplify-font-sizes-medium);
462
+ --amplify-components-menu-small-width: var(--amplify-font-sizes-medium);
463
+ --amplify-components-menu-min-width: 14rem;
464
+ --amplify-components-menu-max-width: 30rem;
465
+ --amplify-components-menu-gap: 0;
466
+ --amplify-components-menu-flex-direction: column;
467
+ --amplify-components-menu-box-shadow: var(--amplify-shadows-large);
468
+ --amplify-components-menu-border-radius: var(--amplify-radii-medium);
469
+ --amplify-components-menu-background-color: var(--amplify-colors-white);
470
+ --amplify-components-loader-linear-large-stroke-width: var(--amplify-font-sizes-xs);
471
+ --amplify-components-loader-linear-large-height: var(--amplify-font-sizes-xs);
472
+ --amplify-components-loader-linear-small-stroke-width: var(--amplify-font-sizes-xxxs);
473
+ --amplify-components-loader-linear-small-height: var(--amplify-font-sizes-xxxs);
474
+ --amplify-components-loader-linear-animation-duration: 1s;
475
+ --amplify-components-loader-linear-stroke-linecap: round;
476
+ --amplify-components-loader-linear-stroke-empty: var(--amplify-colors-neutral-20);
477
+ --amplify-components-loader-linear-stroke-filled: var(--amplify-colors-brand-primary-80);
478
+ --amplify-components-loader-linear-stroke-width: var(--amplify-font-sizes-xxs);
479
+ --amplify-components-loader-linear-height: var(--amplify-font-sizes-xxs);
480
+ --amplify-components-loader-linear-min-width: 5rem;
481
+ --amplify-components-loader-linear-width: 100%;
482
+ --amplify-components-loader-large-height: var(--amplify-font-sizes-xxxl);
483
+ --amplify-components-loader-large-width: var(--amplify-font-sizes-xxxl);
484
+ --amplify-components-loader-small-height: var(--amplify-font-sizes-medium);
485
+ --amplify-components-loader-small-width: var(--amplify-font-sizes-medium);
486
+ --amplify-components-loader-animation-duration: 1s;
487
+ --amplify-components-loader-stroke-linecap: round;
488
+ --amplify-components-loader-stroke-filled: var(--amplify-colors-brand-primary-80);
489
+ --amplify-components-loader-stroke-empty: var(--amplify-colors-neutral-20);
490
+ --amplify-components-loader-height: var(--amplify-font-sizes-xxl);
491
+ --amplify-components-loader-width: var(--amplify-font-sizes-xxl);
492
+ --amplify-components-link-visited-color: var(--amplify-colors-font-interactive);
331
493
  --amplify-components-link-small-font-size: var(--amplify-font-sizes-small);
332
494
  --amplify-components-link-large-font-size: var(--amplify-font-sizes-large);
333
- --amplify-components-icon-small-height: var(--amplify-font-sizes-small);
334
- --amplify-components-icon-large-height: var(--amplify-font-sizes-large);
335
- --amplify-components-icon-height: var(--amplify-font-sizes-medium);
336
- --amplify-components-heading-6-font-weight: 700;
495
+ --amplify-components-link-hover-color: var(--amplify-colors-font-hover);
496
+ --amplify-components-link-focus-color: var(--amplify-colors-font-focus);
497
+ --amplify-components-link-color: var(--amplify-colors-font-interactive);
498
+ --amplify-components-link-active-color: var(--amplify-colors-font-active);
499
+ --amplify-components-image-object-position: initial;
500
+ --amplify-components-image-object-fit: initial;
501
+ --amplify-components-image-height: auto;
502
+ --amplify-components-image-max-width: 100%;
503
+ --amplify-components-icon-height: 1em;
504
+ --amplify-components-icon-line-height: 1;
505
+ --amplify-components-heading-line-height: 1.25;
506
+ --amplify-components-heading-color: var(--amplify-colors-font-primary);
507
+ --amplify-components-heading-6-font-weight: var(--amplify-font-weights-bold);
337
508
  --amplify-components-heading-6-font-size: var(--amplify-font-sizes-medium);
338
- --amplify-components-heading-5-font-weight: 600;
509
+ --amplify-components-heading-5-font-weight: var(--amplify-font-weights-semibold);
339
510
  --amplify-components-heading-5-font-size: var(--amplify-font-sizes-large);
340
- --amplify-components-heading-4-font-weight: 500;
511
+ --amplify-components-heading-4-font-weight: var(--amplify-font-weights-medium);
341
512
  --amplify-components-heading-4-font-size: var(--amplify-font-sizes-xl);
342
- --amplify-components-heading-3-font-weight: 400;
513
+ --amplify-components-heading-3-font-weight: var(--amplify-font-weights-normal);
343
514
  --amplify-components-heading-3-font-size: var(--amplify-font-sizes-xxl);
344
- --amplify-components-heading-2-font-weight: 300;
515
+ --amplify-components-heading-2-font-weight: var(--amplify-font-weights-light);
345
516
  --amplify-components-heading-2-font-size: var(--amplify-font-sizes-xxxl);
346
- --amplify-components-heading-1-font-weight: 300;
517
+ --amplify-components-heading-1-font-weight: var(--amplify-font-weights-light);
347
518
  --amplify-components-heading-1-font-size: var(--amplify-font-sizes-xxxxl);
519
+ --amplify-components-flex-flex-wrap: nowrap;
520
+ --amplify-components-flex-align-content: normal;
521
+ --amplify-components-flex-align-items: stretch;
522
+ --amplify-components-flex-justify-content: normal;
348
523
  --amplify-components-flex-gap: var(--amplify-space-medium);
349
524
  --amplify-components-fieldmessages-description-font-size: var(--amplify-font-sizes-small);
525
+ --amplify-components-fieldmessages-description-font-style: italic;
526
+ --amplify-components-fieldmessages-description-color: var(--amplify-colors-font-secondary);
350
527
  --amplify-components-fieldmessages-error-font-size: var(--amplify-font-sizes-small);
528
+ --amplify-components-fieldmessages-error-color: var(--amplify-colors-font-error);
529
+ --amplify-components-fieldgroup-outer-align-items: center;
530
+ --amplify-components-fieldgroup-vertical-align-items: center;
531
+ --amplify-components-fieldgroup-gap: 0;
532
+ --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-error);
533
+ --amplify-components-fieldcontrol-error-border-color: var(--amplify-colors-border-error);
534
+ --amplify-components-fieldcontrol-disabled-background-color: var(--amplify-colors-background-disabled);
351
535
  --amplify-components-fieldcontrol-disabled-border-color: var(--amplify-colors-transparent);
352
- --amplify-components-fieldcontrol-quiet-border-block-end: var(--amplify-border-widths-small) solid var(--amplify-colors-border-primary);
353
- --amplify-components-fieldcontrol-large-line-height: var(--amplify-line-heights-large);
354
- --amplify-components-fieldcontrol-large-padding: var(--amplify-space-medium) var(--amplify-space-large);
355
- --amplify-components-fieldcontrol-small-line-height: var(--amplify-line-heights-small);
356
- --amplify-components-fieldcontrol-small-padding: var(--amplify-space-xs) var(--amplify-space-small);
536
+ --amplify-components-fieldcontrol-disabled-cursor: not-allowed;
537
+ --amplify-components-fieldcontrol-disabled-color: var(--amplify-colors-font-disabled);
538
+ --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-focus);
539
+ --amplify-components-fieldcontrol-focus-border-color: var(--amplify-colors-border-focus);
540
+ --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: 0px 1px var(--amplify-colors-border-error);
541
+ --amplify-components-fieldcontrol-quiet-error-border-block-end-color: var(--amplify-colors-border-error);
542
+ --amplify-components-fieldcontrol-quiet-focus-box-shadow: 0px 1px var(--amplify-colors-border-focus);
543
+ --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: var(--amplify-colors-border-focus);
544
+ --amplify-components-fieldcontrol-quiet-border-radius: 0;
545
+ --amplify-components-fieldcontrol-quiet-border-block-start: none;
546
+ --amplify-components-fieldcontrol-quiet-border-inline-end: none;
547
+ --amplify-components-fieldcontrol-quiet-border-inline-start: none;
548
+ --amplify-components-fieldcontrol-quiet-border-block-end: var(--amplify-border-widths-small-solid-colors-border-primary-value);
549
+ --amplify-components-fieldcontrol-quiet-border-style: none;
550
+ --amplify-components-fieldcontrol-large-padding-inline-end: var(--amplify-space-medium);
551
+ --amplify-components-fieldcontrol-large-padding-inline-start: var(--amplify-space-medium);
552
+ --amplify-components-fieldcontrol-large-padding-block-end: var(--amplify-space-xs);
553
+ --amplify-components-fieldcontrol-large-padding-block-start: var(--amplify-space-xs);
554
+ --amplify-components-fieldcontrol-large-font-size: var(--amplify-components-field-large-font-size);
555
+ --amplify-components-fieldcontrol-small-padding-inline-end: var(--amplify-space-small);
556
+ --amplify-components-fieldcontrol-small-padding-inline-start: var(--amplify-space-small);
557
+ --amplify-components-fieldcontrol-small-padding-block-end: var(--amplify-space-xs);
558
+ --amplify-components-fieldcontrol-small-padding-block-start: var(--amplify-space-xs);
559
+ --amplify-components-fieldcontrol-small-font-size: var(--amplify-components-field-small-font-size);
357
560
  --amplify-components-fieldcontrol-outline-offset: var(--amplify-outline-offsets-medium);
358
561
  --amplify-components-fieldcontrol-outline-width: var(--amplify-outline-widths-medium);
562
+ --amplify-components-fieldcontrol-outline-style: solid;
359
563
  --amplify-components-fieldcontrol-outline-color: var(--amplify-colors-transparent);
360
- --amplify-components-fieldcontrol-transition-duration: var(--amplify-time-transition-medium);
564
+ --amplify-components-fieldcontrol-transition-duration: var(--amplify-time-medium);
361
565
  --amplify-components-fieldcontrol-line-height: var(--amplify-line-heights-medium);
362
- --amplify-components-fieldcontrol-padding: var(--amplify-space-xs) var(--amplify-space-medium);
363
- --amplify-components-fieldcontrol-border-radius: var(--amplify-radii-medium);
566
+ --amplify-components-fieldcontrol-font-size: var(--amplify-components-field-font-size);
567
+ --amplify-components-fieldcontrol-padding-inline-end: var(--amplify-space-medium);
568
+ --amplify-components-fieldcontrol-padding-inline-start: var(--amplify-space-medium);
569
+ --amplify-components-fieldcontrol-padding-block-end: var(--amplify-space-xs);
570
+ --amplify-components-fieldcontrol-padding-block-start: var(--amplify-space-xs);
571
+ --amplify-components-fieldcontrol-color: var(--amplify-colors-font-primary);
572
+ --amplify-components-fieldcontrol-border-radius: var(--amplify-radii-small);
364
573
  --amplify-components-fieldcontrol-border-width: var(--amplify-border-widths-small);
574
+ --amplify-components-fieldcontrol-border-color: var(--amplify-colors-border-primary);
575
+ --amplify-components-fieldcontrol-border-style: solid;
576
+ --amplify-components-field-label-color: var(--amplify-colors-font-secondary);
365
577
  --amplify-components-field-large-font-size: var(--amplify-font-sizes-large);
366
578
  --amplify-components-field-large-gap: var(--amplify-space-small);
367
579
  --amplify-components-field-small-font-size: var(--amplify-font-sizes-small);
368
- --amplify-components-field-small-gap: var(--amplify-space-xxs);
580
+ --amplify-components-field-small-gap: var(--amplify-space-xxxs);
369
581
  --amplify-components-field-font-size: var(--amplify-font-sizes-medium);
370
582
  --amplify-components-field-gap: var(--amplify-space-xs);
583
+ --amplify-components-expander-icon-transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
584
+ --amplify-components-expander-icon-transition-duration: var(--amplify-time-medium);
585
+ --amplify-components-expander-content-closed-animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
586
+ --amplify-components-expander-content-closed-animation-duration: var(--amplify-time-medium);
587
+ --amplify-components-expander-content-open-animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
588
+ --amplify-components-expander-content-open-animation-duration: var(--amplify-time-medium);
589
+ --amplify-components-expander-content-text-padding-block-end: var(--amplify-space-medium);
590
+ --amplify-components-expander-content-text-padding-block-start: var(--amplify-space-medium);
591
+ --amplify-components-expander-content-text-color: var(--amplify-colors-font-secondary);
592
+ --amplify-components-expander-content-padding-inline-end: var(--amplify-space-large);
593
+ --amplify-components-expander-content-padding-inline-start: var(--amplify-space-large);
594
+ --amplify-components-expander-trigger-hover-background-color: var(--amplify-colors-overlay-10);
595
+ --amplify-components-expander-trigger-justify-content: space-between;
596
+ --amplify-components-expander-trigger-align-items: center;
597
+ --amplify-components-expander-trigger-padding-inline-end: var(--amplify-space-large);
598
+ --amplify-components-expander-trigger-padding-inline-start: var(--amplify-space-large);
599
+ --amplify-components-expander-trigger-min-height: 3rem;
600
+ --amplify-components-expander-header-box-shadow: 0 1px 0 var(--amplify-colors-overlay-20);
601
+ --amplify-components-expander-item-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
602
+ --amplify-components-expander-item-border-end-end-radius: var(--amplify-radii-medium);
603
+ --amplify-components-expander-item-border-end-start-radius: var(--amplify-radii-medium);
604
+ --amplify-components-expander-item-border-start-end-radius: var(--amplify-radii-medium);
605
+ --amplify-components-expander-item-border-start-start-radius: var(--amplify-radii-medium);
606
+ --amplify-components-expander-item-border-top-right-radius: var(--amplify-radii-medium);
607
+ --amplify-components-expander-item-border-top-left-radius: var(--amplify-radii-medium);
608
+ --amplify-components-expander-item-border-bottom-right-radius: var(--amplify-radii-medium);
609
+ --amplify-components-expander-item-border-bottom-left-radius: var(--amplify-radii-medium);
610
+ --amplify-components-expander-item-box-shadow: var(--amplify-shadows-small);
611
+ --amplify-components-expander-item-margin-top: 1px;
612
+ --amplify-components-expander-width: 100%;
613
+ --amplify-components-expander-box-shadow: var(--amplify-shadows-large);
614
+ --amplify-components-expander-border-radius: var(--amplify-radii-medium);
615
+ --amplify-components-expander-background-color: var(--amplify-colors-white);
616
+ --amplify-components-expander-display: block;
371
617
  --amplify-components-divider-opacity: var(--amplify-opacities-60);
372
618
  --amplify-components-divider-large-border-width: var(--amplify-border-widths-large);
373
619
  --amplify-components-divider-small-border-width: var(--amplify-border-widths-small);
374
620
  --amplify-components-divider-border-width: var(--amplify-border-widths-medium);
375
- --amplify-components-card-padding: var(--amplify-space-medium);
376
- --amplify-components-card-border-width: var(--amplify-border-widths-small);
377
- --amplify-components-button-border-width: var(--amplify-border-widths-small);
378
- --amplify-components-button-padding: var(--amplify-space-small) var(--amplify-space-medium);
379
- --amplify-components-badge-large-padding: var(--amplify-space-small) var(--amplify-space-medium);
380
- --amplify-components-badge-large-font-size: var(--amplify-font-sizes-medium);
381
- --amplify-components-badge-small-padding: var(--amplify-space-xxs) var(--amplify-space-xs);
382
- --amplify-components-badge-small-font-size: var(--amplify-font-sizes-xs);
383
- --amplify-components-badge-padding: var(--amplify-space-xs) var(--amplify-space-small);
384
- --amplify-components-badge-font-size: var(--amplify-font-sizes-small);
385
- --amplify-components-badge-font-weight: 600;
386
- --amplify-components-alert-padding: var(--amplify-space-small) var(--amplify-space-medium);
387
- --amplify-colors-focus: var(--amplify-colors-brand-primary-100);
388
- --amplify-colors-background-disabled: var(--amplify-colors-background-secondary);
389
- --amplify-colors-font-active: var(--amplify-colors-brand-primary-100);
390
- --amplify-colors-font-focus: var(--amplify-colors-brand-primary-90);
391
- --amplify-colors-font-hover: var(--amplify-colors-brand-primary-90);
392
- --amplify-colors-font-interactive: var(--amplify-colors-brand-primary-80);
393
- --amplify-colors-font-disabled: var(--amplify-colors-font-tertiary);
394
- --amplify-components-text-info-color: var(--amplify-colors-font-info);
395
- --amplify-components-text-success-color: var(--amplify-colors-font-success);
396
- --amplify-components-text-warning-color: var(--amplify-colors-font-warning);
397
- --amplify-components-text-error-color: var(--amplify-colors-font-error);
398
- --amplify-components-text-tertiary-color: var(--amplify-colors-font-tertiary);
399
- --amplify-components-text-secondary-color: var(--amplify-colors-font-secondary);
400
- --amplify-components-text-primary-color: var(--amplify-colors-font-primary);
401
- --amplify-components-text-color: var(--amplify-colors-font-primary);
402
- --amplify-components-tabs-item-disabled-border-color: var(--amplify-colors-border-tertiary);
403
- --amplify-components-tabs-item-color: var(--amplify-colors-font-secondary);
404
- --amplify-components-tabs-item-border-color: var(--amplify-colors-border-secondary);
405
- --amplify-components-tabs-border-color: var(--amplify-colors-border-secondary);
406
- --amplify-components-switchfield-focused-shadow: var(--amplify-shadows-switch);
407
- --amplify-components-rating-empty-color: var(--amplify-colors-icon-empty);
408
- --amplify-components-rating-filled-color: var(--amplify-colors-icon-filled);
409
- --amplify-components-radio-button-checked-disabled-color: var(--amplify-colors-border-secondary);
410
- --amplify-components-radio-button-border-color: var(--amplify-colors-border-primary);
411
- --amplify-components-placeholder-end-color: var(--amplify-colors-background-tertiary);
412
- --amplify-components-placeholder-start-color: var(--amplify-colors-background-secondary);
413
- --amplify-components-link-visited-color: var(--amplify-colors-font-tertiary);
414
- --amplify-components-heading-color: var(--amplify-colors-font-primary);
415
- --amplify-components-fieldmessages-error-color: var(--amplify-colors-error);
416
- --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-error);
417
- --amplify-components-fieldcontrol-error-border-color: var(--amplify-colors-error);
418
- --amplify-components-fieldcontrol-disabled-background-color: var(--amplify-colors-background-tertiary);
419
- --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: 0 1px var(--amplify-colors-error);
420
- --amplify-components-fieldcontrol-quiet-error-border-block-end-color: var(--amplify-colors-error);
421
- --amplify-components-fieldcontrol-large-font-size: var(--amplify-components-field-large-font-size);
422
- --amplify-components-fieldcontrol-small-font-size: var(--amplify-components-field-small-font-size);
423
- --amplify-components-fieldcontrol-font-size: var(--amplify-components-field-font-size);
424
- --amplify-components-fieldcontrol-border-color: var(--amplify-colors-border-primary);
425
621
  --amplify-components-divider-border-color: var(--amplify-colors-border-primary);
426
- --amplify-components-card-box-shadow: var(--amplify-shadows-medium);
427
- --amplify-components-card-border-color: var(--amplify-colors-border-primary);
622
+ --amplify-components-divider-border-style: solid;
623
+ --amplify-components-checkboxfield-justify-content: center;
624
+ --amplify-components-checkboxfield-flex-direction: column;
625
+ --amplify-components-checkboxfield-align-content: center;
626
+ --amplify-components-checkboxfield-align-items: flex-start;
627
+ --amplify-components-checkbox-label-disabled-color: var(--amplify-colors-font-disabled);
628
+ --amplify-components-checkbox-icon-checked-disabled-background-color: var(--amplify-colors-background-disabled);
629
+ --amplify-components-checkbox-icon-checked-transform: scale(1);
630
+ --amplify-components-checkbox-icon-checked-opacity: var(--amplify-opacities-100);
631
+ --amplify-components-checkbox-icon-transition-timing-function: ease-in-out;
632
+ --amplify-components-checkbox-icon-transition-duration: var(--amplify-time-short);
633
+ --amplify-components-checkbox-icon-transition-property: all;
634
+ --amplify-components-checkbox-icon-transform: scale(0);
635
+ --amplify-components-checkbox-icon-opacity: var(--amplify-opacities-0);
636
+ --amplify-components-checkbox-icon-border-radius: 20%;
637
+ --amplify-components-checkbox-icon-background-color: var(--amplify-colors-brand-primary-80);
638
+ --amplify-components-checkbox-button-error-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-error);
639
+ --amplify-components-checkbox-button-error-focus-border-color: var(--amplify-colors-transparent);
640
+ --amplify-components-checkbox-button-error-border-color: var(--amplify-colors-border-error);
641
+ --amplify-components-checkbox-button-disabled-border-color: var(--amplify-colors-border-disabled);
642
+ --amplify-components-checkbox-button-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
643
+ --amplify-components-checkbox-button-focus-border-color: var(--amplify-colors-transparent);
644
+ --amplify-components-checkbox-button-focus-outline-offset: var(--amplify-outline-offsets-medium);
645
+ --amplify-components-checkbox-button-focus-outline-width: var(--amplify-outline-widths-medium);
646
+ --amplify-components-checkbox-button-focus-outline-style: solid;
647
+ --amplify-components-checkbox-button-focus-outline-color: var(--amplify-colors-transparent);
648
+ --amplify-components-checkbox-button-before-border-color: var(--amplify-colors-border-primary);
649
+ --amplify-components-checkbox-button-before-border-style: solid;
650
+ --amplify-components-checkbox-button-before-border-radius: 20%;
651
+ --amplify-components-checkbox-button-before-border-width: var(--amplify-border-widths-medium);
652
+ --amplify-components-checkbox-button-before-height: 100%;
653
+ --amplify-components-checkbox-button-before-width: 100%;
654
+ --amplify-components-checkbox-button-color: var(--amplify-colors-white);
655
+ --amplify-components-checkbox-button-justify-content: center;
656
+ --amplify-components-checkbox-button-align-items: center;
657
+ --amplify-components-checkbox-button-position: relative;
658
+ --amplify-components-checkbox-disabled-cursor: not-allowed;
659
+ --amplify-components-checkbox-align-items: center;
660
+ --amplify-components-checkbox-cursor: pointer;
661
+ --amplify-components-card-elevated-box-shadow: var(--amplify-shadows-medium);
662
+ --amplify-components-card-elevated-border-color: transparent;
663
+ --amplify-components-card-elevated-border-style: solid;
664
+ --amplify-components-card-elevated-border-width: 0;
665
+ --amplify-components-card-elevated-border-radius: var(--amplify-radii-xs);
666
+ --amplify-components-card-elevated-background-color: var(--amplify-components-card-background-color);
667
+ --amplify-components-card-outlined-border-color: var(--amplify-colors-border-primary);
668
+ --amplify-components-card-outlined-border-style: solid;
669
+ --amplify-components-card-outlined-border-width: var(--amplify-border-widths-small);
670
+ --amplify-components-card-outlined-border-radius: var(--amplify-radii-xs);
671
+ --amplify-components-card-outlined-background-color: var(--amplify-components-card-background-color);
672
+ --amplify-components-card-padding: var(--amplify-space-medium);
673
+ --amplify-components-card-box-shadow: none;
674
+ --amplify-components-card-border-color: transparent;
675
+ --amplify-components-card-border-style: solid;
676
+ --amplify-components-card-border-width: 0;
677
+ --amplify-components-card-border-radius: var(--amplify-radii-xs);
428
678
  --amplify-components-card-background-color: var(--amplify-colors-background-primary);
429
- --amplify-components-button-large-padding: var(--amplify-components-fieldcontrol-large-padding);
430
- --amplify-components-button-small-padding: var(--amplify-components-fieldcontrol-small-padding);
431
- --amplify-components-button-link-loading-color: var(--amplify-colors-font-tertiary);
432
- --amplify-components-button-link-disabled-color: var(--amplify-colors-font-tertiary);
679
+ --amplify-components-button-large-padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
680
+ --amplify-components-button-large-padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
681
+ --amplify-components-button-large-padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
682
+ --amplify-components-button-large-padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
683
+ --amplify-components-button-large-font-size: var(--amplify-components-fieldcontrol-large-font-size);
684
+ --amplify-components-button-small-padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
685
+ --amplify-components-button-small-padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
686
+ --amplify-components-button-small-padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
687
+ --amplify-components-button-small-padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
688
+ --amplify-components-button-small-font-size: var(--amplify-components-fieldcontrol-small-font-size);
689
+ --amplify-components-button-link-loading-color: var(--amplify-colors-font-disabled);
690
+ --amplify-components-button-link-loading-background-color: transparent;
691
+ --amplify-components-button-link-loading-border-color: transparent;
692
+ --amplify-components-button-link-disabled-color: var(--amplify-colors-font-disabled);
693
+ --amplify-components-button-link-disabled-background-color: transparent;
694
+ --amplify-components-button-link-disabled-border-color: transparent;
695
+ --amplify-components-button-link-active-color: var(--amplify-colors-font-active);
696
+ --amplify-components-button-link-active-background-color: var(--amplify-colors-brand-primary-20);
697
+ --amplify-components-button-link-active-border-color: transparent;
698
+ --amplify-components-button-link-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
699
+ --amplify-components-button-link-focus-color: var(--amplify-colors-font-focus);
700
+ --amplify-components-button-link-focus-background-color: var(--amplify-colors-brand-primary-10);
701
+ --amplify-components-button-link-focus-border-color: transparent;
702
+ --amplify-components-button-link-hover-color: var(--amplify-colors-font-hover);
703
+ --amplify-components-button-link-hover-background-color: var(--amplify-colors-brand-primary-10);
704
+ --amplify-components-button-link-hover-border-color: transparent;
705
+ --amplify-components-button-link-color: var(--amplify-colors-font-interactive);
706
+ --amplify-components-button-link-background-color: transparent;
707
+ --amplify-components-button-link-border-color: transparent;
708
+ --amplify-components-button-link-border-width: 0;
709
+ --amplify-components-button-menu-disabled-color: var(--amplify-colors-font-disabled);
710
+ --amplify-components-button-menu-active-background-color: var(--amplify-colors-brand-primary-90);
711
+ --amplify-components-button-menu-active-color: var(--amplify-colors-font-inverse);
712
+ --amplify-components-button-menu-focus-background-color: var(--amplify-colors-brand-primary-80);
713
+ --amplify-components-button-menu-focus-color: var(--amplify-colors-font-inverse);
714
+ --amplify-components-button-menu-hover-background-color: var(--amplify-colors-brand-primary-80);
715
+ --amplify-components-button-menu-hover-color: var(--amplify-colors-font-inverse);
716
+ --amplify-components-button-menu-justify-content: start;
717
+ --amplify-components-button-menu-background-color: transparent;
718
+ --amplify-components-button-menu-border-width: 0;
719
+ --amplify-components-button-primary-active-color: var(--amplify-colors-font-inverse);
433
720
  --amplify-components-button-primary-active-background-color: var(--amplify-colors-brand-primary-100);
721
+ --amplify-components-button-primary-active-border-color: transparent;
722
+ --amplify-components-button-primary-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
723
+ --amplify-components-button-primary-focus-color: var(--amplify-colors-font-inverse);
434
724
  --amplify-components-button-primary-focus-background-color: var(--amplify-colors-brand-primary-90);
725
+ --amplify-components-button-primary-focus-border-color: transparent;
726
+ --amplify-components-button-primary-hover-color: var(--amplify-colors-font-inverse);
435
727
  --amplify-components-button-primary-hover-background-color: var(--amplify-colors-brand-primary-90);
436
- --amplify-components-button-primary-loading-color: var(--amplify-colors-font-tertiary);
728
+ --amplify-components-button-primary-hover-border-color: transparent;
729
+ --amplify-components-button-primary-loading-color: var(--amplify-colors-font-inverse);
437
730
  --amplify-components-button-primary-loading-background-color: var(--amplify-colors-background-tertiary);
438
- --amplify-components-button-primary-disabled-color: var(--amplify-colors-font-tertiary);
439
- --amplify-components-button-primary-disabled-background-color: var(--amplify-colors-background-tertiary);
731
+ --amplify-components-button-primary-loading-border-color: transparent;
732
+ --amplify-components-button-primary-disabled-color: var(--amplify-colors-font-disabled);
733
+ --amplify-components-button-primary-disabled-background-color: var(--amplify-colors-background-disabled);
734
+ --amplify-components-button-primary-disabled-border-color: transparent;
440
735
  --amplify-components-button-primary-color: var(--amplify-colors-font-inverse);
441
736
  --amplify-components-button-primary-background-color: var(--amplify-colors-brand-primary-80);
737
+ --amplify-components-button-primary-border-style: solid;
738
+ --amplify-components-button-primary-border-width: var(--amplify-border-widths-small);
739
+ --amplify-components-button-primary-border-color: transparent;
442
740
  --amplify-components-button-disabled-border-color: var(--amplify-colors-border-tertiary);
443
- --amplify-components-button-disabled-color: var(--amplify-colors-font-tertiary);
741
+ --amplify-components-button-disabled-background-color: transparent;
742
+ --amplify-components-button-disabled-color: var(--amplify-colors-font-disabled);
444
743
  --amplify-components-button-loading-border-color: var(--amplify-colors-border-tertiary);
744
+ --amplify-components-button-loading-background-color: transparent;
445
745
  --amplify-components-button-loading-color: var(--amplify-colors-font-tertiary);
446
746
  --amplify-components-button-active-border-color: var(--amplify-colors-brand-primary-100);
447
- --amplify-components-button-active-background-color: var(--amplify-colors-brand-primary-100);
448
- --amplify-components-button-active-color: var(--amplify-colors-font-inverse);
747
+ --amplify-components-button-active-background-color: var(--amplify-colors-brand-primary-20);
748
+ --amplify-components-button-active-color: var(--amplify-colors-font-active);
749
+ --amplify-components-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
750
+ --amplify-components-button-focus-border-color: var(--amplify-colors-border-focus);
751
+ --amplify-components-button-focus-background-color: var(--amplify-colors-brand-primary-10);
752
+ --amplify-components-button-focus-color: var(--amplify-colors-font-focus);
449
753
  --amplify-components-button-hover-border-color: var(--amplify-colors-brand-primary-60);
450
754
  --amplify-components-button-hover-background-color: var(--amplify-colors-brand-primary-10);
451
- --amplify-components-button-color: var(--amplify-colors-brand-primary-80);
452
- --amplify-components-button-border-color: var(--amplify-colors-brand-primary-20);
453
- --amplify-components-button-transition-duration: var(--amplify-components-fieldcontrol-transition-duration);
755
+ --amplify-components-button-hover-color: var(--amplify-colors-font-focus);
756
+ --amplify-components-button-color: var(--amplify-colors-font-primary);
454
757
  --amplify-components-button-border-radius: var(--amplify-components-fieldcontrol-border-radius);
758
+ --amplify-components-button-border-style: var(--amplify-components-fieldcontrol-border-style);
759
+ --amplify-components-button-border-width: var(--amplify-components-fieldcontrol-border-width);
760
+ --amplify-components-button-border-color: var(--amplify-components-fieldcontrol-border-color);
761
+ --amplify-components-button-padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
762
+ --amplify-components-button-padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
763
+ --amplify-components-button-padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
764
+ --amplify-components-button-padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
765
+ --amplify-components-button-line-height: var(--amplify-components-fieldcontrol-line-height);
766
+ --amplify-components-button-font-size: var(--amplify-components-fieldcontrol-font-size);
767
+ --amplify-components-button-transition-duration: var(--amplify-components-fieldcontrol-transition-duration);
768
+ --amplify-components-button-font-weight: var(--amplify-font-weights-bold);
769
+ --amplify-components-badge-large-padding-horizontal: var(--amplify-space-medium);
770
+ --amplify-components-badge-large-padding-vertical: var(--amplify-space-small);
771
+ --amplify-components-badge-large-font-size: var(--amplify-font-sizes-medium);
772
+ --amplify-components-badge-small-padding-horizontal: var(--amplify-space-xs);
773
+ --amplify-components-badge-small-padding-vertical: var(--amplify-space-xxs);
774
+ --amplify-components-badge-small-font-size: var(--amplify-font-sizes-xs);
455
775
  --amplify-components-badge-error-background-color: var(--amplify-colors-background-error);
776
+ --amplify-components-badge-error-color: var(--amplify-colors-font-error);
456
777
  --amplify-components-badge-success-background-color: var(--amplify-colors-background-success);
778
+ --amplify-components-badge-success-color: var(--amplify-colors-font-success);
457
779
  --amplify-components-badge-warning-background-color: var(--amplify-colors-background-warning);
780
+ --amplify-components-badge-warning-color: var(--amplify-colors-font-warning);
458
781
  --amplify-components-badge-info-background-color: var(--amplify-colors-background-info);
782
+ --amplify-components-badge-info-color: var(--amplify-colors-font-info);
783
+ --amplify-components-badge-border-radius: var(--amplify-radii-xl);
459
784
  --amplify-components-badge-background-color: var(--amplify-colors-background-tertiary);
785
+ --amplify-components-badge-padding-horizontal: var(--amplify-space-small);
786
+ --amplify-components-badge-padding-vertical: var(--amplify-space-xs);
787
+ --amplify-components-badge-text-align: center;
788
+ --amplify-components-badge-font-size: var(--amplify-font-sizes-small);
789
+ --amplify-components-badge-font-weight: var(--amplify-font-weights-semibold);
790
+ --amplify-components-badge-line-height: 1;
791
+ --amplify-components-badge-color: var(--amplify-colors-font-primary);
460
792
  --amplify-components-alert-success-background-color: var(--amplify-colors-background-success);
793
+ --amplify-components-alert-success-color: var(--amplify-colors-font-success);
461
794
  --amplify-components-alert-warning-background-color: var(--amplify-colors-background-warning);
795
+ --amplify-components-alert-warning-color: var(--amplify-colors-font-warning);
462
796
  --amplify-components-alert-error-background-color: var(--amplify-colors-background-error);
797
+ --amplify-components-alert-error-color: var(--amplify-colors-font-error);
463
798
  --amplify-components-alert-info-background-color: var(--amplify-colors-background-info);
799
+ --amplify-components-alert-info-color: var(--amplify-colors-font-info);
800
+ --amplify-components-alert-heading-font-weight: var(--amplify-font-weights-bold);
801
+ --amplify-components-alert-heading-font-size: var(--amplify-font-sizes-medium);
802
+ --amplify-components-alert-icon-size: var(--amplify-font-sizes-xl);
803
+ --amplify-components-alert-padding-inline: var(--amplify-space-medium);
804
+ --amplify-components-alert-padding-block: var(--amplify-space-small);
464
805
  --amplify-components-alert-background-color: var(--amplify-colors-background-tertiary);
465
- --amplify-components-tabs-item-disabled-color: var(--amplify-colors-font-disabled);
466
- --amplify-components-tabs-item-active-border-color: var(--amplify-colors-font-interactive);
467
- --amplify-components-tabs-item-active-color: var(--amplify-colors-font-interactive);
468
- --amplify-components-tabs-item-focus-color: var(--amplify-colors-font-focus);
469
- --amplify-components-tabs-item-hover-color: var(--amplify-colors-font-hover);
470
- --amplify-components-radio-button-focus-box-shadow: 0 0 0 1px var(--amplify-colors-focus);
471
- --amplify-components-radio-button-focus-border-color: var(--amplify-colors-focus);
472
- --amplify-components-link-hover-color: var(--amplify-colors-font-hover);
473
- --amplify-components-link-focus-color: var(--amplify-colors-font-focus);
474
- --amplify-components-link-color: var(--amplify-colors-font-interactive);
475
- --amplify-components-link-active-color: var(--amplify-colors-font-active);
476
- --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-focus);
477
- --amplify-components-fieldcontrol-focus-border-color: var(--amplify-colors-focus);
478
- --amplify-components-fieldcontrol-quiet-focus-box-shadow: 0 1px var(--amplify-colors-focus);
479
- --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: var(--amplify-colors-focus);
480
- --amplify-components-button-large-line-height: var(--amplify-components-fieldcontrol-large-font-size);
481
- --amplify-components-button-large-font-size: var(--amplify-components-fieldcontrol-large-font-size);
482
- --amplify-components-button-small-line-height: var(--amplify-components-fieldcontrol-small-font-size);
483
- --amplify-components-button-small-font-size: var(--amplify-components-fieldcontrol-small-font-size);
484
- --amplify-components-button-link-active-color: var(--amplify-colors-font-active);
485
- --amplify-components-button-link-focus-color: var(--amplify-colors-font-focus);
486
- --amplify-components-button-link-hover-color: var(--amplify-colors-font-hover);
487
- --amplify-components-button-link-color: var(--amplify-colors-font-interactive);
488
- --amplify-components-button-focus-box-shadow: var(--amplify-colors-focus) 0px 0px 0px 1px;
489
- --amplify-components-button-focus-border-color: var(--amplify-colors-focus);
490
- --amplify-components-button-focus-color: var(--amplify-colors-focus);
491
- --amplify-components-button-hover-color: var(--amplify-colors-focus);
492
- --amplify-components-button-line-height: var(--amplify-components-fieldcontrol-font-size);
493
- --amplify-components-button-font-size: var(--amplify-components-fieldcontrol-font-size);
806
+ --amplify-components-alert-color: var(--amplify-colors-font-primary);
494
807
  }
495
808
 
496
809
  html {
@@ -507,6 +820,10 @@ html {
507
820
  /* protect against external styles */
508
821
  }
509
822
 
823
+ [data-amplify-theme] * {
824
+ box-sizing: border-box;
825
+ }
826
+
510
827
  .sr-only {
511
828
  position: absolute !important;
512
829
  width: 1px !important;
@@ -561,45 +878,51 @@ strong.amplify-text {
561
878
  }
562
879
 
563
880
  .amplify-badge {
881
+ color: var(--amplify-components-badge-color);
564
882
  background-color: var(--amplify-components-badge-background-color);
565
883
  border-radius: var(--amplify-components-badge-border-radius);
566
884
  display: inline-flex;
567
885
  font-size: var(--amplify-components-badge-font-size);
568
886
  font-weight: var(--amplify-components-badge-font-weight);
569
- padding: var(--amplify-components-badge-padding);
887
+ padding: var(--amplify-components-badge-padding-vertical) var(--amplify-components-badge-padding-horizontal);
570
888
  text-align: var(--amplify-components-badge-text-align);
571
889
  line-height: var(--amplify-components-badge-line-height);
572
890
  }
573
891
  .amplify-badge[data-variation=info] {
892
+ color: var(--amplify-components-badge-info-color);
574
893
  background-color: var(--amplify-components-badge-info-background-color);
575
894
  }
576
895
  .amplify-badge[data-variation=error] {
896
+ color: var(--amplify-components-badge-error-color);
577
897
  background-color: var(--amplify-components-badge-error-background-color);
578
898
  }
579
899
  .amplify-badge[data-variation=warning] {
900
+ color: var(--amplify-components-badge-warning-color);
580
901
  background-color: var(--amplify-components-badge-warning-background-color);
581
902
  }
582
903
  .amplify-badge[data-variation=success] {
904
+ color: var(--amplify-components-badge-success-color);
583
905
  background-color: var(--amplify-components-badge-success-background-color);
584
906
  }
585
907
  .amplify-badge[data-size=small] {
586
908
  font-size: var(--amplify-components-badge-small-font-size);
587
- padding: var(--amplify-components-badge-small-padding);
909
+ padding: var(--amplify-components-badge-small-padding-vertical) var(--amplify-components-badge-small-padding-horizontal);
588
910
  }
589
911
  .amplify-badge[data-size=large] {
590
912
  font-size: var(--amplify-components-badge-large-font-size);
591
- padding: var(--amplify-components-badge-large-padding);
913
+ padding: var(--amplify-components-badge-large-padding-vertical) var(--amplify-components-badge-large-padding-horizontal);
592
914
  }
593
915
 
594
916
  /*
595
917
  * Button base styles
596
918
  */
597
919
  .amplify-button {
598
- display: inline-block;
920
+ display: inline-flex;
921
+ justify-content: center;
922
+ align-items: center;
599
923
  border-radius: var(--amplify-components-button-border-radius);
600
924
  box-sizing: border-box;
601
925
  font-weight: var(--amplify-components-button-font-weight);
602
- text-align: var(--amplify-components-button-text-align);
603
926
  transition: all var(--amplify-components-button-transition-duration);
604
927
  border-width: var(--amplify-components-button-border-width);
605
928
  border-style: var(--amplify-components-button-border-style);
@@ -607,16 +930,28 @@ strong.amplify-text {
607
930
  border-radius: var(--amplify-components-button-border-radius);
608
931
  color: var(--amplify-components-button-color);
609
932
  font-size: var(--amplify-components-button-font-size);
610
- line-height: var(--amplify-components-button-font-size);
611
- padding: var(--amplify-components-button-padding);
933
+ line-height: var(--amplify-components-button-line-height);
934
+ -webkit-padding-before: var(--amplify-components-button-padding-block-start);
935
+ padding-block-start: var(--amplify-components-button-padding-block-start);
936
+ -webkit-padding-after: var(--amplify-components-button-padding-block-end);
937
+ padding-block-end: var(--amplify-components-button-padding-block-end);
938
+ -webkit-padding-start: var(--amplify-components-button-padding-inline-start);
939
+ padding-inline-start: var(--amplify-components-button-padding-inline-start);
940
+ -webkit-padding-end: var(--amplify-components-button-padding-inline-end);
941
+ padding-inline-end: var(--amplify-components-button-padding-inline-end);
942
+ -webkit-user-select: none;
943
+ -moz-user-select: none;
944
+ -ms-user-select: none;
945
+ user-select: none;
946
+ cursor: pointer;
612
947
  }
613
948
  .amplify-button:hover {
614
949
  background-color: var(--amplify-components-button-hover-background-color);
615
950
  border-color: var(--amplify-components-button-hover-border-color);
616
951
  color: var(--amplify-components-button-hover-color);
617
- cursor: pointer;
618
952
  }
619
953
  .amplify-button:focus {
954
+ background-color: var(--amplify-components-button-hover-background-color);
620
955
  border-color: var(--amplify-components-button-focus-border-color);
621
956
  color: var(--amplify-components-button-focus-color);
622
957
  box-shadow: var(--amplify-components-button-focus-box-shadow);
@@ -640,26 +975,57 @@ strong.amplify-text {
640
975
  .amplify-button[data-fullwidth=true] {
641
976
  width: 100%;
642
977
  }
978
+ .amplify-button[data-variation=menu] {
979
+ border-width: var(--amplify-components-button-menu-border-width);
980
+ background-color: var(--amplify-components-button-menu-background-color);
981
+ justify-content: var(--amplify-components-button-menu-justify-content);
982
+ }
983
+ .amplify-button[data-variation=menu]:hover {
984
+ color: var(--amplify-components-button-menu-hover-color);
985
+ background-color: var(--amplify-components-button-menu-hover-background-color);
986
+ }
987
+ .amplify-button[data-variation=menu]:focus {
988
+ box-shadow: none;
989
+ color: var(--amplify-components-button-menu-focus-color);
990
+ background-color: var(--amplify-components-button-menu-focus-background-color);
991
+ }
992
+ .amplify-button[data-variation=menu]:active {
993
+ color: var(--amplify-components-button-menu-active-color);
994
+ background-color: var(--amplify-components-button-menu-active-background-color);
995
+ }
996
+ .amplify-button[data-variation=menu][disabled] {
997
+ color: var(--amplify-components-button-menu-disabled-color);
998
+ }
643
999
  .amplify-button[data-variation=primary] {
644
1000
  border-width: var(--amplify-components-button-primary-border-width);
645
1001
  background-color: var(--amplify-components-button-primary-background-color);
1002
+ border-color: var(--amplify-components-button-primary-border-color);
646
1003
  color: var(--amplify-components-button-primary-color);
647
1004
  }
648
1005
  .amplify-button[data-variation=primary]:hover {
649
1006
  background-color: var(--amplify-components-button-primary-hover-background-color);
1007
+ border-color: var(--amplify-components-button-primary-hover-border-color);
1008
+ color: var(--amplify-components-button-primary-hover-color);
650
1009
  }
651
1010
  .amplify-button[data-variation=primary]:focus {
652
1011
  background-color: var(--amplify-components-button-primary-focus-background-color);
1012
+ border-color: var(--amplify-components-button-primary-focus-border-color);
1013
+ color: var(--amplify-components-button-primary-focus-color);
1014
+ box-shadow: var(--amplify-components-button-primary-focus-box-shadow);
653
1015
  }
654
1016
  .amplify-button[data-variation=primary]:active {
655
1017
  background-color: var(--amplify-components-button-primary-active-background-color);
1018
+ border-color: var(--amplify-components-button-primary-active-border-color);
1019
+ color: var(--amplify-components-button-primary-active-color);
656
1020
  }
657
1021
  .amplify-button[data-variation=primary][data-loading=true] {
658
1022
  background-color: var(--amplify-components-button-primary-loading-background-color);
1023
+ border-color: var(--amplify-components-button-primary-loading-border-color);
659
1024
  color: var(--amplify-components-button-primary-loading-color);
660
1025
  }
661
1026
  .amplify-button[data-variation=primary][disabled] {
662
1027
  background-color: var(--amplify-components-button-primary-disabled-background-color);
1028
+ border-color: var(--amplify-components-button-primary-disabled-border-color);
663
1029
  color: var(--amplify-components-button-primary-disabled-color);
664
1030
  }
665
1031
  .amplify-button[data-variation=link] {
@@ -668,38 +1034,54 @@ strong.amplify-text {
668
1034
  color: var(--amplify-components-button-link-color);
669
1035
  }
670
1036
  .amplify-button[data-variation=link]:hover {
1037
+ background-color: var(--amplify-components-button-link-hover-background-color);
1038
+ border-color: var(--amplify-components-button-link-hover-border-color);
671
1039
  color: var(--amplify-components-button-link-hover-color);
672
- text-decoration: underline;
673
1040
  }
674
1041
  .amplify-button[data-variation=link]:focus {
1042
+ background-color: var(--amplify-components-button-link-focus-background-color);
1043
+ border-color: var(--amplify-components-button-link-focus-border-color);
675
1044
  color: var(--amplify-components-button-link-focus-color);
676
- text-decoration: underline;
677
- box-shadow: none;
678
- }
679
- .amplify-button[data-variation=link]:focus-visible {
680
- outline: 2px solid black;
1045
+ box-shadow: var(--amplify-components-button-link-focus-box-shadow);
681
1046
  }
682
1047
  .amplify-button[data-variation=link]:active {
1048
+ background-color: var(--amplify-components-button-link-active-background-color);
1049
+ border-color: var(--amplify-components-button-link-active-border-color);
683
1050
  color: var(--amplify-components-button-link-active-color);
684
- text-decoration: underline;
685
1051
  }
686
1052
  .amplify-button[data-variation=link][disabled] {
1053
+ background-color: var(--amplify-components-button-link-disabled-background-color);
1054
+ border-color: var(--amplify-components-button-link-disabled-border-color);
687
1055
  color: var(--amplify-components-button-link-disabled-color);
688
1056
  text-decoration: none;
689
1057
  }
690
1058
  .amplify-button[data-variation=link][data-loading=true] {
1059
+ background-color: var(--amplify-components-button-link-loading-background-color);
1060
+ border-color: var(--amplify-components-button-link-loading-border-color);
691
1061
  color: var(--amplify-components-button-link-loading-color);
692
1062
  text-decoration: none;
693
1063
  }
694
1064
  .amplify-button[data-size=small] {
695
1065
  font-size: var(--amplify-components-button-small-font-size);
696
- line-height: var(--amplify-components-button-small-font-size);
697
- padding: var(--amplify-components-button-small-padding);
1066
+ -webkit-padding-before: var(--amplify-components-button-small-padding-block-start);
1067
+ padding-block-start: var(--amplify-components-button-small-padding-block-start);
1068
+ -webkit-padding-after: var(--amplify-components-button-small-padding-block-end);
1069
+ padding-block-end: var(--amplify-components-button-small-padding-block-end);
1070
+ -webkit-padding-start: var(--amplify-components-button-small-padding-inline-start);
1071
+ padding-inline-start: var(--amplify-components-button-small-padding-inline-start);
1072
+ -webkit-padding-end: var(--amplify-components-button-small-padding-inline-end);
1073
+ padding-inline-end: var(--amplify-components-button-small-padding-inline-end);
698
1074
  }
699
1075
  .amplify-button[data-size=large] {
700
1076
  font-size: var(--amplify-components-button-large-font-size);
701
- line-height: var(--amplify-components-button-large-font-size);
702
- padding: var(--amplify-components-button-large-padding);
1077
+ -webkit-padding-before: var(--amplify-components-button-large-padding-block-start);
1078
+ padding-block-start: var(--amplify-components-button-large-padding-block-start);
1079
+ -webkit-padding-after: var(--amplify-components-button-large-padding-block-end);
1080
+ padding-block-end: var(--amplify-components-button-large-padding-block-end);
1081
+ -webkit-padding-start: var(--amplify-components-button-large-padding-inline-start);
1082
+ padding-inline-start: var(--amplify-components-button-large-padding-inline-start);
1083
+ -webkit-padding-end: var(--amplify-components-button-large-padding-inline-end);
1084
+ padding-inline-end: var(--amplify-components-button-large-padding-inline-end);
703
1085
  }
704
1086
 
705
1087
  @media (prefers-reduced-motion: reduce) {
@@ -708,6 +1090,7 @@ strong.amplify-text {
708
1090
  }
709
1091
  }
710
1092
  .amplify-field__description {
1093
+ color: var(--amplify-components-fieldmessages-description-color);
711
1094
  font-style: var(--amplify-components-fieldmessages-description-font-style);
712
1095
  font-size: var(--amplify-components-fieldmessages-description-font-size);
713
1096
  }
@@ -719,7 +1102,6 @@ strong.amplify-text {
719
1102
 
720
1103
  .amplify-heading {
721
1104
  color: var(--amplify-components-heading-color);
722
- display: block;
723
1105
  line-height: var(--amplify-components-heading-line-height);
724
1106
  display: block;
725
1107
  }
@@ -764,11 +1146,9 @@ h6.amplify-heading {
764
1146
  height: var(--amplify-components-icon-height);
765
1147
  line-height: var(--amplify-components-icon-line-height);
766
1148
  }
767
- .amplify-icon[data-size=small] {
768
- height: var(--amplify-components-icon-small-height);
769
- }
770
- .amplify-icon[data-size=large] {
771
- height: var(--amplify-components-icon-large-height);
1149
+ .amplify-icon > svg {
1150
+ height: var(--amplify-components-icon-height);
1151
+ width: var(--amplify-components-icon-height);
772
1152
  }
773
1153
 
774
1154
  .amplify-image {
@@ -784,6 +1164,7 @@ h6.amplify-heading {
784
1164
  color: var(--amplify-components-link-color);
785
1165
  -webkit-text-decoration: var(--amplify-components-link-text-decoration);
786
1166
  text-decoration: var(--amplify-components-link-text-decoration);
1167
+ cursor: pointer;
787
1168
  }
788
1169
  .amplify-link:active {
789
1170
  color: var(--amplify-components-link-active-color);
@@ -812,6 +1193,120 @@ h6.amplify-heading {
812
1193
  font-size: var(--amplify-components-link-large-font-size);
813
1194
  }
814
1195
 
1196
+ .amplify-loader {
1197
+ width: var(--amplify-components-loader-width);
1198
+ height: var(--amplify-components-loader-height);
1199
+ fill: none;
1200
+ stroke: var(--amplify-components-loader-stroke-empty);
1201
+ }
1202
+ .amplify-loader circle:last-of-type {
1203
+ transform-origin: center center;
1204
+ -webkit-animation-name: amplify-loader-circular;
1205
+ animation-name: amplify-loader-circular;
1206
+ -webkit-animation-timing-function: linear;
1207
+ animation-timing-function: linear;
1208
+ -webkit-animation-iteration-count: infinite;
1209
+ animation-iteration-count: infinite;
1210
+ -webkit-animation-duration: var(--amplify-components-loader-animation-duration);
1211
+ animation-duration: var(--amplify-components-loader-animation-duration);
1212
+ stroke: var(--amplify-components-loader-stroke-filled);
1213
+ stroke-linecap: var(--amplify-components-loader-stroke-linecap);
1214
+ }
1215
+ @media (prefers-reduced-motion) {
1216
+ .amplify-loader circle:last-of-type {
1217
+ -webkit-animation: none;
1218
+ animation: none;
1219
+ stroke-dasharray: 100% 200%;
1220
+ stroke-dashoffset: 50%;
1221
+ }
1222
+ }
1223
+ .amplify-loader[data-size=small] {
1224
+ width: var(--amplify-components-loader-small-width);
1225
+ height: var(--amplify-components-loader-small-height);
1226
+ }
1227
+ .amplify-loader[data-size=large] {
1228
+ width: var(--amplify-components-loader-large-width);
1229
+ height: var(--amplify-components-loader-large-height);
1230
+ }
1231
+ .amplify-loader line:last-of-type {
1232
+ stroke: var(--amplify-components-loader-linear-stroke-filled);
1233
+ stroke-dasharray: 50% 200%;
1234
+ -webkit-animation-name: amplify-loader-linear;
1235
+ animation-name: amplify-loader-linear;
1236
+ -webkit-animation-duration: var(--amplify-components-loader-linear-animation-duration);
1237
+ animation-duration: var(--amplify-components-loader-linear-animation-duration);
1238
+ -webkit-animation-timing-function: linear;
1239
+ animation-timing-function: linear;
1240
+ -webkit-animation-iteration-count: infinite;
1241
+ animation-iteration-count: infinite;
1242
+ }
1243
+ @media (prefers-reduced-motion) {
1244
+ .amplify-loader line:last-of-type {
1245
+ -webkit-animation: none;
1246
+ animation: none;
1247
+ stroke-dashoffset: -50%;
1248
+ }
1249
+ }
1250
+ .amplify-loader[data-variation=linear] {
1251
+ width: var(--amplify-components-loader-linear-width);
1252
+ min-width: var(--amplify-components-loader-linear-min-width);
1253
+ height: var(--amplify-components-loader-linear-height);
1254
+ stroke: var(--amplify-components-loader-linear-stroke-empty);
1255
+ stroke-width: var(--amplify-components-loader-linear-stroke-width);
1256
+ stroke-linecap: var(--amplify-components-loader-linear-stroke-linecap);
1257
+ }
1258
+ .amplify-loader[data-variation=linear][data-size=small] {
1259
+ height: var(--amplify-components-loader-linear-small-height);
1260
+ stroke-width: var(--amplify-components-loader-linear-small-stroke-width);
1261
+ }
1262
+ .amplify-loader[data-variation=linear][data-size=large] {
1263
+ height: var(--amplify-components-loader-linear-large-height);
1264
+ stroke-width: var(--amplify-components-loader-linear-large-stroke-width);
1265
+ }
1266
+
1267
+ @-webkit-keyframes amplify-loader-circular {
1268
+ 0% {
1269
+ stroke-dasharray: 100% 200%;
1270
+ transform: rotate(120deg);
1271
+ }
1272
+ 50% {
1273
+ stroke-dasharray: 20% 400%;
1274
+ }
1275
+ 100% {
1276
+ stroke-dasharray: 100% 200%;
1277
+ transform: rotate(480deg);
1278
+ }
1279
+ }
1280
+
1281
+ @keyframes amplify-loader-circular {
1282
+ 0% {
1283
+ stroke-dasharray: 100% 200%;
1284
+ transform: rotate(120deg);
1285
+ }
1286
+ 50% {
1287
+ stroke-dasharray: 20% 400%;
1288
+ }
1289
+ 100% {
1290
+ stroke-dasharray: 100% 200%;
1291
+ transform: rotate(480deg);
1292
+ }
1293
+ }
1294
+ @-webkit-keyframes amplify-loader-linear {
1295
+ 0% {
1296
+ stroke-dashoffset: 200%;
1297
+ }
1298
+ 100% {
1299
+ stroke-dashoffset: -50%;
1300
+ }
1301
+ }
1302
+ @keyframes amplify-loader-linear {
1303
+ 0% {
1304
+ stroke-dashoffset: 200%;
1305
+ }
1306
+ 100% {
1307
+ stroke-dashoffset: -50%;
1308
+ }
1309
+ }
815
1310
  .amplify-placeholder {
816
1311
  -webkit-animation-direction: alternate;
817
1312
  animation-direction: alternate;
@@ -824,6 +1319,7 @@ h6.amplify-heading {
824
1319
  border-radius: var(--amplify-components-placeholder-border-radius);
825
1320
  height: var(--amplify-components-placeholder-default-height);
826
1321
  width: 100%;
1322
+ display: block;
827
1323
  }
828
1324
  .amplify-placeholder[data-size=small] {
829
1325
  height: var(--amplify-components-placeholder-small-height);
@@ -865,34 +1361,268 @@ h6.amplify-heading {
865
1361
  justify-content: var(--amplify-components-flex-justify-content);
866
1362
  }
867
1363
 
868
- .amplify-alert {
869
- background-color: var(--amplify-components-alert-background-color);
870
- padding: var(--amplify-components-alert-padding);
1364
+ .amplify-grid {
1365
+ display: grid;
1366
+ }
1367
+
1368
+ .amplify-scrollview {
1369
+ display: block;
1370
+ overflow: scroll;
1371
+ }
1372
+ .amplify-scrollview[data-orientation=horizontal] {
1373
+ overflow-x: scroll;
1374
+ overflow-y: initial;
1375
+ }
1376
+ .amplify-scrollview[data-orientation=vertical] {
1377
+ overflow-x: initial;
1378
+ overflow-y: scroll;
1379
+ }
1380
+
1381
+ .amplify-alert {
1382
+ background-color: var(--amplify-components-alert-background-color);
1383
+ padding-block: var(--amplify-components-alert-padding-block);
1384
+ padding-inline: var(--amplify-components-alert-padding-inline);
1385
+ }
1386
+ .amplify-alert[data-variation=info] {
1387
+ color: var(--amplify-components-alert-info-color);
1388
+ background-color: var(--amplify-components-alert-info-background-color);
1389
+ }
1390
+ .amplify-alert[data-variation=error] {
1391
+ color: var(--amplify-components-alert-error-color);
1392
+ background-color: var(--amplify-components-alert-error-background-color);
1393
+ }
1394
+ .amplify-alert[data-variation=warning] {
1395
+ color: var(--amplify-components-alert-warning-color);
1396
+ background-color: var(--amplify-components-alert-warning-background-color);
1397
+ }
1398
+ .amplify-alert[data-variation=success] {
1399
+ color: var(--amplify-components-alert-success-color);
1400
+ background-color: var(--amplify-components-alert-success-background-color);
1401
+ }
1402
+
1403
+ .amplify-alert__icon {
1404
+ font-size: var(--amplify-components-alert-icon-size);
1405
+ }
1406
+
1407
+ .amplify-alert__heading {
1408
+ display: block;
1409
+ font-weight: var(--amplify-components-alert-heading-font-weight);
1410
+ font-size: var(--amplify-components-alert-heading-font-size);
1411
+ }
1412
+
1413
+ .amplify-alert__body {
1414
+ color: inherit;
1415
+ display: block;
1416
+ }
1417
+
1418
+ .amplify-button.amplify-alert__dismiss {
1419
+ color: inherit;
1420
+ }
1421
+
1422
+ /* Center by default */
1423
+ [data-amplify-authenticator] {
1424
+ display: grid;
1425
+ }
1426
+
1427
+ [data-amplify-authenticator][data-variation=modal] {
1428
+ display: grid;
1429
+ width: 100vw;
1430
+ height: 100vh;
1431
+ overflow: auto;
1432
+ background-color: var(--amplify-colors-background-secondary, #e1e5e9);
1433
+ /* Override browser default `body { margin: 8px }` */
1434
+ position: fixed;
1435
+ top: 0;
1436
+ left: 0;
1437
+ /* Having a z-index at least "wins" by default */
1438
+ z-index: 1;
1439
+ }
1440
+
1441
+ /* Texture for modal */
1442
+ [data-amplify-authenticator][data-variation=modal]::before {
1443
+ position: absolute;
1444
+ width: 100%;
1445
+ height: 100%;
1446
+ content: "";
1447
+ 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");
1448
+ opacity: 0.35;
1449
+ filter: "contrast(120%) brightness(120%)";
1450
+ }
1451
+
1452
+ [data-amplify-authenticator] [data-amplify-container] {
1453
+ /* Fix z-index of texture being over the Authenticator */
1454
+ position: relative;
1455
+ place-self: center;
1456
+ width: 30rem;
1457
+ }
1458
+ @media (max-width: 30rem) {
1459
+ [data-amplify-authenticator] [data-amplify-container] {
1460
+ width: 100%;
1461
+ }
1462
+ }
1463
+
1464
+ [data-amplify-authenticator] [data-amplify-router] [data-amplify-footer] {
1465
+ padding-bottom: var(--amplify-space-medium);
1466
+ text-align: center;
1467
+ }
1468
+
1469
+ [data-amplify-authenticator] [data-amplify-router] {
1470
+ background-color: var(--amplify-colors-background-primary);
1471
+ box-shadow: var(--amplify-shadows-medium);
1472
+ }
1473
+
1474
+ [data-amplify-authenticator] [data-amplify-form] {
1475
+ padding: var(--amplify-space-xl);
1476
+ }
1477
+
1478
+ [data-amplify-authenticator] [data-state=inactive][role=tab] {
1479
+ background-color: var(--amplify-colors-background-secondary);
1480
+ }
1481
+
1482
+ /* Remove double-border between the password field & reveal button */
1483
+ [data-amplify-authenticator] .amplify-passwordfield .amplify-button:not(:focus) {
1484
+ border-left: none;
1485
+ }
1486
+
1487
+ [data-amplify-authenticator] .amplify-phonenumberfield .amplify-countrycodeselect {
1488
+ height: 100%;
1489
+ }
1490
+
1491
+ [data-amplify-authenticator] .amplify-phonenumberfield .amplify-select__wrapper {
1492
+ height: 100%;
1493
+ }
1494
+
1495
+ /* Remove double-border between the phone field & country select */
1496
+ [data-amplify-authenticator] .amplify-phonenumberfield select:not(:focus) {
1497
+ border-right: none;
1498
+ }
1499
+
1500
+ [data-amplify-authenticator] [data-or-container] {
1501
+ position: relative;
1502
+ color: gray;
1503
+ align-items: center;
1504
+ justify-content: center;
1505
+ padding: 1.5rem 0px;
1506
+ }
1507
+ [data-amplify-authenticator] [data-or-container] [data-or-line] {
1508
+ position: absolute;
1509
+ background: var(--amplify-colors-white);
1510
+ z-index: 1;
1511
+ padding: 0px 1.5rem;
1512
+ }
1513
+
1514
+ .amplify-card {
1515
+ background-color: var(--amplify-components-card-background-color);
1516
+ border-radius: var(--amplify-components-card-border-radius);
1517
+ border-width: var(--amplify-components-card-border-width);
1518
+ border-style: var(--amplify-components-card-border-style);
1519
+ border-color: var(--amplify-components-card-border-color);
1520
+ box-shadow: var(--amplify-components-card-box-shadow);
1521
+ display: inline-block;
1522
+ padding: var(--amplify-components-card-padding);
1523
+ }
1524
+ .amplify-card[data-variation=outlined] {
1525
+ background-color: var(--amplify-components-card-outlined-background-color);
1526
+ border-radius: var(--amplify-components-card-outlined-border-radius);
1527
+ border-width: var(--amplify-components-card-outlined-border-width);
1528
+ border-style: var(--amplify-components-card-outlined-border-style);
1529
+ border-color: var(--amplify-components-card-outlined-border-color);
1530
+ box-shadow: var(--amplify-components-card-outlined-box-shadow);
1531
+ }
1532
+ .amplify-card[data-variation=elevated] {
1533
+ background-color: var(--amplify-components-card-elevated-background-color);
1534
+ border-radius: var(--amplify-components-card-elevated-border-radius);
1535
+ border-width: var(--amplify-components-card-elevated-border-width);
1536
+ border-style: var(--amplify-components-card-elevated-border-style);
1537
+ border-color: var(--amplify-components-card-elevated-border-color);
1538
+ box-shadow: var(--amplify-components-card-elevated-box-shadow);
1539
+ }
1540
+
1541
+ .amplify-collection {
1542
+ flex-direction: column;
1543
+ }
1544
+
1545
+ .amplify-collection-search {
1546
+ flex-direction: row;
1547
+ justify-content: center;
1548
+ }
1549
+
1550
+ .amplify-collection-pagination {
1551
+ justify-content: center;
871
1552
  }
872
- .amplify-alert[data-variation=info] {
873
- background-color: var(--amplify-components-alert-info-background-color);
1553
+
1554
+ .amplify-checkbox {
1555
+ cursor: var(--amplify-components-checkbox-cursor);
1556
+ align-items: var(--amplify-components-checkbox-align-items);
1557
+ gap: inherit;
874
1558
  }
875
- .amplify-alert[data-variation=error] {
876
- background-color: var(--amplify-components-alert-error-background-color);
1559
+ .amplify-checkbox[data-disabled=true] {
1560
+ cursor: var(--amplify-components-checkbox-disabled-cursor);
877
1561
  }
878
- .amplify-alert[data-variation=warning] {
879
- background-color: var(--amplify-components-alert-warning-background-color);
1562
+
1563
+ .amplify-checkbox__button {
1564
+ position: var(--amplify-components-checkbox-button-position);
1565
+ align-items: var(--amplify-components-checkbox-button-align-items);
1566
+ justify-content: var(--amplify-components-checkbox-button-justify-content);
1567
+ color: var(--amplify-components-checkbox-button-color);
1568
+ }
1569
+ .amplify-checkbox__button::before {
1570
+ content: "";
1571
+ display: inline-block;
1572
+ position: absolute;
1573
+ box-sizing: border-box;
1574
+ width: var(--amplify-components-checkbox-button-before-width);
1575
+ height: var(--amplify-components-checkbox-button-before-height);
1576
+ border-width: var(--amplify-components-checkbox-button-before-border-width);
1577
+ border-radius: var(--amplify-components-checkbox-button-before-border-radius);
1578
+ border-style: var(--amplify-components-checkbox-button-before-border-style);
1579
+ border-color: var(--amplify-components-checkbox-button-before-border-color);
1580
+ }
1581
+ .amplify-checkbox__button[data-focus=true]::before {
1582
+ outline-color: var(--amplify-components-checkbox-button-focus-outline-color);
1583
+ outline-style: var(--amplify-components-checkbox-button-focus-outline-style);
1584
+ outline-width: var(--amplify-components-checkbox-button-focus-outline-width);
1585
+ outline-offset: var(--amplify-components-checkbox-button-focus-outline-offset);
1586
+ border-color: var(--amplify-components-checkbox-button-focus-border-color);
1587
+ box-shadow: var(--amplify-components-checkbox-button-focus-box-shadow);
1588
+ }
1589
+ .amplify-checkbox__button[data-error=true]::before {
1590
+ border-color: var(--amplify-components-checkbox-button-error-border-color);
1591
+ }
1592
+ .amplify-checkbox__button[data-error=true][data-focus=true]::before {
1593
+ border-color: var(--amplify-components-checkbox-button-error-focus-border-color);
1594
+ box-shadow: var(--amplify-components-checkbox-button-error-focus-box-shadow);
1595
+ }
1596
+ .amplify-checkbox__button[data-disabled=true]::before {
1597
+ border-color: var(--amplify-components-checkbox-button-disabled-border-color);
880
1598
  }
881
- .amplify-alert[data-variation=success] {
882
- background-color: var(--amplify-components-alert-success-background-color);
1599
+
1600
+ .amplify-checkbox__icon {
1601
+ background-color: var(--amplify-components-checkbox-icon-background-color);
1602
+ opacity: var(--amplify-components-checkbox-icon-opacity);
1603
+ transform: var(--amplify-components-checkbox-icon-transform);
1604
+ border-radius: var(--amplify-components-checkbox-icon-border-radius);
1605
+ transition-property: var(--amplify-components-checkbox-icon-transition-property);
1606
+ transition-duration: var(--amplify-components-checkbox-icon-transition-duration);
1607
+ transition-timing-function: var(--amplify-components-checkbox-icon-transition-timing-function);
1608
+ }
1609
+ .amplify-checkbox__icon[data-checked=true] {
1610
+ opacity: var(--amplify-components-checkbox-icon-checked-opacity);
1611
+ transform: var(--amplify-components-checkbox-icon-checked-transform);
1612
+ }
1613
+ .amplify-checkbox__icon[data-checked=true][data-disabled=true] {
1614
+ background-color: var(--amplify-components-checkbox-icon-checked-disabled-background-color);
883
1615
  }
884
1616
 
885
- .amplify-alert-heading {
886
- color: inherit;
1617
+ .amplify-checkbox__label[data-disabled=true] {
1618
+ color: var(--amplify-components-checkbox-label-disabled-color);
887
1619
  }
888
1620
 
889
- .amplify-card {
890
- background-color: var(--amplify-components-card-background-color);
891
- border-radius: var(--ammplify-components-card-border-radius);
892
- border: var(--amplify-components-card-border);
893
- box-shadow: var(--amplify-components-card-box-shadow);
894
- display: inline-block;
895
- padding: var(--amplify-components-card-padding);
1621
+ .amplify-checkboxfield {
1622
+ align-content: var(--amplify-components-checkboxfield-align-content);
1623
+ align-items: var(--amplify-components-checkboxfield-align-items);
1624
+ flex-direction: var(--amplify-components-checkboxfield-flex-direction);
1625
+ justify-content: var(--amplify-components-checkboxfield-justify-content);
896
1626
  }
897
1627
 
898
1628
  .amplify-divider {
@@ -915,7 +1645,6 @@ h6.amplify-heading {
915
1645
  border-bottom-width: var(--amplify-components-divider-large-border-width);
916
1646
  }
917
1647
  .amplify-divider[aria-orientation=vertical] {
918
- height: 100%;
919
1648
  border-left-width: var(--amplify-components-divider-border-width);
920
1649
  }
921
1650
  .amplify-divider[aria-orientation=vertical][data-size=small] {
@@ -925,11 +1654,152 @@ h6.amplify-heading {
925
1654
  border-left-width: var(--amplify-components-divider-large-border-width);
926
1655
  }
927
1656
 
928
- .amplify-select, .amplify-input {
1657
+ .amplify-expander {
1658
+ display: block;
1659
+ background-color: var(--amplify-components-expander-background-color);
1660
+ border-radius: var(--amplify-components-expander-border-radius);
1661
+ box-shadow: var(--amplify-components-expander-box-shadow);
1662
+ width: var(--amplify-components-expander-width);
1663
+ }
1664
+
1665
+ .amplify-expander__item {
1666
+ display: block;
1667
+ overflow: hidden;
1668
+ box-shadow: var(--amplify-components-expander-item-box-shadow);
1669
+ }
1670
+ .amplify-expander__item:first-of-type {
1671
+ border-start-start-radius: var(--amplify-components-expander-item-border-start-start-radius);
1672
+ border-start-end-radius: var(--amplify-components-expander-item-border-start-end-radius);
1673
+ }
1674
+ @supports not (border-start-start-radius: var(--amplify-components-expander-item-border-start-start-radius)) {
1675
+ .amplify-expander__item:first-of-type {
1676
+ border-top-left-radius: var(--amplify-components-expander-item-border-top-left-radius);
1677
+ border-top-right-radius: var(--amplify-components-expander-item-border-top-right-radius);
1678
+ }
1679
+ }
1680
+ .amplify-expander__item:last-of-type {
1681
+ box-shadow: none;
1682
+ border-end-start-radius: var(--amplify-components-expander-item-border-end-start-radius);
1683
+ border-end-end-radius: var(--amplify-components-expander-item-border-end-end-radius);
1684
+ }
1685
+ @supports not (border-end-start-radius: var(--amplify-components-expander-item-border-end-start-radius)) {
1686
+ .amplify-expander__item:last-of-type {
1687
+ border-bottom-left-radius: var(--amplify-components-expander-item-border-bottom-left-radius);
1688
+ border-bottom-right-radius: var(--amplify-components-expander-item-border-bottom-right-radius);
1689
+ }
1690
+ }
1691
+ .amplify-expander__item:focus-within {
1692
+ box-shadow: var(--amplify-components-expander-item-focus-box-shadow);
1693
+ }
1694
+
1695
+ .amplify-expander__header {
1696
+ display: flex;
1697
+ box-shadow: var(--amplify-components-expander-header-box-shadow);
1698
+ }
1699
+
1700
+ .amplify-expander__trigger {
1701
+ flex: 1;
1702
+ display: flex;
1703
+ min-height: var(--amplify-components-expander-trigger-min-height);
1704
+ -webkit-padding-start: var(--amplify-components-expander-trigger-padding-inline-start);
1705
+ padding-inline-start: var(--amplify-components-expander-trigger-padding-inline-start);
1706
+ -webkit-padding-end: var(--amplify-components-expander-trigger-padding-inline-end);
1707
+ padding-inline-end: var(--amplify-components-expander-trigger-padding-inline-end);
1708
+ align-items: var(--amplify-components-expander-trigger-align-items);
1709
+ justify-content: var(--amplify-components-expander-trigger-justify-content);
1710
+ }
1711
+ .amplify-expander__trigger:hover {
1712
+ background-color: var(--amplify-components-expander-trigger-hover-background-color);
1713
+ }
1714
+
1715
+ .amplify-expander__content {
1716
+ display: block;
1717
+ -webkit-padding-start: var(--amplify-components-expander-content-padding-inline-start);
1718
+ padding-inline-start: var(--amplify-components-expander-content-padding-inline-start);
1719
+ -webkit-padding-end: var(--amplify-components-expander-content-padding-inline-end);
1720
+ padding-inline-end: var(--amplify-components-expander-content-padding-inline-end);
1721
+ }
1722
+ .amplify-expander__content[data-state=open] {
1723
+ -webkit-animation-name: amplify-expander-slide-down;
1724
+ animation-name: amplify-expander-slide-down;
1725
+ -webkit-animation-duration: var(--amplify-components-expander-content-open-animation-duration);
1726
+ animation-duration: var(--amplify-components-expander-content-open-animation-duration);
1727
+ -webkit-animation-timing-function: var(--amplify-components-expander-content-open-animation-timing-function);
1728
+ animation-timing-function: var(--amplify-components-expander-content-open-animation-timing-function);
1729
+ }
1730
+ .amplify-expander__content[data-state=closed] {
1731
+ -webkit-animation-name: amplify-expander-slide-up;
1732
+ animation-name: amplify-expander-slide-up;
1733
+ -webkit-animation-duration: var(--amplify-components-expander-content-closed-animation-duration);
1734
+ animation-duration: var(--amplify-components-expander-content-closed-animation-duration);
1735
+ -webkit-animation-timing-function: var(--amplify-components-expander-content-closed-animation-timing-function);
1736
+ animation-timing-function: var(--amplify-components-expander-content-closed-animation-timing-function);
1737
+ }
1738
+
1739
+ .amplify-expander__content__text {
1740
+ display: block;
1741
+ color: var(--amplify-components-expander-content-text-color);
1742
+ -webkit-padding-before: var(--amplify-components-expander-content-text-padding-block-start);
1743
+ padding-block-start: var(--amplify-components-expander-content-text-padding-block-start);
1744
+ -webkit-padding-after: var(--amplify-components-expander-content-text-padding-block-end);
1745
+ padding-block-end: var(--amplify-components-expander-content-text-padding-block-end);
1746
+ }
1747
+
1748
+ .amplify-expander__icon {
1749
+ transition-property: transform;
1750
+ transition-duration: var(--amplify-components-expander-icon-transition-duration);
1751
+ transition-timing-function: var(--amplify-components-expander-icon-transition-timing-function);
1752
+ }
1753
+ [data-state=open] .amplify-expander__icon {
1754
+ transform: rotate(180deg);
1755
+ }
1756
+
1757
+ @-webkit-keyframes amplify-expander-slide-down {
1758
+ from {
1759
+ height: 0;
1760
+ }
1761
+ to {
1762
+ height: auto;
1763
+ }
1764
+ }
1765
+
1766
+ @keyframes amplify-expander-slide-down {
1767
+ from {
1768
+ height: 0;
1769
+ }
1770
+ to {
1771
+ height: auto;
1772
+ }
1773
+ }
1774
+ @-webkit-keyframes amplify-expander-slide-up {
1775
+ from {
1776
+ height: auto;
1777
+ }
1778
+ to {
1779
+ height: 0;
1780
+ }
1781
+ }
1782
+ @keyframes amplify-expander-slide-up {
1783
+ from {
1784
+ height: auto;
1785
+ }
1786
+ to {
1787
+ height: 0;
1788
+ }
1789
+ }
1790
+ .amplify-select, .amplify-input, .amplify-textarea {
929
1791
  box-sizing: border-box;
1792
+ color: var(--amplify-components-fieldcontrol-color);
930
1793
  font-size: var(--amplify-components-fieldcontrol-font-size);
931
1794
  line-height: var(--amplify-components-fieldcontrol-line-height);
932
- padding: var(--amplify-components-fieldcontrol-padding);
1795
+ -webkit-padding-before: var(--amplify-components-fieldcontrol-padding-block-start);
1796
+ padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
1797
+ -webkit-padding-after: var(--amplify-components-fieldcontrol-padding-block-end);
1798
+ padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
1799
+ -webkit-padding-start: var(--amplify-components-fieldcontrol-padding-inline-start);
1800
+ padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
1801
+ -webkit-padding-end: var(--amplify-components-fieldcontrol-padding-inline-end);
1802
+ padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
933
1803
  transition: all var(--amplify-components-fieldcontrol-transition-duration);
934
1804
  width: 100%;
935
1805
  border-color: var(--amplify-components-fieldcontrol-border-color);
@@ -941,33 +1811,46 @@ h6.amplify-heading {
941
1811
  outline-width: var(--amplify-components-fieldcontrol-outline-width);
942
1812
  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
943
1813
  }
944
- .amplify-select:focus, .amplify-input:focus {
1814
+ .amplify-select:focus, .amplify-input:focus, .amplify-textarea:focus {
945
1815
  border-color: var(--amplify-components-fieldcontrol-focus-border-color);
946
1816
  box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
947
1817
  }
948
- [data-size=small].amplify-select, [data-size=small].amplify-input {
1818
+ [data-size=small].amplify-select, [data-size=small].amplify-input, [data-size=small].amplify-textarea {
949
1819
  font-size: var(--amplify-components-fieldcontrol-small-font-size);
950
- line-height: var(--amplify-components-fieldcontrol-small-line-height);
951
- padding: var(--amplify-components-fieldcontrol-small-padding);
952
- }
953
- [data-size=large].amplify-select, [data-size=large].amplify-input {
1820
+ -webkit-padding-before: var(--amplify-components-fieldcontrol-small-padding-block-start);
1821
+ padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
1822
+ -webkit-padding-after: var(--amplify-components-fieldcontrol-small-padding-block-end);
1823
+ padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
1824
+ -webkit-padding-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
1825
+ padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
1826
+ -webkit-padding-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
1827
+ padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
1828
+ }
1829
+ [data-size=large].amplify-select, [data-size=large].amplify-input, [data-size=large].amplify-textarea {
954
1830
  font-size: var(--amplify-components-fieldcontrol-large-font-size);
955
- line-height: var(--amplify-components-fieldcontrol-large-line-height);
956
- padding: var(--amplify-components-fieldcontrol-large-padding);
957
- }
958
- [aria-invalid=true].amplify-select, [aria-invalid=true].amplify-input {
1831
+ -webkit-padding-before: var(--amplify-components-fieldcontrol-large-padding-block-start);
1832
+ padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
1833
+ -webkit-padding-after: var(--amplify-components-fieldcontrol-large-padding-block-end);
1834
+ padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
1835
+ -webkit-padding-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
1836
+ padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
1837
+ -webkit-padding-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
1838
+ padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
1839
+ }
1840
+ [aria-invalid=true].amplify-select, [aria-invalid=true].amplify-input, [aria-invalid=true].amplify-textarea {
959
1841
  border-color: var(--amplify-components-fieldcontrol-error-border-color);
960
1842
  }
961
- [aria-invalid=true].amplify-select:focus, [aria-invalid=true].amplify-input:focus {
1843
+ [aria-invalid=true].amplify-select:focus, [aria-invalid=true].amplify-input:focus, [aria-invalid=true].amplify-textarea:focus {
962
1844
  border-color: var(--amplify-components-fieldcontrol-error-border-color);
963
1845
  box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
964
1846
  }
965
- [disabled].amplify-select, [disabled].amplify-input {
1847
+ [disabled].amplify-select, [disabled].amplify-input, [disabled].amplify-textarea {
1848
+ color: var(--amplify-components-fieldcontrol-disabled-color);
966
1849
  cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
967
1850
  border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
968
1851
  background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
969
1852
  }
970
- [data-variation=quiet].amplify-select, [data-variation=quiet].amplify-input {
1853
+ [data-variation=quiet].amplify-select, [data-variation=quiet].amplify-input, [data-variation=quiet].amplify-textarea {
971
1854
  -webkit-border-before: var(--amplify-components-fieldcontrol-quiet-border-block-start);
972
1855
  border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
973
1856
  -webkit-border-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
@@ -976,14 +1859,14 @@ h6.amplify-heading {
976
1859
  border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
977
1860
  border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius);
978
1861
  }
979
- [data-variation=quiet].amplify-select:focus, [data-variation=quiet].amplify-input:focus {
1862
+ [data-variation=quiet].amplify-select:focus, [data-variation=quiet].amplify-input:focus, [data-variation=quiet].amplify-textarea:focus {
980
1863
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-focus-border-block-end-color);
981
1864
  box-shadow: var(--amplify-components-fieldcontrol-quiet-focus-box-shadow);
982
1865
  }
983
- [data-variation=quiet][aria-invalid=true].amplify-select, [data-variation=quiet][aria-invalid=true].amplify-input {
1866
+ [data-variation=quiet][aria-invalid=true].amplify-select, [data-variation=quiet][aria-invalid=true].amplify-input, [data-variation=quiet][aria-invalid=true].amplify-textarea {
984
1867
  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
985
1868
  }
986
- [data-variation=quiet][aria-invalid=true].amplify-select:focus, [data-variation=quiet][aria-invalid=true].amplify-input:focus {
1869
+ [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 {
987
1870
  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
988
1871
  }
989
1872
 
@@ -999,33 +1882,176 @@ h6.amplify-heading {
999
1882
  font-size: var(--amplify-components-field-large-font-size);
1000
1883
  gap: var(--amplify-components-field-large-gap);
1001
1884
  }
1002
- .amplify-field .amplify-field__description,
1003
- .amplify-field .amplify-field__error-message {
1004
- margin: 0;
1885
+
1886
+ .amplify-label {
1887
+ color: var(--amplify-components-field-label-color);
1005
1888
  }
1006
1889
 
1007
- .amplify-field-group .amplify-field-group__end .amplify-select__wrapper:not(:last-child) .amplify-select, .amplify-field-group .amplify-field-group__end .amplify-select__wrapper .amplify-select, .amplify-field-group .amplify-field-group__end .amplify-field-group__control:not(.amplify-select):not(:last-child), .amplify-field-group .amplify-field-group__end .amplify-field-group__control:not(.amplify-select), .amplify-field-group .amplify-field-group__start .amplify-select__wrapper:not(:first-child) .amplify-select, .amplify-field-group .amplify-field-group__start .amplify-field-group__control:not(:first-child), .amplify-field-group .amplify-input:not(:first-child) {
1890
+ .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 {
1008
1891
  border-start-start-radius: 0;
1009
1892
  border-end-start-radius: 0;
1010
1893
  }
1894
+ @supports not (border-start-start-radius: 0) {
1895
+ .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 {
1896
+ border-top-left-radius: 0;
1897
+ border-bottom-left-radius: 0;
1898
+ }
1899
+ }
1011
1900
 
1012
- .amplify-field-group .amplify-field-group__end .amplify-select__wrapper:not(:last-child) .amplify-select, .amplify-field-group .amplify-field-group__end .amplify-field-group__control:not(.amplify-select):not(:last-child), .amplify-field-group .amplify-field-group__start .amplify-select__wrapper:not(:first-child) .amplify-select, .amplify-field-group .amplify-field-group__start .amplify-select__wrapper .amplify-select, .amplify-field-group .amplify-field-group__start .amplify-field-group__control:not(:first-child), .amplify-field-group .amplify-field-group__start .amplify-field-group__control, .amplify-field-group .amplify-input:not(:last-child) {
1901
+ .amplify-field-group__outer-end .amplify-select__wrapper:not(:last-child) .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control:not(:last-child), .amplify-field-group__outer-start .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-start .amplify-field-group__control, .amplify-field-group :not(:last-child) .amplify-input {
1013
1902
  border-end-end-radius: 0;
1014
1903
  border-start-end-radius: 0;
1015
1904
  }
1905
+ @supports not (border-end-end-radius: 0) {
1906
+ .amplify-field-group__outer-end .amplify-select__wrapper:not(:last-child) .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control:not(:last-child), .amplify-field-group__outer-start .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-start .amplify-field-group__control, .amplify-field-group :not(:last-child) .amplify-input {
1907
+ border-bottom-right-radius: 0;
1908
+ border-top-right-radius: 0;
1909
+ }
1910
+ }
1016
1911
 
1017
1912
  .amplify-field-group {
1018
1913
  gap: var(--amplify-components-fieldgroup-gap);
1019
1914
  }
1020
- .amplify-field-group .amplify-field-group__start,
1021
- .amplify-field-group .amplify-field-group__end {
1915
+ .amplify-field-group[data-orientation=horizontal] {
1916
+ flex-direction: row;
1917
+ }
1918
+ .amplify-field-group[data-orientation=vertical] {
1919
+ flex-direction: column;
1920
+ align-items: var(--amplify-components-fieldgroup-vertical-align-items);
1921
+ }
1922
+ .amplify-field-group__outer-start,
1923
+ .amplify-field-group__outer-end {
1022
1924
  display: flex;
1925
+ align-items: var(--amplify-components-fieldgroup-outer-align-items);
1926
+ }
1927
+ .amplify-field-group__outer-start .amplify-field-group__control,
1928
+ .amplify-field-group__outer-end .amplify-field-group__control {
1929
+ height: 100%;
1930
+ }
1931
+
1932
+ /**
1933
+ * Outer field group components
1934
+ */
1935
+ /**
1936
+ * Inner field group components
1937
+ */
1938
+ .amplify-field-group__field-wrapper {
1939
+ position: relative;
1940
+ width: 100%;
1941
+ }
1942
+ .amplify-field-group__field-wrapper[data-orientation=vertical] {
1943
+ width: -webkit-fit-content;
1944
+ width: -moz-fit-content;
1945
+ width: fit-content;
1946
+ }
1947
+
1948
+ .amplify-field-group__inner-end,
1949
+ .amplify-field-group__inner-start {
1950
+ position: absolute;
1951
+ top: 0;
1952
+ height: 100%;
1953
+ pointer-events: none;
1954
+ }
1955
+ .amplify-field-group__inner-end .amplify-button,
1956
+ .amplify-field-group__inner-start .amplify-button {
1957
+ pointer-events: all;
1958
+ height: 100%;
1959
+ }
1960
+
1961
+ .amplify-field-group__inner-end {
1962
+ right: 0;
1963
+ left: auto;
1964
+ }
1965
+
1966
+ .amplify-field-group__inner-start {
1967
+ right: auto;
1968
+ left: 0;
1969
+ }
1970
+
1971
+ html[dir=rtl] .amplify-field-group__inner-end {
1972
+ right: auto;
1973
+ left: 0;
1974
+ }
1975
+ html[dir=rtl] .amplify-field-group__inner-start {
1976
+ left: auto;
1977
+ right: 0;
1978
+ }
1979
+
1980
+ .amplify-field-group--has-inner-end .amplify-input {
1981
+ -webkit-padding-end: calc(var(--amplify-components-fieldcontrol-padding-inline-end) * 3);
1982
+ padding-inline-end: calc(var(--amplify-components-fieldcontrol-padding-inline-end) * 3);
1983
+ }
1984
+
1985
+ .amplify-field-group--has-inner-start .amplify-input {
1986
+ -webkit-padding-start: calc(var(--amplify-components-fieldcontrol-padding-inline-start) * 3);
1987
+ padding-inline-start: calc(var(--amplify-components-fieldcontrol-padding-inline-start) * 3);
1023
1988
  }
1024
- .amplify-field-group .amplify-field-group__start .amplify-field-group__control,
1025
- .amplify-field-group .amplify-field-group__end .amplify-field-group__control {
1989
+
1990
+ /**
1991
+ * Inner icon (non-button) component styling requires additional styling
1992
+ */
1993
+ .amplify-field-group__icon:not(.amplify-field-group__icon-button) {
1994
+ display: flex;
1995
+ -webkit-padding-start: var(--amplify-components-fieldcontrol-padding-inline-start);
1996
+ padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
1997
+ -webkit-padding-end: var(--amplify-components-fieldcontrol-padding-inline-start);
1998
+ padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-start);
1999
+ flex-direction: column;
2000
+ justify-content: center;
1026
2001
  height: 100%;
1027
2002
  }
1028
- .amplify-pagination .amplify-button[data-variation=link], .amplify-pagination .current {
2003
+
2004
+ .amplify-menu-trigger {
2005
+ display: flex;
2006
+ justify-content: center;
2007
+ align-items: center;
2008
+ }
2009
+
2010
+ .amplify-menu-content {
2011
+ background-color: var(--amplify-components-menu-background-color);
2012
+ border-radius: var(--amplify-components-menu-border-radius);
2013
+ box-shadow: var(--amplify-components-menu-box-shadow);
2014
+ flex-direction: var(--amplify-components-menu-flex-direction);
2015
+ gap: var(--amplify-components-menu-gap);
2016
+ min-width: var(--amplify-components-menu-min-width);
2017
+ max-width: var(--amplify-components-menu-max-width);
2018
+ }
2019
+
2020
+ .amplify-menu-content__item {
2021
+ min-height: var(--amplify-components-menu-item-min-width);
2022
+ -webkit-padding-start: var(--amplify-components-menu-item-padding-inline-start);
2023
+ padding-inline-start: var(--amplify-components-menu-item-padding-inline-start);
2024
+ -webkit-padding-end: var(--amplify-components-menu-item-padding-inline-end);
2025
+ padding-inline-end: var(--amplify-components-menu-item-padding-inline-end);
2026
+ }
2027
+
2028
+ .amplify-menu-content__item:not(:first-child):not(:last-child) {
2029
+ border-radius: 0;
2030
+ }
2031
+
2032
+ .amplify-menu-content__item:first-child {
2033
+ border-end-end-radius: 0;
2034
+ border-end-start-radius: 0;
2035
+ }
2036
+ @supports not (border-end-end-radius: 0) {
2037
+ .amplify-menu-content__item:first-child {
2038
+ border-bottom-right-radius: 0;
2039
+ border-bottom-left-radius: 0;
2040
+ }
2041
+ }
2042
+
2043
+ .amplify-menu-content__item:last-child {
2044
+ border-start-end-radius: 0;
2045
+ border-start-start-radius: 0;
2046
+ }
2047
+ @supports not (border-end-end-radius: 0) {
2048
+ .amplify-menu-content__item:last-child {
2049
+ border-top-right-radius: 0;
2050
+ border-top-left-radius: 0;
2051
+ }
2052
+ }
2053
+
2054
+ .amplify-pagination__item-current, .amplify-pagination__item-button[data-variation=link] {
1029
2055
  height: var(--amplify-components-pagination-item-shared-height);
1030
2056
  min-width: var(--amplify-components-pagination-item-shared-min-width);
1031
2057
  border-radius: var(--amplify-components-pagination-item-shared-border-radius);
@@ -1038,37 +2064,51 @@ h6.amplify-heading {
1038
2064
  margin-left: var(--amplify-components-pagination-item-container-margin-left);
1039
2065
  margin-right: var(--amplify-components-pagination-item-container-margin-right);
1040
2066
  }
1041
- .amplify-pagination .current {
1042
- color: var(--amplify-components-pagination-current-color);
1043
- font-size: var(--amplify-components-pagination-current-font-size);
1044
- background-color: var(--amplify-components-pagination-current-background-color);
1045
- }
1046
- .amplify-pagination .ellipsis {
1047
- padding-left: var(--amplify-components-pagination-ellipsis-padding-left);
1048
- padding-right: var(--amplify-components-pagination-ellipsis-padding-right);
1049
- }
1050
- .amplify-pagination .amplify-button[data-variation=link] {
2067
+
2068
+ .amplify-pagination__item-button[data-variation=link] {
1051
2069
  display: flex;
1052
2070
  align-items: center;
1053
2071
  justify-content: center;
2072
+ font-weight: initial;
1054
2073
  color: var(--amplify-components-pagination-button-color);
1055
- font-weight: var(--amplify-components-pagination-button-font-weight);
1056
- padding-top: var(--amplify-components-pagination-button-padding-top);
1057
- padding-right: var(--amplify-components-pagination-button-padding-right);
1058
- padding-bottom: var(--amplify-components-pagination-button-padding-bottom);
1059
- padding-left: var(--amplify-components-pagination-button-padding-left);
1060
- transition: var(--amplify-components-pagination-button-transition);
1061
- }
1062
- .amplify-pagination .amplify-button[data-variation=link]:hover {
2074
+ -webkit-padding-start: var(--amplify-components-pagination-button-padding-inline-start);
2075
+ padding-inline-start: var(--amplify-components-pagination-button-padding-inline-start);
2076
+ -webkit-padding-end: var(--amplify-components-pagination-button-padding-inline-end);
2077
+ padding-inline-end: var(--amplify-components-pagination-button-padding-inline-end);
2078
+ transition-property: var(--amplify-components-pagination-button-transition-property);
2079
+ transition-duration: var(--amplify-components-pagination-button-transition-duration);
2080
+ }
2081
+ .amplify-pagination__item-button[data-variation=link]:hover {
1063
2082
  text-decoration: none;
2083
+ color: var(--amplify-components-pagination-button-hover-color);
1064
2084
  background-color: var(--amplify-components-pagination-button-hover-background-color);
1065
2085
  }
1066
- .amplify-pagination .amplify-button[data-variation=link][disabled] {
1067
- opacity: var(--amplify-components-pagination-button-disabled-opacity);
1068
- cursor: default;
2086
+ .amplify-pagination__item-button[data-variation=link][disabled] {
2087
+ color: var(--amplify-components-pagination-button-disabled-color);
1069
2088
  pointer-events: none;
1070
2089
  }
1071
2090
 
2091
+ .amplify-pagination__item-current {
2092
+ align-items: var(--amplify-components-pagination-current-align-items);
2093
+ justify-content: var(--amplify-components-pagination-current-justify-content);
2094
+ color: var(--amplify-components-pagination-current-color);
2095
+ font-size: var(--amplify-components-pagination-current-font-size);
2096
+ background-color: var(--amplify-components-pagination-current-background-color);
2097
+ }
2098
+
2099
+ .amplify-pagination__item-ellipsis {
2100
+ align-items: var(--amplify-components-pagination-ellipsis-align-items);
2101
+ justify-content: var(--amplify-components-pagination-ellipsis-justify-content);
2102
+ -webkit-padding-start: var(--amplify-components-pagination-ellipsis-padding-inline-start);
2103
+ padding-inline-start: var(--amplify-components-pagination-ellipsis-padding-inline-start);
2104
+ -webkit-padding-end: var(--amplify-components-pagination-ellipsis-padding-inline-end);
2105
+ padding-inline-end: var(--amplify-components-pagination-ellipsis-padding-inline-end);
2106
+ }
2107
+
2108
+ .amplify-phonenumberfield select:not(:focus) {
2109
+ border-right: none;
2110
+ }
2111
+
1072
2112
  .amplify-rating {
1073
2113
  display: inline-flex;
1074
2114
  position: relative;
@@ -1130,6 +2170,10 @@ h6.amplify-heading {
1130
2170
  gap: inherit;
1131
2171
  }
1132
2172
 
2173
+ .amplify-radio[data-disabled=true] {
2174
+ cursor: var(--amplify-components-radio-disabled-cursor);
2175
+ }
2176
+
1133
2177
  .amplify-radio__button {
1134
2178
  align-items: var(--amplify-components-radio-button-align-items);
1135
2179
  justify-content: var(--amplify-components-radio-button-justify-content);
@@ -1179,6 +2223,14 @@ h6.amplify-heading {
1179
2223
  box-shadow: var(--amplify-components-radio-button-focus-box-shadow);
1180
2224
  }
1181
2225
 
2226
+ .amplify-radio__input[aria-invalid=true] + .amplify-radio__button {
2227
+ border-color: var(--amplify-components-radio-button-error-border-color);
2228
+ }
2229
+
2230
+ .amplify-radio__input[aria-invalid=true]:focus + .amplify-radio__button {
2231
+ box-shadow: var(--amplify-components-radio-button-error-focus-box-shadow);
2232
+ }
2233
+
1182
2234
  .amplify-radio__input:disabled + .amplify-radio__button {
1183
2235
  border-color: var(--amplify-components-radio-button-disabled-border-color);
1184
2236
  background-color: var(--amplify-components-radio-button-disabled-background-color);
@@ -1193,6 +2245,10 @@ h6.amplify-heading {
1193
2245
  flex-direction: inherit;
1194
2246
  }
1195
2247
 
2248
+ .amplify-radiogroupfield {
2249
+ flex-direction: column;
2250
+ }
2251
+
1196
2252
  .amplify-select__wrapper {
1197
2253
  display: var(--amplify-components-select-wrapper-display);
1198
2254
  position: var(--amplify-components-select-wrapper-position);
@@ -1200,16 +2256,132 @@ h6.amplify-heading {
1200
2256
  }
1201
2257
 
1202
2258
  .amplify-select__icon-wrapper {
2259
+ align-items: var(--amplify-components-select-icon-wrapper-align-items);
1203
2260
  position: var(--amplify-components-select-icon-wrapper-position);
1204
- height: var(--amplify-components-select-icon-wrapper-height);
1205
2261
  top: var(--amplify-components-select-icon-wrapper-top);
1206
2262
  right: var(--amplify-components-select-icon-wrapper-right);
2263
+ transform: var(--amplify-components-select-icon-wrapper-transform);
1207
2264
  pointer-events: var(--amplify-components-select-icon-wrapper-pointer-events);
1208
2265
  }
1209
2266
 
1210
2267
  .amplify-select {
1211
2268
  -webkit-padding-end: var(--amplify-components-select-padding-inline-end);
1212
2269
  padding-inline-end: var(--amplify-components-select-padding-inline-end);
2270
+ min-width: var(--amplify-components-select-min-width);
2271
+ white-space: var(--amplify-components-select-white-space);
2272
+ }
2273
+ .amplify-select[data-size=small] {
2274
+ min-width: var(--amplify-components-select-small-min-width);
2275
+ }
2276
+ .amplify-select[data-size=large] {
2277
+ min-width: var(--amplify-components-select-large-min-width);
2278
+ }
2279
+
2280
+ .amplify-selectfield {
2281
+ flex-direction: var(--amplify-components-selectfield-flex-direction);
2282
+ }
2283
+
2284
+ .amplify-sliderfield {
2285
+ flex-direction: column;
2286
+ }
2287
+
2288
+ .amplify-sliderfield__label {
2289
+ display: flex;
2290
+ justify-content: space-between;
2291
+ }
2292
+
2293
+ .amplify-sliderfield__group {
2294
+ gap: var(--amplify-components-sliderfield-group-gap);
2295
+ }
2296
+
2297
+ .amplify-sliderfield__root {
2298
+ position: relative;
2299
+ display: flex;
2300
+ align-items: center;
2301
+ -webkit-user-select: none;
2302
+ -moz-user-select: none;
2303
+ -ms-user-select: none;
2304
+ user-select: none;
2305
+ touch-action: none;
2306
+ }
2307
+ .amplify-sliderfield__root[data-orientation=horizontal] {
2308
+ height: var(--amplify-components-sliderfield-root-horizontal-height);
2309
+ }
2310
+ .amplify-sliderfield__root[data-orientation=vertical] {
2311
+ flex-direction: column;
2312
+ width: var(--amplify-components-sliderfield-root-horizontal-width);
2313
+ }
2314
+
2315
+ .amplify-sliderfield__track {
2316
+ position: relative;
2317
+ flex-grow: 1;
2318
+ border-radius: var(--amplify-components-sliderfield-track-border-radius);
2319
+ background-color: var(--amplify-components-sliderfield-track-background-color);
2320
+ }
2321
+ .amplify-sliderfield__track[data-orientation=horizontal] {
2322
+ height: var(--amplify-components-sliderfield-track-horizontal-height);
2323
+ min-width: var(--amplify-components-sliderfield-track-horizontal-min-width);
2324
+ }
2325
+ .amplify-sliderfield__track[data-orientation=vertical] {
2326
+ width: var(--amplify-components-sliderfield-track-vertical-width);
2327
+ min-height: var(--amplify-components-sliderfield-track-vertical-min-height);
2328
+ }
2329
+
2330
+ .amplify-sliderfield__range {
2331
+ position: absolute;
2332
+ border-radius: 9999px;
2333
+ background-color: var(--amplify-components-sliderfield-range-background-color);
2334
+ }
2335
+ .amplify-sliderfield__range[data-orientation=horizontal] {
2336
+ height: 100%;
2337
+ }
2338
+ .amplify-sliderfield__range[data-orientation=vertical] {
2339
+ width: 100%;
2340
+ }
2341
+
2342
+ .amplify-sliderfield__thumb {
2343
+ display: block;
2344
+ width: var(--amplify-components-sliderfield-thumb-width);
2345
+ height: var(--amplify-components-sliderfield-thumb-height);
2346
+ background-color: var(--amplify-components-sliderfield-thumb-background-color);
2347
+ box-shadow: var(--amplify-components-sliderfield-thumb-box-shadow);
2348
+ border-radius: var(--amplify-components-sliderfield-thumb-border-radius);
2349
+ }
2350
+ .amplify-sliderfield__thumb:hover {
2351
+ background-color: var(--amplify-components-sliderfield-thumb-hover-background-color);
2352
+ }
2353
+ .amplify-sliderfield__thumb:focus {
2354
+ box-shadow: var(--amplify-components-sliderfield-thumb-focus-box-shadow);
2355
+ }
2356
+
2357
+ .amplify-stepperfield {
2358
+ flex-direction: var(--amplify-components-stepperfield-flex-direction);
2359
+ }
2360
+
2361
+ .amplify-stepperfield__button--decrease[data-invalid=true] {
2362
+ -webkit-border-end: none;
2363
+ border-inline-end: none;
2364
+ }
2365
+
2366
+ .amplify-stepperfield__button--increase[data-invalid=true] {
2367
+ -webkit-border-start: none;
2368
+ border-inline-start: none;
2369
+ }
2370
+
2371
+ .amplify-stepperfield__input {
2372
+ -moz-appearance: textfield;
2373
+ border-color: var(--amplify-components-stepperfield-input-border-color);
2374
+ text-align: var(--amplify-components-stepperfield-input-text-align);
2375
+ }
2376
+ .amplify-stepperfield__input::-webkit-outer-spin-button, .amplify-stepperfield__input::-webkit-inner-spin-button {
2377
+ -webkit-appearance: none;
2378
+ margin: 0;
2379
+ }
2380
+ .amplify-stepperfield__input:not(:focus, [aria-invalid=true]) {
2381
+ -webkit-border-start: none;
2382
+ border-inline-start: none;
2383
+ -webkit-border-end: none;
2384
+ border-inline-end: none;
1213
2385
  }
1214
2386
 
1215
2387
  .amplify-switchfield {
@@ -1282,6 +2454,100 @@ h6.amplify-heading {
1282
2454
  cursor: pointer;
1283
2455
  }
1284
2456
 
2457
+ .amplify-table {
2458
+ /**
2459
+ * Default Table primitive stylings
2460
+ */
2461
+ border-collapse: var(--amplify-components-table-border-collapse);
2462
+ display: var(--amplify-components-table-display);
2463
+ width: var(--amplify-components-table-width);
2464
+ /**
2465
+ * Data attribute stylings
2466
+ */
2467
+ }
2468
+ .amplify-table .amplify-table__caption {
2469
+ caption-side: var(--amplify-components-table-caption-caption-side);
2470
+ color: var(--amplify-components-table-caption-color);
2471
+ display: var(--amplify-components-table-caption-display);
2472
+ font-size: var(--amplify-components-table-caption-font-size);
2473
+ text-align: var(--amplify-components-table-caption-text-align);
2474
+ word-break: var(--amplify-components-table-caption-word-break);
2475
+ }
2476
+ .amplify-table .amplify-table__head {
2477
+ display: var(--amplify-components-table-head-display);
2478
+ vertical-align: var(--amplify-components-table-head-vertical-align);
2479
+ }
2480
+ .amplify-table .amplify-table__body {
2481
+ display: var(--amplify-components-table-body-display);
2482
+ vertical-align: var(--amplify-components-table-body-vertical-align);
2483
+ }
2484
+ .amplify-table .amplify-table__foot {
2485
+ display: var(--amplify-components-table-foot-display);
2486
+ vertical-align: var(--amplify-components-table-foot-vertical-align);
2487
+ }
2488
+ .amplify-table .amplify-table__row {
2489
+ display: var(--amplify-components-table-row-display);
2490
+ vertical-align: var(--amplify-components-table-row-vertical-align);
2491
+ }
2492
+ .amplify-table .amplify-table__th {
2493
+ border-color: var(--amplify-components-table-header-border-color);
2494
+ border-style: var(--amplify-components-table-header-border-style);
2495
+ border-width: var(--amplify-components-table-header-border-width);
2496
+ color: var(--amplify-components-table-header-color);
2497
+ display: var(--amplify-components-table-header-display);
2498
+ font-size: var(--amplify-components-table-header-font-size);
2499
+ font-weight: var(--amplify-components-table-header-font-weight);
2500
+ padding: var(--amplify-components-table-header-padding);
2501
+ vertical-align: var(--amplify-components-table-header-vertical-align);
2502
+ }
2503
+ .amplify-table .amplify-table__td {
2504
+ border-color: var(--amplify-components-table-data-border-color);
2505
+ border-style: var(--amplify-components-table-data-border-style);
2506
+ border-width: var(--amplify-components-table-data-border-width);
2507
+ color: var(--amplify-components-table-data-color);
2508
+ display: var(--amplify-components-table-data-display);
2509
+ font-size: var(--amplify-components-table-data-font-size);
2510
+ font-weight: var(--amplify-components-table-data-font-weight);
2511
+ padding: var(--amplify-components-table-data-padding);
2512
+ vertical-align: var(--amplify-components-table-data-vertical-align);
2513
+ }
2514
+ .amplify-table:not([data-variation=bordered]) .amplify-table__td:not(:first-child),
2515
+ .amplify-table:not([data-variation=bordered]) .amplify-table__th:not(:first-child) {
2516
+ border-left: none;
2517
+ }
2518
+ .amplify-table:not([data-variation=bordered]) .amplify-table__td:not(:last-child),
2519
+ .amplify-table:not([data-variation=bordered]) .amplify-table__th:not(:last-child) {
2520
+ border-right: none;
2521
+ }
2522
+ .amplify-table[data-variation=striped] .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
2523
+ background-color: var(--amplify-components-table-row-striped-background-color);
2524
+ }
2525
+ .amplify-table[data-highlightonhover=true] .amplify-table__row:not(.amplify-table__head *):hover {
2526
+ background-color: var(--amplify-components-table-row-hover-background-color);
2527
+ }
2528
+ .amplify-table[data-size=small] .amplify-table__caption {
2529
+ font-size: var(--amplify-components-table-caption-small-font-size);
2530
+ }
2531
+ .amplify-table[data-size=small] .amplify-table__th {
2532
+ font-size: var(--amplify-components-table-header-small-font-size);
2533
+ padding: var(--amplify-components-table-header-small-padding);
2534
+ }
2535
+ .amplify-table[data-size=small] .amplify-table__td {
2536
+ font-size: var(--amplify-components-table-data-small-font-size);
2537
+ padding: var(--amplify-components-table-data-small-padding);
2538
+ }
2539
+ .amplify-table[data-size=large] .amplify-table__caption {
2540
+ font-size: var(--amplify-components-table-caption-large-font-size);
2541
+ }
2542
+ .amplify-table[data-size=large] .amplify-table__th {
2543
+ font-size: var(--amplify-components-table-header-large-font-size);
2544
+ padding: var(--amplify-components-table-header-large-padding);
2545
+ }
2546
+ .amplify-table[data-size=large] .amplify-table__td {
2547
+ font-size: var(--amplify-components-table-data-large-font-size);
2548
+ padding: var(--amplify-components-table-data-large-padding);
2549
+ }
2550
+
1285
2551
  .amplify-tabs {
1286
2552
  background-color: var(--amplify-components-tabs-background-color);
1287
2553
  box-shadow: var(--amplify-components-tabs-box-shadow);
@@ -1299,7 +2565,7 @@ h6.amplify-heading {
1299
2565
  color: var(--amplify-components-tabs-item-color);
1300
2566
  font-size: var(--amplify-components-tabs-item-font-size);
1301
2567
  font-weight: var(--amplify-components-tabs-item-font-weight);
1302
- padding: var(--amplify-components-tabs-item-padding);
2568
+ padding: var(--amplify-components-tabs-item-padding-vertical) var(--amplify-components-tabs-item-padding-horizontal);
1303
2569
  text-align: var(--amplify-components-tabs-item-text-align);
1304
2570
  transition: all var(--amplify-components-tabs-item-transition-duration);
1305
2571
  border-width: 0 0 var(--amplify-components-tabs-item-border-width) 0;
@@ -1336,13 +2602,129 @@ h6.amplify-heading {
1336
2602
  color: var(--amplify-components-tabs-item-disabled-color);
1337
2603
  cursor: not-allowed;
1338
2604
  }
1339
- .amplify-tabs-item[data-grow=equal] {
2605
+ .amplify-tabs-item[data-spacing=equal] {
1340
2606
  flex: 1 1 0;
1341
2607
  }
1342
- .amplify-tabs-item[data-grow=relative] {
2608
+ .amplify-tabs-item[data-spacing=relative] {
1343
2609
  flex-grow: 1;
1344
2610
  }
1345
2611
 
2612
+ .amplify-textfield {
2613
+ flex-direction: column;
2614
+ }
2615
+
2616
+ .amplify-togglebutton[data-variation=primary], .amplify-togglebutton:hover, .amplify-togglebutton {
2617
+ border-color: var(--amplify-components-togglebutton-border-color);
2618
+ color: var(--amplify-components-togglebutton-color);
2619
+ }
2620
+
2621
+ .amplify-togglebutton:hover {
2622
+ background-color: var(--amplify-components-togglebutton-hover-background-color);
2623
+ }
2624
+ .amplify-togglebutton:focus {
2625
+ border-color: var(--amplify-components-togglebutton-focus-border-color);
2626
+ color: var(--amplify-components-togglebutton-focus-color);
2627
+ }
2628
+ .amplify-togglebutton:active {
2629
+ background-color: var(--amplify-components-togglebutton-active-background-color);
2630
+ }
2631
+ .amplify-togglebutton:disabled {
2632
+ background-color: var(--amplify-components-togglebutton-disabled-background-color);
2633
+ border-color: var(--amplify-components-togglebutton-disabled-border-color);
2634
+ color: var(--amplify-components-togglebutton-disabled-color);
2635
+ }
2636
+ .amplify-togglebutton[aria-pressed=true] {
2637
+ background-color: var(--amplify-components-togglebutton-pressed-background-color);
2638
+ color: var(--amplify-components-togglebutton-pressed-color);
2639
+ }
2640
+ .amplify-togglebutton[aria-pressed=true]:hover:not(:disabled) {
2641
+ background-color: var(--amplify-components-togglebutton-pressed-hover-background-color);
2642
+ }
2643
+ .amplify-togglebutton[data-variation=primary] {
2644
+ background-color: var(--amplify-components-togglebutton-primary-background-color);
2645
+ border-width: var(--amplify-components-togglebutton-primary-border-width);
2646
+ }
2647
+ .amplify-togglebutton[data-variation=primary]:focus {
2648
+ background-color: var(--amplify-components-togglebutton-primary-focus-background-color);
2649
+ border-color: var(--amplify-components-togglebutton-primary-focus-border-color);
2650
+ color: var(--amplify-components-togglebutton-primary-focus-color);
2651
+ box-shadow: var(--amplify-components-togglebutton-primary-focus-box-shadow);
2652
+ }
2653
+ .amplify-togglebutton[data-variation=primary]:hover {
2654
+ background-color: var(--amplify-components-togglebutton-primary-hover-background-color);
2655
+ color: var(--amplify-components-togglebutton-primary-hover-color);
2656
+ }
2657
+ .amplify-togglebutton[data-variation=primary]:disabled {
2658
+ background-color: var(--amplify-components-togglebutton-primary-disabled-background-color);
2659
+ color: var(--amplify-components-togglebutton-primary-disabled-color);
2660
+ }
2661
+ .amplify-togglebutton[data-variation=primary][aria-pressed=true] {
2662
+ background-color: var(--amplify-components-togglebutton-primary-pressed-background-color);
2663
+ border-color: var(--amplify-components-togglebutton-primary-pressed-border-color);
2664
+ color: var(--amplify-components-togglebutton-primary-pressed-color);
2665
+ }
2666
+ .amplify-togglebutton[data-variation=primary][aria-pressed=true]:focus {
2667
+ border-color: var(--amplify-components-togglebutton-primary-pressed-focus-border-color);
2668
+ background-color: var(--amplify-components-togglebutton-primary-pressed-focus-background-color);
2669
+ }
2670
+ .amplify-togglebutton[data-variation=primary][aria-pressed=true]:hover:not(:disabled) {
2671
+ border-color: var(--amplify-components-togglebutton-primary-pressed-hover-border-color);
2672
+ background-color: var(--amplify-components-togglebutton-primary-pressed-hover-background-color);
2673
+ }
2674
+ .amplify-togglebutton[data-variation=link] {
2675
+ color: var(--amplify-components-togglebutton-link-color);
2676
+ }
2677
+ .amplify-togglebutton[data-variation=link]:hover {
2678
+ background-color: var(--amplify-components-togglebutton-link-hover-background-color);
2679
+ color: var(--amplify-components-togglebutton-link-hover-color);
2680
+ }
2681
+ .amplify-togglebutton[data-variation=link]:focus {
2682
+ background-color: var(--amplify-components-togglebutton-link-focus-background-color);
2683
+ color: var(--amplify-components-togglebutton-link-focus-color);
2684
+ }
2685
+ .amplify-togglebutton[data-variation=link]:disabled {
2686
+ color: var(--amplify-components-togglebutton-link-disabled-color);
2687
+ }
2688
+ .amplify-togglebutton[data-variation=link][aria-pressed=true] {
2689
+ background-color: var(--amplify-components-togglebutton-link-pressed-background-color);
2690
+ color: var(--amplify-components-togglebutton-link-pressed-color);
2691
+ }
2692
+ .amplify-togglebutton[data-variation=link][aria-pressed=true]:hover {
2693
+ background-color: var(--amplify-components-togglebutton-link-pressed-hover-background-color);
2694
+ }
2695
+
2696
+ .amplify-togglebuttongroup {
2697
+ align-items: var(--amplify-components-togglebuttongroup-align-items);
2698
+ align-content: var(--amplify-components-togglebuttongroup-align-content);
2699
+ justify-content: var(--amplify-components-togglebuttongroup-justify-content);
2700
+ gap: 0;
2701
+ }
2702
+
2703
+ .amplify-togglebuttongroup .amplify-togglebutton:not(:first-of-type) {
2704
+ border-start-start-radius: 0;
2705
+ border-end-start-radius: 0;
2706
+ }
2707
+ @supports not (border-start-start-radius: 0) {
2708
+ .amplify-togglebuttongroup .amplify-togglebutton:not(:first-of-type) {
2709
+ border-top-left-radius: 0;
2710
+ border-bottom-left-radius: 0;
2711
+ }
2712
+ }
2713
+ .amplify-togglebuttongroup .amplify-togglebutton:not(:first-of-type):not(:focus) {
2714
+ -webkit-border-start: 1px solid transparent;
2715
+ border-inline-start: 1px solid transparent;
2716
+ }
2717
+ .amplify-togglebuttongroup .amplify-togglebutton:not(:last-of-type) {
2718
+ border-start-end-radius: 0;
2719
+ border-end-end-radius: 0;
2720
+ }
2721
+ @supports not (border-end-end-radius: 0) {
2722
+ .amplify-togglebuttongroup .amplify-togglebutton:not(:last-of-type) {
2723
+ border-bottom-right-radius: 0;
2724
+ border-top-right-radius: 0;
2725
+ }
2726
+ }
2727
+
1346
2728
  .amplify-visually-hidden {
1347
2729
  position: absolute;
1348
2730
  width: 1px;