@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/Modal.stories.js CHANGED
@@ -1,9 +1,9 @@
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 Modal from "../components/Modal.js";
4
5
  import Text from "../components/Text.js";
5
6
  import TextField from "../components/TextField.js";
6
- import VerticalStack from "../components/VerticalStack.js";
7
7
  import Grid from "../components/Grid.js";
8
8
  export default {
9
9
  title: 'Litho/Modal',
@@ -143,8 +143,8 @@ export var Large = {
143
143
  args: {
144
144
  size: 'large',
145
145
  title: 'Edit Product Details',
146
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
147
- gap: "4",
146
+ children: /*#__PURE__*/ _jsxs(Stack, {
147
+ gap: "md",
148
148
  children: [
149
149
  /*#__PURE__*/ _jsx(TextField, {
150
150
  label: "Product Name",
@@ -216,8 +216,8 @@ export var Loading = {
216
216
  export var WithMultipleActions = {
217
217
  args: {
218
218
  title: 'Export Data',
219
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
220
- gap: "4",
219
+ children: /*#__PURE__*/ _jsxs(Stack, {
220
+ gap: "md",
221
221
  children: [
222
222
  /*#__PURE__*/ _jsx(Text, {
223
223
  children: "Choose your export format:"
@@ -256,8 +256,8 @@ export var FullScreen = {
256
256
  size: 'full',
257
257
  title: 'Full Screen Modal',
258
258
  subtitle: 'This modal takes up the entire viewport',
259
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
260
- gap: "8",
259
+ children: /*#__PURE__*/ _jsxs(Stack, {
260
+ gap: "lg",
261
261
  paddingBlock: "8",
262
262
  children: [
263
263
  /*#__PURE__*/ _jsx(Text, {
package/dist/esm/stories/Page.stories.js CHANGED
@@ -1,6 +1,10 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { transformStorySource } from "../utilities/transformers.js";
3
- import { Page, Text, Card, VerticalStack, Layout } from "../dist/esm/index.js";
3
+ import Stack from "../components/Stack.js";
4
+ import Page from "../components/Page.js";
5
+ import Text from "../components/Text.js";
6
+ import Card from "../components/Card.js";
7
+ import Layout from "../components/Layout.js";
4
8
  export default {
5
9
  title: "Litho/Page",
6
10
  component: Page,
@@ -246,8 +250,8 @@ export var ComplexPage = {
246
250
  ]
247
251
  }
248
252
  ],
249
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
250
- gap: "6",
253
+ children: /*#__PURE__*/ _jsxs(Stack, {
254
+ gap: "md",
251
255
  children: [
252
256
  /*#__PURE__*/ _jsx(Card, {
253
257
  sectioned: true,
package/dist/esm/stories/Pane.stories.js CHANGED
@@ -219,13 +219,14 @@ function _ts_generator(thisArg, body) {
219
219
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
220
220
  import { useState } from "react";
221
221
  import { transformStorySource } from "../utilities/transformers.js";
222
+ import Stack from "../components/Stack.js";
222
223
  import Pane from "../components/Pane.js";
223
224
  import Text from "../components/Text.js";
224
225
  import Card from "../components/Card.js";
225
226
  import Button from "../components/Button.js";
226
227
  import TextField from "../components/TextField.js";
227
228
  import Page from "../components/Page.js";
228
- import { HorizontalStack, VerticalStack, Box } from "../dist/esm/index.js";
229
+ import Box from "../components/Box.js";
229
230
  import { EditMajor, DeleteMajor, ShareIosMinor, DuplicateMinor } from "@shopify/polaris-icons";
230
231
  export default {
231
232
  title: 'Litho/Pane',
@@ -315,8 +316,9 @@ export var Default = {
315
316
  /*#__PURE__*/ _jsx(Pane.Footer, {
316
317
  children: /*#__PURE__*/ _jsx(Box, {
317
318
  padding: "4",
318
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
319
- gap: "4",
319
+ children: /*#__PURE__*/ _jsxs(Stack, {
320
+ horizontal: true,
321
+ gap: "md",
320
322
  align: "end",
321
323
  children: [
322
324
  /*#__PURE__*/ _jsx(Button, {
@@ -407,8 +409,8 @@ export var WithActions = {
407
409
  /*#__PURE__*/ _jsx(Pane.Content, {
408
410
  children: /*#__PURE__*/ _jsx(Box, {
409
411
  padding: "4",
410
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
411
- gap: "4",
412
+ children: /*#__PURE__*/ _jsxs(Stack, {
413
+ gap: "md",
412
414
  children: [
413
415
  /*#__PURE__*/ _jsxs(Box, {
414
416
  children: [
@@ -482,8 +484,9 @@ export var WithActions = {
482
484
  /*#__PURE__*/ _jsx(Pane.Footer, {
483
485
  children: /*#__PURE__*/ _jsx(Box, {
484
486
  padding: "4",
485
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
486
- gap: "4",
487
+ children: /*#__PURE__*/ _jsxs(Stack, {
488
+ horizontal: true,
489
+ gap: "md",
487
490
  align: "space-between",
488
491
  children: [
489
492
  /*#__PURE__*/ _jsx(Text, {
@@ -491,8 +494,9 @@ export var WithActions = {
491
494
  color: "subdued",
492
495
  children: "Last updated: 2 hours ago"
493
496
  }),
494
- /*#__PURE__*/ _jsxs(HorizontalStack, {
495
- gap: "4",
497
+ /*#__PURE__*/ _jsxs(Stack, {
498
+ horizontal: true,
499
+ gap: "md",
496
500
  children: [
497
501
  /*#__PURE__*/ _jsx(Button, {
498
502
  onClick: function() {
@@ -604,8 +608,8 @@ export var FormPane = {
604
608
  /*#__PURE__*/ _jsx(Pane.Content, {
605
609
  children: /*#__PURE__*/ _jsx(Box, {
606
610
  padding: "4",
607
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
608
- gap: "6",
611
+ children: /*#__PURE__*/ _jsxs(Stack, {
612
+ gap: "md",
609
613
  children: [
610
614
  /*#__PURE__*/ _jsx(TextField, {
611
615
  label: "Full Name",
@@ -657,8 +661,9 @@ export var FormPane = {
657
661
  /*#__PURE__*/ _jsx(Pane.Footer, {
658
662
  children: /*#__PURE__*/ _jsx(Box, {
659
663
  padding: "4",
660
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
661
- gap: "4",
664
+ children: /*#__PURE__*/ _jsxs(Stack, {
665
+ horizontal: true,
666
+ gap: "md",
662
667
  align: "end",
663
668
  children: [
664
669
  /*#__PURE__*/ _jsx(Button, {
@@ -772,20 +777,21 @@ export var DetailViewPane = {
772
777
  /*#__PURE__*/ _jsx(Card, {
773
778
  title: "Orders List",
774
779
  padded: true,
775
- children: /*#__PURE__*/ _jsx(VerticalStack, {
776
- gap: "2",
780
+ children: /*#__PURE__*/ _jsx(Stack, {
781
+ gap: "sm",
777
782
  children: orders.map(function(order) {
778
783
  return /*#__PURE__*/ _jsx(Box, {
779
784
  padding: "4",
780
785
  borderWidth: "1",
781
786
  borderColor: "border",
782
787
  borderRadius: "1",
783
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
788
+ children: /*#__PURE__*/ _jsxs(Stack, {
789
+ horizontal: true,
784
790
  align: "space-between",
785
791
  blockAlign: "center",
786
792
  children: [
787
- /*#__PURE__*/ _jsxs(VerticalStack, {
788
- gap: "1",
793
+ /*#__PURE__*/ _jsxs(Stack, {
794
+ gap: "xs",
789
795
  children: [
790
796
  /*#__PURE__*/ _jsx(Text, {
791
797
  variant: "headingSm",
@@ -804,8 +810,9 @@ export var DetailViewPane = {
804
810
  })
805
811
  ]
806
812
  }),
807
- /*#__PURE__*/ _jsxs(HorizontalStack, {
808
- gap: "4",
813
+ /*#__PURE__*/ _jsxs(Stack, {
814
+ horizontal: true,
815
+ gap: "md",
809
816
  blockAlign: "center",
810
817
  children: [
811
818
  /*#__PURE__*/ _jsx(Box, {
@@ -856,8 +863,8 @@ export var DetailViewPane = {
856
863
  /*#__PURE__*/ _jsx(Pane.Content, {
857
864
  children: selectedOrder && /*#__PURE__*/ _jsx(Box, {
858
865
  padding: "4",
859
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
860
- gap: "8",
866
+ children: /*#__PURE__*/ _jsxs(Stack, {
867
+ gap: "lg",
861
868
  children: [
862
869
  /*#__PURE__*/ _jsxs(Box, {
863
870
  children: [
@@ -876,8 +883,8 @@ export var DetailViewPane = {
876
883
  gap: '1rem'
877
884
  },
878
885
  children: [
879
- /*#__PURE__*/ _jsxs(VerticalStack, {
880
- gap: "1",
886
+ /*#__PURE__*/ _jsxs(Stack, {
887
+ gap: "xs",
881
888
  children: [
882
889
  /*#__PURE__*/ _jsx(Text, {
883
890
  variant: "bodySm",
@@ -889,8 +896,8 @@ export var DetailViewPane = {
889
896
  })
890
897
  ]
891
898
  }),
892
- /*#__PURE__*/ _jsxs(VerticalStack, {
893
- gap: "1",
899
+ /*#__PURE__*/ _jsxs(Stack, {
900
+ gap: "xs",
894
901
  children: [
895
902
  /*#__PURE__*/ _jsx(Text, {
896
903
  variant: "bodySm",
@@ -902,8 +909,8 @@ export var DetailViewPane = {
902
909
  })
903
910
  ]
904
911
  }),
905
- /*#__PURE__*/ _jsxs(VerticalStack, {
906
- gap: "1",
912
+ /*#__PURE__*/ _jsxs(Stack, {
913
+ gap: "xs",
907
914
  children: [
908
915
  /*#__PURE__*/ _jsx(Text, {
909
916
  variant: "bodySm",
@@ -916,8 +923,8 @@ export var DetailViewPane = {
916
923
  })
917
924
  ]
918
925
  }),
919
- /*#__PURE__*/ _jsxs(VerticalStack, {
920
- gap: "1",
926
+ /*#__PURE__*/ _jsxs(Stack, {
927
+ gap: "xs",
921
928
  children: [
922
929
  /*#__PURE__*/ _jsx(Text, {
923
930
  variant: "bodySm",
@@ -953,19 +960,20 @@ export var DetailViewPane = {
953
960
  children: "Items Ordered"
954
961
  })
955
962
  }),
956
- /*#__PURE__*/ _jsx(VerticalStack, {
957
- gap: "2",
963
+ /*#__PURE__*/ _jsx(Stack, {
964
+ gap: "sm",
958
965
  children: selectedOrder.items.map(function(item, index) {
959
966
  return /*#__PURE__*/ _jsx(Box, {
960
967
  padding: "3",
961
968
  borderWidth: "1",
962
969
  borderColor: "border",
963
970
  borderRadius: "1",
964
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
971
+ children: /*#__PURE__*/ _jsxs(Stack, {
972
+ horizontal: true,
965
973
  align: "space-between",
966
974
  children: [
967
- /*#__PURE__*/ _jsxs(VerticalStack, {
968
- gap: "1",
975
+ /*#__PURE__*/ _jsxs(Stack, {
976
+ gap: "xs",
969
977
  children: [
970
978
  /*#__PURE__*/ _jsx(Text, {
971
979
  children: item.name
@@ -1000,11 +1008,11 @@ export var DetailViewPane = {
1000
1008
  children: "Shipping Information"
1001
1009
  })
1002
1010
  }),
1003
- /*#__PURE__*/ _jsxs(VerticalStack, {
1004
- gap: "2",
1011
+ /*#__PURE__*/ _jsxs(Stack, {
1012
+ gap: "sm",
1005
1013
  children: [
1006
- /*#__PURE__*/ _jsxs(VerticalStack, {
1007
- gap: "1",
1014
+ /*#__PURE__*/ _jsxs(Stack, {
1015
+ gap: "xs",
1008
1016
  children: [
1009
1017
  /*#__PURE__*/ _jsx(Text, {
1010
1018
  variant: "bodySm",
@@ -1016,8 +1024,8 @@ export var DetailViewPane = {
1016
1024
  })
1017
1025
  ]
1018
1026
  }),
1019
- /*#__PURE__*/ _jsxs(VerticalStack, {
1020
- gap: "1",
1027
+ /*#__PURE__*/ _jsxs(Stack, {
1028
+ gap: "xs",
1021
1029
  children: [
1022
1030
  /*#__PURE__*/ _jsx(Text, {
1023
1031
  variant: "bodySm",
@@ -1029,8 +1037,8 @@ export var DetailViewPane = {
1029
1037
  })
1030
1038
  ]
1031
1039
  }),
1032
- selectedOrder.shipping.tracking && /*#__PURE__*/ _jsxs(VerticalStack, {
1033
- gap: "1",
1040
+ selectedOrder.shipping.tracking && /*#__PURE__*/ _jsxs(Stack, {
1041
+ gap: "xs",
1034
1042
  children: [
1035
1043
  /*#__PURE__*/ _jsx(Text, {
1036
1044
  variant: "bodySm",
@@ -1053,8 +1061,9 @@ export var DetailViewPane = {
1053
1061
  /*#__PURE__*/ _jsx(Pane.Footer, {
1054
1062
  children: /*#__PURE__*/ _jsx(Box, {
1055
1063
  padding: "4",
1056
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
1057
- gap: "4",
1064
+ children: /*#__PURE__*/ _jsxs(Stack, {
1065
+ horizontal: true,
1066
+ gap: "md",
1058
1067
  align: "end",
1059
1068
  children: [
1060
1069
  /*#__PURE__*/ _jsx(Button, {
@@ -1097,8 +1106,8 @@ export var StackedPanes = {
1097
1106
  /*#__PURE__*/ _jsx(Card, {
1098
1107
  title: "Multiple Panes Example",
1099
1108
  padded: true,
1100
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
1101
- gap: "4",
1109
+ children: /*#__PURE__*/ _jsxs(Stack, {
1110
+ gap: "md",
1102
1111
  children: [
1103
1112
  /*#__PURE__*/ _jsx(Text, {
1104
1113
  children: "This example demonstrates how panes can be stacked when multiple levels of detail are needed."
@@ -1128,14 +1137,14 @@ export var StackedPanes = {
1128
1137
  /*#__PURE__*/ _jsx(Pane.Content, {
1129
1138
  children: /*#__PURE__*/ _jsx(Box, {
1130
1139
  padding: "4",
1131
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
1132
- gap: "4",
1140
+ children: /*#__PURE__*/ _jsxs(Stack, {
1141
+ gap: "md",
1133
1142
  children: [
1134
1143
  /*#__PURE__*/ _jsx(Text, {
1135
1144
  children: "Select a category to view its details in a nested pane."
1136
1145
  }),
1137
- /*#__PURE__*/ _jsx(VerticalStack, {
1138
- gap: "2",
1146
+ /*#__PURE__*/ _jsx(Stack, {
1147
+ gap: "sm",
1139
1148
  children: [
1140
1149
  'Electronics',
1141
1150
  'Clothing',
@@ -1147,7 +1156,8 @@ export var StackedPanes = {
1147
1156
  borderWidth: "1",
1148
1157
  borderColor: "border",
1149
1158
  borderRadius: "1",
1150
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
1159
+ children: /*#__PURE__*/ _jsxs(Stack, {
1160
+ horizontal: true,
1151
1161
  align: "space-between",
1152
1162
  blockAlign: "center",
1153
1163
  children: [
@@ -1173,8 +1183,9 @@ export var StackedPanes = {
1173
1183
  /*#__PURE__*/ _jsx(Pane.Footer, {
1174
1184
  children: /*#__PURE__*/ _jsx(Box, {
1175
1185
  padding: "4",
1176
- children: /*#__PURE__*/ _jsx(HorizontalStack, {
1177
- gap: "4",
1186
+ children: /*#__PURE__*/ _jsx(Stack, {
1187
+ horizontal: true,
1188
+ gap: "md",
1178
1189
  align: "end",
1179
1190
  children: /*#__PURE__*/ _jsx(Button, {
1180
1191
  onClick: function() {
@@ -1202,17 +1213,17 @@ export var StackedPanes = {
1202
1213
  /*#__PURE__*/ _jsx(Pane.Content, {
1203
1214
  children: /*#__PURE__*/ _jsx(Box, {
1204
1215
  padding: "4",
1205
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
1206
- gap: "4",
1216
+ children: /*#__PURE__*/ _jsxs(Stack, {
1217
+ gap: "md",
1207
1218
  children: [
1208
1219
  /*#__PURE__*/ _jsx(Text, {
1209
1220
  children: "This is a nested pane showing detailed information about the selected category."
1210
1221
  }),
1211
- /*#__PURE__*/ _jsxs(VerticalStack, {
1212
- gap: "4",
1222
+ /*#__PURE__*/ _jsxs(Stack, {
1223
+ gap: "md",
1213
1224
  children: [
1214
- /*#__PURE__*/ _jsxs(VerticalStack, {
1215
- gap: "2",
1225
+ /*#__PURE__*/ _jsxs(Stack, {
1226
+ gap: "sm",
1216
1227
  children: [
1217
1228
  /*#__PURE__*/ _jsx(Text, {
1218
1229
  variant: "headingSm",
@@ -1223,8 +1234,8 @@ export var StackedPanes = {
1223
1234
  })
1224
1235
  ]
1225
1236
  }),
1226
- /*#__PURE__*/ _jsxs(VerticalStack, {
1227
- gap: "2",
1237
+ /*#__PURE__*/ _jsxs(Stack, {
1238
+ gap: "sm",
1228
1239
  children: [
1229
1240
  /*#__PURE__*/ _jsx(Text, {
1230
1241
  variant: "headingSm",
@@ -1235,8 +1246,8 @@ export var StackedPanes = {
1235
1246
  })
1236
1247
  ]
1237
1248
  }),
1238
- /*#__PURE__*/ _jsxs(VerticalStack, {
1239
- gap: "2",
1249
+ /*#__PURE__*/ _jsxs(Stack, {
1250
+ gap: "sm",
1240
1251
  children: [
1241
1252
  /*#__PURE__*/ _jsx(Text, {
1242
1253
  variant: "headingSm",
@@ -1247,15 +1258,15 @@ export var StackedPanes = {
1247
1258
  })
1248
1259
  ]
1249
1260
  }),
1250
- /*#__PURE__*/ _jsxs(VerticalStack, {
1251
- gap: "2",
1261
+ /*#__PURE__*/ _jsxs(Stack, {
1262
+ gap: "sm",
1252
1263
  children: [
1253
1264
  /*#__PURE__*/ _jsx(Text, {
1254
1265
  variant: "headingSm",
1255
1266
  children: "Popular Items"
1256
1267
  }),
1257
- /*#__PURE__*/ _jsxs(VerticalStack, {
1258
- gap: "1",
1268
+ /*#__PURE__*/ _jsxs(Stack, {
1269
+ gap: "xs",
1259
1270
  children: [
1260
1271
  /*#__PURE__*/ _jsx(Text, {
1261
1272
  children: "• Smartphones"
@@ -1282,8 +1293,9 @@ export var StackedPanes = {
1282
1293
  /*#__PURE__*/ _jsx(Pane.Footer, {
1283
1294
  children: /*#__PURE__*/ _jsx(Box, {
1284
1295
  padding: "4",
1285
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
1286
- gap: "4",
1296
+ children: /*#__PURE__*/ _jsxs(Stack, {
1297
+ horizontal: true,
1298
+ gap: "md",
1287
1299
  align: "end",
1288
1300
  children: [
1289
1301
  /*#__PURE__*/ _jsx(Button, {
@@ -1325,8 +1337,8 @@ export var CustomLayout = {
1325
1337
  /*#__PURE__*/ _jsx(Card, {
1326
1338
  title: "Pane Customization",
1327
1339
  padded: true,
1328
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
1329
- gap: "4",
1340
+ children: /*#__PURE__*/ _jsxs(Stack, {
1341
+ gap: "md",
1330
1342
  children: [
1331
1343
  /*#__PURE__*/ _jsx(Text, {
1332
1344
  children: "This example shows a pane with custom header layout (no borders) and footer styling."
@@ -1351,8 +1363,9 @@ export var CustomLayout = {
1351
1363
  bottomBorder: false,
1352
1364
  showCloseButton: false,
1353
1365
  children: [
1354
- /*#__PURE__*/ _jsxs(HorizontalStack, {
1355
- gap: "2",
1366
+ /*#__PURE__*/ _jsxs(Stack, {
1367
+ horizontal: true,
1368
+ gap: "sm",
1356
1369
  blockAlign: "center",
1357
1370
  children: [
1358
1371
  /*#__PURE__*/ _jsx(Box, {
@@ -1387,8 +1400,8 @@ export var CustomLayout = {
1387
1400
  height: '100%'
1388
1401
  },
1389
1402
  children: [
1390
- /*#__PURE__*/ _jsxs(VerticalStack, {
1391
- gap: "4",
1403
+ /*#__PURE__*/ _jsxs(Stack, {
1404
+ gap: "md",
1392
1405
  style: {
1393
1406
  flex: 1
1394
1407
  },
@@ -1435,8 +1448,9 @@ export var CustomLayout = {
1435
1448
  })
1436
1449
  ]
1437
1450
  }),
1438
- /*#__PURE__*/ _jsxs(HorizontalStack, {
1439
- gap: "2",
1451
+ /*#__PURE__*/ _jsxs(Stack, {
1452
+ horizontal: true,
1453
+ gap: "sm",
1440
1454
  children: [
1441
1455
  /*#__PURE__*/ _jsx("input", {
1442
1456
  type: "text",
@@ -1462,8 +1476,9 @@ export var CustomLayout = {
1462
1476
  topBorder: false,
1463
1477
  children: /*#__PURE__*/ _jsx(Box, {
1464
1478
  padding: "4",
1465
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
1466
- gap: "4",
1479
+ children: /*#__PURE__*/ _jsxs(Stack, {
1480
+ horizontal: true,
1481
+ gap: "md",
1467
1482
  align: "space-between",
1468
1483
  blockAlign: "center",
1469
1484
  children: [
package/dist/esm/stories/Popover.stories.js CHANGED
@@ -47,13 +47,12 @@ function _unsupported_iterable_to_array(o, minLen) {
47
47
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
48
48
  import { useState } from "react";
49
49
  import { transformStorySource } from "../utilities/transformers.js";
50
+ import Stack from "../components/Stack.js";
50
51
  import Popover from "../components/Popover.js";
51
52
  import Button from "../components/Button.js";
52
53
  import ActionList from "../components/ActionList.js";
53
54
  import Text from "../components/Text.js";
54
55
  import TextField from "../components/TextField.js";
55
- import HorizontalStack from "../components/HorizontalStack.js";
56
- import VerticalStack from "../components/VerticalStack.js";
57
56
  import { MobileHorizontalDotsMajor } from "@shopify/polaris-icons";
58
57
  export default {
59
58
  title: "Litho/Popover",
@@ -211,8 +210,9 @@ export var Alignments = {
211
210
  var _useState = _sliced_to_array(useState(false), 2), leftActive = _useState[0], setLeftActive = _useState[1];
212
211
  var _useState1 = _sliced_to_array(useState(false), 2), centerActive = _useState1[0], setCenterActive = _useState1[1];
213
212
  var _useState2 = _sliced_to_array(useState(false), 2), rightActive = _useState2[0], setRightActive = _useState2[1];
214
- return /*#__PURE__*/ _jsxs(HorizontalStack, {
215
- gap: "4",
213
+ return /*#__PURE__*/ _jsxs(Stack, {
214
+ horizontal: true,
215
+ gap: "md",
216
216
  children: [
217
217
  /*#__PURE__*/ _jsx(Popover, {
218
218
  active: leftActive,
@@ -506,7 +506,8 @@ export var CustomContent = {
506
506
  gap: "0.75rem"
507
507
  },
508
508
  children: [
509
- /*#__PURE__*/ _jsxs(HorizontalStack, {
509
+ /*#__PURE__*/ _jsxs(Stack, {
510
+ horizontal: true,
510
511
  align: "space-between",
511
512
  children: [
512
513
  /*#__PURE__*/ _jsx(Text, {
@@ -518,7 +519,8 @@ export var CustomContent = {
518
519
  })
519
520
  ]
520
521
  }),
521
- /*#__PURE__*/ _jsxs(HorizontalStack, {
522
+ /*#__PURE__*/ _jsxs(Stack, {
523
+ horizontal: true,
522
524
  align: "space-between",
523
525
  children: [
524
526
  /*#__PURE__*/ _jsx(Text, {
@@ -530,7 +532,8 @@ export var CustomContent = {
530
532
  })
531
533
  ]
532
534
  }),
533
- /*#__PURE__*/ _jsxs(HorizontalStack, {
535
+ /*#__PURE__*/ _jsxs(Stack, {
536
+ horizontal: true,
534
537
  align: "space-between",
535
538
  children: [
536
539
  /*#__PURE__*/ _jsx(Text, {
@@ -542,7 +545,8 @@ export var CustomContent = {
542
545
  })
543
546
  ]
544
547
  }),
545
- /*#__PURE__*/ _jsxs(HorizontalStack, {
548
+ /*#__PURE__*/ _jsxs(Stack, {
549
+ horizontal: true,
546
550
  align: "space-between",
547
551
  children: [
548
552
  /*#__PURE__*/ _jsx(Text, {