@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/DatePicker.stories.js CHANGED
@@ -99,9 +99,9 @@ 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 DatePicker from "../components/DatePicker.js";
102
+ import Stack from "../components/Stack.js";
102
103
  import Text from "../components/Text.js";
103
104
  import Card from "../components/Card.js";
104
- import VerticalStack from "../components/VerticalStack.js";
105
105
  import Box from "../components/Box.js";
106
106
  import { transformStorySource } from "../utilities/transformers.js";
107
107
  export default {
@@ -396,8 +396,8 @@ export var FormExample = {
396
396
  return /*#__PURE__*/ _jsx(Card, {
397
397
  title: "Event Planning Form",
398
398
  padded: true,
399
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
400
- gap: "6",
399
+ children: /*#__PURE__*/ _jsxs(Stack, {
400
+ gap: "md",
401
401
  children: [
402
402
  /*#__PURE__*/ _jsx(DatePicker, {
403
403
  label: "Planning start date",
package/dist/esm/stories/Divider.stories.js CHANGED
@@ -28,11 +28,10 @@ function _object_spread(target) {
28
28
  }
29
29
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
30
30
  import Divider from "../components/Divider.js";
31
+ import Stack from "../components/Stack.js";
31
32
  import Text from "../components/Text.js";
32
33
  import Card from "../components/Card.js";
33
34
  import Button from "../components/Button.js";
34
- import HorizontalStack from "../components/HorizontalStack.js";
35
- import VerticalStack from "../components/VerticalStack.js";
36
35
  import Box from "../components/Box.js";
37
36
  import Grid from "../components/Grid.js";
38
37
  import { transformStorySource } from "../utilities/transformers.js";
@@ -63,7 +62,7 @@ export default {
63
62
  };
64
63
  export var Default = {
65
64
  render: function(args) {
66
- return /*#__PURE__*/ _jsxs(VerticalStack, {
65
+ return /*#__PURE__*/ _jsxs(Stack, {
67
66
  children: [
68
67
  /*#__PURE__*/ _jsx(Text, {
69
68
  children: "Content above the divider"
@@ -85,7 +84,7 @@ export var Default = {
85
84
  };
86
85
  export var ContentSeparation = {
87
86
  render: function(args) {
88
- return /*#__PURE__*/ _jsxs(VerticalStack, {
87
+ return /*#__PURE__*/ _jsxs(Stack, {
89
88
  children: [
90
89
  /*#__PURE__*/ _jsx(Text, {
91
90
  variant: "headingMd",
@@ -122,8 +121,8 @@ export var CardSections = {
122
121
  children: [
123
122
  /*#__PURE__*/ _jsx(Box, {
124
123
  padding: "4",
125
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
126
- gap: "2",
124
+ children: /*#__PURE__*/ _jsxs(Stack, {
125
+ gap: "sm",
127
126
  children: [
128
127
  /*#__PURE__*/ _jsx(Text, {
129
128
  variant: "headingMd",
@@ -138,15 +137,15 @@ export var CardSections = {
138
137
  /*#__PURE__*/ _jsx(Divider, {}),
139
138
  /*#__PURE__*/ _jsx(Box, {
140
139
  padding: "4",
141
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
142
- gap: "3",
140
+ children: /*#__PURE__*/ _jsxs(Stack, {
141
+ gap: "sm",
143
142
  children: [
144
143
  /*#__PURE__*/ _jsx(Text, {
145
144
  variant: "headingSm",
146
145
  children: "Personal Information"
147
146
  }),
148
- /*#__PURE__*/ _jsxs(VerticalStack, {
149
- gap: "1",
147
+ /*#__PURE__*/ _jsxs(Stack, {
148
+ gap: "xs",
150
149
  children: [
151
150
  /*#__PURE__*/ _jsx(Text, {
152
151
  children: "Name: John Doe"
@@ -165,11 +164,11 @@ export var CardSections = {
165
164
  /*#__PURE__*/ _jsx(Divider, {}),
166
165
  /*#__PURE__*/ _jsx(Box, {
167
166
  padding: "4",
168
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
169
- gap: "4",
167
+ children: /*#__PURE__*/ _jsxs(Stack, {
168
+ gap: "md",
170
169
  children: [
171
- /*#__PURE__*/ _jsxs(VerticalStack, {
172
- gap: "2",
170
+ /*#__PURE__*/ _jsxs(Stack, {
171
+ gap: "sm",
173
172
  children: [
174
173
  /*#__PURE__*/ _jsx(Text, {
175
174
  variant: "headingSm",
@@ -200,7 +199,7 @@ export var CardSections = {
200
199
  };
201
200
  export var NavigationSeparator = {
202
201
  render: function() {
203
- return /*#__PURE__*/ _jsxs(VerticalStack, {
202
+ return /*#__PURE__*/ _jsxs(Stack, {
204
203
  gap: "2",
205
204
  as: Box,
206
205
  padding: "4",
@@ -254,18 +253,18 @@ export var FormSections = {
254
253
  return /*#__PURE__*/ _jsx(Card, {
255
254
  title: "Contact Form",
256
255
  padded: true,
257
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
258
- gap: "6",
256
+ children: /*#__PURE__*/ _jsxs(Stack, {
257
+ gap: "md",
259
258
  children: [
260
- /*#__PURE__*/ _jsxs(VerticalStack, {
261
- gap: "4",
259
+ /*#__PURE__*/ _jsxs(Stack, {
260
+ gap: "md",
262
261
  children: [
263
262
  /*#__PURE__*/ _jsx(Text, {
264
263
  variant: "headingSm",
265
264
  children: "Personal Details"
266
265
  }),
267
- /*#__PURE__*/ _jsxs(VerticalStack, {
268
- gap: "4",
266
+ /*#__PURE__*/ _jsxs(Stack, {
267
+ gap: "md",
269
268
  children: [
270
269
  /*#__PURE__*/ _jsxs(Grid, {
271
270
  columns: 2,
@@ -303,8 +302,8 @@ export var FormSections = {
303
302
  ]
304
303
  }),
305
304
  /*#__PURE__*/ _jsx(Divider, {}),
306
- /*#__PURE__*/ _jsxs(VerticalStack, {
307
- gap: "4",
305
+ /*#__PURE__*/ _jsxs(Stack, {
306
+ gap: "md",
308
307
  children: [
309
308
  /*#__PURE__*/ _jsx(Text, {
310
309
  variant: "headingSm",
@@ -324,18 +323,19 @@ export var FormSections = {
324
323
  ]
325
324
  }),
326
325
  /*#__PURE__*/ _jsx(Divider, {}),
327
- /*#__PURE__*/ _jsxs(VerticalStack, {
328
- gap: "4",
326
+ /*#__PURE__*/ _jsxs(Stack, {
327
+ gap: "md",
329
328
  children: [
330
329
  /*#__PURE__*/ _jsx(Text, {
331
330
  variant: "headingSm",
332
331
  children: "Preferences"
333
332
  }),
334
- /*#__PURE__*/ _jsxs(VerticalStack, {
335
- gap: "2",
333
+ /*#__PURE__*/ _jsxs(Stack, {
334
+ gap: "sm",
336
335
  children: [
337
- /*#__PURE__*/ _jsxs(HorizontalStack, {
338
- gap: "2",
336
+ /*#__PURE__*/ _jsxs(Stack, {
337
+ horizontal: true,
338
+ gap: "sm",
339
339
  blockAlign: "center",
340
340
  children: [
341
341
  /*#__PURE__*/ _jsx("input", {
@@ -346,8 +346,9 @@ export var FormSections = {
346
346
  })
347
347
  ]
348
348
  }),
349
- /*#__PURE__*/ _jsxs(HorizontalStack, {
350
- gap: "2",
349
+ /*#__PURE__*/ _jsxs(Stack, {
350
+ horizontal: true,
351
+ gap: "sm",
351
352
  blockAlign: "center",
352
353
  children: [
353
354
  /*#__PURE__*/ _jsx("input", {
@@ -363,8 +364,9 @@ export var FormSections = {
363
364
  ]
364
365
  }),
365
366
  /*#__PURE__*/ _jsx(Divider, {}),
366
- /*#__PURE__*/ _jsxs(HorizontalStack, {
367
- gap: "2",
367
+ /*#__PURE__*/ _jsxs(Stack, {
368
+ horizontal: true,
369
+ gap: "sm",
368
370
  children: [
369
371
  /*#__PURE__*/ _jsx(Button, {
370
372
  primary: true,
@@ -392,17 +394,18 @@ export var ListSeparator = {
392
394
  return /*#__PURE__*/ _jsx(Card, {
393
395
  title: "Recent Activity",
394
396
  padded: true,
395
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
397
+ children: /*#__PURE__*/ _jsxs(Stack, {
396
398
  children: [
397
- /*#__PURE__*/ _jsxs(HorizontalStack, {
399
+ /*#__PURE__*/ _jsxs(Stack, {
400
+ horizontal: true,
398
401
  align: "space-between",
399
402
  blockAlign: "center",
400
403
  as: Box,
401
404
  paddingBlockStart: "3",
402
405
  paddingBlockEnd: "3",
403
406
  children: [
404
- /*#__PURE__*/ _jsxs(VerticalStack, {
405
- gap: "1",
407
+ /*#__PURE__*/ _jsxs(Stack, {
408
+ gap: "xs",
406
409
  children: [
407
410
  /*#__PURE__*/ _jsx(Text, {
408
411
  variant: "headingSm",
@@ -425,15 +428,16 @@ export var ListSeparator = {
425
428
  /*#__PURE__*/ _jsx(Divider, {
426
429
  borderColor: "subdued"
427
430
  }),
428
- /*#__PURE__*/ _jsxs(HorizontalStack, {
431
+ /*#__PURE__*/ _jsxs(Stack, {
432
+ horizontal: true,
429
433
  align: "space-between",
430
434
  blockAlign: "center",
431
435
  as: Box,
432
436
  paddingBlockStart: "3",
433
437
  paddingBlockEnd: "3",
434
438
  children: [
435
- /*#__PURE__*/ _jsxs(VerticalStack, {
436
- gap: "1",
439
+ /*#__PURE__*/ _jsxs(Stack, {
440
+ gap: "xs",
437
441
  children: [
438
442
  /*#__PURE__*/ _jsx(Text, {
439
443
  variant: "headingSm",
@@ -456,15 +460,16 @@ export var ListSeparator = {
456
460
  /*#__PURE__*/ _jsx(Divider, {
457
461
  borderColor: "subdued"
458
462
  }),
459
- /*#__PURE__*/ _jsxs(HorizontalStack, {
463
+ /*#__PURE__*/ _jsxs(Stack, {
464
+ horizontal: true,
460
465
  align: "space-between",
461
466
  blockAlign: "center",
462
467
  as: Box,
463
468
  paddingBlockStart: "3",
464
469
  paddingBlockEnd: "3",
465
470
  children: [
466
- /*#__PURE__*/ _jsxs(VerticalStack, {
467
- gap: "1",
471
+ /*#__PURE__*/ _jsxs(Stack, {
472
+ gap: "xs",
468
473
  children: [
469
474
  /*#__PURE__*/ _jsx(Text, {
470
475
  variant: "headingSm",
@@ -487,15 +492,16 @@ export var ListSeparator = {
487
492
  /*#__PURE__*/ _jsx(Divider, {
488
493
  borderColor: "subdued"
489
494
  }),
490
- /*#__PURE__*/ _jsxs(HorizontalStack, {
495
+ /*#__PURE__*/ _jsxs(Stack, {
496
+ horizontal: true,
491
497
  align: "space-between",
492
498
  blockAlign: "center",
493
499
  as: Box,
494
500
  paddingBlockStart: "3",
495
501
  paddingBlockEnd: "3",
496
502
  children: [
497
- /*#__PURE__*/ _jsxs(VerticalStack, {
498
- gap: "1",
503
+ /*#__PURE__*/ _jsxs(Stack, {
504
+ gap: "xs",
499
505
  children: [
500
506
  /*#__PURE__*/ _jsx(Text, {
501
507
  variant: "headingSm",
@@ -529,8 +535,8 @@ export var ListSeparator = {
529
535
  };
530
536
  export var LayoutSections = {
531
537
  render: function() {
532
- return /*#__PURE__*/ _jsxs(VerticalStack, {
533
- gap: "8",
538
+ return /*#__PURE__*/ _jsxs(Stack, {
539
+ gap: "lg",
534
540
  children: [
535
541
  /*#__PURE__*/ _jsxs(Grid, {
536
542
  columns: 2,
@@ -577,11 +583,12 @@ export var StepIndicator = {
577
583
  return /*#__PURE__*/ _jsx(Card, {
578
584
  title: "Order progress",
579
585
  padded: true,
580
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
586
+ children: /*#__PURE__*/ _jsxs(Stack, {
587
+ horizontal: true,
581
588
  blockAlign: "center",
582
589
  children: [
583
- /*#__PURE__*/ _jsxs(VerticalStack, {
584
- gap: "2",
590
+ /*#__PURE__*/ _jsxs(Stack, {
591
+ gap: "sm",
585
592
  inlineAlign: "center",
586
593
  children: [
587
594
  /*#__PURE__*/ _jsx(Box, {
@@ -612,8 +619,8 @@ export var StepIndicator = {
612
619
  margin: "0 0.5rem"
613
620
  }
614
621
  }),
615
- /*#__PURE__*/ _jsxs(VerticalStack, {
616
- gap: "2",
622
+ /*#__PURE__*/ _jsxs(Stack, {
623
+ gap: "sm",
617
624
  inlineAlign: "center",
618
625
  children: [
619
626
  /*#__PURE__*/ _jsx(Box, {
@@ -644,8 +651,8 @@ export var StepIndicator = {
644
651
  margin: "0 0.5rem"
645
652
  }
646
653
  }),
647
- /*#__PURE__*/ _jsxs(VerticalStack, {
648
- gap: "2",
654
+ /*#__PURE__*/ _jsxs(Stack, {
655
+ gap: "sm",
649
656
  inlineAlign: "center",
650
657
  children: [
651
658
  /*#__PURE__*/ _jsx(Box, {
@@ -676,8 +683,8 @@ export var StepIndicator = {
676
683
  margin: "0 0.5rem"
677
684
  }
678
685
  }),
679
- /*#__PURE__*/ _jsxs(VerticalStack, {
680
- gap: "2",
686
+ /*#__PURE__*/ _jsxs(Stack, {
687
+ gap: "sm",
681
688
  inlineAlign: "center",
682
689
  children: [
683
690
  /*#__PURE__*/ _jsx(Box, {
package/dist/esm/stories/DropZone.stories.js CHANGED
@@ -231,11 +231,10 @@ function _ts_generator(thisArg, body) {
231
231
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
232
232
  import { useState } from "react";
233
233
  import DropZone from "../components/DropZone.js";
234
+ import Stack from "../components/Stack.js";
234
235
  import Text from "../components/Text.js";
235
236
  import Card from "../components/Card.js";
236
237
  import Button from "../components/Button.js";
237
- import VerticalStack from "../components/VerticalStack.js";
238
- import HorizontalStack from "../components/HorizontalStack.js";
239
238
  import Box from "../components/Box.js";
240
239
  import { transformStorySource } from "../utilities/transformers.js";
241
240
  export default {
@@ -551,7 +550,8 @@ export var MultipleFiles = {
551
550
  uploadLabel: "Drop documents here or click to browse",
552
551
  previewRows: 3
553
552
  }),
554
- /*#__PURE__*/ _jsxs(HorizontalStack, {
553
+ /*#__PURE__*/ _jsxs(Stack, {
554
+ horizontal: true,
555
555
  paddingBlockStart: "6",
556
556
  align: "space-between",
557
557
  blockAlign: "center",
@@ -681,8 +681,8 @@ export var WithErrors = {
681
681
  padding: "4",
682
682
  background: "critical",
683
683
  borderRadius: "default",
684
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
685
- gap: "2",
684
+ children: /*#__PURE__*/ _jsxs(Stack, {
685
+ gap: "sm",
686
686
  children: [
687
687
  /*#__PURE__*/ _jsx(Text, {
688
688
  variant: "headingSm",
@@ -826,8 +826,8 @@ export var DisabledStates = {
826
826
  });
827
827
  });
828
828
  };
829
- return /*#__PURE__*/ _jsxs(VerticalStack, {
830
- gap: "8",
829
+ return /*#__PURE__*/ _jsxs(Stack, {
830
+ gap: "lg",
831
831
  children: [
832
832
  /*#__PURE__*/ _jsx(Box, {
833
833
  maxInlineSize: "500px",
@@ -837,8 +837,9 @@ export var DisabledStates = {
837
837
  children: [
838
838
  /*#__PURE__*/ _jsx(Box, {
839
839
  paddingBlockEnd: "4",
840
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
841
- gap: "2",
840
+ children: /*#__PURE__*/ _jsxs(Stack, {
841
+ horizontal: true,
842
+ gap: "sm",
842
843
  blockAlign: "center",
843
844
  children: [
844
845
  /*#__PURE__*/ _jsx("input", {
@@ -977,8 +978,8 @@ export var CustomLabelsAndMessages = {
977
978
  padding: "4",
978
979
  background: "success",
979
980
  borderRadius: "default",
980
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
981
- gap: "2",
981
+ children: /*#__PURE__*/ _jsxs(Stack, {
982
+ gap: "sm",
982
983
  children: [
983
984
  /*#__PURE__*/ _jsx(Text, {
984
985
  variant: "headingSm",
@@ -1050,8 +1051,9 @@ export var FilePreviewInteractions = {
1050
1051
  setSelectedFile(null);
1051
1052
  }
1052
1053
  };
1053
- return /*#__PURE__*/ _jsxs(HorizontalStack, {
1054
- gap: "8",
1054
+ return /*#__PURE__*/ _jsxs(Stack, {
1055
+ horizontal: true,
1056
+ gap: "lg",
1055
1057
  children: [
1056
1058
  /*#__PURE__*/ _jsx(Box, {
1057
1059
  maxInlineSize: "400px",
@@ -1073,8 +1075,8 @@ export var FilePreviewInteractions = {
1073
1075
  children: /*#__PURE__*/ _jsx(Card, {
1074
1076
  title: "File Details",
1075
1077
  padded: true,
1076
- children: selectedFile ? /*#__PURE__*/ _jsxs(VerticalStack, {
1077
- gap: "4",
1078
+ children: selectedFile ? /*#__PURE__*/ _jsxs(Stack, {
1079
+ gap: "md",
1078
1080
  children: [
1079
1081
  /*#__PURE__*/ _jsxs(Text, {
1080
1082
  variant: "headingSm",
@@ -1083,10 +1085,11 @@ export var FilePreviewInteractions = {
1083
1085
  selectedFile.fileName
1084
1086
  ]
1085
1087
  }),
1086
- /*#__PURE__*/ _jsxs(VerticalStack, {
1087
- gap: "2",
1088
+ /*#__PURE__*/ _jsxs(Stack, {
1089
+ gap: "sm",
1088
1090
  children: [
1089
- /*#__PURE__*/ _jsxs(HorizontalStack, {
1091
+ /*#__PURE__*/ _jsxs(Stack, {
1092
+ horizontal: true,
1090
1093
  children: [
1091
1094
  /*#__PURE__*/ _jsx(Text, {
1092
1095
  variant: "bodySm",
@@ -1099,7 +1102,8 @@ export var FilePreviewInteractions = {
1099
1102
  })
1100
1103
  ]
1101
1104
  }),
1102
- /*#__PURE__*/ _jsxs(HorizontalStack, {
1105
+ /*#__PURE__*/ _jsxs(Stack, {
1106
+ horizontal: true,
1103
1107
  children: [
1104
1108
  /*#__PURE__*/ _jsx(Text, {
1105
1109
  variant: "bodySm",
@@ -1112,7 +1116,8 @@ export var FilePreviewInteractions = {
1112
1116
  })
1113
1117
  ]
1114
1118
  }),
1115
- /*#__PURE__*/ _jsxs(HorizontalStack, {
1119
+ /*#__PURE__*/ _jsxs(Stack, {
1120
+ horizontal: true,
1116
1121
  children: [
1117
1122
  /*#__PURE__*/ _jsx(Text, {
1118
1123
  variant: "bodySm",