@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/ResourceList.stories.js CHANGED
@@ -34,14 +34,13 @@ _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 _ResourceList = /*#__PURE__*/ _interop_require_default(require("../components/ResourceList.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 _Badge = /*#__PURE__*/ _interop_require_default(require("../components/Badge.js"));
42
43
  var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
43
- var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
44
- var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
45
44
  function _array_like_to_array(arr, len) {
46
45
  if (len == null || len > arr.length) len = arr.length;
47
46
  for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -309,12 +308,13 @@ var Default = {
309
308
  var renderCustomer = function(customer, index) {
310
309
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_ResourceList.default.Item, {
311
310
  id: "customer-".concat(customer.id),
312
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
311
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
312
+ horizontal: true,
313
313
  align: "space-between",
314
314
  blockAlign: "center",
315
315
  children: [
316
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
317
- gap: "1",
316
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
317
+ gap: "xs",
318
318
  children: [
319
319
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
320
320
  variant: "headingSm",
@@ -408,12 +408,13 @@ var WithSelection = {
408
408
  return handleItemClick(product.id);
409
409
  },
410
410
  accessibilityLabel: "Select ".concat(product.name),
411
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
411
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
412
+ horizontal: true,
412
413
  align: "space-between",
413
414
  blockAlign: "center",
414
415
  children: [
415
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
416
- gap: "1",
416
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
417
+ gap: "xs",
417
418
  children: [
418
419
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
419
420
  variant: "headingSm",
@@ -466,8 +467,9 @@ var WithSelection = {
466
467
  }),
467
468
  selectedItems.size > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
468
469
  paddingBlockStart: "4",
469
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
470
- gap: "4",
470
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
471
+ horizontal: true,
472
+ gap: "md",
471
473
  children: [
472
474
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
473
475
  size: "slim",
@@ -546,8 +548,8 @@ var LoadingState = {
546
548
  var renderItem = function(item, index) {
547
549
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_ResourceList.default.Item, {
548
550
  id: "item-".concat(item.id),
549
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
550
- gap: "1",
551
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
552
+ gap: "xs",
551
553
  children: [
552
554
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
553
555
  variant: "headingSm",
@@ -614,12 +616,13 @@ var EmptyState = {
614
616
  var renderItem = function(item, index) {
615
617
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_ResourceList.default.Item, {
616
618
  id: "item-".concat(item.id),
617
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
619
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
620
+ horizontal: true,
618
621
  align: "space-between",
619
622
  blockAlign: "center",
620
623
  children: [
621
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
622
- gap: "1",
624
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
625
+ gap: "xs",
623
626
  children: [
624
627
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
625
628
  variant: "headingSm",
@@ -648,8 +651,8 @@ var EmptyState = {
648
651
  var customEmptyState = /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
649
652
  padding: "12",
650
653
  paddingInline: "4",
651
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
652
- gap: "4",
654
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
655
+ gap: "md",
653
656
  align: "center",
654
657
  children: [
655
658
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -683,8 +686,9 @@ var EmptyState = {
683
686
  children: [
684
687
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
685
688
  paddingBlockEnd: "4",
686
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
687
- gap: "4",
689
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
690
+ horizontal: true,
691
+ gap: "md",
688
692
  blockAlign: "center",
689
693
  children: [
690
694
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
@@ -701,8 +705,9 @@ var EmptyState = {
701
705
  style: {
702
706
  marginLeft: 'auto'
703
707
  },
704
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
705
- gap: "2",
708
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
709
+ horizontal: true,
710
+ gap: "sm",
706
711
  blockAlign: "center",
707
712
  children: [
708
713
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -793,8 +798,9 @@ var WithoutDividers = {
793
798
  var renderNotification = function(notification, index) {
794
799
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_ResourceList.default.Item, {
795
800
  id: "notification-".concat(notification.id),
796
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
797
- gap: "4",
801
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
802
+ horizontal: true,
803
+ gap: "md",
798
804
  blockAlign: "center",
799
805
  children: [
800
806
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
@@ -810,8 +816,8 @@ var WithoutDividers = {
810
816
  style: {
811
817
  flex: 1
812
818
  },
813
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
814
- gap: "1",
819
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
820
+ gap: "xs",
815
821
  children: [
816
822
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
817
823
  variant: "headingSm",
@@ -922,15 +928,16 @@ var ComplexItems = {
922
928
  return setSelectedOrder(order.id === selectedOrder ? null : order.id);
923
929
  },
924
930
  accessibilityLabel: "View details for order ".concat(order.id),
925
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
926
- gap: "2",
931
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
932
+ gap: "sm",
927
933
  children: [
928
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
934
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
935
+ horizontal: true,
929
936
  align: "space-between",
930
937
  blockAlign: "start",
931
938
  children: [
932
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
933
- gap: "1",
939
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
940
+ gap: "xs",
934
941
  children: [
935
942
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
936
943
  variant: "headingSm",
@@ -942,8 +949,8 @@ var ComplexItems = {
942
949
  })
943
950
  ]
944
951
  }),
945
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
946
- gap: "1",
952
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
953
+ gap: "xs",
947
954
  align: "end",
948
955
  children: [
949
956
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -958,7 +965,8 @@ var ComplexItems = {
958
965
  })
959
966
  ]
960
967
  }),
961
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
968
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
969
+ horizontal: true,
962
970
  align: "space-between",
963
971
  blockAlign: "center",
964
972
  children: [
@@ -993,8 +1001,8 @@ var ComplexItems = {
993
1001
  borderLeft: '3px solid #007bff'
994
1002
  },
995
1003
  children: [
996
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
997
- gap: "2",
1004
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1005
+ gap: "sm",
998
1006
  children: [
999
1007
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1000
1008
  variant: "headingXs",
@@ -1009,8 +1017,9 @@ var ComplexItems = {
1009
1017
  }),
1010
1018
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
1011
1019
  paddingBlockStart: "4",
1012
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
1013
- gap: "2",
1020
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1021
+ horizontal: true,
1022
+ gap: "sm",
1014
1023
  children: [
1015
1024
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
1016
1025
  size: "slim",
package/dist/cjs/stories/SkeletonText.stories.js CHANGED
@@ -54,12 +54,11 @@ _export(exports, {
54
54
  });
55
55
  var _jsxruntime = require("react/jsx-runtime");
56
56
  var _transformers = require("../utilities/transformers.js");
57
+ var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
57
58
  var _SkeletonText = /*#__PURE__*/ _interop_require_default(require("../components/SkeletonText.js"));
58
59
  var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
59
60
  var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
60
61
  var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
61
- var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
62
- var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
63
62
  var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
64
63
  var _react = require("react");
65
64
  function _array_like_to_array(arr, len) {
@@ -249,8 +248,8 @@ var HeadingText = {
249
248
  };
250
249
  var Sizes = {
251
250
  render: function() {
252
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
253
- gap: "2",
251
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
252
+ gap: "sm",
254
253
  children: [
255
254
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
256
255
  children: [
@@ -325,8 +324,8 @@ var Sizes = {
325
324
  };
326
325
  var HeadingSizes = {
327
326
  render: function() {
328
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
329
- gap: "2",
327
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
328
+ gap: "sm",
330
329
  children: [
331
330
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
332
331
  children: [
@@ -415,8 +414,8 @@ var FullWidth = {
415
414
  };
416
415
  var Alignment = {
417
416
  render: function() {
418
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
419
- gap: "2",
417
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
418
+ gap: "sm",
420
419
  children: [
421
420
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
422
421
  children: [
@@ -467,8 +466,8 @@ var Alignment = {
467
466
  };
468
467
  var GapSizes = {
469
468
  render: function() {
470
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
471
- gap: "2",
469
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
470
+ gap: "sm",
472
471
  children: [
473
472
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
474
473
  children: [
@@ -522,8 +521,8 @@ var ArticleLoading = {
522
521
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
523
522
  title: "Article",
524
523
  padded: true,
525
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
526
- gap: "1.5",
524
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
525
+ gap: "xs",
527
526
  children: [
528
527
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
529
528
  type: "heading",
@@ -565,8 +564,9 @@ var ProfileCard = {
565
564
  render: function() {
566
565
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
567
566
  padded: true,
568
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
569
- gap: "1",
567
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
568
+ horizontal: true,
569
+ gap: "xs",
570
570
  children: [
571
571
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
572
572
  style: {
@@ -577,8 +577,8 @@ var ProfileCard = {
577
577
  flexShrink: 0
578
578
  }
579
579
  }),
580
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
581
- gap: "1",
580
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
581
+ gap: "xs",
582
582
  style: {
583
583
  flex: 1
584
584
  },
@@ -616,8 +616,8 @@ var ListLoading = {
616
616
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
617
617
  title: "Items",
618
618
  padded: true,
619
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
620
- gap: "1",
619
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
620
+ gap: "xs",
621
621
  children: [
622
622
  1,
623
623
  2,
@@ -625,8 +625,9 @@ var ListLoading = {
625
625
  4,
626
626
  5
627
627
  ].map(function(item) {
628
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
629
- gap: "1",
628
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
629
+ horizontal: true,
630
+ gap: "xs",
630
631
  style: {
631
632
  padding: '1rem',
632
633
  border: '1px solid #e1e1e1',
@@ -698,8 +699,8 @@ var InteractiveExample = {
698
699
  children: isLoading ? 'Show Content' : 'Show Skeleton'
699
700
  })
700
701
  }),
701
- isLoading ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
702
- gap: "1.5",
702
+ isLoading ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
703
+ gap: "xs",
703
704
  children: [
704
705
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
705
706
  type: "heading",
package/dist/cjs/stories/Spinner.stories.js CHANGED
@@ -36,11 +36,12 @@ _export(exports, {
36
36
  });
37
37
  var _jsxruntime = require("react/jsx-runtime");
38
38
  var _transformers = require("../utilities/transformers.js");
39
+ var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
39
40
  var _Spinner = /*#__PURE__*/ _interop_require_default(require("../components/Spinner.js"));
40
41
  var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
41
42
  var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
42
43
  var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
43
- var _ = require("../");
44
+ var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
44
45
  function _interop_require_default(obj) {
45
46
  return obj && obj.__esModule ? obj : {
46
47
  default: obj
@@ -91,12 +92,13 @@ var _default = {
91
92
  var Default = {};
92
93
  var Sizes = {
93
94
  render: function() {
94
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
95
- gap: "8",
95
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
96
+ horizontal: true,
97
+ gap: "lg",
96
98
  align: "center",
97
99
  children: [
98
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
99
- gap: "2",
100
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
101
+ gap: "sm",
100
102
  inlineAlign: "center",
101
103
  children: [
102
104
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
@@ -108,8 +110,8 @@ var Sizes = {
108
110
  })
109
111
  ]
110
112
  }),
111
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
112
- gap: "2",
113
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
114
+ gap: "sm",
113
115
  inlineAlign: "center",
114
116
  children: [
115
117
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
@@ -121,8 +123,8 @@ var Sizes = {
121
123
  })
122
124
  ]
123
125
  }),
124
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
125
- gap: "2",
126
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
127
+ gap: "sm",
126
128
  inlineAlign: "center",
127
129
  children: [
128
130
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
@@ -147,12 +149,13 @@ var Sizes = {
147
149
  };
148
150
  var Colors = {
149
151
  render: function() {
150
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
151
- gap: "8",
152
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
153
+ horizontal: true,
154
+ gap: "lg",
152
155
  align: "center",
153
156
  children: [
154
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
155
- gap: "2",
157
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
158
+ gap: "sm",
156
159
  inlineAlign: "center",
157
160
  children: [
158
161
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
@@ -164,8 +167,8 @@ var Colors = {
164
167
  })
165
168
  ]
166
169
  }),
167
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
168
- gap: "2",
170
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
171
+ gap: "sm",
169
172
  inlineAlign: "center",
170
173
  children: [
171
174
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
@@ -177,8 +180,8 @@ var Colors = {
177
180
  })
178
181
  ]
179
182
  }),
180
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
181
- gap: "2",
183
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
184
+ gap: "sm",
182
185
  inlineAlign: "center",
183
186
  children: [
184
187
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
@@ -190,12 +193,12 @@ var Colors = {
190
193
  })
191
194
  ]
192
195
  }),
193
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
196
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
194
197
  padding: "4",
195
198
  background: "surface-dark",
196
199
  borderRadius: "2",
197
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
198
- gap: "2",
200
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
201
+ gap: "sm",
199
202
  inlineAlign: "center",
200
203
  children: [
201
204
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
@@ -222,8 +225,9 @@ var Colors = {
222
225
  };
223
226
  var InButton = {
224
227
  render: function() {
225
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
226
- gap: "4",
228
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
229
+ horizontal: true,
230
+ gap: "md",
227
231
  children: [
228
232
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
229
233
  loading: true,
@@ -255,10 +259,10 @@ var InCard = {
255
259
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
256
260
  title: "Loading Content",
257
261
  padded: true,
258
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
262
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
259
263
  paddingBlock: "8",
260
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
261
- gap: "4",
264
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
265
+ gap: "md",
262
266
  inlineAlign: "center",
263
267
  children: [
264
268
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
@@ -283,11 +287,12 @@ var InCard = {
283
287
  };
284
288
  var WithText = {
285
289
  render: function() {
286
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
287
- gap: "6",
290
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
291
+ gap: "md",
288
292
  children: [
289
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
290
- gap: "2",
293
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
294
+ horizontal: true,
295
+ gap: "sm",
291
296
  align: "center",
292
297
  children: [
293
298
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
@@ -299,8 +304,9 @@ var WithText = {
299
304
  })
300
305
  ]
301
306
  }),
302
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
303
- gap: "2",
307
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
308
+ horizontal: true,
309
+ gap: "sm",
304
310
  align: "center",
305
311
  children: [
306
312
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {}),
@@ -309,8 +315,9 @@ var WithText = {
309
315
  })
310
316
  ]
311
317
  }),
312
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
313
- gap: "3",
318
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
319
+ horizontal: true,
320
+ gap: "sm",
314
321
  align: "center",
315
322
  children: [
316
323
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
@@ -335,14 +342,14 @@ var WithText = {
335
342
  };
336
343
  var CenteredOverlay = {
337
344
  render: function() {
338
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Box, {
345
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
339
346
  position: "relative",
340
347
  minHeight: "300px",
341
348
  borderWidth: "025",
342
349
  borderColor: "border",
343
350
  borderRadius: "2",
344
351
  children: [
345
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Box, {
352
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
346
353
  padding: "4",
347
354
  children: [
348
355
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -354,7 +361,7 @@ var CenteredOverlay = {
354
361
  })
355
362
  ]
356
363
  }),
357
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
364
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
358
365
  position: "absolute",
359
366
  insetBlockStart: "0",
360
367
  insetBlockEnd: "0",
@@ -362,14 +369,14 @@ var CenteredOverlay = {
362
369
  insetInlineEnd: "0",
363
370
  background: "bg-fill-transparent",
364
371
  borderRadius: "2",
365
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
372
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
366
373
  height: "100%",
367
374
  width: "100%",
368
375
  display: "flex",
369
376
  alignItems: "center",
370
377
  justifyContent: "center",
371
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.VerticalStack, {
372
- gap: "4",
378
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
379
+ gap: "md",
373
380
  inlineAlign: "center",
374
381
  children: [
375
382
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {