@cloudscape-design/components 3.0.336 → 3.0.338

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 (200) hide show
  1. package/app-layout/styles.css.js +17 -17
  2. package/app-layout/styles.scoped.css +21 -21
  3. package/app-layout/styles.selectors.js +17 -17
  4. package/app-layout/visual-refresh/styles.css.js +69 -69
  5. package/app-layout/visual-refresh/styles.scoped.css +173 -169
  6. package/app-layout/visual-refresh/styles.selectors.js +69 -69
  7. package/area-chart/chart-container.d.ts +2 -2
  8. package/area-chart/chart-container.d.ts.map +1 -1
  9. package/area-chart/chart-container.js +1 -1
  10. package/area-chart/chart-container.js.map +1 -1
  11. package/area-chart/interfaces.d.ts +5 -1
  12. package/area-chart/interfaces.d.ts.map +1 -1
  13. package/area-chart/interfaces.js.map +1 -1
  14. package/area-chart/internal.d.ts +1 -1
  15. package/area-chart/internal.d.ts.map +1 -1
  16. package/area-chart/internal.js +2 -2
  17. package/area-chart/internal.js.map +1 -1
  18. package/attribute-editor/interfaces.d.ts +7 -0
  19. package/attribute-editor/interfaces.d.ts.map +1 -1
  20. package/attribute-editor/interfaces.js.map +1 -1
  21. package/attribute-editor/internal.d.ts.map +1 -1
  22. package/attribute-editor/internal.js +2 -2
  23. package/attribute-editor/internal.js.map +1 -1
  24. package/attribute-editor/row.d.ts +3 -2
  25. package/attribute-editor/row.d.ts.map +1 -1
  26. package/attribute-editor/row.js +2 -2
  27. package/attribute-editor/row.js.map +1 -1
  28. package/box/styles.css.js +189 -189
  29. package/box/styles.scoped.css +258 -258
  30. package/box/styles.selectors.js +189 -189
  31. package/button/styles.css.js +20 -20
  32. package/button/styles.scoped.css +154 -154
  33. package/button/styles.selectors.js +20 -20
  34. package/button-dropdown/category-elements/styles.css.js +13 -13
  35. package/button-dropdown/category-elements/styles.scoped.css +25 -25
  36. package/button-dropdown/category-elements/styles.selectors.js +13 -13
  37. package/button-dropdown/item-element/styles.css.js +14 -14
  38. package/button-dropdown/item-element/styles.scoped.css +20 -20
  39. package/button-dropdown/item-element/styles.selectors.js +14 -14
  40. package/cards/styles.css.js +38 -38
  41. package/cards/styles.scoped.css +57 -62
  42. package/cards/styles.selectors.js +38 -38
  43. package/container/styles.css.js +28 -28
  44. package/container/styles.scoped.css +57 -54
  45. package/container/styles.selectors.js +28 -28
  46. package/content-layout/styles.css.js +7 -7
  47. package/content-layout/styles.scoped.css +13 -13
  48. package/content-layout/styles.selectors.js +7 -7
  49. package/expandable-section/styles.css.js +29 -29
  50. package/expandable-section/styles.scoped.css +61 -61
  51. package/expandable-section/styles.selectors.js +29 -29
  52. package/flashbar/styles.css.js +46 -46
  53. package/flashbar/styles.scoped.css +146 -146
  54. package/flashbar/styles.selectors.js +46 -46
  55. package/form-field/internal.js +3 -2
  56. package/form-field/internal.js.map +1 -1
  57. package/header/internal.d.ts.map +1 -1
  58. package/header/internal.js +5 -5
  59. package/header/internal.js.map +1 -1
  60. package/header/styles.css.js +33 -44
  61. package/header/styles.scoped.css +85 -91
  62. package/header/styles.selectors.js +33 -44
  63. package/help-panel/styles.css.js +4 -4
  64. package/help-panel/styles.scoped.css +80 -80
  65. package/help-panel/styles.selectors.js +4 -4
  66. package/icon/styles.css.js +21 -21
  67. package/icon/styles.scoped.css +54 -54
  68. package/icon/styles.selectors.js +21 -21
  69. package/internal/analytics/components/analytics-funnel.d.ts.map +1 -1
  70. package/internal/analytics/components/analytics-funnel.js +14 -13
  71. package/internal/analytics/components/analytics-funnel.js.map +1 -1
  72. package/internal/analytics/context/analytics-context.d.ts +6 -7
  73. package/internal/analytics/context/analytics-context.d.ts.map +1 -1
  74. package/internal/analytics/context/analytics-context.js +2 -6
  75. package/internal/analytics/context/analytics-context.js.map +1 -1
  76. package/internal/analytics/hooks/use-funnel.d.ts +4 -7
  77. package/internal/analytics/hooks/use-funnel.d.ts.map +1 -1
  78. package/internal/analytics/hooks/use-funnel.js +9 -7
  79. package/internal/analytics/hooks/use-funnel.js.map +1 -1
  80. package/internal/base-component/styles.scoped.css +48 -35
  81. package/internal/components/button-trigger/index.d.ts +2 -1
  82. package/internal/components/button-trigger/index.d.ts.map +1 -1
  83. package/internal/components/button-trigger/index.js +2 -2
  84. package/internal/components/button-trigger/index.js.map +1 -1
  85. package/internal/components/cartesian-chart/interfaces.d.ts +10 -2
  86. package/internal/components/cartesian-chart/interfaces.d.ts.map +1 -1
  87. package/internal/components/cartesian-chart/interfaces.js.map +1 -1
  88. package/internal/components/dropdown/index.d.ts +1 -1
  89. package/internal/components/dropdown/index.d.ts.map +1 -1
  90. package/internal/components/dropdown/index.js +4 -4
  91. package/internal/components/dropdown/index.js.map +1 -1
  92. package/internal/components/dropdown/interfaces.d.ts +8 -0
  93. package/internal/components/dropdown/interfaces.d.ts.map +1 -1
  94. package/internal/components/dropdown/interfaces.js.map +1 -1
  95. package/internal/components/menu-dropdown/styles.css.js +7 -7
  96. package/internal/components/menu-dropdown/styles.scoped.css +14 -14
  97. package/internal/components/menu-dropdown/styles.selectors.js +7 -7
  98. package/internal/environment.js +1 -1
  99. package/internal/generated/theming/index.cjs +164 -120
  100. package/internal/generated/theming/index.js +164 -120
  101. package/internal/manifest.json +1 -1
  102. package/link/internal.d.ts.map +1 -1
  103. package/link/internal.js +3 -2
  104. package/link/internal.js.map +1 -1
  105. package/link/styles.css.js +20 -20
  106. package/link/styles.scoped.css +83 -83
  107. package/link/styles.selectors.js +20 -20
  108. package/mixed-line-bar-chart/internal.d.ts +1 -1
  109. package/mixed-line-bar-chart/internal.d.ts.map +1 -1
  110. package/mixed-line-bar-chart/internal.js +2 -2
  111. package/mixed-line-bar-chart/internal.js.map +1 -1
  112. package/modal/styles.css.js +23 -23
  113. package/modal/styles.scoped.css +40 -40
  114. package/modal/styles.selectors.js +23 -23
  115. package/package.json +1 -1
  116. package/pagination/styles.css.js +9 -9
  117. package/pagination/styles.scoped.css +24 -24
  118. package/pagination/styles.selectors.js +9 -9
  119. package/popover/styles.css.js +50 -50
  120. package/popover/styles.scoped.css +65 -65
  121. package/popover/styles.selectors.js +50 -50
  122. package/property-filter/index.d.ts.map +1 -1
  123. package/property-filter/index.js +4 -3
  124. package/property-filter/index.js.map +1 -1
  125. package/property-filter/interfaces.d.ts +16 -5
  126. package/property-filter/interfaces.d.ts.map +1 -1
  127. package/property-filter/interfaces.js.map +1 -1
  128. package/s3-resource-selector/index.d.ts.map +1 -1
  129. package/s3-resource-selector/index.js +2 -2
  130. package/s3-resource-selector/index.js.map +1 -1
  131. package/s3-resource-selector/interfaces.d.ts +7 -0
  132. package/s3-resource-selector/interfaces.d.ts.map +1 -1
  133. package/s3-resource-selector/interfaces.js.map +1 -1
  134. package/s3-resource-selector/s3-in-context/index.d.ts +1 -0
  135. package/s3-resource-selector/s3-in-context/index.d.ts.map +1 -1
  136. package/s3-resource-selector/s3-in-context/index.js +2 -2
  137. package/s3-resource-selector/s3-in-context/index.js.map +1 -1
  138. package/segmented-control/styles.css.js +14 -14
  139. package/segmented-control/styles.scoped.css +35 -35
  140. package/segmented-control/styles.selectors.js +14 -14
  141. package/select/utils/use-select.d.ts +5 -7
  142. package/select/utils/use-select.d.ts.map +1 -1
  143. package/select/utils/use-select.js +6 -0
  144. package/select/utils/use-select.js.map +1 -1
  145. package/side-navigation/internal.d.ts.map +1 -1
  146. package/side-navigation/internal.js +3 -1
  147. package/side-navigation/internal.js.map +1 -1
  148. package/side-navigation/styles.css.js +28 -27
  149. package/side-navigation/styles.scoped.css +52 -48
  150. package/side-navigation/styles.selectors.js +28 -27
  151. package/spinner/styles.css.js +13 -13
  152. package/spinner/styles.scoped.css +22 -22
  153. package/spinner/styles.selectors.js +13 -13
  154. package/split-panel/styles.css.js +56 -56
  155. package/split-panel/styles.scoped.css +80 -80
  156. package/split-panel/styles.selectors.js +56 -56
  157. package/table/header-cell/styles.css.js +24 -24
  158. package/table/header-cell/styles.scoped.css +41 -41
  159. package/table/header-cell/styles.selectors.js +24 -24
  160. package/table/styles.css.js +34 -34
  161. package/table/styles.scoped.css +45 -52
  162. package/table/styles.selectors.js +34 -34
  163. package/tabs/styles.css.js +21 -21
  164. package/tabs/styles.scoped.css +44 -41
  165. package/tabs/styles.selectors.js +21 -21
  166. package/tag-editor/styles.css.js +3 -3
  167. package/tag-editor/styles.scoped.css +11 -11
  168. package/tag-editor/styles.selectors.js +3 -3
  169. package/text-content/styles.css.js +1 -1
  170. package/text-content/styles.scoped.css +71 -71
  171. package/text-content/styles.selectors.js +1 -1
  172. package/tiles/styles.css.js +29 -28
  173. package/tiles/styles.scoped.css +76 -70
  174. package/tiles/styles.selectors.js +29 -28
  175. package/tiles/tile.d.ts.map +1 -1
  176. package/tiles/tile.js +3 -1
  177. package/tiles/tile.js.map +1 -1
  178. package/top-navigation/1.0-beta/styles.css.js +25 -25
  179. package/top-navigation/1.0-beta/styles.scoped.css +45 -45
  180. package/top-navigation/1.0-beta/styles.selectors.js +25 -25
  181. package/top-navigation/styles.css.js +47 -47
  182. package/top-navigation/styles.scoped.css +74 -74
  183. package/top-navigation/styles.selectors.js +47 -47
  184. package/tutorial-panel/components/tutorial-detail-view/styles.css.js +20 -20
  185. package/tutorial-panel/components/tutorial-detail-view/styles.scoped.css +22 -22
  186. package/tutorial-panel/components/tutorial-detail-view/styles.selectors.js +20 -20
  187. package/wizard/interfaces.d.ts +10 -3
  188. package/wizard/interfaces.d.ts.map +1 -1
  189. package/wizard/interfaces.js.map +1 -1
  190. package/wizard/internal.d.ts +1 -1
  191. package/wizard/internal.d.ts.map +1 -1
  192. package/wizard/internal.js +5 -5
  193. package/wizard/internal.js.map +1 -1
  194. package/wizard/styles.css.js +31 -31
  195. package/wizard/styles.scoped.css +67 -67
  196. package/wizard/styles.selectors.js +31 -31
  197. package/wizard/wizard-form.d.ts +2 -1
  198. package/wizard/wizard-form.d.ts.map +1 -1
  199. package/wizard/wizard-form.js +2 -2
  200. package/wizard/wizard-form.js.map +1 -1
@@ -91,7 +91,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
91
91
  SPDX-License-Identifier: Apache-2.0
92
92
  */
93
93
  /* stylelint-disable selector-max-universal, selector-max-type */
94
- .awsui_root_1xupv_1i0yo_94:not(#\9) {
94
+ .awsui_root_1xupv_ohoma_94:not(#\9) {
95
95
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
96
96
  border-collapse: separate;
97
97
  border-spacing: 0;
@@ -130,38 +130,38 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
130
130
  -moz-osx-font-smoothing: auto;
131
131
  }
132
132
 
133
- .awsui_wizard_1xupv_1i0yo_107.awsui_refresh_1xupv_1i0yo_107:not(#\9) {
133
+ .awsui_wizard_1xupv_ohoma_107.awsui_refresh_1xupv_ohoma_107:not(#\9) {
134
134
  column-gap: var(--space-xl-gsucfg, 24px);
135
135
  display: grid;
136
136
  grid-template-columns: auto minmax(0, 1fr);
137
137
  grid-template-rows: auto 1fr;
138
138
  row-gap: var(--space-scaled-xl-jawob6, 24px);
139
139
  }
140
- .awsui_wizard_1xupv_1i0yo_107.awsui_refresh_1xupv_1i0yo_107.awsui_small-container_1xupv_1i0yo_114:not(#\9) {
140
+ .awsui_wizard_1xupv_ohoma_107.awsui_refresh_1xupv_ohoma_107.awsui_small-container_1xupv_ohoma_114:not(#\9) {
141
141
  grid-template-columns: minmax(0, 1fr) 0;
142
142
  row-gap: var(--space-scaled-l-2rs0gk, 20px);
143
143
  }
144
144
 
145
- .awsui_wizard_1xupv_1i0yo_107:not(#\9):not(.awsui_refresh_1xupv_1i0yo_107) {
145
+ .awsui_wizard_1xupv_ohoma_107:not(#\9):not(.awsui_refresh_1xupv_ohoma_107) {
146
146
  display: flex;
147
147
  }
148
148
 
149
- .awsui_navigation_1xupv_1i0yo_123.awsui_refresh_1xupv_1i0yo_107:not(#\9) {
149
+ .awsui_navigation_1xupv_ohoma_123.awsui_refresh_1xupv_ohoma_107:not(#\9) {
150
150
  grid-column: 1;
151
151
  grid-row: 1/span 2;
152
152
  padding-top: var(--awsui-container-first-gap-zw2xxa, 0px);
153
153
  }
154
- .awsui_navigation_1xupv_1i0yo_123.awsui_refresh_1xupv_1i0yo_107 > ul:not(#\9) {
154
+ .awsui_navigation_1xupv_ohoma_123.awsui_refresh_1xupv_ohoma_107 > ul:not(#\9) {
155
155
  background: var(--color-background-container-content-og3y0v, #ffffff);
156
156
  position: relative;
157
157
  border-radius: var(--border-radius-container-pmtq2d, 16px);
158
158
  box-sizing: border-box;
159
159
  margin: 0;
160
- padding: var(--space-scaled-l-2rs0gk, 20px) var(--space-l-f4l5gr, 20px);
160
+ padding: var(--space-scaled-m-gxhdpl, 16px) var(--space-l-f4l5gr, 20px) var(--space-scaled-l-2rs0gk, 20px) var(--space-m-h2th94, 16px);
161
161
  width: 280px;
162
162
  box-sizing: border-box;
163
163
  }
164
- .awsui_navigation_1xupv_1i0yo_123.awsui_refresh_1xupv_1i0yo_107 > ul:not(#\9)::before {
164
+ .awsui_navigation_1xupv_ohoma_123.awsui_refresh_1xupv_ohoma_107 > ul:not(#\9)::before {
165
165
  content: "";
166
166
  position: absolute;
167
167
  left: 0px;
@@ -176,7 +176,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
176
176
  border-radius: var(--border-radius-container-pmtq2d, 16px);
177
177
  z-index: 1;
178
178
  }
179
- .awsui_navigation_1xupv_1i0yo_123.awsui_refresh_1xupv_1i0yo_107 > ul:not(#\9)::after {
179
+ .awsui_navigation_1xupv_ohoma_123.awsui_refresh_1xupv_ohoma_107 > ul:not(#\9)::after {
180
180
  content: "";
181
181
  position: absolute;
182
182
  left: 0px;
@@ -191,32 +191,32 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
191
191
  mix-blend-mode: multiply;
192
192
  }
193
193
  @media screen and (-ms-high-contrast: active) {
194
- .awsui_navigation_1xupv_1i0yo_123.awsui_refresh_1xupv_1i0yo_107 > ul:not(#\9) {
194
+ .awsui_navigation_1xupv_ohoma_123.awsui_refresh_1xupv_ohoma_107 > ul:not(#\9) {
195
195
  border: var(--border-field-width-riro62, 2px) solid var(--color-border-container-top-camjrq, transparent);
196
196
  }
197
197
  }
198
- .awsui_navigation_1xupv_1i0yo_123.awsui_refresh_1xupv_1i0yo_107 > ul > li:not(#\9) {
198
+ .awsui_navigation_1xupv_ohoma_123.awsui_refresh_1xupv_ohoma_107 > ul > li:not(#\9) {
199
199
  display: grid;
200
- column-gap: var(--space-s-hdd878, 12px);
200
+ column-gap: var(--space-xs-edba2s, 8px);
201
201
  grid-template-columns: var(--space-l-f4l5gr, 20px) 1fr;
202
202
  grid-template-rows: repeat(2, auto);
203
203
  }
204
- .awsui_navigation_1xupv_1i0yo_123.awsui_refresh_1xupv_1i0yo_107 > ul > li > hr:not(#\9) {
204
+ .awsui_navigation_1xupv_ohoma_123.awsui_refresh_1xupv_ohoma_107 > ul > li > hr:not(#\9) {
205
205
  background-color: var(--color-border-divider-default-9o8zql, #e9ebed);
206
206
  border: 0;
207
207
  grid-column: 1;
208
208
  height: 100%;
209
209
  width: var(--space-xxxs-j6dpcy, 2px);
210
210
  }
211
- .awsui_navigation_1xupv_1i0yo_123.awsui_refresh_1xupv_1i0yo_107 > ul > li > .awsui_number_1xupv_1i0yo_185:not(#\9) {
211
+ .awsui_navigation_1xupv_ohoma_123.awsui_refresh_1xupv_ohoma_107 > ul > li > .awsui_number_1xupv_ohoma_185:not(#\9) {
212
212
  color: var(--color-text-small-l0u24v, #5f6b7a);
213
213
  font-size: var(--font-body-s-size-6jmxer, 12px);
214
214
  grid-column: 2;
215
215
  grid-row: 1;
216
216
  }
217
- .awsui_navigation_1xupv_1i0yo_123.awsui_refresh_1xupv_1i0yo_107 > ul > li > a:not(#\9) {
217
+ .awsui_navigation_1xupv_ohoma_123.awsui_refresh_1xupv_ohoma_107 > ul > li > a:not(#\9) {
218
218
  align-items: start;
219
- column-gap: var(--space-s-hdd878, 12px);
219
+ column-gap: var(--space-xs-edba2s, 8px);
220
220
  cursor: pointer;
221
221
  display: grid;
222
222
  font-size: var(--font-body-m-size-7dign1, 14px);
@@ -224,7 +224,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
224
224
  grid-row: 2;
225
225
  grid-template-columns: var(--space-l-f4l5gr, 20px) 1fr;
226
226
  }
227
- .awsui_navigation_1xupv_1i0yo_123.awsui_refresh_1xupv_1i0yo_107 > ul > li > a > .awsui_circle_1xupv_1i0yo_201:not(#\9) {
227
+ .awsui_navigation_1xupv_ohoma_123.awsui_refresh_1xupv_ohoma_107 > ul > li > a > .awsui_circle_1xupv_ohoma_201:not(#\9) {
228
228
  border-radius: 100%;
229
229
  grid-column: 1;
230
230
  height: 10px;
@@ -232,13 +232,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
232
232
  margin-top: 6px;
233
233
  width: 10px;
234
234
  }
235
- .awsui_navigation_1xupv_1i0yo_123.awsui_refresh_1xupv_1i0yo_107 > ul > li > a > .awsui_title_1xupv_1i0yo_209:not(#\9) {
235
+ .awsui_navigation_1xupv_ohoma_123.awsui_refresh_1xupv_ohoma_107 > ul > li > a > .awsui_title_1xupv_ohoma_209:not(#\9) {
236
236
  min-width: 0;
237
237
  -ms-word-break: break-all;
238
238
  word-break: break-word;
239
239
  grid-column: 2;
240
240
  }
241
- body[data-awsui-focus-visible=true] .awsui_navigation_1xupv_1i0yo_123.awsui_refresh_1xupv_1i0yo_107 > ul > li > a:not(#\9):focus {
241
+ body[data-awsui-focus-visible=true] .awsui_navigation_1xupv_ohoma_123.awsui_refresh_1xupv_ohoma_107 > ul > li > a:not(#\9):focus {
242
242
  outline: thin dotted;
243
243
  outline: var(--border-link-focus-ring-outline-pwlekd, 0);
244
244
  outline-offset: 2px;
@@ -246,58 +246,58 @@ body[data-awsui-focus-visible=true] .awsui_navigation_1xupv_1i0yo_123.awsui_refr
246
246
  border-radius: var(--border-radius-control-default-focus-ring-muizvi, 4px);
247
247
  box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-z7lixz, 2px) var(--color-border-item-focused-4t19h5, #0972d3);
248
248
  }
249
- .awsui_navigation_1xupv_1i0yo_123.awsui_refresh_1xupv_1i0yo_107 > ul > li:not(#\9):first-child > hr {
249
+ .awsui_navigation_1xupv_ohoma_123.awsui_refresh_1xupv_ohoma_107 > ul > li:not(#\9):first-child > hr {
250
250
  grid-row: 2/span 2;
251
251
  }
252
- .awsui_navigation_1xupv_1i0yo_123.awsui_refresh_1xupv_1i0yo_107 > ul > li:not(#\9):not(:first-child) > .awsui_number_1xupv_1i0yo_185 {
253
- margin-top: var(--space-scaled-xl-jawob6, 24px);
252
+ .awsui_navigation_1xupv_ohoma_123.awsui_refresh_1xupv_ohoma_107 > ul > li:not(#\9):not(:first-child) > .awsui_number_1xupv_ohoma_185 {
253
+ margin-top: var(--space-m-h2th94, 16px);
254
254
  }
255
- .awsui_navigation_1xupv_1i0yo_123.awsui_refresh_1xupv_1i0yo_107 > ul > li:not(#\9):last-child > hr {
255
+ .awsui_navigation_1xupv_ohoma_123.awsui_refresh_1xupv_ohoma_107 > ul > li:not(#\9):last-child > hr {
256
256
  grid-row: 1;
257
257
  }
258
- .awsui_navigation_1xupv_1i0yo_123.awsui_refresh_1xupv_1i0yo_107 > ul > li:not(#\9):only-of-type > hr {
258
+ .awsui_navigation_1xupv_ohoma_123.awsui_refresh_1xupv_ohoma_107 > ul > li:not(#\9):only-of-type > hr {
259
259
  display: none;
260
260
  }
261
- .awsui_navigation_1xupv_1i0yo_123.awsui_refresh_1xupv_1i0yo_107 > ul > li:not(#\9):not(:first-child):not(:last-child) > hr {
261
+ .awsui_navigation_1xupv_ohoma_123.awsui_refresh_1xupv_ohoma_107 > ul > li:not(#\9):not(:first-child):not(:last-child) > hr {
262
262
  grid-row: 1/span 3;
263
263
  }
264
- .awsui_navigation_1xupv_1i0yo_123.awsui_refresh_1xupv_1i0yo_107 > ul > li.awsui_active_1xupv_1i0yo_238 > a:not(#\9) {
264
+ .awsui_navigation_1xupv_ohoma_123.awsui_refresh_1xupv_ohoma_107 > ul > li.awsui_active_1xupv_ohoma_238 > a:not(#\9) {
265
265
  cursor: text;
266
266
  }
267
- .awsui_navigation_1xupv_1i0yo_123.awsui_refresh_1xupv_1i0yo_107 > ul > li.awsui_active_1xupv_1i0yo_238 > a > .awsui_circle_1xupv_1i0yo_201:not(#\9) {
267
+ .awsui_navigation_1xupv_ohoma_123.awsui_refresh_1xupv_ohoma_107 > ul > li.awsui_active_1xupv_ohoma_238 > a > .awsui_circle_1xupv_ohoma_201:not(#\9) {
268
268
  background-color: var(--color-background-control-checked-k2dd8u, #0972d3);
269
269
  box-shadow: 0 0 0 3px var(--color-background-container-content-og3y0v, #ffffff), 0 0 0 5px var(--color-background-control-checked-k2dd8u, #0972d3), 0 0 0 7px var(--color-background-container-content-og3y0v, #ffffff);
270
270
  }
271
- .awsui_navigation_1xupv_1i0yo_123.awsui_refresh_1xupv_1i0yo_107 > ul > li.awsui_active_1xupv_1i0yo_238 > a > .awsui_title_1xupv_1i0yo_209:not(#\9) {
271
+ .awsui_navigation_1xupv_ohoma_123.awsui_refresh_1xupv_ohoma_107 > ul > li.awsui_active_1xupv_ohoma_238 > a > .awsui_title_1xupv_ohoma_209:not(#\9) {
272
272
  color: var(--color-background-control-checked-k2dd8u, #0972d3);
273
273
  font-weight: 700;
274
274
  }
275
- .awsui_navigation_1xupv_1i0yo_123.awsui_refresh_1xupv_1i0yo_107 > ul > li.awsui_disabled_1xupv_1i0yo_249 > a:not(#\9) {
275
+ .awsui_navigation_1xupv_ohoma_123.awsui_refresh_1xupv_ohoma_107 > ul > li.awsui_disabled_1xupv_ohoma_249 > a:not(#\9) {
276
276
  cursor: text;
277
277
  }
278
- .awsui_navigation_1xupv_1i0yo_123.awsui_refresh_1xupv_1i0yo_107 > ul > li.awsui_disabled_1xupv_1i0yo_249 > a > .awsui_circle_1xupv_1i0yo_201:not(#\9) {
278
+ .awsui_navigation_1xupv_ohoma_123.awsui_refresh_1xupv_ohoma_107 > ul > li.awsui_disabled_1xupv_ohoma_249 > a > .awsui_circle_1xupv_ohoma_201:not(#\9) {
279
279
  background-color: var(--color-background-container-content-og3y0v, #ffffff);
280
280
  box-shadow: 0 0 0 2px var(--color-text-interactive-disabled-nss20z, #9ba7b6), 0 0 0 4px var(--color-background-container-content-og3y0v, #ffffff);
281
281
  }
282
- .awsui_navigation_1xupv_1i0yo_123.awsui_refresh_1xupv_1i0yo_107 > ul > li.awsui_disabled_1xupv_1i0yo_249 > a > .awsui_title_1xupv_1i0yo_209:not(#\9) {
282
+ .awsui_navigation_1xupv_ohoma_123.awsui_refresh_1xupv_ohoma_107 > ul > li.awsui_disabled_1xupv_ohoma_249 > a > .awsui_title_1xupv_ohoma_209:not(#\9) {
283
283
  color: var(--color-text-status-inactive-5laoxv, #5f6b7a);
284
284
  }
285
- .awsui_navigation_1xupv_1i0yo_123.awsui_refresh_1xupv_1i0yo_107 > ul > li.awsui_enabled_1xupv_1i0yo_259 > a > .awsui_circle_1xupv_1i0yo_201:not(#\9) {
285
+ .awsui_navigation_1xupv_ohoma_123.awsui_refresh_1xupv_ohoma_107 > ul > li.awsui_enabled_1xupv_ohoma_259 > a > .awsui_circle_1xupv_ohoma_201:not(#\9) {
286
286
  background-color: var(--color-text-interactive-default-2sml2m, #414d5c);
287
287
  box-shadow: 0 0 0 2px var(--color-text-interactive-default-2sml2m, #414d5c), 0 0 0 4px var(--color-background-container-content-og3y0v, #ffffff);
288
288
  }
289
- .awsui_navigation_1xupv_1i0yo_123.awsui_refresh_1xupv_1i0yo_107 > ul > li.awsui_enabled_1xupv_1i0yo_259 > a > .awsui_title_1xupv_1i0yo_209:not(#\9) {
289
+ .awsui_navigation_1xupv_ohoma_123.awsui_refresh_1xupv_ohoma_107 > ul > li.awsui_enabled_1xupv_ohoma_259 > a > .awsui_title_1xupv_ohoma_209:not(#\9) {
290
290
  color: var(--color-text-interactive-default-2sml2m, #414d5c);
291
291
  }
292
- .awsui_navigation_1xupv_1i0yo_123.awsui_refresh_1xupv_1i0yo_107 > ul > li.awsui_enabled_1xupv_1i0yo_259 > a:not(#\9):hover > .awsui_circle_1xupv_1i0yo_201 {
292
+ .awsui_navigation_1xupv_ohoma_123.awsui_refresh_1xupv_ohoma_107 > ul > li.awsui_enabled_1xupv_ohoma_259 > a:not(#\9):hover > .awsui_circle_1xupv_ohoma_201 {
293
293
  background-color: var(--color-background-control-checked-k2dd8u, #0972d3);
294
294
  box-shadow: 0 0 0 2px var(--color-background-control-checked-k2dd8u, #0972d3), 0 0 0 4px var(--color-background-container-content-og3y0v, #ffffff);
295
295
  }
296
- .awsui_navigation_1xupv_1i0yo_123.awsui_refresh_1xupv_1i0yo_107 > ul > li.awsui_enabled_1xupv_1i0yo_259 > a:not(#\9):hover > .awsui_title_1xupv_1i0yo_209 {
296
+ .awsui_navigation_1xupv_ohoma_123.awsui_refresh_1xupv_ohoma_107 > ul > li.awsui_enabled_1xupv_ohoma_259 > a:not(#\9):hover > .awsui_title_1xupv_ohoma_209 {
297
297
  color: var(--color-background-control-checked-k2dd8u, #0972d3);
298
298
  }
299
299
 
300
- .awsui_navigation_1xupv_1i0yo_123:not(#\9):not(.awsui_refresh_1xupv_1i0yo_107) {
300
+ .awsui_navigation_1xupv_ohoma_123:not(#\9):not(.awsui_refresh_1xupv_ohoma_107) {
301
301
  color: var(--color-text-disabled-t7vw2a, #9ba7b6);
302
302
  display: inline-block;
303
303
  margin-right: calc(2 * var(--space-xxxl-65sweb, 40px));
@@ -305,89 +305,89 @@ body[data-awsui-focus-visible=true] .awsui_navigation_1xupv_1i0yo_123.awsui_refr
305
305
  padding-top: var(--space-xxs-ja5cp8, 4px);
306
306
  width: 200px;
307
307
  }
308
- .awsui_navigation_1xupv_1i0yo_123:not(#\9):not(.awsui_refresh_1xupv_1i0yo_107) > ul {
308
+ .awsui_navigation_1xupv_ohoma_123:not(#\9):not(.awsui_refresh_1xupv_ohoma_107) > ul {
309
309
  list-style: none;
310
310
  padding: 0;
311
311
  margin: 0;
312
312
  }
313
- .awsui_navigation_1xupv_1i0yo_123:not(#\9):not(.awsui_refresh_1xupv_1i0yo_107) > ul > li {
313
+ .awsui_navigation_1xupv_ohoma_123:not(#\9):not(.awsui_refresh_1xupv_ohoma_107) > ul > li {
314
314
  min-width: 0;
315
315
  -ms-word-break: break-all;
316
316
  word-break: break-word;
317
317
  padding-bottom: var(--space-scaled-m-gxhdpl, 16px);
318
318
  padding-top: 0;
319
319
  }
320
- .awsui_navigation_1xupv_1i0yo_123:not(#\9):not(.awsui_refresh_1xupv_1i0yo_107) > ul > li:not(:first-child) {
320
+ .awsui_navigation_1xupv_ohoma_123:not(#\9):not(.awsui_refresh_1xupv_ohoma_107) > ul > li:not(:first-child) {
321
321
  margin-top: var(--space-scaled-m-gxhdpl, 16px);
322
322
  }
323
- .awsui_navigation_1xupv_1i0yo_123:not(#\9):not(.awsui_refresh_1xupv_1i0yo_107) > ul > li:not(:last-child) {
323
+ .awsui_navigation_1xupv_ohoma_123:not(#\9):not(.awsui_refresh_1xupv_ohoma_107) > ul > li:not(:last-child) {
324
324
  border-bottom: var(--border-divider-list-width-um3zli, 1px) solid var(--color-border-layout-wyrb3c, #d1d5db);
325
325
  }
326
326
 
327
- .awsui_form_1xupv_1i0yo_301:not(#\9):not(.awsui_refresh_1xupv_1i0yo_107) {
327
+ .awsui_form_1xupv_ohoma_301:not(#\9):not(.awsui_refresh_1xupv_ohoma_107) {
328
328
  min-width: 0;
329
329
  -ms-word-break: break-all;
330
330
  word-break: break-word;
331
331
  width: 100%;
332
332
  }
333
- .awsui_form_1xupv_1i0yo_301:not(#\9):not(.awsui_refresh_1xupv_1i0yo_107) > .awsui_form-header_1xupv_1i0yo_307 {
333
+ .awsui_form_1xupv_ohoma_301:not(#\9):not(.awsui_refresh_1xupv_ohoma_107) > .awsui_form-header_1xupv_ohoma_307 {
334
334
  position: relative;
335
335
  margin-bottom: var(--space-scaled-m-gxhdpl, 16px);
336
336
  }
337
337
 
338
- .awsui_form_1xupv_1i0yo_301.awsui_refresh_1xupv_1i0yo_107:not(#\9) {
338
+ .awsui_form_1xupv_ohoma_301.awsui_refresh_1xupv_ohoma_107:not(#\9) {
339
339
  min-width: 0;
340
340
  -ms-word-break: break-all;
341
341
  word-break: break-word;
342
342
  display: contents;
343
343
  }
344
- .awsui_form_1xupv_1i0yo_301.awsui_refresh_1xupv_1i0yo_107 > .awsui_background_1xupv_1i0yo_318:not(#\9) {
344
+ .awsui_form_1xupv_ohoma_301.awsui_refresh_1xupv_ohoma_107 > .awsui_background_1xupv_ohoma_318:not(#\9) {
345
345
  background-color: var(--color-background-layout-main-m49752, #ffffff);
346
346
  grid-column: 1/span 2;
347
347
  grid-row: 1;
348
348
  color: var(--color-text-body-default-su7kuo, #000716);
349
349
  }
350
- .awsui_form_1xupv_1i0yo_301.awsui_refresh_1xupv_1i0yo_107 > .awsui_form-header_1xupv_1i0yo_307:not(#\9) {
350
+ .awsui_form_1xupv_ohoma_301.awsui_refresh_1xupv_ohoma_107 > .awsui_form-header_1xupv_ohoma_307:not(#\9) {
351
351
  background-color: var(--color-background-layout-main-m49752, #ffffff);
352
352
  grid-column: 2;
353
353
  grid-row: 1;
354
354
  color: var(--color-text-body-default-su7kuo, #000716);
355
355
  }
356
- .awsui_form_1xupv_1i0yo_301.awsui_refresh_1xupv_1i0yo_107 > .awsui_form-header_1xupv_1i0yo_307 > .awsui_form-header-content_1xupv_1i0yo_330:not(#\9) {
357
- padding-top: var(--space-scaled-m-gxhdpl, 16px);
356
+ .awsui_form_1xupv_ohoma_301.awsui_refresh_1xupv_ohoma_107 > .awsui_form-header_1xupv_ohoma_307 > .awsui_form-header-content_1xupv_ohoma_330:not(#\9) {
357
+ padding-top: calc(var(--awsui-container-first-gap-zw2xxa, 0px) + var(--space-s-hdd878, 12px));
358
358
  padding-bottom: var(--space-scaled-m-gxhdpl, 16px);
359
359
  }
360
- .awsui_form_1xupv_1i0yo_301.awsui_refresh_1xupv_1i0yo_107 > .awsui_form-component_1xupv_1i0yo_334:not(#\9) {
360
+ .awsui_form_1xupv_ohoma_301.awsui_refresh_1xupv_ohoma_107 > .awsui_form-component_1xupv_ohoma_334:not(#\9) {
361
361
  grid-column: 2;
362
362
  grid-row: 2;
363
363
  }
364
- .awsui_form_1xupv_1i0yo_301.awsui_refresh_1xupv_1i0yo_107.awsui_small-container_1xupv_1i0yo_114 > .awsui_form-header_1xupv_1i0yo_307:not(#\9) {
364
+ .awsui_form_1xupv_ohoma_301.awsui_refresh_1xupv_ohoma_107.awsui_small-container_1xupv_ohoma_114 > .awsui_form-header_1xupv_ohoma_307:not(#\9) {
365
365
  grid-column: 1/span 2;
366
366
  }
367
- .awsui_form_1xupv_1i0yo_301.awsui_refresh_1xupv_1i0yo_107.awsui_small-container_1xupv_1i0yo_114 > .awsui_form-header_1xupv_1i0yo_307 > .awsui_form-header-content_1xupv_1i0yo_330:not(#\9) {
367
+ .awsui_form_1xupv_ohoma_301.awsui_refresh_1xupv_ohoma_107.awsui_small-container_1xupv_ohoma_114 > .awsui_form-header_1xupv_ohoma_307 > .awsui_form-header-content_1xupv_ohoma_330:not(#\9) {
368
368
  padding-top: 0;
369
369
  }
370
- .awsui_form_1xupv_1i0yo_301.awsui_refresh_1xupv_1i0yo_107.awsui_small-container_1xupv_1i0yo_114 > .awsui_form-component_1xupv_1i0yo_334:not(#\9) {
370
+ .awsui_form_1xupv_ohoma_301.awsui_refresh_1xupv_ohoma_107.awsui_small-container_1xupv_ohoma_114 > .awsui_form-component_1xupv_ohoma_334:not(#\9) {
371
371
  grid-column: 1/span 2;
372
372
  }
373
373
 
374
- .awsui_navigation_1xupv_1i0yo_123.awsui_hidden_1xupv_1i0yo_348:not(#\9) {
374
+ .awsui_navigation_1xupv_ohoma_123.awsui_hidden_1xupv_ohoma_348:not(#\9) {
375
375
  display: none;
376
376
  }
377
377
 
378
- .awsui_collapsed-steps_1xupv_1i0yo_352:not(#\9) {
378
+ .awsui_collapsed-steps_1xupv_ohoma_352:not(#\9) {
379
379
  color: var(--color-text-heading-secondary-x2nd6m, #414d5c);
380
380
  font-weight: 700;
381
381
  padding-top: var(--space-scaled-xxs-t2t62i, 4px);
382
382
  }
383
- .awsui_collapsed-steps-hidden_1xupv_1i0yo_357:not(#\9) {
383
+ .awsui_collapsed-steps-hidden_1xupv_ohoma_357:not(#\9) {
384
384
  display: none;
385
385
  }
386
386
 
387
- .awsui_form-header-component-wrapper_1xupv_1i0yo_361:not(#\9) {
387
+ .awsui_form-header-component-wrapper_1xupv_ohoma_361:not(#\9) {
388
388
  outline: none;
389
389
  }
390
- body[data-awsui-focus-visible=true] .awsui_form-header-component-wrapper_1xupv_1i0yo_361:not(#\9):focus {
390
+ body[data-awsui-focus-visible=true] .awsui_form-header-component-wrapper_1xupv_ohoma_361:not(#\9):focus {
391
391
  outline: thin dotted;
392
392
  outline: var(--border-link-focus-ring-outline-pwlekd, 0);
393
393
  outline-offset: 2px;
@@ -396,30 +396,30 @@ body[data-awsui-focus-visible=true] .awsui_form-header-component-wrapper_1xupv_1
396
396
  box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-z7lixz, 2px) var(--color-border-item-focused-4t19h5, #0972d3);
397
397
  }
398
398
 
399
- .awsui_form-header-component_1xupv_1i0yo_361:not(#\9),
400
- .awsui_navigation-link_1xupv_1i0yo_374:not(#\9),
401
- .awsui_navigation-link-item_1xupv_1i0yo_375:not(#\9),
402
- .awsui_navigation-link-label_1xupv_1i0yo_376:not(#\9) {
399
+ .awsui_form-header-component_1xupv_ohoma_361:not(#\9),
400
+ .awsui_navigation-link_1xupv_ohoma_374:not(#\9),
401
+ .awsui_navigation-link-item_1xupv_ohoma_375:not(#\9),
402
+ .awsui_navigation-link-label_1xupv_ohoma_376:not(#\9) {
403
403
  /* used in test-utils */
404
404
  }
405
405
 
406
- .awsui_navigation-link-active_1xupv_1i0yo_380:not(#\9) {
406
+ .awsui_navigation-link-active_1xupv_ohoma_380:not(#\9) {
407
407
  font-weight: 700;
408
408
  color: var(--color-text-body-default-su7kuo, #000716);
409
409
  }
410
410
 
411
- .awsui_navigation-link-disabled_1xupv_1i0yo_385:not(#\9) {
411
+ .awsui_navigation-link-disabled_1xupv_ohoma_385:not(#\9) {
412
412
  color: var(--color-text-status-inactive-5laoxv, #5f6b7a);
413
413
  }
414
414
 
415
- .awsui_cancel-button_1xupv_1i0yo_389:not(#\9),
416
- .awsui_previous-button_1xupv_1i0yo_390:not(#\9),
417
- .awsui_primary-button_1xupv_1i0yo_391:not(#\9),
418
- .awsui_skip-to-button_1xupv_1i0yo_392:not(#\9) {
415
+ .awsui_cancel-button_1xupv_ohoma_389:not(#\9),
416
+ .awsui_previous-button_1xupv_ohoma_390:not(#\9),
417
+ .awsui_primary-button_1xupv_ohoma_391:not(#\9),
418
+ .awsui_skip-to-button_1xupv_ohoma_392:not(#\9) {
419
419
  /* used in test-utils */
420
420
  }
421
421
 
422
- .awsui_action-buttons_1xupv_1i0yo_396:not(#\9) {
422
+ .awsui_action-buttons_1xupv_ohoma_396:not(#\9) {
423
423
  display: flex;
424
424
  justify-content: flex-end;
425
425
  }
@@ -2,36 +2,36 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "root": "awsui_root_1xupv_1i0yo_94",
6
- "wizard": "awsui_wizard_1xupv_1i0yo_107",
7
- "refresh": "awsui_refresh_1xupv_1i0yo_107",
8
- "small-container": "awsui_small-container_1xupv_1i0yo_114",
9
- "navigation": "awsui_navigation_1xupv_1i0yo_123",
10
- "number": "awsui_number_1xupv_1i0yo_185",
11
- "circle": "awsui_circle_1xupv_1i0yo_201",
12
- "title": "awsui_title_1xupv_1i0yo_209",
13
- "active": "awsui_active_1xupv_1i0yo_238",
14
- "disabled": "awsui_disabled_1xupv_1i0yo_249",
15
- "enabled": "awsui_enabled_1xupv_1i0yo_259",
16
- "form": "awsui_form_1xupv_1i0yo_301",
17
- "form-header": "awsui_form-header_1xupv_1i0yo_307",
18
- "background": "awsui_background_1xupv_1i0yo_318",
19
- "form-header-content": "awsui_form-header-content_1xupv_1i0yo_330",
20
- "form-component": "awsui_form-component_1xupv_1i0yo_334",
21
- "hidden": "awsui_hidden_1xupv_1i0yo_348",
22
- "collapsed-steps": "awsui_collapsed-steps_1xupv_1i0yo_352",
23
- "collapsed-steps-hidden": "awsui_collapsed-steps-hidden_1xupv_1i0yo_357",
24
- "form-header-component-wrapper": "awsui_form-header-component-wrapper_1xupv_1i0yo_361",
25
- "form-header-component": "awsui_form-header-component_1xupv_1i0yo_361",
26
- "navigation-link": "awsui_navigation-link_1xupv_1i0yo_374",
27
- "navigation-link-item": "awsui_navigation-link-item_1xupv_1i0yo_375",
28
- "navigation-link-label": "awsui_navigation-link-label_1xupv_1i0yo_376",
29
- "navigation-link-active": "awsui_navigation-link-active_1xupv_1i0yo_380",
30
- "navigation-link-disabled": "awsui_navigation-link-disabled_1xupv_1i0yo_385",
31
- "cancel-button": "awsui_cancel-button_1xupv_1i0yo_389",
32
- "previous-button": "awsui_previous-button_1xupv_1i0yo_390",
33
- "primary-button": "awsui_primary-button_1xupv_1i0yo_391",
34
- "skip-to-button": "awsui_skip-to-button_1xupv_1i0yo_392",
35
- "action-buttons": "awsui_action-buttons_1xupv_1i0yo_396"
5
+ "root": "awsui_root_1xupv_ohoma_94",
6
+ "wizard": "awsui_wizard_1xupv_ohoma_107",
7
+ "refresh": "awsui_refresh_1xupv_ohoma_107",
8
+ "small-container": "awsui_small-container_1xupv_ohoma_114",
9
+ "navigation": "awsui_navigation_1xupv_ohoma_123",
10
+ "number": "awsui_number_1xupv_ohoma_185",
11
+ "circle": "awsui_circle_1xupv_ohoma_201",
12
+ "title": "awsui_title_1xupv_ohoma_209",
13
+ "active": "awsui_active_1xupv_ohoma_238",
14
+ "disabled": "awsui_disabled_1xupv_ohoma_249",
15
+ "enabled": "awsui_enabled_1xupv_ohoma_259",
16
+ "form": "awsui_form_1xupv_ohoma_301",
17
+ "form-header": "awsui_form-header_1xupv_ohoma_307",
18
+ "background": "awsui_background_1xupv_ohoma_318",
19
+ "form-header-content": "awsui_form-header-content_1xupv_ohoma_330",
20
+ "form-component": "awsui_form-component_1xupv_ohoma_334",
21
+ "hidden": "awsui_hidden_1xupv_ohoma_348",
22
+ "collapsed-steps": "awsui_collapsed-steps_1xupv_ohoma_352",
23
+ "collapsed-steps-hidden": "awsui_collapsed-steps-hidden_1xupv_ohoma_357",
24
+ "form-header-component-wrapper": "awsui_form-header-component-wrapper_1xupv_ohoma_361",
25
+ "form-header-component": "awsui_form-header-component_1xupv_ohoma_361",
26
+ "navigation-link": "awsui_navigation-link_1xupv_ohoma_374",
27
+ "navigation-link-item": "awsui_navigation-link-item_1xupv_ohoma_375",
28
+ "navigation-link-label": "awsui_navigation-link-label_1xupv_ohoma_376",
29
+ "navigation-link-active": "awsui_navigation-link-active_1xupv_ohoma_380",
30
+ "navigation-link-disabled": "awsui_navigation-link-disabled_1xupv_ohoma_385",
31
+ "cancel-button": "awsui_cancel-button_1xupv_ohoma_389",
32
+ "previous-button": "awsui_previous-button_1xupv_ohoma_390",
33
+ "primary-button": "awsui_primary-button_1xupv_ohoma_391",
34
+ "skip-to-button": "awsui_skip-to-button_1xupv_ohoma_392",
35
+ "action-buttons": "awsui_action-buttons_1xupv_ohoma_396"
36
36
  };
37
37
 
@@ -6,6 +6,7 @@ interface WizardFormProps {
6
6
  isVisualRefresh: boolean;
7
7
  showCollapsedSteps: boolean;
8
8
  i18nStrings: WizardProps.I18nStrings;
9
+ submitButtonText?: string;
9
10
  isPrimaryLoading: boolean;
10
11
  allowSkipTo: boolean;
11
12
  secondaryActions?: React.ReactNode;
@@ -14,6 +15,6 @@ interface WizardFormProps {
14
15
  onPrimaryClick: () => void;
15
16
  onSkipToClick: (stepIndex: number) => void;
16
17
  }
17
- export default function WizardForm({ steps, activeStepIndex, isVisualRefresh, showCollapsedSteps, i18nStrings, isPrimaryLoading, allowSkipTo, secondaryActions, onCancelClick, onPreviousClick, onPrimaryClick, onSkipToClick, }: WizardFormProps): JSX.Element;
18
+ export default function WizardForm({ steps, activeStepIndex, isVisualRefresh, showCollapsedSteps, i18nStrings, submitButtonText, isPrimaryLoading, allowSkipTo, secondaryActions, onCancelClick, onPreviousClick, onPrimaryClick, onSkipToClick, }: WizardFormProps): JSX.Element;
18
19
  export {};
19
20
  //# sourceMappingURL=wizard-form.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"wizard-form.d.ts","sourceRoot":"lib/default/","sources":["wizard/wizard-form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAMtC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAM3C,UAAU,eAAe;IACvB,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IACvC,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC;IACrC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,KAAK,EACL,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,WAAW,EACX,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,cAAc,EACd,aAAa,GACd,EAAE,eAAe,eAoEjB"}
1
+ {"version":3,"file":"wizard-form.d.ts","sourceRoot":"lib/default/","sources":["wizard/wizard-form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAMtC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAM3C,UAAU,eAAe;IACvB,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IACvC,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC;IACrC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,KAAK,EACL,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,cAAc,EACd,aAAa,GACd,EAAE,eAAe,eAoEjB"}
@@ -10,7 +10,7 @@ import WizardFormHeader from './wizard-form-header';
10
10
  import styles from './styles.css.js';
11
11
  import { useEffectOnUpdate } from '../internal/hooks/use-effect-on-update';
12
12
  import { AnalyticsFunnelStep } from '../internal/analytics/components/analytics-funnel';
13
- export default function WizardForm({ steps, activeStepIndex, isVisualRefresh, showCollapsedSteps, i18nStrings, isPrimaryLoading, allowSkipTo, secondaryActions, onCancelClick, onPreviousClick, onPrimaryClick, onSkipToClick, }) {
13
+ export default function WizardForm({ steps, activeStepIndex, isVisualRefresh, showCollapsedSteps, i18nStrings, submitButtonText, isPrimaryLoading, allowSkipTo, secondaryActions, onCancelClick, onPreviousClick, onPrimaryClick, onSkipToClick, }) {
14
14
  var _a;
15
15
  const { title, info, description, content, errorText, isOptional } = steps[activeStepIndex] || {};
16
16
  const isLastStep = activeStepIndex >= steps.length - 1;
@@ -34,7 +34,7 @@ export default function WizardForm({ steps, activeStepIndex, isVisualRefresh, sh
34
34
  React.createElement("span", { className: styles['form-header-component-wrapper'], tabIndex: -1, ref: stepHeaderRef },
35
35
  title,
36
36
  isOptional && React.createElement("i", null, ` - ${i18nStrings.optional}`)))),
37
- React.createElement(AnalyticsFunnelStep, { stepNameSelector: `.${styles['form-header-component-wrapper']}`, stepNumber: activeStepIndex + 1 }, ({ funnelStepProps }) => (React.createElement(InternalForm, Object.assign({ className: clsx(styles['form-component']), actions: React.createElement(WizardActions, { cancelButtonText: i18nStrings.cancelButton, primaryButtonText: isLastStep ? i18nStrings.submitButton : i18nStrings.nextButton, primaryButtonLoadingText: isLastStep ? i18nStrings.submitButtonLoadingAnnouncement : i18nStrings.nextButtonLoadingAnnouncement, previousButtonText: i18nStrings.previousButton, onCancelClick: onCancelClick, onPreviousClick: onPreviousClick, onPrimaryClick: onPrimaryClick, onSkipToClick: () => onSkipToClick(skipToTargetIndex), showPrevious: activeStepIndex !== 0, isPrimaryLoading: isPrimaryLoading, showSkipTo: showSkipTo, skipToButtonText: skipToButtonText }), secondaryActions: secondaryActions, errorText: errorText, errorIconAriaLabel: i18nStrings.errorIconAriaLabel }, funnelStepProps), content)))));
37
+ React.createElement(AnalyticsFunnelStep, { stepNameSelector: `.${styles['form-header-component-wrapper']}`, stepNumber: activeStepIndex + 1 }, ({ funnelStepProps }) => (React.createElement(InternalForm, Object.assign({ className: clsx(styles['form-component']), actions: React.createElement(WizardActions, { cancelButtonText: i18nStrings.cancelButton, primaryButtonText: isLastStep ? submitButtonText !== null && submitButtonText !== void 0 ? submitButtonText : i18nStrings.submitButton : i18nStrings.nextButton, primaryButtonLoadingText: isLastStep ? i18nStrings.submitButtonLoadingAnnouncement : i18nStrings.nextButtonLoadingAnnouncement, previousButtonText: i18nStrings.previousButton, onCancelClick: onCancelClick, onPreviousClick: onPreviousClick, onPrimaryClick: onPrimaryClick, onSkipToClick: () => onSkipToClick(skipToTargetIndex), showPrevious: activeStepIndex !== 0, isPrimaryLoading: isPrimaryLoading, showSkipTo: showSkipTo, skipToButtonText: skipToButtonText }), secondaryActions: secondaryActions, errorText: errorText, errorIconAriaLabel: i18nStrings.errorIconAriaLabel }, funnelStepProps), content)))));
38
38
  }
39
39
  function findSkipToTargetIndex(steps, activeStepIndex) {
40
40
  let nextRequiredStepIndex = activeStepIndex;
@@ -1 +1 @@
1
- {"version":3,"file":"wizard-form.js","sourceRoot":"lib/default/","sources":["wizard/wizard-form.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, { useRef } from 'react';\nimport clsx from 'clsx';\nimport InternalForm from '../form/internal';\nimport InternalHeader from '../header/internal';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport WizardActions from './wizard-actions';\nimport { WizardProps } from './interfaces';\nimport WizardFormHeader from './wizard-form-header';\nimport styles from './styles.css.js';\nimport { useEffectOnUpdate } from '../internal/hooks/use-effect-on-update';\nimport { AnalyticsFunnelStep } from '../internal/analytics/components/analytics-funnel';\n\ninterface WizardFormProps {\n steps: ReadonlyArray<WizardProps.Step>;\n activeStepIndex: number;\n isVisualRefresh: boolean;\n showCollapsedSteps: boolean;\n i18nStrings: WizardProps.I18nStrings;\n isPrimaryLoading: boolean;\n allowSkipTo: boolean;\n secondaryActions?: React.ReactNode;\n onCancelClick: () => void;\n onPreviousClick: () => void;\n onPrimaryClick: () => void;\n onSkipToClick: (stepIndex: number) => void;\n}\n\nexport default function WizardForm({\n steps,\n activeStepIndex,\n isVisualRefresh,\n showCollapsedSteps,\n i18nStrings,\n isPrimaryLoading,\n allowSkipTo,\n secondaryActions,\n onCancelClick,\n onPreviousClick,\n onPrimaryClick,\n onSkipToClick,\n}: WizardFormProps) {\n const { title, info, description, content, errorText, isOptional } = steps[activeStepIndex] || {};\n const isLastStep = activeStepIndex >= steps.length - 1;\n const skipToTargetIndex = findSkipToTargetIndex(steps, activeStepIndex);\n const isMobile = useMobile();\n const stepHeaderRef = useRef<HTMLDivElement | null>(null);\n\n useEffectOnUpdate(() => {\n if (stepHeaderRef && stepHeaderRef.current) {\n stepHeaderRef.current?.focus();\n }\n }, [activeStepIndex]);\n\n const showSkipTo = allowSkipTo && skipToTargetIndex !== -1;\n const skipToButtonText =\n skipToTargetIndex !== -1 && i18nStrings.skipToButtonLabel\n ? i18nStrings.skipToButtonLabel(steps[skipToTargetIndex], skipToTargetIndex + 1)\n : undefined;\n\n return (\n <>\n <WizardFormHeader isMobile={isMobile || showCollapsedSteps} isVisualRefresh={isVisualRefresh}>\n <div className={clsx(styles['collapsed-steps'], !showCollapsedSteps && styles['collapsed-steps-hidden'])}>\n {i18nStrings.collapsedStepsLabel?.(activeStepIndex + 1, steps.length)}\n </div>\n <InternalHeader className={styles['form-header-component']} variant=\"h1\" description={description} info={info}>\n <span className={styles['form-header-component-wrapper']} tabIndex={-1} ref={stepHeaderRef}>\n {title}\n {isOptional && <i>{` - ${i18nStrings.optional}`}</i>}\n </span>\n </InternalHeader>\n </WizardFormHeader>\n <AnalyticsFunnelStep\n stepNameSelector={`.${styles['form-header-component-wrapper']}`}\n stepNumber={activeStepIndex + 1}\n >\n {({ funnelStepProps }) => (\n <InternalForm\n className={clsx(styles['form-component'])}\n actions={\n <WizardActions\n cancelButtonText={i18nStrings.cancelButton}\n primaryButtonText={isLastStep ? i18nStrings.submitButton : i18nStrings.nextButton}\n primaryButtonLoadingText={\n isLastStep ? i18nStrings.submitButtonLoadingAnnouncement : i18nStrings.nextButtonLoadingAnnouncement\n }\n previousButtonText={i18nStrings.previousButton}\n onCancelClick={onCancelClick}\n onPreviousClick={onPreviousClick}\n onPrimaryClick={onPrimaryClick}\n onSkipToClick={() => onSkipToClick(skipToTargetIndex)}\n showPrevious={activeStepIndex !== 0}\n isPrimaryLoading={isPrimaryLoading}\n showSkipTo={showSkipTo}\n skipToButtonText={skipToButtonText}\n />\n }\n secondaryActions={secondaryActions}\n errorText={errorText}\n errorIconAriaLabel={i18nStrings.errorIconAriaLabel}\n {...funnelStepProps}\n >\n {content}\n </InternalForm>\n )}\n </AnalyticsFunnelStep>\n </>\n );\n}\n\nfunction findSkipToTargetIndex(steps: ReadonlyArray<WizardProps.Step>, activeStepIndex: number): number {\n let nextRequiredStepIndex = activeStepIndex;\n do {\n nextRequiredStepIndex++;\n } while (nextRequiredStepIndex < steps.length - 1 && steps[nextRequiredStepIndex].isOptional);\n\n return nextRequiredStepIndex > activeStepIndex + 1 ? nextRequiredStepIndex : -1;\n}\n"]}
1
+ {"version":3,"file":"wizard-form.js","sourceRoot":"lib/default/","sources":["wizard/wizard-form.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, { useRef } from 'react';\nimport clsx from 'clsx';\nimport InternalForm from '../form/internal';\nimport InternalHeader from '../header/internal';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport WizardActions from './wizard-actions';\nimport { WizardProps } from './interfaces';\nimport WizardFormHeader from './wizard-form-header';\nimport styles from './styles.css.js';\nimport { useEffectOnUpdate } from '../internal/hooks/use-effect-on-update';\nimport { AnalyticsFunnelStep } from '../internal/analytics/components/analytics-funnel';\n\ninterface WizardFormProps {\n steps: ReadonlyArray<WizardProps.Step>;\n activeStepIndex: number;\n isVisualRefresh: boolean;\n showCollapsedSteps: boolean;\n i18nStrings: WizardProps.I18nStrings;\n submitButtonText?: string;\n isPrimaryLoading: boolean;\n allowSkipTo: boolean;\n secondaryActions?: React.ReactNode;\n onCancelClick: () => void;\n onPreviousClick: () => void;\n onPrimaryClick: () => void;\n onSkipToClick: (stepIndex: number) => void;\n}\n\nexport default function WizardForm({\n steps,\n activeStepIndex,\n isVisualRefresh,\n showCollapsedSteps,\n i18nStrings,\n submitButtonText,\n isPrimaryLoading,\n allowSkipTo,\n secondaryActions,\n onCancelClick,\n onPreviousClick,\n onPrimaryClick,\n onSkipToClick,\n}: WizardFormProps) {\n const { title, info, description, content, errorText, isOptional } = steps[activeStepIndex] || {};\n const isLastStep = activeStepIndex >= steps.length - 1;\n const skipToTargetIndex = findSkipToTargetIndex(steps, activeStepIndex);\n const isMobile = useMobile();\n const stepHeaderRef = useRef<HTMLDivElement | null>(null);\n\n useEffectOnUpdate(() => {\n if (stepHeaderRef && stepHeaderRef.current) {\n stepHeaderRef.current?.focus();\n }\n }, [activeStepIndex]);\n\n const showSkipTo = allowSkipTo && skipToTargetIndex !== -1;\n const skipToButtonText =\n skipToTargetIndex !== -1 && i18nStrings.skipToButtonLabel\n ? i18nStrings.skipToButtonLabel(steps[skipToTargetIndex], skipToTargetIndex + 1)\n : undefined;\n\n return (\n <>\n <WizardFormHeader isMobile={isMobile || showCollapsedSteps} isVisualRefresh={isVisualRefresh}>\n <div className={clsx(styles['collapsed-steps'], !showCollapsedSteps && styles['collapsed-steps-hidden'])}>\n {i18nStrings.collapsedStepsLabel?.(activeStepIndex + 1, steps.length)}\n </div>\n <InternalHeader className={styles['form-header-component']} variant=\"h1\" description={description} info={info}>\n <span className={styles['form-header-component-wrapper']} tabIndex={-1} ref={stepHeaderRef}>\n {title}\n {isOptional && <i>{` - ${i18nStrings.optional}`}</i>}\n </span>\n </InternalHeader>\n </WizardFormHeader>\n <AnalyticsFunnelStep\n stepNameSelector={`.${styles['form-header-component-wrapper']}`}\n stepNumber={activeStepIndex + 1}\n >\n {({ funnelStepProps }) => (\n <InternalForm\n className={clsx(styles['form-component'])}\n actions={\n <WizardActions\n cancelButtonText={i18nStrings.cancelButton}\n primaryButtonText={isLastStep ? submitButtonText ?? i18nStrings.submitButton : i18nStrings.nextButton}\n primaryButtonLoadingText={\n isLastStep ? i18nStrings.submitButtonLoadingAnnouncement : i18nStrings.nextButtonLoadingAnnouncement\n }\n previousButtonText={i18nStrings.previousButton}\n onCancelClick={onCancelClick}\n onPreviousClick={onPreviousClick}\n onPrimaryClick={onPrimaryClick}\n onSkipToClick={() => onSkipToClick(skipToTargetIndex)}\n showPrevious={activeStepIndex !== 0}\n isPrimaryLoading={isPrimaryLoading}\n showSkipTo={showSkipTo}\n skipToButtonText={skipToButtonText}\n />\n }\n secondaryActions={secondaryActions}\n errorText={errorText}\n errorIconAriaLabel={i18nStrings.errorIconAriaLabel}\n {...funnelStepProps}\n >\n {content}\n </InternalForm>\n )}\n </AnalyticsFunnelStep>\n </>\n );\n}\n\nfunction findSkipToTargetIndex(steps: ReadonlyArray<WizardProps.Step>, activeStepIndex: number): number {\n let nextRequiredStepIndex = activeStepIndex;\n do {\n nextRequiredStepIndex++;\n } while (nextRequiredStepIndex < steps.length - 1 && steps[nextRequiredStepIndex].isOptional);\n\n return nextRequiredStepIndex > activeStepIndex + 1 ? nextRequiredStepIndex : -1;\n}\n"]}