@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/ChoiceList.stories.js CHANGED
@@ -50,8 +50,7 @@ var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.j
50
50
  var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
51
51
  var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
52
52
  var _transformers = require("../utilities/transformers.js");
53
- var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
54
- var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
53
+ var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
55
54
  var _Badge = /*#__PURE__*/ _interop_require_default(require("../components/Badge.js"));
56
55
  function _array_like_to_array(arr, len) {
57
56
  if (len == null || len > arr.length) len = arr.length;
@@ -533,15 +532,16 @@ var ProductCategories = {
533
532
  onChange: setSelectedCategories,
534
533
  allowMultiple: true
535
534
  }),
536
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
537
- gap: "1",
535
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
536
+ gap: "xs",
538
537
  children: [
539
538
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
540
539
  variant: "headingSm",
541
540
  children: "Selected: "
542
541
  }),
543
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_HorizontalStack.default, {
544
- gap: "1",
542
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
543
+ horizontal: true,
544
+ gap: "xs",
545
545
  children: selectedCategories.map(function(category) {
546
546
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Badge.default, {
547
547
  children: category
@@ -600,8 +600,8 @@ var SubscriptionPlan = {
600
600
  }),
601
601
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default.Section, {
602
602
  subdued: true,
603
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
604
- gap: "2",
603
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
604
+ gap: "sm",
605
605
  children: [
606
606
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
607
607
  variant: "headingSm",
@@ -640,8 +640,8 @@ var SurveyForm = {
640
640
  title: "Product Feedback Survey",
641
641
  children: [
642
642
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default.Section, {
643
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
644
- gap: "2",
643
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
644
+ gap: "sm",
645
645
  children: [
646
646
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChoiceList.default, {
647
647
  title: "How satisfied are you with our product?",
@@ -740,8 +740,9 @@ var SurveyForm = {
740
740
  }),
741
741
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default.Section, {
742
742
  subdued: true,
743
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
744
- gap: "1",
743
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
744
+ horizontal: true,
745
+ gap: "xs",
745
746
  children: [
746
747
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
747
748
  primary: true,
package/dist/cjs/stories/Collapsible.stories.js CHANGED
@@ -34,12 +34,11 @@ _export(exports, {
34
34
  var _jsxruntime = require("react/jsx-runtime");
35
35
  var _react = require("react");
36
36
  var _Collapsible = /*#__PURE__*/ _interop_require_default(require("../components/Collapsible.js"));
37
+ var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
37
38
  var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
38
39
  var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
39
40
  var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
40
41
  var _List = /*#__PURE__*/ _interop_require_default(require("../components/List.js"));
41
- var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
42
- var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
43
42
  var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
44
43
  var _transformers = require("../utilities/transformers.js");
45
44
  function _array_like_to_array(arr, len) {
@@ -181,8 +180,8 @@ var _default = {
181
180
  var Default = {
182
181
  render: function(args) {
183
182
  var _useState = _sliced_to_array((0, _react.useState)(args.open), 2), open = _useState[0], setOpen = _useState[1];
184
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
185
- gap: "4",
183
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
184
+ gap: "md",
186
185
  children: [
187
186
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Button.default, {
188
187
  onClick: function() {
@@ -225,7 +224,8 @@ var WithCard = {
225
224
  padding: "4",
226
225
  borderBlockEndWidth: "025",
227
226
  borderColor: "border",
228
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
227
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
228
+ horizontal: true,
229
229
  align: "space-between",
230
230
  blockAlign: "center",
231
231
  children: [
@@ -324,8 +324,8 @@ var FAQ = {
324
324
  }
325
325
  setOpenItems(newOpenItems);
326
326
  };
327
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
328
- gap: "4",
327
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
328
+ gap: "md",
329
329
  children: [
330
330
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
331
331
  paddingBlockEnd: "4",
@@ -421,8 +421,8 @@ var AccordionGroup = {
421
421
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
422
422
  title: "Product Information",
423
423
  padded: true,
424
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
425
- gap: "2",
424
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
425
+ gap: "sm",
426
426
  children: sections.map(function(section) {
427
427
  return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Box.default, {
428
428
  children: [
@@ -569,8 +569,9 @@ var NestedCollapsible = {
569
569
  borderStyle: 'dashed'
570
570
  },
571
571
  children: [
572
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
573
- gap: "2",
572
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
573
+ horizontal: true,
574
+ gap: "sm",
574
575
  blockAlign: "center",
575
576
  paddingBlockEnd: "1",
576
577
  children: [
@@ -582,8 +583,9 @@ var NestedCollapsible = {
582
583
  })
583
584
  ]
584
585
  }),
585
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
586
- gap: "2",
586
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
587
+ horizontal: true,
588
+ gap: "sm",
587
589
  blockAlign: "center",
588
590
  paddingBlockEnd: "1",
589
591
  children: [
@@ -595,8 +597,9 @@ var NestedCollapsible = {
595
597
  })
596
598
  ]
597
599
  }),
598
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
599
- gap: "2",
600
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
601
+ horizontal: true,
602
+ gap: "sm",
600
603
  blockAlign: "center",
601
604
  paddingBlockEnd: "1",
602
605
  children: [
@@ -641,8 +644,9 @@ var NestedCollapsible = {
641
644
  borderStyle: 'dashed'
642
645
  },
643
646
  children: [
644
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
645
- gap: "2",
647
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
648
+ horizontal: true,
649
+ gap: "sm",
646
650
  blockAlign: "center",
647
651
  paddingBlockEnd: "1",
648
652
  children: [
@@ -654,8 +658,9 @@ var NestedCollapsible = {
654
658
  })
655
659
  ]
656
660
  }),
657
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
658
- gap: "2",
661
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
662
+ horizontal: true,
663
+ gap: "sm",
659
664
  blockAlign: "center",
660
665
  paddingBlockEnd: "1",
661
666
  children: [
@@ -670,8 +675,9 @@ var NestedCollapsible = {
670
675
  ]
671
676
  })
672
677
  }),
673
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
674
- gap: "2",
678
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
679
+ horizontal: true,
680
+ gap: "sm",
675
681
  blockAlign: "center",
676
682
  paddingBlockEnd: "1",
677
683
  children: [
@@ -719,18 +725,19 @@ var AdvancedSettings = {
719
725
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
720
726
  title: "Application Settings",
721
727
  padded: true,
722
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
723
- gap: "6",
728
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
729
+ gap: "md",
724
730
  children: [
725
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
726
- gap: "4",
731
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
732
+ gap: "md",
727
733
  children: [
728
734
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
729
735
  variant: "headingSm",
730
736
  children: "Basic Settings"
731
737
  }),
732
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
733
- gap: "2",
738
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
739
+ horizontal: true,
740
+ gap: "sm",
734
741
  blockAlign: "center",
735
742
  as: "label",
736
743
  children: [
@@ -746,8 +753,9 @@ var AdvancedSettings = {
746
753
  })
747
754
  ]
748
755
  }),
749
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
750
- gap: "2",
756
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
757
+ horizontal: true,
758
+ gap: "sm",
751
759
  blockAlign: "center",
752
760
  as: "label",
753
761
  children: [
@@ -797,15 +805,16 @@ var AdvancedSettings = {
797
805
  padding: "4",
798
806
  background: "subdued",
799
807
  borderRadius: "default",
800
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
801
- gap: "4",
808
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
809
+ gap: "md",
802
810
  children: [
803
811
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
804
812
  tone: "subdued",
805
813
  children: "⚠️ Caution: These settings can affect application performance"
806
814
  }),
807
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
808
- gap: "2",
815
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
816
+ horizontal: true,
817
+ gap: "sm",
809
818
  blockAlign: "center",
810
819
  as: "label",
811
820
  children: [
@@ -821,8 +830,9 @@ var AdvancedSettings = {
821
830
  })
822
831
  ]
823
832
  }),
824
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
825
- gap: "2",
833
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
834
+ horizontal: true,
835
+ gap: "sm",
826
836
  blockAlign: "center",
827
837
  children: [
828
838
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -843,8 +853,9 @@ var AdvancedSettings = {
843
853
  })
844
854
  ]
845
855
  }),
846
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
847
- gap: "2",
856
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
857
+ horizontal: true,
858
+ gap: "sm",
848
859
  blockAlign: "center",
849
860
  children: [
850
861
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -875,8 +886,9 @@ var AdvancedSettings = {
875
886
  paddingBlockStart: "4",
876
887
  borderBlockStartWidth: "025",
877
888
  borderColor: "border",
878
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
879
- gap: "2",
889
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
890
+ horizontal: true,
891
+ gap: "sm",
880
892
  children: [
881
893
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
882
894
  primary: true,
package/dist/cjs/stories/ColorField.stories.js CHANGED
@@ -37,11 +37,10 @@ _export(exports, {
37
37
  var _jsxruntime = require("react/jsx-runtime");
38
38
  var _react = require("react");
39
39
  var _ColorField = /*#__PURE__*/ _interop_require_default(require("../components/ColorField.js"));
40
+ var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
40
41
  var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
41
42
  var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
42
43
  var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
43
- var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
44
- var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
45
44
  var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
46
45
  var _Grid = /*#__PURE__*/ _interop_require_default(require("../components/Grid.js"));
47
46
  var _transformers = require("../utilities/transformers.js");
@@ -285,8 +284,8 @@ var MultipleColorFields = {
285
284
  padded: true,
286
285
  maxInlineSize: "400",
287
286
  children: [
288
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
289
- gap: "6",
287
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
288
+ gap: "md",
290
289
  children: [
291
290
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_ColorField.default, {
292
291
  label: "Primary Color",
@@ -399,16 +398,17 @@ var DesignSystemColors = {
399
398
  info: "#17a2b8"
400
399
  });
401
400
  };
402
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
403
- gap: "8",
401
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
402
+ horizontal: true,
403
+ gap: "lg",
404
404
  children: [
405
405
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Card.default, {
406
406
  title: "Design System Colors",
407
407
  padded: true,
408
408
  maxInlineSize: "350",
409
409
  children: [
410
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
411
- gap: "6",
410
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
411
+ gap: "md",
412
412
  children: [
413
413
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_ColorField.default, {
414
414
  label: "Primary",
@@ -468,8 +468,8 @@ var DesignSystemColors = {
468
468
  style: {
469
469
  flex: 1
470
470
  },
471
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
472
- gap: "4",
471
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
472
+ gap: "md",
473
473
  children: [
474
474
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
475
475
  padding: "4",
@@ -609,16 +609,17 @@ var ProductCustomization = {
609
609
  return _object_spread_props(_object_spread({}, prev), _define_property({}, part, color));
610
610
  });
611
611
  };
612
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
613
- gap: "8",
612
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
613
+ horizontal: true,
614
+ gap: "lg",
614
615
  children: [
615
616
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Card.default, {
616
617
  title: "Customize Your Sunglasses",
617
618
  padded: true,
618
619
  maxInlineSize: "300",
619
620
  children: [
620
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
621
- gap: "6",
621
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
622
+ gap: "md",
622
623
  children: [
623
624
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_ColorField.default, {
624
625
  label: "Frame Color",
@@ -676,8 +677,8 @@ var ProductCustomization = {
676
677
  }),
677
678
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
678
679
  paddingBlockStart: "2",
679
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
680
- gap: "1",
680
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
681
+ gap: "xs",
681
682
  children: [
682
683
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
683
684
  variant: "bodySm",
@@ -714,7 +715,8 @@ var ProductCustomization = {
714
715
  flex: 1
715
716
  },
716
717
  children: [
717
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_HorizontalStack.default, {
718
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
719
+ horizontal: true,
718
720
  align: "center",
719
721
  blockAlign: "center",
720
722
  style: {
@@ -839,7 +841,8 @@ var ResponsiveBehavior = {
839
841
  onChange: setColor
840
842
  })
841
843
  }),
842
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_HorizontalStack.default, {
844
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
845
+ horizontal: true,
843
846
  align: "center",
844
847
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ColorField.default, {
845
848
  label: "Center Positioned",
@@ -848,7 +851,8 @@ var ResponsiveBehavior = {
848
851
  onChange: setColor
849
852
  })
850
853
  }),
851
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_HorizontalStack.default, {
854
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
855
+ horizontal: true,
852
856
  align: "end",
853
857
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ColorField.default, {
854
858
  label: "Right Aligned",
package/dist/cjs/stories/ContextualSaveBar.stories.js CHANGED
@@ -28,6 +28,7 @@ _export(exports, {
28
28
  var _jsxruntime = require("react/jsx-runtime");
29
29
  var _react = require("react");
30
30
  var _ContextualSaveBar = /*#__PURE__*/ _interop_require_default(require("../components/ContextualSaveBar.js"));
31
+ var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
31
32
  var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
32
33
  var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
33
34
  var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
@@ -35,8 +36,6 @@ var _TextField = /*#__PURE__*/ _interop_require_default(require("../components/T
35
36
  var _Page = /*#__PURE__*/ _interop_require_default(require("../components/Page.js"));
36
37
  var _Frame = /*#__PURE__*/ _interop_require_default(require("../components/Frame.js"));
37
38
  var _AppProvider = /*#__PURE__*/ _interop_require_default(require("../components/AppProvider.js"));
38
- var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
39
- var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
40
39
  var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
41
40
  var _transformers = require("../utilities/transformers.js");
42
41
  function _array_like_to_array(arr, len) {
@@ -375,8 +374,8 @@ var Default = {
375
374
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
376
375
  title: "Product Information",
377
376
  padded: true,
378
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
379
- gap: "6",
377
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
378
+ gap: "md",
380
379
  children: [
381
380
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
382
381
  label: "Product Title",
@@ -534,19 +533,20 @@ var CustomMessages = {
534
533
  content: "Discard changes"
535
534
  }
536
535
  }),
537
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
538
- gap: "8",
536
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
537
+ gap: "lg",
539
538
  children: scenarios.map(function(scenario) {
540
539
  return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Card.default, {
541
540
  title: scenario.title,
542
541
  padded: true,
543
542
  children: [
544
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
545
- gap: "4",
543
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
544
+ gap: "md",
546
545
  children: scenario.fields.map(function(field) {
547
546
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
548
- children: field.type === "checkbox" ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
549
- gap: "2",
547
+ children: field.type === "checkbox" ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
548
+ horizontal: true,
549
+ gap: "sm",
550
550
  blockAlign: "center",
551
551
  as: "label",
552
552
  children: [
@@ -742,8 +742,9 @@ var LoadingStates = {
742
742
  }),
743
743
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
744
744
  paddingBlockStart: "2",
745
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
746
- gap: "4",
745
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
746
+ horizontal: true,
747
+ gap: "md",
747
748
  children: [
748
749
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
749
750
  onClick: function() {
@@ -842,8 +843,8 @@ var DisabledActions = {
842
843
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
843
844
  title: "Article Creation",
844
845
  padded: true,
845
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
846
- gap: "6",
846
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
847
+ gap: "md",
847
848
  children: [
848
849
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
849
850
  label: "Title *",
package/dist/cjs/stories/DatePicker.stories.js CHANGED
@@ -43,9 +43,9 @@ _export(exports, {
43
43
  var _jsxruntime = require("react/jsx-runtime");
44
44
  var _react = require("react");
45
45
  var _DatePicker = /*#__PURE__*/ _interop_require_default(require("../components/DatePicker.js"));
46
+ var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
46
47
  var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
47
48
  var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
48
- var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
49
49
  var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
50
50
  var _transformers = require("../utilities/transformers.js");
51
51
  function _array_like_to_array(arr, len) {
@@ -443,8 +443,8 @@ var FormExample = {
443
443
  return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
444
444
  title: "Event Planning Form",
445
445
  padded: true,
446
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
447
- gap: "6",
446
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
447
+ gap: "md",
448
448
  children: [
449
449
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_DatePicker.default, {
450
450
  label: "Planning start date",