@heymantle/litho 0.0.4 → 0.0.5

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 (146) hide show
  1. package/dist/cjs/components/Autocomplete.js +23 -12
  2. package/dist/cjs/components/Button.js +44 -6
  3. package/dist/cjs/components/Card.js +1 -0
  4. package/dist/cjs/components/ColorField.js +2 -2
  5. package/dist/cjs/components/EmptyState.js +2 -2
  6. package/dist/cjs/components/Filters.js +4 -3
  7. package/dist/cjs/components/Frame.js +9 -9
  8. package/dist/cjs/components/HorizontalStack.js +9 -2
  9. package/dist/cjs/components/Icon.js +1 -0
  10. package/dist/cjs/components/List.js +3 -3
  11. package/dist/cjs/components/Pane.js +61 -17
  12. package/dist/cjs/components/Stack.js +223 -0
  13. package/dist/cjs/components/Table.js +1 -1
  14. package/dist/cjs/components/Tabs.js +41 -11
  15. package/dist/cjs/components/VerticalStack.js +8 -2
  16. package/dist/cjs/index.js +4 -0
  17. package/dist/cjs/stories/ActionList.stories.js +1 -1
  18. package/dist/cjs/stories/Autocomplete.stories.js +20 -17
  19. package/dist/cjs/stories/Box.stories.js +14 -12
  20. package/dist/cjs/stories/ButtonGroup.stories.js +5 -5
  21. package/dist/cjs/stories/Card.stories.js +8 -8
  22. package/dist/cjs/stories/Checkbox.stories.js +3 -3
  23. package/dist/cjs/stories/ChoiceList.stories.js +13 -12
  24. package/dist/cjs/stories/Collapsible.stories.js +51 -39
  25. package/dist/cjs/stories/ColorField.stories.js +23 -19
  26. package/dist/cjs/stories/ContextualSaveBar.stories.js +15 -14
  27. package/dist/cjs/stories/DatePicker.stories.js +3 -3
  28. package/dist/cjs/stories/Divider.stories.js +64 -57
  29. package/dist/cjs/stories/DropZone.stories.js +25 -20
  30. package/dist/cjs/stories/Filters.stories.js +62 -60
  31. package/dist/cjs/stories/FooterHelp.stories.js +36 -31
  32. package/dist/cjs/stories/Form.stories.js +23 -20
  33. package/dist/cjs/stories/Grid.stories.js +58 -58
  34. package/dist/cjs/stories/Icon.stories.js +31 -28
  35. package/dist/cjs/stories/Image.stories.js +36 -36
  36. package/dist/cjs/stories/InlineError.stories.js +35 -34
  37. package/dist/cjs/stories/Label.stories.js +59 -59
  38. package/dist/cjs/stories/Layout.stories.js +44 -42
  39. package/dist/cjs/stories/LayoutSection.stories.js +114 -106
  40. package/dist/cjs/stories/Link.stories.js +14 -12
  41. package/dist/cjs/stories/List.stories.js +67 -50
  42. package/dist/cjs/stories/Listbox.stories.js +26 -22
  43. package/dist/cjs/stories/Loading.stories.js +59 -50
  44. package/dist/cjs/stories/Modal.stories.js +7 -7
  45. package/dist/cjs/stories/Page.stories.js +38 -29
  46. package/dist/cjs/stories/Pane.stories.js +135 -120
  47. package/dist/cjs/stories/Popover.stories.js +12 -8
  48. package/dist/cjs/stories/PopoverManager.stories.js +91 -83
  49. package/dist/cjs/stories/ProgressBar.stories.js +61 -54
  50. package/dist/cjs/stories/RadioButtonCard.stories.js +21 -21
  51. package/dist/cjs/stories/RangeSlider.stories.js +44 -40
  52. package/dist/cjs/stories/ResourceList.stories.js +46 -37
  53. package/dist/cjs/stories/SkeletonText.stories.js +23 -22
  54. package/dist/cjs/stories/Spinner.stories.js +46 -39
  55. package/dist/cjs/stories/Stack.stories.js +1397 -0
  56. package/dist/cjs/stories/Tabs.stories.js +1 -2
  57. package/dist/cjs/stories/Tag.stories.js +44 -36
  58. package/dist/cjs/stories/Thumbnail.stories.js +42 -38
  59. package/dist/cjs/stories/TimePicker.stories.js +33 -32
  60. package/dist/cjs/stories/Tip.stories.js +21 -21
  61. package/dist/cjs/stories/TopBar.stories.js +7 -5
  62. package/dist/esm/components/Autocomplete.js +23 -12
  63. package/dist/esm/components/Button.js +44 -6
  64. package/dist/esm/components/Card.js +1 -0
  65. package/dist/esm/components/ColorField.js +2 -2
  66. package/dist/esm/components/EmptyState.js +2 -2
  67. package/dist/esm/components/Filters.js +4 -3
  68. package/dist/esm/components/Frame.js +9 -9
  69. package/dist/esm/components/HorizontalStack.js +9 -2
  70. package/dist/esm/components/Icon.js +1 -0
  71. package/dist/esm/components/List.js +3 -3
  72. package/dist/esm/components/Pane.js +62 -18
  73. package/dist/esm/components/Stack.js +213 -0
  74. package/dist/esm/components/Table.js +1 -1
  75. package/dist/esm/components/Tabs.js +41 -11
  76. package/dist/esm/components/VerticalStack.js +8 -2
  77. package/dist/esm/index.js +1 -0
  78. package/dist/esm/stories/ActionList.stories.js +1 -1
  79. package/dist/esm/stories/Autocomplete.stories.js +20 -17
  80. package/dist/esm/stories/Box.stories.js +14 -12
  81. package/dist/esm/stories/ButtonGroup.stories.js +5 -5
  82. package/dist/esm/stories/Card.stories.js +8 -8
  83. package/dist/esm/stories/Checkbox.stories.js +3 -3
  84. package/dist/esm/stories/ChoiceList.stories.js +13 -12
  85. package/dist/esm/stories/Collapsible.stories.js +51 -39
  86. package/dist/esm/stories/ColorField.stories.js +23 -19
  87. package/dist/esm/stories/ContextualSaveBar.stories.js +15 -14
  88. package/dist/esm/stories/DatePicker.stories.js +3 -3
  89. package/dist/esm/stories/Divider.stories.js +64 -57
  90. package/dist/esm/stories/DropZone.stories.js +25 -20
  91. package/dist/esm/stories/Filters.stories.js +62 -60
  92. package/dist/esm/stories/FooterHelp.stories.js +36 -31
  93. package/dist/esm/stories/Form.stories.js +23 -20
  94. package/dist/esm/stories/Grid.stories.js +58 -58
  95. package/dist/esm/stories/Icon.stories.js +31 -28
  96. package/dist/esm/stories/Image.stories.js +36 -36
  97. package/dist/esm/stories/InlineError.stories.js +27 -26
  98. package/dist/esm/stories/Label.stories.js +59 -59
  99. package/dist/esm/stories/Layout.stories.js +44 -42
  100. package/dist/esm/stories/LayoutSection.stories.js +114 -106
  101. package/dist/esm/stories/Link.stories.js +14 -12
  102. package/dist/esm/stories/List.stories.js +67 -50
  103. package/dist/esm/stories/Listbox.stories.js +12 -8
  104. package/dist/esm/stories/Loading.stories.js +59 -50
  105. package/dist/esm/stories/Modal.stories.js +7 -7
  106. package/dist/esm/stories/Page.stories.js +7 -3
  107. package/dist/esm/stories/Pane.stories.js +95 -80
  108. package/dist/esm/stories/Popover.stories.js +12 -8
  109. package/dist/esm/stories/PopoverManager.stories.js +91 -83
  110. package/dist/esm/stories/ProgressBar.stories.js +61 -54
  111. package/dist/esm/stories/RadioButtonCard.stories.js +21 -21
  112. package/dist/esm/stories/RangeSlider.stories.js +34 -30
  113. package/dist/esm/stories/ResourceList.stories.js +46 -37
  114. package/dist/esm/stories/SkeletonText.stories.js +23 -22
  115. package/dist/esm/stories/Spinner.stories.js +40 -33
  116. package/dist/esm/stories/Stack.stories.js +1338 -0
  117. package/dist/esm/stories/Tabs.stories.js +1 -2
  118. package/dist/esm/stories/Tag.stories.js +27 -19
  119. package/dist/esm/stories/Thumbnail.stories.js +42 -38
  120. package/dist/esm/stories/TimePicker.stories.js +33 -32
  121. package/dist/esm/stories/Tip.stories.js +21 -21
  122. package/dist/esm/stories/TopBar.stories.js +7 -5
  123. package/dist/types/components/Autocomplete.d.ts +34 -29
  124. package/dist/types/components/Autocomplete.d.ts.map +1 -1
  125. package/dist/types/components/Button.d.ts +10 -0
  126. package/dist/types/components/Button.d.ts.map +1 -1
  127. package/dist/types/components/Card.d.ts +2 -0
  128. package/dist/types/components/Card.d.ts.map +1 -1
  129. package/dist/types/components/EmptyState.d.ts.map +1 -1
  130. package/dist/types/components/Filters.d.ts +3 -1
  131. package/dist/types/components/Filters.d.ts.map +1 -1
  132. package/dist/types/components/Frame.d.ts +3 -3
  133. package/dist/types/components/Frame.d.ts.map +1 -1
  134. package/dist/types/components/HorizontalStack.d.ts +2 -2
  135. package/dist/types/components/HorizontalStack.d.ts.map +1 -1
  136. package/dist/types/components/Icon.d.ts.map +1 -1
  137. package/dist/types/components/Pane.d.ts.map +1 -1
  138. package/dist/types/components/Stack.d.ts +49 -0
  139. package/dist/types/components/Stack.d.ts.map +1 -0
  140. package/dist/types/components/Tabs.d.ts +2 -0
  141. package/dist/types/components/Tabs.d.ts.map +1 -1
  142. package/dist/types/components/VerticalStack.d.ts +2 -2
  143. package/dist/types/components/VerticalStack.d.ts.map +1 -1
  144. package/dist/types/index.d.ts +1 -0
  145. package/index.css +11 -0
  146. package/package.json +2 -2
package/dist/esm/stories/Filters.stories.js CHANGED
@@ -111,14 +111,13 @@ function _unsupported_iterable_to_array(o, minLen) {
111
111
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
112
112
  import { useState } from "react";
113
113
  import Filters from "../components/Filters.js";
114
+ import Stack from "../components/Stack.js";
114
115
  import Text from "../components/Text.js";
115
116
  import Card from "../components/Card.js";
116
117
  import Button from "../components/Button.js";
117
118
  import Select from "../components/Select.js";
118
119
  import Checkbox from "../components/Checkbox.js";
119
120
  import RangeSlider from "../components/RangeSlider.js";
120
- import VerticalStack from "../components/VerticalStack.js";
121
- import HorizontalStack from "../components/HorizontalStack.js";
122
121
  import Box from "../components/Box.js";
123
122
  import { transformStorySource } from "../utilities/transformers.js";
124
123
  export default {
@@ -242,8 +241,8 @@ export var Default = {
242
241
  {
243
242
  key: 'price',
244
243
  label: 'Price Range',
245
- filter: /*#__PURE__*/ _jsxs(VerticalStack, {
246
- gap: "4",
244
+ filter: /*#__PURE__*/ _jsxs(Stack, {
245
+ gap: "md",
247
246
  children: [
248
247
  /*#__PURE__*/ _jsxs(Text, {
249
248
  variant: "bodySm",
@@ -323,15 +322,15 @@ export var Default = {
323
322
  padding: "4",
324
323
  background: "subdued",
325
324
  borderRadius: "default",
326
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
327
- gap: "2",
325
+ children: /*#__PURE__*/ _jsxs(Stack, {
326
+ gap: "sm",
328
327
  children: [
329
328
  /*#__PURE__*/ _jsx(Text, {
330
329
  variant: "headingSm",
331
330
  children: "Current Filters:"
332
331
  }),
333
- appliedFilters.length > 0 ? /*#__PURE__*/ _jsx(VerticalStack, {
334
- gap: "1",
332
+ appliedFilters.length > 0 ? /*#__PURE__*/ _jsx(Stack, {
333
+ gap: "xs",
335
334
  children: appliedFilters.map(function(filter) {
336
335
  return /*#__PURE__*/ _jsxs(Text, {
337
336
  variant: "bodyXs",
@@ -388,8 +387,8 @@ export var WithSearchField = {
388
387
  key: 'tags',
389
388
  label: 'Tags',
390
389
  shortcut: true,
391
- filter: /*#__PURE__*/ _jsx(VerticalStack, {
392
- gap: "2",
390
+ filter: /*#__PURE__*/ _jsx(Stack, {
391
+ gap: "sm",
393
392
  children: availableTags.map(function(tag) {
394
393
  return /*#__PURE__*/ _jsx(Checkbox, {
395
394
  label: tag,
@@ -410,8 +409,8 @@ export var WithSearchField = {
410
409
  {
411
410
  key: 'authors',
412
411
  label: 'Authors',
413
- filter: /*#__PURE__*/ _jsx(VerticalStack, {
414
- gap: "2",
412
+ filter: /*#__PURE__*/ _jsx(Stack, {
413
+ gap: "sm",
415
414
  children: availableAuthors.map(function(author) {
416
415
  return /*#__PURE__*/ _jsx(Checkbox, {
417
416
  label: author,
@@ -481,15 +480,15 @@ export var WithSearchField = {
481
480
  padding: "4",
482
481
  background: "subdued",
483
482
  borderRadius: "default",
484
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
485
- gap: "2",
483
+ children: /*#__PURE__*/ _jsxs(Stack, {
484
+ gap: "sm",
486
485
  children: [
487
486
  /*#__PURE__*/ _jsx(Text, {
488
487
  variant: "headingSm",
489
488
  children: "Search & Filter Summary:"
490
489
  }),
491
- /*#__PURE__*/ _jsxs(VerticalStack, {
492
- gap: "1",
490
+ /*#__PURE__*/ _jsxs(Stack, {
491
+ gap: "xs",
493
492
  children: [
494
493
  /*#__PURE__*/ _jsxs(Text, {
495
494
  variant: "bodyXs",
@@ -611,8 +610,8 @@ export var FilterTabs = {
611
610
  padding: "4",
612
611
  background: "subdued",
613
612
  borderRadius: "default",
614
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
615
- gap: "2",
613
+ children: /*#__PURE__*/ _jsxs(Stack, {
614
+ gap: "sm",
616
615
  children: [
617
616
  /*#__PURE__*/ _jsx(Text, {
618
617
  variant: "headingSm",
@@ -714,8 +713,8 @@ export var ComplexFiltering = {
714
713
  key: 'price',
715
714
  label: 'Price Range',
716
715
  shortcut: true,
717
- filter: /*#__PURE__*/ _jsxs(VerticalStack, {
718
- gap: "4",
716
+ filter: /*#__PURE__*/ _jsxs(Stack, {
717
+ gap: "md",
719
718
  children: [
720
719
  /*#__PURE__*/ _jsxs(Text, {
721
720
  variant: "bodySm",
@@ -744,8 +743,8 @@ export var ComplexFiltering = {
744
743
  key: 'brand',
745
744
  label: 'Brand',
746
745
  shortcut: true,
747
- filter: /*#__PURE__*/ _jsx(VerticalStack, {
748
- gap: "2",
746
+ filter: /*#__PURE__*/ _jsx(Stack, {
747
+ gap: "sm",
749
748
  children: availableBrands.map(function(brand) {
750
749
  return /*#__PURE__*/ _jsx(Checkbox, {
751
750
  label: brand,
@@ -766,8 +765,8 @@ export var ComplexFiltering = {
766
765
  {
767
766
  key: 'color',
768
767
  label: 'Color',
769
- filter: /*#__PURE__*/ _jsx(VerticalStack, {
770
- gap: "2",
768
+ filter: /*#__PURE__*/ _jsx(Stack, {
769
+ gap: "sm",
771
770
  children: availableColors.map(function(color) {
772
771
  return /*#__PURE__*/ _jsx(Checkbox, {
773
772
  label: color,
@@ -890,8 +889,8 @@ export var ComplexFiltering = {
890
889
  setRating('');
891
890
  setAppliedFilters([]);
892
891
  };
893
- return /*#__PURE__*/ _jsxs(VerticalStack, {
894
- gap: "4",
892
+ return /*#__PURE__*/ _jsxs(Stack, {
893
+ gap: "md",
895
894
  children: [
896
895
  /*#__PURE__*/ _jsx(Card, {
897
896
  title: "Product Category",
@@ -921,14 +920,15 @@ export var ComplexFiltering = {
921
920
  /*#__PURE__*/ _jsx(Card, {
922
921
  title: "Results Summary",
923
922
  padded: true,
924
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
925
- gap: "4",
923
+ children: /*#__PURE__*/ _jsxs(Stack, {
924
+ gap: "md",
926
925
  children: [
927
- /*#__PURE__*/ _jsxs(HorizontalStack, {
928
- gap: "8",
926
+ /*#__PURE__*/ _jsxs(Stack, {
927
+ horizontal: true,
928
+ gap: "lg",
929
929
  children: [
930
- /*#__PURE__*/ _jsxs(VerticalStack, {
931
- gap: "2",
930
+ /*#__PURE__*/ _jsxs(Stack, {
931
+ gap: "sm",
932
932
  children: [
933
933
  /*#__PURE__*/ _jsx(Text, {
934
934
  variant: "headingSm",
@@ -940,8 +940,8 @@ export var ComplexFiltering = {
940
940
  })
941
941
  ]
942
942
  }),
943
- /*#__PURE__*/ _jsxs(VerticalStack, {
944
- gap: "2",
943
+ /*#__PURE__*/ _jsxs(Stack, {
944
+ gap: "sm",
945
945
  children: [
946
946
  /*#__PURE__*/ _jsx(Text, {
947
947
  variant: "headingSm",
@@ -955,8 +955,8 @@ export var ComplexFiltering = {
955
955
  })
956
956
  ]
957
957
  }),
958
- appliedFilters.length > 0 && /*#__PURE__*/ _jsxs(VerticalStack, {
959
- gap: "2",
958
+ appliedFilters.length > 0 && /*#__PURE__*/ _jsxs(Stack, {
959
+ gap: "sm",
960
960
  children: [
961
961
  /*#__PURE__*/ _jsxs(Text, {
962
962
  variant: "headingSm",
@@ -966,8 +966,8 @@ export var ComplexFiltering = {
966
966
  "):"
967
967
  ]
968
968
  }),
969
- /*#__PURE__*/ _jsx(VerticalStack, {
970
- gap: "1",
969
+ /*#__PURE__*/ _jsx(Stack, {
970
+ gap: "xs",
971
971
  children: appliedFilters.map(function(filter) {
972
972
  return /*#__PURE__*/ _jsxs(Text, {
973
973
  variant: "bodyXs",
@@ -1013,18 +1013,19 @@ export var FilterPills = {
1013
1013
  return /*#__PURE__*/ _jsx(Card, {
1014
1014
  title: "Filter Pills Demo",
1015
1015
  padded: true,
1016
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
1017
- gap: "8",
1016
+ children: /*#__PURE__*/ _jsxs(Stack, {
1017
+ gap: "lg",
1018
1018
  children: [
1019
- /*#__PURE__*/ _jsxs(VerticalStack, {
1020
- gap: "4",
1019
+ /*#__PURE__*/ _jsxs(Stack, {
1020
+ gap: "md",
1021
1021
  children: [
1022
1022
  /*#__PURE__*/ _jsx(Text, {
1023
1023
  variant: "headingSm",
1024
1024
  children: "Interactive Pills"
1025
1025
  }),
1026
- /*#__PURE__*/ _jsxs(HorizontalStack, {
1027
- gap: "2",
1026
+ /*#__PURE__*/ _jsxs(Stack, {
1027
+ horizontal: true,
1028
+ gap: "sm",
1028
1029
  wrap: true,
1029
1030
  children: [
1030
1031
  /*#__PURE__*/ _jsx(Filters.Pill, {
@@ -1059,15 +1060,16 @@ export var FilterPills = {
1059
1060
  })
1060
1061
  ]
1061
1062
  }),
1062
- /*#__PURE__*/ _jsxs(VerticalStack, {
1063
- gap: "4",
1063
+ /*#__PURE__*/ _jsxs(Stack, {
1064
+ gap: "md",
1064
1065
  children: [
1065
1066
  /*#__PURE__*/ _jsx(Text, {
1066
1067
  variant: "headingSm",
1067
1068
  children: "Pill States"
1068
1069
  }),
1069
- /*#__PURE__*/ _jsxs(HorizontalStack, {
1070
- gap: "2",
1070
+ /*#__PURE__*/ _jsxs(Stack, {
1071
+ horizontal: true,
1072
+ gap: "sm",
1071
1073
  wrap: true,
1072
1074
  children: [
1073
1075
  /*#__PURE__*/ _jsx(Filters.Pill, {
@@ -1094,15 +1096,15 @@ export var FilterPills = {
1094
1096
  padding: "4",
1095
1097
  background: "subdued",
1096
1098
  borderRadius: "default",
1097
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
1098
- gap: "2",
1099
+ children: /*#__PURE__*/ _jsxs(Stack, {
1100
+ gap: "sm",
1099
1101
  children: [
1100
1102
  /*#__PURE__*/ _jsx(Text, {
1101
1103
  variant: "headingSm",
1102
1104
  children: "Current Selection:"
1103
1105
  }),
1104
- /*#__PURE__*/ _jsxs(VerticalStack, {
1105
- gap: "1",
1106
+ /*#__PURE__*/ _jsxs(Stack, {
1107
+ gap: "xs",
1106
1108
  children: [
1107
1109
  Object.entries(pillStates).filter(function(param) {
1108
1110
  var _param = _sliced_to_array(param, 2), _ = _param[0], applied = _param[1];
@@ -1229,14 +1231,14 @@ export var ResponsiveBehavior = {
1229
1231
  })
1230
1232
  }
1231
1233
  ];
1232
- return /*#__PURE__*/ _jsxs(VerticalStack, {
1233
- gap: "4",
1234
+ return /*#__PURE__*/ _jsxs(Stack, {
1235
+ gap: "md",
1234
1236
  children: [
1235
1237
  /*#__PURE__*/ _jsx(Card, {
1236
1238
  title: "Responsive Filter Tabs",
1237
1239
  padded: true,
1238
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
1239
- gap: "4",
1240
+ children: /*#__PURE__*/ _jsxs(Stack, {
1241
+ gap: "md",
1240
1242
  children: [
1241
1243
  /*#__PURE__*/ _jsx(Text, {
1242
1244
  variant: "bodyXs",
@@ -1253,8 +1255,8 @@ export var ResponsiveBehavior = {
1253
1255
  /*#__PURE__*/ _jsx(Card, {
1254
1256
  title: "Responsive Filters Layout",
1255
1257
  padded: true,
1256
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
1257
- gap: "4",
1258
+ children: /*#__PURE__*/ _jsxs(Stack, {
1259
+ gap: "md",
1258
1260
  children: [
1259
1261
  /*#__PURE__*/ _jsx(Text, {
1260
1262
  variant: "bodyXs",
@@ -1277,8 +1279,8 @@ export var ResponsiveBehavior = {
1277
1279
  /*#__PURE__*/ _jsx(Card, {
1278
1280
  title: "Mobile-Optimized Tips",
1279
1281
  padded: true,
1280
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
1281
- gap: "2",
1282
+ children: /*#__PURE__*/ _jsxs(Stack, {
1283
+ gap: "sm",
1282
1284
  children: [
1283
1285
  /*#__PURE__*/ _jsx(Text, {
1284
1286
  variant: "bodyXs",
package/dist/esm/stories/FooterHelp.stories.js CHANGED
@@ -28,14 +28,13 @@ function _object_spread(target) {
28
28
  }
29
29
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
30
30
  import FooterHelp from "../components/FooterHelp.js";
31
+ import Stack from "../components/Stack.js";
31
32
  import Text from "../components/Text.js";
32
33
  import Card from "../components/Card.js";
33
34
  import Link from "../components/Link.js";
34
35
  import Button from "../components/Button.js";
35
36
  import Page from "../components/Page.js";
36
37
  import Box from "../components/Box.js";
37
- import VerticalStack from "../components/VerticalStack.js";
38
- import HorizontalStack from "../components/HorizontalStack.js";
39
38
  import Grid from "../components/Grid.js";
40
39
  import TextField from "../components/TextField.js";
41
40
  import Select from "../components/Select.js";
@@ -224,8 +223,8 @@ export var InContextUsage = {
224
223
  /*#__PURE__*/ _jsx(Card, {
225
224
  title: "User Settings",
226
225
  padded: true,
227
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
228
- gap: "4",
226
+ children: /*#__PURE__*/ _jsxs(Stack, {
227
+ gap: "md",
229
228
  children: [
230
229
  /*#__PURE__*/ _jsxs(Box, {
231
230
  children: [
@@ -236,8 +235,9 @@ export var InContextUsage = {
236
235
  children: "Profile Visibility"
237
236
  })
238
237
  }),
239
- /*#__PURE__*/ _jsxs(HorizontalStack, {
240
- gap: "2",
238
+ /*#__PURE__*/ _jsxs(Stack, {
239
+ horizontal: true,
240
+ gap: "sm",
241
241
  children: [
242
242
  /*#__PURE__*/ _jsx(Button, {
243
243
  children: "Public"
@@ -261,8 +261,9 @@ export var InContextUsage = {
261
261
  children: "Email Notifications"
262
262
  })
263
263
  }),
264
- /*#__PURE__*/ _jsxs(HorizontalStack, {
265
- gap: "2",
264
+ /*#__PURE__*/ _jsxs(Stack, {
265
+ horizontal: true,
266
+ gap: "sm",
266
267
  children: [
267
268
  /*#__PURE__*/ _jsx(Button, {
268
269
  children: "All"
@@ -314,8 +315,8 @@ export var InContextUsage = {
314
315
  };
315
316
  export var MultipleFooterHelps = {
316
317
  render: function() {
317
- return /*#__PURE__*/ _jsxs(VerticalStack, {
318
- gap: "8",
318
+ return /*#__PURE__*/ _jsxs(Stack, {
319
+ gap: "lg",
319
320
  children: [
320
321
  /*#__PURE__*/ _jsx(Card, {
321
322
  title: "Account Information",
@@ -408,8 +409,8 @@ export var FormCompletionHelp = {
408
409
  /*#__PURE__*/ _jsx(Card, {
409
410
  title: "Business Registration",
410
411
  padded: true,
411
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
412
- gap: "4",
412
+ children: /*#__PURE__*/ _jsxs(Stack, {
413
+ gap: "md",
413
414
  children: [
414
415
  /*#__PURE__*/ _jsx(TextField, {
415
416
  label: "Business Name *",
@@ -484,8 +485,8 @@ export var ErrorRecoveryHelp = {
484
485
  padded: true,
485
486
  children: /*#__PURE__*/ _jsx(Box, {
486
487
  padding: "8",
487
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
488
- gap: "4",
488
+ children: /*#__PURE__*/ _jsxs(Stack, {
489
+ gap: "md",
489
490
  align: "center",
490
491
  children: [
491
492
  /*#__PURE__*/ _jsx(Text, {
@@ -505,8 +506,9 @@ export var ErrorRecoveryHelp = {
505
506
  }),
506
507
  /*#__PURE__*/ _jsx(Box, {
507
508
  paddingBlockStart: "4",
508
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
509
- gap: "4",
509
+ children: /*#__PURE__*/ _jsxs(Stack, {
510
+ horizontal: true,
511
+ gap: "md",
510
512
  children: [
511
513
  /*#__PURE__*/ _jsx(Button, {
512
514
  primary: true,
@@ -567,17 +569,18 @@ export var OnboardingHelp = {
567
569
  /*#__PURE__*/ _jsx(Card, {
568
570
  title: "Welcome to Our Platform!",
569
571
  padded: true,
570
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
571
- gap: "6",
572
+ children: /*#__PURE__*/ _jsxs(Stack, {
573
+ gap: "md",
572
574
  children: [
573
575
  /*#__PURE__*/ _jsx(Text, {
574
576
  children: "Let's get you started with a few quick steps to set up your account."
575
577
  }),
576
- /*#__PURE__*/ _jsxs(VerticalStack, {
577
- gap: "4",
578
+ /*#__PURE__*/ _jsxs(Stack, {
579
+ gap: "md",
578
580
  children: [
579
- /*#__PURE__*/ _jsxs(HorizontalStack, {
580
- gap: "2",
581
+ /*#__PURE__*/ _jsxs(Stack, {
582
+ horizontal: true,
583
+ gap: "sm",
581
584
  blockAlign: "center",
582
585
  children: [
583
586
  /*#__PURE__*/ _jsx(Box, {
@@ -599,8 +602,9 @@ export var OnboardingHelp = {
599
602
  })
600
603
  ]
601
604
  }),
602
- /*#__PURE__*/ _jsxs(HorizontalStack, {
603
- gap: "2",
605
+ /*#__PURE__*/ _jsxs(Stack, {
606
+ horizontal: true,
607
+ gap: "sm",
604
608
  blockAlign: "center",
605
609
  children: [
606
610
  /*#__PURE__*/ _jsx(Box, {
@@ -622,8 +626,9 @@ export var OnboardingHelp = {
622
626
  })
623
627
  ]
624
628
  }),
625
- /*#__PURE__*/ _jsxs(HorizontalStack, {
626
- gap: "2",
629
+ /*#__PURE__*/ _jsxs(Stack, {
630
+ horizontal: true,
631
+ gap: "sm",
627
632
  blockAlign: "center",
628
633
  children: [
629
634
  /*#__PURE__*/ _jsx(Box, {
@@ -694,8 +699,8 @@ export var OnboardingHelp = {
694
699
  };
695
700
  export var FeatureSpecificHelp = {
696
701
  render: function() {
697
- return /*#__PURE__*/ _jsx(VerticalStack, {
698
- gap: "4",
702
+ return /*#__PURE__*/ _jsx(Stack, {
703
+ gap: "md",
699
704
  children: /*#__PURE__*/ _jsxs(Page, {
700
705
  title: "Advanced Analytics Dashboard",
701
706
  children: [
@@ -714,7 +719,7 @@ export var FeatureSpecificHelp = {
714
719
  borderWidth: "025",
715
720
  borderColor: "border",
716
721
  borderRadius: "default",
717
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
722
+ children: /*#__PURE__*/ _jsxs(Stack, {
718
723
  align: "center",
719
724
  children: [
720
725
  /*#__PURE__*/ _jsx(Text, {
@@ -736,7 +741,7 @@ export var FeatureSpecificHelp = {
736
741
  borderWidth: "025",
737
742
  borderColor: "border",
738
743
  borderRadius: "default",
739
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
744
+ children: /*#__PURE__*/ _jsxs(Stack, {
740
745
  align: "center",
741
746
  children: [
742
747
  /*#__PURE__*/ _jsx(Text, {
@@ -758,7 +763,7 @@ export var FeatureSpecificHelp = {
758
763
  borderWidth: "025",
759
764
  borderColor: "border",
760
765
  borderRadius: "default",
761
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
766
+ children: /*#__PURE__*/ _jsxs(Stack, {
762
767
  align: "center",
763
768
  children: [
764
769
  /*#__PURE__*/ _jsx(Text, {
package/dist/esm/stories/Form.stories.js CHANGED
@@ -99,6 +99,7 @@ function _unsupported_iterable_to_array(o, minLen) {
99
99
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
100
100
  import { useState } from "react";
101
101
  import Form from "../components/Form.js";
102
+ import Stack from "../components/Stack.js";
102
103
  import TextField from "../components/TextField.js";
103
104
  import Button from "../components/Button.js";
104
105
  import Card from "../components/Card.js";
@@ -107,8 +108,6 @@ import Checkbox from "../components/Checkbox.js";
107
108
  import Select from "../components/Select.js";
108
109
  import RadioButton from "../components/RadioButton.js";
109
110
  import Box from "../components/Box.js";
110
- import VerticalStack from "../components/VerticalStack.js";
111
- import HorizontalStack from "../components/HorizontalStack.js";
112
111
  import { transformStorySource } from "../utilities/transformers.js";
113
112
  export default {
114
113
  title: 'Litho/Form',
@@ -191,8 +190,8 @@ export default {
191
190
  export var Default = {
192
191
  render: function(args) {
193
192
  return /*#__PURE__*/ _jsx(Form, _object_spread_props(_object_spread({}, args), {
194
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
195
- gap: "4",
193
+ children: /*#__PURE__*/ _jsxs(Stack, {
194
+ gap: "md",
196
195
  children: [
197
196
  /*#__PURE__*/ _jsx(TextField, {
198
197
  label: "Name",
@@ -238,8 +237,8 @@ export var LoginForm = {
238
237
  padded: true,
239
238
  children: /*#__PURE__*/ _jsx(Form, {
240
239
  onSubmit: handleSubmit,
241
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
242
- gap: "6",
240
+ children: /*#__PURE__*/ _jsxs(Stack, {
241
+ gap: "md",
243
242
  children: [
244
243
  /*#__PURE__*/ _jsx(TextField, {
245
244
  label: "Email",
@@ -264,8 +263,9 @@ export var LoginForm = {
264
263
  checked: rememberMe,
265
264
  onChange: setRememberMe
266
265
  }),
267
- /*#__PURE__*/ _jsxs(HorizontalStack, {
268
- gap: "2",
266
+ /*#__PURE__*/ _jsxs(Stack, {
267
+ horizontal: true,
268
+ gap: "sm",
269
269
  children: [
270
270
  /*#__PURE__*/ _jsx(Button, {
271
271
  primary: true,
@@ -317,11 +317,12 @@ export var ContactForm = {
317
317
  padded: true,
318
318
  children: /*#__PURE__*/ _jsx(Form, {
319
319
  onSubmit: handleSubmit,
320
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
321
- gap: "6",
320
+ children: /*#__PURE__*/ _jsxs(Stack, {
321
+ gap: "md",
322
322
  children: [
323
- /*#__PURE__*/ _jsxs(HorizontalStack, {
324
- gap: "4",
323
+ /*#__PURE__*/ _jsxs(Stack, {
324
+ horizontal: true,
325
+ gap: "md",
325
326
  children: [
326
327
  /*#__PURE__*/ _jsx(TextField, {
327
328
  label: "Name",
@@ -374,15 +375,16 @@ export var ContactForm = {
374
375
  },
375
376
  placeholder: "Select a subject"
376
377
  }),
377
- /*#__PURE__*/ _jsxs(VerticalStack, {
378
- gap: "3",
378
+ /*#__PURE__*/ _jsxs(Stack, {
379
+ gap: "sm",
379
380
  children: [
380
381
  /*#__PURE__*/ _jsx(Text, {
381
382
  variant: "headingSm",
382
383
  children: "Priority"
383
384
  }),
384
- /*#__PURE__*/ _jsxs(HorizontalStack, {
385
- gap: "6",
385
+ /*#__PURE__*/ _jsxs(Stack, {
386
+ horizontal: true,
387
+ gap: "md",
386
388
  children: [
387
389
  /*#__PURE__*/ _jsx(RadioButton, {
388
390
  label: "Low",
@@ -432,8 +434,9 @@ export var ContactForm = {
432
434
  return updateField('subscribe', checked);
433
435
  }
434
436
  }),
435
- /*#__PURE__*/ _jsxs(HorizontalStack, {
436
- gap: "2",
437
+ /*#__PURE__*/ _jsxs(Stack, {
438
+ horizontal: true,
439
+ gap: "sm",
437
440
  children: [
438
441
  /*#__PURE__*/ _jsx(Button, {
439
442
  primary: true,
@@ -526,8 +529,8 @@ export var ValidationExample = {
526
529
  children: /*#__PURE__*/ _jsx(Form, {
527
530
  onSubmit: handleSubmit,
528
531
  noValidate: true,
529
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
530
- gap: "6",
532
+ children: /*#__PURE__*/ _jsxs(Stack, {
533
+ gap: "md",
531
534
  children: [
532
535
  /*#__PURE__*/ _jsx(TextField, {
533
536
  label: "Username",