@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/LayoutSection.stories.js CHANGED
@@ -36,14 +36,13 @@ _export(exports, {
36
36
  });
37
37
  var _jsxruntime = require("react/jsx-runtime");
38
38
  var _transformers = require("../utilities/transformers.js");
39
+ var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
39
40
  var _LayoutSection = /*#__PURE__*/ _interop_require_default(require("../components/LayoutSection.js"));
40
41
  var _Layout = /*#__PURE__*/ _interop_require_default(require("../components/Layout.js"));
41
42
  var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
42
43
  var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
43
44
  var _Button = /*#__PURE__*/ _interop_require_default(require("../components/Button.js"));
44
45
  var _Page = /*#__PURE__*/ _interop_require_default(require("../components/Page.js"));
45
- var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
46
- var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
47
46
  var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
48
47
  var _Grid = /*#__PURE__*/ _interop_require_default(require("../components/Grid.js"));
49
48
  function _define_property(obj, key, value) {
@@ -172,8 +171,8 @@ var WithSidebar = {
172
171
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
173
172
  title: "Main Content",
174
173
  padded: true,
175
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
176
- gap: "4",
174
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
175
+ gap: "md",
177
176
  children: [
178
177
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
179
178
  children: "This is the main content area. It automatically adjusts its width when a sidebar is present."
@@ -184,8 +183,9 @@ var WithSidebar = {
184
183
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
185
184
  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."
186
185
  }),
187
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
188
- gap: "4",
186
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
187
+ horizontal: true,
188
+ gap: "md",
189
189
  children: [
190
190
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
191
191
  primary: true,
@@ -205,15 +205,15 @@ var WithSidebar = {
205
205
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
206
206
  title: "Sidebar",
207
207
  padded: true,
208
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
209
- gap: "4",
208
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
209
+ gap: "md",
210
210
  children: [
211
211
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
212
212
  variant: "headingSm",
213
213
  children: "Navigation"
214
214
  }),
215
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
216
- gap: "2",
215
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
216
+ gap: "sm",
217
217
  children: [
218
218
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
219
219
  size: "slim",
@@ -246,15 +246,15 @@ var WithSidebar = {
246
246
  padding: "4",
247
247
  background: "bg-surface-neutral-subdued",
248
248
  borderRadius: "1",
249
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
250
- gap: "2",
249
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
250
+ gap: "sm",
251
251
  children: [
252
252
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
253
253
  variant: "headingSm",
254
254
  children: "Quick Stats"
255
255
  }),
256
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
257
- gap: "1",
256
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
257
+ gap: "xs",
258
258
  children: [
259
259
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
260
260
  variant: "bodySm",
@@ -299,8 +299,8 @@ var SlimSidebar = {
299
299
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
300
300
  title: "Article Content",
301
301
  padded: true,
302
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
303
- gap: "6",
302
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
303
+ gap: "md",
304
304
  children: [
305
305
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
306
306
  variant: "headingLg",
@@ -329,8 +329,8 @@ var SlimSidebar = {
329
329
  borderWidth: "1",
330
330
  borderColor: "border",
331
331
  borderRadius: "1",
332
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
333
- gap: "2",
332
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
333
+ gap: "sm",
334
334
  children: [
335
335
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
336
336
  variant: "headingSm",
@@ -348,8 +348,8 @@ var SlimSidebar = {
348
348
  borderWidth: "1",
349
349
  borderColor: "border",
350
350
  borderRadius: "1",
351
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
352
- gap: "2",
351
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
352
+ gap: "sm",
353
353
  children: [
354
354
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
355
355
  variant: "headingSm",
@@ -367,8 +367,8 @@ var SlimSidebar = {
367
367
  borderWidth: "1",
368
368
  borderColor: "border",
369
369
  borderRadius: "1",
370
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
371
- gap: "2",
370
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
371
+ gap: "sm",
372
372
  children: [
373
373
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
374
374
  variant: "headingSm",
@@ -393,19 +393,19 @@ var SlimSidebar = {
393
393
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
394
394
  title: "Tools",
395
395
  padded: true,
396
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
397
- gap: "4",
396
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
397
+ gap: "md",
398
398
  children: [
399
399
  /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
400
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
401
- gap: "2",
400
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
401
+ gap: "sm",
402
402
  children: [
403
403
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
404
404
  variant: "headingSm",
405
405
  children: "Actions"
406
406
  }),
407
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
408
- gap: "2",
407
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
408
+ gap: "sm",
409
409
  children: [
410
410
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
411
411
  size: "slim",
@@ -428,15 +428,15 @@ var SlimSidebar = {
428
428
  borderBlockStartWidth: "1",
429
429
  borderColor: "border",
430
430
  paddingBlockStart: "4",
431
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
432
- gap: "2",
431
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
432
+ gap: "sm",
433
433
  children: [
434
434
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
435
435
  variant: "headingSm",
436
436
  children: "Info"
437
437
  }),
438
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
439
- gap: "1",
438
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
439
+ gap: "xs",
440
440
  children: [
441
441
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
442
442
  variant: "caption",
@@ -481,8 +481,8 @@ var StickySection = {
481
481
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
482
482
  title: "Long Article",
483
483
  padded: true,
484
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
485
- gap: "6",
484
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
485
+ gap: "md",
486
486
  children: [
487
487
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
488
488
  variant: "headingLg",
@@ -523,15 +523,15 @@ var StickySection = {
523
523
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
524
524
  title: "Sticky Navigation",
525
525
  padded: true,
526
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
527
- gap: "4",
526
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
527
+ gap: "md",
528
528
  children: [
529
529
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
530
530
  variant: "headingSm",
531
531
  children: "Table of Contents"
532
532
  }),
533
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
534
- gap: "2",
533
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
534
+ gap: "sm",
535
535
  children: Array.from({
536
536
  length: 10
537
537
  }, function(_, i) {
@@ -556,8 +556,8 @@ var StickySection = {
556
556
  paddingBlockStart: "4",
557
557
  borderBlockStartWidth: "1",
558
558
  borderColor: "border",
559
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
560
- gap: "2",
559
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
560
+ gap: "sm",
561
561
  children: [
562
562
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
563
563
  variant: "headingSm",
@@ -606,21 +606,21 @@ var SettingsLayout = {
606
606
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Layout.default, {
607
607
  children: [
608
608
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_LayoutSection.default, {
609
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
610
- gap: "8",
609
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
610
+ gap: "lg",
611
611
  children: [
612
612
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
613
613
  title: "Profile Information",
614
614
  padded: true,
615
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
616
- gap: "4",
615
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
616
+ gap: "md",
617
617
  children: [
618
618
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
619
619
  columns: 2,
620
620
  gap: "4",
621
621
  children: [
622
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
623
- gap: "2",
622
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
623
+ gap: "sm",
624
624
  children: [
625
625
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
626
626
  variant: "bodySm",
@@ -638,8 +638,8 @@ var SettingsLayout = {
638
638
  })
639
639
  ]
640
640
  }),
641
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
642
- gap: "2",
641
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
642
+ gap: "sm",
643
643
  children: [
644
644
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
645
645
  variant: "bodySm",
@@ -659,8 +659,8 @@ var SettingsLayout = {
659
659
  })
660
660
  ]
661
661
  }),
662
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
663
- gap: "2",
662
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
663
+ gap: "sm",
664
664
  children: [
665
665
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
666
666
  variant: "bodySm",
@@ -684,11 +684,11 @@ var SettingsLayout = {
684
684
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
685
685
  title: "Password & Security",
686
686
  padded: true,
687
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
688
- gap: "4",
687
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
688
+ gap: "md",
689
689
  children: [
690
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
691
- gap: "2",
690
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
691
+ gap: "sm",
692
692
  children: [
693
693
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
694
694
  variant: "bodySm",
@@ -710,8 +710,8 @@ var SettingsLayout = {
710
710
  columns: 2,
711
711
  gap: "4",
712
712
  children: [
713
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
714
- gap: "2",
713
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
714
+ gap: "sm",
715
715
  children: [
716
716
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
717
717
  variant: "bodySm",
@@ -729,8 +729,8 @@ var SettingsLayout = {
729
729
  })
730
730
  ]
731
731
  }),
732
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
733
- gap: "2",
732
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
733
+ gap: "sm",
734
734
  children: [
735
735
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
736
736
  variant: "bodySm",
@@ -753,8 +753,9 @@ var SettingsLayout = {
753
753
  ]
754
754
  })
755
755
  }),
756
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
757
- gap: "4",
756
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
757
+ horizontal: true,
758
+ gap: "md",
758
759
  children: [
759
760
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
760
761
  primary: true,
@@ -770,14 +771,14 @@ var SettingsLayout = {
770
771
  }),
771
772
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_LayoutSection.default, {
772
773
  sidebar: true,
773
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
774
- gap: "4",
774
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
775
+ gap: "md",
775
776
  children: [
776
777
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
777
778
  title: "Settings Menu",
778
779
  padded: true,
779
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
780
- gap: "2",
780
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
781
+ gap: "sm",
781
782
  children: [
782
783
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
783
784
  size: "slim",
@@ -821,10 +822,11 @@ var SettingsLayout = {
821
822
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
822
823
  title: "Account Status",
823
824
  padded: true,
824
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
825
- gap: "2",
825
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
826
+ gap: "sm",
826
827
  children: [
827
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
828
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
829
+ horizontal: true,
828
830
  align: "space-between",
829
831
  children: [
830
832
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -837,7 +839,8 @@ var SettingsLayout = {
837
839
  })
838
840
  ]
839
841
  }),
840
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
842
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
843
+ horizontal: true,
841
844
  align: "space-between",
842
845
  children: [
843
846
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -853,7 +856,8 @@ var SettingsLayout = {
853
856
  })
854
857
  ]
855
858
  }),
856
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
859
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
860
+ horizontal: true,
857
861
  align: "space-between",
858
862
  children: [
859
863
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -891,8 +895,8 @@ var DashboardLayout = {
891
895
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Layout.default, {
892
896
  children: [
893
897
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_LayoutSection.default, {
894
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
895
- gap: "8",
898
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
899
+ gap: "lg",
896
900
  children: [
897
901
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Grid.default, {
898
902
  columns: {
@@ -903,8 +907,8 @@ var DashboardLayout = {
903
907
  children: [
904
908
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
905
909
  padded: true,
906
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
907
- gap: "1",
910
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
911
+ gap: "xs",
908
912
  inlineAlign: "center",
909
913
  children: [
910
914
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -921,8 +925,8 @@ var DashboardLayout = {
921
925
  }),
922
926
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
923
927
  padded: true,
924
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
925
- gap: "1",
928
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
929
+ gap: "xs",
926
930
  inlineAlign: "center",
927
931
  children: [
928
932
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -939,8 +943,8 @@ var DashboardLayout = {
939
943
  }),
940
944
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
941
945
  padded: true,
942
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
943
- gap: "1",
946
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
947
+ gap: "xs",
944
948
  inlineAlign: "center",
945
949
  children: [
946
950
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -960,7 +964,7 @@ var DashboardLayout = {
960
964
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
961
965
  title: "Performance Over Time",
962
966
  padded: true,
963
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
967
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
964
968
  blockAlign: "center",
965
969
  inlineAlign: "center",
966
970
  as: _Box.default,
@@ -979,8 +983,8 @@ var DashboardLayout = {
979
983
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
980
984
  title: "Recent Activity",
981
985
  padded: true,
982
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
983
- gap: "2",
986
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
987
+ gap: "sm",
984
988
  children: Array.from({
985
989
  length: 5
986
990
  }, function(_, i) {
@@ -989,7 +993,8 @@ var DashboardLayout = {
989
993
  borderWidth: "1",
990
994
  borderColor: "border",
991
995
  borderRadius: "1",
992
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
996
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
997
+ horizontal: true,
993
998
  align: "space-between",
994
999
  children: [
995
1000
  /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
@@ -1015,14 +1020,14 @@ var DashboardLayout = {
1015
1020
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_LayoutSection.default, {
1016
1021
  sidebar: "slim",
1017
1022
  sticky: true,
1018
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
1019
- gap: "4",
1023
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1024
+ gap: "md",
1020
1025
  children: [
1021
1026
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
1022
1027
  title: "Filters",
1023
1028
  padded: true,
1024
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
1025
- gap: "2",
1029
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1030
+ gap: "sm",
1026
1031
  children: [
1027
1032
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1028
1033
  variant: "bodySm",
@@ -1053,11 +1058,12 @@ var DashboardLayout = {
1053
1058
  children: "Source"
1054
1059
  })
1055
1060
  }),
1056
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
1057
- gap: "1",
1061
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1062
+ gap: "xs",
1058
1063
  children: [
1059
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
1060
- gap: "2",
1064
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1065
+ horizontal: true,
1066
+ gap: "sm",
1061
1067
  blockAlign: "center",
1062
1068
  children: [
1063
1069
  /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
@@ -1070,8 +1076,9 @@ var DashboardLayout = {
1070
1076
  })
1071
1077
  ]
1072
1078
  }),
1073
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
1074
- gap: "2",
1079
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1080
+ horizontal: true,
1081
+ gap: "sm",
1075
1082
  blockAlign: "center",
1076
1083
  children: [
1077
1084
  /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
@@ -1084,8 +1091,9 @@ var DashboardLayout = {
1084
1091
  })
1085
1092
  ]
1086
1093
  }),
1087
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
1088
- gap: "2",
1094
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1095
+ horizontal: true,
1096
+ gap: "sm",
1089
1097
  blockAlign: "center",
1090
1098
  children: [
1091
1099
  /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
@@ -1105,8 +1113,8 @@ var DashboardLayout = {
1105
1113
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
1106
1114
  title: "Export",
1107
1115
  padded: true,
1108
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
1109
- gap: "2",
1116
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1117
+ gap: "sm",
1110
1118
  children: [
1111
1119
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
1112
1120
  size: "slim",
@@ -1148,8 +1156,8 @@ var ResponsiveBehavior = {
1148
1156
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
1149
1157
  title: "Main Content Area",
1150
1158
  padded: true,
1151
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
1152
- gap: "4",
1159
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1160
+ gap: "md",
1153
1161
  children: [
1154
1162
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1155
1163
  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."
@@ -1174,7 +1182,7 @@ var ResponsiveBehavior = {
1174
1182
  padding: "4",
1175
1183
  background: "bg-surface-info-subdued",
1176
1184
  borderRadius: "1",
1177
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
1185
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Stack.default, {
1178
1186
  inlineAlign: "center",
1179
1187
  children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
1180
1188
  children: [
@@ -1196,15 +1204,15 @@ var ResponsiveBehavior = {
1196
1204
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
1197
1205
  title: "Responsive Sidebar",
1198
1206
  padded: true,
1199
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
1200
- gap: "4",
1207
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1208
+ gap: "md",
1201
1209
  children: [
1202
1210
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1203
1211
  variant: "headingSm",
1204
1212
  children: "Breakpoint Info"
1205
1213
  }),
1206
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
1207
- gap: "1",
1214
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1215
+ gap: "xs",
1208
1216
  children: [
1209
1217
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1210
1218
  variant: "bodySm",
@@ -1222,15 +1230,15 @@ var ResponsiveBehavior = {
1222
1230
  }),
1223
1231
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
1224
1232
  paddingBlockStart: "4",
1225
- children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
1226
- gap: "2",
1233
+ children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1234
+ gap: "sm",
1227
1235
  children: [
1228
1236
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
1229
1237
  variant: "headingSm",
1230
1238
  children: "Test Actions"
1231
1239
  }),
1232
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
1233
- gap: "2",
1240
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
1241
+ gap: "sm",
1234
1242
  children: [
1235
1243
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
1236
1244
  size: "slim",
package/dist/cjs/stories/Link.stories.js CHANGED
@@ -39,11 +39,10 @@ _export(exports, {
39
39
  });
40
40
  var _jsxruntime = require("react/jsx-runtime");
41
41
  var _transformers = require("../utilities/transformers.js");
42
+ var _Stack = /*#__PURE__*/ _interop_require_default(require("../components/Stack.js"));
42
43
  var _Link = /*#__PURE__*/ _interop_require_default(require("../components/Link.js"));
43
44
  var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
44
45
  var _Icon = /*#__PURE__*/ _interop_require_default(require("../components/Icon.js"));
45
- var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("../components/VerticalStack.js"));
46
- var _HorizontalStack = /*#__PURE__*/ _interop_require_default(require("../components/HorizontalStack.js"));
47
46
  var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
48
47
  var _polarisicons = require("@shopify/polaris-icons");
49
48
  function _interop_require_default(obj) {
@@ -167,8 +166,8 @@ var External = {
167
166
  };
168
167
  var Colors = {
169
168
  render: function() {
170
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
171
- gap: "1",
169
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
170
+ gap: "xs",
172
171
  children: [
173
172
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Link.default, {
174
173
  url: "#",
@@ -257,11 +256,12 @@ var InText = {
257
256
  };
258
257
  var WithIcon = {
259
258
  render: function() {
260
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_VerticalStack.default, {
261
- gap: "1",
259
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
260
+ gap: "xs",
262
261
  children: [
263
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
264
- gap: "0.25",
262
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
263
+ horizontal: true,
264
+ gap: "xs",
265
265
  align: "center",
266
266
  children: [
267
267
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Link.default, {
@@ -277,8 +277,9 @@ var WithIcon = {
277
277
  })
278
278
  ]
279
279
  }),
280
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
281
- gap: "0.25",
280
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
281
+ horizontal: true,
282
+ gap: "xs",
282
283
  align: "center",
283
284
  children: [
284
285
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Link.default, {
@@ -393,8 +394,9 @@ var CallToAction = {
393
394
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
394
395
  children: "Join thousands of businesses already using our platform."
395
396
  }),
396
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_HorizontalStack.default, {
397
- gap: "1",
397
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
398
+ horizontal: true,
399
+ gap: "xs",
398
400
  align: "center",
399
401
  children: [
400
402
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_Link.default, {