@heymantle/litho 0.0.14 → 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 (381) 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/README.md +52 -0
  6. package/dist/cjs/components/ActionList.js +33 -25
  7. package/dist/cjs/components/AnnouncementBar.js +115 -18
  8. package/dist/cjs/components/AnnouncementCard.js +269 -0
  9. package/dist/cjs/components/AppProvider.js +15 -2
  10. package/dist/cjs/components/Autocomplete.js +58 -36
  11. package/dist/cjs/components/Badge.js +28 -14
  12. package/dist/cjs/components/Banner.js +37 -27
  13. package/dist/cjs/components/Box.js +50 -38
  14. package/dist/cjs/components/Button.js +338 -109
  15. package/dist/cjs/components/ButtonGroup.js +27 -14
  16. package/dist/cjs/components/Card.js +311 -143
  17. package/dist/cjs/components/Checkbox.js +55 -47
  18. package/dist/cjs/components/CheckboxCard.js +222 -0
  19. package/dist/cjs/components/CheckboxCardGroup.js +384 -0
  20. package/dist/cjs/components/ChoiceList.js +21 -11
  21. package/dist/cjs/components/Code.js +22 -8
  22. package/dist/cjs/components/Collapsible.js +24 -11
  23. package/dist/cjs/components/ColorField.js +163 -38
  24. package/dist/cjs/components/ContextualSaveBar.js +13 -6
  25. package/dist/cjs/components/DatePicker.js +48 -37
  26. package/dist/cjs/components/Disclosure.js +57 -13
  27. package/dist/cjs/components/Divider.js +82 -18
  28. package/dist/cjs/components/DropZone.js +194 -68
  29. package/dist/cjs/components/EmptyState.js +18 -6
  30. package/dist/cjs/components/Filters.js +84 -36
  31. package/dist/cjs/components/FooterHelp.js +14 -4
  32. package/dist/cjs/components/Form.js +13 -2
  33. package/dist/cjs/components/Frame.js +57 -22
  34. package/dist/cjs/components/FrameSaveBar.js +37 -6
  35. package/dist/cjs/components/Grid.js +31 -15
  36. package/dist/cjs/components/HorizontalStack.js +38 -25
  37. package/dist/cjs/components/Icon.js +683 -61
  38. package/dist/cjs/components/Image.js +35 -22
  39. package/dist/cjs/components/InlineError.js +19 -10
  40. package/dist/cjs/components/Label.js +21 -12
  41. package/dist/cjs/components/Layout.js +37 -26
  42. package/dist/cjs/components/LayoutSection.js +84 -22
  43. package/dist/cjs/components/Link.js +35 -22
  44. package/dist/cjs/components/List.js +28 -12
  45. package/dist/cjs/components/Listbox.js +53 -31
  46. package/dist/cjs/components/Loading.js +14 -2
  47. package/dist/cjs/components/Modal.js +32 -39
  48. package/dist/cjs/components/Navigation.js +107 -36
  49. package/dist/cjs/components/Page.js +44 -31
  50. package/dist/cjs/components/Pagination.js +20 -5
  51. package/dist/cjs/components/Pane.js +67 -4
  52. package/dist/cjs/components/Popover.js +63 -30
  53. package/dist/cjs/components/PopoverManager.js +14 -1
  54. package/dist/cjs/components/ProgressBar.js +28 -15
  55. package/dist/cjs/components/RadioButton.js +32 -24
  56. package/dist/cjs/components/RadioButtonCard.js +92 -67
  57. package/dist/cjs/components/RadioButtonCardGroup.js +379 -0
  58. package/dist/cjs/components/RangeSlider.js +34 -26
  59. package/dist/cjs/components/ResourceList.js +28 -14
  60. package/dist/cjs/components/Select.js +38 -26
  61. package/dist/cjs/components/SkeletonText.js +33 -18
  62. package/dist/cjs/components/Spinner.js +24 -12
  63. package/dist/cjs/components/Stack.js +131 -71
  64. package/dist/cjs/components/TabNavigation.js +27 -1
  65. package/dist/cjs/components/Table.js +85 -29
  66. package/dist/cjs/components/Tabs.js +84 -24
  67. package/dist/cjs/components/Tag.js +37 -16
  68. package/dist/cjs/components/Text.js +32 -18
  69. package/dist/cjs/components/TextField.js +119 -69
  70. package/dist/cjs/components/Thumbnail.js +25 -11
  71. package/dist/cjs/components/TimePicker.js +22 -1
  72. package/dist/cjs/components/Tip.js +140 -25
  73. package/dist/cjs/components/ToastNotification.js +107 -34
  74. package/dist/cjs/components/ToastProvider.js +13 -3
  75. package/dist/cjs/components/Tooltip.js +50 -41
  76. package/dist/cjs/components/TopBar.js +83 -9
  77. package/dist/cjs/components/VerticalStack.js +31 -16
  78. package/dist/cjs/index.js +24 -0
  79. package/dist/cjs/playwright.config.js +114 -0
  80. package/dist/cjs/stories/Autocomplete.stories.js +10 -10
  81. package/dist/cjs/stories/Checkbox.stories.js +6 -8
  82. package/dist/cjs/stories/CheckboxCardGroup.stories.js +459 -0
  83. package/dist/cjs/stories/Collapsible.stories.js +11 -11
  84. package/dist/cjs/stories/ColorField.stories.js +2 -3
  85. package/dist/cjs/stories/ComplexExamples.stories.js +48 -77
  86. package/dist/cjs/stories/ContextualSaveBar.stories.js +1 -1
  87. package/dist/cjs/stories/Divider.stories.js +15 -16
  88. package/dist/cjs/stories/DropZone.stories.js +3 -3
  89. package/dist/cjs/stories/FooterHelp.stories.js +3 -4
  90. package/dist/cjs/stories/Form.stories.js +2 -4
  91. package/dist/cjs/stories/Grid.stories.js +24 -33
  92. package/dist/cjs/stories/Icon.stories.js +22 -23
  93. package/dist/cjs/stories/Image.stories.js +12 -15
  94. package/dist/cjs/stories/InlineError.stories.js +0 -1
  95. package/dist/cjs/stories/Layout.stories.js +96 -2
  96. package/dist/cjs/stories/LayoutSection.stories.js +13 -18
  97. package/dist/cjs/stories/List.stories.js +24 -28
  98. package/dist/cjs/stories/Listbox.stories.js +2 -2
  99. package/dist/cjs/stories/Loading.stories.js +21 -25
  100. package/dist/cjs/stories/Modal.stories.js +0 -1
  101. package/dist/cjs/stories/Pagination.stories.js +4 -4
  102. package/dist/cjs/stories/Pane.stories.js +10 -18
  103. package/dist/cjs/stories/Popover.stories.js +7 -7
  104. package/dist/cjs/stories/PopoverManager.stories.js +9 -9
  105. package/dist/cjs/stories/ProgressBar.stories.js +8 -8
  106. package/dist/cjs/stories/RadioButton.stories.js +2 -2
  107. package/dist/cjs/stories/RadioButtonCard.stories.js +2 -2
  108. package/dist/cjs/stories/RadioButtonCardGroup.stories.js +502 -0
  109. package/dist/cjs/stories/RangeSlider.stories.js +1 -3
  110. package/dist/cjs/stories/ResourceList.stories.js +13 -13
  111. package/dist/cjs/stories/Spinner.stories.js +9 -9
  112. package/dist/cjs/stories/Stack.stories.js +233 -51
  113. package/dist/cjs/stories/Tabs.stories.js +2 -2
  114. package/dist/cjs/stories/Tag.stories.js +1 -1
  115. package/dist/cjs/stories/Thumbnail.stories.js +17 -18
  116. package/dist/cjs/stories/TimePicker.stories.js +0 -5
  117. package/dist/cjs/stories/Tip.stories.js +1 -1
  118. package/dist/cjs/styles/Table.js +2 -7
  119. package/dist/cjs/tests/visual/stories.spec.js +637 -0
  120. package/dist/cjs/utilities/dates.js +7 -7
  121. package/dist/esm/components/ActionList.js +33 -25
  122. package/dist/esm/components/AnnouncementBar.js +115 -18
  123. package/dist/esm/components/AnnouncementCard.js +254 -0
  124. package/dist/esm/components/AppProvider.js +15 -2
  125. package/dist/esm/components/Autocomplete.js +58 -36
  126. package/dist/esm/components/Badge.js +28 -14
  127. package/dist/esm/components/Banner.js +37 -27
  128. package/dist/esm/components/Box.js +50 -38
  129. package/dist/esm/components/Button.js +338 -109
  130. package/dist/esm/components/ButtonGroup.js +27 -14
  131. package/dist/esm/components/Card.js +300 -140
  132. package/dist/esm/components/Checkbox.js +55 -47
  133. package/dist/esm/components/CheckboxCard.js +207 -0
  134. package/dist/esm/components/CheckboxCardGroup.js +370 -0
  135. package/dist/esm/components/ChoiceList.js +21 -11
  136. package/dist/esm/components/Code.js +22 -8
  137. package/dist/esm/components/Collapsible.js +24 -11
  138. package/dist/esm/components/ColorField.js +165 -40
  139. package/dist/esm/components/ContextualSaveBar.js +13 -6
  140. package/dist/esm/components/DatePicker.js +48 -37
  141. package/dist/esm/components/Disclosure.js +50 -6
  142. package/dist/esm/components/Divider.js +78 -20
  143. package/dist/esm/components/DropZone.js +194 -68
  144. package/dist/esm/components/EmptyState.js +18 -6
  145. package/dist/esm/components/Filters.js +84 -36
  146. package/dist/esm/components/FooterHelp.js +14 -4
  147. package/dist/esm/components/Form.js +13 -2
  148. package/dist/esm/components/Frame.js +57 -22
  149. package/dist/esm/components/FrameSaveBar.js +37 -6
  150. package/dist/esm/components/Grid.js +31 -15
  151. package/dist/esm/components/HorizontalStack.js +38 -25
  152. package/dist/esm/components/Icon.js +681 -62
  153. package/dist/esm/components/Image.js +35 -22
  154. package/dist/esm/components/InlineError.js +19 -10
  155. package/dist/esm/components/Label.js +21 -12
  156. package/dist/esm/components/Layout.js +62 -27
  157. package/dist/esm/components/LayoutSection.js +84 -22
  158. package/dist/esm/components/Link.js +35 -22
  159. package/dist/esm/components/List.js +28 -12
  160. package/dist/esm/components/Listbox.js +53 -31
  161. package/dist/esm/components/Loading.js +14 -2
  162. package/dist/esm/components/Modal.js +79 -40
  163. package/dist/esm/components/Navigation.js +107 -36
  164. package/dist/esm/components/Page.js +44 -31
  165. package/dist/esm/components/Pagination.js +20 -5
  166. package/dist/esm/components/Pane.js +67 -4
  167. package/dist/esm/components/Popover.js +63 -30
  168. package/dist/esm/components/PopoverManager.js +14 -1
  169. package/dist/esm/components/ProgressBar.js +28 -15
  170. package/dist/esm/components/RadioButton.js +32 -24
  171. package/dist/esm/components/RadioButtonCard.js +92 -67
  172. package/dist/esm/components/RadioButtonCardGroup.js +364 -0
  173. package/dist/esm/components/RangeSlider.js +34 -26
  174. package/dist/esm/components/ResourceList.js +28 -14
  175. package/dist/esm/components/Select.js +38 -26
  176. package/dist/esm/components/SkeletonText.js +33 -18
  177. package/dist/esm/components/Spinner.js +24 -12
  178. package/dist/esm/components/Stack.js +131 -71
  179. package/dist/esm/components/TabNavigation.js +27 -1
  180. package/dist/esm/components/Table.js +85 -29
  181. package/dist/esm/components/Tabs.js +84 -24
  182. package/dist/esm/components/Tag.js +37 -16
  183. package/dist/esm/components/Text.js +32 -18
  184. package/dist/esm/components/TextField.js +119 -69
  185. package/dist/esm/components/Thumbnail.js +25 -11
  186. package/dist/esm/components/TimePicker.js +22 -1
  187. package/dist/esm/components/Tip.js +140 -25
  188. package/dist/esm/components/ToastNotification.js +107 -34
  189. package/dist/esm/components/ToastProvider.js +13 -3
  190. package/dist/esm/components/Tooltip.js +50 -41
  191. package/dist/esm/components/TopBar.js +83 -9
  192. package/dist/esm/components/VerticalStack.js +31 -16
  193. package/dist/esm/index.js +6 -0
  194. package/dist/esm/playwright.config.js +104 -0
  195. package/dist/esm/stories/Autocomplete.stories.js +10 -10
  196. package/dist/esm/stories/Checkbox.stories.js +6 -8
  197. package/dist/esm/stories/CheckboxCardGroup.stories.js +421 -0
  198. package/dist/esm/stories/Collapsible.stories.js +11 -11
  199. package/dist/esm/stories/ColorField.stories.js +2 -3
  200. package/dist/esm/stories/ComplexExamples.stories.js +48 -77
  201. package/dist/esm/stories/ContextualSaveBar.stories.js +1 -1
  202. package/dist/esm/stories/Divider.stories.js +15 -16
  203. package/dist/esm/stories/DropZone.stories.js +3 -3
  204. package/dist/esm/stories/FooterHelp.stories.js +3 -4
  205. package/dist/esm/stories/Form.stories.js +2 -4
  206. package/dist/esm/stories/Grid.stories.js +24 -33
  207. package/dist/esm/stories/Icon.stories.js +22 -23
  208. package/dist/esm/stories/Image.stories.js +12 -15
  209. package/dist/esm/stories/InlineError.stories.js +0 -1
  210. package/dist/esm/stories/Layout.stories.js +93 -2
  211. package/dist/esm/stories/LayoutSection.stories.js +13 -18
  212. package/dist/esm/stories/List.stories.js +24 -28
  213. package/dist/esm/stories/Listbox.stories.js +2 -2
  214. package/dist/esm/stories/Loading.stories.js +21 -25
  215. package/dist/esm/stories/Modal.stories.js +0 -1
  216. package/dist/esm/stories/Pagination.stories.js +4 -4
  217. package/dist/esm/stories/Pane.stories.js +10 -18
  218. package/dist/esm/stories/Popover.stories.js +7 -7
  219. package/dist/esm/stories/PopoverManager.stories.js +9 -9
  220. package/dist/esm/stories/ProgressBar.stories.js +8 -8
  221. package/dist/esm/stories/RadioButton.stories.js +2 -2
  222. package/dist/esm/stories/RadioButtonCard.stories.js +2 -2
  223. package/dist/esm/stories/RadioButtonCardGroup.stories.js +461 -0
  224. package/dist/esm/stories/RangeSlider.stories.js +1 -3
  225. package/dist/esm/stories/ResourceList.stories.js +13 -13
  226. package/dist/esm/stories/Spinner.stories.js +9 -9
  227. package/dist/esm/stories/Stack.stories.js +224 -51
  228. package/dist/esm/stories/Tabs.stories.js +2 -2
  229. package/dist/esm/stories/Tag.stories.js +1 -1
  230. package/dist/esm/stories/Thumbnail.stories.js +17 -18
  231. package/dist/esm/stories/TimePicker.stories.js +0 -5
  232. package/dist/esm/stories/Tip.stories.js +1 -1
  233. package/dist/esm/styles/Table.js +2 -7
  234. package/dist/esm/tests/visual/stories.spec.js +633 -0
  235. package/dist/esm/utilities/dates.js +7 -7
  236. package/dist/types/components/ActionList.d.ts +1 -31
  237. package/dist/types/components/ActionList.d.ts.map +1 -1
  238. package/dist/types/components/AnnouncementBar.d.ts +1 -19
  239. package/dist/types/components/AnnouncementBar.d.ts.map +1 -1
  240. package/dist/types/components/AnnouncementCard.d.ts +3 -0
  241. package/dist/types/components/AnnouncementCard.d.ts.map +1 -0
  242. package/dist/types/components/AppProvider.d.ts +14 -1
  243. package/dist/types/components/AppProvider.d.ts.map +1 -1
  244. package/dist/types/components/Autocomplete.d.ts +1 -71
  245. package/dist/types/components/Autocomplete.d.ts.map +1 -1
  246. package/dist/types/components/Badge.d.ts +1 -19
  247. package/dist/types/components/Badge.d.ts.map +1 -1
  248. package/dist/types/components/Banner.d.ts +1 -37
  249. package/dist/types/components/Banner.d.ts.map +1 -1
  250. package/dist/types/components/Box.d.ts +1 -68
  251. package/dist/types/components/Box.d.ts.map +1 -1
  252. package/dist/types/components/Button.d.ts +1 -131
  253. package/dist/types/components/Button.d.ts.map +1 -1
  254. package/dist/types/components/ButtonGroup.d.ts +1 -22
  255. package/dist/types/components/ButtonGroup.d.ts.map +1 -1
  256. package/dist/types/components/Card.d.ts +54 -59
  257. package/dist/types/components/Card.d.ts.map +1 -1
  258. package/dist/types/components/Checkbox.d.ts +1 -63
  259. package/dist/types/components/Checkbox.d.ts.map +1 -1
  260. package/dist/types/components/CheckboxCard.d.ts +3 -0
  261. package/dist/types/components/CheckboxCard.d.ts.map +1 -0
  262. package/dist/types/components/CheckboxCardGroup.d.ts +3 -0
  263. package/dist/types/components/CheckboxCardGroup.d.ts.map +1 -0
  264. package/dist/types/components/ChoiceList.d.ts +1 -42
  265. package/dist/types/components/ChoiceList.d.ts.map +1 -1
  266. package/dist/types/components/Code.d.ts +1 -26
  267. package/dist/types/components/Code.d.ts.map +1 -1
  268. package/dist/types/components/Collapsible.d.ts +1 -15
  269. package/dist/types/components/Collapsible.d.ts.map +1 -1
  270. package/dist/types/components/ColorField.d.ts +13 -34
  271. package/dist/types/components/ColorField.d.ts.map +1 -1
  272. package/dist/types/components/ContextualSaveBar.d.ts +13 -6
  273. package/dist/types/components/ContextualSaveBar.d.ts.map +1 -1
  274. package/dist/types/components/DatePicker.d.ts +1 -64
  275. package/dist/types/components/DatePicker.d.ts.map +1 -1
  276. package/dist/types/components/Disclosure.d.ts +1 -25
  277. package/dist/types/components/Disclosure.d.ts.map +1 -1
  278. package/dist/types/components/Divider.d.ts +1 -19
  279. package/dist/types/components/Divider.d.ts.map +1 -1
  280. package/dist/types/components/DropZone.d.ts +3 -62
  281. package/dist/types/components/DropZone.d.ts.map +1 -1
  282. package/dist/types/components/EmptyState.d.ts +1 -50
  283. package/dist/types/components/EmptyState.d.ts.map +1 -1
  284. package/dist/types/components/Filters.d.ts +13 -68
  285. package/dist/types/components/Filters.d.ts.map +1 -1
  286. package/dist/types/components/FooterHelp.d.ts +14 -4
  287. package/dist/types/components/FooterHelp.d.ts.map +1 -1
  288. package/dist/types/components/Form.d.ts +13 -2
  289. package/dist/types/components/Form.d.ts.map +1 -1
  290. package/dist/types/components/Frame.d.ts +15 -36
  291. package/dist/types/components/Frame.d.ts.map +1 -1
  292. package/dist/types/components/FrameSaveBar.d.ts +3 -6
  293. package/dist/types/components/FrameSaveBar.d.ts.map +1 -1
  294. package/dist/types/components/Grid.d.ts +5 -21
  295. package/dist/types/components/Grid.d.ts.map +1 -1
  296. package/dist/types/components/HorizontalStack.d.ts +1 -34
  297. package/dist/types/components/HorizontalStack.d.ts.map +1 -1
  298. package/dist/types/components/Icon.d.ts +1 -41
  299. package/dist/types/components/Icon.d.ts.map +1 -1
  300. package/dist/types/components/Image.d.ts +1 -43
  301. package/dist/types/components/Image.d.ts.map +1 -1
  302. package/dist/types/components/InlineError.d.ts +1 -20
  303. package/dist/types/components/InlineError.d.ts.map +1 -1
  304. package/dist/types/components/Label.d.ts +1 -26
  305. package/dist/types/components/Label.d.ts.map +1 -1
  306. package/dist/types/components/Layout.d.ts +24 -15
  307. package/dist/types/components/Layout.d.ts.map +1 -1
  308. package/dist/types/components/LayoutSection.d.ts +1 -19
  309. package/dist/types/components/LayoutSection.d.ts.map +1 -1
  310. package/dist/types/components/Link.d.ts +1 -37
  311. package/dist/types/components/Link.d.ts.map +1 -1
  312. package/dist/types/components/List.d.ts +5 -17
  313. package/dist/types/components/List.d.ts.map +1 -1
  314. package/dist/types/components/Listbox.d.ts +1 -32
  315. package/dist/types/components/Listbox.d.ts.map +1 -1
  316. package/dist/types/components/Loading.d.ts +14 -2
  317. package/dist/types/components/Loading.d.ts.map +1 -1
  318. package/dist/types/components/Modal.d.ts +26 -35
  319. package/dist/types/components/Modal.d.ts.map +1 -1
  320. package/dist/types/components/Navigation.d.ts +1 -25
  321. package/dist/types/components/Navigation.d.ts.map +1 -1
  322. package/dist/types/components/Page.d.ts +1 -57
  323. package/dist/types/components/Page.d.ts.map +1 -1
  324. package/dist/types/components/Pagination.d.ts +13 -3
  325. package/dist/types/components/Pagination.d.ts.map +1 -1
  326. package/dist/types/components/Pane.d.ts +55 -3
  327. package/dist/types/components/Pane.d.ts.map +1 -1
  328. package/dist/types/components/Popover.d.ts +5 -35
  329. package/dist/types/components/Popover.d.ts.map +1 -1
  330. package/dist/types/components/PopoverManager.d.ts.map +1 -1
  331. package/dist/types/components/ProgressBar.d.ts +1 -22
  332. package/dist/types/components/ProgressBar.d.ts.map +1 -1
  333. package/dist/types/components/RadioButton.d.ts +1 -37
  334. package/dist/types/components/RadioButton.d.ts.map +1 -1
  335. package/dist/types/components/RadioButtonCard.d.ts +1 -39
  336. package/dist/types/components/RadioButtonCard.d.ts.map +1 -1
  337. package/dist/types/components/RadioButtonCardGroup.d.ts +3 -0
  338. package/dist/types/components/RadioButtonCardGroup.d.ts.map +1 -0
  339. package/dist/types/components/RangeSlider.d.ts +1 -42
  340. package/dist/types/components/RangeSlider.d.ts.map +1 -1
  341. package/dist/types/components/ResourceList.d.ts +5 -30
  342. package/dist/types/components/ResourceList.d.ts.map +1 -1
  343. package/dist/types/components/Select.d.ts +1 -46
  344. package/dist/types/components/Select.d.ts.map +1 -1
  345. package/dist/types/components/SkeletonText.d.ts +1 -26
  346. package/dist/types/components/SkeletonText.d.ts.map +1 -1
  347. package/dist/types/components/Spinner.d.ts +1 -16
  348. package/dist/types/components/Spinner.d.ts.map +1 -1
  349. package/dist/types/components/Stack.d.ts +1 -47
  350. package/dist/types/components/Stack.d.ts.map +1 -1
  351. package/dist/types/components/TabNavigation.d.ts.map +1 -1
  352. package/dist/types/components/Table.d.ts +13 -58
  353. package/dist/types/components/Table.d.ts.map +1 -1
  354. package/dist/types/components/Tabs.d.ts +40 -34
  355. package/dist/types/components/Tabs.d.ts.map +1 -1
  356. package/dist/types/components/Tag.d.ts +1 -24
  357. package/dist/types/components/Tag.d.ts.map +1 -1
  358. package/dist/types/components/Text.d.ts +1 -30
  359. package/dist/types/components/Text.d.ts.map +1 -1
  360. package/dist/types/components/TextField.d.ts +1 -109
  361. package/dist/types/components/TextField.d.ts.map +1 -1
  362. package/dist/types/components/Thumbnail.d.ts +1 -16
  363. package/dist/types/components/Thumbnail.d.ts.map +1 -1
  364. package/dist/types/components/TimePicker.d.ts +28 -1
  365. package/dist/types/components/TimePicker.d.ts.map +1 -1
  366. package/dist/types/components/Tip.d.ts +1 -21
  367. package/dist/types/components/Tip.d.ts.map +1 -1
  368. package/dist/types/components/ToastNotification.d.ts +1 -34
  369. package/dist/types/components/ToastNotification.d.ts.map +1 -1
  370. package/dist/types/components/ToastProvider.d.ts +13 -3
  371. package/dist/types/components/ToastProvider.d.ts.map +1 -1
  372. package/dist/types/components/Tooltip.d.ts +1 -54
  373. package/dist/types/components/Tooltip.d.ts.map +1 -1
  374. package/dist/types/components/TopBar.d.ts +1 -19
  375. package/dist/types/components/TopBar.d.ts.map +1 -1
  376. package/dist/types/components/VerticalStack.d.ts +1 -25
  377. package/dist/types/components/VerticalStack.d.ts.map +1 -1
  378. package/dist/types/index.d.ts +6 -0
  379. package/dist/types/styles/Table.d.ts.map +1 -1
  380. package/index.css +76 -14
  381. package/package.json +15 -5
package/dist/esm/stories/Loading.stories.js CHANGED
@@ -139,11 +139,11 @@ export var Sizes = {
139
139
  return /*#__PURE__*/ _jsxs(Stack, {
140
140
  horizontal: true,
141
141
  gap: "sm",
142
- blockAlign: "center",
142
+ align: "center",
143
143
  children: [
144
144
  /*#__PURE__*/ _jsxs(Stack, {
145
145
  gap: "sm",
146
- inlineAlign: "center",
146
+ align: "center",
147
147
  children: [
148
148
  /*#__PURE__*/ _jsx(Loading, {
149
149
  size: "small"
@@ -155,7 +155,7 @@ export var Sizes = {
155
155
  }),
156
156
  /*#__PURE__*/ _jsxs(Stack, {
157
157
  gap: "sm",
158
- inlineAlign: "center",
158
+ align: "center",
159
159
  children: [
160
160
  /*#__PURE__*/ _jsx(Loading, {
161
161
  size: "medium"
@@ -167,7 +167,7 @@ export var Sizes = {
167
167
  }),
168
168
  /*#__PURE__*/ _jsxs(Stack, {
169
169
  gap: "sm",
170
- inlineAlign: "center",
170
+ align: "center",
171
171
  children: [
172
172
  /*#__PURE__*/ _jsx(Loading, {
173
173
  size: "large"
@@ -195,7 +195,7 @@ export var Colors = {
195
195
  gap: "lg",
196
196
  children: [
197
197
  /*#__PURE__*/ _jsxs(Stack, {
198
- inlineAlign: "center",
198
+ align: "center",
199
199
  children: [
200
200
  /*#__PURE__*/ _jsx(Loading, {
201
201
  color: "default"
@@ -206,7 +206,7 @@ export var Colors = {
206
206
  ]
207
207
  }),
208
208
  /*#__PURE__*/ _jsxs(Stack, {
209
- inlineAlign: "center",
209
+ align: "center",
210
210
  children: [
211
211
  /*#__PURE__*/ _jsx(Loading, {
212
212
  color: "subdued"
@@ -217,8 +217,7 @@ export var Colors = {
217
217
  ]
218
218
  }),
219
219
  /*#__PURE__*/ _jsxs(Stack, {
220
- gap: "md",
221
- inlineAlign: "center",
220
+ align: "center",
222
221
  as: Box,
223
222
  padding: "8",
224
223
  background: "bg-surface-dark",
@@ -249,7 +248,7 @@ export var InlineLoading = {
249
248
  return /*#__PURE__*/ _jsxs(Stack, {
250
249
  horizontal: true,
251
250
  gap: "sm",
252
- blockAlign: "center",
251
+ align: "center",
253
252
  children: [
254
253
  /*#__PURE__*/ _jsx(Loading, {
255
254
  size: "small"
@@ -274,9 +273,8 @@ export var CardLoading = {
274
273
  title: "User Profile",
275
274
  padded: true,
276
275
  children: /*#__PURE__*/ _jsxs(Stack, {
277
- gap: "4",
278
- inlineAlign: "center",
279
- blockAlign: "center",
276
+ align: "center",
277
+ justify: "center",
280
278
  as: Box,
281
279
  padding: "12",
282
280
  children: [
@@ -317,7 +315,7 @@ export var OverlayLoading = {
317
315
  children: [
318
316
  /*#__PURE__*/ _jsxs(Stack, {
319
317
  horizontal: true,
320
- align: "space-between",
318
+ justify: "between",
321
319
  children: [
322
320
  /*#__PURE__*/ _jsx(Text, {
323
321
  variant: "headingSm",
@@ -352,9 +350,8 @@ export var OverlayLoading = {
352
350
  ]
353
351
  }),
354
352
  isLoading && /*#__PURE__*/ _jsxs(Stack, {
355
- gap: "4",
356
- inlineAlign: "center",
357
- blockAlign: "center",
353
+ align: "center",
354
+ justify: "center",
358
355
  as: Box,
359
356
  position: "absolute",
360
357
  insetBlockStart: "0",
@@ -415,7 +412,7 @@ export var ButtonLoading = {
415
412
  children: loadingStates.save ? /*#__PURE__*/ _jsxs(Stack, {
416
413
  horizontal: true,
417
414
  gap: "sm",
418
- blockAlign: "center",
415
+ align: "center",
419
416
  children: [
420
417
  /*#__PURE__*/ _jsx(Loading, {
421
418
  size: "small",
@@ -435,7 +432,7 @@ export var ButtonLoading = {
435
432
  children: loadingStates.upload ? /*#__PURE__*/ _jsxs(Stack, {
436
433
  horizontal: true,
437
434
  gap: "sm",
438
- blockAlign: "center",
435
+ align: "center",
439
436
  children: [
440
437
  /*#__PURE__*/ _jsx(Loading, {
441
438
  size: "small"
@@ -454,7 +451,7 @@ export var ButtonLoading = {
454
451
  children: loadingStates.process ? /*#__PURE__*/ _jsxs(Stack, {
455
452
  horizontal: true,
456
453
  gap: "sm",
457
- blockAlign: "center",
454
+ align: "center",
458
455
  children: [
459
456
  /*#__PURE__*/ _jsx(Loading, {
460
457
  size: "small"
@@ -494,8 +491,7 @@ export var TableLoading = {
494
491
  })
495
492
  }),
496
493
  loadingTable ? /*#__PURE__*/ _jsxs(Stack, {
497
- inlineAlign: "center",
498
- blockAlign: "center",
494
+ align: "center",
499
495
  as: Box,
500
496
  padding: "16",
501
497
  children: [
@@ -675,7 +671,7 @@ export var ProgressiveLoading = {
675
671
  ]
676
672
  }),
677
673
  /*#__PURE__*/ _jsx(Stack, {
678
- inlineAlign: "center",
674
+ align: "center",
679
675
  as: Box,
680
676
  padding: "8",
681
677
  background: "subdued",
@@ -755,7 +751,7 @@ export var SkeletonLoading = {
755
751
  children: [
756
752
  /*#__PURE__*/ _jsxs(Stack, {
757
753
  horizontal: true,
758
- blockAlign: "center",
754
+ align: "center",
759
755
  children: [
760
756
  /*#__PURE__*/ _jsx(Loading, {
761
757
  size: "small"
@@ -820,8 +816,8 @@ export var SkeletonLoading = {
820
816
  children: "In this article, we'll explore the key concepts that make interfaces both beautiful and functional, from color theory and typography to interaction design and usability testing."
821
817
  }),
822
818
  /*#__PURE__*/ _jsx(Stack, {
823
- inlineAlign: "center",
824
- blockAlign: "center",
819
+ align: "center",
820
+ justify: "center",
825
821
  as: Box,
826
822
  style: {
827
823
  height: '120px',
package/dist/esm/stories/Modal.stories.js CHANGED
@@ -271,7 +271,6 @@ export var FullScreen = {
271
271
  }),
272
272
  /*#__PURE__*/ _jsxs(Grid, {
273
273
  columns: 2,
274
- gap: "4",
275
274
  children: [
276
275
  /*#__PURE__*/ _jsx(TextField, {
277
276
  label: "Field 1"
package/dist/esm/stories/Pagination.stories.js CHANGED
@@ -264,8 +264,8 @@ export var InTable = {
264
264
  }),
265
265
  /*#__PURE__*/ _jsxs(Stack, {
266
266
  horizontal: true,
267
- align: "space-between",
268
- blockAlign: "center",
267
+ justify: "between",
268
+ align: "center",
269
269
  className: "pt-4 border-t border-gray-200",
270
270
  children: [
271
271
  /*#__PURE__*/ _jsxs(Text, {
@@ -314,8 +314,8 @@ export var WithResultsInfo = {
314
314
  children: [
315
315
  /*#__PURE__*/ _jsxs(Stack, {
316
316
  horizontal: true,
317
- align: "space-between",
318
- blockAlign: "center",
317
+ justify: "between",
318
+ align: "center",
319
319
  children: [
320
320
  /*#__PURE__*/ _jsxs(Text, {
321
321
  variant: "bodySm",
package/dist/esm/stories/Pane.stories.js CHANGED
@@ -494,7 +494,7 @@ export var WithActions = {
494
494
  padding: "4",
495
495
  children: /*#__PURE__*/ _jsxs(Stack, {
496
496
  horizontal: true,
497
- align: "space-between",
497
+ justify: "between",
498
498
  children: [
499
499
  /*#__PURE__*/ _jsx(Text, {
500
500
  variant: "bodySm",
@@ -796,8 +796,8 @@ export var DetailViewPane = {
796
796
  borderRadius: "1",
797
797
  children: /*#__PURE__*/ _jsxs(Stack, {
798
798
  horizontal: true,
799
- align: "space-between",
800
- blockAlign: "center",
799
+ justify: "between",
800
+ align: "center",
801
801
  children: [
802
802
  /*#__PURE__*/ _jsxs(Stack, {
803
803
  gap: "xs",
@@ -821,7 +821,7 @@ export var DetailViewPane = {
821
821
  }),
822
822
  /*#__PURE__*/ _jsxs(Stack, {
823
823
  horizontal: true,
824
- blockAlign: "center",
824
+ align: "center",
825
825
  children: [
826
826
  /*#__PURE__*/ _jsx(Box, {
827
827
  as: "span",
@@ -888,7 +888,6 @@ export var DetailViewPane = {
888
888
  }),
889
889
  /*#__PURE__*/ _jsxs(Grid, {
890
890
  columns: 2,
891
- gap: "4",
892
891
  children: [
893
892
  /*#__PURE__*/ _jsxs(Stack, {
894
893
  gap: "xs",
@@ -977,7 +976,7 @@ export var DetailViewPane = {
977
976
  borderRadius: "1",
978
977
  children: /*#__PURE__*/ _jsxs(Stack, {
979
978
  horizontal: true,
980
- align: "space-between",
979
+ justify: "between",
981
980
  children: [
982
981
  /*#__PURE__*/ _jsxs(Stack, {
983
982
  gap: "xs",
@@ -1167,8 +1166,8 @@ export var StackedPanes = {
1167
1166
  borderRadius: "1",
1168
1167
  children: /*#__PURE__*/ _jsxs(Stack, {
1169
1168
  horizontal: true,
1170
- align: "space-between",
1171
- blockAlign: "center",
1169
+ justify: "between",
1170
+ align: "center",
1172
1171
  children: [
1173
1172
  /*#__PURE__*/ _jsx(Text, {
1174
1173
  children: category
@@ -1348,14 +1347,12 @@ export var AskModal = {
1348
1347
  title: "Ask Modal Example",
1349
1348
  padded: true,
1350
1349
  children: /*#__PURE__*/ _jsxs(Stack, {
1351
- gap: "4",
1352
1350
  children: [
1353
1351
  /*#__PURE__*/ _jsx(Text, {
1354
1352
  children: 'This example demonstrates the AskModal pane type. It creates a single "Ask" tab that can be reused. Opening multiple times will switch to the existing tab instead of creating new ones. The tab title is always "Ask" regardless of the context.'
1355
1353
  }),
1356
1354
  /*#__PURE__*/ _jsxs(Stack, {
1357
1355
  horizontal: true,
1358
- gap: "4",
1359
1356
  children: [
1360
1357
  /*#__PURE__*/ _jsx(Button, {
1361
1358
  primary: askContext === "ask",
@@ -1403,7 +1400,6 @@ export var AskModal = {
1403
1400
  children: /*#__PURE__*/ _jsx(Box, {
1404
1401
  padding: "4",
1405
1402
  children: /*#__PURE__*/ _jsxs(Stack, {
1406
- gap: "4",
1407
1403
  children: [
1408
1404
  /*#__PURE__*/ _jsxs(Text, {
1409
1405
  children: [
@@ -1428,7 +1424,6 @@ export var AskModal = {
1428
1424
  padding: "4",
1429
1425
  children: /*#__PURE__*/ _jsxs(Stack, {
1430
1426
  horizontal: true,
1431
- gap: "4",
1432
1427
  align: "end",
1433
1428
  children: [
1434
1429
  /*#__PURE__*/ _jsx(Button, {
@@ -1544,7 +1539,6 @@ export var PinnedTickets = {
1544
1539
  title: "Pinned Tickets Example",
1545
1540
  padded: true,
1546
1541
  children: /*#__PURE__*/ _jsxs(Stack, {
1547
- gap: "4",
1548
1542
  children: [
1549
1543
  /*#__PURE__*/ _jsx(Text, {
1550
1544
  children: "This example demonstrates the PinnedTicketsPane type. Each ticket creates its own tab with the customer name. Multiple tickets can be pinned simultaneously, each getting their own tab. Opening the same ticket multiple times will switch to the existing tab instead of creating duplicates."
@@ -1593,7 +1587,6 @@ export var PinnedTickets = {
1593
1587
  children: /*#__PURE__*/ _jsx(Box, {
1594
1588
  padding: "4",
1595
1589
  children: /*#__PURE__*/ _jsxs(Stack, {
1596
- gap: "4",
1597
1590
  children: [
1598
1591
  /*#__PURE__*/ _jsxs(Text, {
1599
1592
  children: [
@@ -1618,7 +1611,6 @@ export var PinnedTickets = {
1618
1611
  padding: "4",
1619
1612
  children: /*#__PURE__*/ _jsxs(Stack, {
1620
1613
  horizontal: true,
1621
- gap: "4",
1622
1614
  align: "end",
1623
1615
  children: [
1624
1616
  /*#__PURE__*/ _jsx(Button, {
@@ -1691,7 +1683,7 @@ export var CustomLayout = {
1691
1683
  /*#__PURE__*/ _jsxs(Stack, {
1692
1684
  horizontal: true,
1693
1685
  gap: "sm",
1694
- blockAlign: "center",
1686
+ align: "center",
1695
1687
  children: [
1696
1688
  /*#__PURE__*/ _jsx(Box, {
1697
1689
  as: "div",
@@ -1774,8 +1766,8 @@ export var CustomLayout = {
1774
1766
  padding: "4",
1775
1767
  children: /*#__PURE__*/ _jsxs(Stack, {
1776
1768
  horizontal: true,
1777
- align: "space-between",
1778
- blockAlign: "center",
1769
+ justify: "between",
1770
+ align: "center",
1779
1771
  children: [
1780
1772
  /*#__PURE__*/ _jsx(Text, {
1781
1773
  variant: "bodySm",
package/dist/esm/stories/Popover.stories.js CHANGED
@@ -248,7 +248,7 @@ export var Alignments = {
248
248
  },
249
249
  preferredAlignment: "center",
250
250
  children: /*#__PURE__*/ _jsx(Stack, {
251
- inlineAlign: "center",
251
+ align: "center",
252
252
  as: Box,
253
253
  padding: "4",
254
254
  minInlineSize: "200px",
@@ -271,7 +271,7 @@ export var Alignments = {
271
271
  },
272
272
  preferredAlignment: "right",
273
273
  children: /*#__PURE__*/ _jsx(Stack, {
274
- inlineAlign: "end",
274
+ align: "end",
275
275
  as: Box,
276
276
  padding: "4",
277
277
  minInlineSize: "200px",
@@ -329,7 +329,7 @@ export var WithForm = {
329
329
  /*#__PURE__*/ _jsxs(Stack, {
330
330
  horizontal: true,
331
331
  gap: "sm",
332
- inlineAlign: "end",
332
+ align: "end",
333
333
  children: [
334
334
  /*#__PURE__*/ _jsx(Button, {
335
335
  onClick: function() {
@@ -480,7 +480,7 @@ export var CustomContent = {
480
480
  children: [
481
481
  /*#__PURE__*/ _jsxs(Stack, {
482
482
  horizontal: true,
483
- align: "space-between",
483
+ justify: "between",
484
484
  children: [
485
485
  /*#__PURE__*/ _jsx(Text, {
486
486
  color: "subdued",
@@ -493,7 +493,7 @@ export var CustomContent = {
493
493
  }),
494
494
  /*#__PURE__*/ _jsxs(Stack, {
495
495
  horizontal: true,
496
- align: "space-between",
496
+ justify: "between",
497
497
  children: [
498
498
  /*#__PURE__*/ _jsx(Text, {
499
499
  color: "subdued",
@@ -506,7 +506,7 @@ export var CustomContent = {
506
506
  }),
507
507
  /*#__PURE__*/ _jsxs(Stack, {
508
508
  horizontal: true,
509
- align: "space-between",
509
+ justify: "between",
510
510
  children: [
511
511
  /*#__PURE__*/ _jsx(Text, {
512
512
  color: "subdued",
@@ -519,7 +519,7 @@ export var CustomContent = {
519
519
  }),
520
520
  /*#__PURE__*/ _jsxs(Stack, {
521
521
  horizontal: true,
522
- align: "space-between",
522
+ justify: "between",
523
523
  children: [
524
524
  /*#__PURE__*/ _jsx(Text, {
525
525
  color: "subdued",
package/dist/esm/stories/PopoverManager.stories.js CHANGED
@@ -449,7 +449,7 @@ export var ConflictResolution = {
449
449
  /*#__PURE__*/ _jsxs(Stack, {
450
450
  horizontal: true,
451
451
  gap: "sm",
452
- blockAlign: "center",
452
+ align: "center",
453
453
  children: [
454
454
  /*#__PURE__*/ _jsx("input", {
455
455
  type: "checkbox",
@@ -464,7 +464,7 @@ export var ConflictResolution = {
464
464
  /*#__PURE__*/ _jsxs(Stack, {
465
465
  horizontal: true,
466
466
  gap: "sm",
467
- blockAlign: "center",
467
+ align: "center",
468
468
  children: [
469
469
  /*#__PURE__*/ _jsx("input", {
470
470
  type: "checkbox"
@@ -697,8 +697,8 @@ export var ApplicationIntegration = {
697
697
  marginBlockEnd: "8",
698
698
  children: /*#__PURE__*/ _jsxs(Stack, {
699
699
  horizontal: true,
700
- align: "space-between",
701
- blockAlign: "center",
700
+ justify: "between",
701
+ align: "center",
702
702
  children: [
703
703
  /*#__PURE__*/ _jsx(Text, {
704
704
  variant: "headingLg",
@@ -706,7 +706,7 @@ export var ApplicationIntegration = {
706
706
  }),
707
707
  /*#__PURE__*/ _jsxs(Stack, {
708
708
  horizontal: true,
709
- blockAlign: "center",
709
+ align: "center",
710
710
  children: [
711
711
  /*#__PURE__*/ _jsx(Popover, {
712
712
  active: searchActive,
@@ -831,7 +831,7 @@ export var ApplicationIntegration = {
831
831
  })
832
832
  }),
833
833
  /*#__PURE__*/ _jsx(Stack, {
834
- inlineAlign: "center",
834
+ align: "center",
835
835
  children: /*#__PURE__*/ _jsx(Button, {
836
836
  size: "slim",
837
837
  children: "View all notifications"
@@ -859,7 +859,7 @@ export var ApplicationIntegration = {
859
859
  children: [
860
860
  /*#__PURE__*/ _jsxs(Stack, {
861
861
  gap: "sm",
862
- inlineAlign: "center",
862
+ align: "center",
863
863
  children: [
864
864
  /*#__PURE__*/ _jsx("div", {
865
865
  style: {
@@ -1133,8 +1133,8 @@ export var EventHandling = {
1133
1133
  children: [
1134
1134
  /*#__PURE__*/ _jsxs(Stack, {
1135
1135
  horizontal: true,
1136
- align: "space-between",
1137
- blockAlign: "center",
1136
+ justify: "between",
1137
+ align: "center",
1138
1138
  children: [
1139
1139
  /*#__PURE__*/ _jsx(Text, {
1140
1140
  variant: "headingSm",
package/dist/esm/stories/ProgressBar.stories.js CHANGED
@@ -213,7 +213,7 @@ export var WithLabels = {
213
213
  children: [
214
214
  /*#__PURE__*/ _jsxs(Stack, {
215
215
  horizontal: true,
216
- align: "space-between",
216
+ justify: "between",
217
217
  children: [
218
218
  /*#__PURE__*/ _jsx(Text, {
219
219
  variant: "bodyMd",
@@ -241,7 +241,7 @@ export var WithLabels = {
241
241
  children: [
242
242
  /*#__PURE__*/ _jsxs(Stack, {
243
243
  horizontal: true,
244
- align: "space-between",
244
+ justify: "between",
245
245
  children: [
246
246
  /*#__PURE__*/ _jsx(Text, {
247
247
  variant: "bodyMd",
@@ -269,7 +269,7 @@ export var WithLabels = {
269
269
  children: [
270
270
  /*#__PURE__*/ _jsxs(Stack, {
271
271
  horizontal: true,
272
- align: "space-between",
272
+ justify: "between",
273
273
  children: [
274
274
  /*#__PURE__*/ _jsx(Text, {
275
275
  variant: "bodyMd",
@@ -317,7 +317,7 @@ export var DifferentStates = {
317
317
  children: [
318
318
  /*#__PURE__*/ _jsxs(Stack, {
319
319
  horizontal: true,
320
- align: "space-between",
320
+ justify: "between",
321
321
  children: [
322
322
  /*#__PURE__*/ _jsx(Text, {
323
323
  children: "Design Phase"
@@ -339,7 +339,7 @@ export var DifferentStates = {
339
339
  children: [
340
340
  /*#__PURE__*/ _jsxs(Stack, {
341
341
  horizontal: true,
342
- align: "space-between",
342
+ justify: "between",
343
343
  children: [
344
344
  /*#__PURE__*/ _jsx(Text, {
345
345
  children: "Development"
@@ -360,7 +360,7 @@ export var DifferentStates = {
360
360
  children: [
361
361
  /*#__PURE__*/ _jsxs(Stack, {
362
362
  horizontal: true,
363
- align: "space-between",
363
+ justify: "between",
364
364
  children: [
365
365
  /*#__PURE__*/ _jsx(Text, {
366
366
  children: "Testing"
@@ -382,7 +382,7 @@ export var DifferentStates = {
382
382
  children: [
383
383
  /*#__PURE__*/ _jsxs(Stack, {
384
384
  horizontal: true,
385
- align: "space-between",
385
+ justify: "between",
386
386
  children: [
387
387
  /*#__PURE__*/ _jsx(Text, {
388
388
  children: "Deployment"
@@ -434,7 +434,7 @@ export var LowProgress = {
434
434
  children: [
435
435
  /*#__PURE__*/ _jsxs(Stack, {
436
436
  horizontal: true,
437
- align: "space-between",
437
+ justify: "between",
438
438
  children: [
439
439
  /*#__PURE__*/ _jsx(Text, {
440
440
  children: "Disk Space Critical"
package/dist/esm/stories/RadioButton.stories.js CHANGED
@@ -415,8 +415,8 @@ export var ShippingOptions = {
415
415
  children: shippingOptions.map(function(option) {
416
416
  return /*#__PURE__*/ _jsxs(Stack, {
417
417
  horizontal: true,
418
- align: "space-between",
419
- blockAlign: "start",
418
+ justify: "between",
419
+ align: "start",
420
420
  as: Box,
421
421
  padding: "3",
422
422
  borderWidth: shippingOption === option.value ? "2" : "1",
package/dist/esm/stories/RadioButtonCard.stories.js CHANGED
@@ -643,8 +643,8 @@ export var SubscriptionPlans = {
643
643
  paddingBlockStart: "8",
644
644
  children: /*#__PURE__*/ _jsxs(Stack, {
645
645
  horizontal: true,
646
- align: "space-between",
647
- blockAlign: "center",
646
+ justify: "between",
647
+ align: "center",
648
648
  children: [
649
649
  /*#__PURE__*/ _jsxs(Stack, {
650
650
  gap: "xs",