@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/ComplexExamples.stories.js CHANGED
@@ -330,8 +330,8 @@ var CustomerDetailView = function() {
330
330
  id: "order-".concat(order.id),
331
331
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
332
332
  horizontal: true,
333
- align: "space-between",
334
- blockAlign: "center",
333
+ justify: "between",
334
+ align: "center",
335
335
  children: [
336
336
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
337
337
  gap: "1",
@@ -349,8 +349,7 @@ var CustomerDetailView = function() {
349
349
  }),
350
350
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
351
351
  horizontal: true,
352
- gap: "4",
353
- blockAlign: "center",
352
+ align: "center",
354
353
  children: [
355
354
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
356
355
  variant: "headingSm",
@@ -406,7 +405,7 @@ var CustomerDetailView = function() {
406
405
  children: [
407
406
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
408
407
  horizontal: true,
409
- align: "space-between",
408
+ justify: "between",
410
409
  children: [
411
410
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
412
411
  variant: "headingMd",
@@ -433,7 +432,6 @@ var CustomerDetailView = function() {
433
432
  xs: 1,
434
433
  sm: 2
435
434
  },
436
- gap: "4",
437
435
  children: [
438
436
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.TextField, {
439
437
  label: "First Name",
@@ -463,7 +461,6 @@ var CustomerDetailView = function() {
463
461
  xs: 1,
464
462
  sm: 2
465
463
  },
466
- gap: "4",
467
464
  children: [
468
465
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.TextField, {
469
466
  label: "Email",
@@ -584,12 +581,11 @@ var CustomerDetailView = function() {
584
581
  title: "Account Status",
585
582
  padded: true,
586
583
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
587
- gap: "4",
588
584
  children: [
589
585
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
590
586
  horizontal: true,
591
- align: "space-between",
592
- blockAlign: "center",
587
+ justify: "between",
588
+ align: "center",
593
589
  children: [
594
590
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
595
591
  children: "Email Verified"
@@ -602,8 +598,8 @@ var CustomerDetailView = function() {
602
598
  }),
603
599
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
604
600
  horizontal: true,
605
- align: "space-between",
606
- blockAlign: "center",
601
+ justify: "between",
602
+ align: "center",
607
603
  children: [
608
604
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
609
605
  children: "Payment Method"
@@ -615,8 +611,8 @@ var CustomerDetailView = function() {
615
611
  }),
616
612
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
617
613
  horizontal: true,
618
- align: "space-between",
619
- blockAlign: "center",
614
+ justify: "between",
615
+ align: "center",
620
616
  children: [
621
617
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
622
618
  children: "Marketing Emails"
@@ -707,7 +703,6 @@ var TransactionsList = function() {
707
703
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Card, {
708
704
  padded: true,
709
705
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
710
- gap: "4",
711
706
  children: [
712
707
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Filters, {
713
708
  queryValue: searchQuery,
@@ -756,8 +751,8 @@ var TransactionsList = function() {
756
751
  className: "bg-info-alt border border-info-alt-lower rounded-md",
757
752
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
758
753
  horizontal: true,
759
- align: "space-between",
760
- blockAlign: "center",
754
+ justify: "between",
755
+ align: "center",
761
756
  children: [
762
757
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Text, {
763
758
  children: [
@@ -908,7 +903,6 @@ var AccountSettings = function() {
908
903
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Card, {
909
904
  padded: true,
910
905
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
911
- gap: "4",
912
906
  children: [
913
907
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.TextField, {
914
908
  label: "Full Name",
@@ -935,7 +929,6 @@ var AccountSettings = function() {
935
929
  xs: 1,
936
930
  sm: 2
937
931
  },
938
- gap: "4",
939
932
  children: [
940
933
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Select, {
941
934
  label: "Timezone",
@@ -1040,7 +1033,6 @@ var AccountSettings = function() {
1040
1033
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Divider, {}),
1041
1034
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
1042
1035
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
1043
- gap: "4",
1044
1036
  children: [
1045
1037
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
1046
1038
  gap: "2",
@@ -1158,8 +1150,8 @@ var AccountSettings = function() {
1158
1150
  children: [
1159
1151
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
1160
1152
  horizontal: true,
1161
- align: "space-between",
1162
- blockAlign: "center",
1153
+ justify: "between",
1154
+ align: "center",
1163
1155
  children: [
1164
1156
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
1165
1157
  gap: "1",
@@ -1204,7 +1196,6 @@ var AccountSettings = function() {
1204
1196
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Card, {
1205
1197
  padded: true,
1206
1198
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
1207
- gap: "4",
1208
1199
  children: [
1209
1200
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
1210
1201
  variant: "bodySm",
@@ -1290,7 +1281,7 @@ var OrderDetails = function() {
1290
1281
  children: [
1291
1282
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
1292
1283
  horizontal: true,
1293
- align: "space-between",
1284
+ justify: "between",
1294
1285
  children: [
1295
1286
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
1296
1287
  variant: "headingMd",
@@ -1309,7 +1300,7 @@ var OrderDetails = function() {
1309
1300
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
1310
1301
  horizontal: true,
1311
1302
  gap: "3",
1312
- blockAlign: "start",
1303
+ align: "start",
1313
1304
  children: [
1314
1305
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
1315
1306
  className: "w-2 h-2 rounded-full bg-success"
@@ -1333,7 +1324,7 @@ var OrderDetails = function() {
1333
1324
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
1334
1325
  horizontal: true,
1335
1326
  gap: "3",
1336
- blockAlign: "start",
1327
+ align: "start",
1337
1328
  children: [
1338
1329
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
1339
1330
  className: "w-2 h-2 rounded-full bg-success"
@@ -1357,7 +1348,7 @@ var OrderDetails = function() {
1357
1348
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
1358
1349
  horizontal: true,
1359
1350
  gap: "3",
1360
- blockAlign: "start",
1351
+ align: "start",
1361
1352
  children: [
1362
1353
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
1363
1354
  className: "w-2 h-2 rounded-full bg-info"
@@ -1381,7 +1372,7 @@ var OrderDetails = function() {
1381
1372
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
1382
1373
  horizontal: true,
1383
1374
  gap: "3",
1384
- blockAlign: "start",
1375
+ align: "start",
1385
1376
  children: [
1386
1377
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
1387
1378
  className: "w-2 h-2 rounded-full bg-surface-lower"
@@ -1420,7 +1411,6 @@ var OrderDetails = function() {
1420
1411
  title: "Order Items",
1421
1412
  padded: true,
1422
1413
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
1423
- gap: "4",
1424
1414
  children: [
1425
1415
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Table, {
1426
1416
  columnContentTypes: [
@@ -1447,7 +1437,7 @@ var OrderDetails = function() {
1447
1437
  children: [
1448
1438
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
1449
1439
  horizontal: true,
1450
- align: "space-between",
1440
+ justify: "between",
1451
1441
  children: [
1452
1442
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
1453
1443
  children: "Subtotal"
@@ -1459,7 +1449,7 @@ var OrderDetails = function() {
1459
1449
  }),
1460
1450
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
1461
1451
  horizontal: true,
1462
- align: "space-between",
1452
+ justify: "between",
1463
1453
  children: [
1464
1454
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
1465
1455
  children: "Shipping"
@@ -1471,7 +1461,7 @@ var OrderDetails = function() {
1471
1461
  }),
1472
1462
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
1473
1463
  horizontal: true,
1474
- align: "space-between",
1464
+ justify: "between",
1475
1465
  children: [
1476
1466
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
1477
1467
  children: "Tax"
@@ -1486,7 +1476,7 @@ var OrderDetails = function() {
1486
1476
  paddingBlockStart: "2",
1487
1477
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
1488
1478
  horizontal: true,
1489
- align: "space-between",
1479
+ justify: "between",
1490
1480
  children: [
1491
1481
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
1492
1482
  variant: "headingMd",
@@ -1513,7 +1503,6 @@ var OrderDetails = function() {
1513
1503
  title: "Customer",
1514
1504
  padded: true,
1515
1505
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
1516
- gap: "4",
1517
1506
  children: [
1518
1507
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
1519
1508
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
@@ -1575,8 +1564,8 @@ var OrderDetails = function() {
1575
1564
  children: [
1576
1565
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
1577
1566
  horizontal: true,
1578
- align: "space-between",
1579
- blockAlign: "center",
1567
+ justify: "between",
1568
+ align: "center",
1580
1569
  children: [
1581
1570
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
1582
1571
  children: "Visa •••• 4242"
@@ -1622,7 +1611,6 @@ var OrderDetails = function() {
1622
1611
  ],
1623
1612
  sectioned: true,
1624
1613
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
1625
- gap: "4",
1626
1614
  children: [
1627
1615
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.TextField, {
1628
1616
  label: "Tracking Number",
@@ -1691,7 +1679,6 @@ var DashboardOverview = function() {
1691
1679
  sm: 2,
1692
1680
  lg: 4
1693
1681
  },
1694
- gap: "4",
1695
1682
  children: [
1696
1683
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Card, {
1697
1684
  padded: true,
@@ -1710,7 +1697,7 @@ var DashboardOverview = function() {
1710
1697
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
1711
1698
  horizontal: true,
1712
1699
  gap: "2",
1713
- blockAlign: "center",
1700
+ align: "center",
1714
1701
  children: [
1715
1702
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Badge, {
1716
1703
  status: "success",
@@ -1743,7 +1730,7 @@ var DashboardOverview = function() {
1743
1730
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
1744
1731
  horizontal: true,
1745
1732
  gap: "2",
1746
- blockAlign: "center",
1733
+ align: "center",
1747
1734
  children: [
1748
1735
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Badge, {
1749
1736
  status: "success",
@@ -1776,7 +1763,7 @@ var DashboardOverview = function() {
1776
1763
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
1777
1764
  horizontal: true,
1778
1765
  gap: "2",
1779
- blockAlign: "center",
1766
+ align: "center",
1780
1767
  children: [
1781
1768
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Badge, {
1782
1769
  status: "success",
@@ -1809,7 +1796,7 @@ var DashboardOverview = function() {
1809
1796
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
1810
1797
  horizontal: true,
1811
1798
  gap: "2",
1812
- blockAlign: "center",
1799
+ align: "center",
1813
1800
  children: [
1814
1801
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Badge, {
1815
1802
  status: "attention",
@@ -1832,7 +1819,6 @@ var DashboardOverview = function() {
1832
1819
  xs: 1,
1833
1820
  lg: 2
1834
1821
  },
1835
- gap: "4",
1836
1822
  children: [
1837
1823
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Card, {
1838
1824
  title: "Recent Orders",
@@ -1844,8 +1830,8 @@ var DashboardOverview = function() {
1844
1830
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
1845
1831
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
1846
1832
  horizontal: true,
1847
- align: "space-between",
1848
- blockAlign: "center",
1833
+ justify: "between",
1834
+ align: "center",
1849
1835
  children: [
1850
1836
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
1851
1837
  gap: "1",
@@ -1864,7 +1850,7 @@ var DashboardOverview = function() {
1864
1850
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
1865
1851
  horizontal: true,
1866
1852
  gap: "3",
1867
- blockAlign: "center",
1853
+ align: "center",
1868
1854
  children: [
1869
1855
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
1870
1856
  variant: "headingSm",
@@ -2133,7 +2119,6 @@ var TeamMembersManagement = function() {
2133
2119
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Card, {
2134
2120
  padded: true,
2135
2121
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
2136
- gap: "4",
2137
2122
  children: [
2138
2123
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
2139
2124
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
@@ -2252,7 +2237,6 @@ var TeamMembersManagement = function() {
2252
2237
  title: "Team Plan",
2253
2238
  padded: true,
2254
2239
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
2255
- gap: "4",
2256
2240
  children: [
2257
2241
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
2258
2242
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
@@ -2313,7 +2297,6 @@ var TeamMembersManagement = function() {
2313
2297
  ],
2314
2298
  sectioned: true,
2315
2299
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
2316
- gap: "4",
2317
2300
  children: [
2318
2301
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.TextField, {
2319
2302
  label: "Email Address",
@@ -2469,7 +2452,6 @@ var ProductInventoryManagement = function() {
2469
2452
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Card, {
2470
2453
  padded: true,
2471
2454
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
2472
- gap: "4",
2473
2455
  children: [
2474
2456
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Filters, {
2475
2457
  queryValue: searchQuery,
@@ -2544,7 +2526,6 @@ var ProductInventoryManagement = function() {
2544
2526
  sm: 2,
2545
2527
  lg: 4
2546
2528
  },
2547
- gap: "4",
2548
2529
  children: [
2549
2530
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Card, {
2550
2531
  padded: true,
@@ -2748,8 +2729,8 @@ var BillingAndInvoices = function() {
2748
2729
  children: [
2749
2730
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
2750
2731
  horizontal: true,
2751
- align: "space-between",
2752
- blockAlign: "start",
2732
+ justify: "between",
2733
+ align: "start",
2753
2734
  children: [
2754
2735
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
2755
2736
  gap: "2",
@@ -2775,11 +2756,10 @@ var BillingAndInvoices = function() {
2775
2756
  className: "border-t border-edge-subdued",
2776
2757
  paddingBlockStart: "6",
2777
2758
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
2778
- gap: "4",
2779
2759
  children: [
2780
2760
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
2781
2761
  horizontal: true,
2782
- align: "space-between",
2762
+ justify: "between",
2783
2763
  children: [
2784
2764
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
2785
2765
  children: "Next billing date"
@@ -2792,7 +2772,7 @@ var BillingAndInvoices = function() {
2792
2772
  }),
2793
2773
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
2794
2774
  horizontal: true,
2795
- align: "space-between",
2775
+ justify: "between",
2796
2776
  children: [
2797
2777
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
2798
2778
  children: "Amount"
@@ -2833,7 +2813,6 @@ var BillingAndInvoices = function() {
2833
2813
  title: "Invoice History",
2834
2814
  padded: true,
2835
2815
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Stack, {
2836
- gap: "4",
2837
2816
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Table, {
2838
2817
  columnContentTypes: [
2839
2818
  'text',
@@ -2875,16 +2854,15 @@ var BillingAndInvoices = function() {
2875
2854
  children: [
2876
2855
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
2877
2856
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Stack, {
2878
- gap: "4",
2879
2857
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
2880
2858
  horizontal: true,
2881
- align: "space-between",
2882
- blockAlign: "center",
2859
+ justify: "between",
2860
+ align: "center",
2883
2861
  children: [
2884
2862
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
2885
2863
  horizontal: true,
2886
2864
  gap: "3",
2887
- blockAlign: "center",
2865
+ align: "center",
2888
2866
  children: [
2889
2867
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
2890
2868
  className: "w-12 h-8 bg-surface-lower rounded border border-edge-subdued flex items-center justify-center",
@@ -2943,7 +2921,6 @@ var BillingAndInvoices = function() {
2943
2921
  title: "Billing Address",
2944
2922
  padded: true,
2945
2923
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
2946
- gap: "4",
2947
2924
  children: [
2948
2925
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
2949
2926
  gap: "2",
@@ -2986,7 +2963,7 @@ var BillingAndInvoices = function() {
2986
2963
  children: [
2987
2964
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
2988
2965
  horizontal: true,
2989
- align: "space-between",
2966
+ justify: "between",
2990
2967
  children: [
2991
2968
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
2992
2969
  variant: "bodySm",
@@ -3012,7 +2989,7 @@ var BillingAndInvoices = function() {
3012
2989
  children: [
3013
2990
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
3014
2991
  horizontal: true,
3015
- align: "space-between",
2992
+ justify: "between",
3016
2993
  children: [
3017
2994
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
3018
2995
  variant: "bodySm",
@@ -3038,7 +3015,7 @@ var BillingAndInvoices = function() {
3038
3015
  children: [
3039
3016
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
3040
3017
  horizontal: true,
3041
- align: "space-between",
3018
+ justify: "between",
3042
3019
  children: [
3043
3020
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
3044
3021
  variant: "bodySm",
@@ -3086,7 +3063,6 @@ var BillingAndInvoices = function() {
3086
3063
  ],
3087
3064
  sectioned: true,
3088
3065
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
3089
- gap: "4",
3090
3066
  children: [
3091
3067
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.TextField, {
3092
3068
  label: "Card Number",
@@ -3114,7 +3090,6 @@ var BillingAndInvoices = function() {
3114
3090
  xs: 1,
3115
3091
  sm: 2
3116
3092
  },
3117
- gap: "4",
3118
3093
  children: [
3119
3094
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.TextField, {
3120
3095
  label: "Expiry Date",
@@ -3320,7 +3295,6 @@ var SupportTicketSystem = function() {
3320
3295
  sm: 2,
3321
3296
  lg: 4
3322
3297
  },
3323
- gap: "4",
3324
3298
  children: [
3325
3299
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Card, {
3326
3300
  padded: true,
@@ -3411,7 +3385,6 @@ var SupportTicketSystem = function() {
3411
3385
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Card, {
3412
3386
  padded: true,
3413
3387
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
3414
- gap: "4",
3415
3388
  children: [
3416
3389
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Tabs, {
3417
3390
  tabs: tabs,
@@ -3498,8 +3471,8 @@ var SupportTicketSystem = function() {
3498
3471
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
3499
3472
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
3500
3473
  horizontal: true,
3501
- align: "space-between",
3502
- blockAlign: "start",
3474
+ justify: "between",
3475
+ align: "start",
3503
3476
  children: [
3504
3477
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
3505
3478
  gap: "2",
@@ -3507,7 +3480,7 @@ var SupportTicketSystem = function() {
3507
3480
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
3508
3481
  horizontal: true,
3509
3482
  gap: "2",
3510
- blockAlign: "center",
3483
+ align: "center",
3511
3484
  children: [
3512
3485
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Badge, {
3513
3486
  status: "critical",
@@ -3584,7 +3557,6 @@ var SupportTicketSystem = function() {
3584
3557
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Divider, {}),
3585
3558
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
3586
3559
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
3587
- gap: "4",
3588
3560
  children: [
3589
3561
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
3590
3562
  className: "bg-surface-lower rounded-md",
@@ -3594,7 +3566,7 @@ var SupportTicketSystem = function() {
3594
3566
  children: [
3595
3567
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
3596
3568
  horizontal: true,
3597
- align: "space-between",
3569
+ justify: "between",
3598
3570
  children: [
3599
3571
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
3600
3572
  variant: "headingSm",
@@ -3621,12 +3593,12 @@ var SupportTicketSystem = function() {
3621
3593
  children: [
3622
3594
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
3623
3595
  horizontal: true,
3624
- align: "space-between",
3596
+ justify: "between",
3625
3597
  children: [
3626
3598
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
3627
3599
  horizontal: true,
3628
3600
  gap: "2",
3629
- blockAlign: "center",
3601
+ align: "center",
3630
3602
  children: [
3631
3603
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
3632
3604
  variant: "headingSm",
@@ -3657,7 +3629,6 @@ var SupportTicketSystem = function() {
3657
3629
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Divider, {}),
3658
3630
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
3659
3631
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Stack, {
3660
- gap: "4",
3661
3632
  children: [
3662
3633
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Text, {
3663
3634
  variant: "headingMd",
package/dist/cjs/stories/ContextualSaveBar.stories.js CHANGED
@@ -545,7 +545,7 @@ var CustomMessages = {
545
545
  children: field.type === "checkbox" ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
546
546
  horizontal: true,
547
547
  gap: "sm",
548
- blockAlign: "center",
548
+ align: "center",
549
549
  as: "label",
550
550
  children: [
551
551
  /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {