@heymantle/litho 0.0.15 → 0.0.16

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 (371) hide show
  1. package/AI_COMPONENTS_GUIDE.md +28 -15
  2. package/AI_INTEGRATION_GUIDE.md +3 -3
  3. package/AI_PATTERNS_GUIDE.md +59 -25
  4. package/COMPONENT_QUICK_REFERENCE.md +3 -3
  5. package/dist/cjs/components/ActionList.js +33 -25
  6. package/dist/cjs/components/AnnouncementBar.js +115 -18
  7. package/dist/cjs/components/AnnouncementCard.js +269 -0
  8. package/dist/cjs/components/AppProvider.js +15 -2
  9. package/dist/cjs/components/Autocomplete.js +58 -36
  10. package/dist/cjs/components/Badge.js +28 -14
  11. package/dist/cjs/components/Banner.js +37 -27
  12. package/dist/cjs/components/Box.js +50 -38
  13. package/dist/cjs/components/Button.js +338 -109
  14. package/dist/cjs/components/ButtonGroup.js +27 -14
  15. package/dist/cjs/components/Card.js +311 -143
  16. package/dist/cjs/components/Checkbox.js +55 -47
  17. package/dist/cjs/components/CheckboxCard.js +222 -0
  18. package/dist/cjs/components/CheckboxCardGroup.js +384 -0
  19. package/dist/cjs/components/ChoiceList.js +21 -11
  20. package/dist/cjs/components/Code.js +22 -8
  21. package/dist/cjs/components/Collapsible.js +24 -11
  22. package/dist/cjs/components/ColorField.js +163 -38
  23. package/dist/cjs/components/ContextualSaveBar.js +13 -6
  24. package/dist/cjs/components/DatePicker.js +48 -37
  25. package/dist/cjs/components/Disclosure.js +35 -22
  26. package/dist/cjs/components/Divider.js +82 -18
  27. package/dist/cjs/components/DropZone.js +111 -37
  28. package/dist/cjs/components/EmptyState.js +18 -6
  29. package/dist/cjs/components/Filters.js +84 -36
  30. package/dist/cjs/components/FooterHelp.js +14 -4
  31. package/dist/cjs/components/Form.js +13 -2
  32. package/dist/cjs/components/Frame.js +57 -22
  33. package/dist/cjs/components/FrameSaveBar.js +37 -6
  34. package/dist/cjs/components/Grid.js +31 -15
  35. package/dist/cjs/components/HorizontalStack.js +38 -25
  36. package/dist/cjs/components/Icon.js +683 -61
  37. package/dist/cjs/components/Image.js +35 -22
  38. package/dist/cjs/components/InlineError.js +19 -10
  39. package/dist/cjs/components/Label.js +21 -12
  40. package/dist/cjs/components/Layout.js +33 -24
  41. package/dist/cjs/components/LayoutSection.js +84 -22
  42. package/dist/cjs/components/Link.js +35 -22
  43. package/dist/cjs/components/List.js +28 -12
  44. package/dist/cjs/components/Listbox.js +53 -31
  45. package/dist/cjs/components/Loading.js +14 -2
  46. package/dist/cjs/components/Modal.js +22 -40
  47. package/dist/cjs/components/Navigation.js +107 -36
  48. package/dist/cjs/components/Page.js +44 -31
  49. package/dist/cjs/components/Pagination.js +20 -5
  50. package/dist/cjs/components/Pane.js +67 -4
  51. package/dist/cjs/components/Popover.js +37 -21
  52. package/dist/cjs/components/PopoverManager.js +14 -1
  53. package/dist/cjs/components/ProgressBar.js +28 -15
  54. package/dist/cjs/components/RadioButton.js +32 -24
  55. package/dist/cjs/components/RadioButtonCard.js +92 -67
  56. package/dist/cjs/components/RadioButtonCardGroup.js +379 -0
  57. package/dist/cjs/components/RangeSlider.js +34 -26
  58. package/dist/cjs/components/ResourceList.js +28 -14
  59. package/dist/cjs/components/Select.js +38 -26
  60. package/dist/cjs/components/SkeletonText.js +33 -18
  61. package/dist/cjs/components/Spinner.js +24 -12
  62. package/dist/cjs/components/Stack.js +131 -71
  63. package/dist/cjs/components/TabNavigation.js +27 -1
  64. package/dist/cjs/components/Table.js +58 -18
  65. package/dist/cjs/components/Tabs.js +52 -23
  66. package/dist/cjs/components/Tag.js +37 -16
  67. package/dist/cjs/components/Text.js +32 -18
  68. package/dist/cjs/components/TextField.js +119 -69
  69. package/dist/cjs/components/Thumbnail.js +25 -11
  70. package/dist/cjs/components/TimePicker.js +22 -1
  71. package/dist/cjs/components/Tip.js +140 -25
  72. package/dist/cjs/components/ToastNotification.js +107 -34
  73. package/dist/cjs/components/ToastProvider.js +13 -3
  74. package/dist/cjs/components/Tooltip.js +50 -41
  75. package/dist/cjs/components/TopBar.js +83 -9
  76. package/dist/cjs/components/VerticalStack.js +31 -16
  77. package/dist/cjs/index.js +24 -0
  78. package/dist/cjs/stories/Autocomplete.stories.js +10 -10
  79. package/dist/cjs/stories/Checkbox.stories.js +6 -8
  80. package/dist/cjs/stories/CheckboxCardGroup.stories.js +459 -0
  81. package/dist/cjs/stories/Collapsible.stories.js +11 -11
  82. package/dist/cjs/stories/ColorField.stories.js +2 -3
  83. package/dist/cjs/stories/ComplexExamples.stories.js +48 -77
  84. package/dist/cjs/stories/ContextualSaveBar.stories.js +1 -1
  85. package/dist/cjs/stories/Divider.stories.js +15 -16
  86. package/dist/cjs/stories/DropZone.stories.js +3 -3
  87. package/dist/cjs/stories/FooterHelp.stories.js +3 -4
  88. package/dist/cjs/stories/Form.stories.js +2 -4
  89. package/dist/cjs/stories/Grid.stories.js +24 -33
  90. package/dist/cjs/stories/Icon.stories.js +22 -23
  91. package/dist/cjs/stories/Image.stories.js +12 -15
  92. package/dist/cjs/stories/InlineError.stories.js +0 -1
  93. package/dist/cjs/stories/Layout.stories.js +96 -2
  94. package/dist/cjs/stories/LayoutSection.stories.js +13 -18
  95. package/dist/cjs/stories/List.stories.js +24 -28
  96. package/dist/cjs/stories/Listbox.stories.js +2 -2
  97. package/dist/cjs/stories/Loading.stories.js +21 -25
  98. package/dist/cjs/stories/Modal.stories.js +0 -1
  99. package/dist/cjs/stories/Pagination.stories.js +4 -4
  100. package/dist/cjs/stories/Pane.stories.js +10 -18
  101. package/dist/cjs/stories/Popover.stories.js +7 -7
  102. package/dist/cjs/stories/PopoverManager.stories.js +9 -9
  103. package/dist/cjs/stories/ProgressBar.stories.js +8 -8
  104. package/dist/cjs/stories/RadioButton.stories.js +2 -2
  105. package/dist/cjs/stories/RadioButtonCard.stories.js +2 -2
  106. package/dist/cjs/stories/RadioButtonCardGroup.stories.js +502 -0
  107. package/dist/cjs/stories/RangeSlider.stories.js +1 -3
  108. package/dist/cjs/stories/ResourceList.stories.js +13 -13
  109. package/dist/cjs/stories/Spinner.stories.js +9 -9
  110. package/dist/cjs/stories/Stack.stories.js +233 -51
  111. package/dist/cjs/stories/Tabs.stories.js +2 -2
  112. package/dist/cjs/stories/Tag.stories.js +1 -1
  113. package/dist/cjs/stories/Thumbnail.stories.js +17 -18
  114. package/dist/cjs/stories/TimePicker.stories.js +0 -5
  115. package/dist/cjs/stories/Tip.stories.js +1 -1
  116. package/dist/esm/components/ActionList.js +33 -25
  117. package/dist/esm/components/AnnouncementBar.js +115 -18
  118. package/dist/esm/components/AnnouncementCard.js +254 -0
  119. package/dist/esm/components/AppProvider.js +15 -2
  120. package/dist/esm/components/Autocomplete.js +58 -36
  121. package/dist/esm/components/Badge.js +28 -14
  122. package/dist/esm/components/Banner.js +37 -27
  123. package/dist/esm/components/Box.js +50 -38
  124. package/dist/esm/components/Button.js +338 -109
  125. package/dist/esm/components/ButtonGroup.js +27 -14
  126. package/dist/esm/components/Card.js +300 -140
  127. package/dist/esm/components/Checkbox.js +55 -47
  128. package/dist/esm/components/CheckboxCard.js +207 -0
  129. package/dist/esm/components/CheckboxCardGroup.js +370 -0
  130. package/dist/esm/components/ChoiceList.js +21 -11
  131. package/dist/esm/components/Code.js +22 -8
  132. package/dist/esm/components/Collapsible.js +24 -11
  133. package/dist/esm/components/ColorField.js +165 -40
  134. package/dist/esm/components/ContextualSaveBar.js +13 -6
  135. package/dist/esm/components/DatePicker.js +48 -37
  136. package/dist/esm/components/Disclosure.js +35 -22
  137. package/dist/esm/components/Divider.js +78 -20
  138. package/dist/esm/components/DropZone.js +111 -37
  139. package/dist/esm/components/EmptyState.js +18 -6
  140. package/dist/esm/components/Filters.js +84 -36
  141. package/dist/esm/components/FooterHelp.js +14 -4
  142. package/dist/esm/components/Form.js +13 -2
  143. package/dist/esm/components/Frame.js +57 -22
  144. package/dist/esm/components/FrameSaveBar.js +37 -6
  145. package/dist/esm/components/Grid.js +31 -15
  146. package/dist/esm/components/HorizontalStack.js +38 -25
  147. package/dist/esm/components/Icon.js +681 -62
  148. package/dist/esm/components/Image.js +35 -22
  149. package/dist/esm/components/InlineError.js +19 -10
  150. package/dist/esm/components/Label.js +21 -12
  151. package/dist/esm/components/Layout.js +58 -25
  152. package/dist/esm/components/LayoutSection.js +84 -22
  153. package/dist/esm/components/Link.js +35 -22
  154. package/dist/esm/components/List.js +28 -12
  155. package/dist/esm/components/Listbox.js +53 -31
  156. package/dist/esm/components/Loading.js +14 -2
  157. package/dist/esm/components/Modal.js +69 -41
  158. package/dist/esm/components/Navigation.js +107 -36
  159. package/dist/esm/components/Page.js +44 -31
  160. package/dist/esm/components/Pagination.js +20 -5
  161. package/dist/esm/components/Pane.js +67 -4
  162. package/dist/esm/components/Popover.js +37 -21
  163. package/dist/esm/components/PopoverManager.js +14 -1
  164. package/dist/esm/components/ProgressBar.js +28 -15
  165. package/dist/esm/components/RadioButton.js +32 -24
  166. package/dist/esm/components/RadioButtonCard.js +92 -67
  167. package/dist/esm/components/RadioButtonCardGroup.js +364 -0
  168. package/dist/esm/components/RangeSlider.js +34 -26
  169. package/dist/esm/components/ResourceList.js +28 -14
  170. package/dist/esm/components/Select.js +38 -26
  171. package/dist/esm/components/SkeletonText.js +33 -18
  172. package/dist/esm/components/Spinner.js +24 -12
  173. package/dist/esm/components/Stack.js +131 -71
  174. package/dist/esm/components/TabNavigation.js +27 -1
  175. package/dist/esm/components/Table.js +58 -18
  176. package/dist/esm/components/Tabs.js +52 -23
  177. package/dist/esm/components/Tag.js +37 -16
  178. package/dist/esm/components/Text.js +32 -18
  179. package/dist/esm/components/TextField.js +119 -69
  180. package/dist/esm/components/Thumbnail.js +25 -11
  181. package/dist/esm/components/TimePicker.js +22 -1
  182. package/dist/esm/components/Tip.js +140 -25
  183. package/dist/esm/components/ToastNotification.js +107 -34
  184. package/dist/esm/components/ToastProvider.js +13 -3
  185. package/dist/esm/components/Tooltip.js +50 -41
  186. package/dist/esm/components/TopBar.js +83 -9
  187. package/dist/esm/components/VerticalStack.js +31 -16
  188. package/dist/esm/index.js +6 -0
  189. package/dist/esm/stories/Autocomplete.stories.js +10 -10
  190. package/dist/esm/stories/Checkbox.stories.js +6 -8
  191. package/dist/esm/stories/CheckboxCardGroup.stories.js +421 -0
  192. package/dist/esm/stories/Collapsible.stories.js +11 -11
  193. package/dist/esm/stories/ColorField.stories.js +2 -3
  194. package/dist/esm/stories/ComplexExamples.stories.js +48 -77
  195. package/dist/esm/stories/ContextualSaveBar.stories.js +1 -1
  196. package/dist/esm/stories/Divider.stories.js +15 -16
  197. package/dist/esm/stories/DropZone.stories.js +3 -3
  198. package/dist/esm/stories/FooterHelp.stories.js +3 -4
  199. package/dist/esm/stories/Form.stories.js +2 -4
  200. package/dist/esm/stories/Grid.stories.js +24 -33
  201. package/dist/esm/stories/Icon.stories.js +22 -23
  202. package/dist/esm/stories/Image.stories.js +12 -15
  203. package/dist/esm/stories/InlineError.stories.js +0 -1
  204. package/dist/esm/stories/Layout.stories.js +93 -2
  205. package/dist/esm/stories/LayoutSection.stories.js +13 -18
  206. package/dist/esm/stories/List.stories.js +24 -28
  207. package/dist/esm/stories/Listbox.stories.js +2 -2
  208. package/dist/esm/stories/Loading.stories.js +21 -25
  209. package/dist/esm/stories/Modal.stories.js +0 -1
  210. package/dist/esm/stories/Pagination.stories.js +4 -4
  211. package/dist/esm/stories/Pane.stories.js +10 -18
  212. package/dist/esm/stories/Popover.stories.js +7 -7
  213. package/dist/esm/stories/PopoverManager.stories.js +9 -9
  214. package/dist/esm/stories/ProgressBar.stories.js +8 -8
  215. package/dist/esm/stories/RadioButton.stories.js +2 -2
  216. package/dist/esm/stories/RadioButtonCard.stories.js +2 -2
  217. package/dist/esm/stories/RadioButtonCardGroup.stories.js +461 -0
  218. package/dist/esm/stories/RangeSlider.stories.js +1 -3
  219. package/dist/esm/stories/ResourceList.stories.js +13 -13
  220. package/dist/esm/stories/Spinner.stories.js +9 -9
  221. package/dist/esm/stories/Stack.stories.js +224 -51
  222. package/dist/esm/stories/Tabs.stories.js +2 -2
  223. package/dist/esm/stories/Tag.stories.js +1 -1
  224. package/dist/esm/stories/Thumbnail.stories.js +17 -18
  225. package/dist/esm/stories/TimePicker.stories.js +0 -5
  226. package/dist/esm/stories/Tip.stories.js +1 -1
  227. package/dist/types/components/ActionList.d.ts +1 -31
  228. package/dist/types/components/ActionList.d.ts.map +1 -1
  229. package/dist/types/components/AnnouncementBar.d.ts +1 -19
  230. package/dist/types/components/AnnouncementBar.d.ts.map +1 -1
  231. package/dist/types/components/AnnouncementCard.d.ts +3 -0
  232. package/dist/types/components/AnnouncementCard.d.ts.map +1 -0
  233. package/dist/types/components/AppProvider.d.ts +14 -1
  234. package/dist/types/components/AppProvider.d.ts.map +1 -1
  235. package/dist/types/components/Autocomplete.d.ts +1 -71
  236. package/dist/types/components/Autocomplete.d.ts.map +1 -1
  237. package/dist/types/components/Badge.d.ts +1 -19
  238. package/dist/types/components/Badge.d.ts.map +1 -1
  239. package/dist/types/components/Banner.d.ts +1 -37
  240. package/dist/types/components/Banner.d.ts.map +1 -1
  241. package/dist/types/components/Box.d.ts +1 -68
  242. package/dist/types/components/Box.d.ts.map +1 -1
  243. package/dist/types/components/Button.d.ts +1 -131
  244. package/dist/types/components/Button.d.ts.map +1 -1
  245. package/dist/types/components/ButtonGroup.d.ts +1 -22
  246. package/dist/types/components/ButtonGroup.d.ts.map +1 -1
  247. package/dist/types/components/Card.d.ts +54 -59
  248. package/dist/types/components/Card.d.ts.map +1 -1
  249. package/dist/types/components/Checkbox.d.ts +1 -63
  250. package/dist/types/components/Checkbox.d.ts.map +1 -1
  251. package/dist/types/components/CheckboxCard.d.ts +3 -0
  252. package/dist/types/components/CheckboxCard.d.ts.map +1 -0
  253. package/dist/types/components/CheckboxCardGroup.d.ts +3 -0
  254. package/dist/types/components/CheckboxCardGroup.d.ts.map +1 -0
  255. package/dist/types/components/ChoiceList.d.ts +1 -42
  256. package/dist/types/components/ChoiceList.d.ts.map +1 -1
  257. package/dist/types/components/Code.d.ts +1 -26
  258. package/dist/types/components/Code.d.ts.map +1 -1
  259. package/dist/types/components/Collapsible.d.ts +1 -15
  260. package/dist/types/components/Collapsible.d.ts.map +1 -1
  261. package/dist/types/components/ColorField.d.ts +13 -34
  262. package/dist/types/components/ColorField.d.ts.map +1 -1
  263. package/dist/types/components/ContextualSaveBar.d.ts +13 -6
  264. package/dist/types/components/ContextualSaveBar.d.ts.map +1 -1
  265. package/dist/types/components/DatePicker.d.ts +1 -64
  266. package/dist/types/components/DatePicker.d.ts.map +1 -1
  267. package/dist/types/components/Disclosure.d.ts +1 -25
  268. package/dist/types/components/Disclosure.d.ts.map +1 -1
  269. package/dist/types/components/Divider.d.ts +1 -19
  270. package/dist/types/components/Divider.d.ts.map +1 -1
  271. package/dist/types/components/DropZone.d.ts +1 -62
  272. package/dist/types/components/DropZone.d.ts.map +1 -1
  273. package/dist/types/components/EmptyState.d.ts +1 -50
  274. package/dist/types/components/EmptyState.d.ts.map +1 -1
  275. package/dist/types/components/Filters.d.ts +13 -68
  276. package/dist/types/components/Filters.d.ts.map +1 -1
  277. package/dist/types/components/FooterHelp.d.ts +14 -4
  278. package/dist/types/components/FooterHelp.d.ts.map +1 -1
  279. package/dist/types/components/Form.d.ts +13 -2
  280. package/dist/types/components/Form.d.ts.map +1 -1
  281. package/dist/types/components/Frame.d.ts +15 -36
  282. package/dist/types/components/Frame.d.ts.map +1 -1
  283. package/dist/types/components/FrameSaveBar.d.ts +3 -6
  284. package/dist/types/components/FrameSaveBar.d.ts.map +1 -1
  285. package/dist/types/components/Grid.d.ts +5 -21
  286. package/dist/types/components/Grid.d.ts.map +1 -1
  287. package/dist/types/components/HorizontalStack.d.ts +1 -34
  288. package/dist/types/components/HorizontalStack.d.ts.map +1 -1
  289. package/dist/types/components/Icon.d.ts +1 -41
  290. package/dist/types/components/Icon.d.ts.map +1 -1
  291. package/dist/types/components/Image.d.ts +1 -43
  292. package/dist/types/components/Image.d.ts.map +1 -1
  293. package/dist/types/components/InlineError.d.ts +1 -20
  294. package/dist/types/components/InlineError.d.ts.map +1 -1
  295. package/dist/types/components/Label.d.ts +1 -26
  296. package/dist/types/components/Label.d.ts.map +1 -1
  297. package/dist/types/components/Layout.d.ts +24 -15
  298. package/dist/types/components/Layout.d.ts.map +1 -1
  299. package/dist/types/components/LayoutSection.d.ts +1 -19
  300. package/dist/types/components/LayoutSection.d.ts.map +1 -1
  301. package/dist/types/components/Link.d.ts +1 -37
  302. package/dist/types/components/Link.d.ts.map +1 -1
  303. package/dist/types/components/List.d.ts +5 -17
  304. package/dist/types/components/List.d.ts.map +1 -1
  305. package/dist/types/components/Listbox.d.ts +1 -32
  306. package/dist/types/components/Listbox.d.ts.map +1 -1
  307. package/dist/types/components/Loading.d.ts +14 -2
  308. package/dist/types/components/Loading.d.ts.map +1 -1
  309. package/dist/types/components/Modal.d.ts +26 -35
  310. package/dist/types/components/Modal.d.ts.map +1 -1
  311. package/dist/types/components/Navigation.d.ts +1 -25
  312. package/dist/types/components/Navigation.d.ts.map +1 -1
  313. package/dist/types/components/Page.d.ts +1 -57
  314. package/dist/types/components/Page.d.ts.map +1 -1
  315. package/dist/types/components/Pagination.d.ts +13 -3
  316. package/dist/types/components/Pagination.d.ts.map +1 -1
  317. package/dist/types/components/Pane.d.ts +55 -3
  318. package/dist/types/components/Pane.d.ts.map +1 -1
  319. package/dist/types/components/Popover.d.ts +5 -37
  320. package/dist/types/components/Popover.d.ts.map +1 -1
  321. package/dist/types/components/PopoverManager.d.ts.map +1 -1
  322. package/dist/types/components/ProgressBar.d.ts +1 -22
  323. package/dist/types/components/ProgressBar.d.ts.map +1 -1
  324. package/dist/types/components/RadioButton.d.ts +1 -37
  325. package/dist/types/components/RadioButton.d.ts.map +1 -1
  326. package/dist/types/components/RadioButtonCard.d.ts +1 -39
  327. package/dist/types/components/RadioButtonCard.d.ts.map +1 -1
  328. package/dist/types/components/RadioButtonCardGroup.d.ts +3 -0
  329. package/dist/types/components/RadioButtonCardGroup.d.ts.map +1 -0
  330. package/dist/types/components/RangeSlider.d.ts +1 -42
  331. package/dist/types/components/RangeSlider.d.ts.map +1 -1
  332. package/dist/types/components/ResourceList.d.ts +5 -30
  333. package/dist/types/components/ResourceList.d.ts.map +1 -1
  334. package/dist/types/components/Select.d.ts +1 -46
  335. package/dist/types/components/Select.d.ts.map +1 -1
  336. package/dist/types/components/SkeletonText.d.ts +1 -26
  337. package/dist/types/components/SkeletonText.d.ts.map +1 -1
  338. package/dist/types/components/Spinner.d.ts +1 -16
  339. package/dist/types/components/Spinner.d.ts.map +1 -1
  340. package/dist/types/components/Stack.d.ts +1 -47
  341. package/dist/types/components/Stack.d.ts.map +1 -1
  342. package/dist/types/components/TabNavigation.d.ts.map +1 -1
  343. package/dist/types/components/Table.d.ts +13 -58
  344. package/dist/types/components/Table.d.ts.map +1 -1
  345. package/dist/types/components/Tabs.d.ts +3 -41
  346. package/dist/types/components/Tabs.d.ts.map +1 -1
  347. package/dist/types/components/Tag.d.ts +1 -24
  348. package/dist/types/components/Tag.d.ts.map +1 -1
  349. package/dist/types/components/Text.d.ts +1 -30
  350. package/dist/types/components/Text.d.ts.map +1 -1
  351. package/dist/types/components/TextField.d.ts +1 -109
  352. package/dist/types/components/TextField.d.ts.map +1 -1
  353. package/dist/types/components/Thumbnail.d.ts +1 -16
  354. package/dist/types/components/Thumbnail.d.ts.map +1 -1
  355. package/dist/types/components/TimePicker.d.ts +28 -1
  356. package/dist/types/components/TimePicker.d.ts.map +1 -1
  357. package/dist/types/components/Tip.d.ts +1 -21
  358. package/dist/types/components/Tip.d.ts.map +1 -1
  359. package/dist/types/components/ToastNotification.d.ts +1 -34
  360. package/dist/types/components/ToastNotification.d.ts.map +1 -1
  361. package/dist/types/components/ToastProvider.d.ts +13 -3
  362. package/dist/types/components/ToastProvider.d.ts.map +1 -1
  363. package/dist/types/components/Tooltip.d.ts +1 -54
  364. package/dist/types/components/Tooltip.d.ts.map +1 -1
  365. package/dist/types/components/TopBar.d.ts +1 -19
  366. package/dist/types/components/TopBar.d.ts.map +1 -1
  367. package/dist/types/components/VerticalStack.d.ts +1 -25
  368. package/dist/types/components/VerticalStack.d.ts.map +1 -1
  369. package/dist/types/index.d.ts +6 -0
  370. package/index.css +76 -14
  371. package/package.json +4 -3
package/dist/cjs/stories/Image.stories.js CHANGED
@@ -236,7 +236,7 @@ var BorderRadius = {
236
236
  children: [
237
237
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
238
238
  gap: "sm",
239
- inlineAlign: "center",
239
+ align: "center",
240
240
  children: [
241
241
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
242
242
  width: "150px",
@@ -260,7 +260,7 @@ var BorderRadius = {
260
260
  }),
261
261
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
262
262
  gap: "sm",
263
- inlineAlign: "center",
263
+ align: "center",
264
264
  children: [
265
265
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
266
266
  width: "150px",
@@ -284,7 +284,7 @@ var BorderRadius = {
284
284
  }),
285
285
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
286
286
  gap: "sm",
287
- inlineAlign: "center",
287
+ align: "center",
288
288
  children: [
289
289
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
290
290
  width: "150px",
@@ -308,7 +308,7 @@ var BorderRadius = {
308
308
  }),
309
309
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
310
310
  gap: "sm",
311
- inlineAlign: "center",
311
+ align: "center",
312
312
  children: [
313
313
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
314
314
  width: "150px",
@@ -332,7 +332,7 @@ var BorderRadius = {
332
332
  }),
333
333
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
334
334
  gap: "sm",
335
- inlineAlign: "center",
335
+ align: "center",
336
336
  children: [
337
337
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
338
338
  width: "150px",
@@ -356,7 +356,7 @@ var BorderRadius = {
356
356
  }),
357
357
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
358
358
  gap: "sm",
359
- inlineAlign: "center",
359
+ align: "center",
360
360
  children: [
361
361
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
362
362
  width: "150px",
@@ -396,7 +396,7 @@ var RoundedProp = {
396
396
  children: [
397
397
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
398
398
  gap: "sm",
399
- inlineAlign: "center",
399
+ align: "center",
400
400
  children: [
401
401
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
402
402
  width: "150px",
@@ -419,7 +419,7 @@ var RoundedProp = {
419
419
  }),
420
420
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
421
421
  gap: "sm",
422
- inlineAlign: "center",
422
+ align: "center",
423
423
  children: [
424
424
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
425
425
  width: "150px",
@@ -656,8 +656,7 @@ var ProfileCards = {
656
656
  gap: "6",
657
657
  children: team.map(function(member, index) {
658
658
  return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
659
- gap: "4",
660
- inlineAlign: "center",
659
+ align: "center",
661
660
  as: _Box.default,
662
661
  padding: "6",
663
662
  borderWidth: "1",
@@ -680,7 +679,7 @@ var ProfileCards = {
680
679
  }),
681
680
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
682
681
  gap: "xs",
683
- inlineAlign: "center",
682
+ align: "center",
684
683
  children: [
685
684
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
686
685
  variant: "headingSm",
@@ -727,8 +726,7 @@ var ImageGallery = {
727
726
  gap: "lg",
728
727
  children: [
729
728
  selectedImage && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
730
- gap: "4",
731
- inlineAlign: "center",
729
+ align: "center",
732
730
  as: _Box.default,
733
731
  padding: "8",
734
732
  background: "surface-neutral-subdued",
@@ -757,7 +755,6 @@ var ImageGallery = {
757
755
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Grid.default, {
758
756
  columns: "auto-fit",
759
757
  minItemWidth: "150px",
760
- gap: "4",
761
758
  children: images.map(function(src, index) {
762
759
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
763
760
  height: "120px",
@@ -826,7 +823,7 @@ var BannerImages = {
826
823
  },
827
824
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
828
825
  gap: "sm",
829
- inlineAlign: "center",
826
+ align: "center",
830
827
  children: [
831
828
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
832
829
  variant: "headingLg",
package/dist/cjs/stories/InlineError.stories.js CHANGED
@@ -561,7 +561,6 @@ var DifferentContexts = {
561
561
  }),
562
562
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(Grid, {
563
563
  columns: 2,
564
- gap: "4",
565
564
  children: [
566
565
  /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
567
566
  children: [
package/dist/cjs/stories/Layout.stories.js CHANGED
@@ -21,6 +21,9 @@ _export(exports, {
21
21
  get ProductManagement () {
22
22
  return ProductManagement;
23
23
  },
24
+ get ScrollSectionsIndependently () {
25
+ return ScrollSectionsIndependently;
26
+ },
24
27
  get SettingsPage () {
25
28
  return SettingsPage;
26
29
  },
@@ -41,6 +44,7 @@ var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Butt
41
44
  var _TextField = /*#__PURE__*/ _interop_require_default(require("../components/TextField.js"));
42
45
  var _Checkbox = /*#__PURE__*/ _interop_require_default(require("../components/Checkbox.js"));
43
46
  var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
47
+ var _Page = /*#__PURE__*/ _interop_require_default(require("../components/Page.js"));
44
48
  var _Grid = /*#__PURE__*/ _interop_require_default(require("../components/Grid.js"));
45
49
  function _interop_require_default(obj) {
46
50
  return obj && obj.__esModule ? obj : {
@@ -68,6 +72,10 @@ var _default = {
68
72
  children: {
69
73
  control: false,
70
74
  description: 'Content to render inside the layout'
75
+ },
76
+ scrollSectionsIndependently: {
77
+ control: 'boolean',
78
+ description: 'Whether sections scroll independently within a viewport-height container'
71
79
  }
72
80
  }
73
81
  };
@@ -565,7 +573,6 @@ var ProductManagement = {
565
573
  sm: 2,
566
574
  lg: 4
567
575
  },
568
- gap: "4",
569
576
  children: [
570
577
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
571
578
  label: "Price",
@@ -600,7 +607,6 @@ var ProductManagement = {
600
607
  sm: 2,
601
608
  lg: 4
602
609
  },
603
- gap: "4",
604
610
  children: [
605
611
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
606
612
  label: "Weight",
@@ -671,3 +677,91 @@ var ProductManagement = {
671
677
  }
672
678
  }
673
679
  };
680
+ var ScrollSectionsIndependently = {
681
+ render: function() {
682
+ return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
683
+ className: "@container/main",
684
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Page.default, {
685
+ title: "Independent Scrolling Demo",
686
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Layout.default, {
687
+ scrollSectionsIndependently: true,
688
+ children: [
689
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Layout.default.Section, {
690
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
691
+ title: "Main Content",
692
+ padded: true,
693
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
694
+ children: [
695
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
696
+ variant: "headingLg",
697
+ children: "Long Article"
698
+ }),
699
+ Array.from({
700
+ length: 25
701
+ }, function(_, i) {
702
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
703
+ children: [
704
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
705
+ paddingBlockEnd: "2",
706
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
707
+ variant: "headingSm",
708
+ children: [
709
+ "Section ",
710
+ i + 1
711
+ ]
712
+ })
713
+ }),
714
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
715
+ children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
716
+ })
717
+ ]
718
+ }, i);
719
+ })
720
+ ]
721
+ })
722
+ })
723
+ }),
724
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Layout.default.Section, {
725
+ sidebar: true,
726
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
727
+ title: "Sidebar Navigation",
728
+ padded: true,
729
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
730
+ children: [
731
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
732
+ variant: "headingSm",
733
+ children: "Navigation"
734
+ }),
735
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
736
+ gap: "sm",
737
+ children: Array.from({
738
+ length: 30
739
+ }, function(_, i) {
740
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Button.default, {
741
+ size: "slim",
742
+ plain: true,
743
+ textAlign: "left",
744
+ children: [
745
+ "Menu Item ",
746
+ i + 1
747
+ ]
748
+ }, i);
749
+ })
750
+ })
751
+ ]
752
+ })
753
+ })
754
+ })
755
+ ]
756
+ })
757
+ })
758
+ });
759
+ },
760
+ parameters: {
761
+ docs: {
762
+ description: {
763
+ story: 'Layout with scrollSectionsIndependently. At the @lg breakpoint, the layout caps its height to the viewport and each section scrolls its own content independently. On mobile (stacked), sections flow normally.'
764
+ }
765
+ }
766
+ }
767
+ };
package/dist/cjs/stories/LayoutSection.stories.js CHANGED
@@ -318,7 +318,6 @@ var SlimSidebar = {
318
318
  xs: 1,
319
319
  md: 3
320
320
  },
321
- gap: "4",
322
321
  children: [
323
322
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
324
323
  padding: "4",
@@ -609,7 +608,6 @@ var SettingsLayout = {
609
608
  children: [
610
609
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
611
610
  columns: 2,
612
- gap: "4",
613
611
  children: [
614
612
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
615
613
  gap: "sm",
@@ -699,7 +697,6 @@ var SettingsLayout = {
699
697
  }),
700
698
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
701
699
  columns: 2,
702
- gap: "4",
703
700
  children: [
704
701
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
705
702
  gap: "sm",
@@ -816,7 +813,7 @@ var SettingsLayout = {
816
813
  children: [
817
814
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
818
815
  horizontal: true,
819
- align: "space-between",
816
+ justify: "between",
820
817
  children: [
821
818
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
822
819
  variant: "bodySm",
@@ -830,7 +827,7 @@ var SettingsLayout = {
830
827
  }),
831
828
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
832
829
  horizontal: true,
833
- align: "space-between",
830
+ justify: "between",
834
831
  children: [
835
832
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
836
833
  variant: "bodySm",
@@ -847,7 +844,7 @@ var SettingsLayout = {
847
844
  }),
848
845
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
849
846
  horizontal: true,
850
- align: "space-between",
847
+ justify: "between",
851
848
  children: [
852
849
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
853
850
  variant: "bodySm",
@@ -892,13 +889,12 @@ var DashboardLayout = {
892
889
  xs: 1,
893
890
  md: 3
894
891
  },
895
- gap: "4",
896
892
  children: [
897
893
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
898
894
  padded: true,
899
895
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
900
896
  gap: "xs",
901
- inlineAlign: "center",
897
+ align: "center",
902
898
  children: [
903
899
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
904
900
  variant: "headingLg",
@@ -916,7 +912,7 @@ var DashboardLayout = {
916
912
  padded: true,
917
913
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
918
914
  gap: "xs",
919
- inlineAlign: "center",
915
+ align: "center",
920
916
  children: [
921
917
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
922
918
  variant: "headingLg",
@@ -934,7 +930,7 @@ var DashboardLayout = {
934
930
  padded: true,
935
931
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
936
932
  gap: "xs",
937
- inlineAlign: "center",
933
+ align: "center",
938
934
  children: [
939
935
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
940
936
  variant: "headingLg",
@@ -954,8 +950,8 @@ var DashboardLayout = {
954
950
  title: "Performance Over Time",
955
951
  padded: true,
956
952
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
957
- blockAlign: "center",
958
- inlineAlign: "center",
953
+ justify: "center",
954
+ align: "center",
959
955
  as: _Box.default,
960
956
  padding: "12",
961
957
  height: "300px",
@@ -982,7 +978,7 @@ var DashboardLayout = {
982
978
  borderRadius: "1",
983
979
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
984
980
  horizontal: true,
985
- align: "space-between",
981
+ justify: "between",
986
982
  children: [
987
983
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
988
984
  children: [
@@ -1050,7 +1046,7 @@ var DashboardLayout = {
1050
1046
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1051
1047
  horizontal: true,
1052
1048
  gap: "sm",
1053
- blockAlign: "center",
1049
+ align: "center",
1054
1050
  children: [
1055
1051
  /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
1056
1052
  type: "checkbox",
@@ -1065,7 +1061,7 @@ var DashboardLayout = {
1065
1061
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1066
1062
  horizontal: true,
1067
1063
  gap: "sm",
1068
- blockAlign: "center",
1064
+ align: "center",
1069
1065
  children: [
1070
1066
  /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
1071
1067
  type: "checkbox",
@@ -1080,7 +1076,7 @@ var DashboardLayout = {
1080
1076
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1081
1077
  horizontal: true,
1082
1078
  gap: "sm",
1083
- blockAlign: "center",
1079
+ align: "center",
1084
1080
  children: [
1085
1081
  /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
1086
1082
  type: "checkbox"
@@ -1159,7 +1155,6 @@ var ResponsiveBehavior = {
1159
1155
  md: 3,
1160
1156
  lg: 6
1161
1157
  },
1162
- gap: "4",
1163
1158
  children: Array.from({
1164
1159
  length: 6
1165
1160
  }, function(_, i) {
@@ -1168,7 +1163,7 @@ var ResponsiveBehavior = {
1168
1163
  background: "bg-surface-info-subdued",
1169
1164
  borderRadius: "1",
1170
1165
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
1171
- inlineAlign: "center",
1166
+ align: "center",
1172
1167
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
1173
1168
  children: [
1174
1169
  "Item ",
package/dist/cjs/stories/List.stories.js CHANGED
@@ -390,7 +390,7 @@ var WithIcons = {
390
390
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
391
391
  horizontal: true,
392
392
  gap: "sm",
393
- blockAlign: "center",
393
+ align: "center",
394
394
  children: [
395
395
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
396
396
  source: _polarisicons.MobileAcceptMajor,
@@ -407,7 +407,7 @@ var WithIcons = {
407
407
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
408
408
  horizontal: true,
409
409
  gap: "sm",
410
- blockAlign: "center",
410
+ align: "center",
411
411
  children: [
412
412
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
413
413
  source: _polarisicons.AlertMinor,
@@ -424,7 +424,7 @@ var WithIcons = {
424
424
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
425
425
  horizontal: true,
426
426
  gap: "sm",
427
- blockAlign: "center",
427
+ align: "center",
428
428
  children: [
429
429
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
430
430
  source: _polarisicons.InfoMinor,
@@ -579,15 +579,15 @@ var ChecklistExample = {
579
579
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
580
580
  horizontal: true,
581
581
  gap: "sm",
582
- blockAlign: "center",
582
+ align: "center",
583
583
  children: [
584
584
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
585
585
  minInlineSize: "20px",
586
586
  minBlockSize: "20px",
587
587
  borderRadius: "full",
588
588
  background: item.completed ? "success" : "neutral",
589
- inlineAlign: "center",
590
- blockAlign: "center",
589
+ align: "center",
590
+ justify: "center",
591
591
  style: {
592
592
  display: "flex"
593
593
  },
@@ -651,8 +651,8 @@ var NavigationMenu = {
651
651
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
652
652
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
653
653
  horizontal: true,
654
- align: "space-between",
655
- blockAlign: "center",
654
+ justify: "between",
655
+ align: "center",
656
656
  children: [
657
657
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
658
658
  children: "Dashboard"
@@ -668,8 +668,8 @@ var NavigationMenu = {
668
668
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
669
669
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
670
670
  horizontal: true,
671
- align: "space-between",
672
- blockAlign: "center",
671
+ justify: "between",
672
+ align: "center",
673
673
  children: [
674
674
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
675
675
  children: "Projects"
@@ -685,8 +685,8 @@ var NavigationMenu = {
685
685
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
686
686
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
687
687
  horizontal: true,
688
- align: "space-between",
689
- blockAlign: "center",
688
+ justify: "between",
689
+ align: "center",
690
690
  children: [
691
691
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
692
692
  children: "Team Members"
@@ -702,8 +702,8 @@ var NavigationMenu = {
702
702
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
703
703
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
704
704
  horizontal: true,
705
- align: "space-between",
706
- blockAlign: "center",
705
+ justify: "between",
706
+ align: "center",
707
707
  children: [
708
708
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
709
709
  children: "Settings"
@@ -840,7 +840,7 @@ var ComparisonList = {
840
840
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
841
841
  horizontal: true,
842
842
  gap: "sm",
843
- blockAlign: "center",
843
+ align: "center",
844
844
  children: [
845
845
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
846
846
  source: _polarisicons.MobileAcceptMajor,
@@ -857,7 +857,7 @@ var ComparisonList = {
857
857
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
858
858
  horizontal: true,
859
859
  gap: "sm",
860
- blockAlign: "center",
860
+ align: "center",
861
861
  children: [
862
862
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
863
863
  source: _polarisicons.MobileAcceptMajor,
@@ -874,7 +874,7 @@ var ComparisonList = {
874
874
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
875
875
  horizontal: true,
876
876
  gap: "sm",
877
- blockAlign: "center",
877
+ align: "center",
878
878
  children: [
879
879
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
880
880
  source: _polarisicons.MobileAcceptMajor,
@@ -891,13 +891,11 @@ var ComparisonList = {
891
891
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
892
892
  horizontal: true,
893
893
  gap: "sm",
894
- blockAlign: "center",
894
+ align: "center",
895
895
  children: [
896
896
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
897
897
  minInlineSize: "16px",
898
898
  minBlockSize: "16px",
899
- inlineAlign: "center",
900
- blockAlign: "center",
901
899
  style: {
902
900
  display: "flex",
903
901
  color: "#999",
@@ -916,13 +914,11 @@ var ComparisonList = {
916
914
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
917
915
  horizontal: true,
918
916
  gap: "sm",
919
- blockAlign: "center",
917
+ align: "center",
920
918
  children: [
921
919
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
922
920
  minInlineSize: "16px",
923
921
  minBlockSize: "16px",
924
- inlineAlign: "center",
925
- blockAlign: "center",
926
922
  style: {
927
923
  display: "flex",
928
924
  color: "#999",
@@ -951,7 +947,7 @@ var ComparisonList = {
951
947
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
952
948
  horizontal: true,
953
949
  gap: "sm",
954
- blockAlign: "center",
950
+ align: "center",
955
951
  children: [
956
952
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
957
953
  source: _polarisicons.MobileAcceptMajor,
@@ -968,7 +964,7 @@ var ComparisonList = {
968
964
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
969
965
  horizontal: true,
970
966
  gap: "sm",
971
- blockAlign: "center",
967
+ align: "center",
972
968
  children: [
973
969
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
974
970
  source: _polarisicons.MobileAcceptMajor,
@@ -985,7 +981,7 @@ var ComparisonList = {
985
981
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
986
982
  horizontal: true,
987
983
  gap: "sm",
988
- blockAlign: "center",
984
+ align: "center",
989
985
  children: [
990
986
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
991
987
  source: _polarisicons.MobileAcceptMajor,
@@ -1002,7 +998,7 @@ var ComparisonList = {
1002
998
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1003
999
  horizontal: true,
1004
1000
  gap: "sm",
1005
- blockAlign: "center",
1001
+ align: "center",
1006
1002
  children: [
1007
1003
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
1008
1004
  source: _polarisicons.MobileAcceptMajor,
@@ -1019,7 +1015,7 @@ var ComparisonList = {
1019
1015
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1020
1016
  horizontal: true,
1021
1017
  gap: "sm",
1022
- blockAlign: "center",
1018
+ align: "center",
1023
1019
  children: [
1024
1020
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
1025
1021
  source: _polarisicons.MobileAcceptMajor,
package/dist/cjs/stories/Listbox.stories.js CHANGED
@@ -578,8 +578,8 @@ var FilterOptions = {
578
578
  borderRadius: "base",
579
579
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
580
580
  horizontal: true,
581
- blockAlign: "center",
582
- inlineAlign: "space-between",
581
+ align: "center",
582
+ justify: "between",
583
583
  children: [
584
584
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
585
585
  children: item.name