@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/Grid.stories.js CHANGED
@@ -52,13 +52,12 @@ function _object_spread_props(target, source) {
52
52
  }
53
53
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
54
54
  import Grid from "../components/Grid.js";
55
+ import Stack from "../components/Stack.js";
55
56
  import Text from "../components/Text.js";
56
57
  import Card from "../components/Card.js";
57
58
  import Button from "../components/Button.js";
58
59
  import Badge from "../components/Badge.js";
59
60
  import Box from "../components/Box.js";
60
- import VerticalStack from "../components/VerticalStack.js";
61
- import HorizontalStack from "../components/HorizontalStack.js";
62
61
  import { transformStorySource } from "../utilities/transformers.js";
63
62
  export default {
64
63
  title: 'Litho/Grid',
@@ -119,7 +118,7 @@ export var Default = {
119
118
  padding: "8",
120
119
  background: "bg-surface-info-subdued",
121
120
  borderRadius: "1",
122
- children: /*#__PURE__*/ _jsx(VerticalStack, {
121
+ children: /*#__PURE__*/ _jsx(Stack, {
123
122
  inlineAlign: "center",
124
123
  children: /*#__PURE__*/ _jsx(Text, {
125
124
  children: "Item 1"
@@ -130,7 +129,7 @@ export var Default = {
130
129
  padding: "8",
131
130
  background: "bg-surface-magic-subdued",
132
131
  borderRadius: "1",
133
- children: /*#__PURE__*/ _jsx(VerticalStack, {
132
+ children: /*#__PURE__*/ _jsx(Stack, {
134
133
  inlineAlign: "center",
135
134
  children: /*#__PURE__*/ _jsx(Text, {
136
135
  children: "Item 2"
@@ -141,7 +140,7 @@ export var Default = {
141
140
  padding: "8",
142
141
  background: "bg-surface-success-subdued",
143
142
  borderRadius: "1",
144
- children: /*#__PURE__*/ _jsx(VerticalStack, {
143
+ children: /*#__PURE__*/ _jsx(Stack, {
145
144
  inlineAlign: "center",
146
145
  children: /*#__PURE__*/ _jsx(Text, {
147
146
  children: "Item 3"
@@ -152,7 +151,7 @@ export var Default = {
152
151
  padding: "8",
153
152
  background: "bg-surface-warning-subdued",
154
153
  borderRadius: "1",
155
- children: /*#__PURE__*/ _jsx(VerticalStack, {
154
+ children: /*#__PURE__*/ _jsx(Stack, {
156
155
  inlineAlign: "center",
157
156
  children: /*#__PURE__*/ _jsx(Text, {
158
157
  children: "Item 4"
@@ -163,7 +162,7 @@ export var Default = {
163
162
  padding: "8",
164
163
  background: "bg-surface-critical-subdued",
165
164
  borderRadius: "1",
166
- children: /*#__PURE__*/ _jsx(VerticalStack, {
165
+ children: /*#__PURE__*/ _jsx(Stack, {
167
166
  inlineAlign: "center",
168
167
  children: /*#__PURE__*/ _jsx(Text, {
169
168
  children: "Item 5"
@@ -174,7 +173,7 @@ export var Default = {
174
173
  padding: "8",
175
174
  background: "bg-surface-success-subdued",
176
175
  borderRadius: "1",
177
- children: /*#__PURE__*/ _jsx(VerticalStack, {
176
+ children: /*#__PURE__*/ _jsx(Stack, {
178
177
  inlineAlign: "center",
179
178
  children: /*#__PURE__*/ _jsx(Text, {
180
179
  children: "Item 6"
@@ -194,11 +193,11 @@ export var Default = {
194
193
  };
195
194
  export var DifferentColumns = {
196
195
  render: function() {
197
- return /*#__PURE__*/ _jsxs(VerticalStack, {
198
- gap: "8",
196
+ return /*#__PURE__*/ _jsxs(Stack, {
197
+ gap: "lg",
199
198
  children: [
200
- /*#__PURE__*/ _jsxs(VerticalStack, {
201
- gap: "4",
199
+ /*#__PURE__*/ _jsxs(Stack, {
200
+ gap: "md",
202
201
  children: [
203
202
  /*#__PURE__*/ _jsx(Text, {
204
203
  variant: "headingSm",
@@ -236,8 +235,8 @@ export var DifferentColumns = {
236
235
  })
237
236
  ]
238
237
  }),
239
- /*#__PURE__*/ _jsxs(VerticalStack, {
240
- gap: "4",
238
+ /*#__PURE__*/ _jsxs(Stack, {
239
+ gap: "md",
241
240
  children: [
242
241
  /*#__PURE__*/ _jsx(Text, {
243
242
  variant: "headingSm",
@@ -275,8 +274,8 @@ export var DifferentColumns = {
275
274
  })
276
275
  ]
277
276
  }),
278
- /*#__PURE__*/ _jsxs(VerticalStack, {
279
- gap: "4",
277
+ /*#__PURE__*/ _jsxs(Stack, {
278
+ gap: "md",
280
279
  children: [
281
280
  /*#__PURE__*/ _jsx(Text, {
282
281
  variant: "headingSm",
@@ -416,11 +415,11 @@ export var WithColumnSpan = {
416
415
  };
417
416
  export var GapSizes = {
418
417
  render: function() {
419
- return /*#__PURE__*/ _jsxs(VerticalStack, {
420
- gap: "8",
418
+ return /*#__PURE__*/ _jsxs(Stack, {
419
+ gap: "lg",
421
420
  children: [
422
- /*#__PURE__*/ _jsxs(VerticalStack, {
423
- gap: "4",
421
+ /*#__PURE__*/ _jsxs(Stack, {
422
+ gap: "md",
424
423
  children: [
425
424
  /*#__PURE__*/ _jsx(Text, {
426
425
  variant: "headingSm",
@@ -452,8 +451,8 @@ export var GapSizes = {
452
451
  })
453
452
  ]
454
453
  }),
455
- /*#__PURE__*/ _jsxs(VerticalStack, {
456
- gap: "4",
454
+ /*#__PURE__*/ _jsxs(Stack, {
455
+ gap: "md",
457
456
  children: [
458
457
  /*#__PURE__*/ _jsx(Text, {
459
458
  variant: "headingSm",
@@ -485,8 +484,8 @@ export var GapSizes = {
485
484
  })
486
485
  ]
487
486
  }),
488
- /*#__PURE__*/ _jsxs(VerticalStack, {
489
- gap: "4",
487
+ /*#__PURE__*/ _jsxs(Stack, {
488
+ gap: "md",
490
489
  children: [
491
490
  /*#__PURE__*/ _jsx(Text, {
492
491
  variant: "headingSm",
@@ -534,11 +533,11 @@ export var GapSizes = {
534
533
  };
535
534
  export var Alignment = {
536
535
  render: function() {
537
- return /*#__PURE__*/ _jsxs(VerticalStack, {
538
- gap: "12",
536
+ return /*#__PURE__*/ _jsxs(Stack, {
537
+ gap: "lg",
539
538
  children: [
540
- /*#__PURE__*/ _jsxs(VerticalStack, {
541
- gap: "4",
539
+ /*#__PURE__*/ _jsxs(Stack, {
540
+ gap: "md",
542
541
  children: [
543
542
  /*#__PURE__*/ _jsx(Text, {
544
543
  variant: "headingSm",
@@ -584,8 +583,8 @@ export var Alignment = {
584
583
  })
585
584
  ]
586
585
  }),
587
- /*#__PURE__*/ _jsxs(VerticalStack, {
588
- gap: "4",
586
+ /*#__PURE__*/ _jsxs(Stack, {
587
+ gap: "md",
589
588
  children: [
590
589
  /*#__PURE__*/ _jsx(Text, {
591
590
  variant: "headingSm",
@@ -694,8 +693,8 @@ export var ProductCatalog = {
694
693
  children: products.map(function(product, index) {
695
694
  return /*#__PURE__*/ _jsx(Card, {
696
695
  padded: true,
697
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
698
- gap: "4",
696
+ children: /*#__PURE__*/ _jsxs(Stack, {
697
+ gap: "md",
699
698
  inlineAlign: "center",
700
699
  children: [
701
700
  /*#__PURE__*/ _jsx("div", {
@@ -704,8 +703,8 @@ export var ProductCatalog = {
704
703
  },
705
704
  children: product.image
706
705
  }),
707
- /*#__PURE__*/ _jsxs(VerticalStack, {
708
- gap: "2",
706
+ /*#__PURE__*/ _jsxs(Stack, {
707
+ gap: "sm",
709
708
  inlineAlign: "center",
710
709
  children: [
711
710
  /*#__PURE__*/ _jsx(Text, {
@@ -747,8 +746,8 @@ export var ProductCatalog = {
747
746
  };
748
747
  export var DashboardLayout = {
749
748
  render: function() {
750
- return /*#__PURE__*/ _jsxs(VerticalStack, {
751
- gap: "8",
749
+ return /*#__PURE__*/ _jsxs(Stack, {
750
+ gap: "lg",
752
751
  children: [
753
752
  /*#__PURE__*/ _jsxs(Grid, {
754
753
  columns: 4,
@@ -846,8 +845,8 @@ export var DashboardLayout = {
846
845
  /*#__PURE__*/ _jsx(Card, {
847
846
  title: "Quick Actions",
848
847
  padded: true,
849
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
850
- gap: "4",
848
+ children: /*#__PURE__*/ _jsxs(Stack, {
849
+ gap: "md",
851
850
  children: [
852
851
  /*#__PURE__*/ _jsx(Button, {
853
852
  fullWidth: true,
@@ -937,8 +936,8 @@ export var TeamDirectory = {
937
936
  children: team.map(function(member, index) {
938
937
  return /*#__PURE__*/ _jsx(Card, {
939
938
  padded: true,
940
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
941
- gap: "4",
939
+ children: /*#__PURE__*/ _jsxs(Stack, {
940
+ gap: "md",
942
941
  inlineAlign: "center",
943
942
  children: [
944
943
  /*#__PURE__*/ _jsx("div", {
@@ -947,8 +946,8 @@ export var TeamDirectory = {
947
946
  },
948
947
  children: member.avatar
949
948
  }),
950
- /*#__PURE__*/ _jsxs(VerticalStack, {
951
- gap: "1",
949
+ /*#__PURE__*/ _jsxs(Stack, {
950
+ gap: "xs",
952
951
  inlineAlign: "center",
953
952
  children: [
954
953
  /*#__PURE__*/ _jsx(Text, {
@@ -962,8 +961,9 @@ export var TeamDirectory = {
962
961
  })
963
962
  ]
964
963
  }),
965
- /*#__PURE__*/ _jsxs(HorizontalStack, {
966
- gap: "2",
964
+ /*#__PURE__*/ _jsxs(Stack, {
965
+ horizontal: true,
966
+ gap: "sm",
967
967
  children: [
968
968
  /*#__PURE__*/ _jsx(Button, {
969
969
  size: "small",
@@ -1012,8 +1012,8 @@ export var ImageGallery = {
1012
1012
  backgroundColor: '#e3f2fd',
1013
1013
  borderRadius: '8px'
1014
1014
  },
1015
- children: /*#__PURE__*/ _jsx(VerticalStack, {
1016
- gap: "0",
1015
+ children: /*#__PURE__*/ _jsx(Stack, {
1016
+ gap: "none",
1017
1017
  blockAlign: "center",
1018
1018
  inlineAlign: "center",
1019
1019
  children: /*#__PURE__*/ _jsx(Text, {
@@ -1028,8 +1028,8 @@ export var ImageGallery = {
1028
1028
  backgroundColor: '#f3e5f5',
1029
1029
  borderRadius: '8px'
1030
1030
  },
1031
- children: /*#__PURE__*/ _jsx(VerticalStack, {
1032
- gap: "0",
1031
+ children: /*#__PURE__*/ _jsx(Stack, {
1032
+ gap: "none",
1033
1033
  blockAlign: "center",
1034
1034
  inlineAlign: "center",
1035
1035
  style: {
@@ -1047,8 +1047,8 @@ export var ImageGallery = {
1047
1047
  backgroundColor: '#e8f5e8',
1048
1048
  borderRadius: '8px'
1049
1049
  },
1050
- children: /*#__PURE__*/ _jsx(VerticalStack, {
1051
- gap: "0",
1050
+ children: /*#__PURE__*/ _jsx(Stack, {
1051
+ gap: "none",
1052
1052
  blockAlign: "center",
1053
1053
  inlineAlign: "center",
1054
1054
  style: {
@@ -1066,8 +1066,8 @@ export var ImageGallery = {
1066
1066
  backgroundColor: '#fff3e0',
1067
1067
  borderRadius: '8px'
1068
1068
  },
1069
- children: /*#__PURE__*/ _jsx(VerticalStack, {
1070
- gap: "0",
1069
+ children: /*#__PURE__*/ _jsx(Stack, {
1070
+ gap: "none",
1071
1071
  blockAlign: "center",
1072
1072
  inlineAlign: "center",
1073
1073
  style: {
@@ -1085,8 +1085,8 @@ export var ImageGallery = {
1085
1085
  backgroundColor: '#fce4ec',
1086
1086
  borderRadius: '8px'
1087
1087
  },
1088
- children: /*#__PURE__*/ _jsx(VerticalStack, {
1089
- gap: "0",
1088
+ children: /*#__PURE__*/ _jsx(Stack, {
1089
+ gap: "none",
1090
1090
  blockAlign: "center",
1091
1091
  inlineAlign: "center",
1092
1092
  style: {
@@ -1106,8 +1106,8 @@ export var ImageGallery = {
1106
1106
  backgroundColor: '#e0f2f1',
1107
1107
  borderRadius: '8px'
1108
1108
  },
1109
- children: /*#__PURE__*/ _jsx(VerticalStack, {
1110
- gap: "0",
1109
+ children: /*#__PURE__*/ _jsx(Stack, {
1110
+ gap: "none",
1111
1111
  blockAlign: "center",
1112
1112
  inlineAlign: "center",
1113
1113
  children: /*#__PURE__*/ _jsx(Text, {
@@ -1122,8 +1122,8 @@ export var ImageGallery = {
1122
1122
  backgroundColor: '#f1f8e9',
1123
1123
  borderRadius: '8px'
1124
1124
  },
1125
- children: /*#__PURE__*/ _jsx(VerticalStack, {
1126
- gap: "0",
1125
+ children: /*#__PURE__*/ _jsx(Stack, {
1126
+ gap: "none",
1127
1127
  blockAlign: "center",
1128
1128
  inlineAlign: "center",
1129
1129
  style: {
package/dist/esm/stories/Icon.stories.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import Icon from "../components/Icon.js";
3
- import HorizontalStack from "../components/HorizontalStack.js";
4
- import VerticalStack from "../components/VerticalStack.js";
3
+ import Stack from "../components/Stack.js";
5
4
  import Grid from "../components/Grid.js";
6
5
  import Text from "../components/Text.js";
7
6
  import { TickMinor, AlertMinor, CancelMinor, SearchMinor, SettingsMinor, HomeMinor, PlusMinor, DeleteMinor, EditMinor, ViewMinor } from "@shopify/polaris-icons";
@@ -195,11 +194,12 @@ export var Default = {
195
194
  };
196
195
  export var Sizes = {
197
196
  render: function() {
198
- return /*#__PURE__*/ _jsxs(HorizontalStack, {
199
- gap: "4",
197
+ return /*#__PURE__*/ _jsxs(Stack, {
198
+ horizontal: true,
199
+ gap: "md",
200
200
  blockAlign: "center",
201
201
  children: [
202
- /*#__PURE__*/ _jsxs(VerticalStack, {
202
+ /*#__PURE__*/ _jsxs(Stack, {
203
203
  inlineAlign: "center",
204
204
  children: [
205
205
  /*#__PURE__*/ _jsx(Icon, {
@@ -212,7 +212,7 @@ export var Sizes = {
212
212
  })
213
213
  ]
214
214
  }),
215
- /*#__PURE__*/ _jsxs(VerticalStack, {
215
+ /*#__PURE__*/ _jsxs(Stack, {
216
216
  inlineAlign: "center",
217
217
  children: [
218
218
  /*#__PURE__*/ _jsx(Icon, {
@@ -225,7 +225,7 @@ export var Sizes = {
225
225
  })
226
226
  ]
227
227
  }),
228
- /*#__PURE__*/ _jsxs(VerticalStack, {
228
+ /*#__PURE__*/ _jsxs(Stack, {
229
229
  inlineAlign: "center",
230
230
  children: [
231
231
  /*#__PURE__*/ _jsx(Icon, {
@@ -238,7 +238,7 @@ export var Sizes = {
238
238
  })
239
239
  ]
240
240
  }),
241
- /*#__PURE__*/ _jsxs(VerticalStack, {
241
+ /*#__PURE__*/ _jsxs(Stack, {
242
242
  inlineAlign: "center",
243
243
  children: [
244
244
  /*#__PURE__*/ _jsx(Icon, {
@@ -251,7 +251,7 @@ export var Sizes = {
251
251
  })
252
252
  ]
253
253
  }),
254
- /*#__PURE__*/ _jsxs(VerticalStack, {
254
+ /*#__PURE__*/ _jsxs(Stack, {
255
255
  inlineAlign: "center",
256
256
  children: [
257
257
  /*#__PURE__*/ _jsx(Icon, {
@@ -264,7 +264,7 @@ export var Sizes = {
264
264
  })
265
265
  ]
266
266
  }),
267
- /*#__PURE__*/ _jsxs(VerticalStack, {
267
+ /*#__PURE__*/ _jsxs(Stack, {
268
268
  inlineAlign: "center",
269
269
  children: [
270
270
  /*#__PURE__*/ _jsx(Icon, {
@@ -295,7 +295,7 @@ export var Colors = {
295
295
  gap: "4",
296
296
  blockAlign: "center",
297
297
  children: [
298
- /*#__PURE__*/ _jsxs(VerticalStack, {
298
+ /*#__PURE__*/ _jsxs(Stack, {
299
299
  inlineAlign: "center",
300
300
  children: [
301
301
  /*#__PURE__*/ _jsx(Icon, {
@@ -308,7 +308,7 @@ export var Colors = {
308
308
  })
309
309
  ]
310
310
  }),
311
- /*#__PURE__*/ _jsxs(VerticalStack, {
311
+ /*#__PURE__*/ _jsxs(Stack, {
312
312
  inlineAlign: "center",
313
313
  children: [
314
314
  /*#__PURE__*/ _jsx(Icon, {
@@ -321,7 +321,7 @@ export var Colors = {
321
321
  })
322
322
  ]
323
323
  }),
324
- /*#__PURE__*/ _jsxs(VerticalStack, {
324
+ /*#__PURE__*/ _jsxs(Stack, {
325
325
  inlineAlign: "center",
326
326
  children: [
327
327
  /*#__PURE__*/ _jsx(Icon, {
@@ -334,7 +334,7 @@ export var Colors = {
334
334
  })
335
335
  ]
336
336
  }),
337
- /*#__PURE__*/ _jsxs(VerticalStack, {
337
+ /*#__PURE__*/ _jsxs(Stack, {
338
338
  inlineAlign: "center",
339
339
  children: [
340
340
  /*#__PURE__*/ _jsx(Icon, {
@@ -347,7 +347,7 @@ export var Colors = {
347
347
  })
348
348
  ]
349
349
  }),
350
- /*#__PURE__*/ _jsxs(VerticalStack, {
350
+ /*#__PURE__*/ _jsxs(Stack, {
351
351
  inlineAlign: "center",
352
352
  children: [
353
353
  /*#__PURE__*/ _jsx(Icon, {
@@ -360,7 +360,7 @@ export var Colors = {
360
360
  })
361
361
  ]
362
362
  }),
363
- /*#__PURE__*/ _jsxs(VerticalStack, {
363
+ /*#__PURE__*/ _jsxs(Stack, {
364
364
  inlineAlign: "center",
365
365
  children: [
366
366
  /*#__PURE__*/ _jsx(Icon, {
@@ -373,7 +373,7 @@ export var Colors = {
373
373
  })
374
374
  ]
375
375
  }),
376
- /*#__PURE__*/ _jsxs(VerticalStack, {
376
+ /*#__PURE__*/ _jsxs(Stack, {
377
377
  inlineAlign: "center",
378
378
  children: [
379
379
  /*#__PURE__*/ _jsx(Icon, {
@@ -386,7 +386,7 @@ export var Colors = {
386
386
  })
387
387
  ]
388
388
  }),
389
- /*#__PURE__*/ _jsxs(VerticalStack, {
389
+ /*#__PURE__*/ _jsxs(Stack, {
390
390
  inlineAlign: "center",
391
391
  children: [
392
392
  /*#__PURE__*/ _jsx(Icon, {
@@ -412,11 +412,12 @@ export var Colors = {
412
412
  };
413
413
  export var CustomIcons = {
414
414
  render: function() {
415
- return /*#__PURE__*/ _jsxs(HorizontalStack, {
416
- gap: "8",
415
+ return /*#__PURE__*/ _jsxs(Stack, {
416
+ horizontal: true,
417
+ gap: "lg",
417
418
  blockAlign: "center",
418
419
  children: [
419
- /*#__PURE__*/ _jsxs(VerticalStack, {
420
+ /*#__PURE__*/ _jsxs(Stack, {
420
421
  inlineAlign: "center",
421
422
  children: [
422
423
  /*#__PURE__*/ _jsx(Icon, {
@@ -429,7 +430,7 @@ export var CustomIcons = {
429
430
  })
430
431
  ]
431
432
  }),
432
- /*#__PURE__*/ _jsxs(VerticalStack, {
433
+ /*#__PURE__*/ _jsxs(Stack, {
433
434
  inlineAlign: "center",
434
435
  children: [
435
436
  /*#__PURE__*/ _jsx(Icon, {
@@ -442,7 +443,7 @@ export var CustomIcons = {
442
443
  })
443
444
  ]
444
445
  }),
445
- /*#__PURE__*/ _jsxs(VerticalStack, {
446
+ /*#__PURE__*/ _jsxs(Stack, {
446
447
  inlineAlign: "center",
447
448
  children: [
448
449
  /*#__PURE__*/ _jsx(Icon, {
@@ -455,7 +456,7 @@ export var CustomIcons = {
455
456
  })
456
457
  ]
457
458
  }),
458
- /*#__PURE__*/ _jsxs(VerticalStack, {
459
+ /*#__PURE__*/ _jsxs(Stack, {
459
460
  inlineAlign: "center",
460
461
  children: [
461
462
  /*#__PURE__*/ _jsx(Icon, {
@@ -498,8 +499,9 @@ export var Interactive = {
498
499
  };
499
500
  export var InlineFlex = {
500
501
  render: function() {
501
- return /*#__PURE__*/ _jsxs(HorizontalStack, {
502
- gap: "2",
502
+ return /*#__PURE__*/ _jsxs(Stack, {
503
+ horizontal: true,
504
+ gap: "sm",
503
505
  blockAlign: "center",
504
506
  children: [
505
507
  /*#__PURE__*/ _jsx(Icon, {
@@ -523,8 +525,9 @@ export var InlineFlex = {
523
525
  };
524
526
  export var ButtonIcons = {
525
527
  render: function() {
526
- return /*#__PURE__*/ _jsxs(HorizontalStack, {
527
- gap: "4",
528
+ return /*#__PURE__*/ _jsxs(Stack, {
529
+ horizontal: true,
530
+ gap: "md",
528
531
  children: [
529
532
  /*#__PURE__*/ _jsx(Icon, {
530
533
  source: PlusMinor,