@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/Grid.stories.js CHANGED
@@ -42,13 +42,12 @@ _export(exports, {
42
42
  });
43
43
  var _jsxruntime = require("react/jsx-runtime");
44
44
  var _Grid = /*#__PURE__*/ _interop_require_default(require("../components/Grid.js"));
45
+ var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
45
46
  var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
46
47
  var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
47
48
  var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
48
49
  var _Badge = /*#__PURE__*/ _interop_require_default(require("../components/Badge.js"));
49
50
  var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
50
- var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
51
- var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
52
51
  var _transformers = require("../utilities/transformers.js");
53
52
  function _define_property(obj, key, value) {
54
53
  if (key in obj) {
@@ -166,7 +165,7 @@ var Default = {
166
165
  padding: "8",
167
166
  background: "bg-surface-info-subdued",
168
167
  borderRadius: "1",
169
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
168
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
170
169
  inlineAlign: "center",
171
170
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
172
171
  children: "Item 1"
@@ -177,7 +176,7 @@ var Default = {
177
176
  padding: "8",
178
177
  background: "bg-surface-magic-subdued",
179
178
  borderRadius: "1",
180
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
179
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
181
180
  inlineAlign: "center",
182
181
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
183
182
  children: "Item 2"
@@ -188,7 +187,7 @@ var Default = {
188
187
  padding: "8",
189
188
  background: "bg-surface-success-subdued",
190
189
  borderRadius: "1",
191
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
190
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
192
191
  inlineAlign: "center",
193
192
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
194
193
  children: "Item 3"
@@ -199,7 +198,7 @@ var Default = {
199
198
  padding: "8",
200
199
  background: "bg-surface-warning-subdued",
201
200
  borderRadius: "1",
202
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
201
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
203
202
  inlineAlign: "center",
204
203
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
205
204
  children: "Item 4"
@@ -210,7 +209,7 @@ var Default = {
210
209
  padding: "8",
211
210
  background: "bg-surface-critical-subdued",
212
211
  borderRadius: "1",
213
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
212
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
214
213
  inlineAlign: "center",
215
214
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
216
215
  children: "Item 5"
@@ -221,7 +220,7 @@ var Default = {
221
220
  padding: "8",
222
221
  background: "bg-surface-success-subdued",
223
222
  borderRadius: "1",
224
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
223
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
225
224
  inlineAlign: "center",
226
225
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
227
226
  children: "Item 6"
@@ -241,11 +240,11 @@ var Default = {
241
240
  };
242
241
  var DifferentColumns = {
243
242
  render: function() {
244
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
245
- gap: "8",
243
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
244
+ gap: "lg",
246
245
  children: [
247
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
248
- gap: "4",
246
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
247
+ gap: "md",
249
248
  children: [
250
249
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
251
250
  variant: "headingSm",
@@ -283,8 +282,8 @@ var DifferentColumns = {
283
282
  })
284
283
  ]
285
284
  }),
286
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
287
- gap: "4",
285
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
286
+ gap: "md",
288
287
  children: [
289
288
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
290
289
  variant: "headingSm",
@@ -322,8 +321,8 @@ var DifferentColumns = {
322
321
  })
323
322
  ]
324
323
  }),
325
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
326
- gap: "4",
324
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
325
+ gap: "md",
327
326
  children: [
328
327
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
329
328
  variant: "headingSm",
@@ -463,11 +462,11 @@ var WithColumnSpan = {
463
462
  };
464
463
  var GapSizes = {
465
464
  render: function() {
466
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
467
- gap: "8",
465
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
466
+ gap: "lg",
468
467
  children: [
469
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
470
- gap: "4",
468
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
469
+ gap: "md",
471
470
  children: [
472
471
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
473
472
  variant: "headingSm",
@@ -499,8 +498,8 @@ var GapSizes = {
499
498
  })
500
499
  ]
501
500
  }),
502
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
503
- gap: "4",
501
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
502
+ gap: "md",
504
503
  children: [
505
504
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
506
505
  variant: "headingSm",
@@ -532,8 +531,8 @@ var GapSizes = {
532
531
  })
533
532
  ]
534
533
  }),
535
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
536
- gap: "4",
534
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
535
+ gap: "md",
537
536
  children: [
538
537
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
539
538
  variant: "headingSm",
@@ -581,11 +580,11 @@ var GapSizes = {
581
580
  };
582
581
  var Alignment = {
583
582
  render: function() {
584
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
585
- gap: "12",
583
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
584
+ gap: "lg",
586
585
  children: [
587
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
588
- gap: "4",
586
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
587
+ gap: "md",
589
588
  children: [
590
589
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
591
590
  variant: "headingSm",
@@ -631,8 +630,8 @@ var Alignment = {
631
630
  })
632
631
  ]
633
632
  }),
634
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
635
- gap: "4",
633
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
634
+ gap: "md",
636
635
  children: [
637
636
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
638
637
  variant: "headingSm",
@@ -741,8 +740,8 @@ var ProductCatalog = {
741
740
  children: products.map(function(product, index) {
742
741
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
743
742
  padded: true,
744
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
745
- gap: "4",
743
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
744
+ gap: "md",
746
745
  inlineAlign: "center",
747
746
  children: [
748
747
  /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
@@ -751,8 +750,8 @@ var ProductCatalog = {
751
750
  },
752
751
  children: product.image
753
752
  }),
754
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
755
- gap: "2",
753
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
754
+ gap: "sm",
756
755
  inlineAlign: "center",
757
756
  children: [
758
757
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -794,8 +793,8 @@ var ProductCatalog = {
794
793
  };
795
794
  var DashboardLayout = {
796
795
  render: function() {
797
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
798
- gap: "8",
796
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
797
+ gap: "lg",
799
798
  children: [
800
799
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
801
800
  columns: 4,
@@ -893,8 +892,8 @@ var DashboardLayout = {
893
892
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
894
893
  title: "Quick Actions",
895
894
  padded: true,
896
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
897
- gap: "4",
895
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
896
+ gap: "md",
898
897
  children: [
899
898
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
900
899
  fullWidth: true,
@@ -984,8 +983,8 @@ var TeamDirectory = {
984
983
  children: team.map(function(member, index) {
985
984
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
986
985
  padded: true,
987
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
988
- gap: "4",
986
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
987
+ gap: "md",
989
988
  inlineAlign: "center",
990
989
  children: [
991
990
  /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
@@ -994,8 +993,8 @@ var TeamDirectory = {
994
993
  },
995
994
  children: member.avatar
996
995
  }),
997
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
998
- gap: "1",
996
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
997
+ gap: "xs",
999
998
  inlineAlign: "center",
1000
999
  children: [
1001
1000
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -1009,8 +1008,9 @@ var TeamDirectory = {
1009
1008
  })
1010
1009
  ]
1011
1010
  }),
1012
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
1013
- gap: "2",
1011
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1012
+ horizontal: true,
1013
+ gap: "sm",
1014
1014
  children: [
1015
1015
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
1016
1016
  size: "small",
@@ -1059,8 +1059,8 @@ var ImageGallery = {
1059
1059
  backgroundColor: '#e3f2fd',
1060
1060
  borderRadius: '8px'
1061
1061
  },
1062
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
1063
- gap: "0",
1062
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
1063
+ gap: "none",
1064
1064
  blockAlign: "center",
1065
1065
  inlineAlign: "center",
1066
1066
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -1075,8 +1075,8 @@ var ImageGallery = {
1075
1075
  backgroundColor: '#f3e5f5',
1076
1076
  borderRadius: '8px'
1077
1077
  },
1078
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
1079
- gap: "0",
1078
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
1079
+ gap: "none",
1080
1080
  blockAlign: "center",
1081
1081
  inlineAlign: "center",
1082
1082
  style: {
@@ -1094,8 +1094,8 @@ var ImageGallery = {
1094
1094
  backgroundColor: '#e8f5e8',
1095
1095
  borderRadius: '8px'
1096
1096
  },
1097
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
1098
- gap: "0",
1097
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
1098
+ gap: "none",
1099
1099
  blockAlign: "center",
1100
1100
  inlineAlign: "center",
1101
1101
  style: {
@@ -1113,8 +1113,8 @@ var ImageGallery = {
1113
1113
  backgroundColor: '#fff3e0',
1114
1114
  borderRadius: '8px'
1115
1115
  },
1116
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
1117
- gap: "0",
1116
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
1117
+ gap: "none",
1118
1118
  blockAlign: "center",
1119
1119
  inlineAlign: "center",
1120
1120
  style: {
@@ -1132,8 +1132,8 @@ var ImageGallery = {
1132
1132
  backgroundColor: '#fce4ec',
1133
1133
  borderRadius: '8px'
1134
1134
  },
1135
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
1136
- gap: "0",
1135
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
1136
+ gap: "none",
1137
1137
  blockAlign: "center",
1138
1138
  inlineAlign: "center",
1139
1139
  style: {
@@ -1153,8 +1153,8 @@ var ImageGallery = {
1153
1153
  backgroundColor: '#e0f2f1',
1154
1154
  borderRadius: '8px'
1155
1155
  },
1156
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
1157
- gap: "0",
1156
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
1157
+ gap: "none",
1158
1158
  blockAlign: "center",
1159
1159
  inlineAlign: "center",
1160
1160
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -1169,8 +1169,8 @@ var ImageGallery = {
1169
1169
  backgroundColor: '#f1f8e9',
1170
1170
  borderRadius: '8px'
1171
1171
  },
1172
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
1173
- gap: "0",
1172
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
1173
+ gap: "none",
1174
1174
  blockAlign: "center",
1175
1175
  inlineAlign: "center",
1176
1176
  style: {
package/dist/cjs/stories/Icon.stories.js CHANGED
@@ -36,8 +36,7 @@ _export(exports, {
36
36
  });
37
37
  var _jsxruntime = require("react/jsx-runtime");
38
38
  var _Icon = /*#__PURE__*/ _interop_require_default(require("../components/Icon.js"));
39
- var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
40
- var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
39
+ var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
41
40
  var _Grid = /*#__PURE__*/ _interop_require_default(require("../components/Grid.js"));
42
41
  var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
43
42
  var _polarisicons = require("@shopify/polaris-icons");
@@ -236,11 +235,12 @@ var Default = {
236
235
  };
237
236
  var Sizes = {
238
237
  render: function() {
239
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
240
- gap: "4",
238
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
239
+ horizontal: true,
240
+ gap: "md",
241
241
  blockAlign: "center",
242
242
  children: [
243
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
243
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
244
244
  inlineAlign: "center",
245
245
  children: [
246
246
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
@@ -253,7 +253,7 @@ var Sizes = {
253
253
  })
254
254
  ]
255
255
  }),
256
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
256
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
257
257
  inlineAlign: "center",
258
258
  children: [
259
259
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
@@ -266,7 +266,7 @@ var Sizes = {
266
266
  })
267
267
  ]
268
268
  }),
269
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
269
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
270
270
  inlineAlign: "center",
271
271
  children: [
272
272
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
@@ -279,7 +279,7 @@ var Sizes = {
279
279
  })
280
280
  ]
281
281
  }),
282
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
282
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
283
283
  inlineAlign: "center",
284
284
  children: [
285
285
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
@@ -292,7 +292,7 @@ var Sizes = {
292
292
  })
293
293
  ]
294
294
  }),
295
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
295
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
296
296
  inlineAlign: "center",
297
297
  children: [
298
298
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
@@ -305,7 +305,7 @@ var Sizes = {
305
305
  })
306
306
  ]
307
307
  }),
308
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
308
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
309
309
  inlineAlign: "center",
310
310
  children: [
311
311
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
@@ -336,7 +336,7 @@ var Colors = {
336
336
  gap: "4",
337
337
  blockAlign: "center",
338
338
  children: [
339
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
339
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
340
340
  inlineAlign: "center",
341
341
  children: [
342
342
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
@@ -349,7 +349,7 @@ var Colors = {
349
349
  })
350
350
  ]
351
351
  }),
352
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
352
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
353
353
  inlineAlign: "center",
354
354
  children: [
355
355
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
@@ -362,7 +362,7 @@ var Colors = {
362
362
  })
363
363
  ]
364
364
  }),
365
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
365
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
366
366
  inlineAlign: "center",
367
367
  children: [
368
368
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
@@ -375,7 +375,7 @@ var Colors = {
375
375
  })
376
376
  ]
377
377
  }),
378
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
378
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
379
379
  inlineAlign: "center",
380
380
  children: [
381
381
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
@@ -388,7 +388,7 @@ var Colors = {
388
388
  })
389
389
  ]
390
390
  }),
391
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
391
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
392
392
  inlineAlign: "center",
393
393
  children: [
394
394
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
@@ -401,7 +401,7 @@ var Colors = {
401
401
  })
402
402
  ]
403
403
  }),
404
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
404
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
405
405
  inlineAlign: "center",
406
406
  children: [
407
407
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
@@ -414,7 +414,7 @@ var Colors = {
414
414
  })
415
415
  ]
416
416
  }),
417
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
417
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
418
418
  inlineAlign: "center",
419
419
  children: [
420
420
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
@@ -427,7 +427,7 @@ var Colors = {
427
427
  })
428
428
  ]
429
429
  }),
430
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
430
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
431
431
  inlineAlign: "center",
432
432
  children: [
433
433
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
@@ -453,11 +453,12 @@ var Colors = {
453
453
  };
454
454
  var CustomIcons = {
455
455
  render: function() {
456
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
457
- gap: "8",
456
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
457
+ horizontal: true,
458
+ gap: "lg",
458
459
  blockAlign: "center",
459
460
  children: [
460
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
461
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
461
462
  inlineAlign: "center",
462
463
  children: [
463
464
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
@@ -470,7 +471,7 @@ var CustomIcons = {
470
471
  })
471
472
  ]
472
473
  }),
473
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
474
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
474
475
  inlineAlign: "center",
475
476
  children: [
476
477
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
@@ -483,7 +484,7 @@ var CustomIcons = {
483
484
  })
484
485
  ]
485
486
  }),
486
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
487
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
487
488
  inlineAlign: "center",
488
489
  children: [
489
490
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
@@ -496,7 +497,7 @@ var CustomIcons = {
496
497
  })
497
498
  ]
498
499
  }),
499
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
500
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
500
501
  inlineAlign: "center",
501
502
  children: [
502
503
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
@@ -539,8 +540,9 @@ var Interactive = {
539
540
  };
540
541
  var InlineFlex = {
541
542
  render: function() {
542
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
543
- gap: "2",
543
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
544
+ horizontal: true,
545
+ gap: "sm",
544
546
  blockAlign: "center",
545
547
  children: [
546
548
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
@@ -564,8 +566,9 @@ var InlineFlex = {
564
566
  };
565
567
  var ButtonIcons = {
566
568
  render: function() {
567
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
568
- gap: "4",
569
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
570
+ horizontal: true,
571
+ gap: "md",
569
572
  children: [
570
573
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
571
574
  source: _polarisicons.PlusMinor,