@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/List.stories.js CHANGED
@@ -52,13 +52,12 @@ function _object_spread_props(target, source) {
52
52
  }
53
53
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
54
54
  import { transformStorySource } from "../utilities/transformers.js";
55
+ import Stack from "../components/Stack.js";
55
56
  import List from "../components/List.js";
56
57
  import Text from "../components/Text.js";
57
58
  import Card from "../components/Card.js";
58
59
  import Button from "../components/Button.js";
59
60
  import Icon from "../components/Icon.js";
60
- import HorizontalStack from "../components/HorizontalStack.js";
61
- import VerticalStack from "../components/VerticalStack.js";
62
61
  import Grid from "../components/Grid.js";
63
62
  import Box from "../components/Box.js";
64
63
  import { MobileAcceptMajor, AlertMinor, InfoMinor, ViewMinor } from "@shopify/polaris-icons";
@@ -332,8 +331,9 @@ export var WithIcons = {
332
331
  type: "none",
333
332
  children: [
334
333
  /*#__PURE__*/ _jsx(List.Item, {
335
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
336
- gap: "2",
334
+ children: /*#__PURE__*/ _jsxs(Stack, {
335
+ horizontal: true,
336
+ gap: "sm",
337
337
  blockAlign: "center",
338
338
  children: [
339
339
  /*#__PURE__*/ _jsx(Icon, {
@@ -348,8 +348,9 @@ export var WithIcons = {
348
348
  })
349
349
  }),
350
350
  /*#__PURE__*/ _jsx(List.Item, {
351
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
352
- gap: "2",
351
+ children: /*#__PURE__*/ _jsxs(Stack, {
352
+ horizontal: true,
353
+ gap: "sm",
353
354
  blockAlign: "center",
354
355
  children: [
355
356
  /*#__PURE__*/ _jsx(Icon, {
@@ -364,8 +365,9 @@ export var WithIcons = {
364
365
  })
365
366
  }),
366
367
  /*#__PURE__*/ _jsx(List.Item, {
367
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
368
- gap: "2",
368
+ children: /*#__PURE__*/ _jsxs(Stack, {
369
+ horizontal: true,
370
+ gap: "sm",
369
371
  blockAlign: "center",
370
372
  children: [
371
373
  /*#__PURE__*/ _jsx(Icon, {
@@ -400,8 +402,8 @@ export var FeatureList = {
400
402
  gap: "loose",
401
403
  children: [
402
404
  /*#__PURE__*/ _jsx(List.Item, {
403
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
404
- gap: "1",
405
+ children: /*#__PURE__*/ _jsxs(Stack, {
406
+ gap: "xs",
405
407
  children: [
406
408
  /*#__PURE__*/ _jsx(Text, {
407
409
  variant: "headingSm",
@@ -415,8 +417,8 @@ export var FeatureList = {
415
417
  })
416
418
  }),
417
419
  /*#__PURE__*/ _jsx(List.Item, {
418
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
419
- gap: "1",
420
+ children: /*#__PURE__*/ _jsxs(Stack, {
421
+ gap: "xs",
420
422
  children: [
421
423
  /*#__PURE__*/ _jsx(Text, {
422
424
  variant: "headingSm",
@@ -430,8 +432,8 @@ export var FeatureList = {
430
432
  })
431
433
  }),
432
434
  /*#__PURE__*/ _jsx(List.Item, {
433
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
434
- gap: "1",
435
+ children: /*#__PURE__*/ _jsxs(Stack, {
436
+ gap: "xs",
435
437
  children: [
436
438
  /*#__PURE__*/ _jsx(Text, {
437
439
  variant: "headingSm",
@@ -445,8 +447,8 @@ export var FeatureList = {
445
447
  })
446
448
  }),
447
449
  /*#__PURE__*/ _jsx(List.Item, {
448
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
449
- gap: "1",
450
+ children: /*#__PURE__*/ _jsxs(Stack, {
451
+ gap: "xs",
450
452
  children: [
451
453
  /*#__PURE__*/ _jsx(Text, {
452
454
  variant: "headingSm",
@@ -518,8 +520,9 @@ export var ChecklistExample = {
518
520
  gap: "loose",
519
521
  children: checklistItems.map(function(item) {
520
522
  return /*#__PURE__*/ _jsx(List.Item, {
521
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
522
- gap: "3",
523
+ children: /*#__PURE__*/ _jsxs(Stack, {
524
+ horizontal: true,
525
+ gap: "sm",
523
526
  blockAlign: "center",
524
527
  children: [
525
528
  /*#__PURE__*/ _jsx(Box, {
@@ -590,7 +593,8 @@ export var NavigationMenu = {
590
593
  children: /*#__PURE__*/ _jsxs(List, {
591
594
  children: [
592
595
  /*#__PURE__*/ _jsx(List.Item, {
593
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
596
+ children: /*#__PURE__*/ _jsxs(Stack, {
597
+ horizontal: true,
594
598
  align: "space-between",
595
599
  blockAlign: "center",
596
600
  children: [
@@ -606,7 +610,8 @@ export var NavigationMenu = {
606
610
  })
607
611
  }),
608
612
  /*#__PURE__*/ _jsx(List.Item, {
609
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
613
+ children: /*#__PURE__*/ _jsxs(Stack, {
614
+ horizontal: true,
610
615
  align: "space-between",
611
616
  blockAlign: "center",
612
617
  children: [
@@ -622,7 +627,8 @@ export var NavigationMenu = {
622
627
  })
623
628
  }),
624
629
  /*#__PURE__*/ _jsx(List.Item, {
625
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
630
+ children: /*#__PURE__*/ _jsxs(Stack, {
631
+ horizontal: true,
626
632
  align: "space-between",
627
633
  blockAlign: "center",
628
634
  children: [
@@ -638,7 +644,8 @@ export var NavigationMenu = {
638
644
  })
639
645
  }),
640
646
  /*#__PURE__*/ _jsx(List.Item, {
641
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
647
+ children: /*#__PURE__*/ _jsxs(Stack, {
648
+ horizontal: true,
642
649
  align: "space-between",
643
650
  blockAlign: "center",
644
651
  children: [
@@ -675,8 +682,8 @@ export var InstructionSteps = {
675
682
  gap: "loose",
676
683
  children: [
677
684
  /*#__PURE__*/ _jsx(List.Item, {
678
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
679
- gap: "2",
685
+ children: /*#__PURE__*/ _jsxs(Stack, {
686
+ gap: "sm",
680
687
  children: [
681
688
  /*#__PURE__*/ _jsx(Text, {
682
689
  variant: "headingSm",
@@ -695,8 +702,8 @@ export var InstructionSteps = {
695
702
  })
696
703
  }),
697
704
  /*#__PURE__*/ _jsx(List.Item, {
698
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
699
- gap: "2",
705
+ children: /*#__PURE__*/ _jsxs(Stack, {
706
+ gap: "sm",
700
707
  children: [
701
708
  /*#__PURE__*/ _jsx(Text, {
702
709
  variant: "headingSm",
@@ -715,8 +722,8 @@ export var InstructionSteps = {
715
722
  })
716
723
  }),
717
724
  /*#__PURE__*/ _jsx(List.Item, {
718
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
719
- gap: "2",
725
+ children: /*#__PURE__*/ _jsxs(Stack, {
726
+ gap: "sm",
720
727
  children: [
721
728
  /*#__PURE__*/ _jsx(Text, {
722
729
  variant: "headingSm",
@@ -729,8 +736,8 @@ export var InstructionSteps = {
729
736
  })
730
737
  }),
731
738
  /*#__PURE__*/ _jsx(List.Item, {
732
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
733
- gap: "2",
739
+ children: /*#__PURE__*/ _jsxs(Stack, {
740
+ gap: "sm",
734
741
  children: [
735
742
  /*#__PURE__*/ _jsx(Text, {
736
743
  variant: "headingSm",
@@ -774,8 +781,9 @@ export var ComparisonList = {
774
781
  gap: "tight",
775
782
  children: [
776
783
  /*#__PURE__*/ _jsx(List.Item, {
777
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
778
- gap: "2",
784
+ children: /*#__PURE__*/ _jsxs(Stack, {
785
+ horizontal: true,
786
+ gap: "sm",
779
787
  blockAlign: "center",
780
788
  children: [
781
789
  /*#__PURE__*/ _jsx(Icon, {
@@ -790,8 +798,9 @@ export var ComparisonList = {
790
798
  })
791
799
  }),
792
800
  /*#__PURE__*/ _jsx(List.Item, {
793
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
794
- gap: "2",
801
+ children: /*#__PURE__*/ _jsxs(Stack, {
802
+ horizontal: true,
803
+ gap: "sm",
795
804
  blockAlign: "center",
796
805
  children: [
797
806
  /*#__PURE__*/ _jsx(Icon, {
@@ -806,8 +815,9 @@ export var ComparisonList = {
806
815
  })
807
816
  }),
808
817
  /*#__PURE__*/ _jsx(List.Item, {
809
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
810
- gap: "2",
818
+ children: /*#__PURE__*/ _jsxs(Stack, {
819
+ horizontal: true,
820
+ gap: "sm",
811
821
  blockAlign: "center",
812
822
  children: [
813
823
  /*#__PURE__*/ _jsx(Icon, {
@@ -822,8 +832,9 @@ export var ComparisonList = {
822
832
  })
823
833
  }),
824
834
  /*#__PURE__*/ _jsx(List.Item, {
825
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
826
- gap: "2",
835
+ children: /*#__PURE__*/ _jsxs(Stack, {
836
+ horizontal: true,
837
+ gap: "sm",
827
838
  blockAlign: "center",
828
839
  children: [
829
840
  /*#__PURE__*/ _jsx(Box, {
@@ -846,8 +857,9 @@ export var ComparisonList = {
846
857
  })
847
858
  }),
848
859
  /*#__PURE__*/ _jsx(List.Item, {
849
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
850
- gap: "2",
860
+ children: /*#__PURE__*/ _jsxs(Stack, {
861
+ horizontal: true,
862
+ gap: "sm",
851
863
  blockAlign: "center",
852
864
  children: [
853
865
  /*#__PURE__*/ _jsx(Box, {
@@ -880,8 +892,9 @@ export var ComparisonList = {
880
892
  gap: "tight",
881
893
  children: [
882
894
  /*#__PURE__*/ _jsx(List.Item, {
883
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
884
- gap: "2",
895
+ children: /*#__PURE__*/ _jsxs(Stack, {
896
+ horizontal: true,
897
+ gap: "sm",
885
898
  blockAlign: "center",
886
899
  children: [
887
900
  /*#__PURE__*/ _jsx(Icon, {
@@ -896,8 +909,9 @@ export var ComparisonList = {
896
909
  })
897
910
  }),
898
911
  /*#__PURE__*/ _jsx(List.Item, {
899
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
900
- gap: "2",
912
+ children: /*#__PURE__*/ _jsxs(Stack, {
913
+ horizontal: true,
914
+ gap: "sm",
901
915
  blockAlign: "center",
902
916
  children: [
903
917
  /*#__PURE__*/ _jsx(Icon, {
@@ -912,8 +926,9 @@ export var ComparisonList = {
912
926
  })
913
927
  }),
914
928
  /*#__PURE__*/ _jsx(List.Item, {
915
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
916
- gap: "2",
929
+ children: /*#__PURE__*/ _jsxs(Stack, {
930
+ horizontal: true,
931
+ gap: "sm",
917
932
  blockAlign: "center",
918
933
  children: [
919
934
  /*#__PURE__*/ _jsx(Icon, {
@@ -928,8 +943,9 @@ export var ComparisonList = {
928
943
  })
929
944
  }),
930
945
  /*#__PURE__*/ _jsx(List.Item, {
931
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
932
- gap: "2",
946
+ children: /*#__PURE__*/ _jsxs(Stack, {
947
+ horizontal: true,
948
+ gap: "sm",
933
949
  blockAlign: "center",
934
950
  children: [
935
951
  /*#__PURE__*/ _jsx(Icon, {
@@ -944,8 +960,9 @@ export var ComparisonList = {
944
960
  })
945
961
  }),
946
962
  /*#__PURE__*/ _jsx(List.Item, {
947
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
948
- gap: "2",
963
+ children: /*#__PURE__*/ _jsxs(Stack, {
964
+ horizontal: true,
965
+ gap: "sm",
949
966
  blockAlign: "center",
950
967
  children: [
951
968
  /*#__PURE__*/ _jsx(Icon, {
package/dist/esm/stories/Listbox.stories.js CHANGED
@@ -62,7 +62,8 @@ import { transformStorySource } from "../utilities/transformers.js";
62
62
  import Listbox from "../components/Listbox.js";
63
63
  import Text from "../components/Text.js";
64
64
  import Card from "../components/Card.js";
65
- import { HorizontalStack, VerticalStack, Box } from "../dist/esm/index.js";
65
+ import Stack from "../components/Stack.js";
66
+ import Box from "../components/Box.js";
66
67
  import { MobileAcceptMajor, StarFilledMinor } from "@shopify/polaris-icons";
67
68
  export default {
68
69
  title: 'Litho/Listbox',
@@ -388,8 +389,9 @@ export var NavigationMenu = {
388
389
  }
389
390
  }
390
391
  ];
391
- return /*#__PURE__*/ _jsxs(HorizontalStack, {
392
- gap: "8",
392
+ return /*#__PURE__*/ _jsxs(Stack, {
393
+ horizontal: true,
394
+ gap: "lg",
393
395
  children: [
394
396
  /*#__PURE__*/ _jsx(Box, {
395
397
  width: "200px",
@@ -510,8 +512,9 @@ export var FilterOptions = {
510
512
  var filteredData = selectedFilters.includes('all') ? sampleData : sampleData.filter(function(item) {
511
513
  return selectedFilters.includes(item.status);
512
514
  });
513
- return /*#__PURE__*/ _jsxs(HorizontalStack, {
514
- gap: "8",
515
+ return /*#__PURE__*/ _jsxs(Stack, {
516
+ horizontal: true,
517
+ gap: "lg",
515
518
  children: [
516
519
  /*#__PURE__*/ _jsx(Box, {
517
520
  width: "200px",
@@ -532,8 +535,8 @@ export var FilterOptions = {
532
535
  children: /*#__PURE__*/ _jsx(Card, {
533
536
  title: "Filtered Results",
534
537
  padded: true,
535
- children: filteredData.length > 0 ? /*#__PURE__*/ _jsx(VerticalStack, {
536
- gap: "2",
538
+ children: filteredData.length > 0 ? /*#__PURE__*/ _jsx(Stack, {
539
+ gap: "sm",
537
540
  children: filteredData.map(function(item, index) {
538
541
  return /*#__PURE__*/ _jsx(Box, {
539
542
  paddingBlock: "2",
@@ -541,7 +544,8 @@ export var FilterOptions = {
541
544
  borderWidth: "base",
542
545
  borderColor: "border-subdued",
543
546
  borderRadius: "base",
544
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
547
+ children: /*#__PURE__*/ _jsxs(Stack, {
548
+ horizontal: true,
545
549
  blockAlign: "center",
546
550
  inlineAlign: "space-between",
547
551
  children: [
package/dist/esm/stories/Loading.stories.js CHANGED
@@ -98,12 +98,11 @@ function _unsupported_iterable_to_array(o, minLen) {
98
98
  }
99
99
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
100
100
  import { transformStorySource } from "../utilities/transformers.js";
101
+ import Stack from "../components/Stack.js";
101
102
  import Loading from "../components/Loading.js";
102
103
  import Text from "../components/Text.js";
103
104
  import Card from "../components/Card.js";
104
105
  import Button from "../components/Button.js";
105
- import VerticalStack from "../components/VerticalStack.js";
106
- import HorizontalStack from "../components/HorizontalStack.js";
107
106
  import Box from "../components/Box.js";
108
107
  import { useState } from "react";
109
108
  export default {
@@ -137,12 +136,13 @@ export var Default = {
137
136
  };
138
137
  export var Sizes = {
139
138
  render: function() {
140
- return /*#__PURE__*/ _jsxs(HorizontalStack, {
141
- gap: "2",
139
+ return /*#__PURE__*/ _jsxs(Stack, {
140
+ horizontal: true,
141
+ gap: "sm",
142
142
  blockAlign: "center",
143
143
  children: [
144
- /*#__PURE__*/ _jsxs(VerticalStack, {
145
- gap: "2",
144
+ /*#__PURE__*/ _jsxs(Stack, {
145
+ gap: "sm",
146
146
  inlineAlign: "center",
147
147
  children: [
148
148
  /*#__PURE__*/ _jsx(Loading, {
@@ -153,8 +153,8 @@ export var Sizes = {
153
153
  })
154
154
  ]
155
155
  }),
156
- /*#__PURE__*/ _jsxs(VerticalStack, {
157
- gap: "2",
156
+ /*#__PURE__*/ _jsxs(Stack, {
157
+ gap: "sm",
158
158
  inlineAlign: "center",
159
159
  children: [
160
160
  /*#__PURE__*/ _jsx(Loading, {
@@ -165,8 +165,8 @@ export var Sizes = {
165
165
  })
166
166
  ]
167
167
  }),
168
- /*#__PURE__*/ _jsxs(VerticalStack, {
169
- gap: "2",
168
+ /*#__PURE__*/ _jsxs(Stack, {
169
+ gap: "sm",
170
170
  inlineAlign: "center",
171
171
  children: [
172
172
  /*#__PURE__*/ _jsx(Loading, {
@@ -190,11 +190,12 @@ export var Sizes = {
190
190
  };
191
191
  export var Colors = {
192
192
  render: function() {
193
- return /*#__PURE__*/ _jsxs(HorizontalStack, {
194
- gap: "12",
193
+ return /*#__PURE__*/ _jsxs(Stack, {
194
+ horizontal: true,
195
+ gap: "lg",
195
196
  children: [
196
- /*#__PURE__*/ _jsxs(VerticalStack, {
197
- gap: "4",
197
+ /*#__PURE__*/ _jsxs(Stack, {
198
+ gap: "md",
198
199
  inlineAlign: "center",
199
200
  children: [
200
201
  /*#__PURE__*/ _jsx(Loading, {
@@ -205,8 +206,8 @@ export var Colors = {
205
206
  })
206
207
  ]
207
208
  }),
208
- /*#__PURE__*/ _jsxs(VerticalStack, {
209
- gap: "4",
209
+ /*#__PURE__*/ _jsxs(Stack, {
210
+ gap: "md",
210
211
  inlineAlign: "center",
211
212
  children: [
212
213
  /*#__PURE__*/ _jsx(Loading, {
@@ -217,8 +218,8 @@ export var Colors = {
217
218
  })
218
219
  ]
219
220
  }),
220
- /*#__PURE__*/ _jsxs(VerticalStack, {
221
- gap: "4",
221
+ /*#__PURE__*/ _jsxs(Stack, {
222
+ gap: "md",
222
223
  inlineAlign: "center",
223
224
  as: Box,
224
225
  padding: "8",
@@ -247,8 +248,9 @@ export var Colors = {
247
248
  };
248
249
  export var InlineLoading = {
249
250
  render: function() {
250
- return /*#__PURE__*/ _jsxs(HorizontalStack, {
251
- gap: "2",
251
+ return /*#__PURE__*/ _jsxs(Stack, {
252
+ horizontal: true,
253
+ gap: "sm",
252
254
  blockAlign: "center",
253
255
  children: [
254
256
  /*#__PURE__*/ _jsx(Loading, {
@@ -273,7 +275,7 @@ export var CardLoading = {
273
275
  return /*#__PURE__*/ _jsx(Card, {
274
276
  title: "User Profile",
275
277
  padded: true,
276
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
278
+ children: /*#__PURE__*/ _jsxs(Stack, {
277
279
  gap: "4",
278
280
  inlineAlign: "center",
279
281
  blockAlign: "center",
@@ -313,10 +315,11 @@ export var OverlayLoading = {
313
315
  title: "Data Dashboard",
314
316
  padded: true,
315
317
  children: [
316
- /*#__PURE__*/ _jsxs(VerticalStack, {
317
- gap: "4",
318
+ /*#__PURE__*/ _jsxs(Stack, {
319
+ gap: "md",
318
320
  children: [
319
- /*#__PURE__*/ _jsxs(HorizontalStack, {
321
+ /*#__PURE__*/ _jsxs(Stack, {
322
+ horizontal: true,
320
323
  align: "space-between",
321
324
  children: [
322
325
  /*#__PURE__*/ _jsx(Text, {
@@ -334,8 +337,8 @@ export var OverlayLoading = {
334
337
  padding: "8",
335
338
  background: "surface-neutral-subdued",
336
339
  borderRadius: "1",
337
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
338
- gap: "1",
340
+ children: /*#__PURE__*/ _jsxs(Stack, {
341
+ gap: "xs",
339
342
  children: [
340
343
  /*#__PURE__*/ _jsx(Text, {
341
344
  children: "Revenue: $125,000"
@@ -351,7 +354,7 @@ export var OverlayLoading = {
351
354
  })
352
355
  ]
353
356
  }),
354
- isLoading && /*#__PURE__*/ _jsxs(VerticalStack, {
357
+ isLoading && /*#__PURE__*/ _jsxs(Stack, {
355
358
  gap: "4",
356
359
  inlineAlign: "center",
357
360
  blockAlign: "center",
@@ -403,8 +406,9 @@ export var ButtonLoading = {
403
406
  });
404
407
  }, 2000);
405
408
  };
406
- return /*#__PURE__*/ _jsxs(HorizontalStack, {
407
- gap: "4",
409
+ return /*#__PURE__*/ _jsxs(Stack, {
410
+ horizontal: true,
411
+ gap: "md",
408
412
  children: [
409
413
  /*#__PURE__*/ _jsx(Button, {
410
414
  primary: true,
@@ -412,8 +416,9 @@ export var ButtonLoading = {
412
416
  return handleButtonClick('save');
413
417
  },
414
418
  disabled: loadingStates.save,
415
- children: loadingStates.save ? /*#__PURE__*/ _jsxs(HorizontalStack, {
416
- gap: "2",
419
+ children: loadingStates.save ? /*#__PURE__*/ _jsxs(Stack, {
420
+ horizontal: true,
421
+ gap: "sm",
417
422
  blockAlign: "center",
418
423
  children: [
419
424
  /*#__PURE__*/ _jsx(Loading, {
@@ -431,8 +436,9 @@ export var ButtonLoading = {
431
436
  return handleButtonClick('upload');
432
437
  },
433
438
  disabled: loadingStates.upload,
434
- children: loadingStates.upload ? /*#__PURE__*/ _jsxs(HorizontalStack, {
435
- gap: "2",
439
+ children: loadingStates.upload ? /*#__PURE__*/ _jsxs(Stack, {
440
+ horizontal: true,
441
+ gap: "sm",
436
442
  blockAlign: "center",
437
443
  children: [
438
444
  /*#__PURE__*/ _jsx(Loading, {
@@ -449,8 +455,9 @@ export var ButtonLoading = {
449
455
  return handleButtonClick('process');
450
456
  },
451
457
  disabled: loadingStates.process,
452
- children: loadingStates.process ? /*#__PURE__*/ _jsxs(HorizontalStack, {
453
- gap: "2",
458
+ children: loadingStates.process ? /*#__PURE__*/ _jsxs(Stack, {
459
+ horizontal: true,
460
+ gap: "sm",
454
461
  blockAlign: "center",
455
462
  children: [
456
463
  /*#__PURE__*/ _jsx(Loading, {
@@ -490,8 +497,8 @@ export var TableLoading = {
490
497
  children: loadingTable ? 'Show Data' : 'Show Loading'
491
498
  })
492
499
  }),
493
- loadingTable ? /*#__PURE__*/ _jsxs(VerticalStack, {
494
- gap: "4",
500
+ loadingTable ? /*#__PURE__*/ _jsxs(Stack, {
501
+ gap: "md",
495
502
  inlineAlign: "center",
496
503
  blockAlign: "center",
497
504
  as: Box,
@@ -653,11 +660,12 @@ export var ProgressiveLoading = {
653
660
  return /*#__PURE__*/ _jsx(Card, {
654
661
  title: "Data Import Process",
655
662
  padded: true,
656
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
657
- gap: "8",
663
+ children: /*#__PURE__*/ _jsxs(Stack, {
664
+ gap: "lg",
658
665
  children: [
659
- /*#__PURE__*/ _jsxs(HorizontalStack, {
660
- gap: "4",
666
+ /*#__PURE__*/ _jsxs(Stack, {
667
+ horizontal: true,
668
+ gap: "md",
661
669
  children: [
662
670
  /*#__PURE__*/ _jsx(Button, {
663
671
  primary: true,
@@ -672,8 +680,8 @@ export var ProgressiveLoading = {
672
680
  })
673
681
  ]
674
682
  }),
675
- /*#__PURE__*/ _jsx(VerticalStack, {
676
- gap: "4",
683
+ /*#__PURE__*/ _jsx(Stack, {
684
+ gap: "md",
677
685
  inlineAlign: "center",
678
686
  as: Box,
679
687
  padding: "8",
@@ -750,11 +758,12 @@ export var SkeletonLoading = {
750
758
  children: showSkeleton ? 'Show Content' : 'Show Skeleton'
751
759
  })
752
760
  }),
753
- showSkeleton ? /*#__PURE__*/ _jsxs(VerticalStack, {
754
- gap: "4",
761
+ showSkeleton ? /*#__PURE__*/ _jsxs(Stack, {
762
+ gap: "md",
755
763
  children: [
756
- /*#__PURE__*/ _jsxs(HorizontalStack, {
757
- gap: "4",
764
+ /*#__PURE__*/ _jsxs(Stack, {
765
+ horizontal: true,
766
+ gap: "md",
758
767
  blockAlign: "center",
759
768
  children: [
760
769
  /*#__PURE__*/ _jsx(Loading, {
@@ -807,8 +816,8 @@ export var SkeletonLoading = {
807
816
  }
808
817
  })
809
818
  ]
810
- }) : /*#__PURE__*/ _jsxs(VerticalStack, {
811
- gap: "4",
819
+ }) : /*#__PURE__*/ _jsxs(Stack, {
820
+ gap: "md",
812
821
  children: [
813
822
  /*#__PURE__*/ _jsx(Text, {
814
823
  variant: "headingLg",
@@ -820,7 +829,7 @@ export var SkeletonLoading = {
820
829
  /*#__PURE__*/ _jsx(Text, {
821
830
  children: "In this article, we'll explore the key concepts that make interfaces both beautiful and functional, from color theory and typography to interaction design and usability testing."
822
831
  }),
823
- /*#__PURE__*/ _jsx(VerticalStack, {
832
+ /*#__PURE__*/ _jsx(Stack, {
824
833
  inlineAlign: "center",
825
834
  blockAlign: "center",
826
835
  as: Box,