@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/LayoutSection.stories.js CHANGED
@@ -52,14 +52,13 @@ 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 LayoutSection from "../components/LayoutSection.js";
56
57
  import Layout from "../components/Layout.js";
57
58
  import Text from "../components/Text.js";
58
59
  import Card from "../components/Card.js";
59
60
  import Button from "../components/Button.js";
60
61
  import Page from "../components/Page.js";
61
- import VerticalStack from "../components/VerticalStack.js";
62
- import HorizontalStack from "../components/HorizontalStack.js";
63
62
  import Box from "../components/Box.js";
64
63
  import Grid from "../components/Grid.js";
65
64
  export default {
@@ -131,8 +130,8 @@ export var WithSidebar = {
131
130
  children: /*#__PURE__*/ _jsx(Card, {
132
131
  title: "Main Content",
133
132
  padded: true,
134
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
135
- gap: "4",
133
+ children: /*#__PURE__*/ _jsxs(Stack, {
134
+ gap: "md",
136
135
  children: [
137
136
  /*#__PURE__*/ _jsx(Text, {
138
137
  children: "This is the main content area. It automatically adjusts its width when a sidebar is present."
@@ -143,8 +142,9 @@ export var WithSidebar = {
143
142
  /*#__PURE__*/ _jsx(Text, {
144
143
  children: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
145
144
  }),
146
- /*#__PURE__*/ _jsxs(HorizontalStack, {
147
- gap: "4",
145
+ /*#__PURE__*/ _jsxs(Stack, {
146
+ horizontal: true,
147
+ gap: "md",
148
148
  children: [
149
149
  /*#__PURE__*/ _jsx(Button, {
150
150
  primary: true,
@@ -164,15 +164,15 @@ export var WithSidebar = {
164
164
  children: /*#__PURE__*/ _jsx(Card, {
165
165
  title: "Sidebar",
166
166
  padded: true,
167
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
168
- gap: "4",
167
+ children: /*#__PURE__*/ _jsxs(Stack, {
168
+ gap: "md",
169
169
  children: [
170
170
  /*#__PURE__*/ _jsx(Text, {
171
171
  variant: "headingSm",
172
172
  children: "Navigation"
173
173
  }),
174
- /*#__PURE__*/ _jsxs(VerticalStack, {
175
- gap: "2",
174
+ /*#__PURE__*/ _jsxs(Stack, {
175
+ gap: "sm",
176
176
  children: [
177
177
  /*#__PURE__*/ _jsx(Button, {
178
178
  size: "slim",
@@ -205,15 +205,15 @@ export var WithSidebar = {
205
205
  padding: "4",
206
206
  background: "bg-surface-neutral-subdued",
207
207
  borderRadius: "1",
208
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
209
- gap: "2",
208
+ children: /*#__PURE__*/ _jsxs(Stack, {
209
+ gap: "sm",
210
210
  children: [
211
211
  /*#__PURE__*/ _jsx(Text, {
212
212
  variant: "headingSm",
213
213
  children: "Quick Stats"
214
214
  }),
215
- /*#__PURE__*/ _jsxs(VerticalStack, {
216
- gap: "1",
215
+ /*#__PURE__*/ _jsxs(Stack, {
216
+ gap: "xs",
217
217
  children: [
218
218
  /*#__PURE__*/ _jsx(Text, {
219
219
  variant: "bodySm",
@@ -258,8 +258,8 @@ export var SlimSidebar = {
258
258
  children: /*#__PURE__*/ _jsx(Card, {
259
259
  title: "Article Content",
260
260
  padded: true,
261
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
262
- gap: "6",
261
+ children: /*#__PURE__*/ _jsxs(Stack, {
262
+ gap: "md",
263
263
  children: [
264
264
  /*#__PURE__*/ _jsx(Text, {
265
265
  variant: "headingLg",
@@ -288,8 +288,8 @@ export var SlimSidebar = {
288
288
  borderWidth: "1",
289
289
  borderColor: "border",
290
290
  borderRadius: "1",
291
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
292
- gap: "2",
291
+ children: /*#__PURE__*/ _jsxs(Stack, {
292
+ gap: "sm",
293
293
  children: [
294
294
  /*#__PURE__*/ _jsx(Text, {
295
295
  variant: "headingSm",
@@ -307,8 +307,8 @@ export var SlimSidebar = {
307
307
  borderWidth: "1",
308
308
  borderColor: "border",
309
309
  borderRadius: "1",
310
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
311
- gap: "2",
310
+ children: /*#__PURE__*/ _jsxs(Stack, {
311
+ gap: "sm",
312
312
  children: [
313
313
  /*#__PURE__*/ _jsx(Text, {
314
314
  variant: "headingSm",
@@ -326,8 +326,8 @@ export var SlimSidebar = {
326
326
  borderWidth: "1",
327
327
  borderColor: "border",
328
328
  borderRadius: "1",
329
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
330
- gap: "2",
329
+ children: /*#__PURE__*/ _jsxs(Stack, {
330
+ gap: "sm",
331
331
  children: [
332
332
  /*#__PURE__*/ _jsx(Text, {
333
333
  variant: "headingSm",
@@ -352,19 +352,19 @@ export var SlimSidebar = {
352
352
  children: /*#__PURE__*/ _jsx(Card, {
353
353
  title: "Tools",
354
354
  padded: true,
355
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
356
- gap: "4",
355
+ children: /*#__PURE__*/ _jsxs(Stack, {
356
+ gap: "md",
357
357
  children: [
358
358
  /*#__PURE__*/ _jsx("div", {
359
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
360
- gap: "2",
359
+ children: /*#__PURE__*/ _jsxs(Stack, {
360
+ gap: "sm",
361
361
  children: [
362
362
  /*#__PURE__*/ _jsx(Text, {
363
363
  variant: "headingSm",
364
364
  children: "Actions"
365
365
  }),
366
- /*#__PURE__*/ _jsxs(VerticalStack, {
367
- gap: "2",
366
+ /*#__PURE__*/ _jsxs(Stack, {
367
+ gap: "sm",
368
368
  children: [
369
369
  /*#__PURE__*/ _jsx(Button, {
370
370
  size: "slim",
@@ -387,15 +387,15 @@ export var SlimSidebar = {
387
387
  borderBlockStartWidth: "1",
388
388
  borderColor: "border",
389
389
  paddingBlockStart: "4",
390
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
391
- gap: "2",
390
+ children: /*#__PURE__*/ _jsxs(Stack, {
391
+ gap: "sm",
392
392
  children: [
393
393
  /*#__PURE__*/ _jsx(Text, {
394
394
  variant: "headingSm",
395
395
  children: "Info"
396
396
  }),
397
- /*#__PURE__*/ _jsxs(VerticalStack, {
398
- gap: "1",
397
+ /*#__PURE__*/ _jsxs(Stack, {
398
+ gap: "xs",
399
399
  children: [
400
400
  /*#__PURE__*/ _jsx(Text, {
401
401
  variant: "caption",
@@ -440,8 +440,8 @@ export var StickySection = {
440
440
  children: /*#__PURE__*/ _jsx(Card, {
441
441
  title: "Long Article",
442
442
  padded: true,
443
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
444
- gap: "6",
443
+ children: /*#__PURE__*/ _jsxs(Stack, {
444
+ gap: "md",
445
445
  children: [
446
446
  /*#__PURE__*/ _jsx(Text, {
447
447
  variant: "headingLg",
@@ -482,15 +482,15 @@ export var StickySection = {
482
482
  children: /*#__PURE__*/ _jsx(Card, {
483
483
  title: "Sticky Navigation",
484
484
  padded: true,
485
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
486
- gap: "4",
485
+ children: /*#__PURE__*/ _jsxs(Stack, {
486
+ gap: "md",
487
487
  children: [
488
488
  /*#__PURE__*/ _jsx(Text, {
489
489
  variant: "headingSm",
490
490
  children: "Table of Contents"
491
491
  }),
492
- /*#__PURE__*/ _jsx(VerticalStack, {
493
- gap: "2",
492
+ /*#__PURE__*/ _jsx(Stack, {
493
+ gap: "sm",
494
494
  children: Array.from({
495
495
  length: 10
496
496
  }, function(_, i) {
@@ -515,8 +515,8 @@ export var StickySection = {
515
515
  paddingBlockStart: "4",
516
516
  borderBlockStartWidth: "1",
517
517
  borderColor: "border",
518
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
519
- gap: "2",
518
+ children: /*#__PURE__*/ _jsxs(Stack, {
519
+ gap: "sm",
520
520
  children: [
521
521
  /*#__PURE__*/ _jsx(Text, {
522
522
  variant: "headingSm",
@@ -565,21 +565,21 @@ export var SettingsLayout = {
565
565
  children: /*#__PURE__*/ _jsxs(Layout, {
566
566
  children: [
567
567
  /*#__PURE__*/ _jsx(LayoutSection, {
568
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
569
- gap: "8",
568
+ children: /*#__PURE__*/ _jsxs(Stack, {
569
+ gap: "lg",
570
570
  children: [
571
571
  /*#__PURE__*/ _jsx(Card, {
572
572
  title: "Profile Information",
573
573
  padded: true,
574
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
575
- gap: "4",
574
+ children: /*#__PURE__*/ _jsxs(Stack, {
575
+ gap: "md",
576
576
  children: [
577
577
  /*#__PURE__*/ _jsxs(Grid, {
578
578
  columns: 2,
579
579
  gap: "4",
580
580
  children: [
581
- /*#__PURE__*/ _jsxs(VerticalStack, {
582
- gap: "2",
581
+ /*#__PURE__*/ _jsxs(Stack, {
582
+ gap: "sm",
583
583
  children: [
584
584
  /*#__PURE__*/ _jsx(Text, {
585
585
  variant: "bodySm",
@@ -597,8 +597,8 @@ export var SettingsLayout = {
597
597
  })
598
598
  ]
599
599
  }),
600
- /*#__PURE__*/ _jsxs(VerticalStack, {
601
- gap: "2",
600
+ /*#__PURE__*/ _jsxs(Stack, {
601
+ gap: "sm",
602
602
  children: [
603
603
  /*#__PURE__*/ _jsx(Text, {
604
604
  variant: "bodySm",
@@ -618,8 +618,8 @@ export var SettingsLayout = {
618
618
  })
619
619
  ]
620
620
  }),
621
- /*#__PURE__*/ _jsxs(VerticalStack, {
622
- gap: "2",
621
+ /*#__PURE__*/ _jsxs(Stack, {
622
+ gap: "sm",
623
623
  children: [
624
624
  /*#__PURE__*/ _jsx(Text, {
625
625
  variant: "bodySm",
@@ -643,11 +643,11 @@ export var SettingsLayout = {
643
643
  /*#__PURE__*/ _jsx(Card, {
644
644
  title: "Password & Security",
645
645
  padded: true,
646
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
647
- gap: "4",
646
+ children: /*#__PURE__*/ _jsxs(Stack, {
647
+ gap: "md",
648
648
  children: [
649
- /*#__PURE__*/ _jsxs(VerticalStack, {
650
- gap: "2",
649
+ /*#__PURE__*/ _jsxs(Stack, {
650
+ gap: "sm",
651
651
  children: [
652
652
  /*#__PURE__*/ _jsx(Text, {
653
653
  variant: "bodySm",
@@ -669,8 +669,8 @@ export var SettingsLayout = {
669
669
  columns: 2,
670
670
  gap: "4",
671
671
  children: [
672
- /*#__PURE__*/ _jsxs(VerticalStack, {
673
- gap: "2",
672
+ /*#__PURE__*/ _jsxs(Stack, {
673
+ gap: "sm",
674
674
  children: [
675
675
  /*#__PURE__*/ _jsx(Text, {
676
676
  variant: "bodySm",
@@ -688,8 +688,8 @@ export var SettingsLayout = {
688
688
  })
689
689
  ]
690
690
  }),
691
- /*#__PURE__*/ _jsxs(VerticalStack, {
692
- gap: "2",
691
+ /*#__PURE__*/ _jsxs(Stack, {
692
+ gap: "sm",
693
693
  children: [
694
694
  /*#__PURE__*/ _jsx(Text, {
695
695
  variant: "bodySm",
@@ -712,8 +712,9 @@ export var SettingsLayout = {
712
712
  ]
713
713
  })
714
714
  }),
715
- /*#__PURE__*/ _jsxs(HorizontalStack, {
716
- gap: "4",
715
+ /*#__PURE__*/ _jsxs(Stack, {
716
+ horizontal: true,
717
+ gap: "md",
717
718
  children: [
718
719
  /*#__PURE__*/ _jsx(Button, {
719
720
  primary: true,
@@ -729,14 +730,14 @@ export var SettingsLayout = {
729
730
  }),
730
731
  /*#__PURE__*/ _jsx(LayoutSection, {
731
732
  sidebar: true,
732
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
733
- gap: "4",
733
+ children: /*#__PURE__*/ _jsxs(Stack, {
734
+ gap: "md",
734
735
  children: [
735
736
  /*#__PURE__*/ _jsx(Card, {
736
737
  title: "Settings Menu",
737
738
  padded: true,
738
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
739
- gap: "2",
739
+ children: /*#__PURE__*/ _jsxs(Stack, {
740
+ gap: "sm",
740
741
  children: [
741
742
  /*#__PURE__*/ _jsx(Button, {
742
743
  size: "slim",
@@ -780,10 +781,11 @@ export var SettingsLayout = {
780
781
  /*#__PURE__*/ _jsx(Card, {
781
782
  title: "Account Status",
782
783
  padded: true,
783
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
784
- gap: "2",
784
+ children: /*#__PURE__*/ _jsxs(Stack, {
785
+ gap: "sm",
785
786
  children: [
786
- /*#__PURE__*/ _jsxs(HorizontalStack, {
787
+ /*#__PURE__*/ _jsxs(Stack, {
788
+ horizontal: true,
787
789
  align: "space-between",
788
790
  children: [
789
791
  /*#__PURE__*/ _jsx(Text, {
@@ -796,7 +798,8 @@ export var SettingsLayout = {
796
798
  })
797
799
  ]
798
800
  }),
799
- /*#__PURE__*/ _jsxs(HorizontalStack, {
801
+ /*#__PURE__*/ _jsxs(Stack, {
802
+ horizontal: true,
800
803
  align: "space-between",
801
804
  children: [
802
805
  /*#__PURE__*/ _jsx(Text, {
@@ -812,7 +815,8 @@ export var SettingsLayout = {
812
815
  })
813
816
  ]
814
817
  }),
815
- /*#__PURE__*/ _jsxs(HorizontalStack, {
818
+ /*#__PURE__*/ _jsxs(Stack, {
819
+ horizontal: true,
816
820
  align: "space-between",
817
821
  children: [
818
822
  /*#__PURE__*/ _jsx(Text, {
@@ -850,8 +854,8 @@ export var DashboardLayout = {
850
854
  children: /*#__PURE__*/ _jsxs(Layout, {
851
855
  children: [
852
856
  /*#__PURE__*/ _jsx(LayoutSection, {
853
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
854
- gap: "8",
857
+ children: /*#__PURE__*/ _jsxs(Stack, {
858
+ gap: "lg",
855
859
  children: [
856
860
  /*#__PURE__*/ _jsxs(Grid, {
857
861
  columns: {
@@ -862,8 +866,8 @@ export var DashboardLayout = {
862
866
  children: [
863
867
  /*#__PURE__*/ _jsx(Card, {
864
868
  padded: true,
865
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
866
- gap: "1",
869
+ children: /*#__PURE__*/ _jsxs(Stack, {
870
+ gap: "xs",
867
871
  inlineAlign: "center",
868
872
  children: [
869
873
  /*#__PURE__*/ _jsx(Text, {
@@ -880,8 +884,8 @@ export var DashboardLayout = {
880
884
  }),
881
885
  /*#__PURE__*/ _jsx(Card, {
882
886
  padded: true,
883
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
884
- gap: "1",
887
+ children: /*#__PURE__*/ _jsxs(Stack, {
888
+ gap: "xs",
885
889
  inlineAlign: "center",
886
890
  children: [
887
891
  /*#__PURE__*/ _jsx(Text, {
@@ -898,8 +902,8 @@ export var DashboardLayout = {
898
902
  }),
899
903
  /*#__PURE__*/ _jsx(Card, {
900
904
  padded: true,
901
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
902
- gap: "1",
905
+ children: /*#__PURE__*/ _jsxs(Stack, {
906
+ gap: "xs",
903
907
  inlineAlign: "center",
904
908
  children: [
905
909
  /*#__PURE__*/ _jsx(Text, {
@@ -919,7 +923,7 @@ export var DashboardLayout = {
919
923
  /*#__PURE__*/ _jsx(Card, {
920
924
  title: "Performance Over Time",
921
925
  padded: true,
922
- children: /*#__PURE__*/ _jsx(VerticalStack, {
926
+ children: /*#__PURE__*/ _jsx(Stack, {
923
927
  blockAlign: "center",
924
928
  inlineAlign: "center",
925
929
  as: Box,
@@ -938,8 +942,8 @@ export var DashboardLayout = {
938
942
  /*#__PURE__*/ _jsx(Card, {
939
943
  title: "Recent Activity",
940
944
  padded: true,
941
- children: /*#__PURE__*/ _jsx(VerticalStack, {
942
- gap: "2",
945
+ children: /*#__PURE__*/ _jsx(Stack, {
946
+ gap: "sm",
943
947
  children: Array.from({
944
948
  length: 5
945
949
  }, function(_, i) {
@@ -948,7 +952,8 @@ export var DashboardLayout = {
948
952
  borderWidth: "1",
949
953
  borderColor: "border",
950
954
  borderRadius: "1",
951
- children: /*#__PURE__*/ _jsxs(HorizontalStack, {
955
+ children: /*#__PURE__*/ _jsxs(Stack, {
956
+ horizontal: true,
952
957
  align: "space-between",
953
958
  children: [
954
959
  /*#__PURE__*/ _jsxs(Text, {
@@ -974,14 +979,14 @@ export var DashboardLayout = {
974
979
  /*#__PURE__*/ _jsx(LayoutSection, {
975
980
  sidebar: "slim",
976
981
  sticky: true,
977
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
978
- gap: "4",
982
+ children: /*#__PURE__*/ _jsxs(Stack, {
983
+ gap: "md",
979
984
  children: [
980
985
  /*#__PURE__*/ _jsx(Card, {
981
986
  title: "Filters",
982
987
  padded: true,
983
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
984
- gap: "2",
988
+ children: /*#__PURE__*/ _jsxs(Stack, {
989
+ gap: "sm",
985
990
  children: [
986
991
  /*#__PURE__*/ _jsx(Text, {
987
992
  variant: "bodySm",
@@ -1012,11 +1017,12 @@ export var DashboardLayout = {
1012
1017
  children: "Source"
1013
1018
  })
1014
1019
  }),
1015
- /*#__PURE__*/ _jsxs(VerticalStack, {
1016
- gap: "1",
1020
+ /*#__PURE__*/ _jsxs(Stack, {
1021
+ gap: "xs",
1017
1022
  children: [
1018
- /*#__PURE__*/ _jsxs(HorizontalStack, {
1019
- gap: "2",
1023
+ /*#__PURE__*/ _jsxs(Stack, {
1024
+ horizontal: true,
1025
+ gap: "sm",
1020
1026
  blockAlign: "center",
1021
1027
  children: [
1022
1028
  /*#__PURE__*/ _jsx("input", {
@@ -1029,8 +1035,9 @@ export var DashboardLayout = {
1029
1035
  })
1030
1036
  ]
1031
1037
  }),
1032
- /*#__PURE__*/ _jsxs(HorizontalStack, {
1033
- gap: "2",
1038
+ /*#__PURE__*/ _jsxs(Stack, {
1039
+ horizontal: true,
1040
+ gap: "sm",
1034
1041
  blockAlign: "center",
1035
1042
  children: [
1036
1043
  /*#__PURE__*/ _jsx("input", {
@@ -1043,8 +1050,9 @@ export var DashboardLayout = {
1043
1050
  })
1044
1051
  ]
1045
1052
  }),
1046
- /*#__PURE__*/ _jsxs(HorizontalStack, {
1047
- gap: "2",
1053
+ /*#__PURE__*/ _jsxs(Stack, {
1054
+ horizontal: true,
1055
+ gap: "sm",
1048
1056
  blockAlign: "center",
1049
1057
  children: [
1050
1058
  /*#__PURE__*/ _jsx("input", {
@@ -1064,8 +1072,8 @@ export var DashboardLayout = {
1064
1072
  /*#__PURE__*/ _jsx(Card, {
1065
1073
  title: "Export",
1066
1074
  padded: true,
1067
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
1068
- gap: "2",
1075
+ children: /*#__PURE__*/ _jsxs(Stack, {
1076
+ gap: "sm",
1069
1077
  children: [
1070
1078
  /*#__PURE__*/ _jsx(Button, {
1071
1079
  size: "slim",
@@ -1107,8 +1115,8 @@ export var ResponsiveBehavior = {
1107
1115
  children: /*#__PURE__*/ _jsx(Card, {
1108
1116
  title: "Main Content Area",
1109
1117
  padded: true,
1110
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
1111
- gap: "4",
1118
+ children: /*#__PURE__*/ _jsxs(Stack, {
1119
+ gap: "md",
1112
1120
  children: [
1113
1121
  /*#__PURE__*/ _jsx(Text, {
1114
1122
  children: "This layout demonstrates responsive behavior. On larger screens, you'll see the sidebar alongside this main content. On smaller screens, the layout automatically stacks vertically for better mobile experience."
@@ -1133,7 +1141,7 @@ export var ResponsiveBehavior = {
1133
1141
  padding: "4",
1134
1142
  background: "bg-surface-info-subdued",
1135
1143
  borderRadius: "1",
1136
- children: /*#__PURE__*/ _jsx(VerticalStack, {
1144
+ children: /*#__PURE__*/ _jsx(Stack, {
1137
1145
  inlineAlign: "center",
1138
1146
  children: /*#__PURE__*/ _jsxs(Text, {
1139
1147
  children: [
@@ -1155,15 +1163,15 @@ export var ResponsiveBehavior = {
1155
1163
  children: /*#__PURE__*/ _jsx(Card, {
1156
1164
  title: "Responsive Sidebar",
1157
1165
  padded: true,
1158
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
1159
- gap: "4",
1166
+ children: /*#__PURE__*/ _jsxs(Stack, {
1167
+ gap: "md",
1160
1168
  children: [
1161
1169
  /*#__PURE__*/ _jsx(Text, {
1162
1170
  variant: "headingSm",
1163
1171
  children: "Breakpoint Info"
1164
1172
  }),
1165
- /*#__PURE__*/ _jsxs(VerticalStack, {
1166
- gap: "1",
1173
+ /*#__PURE__*/ _jsxs(Stack, {
1174
+ gap: "xs",
1167
1175
  children: [
1168
1176
  /*#__PURE__*/ _jsx(Text, {
1169
1177
  variant: "bodySm",
@@ -1181,15 +1189,15 @@ export var ResponsiveBehavior = {
1181
1189
  }),
1182
1190
  /*#__PURE__*/ _jsx(Box, {
1183
1191
  paddingBlockStart: "4",
1184
- children: /*#__PURE__*/ _jsxs(VerticalStack, {
1185
- gap: "2",
1192
+ children: /*#__PURE__*/ _jsxs(Stack, {
1193
+ gap: "sm",
1186
1194
  children: [
1187
1195
  /*#__PURE__*/ _jsx(Text, {
1188
1196
  variant: "headingSm",
1189
1197
  children: "Test Actions"
1190
1198
  }),
1191
- /*#__PURE__*/ _jsxs(VerticalStack, {
1192
- gap: "2",
1199
+ /*#__PURE__*/ _jsxs(Stack, {
1200
+ gap: "sm",
1193
1201
  children: [
1194
1202
  /*#__PURE__*/ _jsx(Button, {
1195
1203
  size: "slim",
package/dist/esm/stories/Link.stories.js CHANGED
@@ -1,10 +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 Link from "../components/Link.js";
4
5
  import Text from "../components/Text.js";
5
6
  import Icon from "../components/Icon.js";
6
- import VerticalStack from "../components/VerticalStack.js";
7
- import HorizontalStack from "../components/HorizontalStack.js";
8
7
  import Box from "../components/Box.js";
9
8
  import { ExternalMinor, ChevronRightMinor } from "@shopify/polaris-icons";
10
9
  export default {
@@ -123,8 +122,8 @@ export var External = {
123
122
  };
124
123
  export var Colors = {
125
124
  render: function() {
126
- return /*#__PURE__*/ _jsxs(VerticalStack, {
127
- gap: "1",
125
+ return /*#__PURE__*/ _jsxs(Stack, {
126
+ gap: "xs",
128
127
  children: [
129
128
  /*#__PURE__*/ _jsx(Link, {
130
129
  url: "#",
@@ -213,11 +212,12 @@ export var InText = {
213
212
  };
214
213
  export var WithIcon = {
215
214
  render: function() {
216
- return /*#__PURE__*/ _jsxs(VerticalStack, {
217
- gap: "1",
215
+ return /*#__PURE__*/ _jsxs(Stack, {
216
+ gap: "xs",
218
217
  children: [
219
- /*#__PURE__*/ _jsxs(HorizontalStack, {
220
- gap: "0.25",
218
+ /*#__PURE__*/ _jsxs(Stack, {
219
+ horizontal: true,
220
+ gap: "xs",
221
221
  align: "center",
222
222
  children: [
223
223
  /*#__PURE__*/ _jsx(Link, {
@@ -233,8 +233,9 @@ export var WithIcon = {
233
233
  })
234
234
  ]
235
235
  }),
236
- /*#__PURE__*/ _jsxs(HorizontalStack, {
237
- gap: "0.25",
236
+ /*#__PURE__*/ _jsxs(Stack, {
237
+ horizontal: true,
238
+ gap: "xs",
238
239
  align: "center",
239
240
  children: [
240
241
  /*#__PURE__*/ _jsx(Link, {
@@ -349,8 +350,9 @@ export var CallToAction = {
349
350
  /*#__PURE__*/ _jsx(Text, {
350
351
  children: "Join thousands of businesses already using our platform."
351
352
  }),
352
- /*#__PURE__*/ _jsxs(HorizontalStack, {
353
- gap: "1",
353
+ /*#__PURE__*/ _jsxs(Stack, {
354
+ horizontal: true,
355
+ gap: "xs",
354
356
  align: "center",
355
357
  children: [
356
358
  /*#__PURE__*/ _jsx(Link, {