@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/Divider.stories.js CHANGED
@@ -39,11 +39,10 @@ _export(exports, {
39
39
  });
40
40
  var _jsxruntime = require("react/jsx-runtime");
41
41
  var _Divider = /*#__PURE__*/ _interop_require_default(require("../components/Divider.js"));
42
+ var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
42
43
  var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
43
44
  var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
44
45
  var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
45
- var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
46
- var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
47
46
  var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
48
47
  var _Grid = /*#__PURE__*/ _interop_require_default(require("../components/Grid.js"));
49
48
  var _transformers = require("../utilities/transformers.js");
@@ -107,7 +106,7 @@ var _default = {
107
106
  };
108
107
  var Default = {
109
108
  render: function(args) {
110
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
109
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
111
110
  children: [
112
111
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
113
112
  children: "Content above the divider"
@@ -129,7 +128,7 @@ var Default = {
129
128
  };
130
129
  var ContentSeparation = {
131
130
  render: function(args) {
132
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
131
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
133
132
  children: [
134
133
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
135
134
  variant: "headingMd",
@@ -166,8 +165,8 @@ var CardSections = {
166
165
  children: [
167
166
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
168
167
  padding: "4",
169
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
170
- gap: "2",
168
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
169
+ gap: "sm",
171
170
  children: [
172
171
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
173
172
  variant: "headingMd",
@@ -182,15 +181,15 @@ var CardSections = {
182
181
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Divider.default, {}),
183
182
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
184
183
  padding: "4",
185
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
186
- gap: "3",
184
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
185
+ gap: "sm",
187
186
  children: [
188
187
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
189
188
  variant: "headingSm",
190
189
  children: "Personal Information"
191
190
  }),
192
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
193
- gap: "1",
191
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
192
+ gap: "xs",
194
193
  children: [
195
194
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
196
195
  children: "Name: John Doe"
@@ -209,11 +208,11 @@ var CardSections = {
209
208
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Divider.default, {}),
210
209
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
211
210
  padding: "4",
212
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
213
- gap: "4",
211
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
212
+ gap: "md",
214
213
  children: [
215
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
216
- gap: "2",
214
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
215
+ gap: "sm",
217
216
  children: [
218
217
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
219
218
  variant: "headingSm",
@@ -244,7 +243,7 @@ var CardSections = {
244
243
  };
245
244
  var NavigationSeparator = {
246
245
  render: function() {
247
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
246
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
248
247
  gap: "2",
249
248
  as: _Box.default,
250
249
  padding: "4",
@@ -298,18 +297,18 @@ var FormSections = {
298
297
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
299
298
  title: "Contact Form",
300
299
  padded: true,
301
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
302
- gap: "6",
300
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
301
+ gap: "md",
303
302
  children: [
304
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
305
- gap: "4",
303
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
304
+ gap: "md",
306
305
  children: [
307
306
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
308
307
  variant: "headingSm",
309
308
  children: "Personal Details"
310
309
  }),
311
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
312
- gap: "4",
310
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
311
+ gap: "md",
313
312
  children: [
314
313
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
315
314
  columns: 2,
@@ -347,8 +346,8 @@ var FormSections = {
347
346
  ]
348
347
  }),
349
348
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Divider.default, {}),
350
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
351
- gap: "4",
349
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
350
+ gap: "md",
352
351
  children: [
353
352
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
354
353
  variant: "headingSm",
@@ -368,18 +367,19 @@ var FormSections = {
368
367
  ]
369
368
  }),
370
369
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Divider.default, {}),
371
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
372
- gap: "4",
370
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
371
+ gap: "md",
373
372
  children: [
374
373
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
375
374
  variant: "headingSm",
376
375
  children: "Preferences"
377
376
  }),
378
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
379
- gap: "2",
377
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
378
+ gap: "sm",
380
379
  children: [
381
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
382
- gap: "2",
380
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
381
+ horizontal: true,
382
+ gap: "sm",
383
383
  blockAlign: "center",
384
384
  children: [
385
385
  /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
@@ -390,8 +390,9 @@ var FormSections = {
390
390
  })
391
391
  ]
392
392
  }),
393
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
394
- gap: "2",
393
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
394
+ horizontal: true,
395
+ gap: "sm",
395
396
  blockAlign: "center",
396
397
  children: [
397
398
  /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
@@ -407,8 +408,9 @@ var FormSections = {
407
408
  ]
408
409
  }),
409
410
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Divider.default, {}),
410
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
411
- gap: "2",
411
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
412
+ horizontal: true,
413
+ gap: "sm",
412
414
  children: [
413
415
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
414
416
  primary: true,
@@ -436,17 +438,18 @@ var ListSeparator = {
436
438
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
437
439
  title: "Recent Activity",
438
440
  padded: true,
439
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
441
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
440
442
  children: [
441
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
443
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
444
+ horizontal: true,
442
445
  align: "space-between",
443
446
  blockAlign: "center",
444
447
  as: _Box.default,
445
448
  paddingBlockStart: "3",
446
449
  paddingBlockEnd: "3",
447
450
  children: [
448
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
449
- gap: "1",
451
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
452
+ gap: "xs",
450
453
  children: [
451
454
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
452
455
  variant: "headingSm",
@@ -469,15 +472,16 @@ var ListSeparator = {
469
472
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Divider.default, {
470
473
  borderColor: "subdued"
471
474
  }),
472
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
475
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
476
+ horizontal: true,
473
477
  align: "space-between",
474
478
  blockAlign: "center",
475
479
  as: _Box.default,
476
480
  paddingBlockStart: "3",
477
481
  paddingBlockEnd: "3",
478
482
  children: [
479
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
480
- gap: "1",
483
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
484
+ gap: "xs",
481
485
  children: [
482
486
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
483
487
  variant: "headingSm",
@@ -500,15 +504,16 @@ var ListSeparator = {
500
504
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Divider.default, {
501
505
  borderColor: "subdued"
502
506
  }),
503
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
507
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
508
+ horizontal: true,
504
509
  align: "space-between",
505
510
  blockAlign: "center",
506
511
  as: _Box.default,
507
512
  paddingBlockStart: "3",
508
513
  paddingBlockEnd: "3",
509
514
  children: [
510
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
511
- gap: "1",
515
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
516
+ gap: "xs",
512
517
  children: [
513
518
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
514
519
  variant: "headingSm",
@@ -531,15 +536,16 @@ var ListSeparator = {
531
536
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Divider.default, {
532
537
  borderColor: "subdued"
533
538
  }),
534
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
539
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
540
+ horizontal: true,
535
541
  align: "space-between",
536
542
  blockAlign: "center",
537
543
  as: _Box.default,
538
544
  paddingBlockStart: "3",
539
545
  paddingBlockEnd: "3",
540
546
  children: [
541
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
542
- gap: "1",
547
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
548
+ gap: "xs",
543
549
  children: [
544
550
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
545
551
  variant: "headingSm",
@@ -573,8 +579,8 @@ var ListSeparator = {
573
579
  };
574
580
  var LayoutSections = {
575
581
  render: function() {
576
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
577
- gap: "8",
582
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
583
+ gap: "lg",
578
584
  children: [
579
585
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
580
586
  columns: 2,
@@ -621,11 +627,12 @@ var StepIndicator = {
621
627
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
622
628
  title: "Order progress",
623
629
  padded: true,
624
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
630
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
631
+ horizontal: true,
625
632
  blockAlign: "center",
626
633
  children: [
627
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
628
- gap: "2",
634
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
635
+ gap: "sm",
629
636
  inlineAlign: "center",
630
637
  children: [
631
638
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
@@ -656,8 +663,8 @@ var StepIndicator = {
656
663
  margin: "0 0.5rem"
657
664
  }
658
665
  }),
659
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
660
- gap: "2",
666
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
667
+ gap: "sm",
661
668
  inlineAlign: "center",
662
669
  children: [
663
670
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
@@ -688,8 +695,8 @@ var StepIndicator = {
688
695
  margin: "0 0.5rem"
689
696
  }
690
697
  }),
691
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
692
- gap: "2",
698
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
699
+ gap: "sm",
693
700
  inlineAlign: "center",
694
701
  children: [
695
702
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
@@ -720,8 +727,8 @@ var StepIndicator = {
720
727
  margin: "0 0.5rem"
721
728
  }
722
729
  }),
723
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
724
- gap: "2",
730
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
731
+ gap: "sm",
725
732
  inlineAlign: "center",
726
733
  children: [
727
734
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
package/dist/cjs/stories/DropZone.stories.js CHANGED
@@ -40,11 +40,10 @@ _export(exports, {
40
40
  var _jsxruntime = require("react/jsx-runtime");
41
41
  var _react = require("react");
42
42
  var _DropZone = /*#__PURE__*/ _interop_require_default(require("../components/DropZone.js"));
43
+ var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
43
44
  var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
44
45
  var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
45
46
  var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
46
- var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
47
- var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
48
47
  var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
49
48
  var _transformers = require("../utilities/transformers.js");
50
49
  function _array_like_to_array(arr, len) {
@@ -595,7 +594,8 @@ var MultipleFiles = {
595
594
  uploadLabel: "Drop documents here or click to browse",
596
595
  previewRows: 3
597
596
  }),
598
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
597
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
598
+ horizontal: true,
599
599
  paddingBlockStart: "6",
600
600
  align: "space-between",
601
601
  blockAlign: "center",
@@ -725,8 +725,8 @@ var WithErrors = {
725
725
  padding: "4",
726
726
  background: "critical",
727
727
  borderRadius: "default",
728
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
729
- gap: "2",
728
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
729
+ gap: "sm",
730
730
  children: [
731
731
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
732
732
  variant: "headingSm",
@@ -870,8 +870,8 @@ var DisabledStates = {
870
870
  });
871
871
  });
872
872
  };
873
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
874
- gap: "8",
873
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
874
+ gap: "lg",
875
875
  children: [
876
876
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
877
877
  maxInlineSize: "500px",
@@ -881,8 +881,9 @@ var DisabledStates = {
881
881
  children: [
882
882
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
883
883
  paddingBlockEnd: "4",
884
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
885
- gap: "2",
884
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
885
+ horizontal: true,
886
+ gap: "sm",
886
887
  blockAlign: "center",
887
888
  children: [
888
889
  /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
@@ -1021,8 +1022,8 @@ var CustomLabelsAndMessages = {
1021
1022
  padding: "4",
1022
1023
  background: "success",
1023
1024
  borderRadius: "default",
1024
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
1025
- gap: "2",
1025
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1026
+ gap: "sm",
1026
1027
  children: [
1027
1028
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1028
1029
  variant: "headingSm",
@@ -1094,8 +1095,9 @@ var FilePreviewInteractions = {
1094
1095
  setSelectedFile(null);
1095
1096
  }
1096
1097
  };
1097
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
1098
- gap: "8",
1098
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1099
+ horizontal: true,
1100
+ gap: "lg",
1099
1101
  children: [
1100
1102
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
1101
1103
  maxInlineSize: "400px",
@@ -1117,8 +1119,8 @@ var FilePreviewInteractions = {
1117
1119
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
1118
1120
  title: "File Details",
1119
1121
  padded: true,
1120
- children: selectedFile ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
1121
- gap: "4",
1122
+ children: selectedFile ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1123
+ gap: "md",
1122
1124
  children: [
1123
1125
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
1124
1126
  variant: "headingSm",
@@ -1127,10 +1129,11 @@ var FilePreviewInteractions = {
1127
1129
  selectedFile.fileName
1128
1130
  ]
1129
1131
  }),
1130
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
1131
- gap: "2",
1132
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1133
+ gap: "sm",
1132
1134
  children: [
1133
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
1135
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1136
+ horizontal: true,
1134
1137
  children: [
1135
1138
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1136
1139
  variant: "bodySm",
@@ -1143,7 +1146,8 @@ var FilePreviewInteractions = {
1143
1146
  })
1144
1147
  ]
1145
1148
  }),
1146
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
1149
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1150
+ horizontal: true,
1147
1151
  children: [
1148
1152
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1149
1153
  variant: "bodySm",
@@ -1156,7 +1160,8 @@ var FilePreviewInteractions = {
1156
1160
  })
1157
1161
  ]
1158
1162
  }),
1159
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
1163
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1164
+ horizontal: true,
1160
1165
  children: [
1161
1166
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1162
1167
  variant: "bodySm",