@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/ResourceList.stories.js CHANGED
@@ -179,14 +179,13 @@ function _ts_generator(thisArg, body) {
179
179
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
180
180
  import { useState } from "react";
181
181
  import { transformStorySource } from "../utilities/transformers.js";
182
+ import Stack from "../components/Stack.js";
182
183
  import ResourceList from "../components/ResourceList.js";
183
184
  import Text from "../components/Text.js";
184
185
  import Card from "../components/Card.js";
185
186
  import Button from "../components/Button.js";
186
187
  import Badge from "../components/Badge.js";
187
188
  import Box from "../components/Box.js";
188
- import VerticalStack from "../components/VerticalStack.js";
189
- import HorizontalStack from "../components/HorizontalStack.js";
190
189
  export default {
191
190
  title: 'Litho/ResourceList',
192
191
  component: ResourceList,
@@ -271,12 +270,13 @@ export var Default = {
271
270
  var renderCustomer = function(customer, index) {
272
271
  return /*#__PURE__*/ _jsx(ResourceList.Item, {
273
272
  id: "customer-".concat(customer.id),
274
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
273
+ children: /*#__PURE__*/ _jsxs(Stack, {
274
+ horizontal: true,
275
275
  align: "space-between",
276
276
  blockAlign: "center",
277
277
  children: [
278
- /*#__PURE__*/ _jsxs(VerticalStack, {
279
- gap: "1",
278
+ /*#__PURE__*/ _jsxs(Stack, {
279
+ gap: "xs",
280
280
  children: [
281
281
  /*#__PURE__*/ _jsx(Text, {
282
282
  variant: "headingSm",
@@ -370,12 +370,13 @@ export var WithSelection = {
370
370
  return handleItemClick(product.id);
371
371
  },
372
372
  accessibilityLabel: "Select ".concat(product.name),
373
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
373
+ children: /*#__PURE__*/ _jsxs(Stack, {
374
+ horizontal: true,
374
375
  align: "space-between",
375
376
  blockAlign: "center",
376
377
  children: [
377
- /*#__PURE__*/ _jsxs(VerticalStack, {
378
- gap: "1",
378
+ /*#__PURE__*/ _jsxs(Stack, {
379
+ gap: "xs",
379
380
  children: [
380
381
  /*#__PURE__*/ _jsx(Text, {
381
382
  variant: "headingSm",
@@ -428,8 +429,9 @@ export var WithSelection = {
428
429
  }),
429
430
  selectedItems.size > 0 && /*#__PURE__*/ _jsx(Box, {
430
431
  paddingBlockStart: "4",
431
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
432
- gap: "4",
432
+ children: /*#__PURE__*/ _jsxs(Stack, {
433
+ horizontal: true,
434
+ gap: "md",
433
435
  children: [
434
436
  /*#__PURE__*/ _jsx(Button, {
435
437
  size: "slim",
@@ -508,8 +510,8 @@ export var LoadingState = {
508
510
  var renderItem = function(item, index) {
509
511
  return /*#__PURE__*/ _jsx(ResourceList.Item, {
510
512
  id: "item-".concat(item.id),
511
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
512
- gap: "1",
513
+ children: /*#__PURE__*/ _jsxs(Stack, {
514
+ gap: "xs",
513
515
  children: [
514
516
  /*#__PURE__*/ _jsx(Text, {
515
517
  variant: "headingSm",
@@ -576,12 +578,13 @@ export var EmptyState = {
576
578
  var renderItem = function(item, index) {
577
579
  return /*#__PURE__*/ _jsx(ResourceList.Item, {
578
580
  id: "item-".concat(item.id),
579
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
581
+ children: /*#__PURE__*/ _jsxs(Stack, {
582
+ horizontal: true,
580
583
  align: "space-between",
581
584
  blockAlign: "center",
582
585
  children: [
583
- /*#__PURE__*/ _jsxs(VerticalStack, {
584
- gap: "1",
586
+ /*#__PURE__*/ _jsxs(Stack, {
587
+ gap: "xs",
585
588
  children: [
586
589
  /*#__PURE__*/ _jsx(Text, {
587
590
  variant: "headingSm",
@@ -610,8 +613,8 @@ export var EmptyState = {
610
613
  var customEmptyState = /*#__PURE__*/ _jsx(Box, {
611
614
  padding: "12",
612
615
  paddingInline: "4",
613
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
614
- gap: "4",
616
+ children: /*#__PURE__*/ _jsxs(Stack, {
617
+ gap: "md",
615
618
  align: "center",
616
619
  children: [
617
620
  /*#__PURE__*/ _jsx(Text, {
@@ -645,8 +648,9 @@ export var EmptyState = {
645
648
  children: [
646
649
  /*#__PURE__*/ _jsx(Box, {
647
650
  paddingBlockEnd: "4",
648
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
649
- gap: "4",
651
+ children: /*#__PURE__*/ _jsxs(Stack, {
652
+ horizontal: true,
653
+ gap: "md",
650
654
  blockAlign: "center",
651
655
  children: [
652
656
  /*#__PURE__*/ _jsx(Button, {
@@ -663,8 +667,9 @@ export var EmptyState = {
663
667
  style: {
664
668
  marginLeft: 'auto'
665
669
  },
666
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
667
- gap: "2",
670
+ children: /*#__PURE__*/ _jsxs(Stack, {
671
+ horizontal: true,
672
+ gap: "sm",
668
673
  blockAlign: "center",
669
674
  children: [
670
675
  /*#__PURE__*/ _jsx(Text, {
@@ -755,8 +760,9 @@ export var WithoutDividers = {
755
760
  var renderNotification = function(notification, index) {
756
761
  return /*#__PURE__*/ _jsx(ResourceList.Item, {
757
762
  id: "notification-".concat(notification.id),
758
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
759
- gap: "4",
763
+ children: /*#__PURE__*/ _jsxs(Stack, {
764
+ horizontal: true,
765
+ gap: "md",
760
766
  blockAlign: "center",
761
767
  children: [
762
768
  /*#__PURE__*/ _jsx(Box, {
@@ -772,8 +778,8 @@ export var WithoutDividers = {
772
778
  style: {
773
779
  flex: 1
774
780
  },
775
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
776
- gap: "1",
781
+ children: /*#__PURE__*/ _jsxs(Stack, {
782
+ gap: "xs",
777
783
  children: [
778
784
  /*#__PURE__*/ _jsx(Text, {
779
785
  variant: "headingSm",
@@ -884,15 +890,16 @@ export var ComplexItems = {
884
890
  return setSelectedOrder(order.id === selectedOrder ? null : order.id);
885
891
  },
886
892
  accessibilityLabel: "View details for order ".concat(order.id),
887
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
888
- gap: "2",
893
+ children: /*#__PURE__*/ _jsxs(Stack, {
894
+ gap: "sm",
889
895
  children: [
890
- /*#__PURE__*/ _jsxs(HorizontalStack, {
896
+ /*#__PURE__*/ _jsxs(Stack, {
897
+ horizontal: true,
891
898
  align: "space-between",
892
899
  blockAlign: "start",
893
900
  children: [
894
- /*#__PURE__*/ _jsxs(VerticalStack, {
895
- gap: "1",
901
+ /*#__PURE__*/ _jsxs(Stack, {
902
+ gap: "xs",
896
903
  children: [
897
904
  /*#__PURE__*/ _jsx(Text, {
898
905
  variant: "headingSm",
@@ -904,8 +911,8 @@ export var ComplexItems = {
904
911
  })
905
912
  ]
906
913
  }),
907
- /*#__PURE__*/ _jsxs(VerticalStack, {
908
- gap: "1",
914
+ /*#__PURE__*/ _jsxs(Stack, {
915
+ gap: "xs",
909
916
  align: "end",
910
917
  children: [
911
918
  /*#__PURE__*/ _jsx(Text, {
@@ -920,7 +927,8 @@ export var ComplexItems = {
920
927
  })
921
928
  ]
922
929
  }),
923
- /*#__PURE__*/ _jsxs(HorizontalStack, {
930
+ /*#__PURE__*/ _jsxs(Stack, {
931
+ horizontal: true,
924
932
  align: "space-between",
925
933
  blockAlign: "center",
926
934
  children: [
@@ -955,8 +963,8 @@ export var ComplexItems = {
955
963
  borderLeft: '3px solid #007bff'
956
964
  },
957
965
  children: [
958
- /*#__PURE__*/ _jsxs(VerticalStack, {
959
- gap: "2",
966
+ /*#__PURE__*/ _jsxs(Stack, {
967
+ gap: "sm",
960
968
  children: [
961
969
  /*#__PURE__*/ _jsx(Text, {
962
970
  variant: "headingXs",
@@ -971,8 +979,9 @@ export var ComplexItems = {
971
979
  }),
972
980
  /*#__PURE__*/ _jsx(Box, {
973
981
  paddingBlockStart: "4",
974
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
975
- gap: "2",
982
+ children: /*#__PURE__*/ _jsxs(Stack, {
983
+ horizontal: true,
984
+ gap: "sm",
976
985
  children: [
977
986
  /*#__PURE__*/ _jsx(Button, {
978
987
  size: "slim",
package/dist/esm/stories/SkeletonText.stories.js CHANGED
@@ -74,12 +74,11 @@ function _unsupported_iterable_to_array(o, minLen) {
74
74
  }
75
75
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
76
76
  import { transformStorySource } from "../utilities/transformers.js";
77
+ import Stack from "../components/Stack.js";
77
78
  import SkeletonText from "../components/SkeletonText.js";
78
79
  import Text from "../components/Text.js";
79
80
  import Card from "../components/Card.js";
80
81
  import Button from "../components/Button.js";
81
- import VerticalStack from "../components/VerticalStack.js";
82
- import HorizontalStack from "../components/HorizontalStack.js";
83
82
  import Box from "../components/Box.js";
84
83
  import { useState } from "react";
85
84
  export default {
@@ -190,8 +189,8 @@ export var HeadingText = {
190
189
  };
191
190
  export var Sizes = {
192
191
  render: function() {
193
- return /*#__PURE__*/ _jsxs(VerticalStack, {
194
- gap: "2",
192
+ return /*#__PURE__*/ _jsxs(Stack, {
193
+ gap: "sm",
195
194
  children: [
196
195
  /*#__PURE__*/ _jsxs(Box, {
197
196
  children: [
@@ -266,8 +265,8 @@ export var Sizes = {
266
265
  };
267
266
  export var HeadingSizes = {
268
267
  render: function() {
269
- return /*#__PURE__*/ _jsxs(VerticalStack, {
270
- gap: "2",
268
+ return /*#__PURE__*/ _jsxs(Stack, {
269
+ gap: "sm",
271
270
  children: [
272
271
  /*#__PURE__*/ _jsxs(Box, {
273
272
  children: [
@@ -356,8 +355,8 @@ export var FullWidth = {
356
355
  };
357
356
  export var Alignment = {
358
357
  render: function() {
359
- return /*#__PURE__*/ _jsxs(VerticalStack, {
360
- gap: "2",
358
+ return /*#__PURE__*/ _jsxs(Stack, {
359
+ gap: "sm",
361
360
  children: [
362
361
  /*#__PURE__*/ _jsxs(Box, {
363
362
  children: [
@@ -408,8 +407,8 @@ export var Alignment = {
408
407
  };
409
408
  export var GapSizes = {
410
409
  render: function() {
411
- return /*#__PURE__*/ _jsxs(VerticalStack, {
412
- gap: "2",
410
+ return /*#__PURE__*/ _jsxs(Stack, {
411
+ gap: "sm",
413
412
  children: [
414
413
  /*#__PURE__*/ _jsxs(Box, {
415
414
  children: [
@@ -463,8 +462,8 @@ export var ArticleLoading = {
463
462
  return /*#__PURE__*/ _jsx(Card, {
464
463
  title: "Article",
465
464
  padded: true,
466
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
467
- gap: "1.5",
465
+ children: /*#__PURE__*/ _jsxs(Stack, {
466
+ gap: "xs",
468
467
  children: [
469
468
  /*#__PURE__*/ _jsx(SkeletonText, {
470
469
  type: "heading",
@@ -506,8 +505,9 @@ export var ProfileCard = {
506
505
  render: function() {
507
506
  return /*#__PURE__*/ _jsx(Card, {
508
507
  padded: true,
509
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
510
- gap: "1",
508
+ children: /*#__PURE__*/ _jsxs(Stack, {
509
+ horizontal: true,
510
+ gap: "xs",
511
511
  children: [
512
512
  /*#__PURE__*/ _jsx(Box, {
513
513
  style: {
@@ -518,8 +518,8 @@ export var ProfileCard = {
518
518
  flexShrink: 0
519
519
  }
520
520
  }),
521
- /*#__PURE__*/ _jsxs(VerticalStack, {
522
- gap: "1",
521
+ /*#__PURE__*/ _jsxs(Stack, {
522
+ gap: "xs",
523
523
  style: {
524
524
  flex: 1
525
525
  },
@@ -557,8 +557,8 @@ export var ListLoading = {
557
557
  return /*#__PURE__*/ _jsx(Card, {
558
558
  title: "Items",
559
559
  padded: true,
560
- children: /*#__PURE__*/ _jsx(VerticalStack, {
561
- gap: "1",
560
+ children: /*#__PURE__*/ _jsx(Stack, {
561
+ gap: "xs",
562
562
  children: [
563
563
  1,
564
564
  2,
@@ -566,8 +566,9 @@ export var ListLoading = {
566
566
  4,
567
567
  5
568
568
  ].map(function(item) {
569
- return /*#__PURE__*/ _jsxs(HorizontalStack, {
570
- gap: "1",
569
+ return /*#__PURE__*/ _jsxs(Stack, {
570
+ horizontal: true,
571
+ gap: "xs",
571
572
  style: {
572
573
  padding: '1rem',
573
574
  border: '1px solid #e1e1e1',
@@ -639,8 +640,8 @@ export var InteractiveExample = {
639
640
  children: isLoading ? 'Show Content' : 'Show Skeleton'
640
641
  })
641
642
  }),
642
- isLoading ? /*#__PURE__*/ _jsxs(VerticalStack, {
643
- gap: "1.5",
643
+ isLoading ? /*#__PURE__*/ _jsxs(Stack, {
644
+ gap: "xs",
644
645
  children: [
645
646
  /*#__PURE__*/ _jsx(SkeletonText, {
646
647
  type: "heading",
package/dist/esm/stories/Spinner.stories.js CHANGED
@@ -1,10 +1,11 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { transformStorySource } from "../utilities/transformers.js";
3
+ import Stack from "../components/Stack.js";
3
4
  import Spinner from "../components/Spinner.js";
4
5
  import Button from "../components/Button.js";
5
6
  import Card from "../components/Card.js";
6
7
  import Text from "../components/Text.js";
7
- import { HorizontalStack, VerticalStack, Box } from "../dist/esm/index.js";
8
+ import Box from "../components/Box.js";
8
9
  export default {
9
10
  title: 'Litho/Spinner',
10
11
  component: Spinner,
@@ -50,12 +51,13 @@ export default {
50
51
  export var Default = {};
51
52
  export var Sizes = {
52
53
  render: function() {
53
- return /*#__PURE__*/ _jsxs(HorizontalStack, {
54
- gap: "8",
54
+ return /*#__PURE__*/ _jsxs(Stack, {
55
+ horizontal: true,
56
+ gap: "lg",
55
57
  align: "center",
56
58
  children: [
57
- /*#__PURE__*/ _jsxs(VerticalStack, {
58
- gap: "2",
59
+ /*#__PURE__*/ _jsxs(Stack, {
60
+ gap: "sm",
59
61
  inlineAlign: "center",
60
62
  children: [
61
63
  /*#__PURE__*/ _jsx(Spinner, {
@@ -67,8 +69,8 @@ export var Sizes = {
67
69
  })
68
70
  ]
69
71
  }),
70
- /*#__PURE__*/ _jsxs(VerticalStack, {
71
- gap: "2",
72
+ /*#__PURE__*/ _jsxs(Stack, {
73
+ gap: "sm",
72
74
  inlineAlign: "center",
73
75
  children: [
74
76
  /*#__PURE__*/ _jsx(Spinner, {
@@ -80,8 +82,8 @@ export var Sizes = {
80
82
  })
81
83
  ]
82
84
  }),
83
- /*#__PURE__*/ _jsxs(VerticalStack, {
84
- gap: "2",
85
+ /*#__PURE__*/ _jsxs(Stack, {
86
+ gap: "sm",
85
87
  inlineAlign: "center",
86
88
  children: [
87
89
  /*#__PURE__*/ _jsx(Spinner, {
@@ -106,12 +108,13 @@ export var Sizes = {
106
108
  };
107
109
  export var Colors = {
108
110
  render: function() {
109
- return /*#__PURE__*/ _jsxs(HorizontalStack, {
110
- gap: "8",
111
+ return /*#__PURE__*/ _jsxs(Stack, {
112
+ horizontal: true,
113
+ gap: "lg",
111
114
  align: "center",
112
115
  children: [
113
- /*#__PURE__*/ _jsxs(VerticalStack, {
114
- gap: "2",
116
+ /*#__PURE__*/ _jsxs(Stack, {
117
+ gap: "sm",
115
118
  inlineAlign: "center",
116
119
  children: [
117
120
  /*#__PURE__*/ _jsx(Spinner, {
@@ -123,8 +126,8 @@ export var Colors = {
123
126
  })
124
127
  ]
125
128
  }),
126
- /*#__PURE__*/ _jsxs(VerticalStack, {
127
- gap: "2",
129
+ /*#__PURE__*/ _jsxs(Stack, {
130
+ gap: "sm",
128
131
  inlineAlign: "center",
129
132
  children: [
130
133
  /*#__PURE__*/ _jsx(Spinner, {
@@ -136,8 +139,8 @@ export var Colors = {
136
139
  })
137
140
  ]
138
141
  }),
139
- /*#__PURE__*/ _jsxs(VerticalStack, {
140
- gap: "2",
142
+ /*#__PURE__*/ _jsxs(Stack, {
143
+ gap: "sm",
141
144
  inlineAlign: "center",
142
145
  children: [
143
146
  /*#__PURE__*/ _jsx(Spinner, {
@@ -153,8 +156,8 @@ export var Colors = {
153
156
  padding: "4",
154
157
  background: "surface-dark",
155
158
  borderRadius: "2",
156
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
157
- gap: "2",
159
+ children: /*#__PURE__*/ _jsxs(Stack, {
160
+ gap: "sm",
158
161
  inlineAlign: "center",
159
162
  children: [
160
163
  /*#__PURE__*/ _jsx(Spinner, {
@@ -181,8 +184,9 @@ export var Colors = {
181
184
  };
182
185
  export var InButton = {
183
186
  render: function() {
184
- return /*#__PURE__*/ _jsxs(HorizontalStack, {
185
- gap: "4",
187
+ return /*#__PURE__*/ _jsxs(Stack, {
188
+ horizontal: true,
189
+ gap: "md",
186
190
  children: [
187
191
  /*#__PURE__*/ _jsx(Button, {
188
192
  loading: true,
@@ -216,8 +220,8 @@ export var InCard = {
216
220
  padded: true,
217
221
  children: /*#__PURE__*/ _jsx(Box, {
218
222
  paddingBlock: "8",
219
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
220
- gap: "4",
223
+ children: /*#__PURE__*/ _jsxs(Stack, {
224
+ gap: "md",
221
225
  inlineAlign: "center",
222
226
  children: [
223
227
  /*#__PURE__*/ _jsx(Spinner, {
@@ -242,11 +246,12 @@ export var InCard = {
242
246
  };
243
247
  export var WithText = {
244
248
  render: function() {
245
- return /*#__PURE__*/ _jsxs(VerticalStack, {
246
- gap: "6",
249
+ return /*#__PURE__*/ _jsxs(Stack, {
250
+ gap: "md",
247
251
  children: [
248
- /*#__PURE__*/ _jsxs(HorizontalStack, {
249
- gap: "2",
252
+ /*#__PURE__*/ _jsxs(Stack, {
253
+ horizontal: true,
254
+ gap: "sm",
250
255
  align: "center",
251
256
  children: [
252
257
  /*#__PURE__*/ _jsx(Spinner, {
@@ -258,8 +263,9 @@ export var WithText = {
258
263
  })
259
264
  ]
260
265
  }),
261
- /*#__PURE__*/ _jsxs(HorizontalStack, {
262
- gap: "2",
266
+ /*#__PURE__*/ _jsxs(Stack, {
267
+ horizontal: true,
268
+ gap: "sm",
263
269
  align: "center",
264
270
  children: [
265
271
  /*#__PURE__*/ _jsx(Spinner, {}),
@@ -268,8 +274,9 @@ export var WithText = {
268
274
  })
269
275
  ]
270
276
  }),
271
- /*#__PURE__*/ _jsxs(HorizontalStack, {
272
- gap: "3",
277
+ /*#__PURE__*/ _jsxs(Stack, {
278
+ horizontal: true,
279
+ gap: "sm",
273
280
  align: "center",
274
281
  children: [
275
282
  /*#__PURE__*/ _jsx(Spinner, {
@@ -327,8 +334,8 @@ export var CenteredOverlay = {
327
334
  display: "flex",
328
335
  alignItems: "center",
329
336
  justifyContent: "center",
330
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
331
- gap: "4",
337
+ children: /*#__PURE__*/ _jsxs(Stack, {
338
+ gap: "md",
332
339
  inlineAlign: "center",
333
340
  children: [
334
341
  /*#__PURE__*/ _jsx(Spinner, {