@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/ProgressBar.stories.js CHANGED
@@ -1,10 +1,9 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { transformStorySource } from "../utilities/transformers.js";
3
+ import Stack from "../components/Stack.js";
3
4
  import ProgressBar from "../components/ProgressBar.js";
4
5
  import Text from "../components/Text.js";
5
6
  import Card from "../components/Card.js";
6
- import VerticalStack from "../components/VerticalStack.js";
7
- import HorizontalStack from "../components/HorizontalStack.js";
8
7
  export default {
9
8
  title: 'Litho/ProgressBar',
10
9
  component: ProgressBar,
@@ -64,11 +63,11 @@ export default {
64
63
  export var Default = {};
65
64
  export var Sizes = {
66
65
  render: function() {
67
- return /*#__PURE__*/ _jsxs(VerticalStack, {
68
- gap: "6",
66
+ return /*#__PURE__*/ _jsxs(Stack, {
67
+ gap: "md",
69
68
  children: [
70
- /*#__PURE__*/ _jsxs(VerticalStack, {
71
- gap: "2",
69
+ /*#__PURE__*/ _jsxs(Stack, {
70
+ gap: "sm",
72
71
  children: [
73
72
  /*#__PURE__*/ _jsx(Text, {
74
73
  variant: "bodySm",
@@ -81,8 +80,8 @@ export var Sizes = {
81
80
  })
82
81
  ]
83
82
  }),
84
- /*#__PURE__*/ _jsxs(VerticalStack, {
85
- gap: "2",
83
+ /*#__PURE__*/ _jsxs(Stack, {
84
+ gap: "sm",
86
85
  children: [
87
86
  /*#__PURE__*/ _jsx(Text, {
88
87
  variant: "bodySm",
@@ -95,8 +94,8 @@ export var Sizes = {
95
94
  })
96
95
  ]
97
96
  }),
98
- /*#__PURE__*/ _jsxs(VerticalStack, {
99
- gap: "2",
97
+ /*#__PURE__*/ _jsxs(Stack, {
98
+ gap: "sm",
100
99
  children: [
101
100
  /*#__PURE__*/ _jsx(Text, {
102
101
  variant: "bodySm",
@@ -122,11 +121,11 @@ export var Sizes = {
122
121
  };
123
122
  export var Colors = {
124
123
  render: function() {
125
- return /*#__PURE__*/ _jsxs(VerticalStack, {
126
- gap: "6",
124
+ return /*#__PURE__*/ _jsxs(Stack, {
125
+ gap: "md",
127
126
  children: [
128
- /*#__PURE__*/ _jsxs(VerticalStack, {
129
- gap: "2",
127
+ /*#__PURE__*/ _jsxs(Stack, {
128
+ gap: "sm",
130
129
  children: [
131
130
  /*#__PURE__*/ _jsx(Text, {
132
131
  variant: "bodySm",
@@ -139,8 +138,8 @@ export var Colors = {
139
138
  })
140
139
  ]
141
140
  }),
142
- /*#__PURE__*/ _jsxs(VerticalStack, {
143
- gap: "2",
141
+ /*#__PURE__*/ _jsxs(Stack, {
142
+ gap: "sm",
144
143
  children: [
145
144
  /*#__PURE__*/ _jsx(Text, {
146
145
  variant: "bodySm",
@@ -153,8 +152,8 @@ export var Colors = {
153
152
  })
154
153
  ]
155
154
  }),
156
- /*#__PURE__*/ _jsxs(VerticalStack, {
157
- gap: "2",
155
+ /*#__PURE__*/ _jsxs(Stack, {
156
+ gap: "sm",
158
157
  children: [
159
158
  /*#__PURE__*/ _jsx(Text, {
160
159
  variant: "bodySm",
@@ -167,8 +166,8 @@ export var Colors = {
167
166
  })
168
167
  ]
169
168
  }),
170
- /*#__PURE__*/ _jsxs(VerticalStack, {
171
- gap: "2",
169
+ /*#__PURE__*/ _jsxs(Stack, {
170
+ gap: "sm",
172
171
  children: [
173
172
  /*#__PURE__*/ _jsx(Text, {
174
173
  variant: "bodySm",
@@ -181,8 +180,8 @@ export var Colors = {
181
180
  })
182
181
  ]
183
182
  }),
184
- /*#__PURE__*/ _jsxs(VerticalStack, {
185
- gap: "2",
183
+ /*#__PURE__*/ _jsxs(Stack, {
184
+ gap: "sm",
186
185
  children: [
187
186
  /*#__PURE__*/ _jsx(Text, {
188
187
  variant: "bodySm",
@@ -208,13 +207,14 @@ export var Colors = {
208
207
  };
209
208
  export var WithLabels = {
210
209
  render: function() {
211
- return /*#__PURE__*/ _jsxs(VerticalStack, {
212
- gap: "8",
210
+ return /*#__PURE__*/ _jsxs(Stack, {
211
+ gap: "lg",
213
212
  children: [
214
- /*#__PURE__*/ _jsxs(VerticalStack, {
215
- gap: "1",
213
+ /*#__PURE__*/ _jsxs(Stack, {
214
+ gap: "xs",
216
215
  children: [
217
- /*#__PURE__*/ _jsxs(HorizontalStack, {
216
+ /*#__PURE__*/ _jsxs(Stack, {
217
+ horizontal: true,
218
218
  align: "space-between",
219
219
  children: [
220
220
  /*#__PURE__*/ _jsx(Text, {
@@ -238,10 +238,11 @@ export var WithLabels = {
238
238
  })
239
239
  ]
240
240
  }),
241
- /*#__PURE__*/ _jsxs(VerticalStack, {
242
- gap: "1",
241
+ /*#__PURE__*/ _jsxs(Stack, {
242
+ gap: "xs",
243
243
  children: [
244
- /*#__PURE__*/ _jsxs(HorizontalStack, {
244
+ /*#__PURE__*/ _jsxs(Stack, {
245
+ horizontal: true,
245
246
  align: "space-between",
246
247
  children: [
247
248
  /*#__PURE__*/ _jsx(Text, {
@@ -265,10 +266,11 @@ export var WithLabels = {
265
266
  })
266
267
  ]
267
268
  }),
268
- /*#__PURE__*/ _jsxs(VerticalStack, {
269
- gap: "1",
269
+ /*#__PURE__*/ _jsxs(Stack, {
270
+ gap: "xs",
270
271
  children: [
271
- /*#__PURE__*/ _jsxs(HorizontalStack, {
272
+ /*#__PURE__*/ _jsxs(Stack, {
273
+ horizontal: true,
272
274
  align: "space-between",
273
275
  children: [
274
276
  /*#__PURE__*/ _jsx(Text, {
@@ -305,18 +307,19 @@ export var WithLabels = {
305
307
  };
306
308
  export var DifferentStates = {
307
309
  render: function() {
308
- return /*#__PURE__*/ _jsx(VerticalStack, {
309
- gap: "8",
310
+ return /*#__PURE__*/ _jsx(Stack, {
311
+ gap: "lg",
310
312
  children: /*#__PURE__*/ _jsx(Card, {
311
313
  title: "Project Status",
312
314
  padded: true,
313
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
314
- gap: "6",
315
+ children: /*#__PURE__*/ _jsxs(Stack, {
316
+ gap: "md",
315
317
  children: [
316
- /*#__PURE__*/ _jsxs(VerticalStack, {
317
- gap: "2",
318
+ /*#__PURE__*/ _jsxs(Stack, {
319
+ gap: "sm",
318
320
  children: [
319
- /*#__PURE__*/ _jsxs(HorizontalStack, {
321
+ /*#__PURE__*/ _jsxs(Stack, {
322
+ horizontal: true,
320
323
  align: "space-between",
321
324
  children: [
322
325
  /*#__PURE__*/ _jsx(Text, {
@@ -334,10 +337,11 @@ export var DifferentStates = {
334
337
  })
335
338
  ]
336
339
  }),
337
- /*#__PURE__*/ _jsxs(VerticalStack, {
338
- gap: "2",
340
+ /*#__PURE__*/ _jsxs(Stack, {
341
+ gap: "sm",
339
342
  children: [
340
- /*#__PURE__*/ _jsxs(HorizontalStack, {
343
+ /*#__PURE__*/ _jsxs(Stack, {
344
+ horizontal: true,
341
345
  align: "space-between",
342
346
  children: [
343
347
  /*#__PURE__*/ _jsx(Text, {
@@ -354,10 +358,11 @@ export var DifferentStates = {
354
358
  })
355
359
  ]
356
360
  }),
357
- /*#__PURE__*/ _jsxs(VerticalStack, {
358
- gap: "2",
361
+ /*#__PURE__*/ _jsxs(Stack, {
362
+ gap: "sm",
359
363
  children: [
360
- /*#__PURE__*/ _jsxs(HorizontalStack, {
364
+ /*#__PURE__*/ _jsxs(Stack, {
365
+ horizontal: true,
361
366
  align: "space-between",
362
367
  children: [
363
368
  /*#__PURE__*/ _jsx(Text, {
@@ -375,10 +380,11 @@ export var DifferentStates = {
375
380
  })
376
381
  ]
377
382
  }),
378
- /*#__PURE__*/ _jsxs(VerticalStack, {
379
- gap: "2",
383
+ /*#__PURE__*/ _jsxs(Stack, {
384
+ gap: "sm",
380
385
  children: [
381
- /*#__PURE__*/ _jsxs(HorizontalStack, {
386
+ /*#__PURE__*/ _jsxs(Stack, {
387
+ horizontal: true,
382
388
  align: "space-between",
383
389
  children: [
384
390
  /*#__PURE__*/ _jsx(Text, {
@@ -425,12 +431,13 @@ export var Animated = {
425
431
  };
426
432
  export var LowProgress = {
427
433
  render: function() {
428
- return /*#__PURE__*/ _jsx(VerticalStack, {
429
- gap: "4",
430
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
431
- gap: "1",
434
+ return /*#__PURE__*/ _jsx(Stack, {
435
+ gap: "md",
436
+ children: /*#__PURE__*/ _jsxs(Stack, {
437
+ gap: "xs",
432
438
  children: [
433
- /*#__PURE__*/ _jsxs(HorizontalStack, {
439
+ /*#__PURE__*/ _jsxs(Stack, {
440
+ horizontal: true,
434
441
  align: "space-between",
435
442
  children: [
436
443
  /*#__PURE__*/ _jsx(Text, {
package/dist/esm/stories/RadioButtonCard.stories.js CHANGED
@@ -75,12 +75,11 @@ function _unsupported_iterable_to_array(o, minLen) {
75
75
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
76
76
  import { useState } from "react";
77
77
  import { transformStorySource } from "../utilities/transformers.js";
78
+ import Stack from "../components/Stack.js";
78
79
  import RadioButtonCard from "../components/RadioButtonCard.js";
79
80
  import Text from "../components/Text.js";
80
81
  import Card from "../components/Card.js";
81
82
  import Button from "../components/Button.js";
82
- import VerticalStack from "../components/VerticalStack.js";
83
- import HorizontalStack from "../components/HorizontalStack.js";
84
83
  import Box from "../components/Box.js";
85
84
  export default {
86
85
  title: 'Litho/RadioButtonCard',
@@ -178,8 +177,8 @@ export var BasicGroup = {
178
177
  title: "Select a Plan",
179
178
  padded: true,
180
179
  children: [
181
- /*#__PURE__*/ _jsx(VerticalStack, {
182
- gap: "4",
180
+ /*#__PURE__*/ _jsx(Stack, {
181
+ gap: "md",
183
182
  children: options.map(function(option) {
184
183
  return /*#__PURE__*/ _jsx(RadioButtonCard, {
185
184
  name: "plan",
@@ -246,8 +245,8 @@ export var WithHelpText = {
246
245
  title: "Payment Method",
247
246
  padded: true,
248
247
  children: [
249
- /*#__PURE__*/ _jsx(VerticalStack, {
250
- gap: "4",
248
+ /*#__PURE__*/ _jsx(Stack, {
249
+ gap: "md",
251
250
  children: paymentMethods.map(function(method) {
252
251
  return /*#__PURE__*/ _jsx(RadioButtonCard, {
253
252
  name: "payment",
@@ -320,8 +319,8 @@ export var ErrorStates = {
320
319
  return /*#__PURE__*/ _jsx(Card, {
321
320
  title: "Form with Validation",
322
321
  padded: true,
323
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
324
- gap: "4",
322
+ children: /*#__PURE__*/ _jsxs(Stack, {
323
+ gap: "md",
325
324
  children: [
326
325
  /*#__PURE__*/ _jsx(Text, {
327
326
  children: "Please select an option (required):"
@@ -407,8 +406,8 @@ export var DisabledStates = {
407
406
  title: "Feature Selection",
408
407
  padded: true,
409
408
  children: [
410
- /*#__PURE__*/ _jsx(VerticalStack, {
411
- gap: "4",
409
+ /*#__PURE__*/ _jsx(Stack, {
410
+ gap: "md",
412
411
  children: features.map(function(feature) {
413
412
  return /*#__PURE__*/ _jsx(RadioButtonCard, {
414
413
  name: "features",
@@ -487,8 +486,8 @@ export var ShippingOptions = {
487
486
  title: "Shipping Options",
488
487
  padded: true,
489
488
  children: [
490
- /*#__PURE__*/ _jsx(VerticalStack, {
491
- gap: "4",
489
+ /*#__PURE__*/ _jsx(Stack, {
490
+ gap: "md",
492
491
  children: shippingOptions.map(function(option) {
493
492
  return /*#__PURE__*/ _jsxs(Box, {
494
493
  position: "relative",
@@ -524,8 +523,8 @@ export var ShippingOptions = {
524
523
  padding: "4",
525
524
  background: "success-subdued",
526
525
  borderRadius: "default",
527
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
528
- gap: "2",
526
+ children: /*#__PURE__*/ _jsxs(Stack, {
527
+ gap: "sm",
529
528
  children: [
530
529
  /*#__PURE__*/ _jsxs(Text, {
531
530
  variant: "bodySm",
@@ -599,8 +598,8 @@ export var SubscriptionPlans = {
599
598
  title: "Choose Your Plan",
600
599
  padded: true,
601
600
  children: [
602
- /*#__PURE__*/ _jsx(VerticalStack, {
603
- gap: "4",
601
+ /*#__PURE__*/ _jsx(Stack, {
602
+ gap: "md",
604
603
  children: subscriptionPlans.map(function(plan) {
605
604
  return /*#__PURE__*/ _jsxs(Box, {
606
605
  position: "relative",
@@ -648,12 +647,13 @@ export var SubscriptionPlans = {
648
647
  }),
649
648
  /*#__PURE__*/ _jsx(Box, {
650
649
  paddingBlockStart: "8",
651
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
650
+ children: /*#__PURE__*/ _jsxs(Stack, {
651
+ horizontal: true,
652
652
  align: "space-between",
653
653
  blockAlign: "center",
654
654
  children: [
655
- /*#__PURE__*/ _jsxs(VerticalStack, {
656
- gap: "1",
655
+ /*#__PURE__*/ _jsxs(Stack, {
656
+ gap: "xs",
657
657
  children: [
658
658
  /*#__PURE__*/ _jsxs(Text, {
659
659
  variant: "bodySm",
@@ -718,8 +718,8 @@ export var CustomStyling = {
718
718
  title: "Theme Selection",
719
719
  padded: true,
720
720
  children: [
721
- /*#__PURE__*/ _jsx(VerticalStack, {
722
- gap: "4",
721
+ /*#__PURE__*/ _jsx(Stack, {
722
+ gap: "md",
723
723
  children: themes.map(function(theme) {
724
724
  return /*#__PURE__*/ _jsx(RadioButtonCard, {
725
725
  name: "theme",
package/dist/esm/stories/RangeSlider.stories.js CHANGED
@@ -99,11 +99,13 @@ 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 { transformStorySource } from "../utilities/transformers.js";
102
+ import Stack from "../components/Stack.js";
102
103
  import RangeSlider from "../components/RangeSlider.js";
103
104
  import Text from "../components/Text.js";
104
105
  import Card from "../components/Card.js";
105
106
  import Button from "../components/Button.js";
106
- import { VerticalStack, HorizontalStack, Box, Grid } from "../dist/esm/index.js";
107
+ import Box from "../components/Box.js";
108
+ import Grid from "../components/Grid.js";
107
109
  export default {
108
110
  title: 'Litho/RangeSlider',
109
111
  component: RangeSlider,
@@ -341,8 +343,8 @@ export var ProductFilter = {
341
343
  return /*#__PURE__*/ _jsx(Card, {
342
344
  title: "Product Filters",
343
345
  padded: true,
344
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
345
- gap: "8",
346
+ children: /*#__PURE__*/ _jsxs(Stack, {
347
+ gap: "lg",
346
348
  children: [
347
349
  /*#__PURE__*/ _jsx(RangeSlider, {
348
350
  label: "Price range",
@@ -380,21 +382,23 @@ export var ProductFilter = {
380
382
  ]
381
383
  })
382
384
  }),
383
- filteredProducts.length > 0 ? /*#__PURE__*/ _jsx(VerticalStack, {
384
- gap: "2",
385
+ filteredProducts.length > 0 ? /*#__PURE__*/ _jsx(Stack, {
386
+ gap: "sm",
385
387
  children: filteredProducts.map(function(product, index) {
386
388
  return /*#__PURE__*/ _jsx(Box, {
387
389
  padding: "2",
388
390
  background: "bg-surface",
389
391
  borderRadius: "1",
390
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
392
+ children: /*#__PURE__*/ _jsxs(Stack, {
393
+ horizontal: true,
391
394
  align: "space-between",
392
395
  children: [
393
396
  /*#__PURE__*/ _jsx(Text, {
394
397
  children: product.name
395
398
  }),
396
- /*#__PURE__*/ _jsxs(HorizontalStack, {
397
- gap: "4",
399
+ /*#__PURE__*/ _jsxs(Stack, {
400
+ horizontal: true,
401
+ gap: "md",
398
402
  children: [
399
403
  /*#__PURE__*/ _jsxs(Text, {
400
404
  children: [
@@ -455,8 +459,8 @@ export var BudgetPlanner = {
455
459
  return /*#__PURE__*/ _jsx(Card, {
456
460
  title: "Monthly Budget Planner",
457
461
  padded: true,
458
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
459
- gap: "8",
462
+ children: /*#__PURE__*/ _jsxs(Stack, {
463
+ gap: "lg",
460
464
  children: [
461
465
  /*#__PURE__*/ _jsx(RangeSlider, {
462
466
  label: "Housing & Utilities",
@@ -504,8 +508,8 @@ export var BudgetPlanner = {
504
508
  borderRadius: "2",
505
509
  borderWidth: "1",
506
510
  borderColor: "border-success",
507
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
508
- gap: "4",
511
+ children: /*#__PURE__*/ _jsxs(Stack, {
512
+ gap: "md",
509
513
  children: [
510
514
  /*#__PURE__*/ _jsx(Text, {
511
515
  variant: "headingMd",
@@ -515,8 +519,8 @@ export var BudgetPlanner = {
515
519
  columns: 2,
516
520
  gap: "4",
517
521
  children: [
518
- /*#__PURE__*/ _jsxs(VerticalStack, {
519
- gap: "1",
522
+ /*#__PURE__*/ _jsxs(Stack, {
523
+ gap: "xs",
520
524
  children: [
521
525
  /*#__PURE__*/ _jsx(Text, {
522
526
  variant: "headingSm",
@@ -534,8 +538,8 @@ export var BudgetPlanner = {
534
538
  })
535
539
  ]
536
540
  }),
537
- /*#__PURE__*/ _jsxs(VerticalStack, {
538
- gap: "1",
541
+ /*#__PURE__*/ _jsxs(Stack, {
542
+ gap: "xs",
539
543
  children: [
540
544
  /*#__PURE__*/ _jsx(Text, {
541
545
  variant: "headingSm",
@@ -589,11 +593,11 @@ export var DateTimeRange = {
589
593
  return /*#__PURE__*/ _jsx(Card, {
590
594
  title: "Availability Settings",
591
595
  padded: true,
592
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
593
- gap: "8",
596
+ children: /*#__PURE__*/ _jsxs(Stack, {
597
+ gap: "lg",
594
598
  children: [
595
- /*#__PURE__*/ _jsxs(VerticalStack, {
596
- gap: "2",
599
+ /*#__PURE__*/ _jsxs(Stack, {
600
+ gap: "sm",
597
601
  children: [
598
602
  /*#__PURE__*/ _jsx(RangeSlider, {
599
603
  label: "Working hours",
@@ -619,8 +623,8 @@ export var DateTimeRange = {
619
623
  })
620
624
  ]
621
625
  }),
622
- /*#__PURE__*/ _jsxs(VerticalStack, {
623
- gap: "2",
626
+ /*#__PURE__*/ _jsxs(Stack, {
627
+ gap: "sm",
624
628
  children: [
625
629
  /*#__PURE__*/ _jsx(RangeSlider, {
626
630
  label: "Available dates this month",
@@ -697,8 +701,8 @@ export var AdvancedConfiguration = {
697
701
  return /*#__PURE__*/ _jsx(Card, {
698
702
  title: "Server Configuration",
699
703
  padded: true,
700
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
701
- gap: "8",
704
+ children: /*#__PURE__*/ _jsxs(Stack, {
705
+ gap: "lg",
702
706
  children: [
703
707
  /*#__PURE__*/ _jsx(RangeSlider, {
704
708
  label: "CPU Cores",
@@ -745,15 +749,15 @@ export var AdvancedConfiguration = {
745
749
  borderRadius: "2",
746
750
  borderWidth: "1",
747
751
  borderColor: "border-info",
748
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
749
- gap: "4",
752
+ children: /*#__PURE__*/ _jsxs(Stack, {
753
+ gap: "md",
750
754
  children: [
751
755
  /*#__PURE__*/ _jsxs(Grid, {
752
756
  columns: 2,
753
757
  gap: "4",
754
758
  children: [
755
- /*#__PURE__*/ _jsxs(VerticalStack, {
756
- gap: "2",
759
+ /*#__PURE__*/ _jsxs(Stack, {
760
+ gap: "sm",
757
761
  children: [
758
762
  /*#__PURE__*/ _jsx(Text, {
759
763
  variant: "headingSm",
@@ -797,8 +801,8 @@ export var AdvancedConfiguration = {
797
801
  })
798
802
  ]
799
803
  }),
800
- /*#__PURE__*/ _jsxs(VerticalStack, {
801
- gap: "2",
804
+ /*#__PURE__*/ _jsxs(Stack, {
805
+ gap: "sm",
802
806
  children: [
803
807
  /*#__PURE__*/ _jsx(Text, {
804
808
  variant: "headingSm",