@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/Tabs.stories.js CHANGED
@@ -34,13 +34,12 @@ _export(exports, {
34
34
  var _jsxruntime = require("react/jsx-runtime");
35
35
  var _react = require("react");
36
36
  var _transformers = require("../utilities/transformers.js");
37
+ var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
37
38
  var _Tabs = /*#__PURE__*/ _interop_require_default(require("../components/Tabs.js"));
38
39
  var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
39
40
  var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
40
41
  var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
41
42
  var _TextField = /*#__PURE__*/ _interop_require_default(require("../components/TextField.js"));
42
- var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
43
- var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
44
43
  var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
45
44
  function _array_like_to_array(arr, len) {
46
45
  if (len == null || len > arr.length) len = arr.length;
package/dist/cjs/stories/Tag.stories.js CHANGED
@@ -43,11 +43,12 @@ _export(exports, {
43
43
  var _jsxruntime = require("react/jsx-runtime");
44
44
  var _react = require("react");
45
45
  var _transformers = require("../utilities/transformers.js");
46
+ var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
46
47
  var _Tag = /*#__PURE__*/ _interop_require_default(require("../components/Tag.js"));
47
48
  var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
48
49
  var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
49
50
  var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
50
- var _ = require("../");
51
+ var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
51
52
  function _array_like_to_array(arr, len) {
52
53
  if (len == null || len > arr.length) len = arr.length;
53
54
  for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -294,8 +295,9 @@ var TagList = {
294
295
  return tag !== tagToRemove;
295
296
  }));
296
297
  };
297
- return /*#__PURE__*/ (0, _jsxruntime.jsx)(_.HorizontalStack, {
298
- gap: "2",
298
+ return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
299
+ horizontal: true,
300
+ gap: "sm",
299
301
  wrap: true,
300
302
  children: tags.map(function(tag) {
301
303
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tag.default, {
@@ -344,16 +346,17 @@ var CategorizationExample = {
344
346
  title: "Product Categories",
345
347
  padded: true,
346
348
  children: [
347
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
349
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
348
350
  paddingBlockEnd: "4",
349
351
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
350
352
  children: "Select categories for this product:"
351
353
  })
352
354
  }),
353
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
355
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
354
356
  paddingBlockEnd: "6",
355
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.HorizontalStack, {
356
- gap: "2",
357
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
358
+ horizontal: true,
359
+ gap: "sm",
357
360
  wrap: true,
358
361
  children: categories.map(function(category) {
359
362
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tag.default, _object_spread_props(_object_spread({
@@ -372,7 +375,7 @@ var CategorizationExample = {
372
375
  })
373
376
  })
374
377
  }),
375
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Box, {
378
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
376
379
  paddingBlock: "4",
377
380
  paddingInline: "4",
378
381
  background: "surface-neutral-subdued",
@@ -418,12 +421,13 @@ var FilterTags = {
418
421
  var clearAllFilters = function() {
419
422
  setActiveFilters([]);
420
423
  };
421
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
422
- gap: "4",
424
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
425
+ gap: "md",
423
426
  children: [
424
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
427
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
428
+ horizontal: true,
425
429
  blockAlign: "center",
426
- gap: "2",
430
+ gap: "sm",
427
431
  children: [
428
432
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
429
433
  variant: "headingSm",
@@ -437,8 +441,9 @@ var FilterTags = {
437
441
  })
438
442
  ]
439
443
  }),
440
- activeFilters.length > 0 ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_.HorizontalStack, {
441
- gap: "2",
444
+ activeFilters.length > 0 ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
445
+ horizontal: true,
446
+ gap: "sm",
442
447
  wrap: true,
443
448
  children: activeFilters.map(function(filter) {
444
449
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tag.default, {
@@ -466,22 +471,23 @@ var FilterTags = {
466
471
  };
467
472
  var StatusTags = {
468
473
  render: function() {
469
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
470
- gap: "6",
474
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
475
+ gap: "md",
471
476
  children: [
472
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Box, {
477
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
473
478
  children: [
474
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
479
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
475
480
  paddingBlockEnd: "2",
476
481
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
477
482
  variant: "headingSm",
478
483
  children: "Order Status"
479
484
  })
480
485
  }),
481
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
482
- gap: "2",
486
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
487
+ horizontal: true,
488
+ gap: "sm",
483
489
  children: [
484
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
490
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
485
491
  as: "span",
486
492
  padding: "1",
487
493
  borderRadius: "1",
@@ -492,7 +498,7 @@ var StatusTags = {
492
498
  children: "Completed"
493
499
  })
494
500
  }),
495
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
501
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
496
502
  as: "span",
497
503
  padding: "1",
498
504
  borderRadius: "1",
@@ -503,7 +509,7 @@ var StatusTags = {
503
509
  children: "Processing"
504
510
  })
505
511
  }),
506
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
512
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
507
513
  as: "span",
508
514
  padding: "1",
509
515
  borderRadius: "1",
@@ -518,19 +524,20 @@ var StatusTags = {
518
524
  })
519
525
  ]
520
526
  }),
521
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Box, {
527
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
522
528
  children: [
523
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
529
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
524
530
  paddingBlockEnd: "2",
525
531
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
526
532
  variant: "headingSm",
527
533
  children: "Priority Levels"
528
534
  })
529
535
  }),
530
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
531
- gap: "2",
536
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
537
+ horizontal: true,
538
+ gap: "sm",
532
539
  children: [
533
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
540
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
534
541
  as: "span",
535
542
  padding: "1",
536
543
  borderRadius: "1",
@@ -541,7 +548,7 @@ var StatusTags = {
541
548
  children: "High"
542
549
  })
543
550
  }),
544
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
551
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
545
552
  as: "span",
546
553
  padding: "1",
547
554
  borderRadius: "1",
@@ -552,7 +559,7 @@ var StatusTags = {
552
559
  children: "Medium"
553
560
  })
554
561
  }),
555
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
562
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
556
563
  as: "span",
557
564
  padding: "1",
558
565
  borderRadius: "1",
@@ -567,19 +574,20 @@ var StatusTags = {
567
574
  })
568
575
  ]
569
576
  }),
570
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Box, {
577
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
571
578
  children: [
572
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
579
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
573
580
  paddingBlockEnd: "2",
574
581
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
575
582
  variant: "headingSm",
576
583
  children: "User Roles"
577
584
  })
578
585
  }),
579
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
580
- gap: "2",
586
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
587
+ horizontal: true,
588
+ gap: "sm",
581
589
  children: [
582
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
590
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
583
591
  as: "span",
584
592
  padding: "1",
585
593
  borderRadius: "1",
@@ -590,7 +598,7 @@ var StatusTags = {
590
598
  children: "Admin"
591
599
  })
592
600
  }),
593
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
601
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
594
602
  as: "span",
595
603
  padding: "1",
596
604
  borderRadius: "1",
package/dist/cjs/stories/Thumbnail.stories.js CHANGED
@@ -48,12 +48,11 @@ _export(exports, {
48
48
  });
49
49
  var _jsxruntime = require("react/jsx-runtime");
50
50
  var _transformers = require("../utilities/transformers.js");
51
+ var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
51
52
  var _Thumbnail = /*#__PURE__*/ _interop_require_default(require("../components/Thumbnail.js"));
52
53
  var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
53
54
  var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
54
55
  var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
55
- var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
56
- var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
57
56
  var _Grid = /*#__PURE__*/ _interop_require_default(require("../components/Grid.js"));
58
57
  var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
59
58
  var _react = require("react");
@@ -237,12 +236,13 @@ var Placeholder = {
237
236
  };
238
237
  var Sizes = {
239
238
  render: function() {
240
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
241
- gap: "4",
239
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
240
+ horizontal: true,
241
+ gap: "md",
242
242
  blockAlign: "center",
243
243
  children: [
244
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
245
- gap: "2",
244
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
245
+ gap: "sm",
246
246
  inlineAlign: "center",
247
247
  children: [
248
248
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Thumbnail.default, {
@@ -256,8 +256,8 @@ var Sizes = {
256
256
  })
257
257
  ]
258
258
  }),
259
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
260
- gap: "2",
259
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
260
+ gap: "sm",
261
261
  inlineAlign: "center",
262
262
  children: [
263
263
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Thumbnail.default, {
@@ -271,8 +271,8 @@ var Sizes = {
271
271
  })
272
272
  ]
273
273
  }),
274
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
275
- gap: "2",
274
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
275
+ gap: "sm",
276
276
  inlineAlign: "center",
277
277
  children: [
278
278
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Thumbnail.default, {
@@ -299,12 +299,13 @@ var Sizes = {
299
299
  };
300
300
  var CustomSize = {
301
301
  render: function() {
302
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
303
- gap: "4",
302
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
303
+ horizontal: true,
304
+ gap: "md",
304
305
  blockAlign: "center",
305
306
  children: [
306
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
307
- gap: "2",
307
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
308
+ gap: "sm",
308
309
  inlineAlign: "center",
309
310
  children: [
310
311
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Thumbnail.default, {
@@ -318,8 +319,8 @@ var CustomSize = {
318
319
  })
319
320
  ]
320
321
  }),
321
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
322
- gap: "2",
322
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
323
+ gap: "sm",
323
324
  inlineAlign: "center",
324
325
  children: [
325
326
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Thumbnail.default, {
@@ -333,8 +334,8 @@ var CustomSize = {
333
334
  })
334
335
  ]
335
336
  }),
336
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
337
- gap: "2",
337
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
338
+ gap: "sm",
338
339
  inlineAlign: "center",
339
340
  children: [
340
341
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Thumbnail.default, {
@@ -348,8 +349,8 @@ var CustomSize = {
348
349
  })
349
350
  ]
350
351
  }),
351
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
352
- gap: "2",
352
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
353
+ gap: "sm",
353
354
  inlineAlign: "center",
354
355
  children: [
355
356
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Thumbnail.default, {
@@ -433,8 +434,8 @@ var ProductGallery = {
433
434
  padding: "4",
434
435
  border: "default",
435
436
  borderRadius: "lg",
436
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
437
- gap: "2",
437
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
438
+ gap: "sm",
438
439
  inlineAlign: "center",
439
440
  children: [
440
441
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Thumbnail.default, {
@@ -494,15 +495,16 @@ var UserAvatars = {
494
495
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
495
496
  title: "Team Members",
496
497
  padded: true,
497
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
498
- gap: "4",
498
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
499
+ gap: "md",
499
500
  children: users.map(function(user) {
500
501
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
501
502
  padding: "3",
502
503
  border: "default",
503
504
  borderRadius: "lg",
504
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
505
- gap: "4",
505
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
506
+ horizontal: true,
507
+ gap: "md",
506
508
  blockAlign: "center",
507
509
  children: [
508
510
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Thumbnail.default, {
@@ -626,11 +628,12 @@ var LoadingStates = {
626
628
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
627
629
  title: "Image Loading Demo",
628
630
  padded: true,
629
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
630
- gap: "8",
631
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
632
+ gap: "lg",
631
633
  children: [
632
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
633
- gap: "4",
634
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
635
+ horizontal: true,
636
+ gap: "md",
634
637
  children: [
635
638
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
636
639
  size: "small",
@@ -655,12 +658,13 @@ var LoadingStates = {
655
658
  })
656
659
  ]
657
660
  }),
658
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
659
- gap: "4",
661
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
662
+ horizontal: true,
663
+ gap: "md",
660
664
  blockAlign: "center",
661
665
  children: [
662
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
663
- gap: "2",
666
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
667
+ gap: "sm",
664
668
  inlineAlign: "center",
665
669
  children: [
666
670
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Thumbnail.default, {
@@ -675,8 +679,8 @@ var LoadingStates = {
675
679
  })
676
680
  ]
677
681
  }),
678
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
679
- gap: "2",
682
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
683
+ gap: "sm",
680
684
  inlineAlign: "center",
681
685
  children: [
682
686
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Thumbnail.default, {
@@ -691,8 +695,8 @@ var LoadingStates = {
691
695
  })
692
696
  ]
693
697
  }),
694
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
695
- gap: "2",
698
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
699
+ gap: "sm",
696
700
  inlineAlign: "center",
697
701
  children: [
698
702
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Thumbnail.default, {
package/dist/cjs/stories/TimePicker.stories.js CHANGED
@@ -52,12 +52,11 @@ _export(exports, {
52
52
  var _jsxruntime = require("react/jsx-runtime");
53
53
  var _react = require("react");
54
54
  var _transformers = require("../utilities/transformers.js");
55
+ var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
55
56
  var _TimePicker = /*#__PURE__*/ _interop_require_default(require("../components/TimePicker.js"));
56
57
  var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
57
58
  var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
58
59
  var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
59
- var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
60
- var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
61
60
  var _Grid = /*#__PURE__*/ _interop_require_default(require("../components/Grid.js"));
62
61
  var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
63
62
  function _array_like_to_array(arr, len) {
@@ -398,8 +397,8 @@ var SchedulingForm = {
398
397
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
399
398
  title: "Work Schedule",
400
399
  padded: true,
401
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
402
- gap: "6",
400
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
401
+ gap: "md",
403
402
  children: [
404
403
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
405
404
  columns: 2,
@@ -446,8 +445,8 @@ var SchedulingForm = {
446
445
  padding: "4",
447
446
  borderRadius: "default",
448
447
  paddingBlockStart: "4",
449
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
450
- gap: "2",
448
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
449
+ gap: "sm",
451
450
  children: [
452
451
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
453
452
  variant: "headingSm",
@@ -545,8 +544,8 @@ var EventPlanning = {
545
544
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
546
545
  title: "Event Timeline",
547
546
  padded: true,
548
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
549
- gap: "6",
547
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
548
+ gap: "md",
550
549
  children: [
551
550
  events.map(function(event) {
552
551
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
@@ -554,8 +553,8 @@ var EventPlanning = {
554
553
  border: "default",
555
554
  borderRadius: "default",
556
555
  background: "subdued",
557
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
558
- gap: "4",
556
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
557
+ gap: "md",
559
558
  children: [
560
559
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
561
560
  variant: "headingSm",
@@ -590,8 +589,9 @@ var EventPlanning = {
590
589
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
591
590
  paddingBlockStart: "4",
592
591
  borderBlockStart: "divider",
593
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
594
- gap: "2",
592
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
593
+ horizontal: true,
594
+ gap: "sm",
595
595
  children: [
596
596
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
597
597
  onClick: addEvent,
@@ -643,15 +643,15 @@ var AppointmentBooking = {
643
643
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
644
644
  title: "Book Appointment",
645
645
  padded: true,
646
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
647
- gap: "8",
646
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
647
+ gap: "lg",
648
648
  children: [
649
649
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
650
650
  columns: 2,
651
651
  gap: "4",
652
652
  children: [
653
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
654
- gap: "2",
653
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
654
+ gap: "sm",
655
655
  children: [
656
656
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
657
657
  variant: "headingSm",
@@ -672,8 +672,8 @@ var AppointmentBooking = {
672
672
  })
673
673
  ]
674
674
  }),
675
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
676
- gap: "2",
675
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
676
+ gap: "sm",
677
677
  children: [
678
678
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
679
679
  variant: "headingSm",
@@ -713,8 +713,8 @@ var AppointmentBooking = {
713
713
  })
714
714
  ]
715
715
  }),
716
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
717
- gap: "4",
716
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
717
+ gap: "md",
718
718
  children: [
719
719
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
720
720
  variant: "headingSm",
@@ -758,8 +758,8 @@ var AppointmentBooking = {
758
758
  background: "success-subdued",
759
759
  borderRadius: "default",
760
760
  border: "success",
761
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
762
- gap: "2",
761
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
762
+ gap: "sm",
763
763
  children: [
764
764
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
765
765
  variant: "headingSm",
@@ -827,8 +827,8 @@ var RestaurantReservation = {
827
827
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
828
828
  title: "Make a Reservation",
829
829
  padded: true,
830
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
831
- gap: "6",
830
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
831
+ gap: "md",
832
832
  children: [
833
833
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
834
834
  columns: "2fr 1fr",
@@ -842,8 +842,8 @@ var RestaurantReservation = {
842
842
  helpText: "Select your preferred dining time",
843
843
  placeholder: "Choose time..."
844
844
  }),
845
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
846
- gap: "2",
845
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
846
+ gap: "sm",
847
847
  children: [
848
848
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
849
849
  variant: "headingSm",
@@ -884,8 +884,8 @@ var RestaurantReservation = {
884
884
  })
885
885
  ]
886
886
  }),
887
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
888
- gap: "2",
887
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
888
+ gap: "sm",
889
889
  children: [
890
890
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
891
891
  variant: "headingSm",
@@ -913,15 +913,16 @@ var RestaurantReservation = {
913
913
  background: "subdued",
914
914
  borderRadius: "default",
915
915
  border: "primary",
916
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
917
- gap: "2",
916
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
917
+ gap: "sm",
918
918
  children: [
919
919
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
920
920
  variant: "headingSm",
921
921
  children: "Available Times Tonight"
922
922
  }),
923
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_HorizontalStack.default, {
924
- gap: "1",
923
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
924
+ horizontal: true,
925
+ gap: "xs",
925
926
  wrap: true,
926
927
  children: dinnerSlots.map(function(slot) {
927
928
  return /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {