@cloudscape-design/components-themeable 3.0.1371 → 3.0.1373

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 (79) hide show
  1. package/lib/__tests__/theming.test.js +14 -0
  2. package/lib/__tests__/theming.test.js.map +1 -1
  3. package/lib/internal/manifest.json +1 -1
  4. package/lib/internal/scss/button-dropdown/category-elements/styles.scss +1 -4
  5. package/lib/internal/scss/button-dropdown/item-element/styles.scss +1 -4
  6. package/lib/internal/scss/dropdown/styles.scss +23 -4
  7. package/lib/internal/scss/internal/components/checkbox-icon/motion.scss +35 -0
  8. package/lib/internal/scss/internal/components/checkbox-icon/styles.scss +2 -0
  9. package/lib/internal/scss/internal/components/selectable-item/styles.scss +2 -8
  10. package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +1 -1
  11. package/lib/internal/scss/internal/styles/links.scss +15 -6
  12. package/lib/internal/scss/internal/styles/utils/mixins.scss +7 -0
  13. package/lib/internal/scss/link/styles.scss +35 -16
  14. package/lib/internal/scss/status-indicator/styles.scss +3 -2
  15. package/lib/internal/template/box/interfaces.d.ts +3 -0
  16. package/lib/internal/template/box/interfaces.d.ts.map +1 -1
  17. package/lib/internal/template/box/interfaces.js.map +1 -1
  18. package/lib/internal/template/button/interfaces.d.ts +0 -1
  19. package/lib/internal/template/button/interfaces.d.ts.map +1 -1
  20. package/lib/internal/template/button/interfaces.js.map +1 -1
  21. package/lib/internal/template/button/internal.d.ts.map +1 -1
  22. package/lib/internal/template/button/internal.js +8 -1
  23. package/lib/internal/template/button/internal.js.map +1 -1
  24. package/lib/internal/template/button-dropdown/category-elements/styles.css.js +18 -18
  25. package/lib/internal/template/button-dropdown/category-elements/styles.scoped.css +32 -32
  26. package/lib/internal/template/button-dropdown/category-elements/styles.selectors.js +18 -18
  27. package/lib/internal/template/button-dropdown/item-element/styles.css.js +21 -21
  28. package/lib/internal/template/button-dropdown/item-element/styles.scoped.css +38 -38
  29. package/lib/internal/template/button-dropdown/item-element/styles.selectors.js +21 -21
  30. package/lib/internal/template/copy-to-clipboard/interfaces.d.ts +0 -1
  31. package/lib/internal/template/copy-to-clipboard/interfaces.d.ts.map +1 -1
  32. package/lib/internal/template/copy-to-clipboard/interfaces.js.map +1 -1
  33. package/lib/internal/template/dropdown/index.d.ts.map +1 -1
  34. package/lib/internal/template/dropdown/index.js +1 -1
  35. package/lib/internal/template/dropdown/index.js.map +1 -1
  36. package/lib/internal/template/dropdown/internal.d.ts +5 -1
  37. package/lib/internal/template/dropdown/internal.d.ts.map +1 -1
  38. package/lib/internal/template/dropdown/internal.js +4 -4
  39. package/lib/internal/template/dropdown/internal.js.map +1 -1
  40. package/lib/internal/template/dropdown/styles.css.js +20 -20
  41. package/lib/internal/template/dropdown/styles.scoped.css +69 -48
  42. package/lib/internal/template/dropdown/styles.selectors.js +20 -20
  43. package/lib/internal/template/internal/base-component/styles.scoped.css +1 -1
  44. package/lib/internal/template/internal/components/checkbox-icon/index.d.ts.map +1 -1
  45. package/lib/internal/template/internal/components/checkbox-icon/index.js +8 -2
  46. package/lib/internal/template/internal/components/checkbox-icon/index.js.map +1 -1
  47. package/lib/internal/template/internal/components/selectable-item/styles.css.js +22 -22
  48. package/lib/internal/template/internal/components/selectable-item/styles.scoped.css +53 -49
  49. package/lib/internal/template/internal/components/selectable-item/styles.selectors.js +22 -22
  50. package/lib/internal/template/internal/environment.js +2 -2
  51. package/lib/internal/template/internal/environment.json +2 -2
  52. package/lib/internal/template/link/index.d.ts.map +1 -1
  53. package/lib/internal/template/link/index.js +1 -1
  54. package/lib/internal/template/link/index.js.map +1 -1
  55. package/lib/internal/template/link/internal.d.ts +4 -0
  56. package/lib/internal/template/link/internal.d.ts.map +1 -1
  57. package/lib/internal/template/link/internal.js +2 -2
  58. package/lib/internal/template/link/internal.js.map +1 -1
  59. package/lib/internal/template/link/styles.css.js +21 -21
  60. package/lib/internal/template/link/styles.scoped.css +121 -104
  61. package/lib/internal/template/link/styles.selectors.js +21 -21
  62. package/lib/internal/template/status-indicator/internal.d.ts +5 -1
  63. package/lib/internal/template/status-indicator/internal.d.ts.map +1 -1
  64. package/lib/internal/template/status-indicator/internal.js +2 -2
  65. package/lib/internal/template/status-indicator/internal.js.map +1 -1
  66. package/lib/internal/template/status-indicator/styles.css.js +26 -25
  67. package/lib/internal/template/status-indicator/styles.scoped.css +47 -47
  68. package/lib/internal/template/status-indicator/styles.selectors.js +26 -25
  69. package/lib/internal/template/steps/internal.js +1 -1
  70. package/lib/internal/template/steps/internal.js.map +1 -1
  71. package/lib/internal/template/theming/index.d.ts +4 -2
  72. package/lib/internal/template/theming/index.d.ts.map +1 -1
  73. package/lib/internal/template/theming/index.js +7 -4
  74. package/lib/internal/template/theming/index.js.map +1 -1
  75. package/lib/theming.d.ts +5 -0
  76. package/lib/theming.d.ts.map +1 -1
  77. package/lib/theming.js +12 -0
  78. package/lib/theming.js.map +1 -1
  79. package/package.json +1 -1
package/lib/internal/template/dropdown/styles.scoped.css CHANGED
@@ -10,10 +10,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
10
10
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
11
11
  SPDX-License-Identifier: Apache-2.0
12
12
  */
13
- .awsui_dropdown-content-wrapper_9duf6_n6iaf_13:not(#\9) {
14
- animation: awsui_awsui-motion-fade-in-dropdown_9duf6_n6iaf_1 var(--motion-duration-show-quick-24aj9c, 135ms) var(--motion-easing-show-quick-gb8584, ease-out);
13
+ .awsui_dropdown-content-wrapper_9duf6_1e1bk_13:not(#\9) {
14
+ animation: awsui_awsui-motion-fade-in-dropdown_9duf6_1e1bk_1 var(--motion-duration-show-quick-24aj9c, 135ms) var(--motion-easing-show-quick-gb8584, ease-out);
15
15
  }
16
- @keyframes awsui_awsui-motion-fade-in-dropdown_9duf6_n6iaf_1 {
16
+ @keyframes awsui_awsui-motion-fade-in-dropdown_9duf6_1e1bk_1 {
17
17
  from {
18
18
  opacity: 0.4;
19
19
  }
@@ -22,22 +22,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
22
22
  }
23
23
  }
24
24
  @media (prefers-reduced-motion: reduce) {
25
- .awsui_dropdown-content-wrapper_9duf6_n6iaf_13:not(#\9) {
25
+ .awsui_dropdown-content-wrapper_9duf6_1e1bk_13:not(#\9) {
26
26
  animation: none;
27
27
  transition: none;
28
28
  }
29
29
  }
30
- .awsui-motion-disabled .awsui_dropdown-content-wrapper_9duf6_n6iaf_13:not(#\9), .awsui-mode-entering .awsui_dropdown-content-wrapper_9duf6_n6iaf_13:not(#\9) {
30
+ .awsui-motion-disabled .awsui_dropdown-content-wrapper_9duf6_1e1bk_13:not(#\9), .awsui-mode-entering .awsui_dropdown-content-wrapper_9duf6_1e1bk_13:not(#\9) {
31
31
  animation: none;
32
32
  transition: none;
33
33
  }
34
- .awsui_dropdown-content-wrapper_9duf6_n6iaf_13.awsui_refresh_9duf6_n6iaf_34:not(#\9) {
34
+ .awsui_dropdown-content-wrapper_9duf6_1e1bk_13.awsui_refresh_9duf6_1e1bk_34:not(#\9) {
35
35
  transform-origin: top;
36
- animation-name: awsui_awsui-motion-fade-in-0_9duf6_n6iaf_1;
36
+ animation-name: awsui_awsui-motion-fade-in-0_9duf6_1e1bk_1;
37
37
  animation-duration: var(--motion-duration-show-quick-24aj9c, 135ms);
38
38
  animation-timing-function: var(--motion-easing-show-quick-gb8584, ease-out);
39
39
  }
40
- @keyframes awsui_awsui-motion-fade-in-0_9duf6_n6iaf_1 {
40
+ @keyframes awsui_awsui-motion-fade-in-0_9duf6_1e1bk_1 {
41
41
  from {
42
42
  opacity: 0;
43
43
  }
@@ -46,17 +46,34 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
46
46
  }
47
47
  }
48
48
  @media (prefers-reduced-motion: reduce) {
49
- .awsui_dropdown-content-wrapper_9duf6_n6iaf_13.awsui_refresh_9duf6_n6iaf_34:not(#\9) {
49
+ .awsui_dropdown-content-wrapper_9duf6_1e1bk_13.awsui_refresh_9duf6_1e1bk_34:not(#\9) {
50
50
  animation: none;
51
51
  transition: none;
52
52
  }
53
53
  }
54
- .awsui-motion-disabled .awsui_dropdown-content-wrapper_9duf6_n6iaf_13.awsui_refresh_9duf6_n6iaf_34:not(#\9), .awsui-mode-entering .awsui_dropdown-content-wrapper_9duf6_n6iaf_13.awsui_refresh_9duf6_n6iaf_34:not(#\9) {
54
+ .awsui-motion-disabled .awsui_dropdown-content-wrapper_9duf6_1e1bk_13.awsui_refresh_9duf6_1e1bk_34:not(#\9), .awsui-mode-entering .awsui_dropdown-content-wrapper_9duf6_1e1bk_13.awsui_refresh_9duf6_1e1bk_34:not(#\9) {
55
55
  animation: none;
56
56
  transition: none;
57
57
  }
58
58
 
59
- .awsui_root_9duf6_n6iaf_59:not(#\9) {
59
+ @property --awsui-style-background-color {
60
+ syntax: "*";
61
+ inherits: false;
62
+ }
63
+ @property --awsui-style-border-color {
64
+ syntax: "*";
65
+ inherits: false;
66
+ }
67
+ @property --awsui-style-border-width {
68
+ syntax: "*";
69
+ inherits: false;
70
+ }
71
+ @property --awsui-style-border-radius {
72
+ syntax: "*";
73
+ inherits: false;
74
+ }
75
+ /* awsui:style-api-slot name=dropdown tokens=background-color, border-color, border-width, border-radius */
76
+ .awsui_root_9duf6_1e1bk_76:not(#\9) {
60
77
  border-collapse: separate;
61
78
  border-spacing: 0;
62
79
  box-sizing: border-box;
@@ -89,34 +106,34 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
89
106
  position: relative;
90
107
  white-space: inherit;
91
108
  }
92
- .awsui_root_9duf6_n6iaf_59.awsui_interior_9duf6_n6iaf_92:not(#\9) {
109
+ .awsui_root_9duf6_1e1bk_76.awsui_interior_9duf6_1e1bk_109:not(#\9) {
93
110
  position: static;
94
111
  }
95
112
 
96
- .awsui_dropdown_9duf6_n6iaf_13:not(#\9) {
113
+ .awsui_dropdown_9duf6_1e1bk_13:not(#\9) {
97
114
  position: absolute;
98
115
  display: none;
99
116
  z-index: 2000;
100
117
  transform-origin: top;
101
118
  }
102
- .awsui_dropdown_9duf6_n6iaf_13.awsui_use-portal_9duf6_n6iaf_102:not(#\9) {
119
+ .awsui_dropdown_9duf6_1e1bk_13.awsui_use-portal_9duf6_1e1bk_119:not(#\9) {
103
120
  z-index: 7000;
104
121
  }
105
- .awsui_dropdown_9duf6_n6iaf_13:not(#\9):not(.awsui_interior_9duf6_n6iaf_92) {
122
+ .awsui_dropdown_9duf6_1e1bk_13:not(#\9):not(.awsui_interior_9duf6_1e1bk_109) {
106
123
  transform: translateY(0px);
107
124
  transition: transform var(--motion-duration-show-quick-24aj9c, 135ms);
108
125
  }
109
126
  @media (prefers-reduced-motion: reduce) {
110
- .awsui_dropdown_9duf6_n6iaf_13:not(#\9):not(.awsui_interior_9duf6_n6iaf_92) {
127
+ .awsui_dropdown_9duf6_1e1bk_13:not(#\9):not(.awsui_interior_9duf6_1e1bk_109) {
111
128
  animation: none;
112
129
  transition: none;
113
130
  }
114
131
  }
115
- .awsui-motion-disabled .awsui_dropdown_9duf6_n6iaf_13:not(#\9):not(.awsui_interior_9duf6_n6iaf_92), .awsui-mode-entering .awsui_dropdown_9duf6_n6iaf_13:not(#\9):not(.awsui_interior_9duf6_n6iaf_92) {
132
+ .awsui-motion-disabled .awsui_dropdown_9duf6_1e1bk_13:not(#\9):not(.awsui_interior_9duf6_1e1bk_109), .awsui-mode-entering .awsui_dropdown_9duf6_1e1bk_13:not(#\9):not(.awsui_interior_9duf6_1e1bk_109) {
116
133
  animation: none;
117
134
  transition: none;
118
135
  }
119
- .awsui_dropdown-content-wrapper_9duf6_n6iaf_13:not(#\9) {
136
+ .awsui_dropdown-content-wrapper_9duf6_1e1bk_13:not(#\9) {
120
137
  border-collapse: separate;
121
138
  border-spacing: 0;
122
139
  box-sizing: border-box;
@@ -146,19 +163,23 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
146
163
  font-family: var(--font-family-base-c9u5cr, "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
147
164
  -webkit-font-smoothing: auto;
148
165
  -moz-osx-font-smoothing: auto;
166
+ --awsui-internal-style-background-color: var(--awsui-style-background-color);
167
+ --awsui-internal-style-border-color: var(--awsui-style-border-color);
168
+ --awsui-internal-style-border-width: var(--awsui-style-border-width);
169
+ --awsui-internal-style-border-radius: var(--awsui-style-border-radius);
149
170
  white-space: inherit;
150
171
  position: relative;
151
- background-color: var(--color-background-dropdown-item-default-x5ga9w, #ffffff);
172
+ background-color: var(--awsui-internal-style-background-color, var(--color-background-dropdown-item-default-x5ga9w, #ffffff));
152
173
  outline: none;
153
174
  box-shadow: var(--shadow-dropdown-ogwesf, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
154
- border-start-start-radius: var(--awsui-dropdown-content-border-radius-66120l, var(--border-radius-dropdown-azs8zp, 0px));
155
- border-start-end-radius: var(--awsui-dropdown-content-border-radius-66120l, var(--border-radius-dropdown-azs8zp, 0px));
156
- border-end-start-radius: var(--awsui-dropdown-content-border-radius-66120l, var(--border-radius-dropdown-azs8zp, 0px));
157
- border-end-end-radius: var(--awsui-dropdown-content-border-radius-66120l, var(--border-radius-dropdown-azs8zp, 0px));
175
+ border-start-start-radius: var(--awsui-internal-style-border-radius, var(--awsui-dropdown-content-border-radius-66120l, var(--border-radius-dropdown-azs8zp, 0px)));
176
+ border-start-end-radius: var(--awsui-internal-style-border-radius, var(--awsui-dropdown-content-border-radius-66120l, var(--border-radius-dropdown-azs8zp, 0px)));
177
+ border-end-start-radius: var(--awsui-internal-style-border-radius, var(--awsui-dropdown-content-border-radius-66120l, var(--border-radius-dropdown-azs8zp, 0px)));
178
+ border-end-end-radius: var(--awsui-internal-style-border-radius, var(--awsui-dropdown-content-border-radius-66120l, var(--border-radius-dropdown-azs8zp, 0px)));
158
179
  border-block: var(--border-divider-list-width-2qbfmz, 1px) solid var(--color-border-container-top-9e7tpv, #eaeded);
159
180
  box-sizing: border-box;
160
181
  }
161
- .awsui_dropdown-content-wrapper_9duf6_n6iaf_13:not(#\9)::after {
182
+ .awsui_dropdown-content-wrapper_9duf6_1e1bk_13:not(#\9)::after {
162
183
  content: "";
163
184
  position: absolute;
164
185
  z-index: 1;
@@ -167,74 +188,74 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
167
188
  inset-inline-start: 0px;
168
189
  inset-inline-end: 0px;
169
190
  background-color: transparent;
170
- border-block: var(--awsui-dropdown-content-border-width-66120l, var(--border-width-popover-snsxri, 1px)) solid var(--awsui-dropdown-content-border-color-66120l, var(--color-border-dropdown-container-zmsfa8, transparent));
171
- border-inline: var(--awsui-dropdown-content-border-width-66120l, var(--border-width-popover-snsxri, 1px)) solid var(--awsui-dropdown-content-border-color-66120l, var(--color-border-dropdown-container-zmsfa8, transparent));
172
- border-start-start-radius: var(--awsui-dropdown-content-border-radius-66120l, var(--border-radius-dropdown-azs8zp, 0px));
173
- border-start-end-radius: var(--awsui-dropdown-content-border-radius-66120l, var(--border-radius-dropdown-azs8zp, 0px));
174
- border-end-start-radius: var(--awsui-dropdown-content-border-radius-66120l, var(--border-radius-dropdown-azs8zp, 0px));
175
- border-end-end-radius: var(--awsui-dropdown-content-border-radius-66120l, var(--border-radius-dropdown-azs8zp, 0px));
191
+ border-block: var(--awsui-internal-style-border-width, var(--awsui-dropdown-content-border-width-66120l, var(--border-width-popover-snsxri, 1px))) solid var(--awsui-internal-style-border-color, var(--awsui-dropdown-content-border-color-66120l, var(--color-border-dropdown-container-zmsfa8, transparent)));
192
+ border-inline: var(--awsui-internal-style-border-width, var(--awsui-dropdown-content-border-width-66120l, var(--border-width-popover-snsxri, 1px))) solid var(--awsui-internal-style-border-color, var(--awsui-dropdown-content-border-color-66120l, var(--color-border-dropdown-container-zmsfa8, transparent)));
193
+ border-start-start-radius: var(--awsui-internal-style-border-radius, var(--awsui-dropdown-content-border-radius-66120l, var(--border-radius-dropdown-azs8zp, 0px)));
194
+ border-start-end-radius: var(--awsui-internal-style-border-radius, var(--awsui-dropdown-content-border-radius-66120l, var(--border-radius-dropdown-azs8zp, 0px)));
195
+ border-end-start-radius: var(--awsui-internal-style-border-radius, var(--awsui-dropdown-content-border-radius-66120l, var(--border-radius-dropdown-azs8zp, 0px)));
196
+ border-end-end-radius: var(--awsui-internal-style-border-radius, var(--awsui-dropdown-content-border-radius-66120l, var(--border-radius-dropdown-azs8zp, 0px)));
176
197
  pointer-events: none;
177
198
  }
178
- .awsui_dropdown-content-wrapper_9duf6_n6iaf_13.awsui_is-empty_9duf6_n6iaf_178:not(#\9)::after {
199
+ .awsui_dropdown-content-wrapper_9duf6_1e1bk_13.awsui_is-empty_9duf6_1e1bk_199:not(#\9)::after {
179
200
  display: none;
180
201
  }
181
- .awsui_dropdown_9duf6_n6iaf_13 > .awsui_dropdown-content-wrapper_9duf6_n6iaf_13:not(#\9) {
202
+ .awsui_dropdown_9duf6_1e1bk_13 > .awsui_dropdown-content-wrapper_9duf6_1e1bk_13:not(#\9) {
182
203
  border-block-start: var(--border-divider-list-width-2qbfmz, 1px) solid var(--color-border-container-top-9e7tpv, #eaeded);
183
204
  border-block-end: var(--border-divider-list-width-2qbfmz, 1px) solid var(--color-border-dropdown-group-y5droz, #eaeded);
184
205
  }
185
- .awsui_dropdown-drop-up_9duf6_n6iaf_185 > .awsui_dropdown-content-wrapper_9duf6_n6iaf_13:not(#\9) {
206
+ .awsui_dropdown-drop-up_9duf6_1e1bk_206 > .awsui_dropdown-content-wrapper_9duf6_1e1bk_13:not(#\9) {
186
207
  transform-origin: bottom;
187
208
  box-shadow: var(--shadow-dropup-40ssty, 0 -1px 1px 0 rgba(0, 28, 36, 0.3), 1px -1px 1px 0 rgba(0, 28, 36, 0.15), -1px -1px 1px 0 rgba(0, 28, 36, 0.15));
188
209
  }
189
- .awsui_dropdown-drop-up_9duf6_n6iaf_185.awsui_with-limited-width_9duf6_n6iaf_189 > .awsui_dropdown-content-wrapper_9duf6_n6iaf_13:not(#\9) {
210
+ .awsui_dropdown-drop-up_9duf6_1e1bk_206.awsui_with-limited-width_9duf6_1e1bk_210 > .awsui_dropdown-content-wrapper_9duf6_1e1bk_13:not(#\9) {
190
211
  border-block-start: none;
191
212
  }
192
- .awsui_dropdown-drop-left_9duf6_n6iaf_192:not(#\9) {
213
+ .awsui_dropdown-drop-left_9duf6_1e1bk_213:not(#\9) {
193
214
  inset-inline-end: 0;
194
215
  }
195
- .awsui_dropdown-drop-right_9duf6_n6iaf_195:not(#\9) {
216
+ .awsui_dropdown-drop-right_9duf6_1e1bk_216:not(#\9) {
196
217
  inset-inline-start: 0;
197
218
  }
198
- .awsui_dropdown_9duf6_n6iaf_13.awsui_occupy-entire-width_9duf6_n6iaf_198:not(#\9) {
219
+ .awsui_dropdown_9duf6_1e1bk_13.awsui_occupy-entire-width_9duf6_1e1bk_219:not(#\9) {
199
220
  min-inline-size: 100%;
200
221
  }
201
- .awsui_dropdown_9duf6_n6iaf_13.awsui_use-flexible-width_9duf6_n6iaf_201:not(#\9) {
222
+ .awsui_dropdown_9duf6_1e1bk_13.awsui_use-flexible-width_9duf6_1e1bk_222:not(#\9) {
202
223
  inline-size: max-content;
203
224
  max-inline-size: var(--awsui-dropdown-default-max-width-66120l, none);
204
225
  min-inline-size: var(--awsui-dropdown-default-min-width-66120l, auto);
205
226
  }
206
- .awsui_dropdown_9duf6_n6iaf_13.awsui_interior_9duf6_n6iaf_92 > .awsui_dropdown-content-wrapper_9duf6_n6iaf_13:not(#\9) {
227
+ .awsui_dropdown_9duf6_1e1bk_13.awsui_interior_9duf6_1e1bk_109 > .awsui_dropdown-content-wrapper_9duf6_1e1bk_13:not(#\9) {
207
228
  margin-block-start: -1px;
208
229
  }
209
- .awsui_dropdown_9duf6_n6iaf_13.awsui_hide-block-border_9duf6_n6iaf_209 > .awsui_dropdown-content-wrapper_9duf6_n6iaf_13:not(#\9) {
230
+ .awsui_dropdown_9duf6_1e1bk_13.awsui_hide-block-border_9duf6_1e1bk_230 > .awsui_dropdown-content-wrapper_9duf6_1e1bk_13:not(#\9) {
210
231
  border-block-start: none;
211
232
  }
212
- .awsui_dropdown_9duf6_n6iaf_13.awsui_hide-block-border_9duf6_n6iaf_209:not(#\9):not(.awsui_dropdown-drop-up_9duf6_n6iaf_185) > .awsui_dropdown-content-wrapper_9duf6_n6iaf_13 {
233
+ .awsui_dropdown_9duf6_1e1bk_13.awsui_hide-block-border_9duf6_1e1bk_230:not(#\9):not(.awsui_dropdown-drop-up_9duf6_1e1bk_206) > .awsui_dropdown-content-wrapper_9duf6_1e1bk_13 {
213
234
  border-block-end: none;
214
235
  }
215
- .awsui_dropdown_9duf6_n6iaf_13.awsui_hide-block-border_9duf6_n6iaf_209.awsui_refresh_9duf6_n6iaf_34 > .awsui_dropdown-content-wrapper_9duf6_n6iaf_13:not(#\9) {
236
+ .awsui_dropdown_9duf6_1e1bk_13.awsui_hide-block-border_9duf6_1e1bk_230.awsui_refresh_9duf6_1e1bk_34 > .awsui_dropdown-content-wrapper_9duf6_1e1bk_13:not(#\9) {
216
237
  border-block-end: none;
217
238
  }
218
- .awsui_dropdown_9duf6_n6iaf_13.awsui_open_9duf6_n6iaf_218:not(#\9) {
239
+ .awsui_dropdown_9duf6_1e1bk_13.awsui_open_9duf6_1e1bk_239:not(#\9) {
219
240
  display: block;
220
241
  }
221
- .awsui_dropdown_9duf6_n6iaf_13.awsui_open_9duf6_n6iaf_218:not(#\9):not(.awsui_interior_9duf6_n6iaf_92).awsui_refresh_9duf6_n6iaf_34[data-animating=true] {
242
+ .awsui_dropdown_9duf6_1e1bk_13.awsui_open_9duf6_1e1bk_239:not(#\9):not(.awsui_interior_9duf6_1e1bk_109).awsui_refresh_9duf6_1e1bk_34[data-animating=true] {
222
243
  transform: translateY(4px);
223
244
  }
224
- .awsui_dropdown_9duf6_n6iaf_13.awsui_open_9duf6_n6iaf_218:not(#\9):not(.awsui_interior_9duf6_n6iaf_92).awsui_refresh_9duf6_n6iaf_34[data-animating=true].awsui_dropdown-drop-up_9duf6_n6iaf_185 {
245
+ .awsui_dropdown_9duf6_1e1bk_13.awsui_open_9duf6_1e1bk_239:not(#\9):not(.awsui_interior_9duf6_1e1bk_109).awsui_refresh_9duf6_1e1bk_34[data-animating=true].awsui_dropdown-drop-up_9duf6_1e1bk_206 {
225
246
  transform: translateY(-4px);
226
247
  }
227
- .awsui_dropdown_9duf6_n6iaf_13.awsui_open_9duf6_n6iaf_218.awsui_nowrap_9duf6_n6iaf_227:not(#\9) {
248
+ .awsui_dropdown_9duf6_1e1bk_13.awsui_open_9duf6_1e1bk_239.awsui_nowrap_9duf6_1e1bk_248:not(#\9) {
228
249
  white-space: nowrap;
229
250
  overflow: scroll;
230
251
  }
231
252
 
232
- .awsui_dropdown-content_9duf6_n6iaf_13:not(#\9) {
253
+ .awsui_dropdown-content_9duf6_1e1bk_13:not(#\9) {
233
254
  display: flex;
234
255
  flex-direction: column;
235
256
  inline-size: 100%;
236
257
  }
237
258
 
238
- .awsui_stretch-trigger-height_9duf6_n6iaf_238:not(#\9) {
259
+ .awsui_stretch-trigger-height_9duf6_1e1bk_259:not(#\9) {
239
260
  block-size: 100%;
240
261
  }
package/lib/internal/template/dropdown/styles.selectors.js CHANGED
@@ -2,25 +2,25 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "dropdown-content-wrapper": "awsui_dropdown-content-wrapper_9duf6_n6iaf_13",
6
- "awsui-motion-fade-in-dropdown": "awsui_awsui-motion-fade-in-dropdown_9duf6_n6iaf_1",
7
- "refresh": "awsui_refresh_9duf6_n6iaf_34",
8
- "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_9duf6_n6iaf_1",
9
- "root": "awsui_root_9duf6_n6iaf_59",
10
- "interior": "awsui_interior_9duf6_n6iaf_92",
11
- "dropdown": "awsui_dropdown_9duf6_n6iaf_13",
12
- "use-portal": "awsui_use-portal_9duf6_n6iaf_102",
13
- "is-empty": "awsui_is-empty_9duf6_n6iaf_178",
14
- "dropdown-drop-up": "awsui_dropdown-drop-up_9duf6_n6iaf_185",
15
- "with-limited-width": "awsui_with-limited-width_9duf6_n6iaf_189",
16
- "dropdown-drop-left": "awsui_dropdown-drop-left_9duf6_n6iaf_192",
17
- "dropdown-drop-right": "awsui_dropdown-drop-right_9duf6_n6iaf_195",
18
- "occupy-entire-width": "awsui_occupy-entire-width_9duf6_n6iaf_198",
19
- "use-flexible-width": "awsui_use-flexible-width_9duf6_n6iaf_201",
20
- "hide-block-border": "awsui_hide-block-border_9duf6_n6iaf_209",
21
- "open": "awsui_open_9duf6_n6iaf_218",
22
- "nowrap": "awsui_nowrap_9duf6_n6iaf_227",
23
- "dropdown-content": "awsui_dropdown-content_9duf6_n6iaf_13",
24
- "stretch-trigger-height": "awsui_stretch-trigger-height_9duf6_n6iaf_238"
5
+ "dropdown-content-wrapper": "awsui_dropdown-content-wrapper_9duf6_1e1bk_13",
6
+ "awsui-motion-fade-in-dropdown": "awsui_awsui-motion-fade-in-dropdown_9duf6_1e1bk_1",
7
+ "refresh": "awsui_refresh_9duf6_1e1bk_34",
8
+ "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_9duf6_1e1bk_1",
9
+ "root": "awsui_root_9duf6_1e1bk_76",
10
+ "interior": "awsui_interior_9duf6_1e1bk_109",
11
+ "dropdown": "awsui_dropdown_9duf6_1e1bk_13",
12
+ "use-portal": "awsui_use-portal_9duf6_1e1bk_119",
13
+ "is-empty": "awsui_is-empty_9duf6_1e1bk_199",
14
+ "dropdown-drop-up": "awsui_dropdown-drop-up_9duf6_1e1bk_206",
15
+ "with-limited-width": "awsui_with-limited-width_9duf6_1e1bk_210",
16
+ "dropdown-drop-left": "awsui_dropdown-drop-left_9duf6_1e1bk_213",
17
+ "dropdown-drop-right": "awsui_dropdown-drop-right_9duf6_1e1bk_216",
18
+ "occupy-entire-width": "awsui_occupy-entire-width_9duf6_1e1bk_219",
19
+ "use-flexible-width": "awsui_use-flexible-width_9duf6_1e1bk_222",
20
+ "hide-block-border": "awsui_hide-block-border_9duf6_1e1bk_230",
21
+ "open": "awsui_open_9duf6_1e1bk_239",
22
+ "nowrap": "awsui_nowrap_9duf6_1e1bk_248",
23
+ "dropdown-content": "awsui_dropdown-content_9duf6_1e1bk_13",
24
+ "stretch-trigger-height": "awsui_stretch-trigger-height_9duf6_1e1bk_259"
25
25
  };
26
26
 
package/lib/internal/template/internal/base-component/styles.scoped.css CHANGED
@@ -56,5 +56,5 @@
56
56
  }
57
57
  }
58
58
  :root {
59
- --awsui-version-info-4b4d1f4b: true;
59
+ --awsui-version-info-3dc4191d: true;
60
60
  }
package/lib/internal/template/internal/components/checkbox-icon/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/checkbox-icon/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAMnE,UAAU,iBAAkB,SAAQ,kBAAkB;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE;QACN,GAAG,CAAC,EAAE;YACJ,IAAI,CAAC,EAAE,MAAM,CAAC;YACd,MAAM,CAAC,EAAE,MAAM,CAAC;SACjB,CAAC;QACF,IAAI,CAAC,EAAE;YACL,MAAM,CAAC,EAAE,MAAM,CAAC;SACjB,CAAC;KACH,CAAC;CACH;AAsCD,QAAA,MAAM,YAAY,GAAI,qEAOnB,iBAAiB,gBAmCnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/checkbox-icon/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAMnE,UAAU,iBAAkB,SAAQ,kBAAkB;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE;QACN,GAAG,CAAC,EAAE;YACJ,IAAI,CAAC,EAAE,MAAM,CAAC;YACd,MAAM,CAAC,EAAE,MAAM,CAAC;SACjB,CAAC;QACF,IAAI,CAAC,EAAE;YACL,MAAM,CAAC,EAAE,MAAM,CAAC;SACjB,CAAC;KACH,CAAC;CACH;AAsCD,QAAA,MAAM,YAAY,GAAI,qEAOnB,iBAAiB,gBA2CnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
package/lib/internal/template/internal/components/checkbox-icon/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
2
  // SPDX-License-Identifier: Apache-2.0
3
- import React from 'react';
3
+ import React, { useState } from 'react';
4
4
  import clsx from 'clsx';
5
5
  import { getBaseProps } from '../../base-component';
6
6
  import { useOneTheme, useVisualRefresh } from '../../hooks/use-visual-mode';
@@ -38,6 +38,12 @@ const CheckboxIcon = ({ checked, indeterminate, disabled = false, readOnly = fal
38
38
  const oneTheme = useOneTheme();
39
39
  const theme = useVisualRefresh() ? (oneTheme ? 'one' : 'refresh') : 'default';
40
40
  const dimensions = dimensionsByTheme[theme];
41
+ // The draw-in animation only plays once the state has changed since mount.
42
+ const [initialState] = useState({ checked: !!checked, indeterminate: !!indeterminate });
43
+ const [hasChanged, setHasChanged] = useState(false);
44
+ if (!hasChanged && (!!checked !== initialState.checked || !!indeterminate !== initialState.indeterminate)) {
45
+ setHasChanged(true);
46
+ }
41
47
  return (React.createElement("svg", { className: styles.root, viewBox: dimensions.viewBox, "aria-hidden": "true", focusable: "false", ...baseProps },
42
48
  React.createElement("rect", { className: clsx(styles['styled-box'], {
43
49
  [styles['styled-box-checked']]: checked,
@@ -48,7 +54,7 @@ const CheckboxIcon = ({ checked, indeterminate, disabled = false, readOnly = fal
48
54
  checked || indeterminate ? (React.createElement("polyline", { className: clsx(styles['styled-line'], {
49
55
  [styles['styled-line-disabled']]: disabled,
50
56
  [styles['styled-line-readonly']]: readOnly,
51
- }), points: indeterminate ? dimensions.indeterminate : dimensions.checked, style: { stroke: (_c = style === null || style === void 0 ? void 0 : style.line) === null || _c === void 0 ? void 0 : _c.stroke } })) : null));
57
+ }), "data-awsui-motion-ready": hasChanged ? '' : undefined, points: indeterminate ? dimensions.indeterminate : dimensions.checked, style: { stroke: (_c = style === null || style === void 0 ? void 0 : style.line) === null || _c === void 0 ? void 0 : _c.stroke } })) : null));
52
58
  };
53
59
  export default CheckboxIcon;
54
60
  //# sourceMappingURL=index.js.map
package/lib/internal/template/internal/components/checkbox-icon/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/checkbox-icon/index.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 from 'react';\nimport clsx from 'clsx';\n\nimport { BaseComponentProps } from '../../../types/base-component';\nimport { getBaseProps } from '../../base-component';\nimport { useOneTheme, useVisualRefresh } from '../../hooks/use-visual-mode';\n\nimport styles from './styles.css.js';\n\ninterface CheckboxIconProps extends BaseComponentProps {\n checked?: boolean;\n indeterminate?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n style?: {\n box?: {\n fill?: string;\n stroke?: string;\n };\n line?: {\n stroke?: string;\n };\n };\n}\ninterface Dimension {\n viewBox: string;\n indeterminate: string;\n checked: string;\n xy: number;\n r: number;\n size: number;\n}\n\n// Can't use css variables for svg attributes\nconst dimensionsByTheme: Record<NonNullable<'default' | 'refresh' | 'one'>, Dimension> = {\n default: {\n viewBox: '0 0 14 14',\n indeterminate: '2.5,7 11.5,7',\n checked: '2.5,7 6,10 11,3',\n xy: 0.5,\n r: 1.5,\n size: 13,\n },\n refresh: {\n viewBox: '0 0 16 16',\n indeterminate: '3.5,8 12.5,8',\n checked: '3.5,8 7,11 12,4',\n xy: 0.5,\n r: 3,\n size: 15,\n },\n one: {\n viewBox: '0 0 16 16',\n indeterminate: '3.5,8 12.5,8',\n checked: '3.5,8 7,11 12,4',\n xy: 0.5,\n r: 2,\n size: 15,\n },\n};\n\nconst CheckboxIcon = ({\n checked,\n indeterminate,\n disabled = false,\n readOnly = false,\n style,\n ...restProps\n}: CheckboxIconProps) => {\n const baseProps = getBaseProps(restProps);\n const oneTheme = useOneTheme();\n const theme = useVisualRefresh() ? (oneTheme ? 'one' : 'refresh') : 'default';\n const dimensions = dimensionsByTheme[theme];\n\n return (\n <svg className={styles.root} viewBox={dimensions.viewBox} aria-hidden=\"true\" focusable=\"false\" {...baseProps}>\n <rect\n className={clsx(styles['styled-box'], {\n [styles['styled-box-checked']]: checked,\n [styles['styled-box-indeterminate']]: indeterminate,\n [styles['styled-box-disabled']]: disabled,\n [styles['styled-box-readonly']]: readOnly,\n })}\n x={dimensions.xy}\n y={dimensions.xy}\n rx={dimensions.r}\n ry={dimensions.r}\n width={dimensions.size}\n height={dimensions.size}\n style={{ fill: style?.box?.fill, stroke: style?.box?.stroke }}\n />\n {checked || indeterminate ? (\n <polyline\n className={clsx(styles['styled-line'], {\n [styles['styled-line-disabled']]: disabled,\n [styles['styled-line-readonly']]: readOnly,\n })}\n points={indeterminate ? dimensions.indeterminate : dimensions.checked}\n style={{ stroke: style?.line?.stroke }}\n />\n ) : null}\n </svg>\n );\n};\n\nexport default CheckboxIcon;\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/checkbox-icon/index.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, { useState } from 'react';\nimport clsx from 'clsx';\n\nimport { BaseComponentProps } from '../../../types/base-component';\nimport { getBaseProps } from '../../base-component';\nimport { useOneTheme, useVisualRefresh } from '../../hooks/use-visual-mode';\n\nimport styles from './styles.css.js';\n\ninterface CheckboxIconProps extends BaseComponentProps {\n checked?: boolean;\n indeterminate?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n style?: {\n box?: {\n fill?: string;\n stroke?: string;\n };\n line?: {\n stroke?: string;\n };\n };\n}\ninterface Dimension {\n viewBox: string;\n indeterminate: string;\n checked: string;\n xy: number;\n r: number;\n size: number;\n}\n\n// Can't use css variables for svg attributes\nconst dimensionsByTheme: Record<NonNullable<'default' | 'refresh' | 'one'>, Dimension> = {\n default: {\n viewBox: '0 0 14 14',\n indeterminate: '2.5,7 11.5,7',\n checked: '2.5,7 6,10 11,3',\n xy: 0.5,\n r: 1.5,\n size: 13,\n },\n refresh: {\n viewBox: '0 0 16 16',\n indeterminate: '3.5,8 12.5,8',\n checked: '3.5,8 7,11 12,4',\n xy: 0.5,\n r: 3,\n size: 15,\n },\n one: {\n viewBox: '0 0 16 16',\n indeterminate: '3.5,8 12.5,8',\n checked: '3.5,8 7,11 12,4',\n xy: 0.5,\n r: 2,\n size: 15,\n },\n};\n\nconst CheckboxIcon = ({\n checked,\n indeterminate,\n disabled = false,\n readOnly = false,\n style,\n ...restProps\n}: CheckboxIconProps) => {\n const baseProps = getBaseProps(restProps);\n const oneTheme = useOneTheme();\n const theme = useVisualRefresh() ? (oneTheme ? 'one' : 'refresh') : 'default';\n const dimensions = dimensionsByTheme[theme];\n\n // The draw-in animation only plays once the state has changed since mount.\n const [initialState] = useState({ checked: !!checked, indeterminate: !!indeterminate });\n const [hasChanged, setHasChanged] = useState(false);\n if (!hasChanged && (!!checked !== initialState.checked || !!indeterminate !== initialState.indeterminate)) {\n setHasChanged(true);\n }\n\n return (\n <svg className={styles.root} viewBox={dimensions.viewBox} aria-hidden=\"true\" focusable=\"false\" {...baseProps}>\n <rect\n className={clsx(styles['styled-box'], {\n [styles['styled-box-checked']]: checked,\n [styles['styled-box-indeterminate']]: indeterminate,\n [styles['styled-box-disabled']]: disabled,\n [styles['styled-box-readonly']]: readOnly,\n })}\n x={dimensions.xy}\n y={dimensions.xy}\n rx={dimensions.r}\n ry={dimensions.r}\n width={dimensions.size}\n height={dimensions.size}\n style={{ fill: style?.box?.fill, stroke: style?.box?.stroke }}\n />\n {checked || indeterminate ? (\n <polyline\n className={clsx(styles['styled-line'], {\n [styles['styled-line-disabled']]: disabled,\n [styles['styled-line-readonly']]: readOnly,\n })}\n data-awsui-motion-ready={hasChanged ? '' : undefined}\n points={indeterminate ? dimensions.indeterminate : dimensions.checked}\n style={{ stroke: style?.line?.stroke }}\n />\n ) : null}\n </svg>\n );\n};\n\nexport default CheckboxIcon;\n"]}
package/lib/internal/template/internal/components/selectable-item/styles.css.js CHANGED
@@ -1,27 +1,27 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "selectable-item": "awsui_selectable-item_15o6u_ttfpp_9",
5
- "parent": "awsui_parent_15o6u_ttfpp_28",
6
- "interactiveGroups": "awsui_interactiveGroups_15o6u_ttfpp_28",
7
- "highlighted": "awsui_highlighted_15o6u_ttfpp_28",
8
- "selected": "awsui_selected_15o6u_ttfpp_28",
9
- "selectable-item-content": "awsui_selectable-item-content_15o6u_ttfpp_31",
10
- "pad-bottom": "awsui_pad-bottom_15o6u_ttfpp_35",
11
- "virtual": "awsui_virtual_15o6u_ttfpp_42",
12
- "has-background": "awsui_has-background_15o6u_ttfpp_45",
13
- "child": "awsui_child_15o6u_ttfpp_48",
14
- "disabled": "awsui_disabled_15o6u_ttfpp_54",
15
- "is-keyboard": "awsui_is-keyboard_15o6u_ttfpp_69",
16
- "visual-refresh": "awsui_visual-refresh_15o6u_ttfpp_79",
17
- "next-item-selected": "awsui_next-item-selected_15o6u_ttfpp_93",
18
- "previous-item-selected": "awsui_previous-item-selected_15o6u_ttfpp_103",
19
- "sticky": "awsui_sticky_15o6u_ttfpp_135",
20
- "with-scrollbar": "awsui_with-scrollbar_15o6u_ttfpp_154",
21
- "after-header": "awsui_after-header_15o6u_ttfpp_157",
22
- "measure-strut": "awsui_measure-strut_15o6u_ttfpp_186",
23
- "screenreader-content": "awsui_screenreader-content_15o6u_ttfpp_198",
24
- "option-content": "awsui_option-content_15o6u_ttfpp_204",
25
- "select-all": "awsui_select-all_15o6u_ttfpp_208"
4
+ "selectable-item": "awsui_selectable-item_15o6u_1mhnc_9",
5
+ "parent": "awsui_parent_15o6u_1mhnc_28",
6
+ "interactiveGroups": "awsui_interactiveGroups_15o6u_1mhnc_28",
7
+ "highlighted": "awsui_highlighted_15o6u_1mhnc_28",
8
+ "selected": "awsui_selected_15o6u_1mhnc_28",
9
+ "selectable-item-content": "awsui_selectable-item-content_15o6u_1mhnc_31",
10
+ "pad-bottom": "awsui_pad-bottom_15o6u_1mhnc_35",
11
+ "virtual": "awsui_virtual_15o6u_1mhnc_42",
12
+ "has-background": "awsui_has-background_15o6u_1mhnc_45",
13
+ "child": "awsui_child_15o6u_1mhnc_48",
14
+ "disabled": "awsui_disabled_15o6u_1mhnc_54",
15
+ "is-keyboard": "awsui_is-keyboard_15o6u_1mhnc_73",
16
+ "visual-refresh": "awsui_visual-refresh_15o6u_1mhnc_83",
17
+ "next-item-selected": "awsui_next-item-selected_15o6u_1mhnc_97",
18
+ "previous-item-selected": "awsui_previous-item-selected_15o6u_1mhnc_107",
19
+ "sticky": "awsui_sticky_15o6u_1mhnc_139",
20
+ "with-scrollbar": "awsui_with-scrollbar_15o6u_1mhnc_158",
21
+ "after-header": "awsui_after-header_15o6u_1mhnc_161",
22
+ "measure-strut": "awsui_measure-strut_15o6u_1mhnc_190",
23
+ "screenreader-content": "awsui_screenreader-content_15o6u_1mhnc_202",
24
+ "option-content": "awsui_option-content_15o6u_1mhnc_208",
25
+ "select-all": "awsui_select-all_15o6u_1mhnc_212"
26
26
  };
27
27