@cloudscape-design/components 3.0.332 → 3.0.334
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.
- package/button/interfaces.d.ts +2 -1
- package/button/interfaces.d.ts.map +1 -1
- package/button/interfaces.js.map +1 -1
- package/button/internal.d.ts.map +1 -1
- package/button/internal.js +12 -1
- package/button/internal.js.map +1 -1
- package/button/styles.css.js +20 -19
- package/button/styles.scoped.css +223 -137
- package/button/styles.selectors.js +20 -19
- package/button-dropdown/interfaces.d.ts +2 -1
- package/button-dropdown/interfaces.d.ts.map +1 -1
- package/button-dropdown/interfaces.js.map +1 -1
- package/button-dropdown/internal.d.ts.map +1 -1
- package/button-dropdown/internal.js +14 -3
- package/button-dropdown/internal.js.map +1 -1
- package/expandable-section/expandable-section-header.d.ts.map +1 -1
- package/expandable-section/expandable-section-header.js +1 -1
- package/expandable-section/expandable-section-header.js.map +1 -1
- package/expandable-section/styles.css.js +29 -28
- package/expandable-section/styles.scoped.css +59 -56
- package/expandable-section/styles.selectors.js +29 -28
- package/form/internal.d.ts.map +1 -1
- package/form/internal.js +7 -2
- package/form/internal.js.map +1 -1
- package/form-field/internal.d.ts.map +1 -1
- package/form-field/internal.js +8 -3
- package/form-field/internal.js.map +1 -1
- package/internal/analytics/components/analytics-funnel.d.ts.map +1 -1
- package/internal/analytics/components/analytics-funnel.js +58 -11
- package/internal/analytics/components/analytics-funnel.js.map +1 -1
- package/internal/analytics/context/analytics-context.d.ts +5 -1
- package/internal/analytics/context/analytics-context.d.ts.map +1 -1
- package/internal/analytics/context/analytics-context.js +3 -0
- package/internal/analytics/context/analytics-context.js.map +1 -1
- package/internal/analytics/hooks/use-funnel.d.ts +3 -0
- package/internal/analytics/hooks/use-funnel.d.ts.map +1 -1
- package/internal/analytics/hooks/use-funnel.js +7 -2
- package/internal/analytics/hooks/use-funnel.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/test-utils/dom/expandable-section/index.d.ts +2 -0
- package/test-utils/dom/expandable-section/index.js +7 -0
- package/test-utils/dom/expandable-section/index.js.map +1 -1
- package/test-utils/selectors/expandable-section/index.d.ts +2 -0
- package/test-utils/selectors/expandable-section/index.js +7 -0
- package/test-utils/selectors/expandable-section/index.js.map +1 -1
- package/test-utils/tsconfig.tsbuildinfo +1 -1
|
@@ -94,10 +94,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
94
94
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
95
95
|
SPDX-License-Identifier: Apache-2.0
|
|
96
96
|
*/
|
|
97
|
-
.awsui_content-
|
|
98
|
-
animation: awsui_awsui-motion-fade-
|
|
97
|
+
.awsui_content-enter_gwq0h_1brli_97:not(#\9) {
|
|
98
|
+
animation: awsui_awsui-motion-fade-in_gwq0h_1brli_1 var(--motion-duration-show-paced-uryptc, 180ms) var(--motion-easing-show-paced-tbgeqx, ease-out);
|
|
99
99
|
}
|
|
100
|
-
@keyframes awsui_awsui-motion-fade-
|
|
100
|
+
@keyframes awsui_awsui-motion-fade-in_gwq0h_1brli_1 {
|
|
101
101
|
from {
|
|
102
102
|
opacity: 0.2;
|
|
103
103
|
}
|
|
@@ -106,40 +106,40 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
106
106
|
}
|
|
107
107
|
}
|
|
108
108
|
@media (prefers-reduced-motion: reduce) {
|
|
109
|
-
.awsui_content-
|
|
109
|
+
.awsui_content-enter_gwq0h_1brli_97:not(#\9) {
|
|
110
110
|
animation: none;
|
|
111
111
|
transition: none;
|
|
112
112
|
}
|
|
113
113
|
}
|
|
114
|
-
.awsui-motion-disabled .awsui_content-
|
|
114
|
+
.awsui-motion-disabled .awsui_content-enter_gwq0h_1brli_97:not(#\9), .awsui-mode-entering .awsui_content-enter_gwq0h_1brli_97:not(#\9) {
|
|
115
115
|
animation: none;
|
|
116
116
|
transition: none;
|
|
117
117
|
}
|
|
118
118
|
|
|
119
|
-
.awsui_trigger-
|
|
119
|
+
.awsui_trigger-expanded_gwq0h_1brli_119:not(#\9) {
|
|
120
120
|
transition: border-bottom-color var(--motion-duration-show-paced-uryptc, 180ms) var(--motion-easing-show-paced-tbgeqx, ease-out);
|
|
121
121
|
}
|
|
122
122
|
@media (prefers-reduced-motion: reduce) {
|
|
123
|
-
.awsui_trigger-
|
|
123
|
+
.awsui_trigger-expanded_gwq0h_1brli_119:not(#\9) {
|
|
124
124
|
animation: none;
|
|
125
125
|
transition: none;
|
|
126
126
|
}
|
|
127
127
|
}
|
|
128
|
-
.awsui-motion-disabled .awsui_trigger-
|
|
128
|
+
.awsui-motion-disabled .awsui_trigger-expanded_gwq0h_1brli_119:not(#\9), .awsui-mode-entering .awsui_trigger-expanded_gwq0h_1brli_119:not(#\9) {
|
|
129
129
|
animation: none;
|
|
130
130
|
transition: none;
|
|
131
131
|
}
|
|
132
132
|
|
|
133
|
-
.
|
|
133
|
+
.awsui_icon_gwq0h_1brli_133:not(#\9) {
|
|
134
134
|
transition: transform var(--motion-duration-rotate-90-jfxxiy, 135ms) var(--motion-easing-rotate-90-ax5lt7, cubic-bezier(0.165, 0.84, 0.44, 1));
|
|
135
135
|
}
|
|
136
136
|
@media (prefers-reduced-motion: reduce) {
|
|
137
|
-
.
|
|
137
|
+
.awsui_icon_gwq0h_1brli_133:not(#\9) {
|
|
138
138
|
animation: none;
|
|
139
139
|
transition: none;
|
|
140
140
|
}
|
|
141
141
|
}
|
|
142
|
-
.awsui-motion-disabled .
|
|
142
|
+
.awsui-motion-disabled .awsui_icon_gwq0h_1brli_133:not(#\9), .awsui-mode-entering .awsui_icon_gwq0h_1brli_133:not(#\9) {
|
|
143
143
|
animation: none;
|
|
144
144
|
transition: none;
|
|
145
145
|
}
|
|
@@ -148,7 +148,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
148
148
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
149
149
|
SPDX-License-Identifier: Apache-2.0
|
|
150
150
|
*/
|
|
151
|
-
.
|
|
151
|
+
.awsui_root_gwq0h_1brli_151:not(#\9) {
|
|
152
152
|
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
|
|
153
153
|
border-collapse: separate;
|
|
154
154
|
border-spacing: 0;
|
|
@@ -191,111 +191,111 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
191
191
|
display: block;
|
|
192
192
|
}
|
|
193
193
|
|
|
194
|
-
.awsui_expand-
|
|
194
|
+
.awsui_expand-button_gwq0h_1brli_168:not(#\9) {
|
|
195
195
|
/* used in test-utils */
|
|
196
196
|
}
|
|
197
197
|
|
|
198
|
-
.
|
|
198
|
+
.awsui_icon_gwq0h_1brli_133:not(#\9) {
|
|
199
199
|
transform: rotate(-90deg);
|
|
200
200
|
}
|
|
201
|
-
.
|
|
201
|
+
.awsui_icon_gwq0h_1brli_133.awsui_expanded_gwq0h_1brli_175:not(#\9) {
|
|
202
202
|
transform: rotate(0deg);
|
|
203
203
|
}
|
|
204
204
|
|
|
205
|
-
.awsui_icon-
|
|
205
|
+
.awsui_icon-container_gwq0h_1brli_179:not(#\9) {
|
|
206
206
|
position: relative;
|
|
207
207
|
margin-left: calc((var(--font-body-m-line-height-rfgrp9, 22px) - var(--size-icon-normal-jq6jat, 16px)) / -2);
|
|
208
208
|
margin-right: calc(var(--space-xxs-ja5cp8, 4px) + var(--border-divider-list-width-um3zli, 1px));
|
|
209
209
|
}
|
|
210
|
-
.awsui_icon-container-
|
|
210
|
+
.awsui_icon-container-container_gwq0h_1brli_184:not(#\9) {
|
|
211
211
|
margin-right: var(--space-xs-edba2s, 8px);
|
|
212
212
|
}
|
|
213
213
|
|
|
214
|
-
.
|
|
214
|
+
.awsui_wrapper_gwq0h_1brli_188:not(#\9) {
|
|
215
215
|
box-sizing: border-box;
|
|
216
216
|
border: none;
|
|
217
217
|
width: 100%;
|
|
218
218
|
line-height: var(--font-body-m-line-height-rfgrp9, 22px);
|
|
219
219
|
text-align: left;
|
|
220
220
|
}
|
|
221
|
-
.awsui_wrapper-
|
|
221
|
+
.awsui_wrapper-default_gwq0h_1brli_195:not(#\9), .awsui_wrapper-footer_gwq0h_1brli_195:not(#\9) {
|
|
222
222
|
border: var(--border-divider-section-width-orq175, 2px) solid transparent;
|
|
223
223
|
}
|
|
224
|
-
.awsui_wrapper-
|
|
224
|
+
.awsui_wrapper-navigation_gwq0h_1brli_198:not(#\9) {
|
|
225
225
|
border-left: var(--border-divider-section-width-orq175, 2px) solid transparent;
|
|
226
226
|
}
|
|
227
|
-
.awsui_wrapper-
|
|
227
|
+
.awsui_wrapper-navigation_gwq0h_1brli_198:not(#\9), .awsui_wrapper-container_gwq0h_1brli_201:not(#\9) {
|
|
228
228
|
display: flex;
|
|
229
229
|
font-weight: var(--font-heading-s-weight-5y5giq, 800);
|
|
230
230
|
}
|
|
231
|
-
.awsui_wrapper-
|
|
231
|
+
.awsui_wrapper-default_gwq0h_1brli_195:not(#\9), .awsui_wrapper-navigation_gwq0h_1brli_198:not(#\9), .awsui_wrapper-footer_gwq0h_1brli_195:not(#\9) {
|
|
232
232
|
color: var(--color-text-expandable-section-default-m3lg7r, #000716);
|
|
233
233
|
-webkit-font-smoothing: var(--font-smoothing-webkit-fyh4as, antialiased);
|
|
234
234
|
-moz-osx-font-smoothing: var(--font-smoothing-moz-osx-pa2uqe, grayscale);
|
|
235
235
|
font-size: var(--font-expandable-heading-size-mkp9vq, 16px);
|
|
236
236
|
letter-spacing: var(--font-heading-s-letter-spacing-j4vcrt, -0.005em);
|
|
237
237
|
}
|
|
238
|
-
.awsui_wrapper-
|
|
238
|
+
.awsui_wrapper-default_gwq0h_1brli_195:not(#\9) {
|
|
239
239
|
padding-top: var(--space-scaled-xxs-t2t62i, 4px);
|
|
240
240
|
padding-bottom: var(--space-scaled-xxs-t2t62i, 4px);
|
|
241
241
|
padding-right: var(--space-xxs-ja5cp8, 4px);
|
|
242
242
|
}
|
|
243
|
-
.awsui_wrapper-
|
|
243
|
+
.awsui_wrapper-default_gwq0h_1brli_195.awsui_header-deprecated_gwq0h_1brli_217:not(#\9) {
|
|
244
244
|
padding-left: var(--space-xxs-ja5cp8, 4px);
|
|
245
245
|
}
|
|
246
|
-
.awsui_wrapper-
|
|
246
|
+
.awsui_wrapper-default_gwq0h_1brli_195:not(#\9):not(.awsui_header-deprecated_gwq0h_1brli_217) {
|
|
247
247
|
padding-left: calc(var(--space-xxs-ja5cp8, 4px) + calc(var(--size-icon-normal-jq6jat, 16px) + (var(--font-body-m-line-height-rfgrp9, 22px) - var(--size-icon-normal-jq6jat, 16px)) / -2 + var(--space-xxs-ja5cp8, 4px) + var(--border-divider-list-width-um3zli, 1px)));
|
|
248
248
|
}
|
|
249
|
-
.awsui_wrapper-
|
|
249
|
+
.awsui_wrapper-footer_gwq0h_1brli_195:not(#\9) {
|
|
250
250
|
padding-top: var(--space-scaled-xxs-t2t62i, 4px);
|
|
251
251
|
padding-bottom: var(--space-scaled-xxs-t2t62i, 4px);
|
|
252
252
|
padding-right: 0;
|
|
253
253
|
}
|
|
254
|
-
.awsui_wrapper-
|
|
254
|
+
.awsui_wrapper-footer_gwq0h_1brli_195.awsui_header-deprecated_gwq0h_1brli_217:not(#\9) {
|
|
255
255
|
padding-left: 0;
|
|
256
256
|
}
|
|
257
|
-
.awsui_wrapper-
|
|
257
|
+
.awsui_wrapper-footer_gwq0h_1brli_195:not(#\9):not(.awsui_header-deprecated_gwq0h_1brli_217) {
|
|
258
258
|
padding-left: calc(var(--size-icon-normal-jq6jat, 16px) + (var(--font-body-m-line-height-rfgrp9, 22px) - var(--size-icon-normal-jq6jat, 16px)) / -2 + var(--space-xxs-ja5cp8, 4px) + var(--border-divider-list-width-um3zli, 1px));
|
|
259
259
|
}
|
|
260
|
-
.awsui_wrapper-
|
|
260
|
+
.awsui_wrapper-container_gwq0h_1brli_201:not(#\9) {
|
|
261
261
|
padding-top: var(--space-container-header-vertical-di96ce, 12px);
|
|
262
262
|
padding-bottom: var(--space-container-header-vertical-di96ce, 12px);
|
|
263
263
|
padding-right: var(--space-container-horizontal-jxdgil, 20px);
|
|
264
264
|
}
|
|
265
|
-
.awsui_wrapper-
|
|
265
|
+
.awsui_wrapper-container_gwq0h_1brli_201.awsui_header-deprecated_gwq0h_1brli_217:not(#\9) {
|
|
266
266
|
padding-left: var(--space-container-horizontal-jxdgil, 20px);
|
|
267
267
|
}
|
|
268
|
-
.awsui_wrapper-
|
|
268
|
+
.awsui_wrapper-container_gwq0h_1brli_201:not(#\9):not(.awsui_header-deprecated_gwq0h_1brli_217) {
|
|
269
269
|
padding-left: calc(var(--space-container-horizontal-jxdgil, 20px) + calc(var(--size-icon-medium-x0iee8, 20px) + (var(--font-body-m-line-height-rfgrp9, 22px) - var(--size-icon-normal-jq6jat, 16px)) / -2 + var(--space-xs-edba2s, 8px)));
|
|
270
270
|
}
|
|
271
|
-
body[data-awsui-focus-visible=true] .awsui_wrapper-
|
|
271
|
+
body[data-awsui-focus-visible=true] .awsui_wrapper-container_gwq0h_1brli_201:not(#\9):focus {
|
|
272
272
|
padding: calc(var(--space-scaled-s-913kwi, 12px) - var(--border-divider-section-width-orq175, 2px)) calc(var(--space-l-f4l5gr, 20px) - var(--border-divider-section-width-orq175, 2px));
|
|
273
273
|
}
|
|
274
|
-
.awsui_wrapper-
|
|
274
|
+
.awsui_wrapper-default_gwq0h_1brli_195.awsui_wrapper-expanded_gwq0h_1brli_248:not(#\9) {
|
|
275
275
|
border-bottom-color: var(--color-border-divider-default-9o8zql, #e9ebed);
|
|
276
276
|
}
|
|
277
277
|
|
|
278
|
-
.
|
|
278
|
+
.awsui_header_gwq0h_1brli_217:not(#\9) {
|
|
279
279
|
/* used in test-utils */
|
|
280
280
|
}
|
|
281
|
-
.awsui_header-
|
|
281
|
+
.awsui_header-wrapper_gwq0h_1brli_255:not(#\9), .awsui_header-deprecated_gwq0h_1brli_217:not(#\9) {
|
|
282
282
|
display: flex;
|
|
283
283
|
font-weight: var(--font-heading-s-weight-5y5giq, 800);
|
|
284
284
|
}
|
|
285
|
-
.awsui_header-
|
|
285
|
+
.awsui_header-wrapper_gwq0h_1brli_255:not(#\9) {
|
|
286
286
|
font-size: inherit;
|
|
287
287
|
letter-spacing: inherit;
|
|
288
288
|
margin: 0;
|
|
289
289
|
padding: 0;
|
|
290
290
|
}
|
|
291
|
-
body[data-awsui-focus-visible=true] .awsui_header-
|
|
291
|
+
body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1brli_265:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_1brli_265:not(#\9):focus {
|
|
292
292
|
position: relative;
|
|
293
293
|
}
|
|
294
|
-
body[data-awsui-focus-visible=true] .awsui_header-
|
|
294
|
+
body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1brli_265:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_1brli_265:not(#\9):focus {
|
|
295
295
|
outline: 2px dotted transparent;
|
|
296
296
|
outline-offset: calc(0px - 1px);
|
|
297
297
|
}
|
|
298
|
-
body[data-awsui-focus-visible=true] .awsui_header-
|
|
298
|
+
body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_1brli_265:not(#\9):focus::before, body[data-awsui-focus-visible=true] .awsui_header-container-button_gwq0h_1brli_265:not(#\9):focus::before {
|
|
299
299
|
content: " ";
|
|
300
300
|
display: block;
|
|
301
301
|
position: absolute;
|
|
@@ -306,21 +306,21 @@ body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_a11gk_265:not(#\9
|
|
|
306
306
|
border-radius: var(--border-radius-control-default-focus-ring-muizvi, 4px);
|
|
307
307
|
box-shadow: 0 0 0 2px var(--color-border-item-focused-4t19h5, #0972d3);
|
|
308
308
|
}
|
|
309
|
-
.awsui_header-
|
|
309
|
+
.awsui_header-button_gwq0h_1brli_265:not(#\9) {
|
|
310
310
|
box-sizing: border-box;
|
|
311
311
|
display: flex;
|
|
312
312
|
margin-left: calc(-1 * calc(var(--size-icon-normal-jq6jat, 16px) + (var(--font-body-m-line-height-rfgrp9, 22px) - var(--size-icon-normal-jq6jat, 16px)) / -2 + var(--space-xxs-ja5cp8, 4px) + var(--border-divider-list-width-um3zli, 1px)));
|
|
313
313
|
}
|
|
314
|
-
.awsui_header-container-
|
|
314
|
+
.awsui_header-container-button_gwq0h_1brli_265:not(#\9) {
|
|
315
315
|
margin-left: calc(-1 * calc(var(--size-icon-medium-x0iee8, 20px) + (var(--font-body-m-line-height-rfgrp9, 22px) - var(--size-icon-normal-jq6jat, 16px)) / -2 + var(--space-xs-edba2s, 8px)));
|
|
316
316
|
}
|
|
317
|
-
.awsui_header-
|
|
317
|
+
.awsui_header-container_gwq0h_1brli_265:not(#\9) {
|
|
318
318
|
width: 100%;
|
|
319
319
|
}
|
|
320
|
-
.awsui_header-
|
|
320
|
+
.awsui_header-container_gwq0h_1brli_265 > .awsui_icon-container_gwq0h_1brli_179:not(#\9) {
|
|
321
321
|
margin-top: var(--space-expandable-section-icon-offset-top-qfofw6, 4px);
|
|
322
322
|
}
|
|
323
|
-
.awsui_header-
|
|
323
|
+
.awsui_header-navigation_gwq0h_1brli_297 > .awsui_icon-container_gwq0h_1brli_179:not(#\9) {
|
|
324
324
|
display: inline-flex;
|
|
325
325
|
cursor: pointer;
|
|
326
326
|
color: var(--color-text-expandable-section-navigation-icon-default-lzmj1u, #414d5c);
|
|
@@ -331,17 +331,17 @@ body[data-awsui-focus-visible=true] .awsui_header-button_gwq0h_a11gk_265:not(#\9
|
|
|
331
331
|
text-decoration: none;
|
|
332
332
|
flex-direction: column;
|
|
333
333
|
}
|
|
334
|
-
.awsui_header-
|
|
334
|
+
.awsui_header-navigation_gwq0h_1brli_297 > .awsui_icon-container_gwq0h_1brli_179:not(#\9):hover {
|
|
335
335
|
color: var(--color-text-expandable-section-hover-pux1oy, #0972d3);
|
|
336
336
|
}
|
|
337
|
-
body[data-awsui-focus-visible=true] .awsui_header-
|
|
337
|
+
body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1brli_297 > .awsui_icon-container_gwq0h_1brli_179:not(#\9):focus {
|
|
338
338
|
position: relative;
|
|
339
339
|
}
|
|
340
|
-
body[data-awsui-focus-visible=true] .awsui_header-
|
|
340
|
+
body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1brli_297 > .awsui_icon-container_gwq0h_1brli_179:not(#\9):focus {
|
|
341
341
|
outline: 2px dotted transparent;
|
|
342
342
|
outline-offset: calc(2px - 1px);
|
|
343
343
|
}
|
|
344
|
-
body[data-awsui-focus-visible=true] .awsui_header-
|
|
344
|
+
body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_1brli_297 > .awsui_icon-container_gwq0h_1brli_179:not(#\9):focus::before {
|
|
345
345
|
content: " ";
|
|
346
346
|
display: block;
|
|
347
347
|
position: absolute;
|
|
@@ -352,34 +352,37 @@ body[data-awsui-focus-visible=true] .awsui_header-navigation_gwq0h_a11gk_297 > .
|
|
|
352
352
|
border-radius: var(--border-radius-control-default-focus-ring-muizvi, 4px);
|
|
353
353
|
box-shadow: 0 0 0 2px var(--color-border-item-focused-4t19h5, #0972d3);
|
|
354
354
|
}
|
|
355
|
+
.awsui_header-text_gwq0h_1brli_329:not(#\9) {
|
|
356
|
+
/* used in test-utils */
|
|
357
|
+
}
|
|
355
358
|
|
|
356
|
-
.
|
|
359
|
+
.awsui_content_gwq0h_1brli_97:not(#\9) {
|
|
357
360
|
display: none;
|
|
358
361
|
}
|
|
359
|
-
.awsui_content-
|
|
362
|
+
.awsui_content-default_gwq0h_1brli_336:not(#\9) {
|
|
360
363
|
padding: var(--space-scaled-xs-wbfgrv, 8px) 0;
|
|
361
364
|
}
|
|
362
|
-
.awsui_content-
|
|
365
|
+
.awsui_content-footer_gwq0h_1brli_339:not(#\9) {
|
|
363
366
|
padding: var(--space-xs-edba2s, 8px) 0;
|
|
364
367
|
}
|
|
365
|
-
.awsui_content-
|
|
368
|
+
.awsui_content-expanded_gwq0h_1brli_342:not(#\9) {
|
|
366
369
|
display: block;
|
|
367
370
|
}
|
|
368
371
|
|
|
369
|
-
.
|
|
372
|
+
.awsui_focusable_gwq0h_1brli_346:not(#\9):focus {
|
|
370
373
|
outline: none;
|
|
371
374
|
text-decoration: none;
|
|
372
375
|
}
|
|
373
|
-
body[data-awsui-focus-visible=true] .
|
|
376
|
+
body[data-awsui-focus-visible=true] .awsui_focusable_gwq0h_1brli_346:not(#\9):focus {
|
|
374
377
|
outline: 2px dotted transparent;
|
|
375
378
|
border: var(--border-field-width-riro62, 2px) solid var(--color-border-item-focused-4t19h5, #0972d3);
|
|
376
379
|
border-radius: var(--border-radius-control-default-focus-ring-muizvi, 4px);
|
|
377
380
|
box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-cwek11, 0px) var(--color-border-item-focused-4t19h5, #0972d3);
|
|
378
381
|
}
|
|
379
382
|
|
|
380
|
-
.awsui_click-
|
|
383
|
+
.awsui_click-target_gwq0h_1brli_357:not(#\9) {
|
|
381
384
|
cursor: pointer;
|
|
382
385
|
}
|
|
383
|
-
.awsui_click-
|
|
386
|
+
.awsui_click-target_gwq0h_1brli_357:not(#\9):not(.awsui_wrapper-container_gwq0h_1brli_201):not(.awsui_header-container-button_gwq0h_1brli_265):hover {
|
|
384
387
|
color: var(--color-text-expandable-section-hover-pux1oy, #0972d3);
|
|
385
388
|
}
|
|
@@ -2,33 +2,34 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"content-enter": "awsui_content-
|
|
6
|
-
"awsui-motion-fade-in": "awsui_awsui-motion-fade-
|
|
7
|
-
"trigger-expanded": "awsui_trigger-
|
|
8
|
-
"icon": "
|
|
9
|
-
"root": "
|
|
10
|
-
"expand-button": "awsui_expand-
|
|
11
|
-
"expanded": "
|
|
12
|
-
"icon-container": "awsui_icon-
|
|
13
|
-
"icon-container-container": "awsui_icon-container-
|
|
14
|
-
"wrapper": "
|
|
15
|
-
"wrapper-default": "awsui_wrapper-
|
|
16
|
-
"wrapper-footer": "awsui_wrapper-
|
|
17
|
-
"wrapper-navigation": "awsui_wrapper-
|
|
18
|
-
"wrapper-container": "awsui_wrapper-
|
|
19
|
-
"header-deprecated": "awsui_header-
|
|
20
|
-
"wrapper-expanded": "awsui_wrapper-
|
|
21
|
-
"header": "
|
|
22
|
-
"header-wrapper": "awsui_header-
|
|
23
|
-
"header-button": "awsui_header-
|
|
24
|
-
"header-container-button": "awsui_header-container-
|
|
25
|
-
"header-container": "awsui_header-
|
|
26
|
-
"header-navigation": "awsui_header-
|
|
27
|
-
"
|
|
28
|
-
"content
|
|
29
|
-
"content-
|
|
30
|
-
"content-
|
|
31
|
-
"
|
|
32
|
-
"
|
|
5
|
+
"content-enter": "awsui_content-enter_gwq0h_1brli_97",
|
|
6
|
+
"awsui-motion-fade-in": "awsui_awsui-motion-fade-in_gwq0h_1brli_1",
|
|
7
|
+
"trigger-expanded": "awsui_trigger-expanded_gwq0h_1brli_119",
|
|
8
|
+
"icon": "awsui_icon_gwq0h_1brli_133",
|
|
9
|
+
"root": "awsui_root_gwq0h_1brli_151",
|
|
10
|
+
"expand-button": "awsui_expand-button_gwq0h_1brli_168",
|
|
11
|
+
"expanded": "awsui_expanded_gwq0h_1brli_175",
|
|
12
|
+
"icon-container": "awsui_icon-container_gwq0h_1brli_179",
|
|
13
|
+
"icon-container-container": "awsui_icon-container-container_gwq0h_1brli_184",
|
|
14
|
+
"wrapper": "awsui_wrapper_gwq0h_1brli_188",
|
|
15
|
+
"wrapper-default": "awsui_wrapper-default_gwq0h_1brli_195",
|
|
16
|
+
"wrapper-footer": "awsui_wrapper-footer_gwq0h_1brli_195",
|
|
17
|
+
"wrapper-navigation": "awsui_wrapper-navigation_gwq0h_1brli_198",
|
|
18
|
+
"wrapper-container": "awsui_wrapper-container_gwq0h_1brli_201",
|
|
19
|
+
"header-deprecated": "awsui_header-deprecated_gwq0h_1brli_217",
|
|
20
|
+
"wrapper-expanded": "awsui_wrapper-expanded_gwq0h_1brli_248",
|
|
21
|
+
"header": "awsui_header_gwq0h_1brli_217",
|
|
22
|
+
"header-wrapper": "awsui_header-wrapper_gwq0h_1brli_255",
|
|
23
|
+
"header-button": "awsui_header-button_gwq0h_1brli_265",
|
|
24
|
+
"header-container-button": "awsui_header-container-button_gwq0h_1brli_265",
|
|
25
|
+
"header-container": "awsui_header-container_gwq0h_1brli_265",
|
|
26
|
+
"header-navigation": "awsui_header-navigation_gwq0h_1brli_297",
|
|
27
|
+
"header-text": "awsui_header-text_gwq0h_1brli_329",
|
|
28
|
+
"content": "awsui_content_gwq0h_1brli_97",
|
|
29
|
+
"content-default": "awsui_content-default_gwq0h_1brli_336",
|
|
30
|
+
"content-footer": "awsui_content-footer_gwq0h_1brli_339",
|
|
31
|
+
"content-expanded": "awsui_content-expanded_gwq0h_1brli_342",
|
|
32
|
+
"focusable": "awsui_focusable_gwq0h_1brli_346",
|
|
33
|
+
"click-target": "awsui_click-target_gwq0h_1brli_357"
|
|
33
34
|
};
|
|
34
35
|
|
package/form/internal.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["form/internal.tsx"],"names":[],"mappings":";AASA,OAAO,EAAmB,SAAS,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAOlF,KAAK,iBAAiB,GAAG,SAAS,GAAG,0BAA0B,CAAC;AAEhE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,MAAM,EACN,SAAS,EACT,kBAAkB,EAAE,0BAA0B,EAC9C,OAAO,EACP,gBAAgB,EAChB,OAAO,EACP,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,iBAAiB,
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["form/internal.tsx"],"names":[],"mappings":";AASA,OAAO,EAAmB,SAAS,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAOlF,KAAK,iBAAiB,GAAG,SAAS,GAAG,0BAA0B,CAAC;AAEhE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,MAAM,EACN,SAAS,EACT,kBAAkB,EAAE,0BAA0B,EAC9C,OAAO,EACP,gBAAgB,EAChB,OAAO,EACP,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,iBAAiB,eAkDnB"}
|
package/form/internal.js
CHANGED
|
@@ -17,12 +17,17 @@ export default function InternalForm(_a) {
|
|
|
17
17
|
const baseProps = getBaseProps(props);
|
|
18
18
|
const i18n = useInternalI18n('form');
|
|
19
19
|
const errorIconAriaLabel = i18n('errorIconAriaLabel', errorIconAriaLabelOverride);
|
|
20
|
-
const { funnelInteractionId, submissionAttempt } = useFunnel();
|
|
20
|
+
const { funnelInteractionId, submissionAttempt, errorCount } = useFunnel();
|
|
21
21
|
useEffect(() => {
|
|
22
22
|
if (funnelInteractionId && errorText) {
|
|
23
|
+
errorCount.current++;
|
|
23
24
|
FunnelMetrics.funnelError({ funnelInteractionId });
|
|
25
|
+
return () => {
|
|
26
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
27
|
+
errorCount.current--;
|
|
28
|
+
};
|
|
24
29
|
}
|
|
25
|
-
}, [funnelInteractionId, errorText, submissionAttempt]);
|
|
30
|
+
}, [funnelInteractionId, errorText, submissionAttempt, errorCount]);
|
|
26
31
|
return (React.createElement("div", Object.assign({}, baseProps, { ref: __internalRootRef, className: clsx(styles.root, baseProps.className) }),
|
|
27
32
|
React.createElement(FormLayout, { header: header && React.createElement("div", { className: clsx(styles.header, variant === 'full-page' && styles['full-page']) }, header), variant: variant },
|
|
28
33
|
children && React.createElement("div", { className: styles.content }, children),
|
package/form/internal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["form/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,aAAa,MAAM,mBAAmB,CAAC;AAC9C,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAC1C,OAAO,qBAAqB,MAAM,4BAA4B,CAAC;AAC/D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,UAAU,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3D,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAItD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAUjB;QAViB,EACnC,QAAQ,EACR,MAAM,EACN,SAAS,EACT,kBAAkB,EAAE,0BAA0B,EAC9C,OAAO,EACP,gBAAgB,EAChB,OAAO,EACP,iBAAiB,OAEC,EADf,KAAK,cAT2B,wHAUpC,CADS;IAER,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,IAAI,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;IACrC,MAAM,kBAAkB,GAAG,IAAI,CAAC,oBAAoB,EAAE,0BAA0B,CAAC,CAAC;IAElF,MAAM,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,GAAG,SAAS,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["form/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect } from 'react';\nimport clsx from 'clsx';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalAlert from '../alert/internal';\nimport InternalBox from '../box/internal';\nimport InternalContentLayout from '../content-layout/internal';\nimport styles from './styles.css.js';\nimport { FormLayoutProps, FormProps } from './interfaces';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport LiveRegion from '../internal/components/live-region';\nimport { useInternalI18n } from '../internal/i18n/context';\n\nimport { useFunnel } from '../internal/analytics/hooks/use-funnel';\nimport { FunnelMetrics } from '../internal/analytics';\n\ntype InternalFormProps = FormProps & InternalBaseComponentProps;\n\nexport default function InternalForm({\n children,\n header,\n errorText,\n errorIconAriaLabel: errorIconAriaLabelOverride,\n actions,\n secondaryActions,\n variant,\n __internalRootRef,\n ...props\n}: InternalFormProps) {\n const baseProps = getBaseProps(props);\n const i18n = useInternalI18n('form');\n const errorIconAriaLabel = i18n('errorIconAriaLabel', errorIconAriaLabelOverride);\n\n const { funnelInteractionId, submissionAttempt, errorCount } = useFunnel();\n\n useEffect(() => {\n if (funnelInteractionId && errorText) {\n errorCount.current++;\n FunnelMetrics.funnelError({ funnelInteractionId });\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n errorCount.current--;\n };\n }\n }, [funnelInteractionId, errorText, submissionAttempt, errorCount]);\n\n return (\n <div {...baseProps} ref={__internalRootRef} className={clsx(styles.root, baseProps.className)}>\n <FormLayout\n header={\n header && <div className={clsx(styles.header, variant === 'full-page' && styles['full-page'])}>{header}</div>\n }\n variant={variant}\n >\n {children && <div className={styles.content}>{children}</div>}\n {errorText && (\n <InternalBox margin={{ top: 'l' }}>\n <InternalAlert type=\"error\" statusIconAriaLabel={errorIconAriaLabel}>\n <div className={styles.error}>{errorText}</div>\n </InternalAlert>\n </InternalBox>\n )}\n {(actions || secondaryActions) && (\n <div className={styles.footer}>\n <div className={styles['actions-section']}>\n {actions && <div className={styles.actions}>{actions}</div>}\n {secondaryActions && <div className={styles['secondary-actions']}>{secondaryActions}</div>}\n </div>\n </div>\n )}\n {errorText && (\n <LiveRegion assertive={true}>\n {errorIconAriaLabel}, {errorText}\n </LiveRegion>\n )}\n </FormLayout>\n </div>\n );\n}\n\nfunction FormLayout({ children, header, variant }: FormLayoutProps) {\n return variant === 'full-page' && header ? (\n <InternalContentLayout header={header}>{children}</InternalContentLayout>\n ) : (\n <>\n {header}\n {children}\n </>\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["form-field/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAazC,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAetD,UAAU,mBAAmB;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,kBAAkB,EAAE,EAAE,mBAAmB,eAiBvF;AAED,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,eAMA;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,SAAS,EACT,OAAe,EACf,KAAK,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,SAAS,EACT,WAAW,EACX,iBAAwB,EACxB,gBAAwB,EACxB,GAAG,IAAI,EACR,EAAE,sBAAsB,
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["form-field/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAazC,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAetD,UAAU,mBAAmB;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,kBAAkB,EAAE,EAAE,mBAAmB,eAiBvF;AAED,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EACF,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,eAMA;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,SAAS,EACT,OAAe,EACf,KAAK,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,SAAS,EACT,WAAW,EACX,iBAAwB,EACxB,gBAAwB,EACxB,GAAG,IAAI,EACR,EAAE,sBAAsB,eA2HxB"}
|
package/form-field/internal.js
CHANGED
|
@@ -35,7 +35,7 @@ export default function InternalFormField(_a) {
|
|
|
35
35
|
const instanceUniqueId = useUniqueId('formField');
|
|
36
36
|
const generatedControlId = controlId || instanceUniqueId;
|
|
37
37
|
const formFieldId = controlId || generatedControlId;
|
|
38
|
-
const { funnelInteractionId, submissionAttempt } = useFunnel();
|
|
38
|
+
const { funnelInteractionId, submissionAttempt, funnelState, errorCount } = useFunnel();
|
|
39
39
|
const { stepNumber, stepNameSelector, subStepSelector, subStepNameSelector } = useFunnelSubStep();
|
|
40
40
|
const slotIds = getSlotIds(formFieldId, label, description, constraintText, errorText);
|
|
41
41
|
const ariaDescribedBy = getAriaDescribedBy(slotIds);
|
|
@@ -51,9 +51,10 @@ export default function InternalFormField(_a) {
|
|
|
51
51
|
[DATA_ATTR_FIELD_ERROR]: slotIds.error ? getFieldSlotSeletor(slotIds.error) : undefined,
|
|
52
52
|
};
|
|
53
53
|
useEffect(() => {
|
|
54
|
-
if (funnelInteractionId && errorText) {
|
|
54
|
+
if (funnelInteractionId && errorText && funnelState.current !== 'complete') {
|
|
55
55
|
const stepName = getNameFromSelector(stepNameSelector);
|
|
56
56
|
const subStepName = getNameFromSelector(subStepNameSelector);
|
|
57
|
+
errorCount.current++;
|
|
57
58
|
FunnelMetrics.funnelSubStepError({
|
|
58
59
|
funnelInteractionId,
|
|
59
60
|
subStepSelector,
|
|
@@ -66,9 +67,13 @@ export default function InternalFormField(_a) {
|
|
|
66
67
|
fieldLabelSelector: getFieldSlotSeletor(slotIds.label),
|
|
67
68
|
subStepAllSelector: getSubStepAllSelector(),
|
|
68
69
|
});
|
|
70
|
+
return () => {
|
|
71
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
72
|
+
errorCount.current--;
|
|
73
|
+
};
|
|
69
74
|
}
|
|
70
75
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
71
|
-
}, [funnelInteractionId, errorText, submissionAttempt]);
|
|
76
|
+
}, [funnelInteractionId, errorText, submissionAttempt, errorCount]);
|
|
72
77
|
return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root), ref: __internalRootRef }, analyticsAttributes),
|
|
73
78
|
React.createElement("div", { className: clsx(__hideLabel && styles['visually-hidden']) },
|
|
74
79
|
label && (React.createElement("label", { className: styles.label, id: slotIds.label, htmlFor: generatedControlId }, label)),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["form-field/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nimport InternalGrid from '../grid/internal';\nimport InternalIcon from '../icon/internal';\nimport { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util';\n\nimport styles from './styles.css.js';\nimport { InternalFormFieldProps } from './interfaces';\nimport { joinStrings } from '../internal/utils/strings';\nimport { useInternalI18n } from '../internal/i18n/context';\nimport { InfoLinkLabelContext } from '../internal/context/info-link-label-context';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport {\n DATA_ATTR_FIELD_ERROR,\n DATA_ATTR_FIELD_LABEL,\n getFieldSlotSeletor,\n getNameFromSelector,\n getSubStepAllSelector,\n} from '../internal/analytics/selectors';\n\ninterface FormFieldErrorProps {\n id?: string;\n children?: React.ReactNode;\n errorIconAriaLabel?: string;\n}\n\nexport function FormFieldError({ id, children, errorIconAriaLabel }: FormFieldErrorProps) {\n const i18n = useInternalI18n('form-field');\n\n return (\n <div id={id} className={styles.error}>\n <div className={styles['error-icon-shake-wrapper']}>\n <div\n role=\"img\"\n aria-label={i18n('i18nStrings.errorIconAriaLabel', errorIconAriaLabel)}\n className={styles['error-icon-scale-wrapper']}\n >\n <InternalIcon name=\"status-warning\" size=\"small\" />\n </div>\n </div>\n <span className={styles.error__message}>{children}</span>\n </div>\n );\n}\n\nexport function ConstraintText({\n id,\n hasError,\n children,\n}: {\n id?: string;\n hasError: boolean;\n children: React.ReactNode;\n}) {\n return (\n <div id={id} className={clsx(styles.constraint, hasError && styles['constraint-has-error'])}>\n {children}\n </div>\n );\n}\n\nexport default function InternalFormField({\n controlId,\n stretch = false,\n label,\n info,\n i18nStrings,\n children,\n secondaryControl,\n description,\n constraintText,\n errorText,\n __hideLabel,\n __internalRootRef = null,\n __disableGutters = false,\n ...rest\n}: InternalFormFieldProps) {\n const baseProps = getBaseProps(rest);\n const isRefresh = useVisualRefresh();\n\n const instanceUniqueId = useUniqueId('formField');\n const generatedControlId = controlId || instanceUniqueId;\n const formFieldId = controlId || generatedControlId;\n\n const { funnelInteractionId, submissionAttempt } = useFunnel();\n\n const { stepNumber, stepNameSelector, subStepSelector, subStepNameSelector } = useFunnelSubStep();\n\n const slotIds = getSlotIds(formFieldId, label, description, constraintText, errorText);\n\n const ariaDescribedBy = getAriaDescribedBy(slotIds);\n\n const gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);\n\n const {\n ariaLabelledby: parentAriaLabelledby,\n ariaDescribedby: parentAriaDescribedby,\n invalid: parentInvalid,\n } = useFormFieldContext({});\n\n const contextValuesWithoutControlId = {\n ariaLabelledby: joinStrings(parentAriaLabelledby, slotIds.label) || undefined,\n ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) || undefined,\n invalid: !!errorText || !!parentInvalid,\n };\n\n const analyticsAttributes = {\n [DATA_ATTR_FIELD_LABEL]: slotIds.label ? getFieldSlotSeletor(slotIds.label) : undefined,\n [DATA_ATTR_FIELD_ERROR]: slotIds.error ? getFieldSlotSeletor(slotIds.error) : undefined,\n };\n\n useEffect(() => {\n if (funnelInteractionId && errorText) {\n const stepName = getNameFromSelector(stepNameSelector);\n const subStepName = getNameFromSelector(subStepNameSelector);\n\n FunnelMetrics.funnelSubStepError({\n funnelInteractionId,\n subStepSelector,\n subStepName,\n subStepNameSelector,\n stepNumber,\n stepName,\n stepNameSelector,\n fieldErrorSelector: getFieldSlotSeletor(slotIds.error),\n fieldLabelSelector: getFieldSlotSeletor(slotIds.label),\n subStepAllSelector: getSubStepAllSelector(),\n });\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [funnelInteractionId, errorText, submissionAttempt]);\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n ref={__internalRootRef}\n {...analyticsAttributes}\n >\n <div className={clsx(__hideLabel && styles['visually-hidden'])}>\n {label && (\n <label className={styles.label} id={slotIds.label} htmlFor={generatedControlId}>\n {label}\n </label>\n )}\n <InfoLinkLabelContext.Provider value={slotIds.label}>\n {!__hideLabel && info && <span className={styles.info}>{info}</span>}\n </InfoLinkLabelContext.Provider>\n </div>\n\n {description && (\n <div className={styles.description} id={slotIds.description}>\n {description}\n </div>\n )}\n\n <div className={clsx(styles.controls, __hideLabel && styles['label-hidden'])}>\n <InternalGrid gridDefinition={gridDefinition} disableGutters={__disableGutters}>\n <FormFieldContext.Provider\n value={{\n controlId: generatedControlId,\n ...contextValuesWithoutControlId,\n }}\n >\n {children && <div className={styles.control}>{children}</div>}\n </FormFieldContext.Provider>\n\n {secondaryControl && (\n <FormFieldContext.Provider value={contextValuesWithoutControlId}>\n <div className={styles['secondary-control']}>{secondaryControl}</div>\n </FormFieldContext.Provider>\n )}\n </InternalGrid>\n </div>\n\n {(constraintText || errorText) && (\n <div className={styles.hints}>\n {errorText && (\n <FormFieldError id={slotIds.error} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n {errorText}\n </FormFieldError>\n )}\n {constraintText && (\n <ConstraintText id={slotIds.constraint} hasError={!!errorText}>\n {constraintText}\n </ConstraintText>\n )}\n </div>\n )}\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["form-field/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC/F,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErE,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAE3E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,6CAA6C,CAAC;AAEnF,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AACrF,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACrB,mBAAmB,EACnB,mBAAmB,EACnB,qBAAqB,GACtB,MAAM,iCAAiC,CAAC;AAQzC,MAAM,UAAU,cAAc,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,kBAAkB,EAAuB;IACtF,MAAM,IAAI,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC;IAE3C,OAAO,CACL,6BAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK;QAClC,6BAAK,SAAS,EAAE,MAAM,CAAC,0BAA0B,CAAC;YAChD,6BACE,IAAI,EAAC,KAAK,gBACE,IAAI,CAAC,gCAAgC,EAAE,kBAAkB,CAAC,EACtE,SAAS,EAAE,MAAM,CAAC,0BAA0B,CAAC;gBAE7C,oBAAC,YAAY,IAAC,IAAI,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO,GAAG,CAC/C,CACF;QACN,8BAAM,SAAS,EAAE,MAAM,CAAC,cAAc,IAAG,QAAQ,CAAQ,CACrD,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,EAC7B,EAAE,EACF,QAAQ,EACR,QAAQ,GAKT;IACC,OAAO,CACL,6BAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,QAAQ,IAAI,MAAM,CAAC,sBAAsB,CAAC,CAAC,IACxF,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EAejB;QAfiB,EACxC,SAAS,EACT,OAAO,GAAG,KAAK,EACf,KAAK,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,SAAS,EACT,WAAW,EACX,iBAAiB,GAAG,IAAI,EACxB,gBAAgB,GAAG,KAAK,OAED,EADpB,IAAI,cAdiC,8LAezC,CADQ;IAEP,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IAErC,MAAM,gBAAgB,GAAG,WAAW,CAAC,WAAW,CAAC,CAAC;IAClD,MAAM,kBAAkB,GAAG,SAAS,IAAI,gBAAgB,CAAC;IACzD,MAAM,WAAW,GAAG,SAAS,IAAI,kBAAkB,CAAC;IAEpD,MAAM,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,SAAS,EAAE,CAAC;IAExF,MAAM,EAAE,UAAU,EAAE,gBAAgB,EAAE,eAAe,EAAE,mBAAmB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAElG,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,SAAS,CAAC,CAAC;IAEvF,MAAM,eAAe,GAAG,kBAAkB,CAAC,OAAO,CAAC,CAAC;IAEpD,MAAM,cAAc,GAAG,iBAAiB,CAAC,OAAO,EAAE,CAAC,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC;IAEjF,MAAM,EACJ,cAAc,EAAE,oBAAoB,EACpC,eAAe,EAAE,qBAAqB,EACtC,OAAO,EAAE,aAAa,GACvB,GAAG,mBAAmB,CAAC,EAAE,CAAC,CAAC;IAE5B,MAAM,6BAA6B,GAAG;QACpC,cAAc,EAAE,WAAW,CAAC,oBAAoB,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI,SAAS;QAC7E,eAAe,EAAE,WAAW,CAAC,qBAAqB,EAAE,eAAe,CAAC,IAAI,SAAS;QACjF,OAAO,EAAE,CAAC,CAAC,SAAS,IAAI,CAAC,CAAC,aAAa;KACxC,CAAC;IAEF,MAAM,mBAAmB,GAAG;QAC1B,CAAC,qBAAqB,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,mBAAmB,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS;QACvF,CAAC,qBAAqB,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,mBAAmB,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS;KACxF,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,mBAAmB,IAAI,SAAS,IAAI,WAAW,CAAC,OAAO,KAAK,UAAU,EAAE;YAC1E,MAAM,QAAQ,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;YACvD,MAAM,WAAW,GAAG,mBAAmB,CAAC,mBAAmB,CAAC,CAAC;YAE7D,UAAU,CAAC,OAAO,EAAE,CAAC;YAErB,aAAa,CAAC,kBAAkB,CAAC;gBAC/B,mBAAmB;gBACnB,eAAe;gBACf,WAAW;gBACX,mBAAmB;gBACnB,UAAU;gBACV,QAAQ;gBACR,gBAAgB;gBAChB,kBAAkB,EAAE,mBAAmB,CAAC,OAAO,CAAC,KAAK,CAAC;gBACtD,kBAAkB,EAAE,mBAAmB,CAAC,OAAO,CAAC,KAAK,CAAC;gBACtD,kBAAkB,EAAE,qBAAqB,EAAE;aAC5C,CAAC,CAAC;YAEH,OAAO,GAAG,EAAE;gBACV,uDAAuD;gBACvD,UAAU,CAAC,OAAO,EAAE,CAAC;YACvB,CAAC,CAAC;SACH;QAED,uDAAuD;IACzD,CAAC,EAAE,CAAC,mBAAmB,EAAE,SAAS,EAAE,iBAAiB,EAAE,UAAU,CAAC,CAAC,CAAC;IAEpE,OAAO,CACL,6CACM,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,EACjD,GAAG,EAAE,iBAAiB,IAClB,mBAAmB;QAEvB,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,IAAI,MAAM,CAAC,iBAAiB,CAAC,CAAC;YAC3D,KAAK,IAAI,CACR,+BAAO,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,EAAE,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,kBAAkB,IAC3E,KAAK,CACA,CACT;YACD,oBAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO,CAAC,KAAK,IAChD,CAAC,WAAW,IAAI,IAAI,IAAI,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,IAAI,CAAQ,CACtC,CAC5B;QAEL,WAAW,IAAI,CACd,6BAAK,SAAS,EAAE,MAAM,CAAC,WAAW,EAAE,EAAE,EAAE,OAAO,CAAC,WAAW,IACxD,WAAW,CACR,CACP;QAED,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,WAAW,IAAI,MAAM,CAAC,cAAc,CAAC,CAAC;YAC1E,oBAAC,YAAY,IAAC,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,gBAAgB;gBAC5E,oBAAC,gBAAgB,CAAC,QAAQ,IACxB,KAAK,kBACH,SAAS,EAAE,kBAAkB,IAC1B,6BAA6B,KAGjC,QAAQ,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAO,CACnC;gBAE3B,gBAAgB,IAAI,CACnB,oBAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,6BAA6B;oBAC7D,6BAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,IAAG,gBAAgB,CAAO,CAC3C,CAC7B,CACY,CACX;QAEL,CAAC,cAAc,IAAI,SAAS,CAAC,IAAI,CAChC,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK;YACzB,SAAS,IAAI,CACZ,oBAAC,cAAc,IAAC,EAAE,EAAE,OAAO,CAAC,KAAK,EAAE,kBAAkB,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,kBAAkB,IACnF,SAAS,CACK,CAClB;YACA,cAAc,IAAI,CACjB,oBAAC,cAAc,IAAC,EAAE,EAAE,OAAO,CAAC,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,SAAS,IAC1D,cAAc,CACA,CAClB,CACG,CACP,CACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nimport InternalGrid from '../grid/internal';\nimport InternalIcon from '../icon/internal';\nimport { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util';\n\nimport styles from './styles.css.js';\nimport { InternalFormFieldProps } from './interfaces';\nimport { joinStrings } from '../internal/utils/strings';\nimport { useInternalI18n } from '../internal/i18n/context';\nimport { InfoLinkLabelContext } from '../internal/context/info-link-label-context';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport {\n DATA_ATTR_FIELD_ERROR,\n DATA_ATTR_FIELD_LABEL,\n getFieldSlotSeletor,\n getNameFromSelector,\n getSubStepAllSelector,\n} from '../internal/analytics/selectors';\n\ninterface FormFieldErrorProps {\n id?: string;\n children?: React.ReactNode;\n errorIconAriaLabel?: string;\n}\n\nexport function FormFieldError({ id, children, errorIconAriaLabel }: FormFieldErrorProps) {\n const i18n = useInternalI18n('form-field');\n\n return (\n <div id={id} className={styles.error}>\n <div className={styles['error-icon-shake-wrapper']}>\n <div\n role=\"img\"\n aria-label={i18n('i18nStrings.errorIconAriaLabel', errorIconAriaLabel)}\n className={styles['error-icon-scale-wrapper']}\n >\n <InternalIcon name=\"status-warning\" size=\"small\" />\n </div>\n </div>\n <span className={styles.error__message}>{children}</span>\n </div>\n );\n}\n\nexport function ConstraintText({\n id,\n hasError,\n children,\n}: {\n id?: string;\n hasError: boolean;\n children: React.ReactNode;\n}) {\n return (\n <div id={id} className={clsx(styles.constraint, hasError && styles['constraint-has-error'])}>\n {children}\n </div>\n );\n}\n\nexport default function InternalFormField({\n controlId,\n stretch = false,\n label,\n info,\n i18nStrings,\n children,\n secondaryControl,\n description,\n constraintText,\n errorText,\n __hideLabel,\n __internalRootRef = null,\n __disableGutters = false,\n ...rest\n}: InternalFormFieldProps) {\n const baseProps = getBaseProps(rest);\n const isRefresh = useVisualRefresh();\n\n const instanceUniqueId = useUniqueId('formField');\n const generatedControlId = controlId || instanceUniqueId;\n const formFieldId = controlId || generatedControlId;\n\n const { funnelInteractionId, submissionAttempt, funnelState, errorCount } = useFunnel();\n\n const { stepNumber, stepNameSelector, subStepSelector, subStepNameSelector } = useFunnelSubStep();\n\n const slotIds = getSlotIds(formFieldId, label, description, constraintText, errorText);\n\n const ariaDescribedBy = getAriaDescribedBy(slotIds);\n\n const gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);\n\n const {\n ariaLabelledby: parentAriaLabelledby,\n ariaDescribedby: parentAriaDescribedby,\n invalid: parentInvalid,\n } = useFormFieldContext({});\n\n const contextValuesWithoutControlId = {\n ariaLabelledby: joinStrings(parentAriaLabelledby, slotIds.label) || undefined,\n ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) || undefined,\n invalid: !!errorText || !!parentInvalid,\n };\n\n const analyticsAttributes = {\n [DATA_ATTR_FIELD_LABEL]: slotIds.label ? getFieldSlotSeletor(slotIds.label) : undefined,\n [DATA_ATTR_FIELD_ERROR]: slotIds.error ? getFieldSlotSeletor(slotIds.error) : undefined,\n };\n\n useEffect(() => {\n if (funnelInteractionId && errorText && funnelState.current !== 'complete') {\n const stepName = getNameFromSelector(stepNameSelector);\n const subStepName = getNameFromSelector(subStepNameSelector);\n\n errorCount.current++;\n\n FunnelMetrics.funnelSubStepError({\n funnelInteractionId,\n subStepSelector,\n subStepName,\n subStepNameSelector,\n stepNumber,\n stepName,\n stepNameSelector,\n fieldErrorSelector: getFieldSlotSeletor(slotIds.error),\n fieldLabelSelector: getFieldSlotSeletor(slotIds.label),\n subStepAllSelector: getSubStepAllSelector(),\n });\n\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n errorCount.current--;\n };\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [funnelInteractionId, errorText, submissionAttempt, errorCount]);\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n ref={__internalRootRef}\n {...analyticsAttributes}\n >\n <div className={clsx(__hideLabel && styles['visually-hidden'])}>\n {label && (\n <label className={styles.label} id={slotIds.label} htmlFor={generatedControlId}>\n {label}\n </label>\n )}\n <InfoLinkLabelContext.Provider value={slotIds.label}>\n {!__hideLabel && info && <span className={styles.info}>{info}</span>}\n </InfoLinkLabelContext.Provider>\n </div>\n\n {description && (\n <div className={styles.description} id={slotIds.description}>\n {description}\n </div>\n )}\n\n <div className={clsx(styles.controls, __hideLabel && styles['label-hidden'])}>\n <InternalGrid gridDefinition={gridDefinition} disableGutters={__disableGutters}>\n <FormFieldContext.Provider\n value={{\n controlId: generatedControlId,\n ...contextValuesWithoutControlId,\n }}\n >\n {children && <div className={styles.control}>{children}</div>}\n </FormFieldContext.Provider>\n\n {secondaryControl && (\n <FormFieldContext.Provider value={contextValuesWithoutControlId}>\n <div className={styles['secondary-control']}>{secondaryControl}</div>\n </FormFieldContext.Provider>\n )}\n </InternalGrid>\n </div>\n\n {(constraintText || errorText) && (\n <div className={styles.hints}>\n {errorText && (\n <FormFieldError id={slotIds.error} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n {errorText}\n </FormFieldError>\n )}\n {constraintText && (\n <ConstraintText id={slotIds.constraint} hasError={!!errorText}>\n {constraintText}\n </ConstraintText>\n )}\n </div>\n )}\n </div>\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"analytics-funnel.d.ts","sourceRoot":"lib/default/","sources":["internal/analytics/components/analytics-funnel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAKL,sBAAsB,
|
|
1
|
+
{"version":3,"file":"analytics-funnel.d.ts","sourceRoot":"lib/default/","sources":["internal/analytics/components/analytics-funnel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAKL,sBAAsB,EAEvB,MAAM,8BAA8B,CAAC;AAQtC,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAW7D,eAAO,MAAM,cAAc,QAAQ,CAAC;AAEpC,KAAK,oBAAoB,GAAG;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,IAAI,CAC/D,WAAW,EACX,YAAY,GAAG,qBAAqB,GAAG,kBAAkB,CAC1D,CAAC;AAEF,eAAO,MAAM,eAAe,2BAA4B,oBAAoB,gBAkH3E,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CACnF,GAAG,IAAI,CAAC,eAAe,EAAE,YAAY,GAAG,kBAAkB,CAAC,CAAC;AAE7D,eAAO,MAAM,mBAAmB,+CAAgD,wBAAwB,gBA2CvG,CAAC;AACF,UAAU,2BAA2B;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,sBAAsB,iBAAkB,2BAA2B,gBAsB/E,CAAC"}
|