@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/List.stories.js CHANGED
@@ -51,13 +51,12 @@ _export(exports, {
51
51
  });
52
52
  var _jsxruntime = require("react/jsx-runtime");
53
53
  var _transformers = require("../utilities/transformers.js");
54
+ var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
54
55
  var _List = /*#__PURE__*/ _interop_require_default(require("../components/List.js"));
55
56
  var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
56
57
  var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
57
58
  var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
58
59
  var _Icon = /*#__PURE__*/ _interop_require_default(require("../components/Icon.js"));
59
- var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
60
- var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.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
  var _polarisicons = require("@shopify/polaris-icons");
@@ -388,8 +387,9 @@ var WithIcons = {
388
387
  type: "none",
389
388
  children: [
390
389
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
391
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
392
- gap: "2",
390
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
391
+ horizontal: true,
392
+ gap: "sm",
393
393
  blockAlign: "center",
394
394
  children: [
395
395
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
@@ -404,8 +404,9 @@ var WithIcons = {
404
404
  })
405
405
  }),
406
406
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
407
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
408
- gap: "2",
407
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
408
+ horizontal: true,
409
+ gap: "sm",
409
410
  blockAlign: "center",
410
411
  children: [
411
412
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
@@ -420,8 +421,9 @@ var WithIcons = {
420
421
  })
421
422
  }),
422
423
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
423
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
424
- gap: "2",
424
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
425
+ horizontal: true,
426
+ gap: "sm",
425
427
  blockAlign: "center",
426
428
  children: [
427
429
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
@@ -456,8 +458,8 @@ var FeatureList = {
456
458
  gap: "loose",
457
459
  children: [
458
460
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
459
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
460
- gap: "1",
461
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
462
+ gap: "xs",
461
463
  children: [
462
464
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
463
465
  variant: "headingSm",
@@ -471,8 +473,8 @@ var FeatureList = {
471
473
  })
472
474
  }),
473
475
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
474
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
475
- gap: "1",
476
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
477
+ gap: "xs",
476
478
  children: [
477
479
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
478
480
  variant: "headingSm",
@@ -486,8 +488,8 @@ var FeatureList = {
486
488
  })
487
489
  }),
488
490
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
489
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
490
- gap: "1",
491
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
492
+ gap: "xs",
491
493
  children: [
492
494
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
493
495
  variant: "headingSm",
@@ -501,8 +503,8 @@ var FeatureList = {
501
503
  })
502
504
  }),
503
505
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
504
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
505
- gap: "1",
506
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
507
+ gap: "xs",
506
508
  children: [
507
509
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
508
510
  variant: "headingSm",
@@ -574,8 +576,9 @@ var ChecklistExample = {
574
576
  gap: "loose",
575
577
  children: checklistItems.map(function(item) {
576
578
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
577
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
578
- gap: "3",
579
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
580
+ horizontal: true,
581
+ gap: "sm",
579
582
  blockAlign: "center",
580
583
  children: [
581
584
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
@@ -646,7 +649,8 @@ var NavigationMenu = {
646
649
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_List.default, {
647
650
  children: [
648
651
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
649
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
652
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
653
+ horizontal: true,
650
654
  align: "space-between",
651
655
  blockAlign: "center",
652
656
  children: [
@@ -662,7 +666,8 @@ var NavigationMenu = {
662
666
  })
663
667
  }),
664
668
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
665
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
669
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
670
+ horizontal: true,
666
671
  align: "space-between",
667
672
  blockAlign: "center",
668
673
  children: [
@@ -678,7 +683,8 @@ var NavigationMenu = {
678
683
  })
679
684
  }),
680
685
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
681
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
686
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
687
+ horizontal: true,
682
688
  align: "space-between",
683
689
  blockAlign: "center",
684
690
  children: [
@@ -694,7 +700,8 @@ var NavigationMenu = {
694
700
  })
695
701
  }),
696
702
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
697
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
703
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
704
+ horizontal: true,
698
705
  align: "space-between",
699
706
  blockAlign: "center",
700
707
  children: [
@@ -731,8 +738,8 @@ var InstructionSteps = {
731
738
  gap: "loose",
732
739
  children: [
733
740
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
734
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
735
- gap: "2",
741
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
742
+ gap: "sm",
736
743
  children: [
737
744
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
738
745
  variant: "headingSm",
@@ -751,8 +758,8 @@ var InstructionSteps = {
751
758
  })
752
759
  }),
753
760
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
754
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
755
- gap: "2",
761
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
762
+ gap: "sm",
756
763
  children: [
757
764
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
758
765
  variant: "headingSm",
@@ -771,8 +778,8 @@ var InstructionSteps = {
771
778
  })
772
779
  }),
773
780
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
774
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
775
- gap: "2",
781
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
782
+ gap: "sm",
776
783
  children: [
777
784
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
778
785
  variant: "headingSm",
@@ -785,8 +792,8 @@ var InstructionSteps = {
785
792
  })
786
793
  }),
787
794
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
788
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
789
- gap: "2",
795
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
796
+ gap: "sm",
790
797
  children: [
791
798
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
792
799
  variant: "headingSm",
@@ -830,8 +837,9 @@ var ComparisonList = {
830
837
  gap: "tight",
831
838
  children: [
832
839
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
833
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
834
- gap: "2",
840
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
841
+ horizontal: true,
842
+ gap: "sm",
835
843
  blockAlign: "center",
836
844
  children: [
837
845
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
@@ -846,8 +854,9 @@ var ComparisonList = {
846
854
  })
847
855
  }),
848
856
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
849
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
850
- gap: "2",
857
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
858
+ horizontal: true,
859
+ gap: "sm",
851
860
  blockAlign: "center",
852
861
  children: [
853
862
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
@@ -862,8 +871,9 @@ var ComparisonList = {
862
871
  })
863
872
  }),
864
873
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
865
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
866
- gap: "2",
874
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
875
+ horizontal: true,
876
+ gap: "sm",
867
877
  blockAlign: "center",
868
878
  children: [
869
879
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
@@ -878,8 +888,9 @@ var ComparisonList = {
878
888
  })
879
889
  }),
880
890
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
881
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
882
- gap: "2",
891
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
892
+ horizontal: true,
893
+ gap: "sm",
883
894
  blockAlign: "center",
884
895
  children: [
885
896
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
@@ -902,8 +913,9 @@ var ComparisonList = {
902
913
  })
903
914
  }),
904
915
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
905
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
906
- gap: "2",
916
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
917
+ horizontal: true,
918
+ gap: "sm",
907
919
  blockAlign: "center",
908
920
  children: [
909
921
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
@@ -936,8 +948,9 @@ var ComparisonList = {
936
948
  gap: "tight",
937
949
  children: [
938
950
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
939
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
940
- gap: "2",
951
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
952
+ horizontal: true,
953
+ gap: "sm",
941
954
  blockAlign: "center",
942
955
  children: [
943
956
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
@@ -952,8 +965,9 @@ var ComparisonList = {
952
965
  })
953
966
  }),
954
967
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
955
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
956
- gap: "2",
968
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
969
+ horizontal: true,
970
+ gap: "sm",
957
971
  blockAlign: "center",
958
972
  children: [
959
973
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
@@ -968,8 +982,9 @@ var ComparisonList = {
968
982
  })
969
983
  }),
970
984
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
971
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
972
- gap: "2",
985
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
986
+ horizontal: true,
987
+ gap: "sm",
973
988
  blockAlign: "center",
974
989
  children: [
975
990
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
@@ -984,8 +999,9 @@ var ComparisonList = {
984
999
  })
985
1000
  }),
986
1001
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
987
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
988
- gap: "2",
1002
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1003
+ horizontal: true,
1004
+ gap: "sm",
989
1005
  blockAlign: "center",
990
1006
  children: [
991
1007
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
@@ -1000,8 +1016,9 @@ var ComparisonList = {
1000
1016
  })
1001
1017
  }),
1002
1018
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_List.default.Item, {
1003
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
1004
- gap: "2",
1019
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1020
+ horizontal: true,
1021
+ gap: "sm",
1005
1022
  blockAlign: "center",
1006
1023
  children: [
1007
1024
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
package/dist/cjs/stories/Listbox.stories.js CHANGED
@@ -43,7 +43,8 @@ var _transformers = require("../utilities/transformers.js");
43
43
  var _Listbox = /*#__PURE__*/ _interop_require_default(require("../components/Listbox.js"));
44
44
  var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
45
45
  var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
46
- var _ = require("../");
46
+ var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
47
+ var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
47
48
  var _polarisicons = require("@shopify/polaris-icons");
48
49
  function _array_like_to_array(arr, len) {
49
50
  if (len == null || len > arr.length) len = arr.length;
@@ -352,9 +353,9 @@ var MultipleSelection = {
352
353
  showIcon: true,
353
354
  icon: _polarisicons.MobileAcceptMajor
354
355
  }),
355
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
356
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
356
357
  paddingBlockStart: "4",
357
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
358
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
358
359
  paddingBlock: "2",
359
360
  paddingInline: "2",
360
361
  background: "surface-neutral-subdued",
@@ -432,10 +433,11 @@ var NavigationMenu = {
432
433
  }
433
434
  }
434
435
  ];
435
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
436
- gap: "8",
436
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
437
+ horizontal: true,
438
+ gap: "lg",
437
439
  children: [
438
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
440
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
439
441
  width: "200px",
440
442
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
441
443
  title: "Navigation",
@@ -445,7 +447,7 @@ var NavigationMenu = {
445
447
  })
446
448
  })
447
449
  }),
448
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
450
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
449
451
  minWidth: "0",
450
452
  style: {
451
453
  flex: 1
@@ -554,10 +556,11 @@ var FilterOptions = {
554
556
  var filteredData = selectedFilters.includes('all') ? sampleData : sampleData.filter(function(item) {
555
557
  return selectedFilters.includes(item.status);
556
558
  });
557
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
558
- gap: "8",
559
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
560
+ horizontal: true,
561
+ gap: "lg",
559
562
  children: [
560
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
563
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
561
564
  width: "200px",
562
565
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
563
566
  title: "Filters",
@@ -568,7 +571,7 @@ var FilterOptions = {
568
571
  })
569
572
  })
570
573
  }),
571
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
574
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
572
575
  minWidth: "0",
573
576
  style: {
574
577
  flex: 1
@@ -576,16 +579,17 @@ var FilterOptions = {
576
579
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
577
580
  title: "Filtered Results",
578
581
  padded: true,
579
- children: filteredData.length > 0 ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_.VerticalStack, {
580
- gap: "2",
582
+ children: filteredData.length > 0 ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
583
+ gap: "sm",
581
584
  children: filteredData.map(function(item, index) {
582
- return /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
585
+ return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
583
586
  paddingBlock: "2",
584
587
  paddingInline: "2",
585
588
  borderWidth: "base",
586
589
  borderColor: "border-subdued",
587
590
  borderRadius: "base",
588
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.HorizontalStack, {
591
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
592
+ horizontal: true,
589
593
  blockAlign: "center",
590
594
  inlineAlign: "space-between",
591
595
  children: [
@@ -670,21 +674,21 @@ var HorizontalOnMobile = {
670
674
  title: "Product Information",
671
675
  padded: true,
672
676
  children: [
673
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
677
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
674
678
  paddingBlockEnd: "4",
675
679
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Listbox.default, {
676
680
  options: tabOptions,
677
681
  displayHorizontallyOnMobile: true
678
682
  })
679
683
  }),
680
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Box, {
684
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
681
685
  paddingBlock: "4",
682
686
  paddingInline: "4",
683
687
  background: "surface-neutral-subdued",
684
688
  borderRadius: "base",
685
689
  minHeight: "200px",
686
690
  children: [
687
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
691
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
688
692
  paddingBlockEnd: "4",
689
693
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
690
694
  variant: "headingSm",
@@ -758,14 +762,14 @@ var KeyboardNavigation = {
758
762
  },
759
763
  padded: true,
760
764
  children: [
761
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_.Box, {
765
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
762
766
  paddingBlockEnd: "4",
763
767
  children: [
764
768
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
765
769
  variant: "bodySm",
766
770
  children: "Try keyboard navigation:"
767
771
  }),
768
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
772
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
769
773
  paddingBlockStart: "2",
770
774
  paddingInlineStart: "4",
771
775
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("ul", {
@@ -791,9 +795,9 @@ var KeyboardNavigation = {
791
795
  options: options,
792
796
  showIcon: true
793
797
  }),
794
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
798
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
795
799
  paddingBlockStart: "4",
796
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_.Box, {
800
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
797
801
  paddingBlock: "2",
798
802
  paddingInline: "2",
799
803
  background: "surface-accent-subdued",