@cloudscape-design/components-themeable 3.0.345 → 3.0.346

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 (331) hide show
  1. package/lib/internal/manifest.json +1 -1
  2. package/lib/internal/scss/button-dropdown/styles.scss +42 -0
  3. package/lib/internal/scss/help-panel/styles.scss +6 -5
  4. package/lib/internal/scss/internal/components/option/styles.scss +1 -1
  5. package/lib/internal/scss/status-indicator/styles.scss +8 -1
  6. package/lib/internal/scss/table/sticky-scrollbar/styles.scss +0 -1
  7. package/lib/internal/scss/text-content/styles.scss +2 -2
  8. package/lib/internal/template/alert/styles.css.js +19 -19
  9. package/lib/internal/template/alert/styles.scoped.css +33 -33
  10. package/lib/internal/template/alert/styles.selectors.js +19 -19
  11. package/lib/internal/template/annotation-context/annotation/styles.css.js +24 -24
  12. package/lib/internal/template/annotation-context/annotation/styles.scoped.css +30 -30
  13. package/lib/internal/template/annotation-context/annotation/styles.selectors.js +24 -24
  14. package/lib/internal/template/app-layout/index.js +3 -3
  15. package/lib/internal/template/app-layout/index.js.map +1 -1
  16. package/lib/internal/template/app-layout/visual-refresh/context.d.ts.map +1 -1
  17. package/lib/internal/template/app-layout/visual-refresh/context.js +3 -3
  18. package/lib/internal/template/app-layout/visual-refresh/context.js.map +1 -1
  19. package/lib/internal/template/app-layout/visual-refresh/styles.css.js +69 -69
  20. package/lib/internal/template/app-layout/visual-refresh/styles.scoped.css +168 -168
  21. package/lib/internal/template/app-layout/visual-refresh/styles.selectors.js +69 -69
  22. package/lib/internal/template/attribute-editor/styles.css.js +14 -14
  23. package/lib/internal/template/attribute-editor/styles.scoped.css +27 -27
  24. package/lib/internal/template/attribute-editor/styles.selectors.js +14 -14
  25. package/lib/internal/template/autosuggest/virtual-list.d.ts.map +1 -1
  26. package/lib/internal/template/autosuggest/virtual-list.js +2 -2
  27. package/lib/internal/template/autosuggest/virtual-list.js.map +1 -1
  28. package/lib/internal/template/badge/styles.css.js +5 -5
  29. package/lib/internal/template/badge/styles.scoped.css +7 -7
  30. package/lib/internal/template/badge/styles.selectors.js +5 -5
  31. package/lib/internal/template/box/styles.css.js +189 -189
  32. package/lib/internal/template/box/styles.scoped.css +238 -238
  33. package/lib/internal/template/box/styles.selectors.js +189 -189
  34. package/lib/internal/template/breadcrumb-group/styles.css.js +7 -7
  35. package/lib/internal/template/breadcrumb-group/styles.scoped.css +14 -14
  36. package/lib/internal/template/breadcrumb-group/styles.selectors.js +7 -7
  37. package/lib/internal/template/button/styles.css.js +20 -20
  38. package/lib/internal/template/button/styles.scoped.css +154 -154
  39. package/lib/internal/template/button/styles.selectors.js +20 -20
  40. package/lib/internal/template/button-dropdown/index.d.ts.map +1 -1
  41. package/lib/internal/template/button-dropdown/index.js +2 -2
  42. package/lib/internal/template/button-dropdown/index.js.map +1 -1
  43. package/lib/internal/template/button-dropdown/interfaces.d.ts +31 -0
  44. package/lib/internal/template/button-dropdown/interfaces.d.ts.map +1 -1
  45. package/lib/internal/template/button-dropdown/interfaces.js.map +1 -1
  46. package/lib/internal/template/button-dropdown/internal.d.ts.map +1 -1
  47. package/lib/internal/template/button-dropdown/internal.js +52 -7
  48. package/lib/internal/template/button-dropdown/internal.js.map +1 -1
  49. package/lib/internal/template/button-dropdown/mobile-expandable-group/styles.css.js +5 -5
  50. package/lib/internal/template/button-dropdown/mobile-expandable-group/styles.scoped.css +6 -6
  51. package/lib/internal/template/button-dropdown/mobile-expandable-group/styles.selectors.js +5 -5
  52. package/lib/internal/template/button-dropdown/styles.css.js +14 -8
  53. package/lib/internal/template/button-dropdown/styles.scoped.css +44 -14
  54. package/lib/internal/template/button-dropdown/styles.selectors.js +14 -8
  55. package/lib/internal/template/button-dropdown/utils/use-button-dropdown.d.ts +1 -0
  56. package/lib/internal/template/button-dropdown/utils/use-button-dropdown.d.ts.map +1 -1
  57. package/lib/internal/template/button-dropdown/utils/use-button-dropdown.js +1 -0
  58. package/lib/internal/template/button-dropdown/utils/use-button-dropdown.js.map +1 -1
  59. package/lib/internal/template/calendar/styles.css.js +18 -18
  60. package/lib/internal/template/calendar/styles.scoped.css +40 -40
  61. package/lib/internal/template/calendar/styles.selectors.js +18 -18
  62. package/lib/internal/template/cards/index.js +5 -4
  63. package/lib/internal/template/cards/index.js.map +1 -1
  64. package/lib/internal/template/cards/styles.css.js +38 -38
  65. package/lib/internal/template/cards/styles.scoped.css +55 -55
  66. package/lib/internal/template/cards/styles.selectors.js +38 -38
  67. package/lib/internal/template/checkbox/styles.css.js +3 -3
  68. package/lib/internal/template/checkbox/styles.scoped.css +7 -7
  69. package/lib/internal/template/checkbox/styles.selectors.js +3 -3
  70. package/lib/internal/template/code-editor/index.js +2 -2
  71. package/lib/internal/template/code-editor/index.js.map +1 -1
  72. package/lib/internal/template/code-editor/status-bar.d.ts.map +1 -1
  73. package/lib/internal/template/code-editor/status-bar.js +3 -3
  74. package/lib/internal/template/code-editor/status-bar.js.map +1 -1
  75. package/lib/internal/template/code-editor/styles.css.js +32 -32
  76. package/lib/internal/template/code-editor/styles.scoped.css +177 -177
  77. package/lib/internal/template/code-editor/styles.selectors.js +32 -32
  78. package/lib/internal/template/collection-preferences/content-display/styles.css.js +11 -11
  79. package/lib/internal/template/collection-preferences/content-display/styles.scoped.css +19 -19
  80. package/lib/internal/template/collection-preferences/content-display/styles.selectors.js +11 -11
  81. package/lib/internal/template/collection-preferences/styles.css.js +37 -37
  82. package/lib/internal/template/collection-preferences/styles.scoped.css +47 -47
  83. package/lib/internal/template/collection-preferences/styles.selectors.js +37 -37
  84. package/lib/internal/template/column-layout/flexible-column-layout/index.d.ts.map +1 -1
  85. package/lib/internal/template/column-layout/flexible-column-layout/index.js +2 -2
  86. package/lib/internal/template/column-layout/flexible-column-layout/index.js.map +1 -1
  87. package/lib/internal/template/column-layout/styles.css.js +13 -13
  88. package/lib/internal/template/column-layout/styles.scoped.css +44 -44
  89. package/lib/internal/template/column-layout/styles.selectors.js +13 -13
  90. package/lib/internal/template/container/styles.css.js +28 -28
  91. package/lib/internal/template/container/styles.scoped.css +52 -52
  92. package/lib/internal/template/container/styles.selectors.js +28 -28
  93. package/lib/internal/template/date-picker/styles.css.js +7 -7
  94. package/lib/internal/template/date-picker/styles.scoped.css +10 -10
  95. package/lib/internal/template/date-picker/styles.selectors.js +7 -7
  96. package/lib/internal/template/date-range-picker/styles.css.js +38 -38
  97. package/lib/internal/template/date-range-picker/styles.scoped.css +48 -48
  98. package/lib/internal/template/date-range-picker/styles.selectors.js +38 -38
  99. package/lib/internal/template/expandable-section/styles.css.js +29 -29
  100. package/lib/internal/template/expandable-section/styles.scoped.css +65 -65
  101. package/lib/internal/template/expandable-section/styles.selectors.js +29 -29
  102. package/lib/internal/template/flashbar/styles.css.js +46 -46
  103. package/lib/internal/template/flashbar/styles.scoped.css +160 -160
  104. package/lib/internal/template/flashbar/styles.selectors.js +46 -46
  105. package/lib/internal/template/form/styles.css.js +9 -9
  106. package/lib/internal/template/form/styles.scoped.css +9 -9
  107. package/lib/internal/template/form/styles.selectors.js +9 -9
  108. package/lib/internal/template/form-field/styles.css.js +19 -19
  109. package/lib/internal/template/form-field/styles.scoped.css +31 -31
  110. package/lib/internal/template/form-field/styles.selectors.js +19 -19
  111. package/lib/internal/template/grid/styles.css.js +53 -53
  112. package/lib/internal/template/grid/styles.scoped.css +55 -55
  113. package/lib/internal/template/grid/styles.selectors.js +53 -53
  114. package/lib/internal/template/header/styles.css.js +44 -44
  115. package/lib/internal/template/header/styles.scoped.css +50 -50
  116. package/lib/internal/template/header/styles.selectors.js +44 -44
  117. package/lib/internal/template/help-panel/styles.css.js +4 -4
  118. package/lib/internal/template/help-panel/styles.scoped.css +70 -69
  119. package/lib/internal/template/help-panel/styles.selectors.js +4 -4
  120. package/lib/internal/template/icon/styles.css.js +21 -21
  121. package/lib/internal/template/icon/styles.scoped.css +50 -50
  122. package/lib/internal/template/icon/styles.selectors.js +21 -21
  123. package/lib/internal/template/input/styles.css.js +12 -12
  124. package/lib/internal/template/input/styles.scoped.css +35 -35
  125. package/lib/internal/template/input/styles.selectors.js +12 -12
  126. package/lib/internal/template/internal/base-component/styles.scoped.css +12 -13
  127. package/lib/internal/template/internal/components/button-trigger/styles.css.js +9 -9
  128. package/lib/internal/template/internal/components/button-trigger/styles.scoped.css +26 -26
  129. package/lib/internal/template/internal/components/button-trigger/styles.selectors.js +9 -9
  130. package/lib/internal/template/internal/components/cartesian-chart/labels-measure.d.ts.map +1 -1
  131. package/lib/internal/template/internal/components/cartesian-chart/labels-measure.js +2 -2
  132. package/lib/internal/template/internal/components/cartesian-chart/labels-measure.js.map +1 -1
  133. package/lib/internal/template/internal/components/chart-filter/styles.css.js +3 -3
  134. package/lib/internal/template/internal/components/chart-filter/styles.scoped.css +4 -4
  135. package/lib/internal/template/internal/components/chart-filter/styles.selectors.js +3 -3
  136. package/lib/internal/template/internal/components/chart-legend/styles.css.js +6 -6
  137. package/lib/internal/template/internal/components/chart-legend/styles.scoped.css +16 -16
  138. package/lib/internal/template/internal/components/chart-legend/styles.selectors.js +6 -6
  139. package/lib/internal/template/internal/components/chart-popover/styles.css.js +3 -3
  140. package/lib/internal/template/internal/components/chart-popover/styles.scoped.css +4 -4
  141. package/lib/internal/template/internal/components/chart-popover/styles.selectors.js +3 -3
  142. package/lib/internal/template/internal/components/chart-series-details/styles.css.js +5 -5
  143. package/lib/internal/template/internal/components/chart-series-details/styles.scoped.css +10 -10
  144. package/lib/internal/template/internal/components/chart-series-details/styles.selectors.js +5 -5
  145. package/lib/internal/template/internal/components/chart-series-marker/styles.css.js +5 -5
  146. package/lib/internal/template/internal/components/chart-series-marker/styles.scoped.css +8 -8
  147. package/lib/internal/template/internal/components/chart-series-marker/styles.selectors.js +5 -5
  148. package/lib/internal/template/internal/components/chart-wrapper/styles.css.js +6 -6
  149. package/lib/internal/template/internal/components/chart-wrapper/styles.scoped.css +9 -9
  150. package/lib/internal/template/internal/components/chart-wrapper/styles.selectors.js +6 -6
  151. package/lib/internal/template/internal/components/dropdown/styles.css.js +20 -20
  152. package/lib/internal/template/internal/components/dropdown/styles.scoped.css +36 -36
  153. package/lib/internal/template/internal/components/dropdown/styles.selectors.js +20 -20
  154. package/lib/internal/template/internal/components/dropdown-footer/styles.css.js +3 -3
  155. package/lib/internal/template/internal/components/dropdown-footer/styles.scoped.css +4 -4
  156. package/lib/internal/template/internal/components/dropdown-footer/styles.selectors.js +3 -3
  157. package/lib/internal/template/internal/components/dropdown-status/index.d.ts.map +1 -1
  158. package/lib/internal/template/internal/components/dropdown-status/index.js +1 -1
  159. package/lib/internal/template/internal/components/dropdown-status/index.js.map +1 -1
  160. package/lib/internal/template/internal/components/dropdown-status/styles.css.js +2 -2
  161. package/lib/internal/template/internal/components/dropdown-status/styles.scoped.css +3 -3
  162. package/lib/internal/template/internal/components/dropdown-status/styles.selectors.js +2 -2
  163. package/lib/internal/template/internal/components/menu-dropdown/styles.css.js +7 -7
  164. package/lib/internal/template/internal/components/menu-dropdown/styles.scoped.css +14 -14
  165. package/lib/internal/template/internal/components/menu-dropdown/styles.selectors.js +7 -7
  166. package/lib/internal/template/internal/components/option/styles.css.js +17 -17
  167. package/lib/internal/template/internal/components/option/styles.scoped.css +31 -31
  168. package/lib/internal/template/internal/components/option/styles.selectors.js +17 -17
  169. package/lib/internal/template/internal/components/options-list/styles.css.js +2 -2
  170. package/lib/internal/template/internal/components/options-list/styles.scoped.css +3 -3
  171. package/lib/internal/template/internal/components/options-list/styles.selectors.js +2 -2
  172. package/lib/internal/template/internal/components/selectable-item/styles.css.js +16 -16
  173. package/lib/internal/template/internal/components/selectable-item/styles.scoped.css +29 -29
  174. package/lib/internal/template/internal/components/selectable-item/styles.selectors.js +16 -16
  175. package/lib/internal/template/internal/components/token-list/styles.css.js +9 -9
  176. package/lib/internal/template/internal/components/token-list/styles.scoped.css +21 -21
  177. package/lib/internal/template/internal/components/token-list/styles.selectors.js +9 -9
  178. package/lib/internal/template/internal/environment.js +1 -1
  179. package/lib/internal/template/internal/generated/theming/index.cjs +24 -13
  180. package/lib/internal/template/internal/generated/theming/index.js +24 -13
  181. package/lib/internal/template/internal/hooks/container-queries/index.d.ts +0 -2
  182. package/lib/internal/template/internal/hooks/container-queries/index.d.ts.map +1 -1
  183. package/lib/internal/template/internal/hooks/container-queries/index.js +2 -1
  184. package/lib/internal/template/internal/hooks/container-queries/index.js.map +1 -1
  185. package/lib/internal/template/internal/hooks/container-queries/use-container-breakpoints.d.ts.map +1 -1
  186. package/lib/internal/template/internal/hooks/container-queries/use-container-breakpoints.js +2 -2
  187. package/lib/internal/template/internal/hooks/container-queries/use-container-breakpoints.js.map +1 -1
  188. package/lib/internal/template/internal/hooks/container-queries/use-resize-observer.d.ts +1 -1
  189. package/lib/internal/template/internal/hooks/container-queries/use-resize-observer.d.ts.map +1 -1
  190. package/lib/internal/template/internal/hooks/container-queries/use-resize-observer.js +0 -2
  191. package/lib/internal/template/internal/hooks/container-queries/use-resize-observer.js.map +1 -1
  192. package/lib/internal/template/internal/hooks/use-dynamic-overlap/index.js +2 -2
  193. package/lib/internal/template/internal/hooks/use-dynamic-overlap/index.js.map +1 -1
  194. package/lib/internal/template/internal/utils/use-container-width.d.ts.map +1 -1
  195. package/lib/internal/template/internal/utils/use-container-width.js +5 -3
  196. package/lib/internal/template/internal/utils/use-container-width.js.map +1 -1
  197. package/lib/internal/template/link/styles.css.js +20 -20
  198. package/lib/internal/template/link/styles.scoped.css +73 -73
  199. package/lib/internal/template/link/styles.selectors.js +20 -20
  200. package/lib/internal/template/modal/internal.d.ts.map +1 -1
  201. package/lib/internal/template/modal/internal.js +2 -1
  202. package/lib/internal/template/modal/internal.js.map +1 -1
  203. package/lib/internal/template/modal/styles.css.js +23 -23
  204. package/lib/internal/template/modal/styles.scoped.css +40 -40
  205. package/lib/internal/template/modal/styles.selectors.js +23 -23
  206. package/lib/internal/template/multiselect/styles.css.js +1 -1
  207. package/lib/internal/template/multiselect/styles.scoped.css +2 -2
  208. package/lib/internal/template/multiselect/styles.selectors.js +1 -1
  209. package/lib/internal/template/pagination/styles.css.js +9 -9
  210. package/lib/internal/template/pagination/styles.scoped.css +24 -24
  211. package/lib/internal/template/pagination/styles.selectors.js +9 -9
  212. package/lib/internal/template/pie-chart/styles.css.js +23 -23
  213. package/lib/internal/template/pie-chart/styles.scoped.css +42 -42
  214. package/lib/internal/template/pie-chart/styles.selectors.js +23 -23
  215. package/lib/internal/template/popover/styles.css.js +50 -50
  216. package/lib/internal/template/popover/styles.scoped.css +66 -66
  217. package/lib/internal/template/popover/styles.selectors.js +50 -50
  218. package/lib/internal/template/progress-bar/styles.css.js +18 -18
  219. package/lib/internal/template/progress-bar/styles.scoped.css +35 -35
  220. package/lib/internal/template/progress-bar/styles.selectors.js +18 -18
  221. package/lib/internal/template/property-filter/index.d.ts.map +1 -1
  222. package/lib/internal/template/property-filter/index.js +2 -3
  223. package/lib/internal/template/property-filter/index.js.map +1 -1
  224. package/lib/internal/template/property-filter/styles.css.js +29 -29
  225. package/lib/internal/template/property-filter/styles.scoped.css +32 -32
  226. package/lib/internal/template/property-filter/styles.selectors.js +29 -29
  227. package/lib/internal/template/property-filter/token-editor.d.ts.map +1 -1
  228. package/lib/internal/template/property-filter/token-editor.js +2 -2
  229. package/lib/internal/template/property-filter/token-editor.js.map +1 -1
  230. package/lib/internal/template/radio-group/styles.css.js +9 -9
  231. package/lib/internal/template/radio-group/styles.scoped.css +17 -17
  232. package/lib/internal/template/radio-group/styles.selectors.js +9 -9
  233. package/lib/internal/template/s3-resource-selector/s3-in-context/styles.css.js +7 -7
  234. package/lib/internal/template/s3-resource-selector/s3-in-context/styles.scoped.css +9 -9
  235. package/lib/internal/template/s3-resource-selector/s3-in-context/styles.selectors.js +7 -7
  236. package/lib/internal/template/segmented-control/styles.css.js +14 -14
  237. package/lib/internal/template/segmented-control/styles.scoped.css +35 -35
  238. package/lib/internal/template/segmented-control/styles.selectors.js +14 -14
  239. package/lib/internal/template/select/parts/virtual-list.js +2 -2
  240. package/lib/internal/template/select/parts/virtual-list.js.map +1 -1
  241. package/lib/internal/template/select/styles.css.js +1 -1
  242. package/lib/internal/template/select/styles.scoped.css +2 -2
  243. package/lib/internal/template/select/styles.selectors.js +1 -1
  244. package/lib/internal/template/side-navigation/styles.css.js +27 -27
  245. package/lib/internal/template/side-navigation/styles.scoped.css +39 -39
  246. package/lib/internal/template/side-navigation/styles.selectors.js +27 -27
  247. package/lib/internal/template/spinner/styles.css.js +13 -13
  248. package/lib/internal/template/spinner/styles.scoped.css +20 -20
  249. package/lib/internal/template/spinner/styles.selectors.js +13 -13
  250. package/lib/internal/template/split-panel/styles.css.js +56 -56
  251. package/lib/internal/template/split-panel/styles.scoped.css +78 -78
  252. package/lib/internal/template/split-panel/styles.selectors.js +56 -56
  253. package/lib/internal/template/status-indicator/internal.d.ts +6 -3
  254. package/lib/internal/template/status-indicator/internal.d.ts.map +1 -1
  255. package/lib/internal/template/status-indicator/internal.js +2 -2
  256. package/lib/internal/template/status-indicator/internal.js.map +1 -1
  257. package/lib/internal/template/status-indicator/styles.css.js +22 -20
  258. package/lib/internal/template/status-indicator/styles.scoped.css +33 -28
  259. package/lib/internal/template/status-indicator/styles.selectors.js +22 -20
  260. package/lib/internal/template/table/internal.d.ts.map +1 -1
  261. package/lib/internal/template/table/internal.js +6 -4
  262. package/lib/internal/template/table/internal.js.map +1 -1
  263. package/lib/internal/template/table/sticky-scrollbar/styles.css.js +4 -4
  264. package/lib/internal/template/table/sticky-scrollbar/styles.scoped.css +4 -5
  265. package/lib/internal/template/table/sticky-scrollbar/styles.selectors.js +4 -4
  266. package/lib/internal/template/table/styles.css.js +34 -34
  267. package/lib/internal/template/table/styles.scoped.css +43 -43
  268. package/lib/internal/template/table/styles.selectors.js +34 -34
  269. package/lib/internal/template/tabs/styles.css.js +21 -21
  270. package/lib/internal/template/tabs/styles.scoped.css +39 -39
  271. package/lib/internal/template/tabs/styles.selectors.js +21 -21
  272. package/lib/internal/template/tabs/tab-header-bar.js +2 -2
  273. package/lib/internal/template/tabs/tab-header-bar.js.map +1 -1
  274. package/lib/internal/template/test-utils/dom/button-dropdown/index.d.ts +2 -0
  275. package/lib/internal/template/test-utils/dom/button-dropdown/index.js +6 -1
  276. package/lib/internal/template/test-utils/dom/button-dropdown/index.js.map +1 -1
  277. package/lib/internal/template/test-utils/selectors/button-dropdown/index.d.ts +2 -0
  278. package/lib/internal/template/test-utils/selectors/button-dropdown/index.js +6 -1
  279. package/lib/internal/template/test-utils/selectors/button-dropdown/index.js.map +1 -1
  280. package/lib/internal/template/test-utils/tsconfig.tsbuildinfo +1 -1
  281. package/lib/internal/template/text-content/styles.css.js +1 -1
  282. package/lib/internal/template/text-content/styles.scoped.css +64 -64
  283. package/lib/internal/template/text-content/styles.selectors.js +1 -1
  284. package/lib/internal/template/text-filter/styles.css.js +3 -3
  285. package/lib/internal/template/text-filter/styles.scoped.css +4 -4
  286. package/lib/internal/template/text-filter/styles.selectors.js +3 -3
  287. package/lib/internal/template/textarea/styles.css.js +4 -4
  288. package/lib/internal/template/textarea/styles.scoped.css +14 -14
  289. package/lib/internal/template/textarea/styles.selectors.js +4 -4
  290. package/lib/internal/template/tiles/styles.css.js +28 -28
  291. package/lib/internal/template/tiles/styles.scoped.css +70 -70
  292. package/lib/internal/template/tiles/styles.selectors.js +28 -28
  293. package/lib/internal/template/toggle/styles.css.js +8 -8
  294. package/lib/internal/template/toggle/styles.scoped.css +15 -15
  295. package/lib/internal/template/toggle/styles.selectors.js +8 -8
  296. package/lib/internal/template/token-group/styles.css.js +7 -7
  297. package/lib/internal/template/token-group/styles.scoped.css +17 -17
  298. package/lib/internal/template/token-group/styles.selectors.js +7 -7
  299. package/lib/internal/template/top-navigation/1.0-beta/styles.css.js +25 -25
  300. package/lib/internal/template/top-navigation/1.0-beta/styles.scoped.css +43 -43
  301. package/lib/internal/template/top-navigation/1.0-beta/styles.selectors.js +25 -25
  302. package/lib/internal/template/top-navigation/1.0-beta/use-top-navigation.d.ts.map +1 -1
  303. package/lib/internal/template/top-navigation/1.0-beta/use-top-navigation.js +2 -1
  304. package/lib/internal/template/top-navigation/1.0-beta/use-top-navigation.js.map +1 -1
  305. package/lib/internal/template/top-navigation/styles.css.js +47 -47
  306. package/lib/internal/template/top-navigation/styles.scoped.css +70 -70
  307. package/lib/internal/template/top-navigation/styles.selectors.js +47 -47
  308. package/lib/internal/template/top-navigation/use-top-navigation.d.ts.map +1 -1
  309. package/lib/internal/template/top-navigation/use-top-navigation.js +2 -1
  310. package/lib/internal/template/top-navigation/use-top-navigation.js.map +1 -1
  311. package/lib/internal/template/tutorial-panel/components/tutorial-detail-view/styles.css.js +20 -20
  312. package/lib/internal/template/tutorial-panel/components/tutorial-detail-view/styles.scoped.css +23 -23
  313. package/lib/internal/template/tutorial-panel/components/tutorial-detail-view/styles.selectors.js +20 -20
  314. package/lib/internal/template/tutorial-panel/components/tutorial-list/styles.css.js +18 -18
  315. package/lib/internal/template/tutorial-panel/components/tutorial-list/styles.scoped.css +30 -30
  316. package/lib/internal/template/tutorial-panel/components/tutorial-list/styles.selectors.js +18 -18
  317. package/lib/internal/template/tutorial-panel/styles.css.js +1 -1
  318. package/lib/internal/template/tutorial-panel/styles.scoped.css +2 -2
  319. package/lib/internal/template/tutorial-panel/styles.selectors.js +1 -1
  320. package/lib/internal/template/wizard/styles.css.js +31 -31
  321. package/lib/internal/template/wizard/styles.scoped.css +63 -63
  322. package/lib/internal/template/wizard/styles.selectors.js +31 -31
  323. package/package.json +1 -1
  324. package/lib/internal/template/internal/hooks/container-queries/interfaces.d.ts +0 -10
  325. package/lib/internal/template/internal/hooks/container-queries/interfaces.d.ts.map +0 -1
  326. package/lib/internal/template/internal/hooks/container-queries/interfaces.js +0 -4
  327. package/lib/internal/template/internal/hooks/container-queries/interfaces.js.map +0 -1
  328. package/lib/internal/template/internal/hooks/container-queries/use-container-query.d.ts +0 -22
  329. package/lib/internal/template/internal/hooks/container-queries/use-container-query.d.ts.map +0 -1
  330. package/lib/internal/template/internal/hooks/container-queries/use-container-query.js +0 -32
  331. package/lib/internal/template/internal/hooks/container-queries/use-container-query.js.map +0 -1
@@ -1,36 +1,36 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "root": "awsui_root_1xupv_4ecb6_94",
5
- "wizard": "awsui_wizard_1xupv_4ecb6_107",
6
- "refresh": "awsui_refresh_1xupv_4ecb6_107",
7
- "small-container": "awsui_small-container_1xupv_4ecb6_114",
8
- "navigation": "awsui_navigation_1xupv_4ecb6_123",
9
- "number": "awsui_number_1xupv_4ecb6_185",
10
- "circle": "awsui_circle_1xupv_4ecb6_201",
11
- "title": "awsui_title_1xupv_4ecb6_209",
12
- "active": "awsui_active_1xupv_4ecb6_238",
13
- "disabled": "awsui_disabled_1xupv_4ecb6_249",
14
- "enabled": "awsui_enabled_1xupv_4ecb6_259",
15
- "form": "awsui_form_1xupv_4ecb6_301",
16
- "form-header": "awsui_form-header_1xupv_4ecb6_307",
17
- "background": "awsui_background_1xupv_4ecb6_318",
18
- "form-header-content": "awsui_form-header-content_1xupv_4ecb6_330",
19
- "form-component": "awsui_form-component_1xupv_4ecb6_334",
20
- "hidden": "awsui_hidden_1xupv_4ecb6_348",
21
- "collapsed-steps": "awsui_collapsed-steps_1xupv_4ecb6_352",
22
- "collapsed-steps-hidden": "awsui_collapsed-steps-hidden_1xupv_4ecb6_357",
23
- "form-header-component-wrapper": "awsui_form-header-component-wrapper_1xupv_4ecb6_361",
24
- "form-header-component": "awsui_form-header-component_1xupv_4ecb6_361",
25
- "navigation-link": "awsui_navigation-link_1xupv_4ecb6_374",
26
- "navigation-link-item": "awsui_navigation-link-item_1xupv_4ecb6_375",
27
- "navigation-link-label": "awsui_navigation-link-label_1xupv_4ecb6_376",
28
- "navigation-link-active": "awsui_navigation-link-active_1xupv_4ecb6_380",
29
- "navigation-link-disabled": "awsui_navigation-link-disabled_1xupv_4ecb6_385",
30
- "cancel-button": "awsui_cancel-button_1xupv_4ecb6_389",
31
- "previous-button": "awsui_previous-button_1xupv_4ecb6_390",
32
- "primary-button": "awsui_primary-button_1xupv_4ecb6_391",
33
- "skip-to-button": "awsui_skip-to-button_1xupv_4ecb6_392",
34
- "action-buttons": "awsui_action-buttons_1xupv_4ecb6_396"
4
+ "root": "awsui_root_1xupv_1enw3_94",
5
+ "wizard": "awsui_wizard_1xupv_1enw3_107",
6
+ "refresh": "awsui_refresh_1xupv_1enw3_107",
7
+ "small-container": "awsui_small-container_1xupv_1enw3_114",
8
+ "navigation": "awsui_navigation_1xupv_1enw3_123",
9
+ "number": "awsui_number_1xupv_1enw3_185",
10
+ "circle": "awsui_circle_1xupv_1enw3_201",
11
+ "title": "awsui_title_1xupv_1enw3_209",
12
+ "active": "awsui_active_1xupv_1enw3_238",
13
+ "disabled": "awsui_disabled_1xupv_1enw3_249",
14
+ "enabled": "awsui_enabled_1xupv_1enw3_259",
15
+ "form": "awsui_form_1xupv_1enw3_301",
16
+ "form-header": "awsui_form-header_1xupv_1enw3_307",
17
+ "background": "awsui_background_1xupv_1enw3_318",
18
+ "form-header-content": "awsui_form-header-content_1xupv_1enw3_330",
19
+ "form-component": "awsui_form-component_1xupv_1enw3_334",
20
+ "hidden": "awsui_hidden_1xupv_1enw3_348",
21
+ "collapsed-steps": "awsui_collapsed-steps_1xupv_1enw3_352",
22
+ "collapsed-steps-hidden": "awsui_collapsed-steps-hidden_1xupv_1enw3_357",
23
+ "form-header-component-wrapper": "awsui_form-header-component-wrapper_1xupv_1enw3_361",
24
+ "form-header-component": "awsui_form-header-component_1xupv_1enw3_361",
25
+ "navigation-link": "awsui_navigation-link_1xupv_1enw3_374",
26
+ "navigation-link-item": "awsui_navigation-link-item_1xupv_1enw3_375",
27
+ "navigation-link-label": "awsui_navigation-link-label_1xupv_1enw3_376",
28
+ "navigation-link-active": "awsui_navigation-link-active_1xupv_1enw3_380",
29
+ "navigation-link-disabled": "awsui_navigation-link-disabled_1xupv_1enw3_385",
30
+ "cancel-button": "awsui_cancel-button_1xupv_1enw3_389",
31
+ "previous-button": "awsui_previous-button_1xupv_1enw3_390",
32
+ "primary-button": "awsui_primary-button_1xupv_1enw3_391",
33
+ "skip-to-button": "awsui_skip-to-button_1xupv_1enw3_392",
34
+ "action-buttons": "awsui_action-buttons_1xupv_1enw3_396"
35
35
  };
36
36
 
@@ -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_4ecb6_94:not(#\9) {
94
+ .awsui_root_1xupv_1enw3_94:not(#\9) {
95
95
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
96
96
  border-collapse: separate;
97
97
  border-spacing: 0;
@@ -122,7 +122,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
122
122
  word-spacing: normal;
123
123
  box-sizing: border-box;
124
124
  font-size: var(--font-body-m-size-0qqejn, 14px);
125
- line-height: var(--font-body-m-line-height-9vkzhc, 22px);
125
+ line-height: var(--font-body-m-line-height-43ichb, 22px);
126
126
  color: var(--color-text-body-default-4colr5, #16191f);
127
127
  font-weight: 400;
128
128
  font-family: var(--font-family-base-nzcxu9, "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
@@ -130,28 +130,28 @@ 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_4ecb6_107.awsui_refresh_1xupv_4ecb6_107:not(#\9) {
133
+ .awsui_wizard_1xupv_1enw3_107.awsui_refresh_1xupv_1enw3_107:not(#\9) {
134
134
  column-gap: var(--space-xl-uesynn, 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-2yypb9, 24px);
139
139
  }
140
- .awsui_wizard_1xupv_4ecb6_107.awsui_refresh_1xupv_4ecb6_107.awsui_small-container_1xupv_4ecb6_114:not(#\9) {
140
+ .awsui_wizard_1xupv_1enw3_107.awsui_refresh_1xupv_1enw3_107.awsui_small-container_1xupv_1enw3_114:not(#\9) {
141
141
  grid-template-columns: minmax(0, 1fr) 0;
142
142
  row-gap: var(--space-scaled-l-w7rqqb, 20px);
143
143
  }
144
144
 
145
- .awsui_wizard_1xupv_4ecb6_107:not(#\9):not(.awsui_refresh_1xupv_4ecb6_107) {
145
+ .awsui_wizard_1xupv_1enw3_107:not(#\9):not(.awsui_refresh_1xupv_1enw3_107) {
146
146
  display: flex;
147
147
  }
148
148
 
149
- .awsui_navigation_1xupv_4ecb6_123.awsui_refresh_1xupv_4ecb6_107:not(#\9) {
149
+ .awsui_navigation_1xupv_1enw3_123.awsui_refresh_1xupv_1enw3_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_4ecb6_123.awsui_refresh_1xupv_4ecb6_107 > ul:not(#\9) {
154
+ .awsui_navigation_1xupv_1enw3_123.awsui_refresh_1xupv_1enw3_107 > ul:not(#\9) {
155
155
  background: var(--color-background-container-content-xlzim4, #ffffff);
156
156
  position: relative;
157
157
  border-radius: var(--border-radius-container-53367b, 0px);
@@ -161,7 +161,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
161
161
  width: 280px;
162
162
  box-sizing: border-box;
163
163
  }
164
- .awsui_navigation_1xupv_4ecb6_123.awsui_refresh_1xupv_4ecb6_107 > ul:not(#\9)::before {
164
+ .awsui_navigation_1xupv_1enw3_123.awsui_refresh_1xupv_1enw3_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-53367b, 0px);
177
177
  z-index: 1;
178
178
  }
179
- .awsui_navigation_1xupv_4ecb6_123.awsui_refresh_1xupv_4ecb6_107 > ul:not(#\9)::after {
179
+ .awsui_navigation_1xupv_1enw3_123.awsui_refresh_1xupv_1enw3_107 > ul:not(#\9)::after {
180
180
  content: "";
181
181
  position: absolute;
182
182
  left: 0px;
@@ -191,30 +191,30 @@ 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_4ecb6_123.awsui_refresh_1xupv_4ecb6_107 > ul:not(#\9) {
194
+ .awsui_navigation_1xupv_1enw3_123.awsui_refresh_1xupv_1enw3_107 > ul:not(#\9) {
195
195
  border: var(--border-field-width-gmdyxy, 1px) solid var(--color-border-container-top-1t94bd, #eaeded);
196
196
  }
197
197
  }
198
- .awsui_navigation_1xupv_4ecb6_123.awsui_refresh_1xupv_4ecb6_107 > ul > li:not(#\9) {
198
+ .awsui_navigation_1xupv_1enw3_123.awsui_refresh_1xupv_1enw3_107 > ul > li:not(#\9) {
199
199
  display: grid;
200
200
  column-gap: var(--space-s-o95p2n, 12px);
201
201
  grid-template-columns: var(--space-l-z6h7qi, 20px) 1fr;
202
202
  grid-template-rows: repeat(2, auto);
203
203
  }
204
- .awsui_navigation_1xupv_4ecb6_123.awsui_refresh_1xupv_4ecb6_107 > ul > li > hr:not(#\9) {
204
+ .awsui_navigation_1xupv_1enw3_123.awsui_refresh_1xupv_1enw3_107 > ul > li > hr:not(#\9) {
205
205
  background-color: var(--color-border-divider-default-uqjcpn, #eaeded);
206
206
  border: 0;
207
207
  grid-column: 1;
208
208
  height: 100%;
209
209
  width: var(--space-xxxs-du4mq0, 2px);
210
210
  }
211
- .awsui_navigation_1xupv_4ecb6_123.awsui_refresh_1xupv_4ecb6_107 > ul > li > .awsui_number_1xupv_4ecb6_185:not(#\9) {
211
+ .awsui_navigation_1xupv_1enw3_123.awsui_refresh_1xupv_1enw3_107 > ul > li > .awsui_number_1xupv_1enw3_185:not(#\9) {
212
212
  color: var(--color-text-small-wl1hyo, #687078);
213
213
  font-size: var(--font-body-s-size-v1w8ey, 12px);
214
214
  grid-column: 2;
215
215
  grid-row: 1;
216
216
  }
217
- .awsui_navigation_1xupv_4ecb6_123.awsui_refresh_1xupv_4ecb6_107 > ul > li > a:not(#\9) {
217
+ .awsui_navigation_1xupv_1enw3_123.awsui_refresh_1xupv_1enw3_107 > ul > li > a:not(#\9) {
218
218
  align-items: start;
219
219
  column-gap: var(--space-s-o95p2n, 12px);
220
220
  cursor: pointer;
@@ -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-z6h7qi, 20px) 1fr;
226
226
  }
227
- .awsui_navigation_1xupv_4ecb6_123.awsui_refresh_1xupv_4ecb6_107 > ul > li > a > .awsui_circle_1xupv_4ecb6_201:not(#\9) {
227
+ .awsui_navigation_1xupv_1enw3_123.awsui_refresh_1xupv_1enw3_107 > ul > li > a > .awsui_circle_1xupv_1enw3_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_4ecb6_123.awsui_refresh_1xupv_4ecb6_107 > ul > li > a > .awsui_title_1xupv_4ecb6_209:not(#\9) {
235
+ .awsui_navigation_1xupv_1enw3_123.awsui_refresh_1xupv_1enw3_107 > ul > li > a > .awsui_title_1xupv_1enw3_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_4ecb6_123.awsui_refresh_1xupv_4ecb6_107 > ul > li > a:not(#\9):focus {
241
+ body[data-awsui-focus-visible=true] .awsui_navigation_1xupv_1enw3_123.awsui_refresh_1xupv_1enw3_107 > ul > li > a:not(#\9):focus {
242
242
  outline: thin dotted;
243
243
  outline: var(--border-link-focus-ring-outline-e033ba, 5px auto Highlight);
244
244
  outline-offset: 2px;
@@ -246,58 +246,58 @@ body[data-awsui-focus-visible=true] .awsui_navigation_1xupv_4ecb6_123.awsui_refr
246
246
  border-radius: var(--border-radius-control-default-focus-ring-uu8qi4, 2px);
247
247
  box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-3gfzjd, 0px) var(--color-border-item-focused-4clyb1, #0073bb);
248
248
  }
249
- .awsui_navigation_1xupv_4ecb6_123.awsui_refresh_1xupv_4ecb6_107 > ul > li:not(#\9):first-child > hr {
249
+ .awsui_navigation_1xupv_1enw3_123.awsui_refresh_1xupv_1enw3_107 > ul > li:not(#\9):first-child > hr {
250
250
  grid-row: 2/span 2;
251
251
  }
252
- .awsui_navigation_1xupv_4ecb6_123.awsui_refresh_1xupv_4ecb6_107 > ul > li:not(#\9):not(:first-child) > .awsui_number_1xupv_4ecb6_185 {
252
+ .awsui_navigation_1xupv_1enw3_123.awsui_refresh_1xupv_1enw3_107 > ul > li:not(#\9):not(:first-child) > .awsui_number_1xupv_1enw3_185 {
253
253
  margin-top: var(--space-scaled-xl-2yypb9, 24px);
254
254
  }
255
- .awsui_navigation_1xupv_4ecb6_123.awsui_refresh_1xupv_4ecb6_107 > ul > li:not(#\9):last-child > hr {
255
+ .awsui_navigation_1xupv_1enw3_123.awsui_refresh_1xupv_1enw3_107 > ul > li:not(#\9):last-child > hr {
256
256
  grid-row: 1;
257
257
  }
258
- .awsui_navigation_1xupv_4ecb6_123.awsui_refresh_1xupv_4ecb6_107 > ul > li:not(#\9):only-of-type > hr {
258
+ .awsui_navigation_1xupv_1enw3_123.awsui_refresh_1xupv_1enw3_107 > ul > li:not(#\9):only-of-type > hr {
259
259
  display: none;
260
260
  }
261
- .awsui_navigation_1xupv_4ecb6_123.awsui_refresh_1xupv_4ecb6_107 > ul > li:not(#\9):not(:first-child):not(:last-child) > hr {
261
+ .awsui_navigation_1xupv_1enw3_123.awsui_refresh_1xupv_1enw3_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_4ecb6_123.awsui_refresh_1xupv_4ecb6_107 > ul > li.awsui_active_1xupv_4ecb6_238 > a:not(#\9) {
264
+ .awsui_navigation_1xupv_1enw3_123.awsui_refresh_1xupv_1enw3_107 > ul > li.awsui_active_1xupv_1enw3_238 > a:not(#\9) {
265
265
  cursor: text;
266
266
  }
267
- .awsui_navigation_1xupv_4ecb6_123.awsui_refresh_1xupv_4ecb6_107 > ul > li.awsui_active_1xupv_4ecb6_238 > a > .awsui_circle_1xupv_4ecb6_201:not(#\9) {
267
+ .awsui_navigation_1xupv_1enw3_123.awsui_refresh_1xupv_1enw3_107 > ul > li.awsui_active_1xupv_1enw3_238 > a > .awsui_circle_1xupv_1enw3_201:not(#\9) {
268
268
  background-color: var(--color-background-control-checked-uprbe0, #0073bb);
269
269
  box-shadow: 0 0 0 3px var(--color-background-container-content-xlzim4, #ffffff), 0 0 0 5px var(--color-background-control-checked-uprbe0, #0073bb), 0 0 0 7px var(--color-background-container-content-xlzim4, #ffffff);
270
270
  }
271
- .awsui_navigation_1xupv_4ecb6_123.awsui_refresh_1xupv_4ecb6_107 > ul > li.awsui_active_1xupv_4ecb6_238 > a > .awsui_title_1xupv_4ecb6_209:not(#\9) {
271
+ .awsui_navigation_1xupv_1enw3_123.awsui_refresh_1xupv_1enw3_107 > ul > li.awsui_active_1xupv_1enw3_238 > a > .awsui_title_1xupv_1enw3_209:not(#\9) {
272
272
  color: var(--color-background-control-checked-uprbe0, #0073bb);
273
273
  font-weight: 700;
274
274
  }
275
- .awsui_navigation_1xupv_4ecb6_123.awsui_refresh_1xupv_4ecb6_107 > ul > li.awsui_disabled_1xupv_4ecb6_249 > a:not(#\9) {
275
+ .awsui_navigation_1xupv_1enw3_123.awsui_refresh_1xupv_1enw3_107 > ul > li.awsui_disabled_1xupv_1enw3_249 > a:not(#\9) {
276
276
  cursor: text;
277
277
  }
278
- .awsui_navigation_1xupv_4ecb6_123.awsui_refresh_1xupv_4ecb6_107 > ul > li.awsui_disabled_1xupv_4ecb6_249 > a > .awsui_circle_1xupv_4ecb6_201:not(#\9) {
278
+ .awsui_navigation_1xupv_1enw3_123.awsui_refresh_1xupv_1enw3_107 > ul > li.awsui_disabled_1xupv_1enw3_249 > a > .awsui_circle_1xupv_1enw3_201:not(#\9) {
279
279
  background-color: var(--color-background-container-content-xlzim4, #ffffff);
280
280
  box-shadow: 0 0 0 2px var(--color-text-interactive-disabled-48m1sz, #aab7b8), 0 0 0 4px var(--color-background-container-content-xlzim4, #ffffff);
281
281
  }
282
- .awsui_navigation_1xupv_4ecb6_123.awsui_refresh_1xupv_4ecb6_107 > ul > li.awsui_disabled_1xupv_4ecb6_249 > a > .awsui_title_1xupv_4ecb6_209:not(#\9) {
282
+ .awsui_navigation_1xupv_1enw3_123.awsui_refresh_1xupv_1enw3_107 > ul > li.awsui_disabled_1xupv_1enw3_249 > a > .awsui_title_1xupv_1enw3_209:not(#\9) {
283
283
  color: var(--color-text-status-inactive-npnnh8, #687078);
284
284
  }
285
- .awsui_navigation_1xupv_4ecb6_123.awsui_refresh_1xupv_4ecb6_107 > ul > li.awsui_enabled_1xupv_4ecb6_259 > a > .awsui_circle_1xupv_4ecb6_201:not(#\9) {
285
+ .awsui_navigation_1xupv_1enw3_123.awsui_refresh_1xupv_1enw3_107 > ul > li.awsui_enabled_1xupv_1enw3_259 > a > .awsui_circle_1xupv_1enw3_201:not(#\9) {
286
286
  background-color: var(--color-text-interactive-default-9x433a, #545b64);
287
287
  box-shadow: 0 0 0 2px var(--color-text-interactive-default-9x433a, #545b64), 0 0 0 4px var(--color-background-container-content-xlzim4, #ffffff);
288
288
  }
289
- .awsui_navigation_1xupv_4ecb6_123.awsui_refresh_1xupv_4ecb6_107 > ul > li.awsui_enabled_1xupv_4ecb6_259 > a > .awsui_title_1xupv_4ecb6_209:not(#\9) {
289
+ .awsui_navigation_1xupv_1enw3_123.awsui_refresh_1xupv_1enw3_107 > ul > li.awsui_enabled_1xupv_1enw3_259 > a > .awsui_title_1xupv_1enw3_209:not(#\9) {
290
290
  color: var(--color-text-interactive-default-9x433a, #545b64);
291
291
  }
292
- .awsui_navigation_1xupv_4ecb6_123.awsui_refresh_1xupv_4ecb6_107 > ul > li.awsui_enabled_1xupv_4ecb6_259 > a:not(#\9):hover > .awsui_circle_1xupv_4ecb6_201 {
292
+ .awsui_navigation_1xupv_1enw3_123.awsui_refresh_1xupv_1enw3_107 > ul > li.awsui_enabled_1xupv_1enw3_259 > a:not(#\9):hover > .awsui_circle_1xupv_1enw3_201 {
293
293
  background-color: var(--color-background-control-checked-uprbe0, #0073bb);
294
294
  box-shadow: 0 0 0 2px var(--color-background-control-checked-uprbe0, #0073bb), 0 0 0 4px var(--color-background-container-content-xlzim4, #ffffff);
295
295
  }
296
- .awsui_navigation_1xupv_4ecb6_123.awsui_refresh_1xupv_4ecb6_107 > ul > li.awsui_enabled_1xupv_4ecb6_259 > a:not(#\9):hover > .awsui_title_1xupv_4ecb6_209 {
296
+ .awsui_navigation_1xupv_1enw3_123.awsui_refresh_1xupv_1enw3_107 > ul > li.awsui_enabled_1xupv_1enw3_259 > a:not(#\9):hover > .awsui_title_1xupv_1enw3_209 {
297
297
  color: var(--color-background-control-checked-uprbe0, #0073bb);
298
298
  }
299
299
 
300
- .awsui_navigation_1xupv_4ecb6_123:not(#\9):not(.awsui_refresh_1xupv_4ecb6_107) {
300
+ .awsui_navigation_1xupv_1enw3_123:not(#\9):not(.awsui_refresh_1xupv_1enw3_107) {
301
301
  color: var(--color-text-disabled-uznqkj, #aab7b8);
302
302
  display: inline-block;
303
303
  margin-right: calc(2 * var(--space-xxxl-ecj2b1, 40px));
@@ -305,89 +305,89 @@ body[data-awsui-focus-visible=true] .awsui_navigation_1xupv_4ecb6_123.awsui_refr
305
305
  padding-top: var(--space-xxs-xx079q, 4px);
306
306
  width: 200px;
307
307
  }
308
- .awsui_navigation_1xupv_4ecb6_123:not(#\9):not(.awsui_refresh_1xupv_4ecb6_107) > ul {
308
+ .awsui_navigation_1xupv_1enw3_123:not(#\9):not(.awsui_refresh_1xupv_1enw3_107) > ul {
309
309
  list-style: none;
310
310
  padding: 0;
311
311
  margin: 0;
312
312
  }
313
- .awsui_navigation_1xupv_4ecb6_123:not(#\9):not(.awsui_refresh_1xupv_4ecb6_107) > ul > li {
313
+ .awsui_navigation_1xupv_1enw3_123:not(#\9):not(.awsui_refresh_1xupv_1enw3_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-5caa5e, 16px);
318
318
  padding-top: 0;
319
319
  }
320
- .awsui_navigation_1xupv_4ecb6_123:not(#\9):not(.awsui_refresh_1xupv_4ecb6_107) > ul > li:not(:first-child) {
320
+ .awsui_navigation_1xupv_1enw3_123:not(#\9):not(.awsui_refresh_1xupv_1enw3_107) > ul > li:not(:first-child) {
321
321
  margin-top: var(--space-scaled-m-5caa5e, 16px);
322
322
  }
323
- .awsui_navigation_1xupv_4ecb6_123:not(#\9):not(.awsui_refresh_1xupv_4ecb6_107) > ul > li:not(:last-child) {
323
+ .awsui_navigation_1xupv_1enw3_123:not(#\9):not(.awsui_refresh_1xupv_1enw3_107) > ul > li:not(:last-child) {
324
324
  border-bottom: var(--border-divider-list-width-iu80dg, 1px) solid var(--color-border-layout-rmnayj, #d5dbdb);
325
325
  }
326
326
 
327
- .awsui_form_1xupv_4ecb6_301:not(#\9):not(.awsui_refresh_1xupv_4ecb6_107) {
327
+ .awsui_form_1xupv_1enw3_301:not(#\9):not(.awsui_refresh_1xupv_1enw3_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_4ecb6_301:not(#\9):not(.awsui_refresh_1xupv_4ecb6_107) > .awsui_form-header_1xupv_4ecb6_307 {
333
+ .awsui_form_1xupv_1enw3_301:not(#\9):not(.awsui_refresh_1xupv_1enw3_107) > .awsui_form-header_1xupv_1enw3_307 {
334
334
  position: relative;
335
335
  margin-bottom: var(--space-scaled-m-5caa5e, 16px);
336
336
  }
337
337
 
338
- .awsui_form_1xupv_4ecb6_301.awsui_refresh_1xupv_4ecb6_107:not(#\9) {
338
+ .awsui_form_1xupv_1enw3_301.awsui_refresh_1xupv_1enw3_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_4ecb6_301.awsui_refresh_1xupv_4ecb6_107 > .awsui_background_1xupv_4ecb6_318:not(#\9) {
344
+ .awsui_form_1xupv_1enw3_301.awsui_refresh_1xupv_1enw3_107 > .awsui_background_1xupv_1enw3_318:not(#\9) {
345
345
  background-color: var(--color-background-layout-main-nd5gs3, #f2f3f3);
346
346
  grid-column: 1/span 2;
347
347
  grid-row: 1;
348
348
  color: var(--color-text-body-default-4colr5, #16191f);
349
349
  }
350
- .awsui_form_1xupv_4ecb6_301.awsui_refresh_1xupv_4ecb6_107 > .awsui_form-header_1xupv_4ecb6_307:not(#\9) {
350
+ .awsui_form_1xupv_1enw3_301.awsui_refresh_1xupv_1enw3_107 > .awsui_form-header_1xupv_1enw3_307:not(#\9) {
351
351
  background-color: var(--color-background-layout-main-nd5gs3, #f2f3f3);
352
352
  grid-column: 2;
353
353
  grid-row: 1;
354
354
  color: var(--color-text-body-default-4colr5, #16191f);
355
355
  }
356
- .awsui_form_1xupv_4ecb6_301.awsui_refresh_1xupv_4ecb6_107 > .awsui_form-header_1xupv_4ecb6_307 > .awsui_form-header-content_1xupv_4ecb6_330:not(#\9) {
356
+ .awsui_form_1xupv_1enw3_301.awsui_refresh_1xupv_1enw3_107 > .awsui_form-header_1xupv_1enw3_307 > .awsui_form-header-content_1xupv_1enw3_330:not(#\9) {
357
357
  padding-top: var(--space-scaled-m-5caa5e, 16px);
358
358
  padding-bottom: var(--space-scaled-m-5caa5e, 16px);
359
359
  }
360
- .awsui_form_1xupv_4ecb6_301.awsui_refresh_1xupv_4ecb6_107 > .awsui_form-component_1xupv_4ecb6_334:not(#\9) {
360
+ .awsui_form_1xupv_1enw3_301.awsui_refresh_1xupv_1enw3_107 > .awsui_form-component_1xupv_1enw3_334:not(#\9) {
361
361
  grid-column: 2;
362
362
  grid-row: 2;
363
363
  }
364
- .awsui_form_1xupv_4ecb6_301.awsui_refresh_1xupv_4ecb6_107.awsui_small-container_1xupv_4ecb6_114 > .awsui_form-header_1xupv_4ecb6_307:not(#\9) {
364
+ .awsui_form_1xupv_1enw3_301.awsui_refresh_1xupv_1enw3_107.awsui_small-container_1xupv_1enw3_114 > .awsui_form-header_1xupv_1enw3_307:not(#\9) {
365
365
  grid-column: 1/span 2;
366
366
  }
367
- .awsui_form_1xupv_4ecb6_301.awsui_refresh_1xupv_4ecb6_107.awsui_small-container_1xupv_4ecb6_114 > .awsui_form-header_1xupv_4ecb6_307 > .awsui_form-header-content_1xupv_4ecb6_330:not(#\9) {
367
+ .awsui_form_1xupv_1enw3_301.awsui_refresh_1xupv_1enw3_107.awsui_small-container_1xupv_1enw3_114 > .awsui_form-header_1xupv_1enw3_307 > .awsui_form-header-content_1xupv_1enw3_330:not(#\9) {
368
368
  padding-top: 0;
369
369
  }
370
- .awsui_form_1xupv_4ecb6_301.awsui_refresh_1xupv_4ecb6_107.awsui_small-container_1xupv_4ecb6_114 > .awsui_form-component_1xupv_4ecb6_334:not(#\9) {
370
+ .awsui_form_1xupv_1enw3_301.awsui_refresh_1xupv_1enw3_107.awsui_small-container_1xupv_1enw3_114 > .awsui_form-component_1xupv_1enw3_334:not(#\9) {
371
371
  grid-column: 1/span 2;
372
372
  }
373
373
 
374
- .awsui_navigation_1xupv_4ecb6_123.awsui_hidden_1xupv_4ecb6_348:not(#\9) {
374
+ .awsui_navigation_1xupv_1enw3_123.awsui_hidden_1xupv_1enw3_348:not(#\9) {
375
375
  display: none;
376
376
  }
377
377
 
378
- .awsui_collapsed-steps_1xupv_4ecb6_352:not(#\9) {
378
+ .awsui_collapsed-steps_1xupv_1enw3_352:not(#\9) {
379
379
  color: var(--color-text-heading-secondary-2r0p61, #545b64);
380
380
  font-weight: 700;
381
381
  padding-top: var(--space-scaled-xxs-gmgwxk, 4px);
382
382
  }
383
- .awsui_collapsed-steps-hidden_1xupv_4ecb6_357:not(#\9) {
383
+ .awsui_collapsed-steps-hidden_1xupv_1enw3_357:not(#\9) {
384
384
  display: none;
385
385
  }
386
386
 
387
- .awsui_form-header-component-wrapper_1xupv_4ecb6_361:not(#\9) {
387
+ .awsui_form-header-component-wrapper_1xupv_1enw3_361:not(#\9) {
388
388
  outline: none;
389
389
  }
390
- body[data-awsui-focus-visible=true] .awsui_form-header-component-wrapper_1xupv_4ecb6_361:not(#\9):focus {
390
+ body[data-awsui-focus-visible=true] .awsui_form-header-component-wrapper_1xupv_1enw3_361:not(#\9):focus {
391
391
  outline: thin dotted;
392
392
  outline: var(--border-link-focus-ring-outline-e033ba, 5px auto Highlight);
393
393
  outline-offset: 2px;
@@ -396,30 +396,30 @@ body[data-awsui-focus-visible=true] .awsui_form-header-component-wrapper_1xupv_4
396
396
  box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-3gfzjd, 0px) var(--color-border-item-focused-4clyb1, #0073bb);
397
397
  }
398
398
 
399
- .awsui_form-header-component_1xupv_4ecb6_361:not(#\9),
400
- .awsui_navigation-link_1xupv_4ecb6_374:not(#\9),
401
- .awsui_navigation-link-item_1xupv_4ecb6_375:not(#\9),
402
- .awsui_navigation-link-label_1xupv_4ecb6_376:not(#\9) {
399
+ .awsui_form-header-component_1xupv_1enw3_361:not(#\9),
400
+ .awsui_navigation-link_1xupv_1enw3_374:not(#\9),
401
+ .awsui_navigation-link-item_1xupv_1enw3_375:not(#\9),
402
+ .awsui_navigation-link-label_1xupv_1enw3_376:not(#\9) {
403
403
  /* used in test-utils */
404
404
  }
405
405
 
406
- .awsui_navigation-link-active_1xupv_4ecb6_380:not(#\9) {
406
+ .awsui_navigation-link-active_1xupv_1enw3_380:not(#\9) {
407
407
  font-weight: 700;
408
408
  color: var(--color-text-body-default-4colr5, #16191f);
409
409
  }
410
410
 
411
- .awsui_navigation-link-disabled_1xupv_4ecb6_385:not(#\9) {
411
+ .awsui_navigation-link-disabled_1xupv_1enw3_385:not(#\9) {
412
412
  color: var(--color-text-status-inactive-npnnh8, #687078);
413
413
  }
414
414
 
415
- .awsui_cancel-button_1xupv_4ecb6_389:not(#\9),
416
- .awsui_previous-button_1xupv_4ecb6_390:not(#\9),
417
- .awsui_primary-button_1xupv_4ecb6_391:not(#\9),
418
- .awsui_skip-to-button_1xupv_4ecb6_392:not(#\9) {
415
+ .awsui_cancel-button_1xupv_1enw3_389:not(#\9),
416
+ .awsui_previous-button_1xupv_1enw3_390:not(#\9),
417
+ .awsui_primary-button_1xupv_1enw3_391:not(#\9),
418
+ .awsui_skip-to-button_1xupv_1enw3_392:not(#\9) {
419
419
  /* used in test-utils */
420
420
  }
421
421
 
422
- .awsui_action-buttons_1xupv_4ecb6_396:not(#\9) {
422
+ .awsui_action-buttons_1xupv_1enw3_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_4ecb6_94",
6
- "wizard": "awsui_wizard_1xupv_4ecb6_107",
7
- "refresh": "awsui_refresh_1xupv_4ecb6_107",
8
- "small-container": "awsui_small-container_1xupv_4ecb6_114",
9
- "navigation": "awsui_navigation_1xupv_4ecb6_123",
10
- "number": "awsui_number_1xupv_4ecb6_185",
11
- "circle": "awsui_circle_1xupv_4ecb6_201",
12
- "title": "awsui_title_1xupv_4ecb6_209",
13
- "active": "awsui_active_1xupv_4ecb6_238",
14
- "disabled": "awsui_disabled_1xupv_4ecb6_249",
15
- "enabled": "awsui_enabled_1xupv_4ecb6_259",
16
- "form": "awsui_form_1xupv_4ecb6_301",
17
- "form-header": "awsui_form-header_1xupv_4ecb6_307",
18
- "background": "awsui_background_1xupv_4ecb6_318",
19
- "form-header-content": "awsui_form-header-content_1xupv_4ecb6_330",
20
- "form-component": "awsui_form-component_1xupv_4ecb6_334",
21
- "hidden": "awsui_hidden_1xupv_4ecb6_348",
22
- "collapsed-steps": "awsui_collapsed-steps_1xupv_4ecb6_352",
23
- "collapsed-steps-hidden": "awsui_collapsed-steps-hidden_1xupv_4ecb6_357",
24
- "form-header-component-wrapper": "awsui_form-header-component-wrapper_1xupv_4ecb6_361",
25
- "form-header-component": "awsui_form-header-component_1xupv_4ecb6_361",
26
- "navigation-link": "awsui_navigation-link_1xupv_4ecb6_374",
27
- "navigation-link-item": "awsui_navigation-link-item_1xupv_4ecb6_375",
28
- "navigation-link-label": "awsui_navigation-link-label_1xupv_4ecb6_376",
29
- "navigation-link-active": "awsui_navigation-link-active_1xupv_4ecb6_380",
30
- "navigation-link-disabled": "awsui_navigation-link-disabled_1xupv_4ecb6_385",
31
- "cancel-button": "awsui_cancel-button_1xupv_4ecb6_389",
32
- "previous-button": "awsui_previous-button_1xupv_4ecb6_390",
33
- "primary-button": "awsui_primary-button_1xupv_4ecb6_391",
34
- "skip-to-button": "awsui_skip-to-button_1xupv_4ecb6_392",
35
- "action-buttons": "awsui_action-buttons_1xupv_4ecb6_396"
5
+ "root": "awsui_root_1xupv_1enw3_94",
6
+ "wizard": "awsui_wizard_1xupv_1enw3_107",
7
+ "refresh": "awsui_refresh_1xupv_1enw3_107",
8
+ "small-container": "awsui_small-container_1xupv_1enw3_114",
9
+ "navigation": "awsui_navigation_1xupv_1enw3_123",
10
+ "number": "awsui_number_1xupv_1enw3_185",
11
+ "circle": "awsui_circle_1xupv_1enw3_201",
12
+ "title": "awsui_title_1xupv_1enw3_209",
13
+ "active": "awsui_active_1xupv_1enw3_238",
14
+ "disabled": "awsui_disabled_1xupv_1enw3_249",
15
+ "enabled": "awsui_enabled_1xupv_1enw3_259",
16
+ "form": "awsui_form_1xupv_1enw3_301",
17
+ "form-header": "awsui_form-header_1xupv_1enw3_307",
18
+ "background": "awsui_background_1xupv_1enw3_318",
19
+ "form-header-content": "awsui_form-header-content_1xupv_1enw3_330",
20
+ "form-component": "awsui_form-component_1xupv_1enw3_334",
21
+ "hidden": "awsui_hidden_1xupv_1enw3_348",
22
+ "collapsed-steps": "awsui_collapsed-steps_1xupv_1enw3_352",
23
+ "collapsed-steps-hidden": "awsui_collapsed-steps-hidden_1xupv_1enw3_357",
24
+ "form-header-component-wrapper": "awsui_form-header-component-wrapper_1xupv_1enw3_361",
25
+ "form-header-component": "awsui_form-header-component_1xupv_1enw3_361",
26
+ "navigation-link": "awsui_navigation-link_1xupv_1enw3_374",
27
+ "navigation-link-item": "awsui_navigation-link-item_1xupv_1enw3_375",
28
+ "navigation-link-label": "awsui_navigation-link-label_1xupv_1enw3_376",
29
+ "navigation-link-active": "awsui_navigation-link-active_1xupv_1enw3_380",
30
+ "navigation-link-disabled": "awsui_navigation-link-disabled_1xupv_1enw3_385",
31
+ "cancel-button": "awsui_cancel-button_1xupv_1enw3_389",
32
+ "previous-button": "awsui_previous-button_1xupv_1enw3_390",
33
+ "primary-button": "awsui_primary-button_1xupv_1enw3_391",
34
+ "skip-to-button": "awsui_skip-to-button_1xupv_1enw3_392",
35
+ "action-buttons": "awsui_action-buttons_1xupv_1enw3_396"
36
36
  };
37
37
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cloudscape-design/components-themeable",
3
- "version": "3.0.345",
3
+ "version": "3.0.346",
4
4
  "files": [
5
5
  "lib",
6
6
  "package.json",
@@ -1,10 +0,0 @@
1
- export interface ContainerQueryEntry {
2
- target: Element;
3
- contentBoxWidth: number;
4
- contentBoxHeight: number;
5
- borderBoxWidth: number;
6
- borderBoxHeight: number;
7
- width: number;
8
- height: number;
9
- }
10
- //# sourceMappingURL=interfaces.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["internal/hooks/container-queries/interfaces.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,OAAO,CAAC;IAChB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB"}
@@ -1,4 +0,0 @@
1
- // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
- // SPDX-License-Identifier: Apache-2.0
3
- export {};
4
- //# sourceMappingURL=interfaces.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["internal/hooks/container-queries/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n// Simplified version of ResizeObserverEntry\nexport interface ContainerQueryEntry {\n target: Element;\n contentBoxWidth: number;\n contentBoxHeight: number;\n borderBoxWidth: number;\n borderBoxHeight: number;\n width: number; // Same as contentWidth, added for consistency with old API\n height: number; // Same as contentHeight, added for consistency with old API\n}\n"]}
@@ -1,22 +0,0 @@
1
- import React from 'react';
2
- import { ContainerQueryEntry } from './interfaces';
3
- /**
4
- * Attaches resize-observer to the referenced element and keeps last observation in state.
5
- * The hook allows to limit the amount of re-renders to only when the observed value changes.
6
- *
7
- * Examples:
8
- * // Switching display mode under a given condition (only re-renders when mode changes):
9
- * const [smallMode, ref] = useContainerQuery(entry => entry.contentBoxHeight <= smallModeHeight, [smallModeHeight]);
10
- *
11
- * // Obtain observer entity (re-renders with each observation):
12
- * const [entry, ref] = useContainerQuery(entry => entry);
13
- *
14
- * // Using prevState to avoid unnecessary re-renders:
15
- * const [value, ref] = useContainerQuery((entry, prevValue) => shouldUpdate(entry) ? getValue(entry) : prevValue);
16
- *
17
- * @param mapFn Function to convert ContainerQueryEntry to a custom type S
18
- * @param deps Dependency list to indicate when the mapFn changes
19
- * @returns A tuple of observation value and a reference to be attached to the target element.
20
- */
21
- export declare function useContainerQuery<S>(mapFn: (entry: ContainerQueryEntry, prev: null | S) => S, deps?: React.DependencyList): [null | S, React.Ref<any>];
22
- //# sourceMappingURL=use-container-query.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"use-container-query.d.ts","sourceRoot":"lib/default/","sources":["internal/hooks/container-queries/use-container-query.ts"],"names":[],"mappings":"AAEA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAGnD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EACjC,KAAK,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,IAAI,EAAE,IAAI,GAAG,CAAC,KAAK,CAAC,EACxD,IAAI,GAAE,KAAK,CAAC,cAAmB,GAC9B,CAAC,IAAI,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAW5B"}
@@ -1,32 +0,0 @@
1
- // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
- // SPDX-License-Identifier: Apache-2.0
3
- import { useRef, useState, useCallback } from 'react';
4
- import { useResizeObserver } from './use-resize-observer';
5
- /**
6
- * Attaches resize-observer to the referenced element and keeps last observation in state.
7
- * The hook allows to limit the amount of re-renders to only when the observed value changes.
8
- *
9
- * Examples:
10
- * // Switching display mode under a given condition (only re-renders when mode changes):
11
- * const [smallMode, ref] = useContainerQuery(entry => entry.contentBoxHeight <= smallModeHeight, [smallModeHeight]);
12
- *
13
- * // Obtain observer entity (re-renders with each observation):
14
- * const [entry, ref] = useContainerQuery(entry => entry);
15
- *
16
- * // Using prevState to avoid unnecessary re-renders:
17
- * const [value, ref] = useContainerQuery((entry, prevValue) => shouldUpdate(entry) ? getValue(entry) : prevValue);
18
- *
19
- * @param mapFn Function to convert ContainerQueryEntry to a custom type S
20
- * @param deps Dependency list to indicate when the mapFn changes
21
- * @returns A tuple of observation value and a reference to be attached to the target element.
22
- */
23
- export function useContainerQuery(mapFn, deps = []) {
24
- const elementRef = useRef(null);
25
- const [state, setState] = useState(null);
26
- // Update getElement when deps change to trigger new observation.
27
- // eslint-disable-next-line react-hooks/exhaustive-deps
28
- const getElement = useCallback(() => elementRef.current, deps);
29
- useResizeObserver(getElement, entry => setState(prevState => mapFn(entry, prevState)));
30
- return [state, elementRef];
31
- }
32
- //# sourceMappingURL=use-container-query.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"use-container-query.js","sourceRoot":"lib/default/","sources":["internal/hooks/container-queries/use-container-query.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,iBAAiB,CAC/B,KAAwD,EACxD,OAA6B,EAAE;IAE/B,MAAM,UAAU,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAW,IAAI,CAAC,CAAC;IAEnD,iEAAiE;IACjE,uDAAuD;IACvD,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IAE/D,iBAAiB,CAAC,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IAEvF,OAAO,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;AAC7B,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef, useState, useCallback } from 'react';\nimport { ContainerQueryEntry } from './interfaces';\nimport { useResizeObserver } from './use-resize-observer';\n\n/**\n * Attaches resize-observer to the referenced element and keeps last observation in state.\n * The hook allows to limit the amount of re-renders to only when the observed value changes.\n *\n * Examples:\n * // Switching display mode under a given condition (only re-renders when mode changes):\n * const [smallMode, ref] = useContainerQuery(entry => entry.contentBoxHeight <= smallModeHeight, [smallModeHeight]);\n *\n * // Obtain observer entity (re-renders with each observation):\n * const [entry, ref] = useContainerQuery(entry => entry);\n *\n * // Using prevState to avoid unnecessary re-renders:\n * const [value, ref] = useContainerQuery((entry, prevValue) => shouldUpdate(entry) ? getValue(entry) : prevValue);\n *\n * @param mapFn Function to convert ContainerQueryEntry to a custom type S\n * @param deps Dependency list to indicate when the mapFn changes\n * @returns A tuple of observation value and a reference to be attached to the target element.\n */\nexport function useContainerQuery<S>(\n mapFn: (entry: ContainerQueryEntry, prev: null | S) => S,\n deps: React.DependencyList = []\n): [null | S, React.Ref<any>] {\n const elementRef = useRef<HTMLElement>(null);\n const [state, setState] = useState<S | null>(null);\n\n // Update getElement when deps change to trigger new observation.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const getElement = useCallback(() => elementRef.current, deps);\n\n useResizeObserver(getElement, entry => setState(prevState => mapFn(entry, prevState)));\n\n return [state, elementRef];\n}\n"]}