@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/cjs/stories/Filters.stories.js CHANGED
@@ -34,14 +34,13 @@ _export(exports, {
34
34
  var _jsxruntime = require("react/jsx-runtime");
35
35
  var _react = require("react");
36
36
  var _Filters = /*#__PURE__*/ _interop_require_default(require("../components/Filters.js"));
37
+ var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
37
38
  var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
38
39
  var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
39
40
  var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
40
41
  var _Select = /*#__PURE__*/ _interop_require_default(require("../components/Select.js"));
41
42
  var _Checkbox = /*#__PURE__*/ _interop_require_default(require("../components/Checkbox.js"));
42
43
  var _RangeSlider = /*#__PURE__*/ _interop_require_default(require("../components/RangeSlider.js"));
43
- var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
44
- var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
45
44
  var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
46
45
  var _transformers = require("../utilities/transformers.js");
47
46
  function _array_like_to_array(arr, len) {
@@ -280,8 +279,8 @@ var Default = {
280
279
  {
281
280
  key: 'price',
282
281
  label: 'Price Range',
283
- filter: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
284
- gap: "4",
282
+ filter: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
283
+ gap: "md",
285
284
  children: [
286
285
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
287
286
  variant: "bodySm",
@@ -361,15 +360,15 @@ var Default = {
361
360
  padding: "4",
362
361
  background: "subdued",
363
362
  borderRadius: "default",
364
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
365
- gap: "2",
363
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
364
+ gap: "sm",
366
365
  children: [
367
366
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
368
367
  variant: "headingSm",
369
368
  children: "Current Filters:"
370
369
  }),
371
- appliedFilters.length > 0 ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
372
- gap: "1",
370
+ appliedFilters.length > 0 ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
371
+ gap: "xs",
373
372
  children: appliedFilters.map(function(filter) {
374
373
  return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
375
374
  variant: "bodyXs",
@@ -426,8 +425,8 @@ var WithSearchField = {
426
425
  key: 'tags',
427
426
  label: 'Tags',
428
427
  shortcut: true,
429
- filter: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
430
- gap: "2",
428
+ filter: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
429
+ gap: "sm",
431
430
  children: availableTags.map(function(tag) {
432
431
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
433
432
  label: tag,
@@ -448,8 +447,8 @@ var WithSearchField = {
448
447
  {
449
448
  key: 'authors',
450
449
  label: 'Authors',
451
- filter: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
452
- gap: "2",
450
+ filter: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
451
+ gap: "sm",
453
452
  children: availableAuthors.map(function(author) {
454
453
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
455
454
  label: author,
@@ -519,15 +518,15 @@ var WithSearchField = {
519
518
  padding: "4",
520
519
  background: "subdued",
521
520
  borderRadius: "default",
522
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
523
- gap: "2",
521
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
522
+ gap: "sm",
524
523
  children: [
525
524
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
526
525
  variant: "headingSm",
527
526
  children: "Search & Filter Summary:"
528
527
  }),
529
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
530
- gap: "1",
528
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
529
+ gap: "xs",
531
530
  children: [
532
531
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
533
532
  variant: "bodyXs",
@@ -649,8 +648,8 @@ var FilterTabs = {
649
648
  padding: "4",
650
649
  background: "subdued",
651
650
  borderRadius: "default",
652
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
653
- gap: "2",
651
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
652
+ gap: "sm",
654
653
  children: [
655
654
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
656
655
  variant: "headingSm",
@@ -752,8 +751,8 @@ var ComplexFiltering = {
752
751
  key: 'price',
753
752
  label: 'Price Range',
754
753
  shortcut: true,
755
- filter: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
756
- gap: "4",
754
+ filter: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
755
+ gap: "md",
757
756
  children: [
758
757
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
759
758
  variant: "bodySm",
@@ -782,8 +781,8 @@ var ComplexFiltering = {
782
781
  key: 'brand',
783
782
  label: 'Brand',
784
783
  shortcut: true,
785
- filter: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
786
- gap: "2",
784
+ filter: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
785
+ gap: "sm",
787
786
  children: availableBrands.map(function(brand) {
788
787
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
789
788
  label: brand,
@@ -804,8 +803,8 @@ var ComplexFiltering = {
804
803
  {
805
804
  key: 'color',
806
805
  label: 'Color',
807
- filter: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
808
- gap: "2",
806
+ filter: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
807
+ gap: "sm",
809
808
  children: availableColors.map(function(color) {
810
809
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
811
810
  label: color,
@@ -928,8 +927,8 @@ var ComplexFiltering = {
928
927
  setRating('');
929
928
  setAppliedFilters([]);
930
929
  };
931
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
932
- gap: "4",
930
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
931
+ gap: "md",
933
932
  children: [
934
933
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
935
934
  title: "Product Category",
@@ -959,14 +958,15 @@ var ComplexFiltering = {
959
958
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
960
959
  title: "Results Summary",
961
960
  padded: true,
962
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
963
- gap: "4",
961
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
962
+ gap: "md",
964
963
  children: [
965
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
966
- gap: "8",
964
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
965
+ horizontal: true,
966
+ gap: "lg",
967
967
  children: [
968
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
969
- gap: "2",
968
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
969
+ gap: "sm",
970
970
  children: [
971
971
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
972
972
  variant: "headingSm",
@@ -978,8 +978,8 @@ var ComplexFiltering = {
978
978
  })
979
979
  ]
980
980
  }),
981
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
982
- gap: "2",
981
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
982
+ gap: "sm",
983
983
  children: [
984
984
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
985
985
  variant: "headingSm",
@@ -993,8 +993,8 @@ var ComplexFiltering = {
993
993
  })
994
994
  ]
995
995
  }),
996
- appliedFilters.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
997
- gap: "2",
996
+ appliedFilters.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
997
+ gap: "sm",
998
998
  children: [
999
999
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
1000
1000
  variant: "headingSm",
@@ -1004,8 +1004,8 @@ var ComplexFiltering = {
1004
1004
  "):"
1005
1005
  ]
1006
1006
  }),
1007
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
1008
- gap: "1",
1007
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
1008
+ gap: "xs",
1009
1009
  children: appliedFilters.map(function(filter) {
1010
1010
  return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
1011
1011
  variant: "bodyXs",
@@ -1051,18 +1051,19 @@ var FilterPills = {
1051
1051
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
1052
1052
  title: "Filter Pills Demo",
1053
1053
  padded: true,
1054
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
1055
- gap: "8",
1054
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1055
+ gap: "lg",
1056
1056
  children: [
1057
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
1058
- gap: "4",
1057
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1058
+ gap: "md",
1059
1059
  children: [
1060
1060
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1061
1061
  variant: "headingSm",
1062
1062
  children: "Interactive Pills"
1063
1063
  }),
1064
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
1065
- gap: "2",
1064
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1065
+ horizontal: true,
1066
+ gap: "sm",
1066
1067
  wrap: true,
1067
1068
  children: [
1068
1069
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Filters.default.Pill, {
@@ -1097,15 +1098,16 @@ var FilterPills = {
1097
1098
  })
1098
1099
  ]
1099
1100
  }),
1100
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
1101
- gap: "4",
1101
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1102
+ gap: "md",
1102
1103
  children: [
1103
1104
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1104
1105
  variant: "headingSm",
1105
1106
  children: "Pill States"
1106
1107
  }),
1107
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
1108
- gap: "2",
1108
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1109
+ horizontal: true,
1110
+ gap: "sm",
1109
1111
  wrap: true,
1110
1112
  children: [
1111
1113
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Filters.default.Pill, {
@@ -1132,15 +1134,15 @@ var FilterPills = {
1132
1134
  padding: "4",
1133
1135
  background: "subdued",
1134
1136
  borderRadius: "default",
1135
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
1136
- gap: "2",
1137
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1138
+ gap: "sm",
1137
1139
  children: [
1138
1140
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1139
1141
  variant: "headingSm",
1140
1142
  children: "Current Selection:"
1141
1143
  }),
1142
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
1143
- gap: "1",
1144
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1145
+ gap: "xs",
1144
1146
  children: [
1145
1147
  Object.entries(pillStates).filter(function(param) {
1146
1148
  var _param = _sliced_to_array(param, 2), _ = _param[0], applied = _param[1];
@@ -1267,14 +1269,14 @@ var ResponsiveBehavior = {
1267
1269
  })
1268
1270
  }
1269
1271
  ];
1270
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
1271
- gap: "4",
1272
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1273
+ gap: "md",
1272
1274
  children: [
1273
1275
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
1274
1276
  title: "Responsive Filter Tabs",
1275
1277
  padded: true,
1276
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
1277
- gap: "4",
1278
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1279
+ gap: "md",
1278
1280
  children: [
1279
1281
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1280
1282
  variant: "bodyXs",
@@ -1291,8 +1293,8 @@ var ResponsiveBehavior = {
1291
1293
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
1292
1294
  title: "Responsive Filters Layout",
1293
1295
  padded: true,
1294
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
1295
- gap: "4",
1296
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1297
+ gap: "md",
1296
1298
  children: [
1297
1299
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1298
1300
  variant: "bodyXs",
@@ -1315,8 +1317,8 @@ var ResponsiveBehavior = {
1315
1317
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
1316
1318
  title: "Mobile-Optimized Tips",
1317
1319
  padded: true,
1318
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
1319
- gap: "2",
1320
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1321
+ gap: "sm",
1320
1322
  children: [
1321
1323
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1322
1324
  variant: "bodyXs",
package/dist/cjs/stories/FooterHelp.stories.js CHANGED
@@ -51,14 +51,13 @@ _export(exports, {
51
51
  });
52
52
  var _jsxruntime = require("react/jsx-runtime");
53
53
  var _FooterHelp = /*#__PURE__*/ _interop_require_default(require("../components/FooterHelp.js"));
54
+ var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
54
55
  var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
55
56
  var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
56
57
  var _Link = /*#__PURE__*/ _interop_require_default(require("../components/Link.js"));
57
58
  var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
58
59
  var _Page = /*#__PURE__*/ _interop_require_default(require("../components/Page.js"));
59
60
  var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
60
- var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
61
- var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
62
61
  var _Grid = /*#__PURE__*/ _interop_require_default(require("../components/Grid.js"));
63
62
  var _TextField = /*#__PURE__*/ _interop_require_default(require("../components/TextField.js"));
64
63
  var _Select = /*#__PURE__*/ _interop_require_default(require("../components/Select.js"));
@@ -280,8 +279,8 @@ var InContextUsage = {
280
279
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
281
280
  title: "User Settings",
282
281
  padded: true,
283
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
284
- gap: "4",
282
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
283
+ gap: "md",
285
284
  children: [
286
285
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
287
286
  children: [
@@ -292,8 +291,9 @@ var InContextUsage = {
292
291
  children: "Profile Visibility"
293
292
  })
294
293
  }),
295
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
296
- gap: "2",
294
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
295
+ horizontal: true,
296
+ gap: "sm",
297
297
  children: [
298
298
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
299
299
  children: "Public"
@@ -317,8 +317,9 @@ var InContextUsage = {
317
317
  children: "Email Notifications"
318
318
  })
319
319
  }),
320
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
321
- gap: "2",
320
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
321
+ horizontal: true,
322
+ gap: "sm",
322
323
  children: [
323
324
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
324
325
  children: "All"
@@ -370,8 +371,8 @@ var InContextUsage = {
370
371
  };
371
372
  var MultipleFooterHelps = {
372
373
  render: function() {
373
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
374
- gap: "8",
374
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
375
+ gap: "lg",
375
376
  children: [
376
377
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
377
378
  title: "Account Information",
@@ -464,8 +465,8 @@ var FormCompletionHelp = {
464
465
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
465
466
  title: "Business Registration",
466
467
  padded: true,
467
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
468
- gap: "4",
468
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
469
+ gap: "md",
469
470
  children: [
470
471
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
471
472
  label: "Business Name *",
@@ -540,8 +541,8 @@ var ErrorRecoveryHelp = {
540
541
  padded: true,
541
542
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
542
543
  padding: "8",
543
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
544
- gap: "4",
544
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
545
+ gap: "md",
545
546
  align: "center",
546
547
  children: [
547
548
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -561,8 +562,9 @@ var ErrorRecoveryHelp = {
561
562
  }),
562
563
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
563
564
  paddingBlockStart: "4",
564
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
565
- gap: "4",
565
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
566
+ horizontal: true,
567
+ gap: "md",
566
568
  children: [
567
569
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
568
570
  primary: true,
@@ -623,17 +625,18 @@ var OnboardingHelp = {
623
625
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
624
626
  title: "Welcome to Our Platform!",
625
627
  padded: true,
626
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
627
- gap: "6",
628
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
629
+ gap: "md",
628
630
  children: [
629
631
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
630
632
  children: "Let's get you started with a few quick steps to set up your account."
631
633
  }),
632
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
633
- gap: "4",
634
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
635
+ gap: "md",
634
636
  children: [
635
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
636
- gap: "2",
637
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
638
+ horizontal: true,
639
+ gap: "sm",
637
640
  blockAlign: "center",
638
641
  children: [
639
642
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
@@ -655,8 +658,9 @@ var OnboardingHelp = {
655
658
  })
656
659
  ]
657
660
  }),
658
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
659
- gap: "2",
661
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
662
+ horizontal: true,
663
+ gap: "sm",
660
664
  blockAlign: "center",
661
665
  children: [
662
666
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
@@ -678,8 +682,9 @@ var OnboardingHelp = {
678
682
  })
679
683
  ]
680
684
  }),
681
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
682
- gap: "2",
685
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
686
+ horizontal: true,
687
+ gap: "sm",
683
688
  blockAlign: "center",
684
689
  children: [
685
690
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
@@ -750,8 +755,8 @@ var OnboardingHelp = {
750
755
  };
751
756
  var FeatureSpecificHelp = {
752
757
  render: function() {
753
- return /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
754
- gap: "4",
758
+ return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
759
+ gap: "md",
755
760
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Page.default, {
756
761
  title: "Advanced Analytics Dashboard",
757
762
  children: [
@@ -770,7 +775,7 @@ var FeatureSpecificHelp = {
770
775
  borderWidth: "025",
771
776
  borderColor: "border",
772
777
  borderRadius: "default",
773
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
778
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
774
779
  align: "center",
775
780
  children: [
776
781
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -792,7 +797,7 @@ var FeatureSpecificHelp = {
792
797
  borderWidth: "025",
793
798
  borderColor: "border",
794
799
  borderRadius: "default",
795
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
800
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
796
801
  align: "center",
797
802
  children: [
798
803
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -814,7 +819,7 @@ var FeatureSpecificHelp = {
814
819
  borderWidth: "025",
815
820
  borderColor: "border",
816
821
  borderRadius: "default",
817
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
822
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
818
823
  align: "center",
819
824
  children: [
820
825
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
package/dist/cjs/stories/Form.stories.js CHANGED
@@ -31,6 +31,7 @@ _export(exports, {
31
31
  var _jsxruntime = require("react/jsx-runtime");
32
32
  var _react = require("react");
33
33
  var _Form = /*#__PURE__*/ _interop_require_default(require("../components/Form.js"));
34
+ var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
34
35
  var _TextField = /*#__PURE__*/ _interop_require_default(require("../components/TextField.js"));
35
36
  var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
36
37
  var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
@@ -39,8 +40,6 @@ var _Checkbox = /*#__PURE__*/ _interop_require_default(require("../components/Ch
39
40
  var _Select = /*#__PURE__*/ _interop_require_default(require("../components/Select.js"));
40
41
  var _RadioButton = /*#__PURE__*/ _interop_require_default(require("../components/RadioButton.js"));
41
42
  var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
42
- var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
43
- var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
44
43
  var _transformers = require("../utilities/transformers.js");
45
44
  function _array_like_to_array(arr, len) {
46
45
  if (len == null || len > arr.length) len = arr.length;
@@ -226,8 +225,8 @@ var _default = {
226
225
  var Default = {
227
226
  render: function(args) {
228
227
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Form.default, _object_spread_props(_object_spread({}, args), {
229
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
230
- gap: "4",
228
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
229
+ gap: "md",
231
230
  children: [
232
231
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
233
232
  label: "Name",
@@ -273,8 +272,8 @@ var LoginForm = {
273
272
  padded: true,
274
273
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Form.default, {
275
274
  onSubmit: handleSubmit,
276
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
277
- gap: "6",
275
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
276
+ gap: "md",
278
277
  children: [
279
278
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
280
279
  label: "Email",
@@ -299,8 +298,9 @@ var LoginForm = {
299
298
  checked: rememberMe,
300
299
  onChange: setRememberMe
301
300
  }),
302
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
303
- gap: "2",
301
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
302
+ horizontal: true,
303
+ gap: "sm",
304
304
  children: [
305
305
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
306
306
  primary: true,
@@ -352,11 +352,12 @@ var ContactForm = {
352
352
  padded: true,
353
353
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Form.default, {
354
354
  onSubmit: handleSubmit,
355
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
356
- gap: "6",
355
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
356
+ gap: "md",
357
357
  children: [
358
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
359
- gap: "4",
358
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
359
+ horizontal: true,
360
+ gap: "md",
360
361
  children: [
361
362
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
362
363
  label: "Name",
@@ -409,15 +410,16 @@ var ContactForm = {
409
410
  },
410
411
  placeholder: "Select a subject"
411
412
  }),
412
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
413
- gap: "3",
413
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
414
+ gap: "sm",
414
415
  children: [
415
416
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
416
417
  variant: "headingSm",
417
418
  children: "Priority"
418
419
  }),
419
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
420
- gap: "6",
420
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
421
+ horizontal: true,
422
+ gap: "md",
421
423
  children: [
422
424
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_RadioButton.default, {
423
425
  label: "Low",
@@ -467,8 +469,9 @@ var ContactForm = {
467
469
  return updateField('subscribe', checked);
468
470
  }
469
471
  }),
470
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
471
- gap: "2",
472
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
473
+ horizontal: true,
474
+ gap: "sm",
472
475
  children: [
473
476
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
474
477
  primary: true,
@@ -561,8 +564,8 @@ var ValidationExample = {
561
564
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Form.default, {
562
565
  onSubmit: handleSubmit,
563
566
  noValidate: true,
564
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
565
- gap: "6",
567
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
568
+ gap: "md",
566
569
  children: [
567
570
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
568
571
  label: "Username",